/* WARE, mascot edition. The page lives in the mascot's studio: warm cyclorama
   light (baked by ware.js), ink type, one accent taken from the mascot's glow.
   styles.css is the base layer underneath.
   Shape rule: interactive = pill, media = 28px, icons = 22%. */
:root{--w-cream:#ebe5dd;--w-ink:#171614;--w-ink-2:#3b3834;--w-muted:#6f6a64;--w-line:rgba(23,22,20,.13);--w-ice:#a9e1ff;--w-ice-deep:#2e8ccc;--w-graphite:#0e1317;--w-gutter:clamp(20px,4.6vw,96px)}
html{color-scheme:light}
body[data-experience=ware]{background:var(--w-cream);color:var(--w-ink);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
body[data-experience=ware] main{background:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* Studio (ware.js bakes the window light): cyclorama, light, floor, bloom, dimming. */
.environment{isolation:isolate;--tone:0;background:linear-gradient(to top left,#e8dfd3 0%,#ebe2d7 15%,#efe7dd 30%,#f4ece3 45%,#f8f2e9 60%,#fcf6ed 75%,#fef8f0 90%)}
.studio-light{position:absolute;left:0;top:0;transform-origin:0 0;mix-blend-mode:multiply;will-change:transform}
.environment:before{content:"";display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.045),rgba(0,0,0,.03) 12%,rgba(0,0,0,0) 35%);opacity:1}
.studio-glow{position:absolute;left:0;top:0;z-index:2;width:100vh;height:100vh;margin:-50vh 0 0 -50vh;border-radius:50%;background:radial-gradient(closest-side,rgba(107,168,230,.075),rgba(107,168,230,.064) 20%,rgba(107,168,230,.04) 40%,rgba(107,168,230,.018) 60%,rgba(107,168,230,.006) 80%,rgba(107,168,230,0));mix-blend-mode:plus-lighter;opacity:0;transition:opacity .4s;will-change:transform}
.environment:after{content:"";position:absolute;inset:0;z-index:3;background:#000;opacity:calc(var(--tone)*.1)}
::selection{background:var(--w-ice);color:var(--w-ink)}
section{position:relative;z-index:1}
:focus-visible{outline-color:var(--w-ink)!important}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .12em;margin:0 -.03em -.12em}
.w>i{display:inline-block;font-style:normal}
.glyph{width:22px;height:17px;flex:none}
/* Loader: ink curtain lifting off the studio. */
.loader{color:var(--w-cream)}
.loader-panels i{background:var(--w-ink)}
/* Pills: one shape for every action. */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 26px;border-radius:999px;font-size:clamp(14px,.95vw,19px);white-space:nowrap;position:relative;transition:transform .45s var(--ease),background .35s,color .35s,border-color .35s}
.pill>*{position:relative;z-index:3}
.pill.primary,.invite-link.pill{margin:0;max-width:none;min-width:0;border:1px solid var(--w-ink);background:var(--w-ink);color:var(--w-cream);flex-direction:row}
.pill.primary>span:last-child{font-size:18px;transition:transform .35s var(--ease)}
.pill.primary:hover{background:#000}
.pill.primary:hover>span:last-child{transform:translate(2px,-2px)}
.pill.ghost,.hero-action.pill{border:1px solid rgba(23,22,20,.28);background:rgba(255,255,255,.18);color:var(--w-ink);min-width:0;box-shadow:none}
.pill.ghost:hover{border-color:var(--w-ink);background:rgba(255,255,255,.4)}
.pill.ghost>span:last-child{transition:transform .45s var(--ease)}
.pill.ghost:hover>span:last-child{transform:translateY(3px)}
.pill:active{transform:translateY(1px) scale(.99)}
/* Hero: the mascot stands in front of the wordmark, as the ridge once did. */
.hero{height:175svh}
.hero>.frame{position:sticky;top:0;height:100svh;overflow:hidden}
.wordmark{position:absolute;left:0;right:0;top:max(124px,15svh);display:flex;justify-content:center;font-size:min(29vw,60svh);font-weight:900;letter-spacing:-.065em;line-height:.8;color:var(--w-ink);margin:0;padding-right:.06em;white-space:nowrap;user-select:none}
.wordmark span{display:inline-block;will-change:transform}
.mascot{position:absolute;margin:0;aspect-ratio:709/995;--px:0px;--py:0px;--blink:1}
.mascot-body{position:relative;width:100%;height:100%;transform-origin:50% 100%}
.mascot-body img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.pupil{position:absolute;width:6.6%;aspect-ratio:1;border-radius:50%;background:#1e1b19;transform:translate(-50%,-50%) translate(var(--px),var(--py)) scaleY(var(--blink));box-shadow:inset 0 -1px 2px rgba(255,255,255,.12)}
.pupil:nth-of-type(1){left:34.26%;top:43.38%}
.pupil:nth-of-type(2){left:68.09%;top:43.58%}
.glow{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(190,236,255,.95),rgba(110,196,255,.45) 34%,rgba(110,196,255,0) 70%)}
.tip-glow{left:73.69%;top:8.2%;width:30%;aspect-ratio:1;opacity:.45}
.hero-mascot{left:0;right:0;margin:0 auto;bottom:4svh;height:min(66svh,88vw);cursor:pointer;pointer-events:auto}
.mascot-shadow{position:absolute;left:12%;right:12%;bottom:-2.2%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(70,52,34,.32),rgba(70,52,34,0));transform-origin:center}
.hero-copy{position:absolute;left:var(--w-gutter);bottom:max(7svh,calc(env(safe-area-inset-bottom,0px) + 24px));display:flex;flex-direction:column;align-items:flex-start;gap:22px;z-index:4}
.hero-sub{max-width:24ch}
.hero-sub{font-size:clamp(18px,1.45vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.2;text-wrap:balance}
.hero-actions{display:flex;gap:10px;flex-wrap:nowrap}
/* Statement: a paragraph that is read as you scroll, word by word. */
.statement{padding:clamp(120px,22svh,260px) var(--w-gutter) clamp(120px,24svh,280px)}
.statement-text{max-width:20ch;font-size:clamp(34px,5vw,112px);font-weight:500;letter-spacing:-.05em;line-height:1.02;text-wrap:pretty}
.statement-text .w>i{color:var(--w-ink)}
.fill-ready .statement-text .w>i{opacity:var(--o,.14)}
/* Film: the analysis, told as a short motion piece in a screening frame. */
.film{padding:0 var(--w-gutter) clamp(110px,18svh,220px)}
.film-head{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(36px,5svh,64px)}
.film #flow-title{font-size:clamp(52px,8vw,190px);font-weight:600;letter-spacing:-.065em;line-height:.9;margin:0;max-width:none;text-shadow:none}
.film-lead{font-size:clamp(17px,1.25vw,26px);color:var(--w-ink-2);max-width:32ch;line-height:1.35}
.film-frame{max-width:1520px;margin:0 auto}
.film-stage{position:relative;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#313338;box-shadow:0 50px 120px -30px rgba(66,44,24,.35),0 0 0 1px rgba(23,22,20,.08);transform-origin:50% 30%}
.film-svg{display:block;width:100%;height:100%}
.f-mono{font-family:ui-monospace,'Cascadia Mono','SF Mono',Consolas,monospace;letter-spacing:-.03em}
.f-word{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
.film-caption{position:absolute;left:calc(5.75% + clamp(14px,2vw,36px));top:clamp(16px,2.6vw,48px);height:1.1em;overflow:hidden;font-size:clamp(20px,2.6vw,56px);font-weight:600;letter-spacing:-.05em;line-height:1.1;color:#f2f3f5;--roll:0}
.film-caption .roll{transform:translate3d(0,calc(var(--roll)*-1.1em),0);transition:transform .9s var(--ease)}
.film-caption span{display:block;height:1.1em;white-space:nowrap}
.film-bar{display:flex;align-items:center;gap:clamp(14px,2vw,28px);margin-top:22px}
.film-toggle{flex:none;width:52px;height:52px;border-radius:999px;border:1px solid rgba(23,22,20,.28);display:grid;place-items:center;color:var(--w-ink);background:rgba(255,255,255,.2)}
.film-toggle svg{width:20px;height:20px}
.film-toggle .i-play{display:none}
.film-toggle[aria-pressed=true] .i-play{display:block}
.film-toggle[aria-pressed=true] .i-pause{display:none}
.film .flow-tabs{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,24px);padding:0;flex-wrap:nowrap}
.film .flow-tabs button{position:relative;text-align:left;padding:14px 0 16px;min-height:52px;font-size:clamp(13px,1vw,20px);color:var(--w-muted);border:0;border-top:1px solid var(--w-line);transition:color .3s}
.film .flow-tabs button[aria-selected=true]{color:var(--w-ink);border-color:var(--w-line)}
.film .flow-tabs button:hover{color:var(--w-ink)}
.tab-progress{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--w-ink);transform:scaleX(var(--p,0));transform-origin:left}
.film .report-stage{min-height:3em;margin-top:6px;padding:0;text-align:left;font-size:clamp(15px,1.05vw,22px);color:var(--w-ink-2);line-height:1.45}
.film .report-panel{max-width:46ch;margin:0}
/* Supported games: editorial index, the icon follows the reader's pointer. */
.games{padding:0 var(--w-gutter) clamp(110px,18svh,220px)}
.games h2{font-size:clamp(44px,6vw,150px);font-weight:600;letter-spacing:-.06em;line-height:.92;margin:0 0 clamp(30px,5svh,64px)}
.game-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--w-line)}
.game{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,2.4vw,40px);padding:clamp(18px,2.6svh,30px) 0;border-top:1px solid var(--w-line);position:relative}
/* Official logos on Discord's darkest surface: the white RIVALS mark needs it,
   and every game reads as an embed from the same app. */
.game-logo{position:relative;width:clamp(120px,12vw,220px);aspect-ratio:16/9;border-radius:14px;background:#1e1f22;display:grid;place-items:center;padding:10px 14px;box-shadow:0 14px 34px -16px rgba(30,31,34,.6),inset 0 0 0 1px rgba(255,255,255,.05)}
.game-logo img{width:100%;height:100%;object-fit:contain;display:block}
.game-name{font-size:clamp(30px,4.6vw,112px);font-weight:600;letter-spacing:-.055em;line-height:.98;transition:transform .6s var(--ease)}
.game-meta{font-size:clamp(12px,.9vw,18px);color:var(--w-muted);text-align:right}
.game:hover .game-name{transform:translateX(clamp(8px,1.2vw,22px))}
.game-float{position:fixed;left:0;top:0;width:clamp(260px,24vw,420px);aspect-ratio:16/9;border-radius:20px;overflow:hidden;pointer-events:none;z-index:6;opacity:0;transform:translate3d(-50%,-50%,0) scale(.6);background:#313338;padding:22px 28px;box-shadow:0 40px 80px -24px rgba(30,31,34,.55),inset 0 0 0 1px rgba(255,255,255,.06);display:none}
.game-float img{width:100%;height:100%;object-fit:contain;display:block}
@media(hover:hover) and (pointer:fine){.game-float{display:block}}
/* Commands: practical, typed in mono, beside the file they take. */
.commands{padding:0 var(--w-gutter) clamp(110px,18svh,220px)}
.commands-head{display:flex;align-items:center;gap:clamp(14px,1.6vw,32px);margin-bottom:clamp(36px,6svh,80px)}
.discord-mark{width:clamp(44px,4.4vw,110px);height:auto;aspect-ratio:4/3;color:var(--w-ink)}
.commands #join-title{font-size:clamp(44px,6vw,150px);font-weight:600;letter-spacing:-.06em;line-height:.92;margin:0;max-width:none}
.commands #join-title br{display:none}
.commands-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:auto 1fr;column-gap:clamp(30px,6vw,120px)}
.composer{grid-column:1;display:flex;align-items:center;flex-wrap:wrap;gap:clamp(14px,2vw,36px);padding-bottom:clamp(14px,1.6vw,26px);border-bottom:1px solid var(--w-ink)}
.composer-line{display:flex;align-items:center;min-height:1.1em;font:500 clamp(40px,5.4vw,150px)/1.05 ui-monospace,'Cascadia Mono','SF Mono',Consolas,monospace;letter-spacing:-.07em;white-space:nowrap}
.caret{display:inline-block;width:.07em;height:.86em;margin-left:.08em;background:var(--w-ice-deep);animation:caret 1.1s steps(2,jump-none) infinite}
@keyframes caret{0%{opacity:1}100%{opacity:0}}
.file-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border-radius:999px;border:1px solid rgba(23,22,20,.3);background:rgba(255,255,255,.35);font:500 clamp(13px,.95vw,20px)/1 ui-monospace,'Cascadia Mono',Consolas,monospace;color:var(--w-ink-2)}
.file-chip svg{width:1.4em;height:1.4em}
.commands .command-intro{grid-column:1;margin:20px 0 0;font-size:clamp(15px,1.05vw,22px);color:var(--w-ink-2);max-width:38ch;line-height:1.45}
.commands .command-guide{grid-column:2;grid-row:1/3;border-top:0;padding:0;align-self:start}
.commands .command-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0 20px 18px;border-top:1px solid var(--w-line);position:relative;cursor:default;transition:padding .45s var(--ease)}
.commands .command-row:before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:2px;background:var(--w-ink);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.commands .command-row.is-current{padding-left:28px}
.commands .command-row.is-current:before{transform:scaleY(1)}
.commands .command-row code{font:500 clamp(17px,1.3vw,28px)/1.3 ui-monospace,'Cascadia Mono',Consolas,monospace;color:var(--w-muted);letter-spacing:-.03em;transition:color .35s}
.commands .command-row.is-current code{color:var(--w-ink)}
.commands .command-row p{margin-top:6px;font-size:clamp(13px,.92vw,19px);color:var(--w-muted);line-height:1.45}
.commands .command-row.is-current p{color:var(--w-ink-2)}
.commands .copy-command{flex:none;width:46px;height:46px;border-radius:999px;border:1px solid rgba(23,22,20,.25);color:var(--w-ink);background:rgba(255,255,255,.3);font-size:20px}
.commands .copy-command:hover{border-color:var(--w-ink)}
.commands .command-note{border-top:1px solid var(--w-line);padding-top:16px;font-size:clamp(12px,.82vw,17px);color:var(--w-muted);line-height:1.55;max-width:none}
#copy-status{font-size:clamp(13px,.85vw,17px);color:var(--w-ink-2);min-height:1.5em;margin-top:8px}
/* Finale: the mascot rises into the close and looks at the invitation. */
.finale{min-height:100svh;padding:0 var(--w-gutter);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;overflow:hidden}
.finale-copy{padding-bottom:clamp(60px,14svh,160px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(24px,4svh,44px)}
.finale #finale-title{font-size:clamp(38px,4.6vw,120px);font-weight:600;letter-spacing:-.055em;line-height:1;max-width:16ch;margin:0;text-wrap:balance}
.finale-mascot{position:relative;justify-self:center;height:min(82svh,110vw);margin-bottom:-12svh}
body[data-experience=ware] footer{position:relative;z-index:3;background:transparent;border-top:1px solid var(--w-line);color:var(--w-muted)}
body[data-experience=ware] footer a{color:var(--w-ink);text-shadow:none;-webkit-text-fill-color:currentColor}
body[data-experience=ware] .closing-mark{color:var(--w-ink)}
@media(max-width:1024px){.commands-body{grid-template-columns:1fr;row-gap:36px}
.commands .command-guide{grid-column:1;grid-row:auto}
.finale{grid-template-columns:1fr;align-items:start;padding-top:18svh}
.finale-mascot{height:min(56svh,96vw);margin-bottom:-8svh}}
@media(max-width:760px){.hero{height:150svh}
.wordmark{top:max(92px,15svh);font-size:30vw}
.hero-mascot{height:min(52svh,96vw);bottom:24svh}
.hero-copy{right:var(--w-gutter);max-width:none;gap:16px}
.hero-sub{font-size:19px}
.hero-actions{width:100%}
.hero-actions .pill{flex:1}
.pill{min-height:50px;padding:0 18px;font-size:15px}
.statement-text{font-size:clamp(30px,8.6vw,46px)}
.film-stage{border-radius:18px;aspect-ratio:4/3}
.film-svg{height:100%;width:auto;margin-left:50%;transform:translateX(-50%)}
.film-bar{gap:12px}
.film .flow-tabs button{font-size:12px}
.game{grid-template-columns:auto 1fr;row-gap:6px}
.game-meta{grid-column:2;text-align:left}
.game-name{font-size:clamp(26px,8vw,44px)}
.composer-line{font-size:clamp(32px,10.4vw,56px)}
.commands .command-row code{font-size:17px}}
/* Reduced motion, pause and no-script: resolved poses, no loops. */
.reduced-score .hero,body:not(.js) .hero{height:100svh}
.reduced-score .caret{animation:none}
body:not(.js) .statement-text .w>i{opacity:1}
@media(prefers-reduced-motion:reduce){.film-caption .roll,.pill,.game-name{transition:none}}
/* ===== Cloud header: a puffy cloud that carries the brand, eyes and language.
   Puffs and body share one colour; one drop-shadow on the parent turns them
   into a single silhouette. No section links, no pause control. ===== */
.cloud-bar{position:fixed;z-index:20;top:max(44px,calc(env(safe-area-inset-top,0px) + 40px));left:0;right:0;display:flex;justify-content:center;pointer-events:none}
.cloud{position:relative;pointer-events:auto;filter:drop-shadow(0 16px 22px rgba(96,72,48,.15)) drop-shadow(0 2px 3px rgba(96,72,48,.10));transform-origin:50% 70%;animation:cloud-bob 6s ease-in-out infinite}
.cloud-bar{transition:translate .7s var(--ease)}
/* !important: GSAP writes translate:none inline when it animates the bar in. */
.cloud-bar.is-away{translate:0 calc(-100% - 110px)!important}
@keyframes cloud-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.puff{position:absolute;border-radius:50%;background:#fffdf9;transition:transform .6s var(--ease)}
.puff.p1{left:16px;top:-17px;width:50px;height:50px}
.puff.p2{left:52px;top:-34px;width:76px;height:76px}
.puff.p3{right:30px;top:-21px;width:58px;height:58px}
.cloud:hover .p1{transform:translate(-2px,-3px) scale(1.06)}
.cloud:hover .p2{transform:translateY(-4px) scale(1.05)}
.cloud:hover .p3{transform:translate(2px,-3px) scale(1.07)}
.cloud-body{position:relative;display:flex;align-items:center;gap:16px;height:58px;padding:0 9px 0 22px;border-radius:999px;background:linear-gradient(#fffdf9 40%,#f5eee5)}
.cloud-brand{display:flex;align-items:center;gap:7px;min-height:44px;font-size:21px;font-weight:900;letter-spacing:-.06em;color:var(--w-ink)}
.cloud-eyes{display:flex;gap:11px;padding:0 4px;--ex:0px;--ey:0px;--eb:1}
.cloud-eyes i{width:7px;height:7px;border-radius:50%;background:var(--w-ink);transform:translate(var(--ex),var(--ey)) scaleY(var(--eb))}
/* ===== The square (after the Hayler reference, in WARE's palette). ===== */
#ball{position:fixed;left:0;top:0;z-index:150;width:14px;height:14px;border-radius:2px;background:var(--w-ink);color:var(--w-ink);pointer-events:none;opacity:0;display:grid;place-items:center;overflow:hidden;transition:width .4s var(--ease),height .4s var(--ease),border-radius .4s var(--ease),background-color .3s,opacity .25s,padding .4s var(--ease)}
#ball.is-on{opacity:1}
#ball.is-dark{background:var(--w-ice)}
#ball.is-highlight{width:86px;height:86px;border-radius:50%;background:rgba(169,225,255,.6);mix-blend-mode:multiply}
#ball.is-label{width:auto;height:40px;padding:0 18px;border-radius:12px;background:var(--w-ink);color:var(--w-cream)}
#ball.is-hidden{width:0;height:0;opacity:0}
.ball-label{display:none;font:600 13px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;white-space:nowrap}
#ball.is-label .ball-label{display:block}
@media(hover:none),(pointer:coarse){#ball{display:none}}
/* No text selection by press-and-drag anywhere on the page. */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,svg{-webkit-user-drag:none}
/* "And more": the list is open-ended. */
.game-more .more-logo{background:transparent;border:1.5px dashed rgba(23,22,20,.32);box-shadow:none;color:var(--w-ink)}
.game-more .more-logo svg{width:30%;height:auto}
.game-more .game-name{color:var(--w-ink-2)}
/* Statement mascot: a tiny live mascot inside the sentence. */
.statement-text{position:relative}
.statement .inline-mascot{display:inline-block;position:relative;height:.9em;width:auto;aspect-ratio:709/995;vertical-align:-.12em;margin:0 .06em 0 .1em;filter:none;cursor:pointer;--px:0px;--py:0px;--blink:1;z-index:2}
.statement .inline-mascot .mascot-body{display:block;width:100%;height:100%}
.statement .inline-mascot img{display:block;width:100%;height:100%;filter:drop-shadow(0 .05em .06em rgba(70,52,34,.25))}
.statement .inline-mascot .pupil{width:7%}
@media(prefers-reduced-motion:reduce){.cloud{animation:none}
#ball{transition:none}}
/* ===== Language menu: a small cloud bubble under the cloud. ===== */
.lang{position:relative}
.lang-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.lang-btn{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;background:#efe7dc;color:var(--w-ink);font:700 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.04em;transition:background .25s}
.lang-btn:hover,.lang.is-open .lang-btn{background:#e6dccf}
.lang-btn i{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease)}
.lang.is-open .lang-btn i{transform:translateY(1px) rotate(225deg)}
.lang-menu{position:absolute;right:-6px;top:calc(100% + 12px);min-width:150px;margin:0;padding:6px;list-style:none;border-radius:20px;background:#fffdf9;box-shadow:0 18px 40px -12px rgba(96,72,48,.3),0 2px 4px rgba(96,72,48,.08);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.96);transform-origin:85% 0;transition:opacity .25s,transform .35s var(--ease),visibility 0s .35s}
.lang-menu:before{content:"";position:absolute;right:26px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fffdf9}
.lang.is-open .lang-menu{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--ease)}
.lang-menu li{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border-radius:14px;cursor:pointer;color:var(--w-ink-2);font-size:14px}
.lang-menu li b{font-size:12px;letter-spacing:.05em;color:var(--w-ink);min-width:20px}
.lang-menu li:hover,.lang-menu li:focus-visible{background:#f3ece2;outline:none}
.lang-menu li[aria-selected=true]{color:var(--w-ink)}
.lang-menu li[aria-selected=true]:after{content:"";margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--w-ink)}
@media(prefers-reduced-motion:reduce){.lang-menu,.lang-btn i{transition:none}}
/* Very narrow phones: the two hero actions stack so labels never overflow. */
@media(max-width:420px){.hero-actions{flex-direction:column;flex-wrap:nowrap}
.hero-actions .pill{width:100%;flex:none}}
/* Snapped (Hayler): the square spreads into the element and fades into it. */
#ball.is-stuck{background:var(--w-ink);opacity:0!important;transition:background-color .2s,opacity .3s .05s}
#ball.is-trace{width:0;height:0;opacity:0}
#ball{box-sizing:border-box}
/* Film notice: once, before the first play. An outlined credit label
   ("This video was generated by ✦ AI"), the spark and AI with a faint glow. */
.film-notice{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:clamp(12px,1.4vw,24px);pointer-events:none;opacity:0;--glow:0}
.film-stage.notice-on .film-notice{opacity:1}
.film-stage.notice-on .film-caption{opacity:0}
.film-stage.notice-on .film-svg{filter:brightness(.42)}
.film-svg{transition:filter .8s var(--ease)}
.film-caption{transition:opacity .6s}
.nb{display:flex;align-items:center;gap:.45em;padding:.5em .55em .5em .75em;border:max(2px,.08em) solid #f2f3f5;border-radius:.42em;color:#f2f3f5;font-size:clamp(17px,2.4vw,46px);line-height:1.08;clip-path:inset(0% 100% 0% 0% round .42em)}
.nb-text{display:flex;flex-direction:column;font-weight:500;letter-spacing:-.025em;white-space:nowrap}
.nb-l,.nb-ai{display:block;overflow:hidden;padding-bottom:.06em}
.nb-l>i,.nb-ai>i{display:inline-block;font-style:normal}
.nb-spark{flex:none;width:.95em;height:.95em;fill:currentColor;margin:0 -.1em 0 .05em;filter:drop-shadow(0 0 calc(9px*var(--glow)) rgba(169,225,255,calc(.55*var(--glow))))}
.nb-ai{font-size:2.3em;font-weight:800;letter-spacing:-.045em;line-height:.92;text-shadow:0 0 calc(16px*var(--glow)) rgba(169,225,255,calc(.4*var(--glow)))}
.notice-sub{margin:0;font-size:clamp(13px,1.05vw,19px);color:#b5bac1;letter-spacing:.005em}
.film-stage{cursor:pointer}
/* Peeking mascot: bottom-right corner of the picture (of the cropped picture on phones). */
.f-peek{transform:translate(1345px,900px) rotate(-13deg)}
@media(max-width:760px){.f-peek{transform:translate(1215px,900px) rotate(-13deg)}}
/* Mini mascot under the pointer: its own silhouette, outlined in ink. */
/* Mini mascot under the pointer: a smooth ink outline (an SVG dilate filter on a
   copy of the image underneath) fades in around its silhouette. */
.statement .inline-mascot .mascot-outline{position:absolute;inset:0;filter:url(#mascot-outline);opacity:0;transition:opacity .35s var(--ease)}
.statement .inline-mascot.is-traced .mascot-outline{opacity:1}
/* Footer: legal links and the trademark notice. */
body[data-experience=ware] footer.site-footer{display:block;padding:clamp(28px,4vh,44px) var(--w-gutter) max(28px,calc(env(safe-area-inset-bottom,0px) + 20px))}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 22px}
.footer-links a,.footer-row>a{min-height:44px;display:inline-flex;align-items:center;font-size:clamp(13px,.85vw,17px)}
.footer-links a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-note{margin:18px 0 6px;max-width:80ch;font-size:clamp(12px,.75vw,15px);line-height:1.55;color:var(--w-muted)}
.footer-copy{margin:0;font-size:12px;color:var(--w-muted)}
@media(max-width:760px){.footer-row{align-items:flex-start}
.footer-links{order:3;width:100%}}
/* Elements the square merged into: some invert their palette. */
.pill,.copy-command,.film-toggle,.lang-btn{transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.pill.ghost.is-snapped,.hero-action.pill.is-snapped,.commands .copy-command.is-snapped,.film-toggle.is-snapped,.lang-btn.is-snapped{background:var(--w-ink);border-color:var(--w-ink);color:var(--w-cream)}
.pill.primary.is-snapped,.invite-link.pill.is-snapped{background:#fffdf9;color:var(--w-ink);border-color:var(--w-ink)}
/* Film cursor. The square is drawn as two halves (overlapping a hair, so no
   seam shows), so over the picture it can
   split into the pause bars or fold into the play triangle: clip-path polygons
   with the same number of points morph smoothly, and ink turns to white. */
#ball:before,#ball:after{content:"";position:absolute;inset:0;background:var(--w-ink);opacity:0;transition:clip-path .45s var(--ease),background-color .3s,opacity .2s}
#ball:before{clip-path:polygon(0 0,50.8% 0,50.8% 100%,0 100%)}
#ball:after{clip-path:polygon(49.2% 0,100% 0,100% 100%,49.2% 100%)}
#ball.is-square,#ball.is-square.is-dark,#ball.is-media{background:transparent}
#ball.is-square:before,#ball.is-square:after,#ball.is-media:before,#ball.is-media:after{opacity:1}
#ball.is-square.is-dark:before,#ball.is-square.is-dark:after{background:var(--w-ice)}
#ball.is-media{width:34px;height:34px;border-radius:0;overflow:visible;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
#ball.is-media:before,#ball.is-media:after{background:#fff}
#ball.is-media[data-icon=pause]:before{clip-path:polygon(20% 10%,40% 10%,40% 90%,20% 90%)}
#ball.is-media[data-icon=pause]:after{clip-path:polygon(60% 10%,80% 10%,80% 90%,60% 90%)}
#ball.is-media[data-icon=play]:before{clip-path:polygon(22% 8%,55.8% 29.5%,55.8% 70.5%,22% 92%)}
#ball.is-media[data-icon=play]:after{clip-path:polygon(54.2% 28.5%,88% 50%,88% 50%,54.2% 71.5%)}
/* The pause / play sign in the middle of the picture (film.js). */
.film-sign{position:absolute;left:50%;top:50%;z-index:4;width:clamp(44px,6vw,88px);aspect-ratio:1;transform:translate(-50%,-50%);color:#fff;opacity:0;pointer-events:none;filter:drop-shadow(0 4px 18px rgba(0,0,0,.45))}
.film-sign svg{display:block;width:100%;height:100%}
[data-icon=play] .i-pause,[data-icon=pause] .i-play{display:none}
/* Curtain: the picture goes to black as it leaves the screen and lifts as it returns. */
.film-curtain{position:absolute;inset:0;z-index:5;background:#000;opacity:0;pointer-events:none}
/* Mobile finale: text, button and mascot share one screen at the bottom of the page. */
@media(max-width:1024px){.finale{min-height:0;padding-top:16svh}
.finale-copy{padding-bottom:4svh}
.finale-mascot{height:min(38svh,76vw);margin-bottom:-5svh}}

/* Loader from the first frame (html.preload is set in <head>), so the page never flashes before it. */
html.preload .loader{display:block}

/* The mini mascot can be thrown past the screen edge: never a sideways scrollbar. */
.statement{overflow-x:clip}
/* Mini mascot you can pick up. Its reactions are drawn in ink, like the type:
   pinprick pupils and a sweat line when shaken, a spiral when dizzy. */
.statement .inline-mascot.is-grabbable{cursor:grab;touch-action:none}
.statement .inline-mascot.is-held{cursor:grabbing}
.statement .inline-mascot.is-scared .pupil{width:max(2.4px,4.6%)}
.mini-sweat,.mini-dizzy{position:absolute;overflow:visible;pointer-events:none;fill:none;stroke:#171614;stroke-linecap:round;stroke-linejoin:round}
.mini-sweat{right:-4%;top:18%;width:12%;height:24%;stroke-width:1.6;vector-effect:non-scaling-stroke}
.mini-sweat path{vector-effect:non-scaling-stroke}
.mini-dizzy{left:-12%;top:4%;width:124%;height:auto;aspect-ratio:2/1;stroke-width:1.4}
.mini-dizzy .ring{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:mini-draw .5s ease-out forwards}
.mini-dizzy .star{fill:#fffdf9;stroke-width:1.1;vector-effect:non-scaling-stroke}
@keyframes mini-draw{to{stroke-dashoffset:0}}
/* A burst plush: an ink ring, cream patches with ink edges, loose stitches. */
.fluff,.thread,.ink-ring{position:fixed;left:0;top:0;z-index:25;pointer-events:none}
.fluff svg,.thread svg{display:block;width:100%;height:100%;overflow:visible}
.fluff polygon{fill:#f4efe7;stroke:#171614;stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.thread path{fill:none;stroke:#171614;stroke-width:1.3;stroke-dasharray:3 2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ink-ring{border:1.5px solid #171614;border-radius:50%}
/* Once the mini mascot is gone the big ones are sad: drooping eyes (the upper
   lid cut low at the outer corners) looking down toward the middle, small
   tears from one eye then the other, and a thought cloud: "Why..?".
   (ware.js also stops their hop.) */
.mascot.is-sad .pupil{width:8.2%;transform:translate(-50%,-50%) translate(var(--sx,0%),38%) scaleY(var(--blink));clip-path:polygon(0 44%,100% 8%,100% 100%,0 100%)}
.mascot.is-sad .pupil:nth-of-type(1){--sx:24%}
.mascot.is-sad .pupil:nth-of-type(2){--sx:-24%;clip-path:polygon(0 8%,100% 44%,100% 100%,0 100%)}
.mascot.is-sad .mascot-body:before,.mascot.is-sad .mascot-body:after{content:"";position:absolute;top:48.5%;width:3.2%;aspect-ratio:1;border-radius:50% 0 50% 50%;background:#a9e1ff;box-shadow:inset 0 0 0 max(.5px,8%) rgba(30,27,25,.3);opacity:0;pointer-events:none;animation:mascot-tear 2.6s cubic-bezier(.5,0,.8,.6) infinite}
.mascot.is-sad .mascot-body:before{left:35.6%}
.mascot.is-sad .mascot-body:after{left:63.2%;animation-delay:1.3s}
@keyframes mascot-tear{0%{opacity:0;transform:translateY(0) rotate(-45deg) scale(.3)}14%{opacity:1;transform:translateY(0) rotate(-45deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(520%) rotate(-45deg) scale(.85)}}
.mascot-why{position:absolute;left:80%;top:2%;z-index:3;pointer-events:none;transform-origin:0 100%;font:600 clamp(16px,1.7vw,30px)/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.02em;color:var(--w-ink);filter:drop-shadow(0 10px 14px rgba(96,72,48,.18)) drop-shadow(0 1px 2px rgba(96,72,48,.12))}
.mascot-why b{position:relative;display:block;padding:.6em 1.05em;border-radius:999px;background:#fffdf9;white-space:nowrap;font-weight:600;animation:mascot-why-bob 3.2s ease-in-out infinite}
.mascot-why b:before,.mascot-why b:after{content:"";position:absolute;border-radius:50%;background:#fffdf9;z-index:-1}
.mascot-why b:before{width:1.7em;height:1.7em;left:.45em;top:-.75em}
.mascot-why b:after{width:1.25em;height:1.25em;right:.7em;top:-.5em}
.mascot-why i{position:absolute;border-radius:50%;background:#fffdf9}
.mascot-why i:nth-child(1){width:.7em;height:.7em;left:-.15em;bottom:-.75em}
.mascot-why i:nth-child(2){width:.42em;height:.42em;left:-.75em;bottom:-1.45em}
@keyframes mascot-why-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.mascot.is-sad .mascot-body:before,.mascot.is-sad .mascot-body:after{animation:none;opacity:1}.mascot-why b{animation:none}}
/* The behaviour chapter's brain (brain.js): a WebGL canvas over the picture. */
.film-brain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}