:root{
  --soot:#11100E;
  --plaster:#F4F0E6;
  --cobalt:#2B59C3;
  --red:#D12C3F;
  --acid:#C8FF00;
  --lavender:#8A7BFF;
  --khaki:#A9956B;
  --font-head:"Fraunces",serif;
  --font-body:"Bricolage Grotesque","Inter",sans-serif;
  --font-kr:"Noto Serif KR",serif;
  --font-space:"Space Grotesk",sans-serif;
  --seam-shift:0px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--plaster);color:var(--soot)}
body{margin:0;font-family:var(--font-body);overflow-x:hidden;background:var(--plaster);cursor:crosshair}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.36;background-image:radial-gradient(circle at 20% 10%,rgba(17,16,14,.13) 0 1px,transparent 1.5px),radial-gradient(circle at 70% 40%,rgba(43,89,195,.1) 0 1px,transparent 1.6px),linear-gradient(90deg,rgba(209,44,63,.05),rgba(200,255,0,.04));background-size:17px 19px,23px 29px,100% 100%;mix-blend-mode:multiply}
.fold-seam{position:fixed;top:0;left:calc(50% + var(--seam-shift));width:12px;height:100vh;z-index:55;transform:translateX(-50%);background:linear-gradient(90deg,transparent 0 3px,var(--soot) 3px 4px,var(--plaster) 4px 7px,var(--cobalt) 7px 9px,transparent 9px);filter:drop-shadow(7px 0 0 rgba(209,44,63,.16));transition:left .22s ease,filter .3s ease}
.fold-seam.unlocked{filter:drop-shadow(-14px 0 0 rgba(138,123,255,.28)) drop-shadow(15px 0 0 rgba(200,255,0,.22))}
.hinge{position:absolute;left:50%;width:34px;height:70px;transform:translateX(-50%);border:2px solid var(--soot);background:var(--khaki);box-shadow:5px 4px 0 var(--red)}
.hinge-top{top:9vh}.hinge-mid{top:45vh}.hinge-low{bottom:12vh}
.margin-rail{position:fixed;z-index:50;top:50%;font-family:var(--font-space);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--soot);opacity:.75}
.left-rail{left:12px;transform:translateY(-50%) rotate(-90deg)}
.right-rail{right:12px;transform:translateY(-50%) rotate(90deg)}

.room{position:relative;min-height:100vh;overflow:hidden;padding:7vw 8vw;background:var(--plaster);isolation:isolate;border-bottom:1px dashed rgba(17,16,14,.32)}
.room:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(43,89,195,.06) 0 49.6%,rgba(17,16,14,.16) 49.8% 50.15%,rgba(209,44,63,.07) 50.4% 100%)}
.room-label{position:absolute;top:28px;left:32px;font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);padding:8px 12px;border:1px solid var(--cobalt);background:rgba(244,240,230,.72);transform:rotate(-1deg)}
.kr-note{font-family:var(--font-kr)}

.room-open{display:grid;place-items:center;background:var(--plaster)}
.blank-field{position:absolute;inset:9vh 8vw;border:1px solid rgba(169,149,107,.55);background:linear-gradient(110deg,transparent 0 48%,rgba(169,149,107,.22) 48.2% 48.7%,transparent 49%),radial-gradient(circle at 78% 36%,rgba(138,123,255,.18),transparent 17%)}
.wordmark{position:relative;margin:0;font-family:var(--font-head);font-size:clamp(68px,15vw,210px);font-weight:900;line-height:.78;letter-spacing:-.08em;color:var(--soot);z-index:2;text-shadow:4px 0 0 rgba(43,89,195,.18)}
.word-left{display:inline-block;transform:translateX(calc(var(--seam-shift) * -.16));clip-path:inset(0 0 0 0)}
.word-right{display:inline-block;margin-left:.09em;transform:translateX(calc(var(--seam-shift) * .14)) rotate(3.2deg);color:var(--soot);text-shadow:-5px 4px 0 rgba(209,44,63,.22)}
.stamp{display:inline-flex;gap:10px;align-items:center;justify-content:center;font-family:var(--font-space);font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:5px solid var(--red);color:var(--red);background:rgba(244,240,230,.88);box-shadow:7px 7px 0 rgba(17,16,14,.2);transform:rotate(-11deg);transition:transform .35s ease,background .35s ease,color .35s ease}
.stamp i{width:3px;height:38px;background:var(--red);display:block}.stamp.flipped{background:var(--red);color:var(--plaster);transform:rotate(8deg) scale(1.04)}.stamp.flipped i{background:var(--plaster)}
.hero-stamp{position:absolute;top:43%;left:50%;z-index:3;padding:16px 22px;font-size:clamp(15px,2vw,30px);animation:stampLand .9s cubic-bezier(.2,1.4,.2,1) .45s both}
@keyframes stampLand{0%{opacity:0;transform:translate(-50%,-120%) rotate(25deg) scale(2.4)}70%{opacity:1;transform:translate(-50%,0) rotate(-13deg) scale(.92)}100%{transform:translate(-50%,0) rotate(-11deg) scale(1)}}
.opening-note{position:absolute;right:9vw;bottom:19vh;font-size:18px;color:var(--cobalt);transform:rotate(2deg)}
.unlock-strip{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-weight:700;text-transform:uppercase;background:var(--acid);padding:10px 46px;border:2px solid var(--soot)}
.registration-mark{position:absolute;width:70px;height:70px;border:2px solid var(--cobalt);border-radius:50%}.registration-mark:before,.registration-mark:after{content:"";position:absolute;background:var(--red)}.registration-mark:before{left:50%;top:-14px;width:2px;height:96px}.registration-mark:after{top:50%;left:-14px;height:2px;width:96px}.mark-a{left:15vw;top:20vh}.mark-b{right:17vw;bottom:18vh;transform:rotate(6deg)}

