:root {
  color-scheme: light;
  --ink: oklch(29% 0.055 224);
  --ink-soft: oklch(43% 0.038 220);
  --muted: oklch(48% 0.025 220);
  --line: oklch(83% 0.022 215);
  --paper: oklch(97.5% 0.012 83);
  --paper-deep: oklch(93.5% 0.021 82);
  --sea-pale: oklch(92.5% 0.037 190);
  --sea-soft: oklch(84% 0.065 204);
  --sea: oklch(58% 0.09 216);
  --sea-deep: oklch(39% 0.075 222);
  --coral-pale: oklch(91% 0.055 34);
  --coral: oklch(65% 0.145 33);
  --sand: oklch(82% 0.095 79);
  --success: oklch(49% 0.095 154);
  --warning: oklch(55% 0.13 65);
  --danger: oklch(52% 0.17 28);
  --font-display: "LXGW WenKai", "STKaiti", serif;
  --font-body: "Noto Sans SC", "PingFang SC", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 2rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.35rem;
  --shadow-sm: 0 0.18rem 0.75rem oklch(29% 0.055 224 / 0.055);
  --shadow-md: 0 1rem 3rem oklch(29% 0.055 224 / 0.085);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --z-sticky: 20;
  --z-sheet: 40;
  --z-toast: 50;
}

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

html { min-height: 100%; background: var(--sea-pale); }

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--sea-pale);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-kerning: normal;
  line-height: 1.5;
}

button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

button:focus { outline: none; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 0.1875rem solid var(--coral);
  outline-offset: 0.1875rem;
}

button:disabled { cursor: not-allowed; opacity: 0.56; }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.035em; }
p { max-width: 68ch; }
svg { width: 1.4em; height: 1.4em; flex: 0 0 auto; }

.skip-link {
  position: fixed;
  top: var(--space-sm);
  left: -10000px;
  z-index: calc(var(--z-toast) + 1);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--paper);
  background: var(--ink);
}
.keyboard-navigation .skip-link:focus { left: var(--space-sm); }

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

.page-horizon { display: none; }

.app-frame {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  min-height: 100svh;
  margin-inline: auto;
  background: var(--paper);
  box-shadow: var(--shadow-md);
}

.app-shell { position: relative; min-height: 100svh; overflow: clip; }
.screen-content { min-height: calc(100svh - 4.25rem); padding: var(--space-lg) var(--space-lg) 4rem; }
.screen-content:focus { outline: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr auto;
  align-items: center;
  gap: var(--space-md);
  min-height: 4.25rem;
  padding: max(var(--space-sm), env(safe-area-inset-top)) var(--space-lg) var(--space-sm);
  border-bottom: 1px solid color-mix(in oklch, var(--line) 72%, transparent);
  background: color-mix(in oklch, var(--paper) 94%, var(--sea-pale));
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 1.15rem;
  cursor: pointer;
}

.brand-mark__sun {
  position: relative;
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--coral);
}
.brand-mark__sun::after {
  content: "";
  position: absolute;
  inset: 54% -0.22rem auto;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--paper);
  transform: rotate(-5deg);
}

.journey-progress { height: 0.14rem; overflow: hidden; background: var(--line); }
.journey-progress span { display: block; width: 100%; height: 100%; background: var(--sea); transform-origin: left; transition: transform 300ms var(--ease-out); }
.sync-indicator { color: var(--muted); font-size: 0.65rem; white-space: nowrap; }
.sync-indicator::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-right: 0.3rem; border-radius: 50%; background: var(--sand); }
.sync-indicator.is-synced::before { background: var(--success); }

.mentor-nav {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.08rem;
  overflow: visible;
  border: 1px solid var(--sea-soft);
  border-radius: 50%;
  background: var(--sea-pale);
  cursor: pointer;
}
.mentor-nav .mentor-art--compact { width: 2.4rem; height: 2.4rem; }
.mentor-nav::after {
  content: "AI";
  position: absolute;
  right: -0.28rem;
  bottom: -0.08rem;
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 0.9rem;
  padding-inline: 0.2rem;
  border: 1px solid var(--paper);
  border-radius: 0.25rem;
  color: var(--paper);
  background: var(--sea-deep);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
}
.icon-button:active { transform: scale(0.94); }

