/* 생성 파일 — scripts/manual-figures/*.css 를 build-manual.py 가 묶었다. */
/* ── bind-map.css */
[data-fig=bind-map] .bm-hint{font-size:12px;color:var(--sub);line-height:1.5}
[data-fig=bind-map] .bind-map{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;align-items:center;margin-top:16px}
[data-fig=bind-map] .bind-knob{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
[data-fig=bind-map] .bm-name{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
[data-fig=bind-map] .bind-knob svg{width:118px;height:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
[data-fig=bind-map] .bind-knob svg:active{cursor:grabbing}
[data-fig=bind-map] .bind-knob output{display:block;font:600 16px var(--mono);color:var(--ink)}
[data-fig=bind-map] .bm-arc{stroke:#23b98f}
[data-fig=bind-map] .bm-range{width:118px;margin-top:6px;accent-color:#23b98f}
[data-fig=bind-map] .bm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
[data-fig=bind-map] .bind-rows{display:grid;gap:16px}
[data-fig=bind-map] .bind-row{display:grid;grid-template-columns:86px minmax(0,1fr) 78px;gap:22px 10px;align-items:center;padding:24px 12px 10px;border-radius:7px;background:white;border:1px solid var(--line)}
[data-fig=bind-map] .bind-row b{font-size:12px;font-weight:600;color:var(--ink)}
[data-fig=bind-map] .bind-row output{font:600 14px var(--mono);text-align:right;color:var(--ink)}
[data-fig=bind-map] .bind-track{position:relative;height:10px;border-radius:5px;background:#e3eaeb}
[data-fig=bind-map] .bind-track .span{position:absolute;top:0;bottom:0;background:#bfe9dc;border-radius:5px}
[data-fig=bind-map] .bind-track .val{position:absolute;top:-4px;width:4px;height:18px;margin-left:-2px;border-radius:2px;background:#1c9b77;transition:none}
[data-fig=bind-map] .bind-track .base,[data-fig=bind-map] .bind-track .to{position:absolute;font:600 10px var(--mono);transform:translateX(-50%);white-space:nowrap}
[data-fig=bind-map] .bind-track .base{top:13px;color:var(--sub)}
[data-fig=bind-map] .bind-track .to{bottom:13px;color:#1c7f63}
[data-fig=bind-map] .bm-edit{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:2px;font-size:11px;font-weight:600;color:var(--sub)}
[data-fig=bind-map] .bm-edit label{display:inline-flex;align-items:center;gap:6px}
[data-fig=bind-map] .bm-edit input[type=number]{width:84px;height:30px;font-size:13px}
[data-fig=bind-map] .bm-unit{font:600 11px var(--mono)}
@media(max-width:800px){[data-fig=bind-map] .bind-map{grid-template-columns:1fr}[data-fig=bind-map] .bind-knob{flex-direction:column}}
@media(max-width:520px){[data-fig=bind-map] .bind-row{grid-template-columns:72px minmax(0,1fr) 66px;padding:24px 8px 10px}[data-fig=bind-map] .bind-row output{font-size:12px}[data-fig=bind-map] .bind-track .base,[data-fig=bind-map] .bind-track .to{font-size:9px}}
[data-fig=bind-map] .kn-ring{fill:none;stroke:#d5dee0;stroke-width:5;stroke-linecap:round}
[data-fig=bind-map] .kn-arc{fill:none;stroke:#23b98f;stroke-width:5;stroke-linecap:round}
[data-fig=bind-map] .kn-body{fill:#2a3843}
[data-fig=bind-map] .kn-ind{stroke:white;stroke-width:4;stroke-linecap:round}

/* ── chain.css */
[data-fig=chain] .chain-controls{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:14px}
[data-fig=chain] .chain-ctl{display:flex;align-items:center;gap:10px}
[data-fig=chain] .chain-ctl .calc-label{min-width:0;letter-spacing:.04em}
[data-fig=chain] .chain-scroll{overflow-x:auto;overscroll-behavior-x:contain;border-radius:10px;background:#f3f6f7}
[data-fig=chain] .chain-scroll svg{display:block;width:100%;min-width:640px;height:auto;padding:6px 4px}
[data-fig=chain] .ch-zone rect{fill:none;stroke:#a9bbc0;stroke-width:1.2;stroke-dasharray:5 4}
[data-fig=chain] .ch-zone text{font:600 11px var(--sans);fill:var(--sub);letter-spacing:.02em;dominant-baseline:central}
[data-fig=chain] .ch-wire{fill:none;stroke:#b8c5c9;stroke-width:1.6;transition:stroke .3s,stroke-width .3s}
[data-fig=chain] .ch-wire.on{stroke:var(--ink);stroke-width:2}
[data-fig=chain] .ch-wire.dry{stroke-dasharray:5 4}
[data-fig=chain] .ch-wire.dry.on{stroke:#5f747b}
[data-fig=chain] .ch-loop{stroke:var(--l);stroke-opacity:.45}
[data-fig=chain] .ch-loop.on{stroke:var(--l);stroke-opacity:.9}
[data-fig=chain] .ch-head{fill:var(--l);fill-opacity:.7}
[data-fig=chain] .ch-port{fill:#fff;stroke:#7f9298;stroke-width:1.3}
[data-fig=chain] .ch-junction{fill:#9aabb1}
[data-fig=chain] .ch-box{transition:opacity .3s}
[data-fig=chain] .ch-box rect{fill:white;stroke:#c7d3d6;stroke-width:1.2}
[data-fig=chain] .ch-box text{font:600 13px var(--sans);fill:var(--ink);text-anchor:middle;dominant-baseline:central}
[data-fig=chain] .ch-box .sub{font:500 10.5px var(--sans);fill:var(--sub)}
[data-fig=chain] .ch-box.dim{opacity:.32}
[data-fig=chain] .ch-box.hl rect{stroke:var(--accent);stroke-width:2}
[data-fig=chain] .ch-box.idle{opacity:.55}
[data-fig=chain] .ch-box.idle rect{stroke-dasharray:4 3}
[data-fig=chain] .ch-labels text{font:500 12.5px var(--sans);fill:var(--sub);dominant-baseline:central}
[data-fig=chain] .ch-labels .halo{paint-order:stroke;stroke:#f3f6f7;stroke-width:6px;stroke-linejoin:round}
[data-fig=chain] .ch-labels .loop{fill:var(--l)}
[data-fig=chain] .ch-dot{fill:var(--ink)}
[data-fig=chain] .ch-dot.dry{fill:#5f747b}
[data-fig=chain] .chain-state{margin:12px 2px 0!important;padding:12px 14px;border-radius:7px;background:white;border:1px solid var(--line);font-size:14px!important;line-height:1.75!important}
@media(prefers-reduced-motion:reduce){[data-fig=chain] .ch-flow{display:none}}
@media(max-width:520px){[data-fig=chain] .chain-ctl{width:100%;justify-content:space-between}}
[data-fig=chain] .scroll-hint{display:none}
@media(max-width:600px){[data-fig=chain] .scroll-hint{display:block;margin:6px 0 0!important;font-size:11px!important;line-height:1.5!important;color:var(--sub)!important;text-align:right}[data-fig=chain] .scroll-hint::after{content:" →"}}

/* ── echoes.css */
[data-fig=echoes] .echo-voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
[data-fig=echoes] .echo-voice{min-width:0;margin:0;padding:10px 12px 12px;border:1px solid var(--line);border-radius:7px;background:white;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
[data-fig=echoes] .echo-voice legend{padding:0 4px;font-size:12px;font-weight:700;letter-spacing:.04em}
[data-fig=echoes] .echo-voice.l legend{color:var(--l)}
[data-fig=echoes] .echo-voice.r legend{color:var(--r)}
[data-fig=echoes] .echo-voice label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--sub);letter-spacing:.03em}
[data-fig=echoes] .echo-voice input{width:78px}
[data-fig=echoes] .echo-plot .plot{margin-top:14px}
[data-fig=echoes] .plot .axis{font:500 10px var(--mono);fill:var(--sub)}
[data-fig=echoes] .plot .head{stroke:var(--ink);stroke-opacity:.55;stroke-width:1.2;stroke-dasharray:3 3}
[data-fig=echoes] .plot .dry{fill:var(--ink)}
[data-fig=echoes] .plot .eL{fill:var(--l)}
[data-fig=echoes] .plot .eR{fill:var(--r)}
[data-fig=echoes] .plot .eM{fill:#7b5ea8}
[data-fig=echoes] .plot .lab.eL{fill:var(--l)}
[data-fig=echoes] .plot .lab.eR{fill:var(--r)}
[data-fig=echoes] .plot .lab.eM{fill:#644a8d}
[data-fig=echoes] .plot text.lab{font:600 10.5px var(--mono);paint-order:stroke;stroke:white;stroke-width:3px}
[data-fig=echoes] .plot .ghost{opacity:.12}
[data-fig=echoes] .plot .pop{transform-box:fill-box;transform-origin:center;animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{transform:scale(0);opacity:0}}
[data-fig=echoes] .echo-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 2px 0!important;padding:0!important;list-style:none!important}
[data-fig=echoes] .echo-legend li{display:flex;align-items:center;gap:7px;padding:0!important;font-size:12px!important;line-height:1.6!important;color:var(--sub)!important}
[data-fig=echoes] .echo-legend i{width:9px;height:9px;border-radius:50%}
[data-fig=echoes] .echo-legend .eL{background:var(--l)}
[data-fig=echoes] .echo-legend .eR{background:var(--r)}
[data-fig=echoes] .echo-legend .eM{background:#7b5ea8}
[data-fig=echoes] .echo-status{margin:10px 2px 0!important;font-size:13px!important;line-height:1.75!important}
@media(max-width:640px){[data-fig=echoes] .echo-voices{grid-template-columns:1fr}}
[data-fig=echoes] .chip[data-reset]{font-family:var(--sans);font-weight:500}

/* ── help.css */
@media screen{.manual-table.is-enhanced{display:none}}
.fig-help .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.help-filter input{width:min(260px,52vw);height:30px;padding:0 10px;border:1px solid #cdd8db;border-radius:5px;font:inherit;font-size:12px;background:white;color:var(--ink)}
.help-filter input:focus{outline:2px solid var(--accent);outline-offset:1px}
.help-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;align-items:start}
.help-list{display:flex;flex-direction:column;gap:2px;max-height:440px;overflow:auto;padding-right:4px;scrollbar-width:thin}
.help-list button{text-align:left;padding:9px 12px;border-radius:6px;font-size:13px;line-height:1.55;color:var(--body);border:1px solid transparent}
.help-list button:hover{background:white;border-color:var(--line)}
.help-list button[aria-pressed=true]{background:white;border-color:#9fcbd0;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(25,47,60,.08)}
.help-list code,.help-panel code{font:12px var(--mono);background:#eaf0ef;padding:1px 4px;border-radius:3px}
.help-panel{padding:16px 18px;border-radius:8px;background:white;border:1px solid var(--line);min-height:180px}
.help-title{margin:0 0 10px!important;font-size:15px!important;font-weight:600;color:var(--ink)!important;line-height:1.5!important}
.help-checks{list-style:none!important;padding:0!important;margin:0!important}
.help-checks li{padding:0!important;margin:0;animation:help-in .4s ease both;animation-delay:calc(var(--i)*70ms)}
.help-checks label{display:flex;gap:10px;align-items:flex-start;padding:8px 4px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--body);cursor:pointer}
.help-checks li:first-child label{border-top:0}
.help-checks input{width:16px;height:16px;margin:3px 0 0;accent-color:var(--accent);flex-shrink:0}
.help-checks li.is-done span{color:var(--sub);text-decoration:line-through;text-decoration-color:#9fb0b6}
.help-done{margin:10px 0 0!important;font-size:12px!important;color:var(--accent)!important}
.help-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--accent);border-bottom:1px solid currentColor}
@keyframes help-in{from{opacity:0;transform:translateY(6px)}}
@media(max-width:800px){.help-grid{grid-template-columns:1fr}.help-list{max-height:260px}.help-panel{position:static}}
@media(max-width:520px){.fig-help .fig-tools{margin-left:0;width:100%}.help-filter,.help-filter input{width:100%}}

/* ── knobs.css */
/* 제스처 격자 — knobs 만 쓴다 */
.gesture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.gesture{padding:14px 12px 12px;border-radius:8px;background:white;border:1px solid var(--line);text-align:center}.gesture svg{display:block;width:100%;max-width:170px;height:auto;margin:0 auto}.gesture b{display:block;margin-top:8px;font-size:13px;color:var(--ink)}.gesture small{display:block;font-size:12px;line-height:1.6;color:var(--sub);margin-top:2px}
@media(max-width:800px){.gesture-grid{grid-template-columns:1fr 1fr 1fr;gap:8px}.gesture{padding:10px 6px}}
@media(max-width:520px){.gesture-grid{grid-template-columns:1fr}.gesture{display:grid;grid-template-columns:110px 1fr;grid-template-rows:auto 1fr;align-items:end;text-align:left;gap:2px 14px}.gesture svg{grid-row:1/3;align-self:center}.gesture b{margin-top:0;grid-column:2}.gesture small{grid-column:2;align-self:start}}
[data-fig=knobs] .kn-ring{fill:none;stroke:#d5dee0;stroke-width:5;stroke-linecap:round}
[data-fig=knobs] .kn-arc{fill:none;stroke:var(--uiL);stroke-width:5;stroke-linecap:round;stroke-dasharray:var(--arc,100) 200}
[data-fig=knobs] .kn-body{fill:#24323c}[data-fig=knobs] .kn-face{fill:#33434e}
[data-fig=knobs] .kn-ind{stroke:white;stroke-width:4;stroke-linecap:round}
[data-fig=knobs] .kn-rot{transform-box:view-box;transform-origin:60px 56px;transform:rotate(var(--rot,0deg))}
[data-fig=knobs] .kn-cursor{fill:white;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
[data-fig=knobs] .kn-track{stroke:#c9d4d7;stroke-width:1.2;stroke-dasharray:2 3;fill:none}
[data-fig=knobs] .kn-key rect{fill:white;stroke:#aab8bc}[data-fig=knobs] .kn-key text{font:600 9.5px var(--sans);fill:var(--ink);text-anchor:middle}
[data-fig=knobs] .kn-box{fill:white;stroke:var(--line)}
[data-fig=knobs] .kn-typed{font:600 12.5px var(--mono);fill:var(--uiL);text-anchor:middle;opacity:0}
[data-fig=knobs] .kn-caret{stroke:var(--ink);stroke-width:1.2;opacity:0}
[data-fig=knobs] .kn-click{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
/* 정지 상태(움직임 줄이기 · 인쇄) = 조작이 끝난 모습 */
.g-drag{--rot:45deg;--arc:107}.g-fine{--rot:-90deg;--arc:27}.g-type{--rot:97.5deg;--arc:138}
.g-type .t4{opacity:1}
@media (prefers-reduced-motion:no-preference){
 .g-drag .kn-rot,.g-fine .kn-rot{animation:kg-rot 3.4s ease-in-out infinite}.g-drag .kn-arc,.g-fine .kn-arc{animation:kg-arc 3.4s ease-in-out infinite}
 .g-drag .kn-cursor-g,.g-fine .kn-cursor-g{animation:kg-move 3.4s ease-in-out infinite}
 .g-fine .kn-key rect{animation:kg-key 3.4s ease-in-out infinite}
 .g-type .kn-rot{animation:kg-type-rot 4.4s ease-out infinite}.g-type .kn-arc{animation:kg-type-arc 4.4s ease-out infinite}
 .g-type .kn-box{animation:kg-box 4.4s steps(1) infinite}
 .g-type .t0{animation:kg-t0 4.4s steps(1) infinite}.g-type .t1{animation:kg-t1 4.4s steps(1) infinite}.g-type .t2{animation:kg-t2 4.4s steps(1) infinite}.g-type .t3{animation:kg-t3 4.4s steps(1) infinite}.g-type .t4{animation:kg-t4 4.4s steps(1) infinite}
 .g-type .kn-caret{animation:kg-caret 4.4s steps(1) infinite}
 .g-type .kn-click{animation:kg-click 4.4s ease-out infinite}
}
@keyframes kg-rot{0%,12%{transform:rotate(-135deg)}55%,72%{transform:rotate(var(--rot))}100%{transform:rotate(-135deg)}}
@keyframes kg-arc{0%,12%{stroke-dasharray:0 200}55%,72%{stroke-dasharray:var(--arc) 200}100%{stroke-dasharray:0 200}}
@keyframes kg-move{0%,12%{transform:translateY(18px)}55%,72%{transform:translateY(-18px)}100%{transform:translateY(18px)}}
@keyframes kg-key{0%,6%{fill:white}10%,78%{fill:#cfe8eb}86%,100%{fill:white}}
@keyframes kg-type-rot{0%,66%{transform:rotate(45deg)}74%,96%{transform:rotate(97.5deg)}100%{transform:rotate(45deg)}}
@keyframes kg-type-arc{0%,66%{stroke-dasharray:107 200}74%,96%{stroke-dasharray:138 200}100%{stroke-dasharray:107 200}}
@keyframes kg-box{0%{stroke:var(--line);stroke-width:1}18%{stroke:var(--accent);stroke-width:2}66%{stroke:var(--line);stroke-width:1}}
@keyframes kg-t0{0%{opacity:1}18%{opacity:0}}
@keyframes kg-t1{0%{opacity:0}30%{opacity:1}42%{opacity:0}}
@keyframes kg-t2{0%{opacity:0}42%{opacity:1}54%{opacity:0}}
@keyframes kg-t3{0%{opacity:0}54%{opacity:1}66%{opacity:0}}
@keyframes kg-t4{0%{opacity:0}66%{opacity:1}97%{opacity:0}}
@keyframes kg-caret{0%{opacity:0;transform:translateX(60px)}18%{opacity:1;transform:translateX(60px)}24%{opacity:0}30%{opacity:1;transform:translateX(64px)}36%{opacity:0}42%{opacity:1;transform:translateX(68px)}48%{opacity:0}54%{opacity:1;transform:translateX(72px)}60%{opacity:0}66%{opacity:0}}
@keyframes kg-click{0%,6%{opacity:0;transform:scale(.5)}8%{opacity:1}12%{opacity:0;transform:scale(1.5)}13%{opacity:0;transform:scale(.5)}14%{opacity:1}18%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@media(max-width:520px){[data-fig=knobs] .gesture svg{max-width:120px}}

/* ── lfo-clock.css */
[data-fig=lfo-clock] .lc-unit{font:600 12px var(--mono);color:var(--sub)}
[data-fig=lfo-clock] select{height:34px;padding:0 8px;border:1px solid #b8c6c8;border-radius:5px;background:white;font:600 13px var(--mono);color:var(--ink)}
[data-fig=lfo-clock] .lc-sub{min-width:0;margin-left:6px}
[data-fig=lfo-clock] .lc-static{display:block;margin-top:16px;font-size:12px;font-weight:600;color:var(--sub);line-height:1.5}
[data-fig=lfo-clock] .calc-out{margin-top:8px}
[data-fig=lfo-clock] .calc-out .out-big dd{color:var(--accent)}
[data-fig=lfo-clock] .lc-scope-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:18px}
[data-fig=lfo-clock] .lc-slow{font-size:11px;color:var(--calc)}
[data-fig=lfo-clock] .lc-scope{margin-top:10px}
[data-fig=lfo-clock] .lc-trace{fill:none;stroke:var(--uiL);stroke-width:2;stroke-linejoin:round}
[data-fig=lfo-clock] .lc-dot{fill:var(--uiL);stroke:white;stroke-width:2}
[data-fig=lfo-clock] .lc-to,[data-fig=lfo-clock] .lc-mirror{stroke:#c9d5d8;stroke-dasharray:4 4}
[data-fig=lfo-clock] .lc-off{opacity:.25}
[data-fig=lfo-clock] .seg button{padding:0 11px}
@media(max-width:520px){[data-fig=lfo-clock] .calc input[type=number],[data-fig=lfo-clock].calc input[type=number],[data-fig=lfo-clock] input[type=number]{width:74px}[data-fig=lfo-clock] .calc input[type=range],[data-fig=lfo-clock] input[type=range]{min-width:100px}}
[data-fig=lfo-clock] .lc-scope-wrap{position:relative;margin-top:10px}
[data-fig=lfo-clock] .lc-scope-wrap .lc-scope{margin-top:0}
[data-fig=lfo-clock] .lc-lab{position:absolute;transform:translateY(-50%);font:500 10px/1 var(--mono);color:var(--sub);pointer-events:none}
[data-fig=lfo-clock] .lc-lab.l{left:6px}
[data-fig=lfo-clock] .lc-lab.r{right:6px}
[data-fig=lfo-clock] .lc-time{display:flex;justify-content:space-between;padding:4px 14% 0 10%;font:500 10px var(--mono);color:var(--sub)}

/* ── live.css */
.fig-live-narrow .live-stage{max-width:420px;margin:0 auto}
.fig-live .fig-shot{display:block}

/* ── map.css */
.hot-tip{position:absolute;z-index:3;transform:translate(-50%,8px);padding:5px 10px;border-radius:5px;background:var(--ink);color:white;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s,left .35s,top .35s}
.hot-tip[data-side=above]{transform:translate(-50%,calc(-100% - 8px))}
.hot-tip.is-on{opacity:1}
.fig-map .fig-body,.fig-steps .fig-body{padding-bottom:14px}
.fig-steps .step-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.fig-steps .step-row .step-progress{flex:1;margin-top:0}
.fig-steps .step-now{font:600 12px var(--mono);color:var(--sub);min-width:64px;text-align:right}
.map-colors{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12px;color:var(--body)}
.map-colors span{display:inline-flex;align-items:center;gap:6px}
.map-colors i{width:22px;height:4px;border-radius:2px;background:var(--c)}
.map-colors i.dash{background:repeating-linear-gradient(90deg,var(--c) 0 5px,transparent 5px 9px)}
@media(max-width:520px){.hot-tip{font-size:11px;padding:4px 8px}}
.map-stage[data-view=main] .hot[data-view=alt],.map-stage[data-view=alt] .hot[data-view=main]{opacity:0;pointer-events:none}
.fig-steps .hot{transition:box-shadow .35s,opacity .35s}

/* ── modes.css */
[data-fig=modes] .modes-stage{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
[data-fig=modes] .modes-pane{min-width:0}
[data-fig=modes] .modes-name{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px!important;font-size:12px!important;line-height:1.5!important;color:var(--sub)!important}
[data-fig=modes] .modes-name b{font-size:13px;letter-spacing:.08em;color:var(--ink)}
[data-fig=modes] .modes-svg{display:block;width:100%;height:auto;padding:10px 6px;background:#f3f6f7;border-radius:10px}
[data-fig=modes] .modes-sum{margin:12px 2px 0!important;font-size:14px!important;line-height:1.8!important}
[data-fig=modes] .modes-detail{display:flex;justify-content:space-between;gap:16px;margin:16px 0 0!important;padding-top:12px;border-top:1px solid var(--line);font-size:12px!important;line-height:1.5!important;color:var(--sub)!important}
[data-fig=modes] .modes-detail b{font-weight:500;color:var(--ink)}
[data-fig=modes] text{font-family:var(--sans);font-size:14px;font-weight:500;fill:var(--ink);dominant-baseline:central;letter-spacing:-.01em}
[data-fig=modes] .md-wire{fill:none;stroke:#9aabb1;stroke-width:1.3}
[data-fig=modes] .md-dry{fill:none;stroke:#9aabb1;stroke-width:1.2;stroke-dasharray:4 4}
[data-fig=modes] .md-loop{fill:none;stroke-width:1.3}
[data-fig=modes] .md-loop.l{stroke:var(--l);stroke-opacity:.7}
[data-fig=modes] .md-loop.r{stroke:var(--r);stroke-opacity:.7}
[data-fig=modes] .md-head.l{fill:var(--l)}
[data-fig=modes] .md-head.r{fill:var(--r)}
[data-fig=modes] .md-junction{fill:#9aabb1}
[data-fig=modes] .md-port{fill:#fff;stroke:#9aabb1;stroke-width:1.3}
[data-fig=modes] .md-sum circle{fill:var(--ink)}
[data-fig=modes] .md-sum path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round}
[data-fig=modes] .md-node rect{fill:#fff;stroke:#cdd8db}
[data-fig=modes] .md-node .v{font-weight:700}
[data-fig=modes] .md-node .l,[data-fig=modes] .md-labels .l{fill:var(--l)}
[data-fig=modes] .md-node .r,[data-fig=modes] .md-labels .r{fill:var(--r)}
[data-fig=modes] .md-mix circle{fill:#fff;stroke:var(--ink);stroke-width:1.3}
[data-fig=modes] .md-mix text{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-anchor:middle}
[data-fig=modes] .md-labels text{font-size:12.5px;fill:var(--sub)}
[data-fig=modes] .md-labels .halo{paint-order:stroke;stroke:#f3f6f7;stroke-width:6px;stroke-linejoin:round}
[data-fig=modes] .md-labels .small{font-size:11.5px}
[data-fig=modes] .md-dot{fill:#7f9298}
[data-fig=modes] .md-dot.l{fill:var(--l)}
[data-fig=modes] .md-dot.r{fill:var(--r)}
[data-fig=modes] .md-dot.dry{fill:#aab8bc}
@media(prefers-reduced-motion:reduce){[data-fig=modes] .md-flow{display:none}}
[data-fig=modes].is-ready .modes-stage{grid-template-areas:"pane";gap:0}
[data-fig=modes].is-ready .modes-pane{grid-area:pane;transition:opacity .45s ease,visibility 0s linear 0s}
[data-fig=modes].is-ready .modes-pane:not(.is-on){opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
@media(max-width:600px){[data-fig=modes] .modes-scroll{overflow-x:auto;overscroll-behavior-x:contain;margin:0 -4px;padding:0 4px}[data-fig=modes] .modes-svg{min-width:520px}[data-fig=modes] .modes-name{display:block}[data-fig=modes] .modes-name span{display:block;margin-top:2px}}
@media print{[data-fig=modes] .modes-pane{opacity:1!important;visibility:visible!important}[data-fig=modes].is-ready .modes-stage{grid-template-areas:none;gap:18px}[data-fig=modes].is-ready .modes-pane{grid-area:auto}}
[data-fig=modes] .scroll-hint{display:none}
@media(max-width:600px){[data-fig=modes] .scroll-hint{display:block;margin:6px 0 0!important;font-size:11px!important;line-height:1.5!important;color:var(--sub)!important;text-align:right}[data-fig=modes] .scroll-hint::after{content:" →"}}

/* ── pitch.css */
/* 건반 — pitch 만 쓴다 */
.kbd-wrap{margin-top:16px;padding:14px 10px 8px;border-radius:8px;background:#1d2b35}.kbd-wrap svg{display:block;width:100%;height:auto}.k-w{fill:#f4f7f6;stroke:#1d2b35;stroke-width:1}.k-b{fill:#2c3a45;stroke:#1d2b35;stroke-width:1}.k-lbl{font:600 9px var(--mono);fill:#8a9aa2;text-anchor:middle}.k-src{fill:#9aa9af}.k-dst{fill:var(--uiL)}.k-dst.neg{fill:var(--uiR)}.k-arc{fill:none;stroke:var(--uiL);stroke-width:2;stroke-dasharray:5 4;animation:dash 1s linear infinite}.k-arc.neg{stroke:var(--uiR)}@keyframes dash{to{stroke-dashoffset:-9}}.k-tag{font:600 10px var(--sans);text-anchor:middle}
[data-fig=pitch] .pt-unit{font:600 13px var(--mono);color:var(--sub)}
[data-fig=pitch] .chip{min-width:44px}
[data-fig=pitch] .calc-out .out-big dd{color:var(--accent)}
[data-fig=pitch] .pt-kbd .pt-pin.src{fill:#9aa9af}
[data-fig=pitch] .pt-kbd .pt-pin.dst{fill:var(--uiL)}
[data-fig=pitch] .pt-kbd .pt-pin.dst.neg{fill:var(--uiR)}
[data-fig=pitch] .pt-kbd .pt-tag.src{fill:#aebcc1}
[data-fig=pitch] .pt-kbd .pt-tag.dst{fill:#6fd3e0}
[data-fig=pitch] .pt-kbd .pt-tag.dst.neg{fill:#ff9a7c}
[data-fig=pitch] .pt-kbd .k-w:hover,[data-fig=pitch] .pt-kbd .k-b:hover{opacity:.82}
@media(max-width:520px){[data-fig=pitch] .calc input[type=number],[data-fig=pitch].calc input[type=number],[data-fig=pitch] input[type=number]{width:74px}[data-fig=pitch] .calc input[type=range],[data-fig=pitch] input[type=range]{min-width:100px}}

[data-fig=pitch] [data-o=name]{font-family:var(--sans);letter-spacing:-.01em}

/* ── sustain.css */
[data-fig=sustain] .sus-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;align-items:center}
[data-fig=sustain] .sus-ring svg{display:block;width:100%;height:auto;max-width:300px;margin:0 auto;background:#f3f6f7;border-radius:50%}
[data-fig=sustain] .sus-track{fill:none;stroke:#dfe6e7;stroke-width:1}
[data-fig=sustain] .sus-bar{stroke:#7f9298;stroke-width:3.2;stroke-linecap:round;transition:stroke .5s}
[data-fig=sustain].is-frozen .sus-bar{stroke:#6aa6b4}
[data-fig=sustain] .sus-bar.hl{stroke:var(--l)!important;stroke-opacity:1!important}
[data-fig=sustain] .sus-bar.hr{stroke:var(--r)!important;stroke-opacity:1!important}
[data-fig=sustain] .sus-hub circle{fill:white;stroke:#cdd8db}
[data-fig=sustain] .sus-hub text{font:600 11px var(--sans);fill:var(--sub);text-anchor:middle;dominant-baseline:central}
[data-fig=sustain] .sus-write line{stroke:var(--ink);stroke-width:2;stroke-linecap:round;transition:stroke .4s}
[data-fig=sustain] .sus-write circle{fill:var(--ink);transition:fill .4s}
[data-fig=sustain].is-frozen .sus-write line{stroke:#b3c0c4;stroke-dasharray:3 4}
[data-fig=sustain].is-frozen .sus-write circle{fill:#b3c0c4}
[data-fig=sustain] .sus-read path{stroke:white;stroke-width:1.2}
[data-fig=sustain] .sus-read.l path{fill:var(--l)}
[data-fig=sustain] .sus-read.r path{fill:var(--r)}
[data-fig=sustain] .sus-read text{font:700 11px var(--sans);text-anchor:middle;dominant-baseline:central}
[data-fig=sustain] .sus-read.l text{fill:var(--l)}
[data-fig=sustain] .sus-read.r text{fill:var(--r)}
[data-fig=sustain] .sus-switch{display:flex;align-items:center;gap:14px;margin-bottom:16px}
[data-fig=sustain] .sus-switch span{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink)}
[data-fig=sustain] .sus-btn{min-width:84px;height:34px;padding:0 16px;border:1px solid #cdd8db;border-radius:6px;background:white;font:600 13px var(--sans);color:var(--sub)}
[data-fig=sustain] .sus-btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:white}
[data-fig=sustain] .sus-legend{list-style:none!important;padding:0!important;margin:0!important;display:grid;gap:6px}
[data-fig=sustain] .sus-legend li{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:0!important;font-size:13px!important;line-height:1.6!important}
[data-fig=sustain] .sus-legend b{color:var(--ink);font-weight:600}
[data-fig=sustain] .sus-legend i{width:10px;height:10px;border-radius:50%;background:var(--ink)}
[data-fig=sustain] .sus-legend i.rl,[data-fig=sustain] .sus-legend i.rr{border-radius:0;clip-path:polygon(50% 100%,0 0,100% 0)}
[data-fig=sustain] .sus-legend i.rl{background:var(--l)}
[data-fig=sustain] .sus-legend i.rr{background:var(--r);margin-left:-4px}
[data-fig=sustain] .sus-state{margin:16px 0 0!important;padding:12px 14px;border-radius:7px;background:white;border:1px solid var(--line);font-size:14px!important;line-height:1.75!important}
[data-fig=sustain] .sus-state b{margin-right:8px;color:var(--accent)}
@media(max-width:640px){[data-fig=sustain] .sus-grid{grid-template-columns:1fr}[data-fig=sustain] .sus-ring svg{max-width:240px}}

/* ── sync.css */
[data-fig=sync] .sy-unit{font:600 12px var(--mono);color:var(--sub)}
[data-fig=sync] .sy-hint{font-size:12px;color:var(--sub);line-height:1.5}
[data-fig=sync] .sy-static{margin:16px 0 8px;font-size:12px;font-weight:600;color:var(--sub);line-height:1.5}
[data-fig=sync] .sy-chart{--lab:52px;--tag:40px;position:relative;padding:22px 0 2px;border-radius:8px;background:white;border:1px solid var(--line)}
[data-fig=sync] .sy-rows{display:grid;gap:2px}
[data-fig=sync] .sy-row{display:grid;grid-template-columns:var(--lab) 1fr var(--tag);align-items:center;gap:0 10px;min-height:28px;padding:0 0 0 10px;border-radius:4px}
[data-fig=sync] .sy-row[role=button]{cursor:pointer}
[data-fig=sync] .sy-row[role=button]:not(.over):hover{background:#f2f7f7}
[data-fig=sync] .sy-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
[data-fig=sync] .sy-name{font:600 12.5px var(--mono);color:var(--ink)}
[data-fig=sync] .sy-track{position:relative;height:18px}
[data-fig=sync] .sy-bar{position:absolute;left:0;top:3px;height:12px;border-radius:2px 3px 3px 2px;background:#a9c4c9;transition:width .25s ease}
[data-fig=sync] .sy-row.pick .sy-bar{background:var(--accent)}
[data-fig=sync] .sy-row.over{cursor:not-allowed}
[data-fig=sync] .sy-row.over .sy-name{color:var(--sub)}
[data-fig=sync] .sy-row.over .sy-bar{background:repeating-linear-gradient(135deg,#d7dfe1 0 5px,#eef2f3 5px 10px);border-radius:2px 0 0 2px}
[data-fig=sync] .sy-row.over.pick .sy-bar{background:repeating-linear-gradient(135deg,#e7b9a6 0 5px,#f6e6df 5px 10px)}
[data-fig=sync] .sy-ms{position:absolute;top:0;left:calc(var(--w) * 1% + 6px);font:500 11.5px/18px var(--mono);color:var(--body);white-space:nowrap;transition:left .25s ease}
[data-fig=sync] .sy-row.inside .sy-ms{left:calc(var(--w) * 1% - 6px);transform:translateX(-100%);color:white}
[data-fig=sync] .sy-row.inside:not(.pick) .sy-ms{color:var(--ink)}
[data-fig=sync] .sy-row.over .sy-ms{color:var(--calc);font-weight:600}
[data-fig=sync] .sy-tags{display:flex;gap:3px}
[data-fig=sync] .sy-tag{display:grid;place-items:center;width:17px;height:17px;border-radius:4px;font:700 10px/1 var(--sans);font-style:normal;color:white;background:var(--uiL)}
[data-fig=sync] .sy-tag.r{background:var(--uiR)}
[data-fig=sync] .sy-lines{position:absolute;top:0;bottom:0;left:calc(10px + var(--lab) + 10px);right:calc(var(--tag) + 10px);pointer-events:none}
[data-fig=sync] .sy-beat,[data-fig=sync] .sy-limit{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed #b4c3c7;transition:left .25s ease}
[data-fig=sync] .sy-limit{left:100%;border-left:2px solid var(--calc)}
[data-fig=sync] .sy-beat em,[data-fig=sync] .sy-limit em{position:absolute;top:4px;left:0;transform:translateX(-50%);font:600 10px/1 var(--sans);font-style:normal;color:var(--sub);white-space:nowrap;background:white;padding:0 2px}
[data-fig=sync] .sy-axis span.lim{color:var(--calc);font-weight:600}
[data-fig=sync] .sy-beat.at-limit em{transform:translateX(calc(-100% - 4px))}
[data-fig=sync] .sy-axis{position:relative;height:16px;margin:4px calc(var(--tag,40px) + 10px) 0 calc(10px + 52px + 10px);font:500 10px var(--mono);color:var(--sub)}
[data-fig=sync] .sy-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
[data-fig=sync] .sy-axis span:first-child{transform:none}
[data-fig=sync] .sy-axis span:last-child{transform:translateX(-100%)}
[data-fig=sync] dd.sy-clamped{color:var(--calc)}
@media(max-width:520px){[data-fig=sync] input[type=number]{width:74px}[data-fig=sync] input[type=range]{min-width:100px}[data-fig=sync] .sy-chart{--lab:44px;--tag:36px}[data-fig=sync] .sy-axis{margin-left:calc(10px + 44px + 10px);margin-right:46px}[data-fig=sync] .sy-ms{font-size:10.5px}[data-fig=sync] .sy-axis span:nth-child(2),[data-fig=sync] .sy-axis span:nth-child(4){display:none}}

/* ── trigger.css */
.fig-trigger{--tg:#c48a00}
.fig-trigger .fig-tools{gap:8px;align-items:center}
.tg-seg button{padding:0 10px;letter-spacing:.01em}
.tg-desc{margin:0 0 12px!important;font-size:14px!important;line-height:1.7!important;color:var(--body)!important}
.tg-desc .tg-wave{font:600 13px var(--mono);color:var(--tg);margin-right:6px}
.tg-stage{position:relative;border-radius:6px;overflow:hidden;background:#e9eeee}
.tg-stage video{display:block;width:100%;height:auto;border-radius:6px}
.tg-cursor{position:absolute;left:11.1%;top:94.3%;width:16px;height:22px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
.tg-cursor svg{display:block;transition:transform .12s;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.tg-cursor path{fill:white;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.tg-cursor i{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;border:2.5px solid var(--accent);opacity:0}
.fig-trigger.is-playing .tg-cursor{opacity:1}
.tg-cursor.press svg{transform:translate(1px,1px) scale(.9)}
.tg-cursor.press i{animation:tg-ripple .45s ease-out}
@keyframes tg-ripple{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.9)}}
.tg-ring{position:absolute;border:2.5px solid var(--tg);border-radius:50%;opacity:0;transition:opacity .25s;pointer-events:none}
.tg-ring-knob{left:18.9%;top:19.2%;width:8.2%;height:10.2%}
.tg-ring-lfo{left:74.5%;top:73.8%;width:3.7%;height:16.2%;border-radius:8px}
.fig-trigger.is-moving .tg-ring{opacity:.95}
.tg-readout{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;margin-top:12px;padding:10px 14px;border-radius:7px;background:white;border:1px solid var(--line);font-size:13px;color:var(--body)}
.tg-readout .tg-val{font:600 13px var(--mono);color:var(--ink)}
.tg-readout .tg-val b{display:inline-block;min-width:64px;text-align:right;color:var(--tg)}
.tg-readout .tg-state{font-weight:600;color:var(--ink)}
.tg-plot{display:block;width:100%;height:auto;margin-top:10px;background:white;border:1px solid var(--line);border-radius:8px}
.tg-grid{stroke:#e8edee;stroke-width:1}.tg-zero{stroke:#b7c4c8;stroke-width:1}.tg-tick{stroke:#b7c4c8}
.tg-ax{font:500 10px var(--mono);fill:var(--sub)}.tg-ax.r{font-family:var(--sans);font-weight:600}
.tg-trig{stroke:var(--accent);stroke-width:1.2;stroke-dasharray:4 3}
.tg-trig-l{font:600 10.5px var(--sans);fill:var(--accent);paint-order:stroke;stroke:white;stroke-width:3px;stroke-linejoin:round}
.tg-line{fill:none;stroke:var(--tg);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.tg-headdot{fill:var(--tg);stroke:white;stroke-width:2}
.fig-trigger.no-video .tg-cursor,.fig-trigger.no-video .tg-ring{display:none}
@media(max-width:620px){.fig-trigger .fig-tools{margin-left:0;width:100%;flex-wrap:wrap}.tg-seg{flex:1 1 100%;display:flex}.tg-seg button{flex:1;padding:0 4px;font-size:11px;letter-spacing:0;white-space:nowrap}.tg-play{margin-left:auto}.tg-readout{font-size:12px}}

/* ── waves.css */
[data-fig=waves] .waves-pane+.waves-pane{margin-top:22px}
[data-fig=waves] .waves-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 8px!important;font-size:12px!important;line-height:1.5!important;color:var(--sub)!important}
[data-fig=waves] .waves-h b{font-size:13px;letter-spacing:.08em;color:var(--ink)}
[data-fig=waves] .wave-stage{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
[data-fig=waves] .wave-stage img{display:block;width:100%;height:auto;border-radius:0}
[data-fig=waves] .wave-cell{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:18.4%;height:20.2%;border-radius:5px;transition:background-color .3s,box-shadow .3s;pointer-events:none}
[data-fig=waves] .wave-stage[data-filter] .wave-cell{background:rgba(237,242,242,.82)}
[data-fig=waves] .wave-stage[data-filter=c] .wave-cell.c,[data-fig=waves] .wave-stage[data-filter=o] .wave-cell.o,[data-fig=waves] .wave-stage[data-filter=t] .wave-cell.t{background:transparent;box-shadow:0 0 0 2px var(--accent)}
[data-fig=waves] .wave-count{font:600 12px var(--mono);color:var(--sub);margin-left:4px}
[data-fig=waves] .waves-filter{margin-bottom:12px}
[data-fig=waves] .waves-filter .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans)}
[data-fig=waves] .waves-filter .chip:disabled{opacity:.4;cursor:default}
[data-fig=waves] .waves-filter .chip[aria-pressed=true] .wave-count{color:rgba(255,255,255,.8)}
[data-fig=waves] .wk{display:inline-block;width:9px;height:9px}
[data-fig=waves] .wk.c{border-radius:50%;background:#35bddd}
[data-fig=waves] .wk.o{background:#f0b429;clip-path:polygon(50% 0,100% 100%,0 100%)}
[data-fig=waves] .wk.t{background:#ce6bd6;transform:rotate(45deg) scale(.82)}
[data-fig=waves] .waves-state{margin:10px 2px 0!important;font-size:12px!important;line-height:1.6!important;color:var(--sub)!important}
[data-fig=waves].is-ready .waves-pane:not(.is-on){display:none}
[data-fig=waves].is-ready .waves-pane.is-on{animation:waves-in .35s ease}
[data-fig=waves].is-ready .waves-pane+.waves-pane{margin-top:0}

@keyframes waves-in{from{opacity:.25}to{opacity:1}}
@media print{[data-fig=waves].is-ready .waves-pane:not(.is-on){display:block}[data-fig=waves].is-ready .waves-h{display:flex}[data-fig=waves] .wave-cell{background:transparent!important;box-shadow:none!important}}