:root {
  color-scheme: dark;
  --ink-950: oklch(10% 0.012 82);
  --ink-925: oklch(12.5% 0.012 82);
  --ink-900: oklch(15% 0.013 78);
  --ink-850: oklch(19% 0.014 76);
  --bone-100: oklch(93% 0.021 83);
  --bone-200: oklch(84% 0.021 82);
  --bone-300: oklch(74% 0.02 80);
  --bone-400: oklch(65% 0.018 78);
  --bone-600: oklch(58% 0.015 76);
  --gold-300: oklch(78% 0.105 78);
  --gold-400: oklch(68% 0.115 71);
  --rust-400: oklch(60% 0.13 38);
  --sage-400: oklch(68% 0.075 151);
  --violet-400: oklch(64% 0.075 303);
  --danger-400: oklch(65% 0.16 25);
  --surface-panel: oklch(15% 0.013 78 / 0.94);
  --surface-raised: oklch(19% 0.014 76 / 0.96);
  --line: oklch(63% 0.025 78 / 0.17);
  --line-strong: oklch(72% 0.035 78 / 0.32);
  --focus: var(--gold-300);
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --font-data: "SFMono-Regular", "Cascadia Mono", "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --z-stage: 1;
  --z-overlay: 20;
  --z-drawer: 40;
  --z-scrim: 30;
  --z-tooltip: 60;
  --detail-drawer-width: clamp(20rem, 32vw, 29rem);
}

* { box-sizing: border-box; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--ink-950);
  color: var(--bone-100);
  font-family: var(--font-body);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
a { color: var(--gold-300); }
.skip-link {
  position: fixed; z-index: 100; left: 1rem; top: 1rem; transform: translateY(-180%);
  background: var(--bone-100); color: var(--ink-950); padding: .75rem 1rem; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.app { position: relative; width: 100vw; height: 100dvh; overflow: hidden; background: var(--ink-950); }
.stage {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 50% 46%, oklch(24% 0.025 77 / .24), transparent 62%),
    radial-gradient(ellipse 55% 45% at 50% 118%, oklch(24% 0.055 38 / .22), transparent 70%),
    var(--ink-950);
  transition: right 420ms var(--ease-out);
}
#scene, .census-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#scene { z-index: var(--z-stage); touch-action: none; }
.census-canvas { z-index: 5; opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease-out); }
.census-canvas.on { opacity: 1; pointer-events: auto; }

/* Mobile catalog and detail drawers */
.catalog, .detail-panel {
  position: fixed; z-index: var(--z-drawer); background: var(--surface-panel); border-color: var(--line-strong);
  backdrop-filter: blur(18px) saturate(.8); -webkit-backdrop-filter: blur(18px) saturate(.8);
  transition: transform 420ms var(--ease-out), visibility 420ms;
}
.catalog {
  left: 0; right: 0; bottom: 0; height: min(84dvh, 52rem); display: flex; flex-direction: column;
  border-top: 1px solid var(--line-strong); border-radius: 1rem 1rem 0 0; transform: translateY(102%);
  padding-bottom: env(safe-area-inset-bottom); visibility: hidden; pointer-events: none;
}
.catalog.open { transform: translateY(0); visibility: visible; pointer-events: auto; }
.detail-panel {
  top: 0; right: 0; bottom: 0; width: min(100%, 30rem); transform: translateX(102%);
  visibility: hidden; pointer-events: none;
  border-left: 1px solid var(--line-strong); padding-top: env(safe-area-inset-top);
}
.detail-panel.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.sheet-handle { width: 2.5rem; height: .25rem; margin: .6rem auto 0; border-radius: 1rem; background: var(--line-strong); flex: none; }
.scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim); background: oklch(7% 0.01 78 / .68);
  opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease-in);
}
.scrim.on { opacity: 1; pointer-events: auto; }

.brand { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--line); }
.kicker, .section-label, .object-kind {
  margin: 0; color: var(--gold-300); font-size: .68rem; line-height: 1.2; letter-spacing: .15em; text-transform: uppercase;
}
.brand h1 { margin: .5rem 0 .75rem; font-family: var(--font-display); font-size: 2.15rem; line-height: .88; font-weight: 500; letter-spacing: -.04em; }
.brand h1 em { color: var(--gold-300); font-weight: 400; }
.brand-note { margin: 0; color: var(--bone-400); font-family: var(--font-display); font-size: .92rem; line-height: 1.45; max-width: 29ch; }

