/* sas-figs.css - the Sound and Studio figures (assets/music/sas/sas-figs.js) inside the composition courses' player.
   Flat controls (selected = a fill, pressed = scale(.98)), 44 px targets, no one-sided borders, both themes. */
.fl-fig .sf-cv{display:block;width:100%;border-radius:12px;background:var(--surface)}
:root[data-theme="dark"] .fl-fig .sf-cv{background:rgba(255,255,255,.04)}
.sf-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sf-cap{margin:0;font-size:14.5px;font-weight:600;color:var(--ink-3);line-height:1.45}
.sf-read{margin:0;font:700 15.5px var(--f-body);color:var(--ink)}
.sf-read.warn{color:var(--ink);background:var(--gold-tint,rgba(255,194,61,.2));padding:6px 10px;border-radius:10px;justify-self:start}
.sf-lab{font:600 13.5px var(--f-body);color:var(--ink-3)}
.sf-play{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 12px;border:0;border-radius:999px;background:var(--study);color:#fff;font:700 15px var(--f-body);cursor:pointer;transition:background-color .15s var(--ease-out),transform .1s var(--ease-out)}
:root[data-theme="dark"] .sf-play{color:#06222a}
.sf-play:hover{background:var(--study-ink)}
.sf-play:active{transform:scale(.98)}
.sf-play.on{animation:sfPlay .9s var(--ease-out)}
@keyframes sfPlay{0%{box-shadow:0 0 0 0 rgba(13,154,167,.45)}100%{box-shadow:0 0 0 14px rgba(13,154,167,0)}}
.sf-play.sm{min-height:44px;font-size:14px;padding:0 14px 0 10px;justify-self:start}
.sf-tog{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;border:0;border-radius:12px;background:rgba(var(--ink-rgb),.08);color:var(--ink);font:650 15px var(--f-body);white-space:nowrap;cursor:pointer;transition:background-color .12s var(--ease-out),transform .1s var(--ease-out)}
.sf-tog:hover{background:rgba(var(--ink-rgb),.13)}
.sf-tog:active{transform:scale(.98)}
.sf-tog[aria-pressed="true"]{background:var(--study);color:#fff}
:root[data-theme="dark"] .sf-tog[aria-pressed="true"]{color:#06222a}
.sf-play:focus-visible,.sf-tog:focus-visible,.sf-seg button:focus-visible,.sf-hdl:focus-visible,.sf-card-b:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.sf-seg{display:flex;flex-wrap:nowrap;gap:4px;padding:4px;border-radius:14px;background:rgba(var(--ink-rgb),.06);justify-self:start;max-width:100%;box-sizing:border-box}   /* one row always: a long label wraps inside its segment, never onto a second row of buttons */
.sf-sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:6px;vertical-align:1px;flex:none}
.sf-play.quiet{background:rgba(var(--ink-rgb),.08);color:var(--ink)}
.sf-play.quiet:hover{background:rgba(var(--ink-rgb),.13)}
:root[data-theme="dark"] .sf-play.quiet{color:var(--ink)}
.sf-play .sf-sw{margin-inline-end:0}
.sf-seg button{min-height:40px;min-width:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);font:650 14.5px var(--f-body);white-space:nowrap;cursor:pointer;transition:background-color .12s var(--ease-out),transform .1s var(--ease-out)}
.sf-seg button:active{transform:scale(.98)}
.sf-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(6,14,26,.16)}
:root[data-theme="dark"] .sf-seg button[aria-pressed="true"]{background:rgba(255,255,255,.14)}
.sf-tgt{display:grid;gap:6px}
.sf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 16px}
.sf-sl{min-width:0}
.sf-sl-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.sf-sl-top label{margin:0;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.sf-sl-v{font:700 15px var(--f-body);color:var(--ink);white-space:nowrap}
.sf-sl input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y;--p:50%}
.sf-sl input[type=range]:focus{outline:none}
.sf-sl input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--study) var(--p),rgba(var(--ink-rgb),.15) var(--p))}
.sf-sl input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:rgba(var(--ink-rgb),.15)}
.sf-sl input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:var(--study)}
.sf-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:var(--surface);border:3px solid var(--study);box-shadow:0 1px 3px rgba(6,14,26,.25)}
.sf-sl input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--surface);border:3px solid var(--study)}
.sf-sl input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--study-ink);outline-offset:2px}
.sf-got{margin:0;min-height:22px;font:700 15px var(--f-body);color:var(--ink)}
.sf-got.ok{color:var(--study-ink)}

/* the voice's path */
.sf-flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px}
.sf-flow .sf-arrow{display:grid;place-items:center;color:var(--ink-3);flex:none}
@media (max-width:560px){.sf-flow{flex-direction:column}.sf-flow .sf-block{flex:none}.sf-flow .sf-arrow svg{transform:rotate(90deg)}}
.sf-block{flex:1 1 120px;display:grid;gap:4px;align-content:start;padding:12px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.1);transition:opacity .2s var(--ease-out)}
:root[data-theme="dark"] .sf-block{background:rgba(255,255,255,.05)}
.sf-block b{font:700 16px var(--f-body);color:var(--ink)}
.sf-block span{font-size:14px;color:var(--ink-3)}
.sf-block.off b,.sf-block.off span{opacity:.45}
.sf-block .sf-tog{justify-self:start;margin-top:4px}
.sf-mod{background:var(--study-tint,rgba(13,154,167,.12));box-shadow:none}
.sf-flow.run .sf-block{animation:sfRun .9s var(--ease-out) both}
.sf-flow.run .sf-flt{animation-delay:.12s}.sf-flow.run .sf-amp{animation-delay:.24s}
@keyframes sfRun{0%{box-shadow:0 0 0 1px rgba(var(--ink-rgb),.1)}30%{box-shadow:0 0 0 3px var(--study)}100%{box-shadow:0 0 0 1px rgba(var(--ink-rgb),.1)}}

