/* ========================================================
   Claude plays ARC-AGI-3 — destination writeup
   "Archival research dossier" aesthetic
   ======================================================== */

:root {
  /* Type stacks */
  --ff-serif: "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style", Georgia, ui-serif, serif;
  --ff-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ff-sans:  -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Palette — warm near-black, oxidized paper aged into the dark */
  --bg:        oklch(0.155 0.005 60);
  --bg-1:      oklch(0.180 0.006 60);
  --bg-2:      oklch(0.215 0.007 60);
  --bg-3:      oklch(0.260 0.008 60);
  --bg-frame:  oklch(0.110 0.004 60);

  --text:      oklch(0.950 0.008 80);
  --text-2:    oklch(0.890 0.010 78);
  --muted:     oklch(0.775 0.012 75);
  --dim:       oklch(0.705 0.011 72);
  --faint:     oklch(0.520 0.009 65);
  --rule:      oklch(0.300 0.008 65);
  --rule-soft: oklch(0.235 0.008 65);

  --accent:        oklch(0.78 0.14 65);    /* amber/phosphor */
  --accent-soft:   oklch(0.78 0.14 65 / 0.15);
  --accent-quiet:  oklch(0.78 0.14 65 / 0.45);

  --diff-add:  oklch(0.78 0.13 145);
  --diff-del:  oklch(0.70 0.16 28);
  --info:      oklch(0.74 0.10 220);

  /* Scale */
  --measure: 36rem;        /* prose column */
  --measure-wide: 60rem;
  --gutter: 2rem;
  --rhythm: 1.7;

  /* Density (tweakable) */
  --section-gap: clamp(5rem, 9vw, 9rem);
  --para-gap: 1.2em;
}

/* ========== Reset / base ========== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
:target, section[id], .hero[id] { scroll-margin-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--ff-serif);
  font-size: 19px;
  line-height: var(--rhythm);
  font-weight: 450;
  font-feature-settings: "kern", "liga", "onum";
  text-wrap: pretty;
}

::selection { background: var(--accent-soft); color: var(--text); }

img, svg, canvas { display: block; max-width: 100%; }

a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 120ms ease, color 120ms ease;
}
a:hover { border-bottom-color: var(--accent); color: var(--accent); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

/* ========== Layout primitives ========== */

