:root {
  --ink: #221B3A;
  --tangerine: #FF7A3D;
  --mint: #58D6A8;
  --cream: #FFF1D6;
  --lavender: #9B7BFF;
  --raspberry: #E73F73;
  --blue: #2F77D1;
  --voice-a: var(--lavender);
  --voice-b: var(--tangerine);
  --scene-rotation: 0deg;
  --scene-progress: 0;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--cream); color: var(--ink); }

body {
  overflow: hidden;
  font-family: "Nunito Sans", "Trebuchet MS", system-ui, sans-serif;
  cursor: grab;
}

body:active { cursor: grabbing; }
button { font: inherit; color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .34;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(34,27,58,.18) 0 1px, transparent 1.8px),
    radial-gradient(circle at 70% 80%, rgba(231,63,115,.13) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent 0 48%, rgba(255,255,255,.25) 49% 51%, transparent 52%);
  background-size: 19px 17px, 23px 29px, 7px 7px;
  mix-blend-mode: multiply;
}

.stage {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 12%, rgba(88,214,168,.55) 0 7vw, transparent 7.2vw),
    radial-gradient(circle at 13% 72%, rgba(155,123,255,.45) 0 9vw, transparent 9.2vw),
    linear-gradient(135deg, transparent 0 47%, rgba(47,119,209,.18) 47.5% 50%, transparent 50.5%),
    var(--cream);
}

.stage::before,
.stage::after {
  content: "";
  position: absolute;
  border: 3px solid var(--ink);
  z-index: 2;
  pointer-events: none;
  box-shadow: 7px 7px 0 rgba(34,27,58,.16);
}
.stage::before { width: 18vw; height: 11vh; left: 10vw; top: 5vh; transform: rotate(-4deg); background: repeating-linear-gradient(90deg, var(--mint) 0 22px, var(--cream) 22px 44px); }
.stage::after { width: 22vw; height: 8vh; right: -4vw; bottom: 8vh; transform: rotate(8deg); background: repeating-linear-gradient(45deg, var(--raspberry) 0 16px, var(--cream) 16px 32px); }

.bead-nav {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 11px;
}

.bead {
  width: 62px;
  height: 62px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  box-shadow: 5px 5px 0 var(--ink);
  display: grid;
  place-items: center;
  padding: 0;
  transform: rotate(-7deg);
  transition: transform .35s, background .35s, box-shadow .35s;
}
.bead span { font-family: "Bungee Shade", Impact, fantasy; font-size: 19px; line-height: .8; }
.bead i { font-style: normal; font-size: 11px; margin-top: -12px; color: var(--raspberry); }
.bead:nth-child(even) { transform: rotate(8deg); }
.bead.active { background: var(--mint); transform: rotate(0deg) scale(1.12); box-shadow: 8px 8px 0 var(--ink); }

.paper-toolbar {
  position: fixed;
  right: 24px;
  top: 22px;
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: rgba(255,241,214,.9);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(34,27,58,.22);
  transform: rotate(2deg);
}
.toolbar-title { text-transform: uppercase; letter-spacing: .13em; font-weight: 900; font-size: 12px; }
.drawer-button, .note-toggle, #closeDrawer {
  border: 3px solid var(--ink);
  background: var(--tangerine);
  border-radius: 0;
  padding: 9px 14px;
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 900;
  text-transform: lowercase;
}
.note-toggle { background: var(--mint); margin-top: 16px; }
.mini-clock { width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 50%; position: relative; background: var(--cream); }
.mini-clock span, .mini-clock b { position: absolute; left: 18px; bottom: 18px; width: 4px; transform-origin: 50% 100%; background: var(--ink); }
.mini-clock span { height: 15px; transform: rotate(calc(var(--scene-rotation) + 42deg)); }
.mini-clock b { height: 12px; transform: rotate(calc(var(--scene-rotation) - 28deg)); background: var(--raspberry); }

