/* Group Chat Leaked: a late-night group chat on a velvet couch.
   Tokens mirror brand/brand.json; js/sections.js re-applies them from js/brand.js. */

@font-face { font-family: 'Bagel Fat One'; src: url('../assets/fonts/bagel-fat-one.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Neonderthaw'; src: url('../assets/fonts/neonderthaw.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Tilt Neon'; src: url('../assets/fonts/tilt-neon.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../assets/fonts/instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --velvet-black: #0B0509;
  --plum-shadow: #1C0914;
  --wine-velvet: #6E1235;
  --neon-pink: #FF4DA6;
  --hoop-gold: #F2C14E;
  --cream: #FFF0F6;
  --on-air-red: #FF2E3F;
  --appletini: #8EE05A; --appletini-deep: #3E7B32;
  --cosmo: #FF8CC6; --cosmo-deep: #E0458F;
  --blueberry: #3DB2FF; --blueberry-deep: #1F6FC0;

  --cream-2: rgba(255, 240, 246, 0.78);
  --cream-3: rgba(255, 240, 246, 0.6);
  --line: rgba(255, 240, 246, 0.14);
  --plum-2: #2a1020;

  --font-display: 'Bagel Fat One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-neon: 'Neonderthaw', 'Brush Script MT', cursive;
  --font-sign: 'Tilt Neon', system-ui, sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-chat: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --pad-x: clamp(20px, 5.5vw, 88px);
  --section-y: clamp(96px, 15vh, 168px);
  --radius-l: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--velvet-black);
  color: var(--cream);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--wine-velvet) var(--velvet-black);
  scroll-padding-top: 80px;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--neon-pink); color: var(--velvet-black); }
::placeholder { color: rgba(255, 240, 246, 0.5); }
a { color: var(--neon-pink); text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--neon-pink); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--velvet-black); }
::-webkit-scrollbar-thumb { background: var(--wine-velvet); border-radius: 10px; border: 2px solid var(--velvet-black); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  background: var(--neon-pink); color: var(--velvet-black); font-weight: 700;
  padding: 10px 16px; border-radius: 999px; text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip:focus { top: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.4em; border-radius: 999px;
  font-family: var(--font-body); font-weight: 650; font-size: 1rem; line-height: 1.1;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform 0.25s var(--ease-out), background-color 0.2s, color 0.2s, box-shadow 0.25s, border-color 0.2s;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--neon {
  background: var(--neon-pink); color: var(--velvet-black);
  box-shadow: 0 6px 18px -6px rgba(255, 77, 166, 0.65), 0 0 0 1px rgba(255, 210, 233, 0.4) inset;
}
.btn--neon:hover { background: #ff6db6; box-shadow: 0 10px 28px -8px rgba(255, 77, 166, 0.85), 0 0 0 1px rgba(255, 210, 233, 0.6) inset; transform: translateY(-1px); }
.btn--ghost { background: rgba(11, 5, 9, 0.55); color: var(--cream); border-color: rgba(255, 240, 246, 0.35); }
.btn--ghost:hover { border-color: var(--cream); background: rgba(28, 9, 20, 0.85); }
.btn--pill { min-height: 40px; padding: 0.5em 1.1em; font-size: 0.95rem; background: var(--neon-pink); color: var(--velvet-black); }
.btn--pill:hover { background: #ff6db6; }
.btn[disabled] { opacity: 0.7; cursor: progress; }

/* ---------- top bar */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(env(safe-area-inset-top) + 12px) var(--pad-x) 12px;
  transition: background-color 0.35s, box-shadow 0.35s;
}
.topbar.is-solid { background: rgba(11, 5, 9, 0.9); box-shadow: 0 1px 0 rgba(255, 77, 166, 0.16); }
.topbar-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); }
.topbar-mark { width: 38px; height: auto; filter: drop-shadow(0 2px 6px rgba(255, 77, 166, 0.45)); }
.topbar-name { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: 0.005em; text-shadow: 0 0 12px rgba(255, 77, 166, 0.55); }
.topbar-nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 28px); }
.topbar-nav a:not(.btn) { color: var(--cream); text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 8px 2px; }
.topbar-nav a:not(.btn):hover { color: var(--neon-pink); }

/* =========================================================================
   THE STUDIO
   ========================================================================= */
.studio { position: relative; height: 230vh; height: 230svh; }
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, #1a0812 0%, var(--velvet-black) 70%);
  isolation: isolate;
}
.stage-layers { position: absolute; inset: 0; }
.layer { position: absolute; will-change: transform; transform-origin: 50% 50%; }
.layer[hidden] { display: none; }
.layer-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.layer-art svg { width: 100%; height: 100%; }

/* power on: everything sits in the dark until the neon catches */
.stage .layer:not(.layer--plane):not(.layer--sparkles) { opacity: 0.045; transition: opacity 1.2s var(--ease-soft); }
.stage.is-dim .layer:not(.layer--plane):not(.layer--sparkles) { opacity: 0.42; }
.stage.is-lit .layer:not(.layer--plane):not(.layer--sparkles) { opacity: 1; }

/* the wall plane: positions come in as frame units (--x, --y, --w) times --u */
.layer--plane > *, .wall-extras > * { position: absolute; }
.wall-extras { position: absolute; inset: 0; }

/* --- the neon sign */
.sign {
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u));
  display: grid; place-items: center; margin: 0;
  font-family: var(--font-neon); font-weight: 400; font-size: calc(var(--size) * var(--u));
  line-height: 1.04; text-align: center; letter-spacing: 0.01em;
  z-index: 3;
}
.sign-glass, .sign-tubes { grid-area: 1 / 1; padding: 0.12em 0.3em 0.2em; }
.sign-word { display: inline-block; white-space: nowrap; }
.sign.is-one-line .sign-glass, .sign.is-one-line .sign-tubes { white-space: nowrap; }
.sign-glass { color: rgba(255, 140, 198, 0.13); text-shadow: 0 0 1px rgba(255, 210, 233, 0.22); }
.sign-tubes {
  color: #ffe6f3;
  text-shadow:
    0 0 calc(var(--u) * 1.5) #fff,
    0 0 calc(var(--u) * 5) #ff8cc6,
    0 0 calc(var(--u) * 12) var(--neon-pink),
    0 0 calc(var(--u) * 26) var(--neon-pink),
    0 0 calc(var(--u) * 54) rgba(255, 77, 166, 0.6);
}
.sign-tubes .ch { opacity: 0; }
.sign-wash {
  grid-area: 1 / 1; place-self: stretch; margin: -45% -18% -60%;
  background: radial-gradient(closest-side, rgba(255, 77, 166, 0.3), rgba(110, 18, 53, 0.16) 55%, transparent 80%);
  opacity: 0; pointer-events: none; z-index: -1;
}
.sign-plate {
  grid-area: 1 / 1; place-self: stretch; margin: -2% 1%;
  border-radius: calc(var(--u) * 22);
  background:
    radial-gradient(circle at calc(var(--u) * 26) calc(var(--u) * 26), rgba(255, 240, 246, 0.5) 0 calc(var(--u) * 4), transparent calc(var(--u) * 5)),
    radial-gradient(circle at calc(100% - var(--u) * 26) calc(var(--u) * 26), rgba(255, 240, 246, 0.5) 0 calc(var(--u) * 4), transparent calc(var(--u) * 5)),
    radial-gradient(circle at calc(var(--u) * 26) calc(100% - var(--u) * 26), rgba(255, 240, 246, 0.5) 0 calc(var(--u) * 4), transparent calc(var(--u) * 5)),
    radial-gradient(circle at calc(100% - var(--u) * 26) calc(100% - var(--u) * 26), rgba(255, 240, 246, 0.5) 0 calc(var(--u) * 4), transparent calc(var(--u) * 5)),
    linear-gradient(125deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 38%, rgba(255, 255, 255, 0.05) 62%, rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 240, 246, 0.1);
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(0, 0, 0, 0.45);
  z-index: -1;
}

