:root {
  --ink-1000: #0b0b1a;
  --ink-900: #11112a;
  --ink-800: #191936;
  --ink-700: #222246;
  --mist: #b6b6d6;
  --mist-hi: #dfdff2;

  --paper: #f5f5f0;
  --paper-0: #fafaf6;
  --paper-2: #eaeae0;
  --text: #14142b;
  --muted: #4c4c6d;

  --signal: #fedb71;
  --signal-hi: #ffe8a3;
  --signal-deep: #7a5c00;
  --gold-line: #d9a92e;

  --ok: #135a39;
  --ok-soft: #e2f3ea;
  --ok-line: #238659;

  --danger: #9e1c13;
  --danger-soft: #fee4e2;
  --danger-line: #d92d20;

  --bg: var(--paper);
  --surface: var(--paper-0);
  --surface-2: var(--paper-2);
  --fg: var(--text);
  --fg-muted: var(--muted);
  --line: rgb(20 20 43 / 0.14);
  --line-hi: rgb(20 20 43 / 0.30);

  --accent: #1d4ed8;
  --accent-soft: #e8efff;

  --font-serif: "Fraunces", "Noto Serif Georgian", Georgia, serif;
  --font-sans: "Geist", "FiraGO", "Noto Sans Georgian", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Geist Mono", "Noto Sans Georgian", ui-monospace, monospace;

  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 76rem;
  --gutter: clamp(1rem, 2.6vw, 2.25rem);
}

[data-age="6-9"] {
  --radius: 16px;
  --accent: #b45309;
  --accent-soft: #fef3c7;
}

[data-age="10-16"] {
  --accent: #1d4ed8;
  --accent-soft: #e8efff;
}

[data-age="adult"] {
  --accent: #11112a;
  --accent-soft: #ecece4;
}

[data-theme="dark"] {
  --bg: #0d0d1e;
  --surface: #15152c;
  --surface-2: #1d1d3a;
  --fg: #f3f3f9;
  --fg-muted: #b4b4d2;
  --line: rgb(245 245 240 / 0.15);
  --line-hi: rgb(245 245 240 / 0.32);
  --ok: #8fe3bd;
  --ok-soft: #103223;
  --danger: #fca5a5;
  --danger-soft: #381314;
  --signal-deep: #fedb71;
  --accent: #93c5fd;
  --accent-soft: #1d284d;
}

[data-font-scale="large"] {
  font-size: 112%;
}

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

html {
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  overflow-x: clip;
  overflow-wrap: break-word;
}

