/* Layout: 中央1080pxの単一カラム。ホームは学問の横並び、
   学問ページは上部タブ＋2列のツールカード。地は白、青は差し色だけ。 */

/* hidden を付けた部品は、display を指定していても必ず隠す */
[hidden]{display:none!important}
:root{
  /* 実物の色（テーマで変えない）：ピアノの鍵盤・夜空・星など、本物の見た目を表すときだけ使う */
  --real-white:#ffffff;--real-black:#1b1b1b;--real-night:#0b1a33;--real-star:#cfe3ff;--real-star-warm:#ffd166;
  /* ルービックキューブの面の色（白・オレンジ・緑・赤・青・黄） */
  --real-cube-white:#ffffff;--real-cube-orange:#ff5800;--real-cube-green:#009b48;--real-cube-red:#b71234;--real-cube-blue:#0046ad;--real-cube-yellow:#ffd500;
  /* 板チョコの色（チョコレート本体・かけらの境目のみぞ） */
  --real-choco:#5c3a24;--real-choco-edge:#3a2214;
  --page:#f3f5f8;      /* 地（カードと差をつけるため少し灰色） */
  --bg:#ffffff;        /* カード面 */
  --surface:#f7f8fa;
  --surface-2:#f1f3f5;
  --line:#dde1e7;
  --line-2:#c6cbd3;
  --ink:#16191f;
  --ink-2:#6b7280;
  --blue:#1b7cf2;
  --blue-head:#1b7cf2;   /* ヘッダーの塗り。白文字が乗る */
  --blue-wash:#e8f2ff;
  /* 図の線を色分けするときの色（青は --blue を使う） */
  --red:#e5484d;
  --green:#2e9e5b;
  --cyan:#2bb3d9;
  --yellow:#e2b100;
  --purple:#8b5cf6;   /* 四色定理の 4 色目など。白い地の上でも読めるよう少し濃いめ */
  --shadow:0 1px 2px rgba(20,24,32,.06),0 1px 10px rgba(20,24,32,.03);

  --f-ui:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,-apple-system,"Noto Sans JP",sans-serif;
  --f-num:"Zen Kaku Gothic New",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#0c0f13;
    --bg:#171b21;
    --surface:#1e232a;
    --surface-2:#242a32;
    --line:#2d333c;
    --line-2:#424a55;
    --ink:#e9ecf1;
    --ink-2:#98a0ad;
    --blue:#4e9dff;
    --blue-head:#1a4a86;
    --blue-wash:#17283d;
    --red:#ff6b6b;
    --green:#4cc38a;
    --cyan:#5fd0ea;
    --yellow:#f5c84c;
    --purple:#b197fc;
    --shadow:0 1px 2px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --page:#0c0f13;
  --bg:#171b21;
  --surface:#1e232a;
  --surface-2:#242a32;
  --line:#2d333c;
  --line-2:#424a55;
  --ink:#e9ecf1;
  --ink-2:#98a0ad;
  --blue:#4e9dff;
  --blue-head:#1a4a86;
  --blue-wash:#17283d;
  --red:#ff6b6b;
  --green:#4cc38a;
  --cyan:#5fd0ea;
  --yellow:#f5c84c;
  --purple:#b197fc;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0;
  /* 日本語は文節の切れ目で折り返す（対応していないブラウザでは今までどおり） */
  word-break:auto-phrase;line-break:strict;
  background:var(--page);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding-inline:20px}

