@font-face {
  font-family: "Silkscreen"; font-style: normal; font-weight: 400;
  src: url("/static/fonts/Silkscreen-Regular.ttf") format("truetype"); font-display: swap;
}
@font-face {
  font-family: "Silkscreen"; font-style: normal; font-weight: 700;
  src: url("/static/fonts/Silkscreen-Bold.ttf") format("truetype"); font-display: swap;
}

:root {
  --bg: #000;
  --bg-2: #000;
  --bg-3: #0c0c12;
  --line: #333a48;
  --fg: #e8ecf4;
  --fg-dim: #97a1b4;
  --fg-faint: #6b7488;
  --accent: #23c4e8;  /* Tron — the default accent (see [data-accent] themes below) */
  --radius: 0px;
  --shadow: 0 0 0 rgba(0, 0, 0, 0);
  --pixel: "Silkscreen", ui-monospace, monospace;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  font-synthesis: none;
}

* { box-sizing: border-box; }

/* Black on the html element too, so the overscroll/bounce area isn't white */
html { background: #000; }

body {
  margin: 0;
  color: var(--fg);
  font: 14px/1.55 var(--mono);
  min-height: 100vh;
  /* Pixel starfield: sparse crisp dots tiled over pure black, fixed behind content. */
  background-color: #000;
  background-image:
    radial-gradient(1px 1px at 24px 32px, #ffffff, transparent),
    radial-gradient(1px 1px at 88px 220px, #9fb0d6, transparent),
    radial-gradient(1px 1px at 150px 96px, #cdd8f2, transparent),
    radial-gradient(2px 2px at 210px 300px, #ffffff, transparent),
    radial-gradient(1px 1px at 300px 60px, #8ea0c6, transparent),
    radial-gradient(1px 1px at 350px 200px, #cdd8f2, transparent),
    radial-gradient(1px 1px at 60px 320px, #9fb0d6, transparent),
    radial-gradient(1px 1px at 260px 150px, #ffffff, transparent);
  background-size: 400px 360px;
  background-attachment: fixed;
}
::selection { background: var(--accent); color: #05121f; }

/* Retro chrome: only the big brand title keeps the pixel-art font. Every small label, pill,
   badge and readout uses the mono font — the pixel font is hard to read at small sizes. */
.site-head h1 {
  font-family: var(--pixel);
  -webkit-font-smoothing: none; font-smooth: never;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 28px 20px 80px; }

/* Header */
.site-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.site-head h1 { font-size: 26px; margin: 0; letter-spacing: -0.02em; }
.tagline { color: var(--fg-dim); font-size: 14px; }
/* Revealed by the ℹ: a full-width accent callout, matching the planet-page info boxes. */
.subhead {
  position: relative; color: var(--fg-dim); font-size: 13px; line-height: 1.55;
  margin: 10px 0 24px; border: 1px solid var(--accent); border-left-width: 4px;
  background: var(--bg-3); padding: 12px 28px 12px 16px;
}
.subhead strong { color: var(--fg); }

/* Intro callout, unpacked into labelled rows so its five ideas don't read as one dense block.
   Each row: a small mono accent label (like the readout / STEP labels) + its sentence. */
.intro-box { padding: 16px 28px 14px 18px; }
.intro-row {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.intro-row:first-of-type { border-top: 0; padding-top: 2px; }
.intro-lbl {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--accent); padding-top: 2px;
}
.intro-row p { margin: 0; line-height: 1.6; }
.intro-foot {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
  align-items: baseline; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--fg-faint);
}
.intro-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
}
@media (max-width: 560px) {
  .intro-row { grid-template-columns: 1fr; gap: 3px; }
  .intro-lbl { padding-top: 0; }
}

/* Stats strip */
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; }
.stat {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; min-width: 120px;
}
.stat .n { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.stat .l { font-size: 12px; color: var(--fg-dim); }

/* Controls */
/* Sticky so the filters stay reachable while scrolling the (long) planet list. */
.controls {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px;
  position: sticky; top: 0; z-index: 30; background: #000; padding: 10px 0;
}
.controls.stuck { border-bottom: 1px solid var(--line); }

/* Quick way back to the toolbar once it is off past the fold. */
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 45; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--mono); font-size: 10px; letter-spacing: .5px; padding: 10px 12px;
  box-shadow: 3px 3px 0 var(--line);
}
.to-top:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--line); }
.controls input, .controls select {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--fg);
  border-radius: 9px; padding: 9px 12px; font-size: 14px;
}
.controls input { min-width: 220px; }
.controls .spacer { flex: 1; }
/* The count is a slim second row under the toolbar, hugging the right edge like the
   search + hamburger above it (left-aligned on phones, where everything stacks). */
.count { color: var(--fg-faint); font-size: 13px; flex-basis: 100%; text-align: right; }

/* Gallery grid — planet-first cards: no background, border only on hover */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 10px; }
.card {
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  display: block; color: var(--fg); padding: 16px 12px 16px; text-align: center;
  transition: border-color .14s;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.card:hover { border-color: var(--line); text-decoration: none; }
.card-planet { width: 160px; height: 160px; display: block; margin: 0 auto 12px; }
.card-planet.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
/* Planet names in the list use the pixel-art font (liked here); other labels stay mono. */
.card-name {
  font-family: var(--pixel); -webkit-font-smoothing: none; font-smooth: never;
  font-size: 12.5px; color: var(--fg); letter-spacing: .3px; line-height: 1.4;
}
.card-host { font-size: 11px; color: var(--fg-faint); margin-top: 1px; }
.card-meta { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; justify-content: center; }

/* Sphere/Pixel segmented toggle */
.segmented {
  display: inline-flex; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px; gap: 2px;
}
.segmented button {
  border: 0; background: transparent; color: var(--fg-dim); font-size: 13px; cursor: pointer;
  padding: 7px 13px; border-radius: 7px; font-weight: 540;
}
.segmented button.on { background: var(--accent); color: #05121f; }

/* ---- Retro pixel-art sizing + hard edges (overrides above) ---- */
.site-head h1 { font-size: 18px; letter-spacing: 0; line-height: 1.3; }
.tagline { font-size: 12px; }
.panel h3 { font-size: 11px; letter-spacing: .04em; }
.card-name { font-size: 12.5px; letter-spacing: .3px; }
.badge {
  border-radius: 0; font-size: 9.5px; padding: 4px 8px; letter-spacing: .4px; text-transform: uppercase;
}
.toggle, .toggle button, .segmented, .segmented button { border-radius: 0; }
.toggle button, .segmented button { font-size: 9.5px; letter-spacing: .4px; padding: 8px 12px; }
.controls input, .controls select { border-radius: 0; }
.detail-swatch { border-radius: 0; }  /* square in retro */
.count { font-size: 11px; }

/* "Same system" neighbourhood strip: links to sibling planets of the same host star. */
.system-strip { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.system-lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px; color: var(--fg-dim);
  text-transform: uppercase;
}
.system-links { display: flex; flex-wrap: wrap; gap: 8px; }
.system-planet {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 0;
  border: 1px solid var(--line); font-size: 13px; color: var(--fg-dim); background: var(--bg-3);
  box-shadow: 2px 2px 0 var(--line); transition: border-color .12s, color .12s, box-shadow .04s;
}
.system-planet:hover { border-color: var(--accent); color: var(--fg); box-shadow: 2px 2px 0 var(--accent); }
.system-planet:active { box-shadow: none; transform: translateY(1px); }
.system-dot {
  width: 14px; height: 14px; border-radius: 0; flex: none; background: var(--fg-faint);
  border: 1px solid #000;
}

/* Detail hero: the planet itself. Pixel by default; smooth sphere when the RENDER knob is turned. */
.detail-hero {
  width: 160px; height: 160px; display: block; flex: none; background: transparent;
}
.detail-hero.pixel { image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 0; }
canvas.detail-hero:not(.pixel) { border-radius: 50%; }
/* Real telescope image ("Source: Telescope" knob): a framed photo, never a circle. */
.hero-stack { flex: none; }
.hero-obs { margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: 220px; }
.hero-obs img.detail-hero {
  border-radius: 3px; object-fit: cover; background: #000;
  border: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
/* The image is a button: click to enlarge. Reset native button chrome. */
.obs-thumb {
  padding: 0; border: 0; background: none; cursor: zoom-in; position: relative;
  display: block; line-height: 0; border-radius: 3px;
}
.obs-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.obs-zoom-cue {
  position: absolute; right: 5px; bottom: 5px; padding: 2px 5px; line-height: 1.2;
  font-family: var(--mono); font-size: 7px; letter-spacing: .5px; color: var(--fg);
  background: rgba(0, 0, 0, .62); border: 1px solid rgba(255, 255, 255, .18); border-radius: 2px;
  opacity: .0; transition: opacity .14s;
}
.obs-thumb:hover .obs-zoom-cue, .obs-thumb:focus-visible .obs-zoom-cue { opacity: 1; }
/* Per-telescope selector (JWST / Roman / …): shown only when >1 image exists. */
.obs-tabs { display: flex; gap: 4px; margin-top: 2px; flex-wrap: wrap; }
.obs-tab {
  padding: 3px 9px; border: 1px solid var(--line); background: var(--bg-3); cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .3px; color: var(--fg-dim); border-radius: 2px;
}
.obs-tab:hover { border-color: var(--accent); color: var(--fg); }
.obs-tab.on { background: var(--accent); color: #05121f; border-color: var(--accent); }
.obs-credit { font-size: 11px; line-height: 1.55; color: var(--fg-dim); max-width: 240px; }
/* Lightbox: full-size real image centred over a dimmed backdrop. */
.obs-lightbox {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 5vmin; background: rgba(3, 5, 9, .88); backdrop-filter: blur(2px); cursor: zoom-out;
}
.obs-lightbox-inner {
  margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: center;
  max-width: min(92vw, 820px); position: relative; cursor: default;
}
.obs-lightbox-inner img {
  max-width: 100%; max-height: 78vh; object-fit: contain; background: #000;
  border: 1px solid var(--line); box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}
.obs-credit.lg { font-size: 11px; max-width: 640px; text-align: center; }
.obs-close {
  position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--fg); font-size: 18px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.obs-close:hover { border-color: var(--accent); color: var(--accent); }
.obs-real {
  font-family: var(--mono); font-size: 10px; letter-spacing: .5px; font-weight: 600;
  color: var(--accent); display: inline-block; margin-right: 4px;
}
.obs-sub { color: var(--fg-faint); }
/* Pixel-y dashed dividers + tactile button press */
.params td { border-bottom-style: dashed; }
.toggle button:active, .segmented button:active, .badge:active,
a.badge:active { transform: translateY(1px); }
.toggle button, .segmented button, .badge { transition: transform .04s; }

/* ---- Accent theme + switcher (retro palettes) ---- */
:root[data-accent="blue"]     { --accent: #7cc4ff; }  /* default cobalt */
:root[data-accent="electric"] { --accent: #4d8dff; }  /* deep electric blue */
:root[data-accent="ice"]      { --accent: #b8e4ff; }  /* pale glacier blue */
:root[data-accent="tron"]     { --accent: #23c4e8; }  /* arcade cyan-blue */
:root[data-accent="cyan"]     { --accent: #37e6d6; }  /* teletext */
:root[data-accent="seafoam"]  { --accent: #8df0cf; }  /* pale sea-green */
:root[data-accent="green"]    { --accent: #3bf07a; }  /* phosphor CRT */
:root[data-accent="mustard"]  { --accent: #e3b23c; }  /* gold */
:root[data-accent="amber"]    { --accent: #ffb000; }  /* amber terminal */
:root[data-accent="pink"]     { --accent: #ff5fa2; }  /* synthwave */
:root[data-accent="violet"]   { --accent: #b98cff; }  /* vaporwave */
:root[data-accent="lime"]     { --accent: #c3f53a; }  /* radar lime */
:root[data-accent="ember"]    { --accent: #ff8a3d; }  /* ember orange */
:root[data-accent="crimson"]  { --accent: #ff5555; }  /* terminal red */
:root[data-accent="magenta"]  { --accent: #ff4fd8; }  /* hot magenta */
:root[data-accent="mono"]     { --accent: #e2e9f3; }  /* monochrome white */
.accents { display: inline-flex; gap: 5px; align-items: center; }
.acc { width: 24px; height: 24px; border: 1px solid var(--line); cursor: pointer; padding: 0; }
.acc.acc-blue,     .acc-swatch.acc-blue     { background: #7cc4ff; }
.acc.acc-electric, .acc-swatch.acc-electric { background: #4d8dff; }
.acc.acc-ice,      .acc-swatch.acc-ice      { background: #b8e4ff; }
.acc.acc-tron,     .acc-swatch.acc-tron     { background: #23c4e8; }
.acc.acc-cyan,     .acc-swatch.acc-cyan     { background: #37e6d6; }
.acc.acc-seafoam,  .acc-swatch.acc-seafoam  { background: #8df0cf; }
.acc.acc-green,    .acc-swatch.acc-green    { background: #3bf07a; }
.acc.acc-mustard,  .acc-swatch.acc-mustard  { background: #e3b23c; }
.acc.acc-amber,    .acc-swatch.acc-amber    { background: #ffb000; }
.acc.acc-pink,     .acc-swatch.acc-pink     { background: #ff5fa2; }
.acc.acc-violet,   .acc-swatch.acc-violet   { background: #b98cff; }
.acc.acc-lime,     .acc-swatch.acc-lime     { background: #c3f53a; }
.acc.acc-ember,    .acc-swatch.acc-ember    { background: #ff8a3d; }
.acc.acc-crimson,  .acc-swatch.acc-crimson  { background: #ff5555; }
.acc.acc-magenta,  .acc-swatch.acc-magenta  { background: #ff4fd8; }
.acc.acc-mono,     .acc-swatch.acc-mono     { background: #e2e9f3; }
.acc.on { outline: 2px solid var(--fg); outline-offset: 1px; }
/* Hover just rings the swatch in the accent — the generic .dd-menu button:hover below
   would otherwise repaint the swatch background near-black. */
.acc:hover { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- Colour bar: filter planets by colour family + "nearest in colour" pill ---- */
/* "Nearest in colour to X" indicator, shown while the similar-colour sort is active. */
.near-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 6px 5px 10px; margin-left: 4px;
  border: 1px solid var(--accent); background: var(--bg-3); color: var(--fg-dim); font-size: 12px;
}
.near-pill b { color: var(--fg); font-weight: 600; }
.near-dot { width: 12px; height: 12px; flex: none; border: 1px solid #000; }
.near-x {
  border: 0; background: none; color: var(--fg-dim); cursor: pointer; font-size: 15px;
  line-height: 1; padding: 0 3px;
}
.near-x:hover { color: var(--fg); }
/* "Find similar colours" action shares the palette-action pill look, flagged in the accent. */
.badge.similar { color: var(--accent); border-color: var(--accent); }

/* Minimal icon-only dropdown triggers (Filter, Sort, Accent). The double class beats
   .dd-btn's min-width so these stay square icon buttons, not wide boxes. */
.dd-btn.dd-icon { min-width: 0; padding: 10px; justify-content: center; position: relative; }
.dd-icon .ic { color: var(--fg-dim); display: block; }
.dd-icon:hover .ic { color: var(--fg); }
/* A small accent dot marks that a non-default filter/sort is active — no labels needed. */
.dd-icon.active .ic { color: var(--fg); }
.dd-icon.active::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 4px var(--accent);
}
.dd-btn.acc-trigger { padding: 9px; }
/* In-place morphing search: the magnifier IS the input, collapsed to icon width and growing
   rightward on focus (or whenever it holds text). No separate button, no reveal. */
.search { position: relative; display: inline-flex; align-items: center; }
.search-mag { position: absolute; left: 11px; color: var(--fg-dim); pointer-events: none; }
.search:focus-within .search-mag { color: var(--fg); }
.search input {
  width: 42px; min-width: 0; box-sizing: border-box; padding: 10px 10px 10px 34px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--fg);
  font: inherit; font-size: 13px; box-shadow: 3px 3px 0 var(--line);
  transition: width .22s ease;
}
.search input::placeholder { color: transparent; }
.search:focus-within input,
.search input:not(:placeholder-shown) { width: 230px; cursor: text; }
.search:focus-within input::placeholder { color: var(--fg-faint); }
.acc-swatch { width: 20px; height: 20px; display: block; border: 1px solid rgba(255, 255, 255, .25); }
.acc-menu { padding: 8px; left: auto; right: 0; }
.acc-menu .accents { display: grid; grid-template-columns: repeat(4, 24px); gap: 6px; }

/* ---- Chunky 8-bit depth on toggles + action pills ---- */
.segmented, .toggle { box-shadow: 3px 3px 0 var(--line); }
button.badge, a.badge { box-shadow: 2px 2px 0 var(--line); }
button.badge:active, a.badge:active { box-shadow: none; }

/* ---- Hex colour chip ---- */
.chip {
  display: inline-block; width: 8px; height: 8px; margin-right: 5px;
  border: 1px solid rgba(255, 255, 255, .3); vertical-align: middle;
}

/* ---- Notched (chamfered) pixel panel corners ---- */
.panel {
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px),
    calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
/* The data card holds the jargon [i] tooltips, which float beyond the card edge; the notch
   clip-path above would clip them. Square corners here so the tooltips show in full. */
.panel.dossier { clip-path: none; }

/* ---- Custom retro dropdowns (replace native selects) ---- */
.dropdown { position: relative; display: inline-block; }
.dd-btn {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  font: inherit; font-size: 13px; padding: 9px 12px; cursor: pointer; min-width: 160px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  box-shadow: 3px 3px 0 var(--line);
}
.dd-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--line); }
.dd-arrow { font-size: 10px; color: var(--fg-dim); }
.dd-menu {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 40; min-width: 100%;
  background: #000; border: 1px solid var(--line); box-shadow: 4px 4px 0 rgba(0, 0, 0, .7);
  display: flex; flex-direction: column;
}
.dd-menu button {
  background: transparent; border: 0; color: var(--fg-dim); font: inherit; font-size: 13px;
  text-align: left; padding: 9px 12px; cursor: pointer; white-space: nowrap;
}
/* Exclude the colour swatches: repainting their background near-black on hover hid the colour. */
.dd-menu button:not(.acc):hover { background: var(--bg-3); color: var(--fg); }
.dd-menu button.on { color: var(--accent); }
/* Little header explaining what the dropdown filters on. */
.dd-head {
  padding: 9px 12px 8px; border-bottom: 1px solid var(--line); cursor: default;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--fg-dim); white-space: nowrap;
}
/* Collapsible section header in the hamburger menu: the whole bar toggles its group,
   with a chevron marking open/closed. Expanded by default (see gallery template). */
.dd-sec {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border-left: 0; border-right: 0;
  cursor: pointer; text-align: left;
}
.dd-sec:hover, .dd-sec:hover .dd-chev { color: var(--fg); }
.dd-chev { flex: none; color: var(--fg-faint); font-size: 9px; }
/* Options stack full-width (the .dd-menu flex column no longer reaches them directly). */
.dd-sec-body { display: flex; flex-direction: column; }
.dd-sub {
  display: block; margin-top: 2px; font-size: 10px; letter-spacing: 0;
  text-transform: none; color: var(--fg-faint);
}

/* ---- Sharpen the last rounded boxes on the planet page ---- */
.assume, .banner, .palette { border-radius: 0; }
.palette .stop code { border-radius: 0; font-family: var(--mono); font-size: 8px; }

/* ---- Unify all pills with the chunky 8-bit shadow ---- */
.badge { box-shadow: 2px 2px 0 var(--line); }
.badge:active { box-shadow: none; }

/* ═══ THE EXOSCOPE ═══
   A bench instrument: bezel chassis, CRT with an on-glass HUD, MEASURE + PLANET DISPLAY
   modules on the right rail, PALETTE OUT along the bottom. Square corners + hard offset
   shadow like every other panel; the knobs and function keys are deliberately skeuomorphic
   (physical controls), everything else stays flat. */
.scope-unit {
  position: relative; margin-top: 4px;
  background: linear-gradient(180deg, #1a1e28 0%, #12151d 12%, #0c0e14 55%, #101319 100%);
  border: 1px solid #3d4454; outline: 1px solid #05070b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 6px 6px 0 #12161f;
}
/* Four bezel rivets, one per corner of the faceplate. */
.scope-unit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image:
    linear-gradient(#4a5364, #262b36), linear-gradient(#4a5364, #262b36),
    linear-gradient(#4a5364, #262b36), linear-gradient(#4a5364, #262b36);
  background-repeat: no-repeat; background-size: 4px 4px;
  background-position:
    8px 9px, calc(100% - 8px) 9px, 8px calc(100% - 9px), calc(100% - 8px) calc(100% - 9px);
}
.scope-top {
  display: flex; align-items: center; gap: 14px; padding: 10px 24px;
  border-bottom: 1px solid #05070b; box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
  background: linear-gradient(180deg, #171b25, #0e1118);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px;
}
/* Brand plate: the one pixel-font label on the instrument, glowing in the accent. */
.scope-brand {
  font-family: var(--pixel); -webkit-font-smoothing: none; font-smooth: never;
  font-size: 12px; letter-spacing: 1px; color: var(--accent);
  text-shadow: 0 0 7px color-mix(in srgb, var(--accent) 55%, transparent);
}
.scope-model { color: var(--fg-dim); }
.led {
  width: 7px; height: 7px; display: inline-block; flex: none;
  background: #2a2f3a; border: 1px solid #000;
}
.led.on { background: #4ade80; box-shadow: 0 0 5px #4ade80; }
/* Plain-labelled view selector (the two ways to see a planet's colour), as physical
   latching buttons; each lights its LED in its channel's trace colour when selected. */
.scope-view { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.scope-view-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; color: var(--fg-faint); }
.led-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  border: 1px solid #05070b; border-top-color: #333a48;
  background: linear-gradient(180deg, #232935, #151a23);
  color: var(--fg-dim); font: inherit; font-size: 11.5px; cursor: pointer;
  box-shadow: 0 2px 0 #05070b;
}
.led-btn:hover { color: var(--fg); }
.led-btn:active { transform: translateY(2px); box-shadow: none; }
.led-btn.on {
  color: var(--fg); border-color: color-mix(in srgb, var(--accent) 45%, #05070b);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, #1c222d), #141822);
  box-shadow: 0 2px 0 #05070b, inset 0 0 9px color-mix(in srgb, var(--accent) 10%, transparent);
}
.led-btn.ch1 .led.on { background: #ffd23f; box-shadow: 0 0 6px #ffd23f; }
.led-btn.ch2 .led.on { background: #3fd0ff; box-shadow: 0 0 6px #3fd0ff; }
/* Explainer bar the ℹ buttons reveal — plain English, accent-flagged. */
.scope-info {
  position: relative; border: 1px solid var(--accent); border-left-width: 4px;
  background: var(--bg-3); padding: 10px 28px 10px 14px;
  font-size: 12.5px; line-height: 1.5; color: var(--fg-dim);
}
.scope-info strong { color: var(--fg); }
.scope-info p { margin: 0 0 8px; }
.scope-info p:last-child { margin-bottom: 0; }
.scope-main { display: grid; grid-template-columns: 1fr 254px; min-height: 340px; }
/* The CRT: inset in the chassis with a visible bezel gap, gently curved corners, phosphor
   tinted toward the accent, scanlines + vignette + glare on the glass. */
.scope-screen {
  position: relative; overflow: hidden; margin: 14px 0 14px 14px; padding: 8px 12px 6px;
  display: flex; flex-direction: column;
  background:
    radial-gradient(115% 100% at 50% 42%,
      color-mix(in srgb, var(--accent) 5%, #060a10) 0%, #04070c 60%, #020409 100%);
  border: 1px solid #000; outline: 1px solid #272d3a; border-radius: 10px / 8px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .95);
}
.scope-screen::before {  /* glass: glare sheen top-left */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  background: radial-gradient(130% 95% at 28% 8%, rgba(255, 255, 255, .05), transparent 46%);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .75);
}
.scope-screen::after {  /* scanlines + vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .3) 3px),
    radial-gradient(140% 130% at 50% 45%, transparent 58%, rgba(0, 0, 0, .5));
}
.scope-screen > * { position: relative; z-index: 1; }
.scope-screen .spectrum { display: block; }
.spec-wide, .spec-compact { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* On-glass HUD: readouts printed on the phosphor, under the scanlines. The channel chips
   are buttons (a second way to flip the view); the active channel is lit, the other dimmed. */
.hud {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .6px;
}
.hud-top { padding: 3px 2px 6px; }
.hud-bot {
  padding: 5px 2px 2px; justify-content: space-between; gap: 10px;
  font-size: 8.5px; color: rgba(190, 205, 225, .48); text-transform: uppercase;
}
.hud-ch {
  display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0;
  background: none; font: inherit; letter-spacing: inherit; cursor: pointer;
  opacity: .42; transition: opacity .25s;
}
.hud-ch .sw { width: 8px; height: 8px; flex: none; border: 1px solid #000; }
.hud-ch.ch1 { color: #ffd23f; } .hud-ch.ch1 .sw { background: #ffd23f; box-shadow: 0 0 5px #ffd23f; }
.hud-ch.ch2 { color: #3fd0ff; } .hud-ch.ch2 .sw { background: #3fd0ff; box-shadow: 0 0 5px #3fd0ff; }
.hud-ch code { font-size: inherit; opacity: .8; }
.hud-ch.live { opacity: 1; text-shadow: 0 0 6px currentColor; }
.hud-ch:hover { opacity: 1; }
.hud-run {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #4ade80;
}
.hud-div .w { display: inline; } .hud-div .c { display: none; }
/* View-change sweep: a redraw line wipes across the phosphor. */
.sweep-line {
  position: absolute; top: 0; bottom: 0; left: -70px; width: 64px; z-index: 2;
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--accent) 22%, transparent) 90%, var(--accent));
}
.scope-screen.sweeping .sweep-line { animation: sweep .5s linear; }
@keyframes sweep { 0% { left: -70px; opacity: 1; } 100% { left: 100%; opacity: 1; } }
/* The selected channel's trace burns brighter; the other stays as a ghost reference. */
.scope-screen .line-true, .scope-screen .line-roman { transition: opacity .3s; }
.scope-screen.roman .line-true { opacity: .45; }
.scope-screen.full .line-roman { opacity: .55; }

/* Right rail: MEASURE + PLANET DISPLAY as framed instrument modules, vent between. */
.scope-rail {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 14px 12px;
}
.rail-mod {
  border: 1px solid #05070b; padding: 10px 12px 12px;
  background: linear-gradient(180deg, #141822, #0e1118);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.rail-lbl {
  margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; font-weight: 400;
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--fg-dim); white-space: nowrap;
}
.rail-lbl::after { content: ""; flex: 1; height: 1px; background: var(--line); align-self: center; }
.rail-sub { font-size: 8px; letter-spacing: .4px; color: var(--fg-faint); }
/* ΔE is the signature number (how much colour Roman's filter set loses): the big readout. */
.meas-hero { display: flex; flex-direction: column; gap: 1px; margin-bottom: 11px; }
.meas-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .5px; color: var(--fg-dim);
  display: inline-flex; align-items: center; gap: 5px;
}
.meas-num {
  font-family: var(--mono); font-size: 31px; line-height: 1.15; font-weight: 700;
  letter-spacing: -.5px; color: var(--fg); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
.meas-sub {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .4px; color: var(--fg-faint);
  text-transform: uppercase;
}
.ro-row {
  display: flex; justify-content: space-between; align-items: baseline; color: var(--fg-dim);
  font-family: var(--mono); font-size: 11px; letter-spacing: .3px; padding: 7px 0 0;
  border-top: 1px dashed var(--line); margin-top: 7px;
}
.ro-row b {
  color: var(--fg); font-family: var(--mono); font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums;
}
.gled {
  width: 7px; height: 7px; display: inline-block; flex: none; border: 1px solid #000;
  background: #4ade80; box-shadow: 0 0 5px #4ade80;
}
.gled.bad { background: #ffb000; box-shadow: 0 0 5px #ffb000; }
/* Vent slots above the display module — flavour, and an honest spacer: the auto margin
   pins vent + PLANET DISPLAY to the rail's bottom, MEASURE to its top. */
.rail-vent {
  margin-top: auto; height: 15px; align-self: center; width: 62%;
  background: repeating-linear-gradient(to bottom,
    rgba(0, 0, 0, .75) 0 2px, rgba(255, 255, 255, .05) 2px 3px, transparent 3px 6px);
}

/* Bottom bar: the palette as the instrument's OUTPUT stage. */
.scope-bottom {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; border-top: 1px solid #05070b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  background: linear-gradient(180deg, #141822, #0e1118);
}
.scope-pallabel {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; color: var(--fg-dim);
  text-transform: uppercase;
}
.scope-pallabel .pv { color: var(--accent); }
.scope-pal { flex: 1; min-width: 220px; }
.scope-pal .palette { border: 1px solid #05070b; box-shadow: 0 1px 0 rgba(255, 255, 255, .04); }
.scope-pal .palette .stop { height: 46px; }
.scope-pal .palette .stop + .stop { border-left: 1px solid rgba(0, 0, 0, .35); }
.scope-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Scope traces: CH1 (full) yellow, CH2 (Roman) cyan — like a real multi-channel scope.
   The graticule is dotted, like a real scope's etched grid. */
.spectrum .grid { stroke: rgba(160, 185, 215, .17); stroke-dasharray: 1 3; }
.spectrum .line-true {
  stroke: #ffd23f; stroke-width: 1.6;
  filter: drop-shadow(0 0 3px rgba(255, 210, 63, .9)) drop-shadow(0 0 8px rgba(255, 210, 63, .35));
}
.spectrum .line-roman {
  stroke: #3fd0ff;
  filter: drop-shadow(0 0 2.5px rgba(63, 208, 255, .9)) drop-shadow(0 0 7px rgba(63, 208, 255, .3));
}
.spectrum .ytick, .spectrum .xtick {
  fill: rgba(190, 205, 225, .7); font-family: var(--mono); font-size: 7px;
}
.spectrum .hatchline { stroke: rgba(190, 205, 225, .22); }
.spectrum .hatchlabel { fill: rgba(190, 205, 225, .55); }

/* Badges */
.badge {
  font-size: 11px; padding: 2px 8px; border-radius: 0; border: 1px solid var(--line);
  color: var(--fg-dim); background: var(--bg-3); white-space: nowrap;
}
.badge.model { }
.badge.simulated-cgi { border-color: #3a4d6b; color: #9fc0ef; }
.badge.measured-cgi { border-color: #2f6b45; color: #86e0aa; background: #12241a; }
.badge.model-microlensing { border-color: #6b5330; color: #e6c07a; background: #241d12; }
.badge.hex { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* Detail page */
/* In-flow at the top of the content — identical on every page (planet detail and the
   explainer). It used to pin fixed in the gutter on wide planet pages only, which made it
   jump around between pages. */
.back {
  display: inline-block; margin: 4px 0 16px; padding: 7px 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .5px; color: var(--fg-dim);
  border: 1px solid var(--line); background: var(--bg-3); box-shadow: 3px 3px 0 var(--line);
}
.back:hover { color: var(--fg); border-color: var(--accent); }
.back:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--line); }
/* Inside a title row (.site-head / .detail-head) the back button sits to the LEFT of the
   page title, vertically centred on it, instead of stacked above. */
.site-head .back { margin: 0; align-self: center; }
.detail-head .back { margin: 4px 0 0; }
.detail-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin: 12px 0 22px; }
.detail-title { flex: 1 1 340px; min-width: 280px; }
/* Reserve a stable height so flipping the Source knob (short modelled caption <-> longer
   real-image credit) fills the width instead of shoving the header up and down. */
.desc-slot.has-obs { min-height: 5.4em; }
.title-badges { margin-top: 10px; }
.detail-swatch { width: 200px; height: 200px; border-radius: var(--radius); border: 1px solid var(--line); flex: none; box-shadow: var(--shadow); }
.detail-title h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.02em; }
.detail-title .host { color: var(--fg-dim); }
.detail-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; }
@media (max-width: 820px) { .detail-cols { grid-template-columns: 1fr; } }

.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.panel h3 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-dim); }

/* Toggle */
.toggle { display: inline-flex; background: var(--bg-3); border: 1px solid var(--line); border-radius: 0; padding: 3px; gap: 2px; }
.toggle button {
  border: 0; background: transparent; color: var(--fg-dim); font-size: 13px; cursor: pointer;
  padding: 6px 14px; border-radius: 0; font-weight: 560;
}
.toggle button.on { background: var(--accent); color: #05121f; }

/* Palette */
.palette { display: flex; gap: 0; border-radius: 0; overflow: hidden; border: 1px solid var(--line); }
.palette .stop { flex: 1; height: 64px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
.palette .stop code { font-size: 10px; background: rgba(0,0,0,.45); padding: 1px 5px; border-radius: 0; color: #fff; cursor: pointer; }

/* Params table */
.params { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.params td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.params td:first-child { color: var(--fg-dim); }
.params td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
/* Jargon [i] tooltips in the data card sit in the left label column, so they open
   rightward (the default opens left, which would clip against the panel edge). */
.params .tip { margin-left: 5px; }
.params .tip-body { right: auto; left: -10px; }

/* Assumptions / banner */
/* Same accent-callout look as .scope-info / .subhead, so all ℹ reveals match. */
.assume {
  position: relative; font-size: 12.5px; line-height: 1.5; color: var(--fg-dim);
  background: var(--bg-3); border: 1px solid var(--accent); border-left-width: 4px;
  border-radius: 0; padding: 10px 28px 10px 14px;
}
.assume strong { color: var(--fg); }
.banner {
  border-radius: 10px; padding: 11px 14px; font-size: 13px; margin-bottom: 16px;
  background: #241d12; border: 1px solid #6b5330; color: #e6c07a;
}
.de { font-variant-numeric: tabular-nums; }
.viewnote { margin: 10px 0 0; font-size: 12.5px; color: var(--fg-dim); max-width: 86ch; }
.viewnote.obs-note { line-height: 1.6; }
.viewnote.obs-note .obs-real { font-size: 10px; margin-right: 2px; }

/* Spectrum SVG */
.spectrum { width: 100%; height: auto; }
.spectrum .grid { stroke: var(--line); stroke-width: 1; }
.spectrum .ytick, .spectrum .xtick { fill: var(--fg-faint); font-size: 10px; font-family: ui-monospace, monospace; }
.spectrum .ytick { text-anchor: end; }
/* Fixed channel colours (must match the CH1/CH2 legend swatches, theme-independent). */
.spectrum .line-true { fill: none; stroke: #ffd23f; stroke-width: 2; }
.spectrum .line-roman { fill: none; stroke: #3fd0ff; stroke-width: 2; stroke-dasharray: 5 4; }
.spectrum .hatchline { stroke: var(--fg-faint); stroke-width: 1; }
/* "Roman is blind here": accent highlight box + dark text so it reads over the hatching. */
.spectrum .hatch-hl { fill: var(--accent); opacity: .9; }
.spectrum .hatchlabel { fill: #05121f; font-size: 10px; font-weight: 600; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--fg-dim); margin-top: 8px; }
.legend .k { display: inline-block; width: 22px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }
.legend .k.true { border-color: var(--fg); }
.legend .k.roman { border-color: var(--accent); border-top-style: dashed; }

.foot { margin-top: 40px; color: var(--fg-faint); font-size: 12px; }
.copied { color: #86e0aa; font-size: 12px; align-self: center; }

/* Hold-to-peek overlay (gallery): up only while a card is pressed, gone on release. */
.peek {
  position: fixed; inset: 0; z-index: 60; display: none; align-items: center;
  justify-content: center; padding: 20px; background: rgba(2, 5, 10, .82);
  pointer-events: none;  /* the release must land on the page, not the overlay */
}
.peek.on { display: flex; }
.peek-box {
  width: min(480px, 94vw); max-height: 94vh; overflow: hidden;
  background: var(--bg-3); border: 1px solid var(--accent);
  box-shadow: 6px 6px 0 var(--line); padding: 16px 16px 14px;
}
/* On short viewports the spectrum is the most compressible piece — cap it so the colour
   step and footer (the payoff) always stay on screen during the quick peek. */
@media (max-height: 720px) {
  .peek-step .peek-screen .spectrum { max-height: 34vh; margin: 0 auto; }
}
.peek-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.peek-planet { width: 84px; height: 84px; flex: none; }
.peek-planet.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.peek-name {
  font-family: var(--pixel); -webkit-font-smoothing: none; font-smooth: never;
  font-size: 14px; margin-bottom: 5px;
}
.peek-host { font-family: var(--mono); font-size: 11px; color: var(--fg-dim); }
.peek-desc { font-size: 12px; color: var(--fg-dim); line-height: 1.5; margin: 8px 0 10px; }
.peek-screen { background: #04070c; border: 1px solid var(--line); padding: 8px; }
.peek-screen .spectrum { display: block; width: 100%; height: auto; }

/* "How this colour is made": the pipeline (starlight × reflectance → colour) as three
   labelled steps, each with a small mono accent label like the readouts / STEP tags. */
.peek-flow { margin-top: 12px; }
.peek-flow-cap {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 8px;
}
.peek-step { padding: 9px 0; border-top: 1px solid var(--line); }
.peek-step:first-of-type { border-top: 0; padding-top: 0; }
.peek-step-lbl {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .8px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 4px;
}
.peek-step-val { font-size: 12px; color: var(--fg-dim); line-height: 1.5; }
.peek-step-sub {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .3px;
  color: var(--fg-faint); margin-top: 5px;
}
.peek-step .peek-screen { margin-top: 2px; }
/* Colour step: swatch + hex on one line, the "via CIE" note beneath. */
.peek-colour { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.peek-swatch {
  width: 22px; height: 22px; flex: none; border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 2px 2px 0 var(--line);
}
.peek-colour code { font-family: var(--mono); font-size: 13px; color: var(--fg); }
.peek-colour .peek-step-sub { margin-top: 0; margin-left: auto; }


/* ---- Dossier: combined renders + colour + planet info card ---- */
.dossier-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.info-btn {
  width: 22px; height: 22px; flex: none; border: 1px solid var(--line); background: var(--bg-3);
  color: var(--fg-dim); font-family: var(--mono); font-size: 11px; line-height: 1; cursor: pointer;
  box-shadow: 2px 2px 0 var(--line);
}
.info-btn.on { background: var(--accent); color: #05121f; }
.info-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line); }
/* Accent so the "there's an explanation here" affordance reads at a glance. */
.info-btn:not(.on) { color: var(--accent); border-color: var(--accent); }
.info-btn.sm { width: 18px; height: 18px; font-size: 9px; box-shadow: 1px 1px 0 var(--line); }
/* The smallest info button drops the box entirely — a bare terminal-style [i] beside the
   label: faint brackets, accent i. A 13px box crowded the tiny labels it sits next to. */
.info-btn.xs {
  width: auto; height: auto; border: 0; background: none; box-shadow: none;
  padding: 0 1px; font-size: 9.5px; vertical-align: middle;
}
.info-btn.xs::before { content: "["; color: var(--fg-faint); }
.info-btn.xs::after { content: "]"; color: var(--fg-faint); }
.info-btn.xs:hover::before, .info-btn.xs:hover::after { color: var(--accent); }
.info-btn.xs.on { background: var(--accent); color: #05121f; }
.info-btn.xs.on::before, .info-btn.xs.on::after { color: #05121f; }
.info-btn.xs:active { transform: translateY(1px); box-shadow: none; }

/* Hover/tap tooltip: pairs an info button with a floating explanation. Hover shows it
   (desktop); tapping the button pins it open (touch). */
.tip { position: relative; display: inline-flex; }
.tip-body {
  display: none; position: absolute; bottom: calc(100% + 9px); right: -10px; z-index: 55;
  width: 230px; padding: 10px 12px; background: #000; border: 1px solid var(--line);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .7);
  font-family: var(--mono); font-size: 11px; line-height: 1.55; letter-spacing: 0;
  text-transform: none; color: var(--fg-dim); text-align: left; white-space: normal;
}
.tip:hover .tip-body, .tip-body.open { display: block; }

/* Close × in the top-right corner of every ℹ reveal (tooltips + accent callout boxes). */
.info-x {
  position: absolute; top: 5px; right: 5px; z-index: 1; background: none; border: 0;
  padding: 2px 5px; color: var(--fg-faint); font-family: var(--mono); font-size: 13px;
  line-height: 1; cursor: pointer;
}
.info-x:hover { color: var(--accent); }
.dossier-help { overflow: hidden; margin-top: 12px; }
.dossier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 14px; }
@media (max-width: 720px) { .dossier-grid { grid-template-columns: 1fr; } }
.dossier-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: 6px;
}
/* Per-value origin tags: measured / computed / assumed. Same colour language as provenance. */
.src {
  font-family: var(--pixel); font-size: 7px; letter-spacing: .3px; text-transform: uppercase;
  padding: 1px 4px; margin-left: 5px; border: 1px solid var(--line); vertical-align: middle;
  white-space: nowrap;
}
.src-measured { color: #86e0aa; border-color: #2f6b45; }
.src-computed { color: #9fc0ef; border-color: #3a4d6b; }
.src-assumed  { color: #e6c07a; border-color: #6b5330; }

/* ---- PLANET DISPLAY knobs: skeuomorphic on purpose (physical controls) ---- */
.knob-row { display: flex; justify-content: space-around; align-items: flex-start; gap: 8px; }
.knob-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.knob-name { font-size: 11.5px; color: var(--fg-dim); display: inline-flex; align-items: center; gap: 4px; }
.knob-val { font-family: var(--mono); font-size: 9px; letter-spacing: .3px; color: var(--accent); text-transform: uppercase; }
.knob {
  width: 44px; height: 44px; border-radius: 50%; position: relative; cursor: pointer;
  margin: 7px;  /* room for the tick ring */
  background: radial-gradient(circle at 34% 28%, #454d5e, #1a1e28 62%, #0e1118 100%);
  border: 1px solid #05070b;
  box-shadow:
    0 3px 5px rgba(0, 0, 0, .65),
    inset 0 1px 1px rgba(255, 255, 255, .18),
    inset 0 -2px 3px rgba(0, 0, 0, .5);
  transition: box-shadow .12s;
}
/* Etched detent ticks at the knob's two positions (matching the pointer's ±34°). */
.knob::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(
    transparent 0deg 32.2deg, rgba(170, 185, 210, .65) 32.2deg 35.8deg,
    transparent 35.8deg 324.2deg, rgba(170, 185, 210, .65) 324.2deg 327.8deg,
    transparent 327.8deg);
  -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 57%);
  mask: radial-gradient(circle, transparent 0 56%, #000 57%);
}
.knob:hover { box-shadow: 0 3px 5px rgba(0, 0, 0, .65), inset 0 1px 1px rgba(255, 255, 255, .18), inset 0 -2px 3px rgba(0, 0, 0, .5), 0 0 0 2px var(--line); }
.knob:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.knob:active { transform: translateY(1px); }
.knob-dot {
  position: absolute; top: 4px; left: 50%; width: 3px; height: 12px; background: var(--accent);
  transform-origin: 50% 18px; transform: translateX(-50%) rotate(var(--a, 0deg));
  box-shadow: 0 0 4px var(--accent); transition: transform .18s cubic-bezier(.4, 1.4, .6, 1);
}
/* "Source" is the special knob (model <-> real photo): a faint accent ring marks it. */
.knob-cell-source .knob { box-shadow: 0 3px 5px rgba(0, 0, 0, .65), inset 0 1px 1px rgba(255, 255, 255, .18), inset 0 -2px 3px rgba(0, 0, 0, .5), 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---- RUN LED: slow pulse for life, quick white flash on view change ---- */
.led.on { animation: ledpulse 2.4s ease-in-out infinite; }
@keyframes ledpulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.led.flash { animation: ledflash .32s ease-out; }
@keyframes ledflash { 0% { filter: brightness(2.6) saturate(.2); } 100% { filter: none; } }

/* ---- Mobile-only chrome (function keys, caption expander, colour dropdown): hidden on desktop ---- */
.scope-fnrow, .desc-toggle, .m-only { display: none; }

/* Colour-family filter menu: little swatch chips beside each family name. */
.hue-chip {
  width: 13px; height: 13px; display: inline-block; border: 1px solid #000;
  margin-right: 9px; vertical-align: -2px; background: #333a48;
}
.hue-chip.rainbow { background: linear-gradient(90deg, #d06bb0, #c9a35c, #3fbfa0, #5b8fd6); }

/* Desktop colour-family filter, expanded horizontally: one clickable chip per family
   (click again to clear). The rainbow chip is "all colours". */
.hue-bar { display: inline-flex; align-items: center; gap: 9px; padding: 0 2px; }
.hue-lbl {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--fg-dim); margin-right: 4px;
}
.hue-cell {
  width: 21px; height: 21px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28); background: #333a48;
  box-shadow: 2px 2px 0 var(--line);
}
.hue-cell:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--line); }
.hue-cell:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line); }
.hue-cell.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.hue-cell.rainbow { background: linear-gradient(90deg, #d06bb0, #c9a35c, #3fbfa0, #5b8fd6); }

/* Mobile colour-filter trigger: the button face IS the current colour (rainbow = all). */
.dd-btn.hue-trigger { padding: 9px; }
.hue-trigger .hue-chip { width: 20px; height: 20px; margin: 0; vertical-align: 0; display: block; }

/* ---- "How we get the colours" explainer page ---- */
.how .site-head h1 { font-size: 22px; }
.how-chain {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 22px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px;
}
.how-chain-box {
  padding: 7px 10px; background: var(--bg-3); border: 1px solid var(--line);
  color: var(--fg-dim); box-shadow: 2px 2px 0 var(--line);
}
.how-chain-hex { color: var(--accent); border-color: var(--accent); }
.how-chain-op { color: var(--fg-faint); }
/* No notched corners here: the panel clip-path would clip tooltips that float past the
   panel edge. Tooltips also hang rightward so they open over the text column. */
.how-step { padding: 20px 22px 18px; margin-bottom: 22px; clip-path: none; }
.how .tip-body { right: auto; left: -10px; }
.how-num {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .8px;
  color: var(--accent); margin-bottom: 6px;
}
.how-step h3 {
  margin: 0 0 10px; font-size: 16px; color: var(--fg);
  text-transform: none; letter-spacing: 0;
}
.how-body { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--fg-dim); max-width: 84ch; }
.how-body strong, .math-body strong { color: var(--fg); }
.jarg { color: var(--fg); }
.jarg .tip { margin-left: 3px; }

/* Diagrams: little screens in the scope's visual language (dark face, mono labels,
   CH1-yellow / CH2-cyan curves where two spectra are compared). */
.dg {
  display: block; width: 100%; max-width: 560px; height: auto; margin: 16px 0 2px;
  background: #04070c; border: 1px solid var(--line);
}
.dg text { font-family: var(--mono); font-size: 10px; fill: var(--fg-dim); letter-spacing: .4px; }
.dg .op { font-size: 16px; fill: var(--fg); }
.dg .ax { stroke: var(--line); stroke-width: 1; }
.dg .bx { fill: #0a0c11; stroke: var(--line); }
.dg .ln { stroke: var(--accent); stroke-width: 2; fill: none; }
.dg .ln.ch1 { stroke: #ffd23f; }
.dg .ln.ch2 { stroke: #3fd0ff; }
.dg .dim { opacity: .55; }
.dg .dash { stroke-dasharray: 5 4; }
.dg .dot { stroke-dasharray: 2 3; }
.dg .band { fill: var(--accent); opacity: .18; stroke: var(--accent); stroke-width: 1; }

/* Collapsed deep-dive: the actual calculations behind a step. */
.math-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 10px;
  background: var(--bg-3); border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase;
  cursor: pointer; box-shadow: 2px 2px 0 var(--line);
}
.math-toggle:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line); }
.math-body {
  margin-top: 10px; padding: 12px 16px; background: #04070c; border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.7; color: var(--fg-dim); max-width: 84ch;
}
.math-body p { margin: 0 0 8px; }
.math-body p:last-child { margin-bottom: 0; }
.math-body ul { margin: 8px 0; padding-left: 18px; }
.math-body li { margin-bottom: 7px; }
.math-body code { font-family: var(--mono); color: var(--fg); font-size: 11.5px; }
.formula {
  display: block; margin: 10px 0; padding: 9px 12px; background: var(--bg-3);
  border-left: 3px solid var(--accent); font-family: var(--mono); font-size: 12px;
  color: var(--fg); overflow-x: auto; white-space: nowrap;
}

/* The gallery ℹ rides inline at the end of the tagline. */
.tagline .info-btn { vertical-align: middle; margin-left: 6px; }
/* Two scope faces are emitted; desktop shows the wide one, phones the compact one. */
.spec-compact { display: none; }

/* The hamburger menu (all viewports): filters, sort, render and accent live here.
   The hamburger is the rightmost control, so its menu hangs left from it. */
.m-menu {
  min-width: 232px; left: auto; right: 0;
  max-height: min(72vh, 640px); overflow-y: auto;
}
.m-menu .dd-head { border-top: 1px solid var(--line); }
.m-menu .dd-head:first-child { border-top: 0; }
.m-menu-row { padding: 10px 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.m-menu .accents { display: grid; grid-template-columns: repeat(4, 24px); gap: 6px; }
/* Generic .dd-menu button.on paints text in the accent, which would vanish on the
   segmented toggles' accent background; restore their dark-on-accent look. */
.m-menu .segmented button { padding: 8px 12px; }
.m-menu .segmented button.on,
.m-menu .segmented button.on:hover { background: var(--accent); color: #05121f; }

/* ---- Phones: compact stacked instrument + minimal gallery toolbar ---- */
@media (max-width: 760px) {
  /* Gallery toolbar: the colour filter (collapsed to its current-colour swatch) + search
     + hamburger; the expanded desktop chip bar is hidden. */
  .m-hide { display: none; }
  .m-only { display: inline-block; }
  /* On phones the count is a second row; drop it while stuck so the bar stays slim. */
  .controls.stuck .count { display: none; }
  .count { text-align: left; }
  /* Tooltips hang right on phones: their trigger sits near the left screen edge. */
  .tip-body { right: auto; left: -10px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .count { flex-basis: 100%; }
  /* Two 160px-canvas cards don't fit 390px minus paddings; let the planet shrink to its
     column (fixed width made the cards overflow right, so nothing looked centred). */
  .card { padding: 12px 6px; }
  .card-planet { width: min(160px, 100%); height: auto; aspect-ratio: 1 / 1; }

  /* Detail header: tighter; the long caption collapses behind a toggle. */
  .detail-head { gap: 14px; margin: 8px 0 16px; }
  .detail-title h1 { font-size: 24px; }
  .desc-slot.has-obs { min-height: 0; }
  .desc-toggle {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 5px 9px;
    background: var(--bg-3); border: 1px solid var(--accent); color: var(--accent);
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase;
    cursor: pointer; box-shadow: 2px 2px 0 var(--line);
  }
  .desc-toggle:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line); }
  .desc-body:not(.open) { display: none; }
  .viewnote { margin-top: 8px; }

  /* Scope header: the model line duplicates the page title, so drop it; let the rest wrap.
     Tighter gaps + button padding so VIEW + both buttons + ℹ fit one row on a 390px phone. */
  .scope-top { flex-wrap: wrap; row-gap: 6px; padding: 10px 14px; gap: 10px; }
  .scope-model { display: none; }
  .scope-view { flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
  .led-btn { padding: 6px 8px; font-size: 11px; }

  /* Stacked instrument: the PLANET DISPLAY knobs first (right under the planet picture
     they control), then the screen (compact face, legible labels), then the F1–F3 keys
     paging measure / palette / planet data. display:contents lets the rail's modules
     re-order independently inside the one-column grid. */
  .scope-main { grid-template-columns: 1fr; min-height: 0; }
  .scope-rail { display: contents; }
  .rail-display { order: 1; margin: 12px 12px 0; }
  .scope-screen { order: 2; margin: 10px 12px 12px; }
  .spec-wide { display: none; }
  .spec-compact { display: flex; }
  .hud-div .w { display: none; } .hud-div .c { display: inline; }
  .rail-vent { display: none; }
  .rail-display .knob-row { justify-content: space-evenly; }
  .rail-measure { display: none; order: 4; margin: 12px; }
  .detail[data-panel="readout"] .rail-measure { display: block; }
  /* Function keys as physical scope keycaps (cf. R&S MXO front panel): rounded caps
     lit from above with real extrusion below, travel on press, active key backlit
     in the accent like a lit Run/Stop key. Skeuomorphic on purpose — like the knobs,
     these are physical controls, so they're an exception to the square-corner rule. */
  .scope-fnrow {
    display: flex; order: 3; gap: 14px; padding: 13px 14px 16px;
    border-top: 1px solid var(--line); background: #0d1017;
  }
  .fn-btn {
    flex: 1; padding: 8px 4px 9px; cursor: pointer;
    border-radius: 5px; border: 1px solid #05070b; border-top-color: #39414f;
    background: linear-gradient(180deg, #2a3140 0%, #1c212c 45%, #141821 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .12),
      inset 0 -2px 3px rgba(0, 0, 0, .45),
      0 3px 0 #05070b,
      0 5px 7px rgba(0, 0, 0, .55);
    color: var(--fg-dim);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
  }
  .fn-btn .fn-key { display: block; font-size: 8px; color: var(--fg-faint); margin-bottom: 3px; }
  .fn-btn:active {
    transform: translateY(3px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      inset 0 2px 4px rgba(0, 0, 0, .5),
      0 1px 0 #05070b;
  }
  .fn-btn.on {
    color: #05121f;
    border-color: color-mix(in srgb, var(--accent) 45%, black);
    border-top-color: color-mix(in srgb, var(--accent) 70%, white);
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 88%, white) 0%,
      var(--accent) 50%,
      color-mix(in srgb, var(--accent) 82%, black) 100%);
    transform: translateY(2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .35),
      0 1px 0 #05070b,
      0 0 13px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .fn-btn.on .fn-key { color: #05121f; opacity: .6; }

  /* One info panel at a time, picked by the function keys. */
  .scope-bottom { display: none; }
  .detail[data-panel="palette"] .scope-bottom { display: flex; }
  .dossier { display: none; }
  .detail[data-panel="data"] .dossier { display: block; }
  /* The colour table duplicates the F1 readout (hex / Y / conf / gamut): planet facts only. */
  .dossier-grid { grid-template-columns: 1fr; }
  .dossier-grid .dossier-stats:first-child { display: none; }
  .dossier-head h3 span { display: none; }
}

/* ---- Compare page ---- */
.lede-link { color: var(--accent); white-space: nowrap; margin-left: 6px; }
/* Centre the whole compare page (header + content) rather than letting it hug the left. */
.compare-page { max-width: 920px; margin: 0 auto; }
.compare { max-width: none; }
.cmp-search { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); font: inherit; font-size: 14px; padding: 10px 12px; box-shadow: 3px 3px 0 var(--line); width: 100%; }
.cmp-search:focus { outline: none; border-color: var(--accent); box-shadow: 3px 3px 0 var(--accent); }
.cmp-vs { font-family: var(--pixel); font-size: 10px; color: var(--fg-faint); flex: none; }
.cmp-swap { width: 42px; height: 42px; flex: none; border: 1px solid var(--line); background: var(--bg-3); color: var(--accent); font-size: 18px; cursor: pointer; box-shadow: 3px 3px 0 var(--line); }
.cmp-swap:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--line); }
.cmp-empty { color: var(--fg-faint); text-align: center; padding: 44px 0; line-height: 1.6; }

/* Slots: each shows the current selection and opens the planet browser on click. */
.cmp-slots { display: flex; align-items: stretch; gap: 12px; margin: 8px 0 24px; flex-wrap: wrap; }
/* On narrow screens two side-by-side slots + vs + swap don't fit; stack them cleanly. */
@media (max-width: 640px) {
  .cmp-slots { flex-direction: column; align-items: stretch; gap: 10px; }
  .cmp-slots .cmp-vs, .cmp-slots .cmp-swap { align-self: center; }
}
.cmp-slot {
  flex: 1; min-width: 200px; text-align: left; cursor: pointer; padding: 12px 14px;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--fg-dim);
  box-shadow: 3px 3px 0 var(--line); font: inherit; min-height: 58px;
}
.cmp-slot:hover { border-color: var(--accent); }
.cmp-slot:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--line); }
.cmp-slot-empty { font-family: var(--pixel); font-size: 11px; letter-spacing: .3px; color: var(--fg-dim); }
.cmp-slot-in { display: flex; align-items: center; gap: 11px; }
.cmp-slot-sw { width: 34px; height: 34px; flex: none; border: 1px solid #000; }
.cmp-slot-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cmp-slot-txt b { color: var(--fg); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-slot-txt i { color: var(--fg-faint); font-size: 11px; font-style: normal; }
.cmp-slot-act { font-family: var(--pixel); font-size: 7px; letter-spacing: .3px; text-transform: uppercase; color: var(--accent); flex: none; }

/* The browser pop-over: search + colour/type filters + a scrollable planet list. */
.cmp-picker { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cmp-picker-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.cmp-picker-box {
  position: relative; width: 100%; max-width: 520px; max-height: 82vh; display: flex;
  flex-direction: column; background: var(--bg-2); border: 1px solid var(--accent);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .5); padding: 16px;
}
.cmp-picker-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--pixel); font-size: 12px; margin-bottom: 12px; }
.cmp-picker-head b { color: var(--accent); }
.cmp-picker-x { border: 0; background: none; color: var(--fg-dim); font-size: 22px; line-height: 1; cursor: pointer; }
.cmp-picker-x:hover { color: var(--fg); }
.cmp-picker-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cmp-fil-lbl { font-family: var(--pixel); font-size: 8px; letter-spacing: .4px; text-transform: uppercase; color: var(--fg-faint); margin-right: 4px; }
.cmp-tchip {
  padding: 4px 8px; border: 1px solid var(--line); background: var(--bg-3); color: var(--fg-dim);
  font-size: 11px; cursor: pointer;
}
.cmp-tchip.on { border-color: var(--accent); color: var(--fg); }
/* Column labels for the list (replaces a bare count; the count folds in on the left). */
.cmp-phead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font-family: var(--pixel); font-size: 8px; letter-spacing: .3px; text-transform: uppercase;
  color: var(--fg-faint);
}
.cmp-phead-l em { font-style: normal; color: var(--fg-dim); }
.cmp-phead-r { display: flex; }
.cmp-picker-list { overflow-y: auto; }
.cmp-prow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 6px; border: 0; border-bottom: 1px dashed var(--line); background: none; color: var(--fg);
  font: inherit;
}
.cmp-prow:hover { background: var(--bg-3); }
.cmp-prow.on { background: var(--bg-3); box-shadow: inset 3px 0 0 var(--accent); }
.cmp-prow-sw { width: 20px; height: 20px; flex: none; border: 1px solid #000; }
.cmp-prow-name { font-size: 13px; flex: none; }
.cmp-prow-meta { font-size: 11px; color: var(--fg-faint); margin-left: auto; white-space: nowrap; }
/* host star | distance from Earth — a pipe separates the two values (and the two labels). */
.cmp-mi + .cmp-mi::before { content: "|"; margin: 0 8px; color: var(--fg-faint); }
@media (max-width: 560px) {
  .cmp-prow-meta .cmp-mi:first-child, .cmp-phead-r .cmp-mi:first-child { display: none; }
  .cmp-prow-meta .cmp-mi::before, .cmp-phead-r .cmp-mi::before { content: none; }
}
.cmp-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 22px; }
.cmp-col { text-align: center; }
.cmp-planet { width: 150px; height: 150px; image-rendering: pixelated; image-rendering: crisp-edges; background: transparent; }
.cmp-col h2 { margin: 6px 0 2px; font-size: 15px; letter-spacing: -0.01em; }
.cmp-host { color: var(--fg-dim); font-size: 12px; }
.cmp-hex { display: inline-block; margin-top: 5px; font-family: var(--mono); font-size: 12px; color: var(--fg-dim); }
.cmp-pal { display: flex; height: 16px; margin: 9px auto 0; max-width: 210px; border: 1px solid var(--line); }
.cmp-pal span { flex: 1; }
.cmp-open { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--accent); }
.cmp-why { border: 1px solid var(--accent); border-left-width: 4px; background: var(--bg-3); padding: 12px 16px; font-size: 13px; line-height: 1.55; color: var(--fg-dim); margin: 0 0 22px; }
.cmp-why strong { color: var(--fg); }
.cmp-group { margin-bottom: 18px; }
.cmp-group-head { font-family: var(--pixel); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 6px; }
.cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.cmp-va { text-align: right; color: var(--fg); }
.cmp-vb { text-align: left; color: var(--fg); }
.cmp-mid { font-family: var(--pixel); font-size: 8px; letter-spacing: .3px; text-transform: uppercase; color: var(--fg-faint); white-space: nowrap; text-align: center; align-self: center; }
@media (max-width: 560px) {
  .cmp-planet { width: 120px; height: 120px; }
  .cmp-mid { font-size: 7px; }
  .cmp-row { gap: 8px; }
}