:root{
  --cream:#F5E9D2;
  --mustard:#D99A2B;
  --red:#B9413A;
  --teal:#1F7A78;
  --graphite:#25211E;
  --linen:#9DB7C4;
  --pink:#F06C9B;
  --shadow:#3B3441;
  --paper:rgba(245,233,210,.92);
  --ink:rgba(37,33,30,.86);
  --title:Fraunces, Georgia, 'Times New Roman', serif;
  --plain:'Atkinson Hyperlegible', Inter, ui-sans-serif, system-ui, sans-serif;
  --jp:'Noto Sans JP', Inter, ui-sans-serif, system-ui, sans-serif;
  --hand:'Gochi Hand','Comic Sans MS',cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--graphite);font-family:var(--plain);overflow-x:hidden}
button{font:inherit;color:inherit}
.grain{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.32;background-image:radial-gradient(#25211E 1px,transparent 1px),radial-gradient(#B9413A 1px,transparent 1px);background-size:17px 19px,31px 29px;mix-blend-mode:multiply}
.fluorescent-hum{position:fixed;left:5vw;right:5vw;top:0;height:18px;background:linear-gradient(90deg,transparent,var(--linen),transparent);filter:blur(10px);opacity:.55;z-index:2;animation:flicker 7s infinite}
@keyframes flicker{0%,94%,100%{opacity:.55}95%{opacity:.18}96%{opacity:.7}97%{opacity:.28}}

.route-card{position:fixed;right:22px;top:22px;width:245px;padding:17px 16px 14px;background:var(--paper);border:2px solid var(--graphite);box-shadow:8px 8px 0 rgba(37,33,30,.22);z-index:30;transform:rotate(1.4deg) translateY(-140%);transition:transform .9s cubic-bezier(.2,1.2,.25,1)}
.route-card.visible{transform:rotate(1.4deg) translateY(0)}
.route-stamp{display:inline-block;padding:5px 9px;border:3px solid var(--red);color:var(--red);font-weight:900;letter-spacing:.08em;transform:rotate(-5deg);font-size:.74rem;margin-bottom:11px}
.route-link{display:block;text-decoration:none;color:var(--graphite);border-top:1px dashed rgba(37,33,30,.45);padding:9px 0 7px;font-size:.82rem;line-height:1.1}
.route-link span{font-family:var(--jp);color:var(--teal);font-weight:900;margin-right:8px}.route-link.active{color:var(--red);transform:translateX(-5px)}

.room{min-height:100vh;position:relative;isolation:isolate;padding:72px clamp(22px,5vw,76px);display:grid;align-items:center;overflow:hidden}.room:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 31px,rgba(37,33,30,.055) 32px),linear-gradient(90deg,transparent 31px,rgba(37,33,30,.035) 32px);background-size:32px 32px;z-index:-2}.room:after{content:"";position:absolute;inset:auto -10% -30% -10%;height:55%;background:radial-gradient(ellipse at center,rgba(59,52,65,.2),transparent 68%);z-index:-1}
.room-number,.section-label{position:absolute;left:clamp(18px,4vw,56px);top:28px;font-family:var(--jp);font-weight:900;letter-spacing:.08em;color:var(--teal);background:var(--cream);border:1px solid var(--graphite);padding:8px 13px;box-shadow:4px 4px 0 rgba(37,33,30,.16);transform:rotate(-1deg)}
.section-label{font-family:var(--title);font-size:clamp(1.4rem,3vw,2.6rem);color:var(--shadow)}

