:root{--paper:#fbfaf7;--ink:#171717;--red:#fa4c50;--darkred:#a01d28;--line:#d5d0c9;--mono:ui-monospace,"Courier New",monospace;--display:"Arial Narrow","Avenir Next Condensed","Helvetica Neue",sans-serif;font-family:"Avenir Next",system-ui,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:.22em}button{font:inherit;color:inherit;background:var(--paper);border:1px solid var(--ink);min-height:44px;padding:.6rem .95rem;font-weight:700;cursor:pointer}button:hover:not(:disabled){background:#fbdad7}button:disabled{opacity:.42;cursor:default}button.primary{background:var(--ink);color:white}button.primary:hover:not(:disabled){background:var(--darkred)}:focus-visible{outline:3px solid var(--darkred);outline-offset:4px}.skip{position:fixed;top:-10rem;left:1rem;z-index:3;background:white;padding:1rem}.skip:focus{top:1rem}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}
header{position:sticky;top:0;z-index:2;min-height:66px;padding:.55rem clamp(.7rem,4vw,3rem);display:flex;gap:.5rem;justify-content:space-between;align-items:center;background:var(--paper);border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-family:var(--mono);font-weight:900;letter-spacing:.06em}.brand span{display:inline-block;background:var(--red);width:15px;height:15px;vertical-align:-2px;margin-right:6px}.brand small{font-size:.72em;font-weight:500}.controls{display:flex;gap:.4rem;white-space:nowrap}#clock{font-family:var(--mono);font-variant-numeric:tabular-nums}#clock-toggle.warning{background:var(--red)}.progress{position:sticky;top:66px;height:3px;background:#ece8e2;z-index:1}.progress i{display:block;height:100%;width:0;background:var(--red)}
.layout{max-width:1550px;margin:auto;display:grid;grid-template-columns:200px minmax(0,1fr);min-height:calc(100dvh - 69px)}nav{border-right:1px solid var(--line);padding:clamp(1rem,5vh,3rem) .7rem;display:flex;flex-direction:column;gap:.3rem}nav a{display:grid;grid-template-columns:1.7em 1fr auto;align-items:center;gap:.25rem;padding:.72rem .45rem;text-decoration:none;min-height:44px;font-size:.9rem}nav a b,nav a span{font-family:var(--mono);font-size:.75rem}nav a[aria-current="step"]{background:var(--red);font-weight:800}nav a:hover:not([aria-current]){background:#eee9e2}
main{min-width:0;padding:clamp(1rem,4vw,4rem);display:flex;flex-direction:column}section{flex:1}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--display);line-height:.94;letter-spacing:-.045em;font-weight:950;text-transform:uppercase}h1{font-size:clamp(2.9rem,6.5vw,7.4rem);margin-bottom:1.4rem}h1 em{color:var(--darkred);font-style:normal}h2{font-size:clamp(2.7rem,6vw,6rem);margin-bottom:1rem}h3{font-size:clamp(1.25rem,2.5vw,2rem);margin-bottom:.5rem}.eyebrow,.author,.note,#step{font-family:var(--mono);line-height:1.5}.eyebrow{font-size:.79rem;font-weight:800;letter-spacing:.09em;margin-bottom:1rem}.eyebrow span{color:var(--darkred);margin-left:.5em}.author{font-size:.73rem;margin:1.8rem 0 1rem;letter-spacing:.08em}.subtitle,.lede{max-width:64ch;font-size:clamp(1rem,1.65vw,1.45rem);line-height:1.45}.hero{display:grid;grid-template-columns:1.7fr 1fr;align-items:center;gap:1rem}.cover-art{position:relative;aspect-ratio:.83;overflow:hidden;isolation:isolate;background:repeating-linear-gradient(0deg,transparent 0 12px,var(--ink) 12px 13px,transparent 13px 14px) 50% 58%/100% 65px no-repeat}.cover-art i,.cover-art b,.cover-art span{position:absolute;display:block}.cover-art i:nth-child(1){width:76%;aspect-ratio:1;right:-8%;top:13%;border-radius:50%;background:var(--red);z-index:-1}.cover-art i:nth-child(2){width:49%;aspect-ratio:1;bottom:12%;left:14%;border-radius:100% 0 0;background:var(--ink)}.cover-art i:nth-child(3){width:35%;aspect-ratio:.52;bottom:1%;right:5%;border-radius:0 100% 100% 0;background:var(--red)}.cover-art i:nth-child(4){width:2px;height:75%;right:11%;top:4%;background:var(--ink)}.cover-art i:nth-child(5){width:26px;height:26px;bottom:15%;left:5%;border-radius:50%;background:var(--red)}.cover-art b{border:5px solid var(--ink);width:10%;height:46%;top:37%;right:3%}.cover-art span{font-size:clamp(3rem,10vw,9rem);top:36%;left:15%;line-height:1}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.cards article,.game,.closing{padding:clamp(.8rem,2vw,1.45rem);border:1px solid var(--ink);background:#fff}.cards article small{display:block;margin-top:.5rem}.cards article p{line-height:1.4}.score-art{height:clamp(95px,14vh,160px);position:relative;margin-bottom:1rem;background:#f0eee9;overflow:hidden}.score-art i{position:absolute;display:block}.cardew:before,.cardew:after{content:"";position:absolute;left:0;right:0;border-top:2px solid;top:48%}.cardew:after{top:80%;height:9px;border-bottom:2px solid}.cardew i{border:2px solid}.cardew i:nth-child(1){left:16%;top:12%;height:67%;aspect-ratio:1;border-radius:50%}.cardew i:nth-child(2){left:48%;top:27%;width:14%;height:34%;transform:rotate(-16deg)}.cardew i:nth-child(3){left:74%;top:19%;height:49%;aspect-ratio:1;border-radius:50%;border-width:5px}.note{font-size:.8rem;margin:.7rem 0}.game-top,.actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.game-top{justify-content:space-between}.game-top .eyebrow{margin:0}.question{font-weight:700;font-size:clamp(1.1rem,2.2vw,1.65rem);margin:1rem 0}.choices,.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.choices button{display:grid;gap:.25rem;justify-items:center;align-content:center;min-height:85px;overflow-wrap:anywhere}.choices .glyph,.slots .glyph{font-size:clamp(1.8rem,4vw,3rem);line-height:1}.choices button.correct,.active-cell{background:#fbd0cb!important;box-shadow:inset 0 0 0 2px var(--ink)}.feedback{min-height:1.5em;margin:.75rem 0;line-height:1.45}.legend,.palette{display:flex;gap:.5rem;flex-wrap:wrap;margin:.8rem 0}.legend span{padding:.35rem .55rem;border:1px solid var(--line)}.legend b{color:var(--darkred)}.ensemble{display:grid;grid-template-columns:minmax(2.1rem,.55fr) repeat(4,1fr);border-top:1px solid;border-left:1px solid;margin:1rem 0}.ensemble div,.slots li{display:grid;place-items:center;text-align:center;border-bottom:1px solid;border-right:1px solid;padding:.45rem;min-height:55px}.ensemble .cell{font-size:clamp(1.7rem,4vw,3.2rem)}.ensemble .row-label{font-weight:800}.slots{grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0}.slots li{border:1px solid var(--ink);gap:.4rem;font-size:.77rem;min-height:85px;overflow-wrap:anywhere}
details{border-top:1px solid var(--line);margin-top:1rem;padding:.55rem 0}summary{min-height:36px;cursor:pointer;font-weight:700;padding:.4rem 0}details p,details li{max-width:72ch;line-height:1.55}footer{border-top:1px solid var(--line);margin-top:1rem;padding-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:.4rem}#step{font-size:.8rem}.projecting .layout{display:block;max-width:1750px}.projecting nav,.projecting details{display:none}.projecting main{min-height:calc(100dvh - 69px);padding:clamp(1rem,4vh,3rem) clamp(1rem,6vw,6rem)}.projecting .lede{font-size:clamp(1rem,2.3vw,1.75rem)}
@media(max-width:920px){.layout{grid-template-columns:minmax(0,1fr)}nav{flex-direction:row;overflow:auto;border:0;border-bottom:1px solid var(--line);padding:.45rem .6rem}nav a{display:flex;white-space:nowrap;gap:.45rem;padding:.4rem .65rem}nav a span{display:none}}
@media(max-width:560px){.brand small{display:none}.hero{grid-template-columns:1fr}.cover-art{aspect-ratio:2;height:auto;width:75%;margin:auto}.cards{grid-template-columns:1fr}.choices button,.slots li{padding:.35rem;font-size:.78rem}.controls button{padding:.45rem .52rem}.legend{font-size:.88rem}}