.page {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.col {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.col-wide {
  max-width: var(--measure-wide);
  margin-left: auto;
  margin-right: auto;
}

.muted { color: var(--muted); }
.dim   { color: var(--dim); }
.mono  { font-family: var(--ff-mono); font-feature-settings: "tnum","zero"; }
.serif { font-family: var(--ff-serif); }
.eye {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.tnum { font-variant-numeric: tabular-nums; }

p { margin: 0 0 var(--para-gap); }
p + p { text-indent: 1.4em; }            /* book-like indent on continued paragraphs */
.col p:first-of-type, .lede + p { text-indent: 0; }

.lede {
  font-size: 1.22em;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 1.6em;
}
.lede::first-letter {
  /* gentle drop-cap-ish lead */
  font-weight: 600;
}

em { font-style: italic; color: var(--text); }
strong { font-weight: 600; color: var(--text); }

code, kbd, samp {
  font-family: var(--ff-mono);
  font-size: 0.92em;
  background: var(--bg-2);
  padding: 0.08em 0.36em;
  border-radius: 2px;
  color: var(--text-2);
}

/* ========== Public-preview banner ========== */

.preview-banner {
  background: color-mix(in oklab, var(--accent) 7%, var(--bg));
  border-bottom: 1px solid var(--rule-soft);
}
.preview-banner-inner {
  max-width: var(--measure-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.6rem clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}
.preview-badge {
  flex: none;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-quiet);
  border-radius: 3px;
  padding: 0.3em 0.75em;
  white-space: nowrap;
}
.preview-note {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.preview-note b { color: var(--text-2); font-weight: 500; }

/* ========== Top bar ========== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule-soft);
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.topbar-title { color: var(--text-2); }
.topbar-title b { color: var(--text); font-weight: 500; }
.topbar-nav { display: flex; align-items: center; gap: 1.6em; }
.topbar-nav a { border: 0; color: var(--muted); }
.topbar-nav a:hover { color: var(--accent); }
.topbar-nav a.nav-primary { color: var(--text); font-weight: 600; }

/* ========== On-this-page rail ==========
   In-page section jumps live here, not in the top bar (which keeps only the
   real page links: Cinema, Run archive). Ticks hug the left edge; labels reveal on
   hover. Mobile-first: hidden by default, shown only where the centered page
   leaves gutter room. */
.section-rail {
  display: none;
}
@media (min-width: 1100px) {
  .section-rail {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    position: fixed;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}
.section-rail a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.32rem 0;
  border: 0;
  color: var(--dim);
}
.section-rail .rail-tick {
  width: 16px;
  height: 1px;
  background: var(--rule);
  flex: none;
  transition: width 0.16s ease, background 0.16s ease;
}
.section-rail .rail-lbl {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease;
  white-space: nowrap;
}
.section-rail a:hover .rail-lbl,
.section-rail a.active .rail-lbl {
  opacity: 1;
  transform: none;
}
.section-rail a:hover .rail-tick,
.section-rail a.active .rail-tick {
  width: 28px;
  background: var(--accent);
}
.section-rail a.active .rail-lbl { color: var(--accent); }
.section-rail a:hover .rail-lbl { color: var(--text-2); }

/* ========== Hero / run record ========== */

.hero {
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.run-record {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4rem;
}
.run-record > div {
  background: var(--bg);
  padding: 0.8rem 1rem 0.95rem;
}
.run-record dt {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.run-record dd {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-2);
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.run-record dd .accent { color: var(--accent); }

@media (max-width: 800px) {
  .run-record { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .run-record { grid-template-columns: repeat(2, 1fr); }
}

.hero-title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0 0 2.4rem;
  max-width: 22ch;
  color: var(--text);
}
.hero-title .accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}
.hero-title .num {
  font-feature-settings: "lnum", "tnum";
}

.hero-deck {
  font-family: var(--ff-serif);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--text);
  max-width: 56ch;
  margin: 0 0 2.5rem;
}
.hero-deck .accent { color: var(--accent); }

.hero-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--rule-soft);
  padding-top: 1.2rem;
}
.hero-byline span b { color: var(--text-2); font-weight: 500; }

/* ========== Sections ========== */

section.sec {
  padding-top: var(--section-gap);
  padding-bottom: 0;
}

.sec-header {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 2rem;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
  margin-bottom: 3rem;
}
.sec-num {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 0.55em;
}
.sec-title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
  color: var(--text);
}
.sec-title em { color: var(--accent); font-style: italic; }
.sec-sub {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .sec-header { grid-template-columns: 1fr; gap: 0.5rem; }
  .sec-num { padding-top: 0; }
}

/* ========== §1 Premise / thesis ========== */

.thesis-body {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) clamp(150px, 18vw, 220px);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  justify-content: center;
  max-width: var(--measure-wide);
  margin: 0 auto;
}
.thesis-body .col {
  margin: 0;
}
.thesis-mascot {
  position: relative;
  margin: 0;
}
.thesis-mascot img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.95;
  animation: thesis-line-glow 13s ease-in-out infinite;
}

/* Aura: a soft amber cloud that drifts behind the line-art. The opaque
   white strokes paint on top, so the glow only ever shows in the
   transparent negative space — it stays outside the white lines. */
