:root{
  --red:#D01012; --yellow:#F5CD2F; --blue:#0055BF; --green:#237841;
  --ink:#1b1b1b; --cream:#fff8e6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0d0d0d;color:var(--ink);font-family:Nunito,system-ui,sans-serif;overflow:hidden}
.hidden{display:none!important}

/* ---------- opening stage: 16:9 that always covers the viewport ---------- */
.scene{position:fixed;inset:0;overflow:hidden;background:#000}
.stage{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);height:max(100vh,56.25vw);transform:translate(-50%,-50%);transition:transform 1.6s cubic-bezier(.6,0,.2,1)}
.stage.zoomGate{transform:translate(-50%,-50%) scale(2.4) translateY(4%)}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .18s ease}
.layer.on{opacity:1}
.kenburns{animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1) translateY(1.5%)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- title card ---------- */
.title-card{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);text-align:center;transition:opacity .6s,transform .6s}
.title-card.gone{opacity:0;transform:translate(-50%,40px);pointer-events:none}
.kicker{margin:0 0 .4rem;font:800 .85rem Nunito;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.brick-title{margin:0 0 1.4rem;line-height:.9}
.brick-title .word{display:inline-block;font:400 clamp(4rem,11vw,9rem) 'Lilita One';color:var(--yellow);
  -webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--red),0 12px 20px rgba(0,0,0,.5);
  animation:drop 1s cubic-bezier(.34,1.56,.64,1) both}