/* ---- header ---- */
.site-head{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  height:116px;color:#fff;
  /* ヘッダーの箱は四角だが、見えているのは波の青い部分だけ。透明な部分は下のページを押せるようにする */
  pointer-events:none;
}
.site-head a,.site-head button,.headwave path{pointer-events:auto}
/* 画面幅いっぱいに1本の曲線。境目から上を青で塗る */
.headwave{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;color:var(--blue-head);pointer-events:none;
}
.site-head .wrap{position:relative;display:flex;align-items:center;gap:16px;height:56px}
.brand{
  font-size:32px;font-weight:900;letter-spacing:.05em;line-height:1.2;white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
@media (max-width:480px){.brand{font-size:24px;letter-spacing:.02em}}
@media (max-width:400px){.brand{font-size:20px;letter-spacing:0}.site-head .wrap{gap:6px}.site-head .ghost{padding:5px 8px}}
@media (max-width:340px){.brand{font-size:16px}.site-head .ghost{padding:4px 6px;font-size:11.5px}}
.site-head .wrap{gap:8px;height:68px}
.site-head{height:128px}
.head-sp{flex:1}
.ghost{
  white-space:nowrap;
  padding:6px 12px;border:1px solid var(--line);border-radius:7px;
  font-size:12.5px;color:var(--ink-2);
}
.ghost:hover{border-color:var(--line-2);color:var(--ink)}
.site-head .ghost{border-color:rgba(255,255,255,.5);color:#fff}
/* 狭い画面では「メニュー」を出さない（左上のサイト名からトップへ行ける） */
@media (max-width:540px){.site-head a.ghost[href="/"]{display:none}}
.site-head .ghost.find{display:inline-flex;align-items:center;justify-content:center;padding-left:10px;padding-right:10px}
.site-head .ghost:hover{border-color:#fff;background:rgba(255,255,255,.14);color:#fff}

/* ---- section ---- */
.sec{padding-block:30px}
.sec:first-child{padding-top:40px}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sec-head h2{margin:0;font-size:16px;font-weight:700;letter-spacing:.01em}
.sec-head .sp{flex:1}

/* ---- subject row（横並び・正方形アイコン） ---- */
.subjects{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
@media (max-width:560px){.subjects{grid-template-columns:repeat(2,1fr)}}
.subj{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:22px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg);box-shadow:var(--shadow);
  transition:border-color .18s,background .18s;
  text-align:left;width:100%;
}
.subj:not(.off):hover{border-color:var(--blue)}
.subj .sq{
  width:68px;height:68px;flex:none;
  border:1px solid var(--line);border-radius:11px;background:var(--blue-wash);
  display:grid;place-items:center;color:var(--ink);
}
.subj .sico{width:42px;height:42px;display:block}
.subj .nm{display:block;font-size:26px;font-weight:900;line-height:1.3;letter-spacing:.04em;margin-bottom:4px}
.subj .ds{font-size:13.5px;color:var(--ink-2);line-height:1.65}
@media (max-width:560px){.subj{padding:16px;gap:10px}.subj .sq{width:56px;height:56px}.subj .sico{width:34px;height:34px}.subj .nm{font-size:22px}.subj .ds{font-size:12.5px}}
.subj.off{cursor:default;background:var(--surface)}
.subj.off .sq{background:var(--bg);color:var(--ink-2)}
.subj.off .nm,.subj.off .ds{color:var(--ink-2)}

/* ---- tool cards ---- */
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:900px){.tools{grid-template-columns:minmax(0,1fr);gap:16px}}
.card{
  display:flex;gap:24px;align-items:flex-start;min-height:172px;
  padding:26px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg);text-align:left;width:100%;
  box-shadow:var(--shadow);
  transition:border-color .18s,background .18s;
}
.card:hover{border-color:var(--blue)}
.card .ico{
  width:120px;height:120px;flex:none;border-radius:12px;
  border:1px solid var(--line);
  background:var(--blue-wash);color:var(--ink);
  transition:background .18s,border-color .18s;
}
.card:hover .ico{background:var(--bg);border-color:var(--line-2)}
.card .bd{min-width:0;flex:1}
.card .nm{display:block;font-size:19.5px;font-weight:700;line-height:1.45;margin-bottom:6px;overflow-wrap:anywhere}
.card .ds{display:block;font-size:15px;color:var(--ink-2);line-height:1.8;text-wrap:pretty;overflow-wrap:anywhere}
/* スマホ：アイコンと名前を横に並べ、説明は下に全幅で */
@media (max-width:480px){
  .card{
    display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"ico nm" "ico tg" "ds ds";
    align-items:start;gap:4px 16px;padding:18px;min-height:0;
  }
  .card .ico{grid-area:ico;width:84px;height:84px}
  .card .bd{display:contents}
  .card .nm{grid-area:nm;font-size:18px;margin:2px 0 0}
  .card .tags{grid-area:tg;margin:6px 0 0}
  .card .ds{grid-area:ds;margin-top:12px;font-size:14.5px;line-height:1.8}
}

/* ---- tabs（角丸は小さめ・長方形寄り） ---- */
/* 横にすべらせず、入りきらないぶんは次の行に折り返す */
.tabs{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;padding:8px 18px;border-radius:5px;font-size:14px;
  border:1px solid var(--line);color:var(--ink-2);white-space:nowrap;
  transition:.15s;
}
.tab:hover{color:var(--ink);border-color:var(--line-2)}
/* 教科ページの項目のタブは大きめに（ツールの中のタブはそのまま） */
.tab[data-cat]{padding:9px 20px;font-size:16px}
.tab[aria-selected="true"]{
  background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700;
}

/* ---- タグ ---- */
.tags{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}
.tag{
  display:inline-block;padding:0 8px;border:1px solid var(--line);border-radius:4px;
  background:var(--surface);font-size:11.5px;font-weight:700;line-height:1.8;color:var(--ink-2);
}
.viewbadge{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:50;padding:6px 12px;border:2px solid var(--red);border-radius:6px;background:var(--bg);color:var(--red);font-size:13px;font-weight:700}
.tag.unpub{border-color:var(--red);color:var(--red);background:var(--bg)}
.tag.solver,.tag.course{border-color:var(--blue);background:var(--blue-wash);color:var(--blue)}
.ptags{margin:-12px 0 18px}
/* よく出てくる言葉のタグ（人名・数の名前） */
.tag.kw{background:var(--bg);border-style:dashed}
/* 検索 */
#search{scroll-margin-top:200px}
.search{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.search input{flex:1;min-width:0;padding:10px 14px;border:2px solid var(--line-2);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.search input:focus{outline:none;border-color:var(--blue)}
.found-n{font-size:13px;color:var(--ink-2);white-space:nowrap}
#found:empty{display:none}
/* ツールのページの下の関連ツール */
.related{margin-top:40px}
.step-h{margin:24px 0 12px;font-size:15px;font-weight:700}
a.tag:hover{border-color:var(--blue)}
.tagbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tagbar:empty{display:none}
/* 学問ページ：学問名を大きく、タグと項目には見出しを付けて間をあける */
.ptitle.stitle{font-size:34px;margin-bottom:26px}
.flabel{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--ink-2)}
.stitle ~ .tagbar{margin-bottom:26px}
.stitle ~ .tabs{margin-bottom:32px}
.lcount{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--ink-2)}
.chip{
  padding:5px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;
  color:var(--ink-2);background:var(--bg);transition:.15s;
}
.chip:hover{color:var(--ink);border-color:var(--line-2)}
.chip[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-wash);color:var(--blue);font-weight:700}