.thesis-aura,
.thesis-aura::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  -webkit-mask: radial-gradient(closest-side, #000 48%, transparent 100%);
          mask: radial-gradient(closest-side, #000 48%, transparent 100%);
}
.thesis-aura {
  background:
    radial-gradient(32% 36% at 40% 38%, oklch(0.80 0.15 70 / 0.50), transparent 70%),
    radial-gradient(28% 30% at 64% 56%, oklch(0.78 0.14 45 / 0.42), transparent 72%),
    radial-gradient(38% 32% at 50% 68%, oklch(0.80 0.12 120 / 0.26), transparent 75%);
  filter: blur(18px);
  opacity: 0.45;
  animation: thesis-aura-a 32s infinite both;
}
.thesis-aura::before {
  background:
    radial-gradient(34% 36% at 60% 40%, oklch(0.82 0.14 85 / 0.40), transparent 72%),
    radial-gradient(30% 32% at 38% 60%, oklch(0.76 0.13 30 / 0.34), transparent 74%),
    radial-gradient(26% 28% at 66% 70%, oklch(0.78 0.11 200 / 0.22), transparent 76%);
  filter: blur(22px);
  opacity: 0.34;
  animation: thesis-aura-b 44s -7s infinite both;
}

/* Gravity-well motion: each state is a "well" the aura settles into and
   lingers in — the dwell window is long and the drift within it is a hair,
   so it reads as held-still. Then a short, steep cubic-bezier launches it to
   the next well: a clear uptick that decelerates hard as it arrives.
   Each state is a similarly-spread field tugged toward a DIFFERENT direction
   (translate + rotation + hue), not a big-vs-small pulse — so the states read
   as distinct harnesses pulling the same aura different ways. Kept low/ambient. */
@keyframes thesis-aura-a {
  /* well 1 — pulled up-right, gold */
  0%    { transform: translate(10%, -8%) scale(1.16) rotate(18deg);   opacity: 0.46; filter: blur(18px) hue-rotate(30deg);  animation-timing-function: ease-in-out; }
  24%   { transform: translate(11%, -7%) scale(1.17) rotate(21deg);   opacity: 0.42; filter: blur(18px) hue-rotate(33deg);  animation-timing-function: cubic-bezier(0.85, 0, 0.12, 1); }
  /* well 2 — pulled down-left, amber */
  33.3% { transform: translate(-11%, 6%) scale(1.10) rotate(-40deg);  opacity: 0.40; filter: blur(20px) hue-rotate(-34deg); animation-timing-function: ease-in-out; }
  57.3% { transform: translate(-12%, 7%) scale(1.11) rotate(-43deg);  opacity: 0.36; filter: blur(20px) hue-rotate(-37deg); animation-timing-function: cubic-bezier(0.85, 0, 0.12, 1); }
  /* well 3 — pulled down, green-gold */
  66.6% { transform: translate(1%, 11%) scale(1.18) rotate(64deg);    opacity: 0.44; filter: blur(19px) hue-rotate(10deg);  animation-timing-function: ease-in-out; }
  90.6% { transform: translate(0%, 12%) scale(1.19) rotate(67deg);    opacity: 0.40; filter: blur(19px) hue-rotate(7deg);   animation-timing-function: cubic-bezier(0.85, 0, 0.12, 1); }
  100%  { transform: translate(10%, -8%) scale(1.16) rotate(18deg);   opacity: 0.46; filter: blur(18px) hue-rotate(30deg); }
}
@keyframes thesis-aura-b {
  /* state 1 — pulled right, warm */
  0%    { transform: translate(11%, -1%) scale(1.12) rotate(30deg);   opacity: 0.36; filter: blur(20px) hue-rotate(24deg);  animation-timing-function: ease-in-out; }
  24%   { transform: translate(12%, 0%) scale(1.13) rotate(33deg);    opacity: 0.32; filter: blur(20px) hue-rotate(27deg);  animation-timing-function: cubic-bezier(0.85, 0, 0.12, 1); }
  /* state 2 — pulled up-left, cool */
  33.3% { transform: translate(-9%, -8%) scale(1.14) rotate(-30deg);  opacity: 0.32; filter: blur(22px) hue-rotate(-28deg); animation-timing-function: ease-in-out; }
  57.3% { transform: translate(-10%, -9%) scale(1.15) rotate(-33deg); opacity: 0.28; filter: blur(22px) hue-rotate(-31deg); animation-timing-function: cubic-bezier(0.85, 0, 0.12, 1); }
  /* state 3 — pulled down-right, hot-gold */
  66.6% { transform: translate(7%, 9%) scale(1.08) rotate(12deg);     opacity: 0.36; filter: blur(19px) hue-rotate(46deg);  animation-timing-function: ease-in-out; }
  90.6% { transform: translate(8%, 10%) scale(1.09) rotate(15deg);    opacity: 0.32; filter: blur(19px) hue-rotate(49deg);  animation-timing-function: cubic-bezier(0.85, 0, 0.12, 1); }
  100%  { transform: translate(11%, -1%) scale(1.12) rotate(30deg);   opacity: 0.36; filter: blur(20px) hue-rotate(24deg); }
}
@keyframes thesis-line-glow {
  0%, 100% { filter: drop-shadow(0 0 5px oklch(0.80 0.15 70 / 0.35)); }
  50%      { filter: drop-shadow(0 0 11px oklch(0.82 0.14 85 / 0.55)); }
}

@media (max-width: 800px) {
  .thesis-body { grid-template-columns: 1fr; gap: 2.5rem; }
  .thesis-mascot {
    max-width: 220px;
    margin: 0 auto;
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thesis-mascot img,
  .thesis-aura,
  .thesis-aura::before { animation: none; }
  .thesis-mascot img { filter: drop-shadow(0 0 8px oklch(0.80 0.15 70 / 0.4)); }
}

.premise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
}
.premise > div { max-width: 38ch; }
.premise h3 {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 0.8rem;
}
@media (max-width: 800px) {
  .premise { grid-template-columns: 1fr; gap: 2rem; }
}

/* ========== §2 Plates (frame showcase) ========== */

.plates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2.6rem 1.6rem;
  margin-top: 0;
}
.plate {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.plate-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-frame);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 1px solid var(--rule-soft);
}
.plate-cap {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.45rem;
}
.plate-cap b { color: var(--text-2); font-weight: 500; }
.plate-note {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}

