:root {
  color-scheme: light;
  --mono:  "APL385 Unicode", "DejaVu Sans Mono", ui-monospace, monospace;
  --bg: #E6EADB;
  --surface: #F6F7F0;
  --ink: #1F2A1B;
  --muted: #5B6652;
  --line: #C9CFBA;
  --accent: #3F7A35;
  --on-accent: #F6F7F0;
  --code-bg: #FBFBF6;
  --error: #A3361F;
  --soil: #8C6A4A;
  --soil-2: #6E5238;
  --seed: #EADCC0;
  --leaf: #3F7A35;
  --ripe: #E0A92A;
  --rot: #4A3A28;
  --mark: #FFF2B8;
  --preview: #2F6FA8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141A12;
    --surface: #1C2419;
    --ink: #E4E9D6;
    --muted: #9AA48C;
    --line: #33402C;
    --accent: #86C26A;
    --on-accent: #10150E;
    --code-bg: #10150E;
    --error: #F08A6E;
    --soil: #4E3B2A;
    --soil-2: #33271B;
    --seed: #CDBB98;
    --leaf: #7DB561;
    --ripe: #EDBD47;
    --rot: #9A8060;
    --mark: #F7EBA8;
    --preview: #8EC3F0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141A12;
  --surface: #1C2419;
  --ink: #E4E9D6;
  --muted: #9AA48C;
  --line: #33402C;
  --accent: #86C26A;
  --on-accent: #10150E;
  --code-bg: #10150E;
  --error: #F08A6E;
  --soil: #4E3B2A;
  --soil-2: #33271B;
  --seed: #CDBB98;
  --leaf: #7DB561;
  --ripe: #EDBD47;
  --rot: #9A8060;
  --mark: #F7EBA8;
  --preview: #8EC3F0;
}
:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
}
/* The page uses wide screens, so the field can be the biggest thing on them. */
:root {
  --page-w: 1560px;
  /* The field's size: as big as fits on screen with its stats and key, between 480px and 640px. */
  --field: max(480px, min(640px, calc(100svh - 600px)));
}
.wrap { max-width: var(--page-w); margin: 0 auto; padding: clamp(16px, 4vw, 40px); }
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; }
.topbar .farm-bar { grid-column: 1 / -1; }
.topbar .intro { grid-column: 1 / -1; margin: -4px 0 0; max-width: 62ch; color: var(--muted); font-size: 1.05rem; }
.topbar h1 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}
.panel-buttons { display: flex; flex-wrap: wrap; gap: 8px; grid-row: 1; grid-column: 2; }
/* On a phone the buttons go below the title, so they wrap instead of running off the side. */
@media (max-width: 640px) { .panel-buttons { grid-row: auto; grid-column: 1 / -1; } }
.panel-buttons button {
  font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 7px 14px;
}
.panel-buttons button:hover { border-color: var(--muted); }
.panel-buttons button[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.new-badge { margin-left: 7px; font-size: 0.72rem; font-weight: 700; background: var(--ripe); color: var(--medal-ink); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }
.new-badge[hidden] { display: none; }
.god-badge { align-self: center; font-size: 0.78rem; font-weight: 700; background: var(--error); color: var(--bg); border-radius: 999px; padding: 3px 9px; }
.god-badge[hidden] { display: none; }
/* Things that come and go with the farm keep their space, so switching farms doesn't shift the page:
   the medals (on real farms) and New field (on Practice Farm) share one slot of fixed height. */
.farm-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 38px; }
#farmInfo:empty { display: none; }
.mixed-note { border: 1px solid var(--line); border-left: 4px solid var(--ripe); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; }
.mixed-note p { margin: 0 0 10px; }
.mixed-note[hidden] { display: none; }
.site-footer { margin: 40px 0 8px; text-align: center; font-size: 0.85rem; color: var(--muted); }
.site-footer a { color: inherit; text-underline-offset: 3px; }
.mod-toggle[hidden] { display: none; }
.mod-toggle[aria-pressed="true"] { background: var(--ripe); color: var(--bg); border-color: var(--ripe); }
.mod-toggle[aria-disabled="true"] { opacity: 0.45; border-style: dashed; cursor: help; }
/* On a phone, Practice Farm's short note gives way, so its buttons fit one row like the other farms' medals. */
@media (max-width: 640px) { #farmInfo { display: none; } }
/* The side panel slides in from the right. On wide screens the game moves aside to make room. */
:root { --panel-w: min(440px, 100vw); }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 10; width: var(--panel-w); overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px calc(env(safe-area-inset-bottom, 0px) + 28px);
}
.panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .panel:not([hidden]) { animation: panel-in 180ms ease-out; } }
@keyframes panel-in { from { transform: translateX(24px); opacity: 0; } }
/* With the panel open, the game stays where it is if it fits beside the panel; otherwise it moves
   left only as far as it must, and narrows only when it has to. */
