@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-normal-latin.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-normal-latin-ext.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-italic-latin.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F}
:root{--bg:#f4efe5;--ink:#1f1b16;--muted:#5f564a;--line:#d8cdb9;--line-soft:#e4dccd;--accent:#86591a;--gold:#b8893c;--card:#fbf8f2;--strip:#c9a667;
--stage:#0c0a08;--stage-ink:#efe6d4;--stage-muted:#b5a88f;--stage-line:#3a3127;--stage-accent:#e2b667;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f0d0b;--ink:#ece3d3;--muted:#b3a792;--line:#3a3128;--line-soft:#2b241d;--accent:#e2b667;--card:#17130f;--strip:#8a6a3a;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f0d0b;--ink:#ece3d3;--muted:#b3a792;--line:#3a3128;--line-soft:#2b241d;--accent:#e2b667;--card:#17130f;--strip:#8a6a3a;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:56px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.6 "Source Serif 4",Georgia,serif;overflow-x:hidden}
a{color:var(--accent)}
.skip{position:absolute;left:-999px;top:8px;z-index:20;background:var(--bg);padding:8px 12px}.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;height:48px;padding:0 max(16px,env(safe-area-inset-left));background:var(--stage);color:var(--stage-ink);border-bottom:1px solid var(--stage-line);font-size:15px}
.topbar a{color:var(--stage-ink);text-decoration:none}.topbar .home{font-weight:600;white-space:nowrap}
.topnav{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;min-width:0}.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--stage-muted);white-space:nowrap}.topnav a:hover{color:var(--stage-ink)}
.spacer{flex:1}
.chip{border:1px solid var(--stage-line);border-radius:99px;padding:3px 10px;white-space:nowrap;font-size:14px}
.icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--stage-line);background:transparent;color:var(--stage-ink);cursor:pointer;flex:none}
.icon-btn svg{display:block}.icon-btn svg[hidden]{display:none}
@media (pointer:coarse){.icon-btn{width:44px;height:44px}}
.stage{background:#0d0b09;color:var(--stage-ink);display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,min(82vh,780px));grid-template-areas:"label vitrine" "instr vitrine";gap:0 48px;padding:40px max(24px,4vw) 36px;align-items:start;scroll-margin-top:48px}
.label{grid-area:label;max-width:34rem;align-self:end}
.kicker{font-variant:small-caps;letter-spacing:.08em;color:var(--stage-accent);margin:0 0 .4rem;font-size:17px}
h1{font-size:clamp(40px,5.4vw,76px);line-height:1.02;font-weight:500;margin:0 0 1rem;letter-spacing:-.01em}
.dek{font-size:clamp(18px,1.5vw,21px);margin:0 0 1rem;color:var(--stage-ink)}
.hint{font-size:15.5px;color:var(--stage-muted);margin:0 0 .9rem}
.hint b{color:var(--stage-ink);font-weight:600}
.vitrine{grid-area:vitrine;position:relative}
#plate-canvas{display:block;width:100%;aspect-ratio:1;touch-action:none;cursor:crosshair;background:#0d0b09}
#plate-canvas:focus-visible{outline:2px solid var(--stage-accent);outline-offset:4px}
.fail{display:none;color:var(--stage-muted);font-size:15px}
.failed .fail{display:block}.failed #plate-canvas,.failed .instrument{display:none}
.instrument{grid-area:instr;max-width:34rem;align-self:start}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.instrument button,.instrument select{font:inherit;font-size:15.5px;color:var(--stage-ink);background:transparent;border:1px solid var(--stage-line);border-radius:99px;padding:8px 15px;min-height:40px;cursor:pointer}
.instrument button:hover,.instrument select:hover{border-color:var(--stage-accent)}
.instrument button:focus-visible,.instrument select:focus-visible,#freqRange:focus-visible{outline:2px solid var(--stage-accent);outline-offset:2px}
.instrument button[aria-pressed="true"]{background:var(--stage-accent);color:#1a130b;border-color:var(--stage-accent)}
.instrument .primary{font-size:17px;padding:9px 22px;border-color:var(--stage-accent)}
.instrument .round{width:40px;padding:0;font-size:13px}
.instrument select{background:var(--stage);padding:6px 10px}
.readout{margin-left:6px;font-variant-numeric:tabular-nums;font-size:19px}#note{color:var(--stage-accent);margin-left:6px}
#strip{display:block;width:100%;height:56px;margin:14px 0 0;cursor:ew-resize;touch-action:none;--strip:#8a6a3a;--muted:#6f6352;--accent:#f2cf8a}
#freqRange{width:100%;margin:2px 0 0;accent-color:var(--stage-accent)}
.strip-note{font-size:14px;color:var(--stage-muted);margin:.2rem 0 .9rem}
.tools{font-size:15px}.mount{color:var(--stage-muted);font-size:15px}
.live{min-height:1.5em;font-size:15px;color:var(--stage-accent);margin:.6rem 0 0}
@media (pointer:coarse){.instrument button,.instrument select{min-height:44px}.instrument .round{width:44px}}
@media (max-width:860px){.stage{grid-template-columns:1fr;grid-template-areas:"label" "vitrine" "instr";padding:20px 16px 28px;gap:0}.label{align-self:start}.vitrine{margin:4px -10px 12px}h1{margin-bottom:.5rem}.dek{font-size:17px;line-height:1.5}}
.prose{max-width:44rem;margin:0 auto;padding:24px 16px 48px}
section{scroll-margin-top:56px}
h2{font-size:clamp(26px,3vw,34px);line-height:1.15;font-weight:500;margin:2.6rem 0 .8rem}
h2 .anchor{color:inherit;text-decoration:none}h2 .anchor:hover::after{content:" #";color:var(--muted)}
.score{font-size:16px;color:var(--muted)}#score{color:var(--accent);font-size:20px}
.figs{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:640px){.figs{grid-template-columns:repeat(2,1fr)}}
.fig button{display:block;width:100%;padding:0;background:var(--card);border:1px solid var(--line);border-radius:6px;cursor:pointer;color:var(--ink);text-align:left;font:inherit;overflow:hidden}
.fig button:hover,.fig button:focus-visible{border-color:var(--accent);outline:none}
.fig img{display:block;width:100%;height:auto;aspect-ratio:1}
.fig.found button{display:grid;grid-template-columns:1fr 1fr}.fig.found .lab{grid-column:1/-1}.fig .yours{filter:none!important}
:root[data-theme="dark"] .fig img{filter:invert(.9) sepia(.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fig img{filter:invert(.9) sepia(.3)}}
.fig .lab{display:block;padding:6px 10px 8px;font-size:14px;line-height:1.35}.fig .hz{color:var(--muted)}
.fig .st{display:block;color:var(--accent);font-weight:600;min-height:1.3em;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.fig.found button{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset;background:linear-gradient(160deg,rgba(226,182,103,.28),var(--card) 60%)}
figure.tab{margin:1.6rem auto;max-width:560px}figure.tab img{width:100%;height:auto;display:block;border:1px solid var(--line)}
figcaption{font-size:14.5px;color:var(--muted);margin-top:.4rem}
.src{font-size:15px;padding-left:1.2rem}.src li{margin:.4rem 0}
.share-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2rem 0 0;color:var(--muted);font-size:15px}
.share-row a,.share-row button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--ink);cursor:pointer;padding:0}
.share-row a:hover,.share-row button:hover,.share-row a:focus-visible,.share-row button:focus-visible{color:var(--accent);border-color:var(--accent)}
.share-row svg{width:18px;height:18px;fill:currentColor}.share-row [hidden]{display:none}
@media (pointer:coarse){.share-row a,.share-row button{width:44px;height:44px}}
.share-row .copied{flex-basis:100%;min-height:1.2em;font-size:14px}
footer{border-top:1px solid var(--line);padding:20px 16px 40px;text-align:center;font-size:15px;color:var(--muted)}
.to-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);display:grid;place-items:center;cursor:pointer;z-index:9;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.to-top[hidden]{display:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:520px){.topnav{display:none}}