:root{--plate: #e3e3da;--plate-deep: #d8d8cd;--paper: #ecece4;--ink: #15191b;--ink-soft: #5d6260;--ink-faint: #8d918a;--rule: #c2c3b6;--rule-faint: #d3d4c8;--accent: #26307e;--accent-warm: #b24036;--font-display: "Bahnschrift", "DIN Alternate", "Archivo Narrow", "Oswald", "Helvetica Neue", system-ui, sans-serif;--font-body: "Constantia", "Iowan Old Style", "Palatino Linotype", "Charter", Georgia, serif;--font-mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SF Mono", ui-monospace, monospace;--measure: 33rem;--gutter: clamp(1.1rem, 4vw, 3rem);color-scheme:light}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background-color:var(--plate);background-image:repeating-linear-gradient(to right,rgba(21,25,27,.028) 0 1px,transparent 1px 26px),repeating-linear-gradient(to bottom,rgba(21,25,27,.028) 0 1px,transparent 1px 26px);color:var(--ink);font-family:var(--font-body);font-size:clamp(1rem,.97rem + .16vw,1.08rem);line-height:1.62;font-kerning:normal;text-rendering:optimizeLegibility}::selection{background:var(--accent);color:var(--plate)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.skip{position:absolute;left:-9999px;top:0;z-index:20;background:var(--ink);color:var(--plate);padding:.6rem 1rem;font-family:var(--font-mono);font-size:.75rem}.skip:focus{left:0}.masthead{position:sticky;top:0;z-index:10;background:var(--plate);border-bottom:1px solid var(--ink)}.masthead-in{max-width:64rem;margin:0 auto;padding:.5rem var(--gutter);display:flex;align-items:baseline;gap:.85rem}.wordmark{font-family:var(--font-display);font-stretch:82%;font-weight:600;font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase}.masthead-sub{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-soft);letter-spacing:.04em}.masthead-audio{margin-left:auto}.sound{display:inline-flex;align-items:center;gap:.5rem;background:transparent;border:1px solid var(--rule);color:var(--ink-soft);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;cursor:pointer}.sound:hover{border-color:var(--ink);color:var(--ink)}.sound-mark{width:8px;height:8px;border:1px solid currentColor;background:transparent}.sound.is-live{color:var(--ink);border-color:var(--ink)}.sound.is-live .sound-mark{background:var(--accent);border-color:var(--accent)}.sound.is-muted .sound-mark{background:repeating-linear-gradient(45deg,currentColor 0 1px,transparent 1px 3px)}main{max-width:64rem;margin:0 auto;padding:0 var(--gutter) 5rem}.prose{max-width:var(--measure)}.prose p{margin:0 0 1.05em}.prose em,.aside em{font-style:italic}.hero{padding:clamp(3rem,9vw,6.5rem) 0 clamp(2rem,5vw,3.5rem)}.eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 clamp(1rem,3vw,1.9rem);padding-bottom:.55rem;border-bottom:1px solid var(--rule)}.hero-title{font-family:var(--font-display);font-stretch:80%;font-weight:700;font-size:clamp(2.9rem,12.5vw,8.4rem);line-height:.84;letter-spacing:-.012em;text-transform:uppercase;margin:0 0 clamp(1.2rem,3vw,2rem)}.hero-title em{font-family:var(--font-body);font-style:italic;font-weight:400;font-stretch:normal;text-transform:lowercase;letter-spacing:-.02em;color:var(--accent);padding-right:.06em}.deck{max-width:38rem;font-size:1.16em;line-height:1.5;margin:0 0 clamp(2rem,5vw,3rem);color:#23282a}.card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--ink)}.card{display:flex;flex-direction:column;gap:.5rem;align-items:stretch;text-align:left;background:var(--plate);border:0;padding:.85rem .9rem .75rem;font:inherit;color:inherit;cursor:pointer}.card:hover{background:var(--paper)}.card.is-sounding{background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink)}.card-frame{display:block;background:var(--paper);border:1px solid var(--rule)}.card-canvas{display:block;width:100%;height:158px}.card-name{font-family:var(--font-display);font-stretch:88%;font-size:1.22rem;font-weight:600;letter-spacing:.01em}.card-note{font-size:.88rem;line-height:1.42;color:var(--ink-soft)}.card-cue{display:flex;align-items:center;gap:.4rem;margin-top:auto;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}.card-cue-mark{width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}.card.is-sounding .card-cue{color:var(--ink)}.card.is-sounding .card-cue-mark{width:8px;height:8px;border:0;background:var(--ink)}.card.is-sounding .card-cue-text:after{content:" — sounding"}.hero-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem;margin:.9rem 0 0;font-size:.92rem;color:var(--ink-soft)}.hero-foot-key{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.09em;color:var(--ink);border:1px solid var(--rule);padding:.12rem .4rem}.legend{display:grid;grid-template-columns:auto 1fr;gap:.45rem .9rem;align-items:center;margin-top:clamp(2.4rem,6vw,3.6rem);padding-top:.8rem;border-top:1px solid var(--rule)}.legend-title{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}.legend-strip{display:flex;gap:2px;height:13px}.legend-chip{flex:1;max-width:34px}.legend-note{grid-column:2;font-size:.85rem;color:var(--ink-soft);max-width:34rem}.plate{padding-top:clamp(3rem,8vw,5.5rem);scroll-margin-top:4rem}.plate-head{display:flex;align-items:baseline;gap:1rem;border-top:1.5px solid var(--ink);padding-top:.55rem;margin-bottom:1.4rem}.plate-no{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;padding-top:.35em}.plate-head h2{font-family:var(--font-display);font-stretch:84%;font-weight:600;font-size:clamp(1.65rem,4.4vw,2.7rem);line-height:1.02;letter-spacing:-.005em;margin:0}.plate-body{margin-top:1.8rem}.fig{margin:0 0 1.1rem}.fig-frame{background:var(--paper);border:1px solid var(--rule)}.fig-canvas{display:block;width:100%}.fig-canvas.is-editable{cursor:crosshair;touch-action:none}.fig-caption{margin-top:.42rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.07em;color:var(--ink-soft)}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;margin:1.1rem 0}.controls--stack{flex-direction:column;align-items:stretch;gap:.45rem}.controls--tight{margin:.7rem 0 0}.controls--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.55rem 1.6rem}.ctl{display:grid;grid-template-columns:auto minmax(6rem,1fr) auto;align-items:center;gap:.6rem;min-width:0;flex:1 1 16rem;max-width:24rem}.controls--grid .ctl,.bench .ctl{max-width:none}.ctl-name{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}.ctl-value{font-family:var(--font-mono);font-size:.72rem;font-variant-numeric:tabular-nums;text-align:right;min-width:3.6rem}.ctl-range{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:ew-resize;margin:0}.ctl-range::-webkit-slider-runnable-track{height:1px;background:var(--ink-soft)}.ctl-range::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-5px;background:var(--plate);border:1.5px solid var(--ink);border-radius:0}.ctl-range::-moz-range-track{height:1px;background:var(--ink-soft)}.ctl-range::-moz-range-thumb{width:11px;height:11px;background:var(--plate);border:1.5px solid var(--ink);border-radius:0}.ctl-range:hover::-webkit-slider-thumb{background:var(--ink)}.ctl-range:hover::-moz-range-thumb{background:var(--ink)}.choice-btn,.toggle,.play,.jump{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;background:var(--plate);color:var(--ink);border:1px solid var(--ink-soft);border-radius:0;padding:.42rem .72rem;cursor:pointer;transition:background 90ms linear,color 90ms linear}.choice-btn:hover,.toggle:hover,.play:hover,.jump:hover{background:var(--paper);border-color:var(--ink)}.choice{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}.choice-btn[aria-pressed=true],.toggle[aria-pressed=true]{background:var(--ink);color:var(--plate);border-color:var(--ink)}.play{display:inline-flex;align-items:center;gap:.5rem;border-width:1.5px;border-color:var(--ink);padding-inline:.85rem}.play-mark{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}.play.is-sounding{background:var(--ink);color:var(--plate)}.play.is-sounding .play-mark{width:9px;height:9px;border:0;background:currentColor}.jump-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.2rem 0 .9rem}.jump-label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}.jumps{display:flex;flex-wrap:wrap;gap:.3rem}.jump{padding:.28rem .5rem;letter-spacing:.04em;border-color:var(--rule)}.readout{font-family:var(--font-mono);font-size:.76rem;line-height:1.5;color:var(--ink-soft);margin:.5rem 0 0;min-height:2.4em;max-width:40rem}.aside{max-width:var(--measure);margin:1.9rem 0 0;padding-left:1.1rem;border-left:2px solid var(--accent);font-size:.97rem;line-height:1.58}.aside strong{font-weight:600}.plate--bench .plate-body{border:1.5px solid var(--ink);background:var(--plate-deep);padding:clamp(.9rem,2.5vw,1.5rem)}.bench{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(1rem,3vw,2rem);align-items:start}.bench-head{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .7rem;padding-bottom:.35rem;border-bottom:1px solid var(--rule)}.bench .ctl{min-width:0;flex:1 1 auto;grid-template-columns:4.6rem 1fr auto}.kbd-mount{margin-top:1.1rem}.kbd{position:relative;height:clamp(96px,15vw,138px);border:1px solid var(--ink);background:var(--ink);touch-action:none;user-select:none}.kbd-whites{display:flex;height:100%;gap:1px}.key{font:inherit;border:0;padding:0;cursor:pointer}.key--white{flex:1;background:var(--paper);display:flex;align-items:flex-end;justify-content:center;padding-bottom:.4rem}.key--white:hover{background:#f4f4ee}.key--white.is-held{background:var(--accent)}.key--white.is-held .key-name{color:var(--plate)}.key-name{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.04em;color:var(--ink-faint);pointer-events:none}.kbd-blacks{position:absolute;inset:0;pointer-events:none}.key--black{position:absolute;top:0;height:60%;background:var(--ink);border:1px solid var(--ink);transform:translate(-31%);pointer-events:auto}.key--black:hover{background:#2b3134}.key--black.is-held{background:var(--accent);border-color:var(--accent)}.colophon{background:var(--ink);color:var(--plate);padding:clamp(2.5rem,7vw,4.5rem) 0}.colophon-in{max-width:64rem;margin:0 auto;padding:0 var(--gutter)}.colophon-lead{max-width:34rem;font-size:1.1rem;line-height:1.5;margin:0 0 2.2rem}.colophon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.4rem 2rem;margin:0;border-top:1px solid rgba(227,227,218,.28);padding-top:1.4rem}.colophon-grid dt{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#a9ada3;margin-bottom:.35rem}.colophon-grid dd{margin:0;font-size:.92rem;line-height:1.5}@media(max-width:860px){.bench{grid-template-columns:1fr}}@media(max-width:640px){.masthead-sub{display:none}.card-row{grid-template-columns:1fr}.card-note{min-height:0}.legend{grid-template-columns:1fr}.legend-note{grid-column:1}.ctl{min-width:0;flex-basis:100%}.plate-head{flex-direction:column;gap:.2rem}.plate-no{padding-top:0}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}