/* --- ON AIR */
.onair {
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  display: flex; align-items: center; gap: 0.32em;
  font-family: var(--font-sign); font-size: calc(var(--size) * var(--u)); line-height: 1; letter-spacing: 0.1em;
  padding: 0.24em 0.5em 0.2em 0.42em;
  color: rgba(255, 46, 63, 0.28);
  border: calc(var(--u) * 3.5) solid rgba(255, 46, 63, 0.24);
  border-radius: calc(var(--u) * 12);
  background: rgba(30, 3, 7, 0.75);
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0, 0, 0, 0.5);
}
.onair-dot { width: 0.42em; height: 0.42em; border-radius: 50%; background: currentColor; }
.onair::after {
  content: ''; position: absolute; inset: calc(var(--u) * -4); border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0.35em var(--on-air-red), 0 0 1.4em rgba(255, 46, 63, 0.55), inset 0 0 0.35em rgba(255, 46, 63, 0.6);
  opacity: 0;
}
.is-live .onair { color: #ffe0e2; border-color: var(--on-air-red); text-shadow: 0 0 0.08em #fff, 0 0 0.3em var(--on-air-red), 0 0 0.8em var(--on-air-red); }
.is-live .onair-dot { background: #fff; box-shadow: 0 0 0.3em var(--on-air-red), 0 0 0.7em var(--on-air-red); animation: rec-dot 1.6s steps(1, end) infinite; }
.is-live .onair::after { animation: pulse-glow 2.6s ease-in-out infinite; }

/* the painted ON AIR light box: off in the dark room, buzzes on, then breathes */
.onair.onair--art {
  width: calc(var(--w) * var(--u)); aspect-ratio: 1447 / 800;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-shadow: none;
}
.onair.onair--art::after { content: none; }
.onair--art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* the housing sits on the velvet: a soft contact shadow below and behind it */
.onair-off { opacity: 0.08; transition: opacity 1.2s var(--ease-soft); filter: drop-shadow(0 calc(var(--u) * 7) calc(var(--u) * 7) rgba(0, 0, 0, 0.7)); }
.is-dim .onair-off { opacity: 0.42; }
.is-lit .onair-off { opacity: 1; }
.onair-on, .onair-bloom, .onair-spill { opacity: 0; }
.onair-bloom { filter: blur(calc(var(--u) * 9)) saturate(1.35); scale: 1.04; }
.onair-spill {
  /* the red light the box throws on the velvet around it */
  position: absolute; left: 50%; top: 62%; width: 290%; aspect-ratio: 1.75; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 46, 63, 0.42), rgba(255, 46, 63, 0.16) 42%, rgba(110, 18, 53, 0.06) 70%, transparent);
  pointer-events: none;
}
.is-live .onair-on { opacity: 1; }
.is-live .onair-bloom { --peak: 0.6; opacity: 0.5; animation: onair-breathe 3.6s ease-in-out infinite alternate; }
.is-live .onair-spill { --peak: 0.8; opacity: 0.68; animation: onair-breathe 3.6s ease-in-out infinite alternate; }
@keyframes onair-breathe { from { opacity: calc(var(--peak) * 0.62); } to { opacity: var(--peak); } }
@keyframes pulse-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes rec-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* --- plaques, picture lights, candles, the little neon heart */
.plaque { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); aspect-ratio: 200 / 250; }
.plaque svg { width: 100%; height: 100%; overflow: visible; }
.plaque-shine { animation: plaque-shine 7s var(--ease-soft) infinite; }
.plaque[data-kind='silver'] .plaque-shine { animation-delay: 2.4s; }
@keyframes plaque-shine { 0%, 62% { transform: rotate(24deg) translateX(0); } 100% { transform: rotate(24deg) translateX(420px); } }
.plaque-light, .candle-glow {
  left: calc((var(--x) - var(--r)) * var(--u)); top: calc((var(--y) - var(--r)) * var(--u));
  width: calc(var(--r) * 2 * var(--u)); height: calc(var(--r) * 2 * var(--u));
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease-soft);
}
.plaque-light { background: radial-gradient(closest-side, rgba(242, 193, 78, 0.34), rgba(242, 193, 78, 0.08) 60%, transparent); }
.plaque-light[data-color='silver'] { background: radial-gradient(closest-side, rgba(226, 232, 244, 0.28), rgba(226, 232, 244, 0.07) 60%, transparent); }
.is-lit .plaque-light { opacity: 1; }
.candle-glow { background: radial-gradient(closest-side, rgba(255, 196, 120, 0.55), rgba(255, 150, 80, 0.16) 55%, transparent); }
.is-dim .candle-glow { opacity: 0.8; animation: candle var(--flick) ease-in-out infinite alternate; }
@keyframes candle { 0% { opacity: 0.55; scale: 0.94; } 40% { opacity: 0.9; scale: 1.02; } 70% { opacity: 0.68; scale: 0.97; } 100% { opacity: 1; scale: 1.04; } }
.wall-heart { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); aspect-ratio: 120 / 150; }
.wall-heart .neon-lit { opacity: 0; transition: opacity 0.2s; }
.is-lit .wall-heart .neon-lit { opacity: 1; }

/* --- sparkles at three depths */
.sparkle { position: absolute; translate: -50% -50%; opacity: 0; }
.sparkle svg { width: 100%; height: 100%; fill: var(--sc); filter: drop-shadow(0 0 3px var(--sc)); overflow: visible; }
.is-sparkle .sparkle { animation: twinkle var(--tw) ease-in-out var(--td) infinite; }
@keyframes twinkle {
  0%, 100% { opacity: 0.15; scale: 0.5; rotate: 0deg; }
  50% { opacity: 1; scale: 1; rotate: 20deg; }
}

/* --- the girls: breathing, a little sway, screen glow, head bubbles */
.girl-life {
  position: absolute; inset: 0; transform-origin: 50% 100%;
  animation: breathe var(--breath) ease-in-out var(--phase) infinite, sway var(--sway) ease-in-out var(--phase) infinite;
}
@keyframes breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.004 1.012; } }
@keyframes sway { 0%, 100% { rotate: -0.45deg; } 50% { rotate: 0.55deg; } }
.layer--girl .layer-art { object-fit: contain; }
.screen-glow {
  position: absolute; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, white), transparent);
  mix-blend-mode: soft-light; opacity: 0.5;
  animation: screen-flick var(--flick) steps(5, end) infinite;
}
@keyframes screen-flick { 0%, 100% { opacity: 0.42; } 30% { opacity: 0.58; } 55% { opacity: 0.38; } 80% { opacity: 0.55; } }
.glint { position: absolute; translate: -50% -50%; opacity: 0; pointer-events: none; animation: glint 4.6s var(--ease-soft) var(--delay) infinite; }
.glint svg { width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 0 4px #fff); }
@keyframes glint { 0%, 78% { opacity: 0; scale: 0.2; rotate: 0deg; } 86% { opacity: 1; scale: 1; rotate: 40deg; } 100% { opacity: 0; scale: 0.3; rotate: 80deg; } }

.head-bubble { position: absolute; translate: calc(-12% + var(--bx, 0px)) -100%; z-index: 6; pointer-events: none; }
.hb {
  position: relative; display: inline-flex; align-items: center;
  font-family: var(--font-chat); font-weight: 600; font-size: max(12px, calc(var(--u) * 20)); line-height: 1.2;
  padding: 0.5em 0.85em; border-radius: 1.2em; white-space: nowrap;
  background: #2b1424; color: var(--cream);
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.45);
  opacity: 0; scale: 0.55; transform-origin: 12% 100%;
  transition: opacity 0.22s, scale 0.5s var(--ease-out), background-color 0.25s, color 0.25s;
}
.hb::after {
  content: ''; position: absolute; left: 0.7em; bottom: -0.3em; width: 0.7em; height: 0.7em; border-radius: 50%;
  background: inherit;
}
.is-typing .hb, .is-said .hb { opacity: 1; scale: 1; }
.is-said .hb { background: var(--c); color: var(--velvet-black); }
.is-leaving .hb { opacity: 0; scale: 0.85; }
.head-bubble.opens-left { translate: calc(-88% + var(--bx, 0px)) -100%; }
.opens-left .hb { transform-origin: 88% 100%; }
.opens-left .hb::after { left: auto; right: 0.7em; }
.hb-text { display: none; }
.is-said .hb-text { display: inline; }
.is-said .hb-dots { display: none; }
.hb-dots, .msg-typing { display: inline-flex; gap: 0.26em; padding: 0.18em 0; }
.hb-dots i, .msg-typing i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--c); animation: dot 1.1s ease-in-out infinite; }
.hb-dots i:nth-child(2), .msg-typing i:nth-child(2) { animation-delay: 0.16s; }
.hb-dots i:nth-child(3), .msg-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes dot { 0%, 60%, 100% { opacity: 0.35; translate: 0 0; } 30% { opacity: 1; translate: 0 -0.22em; } }

/* --- desk: martinis and level meters */
.martini { position: absolute; z-index: 2; }
.martini svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 240, 246, 0.12)); }
.martini .glint { left: 80%; top: 12%; width: 26%; height: 26%; }
.liquid-shine { animation: shine 5.5s var(--ease-soft) infinite; }
.martini[data-girl='cosmo'] .liquid-shine { animation-delay: 1.8s; }
.martini[data-girl='blueberry'] .liquid-shine { animation-delay: 3.4s; }
@keyframes shine { 0%, 55% { transform: skewX(-20deg) translateX(0); } 100% { transform: skewX(-20deg) translateX(150px); } }
.meter[hidden] { display: none; }
.meter {
  position: absolute; z-index: 1; display: flex; align-items: flex-end; gap: 3px;
  padding: 4px 7px; border-radius: 8px;
  background: rgba(8, 2, 6, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 240, 246, 0.08);
  opacity: 0; transition: opacity 0.8s;
}
.is-live .meter { opacity: 1; }
.meter i {
  flex: 1; height: 100%; border-radius: 2px; background: var(--c);
  box-shadow: 0 0 6px var(--c); transform-origin: 50% 100%; scale: 1 var(--lo);
  animation: level var(--t) ease-in-out var(--d) infinite alternate;
  opacity: 0.6;
}
.meter.is-hot i { opacity: 1; animation-duration: calc(var(--t) * 0.55); }
@keyframes level { from { scale: 1 var(--lo); } to { scale: 1 var(--hi); } }
.desk-led { animation: led 3.2s ease-in-out infinite alternate; }
@keyframes led { from { opacity: 0.55; } to { opacity: 1; } }
.fairy { animation: fairy 2.4s ease-in-out calc(var(--i) * -0.37s) infinite alternate; }
@keyframes fairy { from { opacity: 0.45; } to { opacity: 1; } }
.tally { animation: rec-dot 1.6s steps(1, end) infinite; }

/* --- overlay UI on the stage */
.stage::after {
  content: ''; position: absolute; inset: auto 0 0; height: 46%; z-index: 58; pointer-events: none;
  background:
    radial-gradient(60% 90% at 0% 100%, rgba(11, 5, 9, 0.9), rgba(11, 5, 9, 0.55) 45%, transparent 75%),
    linear-gradient(to top, rgba(11, 5, 9, 0.7), transparent 38%);
}
.stage-fade { position: absolute; inset: 0; z-index: 90; background: var(--velvet-black); opacity: 0; pointer-events: none; }
.stage-ui {
  position: absolute; z-index: 70;
  left: var(--pad-x); bottom: clamp(22px, 5vh, 52px);
  max-width: 30rem;
  opacity: 0; translate: 0 14px; transition: opacity 0.9s var(--ease-out) 0.3s, translate 0.9s var(--ease-out) 0.3s;
}
.is-lit .stage-ui { opacity: 1; translate: 0 0; }
.stage-lede { font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.45; color: var(--cream); text-wrap: pretty; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); }
.stage-soon { display: block; margin-top: 4px; font-family: var(--font-sign); color: var(--neon-pink); letter-spacing: 0.02em; text-shadow: 0 0 10px rgba(255, 77, 166, 0.6); }
.stage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.tilt {
  margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.88rem var(--font-chat); color: var(--cream);
  background: rgba(28, 9, 20, 0.85); border: 1px solid rgba(255, 240, 246, 0.25); border-radius: 999px;
  padding: 8px 14px; cursor: pointer;
}
.tilt[hidden] { display: none; }
.tilt.is-on { border-color: var(--neon-pink); color: var(--neon-pink); }
.tilt svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.label-short { display: none; }
.scroll-cue {
  position: absolute; z-index: 70; right: var(--pad-x); bottom: clamp(28px, 6.5vh, 64px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-sign); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2);
  opacity: 0; transition: opacity 1s 1.2s;
}
.is-lit .scroll-cue { opacity: 1; }
.scroll-cue i { width: 2px; height: 46px; border-radius: 2px; background: linear-gradient(var(--neon-pink), transparent); transform-origin: top; animation: cue 2.2s var(--ease-out) infinite; }
@keyframes cue { 0% { scale: 1 0; opacity: 1; } 70% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }

/* notification banners */
.notif-rail.is-away { opacity: 0; transition: opacity 0.3s; }
.notif-rail {
  position: fixed; z-index: 120; right: var(--pad-x); bottom: clamp(96px, 16vh, 150px);
  width: min(370px, calc(100% - 32px)); display: grid; pointer-events: none;
}
.notif {
  grid-area: 1 / 1; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px 12px; border-radius: 20px;
  background: rgba(34, 20, 30, 0.94); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 240, 246, 0.09);
  font-family: var(--font-chat); color: var(--cream);
  opacity: 0; translate: 115% 0; scale: 0.98;
  transition: translate 0.65s var(--ease-out), opacity 0.35s, scale 0.65s var(--ease-out);
}
.notif.is-in { opacity: 1; translate: 0 0; scale: 1; }
.notif.is-out { opacity: 0; translate: 40% 0; scale: 0.96; transition-duration: 0.45s; }
.notif-icon { flex: none; width: 38px; height: 38px; padding: 5px; border-radius: 10px; background: var(--velvet-black); }
.notif-body { min-width: 0; flex: 1; }
.notif-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; line-height: 1.2; }
.notif-top strong { font-weight: 700; }
.notif-top span { color: var(--cream-3); font-size: 0.76rem; }
.notif-text { font-size: 0.92rem; line-height: 1.3; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================================
   SECTIONS
   ========================================================================= */
.section-head h2, .story-copy h2, .soon-copy h2, .spill-copy h2 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 0.98; letter-spacing: -0.01em; text-wrap: balance;
}
.section-head p, .story-copy p, .soon-copy > p, .spill-copy > p { font-size: clamp(1.06rem, 1.25vw, 1.2rem); color: var(--cream-2); max-width: 40ch; text-wrap: pretty; }
.section-head h2 + p, .story-copy h2 + p, .soon-copy h2 + p, .spill-copy h2 + p { margin-top: 18px; }

/* --- premise */
.premise {
  position: relative; z-index: 2; margin-top: -62vh; margin-top: -62svh;
  padding: 36vh var(--pad-x) clamp(40px, 6vh, 72px); padding-top: 36svh;
  display: grid; grid-template-columns: minmax(150px, 0.62fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 80px); align-items: start;
  background: linear-gradient(to bottom, transparent, var(--velvet-black) 34svh);
}
.premise-mark { --mw: clamp(150px, 19vw, 300px); position: relative; padding-top: 12px; }
.premise-bubble { width: var(--mw); height: auto; filter: drop-shadow(0 0 22px rgba(255, 77, 166, 0.5)); position: relative; z-index: 1; }
.premise-drip {
  position: absolute; z-index: 0; overflow: hidden; display: block;
  left: calc(var(--mw) * 0.5); top: calc(12px + var(--mw) * 0.6); width: calc(var(--mw) * 0.11); height: clamp(260px, 62vh, 620px);
}
.premise-drip--small { left: calc(var(--mw) * 0.685); top: calc(12px + var(--mw) * 0.55); width: calc(var(--mw) * 0.045); height: 130px; }
.premise-drip-fill {
  position: absolute; inset: 0; display: block; border-radius: 0 0 999px 999px;
  background: linear-gradient(to bottom, var(--neon-pink), #ff6fb7 70%, var(--neon-pink));
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.12), inset 3px 0 0 rgba(255, 255, 255, 0.25);
  transform: translate3d(0, -84%, 0); will-change: transform;
}
.premise-drip--small .premise-drip-fill { animation: drip-small 6s var(--ease-soft) infinite; }
@keyframes drip-small { 0%, 20% { transform: translate3d(0, -100%, 0); } 70%, 100% { transform: translate3d(0, -12%, 0); } }
.premise-drop {
  position: absolute; left: 50%; bottom: -6px; width: 130%; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--neon-pink);
  animation: drop 3.8s cubic-bezier(0.55, 0, 1, 0.45) infinite;
}
@keyframes drop { 0%, 50% { transform: translateY(0) scale(0.6); opacity: 0; } 58% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(160px) scale(0.9); opacity: 0; } }
.premise-title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2.9rem, 6.8vw, 6rem);
  line-height: 0.96; letter-spacing: -0.012em; text-wrap: balance;
}
.premise-title span { display: block; }
.premise-title .split-2 { color: var(--neon-pink); margin-top: 0.16em; text-shadow: 0 0 0.35em rgba(255, 77, 166, 0.45); }
.premise-line { margin-top: clamp(28px, 4vw, 48px); font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.4; max-width: 30ch; color: var(--cream); text-wrap: pretty; }
.premise-aside { margin-top: 16px; font-size: clamp(1.02rem, 1.2vw, 1.12rem); color: var(--cream-3); max-width: 44ch; }