.eyebrow {
  color: var(--sea-deep);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-heading { display: grid; gap: var(--space-sm); padding-top: var(--space-md); }
.section-heading h1 { max-width: 13ch; margin-top: var(--space-xs); font-size: 2.15rem; line-height: 1.28; }
.section-heading > p:last-child { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.7; }
.compact-heading h1 { font-size: 2rem; }

.form-stack { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.form-stack label:not(.check-row) { display: grid; gap: var(--space-xs); color: var(--ink-soft); font-size: var(--text-sm); font-weight: 600; }
.form-stack input {
  width: 100%;
  min-height: 3.5rem;
  padding: 0 var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: oklch(98.5% 0.01 83);
  font-size: var(--text-base);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.form-stack input::placeholder { color: oklch(57% 0.025 220); }
.form-stack input:focus { border-color: var(--sea); box-shadow: 0 0 0 0.25rem oklch(58% 0.09 216 / 0.12); outline: none; }

.inline-field { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xs); }
.code-button {
  min-width: 7rem;
  min-height: 3.5rem;
  border: 1px solid var(--sea-soft);
  border-radius: var(--radius-sm);
  color: var(--sea-deep);
  background: var(--sea-pale);
  cursor: pointer;
}

.check-row { display: grid; grid-template-columns: 1.3rem 1fr; align-items: start; gap: var(--space-sm); color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.6; }
.check-row { min-height: 2.75rem; align-items: center; }
.check-row input { width: 1.3rem; min-height: 1.3rem; margin: 0; accent-color: var(--sea-deep); }
.field-error, .demo-code {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--coral);
  border-radius: var(--radius-sm);
  color: var(--danger);
  background: var(--coral-pale);
  font-size: var(--text-sm);
}
.demo-code { border-color: var(--sand); color: var(--ink); background: oklch(94% 0.045 80); }

.primary-button, .secondary-button, .text-button, .splash-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 3.5rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.primary-button { width: 100%; padding: 0 var(--space-lg); border: 1px solid var(--ink); color: var(--paper); background: var(--ink); }
.secondary-button { width: 100%; padding: 0 var(--space-lg); border: 1px solid var(--sea); color: var(--sea-deep); background: transparent; }
.text-button { min-height: 2.75rem; padding: 0 var(--space-sm); border: 0; color: var(--sea-deep); background: transparent; text-decoration: underline; text-underline-offset: 0.25rem; }
.primary-button:active, .secondary-button:active, .text-button:active, .splash-enter:active { transform: scale(0.98); }
.quiet-note { color: var(--muted); font-size: var(--text-xs); text-align: center; }

/* Opening */
.screen-splash { background: var(--sea-pale); }
.splash-stage { position: relative; display: grid; align-content: space-between; min-height: 100svh; padding: max(1.5rem, env(safe-area-inset-top)) var(--space-lg) max(1.5rem, env(safe-area-inset-bottom)); overflow: hidden; }
.splash-brand { z-index: 2; display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-size: 1.2rem; animation: fade-down 650ms var(--ease-out) both; }
.splash-copy { z-index: 2; display: grid; gap: var(--space-md); padding-bottom: 20svh; }
.splash-copy h1 { max-width: 12ch; font-size: clamp(2.75rem, 13vw, 4rem); line-height: 1.22; animation: reveal-up 750ms 120ms var(--ease-out) both; }
.splash-copy p { color: var(--ink-soft); font-size: var(--text-sm); animation: reveal-up 750ms 240ms var(--ease-out) both; }
.splash-landscape { position: absolute; inset: auto 0 0; height: 43%; overflow: hidden; }
.splash-landscape .sun { position: absolute; right: 14%; bottom: 49%; width: 5.25rem; height: 5.25rem; border-radius: 50%; background: var(--coral); animation: sun-rise 1.2s 100ms var(--ease-out) both; }
.shore { position: absolute; left: -15%; width: 130%; height: 45%; border-radius: 50% 50% 0 0; transform: rotate(-4deg); }
.shore-a { bottom: -8%; background: var(--sea); animation: tide-in 1.1s var(--ease-out) both; }
.shore-b { bottom: -26%; background: var(--sea-deep); transform: rotate(4deg); animation: tide-in 1.2s 80ms var(--ease-out) both; }
.boat { position: absolute; right: 28%; bottom: 37%; width: 2.8rem; height: 0.55rem; border-radius: 0 0 2rem 2rem; background: var(--ink); animation: boat-float 3s var(--ease-in-out) infinite alternate; }
.boat::before { content: ""; position: absolute; bottom: 0.4rem; left: 1.1rem; width: 0.12rem; height: 2rem; background: var(--ink); }
.boat::after { content: ""; position: absolute; bottom: 0.7rem; left: 1.2rem; border-style: solid; border-width: 0.9rem 0 0.9rem 1.3rem; border-color: transparent transparent transparent var(--paper); }
.splash-footer { z-index: 3; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-sm); }
.splash-enter { grid-column: 1 / -1; justify-self: start; min-width: 13rem; padding: 0 var(--space-lg); border: 1px solid var(--paper); color: var(--paper); background: var(--sea-deep); animation: reveal-up 620ms 360ms var(--ease-out) both; }
.splash-timing { display: flex; align-items: center; gap: var(--space-xs); color: var(--sea-pale); font-size: var(--text-xs); }
.splash-timing i { position: relative; width: 2.5rem; height: 0.15rem; overflow: hidden; background: var(--sea); }
.splash-timing i::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform: scaleX(0); transform-origin: left; animation: splash-progress 3s linear both; }
.prototype-note { color: var(--sea-pale); font-size: var(--text-xs); text-align: right; }