.search-wrap { display: grid; gap: .45rem; padding: 1rem 1rem .75rem; }
.search-wrap label { color: var(--bone-400); font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; }
.search-field { position: relative; }
.search-field svg { position: absolute; left: .78rem; top: 50%; width: 1rem; transform: translateY(-50%); color: var(--bone-600); pointer-events: none; }
.search-field input {
  width: 100%; min-height: 2.75rem; border: 1px solid var(--line); border-radius: .25rem;
  background: var(--ink-925); color: var(--bone-100); padding: .65rem .8rem .65rem 2.35rem;
}
.search-field input::placeholder { color: var(--bone-400); opacity: 1; }
.catalog-meta { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 0 1.05rem .65rem; color: var(--bone-600); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; }
.text-button { min-height: 2.75rem; border: 0; background: transparent; color: var(--gold-300); cursor: pointer; padding: .5rem; }
.object-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.object-row {
  width: 100%; min-height: 4.4rem; display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center;
  border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; padding: .7rem 1.05rem; cursor: pointer;
  transition: background-color 120ms linear;
}
.object-row:hover, .object-row[aria-selected="true"] { background: var(--ink-850); }
.catalog-empty { display: grid; gap: .45rem; padding: 1.4rem 1.05rem; border-top: 1px solid var(--line); color: var(--bone-400); font-size: .76rem; line-height: 1.5; }
.catalog-empty strong { color: var(--bone-200); font-family: var(--font-display); font-size: 1rem; font-weight: 400; }
.object-row[aria-selected="true"] .row-marker { background: var(--gold-300); box-shadow: 0 0 1rem oklch(78% .105 78 / .55); }
.row-marker { width: .42rem; height: .42rem; border-radius: 50%; background: var(--method-color, var(--bone-600)); }
.object-row > span:nth-child(2) { min-width: 0; }
.row-name { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--bone-100); }
.row-special .row-name { color: var(--gold-300); font-style: italic; }
.row-meta { display: block; margin-top: .15rem; color: var(--bone-400); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-distance { color: var(--bone-400); font-family: var(--font-data); font-size: .7rem; white-space: nowrap; }
.source-status { display: flex; gap: .55rem; align-items: center; border-top: 1px solid var(--line); padding: .75rem 1.05rem; color: var(--bone-600); font-size: .68rem; line-height: 1.35; }
.status-dot { width: .4rem; height: .4rem; flex: none; border-radius: 50%; background: var(--sage-400); box-shadow: 0 0 .75rem oklch(68% .075 151 / .45); }

.mobile-bar {
  position: absolute; z-index: var(--z-overlay); top: 0; left: 0; right: 0; min-height: calc(3.5rem + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 1rem 0; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, var(--ink-950), transparent); font-family: var(--font-display); font-size: .95rem;
}
.icon-label { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; color: var(--bone-200); padding: .5rem; font-size: .78rem; cursor: pointer; }
.icon-label svg { width: 1rem; }

.modes {
  position: absolute; z-index: var(--z-overlay); top: calc(4rem + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; padding: .2rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--ink-925);
}
.modes button { min-height: 2.4rem; border: 0; border-radius: 1.6rem; background: transparent; color: var(--bone-400); padding: .55rem .78rem; font-size: .72rem; cursor: pointer; white-space: nowrap; }
.modes button.active { background: var(--bone-100); color: var(--ink-950); }

.loading {
  position: absolute; inset: 0; z-index: 25; display: grid; place-content: center; justify-items: center; gap: 1rem;
  background: var(--ink-950); transition: opacity 520ms var(--ease-in), visibility 520ms;
}
.loading.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.loading p { color: var(--bone-400); font-family: var(--font-display); font-size: .85rem; letter-spacing: .08em; }
.loading-orbit { position: relative; width: 3rem; height: 3rem; border: 1px solid var(--line-strong); border-radius: 50%; }
.loading-orbit span { position: absolute; width: .45rem; height: .45rem; top: 50%; left: 50%; border-radius: 50%; background: var(--gold-300); transform-origin: -1.2rem 0; animation: loader 1.2s linear infinite; }
@keyframes loader { to { transform: rotate(360deg); } }

.hero-label {
  position: absolute; z-index: 8; left: 1rem; right: 1rem; top: calc(8rem + env(safe-area-inset-top)); text-align: center;
  pointer-events: none; transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out);
}
.hero-label.hidden { opacity: 0; transform: translateY(-.5rem); }
.hero-label h2 { margin: .35rem 0 .4rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 10vw, 4.6rem); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
.hero-label h2.special { color: var(--gold-300); font-style: italic; letter-spacing: -.06em; }
.sgra-star { display: inline-block; font-style: normal; font-size: .68em; vertical-align: .38em; margin-left: .05em; text-shadow: 0 0 1rem oklch(78% .105 78 / .5); }
.object-subtitle { margin: 0 auto; max-width: 33rem; color: var(--bone-400); font-family: var(--font-display); font-style: italic; font-size: .9rem; line-height: 1.45; }

