:root{
  /* IBM Plex Sans Condensed Condensedd Condenseddd Condensed** used sparingly for tiny annotations and specimen tags. */
  --ink:#15121A;
  --pink:#FF4FA3;
  --violet:#5B3DF5;
  --blue:#43D7FF;
  --custard:#FFF2B8;
  --green:#B6F05C;
  --orange:#FF6B35;
  --display:"Bowlby One SC", "Inter", sans-serif;
  --serif:"Fraunces", serif;
  --body:"Nunito Sans", "inter", sans-serif;
  --tag:"IBM Plex Sans Condensed", "IBM Plex", sans-serif;
  --wobble:37;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;color:var(--ink);font-family:var(--body);overflow-x:hidden;background:var(--custard);cursor:crosshair}
button,input{font:inherit;color:inherit}
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.18;background-image:radial-gradient(var(--ink) 1px,transparent 1px),radial-gradient(var(--pink) .8px,transparent .8px);background-size:9px 9px,13px 13px;background-position:0 0,4px 7px;mix-blend-mode:multiply}
.cabinet{position:relative}
.scene{min-height:100vh;position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);padding:clamp(22px,4vw,60px);border-bottom:7px solid var(--ink);isolation:isolate}
.scene:before{content:"";position:absolute;inset:16px;border:3px solid var(--ink);border-radius:34px 12px 48px 18px;pointer-events:none;box-shadow:9px 9px 0 rgba(21,18,26,.16);z-index:0}
.odd-tabs{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.tab{display:block;text-decoration:none;background:var(--green);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:9px 12px;font-family:var(--tag);font-weight:700;border-radius:2px 18px 4px 14px;transform:rotate(var(--rot,-3deg));transition:transform .25s cubic-bezier(.2,1.6,.4,1),background .25s}
.tab:nth-child(2){--rot:4deg;background:var(--pink)}.tab:nth-child(4){--rot:-8deg;background:var(--blue)}.tab:nth-child(5){--rot:5deg;background:var(--orange)}.tab:nth-child(6){--rot:-2deg;background:var(--custard)}
.tab:hover{transform:translateX(-8px) rotate(calc(var(--rot,0deg) * -1));background:var(--custard)}.missing{opacity:.55;text-decoration:line-through}.runaway-tab.evade{transform:translateX(-35px) rotate(15deg)}

.scene-backdrop{position:absolute;inset:0;background:var(--custard);z-index:-2}.hero-scene{background:var(--custard)}
.hinge{position:absolute;width:180px;height:36px;border:3px solid var(--ink);background:repeating-linear-gradient(90deg,var(--blue) 0 16px,var(--custard) 16px 28px);box-shadow:7px 7px 0 var(--ink);z-index:1}.hinge-a{left:8%;top:9%;transform:rotate(-8deg)}.hinge-b{right:12%;bottom:12%;transform:rotate(12deg);background:repeating-linear-gradient(90deg,var(--green) 0 16px,var(--custard) 16px 28px)}
.title-kit{grid-column:1/8;grid-row:1/3;align-self:center;display:flex;gap:10px;flex-wrap:wrap;z-index:3}.title-card{font-family:var(--display);font-size:clamp(3rem,8vw,8.5rem);line-height:.86;background:var(--pink);border:5px solid var(--ink);padding:.02em .14em .08em;box-shadow:10px 11px 0 var(--ink);letter-spacing:.02em;display:inline-block;animation:bounceIn .85s cubic-bezier(.17,1.55,.45,1) both}.card-q{transform:rotate(-4deg);animation-delay:.08s}.card-dot{background:var(--blue);transform:rotate(10deg);animation-delay:.22s}.card-one{background:var(--green);transform:rotate(-2deg);animation-delay:.36s}
.dome-wrap{grid-column:5/10;grid-row:3/8;align-self:center;justify-self:center;position:relative;width:min(430px,70vw);height:430px;z-index:4}.glass-dome{position:absolute;left:50%;top:16%;width:290px;height:250px;transform:translateX(-50%);border:5px solid var(--ink);border-bottom:0;border-radius:150px 150px 20px 20px;background:rgba(67,215,255,.35);box-shadow:inset 18px 0 0 rgba(255,255,255,.35),12px 12px 0 var(--violet)}.glint{position:absolute;right:54px;top:38px;width:34px;height:85px;border-radius:50%;background:#fff;transform:rotate(28deg);opacity:.7}.pedestal{position:absolute;left:50%;bottom:42px;transform:translateX(-50%) rotate(-1deg);width:330px;background:var(--custard);border:5px solid var(--ink);box-shadow:10px 10px 0 var(--orange);padding:18px;text-align:center;font-family:var(--tag);font-weight:700;letter-spacing:.08em}.specimen{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:84px;height:84px;background:var(--ink);border:4px solid var(--ink);border-radius:50%;box-shadow:0 22px 0 var(--green);animation:dotHop 2.4s infinite cubic-bezier(.4,0,.2,1)}.eye{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);width:18px;height:18px;background:#fff;border:3px solid var(--ink);border-radius:50%;opacity:0;animation:blinkEye 3.2s infinite}.hero-placard{grid-column:8/12;grid-row:2/6;z-index:5}.placard{position:relative;background:var(--custard);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:clamp(20px,3vw,36px);border-radius:6px 28px 10px 18px;transform:rotate(var(--tilt,-2deg));z-index:3}.placard small{font-family:var(--tag);font-size:.9rem;text-transform:uppercase;letter-spacing:.13em;background:var(--blue);border:2px solid var(--ink);padding:4px 8px;display:inline-block;transform:rotate(2deg)}h1,h2{font-family:var(--serif);font-weight:900;margin:.25em 0 .2em;line-height:.9}h1{font-size:clamp(3rem,7vw,7rem)}h2{font-size:clamp(2.4rem,5vw,5.5rem)}p{font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.35}.flip-card{perspective:1000px}.flip-inner{position:relative;transition:transform .7s cubic-bezier(.2,1,.2,1);transform-style:preserve-3d;min-height:290px}.flip-card.flipped .flip-inner{transform:rotateY(180deg)}.flip-face{position:absolute;inset:0;backface-visibility:hidden}.flip-face.back{transform:rotateY(180deg);background:var(--green);border:3px dashed var(--ink);padding:20px}.stamp-control{grid-column:2/4;grid-row:6/7;align-self:center;z-index:6;background:var(--orange);border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink);border-radius:50%;width:140px;height:140px;font-family:var(--tag);font-weight:700;transform:rotate(-12deg);transition:transform .2s}.stamp-control:active{transform:translate(6px,6px) rotate(-12deg);box-shadow:1px 1px 0 var(--ink)}.certified-stamp{position:absolute;left:22%;top:55%;z-index:7;border:7px solid var(--orange);color:var(--orange);font-family:var(--display);font-size:2rem;border-radius:50%;width:190px;height:190px;display:grid;place-items:center;text-align:center;transform:scale(0) rotate(-18deg);transition:transform .45s cubic-bezier(.1,1.8,.25,1.1);background:rgba(255,242,184,.76)}.certified-stamp.show{transform:scale(1) rotate(-18deg)}.rule{font-family:var(--display);font-size:clamp(1.8rem,4vw,4.5rem);line-height:.95;text-transform:uppercase;z-index:2;max-width:520px;color:var(--ink);text-shadow:5px 5px 0 var(--pink)}.rule-one{grid-column:1/5;grid-row:7/9;align-self:end}.arrow{position:absolute;z-index:2;fill:none;stroke:var(--orange);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:drawArrow 2s .9s forwards}.arrow-one{left:28%;top:32%;width:190px;transform:rotate(10deg)}

.wobble-scene{background:var(--blue)}.stage-violet{position:absolute;right:-10%;top:5%;width:58vw;height:80vh;background:var(--violet);border:5px solid var(--ink);border-radius:52% 24% 44% 30%;box-shadow:16px 16px 0 var(--pink);transform:rotate(-8deg);z-index:0}.peephole{grid-column:2/7;grid-row:2/7;place-self:center;width:min(480px,70vw);height:min(480px,70vw);background:var(--custard);border:7px solid var(--ink);border-radius:50%;box-shadow:18px 18px 0 var(--green);display:grid;place-items:center;z-index:2}.spring-specimen{display:flex;flex-direction:column;gap:0;animation:lean 3s infinite ease-in-out}.spring-specimen span{width:190px;height:48px;border:12px solid var(--ink);border-left-color:transparent;border-right-color:transparent;border-radius:50%;display:block;margin-top:-16px}.wobble-card{grid-column:7/12;grid-row:2/5;--tilt:5deg;background:var(--green)}.dial-rig{grid-column:8/11;grid-row:5/8;z-index:4;background:var(--custard);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:24px;transform:rotate(-3deg)}.dial-shape{width:170px;height:150px;margin:0 auto 20px;background:var(--pink);border:5px solid var(--ink);border-radius:calc(12% + var(--wobble)*.6%) calc(70% - var(--wobble)*.3%) calc(20% + var(--wobble)*.4%) calc(60% - var(--wobble)*.2%);box-shadow:12px 12px 0 var(--orange);transform:rotate(calc((var(--wobble) - 50) * .35deg));transition:.15s}label{font-family:var(--tag);font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:block}input[type=range]{width:100%;accent-color:var(--pink)}.bent-ruler{position:absolute;left:6%;bottom:12%;z-index:3;background:var(--orange);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);font-family:var(--tag);font-weight:700;padding:16px 30px;transform:rotate(9deg) skewX(-9deg)}.wobble-scene .rule{grid-column:1/6;grid-row:7/9;align-self:end;text-shadow:5px 5px 0 var(--custard)}

.shelf-scene{background:var(--pink)}.shelf-board{position:absolute;left:5%;right:5%;height:54px;background:var(--custard);border:5px solid var(--ink);box-shadow:12px 12px 0 var(--ink);z-index:1}.shelf-top{top:38%;transform:rotate(-2deg)}.shelf-bottom{bottom:18%;transform:rotate(3deg)}.shelf-label{grid-column:1/5;grid-row:1/5;--tilt:-5deg;background:var(--blue)}.oddity{position:absolute;z-index:4;border:5px solid var(--ink);box-shadow:9px 9px 0 var(--ink);display:grid;place-items:center;font-family:var(--display);font-size:2rem;transition:transform .35s cubic-bezier(.2,1.7,.3,1)}.oddity:hover{transform:translateY(-18px) rotate(8deg)}.blob{left:45%;top:22%;width:210px;height:190px;background:var(--green);border-radius:55% 35% 48% 28%;animation:morph 4s infinite alternate}.eye.big{opacity:1;width:54px;height:54px;top:48%;animation:none}.crown{position:absolute;top:-40px;color:var(--custard);text-shadow:4px 4px 0 var(--ink)}.bird-square{right:15%;top:34%;width:150px;height:150px;background:var(--custard);transform:rotate(12deg)}.bird-square:after{content:"";position:absolute;right:-44px;top:48px;border-left:45px solid var(--orange);border-top:24px solid transparent;border-bottom:24px solid transparent}.bird-square span{font-family:var(--tag);font-size:.9rem;position:absolute;bottom:8px}.one-clock{left:55%;bottom:13%;width:160px;height:160px;border-radius:50%;background:var(--blue)}.one-clock i{width:8px;height:58px;background:var(--ink);display:block;transform-origin:bottom center;transform:translateY(-24px) rotate(33deg)}.sock{width:90px;height:140px;border-radius:40px 40px 18px 18px;background:repeating-linear-gradient(0deg,var(--custard) 0 16px,var(--violet) 16px 30px)}.sock:after{content:"";position:absolute;width:90px;height:50px;background:inherit;border:5px solid var(--ink);border-top:0;left:22px;bottom:-5px;border-radius:0 40px 40px 15px}.sock-a{right:31%;bottom:22%;transform:rotate(-13deg)}.sock-b{right:8%;bottom:17%;transform:rotate(18deg);background:repeating-linear-gradient(0deg,var(--green) 0 16px,var(--orange) 16px 30px)}.checker-break{position:absolute;right:0;top:8%;width:270px;height:90px;border:4px solid var(--ink);background:linear-gradient(45deg,var(--ink) 25%,transparent 25%),linear-gradient(-45deg,var(--ink) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--ink) 75%),linear-gradient(-45deg,transparent 75%,var(--ink) 75%);background-size:38px 38px;background-color:var(--custard);transform:rotate(7deg)}.shelf-scene .rule{grid-column:2/7;grid-row:6/9;align-self:end;text-shadow:5px 5px 0 var(--blue)}

.mechanism-scene{background:var(--violet);color:var(--custard)}.mechanism-scene:before{border-color:var(--custard);box-shadow:9px 9px 0 rgba(255,242,184,.22)}.mechanism-label{grid-column:1/6;grid-row:2/6;color:var(--ink);--tilt:3deg}.crank{grid-column:8/11;grid-row:2/6;align-self:center;justify-self:center;width:260px;height:260px;border-radius:50%;background:var(--green);border:6px solid var(--ink);box-shadow:14px 14px 0 var(--pink);position:relative;z-index:5;transition:transform .35s}.crank.spin{transform:rotate(360deg)}.crank-wheel{position:absolute;inset:32px;border:12px dashed var(--ink);border-radius:50%}.crank-handle{position:absolute;right:-26px;top:100px;width:80px;height:46px;background:var(--orange);border:5px solid var(--ink);border-radius:28px;box-shadow:6px 6px 0 var(--ink)}.machine{position:absolute;right:8%;bottom:9%;width:430px;height:260px;border:5px solid var(--ink);background:var(--custard);box-shadow:12px 12px 0 var(--ink);transform:rotate(-4deg);z-index:3}.gear{position:absolute;border:8px dotted var(--ink);border-radius:50%;background:var(--blue)}.gear-a{width:120px;height:120px;left:34px;top:34px}.gear-b{width:90px;height:90px;right:70px;top:82px;background:var(--pink)}.machine.wound .gear-a{animation:spin 1.2s linear infinite}.machine.wound .gear-b{animation:spin 1s linear infinite reverse}.arm{position:absolute;height:10px;background:var(--ink);transform-origin:left center}.arm-a{left:120px;top:120px;width:190px;transform:rotate(19deg)}.arm-b{left:180px;top:180px;width:140px;transform:rotate(-28deg)}.tiny-door{position:absolute;left:160px;bottom:18px;background:var(--green);color:var(--ink);border:4px solid var(--ink);padding:12px;font-family:var(--tag);font-weight:700;transform-origin:left;transition:transform .45s}.tiny-door.open{transform:perspective(300px) rotateY(-55deg)}.accordion-labels{grid-column:2/6;grid-row:6/8;z-index:5;display:flex;flex-direction:column;gap:8px}.fold-label{background:var(--custard);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--orange);padding:12px;text-align:left;font-family:var(--tag);font-weight:700;transform:rotate(-2deg);transition:transform .25s}.fold-label.open{transform:translateX(30px) rotate(3deg);background:var(--green)}.mechanism-scene .rule{grid-column:6/12;grid-row:6/9;align-self:end;text-shadow:5px 5px 0 var(--pink);color:var(--custard)}

