:root {
  --gold: #FFD166;
  --coral: #FF6B4A;
  --lime: #B6FF2E;
  --lavender: #D9C7FF;
  --cream: #FFF3D6;
  --midnight: #17111F;
  --magenta: #FF3EA5;
  --cyan: #20E7FF;
  --ink: #17111F;
  --font-label: "Bowlby One SC", Impact, Haettenschweiler, "Arial Black", system-ui, sans-serif;
  --font-body: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Fraunces, Georgia, "Times New Roman", serif;
  --font-hand: Caveat, "Comic Sans MS", "Bradley Hand", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 62, 165, .28), transparent 28vw),
    radial-gradient(circle at 85% 5%, rgba(32, 231, 255, .25), transparent 24vw),
    linear-gradient(135deg, #17111F 0%, #271638 52%, #17111F 100%);
  color: var(--cream);
  font-family: var(--font-body);
}

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .22; background-image: radial-gradient(rgba(255,243,214,.35) 1px, transparent 1px); background-size: 5px 5px; mix-blend-mode: overlay; }
.mirror-flash { position: fixed; inset: -40vmax; z-index: 45; pointer-events: none; opacity: 0; transform: rotate(-18deg) translateX(-80%); background: conic-gradient(from 80deg, transparent 0 36%, rgba(32,231,255,.9) 42%, rgba(255,255,255,.85) 45%, rgba(255,209,102,.8) 48%, transparent 55% 100%); }
.mirror-flash.flash { animation: mirrorSweep 900ms cubic-bezier(.16, .84, .28, 1); }
@keyframes mirrorSweep { 0% { opacity: 0; transform: rotate(-18deg) translateX(-85%); } 28% { opacity: .95; } 100% { opacity: 0; transform: rotate(-18deg) translateX(85%); } }