/* Brand story */
.screen-story .screen-content { padding: 0; }
.story-layout { display: grid; min-height: calc(100svh - 5.5rem); }
.story-scene { position: relative; min-height: 42svh; overflow: hidden; background: var(--sea-pale); }
.story-sun { position: absolute; top: 17%; right: 15%; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--coral); }
.story-ground { position: absolute; inset: 57% -20% -15%; border-radius: 50% 50% 0 0; background: var(--sea-soft); transform: rotate(-3deg); }
.story-path { position: absolute; bottom: -2rem; left: 42%; width: 6rem; height: 16rem; border-radius: 50%; background: var(--paper-deep); transform: rotate(17deg); }
.story-person { position: absolute; bottom: 20%; left: 47%; z-index: 2; width: 1.1rem; height: 3.8rem; border-radius: 1rem 1rem 0 0; background: var(--ink); }
.story-person::before { content: ""; position: absolute; top: -0.9rem; left: 0.08rem; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--coral-pale); }
.story-scene--path .story-ground { background: var(--sand); }
.story-scene--routes .story-ground { background: oklch(82% 0.06 158); }
.story-scene--horizon .story-ground { background: var(--sea); }
.story-copy { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-xl) var(--space-lg) max(2rem, env(safe-area-inset-bottom)); }
.story-copy h1 { max-width: 14ch; margin-top: var(--space-sm); font-size: 2.2rem; line-height: 1.28; }
.story-copy > p:not(.eyebrow) { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.75; }
.story-copy .primary-button { margin-top: var(--space-lg); }
.story-count { display: flex; align-items: center; gap: var(--space-xs); color: var(--muted); font-size: var(--text-xs); }
.story-count i { width: 3rem; height: 1px; background: var(--line); }
.story-plate { position: absolute; top: var(--space-md); left: var(--space-lg); z-index: 5; padding: 0.25rem 0.4rem; color: var(--paper); background: var(--ink); font-size: var(--text-xs); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.story-horizon { position: absolute; left: -10%; top: 55%; width: 120%; height: 1px; background: var(--sea); transform: rotate(-2deg); }
.story-building { position: absolute; bottom: 0; background: var(--sea-deep); animation: reveal-up 700ms var(--ease-out) both; }
.story-building::before { content: ""; position: absolute; inset: 14% 18%; background: repeating-linear-gradient(90deg, var(--sand) 0 0.32rem, transparent 0.32rem 1rem); opacity: 0.8; }
.story-building--a { left: 8%; width: 32%; height: 43%; }
.story-building--b { right: 8%; width: 42%; height: 58%; animation-delay: 90ms; }
.story-window-light { position: absolute; right: 19%; bottom: 24%; width: 0.8rem; height: 0.8rem; background: var(--coral); box-shadow: 1.5rem -2.2rem 0 var(--sand), -1.4rem 1.5rem 0 var(--sand); animation: window-glow 2.6s var(--ease-in-out) infinite alternate; }
.story-scene--city .story-person { left: 47%; bottom: 7%; }

.story-marker { position: absolute; z-index: 3; padding: 0.25rem 0.45rem; border: 1px solid var(--ink); color: var(--ink); background: var(--paper); font-size: var(--text-xs); }
.story-marker--one { left: 13%; bottom: 18%; }
.story-marker--two { right: 12%; top: 22%; }
.story-scene--path .story-path { left: 44%; bottom: -5rem; height: 24rem; transform: rotate(28deg); }
.story-scene--path .story-person { left: 34%; bottom: 17%; }

.story-scene--routes { background: var(--paper-deep); }
.route-line { position: absolute; left: 18%; width: 68%; height: 1px; background: var(--sea); transform-origin: left; animation: route-draw 900ms var(--ease-out) both; }
.route-line--a { top: 30%; transform: rotate(15deg); }
.route-line--b { top: 52%; transform: rotate(-13deg); animation-delay: 80ms; }
.route-line--c { top: 70%; transform: rotate(7deg); animation-delay: 160ms; }
.route-node { position: absolute; z-index: 2; width: 1.25rem; height: 1.25rem; border: 0.25rem solid var(--paper-deep); border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.route-node--a { left: 16%; top: 27%; }.route-node--b { right: 19%; top: 43%; }.route-node--c { left: 22%; top: 62%; }.route-node--d { right: 11%; top: 74%; background: var(--sea-deep); box-shadow: 0 0 0 1px var(--sea-deep); }
.story-scene--routes .story-person { left: 49%; bottom: 7%; }

.story-scene--horizon { background: var(--sea-pale); }
.story-wave { position: absolute; left: -15%; width: 130%; height: 38%; border-radius: 50% 50% 0 0; }
.story-wave--a { bottom: -5%; background: var(--sea); transform: rotate(-4deg); }
.story-wave--b { bottom: -24%; background: var(--sea-deep); transform: rotate(4deg); }
.story-compass { position: absolute; right: 18%; top: 31%; z-index: 3; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--paper); font-family: var(--font-display); font-size: 1.5rem; }
.story-compass::before, .story-compass::after { content: ""; position: absolute; background: var(--ink); }
.story-compass::before { width: 1px; height: 6rem; }.story-compass::after { width: 6rem; height: 1px; }
.story-scene--horizon .story-person { left: 26%; bottom: 12%; }

/* Mentor */
.mentor-select-heading h1 { max-width: 13ch; }
.mentor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-xl); }
.mentor-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: oklch(98.2% 0.012 83);
  text-align: left;
  cursor: pointer;
  animation: reveal-up 520ms calc(var(--i) * 55ms) var(--ease-out) both;
}
.mentor-card:active { transform: scale(0.98); }
.mentor-card .mentor-art { align-self: end; justify-self: center; }
.mentor-card__copy { display: grid; gap: var(--space-2xs); padding: var(--space-sm); }
.mentor-card__copy strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; }
.mentor-card__copy small { color: var(--ink-soft); }
.ai-label { display: inline-flex; width: max-content; padding: 0.28rem 0.55rem; border: 1px solid var(--sea-soft); border-radius: 99px; color: var(--sea-deep); background: var(--sea-pale); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; }
.mentor-art { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--sea-pale); }
.mentor-photo { position: absolute; inset: -1px; background: url('/assets/mentor-grid.jpg') var(--mentor-position) / 300% 200% no-repeat; animation: mentor-breathe 3.2s var(--ease-in-out) infinite alternate; }
.mentor-art--card { width: 100%; height: auto; aspect-ratio: 1; }
.mentor-art--compact { width: 3rem; height: 3rem; border-radius: 50%; }
.mentor-art--hero { width: 13rem; height: 13rem; border-radius: 50% 50% 44% 44%; box-shadow: 0 0 0 0.4rem var(--paper); }
.mentor-art--preview { width: 10rem; height: auto; aspect-ratio: 1; background: transparent; }
.mentor-art--uncle .mentor-photo { animation: mentor-uncle 3.8s var(--ease-in-out) infinite alternate; }
.mentor-art--aunt .mentor-photo { animation: mentor-aunt 3.4s var(--ease-in-out) infinite alternate; }
.mentor-art--brother .mentor-photo { animation: mentor-brother 2.8s var(--ease-in-out) infinite alternate; }
.mentor-art--sister .mentor-photo { animation: mentor-sister 3s var(--ease-in-out) infinite alternate; }
.mentor-art--dog .mentor-photo { animation: mentor-dog 2.4s var(--ease-in-out) infinite alternate; }
.mentor-art--horse .mentor-photo { animation: mentor-horse 2.7s var(--ease-in-out) infinite alternate; }