.render-note {
  position: absolute; z-index: 9; left: 1rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); max-width: min(24rem, calc(100% - 2rem));
  color: var(--bone-400); font-size: .7rem;
}
.render-note > span { color: var(--bone-200); text-transform: uppercase; letter-spacing: .1em; }
.render-note button { min-height: 2.75rem; margin-left: .5rem; border: 0; background: transparent; color: var(--gold-300); cursor: pointer; }
.render-note p { display: none; margin: .35rem 0 0; padding: .75rem; background: var(--surface-raised); border: 1px solid var(--line); line-height: 1.55; }
.render-note.expanded p { display: block; }

.details-trigger {
  position: absolute; z-index: 12; left: 1rem; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); min-height: 3.25rem;
  display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line-strong); background: var(--bone-100); color: var(--ink-950);
  padding: .8rem 1rem; cursor: pointer; font-size: .8rem; letter-spacing: .03em;
}

.panel-close { position: absolute; z-index: 2; top: max(.7rem, env(safe-area-inset-top)); right: .75rem; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: var(--bone-400); font-size: 1.8rem; cursor: pointer; }
.detail-scroll { height: 100%; overflow-y: auto; padding: 4.5rem 1.4rem max(2rem, env(safe-area-inset-bottom)); }
.detail-heading h2 { margin: .4rem 0 .35rem; font-family: var(--font-display); font-size: 2.1rem; font-weight: 400; line-height: 1; }
.detail-heading p { margin: 0; color: var(--bone-400); font-size: .78rem; line-height: 1.5; }
.status-badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .75rem; }
.badge { display: inline-flex; align-items: center; min-height: 1.55rem; border: 1px solid var(--line-strong); padding: .2rem .5rem; color: var(--bone-200); font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; }
.badge.contested { border-color: var(--danger-400); color: oklch(82% .08 25); }
.badge.special { border-color: var(--gold-400); color: var(--gold-300); }
.uncertainty-callout { margin: 1.3rem 0 1rem; border-block: 1px solid var(--line); padding: .85rem 0; color: var(--bone-200); font-family: var(--font-display); font-size: .95rem; line-height: 1.55; }
.uncertainty-callout strong { color: var(--gold-300); font-weight: 500; }
.measurements { margin: 0; }
.measurement { display: grid; grid-template-columns: minmax(6rem, .85fr) 1.3fr; gap: .7rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.measurement dt { color: var(--bone-400); font-size: .73rem; }
.measurement dd { margin: 0; color: var(--bone-100); font-family: var(--font-data); font-size: .75rem; line-height: 1.5; text-align: right; }
.provenance { display: inline-block; margin-left: .25rem; color: var(--sage-400); font-family: var(--font-body); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.provenance.derived { color: var(--gold-300); }
.uncertainty-bar { position: relative; height: .2rem; margin-top: .4rem; background: var(--ink-850); }
.uncertainty-bar span { position: absolute; top: 0; bottom: 0; left: var(--low, 30%); right: calc(100% - var(--high, 70%)); background: var(--gold-400); }
.radius-story { margin: 1.4rem 0; padding: 1rem 0 1rem 1rem; border-left: 1px solid var(--gold-400); }
.radius-story .radius-value { margin: .35rem 0; color: var(--gold-300); font-family: var(--font-display); font-size: 1.65rem; }
.radius-story p { margin: .35rem 0 0; color: var(--bone-200); font-family: var(--font-display); font-size: .94rem; line-height: 1.55; }
.evidence-section, .matter-section { margin-top: 1.4rem; }
.evidence-section > p:last-child, .matter-section > p:last-child { color: var(--bone-200); line-height: 1.65; font-size: .86rem; }
.source-links { display: grid; gap: .55rem; margin-top: 1.4rem; }
.source-link { display: grid; grid-template-columns: 1fr auto; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--line); color: var(--bone-200); text-decoration: none; font-size: .76rem; line-height: 1.4; }
.source-link span:last-child { color: var(--gold-300); }
.guide-actions { margin-top: 1.7rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.level-picker { display: grid; gap: .35rem; margin-top: .75rem; color: var(--bone-400); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.level-picker select { min-height: 2.75rem; width: 100%; border: 1px solid var(--line-strong); border-radius: 0; background: var(--ink-925); color: var(--bone-100); padding: .55rem .7rem; }
.guide-actions button { min-height: 2.75rem; margin: .6rem .35rem 0 0; border: 1px solid var(--line-strong); background: var(--ink-925); color: var(--bone-200); padding: .55rem .7rem; cursor: pointer; font-size: .72rem; }
.guide-note { margin: .5rem 0 0; color: var(--bone-400); font-size: .7rem; line-height: 1.5; }
.guide-actions button[aria-pressed="true"] { border-color: var(--gold-400); color: var(--gold-300); }
.guide-response { display: none; margin-top: .8rem; padding: .9rem 1rem; background: var(--ink-925); border-left: 1px solid var(--gold-400); color: var(--bone-200); font-family: var(--font-display); line-height: 1.6; font-size: .88rem; }
.guide-response.on { display: block; }
.guide-response p { margin: 0 0 .7rem; }
.guide-response p:last-child { margin-bottom: 0; }
.guide-response strong { color: var(--gold-300); font-weight: 500; }
.guide-response small { color: var(--bone-400); font-family: var(--font-body); font-size: .68rem; line-height: 1.5; }

.quiz-question { font-size: .95rem; }
.quiz-options { display: grid; gap: .4rem; margin: 0 0 .7rem; }
.quiz-option {
  width: 100%; min-height: 2.75rem; border: 1px solid var(--line); background: transparent; color: var(--bone-200);
  padding: .6rem .7rem; text-align: left; font-family: var(--font-body); font-size: .74rem; line-height: 1.4; cursor: pointer;
  transition: background-color 120ms linear, border-color 120ms linear;
}
.quiz-option:hover:not(:disabled) { background: var(--ink-850); border-color: var(--line-strong); }
.quiz-option:disabled { cursor: default; }
.quiz-option.correct { border-color: var(--sage-400); color: oklch(82% .075 151); }
.quiz-option.chosen-wrong { border-color: var(--danger-400); color: oklch(80% .09 25); }
/* Glyphs so the verdict never depends on colour alone. */
.quiz-option.correct::after { content: " ✓"; font-weight: 700; }
.quiz-option.chosen-wrong::after { content: " ✗"; font-weight: 700; }
.quiz-verdict { margin: 0; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .84rem; line-height: 1.6; }

.census-overlay {
  position: absolute; z-index: 8; inset: calc(7.4rem + env(safe-area-inset-top)) 1rem auto; opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease-out); display: grid; gap: 1.5rem;
}
.census-overlay.on { opacity: 1; pointer-events: auto; }
.census-copy { display: grid; align-content: start; gap: .55rem; }
.census-overlay h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3.1vw, 3.15rem); line-height: 1.02; }
.census-overlay p:not(.section-label) { max-width: 54ch; margin: 0; color: var(--bone-400); font-size: .75rem; line-height: 1.48; }
.census-key { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin-top: .55rem; color: var(--bone-300); font-size: .67rem; }
.census-key span { display: inline-flex; align-items: center; gap: .35rem; }
.census-key i { display: inline-block; color: var(--gold-300); font-style: normal; }
.point-key { width: .42rem; height: .42rem; border-radius: 50%; background: var(--gold-300); }
.interval-key { width: 1rem; height: 1px; background: var(--gold-300); }
.limit-key { font-size: 1rem; line-height: .5; }
.census-overlay .census-coverage { margin-top: .1rem; color: var(--gold-300); font-family: var(--font-data); }
.filter-row { display: grid; grid-template-columns: repeat(2, minmax(8.5rem, 1fr)); align-content: end; gap: .65rem .8rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.filter-row fieldset { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-row .method-filters { grid-column: 1 / -1; }
.filter-row legend, .filter-row label { color: var(--bone-600); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.filter-row legend { flex-basis: 100%; margin-bottom: .05rem; }
.filter-row label { display: grid; gap: .25rem; }
.filter-row button { min-height: 2.35rem; flex: 1 1 auto; border: 1px solid var(--line); background: var(--ink-925); color: var(--bone-400); padding: .4rem .6rem; font-size: .63rem; cursor: pointer; }
.filter-row button.active { color: var(--ink-950); background: var(--bone-100); }
.filter-row select { min-height: 2.35rem; width: 100%; border: 1px solid var(--line); background: var(--ink-925); color: var(--bone-200); padding: .4rem 1.8rem .4rem .55rem; font-size: .66rem; text-transform: none; }
.census-tip { position: absolute; z-index: var(--z-tooltip); display: none; pointer-events: none; padding: .65rem .75rem; background: var(--surface-raised); border: 1px solid var(--line-strong); color: var(--bone-200); font-size: .7rem; line-height: 1.4; }
.census-tip strong { display: block; color: var(--bone-100); font-family: var(--font-display); font-size: .9rem; }
.census-data { margin-top: .4rem; border-top: 1px solid var(--line); color: var(--bone-200); }
.census-data summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; color: var(--gold-300); font-size: .72rem; line-height: 1.4; }
.census-table-wrap { max-height: min(20rem, 42dvh); overflow: auto; border: 1px solid var(--line); background: var(--ink-925); }
.census-table { width: 100%; min-width: 34rem; border-collapse: collapse; color: var(--bone-200); font-size: .68rem; line-height: 1.4; }
.census-table th, .census-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.census-table th { position: sticky; top: 0; z-index: 1; background: var(--ink-850); color: var(--bone-100); font-size: .61rem; letter-spacing: .07em; text-transform: uppercase; }
.census-table td:nth-child(3), .census-table td:nth-child(4) { font-family: var(--font-data); }
.census-table button { min-height: 2.75rem; border: 1px solid var(--line-strong); background: transparent; color: var(--gold-300); padding: .45rem .65rem; cursor: pointer; white-space: nowrap; }

.intro {
  position: absolute; z-index: 18; left: 50%; top: 50%; width: min(44rem, calc(100% - 5rem));
  transform: translate(-50%, -44%); padding: 2.4rem 2.6rem; border: 1px solid var(--line-strong);
  background: linear-gradient(135deg, oklch(13% .014 78 / .97), oklch(16% .02 68 / .91));
  box-shadow: 0 2rem 8rem oklch(4% .01 70 / .76); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out), visibility 420ms;
}
.intro.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); }
.intro h2 { margin: .7rem 0 1rem; font-family: var(--font-display); font-size: clamp(2.2rem, 4.2vw, 4.35rem); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.intro h2 em { color: var(--gold-300); font-weight: 400; }
.intro > p:not(.section-label) { max-width: 58ch; color: var(--bone-200); line-height: 1.65; }
.intro-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.45rem; }
.intro-actions button { min-height: 3rem; border: 1px solid var(--bone-100); padding: .7rem 1rem; background: var(--bone-100); color: var(--ink-950); cursor: pointer; }
.intro-actions button + button { border-color: var(--line-strong); background: transparent; color: var(--bone-100); }
.intro-skip { margin-top: .9rem; border: 0; background: transparent; color: var(--gold-300); padding: .45rem 0; cursor: pointer; }