.plates-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.plates-intro p { color: var(--text-2); }
@media (max-width: 800px) {
  .plates-intro { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Featured plate (oversized) */
.plate-feature {
  display: grid;
  grid-template-columns: minmax(260px, 32%) 1fr;
  gap: 2.2rem;
  margin: 4.5rem 0 4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--rule-soft);
  align-items: start;
}
.plate-feature .plate-img {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.plate-feature .desc {
  max-width: 44ch;
}
.plate-feature .desc p { color: var(--text-2); }
@media (max-width: 700px) {
  .plate-feature { grid-template-columns: 1fr; }
}

/* ========== §3 Timeline ========== */

.tl {
  position: relative;
  border-left: 1px solid var(--rule-soft);
  margin-left: 1.5rem;
  padding-left: 0;
}
.tl-entry {
  position: relative;
  padding: 0 0 2.6rem 2.5rem;
}
.tl-entry::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0.95rem;
  width: 5px;
  height: 5px;
  background: var(--rule);
  border-radius: 50%;
}
.tl-entry.is-key::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent-quiet);
  width: 7px;
  height: 7px;
  left: -4px;
}

.tl-meta {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.tl-meta .turn { color: var(--accent); }
.tl-meta .tag { color: var(--muted); }
.tl-meta .tag.tool { color: var(--info); }
.tl-meta .tag.refute { color: var(--diff-del); }
.tl-meta .tag.confirm { color: var(--diff-add); }

.tl-title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.4;
  margin: 0 0 0.35rem;
  color: var(--text);
}
.tl-entry.is-key .tl-title {
  font-size: 1.6rem;
  line-height: 1.25;
  margin-bottom: 0.6rem;
  letter-spacing: -0.005em;
  font-style: italic;
  position: relative;
}
.tl-entry.is-key .tl-title::before {
  content: "\201C";
  position: absolute;
  left: -0.62em;
  top: 0.06em;
  font-size: 2em;
  line-height: 1;
  font-style: normal;
  color: var(--accent-quiet);
}
/* The whole key entry — title, body, and the "next" line — is one verbatim
   quotation from the run's journal. The opening mark hangs by the title; the
   closing mark (.tl-qclose, appended in JS) trails the last line of text. */
.tl-qclose {
  font-style: normal;
  font-size: 1.5em;
  line-height: 0;
  color: var(--accent-quiet);
  margin-left: 0.08em;
  vertical-align: -0.28em;
}
.tl-body {
  color: var(--text-2);
  font-size: 0.96rem;
  line-height: 1.55;
  max-width: 50ch;
}

