/* First Light: a day that moves from morning to night to dawn */

:root {
  --ink: #3a1f33;
  --ink-soft: #6c4c60;
  --paper: #fff7f1;
  --morning: #fdebdd;
  --gold: #f8dcb6;
  --dusk: #4b2443;
  --night: #221326;
  --dawn: #fce2d5;

  --berry: #a8325a;
  --berry-deep: #85244a;
  --honey: #f0a845;
  --honey-soft: #f7c77d;
  --rose: #f2909f;
  --leaf: #5c805c;
  --bone: #f4e3d0;

  --on-dark: #fbeadf;
  --on-dark-soft: #d9bdca;

  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --line: rgba(58, 31, 51, 0.16);
  --panel: rgba(255, 250, 246, 0.72);
  --panel-edge: rgba(58, 31, 51, 0.1);
  --accent: var(--berry);
  --accent-ink: #fff;

  --serif: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Alegreya Sans', 'Gill Sans', 'Segoe UI', system-ui, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.1875rem;
  --step-1: 1.4rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.1rem, 4.2vw, 2.9rem);
  --step-4: clamp(2.6rem, 7vw, 4.6rem);
  --step-5: clamp(3.4rem, 11vw, 7.6rem);

  --gutter: clamp(16px, 4vw, 40px);
  --measure: 64ch;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--morning);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: 'kern', 'liga', 'onum';
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; border-radius: 6px; }

[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); margin-bottom: 0.6em; }
h4 { font-size: var(--step-1); margin-bottom: 0.4em; }
p { margin: 0 0 1em; }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 52ch; }
.soft { color: var(--fg-soft); }
.small { font-size: var(--step--1); line-height: 1.5; }

/* ---------- skies ---------- */

.sky { position: relative; color: var(--fg); }
.sky[data-tone='dark'] {
  --fg: var(--on-dark);
  --fg-soft: var(--on-dark-soft);
  --line: rgba(251, 234, 223, 0.18);
  --panel: rgba(255, 255, 255, 0.06);
  --panel-edge: rgba(251, 234, 223, 0.14);
  --accent: var(--honey);
  --accent-ink: #2a1426;
}
.sky-morning { background: var(--morning); }
.sky-gold { background: var(--gold); }
.sky-dusk { background: var(--dusk); }
.sky-night { background: var(--night); }
.sky-dawn { background: var(--dawn); }

