/* Toccando: the same look as the app, an instrument in a dim room, or in
   daylight. Warm neutrals, one signal colour per world (a celadon glaze for
   Melodia, the amber of an old VU meter for Macchina), the season's colour
   for Moments, and one colour kept for things that cost money: ivory in the
   dark, ink in the light. No gradients on controls, and one filled button
   for each job on screen. Colours match Sources/Theme.swift.

   Dark is the default; /theme.js sets data-theme="light" on <html> when the
   visitor's system is light or they picked Light, before the page paints. */

:root {
  --bg: #0e0d0c;                 /* Palette.base */
  --bg-2: #151412;
  --raise: rgba(255, 255, 255, 0.05);
  --raise-2: rgba(255, 255, 255, 0.09);
  --text: #f1eee9;
  --muted: rgba(255, 255, 255, 0.58);
  --faint: rgba(255, 255, 255, 0.36);
  --line: rgba(255, 255, 255, 0.08);
  --ivory: #f2ebdb;              /* Palette.ivory: things that cost money */
  --ink: #171412;                /* Palette.ink: text on ivory and world colours */
  --moments: #ff853d;            /* MomentsStyle.color */
  --moments-later: #b49cff;      /* Moments that are coming */
  --melodia: #80dbb5;
  --macchina: #ffb84d;
  --accent: var(--melodia);
  --a1: var(--accent);           /* the admin panel's names for these */
  --card: var(--bg-2);
  --bg-rgb: 14, 13, 12;
  --fg: 255, 255, 255;           /* the foreground, for rgba(var(--fg), a) */
  --on-accent: var(--ink);
  --money-bg: var(--ivory);
  --money-fg: var(--ink);
  --selected: rgba(255, 255, 255, 0.12);
  --selected-shadow: none;
  --bar-hi: rgba(255, 255, 255, 0.08);
  --shelf-bg: rgba(255, 255, 255, 0.045);
  --shelf-border: rgba(255, 255, 255, 0.1);
  --shelf-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --icon-shadow: rgba(0, 0, 0, 0.45);
  --tip-bg: rgba(10, 9, 8, 0.92);
  --tip-border: rgba(255, 255, 255, 0.1);
  --tip-fg: #f1eee9;
  --float-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  --field-border: rgba(255, 255, 255, 0.14);
  --field-bg: rgba(0, 0, 0, 0.3);
  --well: rgba(0, 0, 0, 0.25);
  --well-o: 1;
  --error: #ff8a7a;
  --lamp: 13%;
  /* Note colours stay inside the world's family (World.noteHSB), so a glide
     shimmers instead of turning into a rainbow. --hue is the pitch, 0–360. */
  --mel-s: 81%; --mel-l: 74%; --mac-s: 100%; --mac-l: 63%;
  --note-base: 137; --note-span: 36; --note-s: var(--mel-s); --note-l: var(--mel-l);
  --radius: 20px;
  --max: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
/* Daylight: warm porcelain, ink, and the world colours deepened so they read. */
:root[data-theme="light"] {
  --bg: #f5f2ec;
  --bg-2: #fbfaf7;
  --bg-rgb: 245, 242, 236;
  --fg: 28, 25, 22;
  --raise: rgba(28, 25, 22, 0.05);
  --raise-2: rgba(28, 25, 22, 0.08);
  --text: #1c1916;
  --muted: rgba(28, 25, 22, 0.64);
  --faint: rgba(28, 25, 22, 0.44);
  --line: rgba(28, 25, 22, 0.1);
  --melodia: #2c8565;
  --macchina: #bf6f14;
  --moments: #df6418;
  --moments-later: #7356cf;
  --on-accent: #fff;
  --money-bg: #1c1916;
  --money-fg: #f5f2ec;
  --selected: #fff;
  --selected-shadow: 0 1px 2px rgba(28, 25, 22, 0.14), 0 0 0 0.5px rgba(28, 25, 22, 0.06);
  --bar-hi: rgba(255, 255, 255, 0.6);
  --shelf-bg: rgba(255, 255, 255, 0.6);
  --shelf-border: rgba(28, 25, 22, 0.09);
  --shelf-shadow: 0 14px 34px rgba(60, 45, 25, 0.16);
  --icon-shadow: rgba(40, 30, 20, 0.2);
  --tip-bg: rgba(251, 250, 247, 0.97);
  --tip-border: rgba(28, 25, 22, 0.1);
  --tip-fg: #1c1916;
  --float-shadow: 0 10px 26px rgba(60, 45, 25, 0.22);
  --field-border: rgba(28, 25, 22, 0.16);
  --field-bg: #fff;
  --well: rgba(28, 25, 22, 0.04);
  --well-o: 0.35;
  --error: #c23b22;
  --lamp: 8%;
  --mel-s: 52%; --mel-l: 36%; --mac-s: 88%; --mac-l: 40%;
  color-scheme: light;
}
body[data-world="macchina"] { --accent: var(--macchina); --note-base: 25; --note-span: 22; --note-s: var(--mac-s); --note-l: var(--mac-l); }
.note, .ladder .bar, .dock-glow, .dock-spark { --note: hsl(calc(var(--note-base) + var(--hue, 0) * var(--note-span) / 360) var(--note-s) var(--note-l)); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img, svg { display: block; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; font-family: var(--display); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
kbd {
  font: 600 12px/1 var(--font);
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--raise);
  color: var(--text);
}

/* ─── Buttons: quiet capsules, and one filled capsule per job ─── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 16px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.12s, background 0.4s;
  white-space: nowrap;
}
.button:hover { filter: brightness(1.06); }
.button:disabled { opacity: 0.6; cursor: default; }
.button.small { min-height: 34px; padding: 0 15px; font-size: 14px; }
.button.ghost, .button.quiet { background: var(--raise-2); color: var(--text); }
.button.ghost:hover, .button.quiet:hover { background: rgba(var(--fg), 0.14); filter: none; }
.button.money { background: var(--money-bg); color: var(--money-fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ─── Header ─── */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 11px max(20px, calc((100vw - var(--max)) / 2));
  background: rgba(var(--bg-rgb), 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; text-decoration: none; }
.brand img { border-radius: 7px; }
.top nav { display: flex; gap: 22px; margin-left: auto; }
.top nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.top nav a:hover { color: var(--text); }

main { padding: 0 20px; }
section { max-width: var(--max); margin: 0 auto; }

/* ─── Hero ─── */

.hero { text-align: center; padding: 76px 0 40px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  background: var(--raise);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--moments); }
.hero h1 {
  font-size: clamp(44px, 8vw, 88px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.hero h1 span { color: var(--accent); transition: color 0.6s; }
.lede { max-width: 620px; margin: 24px auto 0; color: var(--muted); font-size: clamp(17px, 2.2vw, 19px); }

/* ─── Stage: the live demo, lit like the app's window ─── */

.stage {
  position: relative;
  overflow: hidden;
  padding: 18px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--bg);
  isolation: isolate;
  scroll-margin-top: 76px;
}
/* One lamp in the world's colour, and the desk under the Dock catching a little of it. */
.aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(460px circle at 50% 30%, color-mix(in srgb, var(--accent) var(--lamp), transparent), color-mix(in srgb, var(--accent) 3%, transparent) 55%, transparent 100%),
    linear-gradient(transparent 55%, rgba(var(--fg), 0.025));
  transition: background 0.6s;
}
.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.worlds { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--raise); }
.worlds button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 600 14px/1 var(--font);
  cursor: pointer;
}
.worlds svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.worlds button[aria-selected="true"] { background: var(--selected); box-shadow: var(--selected-shadow); color: var(--text); }
.worlds button[aria-selected="true"] svg { stroke: var(--accent); }
.mode-pill { margin: 0; color: var(--muted); font-size: 13.5px; }
.mode-pill b { color: var(--text); font-weight: 600; margin-right: 6px; }

