/* watersyrup — daytime "syrup soda" theme */
:root{--sky1:#7fd4ff;--sky2:#dff4ff;--sea:#2bb3c8;--sea2:#11789a;--paper:#fff7e8;--ink:#12324a;--mute:#3f6178;--faint:rgba(18,50,74,.07);--line:rgba(18,50,74,.16);
--syrup:#ff5d8f;--syrup-ink:#d93a72;--lemon:#ffd84d;--rec:#e8473a;
--lamp:var(--lemon);--lamp2:var(--syrup);
--serif:Fraunces,"Iowan Old Style",Georgia,serif;--fell:"IM Fell English",Georgia,serif;--sans:Inter,system-ui,sans-serif;--ease:cubic-bezier(.22,.8,.24,1);--spring:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box}html{background:linear-gradient(180deg,var(--sky1) 0%,#a6e1ff 30%,var(--sky2) 68%,#eefaff 100%) fixed var(--sky1);min-height:100%}
body{margin:0;color:var(--ink);font:15px/1.7 var(--sans);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:transparent}
a{color:inherit}
::selection{background:var(--lemon);color:var(--ink)}

/* ---------- sky ---------- */
.sky{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
#fizz{position:absolute;inset:0;width:100%;height:100%}
.sun{position:absolute;right:7%;top:64px;width:150px;height:150px;pointer-events:auto;cursor:pointer;will-change:transform}
.sun .rays{position:absolute;inset:0;width:100%;height:100%;opacity:.6;animation:spin 48s linear infinite}
.sun .disc{position:absolute;inset:38px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff6c4,#ffe066 45%,#ffcf2e);box-shadow:0 0 0 10px rgba(255,216,77,.25),0 0 80px 20px rgba(255,236,150,.7);transition:transform .5s var(--spring)}
.sun:hover .disc{transform:scale(1.08)}.sun.wink .rays{animation-duration:2s}.sun.wink .disc{transform:scale(1.25)}
@keyframes spin{to{transform:rotate(360deg)}}
.cloud{position:absolute;left:0;width:calc(220px*var(--s,1));will-change:transform}
.cloud i{display:block;animation:cloud var(--dur,90s) linear infinite;animation-delay:var(--off,0s)}
.cloud svg{width:100%;display:block;fill:#fff;filter:drop-shadow(0 8px 0 rgba(127,212,255,.35))}
@keyframes cloud{from{transform:translateX(-260px)}to{transform:translateX(calc(100vw + 40px))}}
.gull{position:fixed;z-index:5;width:46px;height:24px;pointer-events:auto;cursor:pointer;color:var(--ink);will-change:transform}
.gull svg{width:100%;height:100%;overflow:visible;animation:flap .42s ease-in-out infinite alternate;transform-origin:50% 60%}
.gull.spooked svg{animation-duration:.12s}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(-.55)}}
.say{position:absolute;z-index:6;background:var(--paper);color:var(--ink);font:italic 16px var(--fell);padding:6px 14px;border-radius:14px;box-shadow:0 8px 20px -10px rgba(18,50,74,.5);white-space:nowrap;pointer-events:none;animation:say 1.8s var(--spring) forwards}
.say:after{content:"";position:absolute;left:18px;bottom:-7px;border:7px solid transparent;border-top-color:var(--paper);border-bottom:0}
@keyframes say{0%{transform:scale(.3) translateY(10px);opacity:0}15%{transform:none;opacity:1}80%{opacity:1}100%{transform:translateY(-16px);opacity:0}}
.note{position:absolute;z-index:6;font:600 22px var(--serif);color:var(--syrup-ink);pointer-events:none;animation:note 1.8s ease-out forwards}
@keyframes note{0%{opacity:0;transform:translate(0,0) rotate(-10deg)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x,30px),-90px) rotate(18deg)}}

/* ---------- sea ---------- */
.sea{position:fixed;left:0;right:0;bottom:0;height:130px;z-index:-1;pointer-events:none}
.sea svg{width:200%;height:100%}.sea path{stroke-width:2}
.w1{fill:rgba(43,179,200,.35);stroke:rgba(255,255,255,.7);animation:drift 30s linear infinite}
.w2{fill:rgba(43,179,200,.65);stroke:rgba(255,255,255,.55);animation:drift 21s linear infinite reverse}
.w3{fill:var(--sea2);stroke:rgba(255,255,255,.4);animation:drift 14s linear infinite}
@keyframes drift{to{transform:translateX(-25%)}}

/* ---------- chrome ---------- */
header{display:flex;justify-content:space-between;align-items:center;padding:22px clamp(18px,5vw,64px);max-width:1180px;margin:auto;position:relative;z-index:3}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font:600 24px/1 var(--serif);letter-spacing:-.01em}
.logo em{font:italic 14px var(--fell);color:var(--mute);margin-left:6px}
.mark{width:42px;height:42px;transition:transform .6s var(--spring);filter:drop-shadow(0 4px 0 rgba(18,50,74,.15))}
.logo:hover .mark{transform:rotate(-10deg) scale(1.1)}
nav{display:flex;gap:6px;background:rgba(255,255,255,.5);padding:5px;border-radius:999px;backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
nav a{text-decoration:none;color:var(--mute);font:600 12.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:8px 16px;border-radius:999px;transition:background .3s,color .3s,transform .3s var(--spring)}
nav a:hover{color:var(--ink);transform:translateY(-2px)}nav a.on{background:var(--ink);color:var(--paper)}
main{max-width:1000px;margin:auto;padding:30px clamp(18px,5vw,48px) 220px;position:relative;z-index:2}
main.enter>*{animation:rise .8s var(--spring) both}main.enter>*:nth-child(2){animation-delay:.06s}main.enter>*:nth-child(3){animation-delay:.12s}main.enter>*:nth-child(4){animation-delay:.18s}main.enter>*:nth-child(5){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.98)}}
h1{font:500 clamp(42px,7.4vw,84px)/1.02 var(--serif);margin:.2em 0 .35em;letter-spacing:-.025em}
h1 i{font-style:italic;color:var(--syrup-ink);font-weight:500}
h1 .wv{display:inline-block;animation:bobl 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*-.16s)}
@keyframes bobl{50%{transform:translateY(-.08em) rotate(-2deg)}}
h2{font:500 28px/1.2 var(--serif);margin:0 0 .3em;letter-spacing:-.01em}
.eyebrow{font:italic 16px var(--fell);color:var(--sea2);letter-spacing:.03em;display:flex;align-items:center;gap:10px}.eyebrow:before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor}
.lead{font-size:17px;color:#24485f;max-width:540px}.mute{color:var(--mute)}small{color:var(--mute)}
.space{height:60px}

/* ---------- panels, forms, buttons ---------- */
.panel{position:relative;padding:34px clamp(20px,4vw,40px);margin:28px 0;border-radius:22px;background:rgba(255,250,240,.82);backdrop-filter:blur(10px);box-shadow:0 24px 60px -34px rgba(18,50,74,.55),inset 0 0 0 1px rgba(255,255,255,.8)}
.panel.roped:before{content:"";position:absolute;inset:0;border-radius:22px;padding:4px;pointer-events:none;
 background:repeating-linear-gradient(45deg,#e9c58b 0 4px,#c99a5b 4px 8px);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rope 6s linear infinite}
@keyframes rope{to{background-position:56px 0}}
.stitch{border-top:2px dashed var(--line);margin:26px 0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
label{display:block;font:italic 15px var(--fell);color:var(--mute);margin:16px 0 6px}
input,textarea{width:100%;background:rgba(255,255,255,.55);border:0;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font:17px var(--serif);padding:10px 14px;outline:none;transition:box-shadow .3s,background .3s,transform .3s var(--spring)}
input:focus,textarea:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--sea),0 8px 24px -14px rgba(17,120,154,.6);transform:translateY(-1px)}
textarea{min-height:64px;resize:vertical}input::placeholder,textarea::placeholder{color:#7e97a8}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;border:2px solid var(--ink);background:rgba(255,255,255,.6);color:var(--ink);font:600 14px var(--sans);letter-spacing:.02em;cursor:pointer;text-decoration:none;
 box-shadow:0 4px 0 var(--ink);transition:transform .25s var(--spring),box-shadow .25s,background .3s,translate .35s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink);background:#fff}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:0 4px 0 var(--ink)}
.btn.pri{background:linear-gradient(180deg,#ffe57e,#ffcb2f)}.btn.pri:hover{background:linear-gradient(180deg,#fff09e,#ffd84d)}
.btn.sm{padding:7px 14px;font-size:12.5px;box-shadow:0 3px 0 var(--ink)}
.play{width:118px;height:118px;border-radius:50%;border:0;cursor:pointer;color:var(--ink);position:relative;display:grid;place-items:center;flex:none;
 background:radial-gradient(circle at 38% 32%,#fff6c4,#ffd84d 46%,#ffbe1a 72%),var(--lemon);
 box-shadow:0 0 0 7px var(--syrup),0 0 0 9px var(--ink),0 12px 0 9px rgba(18,50,74,.25);transition:transform .35s var(--spring),translate .35s var(--ease)}
.play:hover{transform:scale(1.07) rotate(-6deg)}.play:active{transform:scale(.92)}
.play:before,.play:after{content:"";position:absolute;inset:-18px;border-radius:50%;border:2px solid rgba(255,93,143,.45);animation:ring 2.8s var(--ease) infinite}.play:after{animation-delay:1.4s}
.play.on{animation:throb .75s ease-in-out infinite}@keyframes throb{50%{transform:scale(1.06)}}
@keyframes ring{from{transform:scale(.9);opacity:1}to{transform:scale(1.55);opacity:0}}.play svg{width:34px;margin-left:5px}.play.on svg{margin:0}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:clamp(20px,4vw,48px);align-items:center}
.hero .t{min-width:0}
.hero .go{display:flex;align-items:center;gap:26px;margin-top:8px}
.hero .go small{font:italic 15px var(--fell);max-width:200px;line-height:1.4}
#hero{position:relative;touch-action:pan-y}
#hero svg{width:100%;display:block;overflow:visible;cursor:grab;filter:drop-shadow(0 18px 18px rgba(17,120,154,.25))}
#hero svg:active{cursor:grabbing}
#hero .hint{display:block;text-align:center;margin-top:4px;font:italic 14px var(--fell);color:var(--sea2)}

/* ---------- deck of silhouettes ---------- */
.deck{position:relative;margin:40px 0 10px;padding-top:30px}.deck .rail{height:6px;border-radius:6px;background:linear-gradient(180deg,#c99a5b,#9c6f3a);box-shadow:0 3px 0 rgba(18,50,74,.18)}
.crewline{display:flex;align-items:flex-end;justify-content:center;gap:4px;min-height:96px;flex-wrap:wrap}
.sil{width:44px;height:84px;color:var(--ink);position:relative;transform-origin:50% 100%;cursor:pointer}
.sil svg{width:100%;height:100%;display:block;overflow:visible}
.crewline .sil{animation:sway 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.22s)}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-2px)}}
.crewline .sil:hover,.crewline .sil.near{animation:hop .55s var(--spring)}
.crewline .sil.near{animation-duration:.7s}
@keyframes hop{0%{transform:none}40%{transform:translateY(-14px) rotate(-6deg) scale(1.05)}100%{transform:none}}
.sil .lamp{position:absolute;left:50%;top:-14px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--syrup);box-shadow:0 0 0 2px #fff,0 0 12px 3px rgba(255,93,143,.45);animation:fizz 2.4s ease-in-out infinite}
@keyframes fizz{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.crewline .sil.sing,.sil.sing{animation:sing .42s ease-in-out infinite alternate}.sil.sing .lamp{background:var(--lemon);box-shadow:0 0 0 2px #fff,0 0 22px 8px rgba(255,216,77,.8)}
@keyframes sing{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-8px) rotate(4deg) scaleY(1.04)}}
.sil .tip{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-18px) scale(.8);white-space:nowrap;font:italic 14px var(--fell);background:var(--ink);color:var(--paper);padding:4px 12px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--spring);z-index:4}
.sil:hover .tip{opacity:1;transform:translate(-50%,-22px) scale(1)}
.sil.ghost{color:transparent;animation:none}.sil.ghost path{stroke:rgba(18,50,74,.45);stroke-dasharray:3 3;stroke-width:1.2;vector-effect:non-scaling-stroke}
.sil.ghost:hover path{stroke:var(--syrup-ink)}

