/* Home: the living rabbit, the word slot machine, product scenes. Tokens from base.css only. */
:root{--word:var(--m-700);--rabbit:var(--m-400);--slot-bg:var(--m-100);--gold:#A0710A}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100dvh - 64px);overflow:hidden}
.nav--wide .wrap{max-width:none;padding:0 6vw}
.copy{position:absolute;left:6vw;top:12vh;max-width:min(56vw,860px);z-index:2}
.copy .display{font-size:clamp(56px,5.6vw,88px)}
.copy .sub{margin-top:22px;font-size:16px;color:var(--text-2);max-width:52ch;white-space:nowrap}
.nowrap{white-space:nowrap}

/* the slot window: always there, tinted by the word, fixed to the longest word */
.slot{display:inline-block;vertical-align:bottom;height:1.28em;overflow:hidden;position:relative;text-align:left;background:var(--slot-bg);border-radius:.12em;padding:0 .14em;box-sizing:content-box;
  box-shadow:inset 0 .14em .12em -.1em rgba(59,55,50,.22),inset 0 -.14em .12em -.1em rgba(59,55,50,.22),inset 0 0 0 1px rgba(59,55,50,.06);transition:background .45s var(--ease)}
.slot .reel{display:block}
.slot.is-spinning .reel{will-change:transform}
.hero .slot.is-spinning,.hero .slot.is-spinning::after{animation-play-state:paused}
.hero.is-paused *,.hero.is-paused *::before,.hero.is-paused *::after{animation-play-state:paused!important}
.hero.hero--compact .slot,.hero.hero--compact .slot::after{animation:none}
.slot .word{display:flex;align-items:baseline;gap:.04em;height:1.28em;line-height:1.28;white-space:nowrap}
.slot .word .dot--icon{display:inline-block;width:.34em;height:.34em;transform:translateY(.02em)}
.slot .word .dot--icon svg{display:block;width:100%;height:100%}
.slot.is-landed .word{animation:land .45s var(--ease)}
@keyframes land{0%{transform:translateY(-.08em)}55%{transform:translateY(.05em)}100%{transform:none}}

/* the lever: pulled toward you (the stick foreshortens, the knob drops and grows) */
.lever{display:inline-block;vertical-align:bottom;font-size:inherit;width:.46em;height:1.28em;margin-left:.16em;padding:0;position:relative;line-height:1}
.lever svg{width:100%;height:100%;overflow:visible}
/* Move the HTML layers, so SVG geometry does not need layout on every pull frame. */
.lever__art{position:absolute;left:0;top:.16em;width:.46em;height:.96em;pointer-events:none}
.lever__art svg{display:block}
.lever__stick{transform-origin:50% 100%;transition:transform .18s var(--ease)}
.lever__knob{transform-origin:50% 50%;transition:transform .18s var(--ease)}
.lever:hover .lever__knob{transform:translateY(.04em) scale(1.06)}
.lever.is-pulled .lever__stick{animation:pull-stick .7s var(--ease);will-change:transform}
.lever.is-pulled .lever__knob{animation:pull-knob .7s var(--ease);will-change:transform}
@keyframes pull-stick{0%{transform:scaleY(1)}30%{transform:scaleY(.22)}65%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}
@keyframes pull-knob{0%{transform:translateY(0) scale(1)}30%{transform:translateY(.46em) scale(1.55)}65%{transform:translateY(-.03em) scale(.98)}100%{transform:translateY(0) scale(1)}}
/* the keycap keyring that hangs on the lever (clicky) */
.lever .keyring{position:absolute;left:30%;top:80%;width:.62em;height:.95em;overflow:visible;transform-origin:15% 9%;animation:swing 2.8s ease-in-out infinite;pointer-events:auto;cursor:pointer}
.copy .sub{transition:margin-top .4s var(--ease)}.copy.has-keyring .sub{margin-top:calc(22px + .65em)}
.lever.is-pulled .keyring{animation:swing-hard 1s ease-out}
.lever .keyring .cap{transition:transform .08s}.lever .keyring.is-pressed .cap{transform:translateY(14px)}
@keyframes swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes swing-hard{0%{transform:rotate(0)}30%{transform:rotate(30deg)}60%{transform:rotate(-16deg)}100%{transform:rotate(0)}}
/* rarity: a tag by the lever, a light sweeping across rare windows, a soft holographic wash on epic ones */
.tiers{display:inline-flex;vertical-align:top;align-items:flex-start;gap:.11em;margin:.2em 0 0 .34em}
.tier{display:inline-block;font:600 11px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--word);border:1.5px solid currentColor;border-radius:var(--r-pill);padding:5px 8px 6px;white-space:nowrap}
.tier[data-tier="epic"]{background:var(--word);color:var(--bg)}
.tier--new{color:var(--gold);border-style:solid}
.slot[data-tier="rare"]::after,.slot[data-tier="epic"]::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%) no-repeat;background-size:250% 100%;animation:shimmer 3.4s ease-in-out infinite;pointer-events:none}
@keyframes shimmer{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
.slot[data-tier="epic"]{background-image:linear-gradient(120deg,var(--slot-bg),color-mix(in srgb,#ffd3e8 55%,var(--slot-bg)),color-mix(in srgb,#d3f0ff 55%,var(--slot-bg)),color-mix(in srgb,#fff2c9 55%,var(--slot-bg)),var(--slot-bg));background-size:300% 100%;animation:holo 7s linear infinite}
@keyframes holo{to{background-position:300% 0}}
:root[data-face="pixel"] .copy .display{font-family:var(--font-pixel);font-weight:400;letter-spacing:0;line-height:1.12;font-size:clamp(42px,4.3vw,68px)}
.go{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;font-weight:500;color:var(--word);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1.5px;transition:text-decoration-color var(--dur) var(--ease)}
.go img{width:22px;height:22px;border-radius:6px}
.go__a{transition:transform .18s var(--ease)}
.go:hover{text-decoration-color:currentColor}.go:hover .go__a{transform:translateX(3px)}
.go.pop{animation:pop .5s var(--ease) both}

/* the rabbit and the wordmark, both painted with the word's colour */
.brandwrap{position:absolute;right:6vw;bottom:14vh;width:min(45vw,700px);aspect-ratio:3334/1370;z-index:1}
.brandart{position:absolute;inset:0;touch-action:none;z-index:1}
.brandart .rab{cursor:pointer}
.hero--compact .brandart{touch-action:pan-y}
.hero--compact .pc.word{pointer-events:none;will-change:auto}
.hero--compact .acc,.hero--compact .pts{display:none}
.pc{position:absolute;will-change:transform;background:var(--rabbit);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.pc.word{cursor:grab}.pc.word.drag{cursor:grabbing;z-index:6}
/* eye shapes: an svg over each eye piece, in the rabbit colour, the logo's stroke weight */
.eye-alt{position:absolute;left:50%;top:50%;width:250%;height:348%;transform:translate(-50%,-50%);overflow:visible;display:none;pointer-events:none}
.pc.is-alt{-webkit-mask:none;mask:none;background:none}.pc.is-alt .eye-alt{display:block}
.pc.is-big{transition:transform .2s var(--ease)}
.acc{position:absolute;inset:0;pointer-events:none;transform:translate(var(--ax,0),var(--ay,0));z-index:2}
.acc--back{z-index:0}
.pts{position:absolute;inset:0;pointer-events:none;z-index:3}
.pt{position:absolute;will-change:transform}.pt svg{display:block;width:100%;height:100%;overflow:visible}
.acc .ac{position:absolute;display:block}
.acc .ac.hit{pointer-events:auto;cursor:pointer;touch-action:pan-y}
.acc .ac.pop{animation:pop .5s var(--ease) both}
.acc svg.ac{overflow:visible}
.acc .ac.carry{transition:left .5s var(--ease),top .5s var(--ease)}
.acc .ac.is-carried{transition:none;z-index:9}
.acc .ac[data-prop="ball"]{cursor:grab;z-index:8;will-change:transform}
.acc .ac.is-gone{visibility:hidden}
.acc .shard{animation:shards .9s ease-out both;transform-origin:center}
@keyframes shards{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.5) translateY(-40px);opacity:0}}
.acc [data-prop="hoop"].is-scored .score{animation:scoreup 1.1s var(--ease)}
@keyframes scoreup{0%{opacity:0;transform:translateY(24px)}25%{opacity:1}100%{opacity:0;transform:translateY(-70px)}}
.acc [data-prop="hoop"].is-scored .net{animation:swish .5s var(--ease)}
@keyframes swish{40%{transform:translateY(22px) scaleX(.94)}}
.acc .ac.is-hopping{animation:hop .5s var(--ease)}
@keyframes hop{35%{transform:translateY(-14%)}}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
.nm-sweat{position:absolute;color:var(--rabbit);font:700 clamp(21px,2.2vw,34px) ui-monospace,monospace;pointer-events:none;z-index:7;animation:nm-sweatdrop 1.95s ease-out forwards}
@keyframes nm-sweatdrop{0%{opacity:0;transform:translate(0,0) scale(.6)}14%{opacity:.95;transform:translate(4px,-3px) scale(1)}100%{opacity:0;transform:translate(34px,-16px) scale(1.05)}}
.confetti{position:fixed;width:10px;height:6px;border-radius:2px;pointer-events:none;z-index:50;animation:confetti 1.6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
/* prop reactions */
.ac.is-pressed{transform:scale(.9)!important;transition:transform .08s}
.ac .steam{opacity:0}.ac.is-steaming .steam{animation:steam .9s ease-out}
@keyframes steam{0%{opacity:0;transform:translateY(0)}30%{opacity:.8}100%{opacity:0;transform:translateY(-60px)}}
.ac.is-swaying{animation:sway .9s var(--ease)}
@keyframes sway{0%{transform:rotate(0)}25%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}100%{transform:rotate(0)}}
.ac .rays{transform-origin:50% 50%}.ac.is-spinning .rays{animation:rays 1.2s var(--ease)}
@keyframes rays{to{transform:rotate(360deg)}}
.ac.is-dropping{animation:drop .9s var(--ease)}
@keyframes drop{0%{transform:rotate(0)}30%{transform:translateY(40px) rotate(-25deg)}70%{transform:translateY(20px) rotate(12deg)}100%{transform:rotate(0)}}
.ac.is-twinkling polygon{animation:twinkle .9s var(--ease)}
@keyframes twinkle{50%{transform:scale(1.4);transform-origin:center;opacity:.5}}
.ac.is-unrolling .scroll-body{transform-origin:left center;animation:unroll .8s var(--ease)}
@keyframes unroll{0%{transform:scaleX(.25)}100%{transform:scaleX(1)}}
.ac.is-glowing .halo{animation:glow 1.2s var(--ease)}
@keyframes glow{50%{opacity:1;transform:scale(1.15);transform-origin:center}}
.ac.is-flickering .screen-text{animation:flicker .9s steps(6)}
@keyframes flicker{0%,40%,80%{opacity:0}20%,60%,100%{opacity:1}}
.ac.is-playing .note{animation:bob .5s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-18px)}}
.ac .tear{animation:teardrop 1.7s ease-in infinite}.ac .tear.t2{animation-delay:.8s}
@keyframes teardrop{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(200px);opacity:0}}
.ac.is-swinging .beam{animation:swing-beam 1.4s var(--ease)}.ac.is-swinging .beam polygon{animation:flicker .6s steps(4)}
@keyframes swing-beam{25%{transform:rotate(-6deg)}60%{transform:rotate(5deg)}}
.ac.is-spinning .prop,.ac.is-spinning .leaves{animation:rays .9s var(--ease)}
.ac.is-tilting .ring-tilt{animation:tilt 1.2s var(--ease)}
@keyframes tilt{50%{transform:scaleY(-.6)}}
.ac .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flame .6s ease-in-out infinite alternate}.ac.is-out .flame{opacity:0}
@keyframes flame{to{transform:scaleY(.86) scaleX(1.1)}}
.ac .fire{transition:transform .25s var(--ease)}.ac.is-stoked .fire{animation:stoke .7s var(--ease)}
@keyframes stoke{35%{transform:scale(1.18,1.3)}}
.ac.is-tugged{animation:tug .8s var(--ease)}
@keyframes tug{30%{transform:translateY(-9%)}}
.ac.is-sliding{animation:slide .7s var(--ease)}
@keyframes slide{35%{transform:translateY(12%)}}
.ac.is-lifting{transform-box:fill-box;transform-origin:50% 0;animation:lift .8s var(--ease)}
@keyframes lift{35%{transform:translateY(-18%) rotate(-8deg)}}
.ac.is-scanning rect:first-of-type{animation:flicker .6s steps(4)}
.ac.is-bopping{transform-box:fill-box;transform-origin:50% 100%;animation:bop .7s var(--ease)}
@keyframes bop{25%{transform:rotate(-12deg)}60%{transform:rotate(10deg)}}
.ac.is-tipping{transform-box:fill-box;transform-origin:20% 60%;animation:tip .8s var(--ease)}.ac.is-tipping .tassel{animation:swing-hard .9s ease-out}
@keyframes tip{35%{transform:rotate(-10deg) translateY(-4%)}}
.ac.is-wiggling{transform-box:fill-box;transform-origin:50% 0;animation:wiggle .6s var(--ease)}
@keyframes wiggle{25%{transform:scaleY(1.25) rotate(-6deg)}60%{transform:scaleY(1.1) rotate(6deg)}}
.ac.is-sobbing .tear{animation-duration:.55s}
.ac.is-rippling{animation:ripple .8s var(--ease)}
@keyframes ripple{25%{transform:translateX(-4%)}60%{transform:translateX(4%)}}
.acc--back .ac[data-prop="court"]{cursor:crosshair}
.ac .neon-text{filter:drop-shadow(0 0 6px #3AF0FF)}.ac .neon-frame{filter:drop-shadow(0 0 6px #FF3AD6)}.ac.is-off .neon-text,.ac.is-off .neon-frame{opacity:.25;filter:none}
.ac .bite{opacity:0}.ac[data-bites="1"] .b1{opacity:1}.ac[data-bites="2"] .b1,.ac[data-bites="2"] .b2{opacity:1}.ac[data-bites="3"] .b1,.ac[data-bites="3"] .b2,.ac[data-bites="3"] .b3{opacity:1}

/* the cursor: a brand sparkle that becomes a hand over the loose letters */
.hero.has-cursor,.hero.has-cursor *{cursor:none}
.cursor{position:fixed;left:0;top:0;width:48px;height:48px;margin:-24px 0 0 -24px;pointer-events:none;z-index:70;opacity:0;transition:opacity .15s;color:var(--word);filter:drop-shadow(0 2px 4px rgba(59,55,50,.18))}
.cursor.is-on{opacity:1}
.cursor svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .12s,transform .18s var(--ease)}
.cursor .c-spark{opacity:1}.cursor .c-hand,.cursor .c-grab,.cursor .c-pull,.cursor .c-tap{opacity:0;transform:scale(.6)}
.cursor[data-state="hand"] .c-spark{opacity:0;transform:scale(.6)}.cursor[data-state="hand"] .c-hand{opacity:1;transform:scale(1)}
.cursor[data-state="grab"] .c-spark{opacity:0}.cursor[data-state="grab"] .c-grab{opacity:1;transform:scale(1)}
.cursor[data-state="pull"] .c-spark{opacity:0}.cursor[data-state="pull"] .c-pull{opacity:1;transform:scale(1)}
.cursor[data-state="tap"] .c-spark{opacity:0}.cursor[data-state="tap"] .c-tap{opacity:1;transform:scale(1)}

.corner{position:absolute;bottom:40px;font-size:13px;color:var(--text-2);z-index:2}
.corner--left{left:6vw;display:flex;align-items:center;gap:18px}
.wordsbtn{font:inherit;color:var(--text-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:transparent;transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease)}
.wordsbtn:hover{color:var(--text-1);text-decoration-color:currentColor}
.corner--right{right:calc(6vw - 14px);width:44px;height:44px;display:grid;place-items:center;color:var(--text-1);border-radius:var(--r-pill);transition:background var(--dur) var(--ease)}
.corner--right:hover{background:var(--surface)}
.corner--right svg{width:16px;height:22px}

/* ---------- the collection: words found so far, the rest as ??? ---------- */
.words{margin:auto;border:none;border-radius:var(--r-tile);background:var(--bg);color:var(--text-1);padding:30px 34px 34px;width:min(92vw,640px);box-shadow:0 30px 80px rgba(36,33,29,.18)}
.words::backdrop{background:rgba(36,33,29,.35);backdrop-filter:blur(4px)}
.words__head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.words__head h2{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.02em}
.words__head p{color:var(--text-2);font-size:14px}
.words__close{margin-left:auto;width:36px;height:36px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--text-2);align-self:center}.words__close:hover{background:var(--surface);color:var(--text-1)}
.words__row{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.words__tier{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--n-500);padding-top:7px}
.words__list{list-style:none;display:flex;flex-wrap:wrap;gap:4px 20px}
.wd{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.35}
.wd--unknown{color:var(--n-400)}
button.wd{padding:0;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1.5px;transition:text-decoration-color var(--dur) var(--ease)}button.wd:hover,button.wd.is-now{text-decoration-color:currentColor}