.readout { position: relative; height: 236px; display: grid; place-items: center; align-content: center; }
.note {
  font: 300 clamp(68px, 11vw, 104px)/1 var(--display);
  letter-spacing: -0.02em;
  color: var(--note);
  transition: color 0.12s;
  font-variant-numeric: tabular-nums;
}
.note.idle { color: rgba(var(--fg), 0.16); }
.note.pop { animation: pop 0.2s ease-out; }
@keyframes pop { from { transform: scale(1.06); } to { transform: scale(1); } }
.caption { margin: 12px 0 0; text-align: center; line-height: 1.35; color: rgba(var(--fg), 0.5); font-size: 14px; }
.caption b { display: block; color: rgba(var(--fg), 0.9); font-size: 16px; font-weight: 600; }
.caption span { display: block; color: rgba(var(--fg), 0.5); font-size: 13.5px; }

/* Macchina's knob, as drawn in the app (DetentDial and DialKnob). */
.dial { display: none; position: relative; width: 200px; height: 200px; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial-well { fill: url(#dial-well); opacity: var(--well-o); }
.dial-track { fill: none; stroke: rgba(var(--fg), 0.12); stroke-width: 1; stroke-linecap: round; }
.dial-arc { fill: none; stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset 0.12s; }
.dial-ticks line { stroke: rgba(var(--fg), 0.24); stroke-width: 1.4; stroke-linecap: round; }
.dial-ticks line.near { stroke: rgba(var(--fg), 0.5); }
.dial-ticks line.on { stroke: var(--accent); stroke-width: 3; }
.dial-stop { fill: rgba(var(--fg), 0.35); }
.dial-knob { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)); }
.dial-knurl line { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.dial-face-rings circle { fill: none; stroke: rgba(255, 255, 255, 0.03); stroke-width: 0.8; }
#dial-pointer { transform-origin: 100px 100px; transition: transform 0.18s cubic-bezier(.3, 1.5, .5, 1); }
#dial-pointer rect { fill: var(--accent); filter: drop-shadow(0 0 3px var(--accent)); }
.dial-glyph { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); opacity: 0.55; }
body[data-world="macchina"] .note { display: none; }
body[data-world="macchina"] .dial { display: block; }
body[data-world="macchina"] .readout { height: 280px; }
body[data-world="macchina"] .ladder { display: none; }

/* The scale, one bar per degree, as in the app's ScaleLadder. */
.ladder { display: flex; justify-content: center; align-items: flex-end; gap: 8px; height: 78px; margin-top: 2px; }
.ladder .bar { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ladder .bar i {
  display: block;
  width: 13px;
  border-radius: 3px;
  background: rgba(var(--fg), 0.13);
  box-shadow: inset 0 1.5px 0 var(--bar-hi);
  transition: background 0.12s, transform 0.2s cubic-bezier(.3, 1.6, .5, 1);
}
.ladder .bar span { font-size: 10.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.ladder .bar.on i { background: var(--accent); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.35); transform: translateY(-3px); }
.ladder .bar.on span { color: var(--text); }

.dock-area { position: relative; margin-top: 6px; }
.dock { position: relative; height: var(--dock-h, 140px); touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; }
.dock-shelf {
  position: absolute;
  bottom: 10px;
  z-index: 0;
  border-radius: 22px;
  background: var(--shelf-bg);
  border: 1px solid var(--shelf-border);
  box-shadow: var(--shelf-shadow);
}
.dock-icon { position: absolute; left: 0; z-index: 2; will-change: transform, width, height; }
.dock-icon-art { width: 100%; height: 100%; filter: drop-shadow(0 5px 8px var(--icon-shadow)); }
.dock-icon-art svg { width: 100%; height: 100%; }
.dock-icon-art.bounce { animation: bounce 0.75s cubic-bezier(.3, .6, .4, 1); }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-38%); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-14%); }
}
.dock-dot {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: rgba(var(--fg), 0.7);
  opacity: 0;
}
.dock-icon.running .dock-dot, .dock-icon:first-of-type .dock-dot { opacity: 1; }
.dock-tip {
  position: absolute;
  left: 0;
  z-index: 3;
  padding: 4px 11px;
  border-radius: 8px;
  background: var(--tip-bg);
  border: 1px solid var(--tip-border);
  color: var(--tip-fg);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.dock-tip.on { opacity: 1; }
.dock-glows { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dock-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  margin-left: -70px;
  margin-bottom: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--note) 50%, transparent), transparent 62%);
  animation: glow 0.7s ease-out forwards;
}
.dock-glow.strong { width: 210px; height: 210px; margin-left: -105px; margin-bottom: -105px; }
@keyframes glow { from { transform: scale(0.35); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }
.dock-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--note, var(--accent));
  opacity: 0;
  animation: spark 0.9s ease-out forwards;
}
@keyframes spark { 0% { opacity: 0; transform: translateY(0) scale(0.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-56px) scale(1); } }

