/* Pico Academy — shared styles, taken from Joel's cover art:
   pure black, white blocky type with a cyan glow, red/green/blue split lines, film grain.
   Landing = header, cover hero, the nine schools (wheel + readout), footer. Chapter pages = one player. */
:root{
  --bg:#000;
  --panel:rgba(8,12,14,.82);
  --fg:#f2f5f6;
  --muted:#8c979b;
  --line:rgba(120,230,245,.18);
  --cyan:#5fe3f2;
  --glow:rgba(95,227,242,.55);
  --rgb-r:#ff2a4d;
  --rgb-g:#2dff8a;
  --rgb-b:#3a6bff;
  --font-display:"Share Tech Mono","Courier New",ui-monospace,monospace;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.6}
/* film grain + faint scanlines over everything */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:1px solid var(--cyan);outline-offset:3px}

/* Glow type with an RGB split, like the cover's lettering */
.glow{color:#fff;text-shadow:-1.5px 0 var(--rgb-r),1.5px 0 var(--rgb-b),0 0 18px var(--glow),0 0 42px rgba(95,227,242,.25)}
.label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--cyan)}

/* Header */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:18px;position:relative;z-index:2}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.brand b{font-family:var(--font-display);font-weight:400;font-size:26px;letter-spacing:.34em}
.brand span{font-family:var(--font-display);font-size:12px;letter-spacing:.34em;color:var(--muted);text-transform:uppercase}
.nav{display:flex;flex-wrap:wrap;gap:6px}
.nav button,.btn{background:transparent;border:1px solid var(--line);border-radius:2px;padding:8px 13px;font-family:var(--font-display);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .2s,border-color .2s,box-shadow .2s}
.nav button:hover,.btn:hover{color:var(--fg);border-color:var(--cyan);box-shadow:0 0 14px rgba(95,227,242,.25)}
.nav .join{color:#fff;border-color:var(--cyan);box-shadow:inset 0 0 12px rgba(95,227,242,.18)}

/* Cover hero */
.cover{display:grid;justify-items:center;text-align:center;padding-block:8px 40px}
.cover img{width:min(620px,100%);height:auto;display:block;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 72%)}
.cover .label{margin:-6px 0 10px}
.cover p.tag{margin:0;max-width:52ch;color:var(--muted)}

/* Schools */
.schools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding-block:36px 56px;border-top:1px solid var(--line)}
.schools h2{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,4vw,38px);letter-spacing:.06em;line-height:1.15;margin:8px 0 14px;text-wrap:balance}
.lede{color:var(--muted);max-width:46ch;margin:0 0 20px}
.power{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:16px 18px;max-width:460px;min-height:150px}
.power::before,.power::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--cyan)}
.power::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.power::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.power h3{margin:0 0 2px;font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.power .swatch{width:12px;height:12px;flex:none;box-shadow:0 0 10px currentColor}
.power .meta{font-family:var(--font-display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.power p{margin:0}
.power .hint{color:var(--muted)}
.enter{margin-top:18px}

/* Wheel */
.wheel-box{position:relative;width:100%;max-width:540px;justify-self:center;aspect-ratio:1}
.wheel{width:100%;height:100%;display:block;overflow:visible}
.wheel,.wheel *{-webkit-tap-highlight-color:transparent}
.wedge{cursor:pointer;outline:none}
.wedge:focus{outline:none}
.wedge .fill{fill-opacity:.16;stroke-width:1.6;transition:fill-opacity .3s ease,filter .3s ease}
.wedge .ghost{fill:none;stroke-width:1.2;opacity:.75;mix-blend-mode:screen;transition:opacity .3s}
.wedge:hover .fill,.wedge:focus-visible .fill{fill-opacity:.38;filter:drop-shadow(0 0 8px var(--c))}
.wedge.on .fill{fill-opacity:.92;filter:drop-shadow(0 0 16px var(--c))}
.wedge text{font-family:var(--font-display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;fill:#fff;pointer-events:none}
.wedge .note{font-size:11px;opacity:.7}
.wedge.on.light text{fill:#05070a}
.res text{font-family:var(--font-display);font-size:10px;fill:var(--cyan)}

/* Footer */
.foot{border-top:1px solid var(--line);padding-block:20px 28px;color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.dev{flex-basis:100%;font-size:12px}
.dev ul{display:flex;flex-wrap:wrap;gap:6px 12px;list-style:none;padding:0;margin:8px 0 0}
.dev a{color:var(--muted)}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#000;border:1px solid var(--cyan);border-radius:2px;padding:8px 16px;font-family:var(--font-display);font-size:13px;letter-spacing:.06em;opacity:0;transition:opacity .25s;pointer-events:none;z-index:60;box-shadow:0 0 18px rgba(95,227,242,.3)}
.toast.show{opacity:1}

/* Chapter page */
.chapter-page{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(520px 520px at 50% 46%,rgba(95,227,242,.07),transparent 70%)}
.chapter-page .top{flex-wrap:nowrap}
.chapter-main{flex:1;display:grid;place-items:center;padding-block:24px 40px}
.player{width:min(440px,100%);text-align:center}
.player h1{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,7vw,38px);letter-spacing:.06em;line-height:1.15;margin:8px 0 30px;text-wrap:balance}
.play{position:relative;width:180px;height:180px;border-radius:50%;border:1.5px solid var(--cyan);background:radial-gradient(circle at 50% 50%,rgba(95,227,242,.10),#000 68%);box-shadow:0 0 30px rgba(95,227,242,.3),inset 0 0 24px rgba(95,227,242,.15),-2px 0 0 rgba(255,42,77,.6),2px 0 0 rgba(58,107,255,.7);display:grid;place-items:center;margin:0 auto 24px}
.play::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px dashed rgba(95,227,242,.4)}
.play.playing::before{animation:spin 22s linear infinite}
.play svg{width:56px;height:56px;fill:#fff;filter:drop-shadow(-1.5px 0 var(--rgb-r)) drop-shadow(1.5px 0 var(--rgb-b)) drop-shadow(0 0 8px var(--glow))}
@keyframes spin{to{transform:rotate(360deg)}}
.timeline{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted)}
.timeline input{flex:1;accent-color:var(--cyan)}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.btn[aria-pressed="true"]{color:#fff;border-color:var(--cyan);box-shadow:inset 0 0 12px rgba(95,227,242,.2)}
.credit{margin-top:18px;font-size:12px;color:var(--muted)}
.back{font-family:var(--font-display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.back:hover{color:var(--cyan)}

@media (max-width:820px){
  .schools{grid-template-columns:minmax(0,1fr);gap:24px}
  .wheel-box{max-width:420px}
  .power{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .play.playing::before{animation:none}
  .wedge .fill,.toast{transition:none}
}

/* Cover art as a huge background: dim at the top, brighter as you scroll (wheel.js sets --art) */
.bgart{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:var(--art,.22);transition:opacity .15s linear}
.bgart img{position:absolute;left:50%;top:58%;height:max(118vh,100vw);width:auto;max-width:none;transform:translate(-50%,-50%);
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
.top,main,.foot{position:relative;z-index:1}
.intro{min-height:42vh;display:flex;flex-direction:column;justify-content:flex-end;padding-block:24px 40px}
.intro h1{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,4.6vw,50px);letter-spacing:.05em;line-height:1.15;max-width:22ch;margin:10px 0 0;text-wrap:balance}
.schools .lede{text-shadow:0 1px 8px #000}
@media (prefers-reduced-motion:reduce){.bgart{transition:none}}
.foot{text-shadow:0 1px 6px #000,0 0 2px #000}

/* --- Landing v3: the cover's PICO is the logo at the top; the wheel sits just under the face's chin --- */
:root{--W:min(1100px,135vw)}               /* drawn width of the cover art */
body{position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bgart{position:absolute;inset:0 0 auto 0;height:calc(var(--W) * .74);opacity:var(--art,.5)}
.bgart img{left:50%;top:calc(var(--W) * -.27);width:var(--W);height:var(--W);transform:translateX(-50%);
  -webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(closest-side,#000 74%,transparent 100%)}
.landing-top{position:absolute;top:0;left:0;right:0;justify-content:center}
.nav{justify-content:center;gap:10px}
.nav button{font-size:clamp(12.5px,3.4vw,15.5px);padding:12px 20px;letter-spacing:.16em;background:rgba(0,0,0,.55)}
.chin-space{height:calc(var(--W) * .585)}  /* chin sits at 86% of the art, which starts 27% above the page */
.schools{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;border-top:0;padding-block:0 56px}
.schools .wheel-box{max-width:520px;width:100%}
.schools .label{margin:8px 0 0;font-weight:400}
.schools .power{width:100%;max-width:520px;text-align:left}
.wedge .fill{fill-opacity:.34}
.wedge:hover .fill,.wedge:focus-visible .fill{fill-opacity:.55}
@media (max-width:520px){ .nav{gap:6px} .nav button{padding:10px 12px} }
:root{--W:min(1100px,112vw);--hdr:0px}
.bgart{height:calc(var(--W) * .74 + var(--hdr))}
.bgart img{top:calc(var(--W) * -.27 + var(--hdr))}
.chin-space{height:calc(var(--W) * .585 + var(--hdr))}
.schools h2.label{font-family:var(--font-display);font-size:12px;letter-spacing:.22em;line-height:1.4;margin:8px 0 0;text-shadow:none}
@media (max-width:640px){ :root{--hdr:96px} }
/* The PICO lettering band at full strength over the dimmer art */
.bglogo{opacity:1}
.bglogo img{filter:brightness(1.25) contrast(1.05);
  -webkit-mask-image:linear-gradient(to bottom,transparent 34%,#000 36.5%,#000 58%,transparent 60.5%);
  mask-image:linear-gradient(to bottom,transparent 34%,#000 36.5%,#000 58%,transparent 60.5%)}
/* Sliding title: the bright lettering layer moves down; the dim art has its lettering band cut out */
.bglogo{height:auto;bottom:0;overflow:visible}
.bglogo img{transform:translate(-50%, var(--slide,0px))}
.bgart:not(.bglogo) img{
  -webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%),linear-gradient(to bottom,#000 33.5%,transparent 36.5%,transparent 58%,#000 61%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(closest-side,#000 74%,transparent 100%),linear-gradient(to bottom,#000 33.5%,transparent 36.5%,transparent 58%,#000 61%);
  mask-composite:intersect}
.nav button.soon,.btn.soon{color:var(--cyan);border-color:var(--cyan)}
.landing-top{z-index:5}
.chin-space{pointer-events:none}

/* --- Landing v4: PICO lettering alone, fixed in place; content scrolls over it; top bar fixed above everything --- */
.bgart:not(.bglogo) img{
  -webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);-webkit-mask-composite:source-over;
  mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);mask-composite:add}
.logo-fixed{position:fixed;z-index:0;pointer-events:none;max-width:none;
  left:calc(50% - var(--W) * .3911);top:calc(var(--W) * .0838 + var(--hdr) + env(safe-area-inset-top,0px));
  width:calc(var(--W) * .78);height:auto;
  filter:drop-shadow(0 0 12px rgba(95,227,242,.6)) drop-shadow(0 0 38px rgba(95,227,242,.3))}
.landing-top{position:fixed;z-index:20;padding-top:calc(18px + env(safe-area-inset-top,0px));
  background:linear-gradient(to bottom,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 60%,transparent 100%)}
.nav button{background:rgba(0,0,0,.72)}
/* "Coming soon" tag hangs under the tapped button so the row never reflows */
[data-soon]{position:relative}
[data-soon]::after{content:"Coming soon";position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;
  background:#000;border:1px solid var(--cyan);border-radius:2px;padding:4px 9px;font-family:var(--font-display);font-size:11px;letter-spacing:.14em;
  color:var(--cyan);box-shadow:0 0 12px rgba(95,227,242,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}
[data-soon].soon::after{opacity:1}
/* v2: the tag covers the button itself (two lines on narrow buttons), so it never overlaps a neighbour */
[data-soon]::after{inset:-1px;left:-1px;top:-1px;transform:none;display:grid;place-items:center;text-align:center;white-space:normal;
  line-height:1.15;padding:2px 4px;font-size:clamp(10px,2.9vw,12.5px);letter-spacing:.1em;box-shadow:0 0 14px rgba(95,227,242,.35)}
/* Resonant notes are tappable */
.res{cursor:pointer;outline:none}
.res .dot{transition:stroke .2s,filter .2s}
.res:hover .dot,.res:focus-visible .dot,.res.on .dot{stroke:var(--cyan);filter:drop-shadow(0 0 8px var(--cyan))}
.res.on text{fill:#fff}