.tl-detail {
  margin-top: 0.9rem;
  background: var(--bg-1);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  padding: 0.9rem 1rem;
  font-family: var(--ff-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre;
  overflow-x: auto;
  max-width: 56ch;
}

.tl-expand {
  margin-top: 0.6rem;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px dashed var(--rule);
  padding: 0 0 1px;
}
.tl-expand:hover { color: var(--accent); border-color: var(--accent); }
.tl-detail[hidden] { display: none; }

.tl-frame {
  display: inline-block;
  margin-top: 0.9rem;
  width: 96px;
  height: 96px;
  background: var(--bg-frame);
  border: 1px solid var(--rule-soft);
  image-rendering: pixelated;
}

/* Hidden raw events between key moments */
.tl-raw {
  margin: -0.4rem 0 1.2rem;
  padding-left: 2.5rem;
}
.tl-raw-toggle {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px dashed var(--rule-soft);
  padding-bottom: 1px;
}
.tl-raw-toggle:hover { color: var(--accent); border-color: var(--accent); }

.tl-raw-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--dim);
  letter-spacing: 0.04em;
}
.tl-raw-list li {
  display: grid;
  grid-template-columns: 4ch 7ch 1fr;
  gap: 1.2rem;
  padding: 0.18rem 0;
  border-bottom: 1px dotted var(--rule-soft);
}
.tl-raw-list .col-turn { color: var(--accent); }
.tl-raw-list .col-tool { color: var(--info); }
.tl-raw-list[hidden] { display: none; }

/* ========== §4 Theory evolution ========== */

.theory {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 60rem;
  margin: 0 auto;
}
.theory-frame {
  background: var(--bg-1);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
}
.theory-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.theory-bar .label { color: var(--dim); }
.theory-bar .turn-readout { color: var(--accent); font-size: 12px; }
.theory-bar .stamp { font-size: 10.5px; }

.theory-track {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
}
.theory-track input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  margin: 0;
  height: 32px;
}
.theory-track input[type=range]::-webkit-slider-runnable-track {
  height: 1px; background: var(--rule);
}
.theory-track input[type=range]::-moz-range-track {
  height: 1px; background: var(--rule);
}
.theory-track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-1);
  margin-top: -5px;
  cursor: grab;
}
.theory-track input[type=range]::-moz-range-thumb {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-1);
  cursor: grab;
}
.theory-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.theory-ticks span {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 8px;
  background: var(--rule);
  transform: translate(-50%, -50%);
}
.theory-ticks span.key {
  background: var(--accent);
  height: 14px;
}

.theory-doc {
  padding: 1.6rem 1.6rem 2rem;
  font-family: var(--ff-mono);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--text-2);
  min-height: 28rem;
}
.theory-doc h1 {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 1.2rem;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 0.6rem;
}
.theory-doc .add { color: var(--diff-add); }
.theory-doc .del { color: var(--diff-del); text-decoration: line-through; opacity: 0.55; }
.theory-doc .h  { color: var(--accent); }
.theory-doc .q  { color: var(--info); }
.theory-doc .strike { text-decoration: line-through; opacity: 0.4; }

.theory-snapshots {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.theory-snapshots button {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  background: var(--bg-1);
}
.theory-snapshots button:hover { color: var(--accent); border-color: var(--accent-quiet); }
.theory-snapshots button[aria-current="true"] { color: var(--accent); border-color: var(--accent); }

/* ========== §5 Methodology ========== */

.method {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 3.5rem;
}
.method h3 {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 0.8rem;
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.9rem;
}
.method p { color: var(--text-2); }
.method ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.method li {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.7rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: baseline;
}
.method li .lab {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  min-width: 4ch;
}
.method li.ruled .lab { color: var(--diff-del); }
.method li.open  .lab { color: var(--info); }

@media (max-width: 800px) {
  .method { grid-template-columns: 1fr; gap: 2rem; }
}

/* Limitations callout */
.callout {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  padding: 1.2rem 1.4rem;
  margin: 2rem 0;
  background: var(--bg-1);
  font-size: 0.96rem;
  color: var(--text-2);
}
.callout .lab {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: block;
}

/* ========== §6 Appendix ========== */

.appendix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  margin-top: 1rem;
}
.appendix-row {
  display: grid;
  grid-template-columns: 4rem 18rem 1fr auto;
  gap: 1.6rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
  font-family: var(--ff-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--text-2);
}
.appendix-row .num { color: var(--dim); }
.appendix-row .ttl { color: var(--text); letter-spacing: 0; font-family: var(--ff-serif); font-size: 1rem; }
.appendix-row .desc { color: var(--muted); font-family: var(--ff-serif); font-size: 0.92rem; }
.appendix-row .lnk { color: var(--accent); }
.appendix-row .lnk:hover { color: var(--text); }
@media (max-width: 800px) {
  .appendix-row { grid-template-columns: 3rem 1fr auto; }
  .appendix-row .desc { display: none; }
}