.sound-gate {
  position: absolute;
  left: 50%;
  top: -4px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 19px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 15px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
  box-shadow: var(--float-shadow);
}
.sound-gate svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.sound-on .sound-gate { display: none; }

.picker {
  display: flex;
  gap: 8px;
  margin: 16px -20px 0;
  padding: 2px 20px 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.picker::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--raise);
  color: var(--text);
  font: 600 14px/1.2 var(--font);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background 0.15s, border-color 0.15s;
}
.chip img { width: 24px; height: 24px; opacity: 0.8; }
/* The sound glyphs are white line drawings; in daylight they print in ink. */
:root[data-theme="light"] .chip img { filter: brightness(0); opacity: 0.62; }
.chip small { display: block; color: var(--faint); font-weight: 500; font-size: 12px; }
.chip:hover { background: var(--raise-2); }
.chip[aria-selected="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.chip.loading { opacity: 0.6; }
.chip .tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--moments);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}
.keys-hint { margin: 6px 0 0; text-align: center; color: var(--faint); font-size: 13px; }

/* ─── Join ─── */

.join { padding: 64px 0 24px; scroll-margin-top: 80px; }
.join-card {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: radial-gradient(420px circle at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), var(--bg-2);
}
.join h2 { font-size: clamp(28px, 4.5vw, 38px); font-weight: 600; letter-spacing: -0.03em; }
.join .sub { margin: 12px auto 0; max-width: 520px; color: var(--muted); }
.perks { list-style: none; padding: 0; margin: 22px 0 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.perks li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--raise);
  font-size: 14px;
  font-weight: 500;
}
.perks li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.join-form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto; }
.join-form input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--text);
  font: 500 16px/1 var(--font);
}
.join-form input::placeholder { color: var(--faint); }
.join-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.join-form .button { height: 50px; }
.form-error { min-height: 1.4em; margin: 10px 0 0; color: var(--error); font-size: 14px; }
.fine { margin: 2px 0 0; color: var(--faint); font-size: 13px; }
.joined-title { margin: 0; font-size: 22px; font-weight: 600; }
.joined-title span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  vertical-align: 2px;
}
.joined-sub { color: var(--muted); margin: 8px 0 22px; }
.followup p { margin: 0 0 10px; font-weight: 600; }
.followup em { color: var(--faint); font-style: normal; font-weight: 500; }
.chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.chips button {
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: var(--raise);
  color: var(--text);
  font: 600 15px/1.25 var(--font);
  cursor: pointer;
}
.chips button small { display: block; color: var(--faint); font-weight: 500; font-size: 12px; }
.chips button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.joined-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.countdown { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.countdown div { min-width: 74px; padding: 12px 8px 10px; border-radius: 16px; background: var(--well); border: 1px solid var(--line); }
.countdown b { display: block; font-size: 30px; font-weight: 300; font-variant-numeric: tabular-nums; }
.countdown span { color: var(--faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; }
/* Until a launch date is set, the countdown and calendar link stay hidden. */
body[data-launch=""] .needs-date { display: none; }

/* ─── Sections ─── */

.section-title { font-size: clamp(30px, 5vw, 46px); font-weight: 600; text-align: center; letter-spacing: -0.035em; }
.section-sub { max-width: 680px; margin: 14px auto 0; text-align: center; color: var(--muted); font-size: 18px; }
.worlds-section, .craft, .more, .moments, .privacy-promise, .faq { padding: 84px 0 0; scroll-margin-top: 60px; }
.cards { display: grid; gap: 14px; margin-top: 36px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); }
.card h3 { font-size: 22px; font-weight: 600; }
.card p { color: var(--muted); margin: 10px 0 0; }
.card .tag { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.card .list { font-size: 14px; color: var(--faint); }
.card.melodia { background: radial-gradient(360px circle at 0% 0%, color-mix(in srgb, var(--melodia) 9%, transparent), transparent 70%), var(--bg-2); }
.card.melodia h3, .card.melodia .tag { color: var(--melodia); }
.card.macchina { background: radial-gradient(360px circle at 0% 0%, color-mix(in srgb, var(--macchina) 8%, transparent), transparent 70%), var(--bg-2); }
.card.macchina h3, .card.macchina .tag { color: var(--macchina); }
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.features div { padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); }
.features h3 { font-size: 17px; font-weight: 600; }
.features p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }

/* The two gifts share the top row; what comes later sits under them. */
.moment-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 36px; }
.moment { grid-column: span 2; padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); }
.moment.now {
  grid-column: span 3;
  border-color: color-mix(in srgb, var(--moments) 40%, transparent);
  background: radial-gradient(320px circle at 0% 0%, color-mix(in srgb, var(--moments) 12%, transparent), transparent 70%), var(--bg-2);
}
.moment .when { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--moments-later); }
.moment.now .when { color: var(--moments); }
.moment h3 { margin-top: 8px; font-size: 20px; font-weight: 600; }
.moment p { color: var(--muted); font-size: 15px; }
.moment .button { margin-top: 6px; background: var(--raise-2); color: var(--moments); }

.faq { max-width: 760px; }
.faq .section-title { margin-bottom: 28px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 20px 0;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--faint); font-weight: 400; font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: -6px 0 20px; color: var(--muted); }

.final { padding: 100px 0 90px; text-align: center; }
.final h2 { font-size: clamp(28px, 5vw, 44px); font-weight: 600; margin-bottom: 26px; letter-spacing: -0.035em; }

.foot { padding: 32px 20px 48px; border-top: 1px solid var(--line); text-align: center; color: var(--faint); font-size: 14px; }
.foot p { margin: 4px 0; }
.foot .links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; }
.foot .small { font-size: 12px; }
.theme-switch { display: inline-flex; gap: 2px; margin-top: 14px; padding: 3px; border-radius: 999px; background: var(--raise); }
.theme-switch button { padding: 5px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 12.5px/1 var(--font); cursor: pointer; }
.theme-switch button[aria-checked="true"] { background: var(--selected); box-shadow: var(--selected-shadow); color: var(--text); }