.split-plane{position:absolute;top:16vh;bottom:10vh;width:45vw;padding:5vw;border:2px solid var(--soot)}.left-plane{left:5vw;background:rgba(43,89,195,.08);transform:skewY(-3deg)}.right-plane{right:5vw;background:rgba(209,44,63,.08);transform:skewY(4deg)}.blueprint-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(43,89,195,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(43,89,195,.28) 1px,transparent 1px);background-size:34px 34px;opacity:.75}.left-plane h2{position:relative;font-family:var(--font-head);font-size:clamp(70px,12vw,160px);line-height:.72;margin:4vh 0 0}.left-plane em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--red)}.left-plane p{position:relative;width:68%;font-size:22px}.poster-wall:after{content:"";position:absolute;inset:14% 8%;background:repeating-linear-gradient(-18deg,rgba(169,149,107,.45) 0 14px,transparent 14px 28px);mix-blend-mode:multiply}.door-leaf{position:absolute;top:23%;width:28%;height:47%;display:grid;place-items:center;font-family:var(--font-head);font-size:54px;font-weight:900;border:4px solid var(--soot);transform-origin:center left}.door-in{left:22%;background:var(--cobalt);color:var(--plaster);animation:doorIn 4s ease-in-out infinite}.door-out{right:18%;background:var(--acid);animation:doorOut 4s ease-in-out infinite}@keyframes doorIn{50%{transform:perspective(600px) rotateY(-62deg)}}@keyframes doorOut{50%{transform:perspective(600px) rotateY(62deg)}}.arrow-path{position:absolute;left:18%;right:16%;bottom:20%;height:4px;background:var(--red)}.arrow-path span{position:absolute;top:-16px;width:34px;height:34px;border-top:7px solid var(--red);border-right:7px solid var(--red);transform:rotate(45deg);animation:reverseArrow 3s ease-in-out infinite}@keyframes reverseArrow{0%{left:0;transform:rotate(45deg)}49%{left:82%;transform:rotate(45deg)}50%{transform:rotate(225deg)}100%{left:0;transform:rotate(225deg)}}.ritual{position:absolute;right:9%;bottom:8%;background:var(--soot);color:var(--plaster);padding:13px 18px;border:2px solid var(--acid);box-shadow:6px 6px 0 var(--acid);text-transform:uppercase;font-weight:700}.side-note{position:absolute;left:7vw;bottom:5vh;width:310px;font-size:20px;transform:rotate(-3deg);background:var(--plaster);padding:18px;border-left:8px solid var(--red)}