.mentor-preview-hint { margin-top: var(--space-xl); padding: var(--space-sm) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: var(--text-sm); }
.mentor-preview { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-md); margin-top: var(--space-xl); padding: var(--space-md); overflow: hidden; border: 1px solid var(--sea-soft); background: var(--sea-pale); animation: preview-in 360ms var(--ease-out) both; }
.mentor-preview__stage { position: relative; display: grid; place-items: end center; align-self: center; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.mentor-preview__stage .mentor-art--preview { width: 100%; height: 100%; }
.motion-caption { position: absolute; left: var(--space-xs); bottom: var(--space-xs); z-index: 2; padding: 0.2rem 0.35rem; color: var(--paper); background: var(--ink); font-size: var(--text-xs); }
.mentor-preview__copy { display: grid; align-content: center; gap: var(--space-xs); }
.mentor-preview__copy h2 { margin-top: var(--space-xs); font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; }
.mentor-preview__copy blockquote { margin: var(--space-xs) 0; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.55; }
.mentor-preview__copy p { color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.55; }
.mentor-preview > .primary-button { grid-column: 1 / -1; }
.mentor-card.is-selected { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.mentor-card.is-selected::after { content: "已预览"; position: absolute; left: var(--space-xs); top: var(--space-xs); z-index: 3; padding: 0.2rem 0.35rem; color: var(--paper); background: var(--coral); font-size: var(--text-xs); font-weight: 700; }

.mentor-hero { display: grid; gap: var(--space-lg); padding-top: var(--space-lg); }
.mentor-hero__stage { position: relative; display: grid; place-items: center; min-height: 16rem; border-radius: 2rem; background: var(--sea-pale); overflow: hidden; }
.mentor-hero__copy { display: grid; gap: var(--space-md); }
.mentor-hero__copy h1 { max-width: 13ch; font-size: 2.2rem; line-height: 1.28; }
.mentor-hero__copy > p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.75; }
.action-stack { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }

.mentor-panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: var(--z-sheet);
  display: grid;
  gap: var(--space-lg);
  width: min(100%, 32rem);
  padding: var(--space-sm) var(--space-lg) max(1.5rem, env(safe-area-inset-bottom));
  border: 1px solid var(--line);
  border-radius: 1.75rem 1.75rem 0 0;
  background: var(--paper);
  box-shadow: 0 -1.5rem 4rem oklch(29% 0.055 224 / 0.14);
  transform: translateX(-50%);
  animation: sheet-in 380ms var(--ease-out) both;
}
.mentor-panel.is-closing { pointer-events: none; animation: sheet-out 220ms cubic-bezier(0.65, 0, 0.35, 1) both; }
.mentor-panel__handle { justify-self: center; width: 2.75rem; height: 0.25rem; border-radius: 1rem; background: var(--line); }
.mentor-panel__header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-sm); }
.mentor-panel__header h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; }
.mentor-actions { display: grid; gap: var(--space-xs); }
.mentor-actions button { min-height: 3.25rem; padding: 0 var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: oklch(98.2% 0.012 83); text-align: left; cursor: pointer; }
.rule-note { display: grid; gap: var(--space-sm); }
.rule-note p { color: var(--ink-soft); font-size: var(--text-sm); }

/* Assessment */
.scene-header { display: grid; gap: var(--space-sm); padding-top: var(--space-lg); }
.scene-header h1 { max-width: 11ch; font-size: 2.5rem; line-height: 1.2; }
.scene-header > p { color: var(--ink-soft); font-size: var(--text-sm); }
.scene-options { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.scene-choice { position: relative; display: grid; min-height: 16rem; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--sea-pale); text-align: left; cursor: pointer; }
.scene-choice--meetup { background: oklch(93% 0.035 76); }
.scene-choice__time { position: absolute; top: var(--space-md); left: var(--space-md); z-index: 2; font-size: var(--text-xs); font-weight: 700; }
.scene-illustration { display: block; width: 100%; height: 9.5rem; object-fit: cover; }
.scene-choice__copy { z-index: 2; display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-md); background: var(--paper); }
.scene-choice__copy small { color: var(--sea-deep); font-weight: 700; }
.scene-choice__copy strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; }
.scene-choice__copy span { color: var(--ink-soft); font-size: var(--text-xs); }
.pause-button { width: 100%; margin-top: var(--space-lg); }

