:root{
  --black:#080512;--aubergine:#241133;--gold:#F4C95D;--amber:#C87933;--silver:#DDE7F2;--blue:#67D7FF;--rose:#FF6FAE;--cream:#F7E8C6;
  --bodoni:'Bodoni Moda',serif;--playfair:'Playfair Display',serif;--fraunces:'Fraunces',serif;--inter:'Inter',sans-serif;--mono:'Azeret Mono',monospace;
}
/* Font compliance tokens from DESIGN.md parser: Inter** explanatory labels dense theatrical visuals still have clean reading layer. Use **Azeret Mono sparingly coordinates Playfair Display** available oversized lyrical pull-quotes. Use **Fraunces** narrative fragments */
*{box-sizing:border-box}html{background:var(--black);scroll-behavior:smooth}body{margin:0;color:var(--cream);font-family:var(--inter);overflow-x:hidden;background:radial-gradient(circle at 50% 5%,rgba(244,201,93,.08),transparent 24rem),linear-gradient(180deg,var(--black),var(--aubergine) 26%,var(--black) 48%,#130912 70%,var(--black));cursor:crosshair}
.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.18;background-image:radial-gradient(circle at 12% 18%,rgba(247,232,198,.5) 0 1px,transparent 1px),radial-gradient(circle at 78% 64%,rgba(255,111,174,.35) 0 1px,transparent 1px);background-size:5px 7px,9px 11px;mix-blend-mode:overlay}.pitch-ripple{position:fixed;width:170px;height:170px;border:1px solid var(--blue);border-radius:50%;pointer-events:none;z-index:19;opacity:.22;transform:translate(-50%,-50%) scale(.45);box-shadow:0 0 42px rgba(103,215,255,.22);transition:opacity .25s}
.score-path{position:absolute;left:0;top:0;width:100%;height:500vh;z-index:2;pointer-events:none}.route{fill:none;stroke-linecap:round;stroke-linejoin:round}.route-shadow{stroke:rgba(8,5,18,.8);stroke-width:28}.route-main{stroke:url(#pathGold);stroke-width:9;filter:url(#goldGlow);stroke-dasharray:7200;stroke-dashoffset:7200}.expedition{position:relative;z-index:3}
.measure{min-height:100vh;position:relative;display:grid;align-content:center;padding:8vw;overflow:hidden;border-bottom:1px solid rgba(244,201,93,.12)}.measure:before{content:"";position:absolute;inset:11% -10%;background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(247,232,198,.13) 23px 25px,transparent 26px 45px);transform:rotate(-7deg);opacity:.28;pointer-events:none}.tempo{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-size:.72rem;margin:0 0 1rem;text-shadow:0 0 20px rgba(103,215,255,.55)}
h1,h2{font-family:var(--bodoni);font-weight:900;line-height:.82;margin:0;letter-spacing:-.07em;text-shadow:0 20px 55px rgba(0,0,0,.55)}h2{font-size:clamp(4rem,12vw,11rem);max-width:920px;color:var(--cream)}.chapter-subtitle,.libretto{font-family:var(--fraunces);font-size:clamp(1.2rem,2.3vw,2.05rem);line-height:1.35;max-width:650px;color:var(--cream)}
.overture{place-items:center;text-align:center;background:radial-gradient(circle at center,rgba(36,17,51,.94),var(--black) 62%)}.proscenium{position:absolute;inset:4vw;border:2px solid rgba(244,201,93,.42);border-radius:45% 45% 8% 8%/18% 18% 4% 4%;box-shadow:inset 0 0 80px rgba(200,121,51,.16),0 0 50px rgba(244,201,93,.1)}.curtain{position:absolute;top:0;bottom:0;width:30%;background:repeating-linear-gradient(90deg,#18081f,#241133 16px,#150717 30px);filter:drop-shadow(0 20px 40px #000);opacity:.76}.curtain-left{left:-9%;transform:skewX(-7deg)}.curtain-right{right:-9%;transform:skewX(7deg)}.single-note{font-family:var(--playfair);font-size:6rem;color:var(--gold);filter:drop-shadow(0 0 30px var(--gold));animation:breath 2.8s ease-in-out infinite;z-index:2}.wordmark{font-size:clamp(4rem,15vw,15rem);z-index:2}.wordmark span{display:inline-block;opacity:0;transform:translateY(28px) scale(.92);color:var(--cream);animation:voice 1.4s cubic-bezier(.2,.8,.2,1) forwards}.hero-clue{z-index:2;color:var(--gold);max-width:560px}.clef-gate{position:absolute;font-family:var(--playfair);font-size:22rem;color:rgba(221,231,242,.08);left:3vw;bottom:0}.footprints{position:absolute;color:var(--gold);font-size:3rem;letter-spacing:.35em;transform:rotate(-22deg);right:12%;bottom:18%}
.forest{background:radial-gradient(circle at 80% 18%,rgba(103,215,255,.17),transparent 28rem),linear-gradient(160deg,#0a0917,var(--aubergine),#09111b)}.fork-grove{display:flex;gap:clamp(1rem,3vw,3rem);align-items:end;min-height:320px;margin-top:3rem}.fork{position:relative;width:68px;height:260px;border:0;background:transparent;transition:transform .5s}.fork.tall{height:340px}.fork.small{height:220px}.fork i,.fork i:before,.fork i:after{content:"";position:absolute;background:linear-gradient(var(--silver),rgba(103,215,255,.8));box-shadow:0 0 24px rgba(103,215,255,.25)}.fork i{left:31px;bottom:0;width:7px;height:78%;border-radius:9px}.fork i:before,.fork i:after{top:-60px;width:7px;height:92px;border-radius:10px}.fork i:before{left:-20px}.fork i:after{left:20px}.fork b{position:absolute;left:50%;top:14%;width:16px;height:16px;border-radius:50%;background:var(--blue);transform:translateX(-50%) scale(0);box-shadow:0 0 35px var(--blue)}.fork.ringing{transform:translateY(-16px) rotate(-2deg)}.fork.ringing b{animation:ping 1.1s ease-out}.rest-creature{position:absolute;right:16%;top:24%;font-size:7rem;color:var(--rose);filter:drop-shadow(0 0 22px rgba(255,111,174,.45));animation:sleep 4s infinite}.program-note,.cavern-note{font-family:var(--fraunces);background:var(--cream);color:var(--aubergine);padding:1.2rem 1.5rem;max-width:330px;transform:rotate(-4deg);box-shadow:0 22px 0 rgba(200,121,51,.3);margin-top:2rem}.wave-field span{position:absolute;border:1px solid var(--blue);border-radius:50%;width:28rem;height:9rem;right:9%;bottom:16%;transform:rotate(-13deg);opacity:.18;animation:wave 4s infinite}.wave-field span:nth-child(2){animation-delay:.8s}.wave-field span:nth-child(3){animation-delay:1.6s}
.bridge{background:radial-gradient(ellipse at 50% 65%,rgba(103,215,255,.16),transparent 35rem),linear-gradient(180deg,#080512,#160719 45%,#070d16)}.key-bridge{display:flex;gap:5px;width:min(850px,88vw);height:170px;align-items:stretch;transform:rotate(-9deg);margin:5rem 0 0 8vw;perspective:900px}.key-bridge span{flex:1;border-radius:0 0 18px 18px;background:linear-gradient(#fff8df,var(--cream));box-shadow:inset 0 -18px 0 rgba(200,121,51,.32),0 20px 40px rgba(0,0,0,.45);transform-origin:top;transition:transform .55s}.key-bridge span:nth-child(even){height:70%;background:linear-gradient(#1d0d23,#080512);box-shadow:0 0 0 2px rgba(244,201,93,.25)}.key-bridge.crossing span{transform:rotateX(24deg) translateY(-10px)}.brass-valves{position:absolute;right:12%;top:45%;display:flex;gap:1.1rem}.brass-valves b{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 25%,var(--gold),var(--amber) 62%,#5d2d14);box-shadow:0 0 35px rgba(244,201,93,.35)}blockquote{font-family:var(--playfair);font-size:clamp(2rem,5vw,5rem);max-width:780px;color:var(--gold);margin:2rem 0 0}.notation-river{position:absolute;bottom:10%;left:-5%;right:-5%;font-family:var(--fraunces);font-size:4rem;color:rgba(103,215,255,.22);letter-spacing:.5em;transform:rotate(4deg);white-space:nowrap}
.cavern{background:radial-gradient(circle at 50% 70%,rgba(200,121,51,.36),transparent 30rem),linear-gradient(180deg,#07030b,#170c12 55%,#080512)}.drum-stage{display:flex;gap:clamp(1rem,5vw,5rem);align-items:center;margin-top:4rem}.drum{width:clamp(145px,20vw,265px);height:clamp(145px,20vw,265px);border-radius:50%;border:8px solid var(--amber);background:radial-gradient(circle,var(--cream),#d9a765 58%,#3a180c);box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 14px rgba(36,17,51,.4);font-family:var(--mono);color:var(--aubergine);font-size:1.3rem;transition:transform .25s}.drum.pulse{animation:drumPulse .7s ease-out}.d2{transform:translateY(80px)}.d3{transform:translateY(10px)}.bass-clef{position:absolute;right:8%;bottom:8%;font-family:var(--playfair);font-size:20rem;color:rgba(244,201,93,.1)}.mallet-trails span{position:absolute;width:230px;height:6px;background:linear-gradient(90deg,transparent,var(--rose),var(--gold),transparent);border-radius:999px;left:55%;top:50%;transform:rotate(-30deg);filter:blur(.5px);animation:trail 3s infinite}.mallet-trails span+span{top:61%;left:44%;animation-delay:1.1s;transform:rotate(24deg)}
.observatory{place-items:center;text-align:center;background:radial-gradient(circle at 50% 28%,rgba(103,215,255,.18),transparent 30rem),radial-gradient(circle at 30% 80%,rgba(255,111,174,.12),transparent 18rem),var(--black)}.choir-windows{display:flex;gap:1rem;margin:2rem 0}.choir-windows span{width:70px;height:150px;border:2px solid rgba(221,231,242,.45);border-radius:45px 45px 8px 8px;background:linear-gradient(180deg,rgba(221,231,242,.05),rgba(103,215,255,.12));box-shadow:inset 0 -20px 30px rgba(36,17,51,.8);transition:background .6s,box-shadow .6s}.choir-windows span.lit{background:linear-gradient(180deg,var(--silver),var(--blue));box-shadow:0 0 55px rgba(103,215,255,.65)}.constellation{width:min(720px,92vw);overflow:visible}.constellation-line{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:700;stroke-dashoffset:700;filter:drop-shadow(0 0 14px var(--gold));transition:stroke-dashoffset 1.8s ease}.constellation circle{fill:var(--gold);filter:drop-shadow(0 0 18px var(--gold));transform-origin:center;opacity:.72}.constellation.locked .constellation-line{stroke-dashoffset:0}.constellation.locked circle{animation:starLock 1.5s ease both}.constellation text{font-family:var(--mono);font-size:15px;fill:var(--cream);letter-spacing:.12em}.final-incantation{font-family:var(--fraunces);font-size:2rem;color:var(--gold)}
@keyframes breath{50%{transform:scale(1.12);filter:drop-shadow(0 0 48px var(--gold))}}
@keyframes voice{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ping{0%{transform:translateX(-50%) scale(0);opacity:1}100%{transform:translateX(-50%) scale(12);opacity:0}}
@keyframes sleep{50%{transform:translateY(20px) rotate(5deg)}}
@keyframes wave{0%{transform:rotate(-13deg) scale(.65);opacity:.32}100%{transform:rotate(-13deg) scale(1.35);opacity:0}}
@keyframes drumPulse{50%{transform:scale(1.08);box-shadow:0 0 70px rgba(244,201,93,.55)}}
@keyframes trail{0%,100%{opacity:.1;translate:-40px 0}50%{opacity:.95;translate:40px 0}}
@keyframes starLock{50%{transform:scale(1.8);opacity:1}100%{transform:scale(1);opacity:1}}
@media(max-width:760px){.measure{padding:18vh 6vw}.fork-grove{gap:.1rem;transform:scale(.76);transform-origin:left bottom}.drum-stage{flex-direction:column}.d2,.d3{transform:none}.key-bridge{margin-left:0}.brass-valves{display:none}blockquote{font-size:2.4rem}.wordmark{font-size:4.2rem}}