/* ========== Footer ========== */

footer.foot {
  padding: 6rem 0 3rem;
  margin-top: 6rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* ========== Three families nav ========== */

.families {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 3.5rem;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
.family {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.4rem 1.4rem 1.6rem;
  background: var(--bg);
  border: 0;
  color: var(--text);
  transition: background 120ms ease;
}
.family:hover { background: var(--bg-1); }
.family-num {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--accent);
  padding-top: 0.35rem;
}
.family-title {
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  margin-bottom: 0.45rem;
}
.family-sub {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}
.family-sub .accent { color: var(--accent); font-family: var(--ff-mono); font-size: 0.84rem; letter-spacing: 0.05em; }
@media (max-width: 800px) {
  .families { grid-template-columns: 1fr; }
}

/* ========== Ablations matrix ========== */

.matrix-frame {
  background: var(--bg-1);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
}
.matrix-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.matrix-bar .label { color: var(--text-2); }
.matrix-bar .sep { color: var(--dim); }
.matrix-bar .legend { display: flex; align-items: center; gap: 0.4rem; }
.matrix-bar .legend .swatch {
  display: inline-block; width: 14px; height: 14px; border: 1px solid var(--rule-soft);
}
.matrix-bar .legend .sw-lbl { color: var(--dim); font-size: 10px; letter-spacing: 0.1em; }
.swatch.s0 { background: var(--bg-2); }
.swatch.s1 { background: oklch(0.30 0.05 65); }
.swatch.s2 { background: oklch(0.50 0.10 65); }
.swatch.s3 { background: oklch(0.65 0.13 65); }
.swatch.s4 { background: var(--accent); }

.matrix-scroll {
  overflow-x: auto;
  padding: 1.2rem 1.2rem 1.4rem;
}
table.matrix {
  border-collapse: collapse;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-2);
}
table.matrix th, table.matrix td {
  padding: 0; margin: 0;
  border: 1px solid var(--bg-1);
  text-align: center;
}
table.matrix thead th {
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 0.6rem 0.4rem;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  background: var(--bg-1);
  border-bottom: 1px solid var(--rule-soft);
  min-width: 44px;
}
table.matrix thead th.col-row { text-align: left; padding-left: 0.5rem; padding-right: 1rem; min-width: 9rem; color: var(--dim); }
table.matrix tbody th {
  text-align: left;
  padding: 0.55rem 0.7rem;
  font-weight: 500;
  color: var(--text-2);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  background: var(--bg-1);
  border-right: 1px solid var(--rule-soft);
  white-space: nowrap;
}
table.matrix tbody th .sub { color: var(--dim); font-size: 10px; margin-left: 0.4rem; letter-spacing: 0.08em; }
table.matrix td.cell {
  width: 44px;
  height: 36px;
  position: relative;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
table.matrix td.cell .v {
  position: relative;
  z-index: 1;
  font-size: 10.5px;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
table.matrix td.cell.empty { background: var(--bg-2); color: var(--dim); }
table.matrix td.cell.empty .v { color: var(--dim); }

/* ---- Hero CTAs ---- */
.hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 2.6rem; }
.cta {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--text-2);
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.cta:hover { border-color: var(--accent-quiet); color: var(--accent); }
.cta-primary { background: var(--accent-soft); border-color: var(--accent-quiet); color: var(--accent); }
.cta-primary:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ---- Featured runs (§ Pick a run) ---- */
.featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
.feat-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.2rem;
  background: var(--bg);
  border: 0;
  color: var(--text);
  transition: background 120ms ease;
}
.feat-card:hover { background: var(--bg-1); color: var(--text); }
.feat-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--bg-frame);
  border: 1px solid var(--rule-soft);
  image-rendering: pixelated;
}
.feat-thumb.empty { background: var(--bg-frame); }
.feat-tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.feat-tag.clean-win { color: var(--accent); }
.feat-tag.near-miss { color: var(--diff-del); }
.feat-tag.budget-killed { color: var(--info); }
.feat-game {
  font-family: var(--ff-mono);
  font-size: 14px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.feat-model { font-size: 10px; color: var(--dim); letter-spacing: 0.04em; }
.feat-stats {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.feat-note {
  font-family: var(--ff-serif);
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.45;
}
.browse-all {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 0;
  color: var(--accent);
}
.browse-all:hover { color: var(--text); }
.coming-soon {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--rule);
  border-radius: 2px;
  padding: 0.5rem 0.9rem;
}

a.sweep-cell { border: 0; cursor: pointer; }
.sweep-cell { position: relative; }
/* Hover a sweep cell to reveal its 4-char game id — just the text, coloured to
   suit each cell's state (dark on the amber solved/partial cells, grey on the
   dark no-success cells). */
.sweep-cell .cell-id {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 80ms ease;
  pointer-events: none;
}
.sweep-cell:hover .cell-id { opacity: 1; }
.sweep-cell.solved .cell-id,
.sweep-cell.partial .cell-id { color: #000; }
.sweep-cell.failed .cell-id,
.sweep-cell.errored .cell-id { color: var(--muted); }

/* ---- Ablation rows ---- */
.sweep-name .ablation-link { border: 0; color: var(--text); }
.sweep-name .ablation-link:hover { color: var(--accent); }
.ablation-skip { opacity: 0.85; }
.ablation-skip-note {
  font-family: var(--ff-serif);
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.45;
  align-self: center;
}
.ablation-skip-note .skip-tag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  padding: 1px 5px;
}

/* ---- Depth matrix (levels × games) ---- */
table.matrix th .dgame-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
table.matrix th .dgame {
  border: 0;
  color: var(--text-2);
  font-family: var(--ff-mono);
}
table.matrix th .dgame:hover { color: var(--accent); }
table.matrix th .dplay {
  display: inline-flex;
  flex: 0 0 auto;
  border: 0;
  color: var(--muted);
  transition: color 0.12s ease, transform 0.12s ease;
}
table.matrix th .dplay svg {
  width: 15px;
  height: 15px;
  display: block;
}
table.matrix th .dplay svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
table.matrix th .dplay svg path { fill: currentColor; }
table.matrix th .dplay:hover {
  color: var(--accent);
  transform: scale(1.12);
}
table.matrix td.dcell {
  width: 40px;
  height: 30px;
  text-align: center;
  border: 1px solid var(--rule-soft);
  background: var(--bg-1);
}
table.matrix td.dcell .v {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
/* Won cells read as plain (cleared is the norm); only deaths and the final
   game-winning cell stand out. */
table.matrix td.dcell.won     { }
/* Win = the page's amber (achievement). Died = a muted, oxidised dried-blood
   that sits in the warm palette rather than an alarm red. */
table.matrix td.dcell.win     { background: var(--accent-soft); border-color: var(--accent); }
table.matrix td.dcell.win .v  { color: var(--accent); }
table.matrix td.dcell.died    { border-color: oklch(0.50 0.11 30); background: oklch(0.50 0.11 30 / 0.16); }
table.matrix td.dcell.died .v { color: oklch(0.64 0.13 30); }
/* Cut off = the run reached this level but ran out of step budget before
   clearing or dying (NOT_FINISHED / quota-killed). A hatched neutral block so
   it reads as a real terminus — a death is red, a win is amber, and this is
   "still standing, just out of moves" — and stays distinct from the faint
   ghost extension that may sit right beside it. */
table.matrix td.dcell.reached {
  border-color: var(--rule);
  background:
    repeating-linear-gradient(-45deg,
      transparent 0, transparent 3px,
      oklch(0.66 0.02 90 / 0.24) 3px, oklch(0.66 0.02 90 / 0.24) 6px),
    var(--bg-1);
}
table.matrix td.dcell.reached .v { color: var(--muted); }
table.matrix td.dcell.unreached { background: var(--bg-frame); border-color: var(--bg-frame); }
table.matrix td.dcell.beyond  { border: 0; background: transparent; }
/* Ghost = a level the hardened run never reached but another VALID run did.
   One faint, dashed treatment for all outcomes so it reads as clearly
   secondary to the solid R3 row; the click links out to that run. */
table.matrix td.dcell.ghost {
  padding: 0;
  background: oklch(0.60 0.035 250 / 0.05);
  border-style: dashed;
  border-color: oklch(0.56 0.035 250 / 0.55);
}
table.matrix td.dcell.ghost a.dcell-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
table.matrix td.dcell.ghost .v { color: oklch(0.64 0.04 250); }
table.matrix td.dcell.ghost:hover { border-color: oklch(0.72 0.06 250); }
table.matrix td.dcell.ghost:hover .v { color: oklch(0.82 0.07 250); }
table.matrix td.ddone {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  padding: 0 0.7rem;
  text-align: right;
  white-space: nowrap;
}
table.matrix td.ddone.full { color: var(--accent); }
table.matrix td.dsteps {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  padding: 0 0.7rem;
  text-align: right;
}
/* Best = deepest VALID run pooled across configs. Dim by default; brighter
   when it beat the hardened row (deeper) or won the game somewhere (full). */
table.matrix td.dbest {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  padding: 0 0.7rem;
  text-align: right;
  white-space: nowrap;
}
table.matrix td.dbest.deeper { color: var(--text-2); }
table.matrix td.dbest.full { color: var(--accent); }
table.matrix td.dbest a.dbest-link { color: inherit; border-bottom: 1px dotted var(--rule); }
table.matrix td.dbest a.dbest-link:hover { color: var(--accent); }

.matrix-takeaways {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 2.5rem;
  border: 1px solid var(--rule-soft);
}
.matrix-takeaways > div {
  padding: 1.2rem 1.4rem 1.4rem;
  border-right: 1px solid var(--rule-soft);
}
.matrix-takeaways > div:last-child { border-right: 0; }
.matrix-takeaways .eye { display: block; margin-bottom: 0.5rem; }
.matrix-takeaways .big {
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 0.3rem;
}
.matrix-takeaways .muted { font-size: 0.85rem; line-height: 1.45; }
@media (max-width: 800px) {
  .matrix-takeaways { grid-template-columns: 1fr 1fr; }
  .matrix-takeaways > div:nth-child(2) { border-right: 0; }
  .matrix-takeaways > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
}

/* ========== Model sweep ========== */

.sweep {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule-soft);
}
.sweep-row {
  display: grid;
  grid-template-columns: 12rem 1fr 5rem;
  gap: 1.5rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.sweep-name {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.sweep-name .vendor { color: var(--dim); display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.15rem; }
.sweep-track {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 2px;
  height: 22px;
}
.sweep-cell {
  background: var(--bg-2);
  border-radius: 1px;
}
.sweep-cell.solved { background: var(--accent); }
.sweep-cell.partial { background: oklch(0.5 0.10 65); }
.sweep-cell.failed { background: var(--bg-2); }
.sweep-cell.errored { background: var(--diff-del); opacity: 0.4; }
.sweep-rate {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--accent);
}
.sweep-rate .sub { color: var(--dim); font-size: 10px; letter-spacing: 0.1em; display: block; }
@media (max-width: 700px) {
  .sweep-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .sweep-rate { text-align: left; }
}

/* ========== Tweaks panel ========== */

.tweaks {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 280px;
  background: var(--bg-1);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--text-2);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.6);
  z-index: 100;
  display: none;
}
.tweaks.is-open { display: block; }
.tweaks-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--rule-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 10.5px;
}
.tweaks-head button { color: var(--muted); font-family: inherit; font-size: 13px; line-height: 1; }
.tweaks-head button:hover { color: var(--accent); }
.tweaks-body { padding: 0.6rem 0.85rem 0.9rem; display: flex; flex-direction: column; gap: 0.85rem; }
.tweak-row { display: flex; flex-direction: column; gap: 0.3rem; }
.tweak-row > .lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.tweak-seg { display: flex; gap: 0; border: 1px solid var(--rule-soft); border-radius: 2px; }
.tweak-seg button {
  flex: 1;
  padding: 0.4rem 0.5rem;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-right: 1px solid var(--rule-soft);
}
.tweak-seg button:last-child { border-right: 0; }
.tweak-seg button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); }
.tweak-swatches { display: flex; gap: 0.5rem; }
.tweak-swatches button {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  cursor: pointer;
}
.tweak-swatches button[aria-current="true"] { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 3px currentColor; }