/* ─── Message pages (confirm, unsubscribe, privacy, admin sign-in) ─── */

.message-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(520px circle at 50% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%), var(--bg); }
.message { max-width: 520px; text-align: center; }
.message .brand { justify-content: center; margin-bottom: 28px; }
.message .brand img { border-radius: 9px; }
.message h1 { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; }
.message p { color: var(--muted); }
.message .perks { flex-direction: column; align-items: center; }
.message .error { color: var(--error); }
.login { display: grid; gap: 10px; margin-top: 18px; text-align: left; }
.login input { height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text); font: 16px var(--font); }

.doc { max-width: 720px; margin: 0 auto; padding: 56px 20px 80px; }
.doc h1 { font-size: 40px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.03em; }
.doc h2 { font-size: 22px; font-weight: 600; margin: 36px 0 8px; }
.doc p, .doc li { color: var(--muted); }
.doc .updated { color: var(--faint); font-size: 14px; }

/* ─── Small screens ─── */

/* The year ahead: eight slots, revealed a week before each Moment arrives. */
.year-ahead { margin-top: 44px; text-align: center; }
.year-ahead h3 { font-size: 24px; font-weight: 600; }
.year-ahead > p { max-width: 560px; margin: 8px auto 0; color: var(--muted); font-size: 15px; }
.slots { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: left; }
.slot { padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); min-height: 112px; }
.slot .when { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--moments-later); }
.slot .when span { padding: 2px 7px; border-radius: 999px; font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink); background: var(--moments-later); }
.slot h4 { margin: 8px 0 0; font-size: 16px; font-weight: 600; }
.slot h4.hint { font-weight: 500; font-style: italic; color: var(--muted); }
.slot p:not(.when) { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.slot.hidden { border-style: dashed; background: transparent; }
.slot.next { border-color: color-mix(in srgb, var(--moments-later) 45%, transparent); }
.slot.soon, .slot.tomorrow { border-color: color-mix(in srgb, var(--moments) 45%, transparent); }
.slot.soon .when, .slot.tomorrow .when, .slot.out .when { color: var(--moments); }
.slot.soon .when span, .slot.tomorrow .when span { background: var(--moments); }

/* ─── The launch season: candlelight and falling leaves ───
   On while SEASON is set (src/worker.js turns it off a day after launch).
   The page underneath is unchanged; this only adds warmth and a few leaves. */

body:not([data-season="halloween"]) .season-only,
body[data-season="halloween"] .off-season { display: none; }

body[data-season="halloween"] { --lamp: 16%; }
body[data-season="halloween"] .hero { position: relative; }
body[data-season="halloween"] .hero::before {
  content: "";
  position: absolute;
  inset: -80px -20vw 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(520px 300px at 50% 0%, color-mix(in srgb, var(--moments) 14%, transparent), transparent 75%);
}
body[data-season="halloween"] .eyebrow { color: var(--text); background: color-mix(in srgb, var(--moments) 14%, transparent); }
body[data-season="halloween"] .eyebrow .dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--moments) 22%, transparent); animation: flicker 3.2s ease-in-out infinite; }
body[data-season="halloween"] .countdown b { color: var(--moments); }
body[data-season="halloween"] .countdown div { border-color: color-mix(in srgb, var(--moments) 28%, transparent); }
.countdown-label { margin: 30px 0 0; color: var(--muted); font-size: 14px; }
.countdown-label + .countdown { margin-top: 12px; }