.finale-scene{background:var(--green)}.confetti-field{position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,var(--pink) 0 8px,transparent 9px),radial-gradient(circle at 70% 35%,var(--blue) 0 10px,transparent 11px),radial-gradient(circle at 38% 76%,var(--orange) 0 7px,transparent 8px),linear-gradient(90deg,transparent 0 80%,rgba(255,242,184,.6) 80% 85%,transparent 85%);z-index:0}.finale-card{grid-column:2/7;grid-row:2/6;--tilt:-4deg;background:var(--custard)}.bang-specimen{grid-column:8/11;grid-row:2/7;align-self:center;justify-self:center;font-family:var(--display);font-size:clamp(11rem,26vw,25rem);line-height:.8;color:var(--pink);-webkit-text-stroke:7px var(--ink);text-shadow:18px 18px 0 var(--blue);animation:bang 2.1s infinite}.pull-tab{grid-column:3/6;grid-row:6/7;z-index:4;background:var(--orange);border:4px solid var(--ink);box-shadow:9px 9px 0 var(--ink);padding:18px 28px;font-family:var(--tag);font-weight:700;text-transform:uppercase;transform:rotate(3deg);transition:transform .35s}.pull-tab.pulled{transform:translateY(34px) rotate(-4deg);background:var(--blue)}.wrong-answer{position:absolute;left:50%;bottom:12%;transform:translateX(-50%) rotate(-3deg) scale(0);background:var(--pink);border:5px solid var(--ink);box-shadow:10px 10px 0 var(--ink);font-family:var(--display);font-size:clamp(1.6rem,4vw,4rem);padding:20px 28px;z-index:6;transition:transform .45s cubic-bezier(.18,1.7,.36,1)}.wrong-answer.show{transform:translateX(-50%) rotate(-3deg) scale(1)}.finale-scene .rule{grid-column:7/12;grid-row:7/9;align-self:end;text-shadow:5px 5px 0 var(--custard)}

