:root{--felt:#14393D;--felt2:#0E2A2D;--card:#FAF8F0;--rule:#C3D4E8;--red:#D6455B;--ink:#1B2330;--soft:#566173;--hi:#FFD84A;--ok:#2F8F6B;
  --display:"Bricolage Grotesque",system-ui,sans-serif;--body:"Atkinson Hyperlegible",system-ui,sans-serif}
*{box-sizing:border-box}
html{background:var(--felt2)}
body{margin:0;background:var(--felt);color:var(--card);font:17px/1.55 var(--body);min-height:100vh;display:grid;grid-template-columns:230px 1fr}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(30px,5vw,46px)} h2{font-size:26px} h3{font-size:19px}
p{margin:0 0 12px;max-width:66ch}
a{color:inherit}
nav{background:var(--felt2);padding:28px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
nav .brand{font:800 26px var(--display);margin:0 10px 22px;color:var(--hi)}
nav a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:#CFE0DF;font-weight:700}
nav a:hover{background:#ffffff14}
nav a[aria-current=page]{background:var(--card);color:var(--ink)}
main{padding:40px clamp(18px,5vw,64px) 90px;max-width:900px;width:100%}
.lede{color:#BFD3D2;font-size:18px;margin:10px 0 26px}
.meta{color:#A9C2C1;font-size:15px}
/* the cue card: the one loud element */
.cue{background:var(--card);color:var(--ink);border-radius:6px;padding:26px 28px 24px;margin:18px 0;box-shadow:0 2px 0 #00000030,0 18px 40px -18px #000a;
  background-image:linear-gradient(var(--red),var(--red)),repeating-linear-gradient(transparent 0 31px,var(--rule) 31px 32px);background-size:100% 2px,100% 32px;background-position:0 62px,0 64px;background-repeat:no-repeat,repeat}
.cue .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;height:40px;font-weight:700;color:var(--soft);font-size:15px}
.cue h2{font-size:clamp(26px,4.4vw,36px);margin:14px 0 0;line-height:32px;padding:16px 0}
.cue p{line-height:32px;margin:0;font-size:18px}
.cue mark{background:var(--hi);padding:0 4px}
/* plain sheets */
.sheet{background:var(--card);color:var(--ink);border-radius:6px;padding:20px 22px;margin:14px 0}
.sheet .meta,.cue .meta{color:var(--soft)}
.sheet h3{margin-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.grid .sheet{margin:0}
.beats{list-style:none;padding:0;margin:10px 0;display:flex;flex-wrap:wrap;gap:6px}
.beats li{background:var(--ink);color:var(--card);padding:4px 10px;border-radius:4px;font-weight:700;font-size:15px}
.ex{font-style:italic;color:var(--soft);font-size:16px;margin:0}
ol.steps{margin:8px 0 0;padding-left:22px} ol.steps li{margin:4px 0}
button,.btn{font:700 16px var(--body);border:2px solid var(--ink);background:var(--ink);color:var(--card);padding:10px 16px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block}
button.ghost,.btn.ghost{background:transparent;color:var(--ink)}
button.hi{background:var(--hi);color:var(--ink);border-color:var(--ink)}
button:disabled{opacity:.4;cursor:default}
:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.clock{font:800 44px var(--display);font-variant-numeric:tabular-nums;min-width:128px}
.clock.big{font-size:clamp(64px,16vw,120px);line-height:1}
textarea,select,input[type=text]{font:inherit;width:100%;padding:10px;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink)}
select{width:auto}
label{font-weight:700;display:block;margin:10px 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{background:transparent;color:var(--ink);padding:6px 12px}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--card)}
.score{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;margin:6px 0}
.score span{font-size:15px;color:var(--soft)}
.dots{display:flex;gap:4px}
.dots button{width:36px;height:36px;padding:0;border-radius:50%;background:transparent;color:var(--ink)}
.dots button[aria-pressed=true]{background:var(--ink);color:var(--card)}
video,audio{width:100%;max-height:360px;border-radius:6px;background:#000;margin:10px 0}
details{background:var(--card);color:var(--ink);border-radius:6px;margin:10px 0}
summary{padding:16px 20px;cursor:pointer;font:700 19px var(--display);display:flex;justify-content:space-between;gap:12px}
summary span{font:400 15px var(--body);color:var(--soft);white-space:nowrap}
details .in{padding:0 20px 18px}
.days{list-style:none;margin:10px 0 0;padding:0}
.days li{border-top:1px solid var(--rule)}
.days a{display:flex;gap:12px;padding:10px 0;text-decoration:none}
.days .n{width:30px;color:var(--soft);font-variant-numeric:tabular-nums}
.days .done{color:var(--ok);font-weight:700;margin-left:auto}
.rung{display:flex;gap:14px;align-items:flex-start;background:var(--card);color:var(--ink);padding:12px 16px;border-radius:6px;margin:6px 0}
.rung input{width:24px;height:24px;margin-top:2px;accent-color:var(--ok);flex:none}
.rung.on{opacity:.72} .rung.on b{text-decoration:line-through}
.rung .n{font:800 20px var(--display);width:28px;flex:none;color:var(--red)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}
.stat{border-top:3px solid var(--hi);padding-top:8px} .stat b{font:800 38px var(--display);display:block;line-height:1}
.bar{height:10px;background:#ffffff22;border-radius:5px;overflow:hidden;margin:8px 0 22px}.bar i{display:block;height:100%;background:var(--hi)}
.note{background:#ffffff14;border-left:4px solid var(--hi);padding:10px 14px;border-radius:0 6px 6px 0;margin:14px 0}
.hide{display:none!important}
@media(max-width:780px){body{display:block}nav{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;flex-direction:row;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:5;gap:2px;justify-content:space-between}
 nav .brand{display:none}nav a{padding:9px 6px;font-size:13px;flex:1;text-align:center}main{padding:24px 16px 110px}.cue{padding:22px 18px}}
@media(prefers-reduced-motion:no-preference){.cue{animation:deal .45s cubic-bezier(.2,.8,.2,1)}@keyframes deal{from{transform:translateY(14px) rotate(-1.2deg);opacity:0}}}

@media(max-width:780px){main{padding-top:calc(24px + env(safe-area-inset-top))}}