.desk-room{background:linear-gradient(140deg,var(--cream),#ead9b9)}.reception-counter{width:min(950px,86vw);height:62vh;min-height:460px;position:relative;margin:auto;transform:rotate(-.8deg)}
.reception-counter:after{content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:24%;background:var(--shadow);border:4px solid var(--graphite);box-shadow:0 -10px 0 rgba(37,33,30,.18) inset,18px 18px 0 rgba(37,33,30,.18)}
.frosted-window{position:absolute;inset:0 4% 18%;border:5px solid var(--graphite);background:linear-gradient(115deg,rgba(157,183,196,.72),rgba(245,233,210,.72)),repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 4px,transparent 4px 12px);backdrop-filter:blur(2px);display:grid;place-items:center;box-shadow:inset 0 0 42px rgba(255,255,255,.45)}
h1{font-family:var(--title);font-size:clamp(3.4rem,10vw,8.8rem);margin:0;color:rgba(37,33,30,.82);letter-spacing:-.06em}.jp-note{position:absolute;bottom:26%;font-family:var(--jp);font-weight:800;color:var(--red)}
.taped-sign{position:absolute;bottom:34px;left:50%;translate:-50% 0;width:min(410px,80%);padding:22px 18px;background:var(--cream);border:3px solid var(--graphite);box-shadow:8px 8px 0 rgba(37,33,30,.22);font-weight:950;letter-spacing:.06em;font-size:1.45rem;cursor:pointer;transition:transform .9s cubic-bezier(.18,1.1,.2,1),opacity .5s}.taped-sign.peel{transform:rotate(-18deg) translate(-105px,-42px);opacity:.18;pointer-events:none}.tape{position:absolute;top:-18px;width:82px;height:28px;background:rgba(240,108,155,.55);border:1px dashed rgba(37,33,30,.35)}.tape-left{left:18px;rotate:-8deg}.tape-right{right:18px;rotate:8deg}
.counter-objects{position:absolute;bottom:5%;left:6%;right:6%;display:flex;gap:24px;align-items:end;z-index:3}.bell,.enamel-box,.pencil{background:var(--cream);border:3px solid var(--graphite);box-shadow:5px 5px 0 rgba(37,33,30,.25);padding:14px;font-weight:900}.bell{border-radius:50% 50% 10px 10px;color:var(--red)}.bell span{font-size:.72rem;color:var(--graphite)}.enamel-box{background:var(--red);color:var(--cream);width:140px;height:78px}.enamel-box i{display:block;width:35px;height:35px;background:var(--cream);margin:5px auto;clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)}.pencil{background:var(--mustard);transform:rotate(3deg);font-family:var(--hand)}
.revealed-card{position:absolute;left:8vw;bottom:9vh;max-width:360px;padding:22px;background:var(--paper);border:2px solid var(--graphite);box-shadow:9px 9px 0 rgba(37,33,30,.2);transform:rotate(-2deg) translateY(45px);opacity:0;transition:.8s cubic-bezier(.2,1,.3,1);z-index:4}.revealed-card.visible{opacity:1;transform:rotate(-2deg) translateY(0)}.revealed-card h2{font-family:var(--title);margin:0 0 8px;color:var(--red)}.revealed-card li{margin:7px 0}.misprint{margin:12px -6px -4px;padding:8px;background:rgba(240,108,155,.22);font-family:var(--jp);font-size:.72rem;line-height:1.25;transform:rotate(1deg)}