/* Preference tiers */
.weights-heading h1 { max-width: 15ch; }
.tier-list { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.preference-tier { display: grid; gap: var(--space-sm); }
.preference-tier > header { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--line); }
.preference-tier > header > span { color: var(--sea); font-family: var(--font-display); }
.preference-tier h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; }
.preference-tier header small { color: var(--muted); }
.tier-dropzone { display: grid; gap: var(--space-xs); min-height: 3.5rem; }
.preference-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-sm); min-height: 4.5rem; padding: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-sm); background: oklch(98.5% 0.009 83); box-shadow: var(--shadow-sm); }
.preference-card .drag-handle { display: grid; place-items: center; color: var(--sea-soft); cursor: grab; }
.preference-card > div { display: grid; gap: 0.15rem; }
.preference-card strong { font-size: var(--text-sm); }
.preference-card small { color: var(--muted); font-size: 0.68rem; }
.preference-card select { width: 2.75rem; min-height: 2.75rem; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; color: transparent; background: var(--sea-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d6272' stroke-width='2'%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3C/svg%3E") center/1.2rem no-repeat; cursor: pointer; }
.sticky-error { position: sticky; bottom: 5.5rem; z-index: 2; margin-top: var(--space-lg); }
.bottom-action { position: sticky; bottom: 0; z-index: 3; padding: var(--space-lg) 0 max(1rem, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--paper) 22%); }

/* Calibration */
.calibration-topline { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--text-xs); }
.opportunity-lead { display: grid; gap: var(--space-xs); margin-top: var(--space-2xl); }
.demo-pill { display: inline-flex; width: max-content; padding: 0.28rem 0.6rem; border: 1px solid var(--sand); border-radius: 99px; color: var(--warning); background: oklch(94% 0.045 80); font-size: 0.65rem; font-weight: 700; }
.opportunity-lead h1 { max-width: 14ch; margin-top: var(--space-sm); font-size: 2.1rem; line-height: 1.25; }
.opportunity-lead h2 { font-size: var(--text-base); font-weight: 600; }
.opportunity-lead > p:last-child { margin-top: var(--space-sm); color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.75; }
.fact-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: var(--space-xl); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--line); }
.fact-item { display: grid; align-content: start; gap: var(--space-2xs); min-height: 8.3rem; padding: var(--space-sm); background: var(--paper); }
.fact-item span, .fact-item small { color: var(--muted); font-size: 0.62rem; }
.fact-item strong { margin-top: var(--space-xs); font-size: var(--text-sm); }
.fact-item--missing { background: oklch(96% 0.028 79); }
.theme-accordions { display: grid; margin-top: var(--space-xl); border-top: 1px solid var(--line); }
.theme-accordions details { border-bottom: 1px solid var(--line); }
.theme-accordions summary { display: flex; justify-content: space-between; align-items: center; min-height: 3.75rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.15rem; }
.theme-accordions summary::-webkit-details-marker { display: none; }
.theme-accordions summary span { color: var(--sea); font-family: var(--font-body); font-size: var(--text-xs); }
.theme-accordions details p { padding: 0 0 var(--space-lg); color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.75; }
.satisfaction-block { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--sea-pale); }
.satisfaction-block h2 { font-family: var(--font-display); font-size: 1.65rem; font-weight: 400; }
.binary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.binary-actions button { min-height: 3.25rem; border: 1px solid var(--sea-soft); border-radius: 99px; background: var(--paper); cursor: pointer; }
.binary-actions button.is-selected { color: var(--paper); background: var(--sea-deep); }
.reason-picker { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.reason-picker > p { color: var(--ink-soft); font-size: var(--text-sm); }
.reason-picker label { display: block; cursor: pointer; }
.reason-picker input { position: absolute; opacity: 0; }
.reason-picker label span { display: block; min-height: 2.8rem; padding: var(--space-sm) var(--space-md); border: 1px solid var(--line); border-radius: 99px; background: var(--paper); font-size: var(--text-sm); }
.reason-picker input:checked + span { border-color: var(--sea-deep); color: var(--sea-deep); background: var(--sea-pale); }

/* Matching */
.screen-matching { background: var(--sea-pale); }
.matching-layout { display: grid; gap: var(--space-xl); padding-top: var(--space-lg); }
.future-film { position: relative; min-height: 51svh; overflow: hidden; border-radius: 10rem 10rem 1.75rem 1.75rem; background: oklch(89% 0.055 195); box-shadow: var(--shadow-md); }
.future-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, oklch(20% 0.025 220 / 0.16)); pointer-events: none; }
.future-film img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.matching-copy { display: grid; gap: var(--space-sm); }
.matching-copy h1 { font-size: 2.35rem; line-height: 1.25; }
.matching-copy > p { color: var(--ink-soft); font-size: var(--text-sm); }
.matching-copy > small { color: var(--muted); font-size: var(--text-xs); }
.matching-status { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); font-size: var(--text-xs); }
.matching-status i { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--coral); animation: status-pulse 1.4s infinite; }

/* Results */
.explain-list { display: grid; gap: var(--space-sm); padding: 0; list-style: none; }
.explain-list li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-sm); color: var(--ink-soft); font-size: var(--text-sm); }
.explain-list li > svg { margin-top: 0.1rem; color: var(--sea); }
.explain-list li:nth-child(1) > svg { color: var(--success); }
.explain-list li:nth-child(3) > svg { color: var(--warning); }
.explain-list strong { color: var(--ink); }
.explain-step { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); color: var(--muted); font-size: var(--text-xs); }
.axis-explainer { display: grid; gap: 1px; margin-top: var(--space-sm); border: 1px solid var(--line); background: var(--line); }
.axis-explainer section { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--space-md); padding: var(--space-md); background: var(--paper); }
.axis-explainer section > span { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--coral); color: var(--coral); font-family: var(--font-display); }
.axis-explainer section:nth-child(2) > span { border-color: var(--sea); color: var(--sea-deep); }
.axis-explainer section > div { display: grid; gap: var(--space-2xs); }
.axis-explainer strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; }
.axis-explainer p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; }
.explain-actions { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-sm); }
.explain-actions .text-button { padding-inline: 0; font-size: var(--text-xs); white-space: nowrap; }
.dot { display: inline-block; width: 0.65rem; height: 0.65rem; margin-top: 0.35rem; border-radius: 50%; }
.dot--coral { background: var(--coral); }.dot--sea { background: var(--sea); }.dot--sand { background: var(--sand); }
.results-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-lg); }
.results-heading h1 { max-width: 11ch; margin-top: var(--space-xs); font-size: 2.2rem; line-height: 1.25; }
.filter-button { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 2.75rem; padding: 0 var(--space-md); border: 1px solid var(--line); border-radius: 99px; background: transparent; font-size: var(--text-xs); white-space: nowrap; cursor: pointer; }
.result-axes { display: flex; gap: var(--space-lg); margin-top: var(--space-xl); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--line); font-size: var(--text-xs); }
.result-axes span { display: flex; align-items: center; gap: var(--space-xs); }
.result-axes .dot { margin: 0; }
.job-list { display: grid; margin-top: var(--space-sm); }
.job-card { display: grid; gap: var(--space-sm); padding: var(--space-xl) 0; border-bottom: 1px solid var(--line); }
.job-card header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-sm); }
.job-card header > div > span { color: var(--sea-deep); font-size: var(--text-xs); font-weight: 700; }
.job-card h2 { max-width: 16ch; margin-top: var(--space-2xs); font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; }
.job-card h3 { color: var(--ink-soft); font-size: var(--text-sm); font-weight: 500; }
.job-card > p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.7; }
.job-card footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.job-card footer > span { color: var(--muted); font-size: 0.65rem; }
.job-card footer button { display: flex; align-items: center; gap: var(--space-xs); min-height: 2.75rem; padding: 0; border: 0; color: var(--sea-deep); background: transparent; font-weight: 700; cursor: pointer; }
.job-card--locked { opacity: 0.52; filter: saturate(0.4); }
.eligibility { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0 var(--space-xs); border: 1px solid currentColor; border-radius: 99px; font-size: 0.62rem; font-weight: 700; white-space: nowrap; }
.eligibility--met { color: var(--success); }.eligibility--gap { color: var(--danger); }.eligibility--missing { color: var(--warning); }
.axis-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.axis-tags span { padding: 0.28rem 0.58rem; border-radius: 99px; color: var(--sea-deep); background: var(--sea-pale); font-size: 0.65rem; font-weight: 700; }
.axis-tags span:nth-child(2) { color: var(--danger); background: var(--coral-pale); }
.data-disclaimer { margin-top: var(--space-xl); color: var(--muted); font-size: var(--text-xs); line-height: 1.7; }