/* ---------- cyberpunk: the whole page goes dark and neon while the word is up ---------- */
:root[data-theme="cyber"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 5px)}
:root[data-theme="cyber"] .slot .word{text-shadow:0 0 12px color-mix(in srgb,var(--word) 55%,transparent)}
:root[data-theme="cyber"] .brandart{filter:drop-shadow(0 0 10px rgba(58,240,255,.4))}
:root[data-theme="cyber"] .cursor{filter:drop-shadow(0 0 6px currentColor)}
:root[data-theme="cyber"] .lever ellipse,:root[data-theme="cyber"] .lever .stick{fill:#A9A3D6}
:root[data-theme="cyber"] .words{box-shadow:0 30px 80px rgba(0,0,0,.5)}
:root[data-theme="cyber"] .slot[data-tier="epic"]{background-image:linear-gradient(120deg,var(--slot-bg),color-mix(in srgb,#4a1a44 70%,var(--slot-bg)),color-mix(in srgb,#0f3d4d 70%,var(--slot-bg)),var(--slot-bg))}
:root[data-theme="cyber"] .slot[data-tier="epic"]::after{background-image:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%)}

/* ---------- product scenes: a section label, tags, logo, a wordless stage, one button ---------- */
.sec{font:600 12px/1 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.sec b{font-weight:700;color:var(--accent)}
.scene{position:relative}
.scene__in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vh,30px);text-align:center}
.scene__head{display:flex;flex-direction:column;align-items:center;gap:12px}
.scene__logo img{height:clamp(49px,6.2vw,87px);width:auto;display:block}
.scene__logo--dopa img{height:clamp(53px,6.65vw,95px)}
.scene__act{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.replay{opacity:0}
.replay:disabled{opacity:.4;cursor:default}

/* Typer: a pinned viewport, scrubbed by scroll. A ball comes out of a portal, types TYPER, drops into another. */
.scene--typer{background:var(--m-100);--cta:var(--m-700);--cta-text:var(--n-50);--accent:var(--m-700);--surface-hover:var(--m-200)}
.scene--typer .scene__pin{position:relative;padding:clamp(64px,9vh,110px) 0}
.typer-stage{position:relative;width:min(100%,760px)}
.typer-stage .replay{position:absolute;top:calc(50% - 22px);left:calc(672 / 760 * 100% + 4px)}
.stage--typer{position:relative;width:min(100%,760px);aspect-ratio:760/320;margin:0 auto;overflow:hidden}
.portal,.lip{position:absolute;width:calc(68 / 760 * 100%);aspect-ratio:68/24;transform:translate(-50%,-50%);opacity:0;border-radius:50%;overflow:hidden}
.portal{z-index:2}
.lip{z-index:5}
/* two flat colours. The shaft is the same ellipse as the opening, shifted by the floor's
   thickness, so the wall reads as a crescent on the far side - not a cone bored at an angle */
.portal__wall,.portal__void{position:absolute;inset:0;border-radius:50%}
.portal__wall{background:var(--n-600)}
.portal__void{background:var(--n-900);transform:translateY(30%)}
.portal--in .portal__void,.lip--in .portal__void{transform:translateY(-30%)}   /* seen from below */
.lip--in{clip-path:inset(0 0 50% 0)}
.lip--out{clip-path:inset(50% 0 0 0)}
/* the slot line of a piggy bank. The ball is clipped, not covered: a notch bitten out of the
   top edge over the ceiling hole and out of the bottom edge over the floor one, so the ball is
   only ever drawn on the near side of each hole's middle. */
.ballclip{position:absolute;inset:0;z-index:3;pointer-events:none;
  clip-path:polygon(0% 0%, 13.42% 0%, 13.42% 5%, 23.42% 5%, 23.42% 0%, 100% 0%,
    100% 100%, 99.21% 100%, 99.21% 88.75%, 89.21% 88.75%, 89.21% 100%, 0% 100%)}
.portal--in,.lip--in{left:calc(140 / 760 * 100%);top:calc(16 / 320 * 100%)}
.portal--out,.lip--out{left:calc(716 / 760 * 100%);top:calc(284 / 320 * 100%)}
.stage--typer .cap{position:absolute;top:calc(108 / 320 * 100%);left:calc(var(--x) / 760 * 100%);width:calc(104 / 760 * 100%);aspect-ratio:1;margin-left:calc(-52 / 760 * 100%);background:url("assets/shop/keycap/5000_0.png") center/100% 100% no-repeat;z-index:2;display:grid;place-items:center;cursor:pointer;user-select:none;-webkit-user-select:none}
/* the icon sits at the centre of the cap's top face, not the centre of the sprite */
.stage--typer .cap b{position:absolute;left:50%;top:38.4%;transform:translate(-50%,-50%);display:grid;place-items:center;width:54%;height:54%;color:#7A5741;opacity:0}
.stage--typer .cap b svg{width:100%;height:100%;display:block;fill:currentColor;stroke:none;overflow:visible}
.stage--typer .cap b svg text{font:900 9.8px/1 var(--font-ui);letter-spacing:-.02em;fill:currentColor}
.stage--typer .cap.is-hit{animation:capHit .2s var(--ease)}
@keyframes capHit{45%{transform:translateY(6%) scale(.965)}}
.stage--typer .ball{position:absolute;left:0;top:0;width:calc(34 / 760 * 100%);aspect-ratio:1;visibility:hidden;will-change:transform}

/* Dopamine University: shapes keep arriving, crowd toward the middle and go. */
.scene--dopa{padding:clamp(96px,14vh,150px) 0;background:var(--c-100);--accent:var(--c-600);--accent-strong:var(--c-700);--cta:var(--c-400);--cta-text:#fff}
.scene--dopa .scene__in{gap:clamp(20px,3.4vh,34px)}
.blobs{width:min(100%,440px);aspect-ratio:5/4;margin:0 auto}
.blobs canvas{display:block}
.scene-line{font-size:clamp(19px,2.2vw,28px);font-weight:700;letter-spacing:-.01em;color:var(--text-display);max-width:38ch;text-wrap:balance}

/* ---------- the studio: the two of us running, with whatever comes at us ---------- */
.studio{padding:clamp(60px,8vh,92px) 0 clamp(30px,4vh,52px)}
.studio__top{display:flex;flex-direction:column;align-items:center;gap:12px}
.studio + .foot{margin-top:clamp(24px,4vh,48px)}
.studio__title{font-family:var(--font-display);font-size:clamp(26px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;color:var(--text-display)}
.run{position:relative;height:clamp(280px,30vw,342px);margin:clamp(10px,2vh,20px) 0;overflow:hidden}
.run__crew{position:absolute;left:clamp(16px,7%,130px);bottom:62px;z-index:2}
.runner{position:absolute;left:0;bottom:0;width:clamp(132px,13vw,182px);will-change:transform}
.runner__art{position:relative;width:100%;aspect-ratio:1854/885}
.rb{position:absolute;background:var(--fur,var(--m-400));-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.rb--face{transform:translateX(-16%)}
.runner--ceo,.crew[data-who="ceo"]{--fur:#A6B865;--rim:#7D8F46}      /* olive */
.runner--cto,.crew[data-who="cto"]{--fur:#F49E5C;--rim:#D2783A}      /* apricot */
.rb-glass{position:absolute;left:24.3%;top:43.6%;width:41%;height:34.4%;pointer-events:none}
.rb-glass svg{width:100%;height:100%;display:block;overflow:visible}
.runner{cursor:pointer}
.runner:focus-visible{outline:2px solid var(--rim);outline-offset:6px;border-radius:8px}
/* just the role and the name, floating over the head */
.runner__tag{position:absolute;left:50%;top:-30px;z-index:2;transform:translateX(-50%);
  display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.runner__tag b{font:700 9px/1 var(--font-ui);letter-spacing:.18em;color:var(--rim,var(--m-700))}
.runner__tag span{font:700 12.5px/1 var(--font-ui);letter-spacing:-.01em;color:var(--text-1)}
.run__obs{position:absolute;inset:0;z-index:1}
.ob{position:absolute;bottom:62px;left:0;will-change:transform}
.ob svg,.ob img{display:block;width:100%;height:auto;overflow:visible}
.ob--coral{--ob-a:var(--c-300);--ob-b:var(--c-700)}
.ob--mint{--ob-a:var(--m-300);--ob-b:var(--m-800)}
.ob--sand{--ob-a:var(--n-300);--ob-b:var(--n-700)}
.ob--gold{--ob-a:#F4CE7A;--ob-b:var(--gold)}

@media (max-width:720px){
  /* Keep a full first screen without resizing the scene as browser chrome retracts. */
  .hero{min-height:calc(100svh - 64px);display:flex;flex-direction:column;gap:clamp(28px,5svh,48px);padding:clamp(32px,6svh,56px) 20px max(24px,env(safe-area-inset-bottom))}
  .copy{position:static;max-width:none}.copy .display{font-size:clamp(33px,9.4vw,44px)}
  .copy .sub{white-space:normal;margin-top:14px;font-size:15px}
  .copy.has-keyring .sub{margin-top:calc(14px + .65em)}
  .go{margin-top:14px;font-size:14px}
  .tiers{flex-direction:column;gap:5px;margin:.18em 0 0 .24em}
  .tier{font-size:9px;letter-spacing:.06em;padding:3px 6px 4px;border-width:1.2px}
  .nav--wide .wrap{padding:0 22px}
  .brandwrap{position:relative;right:auto;bottom:auto;flex:none;align-self:flex-end;width:min(72vw,280px);max-width:100%;margin:auto -2px 0 auto}
  .bottom{display:flex;justify-content:space-between;align-items:end;margin-top:clamp(12px,3svh,28px)}.corner{position:static}
  .words__row{grid-template-columns:1fr;gap:6px}.wd{font-size:19px}
  :root[data-face="pixel"] .copy .display{font-size:clamp(26px,7.2vw,34px)}
  .scene-line{font-size:19px}
  .scene--dopa{padding:72px 0}
  .sec{font-size:11px;letter-spacing:.16em}
  .studio{padding:72px 0 56px}
  .run{height:256px}
  .run__crew{left:12px;gap:6px}
  .runner{width:114px}
}
@media (prefers-reduced-motion:reduce){.lever__stick,.lever__knob,.slot,.cursor svg{transition:none;animation:none}.hero .lever__art,.hero .ac,.hero .ac *,.hero .slot .word,.hero .slot::after,.hero .keyring,.acc .ac.pop,.confetti,.go.pop{animation:none!important}.replay{opacity:1}}

/* ---------- who made it: one card per rabbit ---------- */
.crew{margin:auto;border:none;padding:0;background:none;max-width:min(92vw,360px)}
.crew::backdrop{background:rgba(36,33,29,.34);backdrop-filter:blur(3px)}
.crew__in{position:relative;overflow:hidden;background:var(--bg);border:1.5px solid var(--fur,var(--m-400));border-radius:var(--r-tile);
  padding:24px 26px 26px;text-align:center}
.crew__close{position:absolute;z-index:2;right:12px;top:12px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--text-2)}
.crew__close svg{width:17px;height:17px}
.crew__close:hover{background:var(--surface);color:var(--text-1)}
.crew__art{position:relative;transform:scaleX(-1);width:162px;aspect-ratio:1854/885;margin:0 auto 14px}
.crew__role{font:700 10px/1 var(--font-ui);letter-spacing:.24em;color:var(--rim,var(--m-700))}
.crew__name{margin-top:8px;font-family:var(--font-display);font-size:27px;font-weight:700;letter-spacing:-.02em;color:var(--text-display)}
.crew__nick{margin-top:3px;font-size:13.5px;font-weight:600;color:var(--text-2)}
.crew__list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;text-align:left}
.crew__list li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.45;color:var(--text-1)}
.crew__list li::before{content:"";position:absolute;left:4px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--fur,var(--m-400))}
@media (max-width:720px){.crew__in{padding:20px 22px 22px}.crew__art{width:138px}.crew__name{font-size:24px}}