:root {
  --clotted-cream: #FFF2D8;
  --burnt-sugar: #B86A2D;
  --cherry-preserve: #B21E4B;
  --pistachio-porcelain: #BFD8B8;
  --dark-assam-tea: #2A1712;
  --tarnished-brass: #C49A4A;
  --rose-meringue: #F6B8C8;
  --fogged-mirror-blue: #D7E6E8;
  --room-progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--dark-assam-tea);
  background: var(--dark-assam-tea);
  font-family: Quicksand, Inter, ui-rounded, system-ui, sans-serif;
  overflow-x: hidden;
  cursor: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .18;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.45) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 65%, rgba(42,23,18,.28) 0 1px, transparent 1.5px);
  background-size: 29px 31px, 37px 41px;
  mix-blend-mode: soft-light;
}

.spoon-cursor {
  position: fixed;
  width: 44px;
  height: 18px;
  border-radius: 50% 38% 38% 50%;
  border: 1px solid rgba(196,154,74,.7);
  background: radial-gradient(ellipse at 35% 45%, rgba(255,242,216,.78), rgba(215,230,232,.26) 48%, rgba(196,154,74,.18));
  z-index: 80;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-18deg);
  box-shadow: 22px 3px 0 -7px rgba(196,154,74,.55), 0 0 18px rgba(255,242,216,.3);
}

.cabinet-nav {
  position: fixed;
  top: 24px;
  right: 26px;
  z-index: 70;
  display: grid;
  gap: 8px;
}

.cabinet-nav a {
  text-decoration: none;
  color: var(--dark-assam-tea);
  background: rgba(255,242,216,.72);
  border: 1px solid rgba(196,154,74,.7);
  border-radius: 2px 14px 2px 14px;
  padding: 8px 11px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: inset 0 0 12px rgba(255,255,255,.35), 0 8px 22px rgba(42,23,18,.18);
  transition: transform .45s ease, background .45s ease;
}

.cabinet-nav a.is-lit { background: var(--rose-meringue); transform: translateX(-8px); }

.ribbon-progress {
  position: fixed;
  left: 26px;
  top: 0;
  width: 42px;
  height: 100vh;
  z-index: 65;
  background: linear-gradient(90deg, #8f173c, var(--cherry-preserve), #cc5f7d);
  box-shadow: inset 0 0 18px rgba(42,23,18,.42), 8px 0 30px rgba(42,23,18,.14);
}

.ribbon-ink {
  display: block;
  width: 100%;
  height: calc(var(--room-progress) * 100%);
  background: linear-gradient(var(--tarnished-brass), var(--clotted-cream));
  opacity: .55;
  transition: height .25s ease;
}

.ribbon-script {
  position: absolute;
  left: 50%;
  bottom: 22px;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  color: var(--clotted-cream);
  font-family: "Dancing Script", "Brush Script MT", cursive;
  font-size: 19px;
  white-space: nowrap;
}

.room {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 8vh 8vw 8vh 10vw;
  isolation: isolate;
}

.room::before, .room::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.room::after {
  background: radial-gradient(circle at 18% 22%, rgba(246,184,200,.32), transparent 23%), radial-gradient(circle at 82% 70%, rgba(191,216,184,.34), transparent 28%);
  filter: blur(8px);
}

h1, h2 {
  font-family: Fraunces, Cormorant, Georgia, serif;
  font-weight: 500;
  line-height: .9;
  margin: 0;
}

p { font-family: "Cormorant Garamond", Cormorant, Georgia, serif; font-size: clamp(21px, 2vw, 34px); line-height: 1.18; }
.script { font-family: "Dancing Script", "Brush Script MT", cursive; }
.label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-family: Quicksand, Inter, system-ui, sans-serif; color: var(--burnt-sugar); }