.lock-stage { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; perspective: 1400px; background: radial-gradient(circle at center, #33204e, var(--midnight) 70%); transition: opacity .8s ease, visibility .8s ease; }
.lock-stage.open { opacity: 0; visibility: hidden; }
.phone { position: relative; width: min(390px, 86vw); height: min(740px, 88vh); border: 14px solid #08060c; border-radius: 42px; background: linear-gradient(160deg, #17111F, #351f5b 48%, #17111F), repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.05) 18px 20px); box-shadow: 0 38px 100px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,243,214,.1); overflow: hidden; transform-origin: left center; transition: transform .9s cubic-bezier(.16,.9,.22,1); }
.phone.flip { transform: rotateY(-72deg) rotateZ(-5deg) translateX(-20vw); }
.phone-shine { position: absolute; inset: -20%; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.18), transparent 45%); transform: translateX(-35%); animation: phoneShine 3.8s infinite; }
@keyframes phoneShine { 50% { transform: translateX(45%); } }
.phone-time { margin-top: 52px; text-align: center; font: 92px/1 var(--font-serif); color: var(--cream); text-shadow: 0 0 22px rgba(255,62,165,.55); }
.phone-date { text-align: center; color: var(--lavender); letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.lock-sticker { position: absolute; padding: 10px 16px; border: 3px solid var(--ink); border-radius: 18px 18px 6px 18px; color: var(--ink); font: 20px/1 var(--font-hand); box-shadow: 5px 6px 0 rgba(0,0,0,.3); }
.sticker-lime { background: var(--lime); top: 158px; left: 24px; transform: rotate(-13deg); }
.sticker-gold { background: var(--gold); right: 18px; top: 245px; transform: rotate(11deg); }
.sticker-coral { background: var(--coral); bottom: 158px; left: 42px; transform: rotate(8deg); color: var(--cream); }
.alert { position: absolute; left: 28px; right: 28px; padding: 14px 16px; border: 2px solid rgba(255,243,214,.4); border-radius: 21px; background: rgba(255,243,214,.16); backdrop-filter: blur(10px); box-shadow: 0 10px 25px rgba(0,0,0,.25); animation: jitter 1.4s steps(2) infinite; }
.alert b { color: var(--cyan); margin-right: 10px; } .alert span { color: var(--cream); }
.a1 { top: 345px; } .a2 { top: 420px; animation-delay: .25s; } .a3 { top: 495px; animation-delay: .5s; }
@keyframes jitter { 0%, 100% { transform: translate(0) rotate(0); } 30% { transform: translate(1px,-2px) rotate(.5deg); } 62% { transform: translate(-2px,1px) rotate(-.4deg); } }
.unlock { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%) rotate(-2deg); border: 3px solid var(--ink); border-radius: 999px; background: var(--magenta); color: var(--cream); padding: 17px 28px; font: 22px/1 var(--font-label); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 0 5px var(--gold), 0 12px 0 rgba(0,0,0,.35); cursor: pointer; }

.sticky-tabs { position: fixed; right: 0; top: 13vh; z-index: 30; display: grid; gap: 12px; transform: translateX(18px); }
.sticky-tabs a { display: block; width: 98px; padding: 14px 12px; border: 3px solid var(--ink); border-right: 0; border-radius: 18px 0 0 18px; background: var(--gold); color: var(--ink); text-decoration: none; font: 16px/1 var(--font-label); text-transform: uppercase; box-shadow: -6px 7px 0 rgba(0,0,0,.26); transform: rotate(var(--r, -3deg)); transition: transform .3s cubic-bezier(.2,1.8,.35,1); }
.sticky-tabs a:nth-child(2) { --r: 4deg; background: var(--magenta); color: var(--cream); } .sticky-tabs a:nth-child(3) { --r: -6deg; background: var(--lime); } .sticky-tabs a:nth-child(4) { --r: 5deg; background: var(--cyan); } .sticky-tabs a:nth-child(5) { --r: -2deg; background: var(--lavender); }
.sticky-tabs a:hover, .sticky-tabs a.active { transform: translateX(-18px) rotate(0deg); }

.timefold { position: relative; }
.commute-line { position: fixed; left: -12vw; bottom: 2vh; width: 130vw; height: 8px; z-index: 1; transform: rotate(-32deg); transform-origin: left center; background: repeating-linear-gradient(90deg, var(--cyan) 0 28px, var(--gold) 28px 42px, var(--magenta) 42px 70px); border-radius: 999px; box-shadow: 0 0 28px rgba(32,231,255,.65); }
.commute-line span { position: absolute; width: 25px; height: 25px; border-radius: 50%; background: var(--lime); right: var(--progress, 100%); top: -9px; box-shadow: 0 0 28px var(--lime); }
.chapter { min-height: 100vh; position: relative; display: grid; place-items: center; overflow: hidden; padding: 9vh 9vw; isolation: isolate; }
.chapter:before { content: ""; position: absolute; inset: 5vh 6vw; z-index: -2; background: linear-gradient(135deg, rgba(255,243,214,.08), rgba(255,62,165,.08)); border: 2px dashed rgba(255,243,214,.25); border-radius: 38px; transform: rotate(-1deg); }
.chapter:after { content: ""; position: absolute; inset: 0; z-index: -3; background-image: linear-gradient(rgba(255,243,214,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,243,214,.08) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle, #000 10%, transparent 78%); }
.paper-stack { position: relative; max-width: 720px; padding: clamp(28px, 5vw, 62px); color: var(--ink); border: 4px solid var(--ink); border-radius: 34px 18px 42px 22px; box-shadow: 14px 14px 0 rgba(0,0,0,.32), 0 0 0 8px rgba(255,255,255,.08); }
.paper-stack:before, .paper-stack:after { content: ""; position: absolute; z-index: -1; inset: 14px -18px -14px 18px; border: 3px solid var(--ink); border-radius: inherit; background: rgba(255,243,214,.35); transform: rotate(4deg); }
.paper-stack:after { inset: -18px 22px 18px -16px; transform: rotate(-5deg); background: rgba(217,199,255,.38); }
.lavender { background: var(--lavender); } .cream { background: var(--cream); } .gold { background: var(--gold); } .midnight { background: var(--midnight); color: var(--cream); border-color: var(--cream); } .midnight:before, .midnight:after { border-color: var(--cream); }
.tilt-left { transform: rotate(-3deg); } .tilt-right { transform: rotate(3deg); }
.stamp { display: inline-block; margin: 0 0 18px; padding: 8px 14px; background: var(--magenta); color: var(--cream); border: 2px solid currentColor; border-radius: 999px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
h1, h2 { margin: 0; font-family: var(--font-label); text-transform: uppercase; letter-spacing: .015em; line-height: .88; }
h1 { font-size: clamp(62px, 12vw, 150px); text-shadow: 5px 5px 0 var(--coral), 9px 9px 0 var(--cyan); }
h2 { font-size: clamp(44px, 8vw, 108px); }
p { font-size: clamp(18px, 2vw, 24px); line-height: 1.25; }
.diary { font-family: var(--font-serif); font-style: italic; }
.scribble, .closing-scribble { position: absolute; font: clamp(25px, 4vw, 58px)/1 var(--font-hand); color: var(--lime); transform: rotate(-9deg); text-shadow: 0 0 16px rgba(182,255,46,.6); }

.calendar-room { position: absolute; right: 12vw; bottom: 10vh; display: grid; grid-template-columns: repeat(3, 110px); gap: 10px; transform: rotate(7deg); }
.calendar-room div { min-height: 88px; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); padding: 10px; font: 28px/1 var(--font-label); box-shadow: 7px 7px 0 rgba(0,0,0,.28); }
.calendar-room span { display: block; margin-top: 8px; font: 20px/1 var(--font-hand); color: var(--magenta); }
.object.alarm-clock { position: absolute; left: 10vw; top: 18vh; font-size: 72px; filter: drop-shadow(0 0 18px var(--gold)); animation: bounce 1.1s infinite; }
@keyframes bounce { 50% { transform: translateY(-16px) rotate(-8deg); } }
.washi { position: absolute; left: 9vw; bottom: 17vh; padding: 16px 70px; background: repeating-linear-gradient(45deg, var(--cyan) 0 12px, var(--magenta) 12px 24px); color: var(--cream); font-weight: 900; transform: rotate(-15deg); opacity: .9; }
.scribble { right: 9vw; top: 12vh; }

.receipt.rail { position: absolute; left: 7vw; top: 8vh; bottom: 7vh; width: 140px; padding: 34px 18px; background: var(--cream); color: var(--ink); border-left: 3px dashed var(--ink); border-right: 3px dashed var(--ink); font: 22px/1.4 var(--font-hand); transform: rotate(-4deg); box-shadow: 10px 10px 0 rgba(0,0,0,.25); }
.message-cloud { position: absolute; padding: 18px 24px; background: var(--cyan); color: var(--ink); border: 3px solid var(--ink); border-radius: 32px 32px 32px 4px; font-weight: 900; box-shadow: 7px 8px 0 rgba(0,0,0,.28); animation: rain 4s ease-in-out infinite; }
.c1 { left: 18vw; top: 20vh; } .c2 { right: 14vw; top: 18vh; background: var(--magenta); color: var(--cream); animation-delay: .5s; } .c3 { left: 25vw; bottom: 15vh; background: var(--lavender); animation-delay: 1s; } .c4 { right: 22vw; bottom: 22vh; background: var(--lime); animation-delay: 1.5s; }
@keyframes rain { 50% { transform: translate(18px, 32px) rotate(3deg); } }
.doodle-stars { position: absolute; right: 11vw; top: 44vh; font-size: 54px; color: var(--gold); letter-spacing: 18px; animation: twinkle 1.7s infinite; }
@keyframes twinkle { 50% { opacity: .35; transform: scale(.94); } }

.subway-map { position: absolute; inset: 10vh 8vw; opacity: .82; }
.subway-map svg { width: 100%; height: 100%; overflow: visible; }
.route { fill: none; stroke-width: 18; stroke-linecap: round; stroke-dasharray: 35 18; animation: dash 10s linear infinite; filter: drop-shadow(0 0 12px currentColor); }
.route.cyan { stroke: var(--cyan); color: var(--cyan); } .route.magenta { stroke: var(--magenta); color: var(--magenta); } .route.lime { stroke: var(--lime); color: var(--lime); }
@keyframes dash { to { stroke-dashoffset: -530; } }
.stations circle { fill: var(--cream); stroke: var(--ink); stroke-width: 5; }
.shopping-scrap { position: absolute; right: 11vw; bottom: 13vh; list-style: none; padding: 24px 34px; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); transform: rotate(9deg); font: 27px/1.25 var(--font-hand); box-shadow: 10px 10px 0 rgba(0,0,0,.25); }
.shopping-scrap li:before { content: "✓ "; color: var(--coral); font-weight: 900; }
.earbud-cord { position: absolute; left: 8vw; bottom: 8vh; width: 330px; height: 170px; border: 8px solid var(--lavender); border-color: var(--lavender) transparent transparent var(--lavender); border-radius: 50%; transform: rotate(-22deg); }

.compact { position: absolute; left: 10vw; top: 16vh; width: min(470px, 78vw); height: min(470px, 78vw); border-radius: 50%; border: 7px solid var(--cream); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(32,231,255,.38) 32%, rgba(217,199,255,.35) 56%, #17111F 68%); box-shadow: 0 0 70px rgba(32,231,255,.42), inset 0 0 35px rgba(255,255,255,.38); overflow: hidden; }
.compact:after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.65), transparent 42%); animation: glass 3s infinite; }
@keyframes glass { 50% { transform: translateX(35%); } }
.compact-lid { position: absolute; inset: -4% -4% 52% -4%; background: var(--magenta); border: 5px solid var(--cream); border-radius: 240px 240px 18px 18px; transform-origin: bottom center; transform: rotateX(48deg); display: grid; place-items: center; font: 38px/1 var(--font-label); text-transform: uppercase; color: var(--cream); }
.compact-glass { position: absolute; inset: 38% 12% 12%; display: grid; place-items: center; text-align: center; color: var(--cream); font-family: var(--font-serif); }
.compact-glass b { font-size: 60px; color: var(--cyan); } .compact-glass em { font-size: 24px; }
.lipstick-mark { position: absolute; right: 17vw; top: 18vh; font: 76px/1 var(--font-hand); color: var(--coral); transform: rotate(-18deg); }
.bowclip { position: absolute; right: 11vw; bottom: 14vh; font-size: 110px; color: var(--gold); text-shadow: 0 0 18px var(--gold); }