/* --- meet the girls */
.girls { position: relative; padding: clamp(8px, 2vh, 24px) var(--pad-x) clamp(48px, 7vh, 80px); }
.girls::before {
  content: ''; position: absolute; inset: 10% 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 60%, rgba(142, 224, 90, 0.08), transparent 70%),
    radial-gradient(40% 50% at 50% 70%, rgba(255, 140, 198, 0.1), transparent 70%),
    radial-gradient(40% 50% at 82% 60%, rgba(61, 178, 255, 0.08), transparent 70%);
}
.girls .section-head { max-width: 1240px; margin: 0 auto; }
.sticker-slot.girls-sticker { position: relative; display: block; width: clamp(118px, 10vw, 156px); margin: 0 0 4px -10px; rotate: -9deg; transform-origin: 40% 80%; }
.girls-sticker img { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55)); }
.js .girls-sticker { opacity: 0; scale: 0.3; }
.girls-sticker.is-popped { animation: sticker-pop 0.75s var(--ease-out) both; }
@keyframes sticker-pop {
  0% { opacity: 0; scale: 0.3; rotate: -34deg; }
  55% { opacity: 1; scale: 1.12; rotate: -4deg; }
  78% { scale: 0.96; rotate: -11deg; }
  100% { opacity: 1; scale: 1; rotate: -9deg; }
}
.bit {
  max-width: 1240px; margin: clamp(28px, 4vw, 44px) auto 0;
  font-family: var(--font-chat); font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 600; color: var(--cream);
}
.bit strong { color: var(--neon-pink); }
.posters {
  list-style: none; margin: clamp(28px, 4vw, 48px) auto 0; padding: 0; max-width: 1240px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 32px);
}
.poster {
  position: relative; border-radius: var(--radius-l); overflow: hidden; display: flex; flex-direction: column;
  background:
    radial-gradient(110% 70% at 50% 26%, color-mix(in srgb, var(--d) 60%, #0B0509), #0d0509 72%);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.9), inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent);
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s;
}
.poster:nth-child(2) { transform: translateY(clamp(0px, 3vw, 40px)); }
.poster.is-guessed { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.9), inset 0 0 0 2px var(--c), 0 0 40px -6px color-mix(in srgb, var(--c) 60%, transparent); }
.poster.pop { animation: poster-pop 0.6s var(--ease-out); }
@keyframes poster-pop { 0% { scale: 1; } 30% { scale: 1.025; } 100% { scale: 1; } }
.poster-art { position: relative; aspect-ratio: 5 / 5.6; overflow: hidden; }
.poster-name {
  position: absolute; z-index: 1; inset: 5% 0 auto; text-align: center;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: 0.9; letter-spacing: -0.015em;
  color: var(--c); text-shadow: 0 0 0.4em color-mix(in srgb, var(--c) 45%, transparent);
}
.poster-art img {
  position: absolute; z-index: 2; left: 50%; top: 21%; width: 100%; max-width: none; height: auto; translate: -50% 0;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}
.poster[data-poster='blueberry'] .poster-art img { transform: scaleX(-1); }
.poster-art::after { content: ''; position: absolute; inset: auto 0 0; height: 32%; z-index: 3; background: linear-gradient(to top, #0d0509, transparent); }
.poster-card { position: relative; z-index: 4; padding: 0 clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 28px); margin-top: -12%; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.poster-order { font-family: var(--font-sign); font-size: 0.95rem; letter-spacing: 0.04em; color: var(--c); text-shadow: 0 1px 2px #0B0509, 0 0 8px #0B0509; }
.poster-quote span {
  position: relative; display: inline-block; max-width: 100%;
  font-family: var(--font-chat); font-size: 1.02rem; font-weight: 500; line-height: 1.3;
  padding: 10px 15px; border-radius: 20px; border-bottom-left-radius: 6px;
  background: var(--c); color: var(--velvet-black);
}
.vote {
  align-self: flex-start; margin-top: auto; min-height: 44px; padding: 0.6em 1.2em; border-radius: 999px; cursor: pointer;
  font-weight: 650; font-size: 0.97rem; background: transparent; color: var(--cream); border: 2px solid color-mix(in srgb, var(--c) 70%, transparent);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--ease-out);
}
.vote:hover { background: color-mix(in srgb, var(--c) 16%, transparent); border-color: var(--c); }
.vote[aria-pressed='true'] { background: var(--c); color: var(--velvet-black); border-color: var(--c); }
.vote[aria-pressed='true']::before { content: ''; width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; margin-right: 0.4em; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.2C1.2 8.6 3.3 5 6.8 5c2.1 0 3.6 1.2 5.2 3 1.6-1.8 3.1-3 5.2-3 3.5 0 5.6 3.6 4.3 6.8C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; }
.vote-reply { min-height: 1.5em; font-family: var(--font-chat); font-weight: 600; font-size: 0.98rem; color: var(--c); }
.bit-note { max-width: 1240px; margin: clamp(40px, 5vw, 64px) auto 0; font-size: 0.92rem; color: var(--cream-3); }
.sticker-slot { position: absolute; z-index: 5; pointer-events: none; }
.sticker-slot img { width: 100%; height: auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)); }
.sticker-slot { container-type: inline-size; }
.badge-99 {
  position: absolute; left: 75.6%; top: 22.6%; translate: -50% -50%;
  font: 800 6.2cqw/1 var(--font-chat); letter-spacing: -0.04em; color: #fff;
  text-shadow: 0 1px 1px rgba(90, 0, 10, 0.5);
}
.poster-art .sticker-slot { right: 3%; top: 46%; width: 32%; opacity: 0; scale: 0.4; rotate: 12deg; transition: opacity 0.3s, scale 0.5s var(--ease-out); }
.poster.is-guessed .poster-art .sticker-slot { opacity: 1; scale: 1; }

/* --- how it started */
.story {
  /* the phone's height; it docks at the vertical centre of the screen */
  --ph: min(720px, calc(100svh - 150px));
  --dock: calc((100svh - var(--ph)) / 2);
  position: relative; padding: clamp(24px, 4vh, 48px) var(--pad-x) 0; max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: clamp(32px, 7vw, 120px); align-items: start;
}
.story-copy { position: sticky; top: var(--dock); height: var(--ph); display: flex; align-items: center; pointer-events: none; }
.story-copy-inner { pointer-events: auto; }
.story-copy-inner { width: fit-content; max-width: 32rem; display: flex; flex-direction: column; }
.story-copy p + p { margin-top: 14px; }
.story-track { height: 290vh; height: 290svh; }
.phone {
  position: sticky; top: var(--dock);
  display: flex; flex-direction: column; overflow: hidden;
  height: var(--ph); border-radius: 52px; background: #050204;
  border: 11px solid #1b1318;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(255, 240, 246, 0.12), 0 50px 90px -30px rgba(0, 0, 0, 0.9), 0 0 140px -30px rgba(255, 77, 166, 0.35);
}
/* the lock screen the phone shows while it travels up; it unlocks when it docks */
.phone-lock { position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: 41px; background: #050204; transition: transform 0.62s var(--ease-out), opacity 0.4s ease 0.18s; }
.phone.is-unlocked .phone-lock { transform: translateY(-104%); opacity: 0; pointer-events: none; }
.lock-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.phone-lock::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 2, 4, 0.55), transparent 28%, transparent 62%, rgba(5, 2, 4, 0.75)); }
.lock-top { position: absolute; z-index: 1; top: 5%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; color: #fff; font-family: var(--font-chat); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
.lock-pad { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; transition: transform 0.4s var(--ease-out); }
.phone.is-unlocked .lock-pad path { transform: translateY(-2px); }
.lock-date { margin-top: 8px; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; opacity: 0.92; }
.lock-clock { font-size: clamp(4rem, 6vw, 5.4rem); font-weight: 650; line-height: 0.95; letter-spacing: -0.02em; }
.lock-notes { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 34px; display: flex; flex-direction: column; gap: 8px; }
.lock-note {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 20px;
  background: rgba(32, 16, 26, 0.78); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 246, 0.08); color: var(--cream); font-family: var(--font-chat);
}
.lock-note--stack { margin-bottom: 12px; }
.lock-note--stack::before, .lock-note--stack::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -7px; height: 14px; z-index: -1; border-radius: 0 0 14px 14px; background: rgba(32, 16, 26, 0.6); }
.lock-note--stack::after { left: 24px; right: 24px; bottom: -13px; background: rgba(32, 16, 26, 0.42); }
.lock-note-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--velvet-black); }
.lock-note-icon svg { width: 30px; height: auto; }
.lock-note-icon--call { background: var(--neon-pink); }
.lock-note-icon--call svg { width: 22px; fill: none; stroke: var(--velvet-black); stroke-width: 2; stroke-linejoin: round; }
.lock-note-body { min-width: 0; flex: 1; }
.lock-note-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.84rem; line-height: 1.2; }
.lock-note-top strong { font-weight: 700; }
.lock-note-top span { flex: none; color: var(--cream-3); font-size: 0.74rem; }
.lock-note-text { font-size: 0.9rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lock-note-more { font-size: 0.78rem; color: var(--cream-3); }
.lock-home { position: absolute; z-index: 1; bottom: 10px; left: 50%; width: 36%; height: 5px; border-radius: 3px; translate: -50% 0; background: rgba(255, 255, 255, 0.85); }
.js .lock-note { opacity: 0; translate: 0 18px; }
.phone.is-awake .lock-note { opacity: 1; translate: 0 0; transition: opacity 0.4s, translate 0.6s var(--ease-out); }
.phone.is-awake .lock-note--stack { transition-delay: 0.35s; }
.phone-head {
  position: relative; z-index: 2; padding: 16px 18px 10px; text-align: center;
  background: rgba(22, 12, 18, 0.96); border-bottom: 1px solid rgba(255, 240, 246, 0.08);
  font-family: var(--font-chat);
}
.phone-time { position: absolute; left: 26px; top: 14px; font-weight: 600; font-size: 0.82rem; }
.phone-who { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 10px; }
.phone-faces { display: flex; }
.phone-faces .face { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid #160c12; margin-left: -9px; background: var(--plum-2); }
.phone-faces .face:first-child { margin-left: 0; }
.phone-name { font-size: 0.78rem; color: var(--cream-2); }
.phone-screen { position: relative; flex: 1; overflow: hidden; padding: 0 12px; }
.thread { list-style: none; margin: 0; padding: 14px 0 12px; transition: transform 0.55s var(--ease-out); will-change: transform; }
.msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 7px; align-items: end; margin-top: 3px; opacity: 0; translate: 0 10px; scale: 0.97; transform-origin: 0 100%; transition: opacity 0.3s, translate 0.45s var(--ease-out), scale 0.45s var(--ease-out); }
.msg.is-first { margin-top: 12px; }
.msg.is-typing, .msg.is-shown { opacity: 1; translate: 0 0; scale: 1; }
.msg-avatar { position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; }
.msg-avatar:not(:empty) { background: color-mix(in srgb, var(--cd) 45%, #000); }
.msg-avatar img, .phone-faces .face img { position: absolute; left: 50%; top: -14%; width: 230%; max-width: none; height: auto; translate: -50% 0; }
.msg-col { min-width: 0; }
.msg-name { display: block; margin: 0 0 3px 12px; font: 600 0.74rem/1.2 var(--font-chat); color: var(--c); }
.msg-bubble {
  position: relative; display: inline-block; max-width: 86%; padding: 8px 13px 9px; border-radius: 19px;
  font: 500 0.98rem/1.3 var(--font-chat); background: var(--c); color: var(--velvet-black);
  overflow-wrap: anywhere;
}
.msg.is-last .msg-bubble { border-bottom-left-radius: 6px; }
.msg-typing { display: none; }
.msg.is-typing .msg-bubble { background: #2b1424; }
.msg.is-typing .msg-text, .msg.is-typing .tapback { display: none; }
.msg.is-typing .msg-typing { display: inline-flex; }
.msg-receipt { display: block; margin: 4px 0 0 12px; font: 500 0.72rem var(--font-chat); color: var(--cream-3); opacity: 0; transition: opacity 0.4s 0.4s; }
.msg.is-shown .msg-receipt { opacity: 1; }
.msg-stamp { margin: 16px 0 4px; text-align: center; font: 600 0.72rem var(--font-chat); color: var(--cream-3); opacity: 0; transition: opacity 0.4s; }
.msg-stamp.is-shown { opacity: 1; }
.tapback {
  position: absolute; top: -15px; right: -14px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: var(--tc);
  background: #2b1424; border: 2.5px solid #050204;
  scale: 0; transition: scale 0.45s var(--ease-out);
}
.tapback svg { width: 15px; height: 15px; }
.tb-haha { font: 900 0.5rem/0.86 var(--font-chat); text-align: center; letter-spacing: 0.02em; }
.tb-bang { font: 900 0.86rem/1 var(--font-chat); letter-spacing: -0.04em; }
.has-tapback .tapback, .tapback.is-pop { scale: 1; }
.phone-input { margin: 8px 12px 14px; padding: 8px 8px 8px 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255, 240, 246, 0.16); border-radius: 999px; font: 0.88rem var(--font-chat); color: var(--cream-3); }
.phone-input i { width: 26px; height: 26px; border-radius: 50%; background: var(--neon-pink); }
.story-sticker { position: relative; align-self: center; width: clamp(128px, 12vw, 176px); margin-top: clamp(14px, 3vh, 30px); rotate: 7deg; }

/* --- topics */
.topics {
  position: relative; overflow: hidden; padding: var(--section-y) var(--pad-x);
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(110, 18, 53, 0.42), transparent 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cpath d='M46.8 32.3A13 11.0 0 0 1 34.0 43.0M27.5 41.3A13 11.0 0 0 1 21.8 25.6M26.5 19.4A13 11.0 0 0 1 42.4 20.0M127.8 50.3A11 9.3 0 0 1 114.5 45.5M113.0 40.0A11 9.3 0 0 1 122.1 29.2M128.6 30.0A11 9.3 0 0 1 134.8 41.9M71.3 105.0A14 11.9 0 0 1 71.3 87.0M77.2 82.8A14 11.9 0 0 1 94.1 89.0M95.9 97.2A14 11.9 0 0 1 84.4 109.8M144.6 116.6A10 8.5 0 0 1 155.7 110.2M160.4 112.3A10 8.5 0 0 1 162.7 125.0M158.2 129.1A10 8.5 0 0 1 146.3 126.4M28.1 129.2A11 9.3 0 0 1 40.3 136.2M40.8 141.9A11 9.3 0 0 1 30.0 151.0M23.7 149.0A11 9.3 0 0 1 19.7 136.2M108.9 154.2A9 7.6 0 0 1 108.9 165.8M105.1 168.5A9 7.6 0 0 1 94.2 164.5M93.0 159.2A9 7.6 0 0 1 100.4 151.1M172.9 22.0A8 6.8 0 0 1 163.3 25.5M159.9 23.1A8 6.8 0 0 1 159.9 12.9M163.9 10.3A8 6.8 0 0 1 172.9 14.0' fill='none' stroke='%236E1235' stroke-opacity='.42' stroke-width='5' stroke-linecap='round'/%3E%3Cg fill='%236E1235' fill-opacity='.4'%3E%3Ccircle cx='60' cy='58' r='2.6'/%3E%3Ccircle cx='150' cy='72' r='2.6'/%3E%3Ccircle cx='12' cy='92' r='2.6'/%3E%3Ccircle cx='122' cy='104' r='2.6'/%3E%3Ccircle cx='56' cy='176' r='2.6'/%3E%3Ccircle cx='176' cy='160' r='2.6'/%3E%3Ccircle cx='92' cy='10' r='2.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 180px 180px,
    var(--velvet-black);
}
.section-head--center { text-align: center; }
.section-head--center p { margin-inline: auto; }
.topics-within { display: block; font-family: var(--font-neon); font-size: 0.82em; color: var(--neon-pink); line-height: 1.1; margin-top: 0.06em; text-shadow: 0 0 0.12em #fff, 0 0 0.3em var(--neon-pink), 0 0 0.7em rgba(255, 77, 166, 0.6); }
.topic-cloud {
  list-style: none; padding: 0; margin: clamp(40px, 6vw, 72px) auto; max-width: 1080px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(14px, 2vw, 26px) clamp(12px, 1.8vw, 22px);
}
.topic {
  position: relative; cursor: pointer; display: inline-block;
  font-family: var(--font-chat); font-weight: 650; line-height: 1.15;
  padding: 0.55em 1.05em 0.6em; border-radius: 1.1em;
  background: var(--plum-shadow); color: var(--cream); border: 2px solid rgba(255, 77, 166, 0.55);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.8);
  rotate: var(--tilt, 0deg);
  animation: float var(--ft, 7s) ease-in-out var(--fd, 0s) infinite;
  transition: scale 0.3s var(--ease-out), background-color 0.2s, border-color 0.2s;
}
li:nth-child(odd) > .topic { border-bottom-left-radius: 0.3em; }
li:nth-child(even) > .topic { border-bottom-right-radius: 0.3em; }
.topic:hover { scale: 1.05; border-color: var(--neon-pink); }
.topic--s { font-size: clamp(1rem, 1.3vw, 1.15rem); }
.topic--m { font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.topic--l { font-size: clamp(1.3rem, 2.2vw, 1.9rem); background: #2a0d1d; }
.topic--xl { font-size: clamp(1.45rem, 2.8vw, 2.4rem); background: var(--neon-pink); color: var(--velvet-black); border-color: #ffc2e0; }
.topic[aria-pressed='true'] { border-color: var(--cream); }
.topic .tapback { top: -16px; right: -10px; font-size: 1rem; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: var(--fx, 0) var(--fy, -8px); } }
.topics-foot { max-width: 52ch; margin: 0 auto; text-align: center; color: var(--cream-2); font-size: clamp(1.02rem, 1.2vw, 1.12rem); text-wrap: pretty; }
.topics-sticker { width: clamp(90px, 11vw, 150px); }
.topics-sticker--a { left: 5%; top: 18%; rotate: -10deg; }
.topics-sticker--b { right: 5%; bottom: 14%; rotate: 9deg; }

/* --- coming soon */
.soon { padding: var(--section-y) var(--pad-x); }
.soon-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.notify { margin-top: clamp(28px, 3.4vw, 40px); max-width: 520px; }
.notify-label { display: block; font-weight: 650; font-size: 0.95rem; margin-bottom: 10px; }
.notify-row { display: flex; gap: 10px; }
.notify input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 18px; border-radius: 999px;
  background: var(--plum-shadow); border: 2px solid rgba(255, 240, 246, 0.2); color: var(--cream);
  font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.notify input:focus { outline: none; border-color: var(--neon-pink); box-shadow: 0 0 0 4px rgba(255, 77, 166, 0.22); }
.notify .btn { min-height: 52px; flex: none; }
.notify.is-error input { border-color: #ff7a9a; }
.notify.is-sent input { border-color: var(--appletini); }
.form-status { min-height: 1.6em; margin-top: 10px; font-size: 0.95rem; color: var(--cream-2); }
.is-error .form-status { color: #ff9cb4; }
.is-sent .form-status { color: var(--cream); }
.platforms-label { margin-top: clamp(28px, 3.4vw, 40px); font-family: var(--font-sign); font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-3); }
.platforms { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.platforms li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(28, 9, 20, 0.6); font-size: 0.92rem; font-weight: 600; color: var(--cream-2);
}
.platforms svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.platforms li:nth-child(3) svg { fill: currentColor; stroke: none; }
.platforms li span { font-family: var(--font-sign); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neon-pink); }

.ep {
  position: relative; border-radius: var(--radius-l); padding: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(160deg, #241020, var(--plum-shadow) 40%, #120610);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 240, 246, 0.09);
  rotate: 1.5deg;
}
.ep-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-sign); letter-spacing: 0.1em; font-size: 0.86rem; text-transform: uppercase; }
.ep-rec { display: inline-flex; align-items: center; gap: 8px; color: #ff8a95; }
.ep-rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--on-air-red); box-shadow: 0 0 10px var(--on-air-red); animation: rec-dot 1.6s steps(1, end) infinite; }
.ep-num { color: var(--cream-3); }
.ep-cover {
  position: relative; margin-top: 16px; aspect-ratio: 1 / 0.86; border-radius: 20px; overflow: hidden; background: #0b0509;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 246, 0.08);
}
.ep-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.ep-cover .ep-cover-name {
  position: absolute; left: 0; right: 0; top: 6%; text-align: center;
  font-size: clamp(1.6rem, 2.7vw, 2.3rem); line-height: 1;
}
.ep-title { margin-top: 18px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1; }
.ep-sub { margin-top: 6px; color: var(--cream-2); }
.ep-wave { width: 100%; height: 76px; margin-top: 16px; }
.ep-speaker { margin-top: 6px; font-family: var(--font-chat); font-weight: 650; font-size: 0.9rem; transition: color 0.3s; }
.ep-bar { margin-top: 14px; height: 4px; border-radius: 4px; background: rgba(255, 240, 246, 0.12); overflow: hidden; }
.ep-bar span { display: block; height: 100%; width: 100%; background: var(--neon-pink); transform-origin: 0 50%; animation: rec-bar 48s linear infinite; }
@keyframes rec-bar { from { scale: 0.04 1; } to { scale: 1 1; } }
.ep-sticker { right: -26px; top: -40px; width: 120px; rotate: 10deg; }

/* --- spill it */
.spill { padding: var(--section-y) var(--pad-x); }
.spill-panel {
  position: relative; max-width: 1200px; margin: 0 auto; border-radius: 40px;
  padding: clamp(28px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cpath d='M46.8 32.3A13 11.0 0 0 1 34.0 43.0M27.5 41.3A13 11.0 0 0 1 21.8 25.6M26.5 19.4A13 11.0 0 0 1 42.4 20.0M127.8 50.3A11 9.3 0 0 1 114.5 45.5M113.0 40.0A11 9.3 0 0 1 122.1 29.2M128.6 30.0A11 9.3 0 0 1 134.8 41.9M71.3 105.0A14 11.9 0 0 1 71.3 87.0M77.2 82.8A14 11.9 0 0 1 94.1 89.0M95.9 97.2A14 11.9 0 0 1 84.4 109.8M144.6 116.6A10 8.5 0 0 1 155.7 110.2M160.4 112.3A10 8.5 0 0 1 162.7 125.0M158.2 129.1A10 8.5 0 0 1 146.3 126.4M28.1 129.2A11 9.3 0 0 1 40.3 136.2M40.8 141.9A11 9.3 0 0 1 30.0 151.0M23.7 149.0A11 9.3 0 0 1 19.7 136.2M108.9 154.2A9 7.6 0 0 1 108.9 165.8M105.1 168.5A9 7.6 0 0 1 94.2 164.5M93.0 159.2A9 7.6 0 0 1 100.4 151.1M172.9 22.0A8 6.8 0 0 1 163.3 25.5M159.9 23.1A8 6.8 0 0 1 159.9 12.9M163.9 10.3A8 6.8 0 0 1 172.9 14.0' fill='none' stroke='%23000' stroke-opacity='.26' stroke-width='5' stroke-linecap='round'/%3E%3Cg fill='%23000' fill-opacity='.24'%3E%3Ccircle cx='60' cy='58' r='2.6'/%3E%3Ccircle cx='150' cy='72' r='2.6'/%3E%3Ccircle cx='12' cy='92' r='2.6'/%3E%3Ccircle cx='122' cy='104' r='2.6'/%3E%3Ccircle cx='56' cy='176' r='2.6'/%3E%3Ccircle cx='176' cy='160' r='2.6'/%3E%3Ccircle cx='92' cy='10' r='2.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 170px 170px,
    radial-gradient(120% 120% at 0% 0%, #8a1a45, var(--wine-velvet) 40%, #3d0a1f 100%);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 240, 246, 0.12);
}
.spill-copy > p { color: rgba(255, 240, 246, 0.86); }
.spill-rules { margin-top: 22px; font-family: var(--font-sign); font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 0.25em var(--neon-pink), 0 0 0.6em var(--neon-pink); }
.spill-note { margin-top: 14px; font-size: 1rem; line-height: 1.5; color: rgba(255, 240, 246, 0.84); max-width: 34ch; }
/* the copy is a block as wide as its text, so the tea sticker centres under the words */
.spill-copy { display: flex; flex-direction: column; width: fit-content; max-width: 100%; }
.spill-sticker { position: relative; display: block; align-self: center; width: clamp(140px, 13vw, 190px); margin-top: 28px; rotate: -8deg; }

/* the chat window */
.spill-chat {
  position: relative; display: flex; flex-direction: column; border-radius: 30px;
  background: #0c0509;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 240, 246, 0.1);
}
.sc-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-radius: 30px 30px 0 0; background: rgba(24, 12, 19, 0.98); border-bottom: 1px solid rgba(255, 240, 246, 0.08);
  font-family: var(--font-chat);
}
.sc-title { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.sc-head-text { min-width: 0; }
.sc-sub { font-size: 0.78rem; color: var(--cream-3); white-space: nowrap; }
.sc-sub strong { color: var(--cream); font-weight: 650; }
.sc-restart {
  margin-left: auto; flex: none; white-space: nowrap; min-height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  font: 600 0.8rem var(--font-chat); color: var(--cream-2); background: transparent; border: 1px solid rgba(255, 240, 246, 0.22);
}
.sc-restart:hover { color: var(--cream); border-color: var(--cream); }
.sc-restart[hidden] { display: none; }
.sc-view { position: relative; }
.sc-view.has-ghost .sc-screen { padding-bottom: 64px; }
.sc-screen { transition: padding-bottom 0.35s var(--ease-out); }
.sc-screen { height: clamp(300px, 44svh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 18px; scrollbar-width: thin; scrollbar-color: var(--wine-velvet) transparent; }
.sc-thread { list-style: none; margin: 0; padding: 0; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.sc-msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: end; margin-top: 4px; opacity: 0; translate: 0 10px; transition: opacity 0.3s, translate 0.45s var(--ease-out); }
.sc-msg.is-typing, .sc-msg.is-shown { opacity: 1; translate: 0 0; }
.sc-avatar { position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--cd, #6E1235) 45%, #000); }
.sc-avatar img { position: absolute; left: 50%; top: -14%; width: 230%; max-width: none; height: auto; translate: -50% 0; }
.sc-col { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sc-from { margin: 8px 0 3px 12px; font: 600 0.74rem/1.2 var(--font-chat); color: var(--c, var(--cream-3)); }
.sc-bubble {
  position: relative; display: inline-block; max-width: 86%; padding: 8px 13px 9px; border-radius: 19px; border-bottom-left-radius: 6px;
  font: 500 0.98rem/1.32 var(--font-chat); background: var(--c); color: var(--velvet-black); overflow-wrap: anywhere;
}
.sc-dots { display: none; gap: 0.26em; padding: 0.3em 0; }
.sc-dots i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--c); animation: dot 1.1s ease-in-out infinite; }
.sc-dots i:nth-child(2) { animation-delay: 0.16s; }
.sc-dots i:nth-child(3) { animation-delay: 0.32s; }
.is-typing .sc-dots { display: inline-flex; }
.is-typing .sc-text { display: none; }
.is-typing .sc-bubble { background: #2b1424; }
.sc-msg.from-you { grid-template-columns: minmax(0, 1fr); }
.from-you .sc-col { align-items: flex-end; }
.from-you .sc-from { margin: 10px 12px 3px 0; color: var(--cream-3); }
.from-you .sc-bubble { background: var(--neon-pink); border-bottom-left-radius: 19px; border-bottom-right-radius: 6px; }
.from-you.is-big .sc-bubble { max-width: 92%; padding: 10px 15px 11px; font-size: 1.02rem; white-space: pre-wrap; }
.sc-receipt { min-height: 1.2em; margin: 4px 12px 0 0; font: 600 0.72rem var(--font-chat); color: var(--cream-3); transition: color 0.3s; }
.sc-receipt.is-read { color: var(--cream); }
.is-failed .sc-bubble { background: #3a1222; color: var(--cream); box-shadow: inset 0 0 0 1.5px #ff7a9a; }
.is-failed .sc-receipt { color: #ffb3c6; }
.is-failed .sc-receipt::before { content: '!'; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: 0.35em; border-radius: 50%; background: #ff4d6d; color: #fff; font-weight: 800; }
.sc-tapbacks { position: absolute; top: -17px; left: -14px; display: flex; gap: 3px; }
.sc-tapbacks .tapback { position: relative; top: auto; right: auto; }
.sc-stamp { margin: 16px 8px 4px; text-align: center; font: 600 0.74rem/1.4 var(--font-chat); color: var(--cream-3); }

/* live reactions float over the bottom of the thread while they type */
.sc-ghost { position: absolute; left: 16px; right: 16px; bottom: 10px; z-index: 2; pointer-events: none; opacity: 0; translate: 0 10px; transition: opacity 0.3s, translate 0.45s var(--ease-out); }
.sc-ghost.is-on { opacity: 1; translate: 0 0; }
.sc-ghost .sc-msg { opacity: 1; translate: 0 0; }
.sc-ghost .sc-bubble { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7); }

/* the dock: whatever the chat is asking for right now */
.sc-dock { padding: 14px 14px 16px; border-top: 1px solid rgba(255, 240, 246, 0.08); }
.sc-dock > * { opacity: 0; translate: 0 12px; transition: opacity 0.35s, translate 0.5s var(--ease-out); }
.sc-dock > .is-in { opacity: 1; translate: 0 0; }
.sc-choices { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sc-choice {
  cursor: pointer; text-align: left; font-family: var(--font-chat); color: var(--cream);
  padding: 8px 14px 9px; border-radius: 18px; border-bottom-right-radius: 6px;
  border: 1.5px solid rgba(255, 77, 166, 0.6); background: rgba(255, 77, 166, 0.08);
  opacity: 0; translate: 0 8px; animation: chip-in 0.45s var(--ease-out) calc(var(--i) * 60ms) forwards;
  transition: background-color 0.2s, border-color 0.2s, scale 0.25s var(--ease-out);
}
@keyframes chip-in { to { opacity: 1; translate: 0 0; } }
.sc-choice strong { display: block; font-size: 0.95rem; font-weight: 700; line-height: 1.25; }
.sc-choice > span { display: block; font-size: 0.8rem; line-height: 1.3; color: var(--cream-2); }
.sc-choice:hover:not(:disabled) { background: rgba(255, 77, 166, 0.2); border-color: var(--neon-pink); scale: 1.03; }
.sc-choice:disabled { cursor: default; opacity: 0.32 !important; }
.sc-choice.is-picked { opacity: 0 !important; }
.sc-choices--who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-choices--who .sc-choice {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; text-align: center; border-radius: 18px;
  border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent);
}
.sc-choices--who .sc-choice:hover:not(:disabled) { border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); }
.sc-choices--who img { width: 100%; max-width: 78px; height: auto; transition: transform 0.35s var(--ease-out); }
.sc-choices--who .sc-choice:hover img { transform: translateY(-4px) rotate(-5deg) scale(1.06); }
.sc-choices--who .sc-choice > span { font-size: 0.86rem; font-weight: 700; color: var(--c); }
.sc-choices--who .sc-avatar { width: 56px; height: 56px; }

/* the composer: teacup meter, message, optional sign-off */
.sc-composer { display: flex; flex-direction: column; gap: 10px; }
.sc-mess { --tea: #f2a65a; --fill: 20px; --steam: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 12px 6px 8px; border-radius: 16px; background: rgba(255, 240, 246, 0.05); }
.sc-mess[data-level='1'] { --tea: #e9c27a; --fill: 26px; }
.sc-mess[data-level='2'] { --tea: #f2a65a; --fill: 20px; }
.sc-mess[data-level='3'] { --tea: #ff7a59; --fill: 13px; --steam: 0.55; }
.sc-mess[data-level='4'] { --tea: #ff4d6d; --fill: 6px; --steam: 0.8; }
.sc-mess[data-level='5'] { --tea: #ff2e3f; --fill: 0px; --steam: 1; }
.cup { width: 46px; height: 46px; overflow: visible; }
.cup-body, .cup-handle { fill: none; stroke: var(--cream); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.cup-saucer { stroke: var(--cream); stroke-width: 3; stroke-linecap: round; }
.cup-liquid, .cup-wave { fill: var(--tea); transform: translateY(var(--fill)); transition: transform 0.55s var(--ease-out), fill 0.4s; }
.cup-wave { animation: tea-wave 2.4s ease-in-out infinite alternate; }
@keyframes tea-wave { from { translate: -4px 0; } to { translate: 4px 0; } }
.cup-steam path { fill: none; stroke: var(--cream); stroke-width: 2; stroke-linecap: round; opacity: 0; animation: steam 1.9s ease-in-out infinite; }
.cup-steam path:nth-child(2) { animation-delay: 0.45s; }
.cup-steam path:nth-child(3) { animation-delay: 0.9s; }
@keyframes steam { 0% { translate: 0 4px; opacity: 0; } 40% { opacity: var(--steam); } 100% { translate: 0 -7px; opacity: 0; } }
.sc-mess[data-level='5'] .cup { animation: cup-rattle 0.45s linear infinite; }
@keyframes cup-rattle { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
.sc-mess-col { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-mess-label { font: 600 0.82rem var(--font-chat); color: var(--cream-2); }
.sc-mess-out { min-width: 8.6em; text-align: right; font-family: var(--font-sign); font-size: 1rem; letter-spacing: 0.02em; color: var(--tea); transition: color 0.4s; }
.sc-mess input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; }
.sc-mess input[type='range']::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, #e9c27a, #ff7a59, #ff2e3f); }
.sc-mess input[type='range']::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, #e9c27a, #ff7a59, #ff2e3f); }
.sc-mess input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 3px var(--tea), 0 4px 10px rgba(0, 0, 0, 0.5); }
.sc-mess input[type='range']::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 3px var(--tea), 0 4px 10px rgba(0, 0, 0, 0.5); }
.sc-mess input[type='range']:focus-visible { outline: 3px solid var(--neon-pink); outline-offset: 4px; border-radius: 8px; }
.sc-input { display: flex; align-items: flex-end; gap: 8px; padding: 5px 5px 5px 16px; border-radius: 24px; border: 1.5px solid rgba(255, 240, 246, 0.22); background: #150a11; transition: border-color 0.2s, box-shadow 0.2s; }
.sc-input:focus-within { border-color: var(--neon-pink); box-shadow: 0 0 0 4px rgba(255, 77, 166, 0.22); }
.is-error .sc-input { border-color: #ff9cb4; }
.sc-input textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; padding: 7px 0; max-height: 180px; font: 1rem/1.4 var(--font-chat); color: var(--cream); }
.sc-send { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; background: var(--neon-pink); color: var(--velvet-black); transition: scale 0.2s var(--ease-out), opacity 0.2s; }
.sc-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-send:disabled { opacity: 0.35; cursor: default; }
.sc-send:not(:disabled):hover { scale: 1.1; }
.sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 0.82rem var(--font-chat); color: var(--cream-3); }
.sc-alias-label { font-weight: 600; color: var(--cream-2); }
.sc-alias-label span { font-weight: 400; color: var(--cream-3); }
.sc-alias { flex: 1 1 150px; min-width: 0; padding: 4px 2px; border: 0; border-bottom: 1.5px dashed rgba(255, 240, 246, 0.3); background: transparent; color: var(--cream); font: 0.9rem var(--font-chat); }
.sc-alias:focus { outline: none; border-bottom: 1.5px solid var(--neon-pink); box-shadow: 0 2px 0 var(--neon-pink); }
.sc-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.sc-status { font: 0.88rem var(--font-chat); color: #ffb3c6; }
.sc-status:empty { display: none; }
.sc-wait { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 8px 4px; font: 600 0.86rem var(--font-chat); color: var(--cream-2); --c: var(--neon-pink); }
.sc-wait .sc-dots { display: inline-flex; }
.sc-wait.is-done .sc-dots { display: none; }
.sc-wait.is-gone { opacity: 0; transition: opacity 0.6s; }
.sc-again { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.sc-noscript { padding: 20px; color: var(--cream-2); }

/* the payoff: sparkles, drip hearts, their shocked faces */
.sc-burst { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.sc-fx { position: absolute; display: block; }
.sc-fx svg { width: 100%; height: 100%; fill: var(--fc); filter: drop-shadow(0 0 4px var(--fc)); overflow: visible; }
.sc-sticker {
  /* they rise into the dock, which sits empty during the send, so no message gets covered */
  position: absolute; bottom: 10px; width: clamp(84px, 19%, 120px); height: auto;
  left: calc(4% + var(--slot) * 18%); filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}

/* --- footer */
.foot { padding: clamp(80px, 12vh, 140px) var(--pad-x) calc(env(safe-area-inset-bottom) + 48px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; border-top: 1px solid rgba(255, 77, 166, 0.14); }
.foot-stickers { display: flex; justify-content: center; margin-bottom: 6px; }
.sticker-slot--inline { position: relative; width: clamp(86px, 9vw, 118px); margin: 0 -8px; }
.sticker-slot--inline:nth-child(1) { rotate: -9deg; }
.sticker-slot--inline:nth-child(2) { rotate: 2deg; translate: 0 -10px; z-index: 6; }
.sticker-slot--inline:nth-child(3) { rotate: 10deg; }
.foot-lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.foot-mark { width: 72px; height: auto; filter: drop-shadow(0 0 14px rgba(255, 77, 166, 0.45)); }
.wordmark { position: relative; font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1; color: var(--cream); text-shadow: 0 0 0.3em rgba(255, 77, 166, 0.7), 0 0 0.05em rgba(255, 77, 166, 0.9); }
.drip-host { position: relative; }
.drip-host::after {
  content: ''; position: absolute; left: 50%; top: 0.84em; width: 0.2em; height: 0.5em; translate: -30% 0;
  background: var(--neon-pink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 50'%3E%3Cpath d='M0 0h20c-2 6-4 9-4 18v18a6 6 0 0 1-12 0V18C4 9 2 6 0 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 50'%3E%3Cpath d='M0 0h20c-2 6-4 9-4 18v18a6 6 0 0 1-12 0V18C4 9 2 6 0 0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: wordmark-drip 4.5s var(--ease-soft) infinite;
  transform-origin: top;
}
@keyframes wordmark-drip { 0%, 30% { scale: 1 0.55; } 75%, 100% { scale: 1 1; } }
.foot-disclaimer { max-width: 44ch; color: var(--cream-2); }
.foot-handle { font-family: var(--font-sign); letter-spacing: 0.04em; color: var(--neon-pink); font-size: 1.05rem; }
.foot-legal { font-size: 0.85rem; color: var(--cream-3); }
.foot-book { margin-top: 36px; padding-top: 36px; width: min(100%, 520px); border-top: 1px solid rgba(255, 77, 166, 0.14); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.foot-book-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--cream); }
.foot-book-text { max-width: 40ch; color: var(--cream-2); }
.foot-book .btn { margin-top: 6px; }
.foot-book-meta { font-size: 0.85rem; color: var(--cream-3); }
.book-lock { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.book-lock[hidden], .book-open[hidden] { display: none; }
.lock { width: 58px; height: auto; overflow: visible; filter: drop-shadow(0 0 14px rgba(255, 77, 166, 0.35)); }
.lock-shackle { fill: none; stroke: var(--cream); stroke-width: 6; stroke-linecap: round; transform-box: view-box; transform-origin: 46px 34px; }
.lock-body { fill: var(--plum-shadow); stroke: var(--neon-pink); stroke-width: 4; transition: fill 0.5s; }
.lock-dot:nth-of-type(1) { fill: var(--appletini); }
.lock-dot:nth-of-type(2) { fill: var(--cosmo); }
.lock-dot:nth-of-type(3) { fill: var(--blueberry); }
.is-unlocking .lock-shackle { animation: shackle-open 0.9s var(--ease-out) forwards; }
@keyframes shackle-open { 0% { transform: none; } 40% { transform: translateY(-10px); } 100% { transform: translateY(-10px) rotate(-38deg); } }
.is-unlocking .lock-body { fill: #3a0d24; }
.is-unlocking .lock-dot { animation: dot 0.9s ease-in-out 2; }
.lock-title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.1; color: var(--cream); }
.lock-hint { font-size: 0.95rem; color: var(--cream-2); }
.lock-form { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lock-boxes { display: flex; gap: 10px; margin-top: 6px; }
.lock-box {
  width: 54px; height: 64px; padding: 0; text-align: center; text-transform: uppercase;
  font: 400 1.9rem/1 var(--font-display); color: var(--cream); caret-color: var(--neon-pink);
  background: var(--plum-shadow); border: 2px solid rgba(255, 240, 246, 0.24); border-radius: 14px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.lock-box:focus { outline: none; border-color: var(--neon-pink); box-shadow: 0 0 0 4px rgba(255, 77, 166, 0.28); }
.lock-box.is-filled { border-color: rgba(255, 77, 166, 0.75); background: #2a0d1d; }
.lock-box:disabled { opacity: 0.45; }
.lock-boxes.is-checking .lock-box { animation: box-wait 0.9s ease-in-out infinite; }
.lock-boxes.is-checking .lock-box:nth-child(2) { animation-delay: 0.12s; }
.lock-boxes.is-checking .lock-box:nth-child(3) { animation-delay: 0.24s; }
.lock-boxes.is-checking .lock-box:nth-child(4) { animation-delay: 0.36s; }
@keyframes box-wait { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.lock-boxes.is-wrong { animation: lock-shake 0.5s linear; }
.lock-boxes.is-wrong .lock-box, .lock-boxes.is-wrong-still .lock-box { border-color: #ff7a9a; }
@keyframes lock-shake { 0%, 100% { translate: 0 0; } 15% { translate: -11px 0; } 30% { translate: 9px 0; } 45% { translate: -7px 0; } 60% { translate: 5px 0; } 78% { translate: -2px 0; } }
.is-unlocking .lock-box { border-color: var(--cream); box-shadow: 0 0 18px rgba(255, 77, 166, 0.55); }
.lock-status { min-height: 1.4em; font-size: 0.92rem; color: #ffb3c6; }
.lock-fx { position: absolute; left: 50%; top: 26px; width: 18px; height: 18px; pointer-events: none; }
.lock-fx svg { width: 100%; height: 100%; fill: var(--fc); filter: drop-shadow(0 0 4px var(--fc)); }
.book-open { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; opacity: 0; translate: 0 10px; transition: opacity 0.5s, translate 0.6s var(--ease-out); }
.book-open.is-in { opacity: 1; translate: 0 0; }
.book-open-note { font-size: 0.95rem; color: var(--cream-2); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 960px) {
  .premise { grid-template-columns: 1fr; }
  .premise-mark { --mw: clamp(120px, 34vw, 190px); padding-bottom: 84px; }
  .premise-drip { height: 110px; }
  .premise-drop { display: none; }
  .story { grid-template-columns: 1fr; }
  .story { --ph: min(680px, calc(100svh - 150px)); }
  .story-copy { position: relative; top: 0; height: auto; display: block; margin-top: 0 !important; }
  .story-copy-inner { width: auto; max-width: none; }
  .story-track { height: 260vh; height: 260svh; }
  .phone { max-width: 420px; margin: 0 auto; }
  .soon-grid { grid-template-columns: 1fr; }
  .ep { max-width: 460px; rotate: 0deg; }
  .spill-panel { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topbar-nav a:not(.btn) { display: none; }
  .posters {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--pad-x) * -1); padding: 6px var(--pad-x) 20px; scroll-padding-inline: var(--pad-x);
    scrollbar-width: none;
  }
  .posters::-webkit-scrollbar { display: none; }
  .poster { scroll-snap-align: start; }
  .poster:nth-child(2) { transform: none; }
  .poster-name { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .notif-rail { left: 8px; right: 8px; width: auto; bottom: auto; top: calc(env(safe-area-inset-top) + 6px); }
  .notif { translate: 0 -130%; }
  .notif.is-out { translate: 0 -40%; }
  /* phones: no paragraph over the scene, one compact row under the desk */
  .stage-ui { left: 14px; right: 14px; max-width: none; bottom: calc(env(safe-area-inset-bottom) + 14px); }
  .stage-lede { display: none; }
  .story { --tb: 64px; --ph: calc(100svh - var(--tb) - 20px); --dock: calc(var(--tb) + 10px); }
  .story-track { height: 230vh; height: 230svh; }
  .phone { max-width: none; border-radius: 46px; border-width: 9px; }
  .phone-lock { border-radius: 37px; }
  .stage-actions { flex-wrap: nowrap; gap: 8px; margin-top: 0; }
  .stage-actions .btn { min-height: 48px; padding: 0 1em; font-size: 0.95rem; white-space: nowrap; }
  .stage-actions .btn--neon { flex: 1 1 auto; }
  .stage-actions .btn--ghost { flex: none; }
  .label-long { display: none; }
  .label-short { display: inline; }
  .tilt { flex: none; width: 48px; min-height: 48px; padding: 0; justify-content: center; }
  .tilt svg { width: 22px; height: 22px; }
  .tilt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stage::after { height: 16%; background: linear-gradient(to top, rgba(11, 5, 9, 0.85), transparent); }
  .scroll-cue { display: none; }
  .notify-row { flex-direction: column; }
  .topics-sticker { width: 74px; }
  .topics-sticker--a { left: 3%; top: 2%; }
  .topics-sticker--b { right: 3%; bottom: 2%; }
  .story-sticker { width: 112px; }
  .ep-sticker { width: 92px; right: -10px; top: -34px; }
  .spill-sticker { width: 128px; margin-top: 20px; }
  .spill-panel { border-radius: 30px; }
  /* Spill it on a phone: a full-height chat under the top bar, nothing changes size */
  .spill { padding-inline: 10px; }
  .spill-panel { padding: 24px 12px 12px; border-radius: 28px; gap: 20px; }
  .spill-copy { padding-inline: 8px; }
  .spill-chat { height: calc(100svh - 80px); min-height: 460px; max-height: 800px; overflow-anchor: none; border-radius: 26px; }
  .spill-chat.kb-open { min-height: 0; }
  .sc-head { border-radius: 26px 26px 0 0; }
  .sc-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .sc-screen { flex: 1 1 auto; height: auto; min-height: 0; padding-inline: 12px; }
  .sc-dock { flex: none; }
  .sc-restart { min-height: 44px; padding: 0 14px; }
  .sc-choices--cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sc-choices--cats .sc-choice { min-height: 58px; padding: 9px 12px 10px; border-radius: 16px; border-bottom-right-radius: 6px; }
  .sc-choices--cats .sc-choice strong { font-size: 0.92rem; }
  .sc-choices--who .sc-choice { min-height: 104px; }
  .sc-input { padding: 4px 4px 4px 14px; }
  .sc-input textarea { min-height: 44px; max-height: 120px; padding: 10px 0; }
  .sc-send { width: 44px; height: 44px; }
  .sc-mess input[type='range'] { height: 44px; }
  .sc-mess input[type='range']::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
  .sc-mess input[type='range']::-moz-range-thumb { width: 28px; height: 28px; }
  .sc-alias { min-height: 44px; }
  .sc-again .btn { min-height: 48px; }
  .spill-chat.kb-open .sc-head, .spill-chat.kb-open .sc-mess, .spill-chat.kb-open .sc-count { display: none; }
  html.kb-open .topbar { translate: 0 -100%; }
  .sc-head { padding: 12px 12px; gap: 10px; }
  .sc-head .phone-faces .face { width: 30px; height: 30px; margin-left: -10px; }
  .sc-head .phone-faces .face:first-child { margin-left: 0; }
  .sc-dock { padding: 12px 10px 14px; }
  .sc-mess { grid-template-columns: 40px minmax(0, 1fr); }
  .sc-mess-out { grid-column: 2; text-align: left; min-width: 0; margin-top: -4px; }
  .cup { width: 40px; height: 40px; }
  .sc-choices--who { gap: 6px; }
  .sc-choices--who .sc-choice { padding: 6px 4px 8px; }
  .sc-choices--who .sc-choice > span { font-size: 0.8rem; }
}
@media (max-width: 399px) {
  .tilt { display: none !important; }
}
@media (max-width: 420px) {
  .topbar-name { font-size: 1rem; }
  .topbar-mark { width: 32px; }
  .btn--pill { padding: 0.45em 0.9em; font-size: 0.9rem; }
}

/* no JavaScript: a still sign and the sections, no studio machinery */
.no-js .studio { height: 100svh; }
.no-js .sign { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(3rem, 12vw, 8rem); }
.no-js .sign > .sr-only { position: static !important; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; color: #ffe6f3; text-shadow: 0 0 4px #fff, 0 0 14px var(--neon-pink), 0 0 40px var(--neon-pink); }
.no-js .stage-ui, .no-js .scroll-cue { opacity: 1; translate: 0 0; }
.no-js .premise { margin-top: 0; padding-top: var(--section-y); }
.no-js .story-track { height: auto; }
.no-js .phone { display: none; }

/* reduced motion: a still, fully lit room and no flicker */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; transition-delay: 0s !important; }
  .studio { height: 100vh; height: 100svh; }
  .premise { margin-top: 0; padding-top: var(--section-y); }
  .premise-drip-fill { transform: translate3d(0, -40%, 0); }
  .premise-drop { display: none; }
  .story-track { height: auto; }
  .story-copy { position: relative; top: 0; }
  .phone { position: relative; top: 0; }
  .is-static .phone-screen { overflow-y: auto; }
  .is-static .thread { transform: none !important; }
  .sparkle { opacity: 0.8; }
  .twinkle, .girl-life { animation: none !important; }
  .ep-bar span { scale: 0.4 1; }
}