/* Detail and offer */
.detail-hero { display: grid; gap: var(--space-xs); padding-top: var(--space-lg); }
.detail-hero h1 { max-width: 14ch; margin-top: var(--space-sm); font-size: 2.1rem; line-height: 1.25; }
.detail-hero h2 { margin-bottom: var(--space-sm); color: var(--ink-soft); font-size: var(--text-base); font-weight: 500; }
.evidence-section { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
.section-title { display: flex; align-items: baseline; gap: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--line); }
.section-title span { color: var(--sea); font-family: var(--font-display); }
.section-title h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; }
.evidence-section > p, .evidence-box p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.75; }
.evidence-box { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-sm); background: var(--sea-pale); }
.evidence-box .eligibility { justify-self: start; }
.source-list { display: grid; gap: var(--space-sm); margin: 0; }
.source-list div { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--line); }
.source-list dt { color: var(--muted); font-size: var(--text-xs); }.source-list dd { margin: 0; font-size: var(--text-sm); }
.human-mentor-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); margin-top: var(--space-2xl); padding: var(--space-lg); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-deep); }
.human-avatar { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; color: var(--paper); background: var(--sea-deep); font-family: var(--font-display); font-size: 1.35rem; }
.human-mentor-card h2 { margin-top: var(--space-xs); font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; }
.human-mentor-card p { margin-top: var(--space-xs); color: var(--ink-soft); font-size: var(--text-xs); }
.human-mentor-card .secondary-button { grid-column: 1 / -1; }
.detail-actions { display: grid; gap: var(--space-sm); margin-top: var(--space-2xl); }
.external-notice { display: grid; gap: var(--space-sm); padding: var(--space-lg); border: 1px solid var(--sea-soft); border-radius: var(--radius-md); background: var(--sea-pale); }
.external-notice p { color: var(--ink-soft); font-size: var(--text-sm); }
.external-notice .primary-button { margin-top: var(--space-xs); }
.offer-heading h1 { max-width: 12ch; }
.offer-report { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.report-title { display: grid; gap: var(--space-xs); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--line); }
.report-title h2 { margin-top: var(--space-sm); font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; }
.report-title p { color: var(--ink-soft); }
.offer-report > section:not(.report-title) { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-sm); }
.report-index { grid-row: 1 / 3; color: var(--sea); font-family: var(--font-display); }
.offer-report h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; }
.offer-report section p, .offer-report section ul { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.75; }

.toast-region { position: fixed; inset: auto 0 max(1rem, env(safe-area-inset-bottom)); z-index: var(--z-toast); display: grid; place-items: center; pointer-events: none; }
.toast { max-width: calc(100% - 2rem); padding: var(--space-sm) var(--space-md); border-radius: 99px; color: var(--paper); background: var(--ink); box-shadow: var(--shadow-md); font-size: var(--text-sm); animation: toast-in 300ms var(--ease-out) both; }

/* Coastal field-note refinement */
.inline-link {
  min-height: 2.75rem;
  margin: -0.6rem 0;
  padding: 0;
  border: 0;
  color: var(--sea-deep);
  background: transparent;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  cursor: pointer;
}

.policy-note {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--sea-pale);
}
.policy-note > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.policy-note .icon-button { width: 2.75rem; background: transparent; }
.policy-note p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.65; }

.mentor-cue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 4rem;
  margin: calc(var(--space-lg) * -1) 0 var(--space-md);
  padding: var(--space-sm) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.mentor-cue__signal { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--sea-soft); border-radius: 50%; color: var(--sea-deep); background: var(--sea-pale); }
