.chapter { padding: 24px 0 24px; position: relative; }
.chapter::before { content: ""; display: block; width: 56px; height: 6px; background: var(--ink); margin: 0 20px 18px; }
.chapter.night::before { background: var(--platano); }
@media (min-width: 680px) { .chapter::before { margin-left: max(20px, calc(50% - 320px + 20px)); } }
.chapter.night { background: var(--nacht); color: var(--paper); }
.ch-head { padding: 0 20px; max-width: 640px; margin: 0 auto 16px; }
.kick { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--achiote); }
.ch-head h2 { font-size: 36px; margin: 6px 0 8px; }
.ch-head p { margin: 0; font-size: 19px; }
.in { max-width: 640px; margin: 0 auto; padding: 0 20px; }
.beat, .beat0 { margin: 20px 0; font-size: 17px; max-width: 34em; }
.sketch { font-family: var(--mono); font-size: 14px; color: #3f332b; margin: 6px 0 0; }
.take { margin: 28px 20px 8px; padding: 16px; border: 2px solid var(--ink); background: var(--platano); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink); max-width: 600px; }
@media (min-width: 680px) { .take { margin-left: auto; margin-right: auto; } }
.take b { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 4px; }
.gift { margin-top: 10px; font-weight: 700; }
.next { margin: 16px auto 0; padding: 0 20px; max-width: 640px; font-family: var(--serif); font-style: italic; font-size: 19px; }