@media (min-width: 1100px) {
  body.panel-open .wrap {
    margin-left: max(0px, min(calc((100% - var(--page-w)) / 2), calc(100% - var(--panel-w) - var(--page-w))));
    margin-right: var(--panel-w);
  }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) { .wrap { transition: margin 180ms ease-out; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.panel-head h2:focus { outline: none; }
.panel h3 { margin: 18px 0 6px; font-size: 1rem; font-weight: 600; }
.panel .lede { margin: 0; color: var(--muted); }
#pAbout p:not(.lede) { margin: 0; color: var(--muted); }
#pAbout p:last-child { margin-top: 16px; }
.panel a { color: var(--accent); }
button.link { font: inherit; font-weight: inherit; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
.game {
  display: grid;
  /* The field's panel is exactly as wide as the field (plus its padding), so there's no empty space
     beside it; the code takes the rest. When space is short (a side panel open), the field gives way. */
  grid-template-columns: minmax(0, calc(var(--field) + 26px)) minmax(300px, 1fr);
  gap: clamp(16px, 3vw, 32px);
  margin-top: clamp(20px, 3vw, 32px);
  align-items: start;
}
@media (max-width: 820px) { .game { grid-template-columns: 1fr; } }
.plot { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
#field { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; background: var(--soil-2); box-shadow: 0 0 0 4px var(--frame); }
/* Each farm has its own soil and field edge, so they're recognisable at a glance. Middlebourne (and Practice)
   keep the default warm brown with a hedgerow green; Sunnyhill is sandy with a golden edge; Marshgate is
   dark, damp peat edged with reeds; Crowhurst is grey, stony ground behind a weathered fence; Blightwick
   is tired, ashen soil edged in a sickly mauve. */
:root { --frame: #6E8A45; }
:root[data-farm="sunnyhill-farm"] { --soil: #A8834F; --soil-2: #8A6838; --frame: #D4A93C; }
:root[data-farm="marshgate-farm"] { --soil: #5D5443; --soil-2: #453E31; --frame: #4F7A6C; }
:root[data-farm="crowhurst-farm"] { --soil: #7D756A; --soil-2: #5F584F; --frame: #5A4E43; }
:root[data-farm="blightwick-farm"] { --soil: #77695A; --soil-2: #5A4E43; --frame: #7D6A8F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --frame: #4F6634; }
  :root[data-farm="sunnyhill-farm"]:not([data-theme="light"]) { --soil: #5E4729; --soil-2: #3E2E1A; --frame: #A8842C; }
  :root[data-farm="marshgate-farm"]:not([data-theme="light"]) { --soil: #38322A; --soil-2: #24201A; --frame: #3D5F54; }
  :root[data-farm="crowhurst-farm"]:not([data-theme="light"]) { --soil: #47423B; --soil-2: #2F2B27; --frame: #4A4038; }
  :root[data-farm="blightwick-farm"]:not([data-theme="light"]) { --soil: #453A30; --soil-2: #2D2620; --frame: #5C4C6B; }
}
:root[data-theme="dark"] { --frame: #4F6634; }
:root[data-theme="dark"][data-farm="sunnyhill-farm"] { --soil: #5E4729; --soil-2: #3E2E1A; --frame: #A8842C; }
:root[data-theme="dark"][data-farm="marshgate-farm"] { --soil: #38322A; --soil-2: #24201A; --frame: #3D5F54; }
:root[data-theme="dark"][data-farm="crowhurst-farm"] { --soil: #47423B; --soil-2: #2F2B27; --frame: #4A4038; }
:root[data-theme="dark"][data-farm="blightwick-farm"] { --soil: #453A30; --soil-2: #2D2620; --frame: #5C4C6B; }
.field-stage { position: relative; width: min(100%, var(--field)); margin: 0 auto; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.field-stage.bump { animation: bump 260ms ease-out; }
@keyframes bump { 30% { transform: scale(1.015); } }
.stats { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.stat { display: flex; flex-direction: column; }
.stat[hidden] { display: none; }
.stat span { font-size: 0.85rem; color: var(--muted); }
.stat strong { font-size: 1.45rem; font-weight: 600; }
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; margin-top: 14px; font-size: 0.9rem; color: var(--muted); }
.legend div { display: flex; align-items: center; gap: 8px; }
.legend canvas { flex: none; }
.legend canvas { width: 40px; height: 40px; border-radius: 6px; background: var(--soil-2); }
.legend code { font-family: var(--mono); color: var(--ink); font-weight: 600; }
.rules { margin: 0; padding-left: 1.3em; font-size: 0.92rem; color: var(--muted); max-width: 62ch; }
.rules li { margin: 4px 0; }
.editor .label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.editor label.title { font-weight: 600; }
.status { font-size: 0.85rem; color: var(--muted); }
.label-tools { display: flex; align-items: baseline; gap: 12px; }
.small-button { font: inherit; font-size: 0.85rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 2px 9px; cursor: pointer; }
.small-button:hover { border-color: var(--muted); }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.field-title { font-weight: 600; }
.field-title code { font-family: var(--mono); font-size: 1.05em; }
p code, li code { font-family: var(--mono); font-size: 0.95em; color: var(--ink); }
.status[data-state="code"], .status[data-state="result"], .status[data-state="internal"], .status[data-state="locked"] { color: var(--error); }
#diag { margin-top: 8px; min-height: 1.4em; font: 0.88rem/1.4 var(--mono); color: var(--error); white-space: pre-wrap; }
textarea {
  width: 100%;
  min-height: 420px;
  resize: vertical;
  font: 16px/1.5 var(--mono);
  background: var(--code-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  padding: 12px 14px;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  display: block;
}
#code[hidden], .framed[hidden] { display: none; }
.code-note { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
.framed { background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px 10px 0 0; padding: 10px 14px; }
.scare-box { border-radius: 10px; margin-top: 12px; }
.scare-box[hidden] { display: none; }
.legend-space, .legend > div { min-height: 46px; }
.frame-fn + .frame-fn { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.frame-edge { display: block; font: 16px/1.5 var(--mono); color: var(--muted); user-select: none; }
textarea.frame-body { min-height: 150px; border: 0; border-radius: 0; padding: 2px 0 2px 2ch; background: transparent; }
textarea.frame-body.frame-scare { min-height: 90px; }
textarea.frame-body:focus { outline: none; box-shadow: inset 2px 0 0 var(--muted); }
.words { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-top: 0; }
.words button { font: 15px/1 var(--mono); padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--code-bg); color: var(--ink); cursor: pointer; }
.words button:hover { border-color: var(--muted); }
.words button[aria-disabled="true"] { opacity: 0.45; border-style: dashed; cursor: help; }
.keys { padding-top: 0; }
.keys button { min-width: 2.4em; }
.keys button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (pointer: coarse) { .glyphs button { min-width: 42px; min-height: 42px; } .words button { min-height: 40px; } }
.glyphs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
}
.glyphs button {
  font: 18px/1 var(--mono);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
}
.glyphs button:hover { background: var(--code-bg); border-color: var(--line); }
.glyphs button:disabled { opacity: 0.3; cursor: not-allowed; }
.glyphs button:disabled:hover { background: transparent; border-color: transparent; }
.guide-item { margin: 0 0 12px; }
.guide-item h3 { margin: 0; font-size: 1.05rem; font-weight: 600; font-family: var(--mono); }
.guide-item h3.prose { font-family: inherit; font-size: 0.95rem; }
.guide-item p { margin: 3px 0 0; color: var(--muted); font-size: 0.9rem; }
.guide-item pre { margin: 6px 0 0; padding: 8px 10px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; font: 0.85rem/1.45 var(--mono); overflow-x: auto; }
/* Locked entries are set apart by a dashed edge and muted text, not by fading, so they stay readable. */
.guide-item[data-locked="true"] { border-style: dashed; }
.guide-item[data-locked="true"] h3, .guide-item[data-locked="true"] p { color: var(--muted); }
.snippet { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px 10px; margin-top: 8px; padding: 6px 8px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; }
.snippet code { font-family: var(--mono); font-size: 1rem; }
.leaderboard { margin-top: 18px; }
.lb-list { list-style: none; margin: 8px 0; padding: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lb-list li { display: grid; grid-template-columns: 2.2em 3.5em 1fr; gap: 8px; padding: 4px 8px; border-radius: 6px; }
.lb-list li:nth-child(odd) { background: var(--code-bg); }
.lb-list li.checking { color: var(--muted); }
.lb-list li.empty { display: block; font-family: inherit; color: var(--muted); }
.lb-form { display: flex; gap: 8px; align-items: center; }
#lbInitials { font-family: var(--mono); font-size: 1.6rem; letter-spacing: 0.4em; text-transform: uppercase; width: 4.6em; padding: 4px 6px 4px 12px; border: 2px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.lb-note { color: var(--muted); font-size: 0.82rem; }
.apl-example { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 6px; }
.apl-example canvas { width: 132px; height: 132px; border-radius: 8px; background: var(--soil-2); }
.apl-example-op { font-family: var(--mono); font-size: 1.05rem; }
.apl-example-op::after { content: " →"; color: var(--muted); }
.apl-example-result { display: grid; grid-template-columns: repeat(3, 40px); gap: 4px; }
.apl-example-result span { display: grid; place-items: center; height: 40px; border-radius: 6px; font-family: var(--mono); font-size: 1.1rem; background: var(--code-bg); border: 1px solid var(--line); }
.apl-example-result span.on { background: var(--ripe); border-color: var(--ripe); color: #2a1e05; font-weight: 700; }
.apl-example figcaption { flex-basis: 100%; color: var(--muted); font-size: 0.9rem; }
.apl-example-part { display: flex; flex-direction: column; gap: 4px; }
.apl-example-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.snippet-note { color: var(--muted); font-size: 0.85rem; }
#pGuide .lede { margin-bottom: 14px; }
.example-note { margin: -2px 2px 10px; font-size: 0.9rem; color: var(--preview); }
.example-note code { color: var(--preview); font-weight: 600; }
.unlock { color: var(--ink); font-weight: 600; }
.glyphs .gap { width: 8px; }
.hint { color: var(--muted); font-size: 0.85rem; margin: 8px 0 0; }
.hint kbd { font-family: var(--mono); font-size: 0.95em; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.controls button, .controls select {
  font: inherit;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 8px 14px;
  cursor: pointer;
}
.controls button:hover, .controls select:hover { border-color: var(--muted); }
.controls button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; min-width: 5.5em; }
:focus-visible { outline: 3px solid var(--ripe); outline-offset: 2px; }
/* Read by screen readers, not shown. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Shown only when reached with the keyboard: the first Tab jumps straight to the code. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 8px 14px; border-radius: 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); text-decoration: none; }
.skip-link:focus { top: 12px; }
/* Explanations for name, key and symbol buttons, shown on keyboard focus or a long press. */
.tip { position: fixed; z-index: 70; max-width: 300px; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 0.85rem; line-height: 1.35; pointer-events: none; box-shadow: 0 4px 14px rgb(0 0 0 / 25%); }
.speed { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.95rem; }
#msg { margin-top: 12px; min-height: 1.5em; font-size: 0.95rem; }
#msg.error { color: var(--error); font-family: var(--mono); white-space: pre-wrap; }
.report-stats { display: flex; flex-wrap: wrap; gap: 8px 32px; font-variant-numeric: tabular-nums; }
.farm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.farm-bar label { font-weight: 600; }
.farm-bar select { max-width: 15em; font: inherit; font-size: 0.95rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 7px 12px; }
.farm-bar span { color: var(--muted); font-size: 0.9rem; }
.farm-bar button { font: inherit; font-size: 0.95rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 7px 12px; cursor: pointer; }
.farm-bar button:hover { border-color: var(--muted); }
.farm-bar button[hidden] { display: none; }
.weather { display: inline-flex; gap: 6px; }
.farm-bar .weather span { font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.targets { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.targets[hidden] { display: none; }
/* Medal colours: each target is outlined in its metal until earned, then filled with it. */
:root { --bronze: #C98543; --silver: #B8BEC6; --gold: #E2B53A; --bronze-edge: #9A5A22; --silver-edge: #6F7680; --gold-edge: #94700F; --medal-ink: #2A2114; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bronze-edge: #C98543; --silver-edge: #B8BEC6; --gold-edge: #E2B53A; } }
:root[data-theme="dark"] { --bronze-edge: #C98543; --silver-edge: #B8BEC6; --gold-edge: #E2B53A; }
.farm-bar .tier[data-tier="bronze"] { --tier: var(--bronze); --tier-edge: var(--bronze-edge); }
.farm-bar .tier[data-tier="silver"] { --tier: var(--silver); --tier-edge: var(--silver-edge); }
.farm-bar .tier[data-tier="gold"] { --tier: var(--gold); --tier-edge: var(--gold-edge); }
.farm-bar .tier { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; border: 1px solid var(--tier-edge); border-radius: 999px; padding: 3px 10px; }
.farm-bar .tier::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--tier-edge); }
.farm-bar .tier[data-earned="true"] { background: var(--tier); color: var(--medal-ink); font-weight: 600; }
.farm-bar .tier[data-earned="true"]::before { background: var(--medal-ink); }
.controls button:disabled { opacity: 0.45; cursor: not-allowed; }
.compare { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.compare h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.compare p { margin: 8px 0 0; color: var(--muted); }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.chart-head h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { font: inherit; font-size: 0.9rem; padding: 6px 14px; border: 0; background: var(--surface); color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
#chart { display: block; width: 100%; height: 220px; margin-top: 10px; }
.readout { margin: 6px 0 0; min-height: 1.4em; font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }