/* 機能ごとの「動く図」（motion.js が .mo の中に SVG を組み立てる）。.play が付くと 8 秒の流れが動く。
   --d は始まる時刻、--g は消える時刻、--len は出ている長さ。 */
.mo{display:block;margin:18px 0 6px;aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#191a1f,#141518);overflow:hidden}
.mo[hidden]{display:none}
.mo svg{display:block;width:100%;height:100%;font-family:var(--font)}
.mo text{font-size:10.5px;fill:#eceef1}
.mo .t-sub{font-size:9.5px;fill:#93949b}.mo .t-blue{fill:#75b3ff}.mo .t-orange{fill:#f2b45c}.mo .t-green{fill:#6fd49a}.mo .t-pink{fill:#ff8cc0}
.mo .t-chip{font-size:7.5px;font-weight:700;fill:#fff}.mo .t-dark{fill:#0d1626;font-weight:600}.mo .t-end{text-anchor:end;font-size:9.5px}
.mo .t-lyric{font-size:16px;font-weight:800}.mo .t-dim{fill:#4a4d56}
.mo path,.mo line{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mo .s-grey{stroke:#7d828e;stroke-width:1.1}.mo .s-blue{stroke:#4f9dff;stroke-width:2}.mo .s-orange{stroke:#f2a04c;stroke-width:2}.mo .s-green{stroke:#57c785;stroke-width:1.6}.mo .s-pink{stroke:#ff6fb1;stroke-width:2}
.mo .s-scan{stroke:#cfe4ff;stroke-width:1.2;opacity:0}.mo .s-track{stroke:#3a3d46;stroke-width:2}.mo .s-dash{stroke:#8d93a1;stroke-width:1;stroke-dasharray:3 3}.mo .s-thin{stroke:#93949b;stroke-width:1.3}
.mo .s-slot{fill:none;stroke:#3a3d46;stroke-width:1;stroke-dasharray:4 3}
.mo .glow{filter:drop-shadow(0 0 3px rgba(79,157,255,.7))}
.mo rect,.mo circle{stroke:transparent;stroke-width:1.2}
.mo .f-panel{fill:#23252b;stroke:#33353c}.mo .f-card{fill:#2a2c34;stroke:#3c3f49}.mo .f-chip{fill:#30333b}.mo .f-blue{fill:#4f9dff}.mo .f-red{fill:#e5584a}.mo .f-purple{fill:#9b8cf2}.mo .f-green{fill:#57c785}.mo .f-pink{fill:#ff6fb1}.mo .f-sub{fill:#93949b}
.mo .f-warn{fill:rgba(242,160,76,.28)}.mo .f-danger{fill:rgba(229,88,74,.22);stroke:rgba(229,88,74,.6)}
.mo .s-orange-b{stroke:#f2a04c}.mo .s-blue-b{stroke:#4f9dff}
.mo .mv-clean,.mo .mv-fill,.mo .mv-timer,.mo .mv-lyric,.mo .a-pop,.mo .a-drop,.mo .mv-join{transform-box:fill-box}
.mo .mv-clean,.mo .mv-fill,.mo .mv-timer,.mo .mv-lyric{transform-origin:left center}
.mo .a-pop,.mo .mv-join{transform-origin:center}
/* 止まっているとき（はじまりの状態） */
.mo .a-in,.mo .a-drop,.mo .a-pop,.mo .a-flash{opacity:0}
.mo .mv-clean,.mo .mv-fill,.mo .mv-lyric{transform:scaleX(0)}
.mo .mv-shift,.mo .mv-shiftline{transform:translateX(26px)}
.mo .mv-draw{stroke-dasharray:100;stroke-dashoffset:100}
.mo .mv-timer{transform:scaleX(0)}
/* 動き */
.mo.play .a-in{animation:mo-in .45s var(--d,0s) both}
.mo.play .a-out{animation:mo-out .3s var(--d,0s) both}
.mo.play .a-in.a-gone{animation:mo-in .45s var(--d,0s) both,mo-out .3s var(--g,9s) forwards}
.mo.play .a-on{animation:mo-on .4s var(--d,0s) both}
.mo.play .a-flash{animation:mo-in .25s var(--d,0s) both,mo-out .25s calc(var(--d,0s) + var(--len,1s)) forwards}
.mo.play .a-flashbox{animation:mo-on .25s var(--d,0s) both,mo-off .25s calc(var(--d,0s) + var(--len,1s)) forwards}
.mo.play .a-drop{animation:mo-drop .5s var(--d,0s) cubic-bezier(.2,.8,.2,1) both}
.mo.play .a-pop{animation:mo-pop .5s var(--d,0s) cubic-bezier(.3,1.6,.5,1) both}
.mo.play .mv-clean{animation:mo-sx 2.6s 1.4s linear both}
.mo.play .mv-noisy{animation:mo-wipe 2.6s 1.4s linear both}
.mo.play .mv-scan{animation:mo-scan 2.6s 1.4s linear both}
.mo.play .mv-knob{animation:mo-knob .5s .5s ease both}
.mo.play .mv-fill{animation:mo-fill .5s .5s ease both}
.mo.play .mv-shift,.mo.play .mv-shiftline{animation:mo-align .9s 3.2s cubic-bezier(.3,.8,.3,1) both}
.mo.play .mv-pulse{opacity:0;animation:mo-pulse .55s var(--d,0s) 3 both}
.mo.play .mv-timer{animation:mo-timer 8s linear both}
.mo.play .mv-e1{animation:mo-e1 8s ease both}.mo.play .mv-e2{animation:mo-e2 8s ease both}.mo.play .mv-e3{animation:mo-e3 8s ease both}
.mo.play .mv-lyric{animation:mo-sx 5.2s 1s linear both}
.mo.play .mv-head{animation:mo-head 5.2s 1s linear both}
.mo.play .mv-code{animation:mo-code 8s ease both}
.mo.play .mv-draw{animation:mo-draw 3.6s .7s ease both}
.mo.play .mv-dot{animation:mo-dot .9s var(--d,1.2s) infinite both}
.mo.play .mv-join{animation:mo-join .9s var(--d,1.2s) cubic-bezier(.5,0,.3,1) both}
.mo.still *{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important}
@keyframes mo-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes mo-out{from{opacity:1}to{opacity:0}}
@keyframes mo-on{to{fill:#26364f;stroke:#4f9dff}}
@keyframes mo-off{from{fill:#26364f;stroke:#4f9dff}to{fill:#30333b;stroke:transparent}}
@keyframes mo-drop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes mo-pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes mo-sx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mo-wipe{from{transform:translateX(0)}to{transform:translateX(320px)}}
@keyframes mo-scan{0%{transform:translateX(0);opacity:0}6%{opacity:.9}94%{opacity:.9}100%{transform:translateX(320px);opacity:0}}
@keyframes mo-knob{from{transform:translateX(0)}to{transform:translateX(72px)}}
@keyframes mo-fill{from{transform:scaleX(0)}to{transform:scaleX(.6)}}
@keyframes mo-align{from{transform:translateX(26px)}to{transform:translateX(0)}}
@keyframes mo-pulse{0%{opacity:0}40%{opacity:1}100%{opacity:.25}}
@keyframes mo-timer{0%,13%{transform:scaleX(0)}14%{transform:scaleX(1)}57%{transform:scaleX(0)}69%{transform:scaleX(0)}70%{transform:scaleX(1)}100%{transform:scaleX(.3)}}
@keyframes mo-e1{0%,8%{transform:none;opacity:1}14%,57%{transform:translateY(-58px);opacity:1}63%,100%{transform:translateY(-58px);opacity:0}}
@keyframes mo-e2{0%,8%{transform:none}14%,62%{transform:translateY(-30px)}70%,100%{transform:translateY(-88px)}}
@keyframes mo-e3{0%,8%{transform:none}14%,62%{transform:translateY(-30px)}70%,100%{transform:translateY(-60px)}}
@keyframes mo-head{from{transform:translateX(0)}to{transform:translateX(280px)}}
@keyframes mo-code{0%,12%{transform:none;opacity:1}24%{transform:translate(84px,-44px);opacity:1}38%,50%{transform:translate(168px,0);opacity:1}55%,100%{transform:translate(168px,0);opacity:0}}
@keyframes mo-draw{to{stroke-dashoffset:0}}
@keyframes mo-dot{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes mo-join{from{transform:none;opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(.5);opacity:0}}
/* 比較の棒 */
.cmp{margin:14px 0 4px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.cmp-h{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px}
.cmp-row{display:grid;grid-template-columns:minmax(120px,38%) 1fr 38px;gap:10px;align-items:center;margin:7px 0;font-size:12.5px;color:var(--sub)}
.cmp-row b{color:var(--text);font-weight:600}
.cmp-bar{height:10px;border-radius:5px;background:#30333b;overflow:hidden}
.cmp-bar i{display:block;height:100%;width:var(--w);border-radius:5px;background:#6b7080;transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.cmp-row.me .cmp-bar i{background:var(--accent)}.cmp.in .cmp-bar i{transform:none}
.cmp-row:nth-child(3) .cmp-bar i{transition-delay:.15s}.cmp-row:nth-child(4) .cmp-bar i{transition-delay:.3s}
.cmp-v{font-family:var(--mono);color:var(--text);text-align:right}
.cmp-note{margin:10px 0 0;font-size:11.5px;line-height:1.7;color:var(--muted)}.cmp-note a{color:var(--accent2);text-decoration:underline}
.mo-wide{max-width:620px}
@media(prefers-reduced-motion:reduce){.cmp-bar i{transition:none}}