/* pads: each one is a drawn instrument */
.pads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 12px; }
.pad { min-height: 132px; border: 2px solid var(--ink); background: #fff8ec; color: var(--ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; font-family: var(--serif); font-size: 20px; font-weight: 700; transition: transform 120ms var(--ease), background 120ms var(--ease); touch-action: manipulation; }
.pad .ico-w { width: 84px; height: 84px; display: block; }
.pad svg { width: 100%; height: 100%; display: block; transition: transform 120ms var(--ease); }
.pad[aria-pressed="true"] { background: #e8f0ea; box-shadow: 3px 3px 0 var(--meer); border-color: var(--meer); }
.pad.hit svg { transform: scale(1.09) rotate(-2deg); }
.pad.all { grid-column: 1 / -1; min-height: 64px; flex-direction: row; background: var(--achiote); color: #fff; }
.count { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 8px 0; font-family: var(--mono); }
.count span { text-align: center; padding: 6px 0 4px; border: 2px solid var(--ink); border-radius: 4px; font-size: 14px; transition: background 120ms var(--ease); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.count span i { font-style: normal; }
.count .foot { width: 14px; height: 21px; fill: var(--ink); opacity: .35; }
.count span.tapc { border-style: dashed; font-size: 12px; border-color: var(--achiote); color: var(--achiote); }
.count span.tapc .foot { fill: var(--achiote); }
.count span.now { background: var(--platano); }
.count span.now .foot { opacity: 1; }
.count span.tapc.now { background: var(--achiote); color: #fff; }
.count span.tapc.now .foot { fill: #fff; }
.count-l { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 0; }

/* scrolly map */
.scrolly { position: relative; }
.mapstick { background: #dfe7dc; position: sticky; top: 56px; z-index: 5; height: 36vh; min-height: 200px; background: var(--paper); border-bottom: 2px solid var(--ink); overflow: hidden; }
.mapbox { position: absolute; inset: 0; background: #dfe7dc; }
.mapbox .cam { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 700ms var(--ease); }
.mapbox svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapbox .sea { fill: #dfe7dc; }
.land { fill: #e9d7b9; stroke: var(--ink); stroke-width: calc(1.6px / var(--z, 1)); stroke-linejoin: round; }
.land.dr { fill: #f1dcc0; filter: drop-shadow(1.2px 1.2px 0 var(--achiote)); }
.land.ht { fill: #e9d7b9; }
.border { fill: none; stroke: var(--ink); stroke-width: calc(1.2px / var(--z, 1)); stroke-dasharray: calc(5px / var(--z, 1)) calc(3px / var(--z, 1)); }
.cibao { fill: url(#hatch); stroke: var(--achiote); stroke-width: calc(1.2px / var(--z, 1)); stroke-dasharray: calc(3px / var(--z, 1)); }
.lbl { letter-spacing: 0; word-spacing: 0; font-kerning: none; text-rendering: geometricPrecision; font: 600 calc(10px / var(--z, 1)) var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: calc(3px / var(--z, 1)); }
.lbl.off { opacity: 0; }
.lbl { transition: opacity 240ms var(--ease); }
.lbl.sea { font-style: italic; fill: #46606a; }
.city { fill: var(--ink); transition: opacity 240ms var(--ease); }
.city.off { opacity: 0; }
.leader { fill: none; stroke: var(--ink); stroke-width: calc(1px / var(--z, 1)); }
.lbl.area { font-style: italic; fill: var(--achiote); }
.dot-p { fill: var(--achiote); transition: transform 1100ms var(--ease), opacity 400ms; }
#hisp { opacity: 0; transition: opacity 500ms var(--ease); }
.zoomed #hisp { opacity: 1; }
.zoomed .lbl.carib { opacity: 0; }
.colmado { cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 300ms; }
.sdview .colmado { opacity: 1; pointer-events: auto; }
.colmado rect.lit { fill: var(--platano); }
.colmado .roof { fill: var(--meer); }
.colmado .body { fill: #fff8ec; stroke: var(--ink); stroke-width: calc(1.5px / var(--z, 1)); }
.colmado .light { fill: #bdb29f; transition: fill 160ms; }
.colmado.on .light { fill: var(--platano); }
.mapcap { position: absolute; left: 6px; bottom: 6px; right: 6px; margin: 0; padding: 3px 6px; font-size: 13px; line-height: 1.25; color: var(--ink); background: rgba(244, 234, 219, .92); border-radius: 3px; }
.steps .step { min-height: 24vh; display: flex; align-items: center; padding: 8px 20px; }
.steps .step > div { max-width: 34em; margin: 0 auto; background: var(--paper); border: 2px solid var(--ink); border-radius: 4px; padding: 14px 16px; box-shadow: 3px 3px 0 var(--ink); opacity: .55; transition: opacity 240ms var(--ease); }
.steps .step.cur > div { opacity: 1; }
#ch1 .ch-head { margin-bottom: 8px; }
.steps .step:first-child { min-height: 0; padding-top: 12px; }
.steps .step:last-child { min-height: 0; padding-bottom: 12px; }
.steps .step p { margin: 0; }

/* strings: vertical strings, sideways strum, vertical swipes still scroll the page */
.guit { margin: 12px 0; user-select: none; -webkit-user-select: none; }
.win { margin: 0 0 6px; border: 2px solid var(--ink); border-radius: 4px; background: var(--nacht); overflow: hidden; }
.win svg { display: block; width: 100%; height: auto; aspect-ratio: 200 / 64; }
.win .wall { fill: #2a3b46; } .win .shut rect { fill: var(--meer); stroke: var(--paper); stroke-width: 1.5; } .win .shut path { stroke: var(--paper); stroke-width: 1.5; opacity: .5; }
.win .pane { fill: #12202a; stroke: var(--paper); stroke-width: 1.5; transition: fill 160ms var(--ease); }
.win .lamp { fill: #3b3320; stroke: var(--paper); stroke-width: 1.5; transition: fill 160ms var(--ease); }
.win .rail { stroke: var(--paper); stroke-width: 2; stroke-linecap: round; fill: none; }
.win.lit .pane { fill: #5a4720; } .win.lit .lamp { fill: var(--platano); }
.board { position: relative; height: 150px; border: 2px solid var(--ink); border-radius: 4px; background: #d9b98a repeating-linear-gradient(90deg, transparent 0 7px, rgba(35, 26, 21, .06) 7px 8px); touch-action: pan-y; overflow: hidden; }
.board .hole { position: absolute; left: 50%; bottom: 10px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--ink); box-shadow: 0 0 0 5px #d9b98a, 0 0 0 7.5px var(--ink); }
.str { position: absolute; top: 0; bottom: 0; width: 44px; margin-left: -22px; display: flex; justify-content: center; }
.str::after { content: ""; display: block; height: 100%; background: var(--ink); width: var(--w, 2px); transform-origin: center; }
.str.ring::after { animation: ring 420ms var(--ease); }
@keyframes ring { 0% { transform: scaleX(3); } 100% { transform: scaleX(1); } }
.seg { display: flex; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; margin: 10px 0; }
.seg button { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 12px; border: 0; background: var(--paper); font-weight: 700; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* guira */
.guira-box { margin: 12px 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.guira-svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; touch-action: pan-y; }
.guira-svg .print { fill: #d9c7a3; }
.guira-svg .body { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.guira-svg .ridge circle { fill: var(--ink); transition: fill 90ms; }
.guira-svg .ridge.on circle { fill: var(--achiote); }
.guira-svg .handle { fill: var(--meer); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.guira-svg .rod path { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.guira-svg .rod rect { fill: var(--achiote); stroke: var(--ink); stroke-width: 2.5; }
.stamp { display: block; margin: 16px auto; border: 0; background: none; padding: 0; }
.stamp svg { width: 170px; height: auto; }
.stamp .ring { fill: none; stroke: var(--achiote); stroke-width: 3; }
.stamp text { fill: var(--achiote); font: 700 13px var(--mono); text-anchor: middle; }
.stamp .horn { fill: var(--achiote); transform-origin: center; transform: scale(0); transition: transform 240ms var(--ease); }
.stamp.horny .horn { transform: scale(1); }
.loops { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.loops .btn[aria-pressed="true"] { background: var(--meer); color: #fff; }

/* chapter 3: clave echo */
.clave-box { margin: 8px 0 12px; }
.ctrack { display: block; width: 100%; height: auto; aspect-ratio: 340 / 64; }
.ctrack .base { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.ctrack .tgt { fill: var(--achiote); stroke: var(--ink); stroke-width: 2.5; }
.ctrack .play { stroke: var(--meer); stroke-width: 3; stroke-linecap: round; }
.ctrack .mk { stroke-width: 4; stroke-linecap: round; }
.ctrack .mk.ok { stroke: var(--meer); } .ctrack .mk.early, .ctrack .mk.late { stroke: var(--platano); } .ctrack .mk.miss { stroke: var(--ink); opacity: .4; }
.cstatus { margin: 4px 0 10px; font-weight: 600; min-height: 26px; }
.bigtap { display: block; width: 100%; min-height: 96px; border: 2px solid var(--ink); border-radius: 4px; background: var(--achiote); color: #fff; box-shadow: 3px 3px 0 var(--ink); font: 700 24px var(--serif); touch-action: manipulation; }
.bigtap:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.cfb { font: 500 16px var(--mono); min-height: 24px; margin: 6px 0 0; }
.bplayer { display: block; width: 120px; height: auto; margin: 8px auto 0; }
.bplayer .hd { transition: transform 110ms var(--ease); }
.bplayer .hd.nod { transform: translateY(5px); }

/* chapter 5: the record */
.rec { display: block; width: 260px; max-width: 80%; aspect-ratio: 1; margin: 12px auto; padding: 0; border: 0; background: none; perspective: 900px; }
.rec-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 240ms var(--ease); }
.rec-in.flipped { transform: rotateY(180deg); }
.rec .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rec .face.b { transform: rotateY(180deg); }
.rec .disc { width: 100%; height: 100%; display: block; }
.rec .dl { fill: var(--ink); font-family: var(--mono); }
.rec.wob { transform: translateY(1px); }
.who { font: 500 15px var(--mono); margin: 8px 0 0; text-align: center; }
.claim { margin: 4px auto 0; text-align: center; max-width: 30em; min-height: 52px; }
.rec ~ .loops { justify-content: center; }

/* chapter 6: the radio at night */
.chapter.night .kick { color: var(--platano); }
.chapter.night a, .chapter.night .term { color: #8fd3cc; }
.chapter.night .sketch { color: #c9bdae; }
.chapter.night .take { color: var(--ink); }
.chapter.night .btn { background: var(--paper); color: var(--ink); }
.chapter.night .btn[aria-pressed="true"] { background: var(--platano); }
.radio { border: 2px solid var(--paper); border-radius: 6px; padding: 12px; margin: 8px 0 16px; background: #22343f; }
.radio-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.freq { font: 500 22px var(--mono); color: var(--platano); }
.dial { display: block; width: 100%; height: auto; margin-top: 8px; aspect-ratio: 340 / 70; }
.dial .ticks { stroke: var(--paper); stroke-width: 2; stroke-linecap: round; opacity: .7; }
.dial .stn { fill: var(--paper); }
.dial .needle { stroke: var(--achiote); stroke-width: 3.5; stroke-linecap: round; }
.dialrange { display: block; width: 100%; height: 56px; margin: 0; background: transparent; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.dialrange::-webkit-slider-runnable-track { height: 8px; background: var(--paper); border-radius: 4px; }
.dialrange::-moz-range-track { height: 8px; background: var(--paper); border-radius: 4px; }
.dialrange::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 48px; margin-top: -20px; border-radius: 50%; background: var(--platano); border: 3px solid var(--paper); box-shadow: 2px 2px 0 #000; }
.dialrange::-moz-range-thumb { width: 44px; height: 44px; border-radius: 50%; background: var(--platano); border: 3px solid var(--paper); }
.stname { font: 700 22px var(--serif); margin: 6px 0 2px; }
.stdesc { margin: 0 0 6px; min-height: 52px; }
.chapter.night.lock .stname { color: var(--platano); }

.stamp { transform: rotate(-6deg); margin-top: 4px; margin-bottom: 0; }
.stamp .ring.thin { stroke-width: 1.5; }
.stamp text.sm { font-size: 10px; letter-spacing: .12em; }
.stamp-hint { text-align: center; margin: 0 0 8px; }
.next-btn { display: flex; align-items: center; gap: 12px; width: calc(100% - 40px); max-width: 600px; margin: 16px auto 0; min-height: 64px; padding: 8px 14px; text-align: left; border: 2px dashed var(--ink); border-radius: 4px; background: transparent; font: italic 19px/1.25 var(--serif); }
.next-btn .ico-w { width: 40px; height: 40px; flex: none; opacity: .55; }
.next-btn .nb-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--achiote); flex: none; margin: 0 13px; }
.next-btn:active { background: var(--platano); }
.chapter.night .next-btn { border-color: var(--paper); color: var(--paper); }

/* chapters 7 to 9 */
.rig-box, .bronx-box, .stage-box { margin: 8px 0; border: 2px solid var(--ink); border-radius: 4px; background: #fff8ec; position: relative; overflow: hidden; }
.rig, .bronx, .stage { display: block; width: 100%; height: auto; }
.rig { aspect-ratio: 340 / 130; touch-action: pan-y; }
.rig .print, .bronx .print, .stage .print { fill: var(--rosa); stroke: none; }
.rig .ink, .bronx .ink, .stage .ink { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rig .jack { fill: var(--ink); }
.rig .cable { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.rig .plug rect { fill: var(--achiote); stroke: var(--ink); stroke-width: 2.5; }
.rig .plug { cursor: grab; }
.rig .plug:focus-visible { outline: 3px solid var(--meer); }
.rig .lamp { fill: #bdb29f; stroke: var(--ink); stroke-width: 2; }
.rig .sock { fill: var(--ink); }
.rig.live .lamp { fill: var(--platano); }
.rig.live .amp .print { fill: var(--platano); }
.knob-l { display: grid; grid-template-columns: auto 1fr 2ch; gap: 10px; align-items: center; font: 500 14px var(--mono); text-transform: uppercase; letter-spacing: .06em; margin: 6px 0; }
.knob, .fader, .yslider { height: 48px; width: 100%; touch-action: pan-y; accent-color: var(--achiote); background: transparent; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.chip { min-height: 48px; min-width: 64px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); font: 500 16px var(--mono); box-shadow: 2px 2px 0 var(--ink); }
.chip[aria-pressed="true"] { background: var(--achiote); color: #fff; }
.ycap { min-height: 52px; margin: 4px 0 16px; font-size: 16px; }
.frow { display: grid; grid-template-columns: 1fr 3ch; gap: 0 10px; align-items: center; margin: 2px 0; }
.frow .fl { grid-column: 1 / -1; font: 600 15px var(--sans); }
.frow output { font: 500 14px var(--mono); text-align: right; }
.bronx { aspect-ratio: 340 / 120; }
.bronx .track { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.bronx .train { transform: translateX(-10px); transition: transform 2400ms linear; }
.bronx .train rect { fill: var(--meer); stroke: var(--ink); stroke-width: 2.5; }
.bronx .train path { stroke: var(--paper); stroke-width: 4; stroke-linecap: round; }
.bronx.go .train { transform: translateX(450px); }
.stage { aspect-ratio: 340 / 150; }
.stage .lite { fill: var(--platano); stroke: var(--ink); stroke-width: 2; }
.stage .beam { fill: var(--platano); fill-opacity: .3; stroke: none; }
.stage .dot { fill: var(--ink); transition: transform 120ms var(--ease); }
.stage.tap .dot { transform: translateY(-4px); }
.stage-box .bigyear { position: absolute; left: 12px; top: 8px; font: 500 30px var(--mono); color: var(--achiote); }
.stage-box .place { position: absolute; right: 10px; top: 14px; max-width: 48%; text-align: right; font: 700 15px/1.2 var(--serif); }
.tl { position: relative; margin: 10px 0 2px; }
.yticks { position: relative; height: 30px; margin: 0 24px; }
.yticks .yl { position: absolute; top: 14px; transform: translateX(-50%); font: 500 13px var(--mono); }
.yticks i { position: absolute; top: 0; width: 2px; height: 10px; background: var(--ink); }
.yticks i.alt { background: var(--achiote); }
.evcard { min-height: 76px; margin: 6px 0 12px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 4px; background: var(--platano); box-shadow: 3px 3px 0 var(--ink); font-size: 16px; }

/* chapter 10: mixer */
.mixrows { display: grid; gap: 8px; margin: 12px 0 4px; padding-bottom: var(--dock-h); }
.mixrow { display: flex; gap: 6px; align-items: stretch; transition: opacity .25s, transform .12s; }
.mixrow.hit { transform: translateX(2px); }
.mx-main { flex: 1; min-width: 0; min-height: 56px; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); text-align: left; position: relative; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-touch-callout: none; }
.mx-main .ico-w, .mx-main .inst { width: 36px; height: 36px; flex: none; }
.mx-studio { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--nacht); color: #fff; font: 500 12px var(--mono); display: grid; place-items: center; }
.mx-name { font-weight: 600; font-size: 14px; width: 74px; flex: none; line-height: 1.1; }
.mx-cells { display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; flex: 1; min-width: 0; }
.mx-cells i { height: 14px; border-radius: 2px; background: #e3d6c2; }
.mx-cells i.bt { background: #d6c5ab; }
.mx-cells i[data-c="1"] { background: var(--platano); }
.mx-cells i[data-c="2"] { background: var(--achiote); }
.mx-cells i.now { outline: 2px solid var(--ink); }
.mx-zz { display: none; position: absolute; left: 56px; bottom: 1px; font: 500 11px var(--mono); color: var(--meer); }
.mx-main { position: relative; overflow: hidden; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.mx-main.holding::after { content: ''; position: absolute; left: 0; bottom: 0; height: 5px; background: var(--meer); width: 100%; transform-origin: left; animation: hold 450ms linear; }
@keyframes hold { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .mx-main.holding::after { animation: none; } }
.mx-solo { flex: none; width: 64px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); font: 600 13px var(--sans); min-height: 56px; }
.mx-solo[aria-pressed="true"] { background: var(--meer); color: #fff; }
.mixrow.asleep { opacity: .45; }
.mixrow.asleep .mx-zz { display: block; }
.mixrow.asleep .mx-cells i { background: #e3d6c2; }
.mixrow.spot .mx-main { background: #fff7e0; box-shadow: 0 0 0 3px var(--platano), 2px 2px 0 var(--ink); }
.btn[aria-pressed="true"] { background: var(--meer); color: #fff; }
.btn.go { background: var(--achiote); color: #fff; }
.sharelink { font: 500 13px var(--mono); word-break: break-all; margin: 4px 0 0; }
/* chapter 11: the floor */
.floor-box { margin: 8px 0; }
.floor { width: 100%; height: auto; display: block; background: #f9f2e5; border: 2px solid var(--ink); border-radius: 4px; }
.floor .tiles path { stroke: #d9c9ae; stroke-width: 1.5; fill: none; }
.floor .shoe { transition: transform .16s var(--ease); }
.floor .shoe ellipse { fill: var(--meer); stroke: var(--ink); stroke-width: 2.5; }
.floor .shoe.r ellipse { fill: var(--achiote); }
.floor .shoe path { fill: none; stroke: #fff; stroke-width: 2; opacity: .8; }
.floor .shoe text { fill: #fff; font: 600 11px var(--mono); text-anchor: middle; }
.floor .shoe.tapping ellipse { fill-opacity: .35; stroke-dasharray: 4 3; }
.floor .andtap { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0; }
.floor .andtap.on { opacity: 1; }
.floor.squeak { outline: 3px solid var(--achiote); }
.counts { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-top: 6px; }
.cnt { text-align: center; font: 500 14px var(--mono); padding: 6px 0; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); }
.cnt.tap { background: #f1dcae; font-size: 11px; }
.cnt.now { background: var(--achiote); color: #fff; }
.styles { margin: 8px 0 0; padding-left: 20px; }
.styles li { margin: 4px 0; }
.sib-link { color: var(--meer); font-weight: 600; }
.rec { position: relative; margin-top: 16px; }
.rec .tonearm { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rec .tonearm .arm { transform-origin: 232px 28px; transform: rotate(25deg); transition: transform .7s var(--ease); }
.rec.playing .tonearm .arm { transform: rotate(0deg); }

.bronx .win { fill: #3a2c24; stroke: none; transition: fill 180ms var(--ease); }
.bronx .win.lit { fill: var(--platano); }
.bronx .star { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-width: 1.5; transition: fill 180ms var(--ease), stroke-opacity 180ms var(--ease); }
.bronx .star.lit { fill: var(--platano); stroke-opacity: 1; }
.bronx .moon { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-width: 2; stroke-dasharray: 3 3; transition: fill 240ms var(--ease), stroke-opacity 240ms var(--ease); }
.bronx .moon.lit { fill: var(--platano); stroke-opacity: 1; stroke-dasharray: none; }
.bronx .stoop { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
input.fader, input.yslider { -webkit-appearance: none; appearance: none; height: 48px; }
input.knob { -webkit-appearance: none; appearance: none; height: 48px; }
input.fader::-webkit-slider-runnable-track { height: 10px; background: var(--ink); border-radius: 2px; }
input.knob::-webkit-slider-runnable-track { height: 10px; background: var(--ink); border-radius: 2px; }
input.fader::-moz-range-track { height: 10px; background: var(--ink); border-radius: 2px; }
input.knob::-moz-range-track { height: 10px; background: var(--ink); border-radius: 2px; }
input.fader::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 40px; margin-top: -15px; background: var(--achiote); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--ink); }
input.knob::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 40px; margin-top: -15px; background: var(--achiote); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--ink); }
input.fader::-moz-range-thumb { width: 26px; height: 36px; background: var(--achiote); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--ink); }
input.knob::-moz-range-thumb { width: 26px; height: 36px; background: var(--achiote); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--ink); }

/* chapter 12: the quote card and the stamp */
.qtabs { display: flex; gap: 8px; margin: 8px 0; }
.qtab { flex: 1; min-height: 48px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); font: 600 15px var(--sans); }
.qtab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.qcard { position: relative; border: 2px solid var(--ink); border-radius: 4px; background: #fff8ec; box-shadow: 3px 3px 0 var(--ink); padding: 16px; min-height: 190px; touch-action: pan-y; overflow: hidden; }
.qpanel[hidden] { display: none; }
.qpanel .ql { font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--meer); }
.qpanel blockquote { margin: 8px 0; font: 600 21px/1.3 var(--serif); }
.qpanel .qs { font-size: 14px; }
.stamp2 { position: absolute; right: 10px; bottom: 12px; transform: rotate(-9deg) scale(1); padding: 6px 12px; border: 3px double var(--achiote); border-radius: 6px; color: var(--achiote); font: 700 16px var(--mono); text-transform: uppercase; opacity: 0; pointer-events: none; }
.stamp2.on { opacity: .9; }
.stamp2.hit { animation: stampin 200ms var(--ease); }
@keyframes stampin { from { transform: rotate(-9deg) scale(1.8); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .stamp2.hit { animation: none; } }
.stamp.press { min-width: 44px; min-height: 44px; cursor: pointer; }
.stamp.press.thunk { animation: thunk 260ms var(--ease); }
@keyframes thunk { 0% { transform: rotate(-6deg) translateY(-8px) scale(1.08); } 55% { transform: rotate(-6deg) translateY(2px) scale(.94); } 100% { transform: rotate(-6deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .stamp.press.thunk { animation: none; } }
.wlist, .linklist { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.wcard { display: flex; gap: 12px; border: 2px solid var(--ink); border-radius: 4px; padding: 10px 12px; background: var(--paper); }
.wcard .wy { font: 700 18px var(--mono); color: var(--achiote); flex: none; min-width: 52px; }
.wcard small { color: #5b4a3e; font-family: var(--mono); }
/* chapter 13: playground */
.mcard { border: 2px solid var(--ink); border-radius: 4px; padding: 14px; background: #fff8ec; box-shadow: 3px 3px 0 var(--ink); }
.mcard .ms { margin: 6px 0 0; font: 600 20px/1.3 var(--serif); }
.mcard small { font-family: var(--mono); color: #5b4a3e; }
.mfb { margin: 10px 0; padding: 10px 12px; border-left: 6px solid var(--platano); background: #fff3d1; }
.mfb[data-ok="true"] { border-color: var(--meer); }
.mfb[data-ok="false"] { border-color: var(--achiote); }
.mfb .btn { display: block; margin-top: 8px; }
.mscore { font: 700 24px var(--serif); margin: 6px 0; }
.gloss { display: grid; gap: 8px; }
.gterm { text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; min-height: 56px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); font: 15px var(--sans); }
.gterm b { grid-column: 1; font-family: var(--serif); font-size: 18px; }
.gterm span { grid-column: 1; }
.gterm i { grid-column: 2; grid-row: 1 / 3; font-style: normal; color: var(--achiote); font-size: 22px; }
.gterm:active { transform: translate(2px, 2px); box-shadow: none; }
.linklist a { display: inline-block; min-height: 44px; padding: 6px 0; color: var(--meer); font-weight: 600; }
.linklist .ln { font-size: 15px; }
.srcs h4 { margin: 18px 0 4px; font: 500 13px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
/* salsa: rueda circle, club floor, count switcher, cards */
.rueda-box { max-width: 220px; margin: 4px auto; }
.rueda-svg, .club-svg { width: 100%; height: auto; display: block; }
.r-floor { fill: #fff8ec; stroke: var(--ink); stroke-width: 2; }
.r-lead { fill: var(--meer); stroke: var(--ink); stroke-width: 2; transition: cx 500ms var(--ease), cy 500ms var(--ease); }
.r-follow { fill: var(--achiote); stroke: var(--ink); stroke-width: 2; transition: cx 500ms var(--ease), cy 500ms var(--ease); }
.r-pair { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.r-dir { stroke: var(--platano); stroke-width: 4; } .r-head { stroke: var(--platano); stroke-width: 4; fill: none; }
.r-fx { font: 700 22px var(--mono); fill: var(--ink); }
.club-door { fill: var(--ink); }
.rueda-svg { transition: transform 140ms var(--ease); } .rueda-svg.breathe { transform: scale(1.06); }
.pad.start[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.yr { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 10px 0; font-family: var(--mono); font-size: 13px; }
.yr input { min-height: 48px; width: 100%; accent-color: var(--ink); touch-action: pan-y; } .year { font: 700 20px var(--mono); min-width: 3.2em; text-align: right; }
.cs-desc { font-size: 15px; margin: 6px 0 10px; min-height: 3em; }
.cs { margin: 10px 0; display: grid; gap: 8px; }
.cs-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; border: 2px solid transparent; padding: 3px; border-radius: 4px; }
.cs-row.cur { border-color: var(--ink); }
.cs-name { grid-column: 1 / -1; font: 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.cs-c { display: flex; flex-direction: column; align-items: center; border: 2px solid var(--ink); border-radius: 4px; padding: 6px 0; min-height: 56px; font-family: var(--mono); }
.cs-c b { font-size: 16px; } .cs-c i { font-size: 14px; line-height: 1; font-style: normal; }
.cs-c.step { background: var(--platano); } .cs-c.pause { background: #fff8ec; border-style: dashed; }
.cs-c.now { outline: 3px solid var(--achiote); }
.dcard { margin: 20px 0; border: 2px solid var(--ink); border-radius: 4px; padding: 12px 14px; background: #fff8ec; }
.dcard h3 { font-size: 20px; margin-bottom: 6px; } .dopt summary { min-height: 48px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.dopt p, .dfoot { margin: 0 0 10px; font-size: 15px; }
.calls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; } .call { padding: 0 8px; }
.says { font: 700 20px var(--serif); margin: 6px 0 0; min-height: 1.5em; } .says:empty, .game-fb:empty { min-height: 0; margin: 0; }
#ch4 .rueda-box:not(.small) { max-width: 190px; }
.seqbtn { margin: 6px 0; width: 100%; } .seqbar { position: relative; height: 70px; margin: 6px 0 12px; }
.seg-bar { position: absolute; height: 22px; background: var(--platano); border: 2px solid var(--ink); border-radius: 3px; font: 11px/18px var(--mono); overflow: hidden; white-space: nowrap; padding-left: 8px; z-index: 1; }
.seg-bar:nth-child(2) { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(35,26,21,.25) 4px 6px); }
.seq-now { z-index: 0; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--achiote); }
body.salsa .chapter { border-top: 0; padding-top: 20px; }
/* chapter endings, snap payoff */
.next-wrap { max-width: 640px; margin: 14px auto 0; padding: 0 20px; }
.next-wrap .next-btn { width: 100%; min-height: 48px; text-align: left; font-family: var(--serif); font-style: italic; font-size: 18px; }
.dcard > summary { min-height: 48px; display: flex; align-items: center; font: 700 17px var(--serif); cursor: pointer; }
.dcard[open] > summary { margin-bottom: 6px; }
.dcard > summary::after, .dopt summary::after { content: '+'; margin-left: auto; padding-left: 12px; font: 700 22px var(--mono); }
.dcard[open] > summary::after, .dopt[open] > summary::after { content: '\2212'; }
.next-wrap a.next-btn { display: flex; align-items: center; text-decoration: none; }
.payoff { color: var(--achiote); min-height: 0; margin: 4px 0 0; animation: pop 400ms var(--ease); }
@keyframes pop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.club-svg.snap { animation: snap 380ms var(--ease); }
@keyframes snap { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.cs-c.hit { background: var(--achiote); color: #fff; }
@media (prefers-reduced-motion: reduce) { .payoff, .club-svg.snap { animation: none; } }
/* caller game */
.game { margin: 24px 0 8px; padding: 14px; border: 2px solid var(--ink); border-radius: 4px; background: #fff8ec; box-shadow: 3px 3px 0 var(--ink); }
.game h3 { font-size: 22px; margin: 0 0 4px; } .game-intro { margin: 0 0 10px; font-size: 15px; }
.rueda-box.small { max-width: 150px; }
.game-call { transform-origin: left center; margin: 4px 0 0; transition: transform 120ms var(--ease), color 120ms var(--ease); } .game-call.beat { transform: scale(1.06); color: var(--achiote); }
.game-meta { margin: 2px 0 8px; font-size: 13px; }
.game-choices { display: grid; gap: 8px; }
.game-opt { display: flex; align-items: center; gap: 10px; min-height: 56px; width: 100%; text-align: left; padding: 6px 12px; font-size: 16px; touch-action: manipulation; }
.game-opt .glyph { flex: none; width: 28px; font: 700 22px var(--mono); text-align: center; }
.game-opt.right { background: var(--platano); border-style: solid; } .game-opt.wrong { border-color: var(--achiote); outline: 3px solid var(--achiote); outline-offset: -3px; }
.game-opt .glyph.cross { color: var(--achiote); }
.game { scroll-margin-top: 64px; }
.game-fb { margin: 8px 0 0; min-height: 1.5em; font-weight: 700; font-size: 16px; }
.game-go { width: 100%; min-height: 48px; margin-top: 10px; }
.game-body[hidden], .game-go[hidden] { display: none; }

.cs-play[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seq-note { scroll-margin-bottom: calc(var(--dock-h) + 12px); }

input.yslider::-webkit-slider-runnable-track { height: 10px; background: var(--ink); border-radius: 2px; }
input.yslider::-moz-range-track { height: 10px; background: var(--ink); border-radius: 2px; }
input.yslider::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 40px; margin-top: -15px; background: var(--achiote); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--ink); }
input.yslider::-moz-range-thumb { width: 26px; height: 36px; background: var(--achiote); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--ink); }
.pg-h { margin: 32px 0 12px; }

/* ch11: one slider, three stops */
.secs { margin: 0 0 4px; }
.secs .stops { display: grid; grid-template-columns: repeat(3, 1fr); font: 500 14px var(--mono); }
.secs .stop { min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink); opacity: .65; cursor: pointer; }
.secs .stop:first-child { justify-content: flex-start; } .secs .stop:last-child { justify-content: flex-end; }
.secs .stop.on { opacity: 1; font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--achiote); }
.secs .sec-knob { display: block; }
#ch11 .bigtap { min-height: 64px; } /* tap button fully above the 73px dock at 375x812 */
#ch11 .secs .stop { min-height: 40px; }
#ch5 .rec { width: 210px; margin: 4px auto; } /* flip and play clear the dock on the first screen */
#ch5 .claim { min-height: 0; }
#ch5 .rec ~ .loops { flex-wrap: nowrap; margin: 8px 0; } #ch5 .rec ~ .loops .btn { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; }
#ch3 .loops { flex-wrap: nowrap; } #ch3 .loops .btn { padding-left: 12px; padding-right: 12px; } #ch3 .loops .btn:first-child { flex: 1 1 0; min-width: 0; } #ch3 .loops .btn:last-child { flex: none; white-space: nowrap; } /* Stopp stays on the start row in DE; the start label wraps instead of pushing the page wide */
.btn.yel { background: var(--platano); color: var(--ink); }
.btn.call.start { min-height: 64px; } .btn.call.yel { min-height: 64px; font-size: 18px; }
.btn.go.start[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* cubana art: ink outline, flat fills, hard shadow (r13b) */
.clave-box { max-width: 200px; margin: 6px auto 0; } .clave-svg { width: 100%; height: auto; display: block; }
.clave-svg rect { stroke: var(--ink); stroke-width: 2.5; } .cl-a { fill: var(--achiote); } .cl-b { fill: var(--platano); }
.cl-shadow rect { fill: var(--ink); stroke: none; } .cl-grain { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; opacity: .5; }
.cl-top { transition: transform 90ms var(--ease); } .clave-svg.tap .cl-top { transform: translateY(5px); }
.bandstand rect, .bandstand circle, .bandstand path { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.bs-roof { fill: var(--ink); } .bs-awn { fill: var(--achiote); } .bs-stage { fill: var(--meer); } .bs-edge { fill: var(--platano); }
.bs-drum { fill: var(--platano); } .bs-horn { fill: var(--paper); } .bs-leg { fill: none; }
.door-arch { fill: none; stroke: var(--ink); stroke-width: 2; }
.club-svg { max-width: 360px; margin: 0 auto; }
.btn.lead { min-height: 64px; width: 100%; background: var(--achiote); color: #fff; font-size: 18px; margin: 6px 0; }
.btn.call[aria-pressed="true"] { background: var(--ink); color: var(--paper); transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.calls .btn.call { min-height: 48px; }
.top .sib + .sib { margin-left: 0; }
/* r14: clave sticks sit close to the circle and tilt on every hit; ch4 caller chip at 12 o'clock */
.clave-box + .rueda-box { margin-top: -5px; } /* sticks end ~24px above the circle, none cropped */
.cl-top { transform-box: fill-box; transform-origin: 50% 100%; }
.clave-svg.tap .cl-top { transform: translateY(5px) rotate(-4deg); }
.clave-svg.tap .cl-a { transform-box: fill-box; transform-origin: 50% 50%; }
.caller-box { position: relative; }
.caller-mark { position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: var(--platano); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); border-radius: 4px; padding: 0 8px; font: 500 12px/20px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); pointer-events: none; }
.caller-mark::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 8px; height: 8px; margin-left: -4px; background: var(--platano); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); }
@media (prefers-reduced-motion: reduce) { .cl-top { transition: none; } .clave-svg.tap .cl-top { transform: none; } }
/* r14: chapter 3 caption in mono like the other captions */
#ch3 .cstatus, .clave-box .cstatus { font: 500 14px/1.3 var(--mono); letter-spacing: -.01em; }