:root {
  /* Design tokens retained for compliance: IntersectionObserver` (threshold: `clamp(4rem (Google */
  --ink: #0d0d0d;
  --paper: #f5f0e8;
  --pink: #ff2d6f;
  --teal: #00e5ff;
  --glow: #e6ff00;
  --haze: #b8b0a8;
  --train: #1a1040;
  --torii: #ff6b35;
  --edge: 3px;
  --gutter: clamp(1rem, 8vw, 6rem);
  --hero-type: clamp(4rem, 12vw, 9rem);
  --display-type: clamp(1.8rem, 5vw, 4rem);
  --body-type: clamp(1rem, 1.2vw, 1.25rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  min-height: 100%;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  font-size: var(--body-type);
  line-height: 1.7;
}

::selection { background: #e6ff00; color: #0d0d0d; }

#grainCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 1;
}

.zine { isolation: isolate; }

.page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 7rem) 0;
}

.dark-page { background: #0d0d0d; color: #f5f0e8; }
.rice-page { background: #f5f0e8; color: #0d0d0d; }
.cyan-page { background: #00e5ff; color: #0d0d0d; }
.indigo-page { background: #1a1040; color: #f5f0e8; }
.yellow-page { background: #e6ff00; color: #0d0d0d; }
.magenta-page { background: #ff2d6f; color: #0d0d0d; }

.page::before {
  content: attr(data-page);
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: var(--gutter);
  z-index: 1;
  color: currentColor;
  font: 700 clamp(0.9rem, 1.5vw, 1.25rem) "Caveat", cursive;
  transform: rotate(3deg);
  opacity: 0.55;
}

h1, h2, h3 {
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: lowercase;
}

h1 {
  color: #ff2d6f;
  font-size: var(--hero-type);
  text-shadow: 2px 2px 0 #00e5ff;
}

h2 {
  max-width: 9ch;
  margin: 0 0 1.4rem;
  font-size: var(--display-type);
  text-shadow: 2px 2px 0 var(--shadow-color, #ff2d6f);
}

h3 { margin: 0 0 .65rem; font-size: clamp(1.3rem, 2.6vw, 2.2rem); }
p { max-width: 38ch; }
strong { font-weight: 700; }

.rice-page h2, .yellow-page h2 { --shadow-color: #ff2d6f; color: #1a1040; }
.cyan-page h2, .magenta-page h2 { --shadow-color: #e6ff00; color: #0d0d0d; }
.indigo-page h2, .dark-page h2 { --shadow-color: #00e5ff; color: #ff2d6f; }

.hand {
  display: inline-block;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.1;
  transform: rotate(-3deg);
}

.kicker { margin-bottom: 1rem; color: #ff2d6f; }
.pink-ink { color: #ff2d6f; }
.cyan-ink { color: #00e5ff; }
.yellow-page .kicker, .magenta-page .kicker { color: #1a1040; }

.hero-stack {
  position: relative;
  width: 100%;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 2rem;
}

.hero-ghost { width: clamp(130px, 22vw, 230px); margin-bottom: 1.3rem; }
.note-down { color: #00e5ff; margin-top: .9rem; }
.down-arrow { width: 90px; height: 110px; margin-top: 1rem; stroke: #00e5ff; }

.page-copy {
  position: relative;
  z-index: 3;
  width: min(78rem, calc(100% - (var(--gutter) * 2)));
  margin-inline: var(--gutter);
}

.left-heavy { margin-right: auto; }
.right-heavy { margin-left: auto; padding-left: min(28vw, 23rem); }

.page-copy > p + p { margin-top: 1.35rem; }

.marker-box {
  position: relative;
  margin: 1.5rem 0;
  padding: clamp(1rem, 2.6vw, 2rem);
  background:
    linear-gradient(90deg, var(--border-color, #ff2d6f), var(--border-color, #ff2d6f)) 0 0 / 100% var(--edge) no-repeat,
    linear-gradient(180deg, var(--border-color, #00e5ff), var(--border-color, #00e5ff)) 100% 0 / var(--edge) 100% no-repeat,
    linear-gradient(90deg, var(--border-color, #e6ff00), var(--border-color, #e6ff00)) 0 100% / 100% var(--edge) no-repeat,
    linear-gradient(180deg, var(--border-color, #ff6b35), var(--border-color, #ff6b35)) 0 0 / var(--edge) 100% no-repeat;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.15));
  animation: borderDance 8s linear infinite;
}

.statement-box { max-width: 44rem; background-color: rgba(245,240,232,.08); }
.rice-page .statement-box { background-color: rgba(255,45,111,.08); }
.quote-box { max-width: 42rem; background-color: rgba(245,240,232,.36); }
.quote-box p { font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.45; }
.quote-box footer { margin-top: 1rem; color: #ff2d6f; }

.margin-scribble {
  position: absolute;
  z-index: 4;
  right: clamp(1rem, 8vw, 7rem);
  top: 48%;
  width: min(23vw, 16rem);
  color: #ff2d6f;
}

.margin-scribble svg { width: 100%; margin-top: .8rem; stroke: #ff2d6f; }

.doodle-path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.doodle-path path { stroke-dasharray: 420; stroke-dashoffset: 420; }
.is-visible .doodle-path path, .doodle-path.is-visible path { animation: drawPath .8s ease-out .2s forwards; }

.ghost-mascot { overflow: visible; filter: drop-shadow(6px 6px 0 rgba(0,0,0,.2)); animation: float 3s ease-in-out infinite; }
.ghost-fill { fill: #f5f0e8; transform-origin: center; }
.ghost-line { fill: none; stroke: #ff2d6f; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; transform-origin: center; }
.ghost-eye { fill: #ff2d6f; transform-origin: center; animation: blink 4.2s infinite; }
.ghost-mouth, .ghost-blush { fill: none; stroke: #ff2d6f; stroke-width: 6; stroke-linecap: round; }
.mini-ghost { position: absolute; right: 9vw; bottom: 11vh; width: clamp(150px, 24vw, 300px); opacity: .96; }
.footer-ghost { position: absolute; right: var(--gutter); bottom: 9vh; width: clamp(120px, 18vw, 210px); }

.floating { position: absolute; z-index: 2; will-change: transform; }
.sticker, .ticket, .ramen {
  border: 3px solid #f5f0e8;
  background: #f5f0e8;
  color: #0d0d0d;
  border-radius: 18px;
  filter: drop-shadow(6px 6px 0 rgba(0,0,0,.2));
  transform: rotate(var(--tilt, -3deg));
  transition: transform .22s cubic-bezier(.22,1,.36,1), filter .22s;
  mix-blend-mode: multiply;
}

.dark-page .sticker, .indigo-page .sticker, .ticket, .ramen { mix-blend-mode: screen; }
.sticker:hover, .ticket:hover, .ramen:hover { transform: rotate(2deg) scale(1.1); filter: drop-shadow(8px 8px 0 rgba(0,0,0,.26)); }
.ticket { left: 61vw; top: 18vh; padding: .9rem 1.2rem; font: 700 1.4rem "Space Grotesk"; --tilt: 5deg; }
.ticket small { display: block; color: #ff2d6f; font: 700 1rem "Caveat"; }
.ramen { left: 10vw; top: 18vh; width: 170px; padding: 1rem; --tilt: -7deg; }
.ramen svg { width: 100%; fill: none; stroke: #0d0d0d; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ramen span { color: #ff2d6f; margin-left: .4rem; }
.burst { font: 700 clamp(3rem, 8vw, 8rem) "Space Grotesk"; color: #ff2d6f; opacity: .45; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.1)); }
.burst-one { right: 12vw; bottom: 13vh; transform: rotate(12deg); }
.burst-two { right: 13vw; bottom: 18vh; color: #e6ff00; transform: rotate(-14deg); }

.plane-stack { position: relative; width: min(34rem, 100%); margin-top: 2rem; min-height: 18rem; }
.plane-card { position: absolute; width: min(27rem, 92%); background: rgba(245,240,232,.06); }
.plane-card b { display: block; color: #e6ff00; font-family: "Space Grotesk"; font-size: 1.35rem; }
.plane-card span { display: block; color: #f5f0e8; }
.plane-card:nth-child(1) { left: 0; top: 0; }
.plane-card:nth-child(2) { left: 7%; top: 4rem; }
.plane-card:nth-child(3) { left: 14%; top: 8rem; }
.plane-card:nth-child(4) { left: 21%; top: 12rem; }

.sticker-board {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  top: 16vh;
  width: min(38vw, 34rem);
  min-height: 50vh;
}

.sticker-board .sticker {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 8rem;
  min-height: 7rem;
  padding: 1rem;
  font: 700 2rem "Space Grotesk";
}

.ghost-sticker { left: 3%; top: 2%; background: #f5f0e8; color: #ff2d6f; --tilt: -8deg; }
.onigiri { right: 7%; top: 16%; background: #00e5ff; --tilt: 5deg; }
.torii { left: 15%; top: 48%; background: #ff2d6f; --tilt: 8deg; }
.train { right: 2%; top: 58%; background: #1a1040; color: #f5f0e8; --tilt: -4deg; }
.sticker span, .sticker small { display: block; font-size: 1rem; }

.scribble-sample { position: relative; z-index: 5; max-width: 42rem; margin-left: var(--gutter); align-self: flex-end; margin-bottom: 8vh; background: rgba(245,240,232,.22); }
.scribble-underline {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 12"><path d="M2 8C18 2 32 10 49 6C66 2 80 11 97 7C114 3 124 4 138 8" stroke="%23ff2d6f" stroke-width="4" fill="none" stroke-linecap="round"/></svg>');
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 140px 12px;
  padding-bottom: 8px;
}

.palette-strip {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(6, minmax(6rem, 1fr));
  gap: .75rem;
  width: calc(100% - (var(--gutter) * 2));
  margin: 3rem var(--gutter) 0;
  align-self: flex-end;
}

.swatch {
  min-height: clamp(11rem, 23vw, 20rem);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 3px solid #0d0d0d;
  filter: drop-shadow(6px 6px 0 rgba(0,0,0,.2));
  transform: rotate(var(--tilt, 0deg));
}
.swatch span { font: 700 .8rem "DM Sans"; }
.swatch b { font: 700 clamp(1.1rem, 2vw, 1.6rem) "Space Grotesk"; line-height: 1; }
.black { background: #0d0d0d; color: #f5f0e8; --tilt: -2deg; }
.paper { background: #f5f0e8; color: #0d0d0d; --tilt: 2deg; }
.pink { background: #ff2d6f; color: #0d0d0d; --tilt: -1deg; }
.teal { background: #00e5ff; color: #0d0d0d; --tilt: 1.5deg; }
.glow { background: #e6ff00; color: #0d0d0d; --tilt: -2.5deg; }
.orange { background: #ff6b35; color: #0d0d0d; --tilt: 2.5deg; }

.closer-copy { margin-inline: auto; text-align: left; }
.final-note { color: #00e5ff; margin-top: 2rem; }

.nav-pill {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 1000;
}

.nav-toggle {
  position: relative;
  width: 4.2rem;
  height: 4.2rem;
  border: 0;
  border-radius: 999px;
  color: #ff2d6f;
  background:
    linear-gradient(90deg, var(--border-color, #ff2d6f), var(--border-color, #ff2d6f)) 0 0 / 100% var(--edge) no-repeat,
    linear-gradient(180deg, var(--border-color, #00e5ff), var(--border-color, #00e5ff)) 100% 0 / var(--edge) 100% no-repeat,
    linear-gradient(90deg, var(--border-color, #e6ff00), var(--border-color, #e6ff00)) 0 100% / 100% var(--edge) no-repeat,
    linear-gradient(180deg, var(--border-color, #ff6b35), var(--border-color, #ff6b35)) 0 0 / var(--edge) 100% no-repeat,
    #0d0d0d;
  cursor: pointer;
  filter: drop-shadow(6px 6px 0 rgba(0,0,0,.22));
  animation: borderDance 8s linear infinite;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}

.nav-toggle span { font-size: 1.7rem; }
.nav-toggle em { position: absolute; left: -1.3rem; top: -.65rem; color: #00e5ff; font-style: normal; }
.nav-pill.is-open .nav-toggle, .nav-pill:hover .nav-toggle { transform: scale(1.08) rotate(5deg); }

.nav-menu {
  position: absolute;
  right: 0;
  bottom: 5rem;
  width: max-content;
  min-width: 13rem;
  padding: .75rem;
  border-radius: 22px;
  background: #0d0d0d;
  border: 3px solid #00e5ff;
  filter: drop-shadow(6px 6px 0 rgba(0,0,0,.22));
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) rotate(-2deg) scale(.94);
  transform-origin: bottom right;
  transition: opacity .25s, visibility .25s, transform .25s cubic-bezier(.22,1,.36,1);
}

.nav-pill.is-open .nav-menu, .nav-pill:hover .nav-menu { opacity: 1; visibility: visible; transform: translateY(0) rotate(-2deg) scale(1); }
.nav-menu a {
  display: block;
  padding: .6rem .85rem;
  color: #f5f0e8;
  border-radius: 14px;
  text-decoration: none;
  font: 700 1.2rem "Caveat", cursive;
}
.nav-menu a:hover { background: #ff2d6f; color: #0d0d0d; transform: translateX(4px); }

.reveal-group > *, .reveal-group.marker-box, .reveal-doodle, .sticker-board, .palette-strip, .scribble-sample {
  opacity: 0;
  transform: translateY(24px);
}

.is-visible > *, .is-visible.reveal-group, .is-visible.reveal-doodle, .sticker-board.is-visible, .palette-strip.is-visible, .scribble-sample.is-visible {
  animation: revealUp .6s cubic-bezier(.22,1,.36,1) forwards;
}
.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.is-visible > *:nth-child(2) { animation-delay: 80ms; }
.is-visible > *:nth-child(3) { animation-delay: 160ms; }
.is-visible > *:nth-child(4) { animation-delay: 240ms; }
.is-visible > *:nth-child(5) { animation-delay: 320ms; }

@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes blink { 0%, 86%, 100% { transform: scaleY(1); } 90%, 94% { transform: scaleY(.08); } }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes borderDance {
  0%, 100% { --border-color: #ff2d6f; }
  25% { --border-color: #00e5ff; }
  50% { --border-color: #e6ff00; }
  75% { --border-color: #ff6b35; }
}

@media (max-width: 768px) {
  #grainCanvas { opacity: .5; }
  .page { min-height: 100svh; padding: clamp(2rem, 6vw, 4rem) 0; }
  .page-copy { width: calc(100% - 2rem); margin-inline: 1rem; }
  .right-heavy { padding-left: 0; }
  .floating, .sticker-board, .margin-scribble, .mini-ghost { display: none; }
  .hero-ghost { width: clamp(90px, 32vw, 140px); }
  .palette-strip { grid-template-columns: repeat(2, 1fr); width: calc(100% - 2rem); margin-inline: 1rem; }
  .swatch { min-height: 9rem; }
  .plane-stack { min-height: auto; display: grid; gap: .7rem; }
  .plane-card { position: relative; left: auto !important; top: auto !important; width: 100%; }
  .scribble-sample { margin: 1rem; }
  .footer-ghost { opacity: .28; right: 1rem; }
  .nav-pill { right: 50%; bottom: 1rem; transform: translateX(50%); }
  .nav-menu { right: 50%; transform: translate(50%, 18px) rotate(-1deg) scale(.94); transform-origin: bottom center; }
  .nav-pill.is-open .nav-menu, .nav-pill:hover .nav-menu { transform: translate(50%, 0) rotate(-1deg) scale(1); }
}