.season-strip {
  margin: 0;
  padding: 9px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--moments) 16%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--moments) 30%, transparent);
}
.season-strip a { margin-left: 6px; color: var(--moments); font-weight: 600; text-decoration: none; white-space: nowrap; }
.season-strip a:hover { text-decoration: underline; }

/* Nine leaves drifting down behind the page, slow enough to stay calm. */
.leaves { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
body[data-season="halloween"] main, body[data-season="halloween"] .foot { position: relative; z-index: 1; }
.leaves i {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: var(--s, 22px);
  height: var(--s, 22px);
  opacity: 0;
  animation: leaf-fall var(--d, 18s) linear var(--w, 0s) infinite;
}
.leaves svg { width: 100%; height: 100%; animation: leaf-sway calc(var(--d, 18s) / 4) ease-in-out infinite alternate; }
.leaves path { fill: color-mix(in srgb, var(--moments) 70%, transparent); }
.leaves path.vein { fill: none; stroke: rgba(var(--bg-rgb), 0.5); stroke-width: 1; }
.leaves i:nth-child(1) { --x: 6%;  --s: 20px; --d: 19s; --w: -2s; }
.leaves i:nth-child(2) { --x: 17%; --s: 14px; --d: 24s; --w: -11s; }
.leaves i:nth-child(3) { --x: 29%; --s: 26px; --d: 21s; --w: -6s; }
.leaves i:nth-child(4) { --x: 44%; --s: 16px; --d: 27s; --w: -17s; }
.leaves i:nth-child(5) { --x: 58%; --s: 22px; --d: 20s; --w: -9s; }
.leaves i:nth-child(6) { --x: 69%; --s: 13px; --d: 25s; --w: -3s; }
.leaves i:nth-child(7) { --x: 79%; --s: 24px; --d: 22s; --w: -14s; }
.leaves i:nth-child(8) { --x: 88%; --s: 17px; --d: 26s; --w: -20s; }
.leaves i:nth-child(9) { --x: 96%; --s: 19px; --d: 23s; --w: -8s; }
@keyframes leaf-fall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8%   { opacity: 0.55; }
  85%  { opacity: 0.4; }
  100% { opacity: 0; transform: translate(-60px, 105vh) rotate(260deg); }
}
@keyframes leaf-sway { from { transform: translateX(-14px) rotate(-18deg); } to { transform: translateX(14px) rotate(22deg); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.7; } 50% { opacity: 0.95; } 55% { opacity: 0.75; } }
@media (max-width: 720px) {
  .leaves i:nth-child(even) { display: none; }
}