/* ---- 戻る ---- */
.pnav{display:flex;padding-top:24px}
.pbtn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px 8px 12px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--bg);font-size:14px;font-weight:700;color:var(--ink);
  transition:border-color .15s,color .15s;
}
.pbtn:hover{border-color:var(--blue);color:var(--blue)}
.pbtn svg{width:16px;height:16px;flex:none}
.pnav + .crumb{padding-top:14px}

/* ---- crumb ---- */
.crumb{
  display:flex;align-items:center;gap:7px;
  padding-block:24px 4px;font-size:13px;color:var(--ink-2);
}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.45}

/* ---- page title ---- */
.ptitle{margin:0 0 20px;font-size:27px;font-weight:700;letter-spacing:-.01em}
.psub{margin:-14px 0 24px;color:var(--ink-2);font-size:14px}
/* トップのサイトの副題 */
.tagline{margin:0 0 16px;color:var(--ink-2);font-size:14px}

/* ---- tool stub ---- */
.stub{
  border:1px dashed var(--line-2);border-radius:12px;background:var(--bg);
  padding:60px 24px;text-align:center;color:var(--ink-2);
}
.stub .big{width:84px;height:84px;margin:0 auto 12px;color:var(--ink-2);opacity:.7}
.stub strong{display:block;color:var(--ink);font-size:16px}