.skip-link {
  position: fixed;
  top: -120px;
  inset-inline-start: 1rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.skip-link:focus {
  position: fixed;
  inset-inline-start: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  z-index: 999;
  background: var(--signal);
  color: var(--ink-1000);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.container {
  width: min(100%, var(--maxw));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink-900);
  color: #f5f5f0;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 4.1rem;
  flex-wrap: wrap;
  padding-block: 0.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: #f5f5f0;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  white-space: nowrap;
}

.stop {
  color: var(--signal);
}

.age-switcher {
  display: inline-flex;
  background: var(--ink-800);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  padding: 0.2rem;
  gap: 0.2rem;
}

.age-pill {
  border: 0;
  background: transparent;
  color: var(--mist-hi);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.34rem 0.72rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.age-pill.active {
  background: var(--signal);
  color: var(--ink-1000);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.nav-link {
  color: var(--mist-hi);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.38rem 0.65rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  background: rgb(255 255 255 / 0.1);
  color: #ffffff;
}

.nav-link.active {
  box-shadow: inset 0 -2px 0 var(--signal);
}

.header-utils {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.icon-toggle,
.menu-toggle {
  border: 1px solid rgb(255 255 255 / 0.22);
  background: var(--ink-800);
  color: #f5f5f0;
  border-radius: var(--radius-sm);
  padding: 0.38rem 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  cursor: pointer;
}

.menu-toggle {
  display: none;
}

/* Hero Ink */
.hero-ink {
  background: linear-gradient(155deg, var(--ink-1000) 0%, var(--ink-900) 58%, var(--ink-700) 100%);
  color: #f5f5f0;
  padding-block: clamp(2.4rem, 5vw, 4.2rem);
  border-bottom: 3px solid var(--gold-line);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}

.folio,
.folio-light {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.folio {
  color: var(--signal-deep);
}

.folio-light {
  color: var(--signal);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3.2vw, 2.95rem);
  line-height: 1.18;
  margin: 0 0 1rem;
  font-weight: 700;
}

.hero-lead {
  color: var(--mist-hi);
  font-size: 1.06rem;
  max-width: 58ch;
  margin: 0 0 1.6rem;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.hero-card {
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.hero-card-title {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
  font-family: var(--font-serif);
}

.hero-card-sub {
  margin: 0 0 1.15rem;
  color: var(--mist);
  font-size: 0.95rem;
}

.hero-norms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.norm-box {
  background: rgb(11 11 26 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius-sm);
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.norm-box span {
  font-size: 0.76rem;
  color: var(--mist);
}

.norm-box strong {
  font-size: 1.02rem;
  color: #ffffff;
}

.norm-box.highlight {
  border-color: rgb(254 219 113 / 0.45);
}

.norm-box.highlight strong {
  color: var(--signal);
}

.age-quick-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.age-tab-btn {
  border: 1px solid rgb(255 255 255 / 0.18);
  background: transparent;
  color: var(--mist-hi);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.age-tab-btn.active {
  background: var(--signal);
  color: var(--ink-1000);
  border-color: var(--signal);
}

/* Sections & Surfaces */
.page-sections {
  padding-block: clamp(1.8rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.section-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.page-title,
.section-title {
  font-family: var(--font-serif);
  margin: 0;
  line-height: 1.24;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
}

.lead {
  color: var(--fg-muted);
  font-size: 1.05rem;
  margin: 0;
  max-width: 72ch;
}

.lead-sm {
  color: var(--fg-muted);
  margin: 0;
  font-size: 0.96rem;
}

.muted {
  color: var(--fg-muted);
  font-size: 0.93rem;
}

.panel,
.info-card,
.catalog-card,
.program-card,
.package-card,
.exercise-card,
.stat-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.2vw, 1.5rem);
}

.panel-title {
  font-family: var(--font-serif);
  margin: 0 0 0.75rem;
  font-size: 1.24rem;
}

/* Grids */
.three-col-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.two-col-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.catalog-grid,
.program-grid,
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.choice-grid {
  display: grid;
  gap: 0.85rem;
}

.choice-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-card {
  text-align: left;
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  color: var(--fg);
  font-family: var(--font-sans);
  cursor: pointer;
}

.choice-card.active {
  border-color: var(--signal-deep);
  background: var(--surface);
  box-shadow: 0 0 0 2px rgb(217 169 46 / 0.25);
}

.choice-badge {
  font-size: 0.78rem;
  color: var(--signal-deep);
  font-weight: 600;
}

.choice-title {
  font-size: 1.05rem;
}

.choice-sub {
  font-size: 0.86rem;
  color: var(--fg-muted);
}

/* Buttons & Pills */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: var(--radius-sm);
  padding: 0.62rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, background-color 0.15s ease;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-lg {
  padding: 0.82rem 1.35rem;
  font-size: 1rem;
}

.btn-sm {
  padding: 0.42rem 0.78rem;
  font-size: 0.84rem;
}

.btn.full {
  width: 100%;
}

.btn-primary {
  background: var(--ink-900);
  color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--ink-700);
}

[data-theme="dark"] .btn-primary {
  background: var(--signal);
  color: var(--ink-1000);
}

.btn-signal {
  background: var(--signal);
  color: var(--ink-1000);
}

.btn-signal:hover {
  background: var(--signal-hi);
}

.btn-ink-outline {
  border-color: rgb(255 255 255 / 0.34);
  background: transparent;
  color: #ffffff;
}

.btn-outline {
  border-color: var(--line-hi);
  background: transparent;
  color: var(--fg);
}

.btn-ghost {
  background: var(--surface-2);
  color: var(--fg);
}

.link-btn {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--signal-deep);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.94rem;
  cursor: pointer;
  text-align: left;
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.pill-btn {
  border: 1px solid var(--line-hi);
  background: var(--surface);
  color: var(--fg);
  border-radius: 999px;
  padding: 0.42rem 0.88rem;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.pill-btn.active {
  background: var(--ink-900);
  color: #ffffff;
  border-color: var(--ink-900);
}

[data-theme="dark"] .pill-btn.active {
  background: var(--signal);
  color: var(--ink-1000);
  border-color: var(--signal);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.58rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--line);
}

.badge-gold {
  background: #fef3c7;
  color: #78350f;
  border-color: #f59e0b;
}

.mono-pill {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.28rem 0.68rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.mono-pill.gold {
  background: var(--ink-900);
  color: var(--signal);
  border-color: var(--gold-line);
}

.step-num {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--signal-deep);
}

.spacer-sm {
  height: 0.75rem;
}

/* Reading Papers (Age-adapted) */
.reading-paper {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 2.2rem);
  max-width: 68ch;
  margin-inline: auto;
}

.reading-paper.age-6-9 {
  font-size: 1.28rem;
  line-height: 1.88;
  letter-spacing: 0.015em;
}

.reading-paper.age-10-16 {
  font-size: 1.14rem;
  line-height: 1.74;
}

.reading-paper.age-adult {
  font-size: 1.08rem;
  line-height: 1.66;
}

.reading-title {
  font-family: var(--font-serif);
  margin: 0 0 0.5rem;
  font-size: 1.45rem;
}

.reading-hint {
  color: var(--fg-muted);
  font-size: 0.92rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.reading-paragraphs p {
  margin: 0 0 1rem;
}

/* Banners & KPIs */
.ink-banner {
  background: var(--ink-900);
  color: #f5f5f0;
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.banner-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
}

.banner-text {
  margin: 0;
  color: var(--mist-hi);
  max-width: 70ch;
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.kpi-card {
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.kpi-card.highlight {
  border-color: var(--signal);
}

.kpi-label {
  font-size: 0.78rem;
  color: var(--mist);
}

.kpi-val {
  font-size: 1.55rem;
  font-family: var(--font-mono);
  color: #ffffff;
}

.kpi-card.highlight .kpi-val {
  color: var(--signal);
}

.kpi-unit {
  font-size: 0.78rem;
  color: var(--mist);
}

.stat-box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-big {
  font-size: 1.7rem;
  font-family: var(--font-mono);
}

/* Action bars & Toolbars */
.action-bar,
.reader-toolbar,
.exercise-controls,
.pacer-toolbar,
.mission-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 0.75rem;
}

.toolbar-right,
.toolbar-group,
.inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.inline-actions.stretch > button {
  flex: 1 1 auto;
}

/* Schulte Grid */
.schulte-grid {
  display: grid;
  gap: 0.45rem;
  width: min(100%, 30rem);
  margin: 1rem auto;
}

.schulte-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.schulte-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.schulte-grid.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.schulte-grid.cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.schulte-cell {
  aspect-ratio: 1 / 1;
  border: 2px solid var(--line-hi);
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  cursor: pointer;
}

.schulte-cell.center-anchor {
  border-color: var(--gold-line);
  box-shadow: inset 0 0 0 2px rgb(217 169 46 / 0.35);
}

.schulte-cell.done {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: var(--ok-line);
}

.schulte-cell.wrong {
  background: var(--danger-soft);
  border-color: var(--danger-line);
}

/* Status strip */
.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.stat-chip {
  flex: 1 1 8.5rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.8rem;
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 0.76rem;
  color: var(--fg-muted);
}

.stat-val {
  font-size: 1.08rem;
  font-family: var(--font-mono);
}

.gold-text {
  color: var(--signal-deep);
}

/* Flash & RSVP */
.flash-stage {
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.flash-crosshair {
  color: var(--signal-deep);
  font-size: 1.3rem;
  font-weight: 700;
}

.flash-word {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3.6vw, 2.5rem);
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  background: var(--ink-900);
  color: #ffffff;
  border-radius: var(--radius-sm);
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: min(100%, 34rem);
}

.option-tile,
.option-btn {
  padding: 0.78rem 1rem;
  border: 2px solid var(--line-hi);
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.option-tile {
  justify-content: center;
  text-align: center;
}

.option-btn.selected {
  border-color: var(--signal-deep);
  background: var(--accent-soft);
}

.option-index {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  flex-shrink: 0;
}

.rsvp-viewport {
  background: var(--ink-900);
  color: #ffffff;
  border-radius: var(--radius);
  min-height: 11.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  position: relative;
}

.rsvp-guide-top,
.rsvp-guide-bottom {
  width: 2px;
  height: 14px;
  background: var(--gold-line);
}

.rsvp-word-box {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  min-height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rsvp-pivot {
  color: var(--signal);
}

/* Pacer */
.pacer-word {
  transition: background-color 0.08s ease, opacity 0.15s ease;
  border-radius: 4px;
  padding-inline: 2px;
}

.pacer-word.active {
  background: var(--signal);
  color: var(--ink-1000);
}

.pacer-word.past {
  opacity: 0.25;
}

/* Word Hunt */
.scan-word {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 1px 3px;
  border-radius: 4px;
  cursor: pointer;
}

.scan-word:hover {
  background: var(--accent-soft);
}

.scan-word.found {
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 700;
  outline: 2px solid var(--ok-line);
}

/* Lookalike */
.lookalike-grid {
  display: grid;
  gap: 0.55rem;
  max-width: 38rem;
  margin: 0.85rem auto;
}

.lookalike-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lookalike-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lookalike-cell {
  border: 2px solid var(--line-hi);
  background: var(--surface-2);
  color: var(--fg);
  border-radius: var(--radius-sm);
  padding: 0.9rem 0.45rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.lookalike-cell.found {
  background: var(--ok-soft);
  border-color: var(--ok-line);
  color: var(--ok);
}

/* Pyramid & Metronome */
.pyramid-stage {
  min-height: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-900);
  color: #ffffff;
  border-radius: var(--radius);
  padding: 1.5rem;
}

.pyramid-stage.gap-lvl-1 { gap: 2.5rem; }
.pyramid-stage.gap-lvl-2 { gap: 4.5rem; }
.pyramid-stage.gap-lvl-3 { gap: 7rem; }
.pyramid-stage.gap-lvl-4 { gap: 9.5rem; }
.pyramid-stage.gap-lvl-5 { gap: 12rem; }

.pyramid-word {
  font-size: 1.35rem;
  font-weight: 700;
}

.pyramid-center-dot {
  color: var(--signal);
  font-size: 1.35rem;
}

.metro-stops-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-block: 0.85rem;
}

.metro-stop {
  text-align: center;
  padding: 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.86rem;
}

.metro-stop.active {
  background: var(--signal);
  color: var(--ink-1000);
  border-color: var(--gold-line);
}

/* Workout runner */
.stage-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.step-pill {
  border: 1px solid rgb(255 255 255 / 0.2);
  background: transparent;
  color: var(--mist-hi);
  border-radius: 999px;
  padding: 0.3rem 0.68rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.step-pill.current {
  background: var(--signal);
  color: var(--ink-1000);
  border-color: var(--signal);
  font-weight: 700;
}

.step-pill.done {
  border-color: #8fe3bd;
  color: #8fe3bd;
}

.stage-preview-list {
  margin: 0.75rem 0 1rem;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  font-size: 0.9rem;
}

.stage-preview-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.stage-dur {
  font-family: var(--font-mono);
  color: var(--fg-muted);
}

.rest-card {
  background: var(--surface);
  border: 2px solid var(--ok-line);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
}

.rest-steps {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.builder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1rem;
}

.field-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

/* Packages & Forms */
.package-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.package-card.recommended {
  border: 2px solid var(--gold-line);
}

.package-card.selected {
  box-shadow: 0 0 0 3px rgb(217 169 46 / 0.25);
}

.pkg-name {
  margin: 0.4rem 0 0.25rem;
  font-family: var(--font-serif);
  font-size: 1.22rem;
}

.pkg-price strong {
  font-size: 1.75rem;
  font-family: var(--font-mono);
}

.pkg-gain {
  background: var(--ok-soft);
  color: var(--ok);
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 600;
  margin: 0;
}

.pkg-features,
.goal-list {
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  font-size: 0.92rem;
}

.conversion-box {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block: 0.85rem;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.62rem 0.78rem;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 0.94rem;
}

.range-input {
  width: min(100%, 12rem);
}

.alert {
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.alert-ok {
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid var(--ok-line);
}

.alert-error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger-line);
}

.result-inline {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.result-inline.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.result-inline.bad {
  background: var(--danger-soft);
  color: var(--danger);
}

.question-card {
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.question-title {
  font-weight: 700;
  margin: 0 0 0.65rem;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mini-module-list,
.history-list,
.custom-saved-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mini-module-btn,
.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0.88rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--fg);
  border-radius: var(--radius-sm);
  text-align: left;
  font-family: var(--font-sans);
  cursor: pointer;
}

.mini-module-btn strong,
.history-row strong {
  display: block;
}

.age-adapt-note {
  font-size: 0.86rem;
  padding: 0.55rem 0.7rem;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  margin-block: 0.5rem 0.85rem;
}

.card-btn-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.catalog-card,
.program-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.catalog-top,
.program-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.catalog-title,
.program-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.18rem;
}

.catalog-sub {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

.settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.custom-text-box {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.65rem;
}

.summary-toggle {
  cursor: pointer;
  font-weight: 700;
}

.review-list {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.review-item {
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--ok-line);
  background: var(--surface-2);
}

.review-item.bad {
  border-left-color: var(--danger-line);
}

/* Charts */
.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-track {
  fill: var(--surface-2);
}

.chart-zone-avg {
  fill: rgb(217 169 46 / 0.25);
}

.chart-bar-effective {
  fill: var(--ok-line);
}

.chart-dot-current {
  fill: var(--ink-900);
  stroke: var(--signal);
  stroke-width: 2.5;
}

[data-theme="dark"] .chart-dot-current {
  fill: var(--signal);
  stroke: var(--ink-900);
}

.chart-dot-proj {
  fill: var(--ok-line);
}

.chart-marker-proj {
  stroke: var(--ok-line);
  stroke-width: 2;
}

.chart-tick {
  stroke: var(--line-hi);
  stroke-width: 1.5;
}

.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-line-wpm {
  stroke: var(--ink-900);
  stroke-width: 2.6;
}

[data-theme="dark"] .chart-line-wpm {
  stroke: var(--signal);
}

.chart-line-eff {
  stroke: var(--ok-line);
  stroke-width: 2;
}

.chart-goal-line {
  stroke: var(--gold-line);
  stroke-width: 1.8;
}

.chart-bar-goal {
  fill: var(--ok-line);
}

.chart-bar-muted {
  fill: var(--fg-muted);
  opacity: 0.5;
}

.chart-label-current,
.chart-label-proj,
.chart-tick-label,
.chart-axis-text,
.chart-empty {
  fill: var(--fg);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
}

.chart-tick-label,
.chart-axis-text {
  fill: var(--fg-muted);
  font-weight: 500;
}

/* Footer */
.site-footer {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  padding-block: 2rem;
  background: var(--surface);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}

/* Responsive */
@media (max-width: 62em) {
  .hero-grid,
  .three-col-grid,
  .two-col-split,
  .catalog-grid,
  .program-grid,
  .package-grid,
  .choice-grid.three,
  .builder-grid,
  .form-grid,
  .kpi-strip {
    grid-template-columns: 1fr;
  }

  .choice-grid.two {
    grid-template-columns: 1fr;
  }

  .age-switcher {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: var(--radius-sm);
  }

  .age-pill {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.34rem 0.5rem;
    font-size: 0.8rem;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .main-nav {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0.5rem;
    border-top: 1px solid rgb(255 255 255 / 0.12);
  }

  .main-nav.open {
    display: flex;
  }
}

@media (max-width: 34em) {
  .options-grid {
    grid-template-columns: 1fr;
  }

  .btn,
  .pill-btn {
    white-space: normal;
    text-align: center;
  }

  .pyramid-stage.gap-lvl-4 { gap: 3.5rem; }
  .pyramid-stage.gap-lvl-5 { gap: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   Pro Upgrade: Language Selector, Embedded 3-2-1 Countdown, Bionic, EyeGym, Gamification, RTL
   ============================================================================ */

.reading-stage-anchor {
  scroll-margin-top: 5.5rem;
}

.lang-select {
  background: var(--ink-800);
  color: #f5f5f0;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: var(--radius-sm);
  padding: 0.36rem 0.52rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 9.25rem;
}

.free-pill {
  background: rgb(254 219 113 / 0.2);
  color: var(--signal);
  border: 1px solid rgb(254 219 113 / 0.45);
  font-size: 0.72rem;
  padding: 0.14rem 0.48rem;
  border-radius: 999px;
}

.free-tracks-banner {
  margin-top: 0.4rem;
}

/* Embedded 3-2-1 Countdown Dial */
.countdown-stage {
  background: linear-gradient(155deg, var(--ink-1000) 0%, var(--ink-900) 65%, var(--ink-800) 100%);
  color: #f5f5f0;
  border: 2px solid var(--gold-line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem) 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  min-height: 18rem;
}

.countdown-dial {
  position: relative;
  width: 8.2rem;
  height: 8.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.countdown-ring-track {
  fill: none;
  stroke: rgb(255 255 255 / 0.14);
  stroke-width: 8;
}

.countdown-ring-progress {
  fill: none;
  stroke: var(--signal);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.countdown-ring-progress.step-3 {
  stroke-dashoffset: 0;
}

.countdown-ring-progress.step-2 {
  stroke-dashoffset: 108.9;
}

.countdown-ring-progress.step-1 {
  stroke-dashoffset: 217.8;
}

@keyframes countdownPop {
  0% {
    transform: scale(0.68);
    opacity: 0.35;
  }
  55% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.countdown-num {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 3.1rem;
  font-weight: 800;
  color: var(--signal);
  line-height: 1;
}

.countdown-num.pop {
  animation: countdownPop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.countdown-sub {
  margin: 0;
  max-width: 44ch;
  color: var(--mist-hi);
  font-size: 0.94rem;
}

/* Bionic Reading & Focus Guide */
.bionic-lead {
  font-weight: 800;
  color: var(--ink-1000);
}

[data-theme="dark"] .bionic-lead {
  color: var(--signal);
}

.focus-guide-active .focus-para {
  opacity: 0.34;
  transition: opacity 0.18s ease, background-color 0.18s ease;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.55rem;
  margin-inline: -0.55rem;
}

.focus-guide-active .focus-para.is-focused {
  opacity: 1;
  background: rgb(217 169 46 / 0.12);
}

/* Eye Gymnastics Trainer */
.eyegym-stage {
  background: var(--ink-900);
  color: #f5f5f0;
  border-radius: var(--radius);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.eyegym-svg {
  width: 100%;
  max-width: 34rem;
  height: auto;
  display: block;
}

.eyegym-guide-path {
  fill: none;
  stroke: rgb(255 255 255 / 0.18);
  stroke-width: 2;
  stroke-dasharray: 5 5;
}

.eyegym-anchor {
  fill: rgb(255 255 255 / 0.45);
}

.eyegym-halo {
  fill: rgb(254 219 113 / 0.24);
}

.eyegym-dot {
  fill: var(--signal);
}

/* RSVP Progress Bar & Shortcuts */
.rsvp-bar-track {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  margin-top: 0.95rem;
  overflow: hidden;
}

.rsvp-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--signal);
  transition: width 0.14s linear;
}

.rsvp-chunk-phrase {
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  color: #ffffff;
}

/* Progress Level & Achievement Badges */
.level-banner {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.level-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.level-bar-track {
  width: 100%;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.level-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--signal-deep), var(--signal));
  border-radius: 999px;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.65rem;
}

.ach-badge {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line-hi);
  background: var(--surface-2);
  opacity: 0.56;
}

.ach-badge.unlocked {
  opacity: 1;
  border-style: solid;
  border-color: var(--gold-line);
  background: var(--accent-soft);
}

.badge-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.ach-badge strong {
  display: block;
  font-size: 0.92rem;
}

.ach-badge .muted {
  font-size: 0.8rem;
}

/* Multilingual script & RTL support */
[lang="zh"] {
  --font-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-serif: "Songti SC", "Noto Serif SC", "PingFang SC", serif;
}

[lang="ar"] {
  --font-sans: "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-serif: "Geeza Pro", "Noto Naskh Arabic", serif;
}

[lang="hi"] {
  --font-sans: "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif;
  --font-serif: "Kohinoor Devanagari", "Noto Serif Devanagari", serif;
}

[lang="bn"] {
  --font-sans: "Kohinoor Bangla", "Noto Sans Bengali", sans-serif;
  --font-serif: "Kohinoor Bangla", "Noto Serif Bengali", serif;
}

[dir="rtl"] .mini-module-btn,
[dir="rtl"] .option-btn,
[dir="rtl"] .link-btn {
  text-align: right;
}

[dir="rtl"] .review-item {
  border-left: 0;
  border-right: 4px solid var(--ok-line);
}

[dir="rtl"] .review-item.bad {
  border-right-color: var(--danger-line);
}

[dir="rtl"] .goal-list,
[dir="rtl"] .pkg-features,
[dir="rtl"] .stage-preview-list {
  padding-left: 0;
  padding-right: 1.2rem;
}

@media (max-width: 760px) {
  .header-inner {
    gap: 0.5rem;
  }

  .age-switcher {
    max-width: 100%;
    overflow-x: auto;
  }

  .lang-select {
    max-width: 7.2rem;
  }

  .builder-grid,
  .form-grid,
  .hero-norms {
    grid-template-columns: minmax(0, 1fr);
  }
}