.tool-room{background:linear-gradient(162deg,var(--plaster) 0 62%,rgba(169,149,107,.34) 62.2%)}.oblique-table{position:absolute;left:6vw;right:5vw;top:22vh;height:54vh;background:var(--khaki);border:5px solid var(--soot);transform:rotate(-7deg);box-shadow:18px 18px 0 rgba(17,16,14,.18);display:flex;align-items:center;justify-content:space-around;padding:4vw}.tool{position:relative;width:16%;min-width:130px;height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transform:rotate(7deg);transition:transform .25s ease}.tool:hover{transform:rotate(1deg) translateY(-18px)}.tool b{background:var(--plaster);border:2px solid var(--soot);padding:8px;text-align:center;font-size:14px;text-transform:uppercase}.tool:hover b{color:var(--red);text-decoration:line-through}.tool:hover b:after{content:attr(data-truth);position:absolute;left:0;right:0;bottom:-26px;color:var(--cobalt);text-decoration:none}.tool-shape{display:block;position:relative;width:118px;height:118px}.double-key .tool-shape:before{content:"";position:absolute;left:8px;right:8px;top:50%;height:22px;background:var(--soot);transform:translateY(-50%)}.double-key .tool-shape:after{content:"";position:absolute;inset:19px;border:18px solid var(--cobalt);border-radius:50%;box-shadow:72px 0 0 -18px var(--plaster),72px 0 0 0 var(--red)}.uneven-ruler .tool-shape{background:var(--plaster);border:3px solid var(--soot);transform:rotate(18deg)}.uneven-ruler .tool-shape:before{content:"";position:absolute;inset:10px;background:repeating-linear-gradient(90deg,var(--soot) 0 3px,transparent 3px 15px,var(--soot) 15px 19px,transparent 19px 32px)}.paper-hammer .tool-shape:before{content:"";position:absolute;left:46px;top:12px;width:28px;height:100px;background:var(--plaster);border:3px solid var(--soot)}.paper-hammer .tool-shape:after{content:"";position:absolute;left:10px;top:7px;width:96px;height:42px;background:var(--acid);border:3px dashed var(--soot)}.self-scissor .tool-shape:before,.self-scissor .tool-shape:after{content:"";position:absolute;width:82px;height:28px;border:8px solid var(--red);border-radius:50%;top:42px}.self-scissor .tool-shape:before{transform:rotate(34deg)}.self-scissor .tool-shape:after{transform:rotate(-34deg);border-color:var(--cobalt)}.wrong-level .tool-shape{width:128px;height:42px;border:5px solid var(--soot);background:var(--plaster);transform:rotate(-12deg)}.wrong-level .tool-shape:before{content:"";position:absolute;left:54px;top:9px;width:18px;height:18px;border-radius:50%;background:var(--lavender);animation:bubble 2s ease-in-out infinite}@keyframes bubble{50%{left:84px}}.caption-card{position:absolute;right:8vw;bottom:8vh;width:330px;background:var(--cobalt);color:var(--plaster);font-size:23px;padding:22px;transform:rotate(4deg)}.tape{position:absolute;background:var(--acid);padding:12px 28px;border:2px solid var(--soot);font-weight:700}.tape-one{top:19vh;right:14vw;transform:rotate(9deg)}.tape-two{left:13vw;bottom:10vh;transform:rotate(-12deg);background:var(--lavender)}

.blueprint-room{background:var(--soot);color:var(--plaster)}.blueprint-room:before{background:linear-gradient(90deg,rgba(244,240,230,.04),rgba(43,89,195,.18))}.torn-blueprint{position:absolute;left:5vw;top:15vh;width:62vw;height:70vh;filter:drop-shadow(16px 14px 0 rgba(209,44,63,.26))}.paper-edge{stroke:var(--cobalt);stroke-width:5}.draw-line,.tear-line{fill:none;stroke-linecap:round;stroke-linejoin:round}.draw-line{stroke:var(--acid);stroke-width:8;stroke-dasharray:1200;stroke-dashoffset:1200}.room.visible .draw-line{animation:drawPlan 2.6s ease forwards}.line-two{stroke:var(--red);animation-delay:.45s}.tear-line{stroke:var(--plaster);stroke-width:3;stroke-dasharray:10 15}@keyframes drawPlan{to{stroke-dashoffset:0}}.proof-word{position:absolute;font-family:var(--font-head);font-size:clamp(95px,16vw,210px);font-weight:900;line-height:.7}.yes{right:15vw;top:18vh;color:var(--acid)}.no{right:8vw;bottom:20vh;color:transparent;-webkit-text-stroke:3px var(--red);transform:rotate(8deg)}.manifesto{position:absolute;right:9vw;bottom:10vh;width:350px;font-size:25px}.flip-stamp{position:absolute;right:13vw;top:49vh;padding:14px 18px;font-size:18px}

.assembly-room{background:var(--plaster)}.belt{position:absolute;left:8vw;right:8vw;height:110px;border:4px solid var(--soot);background:repeating-linear-gradient(90deg,rgba(17,16,14,.16) 0 40px,rgba(244,240,230,.6) 40px 80px);display:flex;justify-content:space-around;align-items:center;font-size:70px;color:var(--cobalt);overflow:hidden}.belt-left{top:28vh;transform:rotate(-3deg)}.belt-right{top:48vh;transform:rotate(3deg);color:var(--red)}.belt span{animation:beltPulse 1.2s steps(2,end) infinite}.belt-right span{animation-direction:reverse}@keyframes beltPulse{50%{transform:translateX(50px)}}.machine-block{position:absolute;font-family:var(--font-head);font-size:clamp(58px,9vw,130px);font-weight:900;border:4px solid var(--soot);padding:18px 24px;background:var(--plaster);box-shadow:12px 12px 0 var(--khaki)}.block-a{left:10vw;bottom:14vh;color:var(--cobalt)}.block-b{right:10vw;top:15vh;color:var(--red);transform:rotate(5deg)}.red-string{position:absolute;left:24vw;right:22vw;top:35vh;height:35vh;border-top:4px solid var(--red);border-right:4px solid var(--red);transform:skewX(-22deg);pointer-events:none}.assembly-copy{position:absolute;left:31vw;bottom:9vh;width:430px;font-size:24px;background:var(--acid);padding:18px;border:2px solid var(--soot)}.seal{position:absolute;right:12vw;bottom:12vh;width:140px;height:140px;border:7px double var(--red);border-radius:50%;display:grid;place-items:center;text-align:center;font-family:var(--font-space);font-weight:700;color:var(--red);transform:rotate(-17deg)}