/* ---- footer ---- */
.site-foot{
  margin-top:56px;border-top:1px solid var(--line);
  padding-block:24px 40px;font-size:12.5px;color:var(--ink-2);
}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.site-foot a:hover{color:var(--ink)}
.site-foot .sp{flex:1;min-width:20px}

/* ---- 解説（ツールの下） ---- */
.note{max-width:760px;margin-top:36px}
.note h2{margin:0 0 4px;padding-left:12px;border-left:4px solid var(--blue);font-size:19px;font-weight:700;line-height:1.4}
.note h3{margin:22px 0 6px;font-size:15.5px;font-weight:700}
.note p{margin:0 0 8px;font-size:14.5px;line-height:1.95;text-wrap:pretty;overflow-wrap:anywhere}
.note .refs{margin:0;padding-left:1.2em;font-size:14px;line-height:2}
/* 解説の図（tests/figs.py で指定。assets/notes/ のファイルを差し替えられる） */
.note .nfig{margin:10px 0 16px}
.note .nfig svg,.note .nfig img{display:block;width:100%;max-width:480px;height:auto}
.note .nfig figcaption{margin-top:4px;font-size:13px;color:var(--ink-2);line-height:1.7}
.note .refs a,.note p a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* ---- タップできるところ ----
   押せるものは青い線でかこむ。押せないものは細い灰色の線のまま */