.lesson {
  position: absolute; z-index: 10; inset: 5.6rem 2rem 2rem; display: grid; grid-template-columns: minmax(13.5rem, 16rem) minmax(0, 1fr);
  overflow: hidden; background: var(--surface-panel); border: 1px solid var(--line-strong); opacity: 0; visibility: hidden; transform: translateY(.8rem);
  transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out), visibility 420ms;
}
.lesson.on { opacity: 1; visibility: visible; transform: translateY(0); }
.learn-index { padding: 2rem 1.35rem; overflow-y: auto; border-right: 1px solid var(--line); background: oklch(12.5% .012 82 / .72); }
.learn-index h2 { margin: .65rem 0 .8rem; font-family: var(--font-display); font-size: 1.55rem; line-height: 1.05; font-weight: 400; }
.learn-index > p:not(.section-label) { margin: 0; color: var(--bone-400); font-size: .74rem; line-height: 1.55; }
.learn-topics { display: grid; margin-top: 1.4rem; border-top: 1px solid var(--line); }
.learn-topics button { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--bone-400); padding: .78rem .15rem; text-align: left; cursor: pointer; font-family: var(--font-display); font-size: .92rem; line-height: 1.2; }
.learn-topics button span { color: var(--bone-600); font-family: var(--font-data); font-size: .62rem; padding-top: .18rem; }
.learn-topics button.active { color: var(--gold-300); }
.learn-reader { overflow-y: auto; padding: clamp(2rem, 5vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3.2rem); }
.lesson-progress { height: .15rem; max-width: 36rem; background: var(--ink-850); margin-bottom: 1rem; }
.lesson-progress span { display: block; height: 100%; width: 100%; background: var(--gold-300); transition: transform 320ms var(--ease-out); transform-origin: left; }
.lesson-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 42rem; }
.lesson-status { margin: 0; border: 1px solid var(--line-strong); padding: .25rem .5rem; color: var(--sage-400); font-size: .59rem; letter-spacing: .1em; text-transform: uppercase; }
.lesson-status[data-tone="theory"] { color: var(--gold-300); }
.lesson-status[data-tone="open"] { color: oklch(76% .08 300); }
.lesson-status[data-tone="speculative"] { color: oklch(75% .1 28); border-color: oklch(60% .1 28 / .45); }
.learn-reader h2 { max-width: 17ch; margin: .8rem 0 1rem; font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 4.2rem); line-height: .95; font-weight: 400; letter-spacing: -.035em; }
.learn-reader > p { max-width: 52rem; color: var(--bone-200); line-height: 1.68; font-size: .94rem; }
.lesson-example { max-width: 48rem; margin: 1.3rem 0; padding: 1rem 0; border-block: 1px solid var(--line); color: var(--gold-300); font-family: var(--font-display); font-size: 1.04rem; line-height: 1.6; white-space: pre-line; }
.lesson-sources { display: flex; flex-wrap: wrap; gap: .5rem 1rem; max-width: 48rem; }
.lesson-sources a { color: var(--bone-400); font-size: .69rem; line-height: 1.4; }
.lesson-controls { display: flex; justify-content: space-between; gap: 1rem; max-width: 48rem; margin-top: 1.6rem; }
.lesson-controls button { min-height: 2.75rem; border: 1px solid var(--line-strong); background: transparent; padding: .6rem 1rem; cursor: pointer; }
.lesson-controls button:last-child { background: var(--bone-100); color: var(--ink-950); }