.archive-room{background:linear-gradient(90deg,rgba(169,149,107,.25),var(--plaster) 55%)}.archive-stack{position:absolute;left:10vw;top:20vh;width:52vw;height:58vh}.folder{position:absolute;width:68%;height:180px;background:var(--plaster);border:3px solid var(--soot);box-shadow:10px 10px 0 rgba(17,16,14,.18);display:flex;align-items:end;padding:22px;font-size:30px;font-family:var(--font-head);font-weight:800}.folder:before{content:"";position:absolute;left:30px;top:-33px;width:170px;height:33px;background:inherit;border:3px solid var(--soot);border-bottom:0}.folder-one{left:4%;top:8%;transform:rotate(-7deg);background:rgba(200,255,0,.9)}.folder-two{left:19%;top:30%;transform:rotate(5deg);background:rgba(138,123,255,.82)}.folder-three{left:0;top:54%;transform:rotate(-2deg);background:var(--plaster)}.folder.crossed span{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:7px}.chair-shadow{position:absolute;width:240px;height:300px;border:18px solid var(--soot);border-top:0;right:14vw;top:30vh;opacity:.22}.chair-one{transform:skewX(-18deg) rotate(-8deg);box-shadow:42px -28px 0 rgba(43,89,195,.33)}.chair-two{transform:skewX(18deg) rotate(10deg);box-shadow:-42px 28px 0 rgba(209,44,63,.3)}.archive-copy{position:absolute;right:9vw;bottom:15vh;width:360px;font-size:27px;color:var(--cobalt)}.archive-toggle{right:15vw;bottom:7vh}

.exit-room{background:var(--soot);color:var(--plaster)}.exit-room:before{background:linear-gradient(90deg,rgba(200,255,0,.07) 0 49%,rgba(244,240,230,.2) 49.8% 50.2%,rgba(138,123,255,.13) 50.5%)}.exit-sign{position:absolute;left:8vw;top:15vh;font-family:var(--font-head);font-weight:900;font-size:clamp(72px,13vw,190px);line-height:.72;color:var(--acid);text-shadow:8px 7px 0 var(--red)}.exit-sign span{display:block}.exit-sign span:last-child{color:transparent;-webkit-text-stroke:2px var(--plaster);transform:translateX(10vw) rotate(3deg)}.folding-panel{position:absolute;top:36vh;width:24vw;height:42vh;border:4px solid var(--plaster);display:grid;place-items:center;font-family:var(--font-head);font-size:68px;font-weight:900;transform-origin:center center;transition:transform .6s ease}.panel-left{right:50%;background:var(--cobalt);transform:perspective(900px) rotateY(31deg)}.panel-right{left:50%;background:var(--red);transform:perspective(900px) rotateY(-31deg)}.exit-room.visible .panel-left{transform:perspective(900px) rotateY(-18deg)}.exit-room.visible .panel-right{transform:perspective(900px) rotateY(18deg)}.final-copy{position:absolute;right:8vw;bottom:11vh;width:520px;font-size:26px;line-height:1.12}.small-proof{position:absolute;left:10vw;bottom:8vh;color:var(--soot);background:var(--plaster);padding:14px 18px;transform:rotate(-3deg);font-weight:700;text-transform:uppercase}

.room .registration-mark{transition:transform .6s ease}.room.visible .registration-mark{transform:rotate(0deg) translate(0,0)}
@media (max-width:900px){.margin-rail{display:none}.room{padding:90px 24px}.fold-seam{left:24px}.wordmark{font-size:24vw}.hero-stamp{top:55%;left:54%}.split-plane,.oblique-table,.torn-blueprint,.belt,.machine-block,.archive-stack,.exit-sign,.folding-panel,.final-copy,.manifesto,.caption-card,.assembly-copy,.archive-copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:auto;margin:24px 0;transform:none}.split-plane{min-height:45vh}.oblique-table{height:auto;flex-wrap:wrap;gap:25px}.tool{width:42%;min-width:120px}.proof-word{position:relative;display:inline-block;margin:20px}.belt{height:80px}.folder{position:relative;width:auto;margin:38px 0}.chair-shadow{display:none}.panel-left,.panel-right{height:220px}.room-label{left:22px}}