/* ─── Haunted: a Halloween sound is playing in the demo ───
   The lights go out (theme.js switches to dark), the lamp becomes a
   flickering pumpkin, fog rolls over the Dock and the leaves hurry.
   Choosing any other sound brings the room back. */

:root[data-haunted] body { transition: background-color 0.9s ease, color 0.9s ease; }
:root[data-haunted="true"] body {
  --accent: var(--moments);
  --lamp: 26%;
  --note-base: 12; --note-span: 32; --note-s: 100%; --note-l: 62%;
}
:root[data-haunted="true"] .aurora { animation: flicker 2.8s ease-in-out infinite; }
.stage::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -10px;
  height: 60%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  background:
    radial-gradient(40% 60% at 30% 80%, rgba(255, 236, 214, 0.10), transparent 70%),
    radial-gradient(35% 55% at 70% 85%, rgba(255, 210, 170, 0.08), transparent 70%),
    radial-gradient(50% 50% at 50% 100%, color-mix(in srgb, var(--moments) 14%, transparent), transparent 75%);
  background-size: 200% 100%, 180% 100%, 100% 100%;
  animation: fog 26s ease-in-out infinite alternate;
}
:root[data-haunted="true"] .stage::after { opacity: 1; }
:root[data-haunted="true"] .leaves path:not(.vein) { fill: var(--moments); }
:root[data-haunted="true"] .leaves i { animation-duration: calc(var(--d, 18s) * 0.55); }
:root[data-haunted="true"] .season-strip { background: color-mix(in srgb, var(--moments) 28%, var(--bg)); }
@keyframes fog { from { background-position: 0% 0, 100% 0, 0 0; } to { background-position: 100% 0, 0% 0, 0 0; } }

@media (max-width: 900px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .moment-row { grid-template-columns: 1fr 1fr; }
  .moment, .moment.now { grid-column: auto; }
  .slots { grid-template-columns: 1fr 1fr; }
  .cards.three { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .top { gap: 12px; }
  .top nav { display: none; }
  .top .button { margin-left: auto; }
  .hero { padding: 48px 0 28px; }
  .stage { padding: 14px 12px 14px; border-radius: 22px; margin: 0 -8px; }
  .stage-bar { justify-content: center; }
  .mode-pill { width: 100%; text-align: center; }
  .readout { height: 196px; }
  body[data-world="macchina"] .readout { height: 230px; }
  .dial { width: 168px; height: 168px; }
  .ladder { gap: 5px; height: 64px; }
  .ladder .bar i { width: 10px; }
  .ladder .bar span { display: none; }
  .picker { margin: 12px -12px 0; padding: 2px 12px 8px; }
  .keys-hint { display: none; }
  .sound-gate { top: -12px; padding: 10px 16px; font-size: 14px; }
  .join-card { padding: 28px 18px; }
  .join-form { flex-direction: column; }
  .countdown div { min-width: 0; flex: 1; }
  .cards.two, .features, .moment-row { grid-template-columns: 1fr; }
  .worlds-section, .craft, .more, .moments, .privacy-promise, .faq { padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .leaves { display: none; }
  .stage::after, :root[data-haunted="true"] .aurora { animation: none; }
  .dock-icon-art.bounce, .note.pop { animation: none; }
  #dial-pointer, .ladder .bar i { transition: none; }
}