.facsimile{display:grid;place-items:center;height:clamp(95px,14vh,160px);margin-bottom:1rem;background:#f0eee9;text-align:center}.facsimile img{display:block;max-width:100%;height:100%;min-height:0;object-fit:contain}.opening-cue{font-weight:700;margin:1rem 0 0}.slots li:has(button){display:block;padding:0}.slots li button{display:grid;place-content:center;gap:.35rem;border:0;width:100%;min-height:83px;font-size:inherit;background:transparent}.slots li button[aria-pressed=true]{background:#fbd0cb}
.hero h1{font-size:clamp(2.25rem,5.45vw,6rem);overflow-wrap:anywhere}
@media(max-width:400px){.brand{font-size:.75rem;letter-spacing:0}.brand span{width:11px;height:11px;margin-right:2px}}
.graphic-score{--playhead:0%;margin:1rem 0;padding:clamp(.65rem,2vw,1.3rem);background:#fff;border:1px solid var(--ink)}
.score-lane{display:grid;grid-template-columns:clamp(3.25rem,9vw,7rem) minmax(0,1fr);align-items:center;border-bottom:1px solid var(--line)}
.score-lane>span{font:700 clamp(.66rem,1.2vw,.88rem) var(--mono)}
.score-field{height:clamp(60px,12vh,110px);position:relative;background:repeating-linear-gradient(90deg,#ded9d1 0 1px,transparent 1px 25%);border-right:1px solid #ded9d1}
.trace,.attack,.playhead{position:absolute;display:block}
.trace{border-top:4px solid var(--ink)}
.trace.low{left:0;top:72%;width:25%}
.trace.high{left:75%;top:22%;width:25%}
.trace.glide{left:25%;top:22%;width:37.5%;height:50%;border:0;background:var(--darkred);clip-path:polygon(0 94%,100% 0,100% 12%,0 100%)}
.attack{left:var(--x);top:50%;transform:translate(-50%,-50%);width:clamp(6px,1.1vw,13px);aspect-ratio:1;background:var(--ink);border-radius:50%}
.attack.accent{width:clamp(12px,2vw,25px);background:var(--darkred)}
.playhead{display:none;left:var(--playhead);top:0;bottom:0;width:3px;background:var(--red);z-index:1}
.reading .playhead{display:block}
.axis{padding:.3rem 0;border:0}.axis div{display:flex;justify-content:space-between;font:700 .74rem var(--mono)}
.graphic-score figcaption{font-size:clamp(.78rem,1.3vw,1rem);line-height:1.45;margin-top:.55rem}
.facsimile{overflow:hidden}.facsimile img{max-height:100%;max-width:100%;object-fit:contain}