:root{
  --wall:#0B3A41; --mustard:#D9A62B; --grey:#9FB1AF; --paper:#F4EFE6; --ink:#111;
  --serif:"Fraunces", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box}
html{background:#0B3A41}
body{margin:0; color:var(--paper); background:var(--wall); font-family:var(--mono); -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:20; background:radial-gradient(110% 85% at 50% 42%, rgba(0,0,0,0) 45%, rgba(0,0,0,.34) 100%)}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}

.top{position:fixed; inset:0 0 auto 0; z-index:30; display:flex; justify-content:space-between; align-items:center; padding:22px 26px; pointer-events:none}
.top a{pointer-events:auto}
.brand{font-family:var(--serif); font-variation-settings:"SOFT" 100, "WONK" 1; font-weight:800; font-size:clamp(22px,2.4vw,32px); line-height:1; letter-spacing:-.01em}
.brand span{color:var(--mustard); font-style:italic; font-weight:600}
.nav{display:flex; gap:22px; font-size:12px; letter-spacing:.22em}
.nav a{opacity:.75; border-bottom:1px solid transparent; padding-bottom:3px; transition:opacity .25s, border-color .25s}
.nav a:hover{opacity:1; border-color:var(--mustard)}

/* slides one and two share a sticky stage */
.stage-track{height:450vh; position:relative; z-index:1}
.stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; touch-action:pan-y; background:var(--wall)}
body.ballmode, body.ballmode *{cursor:none}