.brick-title .sub{display:block;margin-top:.6rem;font:400 clamp(1.3rem,3vw,2.2rem) 'Lilita One';color:#fff;text-shadow:0 3px 0 var(--ink),0 6px 14px rgba(0,0,0,.6);animation:drop 1s .25s cubic-bezier(.34,1.56,.64,1) both}
@keyframes drop{from{transform:translateY(-120px) scale(.8);opacity:0}to{transform:none;opacity:1}}

/* ---------- LEGO brick button ---------- */
.brick-btn{position:relative;font:400 1.35rem 'Lilita One';color:#5a4500;background:var(--yellow);border:0;border-radius:6px;padding:1.1rem 2.2rem .9rem;cursor:pointer;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 6px 0 #b08d12,0 12px 24px rgba(0,0,0,.35);transition:transform .15s;animation:pulse 2s ease-in-out infinite}
.brick-btn:hover{transform:translateY(-3px)}
.brick-btn:active{transform:translateY(4px);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 2px 0 #b08d12}
.brick-btn .studs{position:absolute;left:12%;right:12%;top:-10px;display:flex;justify-content:space-between}
.brick-btn .studs i{width:26px;height:12px;border-radius:6px 6px 2px 2px;background:var(--yellow);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}

/* ---------- speech bubble ---------- */
.bubble{position:absolute;max-width:min(34vw,420px);background:#fff;border:3px solid var(--ink);border-radius:18px;padding:.7rem 1rem;
  font:800 clamp(.95rem,1.35vw,1.25rem)/1.3 Nunito;box-shadow:0 6px 0 rgba(0,0,0,.25);opacity:0;transform:translate(-50%,-100%) scale(.6);transform-origin:50% 100%;
  transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:40}
.bubble.show{opacity:1;transform:translate(-50%,-100%) scale(1)}
.bubble::after{content:"";position:absolute;left:calc(50% + var(--tail,0px));bottom:-16px;margin-left:-10px;border:10px solid transparent;border-top:14px solid var(--ink)}
.bubble .who{display:block;font:400 .85em 'Lilita One';letter-spacing:.04em;margin-bottom:.15rem}
.bubble.j .who{color:#8E4B22}.bubble.l .who{color:var(--blue)}

/* ---------- click hotspots on the dolls ---------- */
.hot{position:absolute;width:13%;height:52%;transform:translateX(-50%);border:0;background:transparent;cursor:pointer;z-index:30;border-radius:40%}
.hot::after{content:"";position:absolute;left:50%;top:-6%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px rgba(255,255,255,.7);animation:ping 1.6s ease-out infinite}
.hot:hover::after{background:#fff}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}

/* ---------- golden glow ---------- */
.glow{position:absolute;inset:0;z-index:8;background:radial-gradient(circle at 50% 55%,#fff6c8 0%,#ffd84a 35%,rgba(255,200,40,0) 70%);opacity:0;pointer-events:none;transition:opacity 1.2s}
.glow.on{opacity:1}
.glow.pulse{animation:glowPulse 2.4s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.12}50%{opacity:.4}}
.glow.fast{transition:opacity .22s ease-in!important}
.glow.white{background:radial-gradient(circle at 50% 55%,#fff 0%,#fff6c8 40%,#ffd84a 75%,#f5b912 100%);transition:opacity .6s}

/* ---------- small controls ---------- */
.skip{position:absolute;z-index:20;border:0;cursor:pointer;font:800 .95rem Nunito;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.25)}
.sound{position:fixed;top:16px;right:16px;z-index:95;display:flex;align-items:center;gap:.4rem;height:42px;padding:0 .9rem 0 .7rem;border:0;cursor:pointer;
  border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font:800 .9rem Nunito;box-shadow:0 3px 0 rgba(0,0,0,.25),0 6px 16px rgba(0,0,0,.25);transition:transform .15s}
.sound:hover{transform:translateY(-2px)}
.sound .ico{font-size:1.15rem;line-height:1}
.sound[aria-pressed="true"]{background:var(--yellow);color:#5a4500}
.skip{bottom:18px;right:18px;padding:.6rem 1.1rem}

/* ---------- brick wall transition ---------- */
.brickwall{position:fixed;inset:0;z-index:50;pointer-events:none;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-auto-rows:calc(100vh / var(--rows))}
.brickwall .b{position:relative;margin:1px;border-radius:3px;transform:translateY(-120vh);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18)}
.brickwall .b::before{content:"";position:absolute;left:18%;right:18%;top:-7px;height:8px;border-radius:5px 5px 1px 1px;background:inherit;background-image:linear-gradient(90deg,transparent 0 40%,rgba(0,0,0,.12) 40% 60%,transparent 60%)}
.brickwall.build .b{animation:fall .55s cubic-bezier(.5,0,.75,0) forwards;animation-delay:var(--d)}
.brickwall.built .b{transform:none}
.brickwall.break .b{transform:none;animation:fly .6s cubic-bezier(.25,1,.5,1) forwards;animation-delay:var(--d)}
@keyframes fall{0%{transform:translateY(-120vh)}85%{transform:translateY(4px)}100%{transform:none}}
@keyframes fly{to{transform:translate(var(--fx),120vh) rotate(var(--fr));opacity:.9}}

/* ---------- chapter 1 preview ---------- */
.chapter{position:fixed;inset:0;overflow:hidden;background:#f6e3bf}
.workshop{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:50% 70%}
/* a soft shaft of sunlight falling from the window onto the bench */
.window-light{position:absolute;left:38%;top:14%;width:60%;height:80%;pointer-events:none;mix-blend-mode:screen;z-index:2;filter:blur(22px);animation:flicker 7s ease-in-out infinite}
.window-light::before{content:"";position:absolute;inset:0;clip-path:polygon(58% 0,95% 0,62% 100%,0 100%);
  background:linear-gradient(200deg,rgba(255,220,150,.34) 0%,rgba(255,214,140,.15) 45%,rgba(255,214,140,0) 85%)}
@keyframes flicker{50%{opacity:.7}}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,0) 55%,rgba(30,15,0,.55) 100%)}
.doll{position:absolute;bottom:9%;z-index:3;height:min(52vh,62vw);filter:drop-shadow(0 2px 1px rgba(40,20,0,.55)) drop-shadow(-10px 4px 8px rgba(40,20,0,.22));transform-origin:50% 100%}
/* contact shadow: the feet rest on the bench (positioned by JS under each doll) */
.contact{position:absolute;z-index:2;height:3.2vh;border-radius:50%;pointer-events:none;transform:translate(-50%,50%);
  background:radial-gradient(ellipse at 50% 50%,rgba(35,15,0,.6) 0%,rgba(35,15,0,.28) 45%,rgba(35,15,0,0) 72%)}
.doll.jhully{right:66%}
.doll.lizzie{left:42%}
@keyframes enter{from{transform:translateY(60vh)}to{transform:none}}
/* landing on the bench: a tiny squash at the end of the hop-in */
.doll.enter{animation:enter .55s cubic-bezier(.3,.9,.4,1) both,land .3s .55s ease-out}
@keyframes land{40%{transform:scale(1.04,.96)}}
.doll.clickable{cursor:pointer}
.doll.clickable:hover{filter:drop-shadow(0 2px 1px rgba(40,20,0,.55)) drop-shadow(-10px 4px 8px rgba(40,20,0,.22)) brightness(1.06)}
.click-hint{position:absolute;left:50%;bottom:3%;transform:translate(-50%,20px);margin:0;padding:.5rem 1rem;border-radius:999px;background:rgba(255,255,255,.9);font:800 .95rem Nunito;box-shadow:0 3px 0 rgba(0,0,0,.2);opacity:0;transition:opacity .5s,transform .5s;z-index:6}
.click-hint.show{opacity:1;transform:translate(-50%,0)}
.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.ch-title{position:absolute;right:4%;top:13%;max-width:24rem;text-align:right;padding:1rem 1.3rem;border-radius:14px;background:rgba(255,248,230,.88);box-shadow:0 8px 0 rgba(0,0,0,.18);z-index:4}
.ch-title h2{margin:.2rem 0;font:400 clamp(2.2rem,5vw,4rem) 'Lilita One';color:var(--red);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
.ch-title .kicker{color:var(--ink);text-shadow:none}
.ch-title .lead{margin:.3rem 0 0;font:800 1.1rem Nunito}

@media (max-width:1000px){
  .doll.jhully{right:60%}.doll.lizzie{left:50%}
  .bubble{max-width:60vw}
  .doll{height:min(44vh,46vw)}
  .ch-title{left:6%;right:6%;top:9%;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- time travel: 2026 -> 1932 ---------- */
.tunnel{position:fixed;inset:0;z-index:40;overflow:hidden;--age:0;perspective:900px;perspective-origin:50% 44%;
  background:radial-gradient(circle at 50% 45%,#3b2a07 0%,#140d04 55%,#070402 100%)}
/* act 1: the hovering golden brick */
.rays{position:absolute;left:50%;top:44%;width:140vmax;height:140vmax;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,214,90,.16) 0deg 6deg,rgba(255,214,90,0) 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.6) 25%,transparent 60%);mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.6) 25%,transparent 60%);animation:rays 60s linear infinite;transition:opacity .6s}
@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.gold-brick{position:absolute;left:50%;top:44%;width:clamp(170px,22vw,280px);transform:translate(-50%,-50%);filter:drop-shadow(0 0 28px rgba(255,205,60,.85)) drop-shadow(0 18px 18px rgba(0,0,0,.45));animation:float 3.6s ease-in-out infinite;z-index:3}
.gold-brick svg{display:block;width:100%;height:auto}
@keyframes float{0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}50%{transform:translate(-50%,-56%) rotate(2deg)}}
/* the dive: the camera falls into a stud, which opens like a portal */
.portal{position:absolute;left:50%;top:41%;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%) scale(0);z-index:4;pointer-events:none;
  background:radial-gradient(circle,#fffbe6 0%,#ffe27a 30%,#f5b912 55%,rgba(168,119,8,.9) 68%,transparent 70%)}
.tunnel.diving .gold-brick{animation:dive 1s cubic-bezier(.7,0,.9,.35) forwards}
.tunnel.diving .rays{opacity:0}
.tunnel.diving .portal{animation:portal 1.15s cubic-bezier(.65,0,.35,1) forwards}
@keyframes dive{to{transform:translate(-50%,-40%) scale(7);opacity:0}}
@keyframes portal{0%{transform:translate(-50%,-50%) scale(0)}55%{transform:translate(-50%,-50%) scale(26);opacity:1}100%{transform:translate(-50%,-50%) scale(70);opacity:0}}
.tunnel.riding .gold-brick,.tunnel.riding .rays{display:none}
/* act 2: the tunnel of brick rings */
.t-stage{position:absolute;inset:0;perspective:700px;perspective-origin:50% 44%;opacity:0;transition:opacity .7s}
.tunnel.riding .t-stage{opacity:1}
.t-world{position:absolute;left:50%;top:44%;transform-style:preserve-3d}
.t-ring{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform,opacity}
.t-brick{position:absolute;left:-46px;top:-21px;width:92px;height:42px;border-radius:4px;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.24),inset 0 3px 0 rgba(255,255,255,.3),0 0 0 1px rgba(0,0,0,.25)}
.t-brick::before{content:"";position:absolute;left:9px;right:9px;top:-8px;height:9px;background:inherit;border-radius:3px 3px 0 0;filter:brightness(1.15);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 14px,transparent 14px 20.6px);mask:repeating-linear-gradient(90deg,#000 0 14px,transparent 14px 20.6px)}
.t-ring.wood .t-brick{background-image:repeating-linear-gradient(98deg,rgba(60,30,8,.18) 0 2px,transparent 2px 7px,rgba(255,230,190,.12) 7px 8px,transparent 8px 13px);border-radius:7px}
.t-ring.wood .t-brick::before{display:none}
/* mechanical odometer */
.odo-wrap{position:absolute;left:50%;bottom:8%;transform:translate(-50%,30px);text-align:center;opacity:0;transition:opacity .6s,transform .6s;z-index:7}
.tunnel.riding .odo-wrap{opacity:1;transform:translate(-50%,0)}
.odo-label{display:block;margin-bottom:.55rem;font:800 .85rem Nunito;letter-spacing:.3em;text-transform:uppercase;color:#f6e3bf;text-shadow:0 2px 6px #000}
.odometer{display:inline-flex;gap:.07em;padding:.14em .18em;font:400 clamp(3.2rem,8.5vw,6.6rem)/1 'Lilita One';border-radius:.16em;
  background:linear-gradient(#3a2810,#140c04);box-shadow:inset 0 0 0 .06em #F5CD2F,0 .12em 0 #8a6507,0 14px 40px rgba(0,0,0,.7);filter:sepia(calc(var(--age)*.7))}
.wheel{display:block;position:relative;height:1em;width:.7em;overflow:hidden;border-radius:.07em;color:#1b1b1b;
  background:linear-gradient(#cfc6b0,#fffaf0 30%,#fffaf0 70%,#cfc6b0)}
.wheel::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),transparent 28%,transparent 72%,rgba(0,0,0,.35))}
.strip{display:block}
.strip b{display:block;height:1em;text-align:center;font-weight:400}
/* milestone polaroids */
.polaroid{position:absolute;left:50%;top:44%;margin:0;z-index:6;width:clamp(190px,19vw,270px);padding:10px 10px 12px;border-radius:3px;
  background:#fffdf5;box-shadow:0 22px 50px rgba(0,0,0,.6);will-change:transform,opacity;
  filter:sepia(calc(var(--age)*.75)) contrast(calc(1 + var(--age)*.08))}
.polaroid .ph{aspect-ratio:4/3;overflow:hidden;background:#ddd}
.polaroid .ph svg,.polaroid .ph img{display:block;width:100%;height:100%;object-fit:cover}
.polaroid figcaption{margin-top:8px;text-align:center;font:800 clamp(.8rem,1.1vw,1rem)/1.25 Nunito;color:#3a2a14}
.polaroid figcaption b{display:block;font:400 clamp(1.4rem,2.2vw,2rem)/1 'Lilita One';color:#C91A09;margin-bottom:.15rem}
/* film look: grain, projector flicker, vignette */
.grain{position:absolute;inset:-50%;z-index:8;pointer-events:none;opacity:.08;mix-blend-mode:overlay;animation:grain .45s steps(4) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-3%)}100%{transform:translate(2%,4%)}}
.flicker{position:absolute;inset:0;z-index:8;pointer-events:none;background:#fff1cf;mix-blend-mode:soft-light;opacity:0}
.tunnel.riding .flicker{animation:flick .16s steps(2) infinite}
@keyframes flick{0%{opacity:calc(var(--age)*.04)}50%{opacity:calc(var(--age)*.32)}}
.t-vignette{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 42%,rgba(0,0,0,calc(.35 + var(--age)*.45)) 100%)}
/* act 3: arrival */
.tunnel.arrived .flicker{animation:flick .09s steps(2) 12}
.tunnel.arrived .t-stage{transition:opacity 1.2s;opacity:.35}
.tunnel.arrived .odo-wrap{transform:translate(-50%,0) scale(1.08);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
/* dialogue avatars (act 1) */
.tb{position:absolute;bottom:6%;z-index:9;display:flex;align-items:flex-end;gap:.7rem;max-width:min(44vw,520px);opacity:0;transform:translateY(20px);transition:opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.tb.show{opacity:1;transform:none}
.tb.j{left:4%}.tb.l{right:4%;flex-direction:row-reverse;text-align:right}
.tb img{width:clamp(64px,8vw,104px);border-radius:50%;border:4px solid #fff;box-shadow:0 6px 0 rgba(0,0,0,.35);flex:none}
.tb p{margin:0;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:.7rem 1rem;font:800 clamp(.95rem,1.4vw,1.25rem)/1.3 Nunito;box-shadow:0 6px 0 rgba(0,0,0,.3)}
.tb b{display:block;font:400 .85em 'Lilita One';color:#8E4B22}.tb.l b{color:var(--blue)}
.tunnel.riding .tb{opacity:0}
.stamp{position:absolute;left:50%;top:40%;z-index:9;transform:translate(-50%,-50%) rotate(-6deg) scale(2.6);padding:.6rem 1.4rem;border:5px solid #f6e3bf;border-radius:10px;
  font:400 clamp(1.6rem,4vw,3rem) 'Lilita One';color:#f6e3bf;letter-spacing:.06em;opacity:0;text-shadow:0 3px 10px #000;box-shadow:0 0 0 3px rgba(0,0,0,.3)}
.stamp.show{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stamp{to{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}}

/* chapter 1 starts as an old sepia photo and comes to life */
.chapter.old .workshop{filter:sepia(1) contrast(1.1) brightness(.9)}

/* sound hints */
.sound-tip{position:absolute;top:22px;right:150px;z-index:20;margin:0;padding:.45rem .9rem;border-radius:999px;background:rgba(255,255,255,.9);font:800 .9rem Nunito;box-shadow:0 3px 0 rgba(0,0,0,.25);transition:opacity .5s}
.title-card.gone ~ .sound-tip{opacity:0;pointer-events:none}
.audio-warn{position:fixed;left:50%;top:18px;transform:translate(-50%,-140%);z-index:90;border:0;cursor:pointer;padding:.7rem 1.2rem;border-radius:12px;background:var(--yellow);color:#5a4500;font:800 1rem Nunito;box-shadow:0 5px 0 #b08d12;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.audio-warn.show{transform:translate(-50%,0)}

/* tunnel opening out of the golden light the discovery clip ends on */
.tunnel::before{content:"";position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 55%,#fffdf0 0%,#fff3c4 35%,#f2c64a 75%,#e8b02a 100%)}
.tunnel.from-gold::before{opacity:1}
.tunnel.from-gold.gold-out::before{opacity:0;transition:opacity 1.1s ease-in .15s}
.tunnel.from-gold .gold-brick,.tunnel.from-gold .rays,.tunnel.from-gold .portal{display:none}

/* off-screen narration (cinema subtitles) */
.vo{position:absolute;left:50%;bottom:9%;z-index:40;margin:0;max-width:min(80vw,760px);transform:translate(-50%,12px);opacity:0;text-align:center;
  padding:.6rem 1.2rem;border-radius:12px;background:rgba(10,8,4,.62);color:#fff;font:800 clamp(1rem,1.7vw,1.45rem)/1.35 Nunito;text-shadow:0 2px 6px #000;
  transition:opacity .35s,transform .45s}
.vo.show{opacity:1;transform:translate(-50%,0)}
.vo .who{display:block;font:400 .8em 'Lilita One';letter-spacing:.06em;color:var(--yellow)}
.vo.l .who{color:#9cc7ff}

/* Jhully and Lizzie flying through the tunnel; they turn into wooden toys on the way */
.flyers{position:absolute;left:50%;top:40%;z-index:5;width:min(70vw,860px);height:min(46vh,420px);transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;
  transition:transform 1.1s cubic-bezier(.2,.9,.3,1.1),opacity .5s}
.tunnel.riding .flyers{transform:translate(-50%,-50%) scale(1);opacity:1}
.tunnel.arrived .flyers{transform:translate(-50%,10%) scale(1.25);opacity:0;transition:transform .9s ease-in,opacity .7s .2s}
.flyer{position:absolute;top:0;width:44%;height:100%;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,210,90,.35))}
.flyer.j{left:6%;animation:flyJ 2.2s ease-in-out infinite}
.flyer.l{right:6%;animation:flyL 2.6s ease-in-out infinite}
@keyframes flyJ{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(10px,-16px) rotate(-3deg)}}
@keyframes flyL{0%,100%{transform:translate(0,-6px) rotate(9deg)}50%{transform:translate(-12px,12px) rotate(15deg)}}
.flyer img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .6s}
.flyer .wood{opacity:0}
.tunnel.wooden .flyer .med{opacity:0}
.tunnel.wooden .flyer .wood{opacity:1}
.tunnel.wooden .flyer::after{content:"";position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,rgba(255,236,170,.9),transparent 70%);animation:poof .7s ease-out forwards}
@keyframes poof{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}
/* arrival: the label above the counter becomes the place — 1932 is shown only once */
.odo-label{transition:opacity .25s}
.odo-label.place{font:400 clamp(1.3rem,2.6vw,2rem) 'Lilita One';letter-spacing:.06em;text-transform:none;color:#f6e3bf}

/* ---------- chapter 1: scrolling story over the workshop ---------- */
.chapter.exploring{overflow-y:auto;scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:y proximity}
.beat{scroll-snap-align:center}
.chapter.exploring::-webkit-scrollbar{display:none}
.chapter .workshop{transition:filter 2.4s ease}
.chapter.exploring .workshop{filter:brightness(.5) saturate(.85);transition-duration:.9s}
.chapter.exploring .window-light{opacity:.45}
.ch-title{transition:opacity .6s,transform .6s}
.chapter.exploring .ch-title{opacity:0;transform:translateY(-12px);pointer-events:none}
/* the dolls stay on the bench, only smaller and in the right corner */
.doll{transition:height .8s ease,right .8s ease,left .8s ease}
.chapter.exploring .doll{height:min(30vh,18vw)}
.chapter.exploring .doll.jhully{right:17%}
.chapter.exploring .doll.lizzie{left:84%}

/* the timeline ruler (the only place that shows years) */
.ruler{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:22px;padding:10px 30px 26px 12px;
  border-radius:16px;background:rgba(24,16,8,.82);border:2px solid #d9a35f;box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none}
.r-now{min-width:4.2rem;text-align:center;padding:.3rem .7rem .2rem;border-radius:10px;background:var(--red);color:#fff;font:400 1.6rem/1 'Lilita One';box-shadow:0 4px 0 #8a0b0c;margin-top:16px}
.r-now.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.18)}}
.r-track{position:relative;width:min(620px,42vw);height:4px;margin-top:16px;border-radius:2px;background:rgba(255,255,255,.25)}
.r-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:#d9a35f;box-shadow:0 0 8px rgba(255,200,120,.6);transition:width .7s ease}
.r-tick{position:absolute;top:12px;transform:translateX(-50%);font:400 .85rem 'Lilita One';color:rgba(255,255,255,.35)}
.r-tick::before{content:"";position:absolute;left:50%;top:-14px;width:2px;height:8px;margin-left:-1px;background:currentColor}
.r-tick.open{color:#f3d2a0}
.r-mark{position:absolute;top:-7px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--red);border:3px solid #fff;box-sizing:border-box;box-shadow:0 0 0 4px rgba(208,16,18,.35);transition:left .7s cubic-bezier(.34,1.3,.64,1)}
.r-label{position:absolute;left:0;top:-18px;font:800 .7rem Nunito;letter-spacing:.12em;text-transform:uppercase;color:#d9a35f}

/* the "scroll to explore" wooden tag */
.explore-tag{position:absolute;left:50%;bottom:4%;z-index:45;transform:translate(-50%,30px);opacity:0;pointer-events:none;
  font:400 1.2rem 'Lilita One';color:#4a2c10;padding:.75rem 1.6rem;border:3px solid #6b4423;border-radius:10px;cursor:pointer;
  background:repeating-linear-gradient(100deg,#e2b77c 0 14px,#d9ab6e 14px 22px);box-shadow:0 6px 0 #6b4423,0 10px 24px rgba(0,0,0,.4);transition:opacity .5s,transform .5s}
.explore-tag.show{opacity:1;pointer-events:auto;transform:translate(-50%,0);animation:nudge 1.8s 1s ease-in-out infinite}
.explore-tag span{display:inline-block;margin-left:.3rem}
@keyframes nudge{50%{transform:translate(-50%,6px)}}
.chapter.exploring .explore-tag{opacity:0;pointer-events:none;animation:none}

/* the scrolling story */
.ch-scene{position:sticky;top:0;height:100vh;overflow:hidden}
.story{position:relative;z-index:20;margin-top:-100vh;pointer-events:none}
.beat{min-height:100vh;display:flex;align-items:center;padding:12vh 0 6vh 5vw;box-sizing:border-box}
.beat[data-key="intro"]{min-height:100vh}
.card{pointer-events:auto;width:min(40vw,560px);box-sizing:border-box;padding:1.4rem 1.6rem 1.1rem;border-radius:16px;background:rgba(255,248,230,.96);
  box-shadow:0 10px 0 rgba(0,0,0,.18),0 20px 50px rgba(0,0,0,.35);border:3px solid #6b4423;
  opacity:0;transform:translateY(40px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.3,1)}
.beat.in .card{opacity:1;transform:none}
.card.wide{width:min(58vw,820px)}
.c-kicker{margin:0;font:800 .8rem Nunito;letter-spacing:.12em;text-transform:uppercase;color:#8E4B22}
.card h3{margin:.15rem 0 .7rem;font:400 clamp(1.8rem,3vw,2.6rem) 'Lilita One';color:var(--red);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}
.card p{margin:.6rem 0;font:600 1.08rem/1.5 Nunito;color:#2a2118}
.card strong{font-weight:800}
.card .src{font-size:.8rem;color:#7a6a58;margin-top:.9rem}
.card .src a{color:#8E4B22}
.card.next ul{margin:.3rem 0 .4rem;padding-left:1.2rem;font:800 1.1rem/1.8 Nunito;color:#2a2118}

/* 1932: one in three out of work */
.jobless{display:flex;align-items:center;gap:1.2rem;margin:.4rem 0 .6rem;padding:.8rem 1rem;border-radius:12px;background:#f1e0c0}
.people{display:grid;grid-template-columns:repeat(10,16px);gap:5px}
.people i{width:16px;height:22px;border-radius:7px 7px 3px 3px;background:#c99a5e;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15);transform:scale(.4);opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s,background .5s}
.beat.in .people i{transform:none;opacity:1}
.people i.out{background:#5d5148}
.jl-num b{display:block;font:400 2.6rem/1 'Lilita One';color:var(--red)}
.jl-num span{font:800 .85rem/1.3 Nunito;color:#5a4632}

/* Did you know? flip card */
.dyk{display:block;width:100%;height:96px;margin:.8rem 0 .2rem;padding:0;border:0;background:none;cursor:pointer;perspective:800px;font:inherit}
.dyk-in{position:relative;display:block;height:100%;transition:transform .6s cubic-bezier(.3,.9,.4,1);transform-style:preserve-3d}
.dyk[aria-pressed="true"] .dyk-in{transform:rotateY(180deg)}
.dyk-front,.dyk-back{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;border-radius:12px;backface-visibility:hidden;padding:.6rem 1rem;box-sizing:border-box;text-align:left}
.dyk-front{background:var(--yellow);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.dyk-front b{font:400 1.35rem 'Lilita One';color:var(--ink)}
.dyk-front small{font:800 .8rem Nunito;color:#5a4500}
.dyk-back{display:block;padding-top:.75rem;transform:rotateY(180deg);background:#fff;border:3px solid var(--ink);font:600 .98rem/1.4 Nunito;color:#2a2118}

/* the wooden duck */
.duck-stage{display:flex;justify-content:center;padding:.2rem 0;border-radius:12px;background:#f1e0c0}
.duck{width:220px;height:170px;overflow:visible}
.beat.in .duck-stage .duck{animation:roll 3s ease-in-out infinite}
@keyframes roll{0%,100%{transform:translateX(-30px)}50%{transform:translateX(30px)}}
.duck .wheel{animation:spin 1.5s linear infinite;transform-box:fill-box;transform-origin:center}
.duck .beak-low{animation:quack .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:0 0}
@keyframes spin{to{rotate:360deg}}
@keyframes quack{to{rotate:14deg}}

/* Then & Now comparator */
.tn{position:relative;height:300px;border-radius:14px;overflow:hidden;border:3px solid var(--ink);user-select:none;cursor:ew-resize}
.tn-side{position:absolute;inset:0;display:flex;align-items:center;gap:1rem;padding:0 2rem;box-sizing:border-box}
.tn-side.then{background:repeating-linear-gradient(95deg,#ead0a4 0 18px,#e3c493 18px 30px);justify-content:flex-start}
.tn-side.now{background:#f6f1e7 radial-gradient(circle,#e9e0cf 2px,transparent 2.5px) 0 0/18px 18px;justify-content:flex-end;clip-path:inset(0 0 0 var(--x))}
.tn-side.now dl{order:-1;text-align:right}
.tn .duck{width:min(220px,16vw);height:auto;flex:none}
.tn dl{margin:0;font:700 1rem/1.55 Nunito;color:#2a2118}
.tn dt{font:400 2rem 'Lilita One';color:var(--red)}
.tn dd{margin:0}
.tn-handle{position:absolute;top:0;bottom:0;left:var(--x);width:4px;margin-left:-2px;background:var(--ink);pointer-events:none}
.tn-handle span{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font:800 1.2rem Nunito}
.tn-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.tn-hint{text-align:center;font:800 .85rem Nunito!important;color:#7a6a58!important;margin:.5rem 0 0!important}

/* Collector's Corner */
.corner{position:absolute;right:3%;top:13%;z-index:22;width:min(26vw,360px);max-height:42vh;box-sizing:border-box;padding:1rem 1.1rem;border-radius:14px;
  background:rgba(27,27,27,.88);color:#f6ead2;border:2px solid #d9a35f;box-shadow:0 12px 30px rgba(0,0,0,.45);
  opacity:0;transform:translateX(30px);transition:opacity .6s,transform .6s}
.chapter.exploring .corner.show{opacity:1;transform:none}
.c-head{margin:0 0 .5rem;display:flex;align-items:center;gap:.5rem;font:400 1.15rem 'Lilita One';color:#f3c56b}
.c-box{width:22px;height:16px;border-radius:3px;background:#d9a35f;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);position:relative}
.c-box::before{content:"";position:absolute;left:4px;right:4px;top:-4px;height:4px;background:radial-gradient(circle at 3px 2px,#d9a35f 2px,transparent 2.5px) 0 0/7px 4px}
.c-body p{margin:.35rem 0;font:600 .98rem/1.45 Nunito}
.c-body b{color:#ffd98a}
.c-body .val{display:inline-block;margin-top:.3rem;padding:.15rem .6rem;border-radius:999px;background:#d9a35f;color:#2a1a08;font:800 .85rem Nunito}
.c-body.swap{animation:cswap .45s}
@keyframes cswap{from{opacity:0;transform:translateY(8px)}}

/* "there is more below": a Next button on every card + a mouse hint at the bottom */
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem;padding-top:.8rem;border-top:2px dashed rgba(107,68,35,.35)}
.step{font:800 .85rem Nunito;color:#8E4B22;letter-spacing:.06em}
.next-btn{font:400 1.05rem 'Lilita One';color:#fff;background:var(--red);border:0;border-radius:10px;padding:.55rem 1rem .45rem;cursor:pointer;box-shadow:0 4px 0 #8a0b0c;transition:transform .15s}
.next-btn:hover{transform:translateY(-2px)}
.next-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #8a0b0c}
.next-btn span{display:inline-block;margin-left:.35rem;animation:arrowDown 1.4s ease-in-out infinite}
@keyframes arrowDown{50%{transform:translateY(4px)}}
.scroll-hint{position:fixed;left:50%;bottom:22px;z-index:31;transform:translate(-50%,10px);display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem .5rem .7rem;border-radius:999px;
  background:rgba(24,16,8,.82);border:2px solid #d9a35f;color:#f6ead2;font:800 .95rem Nunito;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s}
.scroll-hint.show{opacity:1;transform:translate(-50%,0)}
.scroll-hint .mouse{position:relative;width:18px;height:28px;border:2px solid #f6ead2;border-radius:10px;box-sizing:border-box}
.scroll-hint .mouse i{position:absolute;left:50%;top:5px;width:4px;height:6px;margin-left:-2px;border-radius:2px;background:#f3c56b;animation:wheel 1.4s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{opacity:0}}

/* Only the best: carved sign + the three coats */
.sign{display:flex;flex-direction:column;align-items:center;padding:.8rem 1rem;border-radius:10px;border:3px solid #6b4423;
  background:repeating-linear-gradient(100deg,#c48a4f 0 16px,#b97f45 16px 26px);box-shadow:inset 0 0 0 3px rgba(255,255,255,.15),0 4px 0 #6b4423}
.sign span{font:400 1.7rem/1.15 'Lilita One';color:#3d2410;text-shadow:0 1px 0 rgba(255,255,255,.35),0 -1px 0 rgba(0,0,0,.35)}
.coats{display:flex;align-items:center;gap:8px;margin:.7rem 0 .2rem}
.coats i{width:46px;height:14px;border-radius:7px;background:linear-gradient(90deg,#f6d79b,#e9b866);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.beat.in .coats i{transform:none}
.beat.in .coats i:nth-child(2){transition-delay:.4s}
.beat.in .coats i.missing{transition-delay:1.2s}
.coats b{margin-left:.4rem;font:800 .9rem Nunito;color:#8E4B22}

/* A name: LEGO */
.name-play{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-radius:12px;background:#f1e0c0}
.words span{display:block;font:400 1.6rem 'Lilita One';color:#7a5a3a}
.words span b{font-weight:400;color:var(--red)}
.words small{font:800 .8rem Nunito;color:#8E4B22}
.blocks{display:flex;gap:6px}
.blocks i{display:flex;align-items:center;justify-content:center;width:44px;height:48px;border-radius:6px;border:3px solid #6b4423;font:400 1.6rem 'Lilita One';font-style:normal;color:#fff;
  background:repeating-linear-gradient(100deg,#d9a35f 0 10px,#cf9853 10px 16px);text-shadow:0 2px 0 #6b4423;transform:translateY(-60px);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.beat.in .blocks i{transform:none;opacity:1}
.blocks i:nth-child(2){transition-delay:.15s}.blocks i:nth-child(3){transition-delay:.3s}.blocks i:nth-child(4){transition-delay:.45s}

/* Fire, then plastic */
.to-plastic{display:flex;align-items:center;justify-content:center;gap:1.4rem;padding:.9rem;border-radius:12px;background:#f1e0c0}
.wblock{position:relative;width:96px;height:62px;border-radius:5px;border:3px solid #6b4423;background:repeating-linear-gradient(100deg,#d9a35f 0 12px,#cf9853 12px 20px)}
.flames{position:absolute;left:8px;right:8px;bottom:40px;display:flex;justify-content:space-around}
.flames i{width:20px;height:30px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:radial-gradient(circle at 50% 75%,#ffe27a,#f08a24 55%,#d01012);transform-origin:50% 100%;animation:flame .5s ease-in-out infinite alternate}
.flames i:nth-child(2){height:38px;animation-delay:-.2s}
@keyframes flame{to{transform:scaleY(1.25) skewX(6deg)}}
.to-plastic .arrow{font:800 1.8rem Nunito;color:#8E4B22}
.pbrick{width:120px;height:80px;transform:scale(.3) rotate(-20deg);opacity:0;transition:transform .7s 1s cubic-bezier(.34,1.56,.64,1),opacity .4s 1s}
.beat.in .pbrick{transform:none;opacity:1}
/* the workshop glows orange while the fire card is on screen */
.chapter.fire .workshop{filter:brightness(.55) sepia(.7) saturate(2.2) hue-rotate(-12deg)}

/* ---------- build the duck ---------- */
.b-instr{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.b-instr b{font:400 1.3rem 'Lilita One';color:var(--red);white-space:nowrap}
.bench{display:flex;align-items:flex-start;justify-content:center;gap:1.2rem;margin-top:.4rem}
.tray{flex:0 0 150px;display:flex;flex-direction:column;gap:.5rem;padding:.6rem;border-radius:12px;background:#e6cfa6;border:3px dashed #a77a45}
.part{display:flex;align-items:center;justify-content:center;height:62px;padding:4px;border:2px solid transparent;border-radius:10px;background:#f6e8cc;cursor:grab;touch-action:none;transition:transform .15s,border-color .15s,opacity .2s}
.part:hover{transform:translateY(-2px);border-color:#a77a45}
.part.picked{border-color:var(--red);box-shadow:0 0 0 3px rgba(208,16,18,.25)}
.part.used{opacity:0;pointer-events:none}
.part svg{max-width:100%;max-height:100%;overflow:visible}
.part.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.board{position:relative;flex:0 1 420px;aspect-ratio:220/170;border-radius:12px;background:#f1e0c0 radial-gradient(circle,#e3cc9f 1.5px,transparent 2px) 0 0/16px 16px;border:3px solid #6b4423;overflow:hidden}
.ghost{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#a77a45;stroke-width:2;stroke-dasharray:6 5;opacity:.8}
.duck-built{position:absolute;inset:0}
.slot{position:absolute;border-radius:12px;transition:background .2s}
.slot.hot{background:rgba(208,16,18,.12);outline:2px dashed var(--red)}
.slot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:place .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes place{from{transform:scale(1.25);opacity:.4}}
.drag-ghost{position:fixed;z-index:200;pointer-events:none;filter:drop-shadow(0 10px 10px rgba(0,0,0,.35));transform:translate(-50%,-50%) rotate(-4deg)}
.drag-ghost svg{width:100%;height:100%;overflow:visible}
/* the finished duck comes alive */
.board.alive .ghost{opacity:0;transition:opacity .4s}
.board.alive .duck-built{animation:roll 3s ease-in-out infinite}
.board.alive .slot[data-part="wheel"] svg{animation:spin 1.5s linear infinite}
.board.alive .beak-low{animation:quack .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:0 0}
.b-done{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s,opacity .6s,margin .6s}
.b-done.show{max-height:120px;opacity:1;margin-top:.8rem}
.b-done p{margin:0}
.gold-btn{position:relative;flex:none;font:400 1.25rem 'Lilita One';color:#5a4500;background:linear-gradient(#ffe27a,#f5b912);border:3px solid #a87708;border-radius:8px;padding:.9rem 1.4rem .6rem;cursor:pointer;box-shadow:0 5px 0 #a87708,0 0 24px rgba(255,210,80,.7);animation:goldPulse 1.6s ease-in-out infinite}
.gold-btn:disabled{filter:grayscale(1);opacity:.5;animation:none;cursor:default}
.gb-studs{position:absolute;left:12px;right:12px;top:-9px;display:flex;justify-content:space-around}
.gb-studs i{width:18px;height:9px;border-radius:5px 5px 2px 2px;background:#ffd84d;border:2px solid #a87708;border-bottom:0}
@keyframes goldPulse{50%{box-shadow:0 5px 0 #a87708,0 0 40px rgba(255,210,80,1)}}

/* shelf counter (in the ruler panel) */
.shelf{display:flex;align-items:center;gap:.45rem;margin:16px 0 0 4px;padding:.3rem .7rem;border-radius:10px;background:rgba(255,255,255,.08);color:#f6ead2;font:800 .95rem Nunito}
.shelf b{font:400 1.2rem 'Lilita One';color:#f3c56b}
.shelf small{font:800 .7rem Nunito;letter-spacing:.1em;text-transform:uppercase;color:#d9a35f}
.sh-ico{width:20px;height:16px;border:2px solid #d9a35f;border-top-width:0;border-radius:0 0 3px 3px;box-shadow:inset 0 -5px 0 rgba(217,163,95,.35)}
.shelf.bump{animation:bump .6s}

/* collector card */
.cc-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(10,6,2,.6);opacity:0;pointer-events:none;transition:opacity .4s}
.cc-wrap.show{opacity:1;pointer-events:auto}
.ccard{width:290px;padding:1rem 1.1rem 1.2rem;border-radius:16px;text-align:center;background:linear-gradient(#fff8e6,#f3e0bb);border:6px solid #b98a4f;
  box-shadow:0 0 0 3px #6b4423,0 20px 60px rgba(0,0,0,.6),0 0 60px rgba(255,210,80,.45);transform:rotateY(90deg) scale(.6)}
.cc-wrap.show .ccard{animation:ccIn .8s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes ccIn{to{transform:none}}
.cc-no{margin:0;font:800 .75rem Nunito;letter-spacing:.14em;text-transform:uppercase;color:#8E4B22}
.cc-art{margin:.5rem 0;border-radius:10px;background:repeating-linear-gradient(95deg,#ead0a4 0 18px,#e3c493 18px 30px);border:3px solid #6b4423}
.cc-art .duck{width:200px;height:150px}
.ccard h4{margin:.2rem 0;font:400 1.7rem 'Lilita One';color:var(--red);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink)}
.cc-meta{display:flex;justify-content:space-between;margin:.2rem .3rem;font:400 1.1rem 'Lilita One';color:#4a2c10}
.cc-rare{color:#e2a400;letter-spacing:.1em}
.cc-rare i{font-style:normal;color:#c9b38e}
.cc-fact{font:600 .92rem/1.4 Nunito;color:#2a2118;margin:.5rem 0 .9rem}

/* wood -> plastic, on the way to 1958 */
.to58{position:fixed;inset:0;z-index:28;pointer-events:none;visibility:hidden}
.to58.on{visibility:visible;pointer-events:auto}
.tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(9,1fr);perspective:900px}
.tile{position:relative;transform-style:preserve-3d;transform:translateY(-110vh);transition:transform .55s cubic-bezier(.3,.9,.4,1)}
.tile.in{transform:none}
.tile.flip{transform:rotateY(180deg);transition:transform .6s cubic-bezier(.3,.9,.4,1.2)}
.tile b,.tile s{position:absolute;inset:-1px;backface-visibility:hidden;border-radius:3px}
.tile b{background:repeating-linear-gradient(100deg,#d9a35f 0 12px,#cf9853 12px 20px);box-shadow:inset 0 0 0 2px rgba(107,68,35,.6)}
.tile s{transform:rotateY(180deg);background:var(--c) radial-gradient(circle at 50% 50%,rgba(255,255,255,.35) 0 22%,rgba(0,0,0,.18) 24%,transparent 27%) 0 0/50% 50%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),inset 0 -6px 0 rgba(0,0,0,.15)}
.doll58{position:absolute;bottom:9vh;height:46vh;opacity:0;transform:translateY(60vh);filter:drop-shadow(0 10px 12px rgba(0,0,0,.45));transition:transform .6s cubic-bezier(.3,.9,.4,1.1),opacity .3s}
.doll58.j{left:34%}.doll58.l{left:52%}
.to58.dolls .doll58{opacity:1;transform:none}
.t58-card{position:absolute;right:5%;top:50%;width:min(30vw,420px);padding:1.4rem 1.6rem;border-radius:16px;background:#fff;border:4px solid var(--ink);box-shadow:0 10px 0 rgba(0,0,0,.25);transform:translate(120%,-50%);transition:transform .7s cubic-bezier(.3,1.2,.5,1)}
.to58.done .t58-card{transform:translate(0,-50%)}
.t58-card h3{margin:.1rem 0 .4rem;font:400 2.6rem 'Lilita One';color:var(--blue);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}
.t58-card p{font:600 1.05rem Nunito}
/* the plastic dolls stand on a green baseplate in front of the brick wall */
.floor58{position:absolute;left:0;right:0;bottom:0;height:12vh;background:#237841 radial-gradient(circle at 50% 40%,#3a9a5a 0 26%,#1d6536 30%,transparent 34%) 0 0/28px 22px;
  box-shadow:inset 0 6px 0 rgba(255,255,255,.18),0 -10px 30px rgba(0,0,0,.35);transform:translateY(100%);transition:transform .5s cubic-bezier(.3,.9,.4,1)}
.to58.dolls .floor58{transform:none}
.shadow58{position:absolute;bottom:8vh;height:3vh;width:13vw;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.45),rgba(0,0,0,0) 70%);opacity:0;transition:opacity .4s .4s}
.shadow58.j{left:calc(34% + 7vw)}.shadow58.l{left:calc(52% + 7vw)}
.to58.dolls .shadow58{opacity:1}
.tray{transition:opacity .5s}
.build.finished .tray{opacity:0}

/* ---------- pieces in the biggest set: mini model in the ruler panel ---------- */
.r-build{display:flex;align-items:center;gap:.5rem;margin:16px 0 0 4px;padding:.2rem .7rem .2rem .3rem;border-radius:10px;background:rgba(255,255,255,.08)}
.mini-model{width:58px;height:44px;overflow:visible}
.mini-model rect{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.3,1.3,.5,1),opacity .35s}
.mini-model rect.out{opacity:0}
.mm-text{display:flex;flex-direction:column;line-height:1}
.mm-text b{font:400 1.35rem 'Lilita One';color:#f3c56b}
.mm-text small{font:800 .62rem Nunito;letter-spacing:.08em;text-transform:uppercase;color:#d9a35f;white-space:nowrap;margin-top:2px}
.r-build.grow{animation:bump .6s}

/* ---------- First & Last ---------- */
.fl{display:grid;grid-template-columns:1fr 1.35fr;gap:1rem}
.fl-side{border-radius:12px;padding:.8rem 1rem;text-align:center}
.fl-side.first{background:repeating-linear-gradient(95deg,#ead0a4 0 18px,#e3c493 18px 30px)}
.fl-side.last{background:#f6f1e7}
.fl-tag{margin:0 0 .3rem!important;font:800 .78rem Nunito!important;letter-spacing:.1em;text-transform:uppercase;color:#8E4B22!important}
.fl-side .duck{width:170px;height:130px}
.fl-num{margin:.3rem 0 .1rem!important;font:400 1.2rem 'Lilita One'!important;color:#4a2c10!important}
.fl-num b{font-weight:400;font-size:2.4rem;color:var(--red)}
.fl-cap{font-size:.9rem!important;margin:0!important}
.giftbox{position:relative;min-height:150px;border-radius:10px;border:3px solid #6b4423;background:#efe2c6;padding:8px;box-sizing:border-box;overflow:hidden}
.gb-lid{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:6px;
  background:repeating-linear-gradient(45deg,#c9a46a 0 14px,#bf9a5f 14px 28px);transition:transform .7s cubic-bezier(.5,0,.3,1),opacity .7s}
.gb-lid span{padding:.4rem .9rem;border-radius:6px;background:#fff8e6;border:2px solid #6b4423;font:400 1.05rem 'Lilita One';color:#6b4423}
.giftbox.open .gb-lid{transform:translateY(-110%) rotate(-6deg);opacity:0}
.units{display:flex;flex-direction:column;gap:6px;text-align:left}
.u-group{display:flex;align-items:flex-start;gap:8px}
.u-group em{flex:0 0 5.6rem;font:800 .72rem/1.2 Nunito;font-style:normal;color:#5a4632;padding-top:1px}
.u-group em b{display:block;font:400 1rem 'Lilita One';color:#4a2c10}
.u-cells{display:flex;flex-wrap:wrap;gap:2px}
.u-cells i{width:11px;height:8px;border-radius:2px;background:var(--c);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);opacity:0;transform:translateY(-18px)}
.u-cells i.on{opacity:1;transform:none;transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1)}
.open-box{margin-top:.4rem}
.open-box[disabled]{visibility:hidden}
.shelf span{white-space:nowrap}
.fl-set{display:flex;gap:.8rem;align-items:center;margin:.2rem 0 .6rem;text-align:left}
.fl-set img{width:96px;height:96px;object-fit:cover;border-radius:50%;border:3px solid #6b4423;flex:none;background:#fff}
.fl-set h4{margin:0;font:400 1.2rem 'Lilita One';color:var(--red)}
.fl-set p{margin:.15rem 0!important;font-size:.9rem!important;line-height:1.35!important}
.fl-set a{font:800 .85rem Nunito;color:#8E4B22}
.giftbox{min-height:120px}
.mm-text em{font:800 .6rem Nunito;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#f6ead2;opacity:.85;margin-bottom:2px;white-space:nowrap}