.room-fog { background: radial-gradient(ellipse at 52% 44%, rgba(184,106,45,.42), transparent 25%), linear-gradient(125deg, var(--dark-assam-tea), #4b2c23 48%, #1b0e0b); }

.arched-window {
  width: min(78vw, 900px);
  height: min(78vh, 720px);
  position: relative;
  border: 2px solid rgba(196,154,74,.72);
  border-radius: 45% 45% 30px 30px / 22% 22% 30px 30px;
  background: linear-gradient(135deg, rgba(215,230,232,.78), rgba(255,242,216,.2) 35%, rgba(42,23,18,.18)), radial-gradient(ellipse at 50% 55%, rgba(255,242,216,.5), transparent 34%);
  box-shadow: inset 0 0 60px rgba(255,255,255,.34), inset 0 0 140px rgba(42,23,18,.28), 0 30px 90px rgba(0,0,0,.36);
  overflow: hidden;
}

.arched-window::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(196,154,74,.58);
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, transparent 0 104px, rgba(196,154,74,.24) 105px 107px, transparent 108px 210px);
}

.warm-oval { position: absolute; width: 42%; height: 28%; left: 29%; top: 36%; border-radius: 50%; background: radial-gradient(ellipse, var(--clotted-cream), rgba(246,184,200,.45) 45%, transparent 72%); filter: blur(10px); animation: glowPulse 5s ease-in-out infinite; }
.condensation { position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.8) 0 2px, transparent 3px), radial-gradient(circle at 55% 62%, rgba(255,255,255,.7) 0 1px, transparent 3px), linear-gradient(120deg, rgba(215,230,232,.86), rgba(255,255,255,.4)); backdrop-filter: blur(5px); opacity: .88; transition: opacity 1.2s ease, transform 1.2s ease; }
body.has-cleared .condensation { opacity: .18; transform: scale(1.04); }
.beads { position: absolute; inset: 0; }
.bead { position: absolute; width: 7px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.72); box-shadow: inset -2px -3px 4px rgba(215,230,232,.8); transition: transform 1.2s cubic-bezier(.18,.78,.16,1), opacity 1s ease; }
body.has-cleared .bead { transform: translateY(65px); opacity: .2; }
.reverse-title { position: absolute; left: 9%; bottom: 17%; transform: rotate(-8deg) scaleX(-1); color: rgba(42,23,18,.28); font-size: clamp(34px, 8vw, 96px); font-family: Fraunces, Georgia, serif; letter-spacing: -.05em; }
.wordmark { position: absolute; left: 13%; top: 36%; color: var(--dark-assam-tea); font-size: clamp(52px, 11vw, 142px); letter-spacing: -.06em; opacity: .12; filter: blur(3px); transition: opacity 1.4s ease, filter 1.4s ease; }
body.has-cleared .wordmark { opacity: .94; filter: blur(0); }
.window-note { position: absolute; right: 9%; bottom: 12%; color: var(--cherry-preserve); font-size: clamp(22px, 3vw, 42px); }
.finger-start { position: absolute; bottom: 11vh; left: 50%; transform: translateX(-50%); border: 1px solid var(--tarnished-brass); background: rgba(255,242,216,.8); color: var(--dark-assam-tea); border-radius: 999px; padding: 13px 22px; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; cursor: none; z-index: 5; }

.rail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rail-line, .rail-shadow { fill: none; stroke-linecap: round; }
.rail-shadow { stroke: rgba(42,23,18,.3); stroke-width: 13; transform: translateY(8px); }
.rail-line { stroke: var(--tarnished-brass); stroke-width: 5; stroke-dasharray: 1700; stroke-dashoffset: 1700; filter: drop-shadow(0 0 10px rgba(196,154,74,.5)); animation: drawRail 3s ease forwards .7s; }
.foreground-lace { position: absolute; left: -4vw; bottom: -5vh; width: 112vw; height: 120px; background: radial-gradient(circle at 25px 0, transparent 24px, rgba(255,242,216,.46) 25px 36px, transparent 37px) repeat-x; background-size: 72px 100%; opacity: .75; }