.plate{position:absolute; left:50%; top:52%; height:min(92vh,100vw); height:min(92svh,100vw); aspect-ratio:1/1; transform:translate(-50%,-50%); will-change:transform; user-select:none; -webkit-user-select:none}
.plate canvas, .plate .fallback{position:absolute; inset:0; width:100%; height:100%}
.plate .fallback{object-fit:cover; -webkit-mask-image:radial-gradient(70% 70% at 50% 45%, #000 60%, transparent 100%); mask-image:radial-gradient(70% 70% at 50% 45%, #000 60%, transparent 100%); transition:opacity .6s}
.plate.live .fallback{opacity:0}
.plate canvas{opacity:0; transition:opacity .6s}
.plate.live canvas{opacity:1}

.tag{position:absolute; left:50%; bottom:7vh; transform:translateX(-50%); margin:0; text-align:center; font-family:var(--serif); font-variation-settings:"SOFT" 100, "WONK" 1; font-style:italic; font-weight:500; font-size:clamp(20px,2.2vw,32px); line-height:1.15; color:var(--paper); pointer-events:none; text-shadow:0 2px 24px rgba(0,0,0,.45)}
.readout{position:absolute; bottom:22px; font-size:11px; letter-spacing:.24em; line-height:1.9; opacity:.6; pointer-events:none}
.readout.br{right:26px; text-align:right}

.props{position:absolute; inset:0; pointer-events:none; z-index:2}
.prop{position:absolute; left:var(--x); top:var(--y); width:var(--w); min-width:56px; max-width:220px; will-change:transform}
.prop{animation:float 10s ease-in-out infinite alternate}
.prop:nth-child(2n){animation-duration:12s} .prop:nth-child(3n){animation-duration:8s}
@keyframes float{from{translate:0 -6px; rotate:-2deg} to{translate:0 10px; rotate:2.5deg}}

/* the viewfinder that rides on the lens: the real pair, seen through a camera */
.vf{position:absolute; left:0; top:0; z-index:4; pointer-events:none; opacity:0; will-change:transform,opacity; font-family:var(--mono); color:var(--paper); text-shadow:0 1px 3px rgba(0,0,0,.6)}
.vf .fr{position:absolute; inset:0; transform:scale(1.1); transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.vf.lock .fr{transform:scale(1)}
.vf .c{position:absolute; width:15%; height:21%; border:0 solid rgba(244,239,230,.8); transition:border-color .3s; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.vf.lock .c{border-color:var(--mustard)}
.vf .tl{left:0; top:0; border-width:2px 0 0 2px; border-top-left-radius:5px}
.vf .tr{right:0; top:0; border-width:2px 2px 0 0; border-top-right-radius:5px}
.vf .bl{left:0; bottom:0; border-width:0 0 2px 2px; border-bottom-left-radius:5px}
.vf .br{right:0; bottom:0; border-width:0 2px 2px 0; border-bottom-right-radius:5px}
.vf .rec{position:absolute; left:2px; bottom:100%; margin-bottom:9px; display:flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.24em; line-height:1}
.vf .rec b{width:7px; height:7px; border-radius:50%; background:#E5483B; box-shadow:0 0 6px rgba(229,72,59,.8); animation:blink 1.2s step-end infinite}
.vf .tc{position:absolute; right:2px; top:100%; margin-top:9px; font-size:10px; letter-spacing:.14em; line-height:1; font-variant-numeric:tabular-nums}
@keyframes blink{0%{opacity:1} 50%{opacity:.15}}

/* slide two: the words Littil and Teddy turn to read */
.story{position:absolute; left:51%; top:50%; transform:translateY(-50%); width:46vw; z-index:3; pointer-events:none}
.w{margin:0; font-family:var(--serif); font-variation-settings:"SOFT" 100, "WONK" 1; font-weight:800; font-size:clamp(28px,3.8vw,64px); line-height:1.06; letter-spacing:-.015em; opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .5s ease; white-space:nowrap}
.w.in{opacity:1; transform:none}
.w.soft{font-style:italic; font-weight:500; color:var(--mustard); margin-top:.18em}
.w.small{font-family:var(--mono); font-weight:400; font-size:clamp(12px,1.15vw,17px); letter-spacing:.14em; line-height:1.9; text-transform:uppercase; color:var(--grey)}
.w.small:first-of-type, .w.soft + .w.small{margin-top:4vh}
.ch{display:inline-block; will-change:transform}
.roller{position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; z-index:4; pointer-events:none; filter:drop-shadow(0 4px 5px rgba(0,0,0,.35))}

.ball{position:fixed; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px; z-index:50; pointer-events:none; opacity:0; transition:opacity .25s, width .2s, height .2s, margin .2s; filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.ball.on{opacity:1}
.ball.big{width:48px; height:48px; margin:-24px 0 0 -24px}

/* slide three: the question, fetch, links, all in one screen */
.ask{position:relative; z-index:6; background:var(--wall); box-shadow:0 -40px 80px rgba(0,0,0,.5); height:100vh; height:100svh; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; justify-items:center; text-align:center; padding:11vh 5vw 2.5vh; overflow:hidden}
.line{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.line.in{opacity:1; transform:none}
.question{margin:0; font-family:var(--serif); font-variation-settings:"SOFT" 100, "WONK" 1; font-weight:800; font-size:clamp(28px,4.4vw,70px); line-height:1.02; letter-spacing:-.015em}
.choices{display:flex; gap:clamp(16px,3vw,48px); margin-top:3.2vh; flex-wrap:wrap; justify-content:center}
.choice{display:flex; flex-direction:column; align-items:center; gap:6px; padding:clamp(12px,1.6vw,22px) clamp(28px,4vw,64px); border:2px solid rgba(244,239,230,.25); border-radius:999px; transition:border-color .25s, transform .25s, background .25s; min-width:min(36vw,280px)}
.choice:hover{border-color:var(--mustard); transform:translateY(-4px) rotate(-1deg); background:rgba(217,166,43,.08)}
.choice .big{font-family:var(--serif); font-variation-settings:"SOFT" 100, "WONK" 1; font-weight:900; font-size:clamp(26px,3.4vw,52px); letter-spacing:-.01em}
.choice:nth-child(2) .big{color:var(--mustard); font-style:italic}
.choice .sub{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--grey)}

.play{position:relative; height:100%; max-width:94vw; aspect-ratio:16/9; margin-top:1.5vh; align-self:center}
.fetch{position:absolute; inset:3% 9%; border-radius:26px; overflow:hidden; outline:2px dashed rgba(217,166,43,.75); outline-offset:7px; box-shadow:0 18px 50px rgba(0,0,0,.35)}
.fetch video{width:100%; height:100%; object-fit:cover; display:block}
.fetch canvas.chase{position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none}
.link{position:absolute; width:clamp(56px,6.6vw,96px); z-index:2; animation:bob 4s ease-in-out infinite alternate}
.link img{width:100%; transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.link:hover img, .link:focus-visible img{transform:scale(1.18) rotate(-8deg)}
.link span{position:absolute; left:50%; top:100%; transform:translate(-50%,4px); font-size:10px; letter-spacing:.22em; white-space:nowrap; background:rgba(10,42,47,.88); padding:6px 10px; border-radius:3px; opacity:0; transition:opacity .25s, transform .25s}
.link:hover span, .link:focus-visible span{opacity:1; transform:translate(-50%,0)}
.link.ig{left:-13%; top:6%; width:clamp(74px,8.6vw,124px)}
.link.ig::before{content:""; position:absolute; inset:-14%; border-radius:50%; border:2px solid var(--mustard); opacity:.75; animation:ring 2.4s ease-in-out infinite}
.link.ig span{opacity:1; transform:translate(-50%,0); background:var(--mustard); color:var(--ink)}
.link.yt{left:-9%; bottom:4%; animation-delay:-1.5s}
.link.li{right:-11%; top:10%; animation-delay:-.8s}
.link.ml{right:-8%; bottom:6%; animation-delay:-2.4s}
@keyframes bob{from{translate:0 -8px; rotate:-4deg} to{translate:0 8px; rotate:4deg}}
@keyframes ring{0%,100%{scale:1; opacity:.75} 50%{scale:1.12; opacity:.25}}

.foot{display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:1.2vh; font-size:13px; letter-spacing:.2em; color:var(--grey)}
.foot .mail{color:var(--paper)}
.foot .mail:hover{color:var(--mustard)}
.motto{margin:0; font-family:var(--serif); font-variation-settings:"SOFT" 100, "WONK" 1; font-style:italic; font-weight:500; font-size:clamp(15px,1.4vw,20px); letter-spacing:0; color:var(--mustard)}
.sig{font-family:"Noto Sans Malayalam", sans-serif; font-size:20px; letter-spacing:0; color:var(--paper); opacity:.9; margin-top:2px}

@media (max-width:800px){
  .top{padding:14px 16px}
  .nav{gap:12px; font-size:10px; letter-spacing:.14em}
  .plate{height:auto; width:112vw; top:46%}
  .tag{bottom:14vh; font-size:20px}
  .readout{font-size:9px; bottom:16px} .readout.br{right:16px}
  .prop{min-width:0; max-width:none}
  .prop:nth-child(1){--x:4%; --y:12%; --w:16vw}
  .prop:nth-child(2){--x:64%; --y:8%; --w:22vw}
  .prop:nth-child(3), .prop:nth-child(4), .prop:nth-child(5){display:none}
  .prop:nth-child(6){--x:40%; --y:9%; --w:13vw}
  .prop:nth-child(7){--x:5%; --y:66%; --w:10vw}
  .prop:nth-child(8){--x:82%; --y:64%; --w:12vw}
  .story{left:7vw; right:7vw; width:auto; top:auto; bottom:6vh; transform:none}
  .w{font-size:clamp(24px,7.4vw,40px); white-space:normal}
  .w.small{font-size:11px}
  .ball{display:none}
  .choice{min-width:72vw}
  .ask{padding-top:9vh}
  .play{width:100vw; height:auto; max-width:none}
  .link{width:52px}
  .link.ig{width:62px; left:2%; top:-6%}
  .link.yt{left:2%; bottom:-4%}
  .link.li{right:2%; top:-4%}
  .link.ml{right:2%; bottom:-4%}
  .link span{display:none}
  .vf .rec, .vf .tc{font-size:9px}
}
@media (prefers-reduced-motion:reduce){ .prop, .link, .vf .rec b{animation:none} .line, .w{transition:none} }

/* ---------- v5: the 3D story behind the page ---------- */
#world{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; touch-action:pan-y; visibility:hidden}
body.world3d #world{visibility:visible}
.world-track{position:relative; z-index:1; pointer-events:none}
body.folding #stage, body.inworld #stage{visibility:hidden}
body.folding .stage-track, body.inworld .stage-track{pointer-events:none}
.ask::before{content:""; position:absolute; left:0; right:0; top:10px; height:3px; background:repeating-linear-gradient(90deg, var(--mustard) 0 18px, transparent 18px 32px); opacity:.85}

/* the page folds down like paper */
.fold{position:fixed; inset:0; z-index:5; perspective:1500px; perspective-origin:50% 62%; pointer-events:none; display:none; overflow:hidden}
body.folding .fold{display:block}
.fold .strip{position:absolute; left:0; top:0; width:100%; overflow:hidden; transform-origin:50% 50%; will-change:transform; backface-visibility:hidden; background:var(--wall)}
.fold .strip .stage{position:absolute; left:0; width:100%; visibility:visible}
.fold .strip .shade{position:absolute; inset:0; pointer-events:none}

/* words over the world */
.hud{position:fixed; inset:0; z-index:25; pointer-events:none; opacity:0}
.cap{position:absolute; left:clamp(22px,5vw,84px); top:clamp(92px,17vh,170px); max-width:min(600px,82vw); will-change:opacity,transform; text-shadow:0 2px 26px rgba(0,0,0,.55)}
.tagline{margin:0 0 14px; display:flex; gap:14px; align-items:center; font-size:11px; letter-spacing:.26em; color:var(--paper); opacity:.92}
.tagline span:first-child{color:var(--ink); background:var(--mustard); padding:4px 8px 3px; border-radius:3px; letter-spacing:.12em; text-shadow:none; font-weight:500}
.tagline span:nth-child(2){color:var(--mustard)}
.cap h2{margin:0; font-family:var(--serif); font-variation-settings:"SOFT" 100, "WONK" 1; font-weight:800; font-size:clamp(34px,4.8vw,76px); line-height:1.0; letter-spacing:-.02em}
.cap .sub{margin:16px 0 0; font-size:clamp(12px,1.1vw,15px); letter-spacing:.14em; line-height:1.7; text-transform:uppercase; color:var(--paper); opacity:.9}
.cap .fact{margin:14px 0 0; max-width:30ch; font-family:var(--serif); font-variation-settings:"SOFT" 100, "WONK" 1; font-style:italic; font-weight:500; font-size:clamp(16px,1.5vw,22px); line-height:1.3; color:#FFE3A0; text-shadow:0 1px 14px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6)}

.thread{position:absolute; right:26px; top:50%; transform:translateY(-50%); margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.hud.on .thread li{pointer-events:auto}
.thread li{width:22px; height:22px; display:grid; place-items:center; cursor:pointer}
.thread li::before{content:""; width:4px; height:16px; border-radius:3px; background:var(--paper); opacity:.4; transition:opacity .3s, background .3s, height .3s, width .3s}
.thread li:last-child::before{width:10px; height:10px; border-radius:50%}
.thread li.done::before{opacity:.85}
.thread li.on::before{background:var(--mustard); opacity:1; height:22px; width:6px}
.thread li:last-child.on::before{width:14px; height:14px}
.thread li:hover::before{opacity:1}

.hint{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); margin:0; padding:10px 18px; border-radius:999px; background:rgba(10,42,47,.72); backdrop-filter:blur(6px); font-size:11px; letter-spacing:.22em; white-space:nowrap; opacity:0; transition:opacity .5s}
.hint.on{opacity:1}
.tip{position:absolute; right:26px; top:66px; margin:0; display:flex; align-items:center; gap:9px; padding:8px 13px 8px 10px; border-radius:999px; background:rgba(10,42,47,.6); backdrop-filter:blur(6px); font-size:10px; letter-spacing:.2em; opacity:0; transition:opacity .4s}
.tip.on{opacity:.92}
.tip i{width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 38% 32%, #F2F27A, #D8D93A 55%, #9DA21E)}

@media (max-width:800px){
  .cap{top:76px; left:18px; right:18px; max-width:none}
  .cap h2{font-size:clamp(30px,9.4vw,46px)}
  .tagline{gap:10px; font-size:10px; letter-spacing:.18em; margin-bottom:10px}
  .cap .sub{margin-top:10px; font-size:11px}
  .cap .fact{margin-top:10px; font-size:16px}
  .thread{right:auto; left:50%; top:auto; bottom:64px; transform:translateX(-50%); flex-direction:row; gap:2px}
  .thread li::before{width:14px; height:4px}
  .thread li.on::before{width:20px; height:6px}
  .hint{bottom:20px; font-size:10px; letter-spacing:.14em}
  .tip{right:16px; top:50px; font-size:9px}
}

/* round two: the last page and the three step hello */
.question em{font-style:italic; color:var(--mustard)}
button.link{background:none; border:0; padding:0; cursor:pointer; color:inherit; font:inherit}
.link.ml span{opacity:1; transform:translate(-50%,0)}
#capMl{font-family:"Noto Sans Malayalam", sans-serif; letter-spacing:0; font-size:14px; color:var(--mustard); opacity:.95}
#capMl:empty{display:none}
.hello{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(6,26,30,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:opacity .3s}
.hello[hidden]{display:none}
.hello.on{opacity:1}
.hello .card{position:relative; width:min(560px,100%); background:var(--wall); border-radius:28px; padding:34px 30px 30px; outline:2px dashed rgba(217,166,43,.8); outline-offset:-10px; box-shadow:0 30px 90px rgba(0,0,0,.55); transform:translateY(18px) scale(.98); transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.hello.on .card{transform:none}
.hello h3{margin:14px 0 20px; font-family:var(--serif); font-variation-settings:"SOFT" 100, "WONK" 1; font-weight:800; font-size:clamp(28px,4.4vw,40px); line-height:1.08; color:var(--paper)}
.hello .x{position:absolute; right:22px; top:18px; width:40px; height:40px; border-radius:50%; border:0; background:rgba(244,239,230,.1); color:var(--paper); font-size:24px; line-height:1; cursor:pointer}
.hello .steps{display:flex; gap:9px; margin:0}
.hello .steps i{width:15px; height:15px; border-radius:50%; background:rgba(244,239,230,.18); transition:background .3s, transform .3s}
.hello .steps i.on{background:#D8D93A; transform:scale(1.15)}
.hello .chips{display:grid; gap:11px}
.hello .chip{text-align:left; padding:17px 20px; border-radius:16px; border:2px solid rgba(244,239,230,.22); background:rgba(244,239,230,.04); color:var(--paper); font:inherit; font-size:17px; letter-spacing:.02em; cursor:pointer; transition:border-color .2s, background .2s, transform .2s}
.hello .chip:hover, .hello .chip:focus-visible{border-color:var(--mustard); background:rgba(217,166,43,.12); transform:translateX(4px)}
.hello textarea, .hello input{display:block; width:100%; margin:0 0 12px; padding:16px 18px; border-radius:16px; border:2px solid rgba(244,239,230,.22); background:rgba(0,0,0,.18); color:var(--paper); font:inherit; font-size:17px; letter-spacing:.01em; resize:none}
.hello textarea:focus, .hello input:focus{outline:none; border-color:var(--mustard)}
.hello .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.hello .row{display:flex; gap:12px; align-items:center; margin-top:6px}
.hello .go{padding:15px 30px; border-radius:999px; border:0; background:var(--mustard); color:var(--ink); font:inherit; font-size:14px; letter-spacing:.2em; font-weight:500; cursor:pointer; text-transform:uppercase}
.hello .go[disabled]{opacity:.5; cursor:default}
.hello .skip{padding:15px 18px; border:0; background:none; color:var(--grey); font:inherit; font-size:13px; letter-spacing:.2em; cursor:pointer; text-transform:uppercase}
.hello .err{min-height:20px; margin:12px 0 0; font-size:13px; letter-spacing:.04em; color:#FFB4A6}
.hello .thanks{margin:0 0 18px; font-size:17px; color:var(--paper); opacity:.9}
@media (max-width:760px){ .fetch{inset:4% 4%; border-radius:18px} .link.ml span{display:block; font-size:9px} .hello .card{padding:30px 22px 24px} }
@media (prefers-reduced-motion:reduce){ .hello, .hello .card{transition:none} }
@media (max-width:760px){ .link.ml span{left:auto; right:0; transform:none} }

/* round three: the story sits on the floor; the screen keeps a place tag and a Malayalam subtitle, bottom centre */
.cap{left:50%; right:auto; top:auto; bottom:64px; width:min(900px,88vw); max-width:none; text-align:center}
#capTag{position:absolute; left:clamp(22px,5vw,84px); top:84px; margin:0}
.cap h2{font-size:clamp(24px,3.2vw,50px); line-height:1.05}
.cap h2:empty{display:none}
#capMl{display:block; margin:8px 0 0; font-size:clamp(18px,1.8vw,26px); line-height:1.3; color:var(--mustard); text-shadow:0 2px 16px rgba(0,0,0,.7)}
#capMl:empty{display:none}
.tip{right:auto; left:50%; top:27%; transform:translate(-50%,-50%) scale(.6); padding:13px 22px 13px 16px; gap:12px; font-size:13px; letter-spacing:.24em; background:rgba(10,42,47,.78); transition:opacity .35s, transform .45s cubic-bezier(.3,1.6,.5,1)}
.tip.on{opacity:1; transform:translate(-50%,-50%) scale(1); animation:tipPulse 1.5s ease-in-out infinite .45s}
.tip i{width:20px; height:20px; animation:tipBall .75s ease-in-out infinite alternate}
@keyframes tipPulse{50%{transform:translate(-50%,-50%) scale(1.07)}}
@keyframes tipBall{to{transform:translateY(-9px)}}
.ball{width:40px; height:40px; margin:-20px 0 0 -20px; filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.ball.big{width:56px; height:56px; margin:-28px 0 0 -28px}
.pre{margin:0 0 14px; font-size:11px; letter-spacing:.3em; color:var(--grey)}
@media (max-width:760px){
  .cap{top:auto; left:50%; right:auto; bottom:112px; width:92vw}
  #capMl{font-size:18px}
  #capTag{left:18px; top:58px}
  .tip{right:auto; top:30%; font-size:11px}
}
@media (prefers-reduced-motion:reduce){ .tip.on, .tip i{animation:none} }

/* round four: Malayalam on top, the last page rebuilt around the two reels */
#capMl{position:absolute; left:50%; top:74px; bottom:auto; transform:translateX(-50%); width:88vw; margin:0; text-align:center}
.cap{bottom:70px}
.cap h2{white-space:pre-line}
.ask{grid-template-rows:auto auto minmax(0,1fr) auto auto; padding:9vh 5vw 2vh}
.choices{align-self:stretch; justify-self:center; width:min(1180px,92vw); display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,28px); margin:2.4vh 0 0; min-height:0}
.choice{position:relative; overflow:hidden; min-width:0; min-height:0; padding:0 0 clamp(14px,2.4vh,26px); border-radius:28px; justify-content:flex-end; background:#0A2A2F}
.choice:hover{transform:translateY(-4px)}
.choice video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.choice::after{content:""; position:absolute; inset:0; background:linear-gradient(rgba(6,26,30,0) 40%, rgba(6,26,30,.88)); pointer-events:none}
.choice .big, .choice .sub{position:relative; z-index:2}
.choice .sub{color:var(--paper)}
.play{height:auto; aspect-ratio:auto; max-width:none; width:min(1180px,92vw); margin:2.2vh 0 0; display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,44px); padding-bottom:26px}
.fetch{position:relative; inset:auto; order:3; width:clamp(150px,17vw,250px); aspect-ratio:16/9; border-radius:16px; outline-offset:5px; flex:none}
.link, .link.ig, .link.yt, .link.li, .link.ml{position:relative; left:auto; right:auto; top:auto; bottom:auto; width:clamp(48px,5vw,74px); flex:none}
.link.ig{order:1} .link.yt{order:2} .link.li{order:4} .link.ml{order:5}
.link.ig::before{display:none}
.link span, .link.ig span, .link.ml span{opacity:1; transform:translate(-50%,2px); background:none; color:var(--paper); padding:4px 0; font-size:9px; letter-spacing:.16em; left:50%; right:auto}
@media (max-width:760px){
  #capMl{top:92px; font-size:18px}
  .cap{bottom:112px}
  .fetch{width:104px}
  .play{gap:12px}
  .link span, .link.ig span, .link.ml span{display:none}
  .choice{border-radius:20px}
}
#capMl{width:auto; max-width:88vw; padding:5px 18px 7px; border-radius:999px; background:rgba(6,26,30,.5); white-space:nowrap}

/* round five: the planet words sit up top, big line then a small one */
.cap{top:132px; bottom:auto}
.cap h2{font-size:clamp(30px,4.2vw,64px)}
.cap h2 small{display:block; margin-top:10px; font-size:.4em; font-weight:500; letter-spacing:.01em; opacity:.92}
@media (max-width:760px){ .cap{top:146px; bottom:auto} }

/* round six */
.starline{position:fixed; left:50%; top:42%; transform:translate(-50%,-50%); z-index:30; margin:0; opacity:0; pointer-events:none; text-align:center; font-family:var(--serif); font-variation-settings:"SOFT" 100, "WONK" 1; font-style:italic; font-weight:600; font-size:clamp(26px,3.6vw,56px); line-height:1.08; color:#FFF3D6; text-shadow:0 2px 30px rgba(0,0,0,.8)}
.keys{position:absolute; right:26px; bottom:26px; margin:0; padding:9px 14px; border-radius:10px; background:rgba(10,42,47,.6); font-size:10px; letter-spacing:.2em; color:var(--paper); white-space:pre}
.keys b{color:var(--mustard); font-weight:500}
.pre{font-size:clamp(12px,1.1vw,16px); color:var(--mustard); animation:prePulse 2.2s ease-in-out infinite}
@keyframes prePulse{50%{opacity:.55}}
.choice:first-child .big::before{content:"\2190  "; color:var(--mustard)}
.choice:nth-child(2) .big::after{content:"  \2192"; font-style:normal}
@media (max-width:760px){ .keys{right:auto; left:50%; transform:translateX(-50%); bottom:92px; font-size:9px} .choice .big::before, .choice .big::after{display:none} }
@media (prefers-reduced-motion:reduce){ .pre{animation:none} }

/* round seven */
/* Malayalam: small, compact, centred at the bottom. Only on the planet it rides on top. */
#capMl{top:auto; right:auto; bottom:68px; display:inline-flex; align-items:center; justify-content:center; width:max-content; max-width:88vw; padding:6px 14px; font-size:clamp(13px,1.05vw,16px); line-height:1.25; letter-spacing:0; text-indent:0; text-align:center; background:rgba(6,26,30,.58)}
#capMl:empty{display:none}
#capMl.top{top:74px; bottom:auto; font-size:clamp(16px,1.5vw,22px); padding:7px 18px}
/* the opening lines among the stars */
.starline{top:46%; transition:none; will-change:opacity, transform}
.starline.big{font-size:clamp(44px,7.4vw,120px); font-weight:900; font-style:normal; letter-spacing:-.02em}
/* controls: one straight line */
.keys{display:flex; align-items:center; gap:18px; padding:9px 16px; border-radius:999px; background:rgba(10,42,47,.72); backdrop-filter:blur(6px); white-space:nowrap}
.keys span{display:inline-flex; align-items:center; gap:7px}
.keys span + span{padding-left:18px; border-left:1px solid rgba(244,239,230,.22)}
.keys svg{width:13px; height:19px; flex:none}
.keys .kc{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:4px; border:1.5px solid var(--mustard); font-size:11px; line-height:1; letter-spacing:0}
/* last page: the four bubbles float */
@keyframes floaty{0%{translate:0 -7px; rotate:-5deg} 50%{translate:3px 5px; rotate:3deg} 100%{translate:-2px 9px; rotate:6deg}}
.play .link{animation:floaty 3.4s ease-in-out infinite alternate}
.play .link.yt{animation-duration:4.1s; animation-delay:-1.3s} .play .link.li{animation-duration:3.7s; animation-delay:-2.2s} .play .link.ml{animation-duration:4.4s; animation-delay:-.7s}
@media (max-width:760px){ #capMl{bottom:128px; font-size:13px} #capMl.top{top:92px; bottom:auto; font-size:16px} .keys{gap:12px; padding:7px 12px} .keys span + span{padding-left:12px} .keys svg{display:none} }
@media (prefers-reduced-motion:reduce){ .play .link{animation:none} }

/* round ten: the fetch film is big, and the four bubbles float over it */
.ask{grid-template-rows:auto auto minmax(0,1fr) minmax(0,1.25fr) auto}
.play{display:block; position:relative; height:100%; min-height:0; width:auto; aspect-ratio:16/9; max-width:92vw; margin:2.4vh 0 0; padding:0; justify-self:center}
.play .fetch{position:absolute; inset:0; width:auto; aspect-ratio:auto; border-radius:22px; outline-offset:6px}
.play .link, .play .link.ig, .play .link.yt, .play .link.li, .play .link.ml{position:absolute; width:clamp(46px,5.2vw,78px); z-index:3}
.play .link.ig{left:-4.5%; top:7%; right:auto; bottom:auto}
.play .link.yt{left:-2.5%; bottom:16%; top:auto; right:auto}
.play .link.li{right:-4.5%; top:7%; left:auto; bottom:auto}
.play .link.ml{right:-2.5%; bottom:16%; top:auto; left:auto}
.play .link span, .play .link.ig span, .play .link.ml span{display:block; left:50%; right:auto; transform:translate(-50%,2px); text-shadow:0 1px 8px rgba(0,0,0,.7)}
@media (max-width:760px){
  .ask{grid-template-rows:auto auto minmax(0,1fr) auto auto}
  .play{height:auto; width:92vw}
  .play .link, .play .link.ig, .play .link.yt, .play .link.li, .play .link.ml{width:40px}
  .play .link.ig{left:2%; top:5%} .play .link.yt{left:2%; bottom:8%} .play .link.li{right:2%; top:5%} .play .link.ml{right:2%; bottom:8%}
  .play .link span, .play .link.ig span, .play .link.ml span{display:none}
}

/* round eleven: three 16 by 9 pieces. The two reels side by side, the fetch film full width under them. The page grows past one screen. */
.ask{height:auto; min-height:100svh; grid-template-rows:auto auto auto auto auto; padding-bottom:4vh}
.choices{align-self:start}
.choice{aspect-ratio:16/9}
.play{height:auto; width:min(1180px,92vw); max-width:none; aspect-ratio:16/9; margin-top:clamp(18px,3vh,36px)}
.play .link.ig{left:3%; top:7%} .play .link.yt{left:5.5%; bottom:13%} .play .link.li{right:3%; top:7%} .play .link.ml{right:5.5%; bottom:13%}
@keyframes drift{0%{translate:-8px -10px; rotate:-6deg} 35%{translate:10px 4px; rotate:3deg} 70%{translate:-3px 14px; rotate:7deg} 100%{translate:12px -6px; rotate:-2deg}}
.play .link{animation-name:drift; animation-duration:6.5s}
.play .link.yt{animation-duration:7.6s} .play .link.li{animation-duration:7s} .play .link.ml{animation-duration:8.2s}
.foot{padding-top:3vh}
@media (max-width:760px){
  .ask{grid-template-rows:auto auto auto auto auto}
  .choices{grid-template-columns:1fr}
  .play{width:92vw}
  .play .link.ig{left:2%; top:5%} .play .link.yt{left:2%; bottom:8%} .play .link.li{right:2%; top:5%} .play .link.ml{right:2%; bottom:8%}
}

/* round twelve: the four bubbles sit together at the top centre of the fetch frame, loosely, not in a straight line */
.play .link.ig{left:33%; right:auto; top:9%; bottom:auto}
.play .link.yt{left:42.5%; right:auto; top:16%; bottom:auto}
.play .link.li{left:52%; right:auto; top:7%; bottom:auto}
.play .link.ml{left:61.5%; right:auto; top:14%; bottom:auto}
@media (max-width:760px){
  .play .link.ig{left:24%; right:auto; top:6%; bottom:auto} .play .link.yt{left:38.5%; right:auto; top:13%; bottom:auto} .play .link.li{left:53%; right:auto; top:5%; bottom:auto} .play .link.ml{left:67.5%; right:auto; top:12%; bottom:auto}
}

/* round thirteen: the opening shows a small scroll arrow where the tagline was */
.tag.down{display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--mono, "IBM Plex Mono", monospace); font-style:normal; font-weight:500; font-size:11px; letter-spacing:.3em; color:var(--paper); font-variation-settings:normal}
.tag.down svg{width:20px; height:34px; color:var(--mustard); animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(-4px); opacity:.55} 50%{transform:translateY(6px); opacity:1}}
@media (prefers-reduced-motion:reduce){ .tag.down svg{animation:none} }
@media (max-width:760px){ .tag.down{font-size:9px} .choice .big{font-size:clamp(24px,7.4vw,40px)} }

/* round thirteen b: one line headline, and the page is sized so that at the very bottom half of the two cards still shows */
.ask{--lw:min(1180px,92vw); padding-top:6vh}
@media (min-width:761px){ .ask{--lw:min(1180px, 92vw, calc((100svh - 130px) * 1.42))} .question{white-space:nowrap} }
.pre{margin-bottom:8px}
.question{font-size:clamp(26px,3.3vw,50px)}
.choices, .play{width:var(--lw)}
.choices{margin-top:2vh}
/* the cards pop, glow and wake up under the ball */
.choice{transition:transform .45s cubic-bezier(.3,1.5,.5,1), box-shadow .35s ease, opacity .3s ease; box-shadow:0 0 0 2px rgba(244,239,230,.14), 0 10px 30px rgba(0,0,0,.35)}
.choice video{transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .4s ease; filter:saturate(.85) brightness(.82)}
.choice .big{transition:transform .45s cubic-bezier(.3,1.5,.5,1), letter-spacing .45s ease}
.choice .sub{transition:letter-spacing .45s ease, color .3s}
.choice:hover, .choice:focus-visible{transform:translateY(-8px) scale(1.035); box-shadow:0 0 0 3px var(--mustard), 0 0 46px rgba(217,166,43,.5), 0 26px 60px rgba(0,0,0,.5); background:#0A2A2F; z-index:2}
.choice:first-child:hover{rotate:-1deg} .choice:nth-child(2):hover{rotate:1deg}
.choice:hover video, .choice:focus-visible video{transform:scale(1.08); filter:saturate(1.1) brightness(1.05)}
.choice:hover .big{transform:translateY(-4px) scale(1.06)}
.choice:hover .sub{letter-spacing:.34em; color:var(--mustard)}
.choices:hover .choice:not(:hover){opacity:.55}
.play .link img{transition:transform .35s cubic-bezier(.3,1.7,.5,1), filter .3s}
.play .link:hover img, .play .link:focus-visible img{transform:scale(1.28) rotate(-10deg); filter:drop-shadow(0 0 16px rgba(242,193,78,.85))}
.play .link:hover span{color:var(--mustard)}
/* things that fly: the drone hovers across the top, the paper plane glides across the film */
.fly{position:absolute; z-index:4; pointer-events:none; filter:drop-shadow(0 14px 14px rgba(0,0,0,.35))}
.fly.drone{width:clamp(64px,7vw,110px); top:5vh; left:0; animation:droneX 26s linear infinite, hover 2.3s ease-in-out infinite alternate}
.fly.plane{width:clamp(44px,4.6vw,74px); top:58%; left:0; animation:planeX 19s linear infinite; animation-delay:-6s}
@keyframes droneX{0%{translate:-14vw 0} 100%{translate:112vw 0}}
@keyframes hover{0%{margin-top:-8px; rotate:-5deg} 100%{margin-top:10px; rotate:4deg}}
@keyframes planeX{0%{translate:108vw 6vh; rotate:-14deg} 50%{translate:48vw -6vh; rotate:-4deg} 100%{translate:-14vw 3vh; rotate:-16deg}}
@media (prefers-reduced-motion:reduce){ .fly{display:none} .choice, .choice video{transition:none} }
@media (max-width:760px){ .question{font-size:clamp(24px,7vw,34px)} .fly.plane{top:70%} }

/* round fourteen: the opening answers its own question, with the Malayalam small underneath */
.starline{width:min(92vw,1100px)}
.starline small{display:block; margin-top:clamp(14px,2.2vh,26px); font-family:"Noto Sans Malayalam", sans-serif; font-style:normal; font-weight:500; font-size:clamp(13px,1.35vw,20px); line-height:1.6; letter-spacing:0; color:#F2C14E; opacity:.9; font-variation-settings:normal}

/* the definition is said quietly: smaller English, Malayalam close to the same weight */
.starline.mid{font-size:clamp(19px,2.15vw,32px); font-weight:500; line-height:1.3}
.starline.mid small{font-size:clamp(14px,1.45vw,21px); margin-top:clamp(14px,2.4vh,24px)}

.starline br.m{display:none}
@media (max-width:760px){ .starline br.m{display:inline} }

/* round fifteen: the controls are a whisper. No pill, no boxes, tiny icons, one word each */
.keys{background:none; backdrop-filter:none; padding:0; gap:16px; font-size:9px; letter-spacing:.24em; opacity:.5; transition:opacity .3s; text-shadow:0 1px 6px rgba(0,0,0,.6)}
.keys:hover{opacity:.95}
.keys span{gap:6px}
.keys span + span{padding-left:0; border-left:0}
.keys svg{width:9px; height:14px}
.keys .kc{width:auto; height:auto; border:0; font-size:11px; color:var(--mustard)}
.keys .kc + .kc{margin-left:-4px}
@media (max-width:760px){ .keys{padding:0; gap:14px} .keys span + span{padding-left:0} }

/* round seventeen: at the first stop the scroll hint sits on the right, quiet, with a falling arrow */
.hint.side{left:auto; right:66px; bottom:auto; top:50%; transform:translateY(-50%); background:none; backdrop-filter:none; padding:0; font-size:10px; letter-spacing:.3em; writing-mode:vertical-rl; color:var(--paper); text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hint.side.on{opacity:.75}
.hint.side::after{content:"\2193"; display:block; margin-top:12px; writing-mode:horizontal-tb; color:var(--mustard); font-size:16px; letter-spacing:0; animation:nudge 1.6s ease-in-out infinite}
@media (max-width:760px){ .hint.side{right:12px; font-size:9px} }
.hint.side::after{position:absolute; top:100%; left:50%; margin:10px 0 0 -5px}

/* round twenty five: the last page is one screen. Headline, the two cards, and a wide film frame cropped at the bottom, with the two names stitched inside it */
@media (min-width:761px){
  .ask{height:100svh; min-height:0; padding:5vh 5vw 2.2vh; grid-template-rows:auto auto auto minmax(0,1fr); --lw:min(1180px, 92vw, calc((100svh - 150px) * 1.3))}
  .choices{margin-top:1.6vh}
  .play{aspect-ratio:auto; height:auto; min-height:0; align-self:stretch; margin-top:clamp(12px,2vh,22px)}
  .play .fetch video, .play .fetch canvas.chase{position:absolute; left:0; top:64%; width:100%; height:auto; aspect-ratio:16/9; inset:auto; left:0; top:64%; transform:translateY(-64%)}      /* film and chase overlay stay one true 16:9 layer; the frame crops it, mostly at the bottom */
  .play .link.ig{top:7%} .play .link.yt{top:17%} .play .link.li{top:4%} .play .link.ml{top:14%}
}
.names{position:absolute; left:50%; bottom:clamp(8px,1.6vh,16px); transform:translateX(-50%); z-index:3; margin:0; font-family:"Noto Sans Malayalam", sans-serif; font-size:clamp(15px,1.5vw,20px); color:var(--paper); opacity:.92; white-space:nowrap; text-shadow:0 1px 8px rgba(0,0,0,.5); pointer-events:none}
.names span{font-family:var(--serif); font-style:italic; color:var(--mustard); margin:0 .25em}
.names{left:auto; right:clamp(16px,2.4vw,34px); transform:none}
@media (max-width:760px){ .names{font-size:13px; right:12px; bottom:8px} }

/* round twenty six: the names in English on the left of the frame, Malayalam on the right; three bubbles spread out to the right, Instagram stays */
.names.en{left:clamp(16px,2.4vw,34px); right:auto; font-family:var(--serif); font-variation-settings:"SOFT" 100, "WONK" 1; font-weight:600; font-size:clamp(16px,1.6vw,22px)}
.play .link.yt{left:45.5%} .play .link.li{left:58.5%} .play .link.ml{left:71.5%}
@media (max-width:760px){ .names.en{left:12px; font-size:14px} .play .link.yt{left:41%} .play .link.li{left:58%} .play .link.ml{left:75%} }

/* round twenty six b: big title names the side, the small line says how it is made */
.choice .sub{font-size:clamp(10px,.95vw,13px); letter-spacing:.3em; margin-top:2px}
@media (min-width:761px){ .choice .big{font-size:clamp(24px,3vw,46px)} }