.wrap { width: min(1180px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.chapter { padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(40px, 6vw, 80px); }
.chapter-head { display: grid; gap: 18px; margin-bottom: clamp(48px, 7vw, 96px); max-width: 56rem; }
.chapter-head .lede { color: var(--fg-soft); }
.chapter-time { font-family: var(--serif); font-size: var(--step-1); color: var(--accent); display: flex; align-items: center; gap: 10px; }
.chapter-time svg { width: 30px; height: 30px; }

/* ---------- top bar ---------- */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 10px var(--gutter);
  color: var(--ink);
  transition: color 0.6s var(--ease), background 0.6s var(--ease), box-shadow 0.6s;
}
.topbar.scrolled { background: color-mix(in srgb, var(--bar-bg, var(--morning)) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--bar-line, rgba(58,31,51,.08)); }
body[data-tone='dark'] .topbar { color: var(--on-dark); --bar-line: rgba(251,234,223,.1); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.25rem; text-decoration: none; white-space: nowrap; }
.brand-sun { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #ffe2a6, var(--honey) 60%, #e98a3b); box-shadow: 0 0 0 4px rgba(240,168,69,.18); transition: background .8s, box-shadow .8s; }
body[data-mood='night'] .brand-sun { background: radial-gradient(circle at 60% 40%, #fff6e8, #e9d7c4 70%); box-shadow: 0 0 14px 2px rgba(255,240,220,.25); }
.nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: 1rem; white-space: nowrap; opacity: .78; transition: opacity .3s, background .3s; }
.nav a:hover, .nav a[aria-current='true'] { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.bar-tools { display: flex; gap: 6px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: transparent; transition: background .3s, border-color .3s; position: relative; }
.icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.icon-btn[aria-pressed='true'] { background: var(--honey); border-color: var(--honey); color: #2a1426; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .eq { position: absolute; inset: auto 0 6px 0; display: none; justify-content: center; gap: 2px; }
.icon-btn[aria-pressed='true'] .eq { display: flex; }
.eq i { width: 2px; height: 5px; background: currentColor; border-radius: 1px; animation: eq 1.4s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .3s; }
.eq i:nth-child(3) { animation-delay: .6s; }
@keyframes eq { 50% { height: 2px; } }

.menu-btn { display: none; }
.menu-btn[aria-expanded='true'] { background: color-mix(in srgb, currentColor 10%, transparent); }

/* Twelve links only fit on one line from about 1280px; below that they move into a menu. */
@media (min-width: 1280px) and (max-width: 1399px) { .nav a { padding: 6px 9px; } }
@media (max-width: 1279px) {
  .menu-btn { display: grid; }
  .bar-tools { margin-left: auto; }
  .topbar.menu-open { background: var(--bar-bg, var(--morning)); box-shadow: 0 1px 0 var(--bar-line, rgba(58,31,51,.08)); }
  .nav {
    display: none; position: absolute; top: calc(100% + 8px); right: var(--gutter);
    width: min(380px, calc(100vw - 2 * var(--gutter))); max-height: calc(100svh - 96px);
    margin: 0; padding: 8px; overflow: auto;
    grid-template-columns: 1fr 1fr; gap: 2px;
    border-radius: 22px; background: var(--bar-bg, var(--morning));
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    box-shadow: 0 24px 48px -20px rgba(34, 19, 38, .45);
  }
  .topbar.menu-open .nav { display: grid; animation: menu-in .25s var(--ease); }
  .nav a { padding: 11px 14px; border-radius: 14px; opacity: .85; }
}
@keyframes menu-in { from { opacity: 0; translate: 0 -6px; } }

/* ---------- hero ---------- */

.hero { min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: linear-gradient(180deg, #fde4d0 0%, #fdebdd 55%, #fdebdd 100%); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 5vw, 72px); align-items: center; padding-top: 96px; padding-bottom: 64px; }
.hero h1 { font-size: var(--step-5); line-height: 0.98; letter-spacing: -0.02em; margin-bottom: 28px; }
.hero .lede { margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { margin-top: 18px; color: var(--fg-soft); font-size: var(--step--1); max-width: 44ch; }
.hero-sky { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; }
.hero-cue { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font-family: var(--serif); font-size: var(--step-1); min-height: 2.6em; color: var(--ink-soft); transition: opacity .8s; }
.hero-hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 32%; pointer-events: none; }
.sun {
  position: absolute; left: 50%; top: 46%; width: 62%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #ffe9b8 0%, #f9c56e 38%, #f0a845 62%, #e88a3e 100%);
  box-shadow: 0 0 0 18px rgba(240, 168, 69, 0.14), 0 0 0 44px rgba(240, 168, 69, 0.08), 0 0 120px 40px rgba(240, 168, 69, 0.35);
  transition: transform 4s cubic-bezier(.37,0,.63,1);
  transform: scale(.82);
  border: 0; padding: 0; cursor: pointer;
}
.sun.in { transform: scale(1); }
.sun.idle { animation: sun-idle 10s ease-in-out infinite; }
@keyframes sun-idle { 0%, 100% { transform: scale(.84); } 45% { transform: scale(.96); } }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; padding-top: 88px; }
  .hero-sky { order: -1; max-width: 250px; }
  .hero h1 { margin-bottom: 18px; }
  .hero-sky { margin-bottom: 26px; }
  .hero-cue { bottom: -34px; font-size: 1.1rem; }
}
/* On phones, a smaller sun keeps the hero buttons clear of the dock. */
@media (max-width: 640px) {
  .hero-grid { padding-top: 76px; gap: 12px; }
  .hero-sky { max-width: 180px; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: 1.05rem; font-weight: 500; text-decoration: none; line-height: 1.2;
  transition: transform .2s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, black); }
.btn-ghost { border-color: color-mix(in srgb, currentColor 35%, transparent); background: transparent; }
.btn-ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-small { padding: 8px 14px; font-size: .95rem; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  font-size: 1rem; line-height: 1.25; transition: background .25s, border-color .25s, color .25s;
}
.chip:hover { border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.chip[aria-pressed='true'], .chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- topics ---------- */

.topic { padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--line); }
.topic:first-of-type { border-top: 0; padding-top: 0; }
.topic-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.topic-grid.wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.topic-grid.wide-right { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.topic-grid > .stick { position: sticky; top: 88px; }
.prose { max-width: var(--measure); }
.prose p, .prose li { color: var(--fg); }
.prose ul { padding-left: 1.1em; margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--accent); }
@media (max-width: 900px) {
  .topic-grid, .topic-grid.wide-left, .topic-grid.wide-right { grid-template-columns: 1fr; }
  .topic-grid > .stick { position: static; }
}

.panel { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 28px; padding: clamp(18px, 3vw, 30px); backdrop-filter: blur(4px); }
.panel-title { font-family: var(--serif); font-size: var(--step-1); margin: 0 0 6px; }
.panel-sub { color: var(--fg-soft); font-size: 1rem; margin-bottom: 16px; }

/* Kin's words */
.said { margin: 1.4em 0 1.6em; padding: 0; max-width: min(32rem, 100%); }
.said p { font-family: var(--serif); font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.22; margin: 0 0 .5em; text-wrap: balance; }
.said p::before { content: '\201C'; margin-left: -.42em; color: var(--accent); }
.said p::after { content: '\201D'; color: var(--accent); }
.said footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--fg-soft); font-size: 1rem; }

.clips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.clip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 7px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  font-size: .98rem; line-height: 1.2; text-align: left;
  transition: background .25s, border-color .25s;
}
.clip:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.clip .play { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.clip .play svg { width: 10px; height: 10px; margin-left: 2px; }
.clip .ts { font-variant-numeric: tabular-nums; color: var(--fg-soft); }
.clip .ext { width: 13px; height: 13px; opacity: .65; }

.mantra { font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.3; margin: 1.2em 0; padding-left: 18px; border-left: 2px solid var(--accent); }
.mantra span { display: block; }
.mantra .short { color: var(--accent); margin-top: .3em; }

.note { border-radius: 18px; padding: 16px 18px; background: color-mix(in srgb, var(--leaf) 13%, transparent); border: 1px solid color-mix(in srgb, var(--leaf) 30%, transparent); font-size: 1.04rem; margin: 1.2em 0; max-width: var(--measure); }
.sky[data-tone='dark'] .note { background: rgba(160, 200, 160, 0.09); border-color: rgba(160, 200, 160, 0.25); }
.note strong { font-weight: 700; }
.note a { word-break: break-word; }
.note.warn { background: color-mix(in srgb, var(--berry) 10%, transparent); border-color: color-mix(in srgb, var(--berry) 32%, transparent); }

/* lists with two columns */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .pair { grid-template-columns: 1fr; } }

/* ---------- tabs ---------- */
.tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 7%, transparent); margin-bottom: 18px; }
.tabs button { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font-size: 1rem; transition: background .3s, color .3s; }
.tabs button[aria-selected='true'] { background: var(--accent); color: var(--accent-ink); }
.tab-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tab-list li { padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--fg) 4%, transparent); animation: rise .5s var(--ease) both; }
.tab-list li:nth-child(2) { animation-delay: .05s; } .tab-list li:nth-child(3) { animation-delay: .1s; } .tab-list li:nth-child(4) { animation-delay: .15s; } .tab-list li:nth-child(5) { animation-delay: .2s; } .tab-list li:nth-child(6) { animation-delay: .25s; } .tab-list li:nth-child(7) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- interludes ---------- */
.interlude { position: relative; min-height: 78vh; display: grid; place-items: center; overflow: hidden; text-align: center; padding: 80px var(--gutter); }
.interlude .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.interlude .words { position: relative; max-width: 30ch; }
.interlude .words p { font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.2; text-wrap: balance; margin-bottom: .5em; }
.interlude .words .small { font-family: var(--sans); font-size: 1rem; }
.interlude .clips { justify-content: center; }
.to-gold { background: linear-gradient(180deg, var(--morning) 0%, #fbe2c6 50%, var(--gold) 100%); }
.to-dusk { background: linear-gradient(180deg, var(--gold) 0%, #f2b48c 26%, #d9796f 46%, #8f3e5a 70%, var(--dusk) 100%); color: var(--on-dark); }
.to-night { background: linear-gradient(180deg, var(--dusk) 0%, #34192f 50%, var(--night) 100%); color: var(--on-dark); }
.to-dawn { background: linear-gradient(180deg, var(--night) 0%, #3d2142 22%, #8a4a63 44%, #e79a86 66%, #f8cdb5 84%, var(--dawn) 100%); color: var(--ink); }
.to-dusk .clip, .to-night .clip { --fg: var(--on-dark); --fg-soft: var(--on-dark-soft); --line: rgba(251,234,223,.25); --accent: var(--honey); --accent-ink: #2a1426; }
.to-dawn .words { color: var(--ink); }

/* ---------- breath widget ---------- */
.breath { display: grid; gap: 18px; justify-items: center; text-align: center; }
.breath-stage { position: relative; width: min(320px, 78vw); aspect-ratio: 1; display: grid; place-items: center; }
.breath-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--fg) 25%, transparent); }
.breath-orb {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #ffeac0 0%, #f9c56e 40%, #f0a845 66%, #e3813d 100%);
  box-shadow: 0 0 60px 10px rgba(240, 168, 69, 0.35);
  transform: scale(.45);
  transition-property: transform; transition-timing-function: cubic-bezier(.37,0,.63,1);
}
.sky[data-tone='dark'] .breath-orb, .sheet .breath-orb { background: radial-gradient(circle at 42% 38%, #fff4dc 0%, #f7cf8a 40%, #e9a25a 70%, #c96d4a 100%); box-shadow: 0 0 80px 16px rgba(240, 168, 69, 0.22); }
.breath-count { position: absolute; font-family: var(--serif); font-size: 2.2rem; color: #4a2340; font-variant-numeric: tabular-nums; pointer-events: none; }
.breath-cue { font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem); min-height: 2.8em; max-width: 26ch; line-height: 1.3; transition: opacity .5s; }
.breath-how { color: var(--fg-soft); font-size: 1rem; max-width: 46ch; min-height: 3em; }
.breath-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.breath .chip-row { justify-content: center; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: .98rem; color: var(--fg-soft); cursor: pointer; }
.toggle input { appearance: none; width: 38px; height: 22px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 20%, transparent); position: relative; transition: background .3s; cursor: pointer; margin: 0; }
.toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.toggle input:checked { background: var(--accent); }
.toggle input:checked::after { transform: translateX(16px); }

/* ---------- berry basket ---------- */
.basket-wrap { position: relative; }
.basket svg { width: 100%; height: auto; overflow: visible; }
.basket .item { cursor: pointer; transition: transform .25s var(--ease); transform-box: fill-box; transform-origin: center; }
.basket .item:hover { transform: scale(1.12); }
.basket .item:focus-visible { outline: none; }
.basket .item:focus-visible > * { stroke: var(--honey); stroke-width: 3; }
.basket .item.gone { animation: toss .9s var(--ease) forwards; pointer-events: none; }
@keyframes toss { 40% { opacity: 1; } to { transform: translate(var(--tx, 160px), -180px) rotate(var(--rot, 220deg)) scale(.6); opacity: 0; } }
.basket .berry.bob { animation: bob .6s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes bob { 50% { transform: translateY(-14px); } }
.basket-msg { min-height: 3.2em; font-family: var(--serif); font-size: var(--step-1); line-height: 1.3; margin: 10px 0; }
.eyes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 1.2em 0; }
.eye { padding: 16px; border-radius: 20px; background: color-mix(in srgb, var(--fg) 5%, transparent); }
.eye h4 { margin-bottom: 4px; }
.eye p { font-size: 1rem; margin: 0; color: var(--fg-soft); }
@media (max-width: 640px) { .eyes-row { grid-template-columns: 1fr; } }

/* ---------- pelvis & cervix ---------- */
.diagram svg { width: 100%; height: auto; }
.diagram .caption { font-family: var(--serif); font-size: var(--step-1); line-height: 1.3; min-height: 2.8em; margin: 10px 0 4px; }
.range { width: 100%; margin: 14px 0 6px; accent-color: var(--accent); height: 28px; }
.range-label { display: flex; justify-content: space-between; font-size: .95rem; color: var(--fg-soft); }
.cervix-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.cervix-readout div { padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--fg) 5%, transparent); font-size: 1rem; }
.cervix-readout b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }

/* ---------- hormone cards & loop ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 8px 0 28px; }
.hormone { padding: 24px; border-radius: 28px; position: relative; overflow: hidden; }
.hormone h4 { font-size: var(--step-2); margin-bottom: 4px; }
.hormone .aka { font-style: italic; color: var(--fg-soft); margin-bottom: 12px; }
.hormone p:last-child { margin: 0; }
.h-oxy { background: #f9c9b4; }
.h-endo { background: #f3d6ee; }
.h-adr { background: #fbe5a5; }
.hormone .glyph { position: absolute; right: -20px; top: -20px; width: 110px; height: 110px; opacity: .5; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }
.cast { columns: 2 280px; column-gap: 32px; padding: 0; list-style: none; margin: 0; }
.cast li { break-inside: avoid; margin-bottom: 14px; font-size: 1.05rem; }
.cast b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; display: block; }

.loop svg { width: 100%; height: auto; max-width: 440px; margin: 0 auto; }
.loop .node-label { font-family: var(--sans); font-size: 13.5px; fill: var(--ink); }
.loop-env { display: grid; gap: 12px; margin-top: 14px; }
.loop-env h5 { margin: 0; font-family: var(--sans); font-size: .95rem; font-weight: 500; color: var(--fg-soft); }
.chip.helps[aria-pressed='true'] { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.chip.hinders[aria-pressed='true'] { background: var(--berry); border-color: var(--berry); color: #fff; }
.meters { display: grid; gap: 10px; margin: 16px 0 6px; }
.meter { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; font-size: 1rem; }
.meter .bar { height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 10%, transparent); overflow: hidden; }
.meter .fill { height: 100%; border-radius: 99px; width: 50%; transition: width 1s var(--ease); }
.fill.oxy { background: #e7896c; }
.fill.endo { background: #b779a8; }
.fill.adr { background: #e2a72e; }
.loop-msg { font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; min-height: 3.2em; margin-top: 10px; }

/* ---------- mango ---------- */
.mango-btn { cursor: pointer; }
.mango-btn:focus-visible { outline: none; }
.mango-btn:focus-visible ellipse { stroke: var(--berry); stroke-width: 3; }
.mango-fall { animation: fall 1.4s cubic-bezier(.5,0,.75,0) forwards; transform-box: fill-box; transform-origin: 50% 0; }
.mango-btn:focus:not(:focus-visible), .basket .item:focus:not(:focus-visible) { outline: none; }
@keyframes fall { 0% { transform: translateY(0) rotate(0); } 70% { transform: translateY(var(--drop, 300px)) rotate(28deg); } 82% { transform: translateY(calc(var(--drop, 300px) - 22px)) rotate(36deg); } 100% { transform: translateY(var(--drop, 300px)) rotate(40deg); } }
.wobble { animation: wobble .6s ease-in-out; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes wobble { 25% { transform: rotate(9deg); } 75% { transform: rotate(-7deg); } }

/* ---------- waves & stars ---------- */
.wave-line { animation: drift 14s linear infinite; }
.wave-line.slow { animation-duration: 22s; }
@keyframes drift { to { transform: translateX(-400px); } }
.star { animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .25; } }
.firefly { animation: float 9s ease-in-out infinite; }
@keyframes float { 25% { transform: translate(14px, -18px); opacity: 1; } 50% { transform: translate(-8px, -30px); opacity: .3; } 75% { transform: translate(-16px, -8px); opacity: .9; } }
.petal { position: absolute; top: -20px; width: 12px; height: 9px; border-radius: 60% 0 60% 0; background: #f6b3a5; opacity: .7; animation: petal 16s linear infinite; pointer-events: none; }
@keyframes petal { to { transform: translate(-120px, 110vh) rotate(540deg); } }

/* ---------- stages explorer ---------- */
.stages { margin-top: 10px; }
.stage-track { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 26px; }
.stage-track::before { content: ''; position: absolute; left: 4%; right: 4%; top: 22px; height: 2px; background: linear-gradient(90deg, var(--honey), var(--rose), #c486c0, var(--honey)); opacity: .55; }
.stage-dot { position: relative; display: grid; justify-items: center; gap: 10px; border: 0; background: none; padding: 0 2px; text-align: center; font-size: .98rem; line-height: 1.2; color: var(--fg-soft); }
.stage-dot .pip { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--dusk); border: 2px solid color-mix(in srgb, var(--honey) 60%, transparent); font-family: var(--serif); font-size: 1.1rem; color: var(--on-dark); transition: transform .3s var(--ease), background .3s; }
.stage-dot[aria-selected='true'] { color: var(--fg); }
.stage-dot[aria-selected='true'] .pip { background: var(--honey); color: #2a1426; transform: scale(1.12); border-color: var(--honey); }
.stage-dot:hover .pip { transform: scale(1.08); }
@media (max-width: 760px) {
  .stage-track { gap: 2px; }
  .stage-dot span:not(.pip) { display: none; }
  .stage-dot .pip { width: 40px; height: 40px; font-size: 1rem; }
  .stage-track::before { top: 19px; left: 7%; right: 7%; }
}
.stage-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(22px, 4vw, 48px); animation: rise .5s var(--ease) both; }
.stage-panel h4 { font-size: var(--step-3); margin-bottom: 4px; }
.stage-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.stage-facts span { padding: 6px 12px; border-radius: 12px; background: rgba(255,255,255,.08); font-size: .98rem; }
.stage-says { font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.15; color: var(--honey-soft); margin: 4px 0 6px; }
.stage-side { display: grid; gap: 16px; align-content: start; }
.stage-side .panel h5 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--honey-soft); }
.stage-side ul { margin: 0; padding-left: 1.1em; }
.stage-side li { margin-bottom: .35em; font-size: 1.04rem; }
.words-meter { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 6px; }
.words-meter i { width: 9px; border-radius: 3px; background: var(--honey); opacity: .9; transition: height .6s var(--ease), opacity .6s; }
@media (max-width: 860px) { .stage-panel { grid-template-columns: 1fr; } }

/* ---------- COAT ---------- */
.coat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 18px 0; }
.coat div { padding: 16px 14px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid var(--panel-edge); }
.coat b { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--honey); display: block; }
.coat strong { display: block; font-weight: 500; margin: 6px 0 4px; }
.coat p { font-size: .98rem; margin: 0; color: var(--fg-soft); }
@media (max-width: 860px) { .coat { grid-template-columns: 1fr 1fr; } }

/* ---------- partner words ---------- */
.say-list { display: flex; flex-wrap: wrap; gap: 10px; }
.say { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 18px; border: 1px solid var(--panel-edge); background: rgba(255,255,255,.05); font-family: var(--serif); font-size: 1.15rem; text-align: left; transition: background .3s, border-color .3s, transform .2s; }
.say:hover { border-color: color-mix(in srgb, var(--honey) 60%, transparent); }
.say .star { width: 18px; height: 18px; flex: none; opacity: .5; transition: opacity .3s, transform .3s; animation: none; }
.say[aria-pressed='true'] { background: color-mix(in srgb, var(--honey) 22%, transparent); border-color: var(--honey); }
.say[aria-pressed='true'] .star { opacity: 1; color: var(--honey); transform: scale(1.15); }
.swap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.swap s { color: var(--fg-soft); text-decoration-color: var(--rose); text-decoration-thickness: 2px; }
.swap .to { font-family: var(--serif); font-size: 1.15rem; }
.swap svg { width: 20px; height: 20px; color: var(--honey); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.checklist label { display: flex; gap: 12px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; cursor: pointer; transition: background .25s; }
.checklist label:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.checklist input { appearance: none; flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 7px; border: 1.5px solid color-mix(in srgb, var(--fg) 40%, transparent); display: grid; place-items: center; transition: background .25s, border-color .25s; cursor: pointer; }
.checklist input::after { content: ''; width: 10px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .25s var(--ease); color: var(--accent-ink); }
.checklist input:checked { background: var(--accent); border-color: var(--accent); }
.checklist input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.checklist input:checked + span { color: var(--fg-soft); }
.add-row { display: flex; gap: 8px; margin-top: 12px; }
.field { flex: 1; min-width: 0; padding: 11px 16px; border-radius: 14px; border: 1px solid var(--panel-edge); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.field::placeholder { color: var(--fg-soft); opacity: .8; }
textarea.field { resize: vertical; min-height: 84px; line-height: 1.45; width: 100%; }

/* ---------- BRAIN ---------- */
.brain-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 16px 0; }
.brain-steps button { border: 1px solid var(--panel-edge); background: rgba(255,255,255,.05); border-radius: 16px; padding: 10px 4px; display: grid; justify-items: center; gap: 2px; font-size: .9rem; color: var(--fg-soft); transition: background .3s, color .3s; }
.brain-steps button b { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--fg); }
.brain-steps button[aria-selected='true'] { background: var(--honey); color: #2a1426; border-color: var(--honey); }
.brain-steps button[aria-selected='true'] b { color: #2a1426; }
.brain-steps button.done:not([aria-selected='true']) b { color: var(--honey); }
.brain-q { font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; margin: 6px 0 10px; }
.brain-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 12px; flex-wrap: wrap; }
.saved-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.saved-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.05); font-size: 1rem; }
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .18em; color: inherit; font-size: inherit; }
.interval { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.06); margin-top: 8px; }
.interval .mini-orb { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fff1d1, var(--honey)); transform: scale(.6); transition: transform 4s cubic-bezier(.37,0,.63,1); flex: none; }