.kitchen-room{background:linear-gradient(160deg,#f2dfbc,var(--cream))}.kitchen-room{grid-template-columns:1fr 1.1fr;gap:5vw}.kettle{justify-self:center;width:230px;height:190px;background:var(--linen);border:5px solid var(--graphite);border-radius:42% 42% 32% 32%;position:relative;box-shadow:15px 15px 0 rgba(37,33,30,.16);animation:grumble 4s infinite}.kettle:before{content:"";position:absolute;right:-65px;top:62px;width:80px;height:70px;border:14px solid var(--graphite);border-left:0;border-radius:0 50px 50px 0}.kettle:after{content:"";position:absolute;left:-70px;top:52px;border-right:78px solid var(--graphite);border-top:22px solid transparent;border-bottom:22px solid transparent}.kettle-face{position:absolute;left:65px;right:65px;top:78px;display:flex;justify-content:space-between}.kettle-face span{width:22px;height:11px;background:var(--graphite);border-radius:50%;box-shadow:0 22px 0 -6px var(--red)}.steam{position:absolute;top:-75px;width:22px;height:72px;border-left:4px solid rgba(31,122,120,.55);border-radius:50%;animation:steam 2.4s infinite}.s1{left:70px}.s2{left:108px;animation-delay:.4s}.s3{left:146px;animation-delay:.8s}@keyframes steam{from{transform:translateY(20px);opacity:0}45%{opacity:1}to{transform:translateY(-25px);opacity:0}}@keyframes grumble{50%{transform:translateY(-5px) rotate(-1deg)}}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:13px;max-width:620px;padding:18px;background:var(--graphite);border:5px solid var(--graphite);box-shadow:18px 18px 0 rgba(37,33,30,.16);transform:rotate(1deg)}.bento-cell{min-height:170px;border:3px solid var(--graphite);padding:18px;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:transform .35s,filter .35s}.bento-cell:hover,.bento-cell.open{transform:translateY(-8px) rotate(-1deg);filter:saturate(1.08)}.bento-cell b{display:block;font-family:var(--title);font-size:2rem}.bento-cell span{display:block;margin-top:55px;font-weight:800;opacity:0;transform:translateY(12px);transition:.35s}.bento-cell.open span{opacity:1;transform:none}.mustard{background:var(--mustard)}.teal{background:var(--teal);color:var(--cream)}.pink{background:var(--pink)}.blue{background:var(--linen)}.receipt-poem{position:absolute;left:9vw;bottom:8vh;padding:18px;background:#fff8e6;border:1px solid var(--graphite);font-family:ui-monospace,monospace;box-shadow:6px 6px 0 rgba(37,33,30,.15);transform:rotate(5deg)}

.laundry-room{background:linear-gradient(180deg,var(--linen),#dfd5c2)}.clothesline{position:absolute;left:4vw;right:4vw;top:25vh;border-top:5px solid var(--graphite);transform:rotate(-2deg)}.laundry-panels{display:flex;justify-content:center;gap:clamp(12px,3vw,34px);align-items:start;perspective:900px}.fabric{width:min(21vw,230px);height:430px;background:var(--cream);border:3px solid var(--graphite);padding:34px 18px 18px;box-shadow:10px 12px 0 rgba(37,33,30,.16);position:relative;cursor:pointer;transform-origin:top;animation:sway 5s infinite ease-in-out}.fabric:nth-child(2){animation-delay:.6s;background:#e9cfa3}.fabric:nth-child(3){animation-delay:1.1s;background:#cbd9df}.fabric:nth-child(4){animation-delay:1.6s;background:#edb3cb}.fabric:before{content:"!";position:absolute;top:-28px;left:50%;translate:-50% 0;width:38px;height:48px;background:var(--mustard);border:3px solid var(--graphite);display:grid;place-items:center;font-weight:900}.fabric span{font-family:var(--jp);font-weight:950;color:var(--red)}.fabric b{display:block;font-family:var(--title);font-size:1.65rem;margin-top:50px}.fabric em{position:absolute;left:18px;bottom:18px;font-family:var(--jp);font-style:normal;color:var(--teal);opacity:0;transition:.35s}.fabric.revealed{transform:rotateY(10deg) translateY(-12px)}.fabric.revealed em{opacity:1}.umbrella-rack{position:absolute;right:7vw;bottom:7vh;width:270px;background:var(--paper);border:2px solid var(--graphite);padding:16px;transform:rotate(2deg)}.umbrella-rack i{display:inline-block;width:44px;height:120px;border-left:8px solid var(--graphite);border-bottom:8px solid var(--graphite);border-radius:0 0 0 35px;margin:0 12px}.umbrella-rack i:before{content:"";display:block;width:62px;height:35px;background:var(--teal);border:3px solid var(--graphite);border-radius:50% 50% 0 0;transform:translateX(-28px)}@keyframes sway{50%{transform:rotate(1.7deg)}}

.lost-room{background:linear-gradient(140deg,#ead9b9,var(--cream))}.cabinet{width:min(800px,82vw);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:22px;background:var(--shadow);border:5px solid var(--graphite);box-shadow:20px 20px 0 rgba(37,33,30,.18);transform:rotate(-1deg)}.drawer{min-height:170px;background:var(--cream);border:4px solid var(--graphite);padding:18px;text-align:left;cursor:pointer;position:relative;transition:transform .45s cubic-bezier(.2,1.2,.25,1),box-shadow .45s}.drawer:after{content:"";position:absolute;right:24px;top:28px;width:45px;height:15px;background:var(--graphite);border-radius:20px}.drawer span{font-family:var(--jp);font-weight:900;color:var(--teal)}.drawer b{display:block;font-family:var(--title);font-size:1.85rem;margin-top:22px}.drawer em{display:block;font-style:normal;margin-top:16px;color:var(--red);opacity:0}.drawer.open{transform:translateX(35px);box-shadow:-24px 0 0 rgba(37,33,30,.18)}.drawer.open em{opacity:1}.object-tags{position:absolute;left:7vw;bottom:9vh;display:flex;gap:18px;flex-wrap:wrap}.object-tags span{display:inline-block;padding:12px 16px;border:2px solid var(--graphite);background:var(--paper);box-shadow:5px 5px 0 rgba(37,33,30,.15);font-family:var(--hand);font-size:1.25rem}.bandage{background:#f0b6a1!important}.keytag{background:var(--mustard)!important}.star{background:var(--pink)!important;clip-path:polygon(50% 0,61% 34%,98% 35%,68% 55%,79% 91%,50% 70%,21% 91%,32% 55%,2% 35%,39% 34%);padding:32px!important}

.tomorrow-room{background:linear-gradient(180deg,var(--shadow),#1d1a1f);color:var(--cream)}.tomorrow-room:before{opacity:.18}.bus-shelter{width:min(900px,88vw);height:70vh;min-height:520px;margin:auto;border:5px solid var(--graphite);background:linear-gradient(180deg,rgba(157,183,196,.34),rgba(31,122,120,.18));position:relative;box-shadow:18px 18px 0 rgba(0,0,0,.28);display:grid;place-items:center;text-align:center;overflow:hidden}.bus-shelter:before{content:"";position:absolute;left:8%;right:8%;top:0;height:38px;background:var(--mustard);border:4px solid var(--graphite);border-top:0}.rain-glass{position:absolute;inset:38px 8% 0;background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 40%),repeating-linear-gradient(100deg,transparent 0 18px,rgba(245,233,210,.14) 19px 21px);backdrop-filter:blur(1px)}.drop{position:absolute;width:2px;height:16px;background:rgba(245,233,210,.55);border-radius:4px;animation:drop 2.8s linear infinite}.bus-shelter h2{font-family:var(--title);font-size:clamp(3rem,8vw,7rem);margin:0;z-index:2;color:var(--cream);text-shadow:0 4px 0 rgba(0,0,0,.22)}.window-copy{z-index:2;margin-top:-10vh;font-family:var(--hand);font-size:clamp(1.35rem,3vw,2.4rem);color:var(--mustard)}.lanterns{position:absolute;left:8%;right:8%;bottom:96px;display:flex;justify-content:space-around;z-index:2}.lanterns span{padding:12px 16px;background:rgba(245,233,210,.9);color:var(--graphite);border:2px solid var(--graphite);box-shadow:0 0 25px rgba(217,154,43,.5);border-radius:3px;animation:lantern 3s infinite ease-in-out}.lanterns span:nth-child(even){animation-delay:.7s}.ticket{position:absolute;right:8%;bottom:22px;background:var(--cream);color:var(--graphite);border:2px solid var(--graphite);padding:14px 22px;z-index:3;transform:rotate(-4deg);font-family:ui-monospace,monospace}.ticket b{font-family:var(--title);font-size:1.45rem;color:var(--red)}.ticket small{display:block;font-family:var(--jp);color:var(--teal)}footer{position:absolute;bottom:20px;left:28px;color:rgba(245,233,210,.7);font-size:.86rem}@keyframes lantern{50%{transform:translateY(-8px);filter:brightness(1.15)}}@keyframes drop{to{transform:translateY(70vh);opacity:.1}}

.room.in-view .section-label{animation:stamp .45s cubic-bezier(.2,1.6,.2,1)}@keyframes stamp{0%{transform:scale(1.5) rotate(-8deg);opacity:0}100%{transform:scale(1) rotate(-1deg);opacity:1}}

@media (max-width:820px){.route-card{width:calc(100vw - 32px);right:16px;top:12px}.room{padding-top:135px}.kitchen-room{grid-template-columns:1fr}.bento{grid-template-columns:1fr}.laundry-panels{display:grid;grid-template-columns:1fr 1fr}.fabric{width:auto;height:300px}.cabinet{grid-template-columns:1fr}.counter-objects{scale:.78;transform-origin:left bottom}.receipt-poem,.umbrella-rack,.object-tags{position:relative;left:auto;right:auto;bottom:auto;margin:22px auto}.lanterns{flex-wrap:wrap;gap:8px;bottom:80px}}