.mentor-cue__signal svg { width: 1rem; height: 1rem; }
.mentor-cue > span { display: grid; gap: 0.1rem; min-width: 0; }
.mentor-cue strong { font-family: var(--font-display); font-size: var(--text-base); font-weight: 400; }
.mentor-cue small { overflow: hidden; color: var(--ink-soft); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.mentor-cue > svg { color: var(--sea); }

.story-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.story-skip { min-height: 2.75rem; font-size: var(--text-xs); text-decoration: none; }
.story-dots { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.story-dots i { width: 1.25rem; height: 0.16rem; background: var(--line); transition: transform 200ms var(--ease-out), background 200ms var(--ease-out); }
.story-dots i.is-active { background: var(--coral); transform: scaleX(1.35); transform-origin: left; }

.mentor-card { border-radius: var(--radius-md); box-shadow: none; }
.mentor-card__copy { grid-template-columns: 1fr auto; align-items: end; }
.mentor-card__copy small { justify-self: end; color: var(--sea-deep); font-size: var(--text-xs); }
.ai-label, .demo-pill, .axis-tags span, .eligibility { border-radius: 0.35rem; }

.scene-header h1 { font-size: 2.2rem; line-height: 1.28; }
.scene-choice { min-height: 15rem; border-radius: var(--radius-md); box-shadow: none; }
.scene-choice__time { top: var(--space-sm); left: var(--space-sm); padding: 0.25rem 0.4rem; color: var(--paper); background: var(--ink); font-size: 0.7rem; }
.scene-illustration { height: 10rem; filter: saturate(0.86) contrast(0.96); }
.scene-choice__copy { min-height: 7rem; padding: var(--space-md); }
.scene-choice__copy strong { font-size: 1.15rem; line-height: 1.45; }

.tier-list { gap: var(--space-2xl); }
.preference-tier > header { padding-bottom: var(--space-sm); }
.preference-card { min-height: 4.75rem; border-radius: 0; border-width: 0 0 1px; background: transparent; box-shadow: none; }
.preference-card:first-child { border-top: 1px solid var(--line); }
.preference-card small { font-size: var(--text-xs); }
.preference-card select { border-radius: var(--radius-sm); }
.bottom-action { position: static; margin-top: var(--space-xl); padding: 0 0 max(1rem, env(safe-area-inset-bottom)); background: transparent; }

.mentor-glimpse {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mentor-glimpse > div:not(.human-avatar) { display: grid; gap: 0.15rem; min-width: 0; }
.mentor-glimpse strong { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.mentor-glimpse small { color: var(--muted); font-size: var(--text-xs); }
.mentor-glimpse button { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: 0; border: 0; color: var(--sea-deep); background: transparent; font-weight: 700; cursor: pointer; }
.mentor-glimpse button:disabled { color: var(--muted); }

.fact-strip { border-radius: var(--radius-sm); }
.satisfaction-block { padding: var(--space-lg); border-radius: var(--radius-md); }
.binary-actions button, .reason-picker label span { border-radius: var(--radius-sm); }
.reason-picker input:focus-visible + span { outline: 0.1875rem solid var(--coral); outline-offset: 0.1875rem; }
.calibration-end { display: grid; gap: var(--space-sm); }
.calibration-end > p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.65; }

.matching-kicker { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.matching-kicker .text-button { min-height: 2.75rem; font-size: var(--text-xs); text-decoration: none; }
.future-film { min-height: 48svh; border-radius: 8rem 8rem var(--radius-md) var(--radius-md); }
.future-film img { animation: film-drift 7s linear both; }
.film-beats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: var(--space-sm); background: var(--line); }
.film-beats span { padding: var(--space-xs); color: var(--muted); background: var(--paper); font-size: var(--text-xs); text-align: center; }
.film-beats span.is-active { color: var(--paper); background: var(--sea-deep); }

.results-heading { align-items: start; }
.results-heading h1 { max-width: 12ch; font-size: 2.05rem; }
.filter-button { border-radius: var(--radius-sm); }
.filter-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xs); margin-top: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--line); }
.filter-tray button { min-height: 2.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; font-size: var(--text-xs); cursor: pointer; }
.filter-tray button.is-active { border-color: var(--ink); color: var(--paper); background: var(--ink); }
.ranking-section { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
.ranking-section > header { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-sm); }
.ranking-index { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--coral); color: var(--coral); font-family: var(--font-display); }
.ranking-section--eligibility .ranking-index { border-color: var(--sea); color: var(--sea-deep); }
.ranking-section h2 { margin-top: 0.2rem; font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; }
.ranking-list { display: grid; border-top: 1px solid var(--line); }
.rank-card { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); min-height: 6.75rem; padding: var(--space-md) 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.rank-number { color: var(--coral); font-family: var(--font-display); font-size: 1.1rem; }
.ranking-section--eligibility .rank-number { color: var(--sea); }
.rank-copy { display: grid; gap: 0.2rem; min-width: 0; }
.rank-copy strong { overflow: hidden; font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.rank-copy small { color: var(--ink-soft); font-size: var(--text-xs); }
.rank-copy em { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: var(--text-xs); font-style: normal; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.all-results-title { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-xs); margin-top: var(--space-3xl); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--ink); }
.all-results-title .eyebrow { grid-column: 1 / -1; }
.all-results-title h2 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; }
.all-results-title small { color: var(--muted); }
.job-list { margin-top: 0; }
.job-card { gap: var(--space-md); padding: var(--space-xl) 0; }
.job-card--locked { opacity: 1; filter: none; }
.job-card--locked > *:not(footer) { opacity: 0.5; }
.empty-results { display: grid; gap: var(--space-sm); padding: var(--space-2xl) 0; }
.empty-results p { color: var(--ink-soft); font-size: var(--text-sm); }

.human-profile-hero { display: grid; gap: var(--space-xl); padding-top: var(--space-md); }
.human-portrait { position: relative; display: grid; place-items: end center; min-height: 19rem; overflow: hidden; background: var(--paper-deep); }
.human-portrait::before { content: ""; position: absolute; top: 2.25rem; width: 13rem; height: 13rem; border-radius: 50%; background: var(--sea-soft); }
.human-portrait::after { content: ""; position: absolute; bottom: -4rem; width: 15rem; height: 15rem; border-radius: 48% 48% 18% 18%; background: var(--sea-deep); }
.human-portrait span { z-index: 1; margin-bottom: 4.5rem; color: var(--paper); font-family: var(--font-display); font-size: 4rem; }
.human-portrait i { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; width: 3.5rem; height: 0.2rem; background: var(--coral); }
.human-profile-copy { display: grid; gap: var(--space-xs); }
.human-profile-copy h1 { margin-top: var(--space-sm); font-size: 2.4rem; }
.human-profile-copy h2 { color: var(--ink-soft); font-size: var(--text-base); font-weight: 500; }
.human-profile-copy > p:last-of-type { margin-top: var(--space-sm); color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.75; }
.human-profile-copy dl, .subject-confirmation dl { display: grid; gap: var(--space-sm); margin: var(--space-md) 0 0; }
.human-profile-copy dl div, .subject-confirmation dl div { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--line); }
.human-profile-copy dt, .subject-confirmation dt { color: var(--muted); font-size: var(--text-xs); }
.human-profile-copy dd, .subject-confirmation dd { margin: 0; font-size: var(--text-sm); }
.mentor-video-card { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
.video-poster { position: relative; display: grid; place-items: center; min-height: 13rem; overflow: hidden; background: var(--sea-deep); }
.video-poster::before, .video-poster::after { content: ""; position: absolute; width: 130%; height: 55%; border-radius: 50%; background: var(--sea); transform: rotate(-6deg); }
.video-poster::before { bottom: -16%; left: -15%; }
.video-poster::after { bottom: -35%; right: -15%; background: var(--sea-soft); transform: rotate(5deg); }
.video-play { z-index: 2; display: grid; place-items: center; width: 4rem; height: 4rem; border: 1px solid var(--paper); border-radius: 50%; color: var(--paper); }
.video-play svg { transform: translateX(0.1rem); }
.video-poster small { position: absolute; right: var(--space-sm); bottom: var(--space-sm); z-index: 2; padding: 0.25rem 0.4rem; color: var(--paper); background: var(--ink); font-variant-numeric: tabular-nums; }
.mentor-video-card > div:last-child { display: grid; gap: var(--space-xs); }
.mentor-video-card h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; line-height: 1.45; }
.mentor-video-card p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.65; }
.human-service-actions { display: grid; gap: var(--space-sm); margin-top: var(--space-2xl); }
.intent-note { display: grid; gap: var(--space-xs); padding: var(--space-md); background: var(--sea-pale); }
.intent-note p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.65; }