/* rooms */
.sf-room{position:relative;width:100%;max-width:560px}
.sf-roomsvg{display:block;width:100%;height:auto}
.sf-roomsvg .wall{fill:var(--ink-2)}
.sf-roomsvg .floor{fill:var(--surface)}
:root[data-theme="dark"] .sf-roomsvg .floor{fill:#1b2b40}
.sf-roomsvg .src{fill:var(--gold)}
.sf-roomsvg .mic{fill:var(--study)}
.sf-roomsvg .pd{fill:none;stroke:var(--study);stroke-width:.045}
.sf-roomsvg .pr{fill:none;stroke:var(--blue);stroke-width:.03;stroke-dasharray:.08 .07}
.sf-roomsvg .spot{fill:rgba(var(--ink-rgb),.25)}
.sf-roomsvg .panel{fill:#7d93ab}.sf-roomsvg .trap{fill:#5f7590}.sf-roomsvg .diff{fill:#c9a46a}
.sf-hdl{position:absolute;left:0;top:0;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;cursor:grab;touch-action:none}
.sf-hdl::after{content:"";position:absolute;left:12px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 3px var(--study),0 2px 6px rgba(6,14,26,.2)}
.sf-hdl.drag{cursor:grabbing}
.sf-spot{cursor:pointer}
.sf-spot::after{box-shadow:0 0 0 2px rgba(var(--ink-rgb),.35);background:transparent}
.sf-spot[data-k="panel"]::after,.sf-spot[data-k="trap"]::after,.sf-spot[data-k="diff"]::after{box-shadow:0 0 0 3px var(--study)}
.sf-bars{display:grid;gap:6px}
.sf-bar{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:10px}
.sf-bar-t{height:12px;border-radius:6px;background:rgba(var(--ink-rgb),.1);overflow:hidden}
.sf-bar-t i{display:block;height:100%;border-radius:6px;background:var(--study);transition:width .3s var(--ease-out)}
.sf-bar[data-band="violet"] .sf-bar-t i{background:var(--play)}.sf-bar[data-band="blue"] .sf-bar-t i{background:var(--blue)}
.sf-bar b{font:700 14px var(--f-body);color:var(--ink);min-width:56px;text-align:end}

/* the spot cards */
.sf-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.sf-card,.sf-card-b{min-width:0}
.sf-card-b b,.sf-card-b span{white-space:normal}
.sf-card{display:grid;gap:8px;padding:10px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.1)}
:root[data-theme="dark"] .sf-card{background:rgba(255,255,255,.05)}
.sf-card.sel{box-shadow:0 0 0 2px var(--study)}
.sf-card-b{box-sizing:border-box;display:grid;gap:4px;width:100%;white-space:normal;min-height:44px;padding:6px 8px;border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:start;cursor:pointer}
.sf-card-b b{font:700 16px var(--f-body)}
.sf-card-b span{font-size:14.5px;color:var(--ink-2)}
.sf-why{display:grid;gap:6px;padding:0 8px}
.sf-why p{margin:0;font-size:14.5px;color:var(--ink-2)}
.sf-why .sf-pick{font-weight:700;color:var(--study-ink)}
.sf-score{display:flex;align-items:center;gap:10px;font:600 14px var(--f-body);color:var(--ink-3)}
.sf-score>span:first-child{min-width:56px}
.sf-dots{display:inline-flex;gap:4px}
.sf-dots i{width:22px;height:8px;border-radius:4px;background:rgba(var(--ink-rgb),.14)}
.sf-dots i.on{background:var(--study)}

/* microphones */
.sf-cut{width:100%;max-width:520px;border-radius:14px;background:var(--surface);padding:6px}
:root[data-theme="dark"] .sf-cut{background:rgba(255,255,255,.04)}
.sf-cutsvg{display:block;width:100%;height:auto}
.sf-cutsvg .air{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;opacity:.6}
.sf-cutsvg .dia{fill:var(--study)}
.sf-cutsvg .coil{fill:#c98a4b}
.sf-cutsvg .mag{fill:var(--ink-2)}
.sf-cutsvg .plate{fill:var(--ink-3)}
.sf-cutsvg .pwr{fill:var(--gold)}
.sf-cutsvg .wire{fill:none;stroke:var(--ink-3);stroke-width:2}
.sf-cutsvg .rib{fill:none;stroke:var(--study);stroke-width:4;stroke-linecap:round}
.sf-cutsvg .lbl{fill:var(--ink-2);font:600 12px var(--f-body)}
.sf-cutsvg .lbl.on{fill:#1b1300}
.sf-cutsvg .mv.go{animation:sfShake .5s var(--ease-out)}
@keyframes sfShake{0%,100%{transform:translateX(0)}15%{transform:translateX(5px)}30%{transform:translateX(-4px)}45%{transform:translateX(3px)}60%{transform:translateX(-2px)}75%{transform:translateX(1px)}}
.sf-polar{position:relative;width:100%;max-width:320px;justify-self:center}
.sf-polarsvg{display:block;width:100%;height:auto}
.sf-polarsvg .ring{fill:none;stroke:rgba(var(--ink-rgb),.14);stroke-width:1}
.sf-polarsvg .ring.rim{stroke:rgba(var(--ink-rgb),.3)}
.sf-polarsvg .spoke{fill:none;stroke:rgba(var(--ink-rgb),.1);stroke-width:1}
.sf-polarsvg .deg,.sf-polarsvg .dbl{fill:var(--ink-3);font:600 10px var(--f-body)}
.sf-polarsvg .nulls path{stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.sf-polarsvg .lobe{fill:var(--study);fill-opacity:.35;stroke:var(--study);stroke-width:1.5}
.sf-polarsvg .lobe{fill-opacity:.2}
.sf-polarsvg .lobe.neg{fill:var(--gold);fill-opacity:.2;stroke:var(--gold-ink);stroke-dasharray:3 3}
:root[data-theme="dark"] .sf-polarsvg .lobe.neg{stroke:var(--gold)}
.sf-polarsvg .micbody{fill:var(--ink-2)}.sf-polarsvg .michead{fill:var(--study)}
.sf-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sf-spec{display:grid;gap:4px;align-content:start;padding:10px 12px;border:0;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.12);min-width:0;min-height:44px;text-align:start;color:inherit;font:inherit;cursor:pointer;transition:box-shadow .15s var(--ease-out),transform .1s var(--ease-out)}
.sf-spec:active{transform:scale(.98)}
.sf-spec:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.sf-spec[aria-checked="true"]{box-shadow:0 0 0 2px var(--ink-3)}
.sf-spec.ok{box-shadow:0 0 0 3px var(--study);background:var(--study-tint,rgba(13,154,167,.12))}
:root[data-theme="dark"] .sf-spec{background:rgba(255,255,255,.05)}
.sf-spec b{font:700 15px var(--f-body);color:var(--ink)}
.sf-spec dl{display:grid;gap:2px;margin:0}
.sf-spec dt{font-size:12.5px;color:var(--ink-3);font-weight:600}
.sf-spec dd{margin:0 0 2px;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.sf-jobs{display:grid;gap:12px}
.sf-job{display:grid;gap:6px;padding:12px;border-radius:14px;background:var(--study-tint,rgba(13,154,167,.1))}
.sf-job .sf-tog{justify-self:start}
.sf-job-q{margin:0;font:700 15px var(--f-body);color:var(--ink)}
.sf-job-opts{justify-self:stretch}
.sf-job-opts button{flex:1 1 auto}
.sf-job-fb{margin:0;min-height:20px;font-size:14.5px;color:var(--ink-2)}
.sf-job-fb.ok{color:var(--study-ink);font-weight:700}
.sf-card-t{font:700 16px var(--f-body);color:var(--ink);padding:0 8px}
.sf-card-d{font-size:14.5px;color:var(--ink-2);padding:0 8px}
.sf-card>.sf-pick{margin:0;padding:0 8px;font-weight:700;color:var(--study-ink)}
@media (prefers-reduced-motion:reduce){.sf-cutsvg .mv.go{animation:none}}

/* stereo */
.sf-31svg,.sf-stage{display:block;width:100%;max-width:520px;height:auto}
.sf-31svg .bleed{fill:none;stroke:var(--gold-ink);stroke-width:2;stroke-dasharray:4 4}
.sf-31svg .near{fill:none;stroke:var(--study);stroke-width:2}
.sf-31svg .player{fill:var(--vs-shirt,#3f7fa8)}
.sf-31svg .mic,.sf-stage .micbody{fill:var(--ink-2)}
.sf-stage .michead{fill:var(--study)}
.sf-stage .arc{fill:none;stroke:rgba(var(--ink-rgb),.2);stroke-width:2;stroke-dasharray:3 5}
.sf-stage .src{fill:var(--gold)}
.sf-stage .ml{stroke:var(--study);stroke-width:3;stroke-linecap:round}
.sf-stage .mr{stroke:var(--blue);stroke-width:3;stroke-linecap:round}
.sf-stage .pt{fill:var(--ink-2)}
.sf-stage .bar{stroke:rgba(var(--ink-rgb),.25);stroke-width:3;stroke-linecap:round}
.sf-stage .spk{fill:var(--ink-3)}
.sf-stage .img{fill:var(--gold)}
.sf-stage .tbar{fill:none;stroke:var(--ink-3);stroke-width:3;stroke-linecap:round}
.sf-mssvg{max-width:300px;justify-self:center}
.sf-mssvg .lobe.l{fill:var(--study);fill-opacity:.25;stroke:var(--study);stroke-width:1.5}
.sf-mssvg .lobe.r{fill:var(--blue);fill-opacity:.2;stroke:var(--blue);stroke-width:1.5}

.sf-kvs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:24px}.sf-kvs:empty{display:none}
.sf-kv{display:grid;gap:0}
.sf-kv span{font:600 12.5px var(--f-body);color:var(--ink-3)}
.sf-kv b{font:700 17px var(--f-body);color:var(--ink)}
.sf-chip{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--study-tint,rgba(13,154,167,.14));color:var(--ink);font:700 14px var(--f-body)}
.sf-chip.warn{background:var(--gold-tint,rgba(255,194,61,.2))}
svg .tag text{fill:var(--ink);font:700 12px var(--f-body)}
svg .tag rect{fill:var(--surface);stroke:rgba(var(--ink-rgb),.15);stroke-width:1}
:root[data-theme="dark"] svg .tag rect{fill:#1b2f4b}
.sf-31svg .player ellipse{fill:#3f7fa8}.sf-31svg .player .head{fill:#e9b896}
.sf-31svg .michead,.sf-pairsvg .michead{fill:var(--study)}
.sf-31svg .dim,.sf-pairsvg .dim{fill:none;stroke:var(--ink-3);stroke-width:1.5}
.sf-pairsvg .axis{fill:none;stroke:rgba(var(--ink-rgb),.2);stroke-width:1.5;stroke-dasharray:4 4}
.sf-pairsvg .maxis{fill:none;stroke:var(--study);stroke-width:2;stroke-dasharray:3 3}
.sf-pairsvg .angarc{fill:none;stroke:var(--gold-ink);stroke-width:2}
:root[data-theme="dark"] .sf-pairsvg .angarc{stroke:var(--gold)}
.sf-pairsvg .srcl{fill:none;stroke:rgba(var(--ink-rgb),.25);stroke-width:1.5;stroke-dasharray:4 4}
.sf-stage .lr{fill:var(--ink-2);font:700 13px var(--f-body)}
.sf-stage .b.ml,.sf-stage .b.mr{stroke:var(--play)}
.sf-mssvg .mid{fill:var(--ink-2);fill-opacity:.08;stroke:var(--ink-2);stroke-width:2}
.sf-mssvg .side{fill:none;stroke:var(--gold-ink);stroke-width:2;stroke-dasharray:4 3}
:root[data-theme="dark"] .sf-mssvg .side{stroke:var(--gold)}
.sf-mssvg .lt{font:700 14px var(--f-body)}.sf-mssvg .lt.l{fill:var(--study-ink)}.sf-mssvg .lt.r{fill:var(--blue-ink)}.sf-mssvg .lt.m{fill:var(--ink-2)}
:root[data-theme="dark"] .sf-mssvg .lt.r{fill:var(--blue)}
.sf-mssvg{display:block;width:100%;max-width:420px;height:auto;margin:0 auto}
.sf-mssvg .arrow{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.sf-mssvg .pt{fill:var(--ink-2)}
.sf-mssvg .lt.s{fill:var(--gold-ink)}:root[data-theme="dark"] .sf-mssvg .lt.s{fill:var(--gold)}
.sf-pairsvg .srcarc{fill:none;stroke:var(--ink-3);stroke-width:1.5}
svg .tag.angt text{fill:var(--gold-ink)}:root[data-theme="dark"] svg .tag.angt text{fill:var(--gold)}
svg .tag.lrt text{fill:var(--ink-2)}
.sf-mssvg .lobe{stroke-width:1.5;fill-opacity:.16}.sf-mssvg .lobe.l{fill:var(--study);stroke:var(--study)}.sf-mssvg .lobe.r{fill:var(--blue);stroke:var(--blue)}
.sf-mssvg .micbody{fill:var(--ink-2)}.sf-mssvg .michead{fill:var(--ink)}
@media (prefers-reduced-motion:reduce){.sf-play.on,.sf-flow.run .sf-block{animation:none}.sf-bar-t i{transition:none}}
:root[data-theme="dark"] .sf-31svg .bleed{stroke:var(--gold)}
.sf-pairsvg .baxis{fill:none;stroke:rgba(var(--ink-rgb),.3);stroke-width:1.5;stroke-dasharray:3 4}
.sf-pairsvg .wit{fill:none;stroke:rgba(var(--ink-rgb),.25);stroke-width:1}
.sf-mssvg .lt.lr{fill:var(--ink)}

/* Sound Design, Module 3: the mod matrix, the hold key */
.sf-mx{display:grid;grid-template-columns:minmax(0,auto) repeat(3,minmax(0,1fr));gap:6px;align-items:center}
.sf-mx-h{font:700 13px var(--f-body);color:var(--ink-2);text-align:center;min-width:0;overflow-wrap:anywhere}
.sf-mx-r{text-align:left;padding-right:4px}
.sf-mx-c{position:relative;height:52px;min-width:44px;border-radius:12px;border:1.5px solid rgba(var(--ink-rgb),.14);background:var(--surface);overflow:hidden;cursor:pointer;padding:0}
.sf-mx-c::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(var(--ink-rgb),.18)}
.sf-mx-c[aria-pressed="true"]{border-color:var(--study);box-shadow:0 0 0 2px var(--study-tint,rgba(13,154,167,.2))}
.sf-mx-f{position:absolute;left:0;right:0;top:50%;height:0;background:var(--study);opacity:.35}
.sf-mx-f.neg{background:var(--gold)}
.sf-mx-v{position:relative;font:700 13px var(--f-body);color:var(--ink)}
.sf-hold{touch-action:none;user-select:none;-webkit-user-select:none}
.sf-hold[aria-pressed="true"]{background:var(--study);color:#fff}

/* direct manipulation: handles on the drawing, switches for modes */
.sf-envsvg,.sf-lfosvg{display:block;width:100%;max-width:560px;height:auto;touch-action:none;overflow:visible}
.sf-envsvg .curve{fill:none;stroke:var(--study);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.sf-envsvg .area{fill:var(--study);fill-opacity:.1;stroke:none}
.sf-envsvg .susl{fill:none;stroke:rgba(var(--ink-rgb),.14);stroke-width:1}
.sf-envsvg .head,.sf-lfosvg .head{fill:var(--gold);stroke:var(--surface);stroke-width:2}
.hdl,.hdl:focus,.hdl:focus-visible,.sf-lfosvg .surf:focus,.sf-lfosvg .surf:focus-visible{outline:none!important}
.hdl{cursor:grab}.hdl.drag{cursor:grabbing}
.hdl .hit{fill:transparent}
.hdl .knob{fill:var(--surface);stroke:var(--study);stroke-width:3;transition:r .12s var(--ease-out)}
.hdl:hover .knob,.hdl:focus-visible .knob,.hdl.drag .knob{r:10;fill:var(--study)}
.hdl:focus-visible .hit{fill:var(--study);fill-opacity:.12}
svg .tag.stg text{fill:var(--ink-2);font:700 12.5px var(--f-body)}
svg .tag.stg.on text{fill:var(--ink)}svg .tag.stg.on rect{stroke:var(--study)}
.sf-lfosvg .axis{fill:none;stroke:rgba(var(--ink-rgb),.15);stroke-width:1}
.sf-lfosvg .wave{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.sf-lfosvg .surf{fill:transparent;outline:none}
.sf-lfosvg.drag .surf{cursor:ew-resize}
.sf-lfosvg .surf:focus-visible{fill:var(--study);fill-opacity:.06}
.sf-icons{flex-wrap:nowrap}
.sf-icons button{display:inline-flex;align-items:center;justify-content:center;padding:0 10px}
.sf-under{margin-top:-4px}
.sf-sw-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px 0 6px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:650 15px var(--f-body);cursor:pointer;white-space:nowrap}
.sf-sw-btn:hover{background:rgba(var(--ink-rgb),.06)}
.sf-sw-track{position:relative;width:36px;height:22px;border-radius:999px;background:rgba(var(--ink-rgb),.2);transition:background-color .15s var(--ease-out);flex:none}
.sf-sw-track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s var(--ease-out)}
.sf-sw-btn[aria-checked="true"] .sf-sw-track{background:var(--study)}
.sf-sw-btn[aria-checked="true"] .sf-sw-track::after{transform:translateX(14px)}
.sf-ctl{gap:4px 8px}
.sf-vals summary{cursor:pointer;font:650 14px var(--f-body);color:var(--ink-2);padding:12px 0;display:list-item}
.sf-lfosvg .hint{fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
@media (prefers-reduced-motion:reduce){.sf-sw-track,.sf-sw-track::after,.hdl .knob{transition:none}}

/* handles over a canvas plot */
.sf-hwrap{position:relative}
.sf-hsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;touch-action:none;pointer-events:none}
.sf-hsvg .hdl{pointer-events:auto}
.hdl .hhint{fill:none;stroke:var(--study-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.hdl.on .hhint,.hdl.drag .hhint{opacity:0}
.hdl.srch .knob{fill:var(--gold);stroke:var(--gold-ink)}
:root[data-theme="dark"] .hdl.srch .knob{stroke:var(--surface)}

/* Sound Design, Module 4: operators, keys, drawbars */
.sf-algsvg{display:block;width:100%;max-width:520px;height:auto}
.sf-algsvg .op{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.5}
.sf-algsvg .op.car{fill:var(--study-tint,rgba(13,154,167,.16));stroke:var(--study);stroke-width:2}
.sf-algsvg .opt{fill:var(--ink);font:700 12.5px var(--f-body)}
.sf-algsvg .arrow{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sf-algsvg .outl{fill:none;stroke:rgba(var(--ink-rgb),.25);stroke-width:2;stroke-dasharray:4 4}
:root[data-theme="dark"] .sf-algsvg .op{fill:rgba(255,255,255,.06)}
.sf-keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.sf-key{position:relative;min-height:64px;min-width:0;padding:0 0 10px;display:flex;align-items:flex-end;justify-content:center;border:0;border-radius:10px 10px 12px 12px;background:#fff;color:#15365a;font:700 16px var(--f-body);cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(21,54,90,.22)}
.sf-key:active,.sf-key.on{background:var(--study-tint,#d6f0f2);box-shadow:inset 0 0 0 2px var(--study)}
:root[data-theme="dark"] .sf-key{background:#eef4fa;color:#15365a}
.sf-key .k{position:absolute;top:5px;left:0;right:0;text-align:center;font:600 11px var(--f-mono,ui-monospace,Menlo,monospace);color:#536b88;opacity:0;transition:opacity .15s}
html.sf-keyed .sf-key .k{opacity:1}
.sf-bars{position:absolute;inset:0;touch-action:none;cursor:crosshair}
.sf-bar{position:absolute;top:0;bottom:0;outline:none;border-radius:8px}
.sf-bar:focus-visible{box-shadow:inset 0 0 0 2px var(--study)}

/* Recording Studio, Module 5: monitors and heads from above, the cue faders */
.sf-nfsvg,.sf-cuesvg{display:block;width:100%;max-width:520px;height:auto;touch-action:none;overflow:visible}
.sf-nfsvg .mon .cab{fill:var(--ink-2)}.sf-nfsvg .mon .face{fill:var(--study)}
.sf-nfsvg .head .skull{fill:#e9b896}.sf-nfsvg .head .ear{fill:#d9a37f}.sf-nfsvg .head .nose{fill:none;stroke:#b98462;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sf-nfsvg .wallln{fill:none;stroke:var(--ink-3);stroke-width:4;stroke-linecap:round}
.sf-nfsvg .tri{fill:rgba(var(--ink-rgb),.05);stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:4 4}
.sf-nfsvg .tri.ok{fill:var(--study-tint,rgba(13,154,167,.14));stroke:var(--study);stroke-dasharray:none}
.sf-nfsvg .dim{fill:none;stroke:var(--ink-3);stroke-width:1.5}
.sf-nfsvg .near{fill:none;stroke:var(--study);stroke-width:2}
.sf-nfsvg .cross{fill:none;stroke:var(--gold-ink);stroke-width:2;stroke-dasharray:4 4}
:root[data-theme="dark"] .sf-nfsvg .cross{stroke:var(--gold)}
.sf-nfsvg .bar{fill:none;stroke:rgba(var(--ink-rgb),.2);stroke-width:3;stroke-linecap:round}
.sf-nfsvg .band{fill:none;stroke:var(--ink-2);stroke-width:4;stroke-linecap:round}
.sf-nfsvg .cup{fill:var(--ink-2)}
.sf-cuesvg .ftrack{fill:rgba(var(--ink-rgb),.12)}
.sf-cuesvg .ffill{fill:var(--study)}.sf-cuesvg .ffill.warn{fill:var(--gold)}
.sf-cuesvg .flab{fill:var(--ink-2);font:700 12.5px var(--f-body)}
.sf-cuesvg .fval{fill:var(--ink);font:700 12px var(--f-body)}

/* Recording Studio, Module 6: timelines, takes, the tempo map, stars */
.sf-plansvg{display:block;width:100%;max-width:560px;height:auto;touch-action:none;overflow:visible}
.sf-plansvg .bt{fill:#fff;font:700 12px var(--f-body)}
:root[data-theme="dark"] .sf-plansvg .bt{fill:#0b1a2b}
.sf-plansvg .book{fill:var(--study);fill-opacity:.35}.sf-plansvg .overb{fill:var(--gold)}
.sf-plansvg .tick{stroke:var(--ink-3);stroke-width:1}
.sf-plansvg .tl{fill:var(--ink-3);font:600 11.5px var(--f-body)}.sf-plansvg .tl.b{fill:var(--ink);font-weight:700}
.sf-plansvg .prer{fill:var(--gold);fill-opacity:.18}.sf-plansvg .punchr{fill:var(--study);fill-opacity:.2;stroke:var(--study);stroke-width:1.5}
.sf-plansvg .takew{fill:var(--ink-2);fill-opacity:.55}.sf-plansvg .takew.dim{fill-opacity:.22}
.sf-plansvg .grid{stroke:rgba(var(--ink-rgb),.12);stroke-width:1}
.sf-plansvg .tmap{fill:none;stroke:var(--study);stroke-width:3;stroke-linejoin:round}
.sf-plansvg .mark{stroke:var(--gold-ink);stroke-width:1.5;stroke-dasharray:4 4}
:root[data-theme="dark"] .sf-plansvg .mark{stroke:var(--gold)}
.sf-stars{display:flex;gap:4px}
.sf-star{width:44px;height:44px;border:0;border-radius:10px;background:transparent;cursor:pointer;padding:9px}
.sf-star svg{width:26px;height:26px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linejoin:round}
.sf-star.on svg{fill:var(--gold);stroke:var(--gold-ink)}
:root[data-theme="dark"] .sf-star.on svg{stroke:var(--gold)}

/* Recording Studio, Module 7: singer and screen, guitar, piano, choir */
.sf-nfsvg .screen{fill:rgba(var(--ink-rgb),.08);stroke:var(--ink-2);stroke-width:2;stroke-dasharray:2 2}
.sf-nfsvg .micb{fill:var(--ink-2)}.sf-nfsvg .mich{fill:var(--study)}
.sf-nfsvg .gneck{fill:#8a5a3b}.sf-nfsvg .gbody{fill:#d9a066;stroke:#8a5a3b;stroke-width:2}.sf-nfsvg .ghole{fill:#3b2414}
.sf-nfsvg .fret{stroke:#e9d6a8;stroke-width:3}
.sf-nfsvg .aim{fill:none;stroke:var(--study);stroke-width:2;stroke-dasharray:4 4}
.sf-nfsvg .case{fill:#1f2a37;stroke:#0d141c;stroke-width:2}:root[data-theme="dark"] .sf-nfsvg .case{fill:#2d3b4c;stroke:#9fb3c8}
.sf-nfsvg .keys{fill:#f5f1e8;stroke:#536b88;stroke-width:1}
.sf-nfsvg .hammers{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:3 3}
.sf-nfsvg .singer{fill:#e9b896;stroke:#b98462;stroke-width:1.5}.sf-nfsvg .singer.g1{fill:#d9a37f}
/* Studio 8: drums, strings, an orchestral session */
.sf-nfsvg .drum{fill:#e8edf3;stroke:#536b88;stroke-width:2}.sf-nfsvg .drum.snare{fill:#f5f1e8;stroke:var(--study-ink);stroke-width:2.5}
.sf-nfsvg .kick{fill:#cfd8e3;stroke:#536b88;stroke-width:2}
.sf-nfsvg .cym{fill:#e9c46a;fill-opacity:.55;stroke:#b08a2e;stroke-width:1.5}
.sf-nfsvg .seat{fill:var(--ink-3);fill-opacity:.35}
.sf-nfsvg .ray{fill:none;stroke:var(--study);stroke-width:1.5;stroke-dasharray:4 4}
.sf-nfsvg .pl .body{fill:#9fb3c8}.sf-nfsvg .pl .face{fill:#e9b896;stroke:#b98462;stroke-width:1}
.sf-nfsvg .vln{fill:#b0703a;stroke:#6e4320;stroke-width:1}.sf-nfsvg .bow{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round}
.sf-nfsvg .sec{stroke:var(--paper,#fff);stroke-width:2}.sf-nfsvg .sec.s1{fill:#9fc9d0}.sf-nfsvg .sec.s2{fill:#b7d7dc}.sf-nfsvg .sec.s3{fill:#cfe3e6}.sf-nfsvg .sec.ww{fill:#c9b8e0}.sf-nfsvg .sec.br{fill:#ecd28f}
:root[data-theme="dark"] .sf-nfsvg .sec{stroke:#0b1520}:root[data-theme="dark"] .sf-nfsvg .sec.s1{fill:#2f6f78}:root[data-theme="dark"] .sf-nfsvg .sec.s2{fill:#3c7f88}:root[data-theme="dark"] .sf-nfsvg .sec.s3{fill:#4a8a92}:root[data-theme="dark"] .sf-nfsvg .sec.ww{fill:#5d4f80}:root[data-theme="dark"] .sf-nfsvg .sec.br{fill:#80672a}
:root[data-theme="dark"] .sf-nfsvg .drum{fill:#2d3b4c;stroke:#9fb3c8}:root[data-theme="dark"] .sf-nfsvg .drum.snare{fill:#3a4a5e;stroke:var(--study)}:root[data-theme="dark"] .sf-nfsvg .kick{fill:#263342;stroke:#9fb3c8}
.sf-nfsvg .podium{fill:var(--ink-2)}
.sf-nfsvg .ruler{fill:none;stroke:var(--ink-3);stroke-width:2}
.sf-nfsvg .tick{fill:var(--ink-3);font:600 11px var(--f-body,system-ui)}
.sf-nfsvg .mark{fill:var(--gold);stroke:var(--gold-ink,#7a5a00);stroke-width:1}
.sf-nfsvg .tag.lbl text{font:650 10.5px var(--f-body)}.sf-nfsvg .tag.lbl rect{fill-opacity:.9}
.sf-strsvg{max-width:400px}   /* the strings drawing is mostly distance: on a wide screen it stays this size */
/* Studio 9: editing and comping */
.sf-nfsvg .loop{fill:var(--study);fill-opacity:.18;stroke:var(--study);stroke-width:1.5}
.sf-nfsvg .preroll{fill:var(--gold);fill-opacity:.55}
.sf-nfsvg .take{fill:var(--study);fill-opacity:.35}.sf-nfsvg .take.t1{fill-opacity:.22}
.sf-nfsvg .phr{fill:rgba(var(--ink-rgb),.06);stroke:rgba(var(--ink-rgb),.18);stroke-width:1}.sf-nfsvg .phr.sel{fill:var(--study);fill-opacity:.28;stroke:var(--study);stroke-width:2}
.sf-nfsvg .pip{fill:var(--ink-3)}.sf-nfsvg .pip.on{fill:var(--study-ink)}
.sf-nfsvg .breath{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:3 4}
.sf-nfsvg .grid{fill:none;stroke:rgba(var(--ink-rgb),.14);stroke-width:1}
.sf-nfsvg .target{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:6 4}
.sf-nfsvg .fa{fill:none;stroke:var(--ink-3);stroke-width:2}.sf-nfsvg .fb{fill:none;stroke:var(--gold);stroke-width:2}.sf-nfsvg .fsum{fill:none;stroke:var(--study);stroke-width:3}
.sf-nfsvg .pbefore{fill:none;stroke:var(--ink-3);stroke-width:1.5;opacity:.6}.sf-nfsvg .pafter{fill:none;stroke:var(--study);stroke-width:2.5}
.sf-nfsvg .pass{stroke:var(--paper,#fff);stroke-width:1.5}.sf-nfsvg .pass.p0{fill:#46a9b3}.sf-nfsvg .pass.p1{fill:#8a7cc2}.sf-nfsvg .pass.p2{fill:#d4a640}.sf-nfsvg .pass.p3{fill:#6f8fb0}
:root[data-theme="dark"] .sf-nfsvg .pass{stroke:#0b1520}
.sf-nfsvg .lvl-all{fill:none;stroke:var(--ink-3);stroke-width:1.5;opacity:.5}.sf-nfsvg .lvl-kept{fill:none;stroke:var(--study);stroke-width:2.5}
.sf-nfsvg .thr{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:6 4}
.sf-nfsvg .rtitle{fill:var(--ink-2);font:650 11px var(--f-body)}
.sf-nfsvg .take.more{fill:none;stroke:var(--study);stroke-width:1.5;stroke-dasharray:4 3}
/* Studio 10: mixing */
.sf-nfsvg .dlg{fill:var(--gold);fill-opacity:.55}.sf-nfsvg .mus{fill:var(--study);fill-opacity:.45}.sf-nfsvg .mus.on{fill-opacity:.8}.sf-nfsvg .mdip{fill:var(--paper,#fff);fill-opacity:.55}
:root[data-theme="dark"] .sf-nfsvg .mdip{fill:#0b1520}
.sf-nfsvg .refb{fill:#8a7cc2;fill-opacity:.45}.sf-nfsvg .refb.on{fill-opacity:.85}
.sf-nfsvg .ckick{fill:none;stroke:var(--gold);stroke-width:2.5}.sf-nfsvg .cbass{fill:none;stroke:var(--study);stroke-width:2.5}
.sf-nfsvg .grbar{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round}
.sf-nfsvg .direct{fill:none;stroke:var(--ink-2);stroke-width:4}.sf-nfsvg .tail{fill:var(--study);fill-opacity:.3;stroke:var(--study);stroke-width:1.5}
.sf-nfsvg .cband{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:5 4}.sf-nfsvg .cvox{fill:none;stroke:var(--study);stroke-width:2.5}.sf-nfsvg .alane{fill:none;stroke:var(--gold);stroke-width:2.5}
/* Studio 11: delivery */
.sf-nfsvg .lane{fill:rgba(var(--ink-rgb),.07)}.sf-nfsvg .lane.on{fill:var(--study);fill-opacity:.55}
.sf-nfsvg .samp{fill:var(--gold);stroke:var(--gold-ink,#7a5a00);stroke-width:1}
.sf-nfsvg .tgt{fill:var(--ink-3);fill-opacity:.5}.sf-nfsvg .tgt.on{fill:var(--gold);fill-opacity:1}
.sf-nfsvg .place{fill:rgba(var(--ink-rgb),.05);stroke:rgba(var(--ink-rgb),.18);stroke-width:1.5}
.sf-nfsvg .copyb{fill:var(--study);fill-opacity:.35;stroke:var(--study);stroke-width:1.5}
/* Studio 12: the capstone */
.sf-capnote{margin:0 0 10px;padding:8px 12px;border-radius:10px;background:var(--study-tint,rgba(13,154,167,.12));color:var(--ink);font:600 14px var(--f-body)}
.sf-link{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;margin:6px 0;border-radius:12px;justify-self:start;background:var(--sunk,rgba(0,0,0,.04));box-shadow:inset 0 0 0 1.5px var(--rule,rgba(0,0,0,.12));color:var(--study-ink);font:700 15px var(--f-body);text-decoration:none}
.sf-link:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.sf-nfsvg .blk{fill:var(--study);fill-opacity:.4}.sf-nfsvg .blk.b2{fill-opacity:.7}.sf-nfsvg .blk.b3{fill:var(--gold);fill-opacity:.55}
.sf-nfsvg .book{fill:var(--ink-3);fill-opacity:.35}
.sf-nfsvg .singerx{fill:#e9b896;stroke:#b98462;stroke-width:1.5}
.sf-review{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px}
.sf-rv{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:4px 4px 4px 12px;border-radius:12px;background:rgba(var(--ink-rgb),.04)}
.sf-rv-t{font:600 15px var(--f-body);color:var(--ink)}
.sf-rv .sf-chip{flex:none}
/* pass and fix are plain words, not chips (owner, 14 Oct): green for pass, amber for fix */
.sf-rv .sf-chip,.sf-rv .sf-chip.warn{background:none;border-radius:0;padding:0 12px 0 0;font:700 15px var(--f-body);color:var(--ok,#13804f)}
.sf-rv .sf-chip.warn{color:var(--gold-ink,#8a5d00)}
:root[data-theme="dark"] .sf-rv .sf-chip{color:var(--ok,#3fd59a)}:root[data-theme="dark"] .sf-rv .sf-chip.warn{color:var(--gold)}
a.sf-rv-fix.sf-chip{text-decoration:underline;text-underline-offset:3px}
a.sf-rv-fix{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;text-decoration:none;color:var(--ink)}
a.sf-rv-fix:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.sf-seglbl{margin:8px 0 4px;font:700 13px var(--f-body);color:var(--ink-3)}
.sf-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(min-content,auto)}   /* one row: each segment at least its longest word and 44 px, wrapping inside itself */
.sf-seg button,body.ln .sf-seg button{white-space:normal;line-height:1.15;padding:4px 10px;min-width:44px;text-align:center;hyphens:manual}   /* over learn.css's body.ln button nowrap */
@media (max-width:420px){.sf-seg button{font-size:13.5px;padding:4px 7px}}
.sf-seg.many{gap:2px}
@media (max-width:420px){.sf-seg.many button,body.ln .sf-seg.many button{font-size:12.5px;padding:4px 5px}}
.sf-seg.ico button,body.ln .sf-seg.ico button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 5px;min-height:44px}
.sf-seg.ico .sf-ico{display:block;line-height:0;color:var(--ink-2)}.sf-seg.ico button[aria-pressed="true"] .sf-ico:not([data-hue]){color:var(--study-ink)}
.sf-seg.ico .sf-il{font-size:11px;font-weight:650;line-height:1.1}
.sf-seg.ico.many button,body.ln .sf-seg.ico.many button{padding:4px 3px}
.sf-seg.ico.many{padding:3px}
.sf-segpick{margin:4px 0 0;font:700 14px var(--f-body);color:var(--ink)}
/* Sound 5: wavetable, granular, physical modelling */
.sf-nfsvg .wtf{fill:var(--surface,#fff);stroke:rgba(var(--ink-rgb),.2);stroke-width:1}
:root[data-theme="dark"] .sf-nfsvg .wtf{fill:#13233a}
.sf-nfsvg .wtw{fill:none;stroke:var(--ink-3);stroke-width:1.5}
.sf-nfsvg .wtcur{fill:var(--study-tint,rgba(13,154,167,.12));stroke:var(--study);stroke-width:1.5}
.sf-nfsvg .grain{fill:var(--gold);fill-opacity:.28;stroke:var(--gold);stroke-width:1}
.sf-nfsvg .mode{fill:none;stroke:var(--study);stroke-width:4;stroke-linecap:round}
.sf-nfsvg .ksbar{fill:var(--study);fill-opacity:.7}.sf-nfsvg .ksbar.gone{fill:var(--ink-3);fill-opacity:.25}
.sf-nfsvg .wtf.on{stroke:var(--study);stroke-width:1.5}
/* the verdict chip is one element, hidden when there is none; an empty readout row takes no room */
.sf-chip[hidden]{display:none}
.sf-kvs:not(:has(> :not([hidden]))){display:none}
/* Sound Design pages (owner, 13 Oct): the drawing large, labels 12 px or more at a phone's width, readouts as tiles,
   Play big with the verdict beside it; the caption sits in "More on this" (sas-figs.js sndTidy) */
.sf-snd .sf-nfsvg,.sf-snd .sf-envsvg,.sf-snd .sf-lfosvg,.sf-snd .sf-algsvg{max-width:680px}
.sf-snd .sf-nfsvg .tick,.sf-snd .sf-nfsvg .rtitle{font-size:12px}
.sf-snd .sf-nfsvg .tag.lbl text{font-size:11.6px}   /* 12 px on a phone (a 340-wide drawing at 358 px); 9 px from 700 px as the rest */
.sf-snd .sf-nfsvg.sf-tight .tag.lbl text{font-size:10.5px}   /* a 252-wide drawing: already 15 px on a phone */
@media (min-width:700px){.sf-snd .sf-nfsvg .tick,.sf-snd .sf-nfsvg .rtitle,.sf-snd .sf-nfsvg .rrc text{font-size:9px}.sf-snd .sf-nfsvg .fxblkt{font-size:10px}.sf-snd .sf-nfsvg .tag text{font-size:9px}}   /* the drawing is about twice its size here: 18 px on screen */
.sf-snd .sf-kvs{gap:8px}
.sf-snd .sf-kv{background:var(--sunk);border-radius:12px;padding:8px 14px;min-width:96px}
.sf-snd .sf-kv b{font-size:20px;line-height:1.25}
.sf-snd .sf-read{background:var(--sunk);border-radius:12px;padding:10px 14px}.sf-snd .sf-read:empty{display:none}
.sf-snd .sf-playrow{gap:12px}
.sf-snd .sf-playrow > .sf-play{min-height:52px;padding:0 26px 0 18px;font-size:17px}
.sf-snd .sf-playrow > .sf-verdict{flex-basis:100%}
/* a figure's verdict is plain text, never a pill (owner, 14 Oct): accent ink, on its own line under Play */
.sf-chip.sf-verdict,.sf-chip.sf-verdict.warn{display:block;background:none;border:0;border-radius:0;padding:0;font:700 15.5px/1.35 var(--f-body);color:var(--study-ink)}
.sf-chip.sf-verdict.warn{color:var(--gold-ink,#8a5d00)}
:root[data-theme="dark"] .sf-chip.sf-verdict.warn{color:var(--gold)}
.sf-chip.sf-verdict[hidden]{display:none}
.fl-more .sf-capmore{font-size:inherit;font-weight:400;color:var(--ink-2);margin:0 0 12px}
/* the pinned Continue bar never hides what is focused or the end of the page; the page colour reaches the bottom */
html:has(body.sas-ln){scroll-padding-bottom:132px;background:var(--paper)}
/* Sound pages: a segmented control spans the column, and the chosen segment is brand teal (owner, 13 Oct) */
.sf-snd .sf-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min-content,1fr);width:100%;justify-self:stretch}
.sf-snd .sf-seg:not(.ico) button[aria-pressed="true"]{background:var(--study);color:#fff;box-shadow:none}
:root[data-theme="dark"] .sf-snd .sf-seg:not(.ico) button[aria-pressed="true"]{background:var(--study);color:#06222a}
.sf-snd .sf-seg.ico button[aria-pressed="true"]{background:var(--study-tint,rgba(13,154,167,.16));box-shadow:inset 0 0 0 2px var(--study)}
.sf-snd .sf-seg button .sf-sw{outline:2px solid rgba(255,255,255,.7)}
/* key tracking: two spectra, each note in its own colour, the cutoff a line that glides */
.sf-ktsvg .ktbg{fill:rgba(var(--ink-rgb),.035);stroke:transparent;stroke-width:2;transition:fill .2s,stroke .2s}
.sf-ktsvg .ktp.lo{--kt:var(--study)}.sf-ktsvg .ktp.hi{--kt:var(--play,#6a4bc4)}
.sf-ktsvg .ktp.on .ktbg{fill:color-mix(in srgb,var(--kt) 12%,transparent);stroke:var(--kt)}
.sf-ktsvg .ktbar{fill:var(--kt);transition:y .35s var(--ease-out),height .35s var(--ease-out)}
.sf-ktsvg .ktfill{fill:var(--kt);fill-opacity:.14;transition:d .35s var(--ease-out)}
.sf-ktsvg .ktbase{fill:none;stroke:rgba(var(--ink-rgb),.25);stroke-width:2}
.sf-ktsvg .ktcut{transition:transform .35s var(--ease-out)}
.sf-ktsvg .ktline{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:5 4;stroke-linecap:round}
.sf-ktsvg .tag.kttag rect{stroke:var(--ink);stroke-width:1.5}
.sf-ktsvg .tag.ktmood rect{stroke:var(--study)}
.sf-ktsvg .tag.ktmood.dull rect{stroke:var(--gold-ink,#8a5d00)}
.sf-ktenv .ktearea{fill:var(--gold);fill-opacity:.14}
.sf-ktenv .ktecurve{fill:none;stroke:var(--gold-ink,#8a5d00);stroke-width:3;stroke-linejoin:round}
:root[data-theme="dark"] .sf-ktenv .ktecurve{stroke:var(--gold)}
.sf-ktenv .grid{stroke-width:1.5}
.sf-ktenv .kthead{fill:var(--gold-ink,#8a5d00);stroke:var(--surface);stroke-width:2}
:root[data-theme="dark"] .sf-ktenv .kthead{fill:var(--gold)}
.sf-ktplay .ktlo,.sf-ktplay .kthi{flex:1 1 0}
.sf-ktplay .kthi{background:var(--play,#6a4bc4)}
:root[data-theme="dark"] .sf-ktplay .kthi{background:var(--play,#8f74e8)}
@media (prefers-reduced-motion:reduce){.sf-ktsvg .ktbar,.sf-ktsvg .ktfill,.sf-ktsvg .ktcut,.sf-ktsvg .ktbg{transition:none}}
.sf-snd .sf-nfsvg .grid{stroke-width:2;stroke:rgba(var(--ink-rgb),.1)}.sf-snd .sf-nfsvg .ruler{stroke-width:2}   /* no hairlines on the Sound pages */
/* Sound Module 6: sampling */
.sf-nfsvg .smpenv{fill:var(--study);fill-opacity:.16}.sf-nfsvg .smpenv.out{fill:var(--play,#6a4bc4);fill-opacity:.16}
.sf-nfsvg .smpzig{fill:none;stroke:var(--study);stroke-width:2;stroke-linejoin:round}.sf-nfsvg .smpzig.out{stroke:var(--play,#6a4bc4)}
:root[data-theme="dark"] .sf-nfsvg .smpzig.out{stroke:var(--play,#8f74e8)}
.sf-nfsvg .kbw{fill:var(--surface,#fff);stroke:rgba(var(--ink-rgb),.35);stroke-width:2}
:root[data-theme="dark"] .sf-nfsvg .kbw{fill:#dfe8f3}
.sf-nfsvg .kbb{fill:var(--ink-2)}
:root[data-theme="dark"] .sf-nfsvg .kbb{fill:#0b1626;stroke:rgba(255,255,255,.35);stroke-width:1.5}
.sf-nfsvg .kbw.root,.sf-nfsvg .kbb.root{fill:var(--study)}
.sf-nfsvg .kbw.on,.sf-nfsvg .kbb.on{fill:var(--play,#6a4bc4)}
:root[data-theme="dark"] .sf-nfsvg .kbw.on,:root[data-theme="dark"] .sf-nfsvg .kbb.on{fill:var(--play,#8f74e8)}
/* each sample's zone in its own hue, lighter for soft and stronger for hard; the chosen zone outlined */
.sf-nfsvg .zone{stroke:none;fill-opacity:.2}.sf-nfsvg .zone.hard{fill-opacity:.38}
.sf-nfsvg .zone.z0{fill:var(--study);--zh:var(--study)}.sf-nfsvg .zone.z1{fill:var(--blue,#1f6fb5);--zh:var(--blue,#1f6fb5)}
.sf-nfsvg .zone.z2{fill:var(--play,#6a4bc4);--zh:var(--play,#6a4bc4)}.sf-nfsvg .zone.z3{fill:var(--gold);--zh:var(--gold-ink,#8a5d00)}
:root[data-theme="dark"] .sf-nfsvg .zone{fill-opacity:.3}:root[data-theme="dark"] .sf-nfsvg .zone.hard{fill-opacity:.5}
:root[data-theme="dark"] .sf-nfsvg .zone.z1{fill:var(--blue,#5aaff0)}:root[data-theme="dark"] .sf-nfsvg .zone.z2{fill:var(--play,#8f74e8)}:root[data-theme="dark"] .sf-nfsvg .zone.z3{--zh:var(--gold)}
.sf-nfsvg .zone.on{stroke:var(--ink);stroke-width:3;fill-opacity:.6}
.sf-nfsvg .rootln{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 5;stroke:var(--ink-2)}
.sf-nfsvg .trimnz{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linejoin:round}
.sf-nfsvg .trimwv{fill:none;stroke:var(--study);stroke-width:2;stroke-linejoin:round}
.sf-nfsvg .trimon{fill:none;stroke:var(--gold-ink,#8a5d00);stroke-width:2.5;stroke-dasharray:3 3}
:root[data-theme="dark"] .sf-nfsvg .trimon{stroke:var(--gold)}
.sf-nfsvg .rootmk{fill:none;stroke:var(--ink-2);stroke-width:3;stroke-linecap:round}
.sf-nfsvg .tag.lay rect{fill:var(--surface);stroke:none}
.sf-nfsvg .rrc rect{fill-opacity:.3;stroke-width:2}.sf-nfsvg .rrc text{fill:var(--ink);font:700 12.5px var(--f-body)}
.sf-nfsvg .rrc.s0 rect{fill:var(--study);stroke:var(--study)}.sf-nfsvg .rrc.s1 rect{fill:var(--blue,#1f6fb5);stroke:var(--blue,#1f6fb5)}
.sf-nfsvg .rrc.s2 rect{fill:var(--play,#6a4bc4);stroke:var(--play,#6a4bc4)}.sf-nfsvg .rrc.s3 rect{fill:var(--gold);stroke:var(--gold-ink,#8a5d00)}
.sf-nfsvg .rrc.on rect{fill-opacity:.85}
.sf-nfsvg .rrrep{fill:none;stroke:var(--gold-ink,#8a5d00);stroke-width:3;stroke-linecap:round}
:root[data-theme="dark"] .sf-nfsvg .rrrep{stroke:var(--gold)}
.sf-nfsvg .loopreg{fill:var(--gold);fill-opacity:.16}
.sf-nfsvg .seam{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:4 4}
.sf-nfsvg .intune{fill:var(--study);fill-opacity:.2}
/* Sound Module 7: effects */
.sf-nfsvg .rvarea{fill:var(--study);fill-opacity:.22;stroke:var(--study);stroke-width:2;stroke-linejoin:round}
.sf-nfsvg .rver{fill:none;stroke:var(--study);stroke-width:3;stroke-linecap:round}
.sf-nfsvg .rvclick{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.sf-nfsvg .cvir{fill:var(--play,#6a4bc4);fill-opacity:.3;stroke:var(--play,#6a4bc4);stroke-width:2}
.sf-nfsvg .cvcopy{fill:var(--play,#6a4bc4);fill-opacity:.2;stroke:var(--play,#6a4bc4);stroke-width:2}
:root[data-theme="dark"] .sf-nfsvg .cvir,:root[data-theme="dark"] .sf-nfsvg .cvcopy{fill:var(--play,#8f74e8);stroke:var(--play,#8f74e8)}
.sf-nfsvg .dlnote{fill:var(--ink-2)}.sf-nfsvg .dlecho{fill:var(--study)}
.sf-nfsvg .dsbox{fill:rgba(var(--ink-rgb),.04);stroke:rgba(var(--ink-rgb),.25);stroke-width:2}
.sf-nfsvg .dslin{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:4 4}
.sf-nfsvg .mfband{fill:var(--gold);fill-opacity:.16}
.sf-nfsvg .fxblk{stroke-width:2.5}.sf-nfsvg .fxblk.drive{fill:color-mix(in srgb,var(--gold) 30%,transparent);stroke:var(--gold-ink,#8a5d00)}
.sf-nfsvg .fxblk.delay{fill:color-mix(in srgb,var(--study) 22%,transparent);stroke:var(--study)}
.sf-nfsvg .fxblk.reverb{fill:color-mix(in srgb,var(--play,#6a4bc4) 22%,transparent);stroke:var(--play,#6a4bc4)}
:root[data-theme="dark"] .sf-nfsvg .fxblk.drive{stroke:var(--gold)}:root[data-theme="dark"] .sf-nfsvg .fxblk.reverb{stroke:var(--play,#8f74e8)}
.sf-nfsvg .fxblkt{fill:var(--ink);font:700 13px var(--f-body)}
.sf-nfsvg .fxarrow{fill:none;stroke:var(--ink-3);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
body.sas-ln .lp-stage{padding-bottom:max(200px,calc(var(--sas-foot,96px) + 16px))}   /* the last element always clears the pinned bar */
body.sas-ln.pad-on .lp-stage{padding-bottom:max(440px,calc(var(--sas-foot,96px) + 16px))}
/* Sound Module 8: sound design foundations */
.sf-nfsvg .dzpart{stroke-width:2;fill-opacity:.3}.sf-nfsvg .dzpart.off{opacity:.3}
.sf-nfsvg .dzpart.tr{fill:var(--gold);stroke:var(--gold-ink,#8a5d00)}.sf-nfsvg .dzpart.bd{fill:var(--study);stroke:var(--study)}.sf-nfsvg .dzpart.tl{fill:var(--play,#6a4bc4);stroke:var(--play,#6a4bc4)}
:root[data-theme="dark"] .sf-nfsvg .dzpart.tr{stroke:var(--gold)}:root[data-theme="dark"] .sf-nfsvg .dzpart.tl{fill:var(--play,#8f74e8);stroke:var(--play,#8f74e8)}
.sf-nfsvg .lyb{fill-opacity:.3;stroke-width:2}.sf-nfsvg .lyb.l0{fill:var(--play,#6a4bc4);stroke:var(--play,#6a4bc4)}.sf-nfsvg .lyb.l1{fill:var(--study);stroke:var(--study)}.sf-nfsvg .lyb.l2{fill:var(--gold);stroke:var(--gold-ink,#8a5d00)}
:root[data-theme="dark"] .sf-nfsvg .lyb.l0{fill:var(--play,#8f74e8);stroke:var(--play,#8f74e8)}:root[data-theme="dark"] .sf-nfsvg .lyb.l2{stroke:var(--gold)}
.sf-nfsvg .lyb.clash{stroke-dasharray:5 4;stroke-width:3}
.sf-nfsvg .fpic{fill:rgba(var(--ink-rgb),.08);stroke:rgba(var(--ink-rgb),.25);stroke-width:2}
.sf-nfsvg .fev{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:3 4}
.sf-nfsvg .fsnd{fill:var(--study);fill-opacity:.55;stroke:var(--study);stroke-width:2}.sf-nfsvg .fsnd.off{fill:var(--gold);stroke:var(--gold-ink,#8a5d00)}
.sf-nfsvg .dsmap{fill:rgba(var(--ink-rgb),.04);stroke:rgba(var(--ink-rgb),.25);stroke-width:2}
.sf-nfsvg .dsq{fill:var(--ink-3);font:650 12px var(--f-body)}
@media (min-width:700px){.sf-snd .sf-nfsvg .dsq{font-size:9px}}
.sf-dztog .sf-tog[aria-pressed="true"]{background:var(--study);color:#fff}
:root[data-theme="dark"] .sf-dztog .sf-tog[aria-pressed="true"]{color:#06222a}
/* Sound Module 9: games and interfaces */
.sf-nfsvg .uicur{fill:none;stroke:var(--study);stroke-width:4;stroke-linecap:round}
.sf-nfsvg .uiother{fill:none;stroke:rgba(var(--ink-rgb),.25);stroke-width:2.5;stroke-linecap:round}
.sf-nfsvg .uilim{fill:none;stroke:var(--gold-ink,#8a5d00);stroke-width:2;stroke-dasharray:4 4}
:root[data-theme="dark"] .sf-nfsvg .uilim{stroke:var(--gold)}
.sf-nfsvg .gmstep{fill:var(--study);fill-opacity:.6;stroke:var(--study);stroke-width:2}
.sf-nfsvg .hitz{fill-opacity:.14}.sf-nfsvg .hitz.light{fill:var(--study)}.sf-nfsvg .hitz.medium{fill:var(--blue,#1f6fb5)}.sf-nfsvg .hitz.heavy{fill:var(--play,#6a4bc4)}
.sf-nfsvg .hitz.on{fill-opacity:.32;stroke:var(--ink-2);stroke-width:2}
.sf-nfsvg .lpbed{fill:var(--study);fill-opacity:.25;stroke:var(--study);stroke-width:2}
.sf-nfsvg .lploop{fill:var(--blue,#1f6fb5);fill-opacity:.3;stroke:var(--blue,#1f6fb5);stroke-width:2}.sf-nfsvg .lploop.alt{fill-opacity:.18}
.sf-nfsvg .lpspot{fill:var(--gold);fill-opacity:.6;stroke:var(--gold-ink,#8a5d00);stroke-width:2}
.sf-nfsvg .lpbed.off,.sf-nfsvg .lploop.off,.sf-nfsvg .lpspot.off{opacity:.3}
.sf-nfsvg .ambbed{fill:var(--study);fill-opacity:.08;stroke:rgba(var(--ink-rgb),.25);stroke-width:2}
.sf-nfsvg .ambspread{fill:var(--study);fill-opacity:.16}
.sf-nfsvg .ambshot{fill:var(--gold);stroke:var(--gold-ink,#8a5d00);stroke-width:2}
.sf-kvs > .sf-verdict{flex-basis:100%}
/* callouts inside drawings: a squared box in the paper tone with a thin ink border, never a pill (owner, 14 Oct) */
svg .tag rect{fill:var(--paper,var(--surface));stroke:rgba(var(--ink-rgb),.3);stroke-width:1}
:root[data-theme="dark"] svg .tag rect{fill:var(--paper,#0b1626)}
/* Sound Module 10: cinematic and sci-fi */
.sf-nfsvg .cnswell{fill:var(--gold);fill-opacity:.2;stroke:none}
.sf-nfsvg .cnhit{fill:none;stroke:var(--ink-2);stroke-width:2.5;stroke-dasharray:4 3}
.sf-nfsvg .cnlow{fill:var(--play,#6a4bc4);fill-opacity:.1}
.sf-nfsvg .brl{stroke-width:2;fill-opacity:.3}.sf-nfsvg .brl.off{opacity:.3}
.sf-nfsvg .brl.low{fill:var(--study);stroke:var(--study)}.sf-nfsvg .brl.sub{fill:var(--play,#6a4bc4);stroke:var(--play,#6a4bc4)}
.sf-nfsvg .brl.edge{fill:var(--gold);stroke:var(--gold-ink,#8a5d00)}.sf-nfsvg .brl.tail{fill:var(--blue,#1f6fb5);stroke:var(--blue,#1f6fb5)}
:root[data-theme="dark"] .sf-nfsvg .brl.sub{fill:var(--play,#8f74e8);stroke:var(--play,#8f74e8)}:root[data-theme="dark"] .sf-nfsvg .brl.edge{stroke:var(--gold)}
.sf-nfsvg .whpath{fill:none;stroke:var(--study);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sf-nfsvg .whdist{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:3 4}
/* Sound Module 11: the capstone */
.sf-nfsvg .scfile{fill:var(--study);fill-opacity:.25;stroke:var(--study);stroke-width:2}.sf-nfsvg .scfile.mix{fill:var(--play,#6a4bc4);stroke:var(--play,#6a4bc4)}
.sf-nfsvg .scname{fill:var(--ink);font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace}.sf-nfsvg .scname.bad{fill:var(--gold-ink,#8a5d00)}
:root[data-theme="dark"] .sf-nfsvg .scname.bad{fill:var(--gold)}
@media (min-width:700px){.sf-snd .sf-nfsvg .scname{font-size:10px}}
.sf-snd.fl-fig .sf-capnote,.sf-snd .sf-capnote{background:none;padding:0;border-radius:0;color:var(--ink-3);font:500 14px var(--f-body)}   /* one muted line on the Sound pages (owner, 14 Oct) */
/* bl-drag in the figures (coordinator, 14 Oct): the track's visible ends line up with the label row (the label's left
   edge, the value's right edge), as the range it replaced; the handle travels inside it, its centre 22 px in at each
   end, and the fill runs to the handle's centre */
.sf-sl .bl-drag .bl-drag-rail{left:0;right:0}
.sf-sl .bl-drag .bl-drag-fill{right:auto;width:calc(22px + var(--p,0) * (100% - 44px));transform:none}
.bl-drag-rtl.sf-drag .bl-drag-fill{left:auto;right:0}