.clock-theater { position: relative; width: 100vw; height: 100vh; }
.rim-wrap {
  position: absolute;
  left: 50%; top: 50%;
  width: min(82vmin, 780px);
  height: min(82vmin, 780px);
  transform: translate(-50%, -50%);
  z-index: 11;
  pointer-events: none;
}
.clock-face {
  position: absolute;
  inset: 0;
  border: 8px solid var(--ink);
  border-radius: 50%;
  background:
    conic-gradient(from calc(var(--scene-rotation) - 36deg), rgba(255,122,61,.74) 0deg 62deg, rgba(155,123,255,.72) 62deg 134deg, rgba(88,214,168,.72) 134deg 202deg, rgba(231,63,115,.62) 202deg 278deg, rgba(47,119,209,.58) 278deg 360deg),
    var(--cream);
  box-shadow: 16px 18px 0 rgba(34,27,58,.22), inset 0 0 0 20px rgba(255,241,214,.58), inset 0 0 0 23px var(--ink);
  transform: rotate(var(--scene-rotation));
  transition: transform .9s cubic-bezier(.21,.92,.18,1), background .9s;
}
.clock-face::before { content: ""; position: absolute; inset: 13%; border: 4px dashed rgba(34,27,58,.55); border-radius: 50%; background: rgba(255,241,214,.42); }
.halftone { position: absolute; inset: 8%; border-radius: 50%; background-image: radial-gradient(circle, rgba(34,27,58,.24) 0 2px, transparent 2.5px); background-size: 18px 18px; mask-image: linear-gradient(120deg, transparent, #000 30%, #000 70%, transparent); }
.clock-label { position: absolute; left: 50%; transform: translateX(-50%); z-index: 4; font-family: "Noto Sans JP", "Hiragino Sans", sans-serif; font-weight: 900; background: var(--cream); border: 3px solid var(--ink); padding: 6px 16px; box-shadow: 4px 4px 0 var(--ink); }
.clock-label.top { top: 11%; }
.clock-label.bottom { bottom: 12%; text-transform: uppercase; letter-spacing: .18em; font-family: "Nunito Sans", system-ui, sans-serif; font-size: 12px; }
.garland { position: absolute; inset: -7%; animation: garlandWobble 5s ease-in-out infinite; }
.garland span, .garland em { position: absolute; left: 50%; top: 50%; font-family: "Bungee Shade", Impact, fantasy; font-size: clamp(26px, 4vw, 54px); font-style: normal; transform-origin: 0 0; text-shadow: 3px 3px 0 var(--cream); }
.garland span:nth-child(1){ transform: rotate(-110deg) translate(0, -48vmin); color: var(--tangerine); }
.garland span:nth-child(2){ transform: rotate(-82deg) translate(0, -48vmin); color: var(--lavender); }
.garland span:nth-child(3){ transform: rotate(-54deg) translate(0, -48vmin); color: var(--mint); }
.garland span:nth-child(4){ transform: rotate(-26deg) translate(0, -48vmin); color: var(--raspberry); }
.garland span:nth-child(5){ transform: rotate(2deg) translate(0, -48vmin); color: var(--blue); }
.garland em{ transform: rotate(30deg) translate(0, -48vmin); color: var(--ink); }
.garland span:nth-child(7){ transform: rotate(58deg) translate(0, -48vmin); color: var(--tangerine); }
.garland span:nth-child(8){ transform: rotate(86deg) translate(0, -48vmin); color: var(--lavender); }
.garland span:nth-child(9){ transform: rotate(114deg) translate(0, -48vmin); color: var(--mint); }
.hand { position: absolute; left: 50%; bottom: 50%; width: 15px; height: 36%; border: 3px solid var(--ink); transform-origin: 50% 100%; z-index: 5; border-radius: 999px 999px 0 0; box-shadow: 4px 2px 0 rgba(34,27,58,.22); transition: transform .8s cubic-bezier(.22,1.3,.24,1); }
.hand-lavender { background: var(--lavender); transform: translateX(-50%) rotate(calc(var(--scene-rotation) + 42deg)); }
.hand-tangerine { background: var(--tangerine); height: 44%; transform: translateX(-50%) rotate(calc(var(--scene-rotation) - 42deg)); animation: twitch 2.6s steps(2,end) infinite; }
.clock-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-5deg); z-index: 6; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; border: 5px solid var(--ink); background: var(--cream); color: var(--raspberry); font-family: "Bungee Shade", Impact, fantasy; box-shadow: 7px 7px 0 var(--ink); }
.tick { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border: 3px solid var(--ink); border-radius: 50%; transform: rotate(var(--a)) translateY(-36vmin); background: var(--c); box-shadow: 3px 3px 0 rgba(34,27,58,.24); }