/* ---------- preferences ---------- */
.prefs { display: grid; gap: 22px; }
.pref-group h4 { font-size: 1.3rem; margin-bottom: 10px; color: var(--honey-soft); }
.sky[data-tone='light'] .pref-group h4 { color: var(--berry); }
.pref-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- birth/night ---------- */
.candle { width: 70px; margin-bottom: 18px; }
.flame { transform-origin: 50% 100%; animation: flicker 3s ease-in-out infinite; transform-box: fill-box; }
@keyframes flicker { 20% { transform: scaleY(1.06) skewX(2deg); } 40% { transform: scaleY(.95) skewX(-2deg); } 60% { transform: scaleY(1.04); } 80% { transform: scaleY(.98) skewX(1deg); } }
.options-list { display: grid; gap: 10px; margin: 1em 0; padding: 0; list-style: none; }
.options-list li { padding: 12px 16px; border-radius: 16px; border: 1px solid var(--panel-edge); font-size: 1.04rem; }
.options-list b { font-weight: 500; color: var(--honey-soft); }

/* ---------- dawn: door sign, clouds, feeding ---------- */
.door { display: grid; grid-template-columns: 1fr minmax(0, 330px); gap: 28px; align-items: start; }
@media (max-width: 800px) { .door { grid-template-columns: 1fr; } }
.door-sign { position: relative; background: #fff8f0; color: var(--ink); border-radius: 26px 26px 34px 34px; padding: 70px 26px 28px; box-shadow: 0 30px 50px -30px rgba(90, 40, 60, .45); text-align: center; transform-origin: 50% 0; animation: swing 6s ease-in-out infinite; border: 1px solid #f0d8c6; }
@keyframes swing { 50% { transform: rotate(1.6deg); } }
.door-sign::before { content: ''; position: absolute; top: 18px; left: 50%; width: 64px; height: 64px; translate: -50% 0; border-radius: 50%; background: var(--dawn); border: 1px solid #ecd2c0; box-shadow: inset 0 3px 6px rgba(90,40,60,.15); }
.door-sign h4 { font-size: 1.6rem; margin: 10px 0 8px; }
.door-sign ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: 1.02rem; }
.door-sign li::before { content: '\2740'; color: var(--berry); margin-right: 8px; font-size: .9em; }
.door-sign .sig { margin-top: 14px; font-family: var(--serif); color: var(--berry); }

.cloud-sky { position: relative; height: 300px; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, #a9c4dd 0%, #f2c6b6 70%, #fbdccb 100%); margin-bottom: 14px; }
.cloud { position: absolute; left: 0; padding: 22px 34px; color: #5a3a4f; font-family: var(--serif); font-size: 1.05rem; max-width: 280px; text-align: center; line-height: 1.3; animation: cloud-drift linear forwards; will-change: transform; filter: drop-shadow(0 6px 10px rgba(120, 80, 100, .12)); }
.cloud::before { content: ''; position: absolute; inset: 0; background: #fffaf6; border-radius: 999px; z-index: -1; box-shadow: 30px -18px 0 -4px #fffaf6, -24px -12px 0 -8px #fffaf6, 6px -26px 0 -2px #fffaf6; opacity: .96; }
.cloud.ambient { color: transparent; padding: 14px 40px; opacity: .7; }
@keyframes cloud-drift { from { transform: translateX(-110%); } to { transform: translateX(var(--to, 900px)); opacity: .0; } }

.stomach svg { width: 100%; height: auto; }
.stomach .fruit { transition: transform .8s var(--ease), opacity .6s; transform-box: fill-box; transform-origin: 50% 100%; }
.stomach .ml { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.facts { position: relative; }
.fact-card { min-height: 320px; padding: clamp(20px, 3vw, 34px); border-radius: 30px; background: #fff8f2; border: 1px solid #f1d6c6; display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-content: start; animation: rise .45s var(--ease) both; }
.fact-card .n { font-family: var(--serif); font-size: clamp(3.5rem, 8vw, 5.5rem); line-height: .9; color: var(--berry); grid-row: span 3; }
.fact-card h4 { font-size: var(--step-2); }
.fact-card p { margin: 0 0 .6em; }
.fact-card .clips { margin-top: 4px; }
@media (max-width: 560px) { .fact-card { grid-template-columns: 1fr; } .fact-card .n { grid-row: auto; } }
.deck-nav { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.deck-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.deck-dots button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: .85rem; font-variant-numeric: tabular-nums; padding: 0; }
.deck-dots button[aria-current='true'] { background: var(--berry); color: #fff; border-color: var(--berry); }

/* ---------- meditation ---------- */
.medi { display: grid; justify-items: center; text-align: center; gap: 22px; padding: 30px 0; }
.medi-line { font-family: var(--serif); font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.25; max-width: 24ch; min-height: 3.8em; display: grid; place-items: center; transition: opacity 1.2s; text-wrap: balance; }
.medi-progress { width: min(360px, 80%); height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden; }
.medi-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1s linear; }

/* ---------- videos ---------- */
.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
@media (max-width: 860px) { .videos { grid-template-columns: 1fr; } }
.video { border-radius: 28px; overflow: hidden; background: #fff8f2; border: 1px solid #f1d6c6; display: grid; grid-template-rows: auto 1fr; }
.video-thumb { position: relative; display: block; border: 0; padding: 0; background: #000; }
.video-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .92; transition: opacity .3s, transform .6s var(--ease); }
.video-thumb:hover img { opacity: 1; transform: scale(1.02); }
.video-thumb .play-big { position: absolute; left: 18px; bottom: 18px; width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 248, 240, .92); color: var(--berry); display: grid; place-items: center; }
.video-thumb .play-big svg { width: 20px; height: 20px; margin-left: 3px; }
.video-thumb .dur { position: absolute; right: 14px; bottom: 14px; background: rgba(34, 19, 38, .8); color: #fff; padding: 3px 9px; border-radius: 8px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.video-body { padding: 22px 24px 26px; }
.video-body h3 { font-size: var(--step-2); margin-bottom: 8px; }
.video-body > p { color: var(--fg-soft); font-size: 1.04rem; }
.chapters { list-style: none; margin: 14px 0 0; padding: 0; max-height: 340px; overflow-y: auto; border-top: 1px solid var(--line); scrollbar-width: thin; }
.chapters li { border-bottom: 1px solid var(--line); }
.chapters button { width: 100%; display: grid; grid-template-columns: 68px 1fr; gap: 10px; padding: 9px 4px; border: 0; background: none; text-align: left; font-size: 1.02rem; line-height: 1.3; transition: background .2s, color .2s; }
.chapters button:hover { background: color-mix(in srgb, var(--berry) 8%, transparent); color: var(--berry-deep); }
.chapters .t { font-variant-numeric: tabular-nums; color: var(--berry); }
.yt-only { font-size: .92rem; color: var(--fg-soft); display: flex; align-items: center; gap: 6px; margin-top: 10px; }

/* ---------- research ---------- */
.research { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px 28px; }
.nugget { padding: 18px 0 4px; border-top: 2px solid var(--berry); }
.nugget h4 { font-size: 1.25rem; margin-bottom: 6px; }
.nugget p { font-size: 1.04rem; margin-bottom: .5em; }
.nugget .src { font-size: .92rem; color: var(--fg-soft); }
.nugget .src a { color: var(--berry-deep); }

/* ---------- help & footer ---------- */
.help { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; margin-top: 18px; }
.help div { padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.55); border: 1px solid #f0d4c3; }
.help b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; display: block; }
.help a { font-variant-numeric: tabular-nums; }
.footer { padding: 60px 0 140px; font-size: 1rem; color: var(--fg-soft); }
.footer p { max-width: 70ch; }

/* ---------- dock ---------- */
.dock { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(34, 19, 38, .88); color: var(--on-dark); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 40px -18px rgba(34, 19, 38, .6); }
.dock button { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 10px 14px; border-radius: 999px; font-size: .98rem; transition: background .25s; }
.dock button:hover { background: rgba(255,255,255,.1); }
.dock svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .dock { left: 16px; right: 16px; justify-content: space-around; } .dock button { flex-direction: column; gap: 2px; font-size: .78rem; padding: 6px 10px; } }

/* ---------- sheets (overlays) ---------- */
dialog.sheet { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--night); color: var(--on-dark); --fg: var(--on-dark); --fg-soft: var(--on-dark-soft); --line: rgba(251,234,223,.16); --panel: rgba(255,255,255,.06); --panel-edge: rgba(251,234,223,.14); --accent: var(--honey); --accent-ink: #2a1426; }
dialog.sheet[open] { animation: sheet-in .5s var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } }
dialog.sheet::backdrop { background: rgba(20, 10, 22, .6); }
.sheet-inner { min-height: 100%; display: grid; grid-template-rows: auto 1fr; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gutter); position: sticky; top: 0; background: var(--night); z-index: 2; }
.sheet-head h2 { font-size: var(--step-2); }
.sheet-body { padding: 10px var(--gutter) 60px; width: min(1000px, 100%); margin: 0 auto; }

/* timer */
.timer-main { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 10px 0 24px; }
.timer-btn { position: relative; width: min(260px, 64vw); aspect-ratio: 1; border-radius: 50%; border: 0; background: radial-gradient(circle at 40% 36%, #fff0d2, var(--honey) 62%, #d9803d); color: #2a1426; font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; padding: 30px; box-shadow: 0 0 0 14px rgba(240, 168, 69, .1), 0 0 70px 6px rgba(240, 168, 69, .25); transition: transform .3s var(--ease); }
.timer-btn:active { transform: scale(.97); }
.timer-btn.live { background: radial-gradient(circle at 40% 36%, #ffd9df, var(--rose) 60%, #c2566e); }
.timer-btn small { display: block; font-family: var(--sans); font-size: 1rem; margin-top: 4px; opacity: .8; }
.timer-elapsed { font-family: var(--serif); font-size: clamp(3rem, 10vw, 4.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.timer-wave { width: 100%; max-width: 560px; height: 90px; }
.timer-guide { font-family: var(--serif); font-size: 1.5rem; min-height: 1.5em; color: var(--honey-soft); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 18px; }
.stats div { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.06); text-align: center; }
.stats b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.stats span { font-size: .92rem; color: var(--fg-soft); }
.history { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 1rem; }
.history th, .history td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.history th { font-weight: 500; color: var(--fg-soft); }
.rate-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.timer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.confirm-inline { display: none; gap: 8px; align-items: center; }
.confirm-inline.show { display: inline-flex; }
.waters-form { display: grid; gap: 12px; padding: 18px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid var(--panel-edge); margin: 14px 0; }
.waters-form label { display: grid; gap: 6px; font-size: 1rem; }
.waters-form .chip-row { gap: 6px; }

/* words sheet */
.words-show { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.words-show p { font-family: var(--serif); font-size: clamp(2.4rem, 8vw, 5rem); line-height: 1.1; max-width: 16ch; text-wrap: balance; animation: rise .6s var(--ease) both; margin: 0; }

/* video player sheet */
dialog.player { width: min(1000px, 94vw); max-width: none; padding: 0; border: 0; border-radius: 22px; background: var(--night); color: var(--on-dark); overflow: hidden; }
dialog.player::backdrop { background: rgba(20, 10, 22, .78); backdrop-filter: blur(4px); }
.player-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; }
.player-head p { margin: 0; font-family: var(--serif); font-size: 1.1rem; }
.player-frame { aspect-ratio: 16/9; width: 100%; background: #000; }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-foot { padding: 10px 20px 16px; font-size: .95rem; color: var(--on-dark-soft); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* chime overlay */
.chime-veil { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(34, 19, 38, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--on-dark); text-align: center; opacity: 0; pointer-events: none; transition: opacity 1.2s; }
.chime-veil.show { opacity: 1; pointer-events: auto; }
.chime-veil p { font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 3rem); max-width: 18ch; line-height: 1.2; }

.toast { position: fixed; left: 50%; bottom: 96px; translate: -50% 0; z-index: 70; background: var(--night); color: var(--on-dark); padding: 10px 18px; border-radius: 999px; font-size: 1rem; opacity: 0; transition: opacity .4s, transform .4s; pointer-events: none; transform: translateY(8px); }
.toast.show { opacity: 1; transform: none; }

/* print */
.print-only { display: none; }
@media print {
  body { background: #fff; color: #000; }
  body > *:not(.print-only) { display: none !important; }
  .print-only { display: block !important; font-family: var(--sans); font-size: 12pt; line-height: 1.45; padding: 0; }
  .print-only h1 { font-family: var(--serif); font-size: 24pt; margin-bottom: 4pt; }
  .print-only h2 { font-family: var(--serif); font-size: 14pt; margin: 14pt 0 4pt; }
  .print-only ul { margin: 0; padding-left: 14pt; }
  .print-only .door-sign { animation: none; box-shadow: none; border: 2px solid #c9a; max-width: 9cm; margin: 0 auto; }
}

/* ---------- research: where the videos and evidence differ ---------- */
.diffs { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--line); }
.diff { display: grid; grid-template-columns: 220px 1fr 1.4fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start; }
.diff h4 { font-size: 1.2rem; margin: 0; }
.diff p { margin: 0; font-size: 1.04rem; }
.diff p span { display: block; font-size: .88rem; color: var(--fg-soft); margin-bottom: 2px; }
.said-video { color: var(--fg-soft); font-style: italic; }
.said-video span { font-style: normal; }
.said-evidence a { color: var(--berry-deep); }
@media (max-width: 860px) { .diff { grid-template-columns: 1fr; gap: 8px; } }

/* page-load moment: the sun rises */
.hero-sky { animation: sunrise 2.6s var(--ease) both; }
.hero-grid > div:first-child { animation: rise 1.4s var(--ease) .5s both; }
@keyframes sunrise { from { opacity: 0; transform: translateY(70px); } }

@media (max-width: 700px) {
  .interlude { align-items: start; padding-top: 72px; }
  .interlude .words { margin-top: 0 !important; }
}
#mangoScene { pointer-events: none; }
#mangoScene .mango-btn { pointer-events: auto; }
.to-gold .words { z-index: 1; }
.interlude .words-left { justify-self: start; text-align: left; max-width: min(30rem, 100%); margin-left: max(0px, calc((100vw - 1180px) / 2)); }
.interlude .words-left .clips { justify-content: flex-start; }
.sky[data-tone='light'] .options-list b { color: var(--berry); }
.interlude .words { max-width: min(38rem, 100%); }
.to-dusk .words { margin-bottom: 24vh; }
.to-night .words { margin-bottom: 20vh; }
.to-dawn .words { color: #fff7f0; text-shadow: 0 1px 18px rgba(90, 40, 70, .35); }
.to-dawn .clip { --fg: #fff7f0; --fg-soft: #fbe3d8; --line: rgba(255,247,240,.35); --accent: #fff7f0; --accent-ink: #8a4a63; }
.hero-cue, .breath-cue { text-wrap: balance; }

/* ---------- how labour works: the animations ---------- */
.sky-lab { background: radial-gradient(120% 60% at 50% 0%, #2b1733 0%, #1a0f20 60%) #1a0f20; }
.sky-lab .chapter-time { color: var(--honey); }
.lab-index { display: flex; flex-wrap: wrap; gap: 8px; margin: calc(-1 * clamp(24px, 4vw, 56px)) 0 clamp(24px, 4vw, 40px); }
.lab-index a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: 1rem; transition: background .25s, border-color .25s; }
.lab-index a:hover { background: rgba(255,255,255,.06); border-color: color-mix(in srgb, var(--honey) 50%, transparent); }
.lab-index b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--honey); color: #2a1426; font-family: var(--serif); font-weight: 400; font-size: .9rem; }
.lab { padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.lab:first-of-type { border-top: 0; padding-top: 8px; }
.lab-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px clamp(14px, 2.4vw, 26px); align-items: start; margin-bottom: 22px; }
.lab-n { font-family: var(--serif); font-size: clamp(3rem, 7vw, 4.6rem); line-height: .85; color: var(--honey); }
.lab-head h3 { margin-bottom: .3em; }
.lab-head p { color: var(--fg-soft); max-width: 66ch; margin: 0; }
.lab-stage { padding: clamp(14px, 2.4vw, 28px); background: rgba(255,255,255,.035); }
.lab-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 14px; }
.lab-bar .chip-row { gap: 6px; }
.lab-bar .chip { font-size: .95rem; padding: 6px 12px; }
.lab-bar .btn svg { width: 14px; height: 14px; }
.lab-group { display: grid; gap: 6px; }
.lab-group > span { font-size: .85rem; color: var(--fg-soft); letter-spacing: .02em; }
.lab-svg { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.lab-svg text { fill: var(--on-dark-soft); font-family: var(--sans); font-size: 14px; }
.lab-svg .lab-tl { fill: var(--on-dark); font-size: 15px; }
.lab-svg .lab-tick { font-size: 13px; }
.lab-svg .lab-strong { fill: var(--on-dark); }
.lab-axis { stroke: rgba(251, 234, 223, .16); stroke-width: 1; }
.sq-xh { stroke: var(--on-dark); stroke-width: 1; }
.sq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(10px, 3vw, 36px); align-items: start; }
.lab-read { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.lab-read div { padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.05); font-size: .92rem; color: var(--fg-soft); line-height: 1.3; }
.lab-read b { display: block; font-weight: 500; color: var(--fg); font-size: 1.05rem; margin-top: 3px; }
.lab-read b.warn { color: #ffab9c; }
.lab-say { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.42; min-height: 4.4em; margin: 16px 0 0; max-width: 66ch; text-wrap: pretty; }
.lab-day { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 8px 32px; }
.lab-day h4 { font-size: 1.25rem; color: var(--honey-soft); }
.lab-day ul { margin: 0; padding-left: 1.1em; display: grid; gap: .45em; max-width: 72ch; }
.lab-day li::marker { color: var(--honey); }
.lab-day .src { grid-column: 2; font-size: .92rem; color: var(--fg-soft); margin: 4px 0 0; }
.lab-meters { display: grid; gap: 9px; }
.lab-meter { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr) 4.6rem; align-items: center; gap: 10px; font-size: .98rem; }
.lab-meter .bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.lab-meter .fill { height: 100%; width: 0; border-radius: 99px; }
.lab-meter em { font-style: normal; color: var(--fg-soft); font-size: .9rem; text-align: right; }
.lab-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.lab-fix { font-size: .98rem; color: var(--fg-soft); margin: 2px 0 0; min-height: 1.5em; }
.lab-fix b { color: var(--fg); font-weight: 500; }
@media (max-width: 860px) {
  .sq-grid { grid-template-columns: 1fr; }
  .lab-read { grid-template-columns: 1fr 1fr; }
  .lab-day { grid-template-columns: 1fr; }
  .lab-day .src { grid-column: 1; }
}
.loop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 3vw, 36px); align-items: start; }
.loop-side { display: grid; gap: 16px; align-content: start; }
.lp-tr { width: 100%; height: 70px; display: block; }
.lp-legend { margin: 6px 0 0; }
@media (max-width: 860px) { .loop-grid { grid-template-columns: 1fr; } .loop-grid > svg { max-width: 460px; justify-self: center; } }
.tl-now { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 14px 28px; align-items: center; margin: 4px 0 18px; }
.tl-k { font-size: .9rem; color: var(--fg-soft); }
.tl-title h4 { font-size: var(--step-2); margin: 2px 0 0; }
.tl-dash { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; }
.tl-dash > div { padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.05); display: grid; gap: 4px; align-content: start; font-size: .9rem; color: var(--fg-soft); }
.tl-dash b { font-weight: 500; color: var(--fg); font-size: 1rem; line-height: 1.3; }
.tl-dash small { font-size: .8rem; }
.tl-wave { width: 100%; height: 40px; display: block; }
.tl-ring { width: 46px; height: 46px; }
.tl-hole { transition: r .6s var(--ease); }
.tl-words { height: 30px; margin: 4px 0 0; }
.tl-rows { display: grid; gap: 6px; position: relative; cursor: pointer; }
.tl-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 10rem; gap: 12px; align-items: center; }
.tl-name { font-size: 1rem; line-height: 1.15; }
.tl-name small { display: block; color: var(--fg-soft); font-size: .82rem; margin-left: 17px; }
.tl-plot { position: relative; height: 58px; }
.tl-plot svg { width: 100%; height: 100%; display: block; }
.tl-cur, .tl-ghost { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--on-dark); border-radius: 2px; pointer-events: none; }
.tl-ghost { background: rgba(251, 234, 223, .35); opacity: 0; transition: opacity .2s; }
.tl-word { font-size: .95rem; color: var(--fg); line-height: 1.2; }
.tl-phases { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 10px 0 0 calc(9.5rem + 12px); margin-right: calc(10rem + 12px); }
.tl-phases button { border: 0; background: transparent; color: var(--fg-soft); font-size: .78rem; line-height: 1.15; padding: 6px 2px; border-radius: 10px; display: grid; justify-items: center; gap: 3px; text-align: center; transition: background .25s, color .25s; }
.tl-phases button b { font-family: var(--serif); font-weight: 400; font-size: 1rem; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); }
.tl-phases button[aria-selected='true'] { color: var(--fg); }
.tl-phases button[aria-selected='true'] b { background: var(--honey); color: #2a1426; border-color: var(--honey); }
.tl-phases button:hover { background: rgba(255,255,255,.05); }
.tl-text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 26px; margin-top: 20px; }
.tl-text h5 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--honey-soft); }
.tl-text p { margin: 0; font-size: 1.04rem; animation: rise .5s var(--ease) both; }
.tl-table { margin-top: 18px; overflow-x: auto; }
.tl-table td, .tl-table th { font-size: .92rem; white-space: nowrap; }
@media (max-width: 860px) {
  .tl-now { grid-template-columns: 1fr; }
  .tl-dash { grid-template-columns: 1fr 1fr; }
  .tl-dash > div:first-child { grid-column: 1 / -1; }
  .tl-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .tl-name { grid-column: 1; grid-row: 1; }
  .tl-word { grid-column: 2; grid-row: 1; text-align: right; font-size: .88rem; }
  .tl-plot { grid-column: 1 / -1; grid-row: 2; height: 44px; }
  .tl-name small { display: inline; margin-left: 6px; }
  .tl-phases { margin: 10px 0 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tl-text { grid-template-columns: 1fr; }
}
.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 3vw, 36px); align-items: start; }
.pl-side { display: grid; gap: 10px; }
.pl-cap { margin: 0; font-family: var(--serif); font-size: 1.1rem; color: var(--honey-soft); }
.pl-zoom { max-width: 330px; justify-self: center; }
.pl-read { grid-template-columns: 1fr 1fr; margin-top: 4px; }
.pl-odds { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.pl-odds-h { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 12px; }
.pl-arrays { display: flex; flex-wrap: wrap; gap: 18px 40px; }
.pl-arrays > div { transition: opacity .4s; }
.pl-arrays > div.dim { opacity: .45; }
.pl-arrays p { margin: 8px 0 0; font-size: 1rem; color: var(--fg-soft); }
.pl-arrays b { color: var(--fg); font-weight: 500; }
.pl-dots { display: grid; grid-template-columns: repeat(10, 12px); gap: 4px; }
.pl-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(251,234,223,.14); }
.pl-dots i.on { background: #d6334a; }
@media (max-width: 860px) { .pl-grid { grid-template-columns: 1fr; } }
.milk-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(14px, 3vw, 36px); align-items: start; }
.mk-read { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .milk-grid { grid-template-columns: 1fr; } }
.lab-rh { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; font-size: .95rem; color: var(--fg-soft); }
.lab-rh .chip { font-size: .95rem; padding: 5px 12px; }

/* ---------- rehearse ---------- */
.sky-paper { background: linear-gradient(180deg, #fff1e6 0%, var(--paper) 40%); }
.sky-paper .chapter-time { color: var(--berry); }
.rh-how { list-style: none; counter-reset: rh; padding: 0; margin: 0 0 clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rh-how li { counter-increment: rh; padding: 16px 18px; border-radius: 20px; background: #fff; border: 1px solid #f1d6c6; font-size: 1rem; color: var(--fg-soft); line-height: 1.45; }
.rh-how li::before { content: counter(rh); display: block; font-family: var(--serif); font-size: 1.8rem; line-height: 1; color: var(--berry); margin-bottom: 8px; }
.rh-how b { display: block; color: var(--fg); font-weight: 500; font-size: 1.08rem; margin-bottom: 2px; }
.rh-top { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rh-progress p { margin: 0 0 6px; color: var(--fg-soft); }
.rh-progress b { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--berry); margin-right: 4px; }
.rh-bar { width: min(320px, 70vw); height: 8px; border-radius: 99px; background: rgba(58, 31, 51, .1); overflow: hidden; }
.rh-bar i { display: block; height: 100%; background: var(--berry); border-radius: 99px; transition: width .6s var(--ease); }
.rh-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rh-filters { margin: 4px 0 6px; }
.rh-group { margin-top: 34px; }
.rh-group h3 { font-size: var(--step-2); margin-bottom: 14px; }
.rh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.rh-card { text-align: left; display: grid; gap: 6px; align-content: start; padding: 18px 18px 16px; border-radius: 22px; border: 1px solid #f1d6c6; background: #fff; box-shadow: 0 12px 26px -22px rgba(90, 40, 60, .55); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.rh-card:hover { transform: translateY(-2px); border-color: var(--rose); box-shadow: 0 18px 32px -22px rgba(90, 40, 60, .6); }
.rh-meta { font-size: .86rem; color: var(--fg-soft); }
.rh-title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.rh-hook { font-size: 1rem; color: var(--fg-soft); line-height: 1.4; }
.rh-cast { display: flex; gap: 6px; align-items: center; margin-top: 6px; min-height: 20px; }
.rh-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.rh-dot.her { background: #e07a8f; }
.rh-dot.partner { background: var(--honey); }
.rh-dot.staff { background: #6fae94; }
.rh-tick { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: .88rem; color: var(--leaf); }
.rh-tick svg { width: 16px; height: 16px; }
.rh-card.done { border-color: color-mix(in srgb, var(--leaf) 40%, #f1d6c6); }

/* the rehearsal sheet */
.rh-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 24px; }
.rh-steps button { border: 0; background: rgba(255, 255, 255, .05); border-radius: 14px; padding: 10px 8px; display: flex; gap: 8px; align-items: center; justify-content: center; font-size: .95rem; color: var(--fg-soft); transition: background .25s, color .25s; }
.rh-steps b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font-family: var(--serif); font-weight: 400; flex: none; }
.rh-steps [aria-selected='true'] { background: var(--honey); color: #2a1426; }
.rh-steps [aria-selected='true'] b { border-color: rgba(42, 20, 38, .4); }
.rh-kicker { color: var(--honey-soft); font-size: .95rem; margin: 0 0 6px; }
.rh-scene { font-family: var(--serif); font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.32; max-width: 42ch; margin: 0 0 24px; text-wrap: pretty; }
.rh-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
.rh-box { padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid var(--panel-edge); margin-bottom: 14px; }
.rh-box h5 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 1.12rem; color: var(--honey-soft); }
.rh-box p, .rh-box li { font-size: 1.02rem; }
.rh-box p:last-child { margin-bottom: 0; }
.rh-box ul { margin: 0; padding-left: 1.1em; }
.rh-box li { margin-bottom: .35em; }
.rh-castlist { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.rh-castlist li { display: flex; gap: 8px; align-items: baseline; margin: 0; }
.rh-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; }
.rh-nav .btn svg, .rh-end .btn svg { width: 18px; height: 18px; }
.rh-lead { color: var(--fg-soft); margin-bottom: 18px; }
.rh-backs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 260px)); gap: 16px; }
.rh-back { aspect-ratio: 3 / 4; border-radius: 24px; border: 0; display: grid; align-content: end; gap: 6px; padding: 24px; text-align: left; color: #2a1426; position: relative; overflow: hidden; transition: transform .3s var(--ease); }
.rh-back::before { content: ''; position: absolute; inset: 12px; border-radius: 16px; border: 1.5px dashed rgba(42, 20, 38, .3); }
.rh-back:hover { transform: translateY(-4px) rotate(-.6deg); }
.rh-back.her { background: linear-gradient(160deg, #f8c2cb, #e07a8f); }
.rh-back.partner { background: linear-gradient(160deg, #f9d796, #f0a845); }
.rh-back.staff { background: linear-gradient(160deg, #b5e0cd, #6fae94); }
.rh-back-who { font-family: var(--serif); font-size: 1.6rem; position: relative; line-height: 1.1; }
.rh-back-plays { font-size: .95rem; position: relative; opacity: .8; }
@media (max-width: 600px) { .rh-back { aspect-ratio: auto; min-height: 120px; } .rh-backs { grid-template-columns: 1fr; } }
.rh-face { border-radius: 24px; padding: clamp(18px, 3vw, 28px); background: #fff7f0; color: var(--ink); border-top: 10px solid; animation: rise .4s var(--ease) both; max-width: 660px; }
.rh-face.her { border-color: #e07a8f; }
.rh-face.partner { border-color: var(--honey); }
.rh-face.staff { border-color: #6fae94; }
.rh-face-who { font-size: .92rem; color: var(--ink-soft); margin: 0 0 4px; }
.rh-face h4 { font-size: 1.55rem; color: var(--ink); }
.rh-aim { font-family: var(--serif); font-size: 1.15rem; line-height: 1.35; color: var(--berry); }
.rh-face ul { padding-left: 1.1em; margin: 0 0 12px; }
.rh-face li { margin-bottom: .45em; color: var(--ink); }
.rh-face li::marker { color: var(--berry); }
.rh-secret { background: #2a1426; color: var(--on-dark); border-radius: 16px; padding: 14px 16px 6px; margin: 14px 0; }
.rh-secret p { margin: 0 0 6px; font-size: .85rem; color: var(--honey-soft); letter-spacing: .03em; text-transform: uppercase; }
.rh-secret li { color: var(--on-dark); }
.rh-secret li::marker { color: var(--honey); }
.rh-face .btn-ghost { color: var(--ink); }
.rh-facing { text-align: center; padding: 8px 16px; border-radius: 999px; background: rgba(240, 168, 69, .14); color: var(--honey-soft); width: fit-content; max-width: 100%; margin: 0 auto 14px; font-size: .98rem; }
.rh-clock { text-align: center; padding: 18px 16px 22px; border-radius: 28px; background: rgba(255, 255, 255, .04); border: 1px solid var(--panel-edge); transition: background .8s; }
.rh-clock[data-state='wave'] { background: rgba(255, 115, 102, .13); }
.rh-clock[data-state='done'] { background: rgba(111, 174, 148, .14); }
.rh-wave { width: 100%; height: 110px; display: block; margin-bottom: 6px; }
.rh-state { font-family: var(--serif); font-size: clamp(1.8rem, 5.5vw, 3rem); margin: 0; line-height: 1.1; transition: color .5s; }
.rh-count { font-family: var(--serif); font-size: clamp(3rem, 12vw, 5.4rem); line-height: 1; margin: 6px 0; font-variant-numeric: tabular-nums; transition: color .5s; }
.rh-clock[data-state='wave'] .rh-state, .rh-clock[data-state='wave'] .rh-count { color: #ffa497; }
.rh-sub { color: var(--fg-soft); margin: 0; }
.rh-ring { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: 8px auto 20px; max-width: 420px; }
.rh-ring i { display: block; height: 100%; width: 0; background: var(--honey); border-radius: 99px; }
.rh-ctrl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; margin: 16px 0; }
.rh-rules { max-width: 62ch; margin: 0 auto 12px; color: var(--fg-soft); font-size: .98rem; }
.rh-curves { display: grid; gap: 10px; margin-top: 14px; }
.rh-cb { padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .05); border-left: 4px solid #6fae94; }
.rh-cb.fresh { animation: cb-in .9s var(--ease) both; }
@keyframes cb-in { from { opacity: 0; transform: translateY(-8px); } 30% { background: rgba(111, 174, 148, .28); } }
.rh-cb span { font-size: .82rem; color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.rh-cb p { margin: 2px 0 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; }
.rh-good { margin-top: 8px; }
.rh-score { font-family: var(--serif); font-size: 1.15rem; color: var(--honey-soft); margin: 10px 0 18px; }
.rh-lines { margin-top: 10px; }
.rh-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-top: 12px; }
.rh-tip { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--panel-edge); }
.rh-tip.drawn { border-color: rgba(111, 174, 148, .6); background: rgba(111, 174, 148, .08); }
.rh-tip .q { margin: 0 0 6px; color: var(--fg-soft); font-size: .98rem; }
.rh-tip .q span { display: inline-block; font-size: .75rem; padding: 1px 8px; border-radius: 99px; background: #6fae94; color: #12241c; margin-left: 4px; vertical-align: 1px; }
.rh-tip .a { margin: 0; font-size: 1.04rem; }
.rh-facts { display: grid; gap: 10px; max-width: 74ch; margin-top: 10px; }
.rh-facts > div { font-size: 1rem; color: var(--fg-soft); }
.rh-facts a { color: var(--honey-soft); }
.rh-facts .note { margin: 0; color: var(--fg); }
.rh-end { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
#rhNote { margin-top: 8px; }
.rh-quick { max-width: 760px; margin: 5vh auto 0; text-align: center; display: grid; gap: 12px; justify-items: center; }
.rh-q { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.25; margin: 0; text-wrap: balance; }
.rh-a { padding: 16px 20px; border-radius: 18px; background: rgba(111, 174, 148, .12); border: 1px solid rgba(111, 174, 148, .4); font-size: 1.15rem; animation: rise .4s var(--ease) both; }
.rh-a p { margin: 0 0 8px; }
.rh-quick .rh-end { justify-content: center; }
@media (max-width: 860px) {
  .rh-how { grid-template-columns: 1fr 1fr; }
  .rh-two { grid-template-columns: 1fr; }
  .lab-rh { grid-column: 1; }
}
@media (max-width: 600px) {
  .rh-how { grid-template-columns: 1fr; }
  .rh-steps button { flex-direction: column; gap: 3px; font-size: .78rem; padding: 8px 4px; }
}
@media (max-width: 600px) {
  .lab-svg text { font-size: 18px; }
  .lab-svg .lab-tl { font-size: 18px; }
  .lab-svg .lab-tick { font-size: 16px; }
}

/* ---------- brush up: the cheatsheet ---------- */
.topic[id], .cs-group { scroll-margin-top: 70px; }
.cs-glance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; margin-bottom: clamp(36px, 5vw, 56px); }
.cs-side { display: grid; gap: 16px; align-content: start; }
.cs-panel { padding: clamp(18px, 2.6vw, 26px); border-radius: 26px; background: #fff8f2; border: 1px solid #f1d6c6; }
.cs-panel h3 { font-size: var(--step-1); margin-bottom: 14px; }
.cs-numbers dl { margin: 0; display: grid; gap: 0; }
.cs-numbers dl div { display: grid; grid-template-columns: 8.2rem 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); align-items: baseline; }
.cs-numbers dl div:first-child { border-top: 0; padding-top: 0; }
.cs-numbers dt { font-family: var(--serif); font-size: 1.22rem; line-height: 1.15; color: var(--berry); font-variant-numeric: lining-nums; }
.cs-numbers dd { margin: 0; font-size: 1rem; line-height: 1.45; }
.cs-aids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs-aid { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--honey) 12%, #fff); text-decoration: none; transition: background .25s; }
.cs-aid:hover { background: color-mix(in srgb, var(--honey) 22%, #fff); }
.cs-aid-name { font-family: var(--serif); font-size: 1.25rem; line-height: 1.1; }
.cs-letters { display: grid; gap: 2px; }
.cs-letters span { font-size: .98rem; line-height: 1.35; }
.cs-letters b { display: inline-block; width: 1.3em; font-family: var(--serif); font-weight: 400; color: var(--berry); }
.cs-aid-note { font-size: .88rem; line-height: 1.4; color: var(--fg-soft); }
.cs-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cs-lines li { font-family: var(--serif); font-size: 1.08rem; line-height: 1.35; padding-left: 14px; border-left: 2px solid var(--honey); }
.cs-lines span { display: block; color: var(--berry); margin-top: 2px; }
.cs-bar { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; position: sticky; top: 60px; z-index: 5; padding: 12px 0; background: color-mix(in srgb, var(--morning) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cs-tools { display: flex; gap: 10px; align-items: center; flex: 1 1 280px; justify-content: flex-end; }
.cs-tools .field { flex: 1 1 auto; min-width: 0; max-width: 320px; padding: 9px 16px; }
.cs-count { margin: 4px 0 0; }
.cs-group { margin-top: clamp(32px, 4vw, 48px); }
.cs-group-head { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 2px solid var(--berry); }
.cs-group-head img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.cs-group-head h3 { font-size: var(--step-2); margin: 0 0 2px; }
.cs-group-head p { margin: 0; }
.cs-grid { list-style: none; padding: 0; margin: 0; columns: 3 300px; column-gap: 12px; }
.cs-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 14px; margin-bottom: 12px; border-radius: 20px; background: #fff; border: 1px solid #f1d6c6; break-inside: avoid; }
.cs-card h4 { font-size: 1.2rem; margin: 0; }
.cs-card > p { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.cs-ev { font-size: .95rem !important; line-height: 1.45 !important; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--leaf) 11%, transparent); border: 1px solid color-mix(in srgb, var(--leaf) 26%, transparent); }
.cs-ev span { display: block; font-size: .8rem; color: var(--leaf); font-weight: 700; letter-spacing: .02em; }
.cs-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding-top: 6px; }
.cs-foot .clip { font-size: .9rem; padding: 4px 11px 4px 5px; }
.cs-foot .clip .play { width: 22px; height: 22px; }
.cs-go { display: inline-flex; align-items: center; gap: 4px; font-size: .92rem; color: var(--berry-deep); text-decoration: none; }
.cs-go:hover { text-decoration: underline; }
.cs-go svg { width: 15px; height: 15px; }
.cs-none { margin-top: 24px; }
@media (max-width: 960px) { .cs-glance { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .cs-aids { grid-template-columns: 1fr; }
  .cs-numbers dl div { grid-template-columns: 1fr; gap: 2px; }
  .cs-group-head { grid-template-columns: 72px minmax(0, 1fr); }
  .cs-group-head img { width: 72px; }
  .cs-group-head .btn { grid-column: 1 / -1; justify-self: start; }
  .cs-tools .field { max-width: none; }
  .cs-bar { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cs-bar .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); width: calc(100% + 2 * var(--gutter)); }
  .cs-bar .chip-row::-webkit-scrollbar { display: none; }
  .cs-bar .chip { white-space: nowrap; flex: none; }
}

/* ---------- brush up: the quiz ---------- */
.qz { max-width: 820px; background: #fff8f2; border-color: #f1d6c6; }
.qz-label { font-family: var(--serif); font-size: var(--step-1); margin: 0 0 10px; }
.qz-setup { display: grid; gap: 26px; }
.qz-go { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.qz-go p { flex-basis: 100%; margin: 4px 0 0; }
.qz-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qz-top p { margin: 0; }
.qz-score { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--berry); }
.qz-bar { width: 100%; margin: 8px 0 22px; }
.qz-q { font-size: clamp(1.45rem, 3vw, 1.95rem); line-height: 1.25; margin-bottom: 20px; text-wrap: balance; outline: none; }
.qz-options { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.qz-opt { width: 100%; display: flex; gap: 14px; align-items: center; text-align: left; padding: 13px 16px; border-radius: 18px; border: 1.5px solid #f1d6c6; background: #fff; font-size: 1.06rem; line-height: 1.4; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.qz-opt:not(:disabled):hover { border-color: var(--rose); transform: translateX(3px); }
.qz-opt:disabled { cursor: default; opacity: .62; }
.qz-key { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1rem; background: color-mix(in srgb, var(--honey) 22%, #fff); }
.qz-opt.right { opacity: 1; border-color: var(--leaf); background: color-mix(in srgb, var(--leaf) 12%, #fff); }
.qz-opt.right .qz-key { background: var(--leaf); color: #fff; }
.qz-opt.wrong { opacity: 1; border-color: var(--berry); background: color-mix(in srgb, var(--berry) 9%, #fff); }
.qz-opt.wrong .qz-key { background: var(--berry); color: #fff; }
.qz-why { margin-top: 18px; padding: 16px 18px; border-radius: 18px; animation: rise .4s var(--ease) both; }
.qz-why.ok { background: color-mix(in srgb, var(--leaf) 11%, transparent); border: 1px solid color-mix(in srgb, var(--leaf) 30%, transparent); }
.qz-why.no { background: color-mix(in srgb, var(--berry) 7%, transparent); border: 1px solid color-mix(in srgb, var(--berry) 26%, transparent); }
.qz-why p { margin: 0 0 6px; }
.qz-why .clips { margin-top: 10px; align-items: center; }
.qz-verdict { font-family: var(--serif); font-size: 1.2rem; }
.qz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.qz-nav .btn svg { width: 18px; height: 18px; }
.qz-end { text-align: left; }
.qz-big { font-family: var(--serif); font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; margin: 0 0 10px; }
.qz-big b { font-weight: 400; font-size: 1.8em; color: var(--berry); }
.qz-msg { font-size: var(--step-1); line-height: 1.4; margin-bottom: 18px; }
.qz-end h4 { margin-top: 30px; }
.qz-review { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.qz-review li { padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid #f1d6c6; }
.qz-review p { margin: 0 0 6px; font-size: 1.02rem; }
.qz-review .clips { margin-top: 8px; align-items: center; }
.qz-rq { color: var(--fg-soft); }

@media print {
  .print-only .cs-print { font-size: 9.5pt; line-height: 1.35; }
  .print-only .cs-print h1 { font-size: 18pt; }
  .print-only .cs-print h2 { font-size: 12pt; margin: 10pt 0 3pt; break-after: avoid; }
  .print-only .cs-print ul { columns: 2; column-gap: 18pt; }
  .print-only .cs-print li { break-inside: avoid; margin-bottom: 3pt; }
  .print-only .cs-print em { color: #3f6b3f; }
}