.orbit-system { position: relative; width: min(720px, 86vw); height: min(720px, 86vw); border: 2px dashed rgba(255,243,214,.45); border-radius: 50%; animation: slowSpin 28s linear infinite; }
@keyframes slowSpin { to { transform: rotate(360deg); } }
.sun { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 230px; height: 230px; display: grid; place-items: center; text-align: center; border-radius: 50%; background: var(--gold); color: var(--ink); border: 5px solid var(--ink); font: 52px/.86 var(--font-label); text-transform: uppercase; box-shadow: 0 0 0 12px var(--magenta), 0 0 80px rgba(255,62,165,.7); }
.orb { position: absolute; left: 50%; top: 50%; padding: 13px 18px; border: 3px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink); font-weight: 900; transform: rotate(var(--a)) translateX(var(--d)) rotate(calc(-1 * var(--a))); box-shadow: 6px 6px 0 rgba(0,0,0,.28); }
.o1 { --a: 10deg; --d: 265px; background: var(--cyan); } .o2 { --a: 76deg; --d: 285px; background: var(--cream); } .o3 { --a: 145deg; --d: 240px; background: var(--magenta); color: var(--cream); } .o4 { --a: 213deg; --d: 275px; background: var(--lime); } .o5 { --a: 292deg; --d: 250px; background: var(--lavender); } .o6 { --a: 335deg; --d: 305px; background: var(--gold); }
.final-note { position: absolute; right: 8vw; bottom: 9vh; max-width: 430px; transform: rotate(4deg); }
.closing-scribble { left: 9vw; bottom: 13vh; color: var(--cyan); }