.subject-confirmation { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.subject-status { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--success); border-bottom: 1px solid var(--success); color: var(--success); font-size: var(--text-sm); font-weight: 700; }
.subject-name { display: grid; gap: var(--space-xs); }
.subject-name h2 { margin-top: var(--space-sm); font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; line-height: 1.35; }
.subject-name p { color: var(--ink-soft); }

@keyframes film-drift { from { transform: scale(1.03); } to { transform: scale(1.1) translateY(-1.5%); } }
@keyframes splash-progress { to { transform: scaleX(1); } }
@keyframes window-glow { to { opacity: 0.48; } }
@keyframes route-draw { from { opacity: 0; transform-origin: left; } to { opacity: 1; } }
@keyframes preview-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes mentor-uncle { from { transform: scale(1.02); } to { transform: scale(1.055) rotate(-0.6deg); } }
@keyframes mentor-aunt { from { transform: scale(1.025) translateX(-0.2rem); } to { transform: scale(1.06) translateX(0.15rem); } }
@keyframes mentor-brother { from { transform: scale(1.025) translateY(0); } to { transform: scale(1.06) translateY(-0.2rem) rotate(0.5deg); } }
@keyframes mentor-sister { from { transform: scale(1.025) translateY(0.1rem); } to { transform: scale(1.055) translateY(-0.22rem); } }
@keyframes mentor-dog { from { transform: scale(1.03) rotate(-1deg); } to { transform: scale(1.075) rotate(1.2deg) translateY(-0.1rem); } }
@keyframes mentor-horse { from { transform: scale(1.03) translateX(-0.08rem); } to { transform: scale(1.065) translateX(0.12rem) translateY(-0.12rem); } }

@keyframes reveal-up { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes sun-rise { from { opacity: 0; transform: translateY(4rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes tide-in { from { transform: translateY(7rem) rotate(-4deg); } to { transform: translateY(0) rotate(-4deg); } }
@keyframes boat-float { to { transform: translateY(-0.4rem) rotate(2deg); } }
@keyframes mentor-breathe { from { transform: scale(1.02); } to { transform: scale(1.06) translateY(-0.08rem); } }
@keyframes sheet-in { from { opacity: 0; transform: translate(-50%, 2rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes sheet-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 1.25rem); } }
@keyframes status-pulse { 50% { opacity: 0.3; transform: scale(0.8); } }
@keyframes commute { to { transform: translateX(-0.5rem); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } }

@media (hover: hover) and (pointer: fine) {
  .primary-button:hover { background: var(--sea-deep); }
  .secondary-button:hover, .icon-button:hover, .mentor-actions button:hover { background: var(--sea-pale); }
  .mentor-card:hover, .scene-choice:hover { transform: translateY(-0.2rem); border-color: var(--sea); }
  .job-card footer button:hover { color: var(--coral); }
}

@media (min-width: 40rem) {
  html, body { background: var(--ink); }
  body { padding-block: var(--space-xl); }
  .app-frame {
    max-width: 32rem;
    min-height: calc(100svh - 4rem);
    overflow: hidden;
    border: 1px solid oklch(100% 0 0 / 0.58);
    border-radius: 2.5rem;
    box-shadow: 0 2.5rem 7rem oklch(12% 0.04 224 / 0.42), 0 0 0 0.55rem oklch(25% 0.045 224 / 0.8);
  }
  .app-shell, .screen-content, .splash-stage { min-height: calc(100svh - 4rem); }
  .mentor-companion { bottom: 3rem; }
  .page-horizon {
    position: fixed;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
    background:
      linear-gradient(oklch(100% 0 0 / 0.035) 1px, transparent 1px) 0 0 / 100% 4rem,
      linear-gradient(90deg, oklch(100% 0 0 / 0.03) 1px, transparent 1px) 0 0 / 4rem 100%,
      var(--ink);
  }
  .stage-brand { position: absolute; top: 11%; left: 4.5%; display: none; gap: 0.8rem; color: var(--paper); }
  .stage-brand strong { max-width: 5ch; font-size: clamp(4.5rem, 8vw, 8.5rem); line-height: 0.78; letter-spacing: -0.075em; opacity: 0.09; }
  .stage-brand span { padding-left: 0.35rem; color: var(--sea-soft); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; }
  .stage-sun { position: absolute; top: -5vw; right: 5vw; width: clamp(10rem, 18vw, 18rem); aspect-ratio: 1; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 1.5rem oklch(65% 0.145 33 / 0.08); }
  .stage-route { position: absolute; width: 74vw; height: 32vh; border: 1px solid oklch(86% 0.05 200 / 0.22); border-radius: 50%; }
  .stage-route--a { top: 10%; left: -24%; transform: rotate(-8deg); }
  .stage-route--b { top: 28%; right: -30%; transform: rotate(13deg); }
  .stage-tide { position: absolute; left: -12%; width: 124%; border-radius: 50% 50% 0 0; }
  .stage-tide--far { bottom: -24vh; height: 47vh; background: var(--sea); transform: rotate(-3deg); opacity: 0.72; }
  .stage-tide--near { bottom: -36vh; height: 53vh; background: var(--sea-deep); transform: rotate(4deg); }
  .scene-options { grid-template-columns: 1fr 1fr; }
  .scene-choice { min-height: 19rem; }
}

@media (min-width: 68rem) {
  .stage-brand { display: grid; }
}

@media (max-height: 44rem) {
  .splash-copy { padding-bottom: 10svh; }
  .mentor-hero__stage { min-height: 13rem; }
  .mentor-art--hero { width: 10rem; height: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}