/* ---------- section map ---------- */
.chart{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-top:20px;perspective:900px}
.slot{position:relative;padding:20px 20px 16px;border-radius:18px;cursor:pointer;background:rgba(255,255,255,.62);backdrop-filter:blur(6px);text-decoration:none;display:block;overflow:hidden;
 box-shadow:0 14px 30px -22px rgba(18,50,74,.6),inset 0 0 0 1px rgba(255,255,255,.9);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s var(--ease),box-shadow .3s,background .3s}
.slot:hover{background:#fff;box-shadow:0 22px 40px -22px rgba(18,50,74,.7),inset 0 0 0 2px var(--syrup);transition:transform .08s linear,box-shadow .3s,background .3s}
.slot:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,216,77,.35),transparent 60%);opacity:0;transition:opacity .3s}.slot:hover:after{opacity:1}
.slot.live{box-shadow:inset 0 0 0 3px var(--syrup),0 20px 40px -20px rgba(255,93,143,.6)}
.slot .ts{font:italic 14px var(--fell);color:var(--sea2)}.slot h3{font:500 20px/1.25 var(--serif);margin:4px 0 12px;padding-right:58px}
.layers{display:flex;flex-direction:column;gap:4px;height:38px;justify-content:flex-end}.layers i{display:block;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--syrup),var(--lemon));transform-origin:left;animation:grow .9s var(--spring) both}
@keyframes grow{from{transform:scaleX(0)}}
.slot.empty{background:rgba(255,255,255,.3);box-shadow:none;border:2px dashed rgba(18,50,74,.25)}.slot.empty .layers{justify-content:center}.slot.empty .layers:before{content:"no one has sung here yet";font:italic 14px var(--fell);color:var(--mute)}
.slot.djo{background:linear-gradient(135deg,rgba(255,236,150,.85),rgba(255,214,228,.75));cursor:default}.slot.djo .layers:before{content:"kept open, flag up — for Djo";font:italic 14px var(--fell);color:var(--syrup-ink)}
.slot .n{position:absolute;right:16px;top:16px;font:600 12.5px var(--sans);color:#fff;background:var(--syrup-ink);padding:2px 9px;border-radius:999px}
.yt{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(18,50,74,.7),0 0 0 4px #fff;margin:20px 0}.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.take{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:2px dashed var(--faint)}.take .sil{width:30px;height:auto;aspect-ratio:40/82;flex:none}.take audio{height:34px;max-width:220px}

/* ---------- record ---------- */
.stage{text-align:center}.big{font:500 56px/1 var(--serif);min-height:60px;margin:6px 0}.big.pop{animation:pop .8s var(--spring)}@keyframes pop{0%{transform:scale(.3) rotate(-14deg);opacity:0}60%{transform:scale(1.15)}}
canvas#viz{width:100%;max-width:600px;height:60px;display:block;margin:6px auto}
.beat{position:relative;max-width:600px;margin:16px auto 22px;height:46px}.beat .track{position:absolute;left:0;right:0;top:20px;height:3px;border-radius:3px;background:var(--line)}
.beat .min{position:absolute;top:8px;bottom:8px;left:50%;border-left:2px dashed var(--syrup)}
.beat .tick{position:absolute;top:14px;width:2px;height:14px;background:rgba(18,50,74,.3)}.beat .tick.bar{height:22px;top:10px;background:rgba(18,50,74,.6)}
.beat .tick.hit{background:var(--syrup);box-shadow:0 0 8px var(--syrup)}.beat .head{position:absolute;top:6px;width:3px;height:30px;border-radius:3px;background:var(--syrup-ink);left:0;box-shadow:0 0 12px var(--syrup)}
.beat .lab{position:absolute;top:34px;font:italic 13px var(--fell);color:var(--mute);transform:translateX(-50%)}
.pulse{width:16px;height:16px;border-radius:50%;margin:0 auto;background:var(--syrup);opacity:.25;transition:opacity .08s,transform .12s}.pulse.on{opacity:1;transform:scale(1.4);box-shadow:0 0 20px 6px rgba(255,93,143,.5)}
.btn.rec{border-color:var(--rec);color:var(--rec);box-shadow:0 4px 0 var(--rec);padding:16px 34px;font-size:15px}.btn.rec.on{background:var(--rec);color:#fff;animation:recp 1.2s infinite}@keyframes recp{50%{transform:scale(1.05)}}
.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:italic 16px var(--fell);color:var(--ink);margin:0}.toggle input{display:none}
.toggle span{width:42px;height:24px;border-radius:24px;background:var(--line);position:relative;transition:background .3s}.toggle span:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(18,50,74,.3);transition:transform .4s var(--spring)}
.toggle input:checked+span{background:var(--sea)}.toggle input:checked+span:after{transform:translateX(18px)}
.err{color:#c2362b;min-height:1.4em;font-size:14px;font-weight:500}

/* ---------- reward ---------- */
.reward{text-align:center}.toast{width:190px;margin:0 auto;color:var(--ink)}.toast svg{width:100%;display:block;overflow:visible}
.toast .fig{animation:cheer 1.1s .4s var(--spring) 2}@keyframes cheer{40%{transform:translateY(-70px)}}
.love{font:italic 23px/1.4 var(--fell);margin:18px auto;max-width:520px;animation:rise .9s var(--spring) both}.love small{display:block;font:600 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.card-img{max-width:100%;width:420px;border-radius:18px;box-shadow:0 30px 60px -24px rgba(18,50,74,.6),0 0 0 4px #fff;margin:20px auto;display:block;transition:transform .5s var(--spring)}.card-img:hover{transform:rotate(-2deg) scale(1.02)}
.copied{font:italic 15px var(--fell);color:var(--syrup-ink);min-height:1.2em}

/* ---------- badges ---------- */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:16px;perspective:700px}
.bdg{text-align:center;padding:16px 10px;border-radius:16px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 10px 24px -18px rgba(18,50,74,.6);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s var(--ease)}
.bdg:hover{transition:transform .08s linear}
.bdg svg{width:42px;height:42px;color:var(--syrup-ink);transition:transform .6s var(--spring)}.bdg:hover svg{transform:rotate(-12deg) scale(1.15)}
.bdg b{display:block;font:500 16px var(--serif);margin-top:6px}.bdg small{font-size:12px}
.bdg.locked{opacity:.5}.bdg.locked svg{color:var(--mute)}.bdg.new{animation:pop .9s var(--spring) both;box-shadow:inset 0 0 0 2px var(--syrup)}

/* ---------- crew ---------- */
.search{max-width:420px;margin:10px 0 26px}.roster{columns:2 320px;column-gap:40px}
.mate{break-inside:avoid;display:flex;gap:14px;padding:14px 10px;border-radius:14px;border-bottom:2px dashed var(--faint);align-items:flex-start;transition:background .3s,transform .4s var(--spring)}
.mate:hover{background:rgba(255,255,255,.6);transform:translateX(6px)}
.mate .sil{width:30px;height:auto;aspect-ratio:40/82;flex:none;align-self:flex-start;margin-top:4px}.mate b{font:500 18px var(--serif)}.mate .no{font:italic 14px var(--fell);color:var(--syrup-ink)}
.mate p{margin:2px 0 0;color:#24485f;font-size:14px}.mate a{font-size:12.5px;color:var(--sea2);font-weight:500}
.take .sil svg,.mate .sil svg{width:100%;height:100%}
.take .sil .lamp,.mate .sil .lamp{top:-9px;width:5px;height:5px;margin-left:-2.5px}

footer{max-width:980px;margin:auto;padding:30px clamp(18px,5vw,48px) 160px;color:var(--mute);font-size:12.5px;text-align:center;line-height:1.9;position:relative;z-index:2}footer a{color:var(--sea2)}
.rope{height:8px;margin:0 auto 22px;max-width:360px;background:repeating-linear-gradient(60deg,#e9c58b 0 4px,#c99a5b 4px 8px);border-radius:4px;animation:rope 4s linear infinite}
.dot{position:fixed;border-radius:50%;pointer-events:none;z-index:60;animation:spark 1s var(--ease) forwards}@keyframes spark{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
.rule{display:flex;align-items:center;gap:14px;color:var(--mute);font:italic 15px var(--fell);margin:46px 0 6px}.rule:before,.rule:after{content:"";flex:1;height:2px;border-radius:2px;background:var(--line)}
.knot{width:18px;height:18px;color:var(--syrup-ink)}

/* scroll reveal (individual translate/scale so card tilt transforms still work) */
.rv{opacity:0;translate:0 30px;scale:.96}
.rv.in{opacity:1;translate:0 0;scale:1;transition:opacity .7s var(--ease) var(--rd,0s),translate .8s var(--spring) var(--rd,0s),scale .8s var(--spring) var(--rd,0s),transform .4s var(--ease),box-shadow .3s,background .3s}

.btn:focus-visible,a:focus-visible,.play:focus-visible{outline:3px solid var(--syrup);outline-offset:4px}

@media (max-width:720px){.sea{height:80px}header{flex-direction:column;gap:14px}.logo em{display:none}
 .hero{grid-template-columns:1fr;text-align:left}.hero #hero{max-width:250px;margin:0 auto}.hero .go{gap:18px}.play{width:92px;height:92px}
 .sun{width:100px;height:100px;top:120px;right:4%}.sun .disc{inset:26px}.sil{width:34px;height:66px}.take audio{max-width:150px}main{padding-top:14px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rv{opacity:1;translate:none;scale:none}}

/* about / credits page */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}.toc button{font:600 12.5px var(--sans);color:var(--ink);background:rgba(255,255,255,.65);border:0;border-radius:999px;padding:8px 14px;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line);transition:background .3s,transform .3s var(--spring)}
.toc button:hover{background:#fff;transform:translateY(-2px)}
.doc{scroll-margin-top:20px;padding-block:26px}.doc h2{font-size:24px}.doc p,.doc li{color:#24485f;max-width:68ch}.doc ul{padding-left:1.2em;margin:.4em 0}.doc li{margin:.35em 0}.doc a{color:var(--sea2);font-weight:500}
.doc .cols{columns:2 240px;column-gap:28px}