.task-swarm { position: fixed; inset: 0; pointer-events: none; z-index: 22; }
.task { position: absolute; min-width: 32px; padding: 7px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink); font-size: 12px; font-weight: 900; text-transform: uppercase; box-shadow: 3px 4px 0 rgba(0,0,0,.25); will-change: transform; }
.task:nth-child(3n) { background: var(--lime); } .task:nth-child(3n+1) { background: var(--magenta); color: var(--cream); } .task:nth-child(4n) { background: var(--cyan); color: var(--ink); }

@media (max-width: 760px) {
  .sticky-tabs { top: auto; bottom: 0; left: 0; right: 0; display: flex; transform: none; justify-content: center; gap: 2px; }
  .sticky-tabs a { width: auto; font-size: 11px; border-radius: 14px 14px 0 0; border-right: 3px solid var(--ink); padding: 12px 9px; }
  .chapter { padding: 12vh 5vw 18vh; align-items: start; }
  .calendar-room, .receipt.rail, .doodle-stars, .earbud-cord { display: none; }
  .message-cloud { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 10px; justify-self: start; }
  .compact { position: relative; left: auto; top: auto; margin-bottom: 4vh; }
  .final-note { position: relative; right: auto; bottom: auto; margin-top: 4vh; }
  .orb { --d: 38vw; font-size: 11px; }
}