.room-glass { background: linear-gradient(180deg, var(--clotted-cream), #eddcbd 58%, var(--fogged-mirror-blue)); }
.glass-case { position: relative; width: min(88vw, 1120px); height: 74vh; border: 2px solid rgba(196,154,74,.75); border-radius: 36px; background: linear-gradient(110deg, rgba(255,255,255,.38), rgba(215,230,232,.26) 34%, rgba(255,242,216,.34)), radial-gradient(circle at 40% 70%, rgba(246,184,200,.45), transparent 30%); box-shadow: inset 0 0 80px rgba(255,255,255,.54), 0 28px 80px rgba(42,23,18,.18); overflow: hidden; }
.glass-case::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 8%, rgba(255,255,255,.48) 11%, transparent 16%, transparent 44%, rgba(255,255,255,.38) 47%, transparent 53%); animation: candleSlide 6s ease-in-out infinite; }
.case-arch { position: absolute; top: 8%; width: 34%; height: 58%; border: 1px solid rgba(196,154,74,.55); border-radius: 50% 50% 12px 12px; }
.arch-left { left: 8%; } .arch-right { right: 8%; }
.glass-shelf { position: absolute; left: 7%; width: 86%; height: 2px; background: linear-gradient(90deg, transparent, var(--tarnished-brass), transparent); box-shadow: 0 -10px 24px rgba(255,255,255,.6); }
.shelf-a { top: 38%; } .shelf-b { top: 68%; }
.pastry { position: absolute; z-index: 2; }
.croquembouche { left: 16%; bottom: 20%; width: 190px; height: 255px; }
.croquembouche span { position: absolute; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ffe4a8, var(--burnt-sugar)); box-shadow: inset -8px -10px 18px rgba(42,23,18,.18), 0 8px 14px rgba(42,23,18,.16); }
.croquembouche span:nth-child(1){left:66px;top:5px}.croquembouche span:nth-child(2){left:38px;top:56px}.croquembouche span:nth-child(3){left:92px;top:62px}.croquembouche span:nth-child(4){left:13px;top:114px}.croquembouche span:nth-child(5){left:69px;top:121px}.croquembouche span:nth-child(6){left:125px;top:118px}.croquembouche span:nth-child(7){left:52px;top:178px;width:84px;height:50px;border-radius:44%}
.tart { right: 18%; bottom: 19%; width: 230px; height: 92px; border-radius: 50%; background: radial-gradient(ellipse, var(--cherry-preserve) 0 38%, #7f1433 39% 43%, var(--burnt-sugar) 44% 64%, transparent 65%); }
.tart i { position: absolute; inset: 22px 56px; border-radius: 50%; background: radial-gradient(circle at 20% 35%, #fff 0 3px, transparent 4px), radial-gradient(circle at 70% 55%, #fff 0 3px, transparent 4px), rgba(178,30,75,.8); }
.macaron-stack { left: 46%; top: 21%; width: 180px; height: 150px; }
.macaron-stack span { display: block; height: 36px; margin: 7px; border-radius: 48%; background: linear-gradient(var(--rose-meringue), #d98aa1); box-shadow: inset 0 -9px 0 rgba(42,23,18,.08); transform: rotate(-7deg); }
.sugar-net { position: absolute; inset: 9% 8%; width: 84%; height: 74%; z-index: 3; overflow: visible; }
.sugar-net path, .sugar-net circle, .receipt-strokes path, .steam path, .last-steam path { fill: none; stroke: var(--clotted-cream); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawSugar 4.5s ease-in-out infinite alternate; filter: drop-shadow(0 0 7px rgba(255,242,216,.7)); }
.sugar-net circle { fill: var(--clotted-cream); stroke: var(--tarnished-brass); stroke-dasharray: none; animation: pearlPulse 3s ease-in-out infinite; }
.receipt-card, .caption, .folded-ticket, .box-shadow-note { background: rgba(255,242,216,.82); border: 1px solid rgba(196,154,74,.65); box-shadow: 0 18px 45px rgba(42,23,18,.16), inset 0 0 22px rgba(255,255,255,.42); }
.glass-note { position: absolute; right: 8%; top: 11%; width: min(330px, 35vw); padding: 24px; transform: rotate(3deg); z-index: 4; clip-path: polygon(0 0, 92% 0, 100% 12%, 100% 100%, 0 100%); }
.glass-note h2, .folded-ticket h2 { font-size: clamp(44px, 5vw, 74px); color: var(--cherry-preserve); }
.glass-note p, .folded-ticket p, .box-shadow-note p { font-size: 25px; }
.brass-tongs { position: absolute; left: 8%; top: 16%; width: 190px; height: 22px; border-top: 5px solid var(--tarnished-brass); border-bottom: 2px solid var(--tarnished-brass); transform: rotate(-28deg); opacity: .65; }
.brass-tongs::before, .brass-tongs::after { content:""; position:absolute; right:-16px; width:42px; height:2px; background:var(--tarnished-brass); transform-origin:left; } .brass-tongs::before{transform:rotate(23deg);top:-4px}.brass-tongs::after{transform:rotate(-23deg);bottom:-4px}
.wax-circles { position: absolute; right: 4vw; bottom: 9vh; width: 180px; height: 120px; border: 2px dashed rgba(178,30,75,.32); border-radius: 50%; transform: rotate(-16deg); }

.room-porcelain { background: radial-gradient(circle at 72% 34%, rgba(215,230,232,.8), transparent 26%), linear-gradient(135deg, var(--pistachio-porcelain), var(--clotted-cream) 62%); }
.porcelain-table { position: relative; width: min(1050px, 88vw); height: 74vh; }
.oval-plate { position: absolute; left: 8%; top: 16%; width: 540px; max-width: 55vw; height: 340px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.95) 0 45%, var(--fogged-mirror-blue) 46% 49%, var(--clotted-cream) 50% 66%, rgba(196,154,74,.7) 67% 68%, transparent 69%); box-shadow: 0 35px 80px rgba(42,23,18,.18); }
.plate-rim { position: absolute; inset: 36px; border: 1px dashed rgba(196,154,74,.55); border-radius: 50%; }
.millefeuille { position: absolute; left: 21%; top: 31%; width: 300px; height: 130px; transform: rotate(-8deg); }
.millefeuille span { display: block; height: 20px; margin: 4px 0; background: linear-gradient(90deg, var(--burnt-sugar), #f7d896 18%, var(--clotted-cream) 38%, var(--cherry-preserve) 44%, var(--clotted-cream) 52%, var(--burnt-sugar)); border-radius: 9px; box-shadow: 0 5px 9px rgba(42,23,18,.12); }
.plate-writing { position: absolute; left: 16%; bottom: 10%; font-size: 28px; color: var(--burnt-sugar); transform: rotate(8deg); }
.teacup { position: absolute; right: 5%; top: 8%; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, #7b3b25 0 28%, var(--clotted-cream) 29% 44%, var(--fogged-mirror-blue) 45% 48%, transparent 49%); box-shadow: 0 22px 70px rgba(42,23,18,.13); }
.teacup::after { content:""; position:absolute; right:-32px; top:118px; width:95px; height:105px; border:24px solid var(--clotted-cream); border-left:0; border-radius:0 60px 60px 0; }
.tea { position: absolute; inset: 90px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,242,216,.28), transparent 18%), #5a271d; }
.steam { position: absolute; left: 22%; bottom: 56%; width: 250px; height: 310px; opacity: .8; }
.steam path, .last-steam path { stroke: rgba(178,30,75,.5); stroke-width: 2; }
.spoon-reflection { position: absolute; left: 0; bottom: 6%; width: 330px; height: 86px; border-radius: 50%; background: radial-gradient(ellipse at 42% 50%, rgba(215,230,232,.8), rgba(196,154,74,.32), rgba(42,23,18,.15)); transform: rotate(-16deg); border: 1px solid rgba(196,154,74,.6); }
.spoon-reflection::after { content:""; position:absolute; right:-180px; top:35px; width:210px; height:13px; border-radius:20px; background:linear-gradient(90deg, rgba(196,154,74,.8), rgba(196,154,74,.15)); }
.spoon-reflection span { position: absolute; left: 54px; top: 28px; font-family: Fraunces, Georgia, serif; font-size: 24px; transform: scaleX(-1); color: rgba(42,23,18,.45); }
.porcelain-caption { position: absolute; right: 9vw; bottom: 10vh; width: min(440px, 42vw); padding: 28px; border-radius: 60px 60px 18px 18px; }
.porcelain-caption h2 { font-size: clamp(44px, 5vw, 76px); }

.room-ledger { background: linear-gradient(120deg, #2A1712, #4a251b 45%, #26120e); color: var(--clotted-cream); }
.ledger-board { position: relative; width: min(1020px, 84vw); height: 72vh; border: 1px solid rgba(196,154,74,.55); background: linear-gradient(135deg, rgba(255,242,216,.1), rgba(178,30,75,.18)), repeating-linear-gradient(0deg, transparent 0 38px, rgba(196,154,74,.14) 39px 40px); box-shadow: inset 0 0 80px rgba(0,0,0,.32), 0 25px 80px rgba(0,0,0,.32); }
.ribbon-strip { position: absolute; left: 9%; top: -7%; width: 58px; height: 112%; background: linear-gradient(90deg, #8a1638, var(--cherry-preserve), #d65d80); box-shadow: inset 0 0 18px rgba(255,242,216,.24); }
.ribbon-strip span { position: absolute; top: 9%; left: 50%; writing-mode: vertical-rl; transform: translateX(-50%); font-family: "Dancing Script", cursive; font-size: 27px; color: var(--clotted-cream); white-space: nowrap; }
.folded-ticket { color: var(--dark-assam-tea); position: absolute; padding: 28px; }
.ticket-one { left: 22%; top: 18%; width: min(480px, 48vw); transform: rotate(-3deg); clip-path: polygon(0 0, 88% 0, 100% 16%, 100% 100%, 0 100%); }
.ticket-one em { display: block; margin-top: 18px; color: var(--cherry-preserve); font-family: "Dancing Script", cursive; font-size: 26px; }
.ticket-two { right: 8%; bottom: 14%; width: 285px; transform: rotate(7deg); }
.ticket-two p { font-size: 30px; color: var(--burnt-sugar); }
.receipt-strokes { position: absolute; right: 5%; top: 7%; width: 58%; height: 52%; opacity: .55; }
.pressed-violets { position: absolute; left: 7vw; bottom: 12vh; width: 180px; height: 100px; }
.pressed-violets i, .pressed-violets::before, .pressed-violets::after { content:""; position:absolute; width: 34px; height: 54px; background: #8760a8; border-radius: 70% 20% 70% 20%; opacity: .8; transform-origin: bottom; }
.pressed-violets i:nth-child(1){left:44px;top:4px;transform:rotate(-35deg)}.pressed-violets i:nth-child(2){left:80px;top:2px;transform:rotate(18deg)}.pressed-violets i:nth-child(3){left:62px;top:32px;transform:rotate(65deg)}

.room-box { background: radial-gradient(ellipse at 50% 36%, rgba(196,154,74,.26), transparent 35%), linear-gradient(180deg, #160a08, var(--dark-assam-tea) 48%, #090403); color: var(--clotted-cream); }
.night-arch { position: absolute; width: min(900px, 76vw); height: 78vh; border: 1px solid rgba(196,154,74,.5); border-radius: 48% 48% 20px 20px / 25% 25% 20px 20px; background: linear-gradient(135deg, rgba(215,230,232,.08), rgba(255,242,216,.03)); box-shadow: inset 0 0 90px rgba(215,230,232,.08); }
.takeaway-box { position: relative; width: min(560px, 60vw); height: 380px; filter: drop-shadow(0 55px 55px rgba(0,0,0,.45)); transform: translateY(4vh); }
.box-body { position: absolute; left: 8%; right: 8%; bottom: 12%; height: 46%; background: linear-gradient(145deg, var(--clotted-cream), #e7d0a9); border: 2px solid rgba(196,154,74,.65); border-radius: 12px 12px 30px 30px; }
.box-lid { position: absolute; left: 0; right: 0; top: 16%; height: 42%; background: linear-gradient(150deg, #fff7e5, var(--clotted-cream) 60%, #d8b879); clip-path: polygon(12% 0, 88% 0, 100% 68%, 78% 100%, 22% 100%, 0 68%); border-radius: 24px; }
.cherry-ribbon { position: absolute; background: linear-gradient(90deg, #7f1433, var(--cherry-preserve), #df6f91); z-index: 3; box-shadow: inset 0 0 14px rgba(255,255,255,.2); }
.cherry-ribbon.horizontal { left: 2%; right: 2%; top: 48%; height: 42px; }
.cherry-ribbon.vertical { top: 12%; bottom: 7%; left: 47%; width: 46px; }
.pastry-seal { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); z-index: 4; width: 142px; height: 142px; display: grid; place-items: center; text-align: center; border-radius: 50%; background: radial-gradient(circle, var(--tarnished-brass), var(--burnt-sugar)); color: var(--clotted-cream); font-family: Fraunces, Georgia, serif; font-size: 22px; line-height: .9; box-shadow: 0 0 0 8px rgba(255,242,216,.38), inset 0 0 18px rgba(42,23,18,.25); }
.box-shadow-note { position: absolute; left: 11vw; bottom: 11vh; color: var(--dark-assam-tea); width: 360px; padding: 24px; border-radius: 50% 50% 18px 18px; transform: rotate(-4deg); }
.last-steam { position: absolute; right: 12vw; top: 15vh; width: 420px; height: 300px; opacity: .36; }

.room:not(.is-active) .receipt-card, .room:not(.is-active) .caption, .room:not(.is-active) .folded-ticket, .room:not(.is-active) .takeaway-box { transform: translateY(30px) rotate(var(--tilt, 0deg)); opacity: .72; }
.room.is-active .pastry, .room.is-active .takeaway-box, .room.is-active .oval-plate, .room.is-active .teacup { animation: stageBreathe 5s ease-in-out infinite; }

@keyframes glowPulse { 50% { transform: scale(1.08); opacity: .72; } }
@keyframes drawRail { to { stroke-dashoffset: 0; } }
@keyframes drawSugar { to { stroke-dashoffset: 0; } }
@keyframes pearlPulse { 50% { r: 9; opacity: .6; } }
@keyframes candleSlide { 50% { transform: translateX(18%); opacity: .45; } }
@keyframes stageBreathe { 50% { transform: translateY(-10px) rotate(.6deg); } }

@media (max-width: 760px) {
  body { cursor: auto; }
  .spoon-cursor { display: none; }
  .cabinet-nav { right: 10px; top: 10px; gap: 4px; }
  .cabinet-nav a { font-size: 9px; padding: 6px 8px; }
  .ribbon-progress { width: 24px; left: 0; }
  .room { padding: 12vh 6vw 8vh 9vw; }
  .wordmark { left: 8%; font-size: 15vw; }
  .glass-note, .porcelain-caption, .ticket-one, .ticket-two, .box-shadow-note { width: 78vw; left: 12vw; right: auto; }
  .teacup { right: -14%; transform: scale(.68); }
  .oval-plate { left: 0; max-width: 88vw; }
}