.lean-away{transition:transform .2s cubic-bezier(.2,1.4,.3,1)}.is-visible .placard{animation:placardEnter .65s cubic-bezier(.18,1.55,.4,1) both}.is-visible .rule{animation:bounceIn .8s .1s cubic-bezier(.17,1.55,.45,1) both}

@keyframes bounceIn{0%{opacity:0;transform:translateY(42px) rotate(-12deg) scale(.85)}100%{opacity:1}}
@keyframes dotHop{0%,78%,100%{transform:translate(-50%,-50%) scale(1)}8%{transform:translate(-50%,-82%) scale(1.05,.9)}16%{transform:translate(-50%,-50%) scale(1.12,.82)}}
@keyframes blinkEye{0%,42%,48%,100%{opacity:0}44%,47%{opacity:1}}
@keyframes drawArrow{to{stroke-dashoffset:0}}
@keyframes lean{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(9deg)}}
@keyframes morph{0%{border-radius:55% 35% 48% 28%;transform:rotate(-2deg)}100%{border-radius:34% 58% 30% 54%;transform:rotate(5deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bang{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(5deg) scale(1.04)}}
@keyframes placardEnter{0%{opacity:0;transform:translateY(50px) rotate(calc(var(--tilt,-2deg) - 9deg))}100%{opacity:1;transform:rotate(var(--tilt,-2deg))}}

@media (max-width:850px){.odd-tabs{right:8px;gap:5px}.tab{padding:6px 8px}.scene{grid-template-columns:1fr;grid-template-rows:auto;display:block;padding:70px 18px 90px}.title-kit,.dome-wrap,.placard,.dial-rig,.accordion-labels,.rule,.bang-specimen,.pull-tab{margin:26px auto;max-width:92vw}.dome-wrap{height:380px}.hero-placard,.wobble-card,.shelf-label,.mechanism-label,.finale-card{width:92vw}.stage-violet,.machine,.checker-break{opacity:.75}.oddity{position:relative;display:inline-grid;margin:18px}.blob,.bird-square,.one-clock,.sock{left:auto;right:auto;top:auto;bottom:auto}.machine{position:relative;right:auto;bottom:auto;width:92vw;margin:30px auto}.stamp-control{position:relative;margin:10px 0}.certified-stamp{left:26%;top:40%}}