a.card,a.subj,.tab,.chip,.pbtn,a.tag{border:2px solid var(--blue)}
.tab,.chip{color:var(--ink)}
.tab:hover,.chip:hover,.pbtn:hover,a.tag:hover{border-color:var(--blue);color:var(--blue)}
.tab[aria-selected="true"]:hover{color:#fff}
a.card:hover,a.subj:hover{background:var(--blue-wash)}
.site-head .ghost{border:2px solid #fff}
/* カードの中のタグは押せないので、青い線をつけない */
span.tag.solver,span.tag.course{border-color:var(--blue-wash)}
/* 文字だけのリンクは下線 */
.crumb a,.site-foot a{text-decoration:underline;text-underline-offset:3px}

/* ---- icon animation ----
   カードにカーソルをのせているあいだ、ツールと同じ動きをくり返す。
   大きさは icons.js の style で決める：--a 角度、--x --y 移動、--s 倍率、--t 1回の時間、--e 速さの変化 */
.ico [data-a]{
  transform-box:view-box;transform-origin:28px 28px;
  transition:transform .35s ease-out,opacity .25s,stroke-dashoffset .25s;
}
.ico .a-draw,.ico .a-cutline{stroke-dasharray:100}
.ico .a-fall{opacity:0}

:is(.card:hover,.card:focus-visible) [data-a]{
  animation-duration:var(--t,2s);
  animation-timing-function:var(--e,ease-in-out);
  animation-iteration-count:infinite;
}
:is(.card:hover,.card:focus-visible) .a-swing{animation-name:a-swing}
:is(.card:hover,.card:focus-visible) .a-turn{animation-name:a-turn}
:is(.card:hover,.card:focus-visible) .a-skew{animation-name:a-skew}
:is(.card:hover,.card:focus-visible) .a-shift{animation-name:a-shift}
:is(.card:hover,.card:focus-visible) .a-pulse{animation-name:a-pulse}
:is(.card:hover,.card:focus-visible) .a-grow{animation-name:a-grow}
:is(.card:hover,.card:focus-visible) .a-fold{animation-name:a-fold}
:is(.card:hover,.card:focus-visible) .a-door{animation-name:a-door}
:is(.card:hover,.card:focus-visible) .a-flip{animation-name:a-flip}
:is(.card:hover,.card:focus-visible) .a-draw{animation-name:a-draw}
:is(.card:hover,.card:focus-visible) .a-chase{animation-name:a-chase;--e:ease-out}
:is(.card:hover,.card:focus-visible) .a-spin{animation-name:a-spin;animation-timing-function:var(--e,linear)}
:is(.card:hover,.card:focus-visible) .a-run{animation-name:a-run;animation-timing-function:linear}
:is(.card:hover,.card:focus-visible) .a-circuit{animation-name:a-circuit;animation-timing-function:linear;animation-duration:2.4s}
:is(.card:hover,.card:focus-visible) .a-throw{animation-name:a-throw;animation-timing-function:linear;animation-duration:1.5s}
:is(.card:hover,.card:focus-visible) .a-fall{animation-name:a-fall;animation-timing-function:linear;animation-duration:1.3s}
:is(.card:hover,.card:focus-visible) .a-hop{animation-name:a-hop;animation-timing-function:step-end;animation-duration:2.4s}
:is(.card:hover,.card:focus-visible) .a-plot{animation-name:a-plot;animation-delay:var(--d,0s);animation-fill-mode:backwards;animation-duration:2.4s}
:is(.card:hover,.card:focus-visible) .a-rise{animation-name:a-rise}
:is(.card:hover,.card:focus-visible) .a-stretch{animation-name:a-stretch}
:is(.card:hover,.card:focus-visible) .a-tip{animation-name:a-tip}
:is(.card:hover,.card:focus-visible) .a-in1{animation-name:a-in1;animation-duration:var(--t,2.8s)}
:is(.card:hover,.card:focus-visible) .a-in2{animation-name:a-in2;animation-duration:var(--t,2.8s)}
:is(.card:hover,.card:focus-visible) .a-in3{animation-name:a-in3;animation-duration:var(--t,2.8s)}
:is(.card:hover,.card:focus-visible) .a-in4{animation-name:a-in4;animation-duration:var(--t,2.8s)}
:is(.card:hover,.card:focus-visible) .a-bounce{animation-name:a-bounce}
:is(.card:hover,.card:focus-visible) .a-sway{animation-name:a-sway}
:is(.card:hover,.card:focus-visible) .a-cutline{animation-name:a-cutline}
:is(.card:hover,.card:focus-visible) .a-split{animation-name:a-split}
:is(.card:hover,.card:focus-visible) .a-eight{animation-name:a-eight;animation-timing-function:linear}
:is(.card:hover,.card:focus-visible) .a-drop{animation-name:a-drop}

/* 左右にゆれる（ふりこ・天秤・てこ・かたむく線）
   振り子と同じく、まん中でいちばん速く、両はしで止まる（正弦波に近い速さの変化）。まん中で止まらないように、区間ごとに速さの変化を決める */
@keyframes a-swing{
  0%{transform:rotate(0);animation-timing-function:cubic-bezier(.61,1,.88,1)}
  25%{transform:rotate(var(--a,10deg));animation-timing-function:cubic-bezier(.37,0,.63,1)}
  75%{transform:rotate(calc(var(--a,10deg) * -1));animation-timing-function:cubic-bezier(.12,0,.39,0)}
  100%{transform:rotate(0)}
}
/* 片側へ回ってもどる */
@keyframes a-turn{
  0%,100%{transform:rotate(0)}
  50%{transform:rotate(var(--a,20deg))}
}
/* 回りつづける（転がる・サイコロ） */
@keyframes a-spin{to{transform:rotate(360deg)}}
/* 底辺をとめて、ななめにずれる */
@keyframes a-skew{
  0%,100%{transform:skewX(0)}
  25%{transform:skewX(var(--a,10deg))}
  75%{transform:skewX(calc(var(--a,10deg) * -1))}
}
/* 行ってもどる（液面・ピストン・円ばん） */
@keyframes a-shift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(var(--x,0px),var(--y,0px))}
}
/* 同じ向きに流れつづける（波） */
@keyframes a-run{
  from{transform:translate(0,0)}
  to{transform:translate(var(--x,0px),var(--y,0px))}
}
@keyframes a-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(var(--s,1.3))}
}
/* もとの点から線がのびる */
@keyframes a-grow{
  0%{transform:scale(.1)}
  60%,100%{transform:scale(1)}
}
/* 折り目（45°の線）で折り返す */
@keyframes a-fold{
  0%,100%{transform:rotate(45deg) scaleY(1) rotate(-45deg)}
  50%{transform:rotate(45deg) scaleY(-1) rotate(-45deg)}
}
/* ドアが開いて閉じる */
@keyframes a-door{
  0%,100%{transform:scaleX(1)}
  35%,70%{transform:scaleX(.25)}
}
/* 月の明暗のさかい目が左右に動く */
@keyframes a-flip{
  0%,100%{transform:scaleX(1)}
  50%{transform:scaleX(-1)}
}
/* 線が左からかかれていく（pathLength="100" の線に使う） */
@keyframes a-draw{
  0%{stroke-dashoffset:100}
  75%,100%{stroke-dashoffset:0}
}
/* 進む幅がだんだん小さくなる（アキレスと亀） */
@keyframes a-chase{
  0%{transform:translateX(0)}
  40%{transform:translateX(9px)}
  65%{transform:translateX(13.5px)}
  85%,100%{transform:translateX(15.5px)}
}
/* 回路を1周する */
@keyframes a-circuit{
  0%,100%{transform:translate(0,0)}
  8%{transform:translate(-10px,0)}
  30%{transform:translate(-10px,-28px)}
  58%{transform:translate(25px,-28px)}
  80%{transform:translate(25px,0)}
}
/* 放物線の上をとぶ */
@keyframes a-throw{
  0%{transform:translate(-12px,23px)}
  12.5%{transform:translate(-7.5px,12px)}
  25%{transform:translate(-3px,4.25px)}
  37.5%{transform:translate(1.5px,-.4px)}
  50%{transform:translate(6px,-2px)}
  62.5%{transform:translate(10.5px,-.4px)}
  75%{transform:translate(15px,4.25px)}
  87.5%{transform:translate(19.5px,12px)}
  100%{transform:translate(24px,23px)}
}
/* 玉がくぎに当たりながら落ちる */
@keyframes a-fall{
  0%{transform:translate(0,0);opacity:1}
  30%{transform:translate(-3px,9px)}
  55%{transform:translate(2px,17px)}
  80%{transform:translate(-1px,25px);opacity:1}
  100%{transform:translate(0,30px);opacity:0}
}
/* ×印がマスを順に移る */
@keyframes a-hop{
  0%{transform:translate(-12px,-12px)}
  25%{transform:translate(12px,-12px)}
  50%{transform:translate(0,0)}
  75%{transform:translate(-12px,12px)}
}
/* 点が順にうたれる */
@keyframes a-plot{
  0%{opacity:0}
  10%,100%{opacity:1}
}
/* 棒が下からのびる（transform-origin を棒の下の端の高さにする） */
@keyframes a-rise{
  0%{transform:scaleY(.05)}
  60%,100%{transform:scaleY(1)}
}
/* 液面が上がって下がる（下の端をとめて、たてにのびちぢみする） */
@keyframes a-stretch{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(var(--s,1.2))}
}
/* 線がかき終わってから、矢じりが出る（a-draw と同じ時間で使う） */
@keyframes a-tip{
  0%,70%{opacity:0}
  76%,100%{opacity:1}
}
/* 順に現れる（1 → 2 → 3 → 4 の順。全部そろったら、はじめからくり返す） */
@keyframes a-in1{0%,6%{opacity:0}12%,100%{opacity:1}}
@keyframes a-in2{0%,24%{opacity:0}30%,100%{opacity:1}}
@keyframes a-in3{0%,42%{opacity:0}48%,100%{opacity:1}}
@keyframes a-in4{0%,60%{opacity:0}66%,100%{opacity:1}}
/* 進んで、ぶつかったら向きを変えて、もとの位置へもどる */
@keyframes a-bounce{
  0%{transform:translateX(0) scaleX(1)}
  40%{transform:translateX(var(--x,0px)) scaleX(1)}
  50%{transform:translateX(var(--x,0px)) scaleX(-1)}
  90%{transform:translateX(0) scaleX(-1)}
  100%{transform:translateX(0) scaleX(1)}
}
/* 左右にゆれる（平行に動く） */
@keyframes a-sway{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(var(--x,6px))}
  75%{transform:translateX(calc(var(--x,6px) * -1))}
}
/* 切れ目の線を速くかき、かけらが分かれはじめたら消す（a-split と同じ時間で使う） */
@keyframes a-cutline{
  0%{stroke-dashoffset:100;opacity:1}
  35%,40%{stroke-dashoffset:0;opacity:1}
  48%,100%{stroke-dashoffset:0;opacity:0}
}
/* 8 の字の軌道を 1 周する（三体問題。体どうしは animation-delay で 1/3 周ずつずらす） */
@keyframes a-eight{
  0.000%{transform:translate(28.00px,28.00px)}
  4.167%{transform:translate(31.56px,23.83px)}
  8.333%{transform:translate(35.85px,21.33px)}
  12.500%{transform:translate(40.25px,20.50px)}
  16.667%{transform:translate(44.15px,21.33px)}
  20.833%{transform:translate(46.94px,23.83px)}
  25.000%{transform:translate(48.00px,28.00px)}
  29.167%{transform:translate(46.94px,32.17px)}
  33.333%{transform:translate(44.15px,34.67px)}
  37.500%{transform:translate(40.25px,35.50px)}
  41.667%{transform:translate(35.85px,34.67px)}
  45.833%{transform:translate(31.56px,32.17px)}
  50.000%{transform:translate(28.00px,28.00px)}
  54.167%{transform:translate(24.44px,23.83px)}
  58.333%{transform:translate(20.15px,21.33px)}
  62.500%{transform:translate(15.75px,20.50px)}
  66.667%{transform:translate(11.85px,21.33px)}
  70.833%{transform:translate(9.06px,23.83px)}
  75.000%{transform:translate(8.00px,28.00px)}
  79.167%{transform:translate(9.06px,32.17px)}
  83.333%{transform:translate(11.85px,34.67px)}
  87.500%{transform:translate(15.75px,35.50px)}
  91.667%{transform:translate(20.15px,34.67px)}
  95.833%{transform:translate(24.44px,32.17px)}
  100.000%{transform:translate(28.00px,28.00px)}
}
/* 上の外から落ちてきて、下の外へ通りぬける（ものさし）。落ちるあいだはだんだん速くなる */
@keyframes a-drop{
  0%{transform:translateY(var(--y,-46px));animation-timing-function:cubic-bezier(.55,.06,.68,.19)}
  80%,100%{transform:translateY(calc(var(--y,-46px) * -1.2))}
}
/* 切れ目のところで分かれて、もどる */
@keyframes a-split{
  0%,40%{transform:translate(0,0)}
  60%,85%{transform:translate(var(--x,0px),var(--y,0px))}
  100%{transform:translate(0,0)}
}

@media (prefers-reduced-motion:reduce){
  .ico [data-a]{transition:none;animation:none !important}
}