.scene-stack, .scene { position: absolute; inset: 0; }
.scene { opacity: 0; transform: scale(1.06) rotate(1deg); transition: opacity .65s ease, transform .9s cubic-bezier(.2,.9,.2,1); overflow: hidden; }
.scene.active { opacity: 1; transform: scale(1) rotate(0deg); z-index: 10; }
.scene-mask { position: absolute; inset: -10%; background: inherit; clip-path: polygon(50% 50%, 105% -5%, 105% 105%); transform: rotate(calc(var(--scene-rotation) * -1)); opacity: .4; }
.scene::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 58px, rgba(34,27,58,.12) 58px 61px); pointer-events: none; }
.scene-breakfast { background: linear-gradient(120deg, var(--cream) 0 45%, rgba(255,122,61,.5) 45% 62%, rgba(155,123,255,.32) 62%), var(--cream); }
.scene-notebook { background: linear-gradient(90deg, rgba(155,123,255,.5), var(--cream) 46%, rgba(47,119,209,.34) 46% 49%, rgba(88,214,168,.42) 49%); }
.scene-arcade { background: radial-gradient(circle at 72% 50%, var(--mint) 0 13%, transparent 13.5%), repeating-conic-gradient(from 45deg at 18% 80%, var(--ink) 0 7deg, var(--cream) 7deg 14deg), linear-gradient(135deg, var(--tangerine), var(--cream) 52%, var(--raspberry)); }
.scene-rooftop { background: linear-gradient(160deg, var(--raspberry) 0 24%, var(--tangerine) 24% 44%, var(--cream) 44% 70%, var(--blue) 70%); }
.scene-goodnight { background: radial-gradient(circle at 74% 22%, var(--cream) 0 7%, transparent 7.5%), linear-gradient(145deg, var(--ink), #35295c 50%, var(--lavender)); color: var(--cream); }

.drawer { position: absolute; z-index: 15; width: min(560px, 46vw); top: 18vh; padding: clamp(24px, 4vw, 48px); background: rgba(255,241,214,.96); color: var(--ink); border: 5px solid var(--ink); box-shadow: 14px 14px 0 rgba(34,27,58,.3); transform: rotate(-2.5deg) translateY(24px); opacity: 0; transition: transform .75s .18s, opacity .55s .18s; }
.active .drawer { transform: rotate(-2.5deg) translateY(0); opacity: 1; }
.drawer-right { right: 9vw; transform: rotate(2.5deg) translateY(24px); }
.active .drawer-right { transform: rotate(2.5deg) translateY(0); }
.drawer-left { left: 11vw; }
.drawer.small { width: min(510px, 42vw); }
.drawer.dark { background: var(--ink); color: var(--cream); border-color: var(--cream); box-shadow: 14px 14px 0 rgba(255,241,214,.3); }
.moon-drawer { background: #2b2350; color: var(--cream); border-color: var(--cream); }
.jp-note { font-family: "Noto Sans JP", "Hiragino Sans", sans-serif; display: inline-block; margin: 0 0 12px; padding: 5px 13px; background: var(--mint); color: var(--ink); border: 3px solid var(--ink); transform: rotate(3deg); font-weight: 900; }
h1 { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 900; font-size: clamp(37px, 6vw, 86px); line-height: .9; letter-spacing: -.04em; }
h1 span { display: block; font-family: "Bungee Shade", Impact, fantasy; color: var(--raspberry); font-size: 1.08em; letter-spacing: .01em; }
.caption { font-family: "Fraunces", Georgia, serif; font-size: clamp(20px, 2vw, 30px); line-height: 1.12; margin: 20px 0 0; }

.prop-island, .notebook-prop, .token-orbit, .rooftop-rail, .nightstand { position: absolute; z-index: 14; filter: drop-shadow(10px 12px 0 rgba(34,27,58,.22)); }
.breakfast-table { right: 11vw; bottom: 13vh; width: 420px; height: 300px; transform: rotate(5deg); }
.breakfast-table::before { content:""; position:absolute; inset: 40px 0 0; border:5px solid var(--ink); border-radius:42% 58% 50% 50%; background: var(--mint); }
.plate { position:absolute; width:150px; height:150px; border:5px solid var(--ink); border-radius:50%; background: var(--cream); top: 88px; }
.plate i { position:absolute; inset:24px; border-radius:50%; border:3px dashed var(--ink); }
.plate-lavender { left:58px; box-shadow: inset 0 0 0 18px var(--lavender); }
.plate-tangerine { right:42px; box-shadow: inset 0 0 0 18px var(--tangerine); }
.melon-pan { position:absolute; left:160px; top:94px; width:110px; height:98px; border:5px solid var(--ink); border-radius:50%; background: repeating-linear-gradient(45deg, #f5be62 0 16px, #f8d084 16px 32px); }
.alarm { position:absolute; width:80px; height:80px; border:5px solid var(--ink); border-radius:50%; background: var(--cream); top: 0; }
.alarm::before, .alarm::after { content:""; position:absolute; width:26px; height:20px; border:4px solid var(--ink); border-radius:50% 50% 0 0; top:-18px; background: inherit; }
.alarm::before { left:2px; transform:rotate(-25deg); } .alarm::after { right:2px; transform:rotate(25deg); }
.alarm b { position:absolute; left:35px; bottom:35px; width:4px; height:26px; background: var(--ink); transform-origin:50% 100%; transform:rotate(42deg); }
.alarm-one { left:18px; background: var(--lavender); } .alarm-two { right:18px; background: var(--tangerine); }
.scrap, .washi, .speech { position:absolute; z-index:18; border:3px solid var(--ink); background: var(--cream); box-shadow:6px 6px 0 var(--ink); font-weight:900; padding:10px 16px; }
.scrap-a { right:34vw; top:16vh; transform:rotate(8deg); color:var(--blue); } .scrap-b { right:8vw; top:42vh; transform:rotate(-12deg); color:var(--raspberry); }
.notebook-prop { left: 10vw; bottom: 12vh; width: 500px; height: 330px; transform: rotate(-6deg); display:flex; }
.page { flex:1; border:5px solid var(--ink); background: repeating-linear-gradient(0deg, var(--cream) 0 30px, rgba(47,119,209,.55) 31px 33px); position:relative; }
.left-page { background-color: rgba(155,123,255,.25); } .right-page { background-color: rgba(88,214,168,.25); }
.page span { position:absolute; left:22px; top:34px; font-family:"Bungee Shade", Impact, fantasy; font-size:40px; color:var(--raspberry); transform:rotate(-8deg); }
.diary-lock { position:absolute; left:50%; top:48%; width:58px; height:64px; transform:translate(-50%,-50%); border:5px solid var(--ink); background:var(--tangerine); }
.diary-lock::before { content:""; position:absolute; left:9px; top:-38px; width:32px; height:38px; border:5px solid var(--ink); border-bottom:0; border-radius:999px 999px 0 0; }
.washi-one { left: 21vw; top: 12vh; background: var(--tangerine); transform: rotate(5deg); }
.arrow-scribble { position:absolute; right:18vw; bottom:20vh; z-index:17; width:260px; }
.arrow-scribble path { fill:none; stroke:var(--blue); stroke-width:10; stroke-linecap:round; stroke-dasharray:430; stroke-dashoffset:430; }
.active .arrow-scribble path { animation: drawPath 1.2s .4s ease forwards; }
.token-orbit { right: 14vw; top: 20vh; width: 330px; height: 330px; border:6px dashed var(--ink); border-radius:50%; animation: orbit 12s linear infinite; }
.token { position:absolute; width:82px; height:82px; border:5px solid var(--ink); border-radius:50%; background:var(--cream); display:grid; place-items:center; font-family:"Bungee Shade", Impact, fantasy; color:var(--raspberry); }
.token:nth-child(1){ left:50%; top:-41px; transform:translateX(-50%); background:var(--mint); }.token:nth-child(2){ right:-41px; top:50%; transform:translateY(-50%); background:var(--lavender); }.token:nth-child(3){ left:50%; bottom:-41px; transform:translateX(-50%); background:var(--tangerine); }.token:nth-child(4){ left:-41px; top:50%; transform:translateY(-50%); }
.checker-ribbon { position:absolute; left:0; bottom:10vh; width:70vw; height:62px; border-block:5px solid var(--ink); background:repeating-linear-gradient(90deg, var(--ink) 0 34px, var(--cream) 34px 68px); transform:rotate(-8deg); z-index:13; }
.sock { position:absolute; z-index:16; width:70px; height:160px; border:5px solid var(--ink); border-radius:32px 32px 40px 12px; bottom:17vh; background:repeating-linear-gradient(0deg, var(--cream) 0 22px, var(--lavender) 22px 44px); }
.sock-one { left:35vw; transform:rotate(17deg); }.sock-two { left:43vw; transform:rotate(-12deg); background:repeating-linear-gradient(0deg, var(--cream) 0 18px, var(--tangerine) 18px 36px); }
.rooftop-rail { left: 6vw; bottom: 13vh; width: 62vw; height: 170px; border-top:10px solid var(--ink); border-bottom:10px solid var(--ink); display:flex; justify-content:space-around; align-items:stretch; }
.rooftop-rail i { width:10px; background:var(--ink); transform:skew(-9deg); }
.stamp-burst { position:absolute; left:23vw; top:17vh; z-index:16; width:150px; height:150px; display:grid; place-items:center; border:6px solid var(--ink); background:var(--raspberry); color:var(--cream); border-radius:50%; font-family:"Noto Sans JP", sans-serif; font-size:38px; font-weight:900; transform:rotate(-15deg); box-shadow:10px 10px 0 rgba(34,27,58,.25); animation: stampPop 2.4s ease-in-out infinite; }
.speech { color:var(--ink); border-radius:30px; }.echo-one { right: 35vw; top: 38vh; transform:rotate(-8deg); }.echo-two { right: 20vw; top: 49vh; transform:rotate(9deg); background:var(--mint); }
.nightstand { right: 13vw; bottom: 12vh; width: 380px; height: 300px; }
.moon-stamp { position:absolute; right:20px; top:0; width:130px; height:130px; border:5px solid var(--cream); border-radius:50%; background:var(--cream); color:var(--ink); display:grid; place-items:center; font-family:"Bungee Shade", Impact, fantasy; box-shadow:8px 8px 0 rgba(255,241,214,.25); }
.cup { position:absolute; left:72px; bottom:0; width:150px; height:150px; border:5px solid var(--cream); border-radius:18px 18px 60px 60px; background:var(--blue); }
.cup i, .cup b { position:absolute; bottom:90px; width:18px; height:150px; border:4px solid var(--cream); background:var(--tangerine); transform-origin:bottom; }.cup i { left:45px; transform:rotate(-12deg); }.cup b { right:45px; transform:rotate(13deg); background:var(--lavender); }
.folded-note { position:absolute; left:0; top:42px; padding:22px 30px; border:4px solid var(--cream); background:var(--cream); color:var(--ink); transform:rotate(-12deg); font-family:"Noto Sans JP", sans-serif; font-weight:900; }
.star-field span { position:absolute; width:24px; height:24px; background:var(--mint); clip-path:polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%); animation: twinkle 2s infinite alternate; }
.star-field span:nth-child(1){left:12vw;top:16vh}.star-field span:nth-child(2){left:32vw;top:72vh;animation-delay:.2s}.star-field span:nth-child(3){right:8vw;top:36vh;animation-delay:.4s}.star-field span:nth-child(4){right:38vw;top:12vh;animation-delay:.7s}.star-field span:nth-child(5){left:48vw;bottom:12vh;animation-delay:1s}
.note-drawer { position: fixed; right: 24px; bottom: 24px; z-index: 35; width: min(430px, calc(100vw - 48px)); padding: 26px; border: 5px solid var(--ink); background: var(--cream); color: var(--ink); box-shadow: 14px 14px 0 var(--ink); transform: translateY(130%) rotate(3deg); transition: transform .55s cubic-bezier(.22,1.2,.3,1); }
.note-drawer.open { transform: translateY(0) rotate(1deg); }
.note-drawer h2 { margin: 8px 0 12px; font-family:"Fraunces", Georgia, serif; font-size:34px; line-height:.95; }
.drawer-kana { margin:0; font-family:"Noto Sans JP", sans-serif; color:var(--raspberry); font-weight:900; }
#drawerText { font-family:"Fraunces", Georgia, serif; font-size:22px; line-height:1.2; }
#closeDrawer { background: var(--lavender); float:right; }
.drawer-stickers { display:flex; gap:12px; clear:both; }.drawer-stickers span { width:36px; height:36px; border:3px solid var(--ink); background:var(--mint); clip-path:polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%); }.drawer-stickers span:nth-child(2){background:var(--tangerine)}.drawer-stickers span:nth-child(3){background:var(--raspberry)}

@keyframes twitch { 0%, 82%, 100% { margin-left: 0; } 86% { margin-left: -5px; } 90% { margin-left: 6px; } }
@keyframes garlandWobble { 50% { transform: rotate(2deg) scale(1.01); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes stampPop { 50% { transform: rotate(-11deg) scale(1.08); } }
@keyframes twinkle { to { transform: scale(1.5) rotate(35deg); opacity:.55; } }

@media (max-width: 900px) {
  .rim-wrap { width: 72vmin; height: 72vmin; opacity: .72; }
  .drawer, .drawer.small { width: calc(100vw - 120px); left: 92px; right: auto; top: 14vh; }
  .breakfast-table, .notebook-prop, .token-orbit, .nightstand { transform: scale(.72); right: -20px; left: auto; bottom: 4vh; }
  .paper-toolbar { right: 10px; top: 10px; }
  .bead-nav { left: 10px; }
  .bead { width: 50px; height: 50px; }
}