@media (min-width: 48rem) {
  .catalog { left: 0; right: auto; top: 0; bottom: 0; width: 20rem; height: 100dvh; border-radius: 0; border-top: 0; border-right: 1px solid var(--line); transform: translateX(0); visibility: visible; pointer-events: auto; }
  .sheet-handle, .mobile-bar { display: none; }
  .stage { left: 20rem; }
  .detail-panel { width: var(--detail-drawer-width); }
  .modes { top: 1rem; }
  .hero-label { top: 5.6rem; left: 3rem; right: 3rem; }
  .hero-label h2 { font-size: clamp(3.3rem, 6vw, 5.8rem); }
  .object-subtitle { font-size: 1rem; }
  .render-note { left: 1.5rem; bottom: 1.5rem; }
  .details-trigger { left: auto; right: 1.5rem; bottom: 1.5rem; width: 15rem; }
  .census-overlay { inset: 5.6rem 2rem auto; }
}

/* Keep all text and controls reachable when desktop zoom produces a short CSS viewport. */
@media (max-width: 47.99rem) and (max-height: 38rem) {
  .intro {
    top: calc(7.2rem + env(safe-area-inset-top)); bottom: max(.75rem, env(safe-area-inset-bottom));
    left: 1rem; width: auto; max-height: none; overflow-y: auto;
    transform: translateY(.5rem); padding: 1.4rem 1.5rem;
  }
  .intro.on { transform: translateY(0); }
  .census-overlay {
    top: calc(7.4rem + env(safe-area-inset-top)); bottom: max(.75rem, env(safe-area-inset-bottom));
    overflow-y: auto; padding-right: .35rem;
  }
}

@media (min-width: 64rem) {
  .app.details-open .stage { right: var(--detail-drawer-width); }
  .census-overlay { grid-template-columns: minmax(20rem, 1.15fr) minmax(18rem, .85fr); align-items: end; gap: clamp(1rem, 2vw, 2.5rem); }
}

@media (min-width: 72rem) {
  .catalog { width: 22rem; }
  .stage { left: 22rem; }
  .detail-panel.open ~ * { pointer-events: auto; }
  .detail-scroll { padding-inline: 1.8rem; }
}

@media (pointer: coarse) {
  .modes button, .filter-row button, .guide-actions button { min-height: 2.75rem; }
}

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