/* Style: taste-skill app sheet "Achromatic ledger" (seed 1160862325): ink chrome, colour only on data.
   Controls (tabs, toggle group, tooltip, slider, badge, button, combobox) follow Watermelon UI
   (github.com/WatermelonCorp/watermelon-platform, MIT), ported from Tailwind to plain CSS. */
:root {
  --ground: #f2f4f7; --surface: #ffffff; --raised: #eeeeee; --border: #e6e6e6; --rule: #f0f0f0; --control: #d4d4d4;
  --text: #0a0a0a; --muted: #6b6b6b; --accent: #141414; --accent-ink: #ffffff;
  --chart-3: #1d5fbf; --positive: #2e7d32; --negative: #c4242a;
  --pill-neutral-bg: #eeeeee; --pill-neutral-ink: #3d3d3d;
  --pill-blue-bg: #e3edfb; --pill-blue-ink: #123d7d;
  --pill-warning-bg: #fffbeb; --pill-warning-ink: #92400e;
  --pill-positive-bg: #dcfae5; --pill-positive-ink: #04250e;
  --ocean: #bcd6ec; --ocean-deep: #9fc2e1; --coast: #84acd2; --nodata: #d7dbe0; --land-stroke: #ffffff;
  --tip-bg: #0a0a0a; --tip-ink: #fafafa; --tip-muted: #a3a3a3;
  --radius-card: 8px; --radius-control: 6px; --control-height: 36px; --gap: 12px; --pad: 20px;
  --fs-title: 24px; --fs-section: 16px; --fs-body: 14px; --fs-small: 13px;
  --font: "Geist", Inter, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0a0a0a; --surface: #141414; --raised: #1f1f1f; --border: #262626; --rule: #1c1c1c; --control: #3a3a3a;
    --text: #f5f5f5; --muted: #a3a3a3; --accent: #f5f5f5; --accent-ink: #0a0a0a; --chart-3: #5b9cf0;
    --pill-neutral-bg: #262626; --pill-neutral-ink: #d4d4d4; --pill-blue-bg: #13294b; --pill-blue-ink: #bcd6fb;
    --pill-warning-bg: #3a2a0a; --pill-warning-ink: #fcd34d; --pill-positive-bg: #0f2e19; --pill-positive-ink: #a7f3c0;
    --ocean: #0d2537; --ocean-deep: #081827; --coast: #24506f; --nodata: #2e333a; --land-stroke: #0a0a0a;
    --tip-bg: #fafafa; --tip-ink: #0a0a0a; --tip-muted: #525252;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0a0a0a; --surface: #141414; --raised: #1f1f1f; --border: #262626; --rule: #1c1c1c; --control: #3a3a3a;
  --text: #f5f5f5; --muted: #a3a3a3; --accent: #f5f5f5; --accent-ink: #0a0a0a; --chart-3: #5b9cf0;
  --pill-neutral-bg: #262626; --pill-neutral-ink: #d4d4d4; --pill-blue-bg: #13294b; --pill-blue-ink: #bcd6fb;
  --pill-warning-bg: #3a2a0a; --pill-warning-ink: #fcd34d; --pill-positive-bg: #0f2e19; --pill-positive-ink: #a7f3c0;
  --ocean: #0d2537; --ocean-deep: #081827; --coast: #24506f; --nodata: #2e333a; --land-stroke: #0a0a0a;
  --tip-bg: #fafafa; --tip-ink: #0a0a0a; --tip-muted: #525252;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--ground); color: var(--text); font: 400 var(--fs-body)/1.5 var(--font); font-variant-numeric: tabular-nums; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--chart-3); outline-offset: 2px; }

.app { height: 100%; display: grid; grid-template-columns: 248px minmax(0, 1fr) 380px; gap: var(--gap); padding: var(--gap); }

/* ---- sidebar (open plane) ---- */
.side { display: flex; flex-direction: column; gap: 24px; padding: 8px 4px; min-height: 0; overflow-y: auto; }
.brand { display: flex; gap: 10px; align-items: center; padding: 0 8px; }
.mark { width: 30px; height: 30px; flex: none; }
.brand h1 { font-size: 16px; font-weight: 500; }
.brand p { color: var(--muted); font-size: var(--fs-small); }
.nav { display: grid; gap: 2px; }
.navlabel { color: var(--muted); font-size: var(--fs-small); padding: 0 10px 4px; }
.nav button { display: flex; gap: 10px; align-items: center; height: 32px; padding: 0 10px; border: 0; background: none; border-radius: var(--radius-control); cursor: pointer; color: var(--muted); text-align: left; }
.nav button:hover { color: var(--text); background: color-mix(in srgb, var(--raised) 60%, transparent); }
.nav button[aria-current="true"] { background: var(--raised); color: var(--text); font-weight: 500; }
.controls { display: grid; gap: 10px; padding: 0 4px; }
.controls .hint { color: var(--muted); font-size: var(--fs-small); }
.sidefoot { margin-top: auto; }

/* ---- buttons (Watermelon: h-8 rounded-lg, primary / outline / ghost / icon) ---- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--radius-control); border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); font-weight: 500; cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.btn:hover { background: color-mix(in srgb, var(--accent) 82%, transparent); }
.btn.outline { background: var(--surface); color: var(--text); border-color: var(--control); }
.btn.outline:hover { background: var(--raised); }
.btn.ghost { background: none; color: var(--muted); padding: 0 8px; }
.btn.ghost:hover { background: var(--raised); color: var(--text); }
.ibtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-control); background: none; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.ibtn:hover { background: var(--raised); color: var(--text); }
.ibtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.ibtn.solid { background: var(--accent); color: var(--accent-ink); border-radius: 999px; }

/* ---- combobox (Watermelon combobox: input + popover list) ---- */
.combo { position: relative; }
.combo .field { display: flex; align-items: center; gap: 6px; height: var(--control-height); padding: 0 8px; background: var(--surface); border: 1px solid var(--control); border-radius: var(--radius-control); }
.combo .field:focus-within { /* taste-skill-ignore: focus ring */ border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--chart-3) 22%, transparent); }
.combo input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: 100%; }
.combo .i { color: var(--muted); }
.combo ul { /* taste-skill-ignore: floating popover */ position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.combo li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; }
.combo li small { color: var(--muted); white-space: nowrap; }
.combo li[aria-selected="true"], .combo li:hover { background: var(--raised); }
.combo li.empty { color: var(--muted); cursor: default; }

/* ---- badges (Watermelon badge: h-5 rounded-full text-xs) ---- */
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-small); font-weight: 500; white-space: nowrap; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); }
.badge.blue { background: var(--pill-blue-bg); color: var(--pill-blue-ink); }
.badge.warn { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.badge.good { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--raised); }
.chip select { border: 0; background: none; color: var(--muted); font-size: var(--fs-small); cursor: pointer; }
.chip button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.chip button:hover { background: var(--control); color: var(--text); }
.chip .i { width: 12px; height: 12px; }

/* ---- map ---- */
.canvas { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--gap); min-height: 0; }
.mapcard { position: relative; background: var(--ocean); border-radius: var(--radius-card); overflow: hidden; min-height: 320px; }
#map { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#map:active { cursor: grabbing; }
.sphere { fill: transparent; }
.graticule { fill: none; stroke: color-mix(in srgb, #ffffff 35%, transparent); stroke-width: 0.5; }
.mapcard { background: radial-gradient(ellipse at 50% 40%, var(--ocean), var(--ocean-deep)); } /* taste-skill-ignore: ocean depth on the map surface */
.coast { fill: none; stroke: var(--coast); stroke-width: 3; stroke-linejoin: round; opacity: .75; }
.region { stroke: var(--land-stroke); stroke-width: 0.5; cursor: pointer; }
.region.has-data { stroke-width: 1; }
.region:hover { stroke: var(--text); stroke-width: 1.4; }
.region.selected { stroke: var(--text); stroke-width: 2.2; }
.tooltip .tt-strong { color: var(--tip-ink); }
.linkish { all: unset; cursor: pointer; text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; }
.linkish:hover { text-decoration-color: currentColor; }
.hello { margin-top: 16px; padding: 14px; border-radius: var(--radius-card); background: var(--raised); display: grid; gap: 8px; }
.hello > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hello-word { font-size: 26px; font-weight: 500; }
.hello-tr { color: var(--muted); font-size: 16px; }
.hello-ipa { color: var(--muted); font-size: 14px; }
.hello .btn { justify-self: start; }
.hello .note { margin: 0; }
.hello a, .note a { color: inherit; }
.pagelink { margin-top: 10px; text-decoration: none; }
.country { stroke: var(--land-stroke); stroke-width: 0.5; cursor: pointer; }
.country:hover { stroke: var(--text); stroke-width: 1.2; }
.country.selected { stroke: var(--text); stroke-width: 2; }
.pt { fill: var(--text); stroke: var(--surface); stroke-width: 0.8; pointer-events: none; }
.pt.main { fill: var(--negative); stroke-width: 2; }
.maptools { position: absolute; top: 12px; right: 12px; display: grid; gap: 8px; }
.tgroup { display: grid; gap: 2px; padding: 3px; background: var(--surface); border-radius: var(--radius-card); border: 1px solid var(--border); }
.legend { position: absolute; left: 12px; bottom: 12px; max-width: min(560px, calc(100% - 80px)); background: var(--surface); border-radius: var(--radius-card); padding: 10px 12px; font-size: var(--fs-small); border: 1px solid var(--border); }
.legend b { font-weight: 500; }
.legend .ramp { width: 220px; max-width: 100%; height: 8px; border-radius: 2px; margin: 6px 0 2px; }
.legend .ticks { display: flex; justify-content: space-between; color: var(--muted); width: 220px; max-width: 100%; }
.legend .cats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* ---- tooltip (Watermelon tooltip: inverted, rounded-md, text-xs) ---- */
.tooltip { /* taste-skill-ignore: floating tooltip */ position: absolute; z-index: 10; pointer-events: none; background: var(--tip-bg); color: var(--tip-ink); border-radius: var(--radius-control); padding: 8px 10px; font-size: var(--fs-small); width: 250px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.2); }
.tooltip .tt-head { display: flex; justify-content: space-between; gap: 8px; font-weight: 500; font-size: 13px; }
.tooltip .tt-sub { color: var(--tip-muted); margin-bottom: 4px; }
.tooltip .tt-key { font-size: 13px; margin: 2px 0 6px; }
.tooltip .tt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; margin-top: 4px; }
.tooltip .tt-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tooltip .tt-bar { grid-column: 1 / -1; height: 3px; background: color-mix(in srgb, var(--tip-ink) 18%, transparent); border-radius: 2px; margin-top: 2px; }
.tooltip .tt-bar i { display: block; height: 100%; border-radius: 2px; }
.tooltip .tt-foot { color: var(--tip-muted); margin-top: 6px; }

/* ---- timeline (Watermelon slider: h-1 track, white size-3 thumb with ring) ---- */
.timebar { display: flex; align-items: center; gap: 14px; padding: 8px 16px 8px 8px; background: var(--surface); border-radius: var(--radius-card); }
.yearlabel { display: flex; align-items: baseline; gap: 6px; min-width: 128px; }
.yearlabel output { font-size: 20px; font-weight: 500; }
.yearlabel span { color: var(--muted); font-size: var(--fs-small); }
input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 16px; background: none; cursor: pointer; --fill: 100%; }
input[type="range"]::-webkit-slider-runnable-track { /* taste-skill-ignore: filled part of the slider track */ height: 4px; border-radius: 999px; background: linear-gradient(var(--text), var(--text)) 0 / var(--fill) 100% no-repeat, var(--raised); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--raised); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--text); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 999px; background: #fff; border: 1px solid var(--text); transition: box-shadow .15s; }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 999px; background: #fff; border: 1px solid var(--text); }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb { /* taste-skill-ignore: thumb hover ring */ box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 18%, transparent); }

/* ---- panel ---- */
.panel { background: var(--surface); border-radius: var(--radius-card); overflow-y: auto; padding: var(--pad); min-height: 0; }
.panel h2 { font-size: var(--fs-title); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.panel h3 { font-size: var(--fs-section); font-weight: 500; margin: 28px 0 8px; }
.panel .sub { color: var(--muted); margin-top: 4px; }
.panel .back { margin: -6px 0 8px -8px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius-card); }
.kpi { padding: 10px 12px; min-width: 0; }
.kpi + .kpi { /* taste-skill-ignore: divided KPI container */ border-left: 1px solid var(--border); }
.kpi span { display: block; color: var(--muted); font-size: var(--fs-small); }
.kpi b { display: block; font-size: 22px; font-weight: 500; line-height: 1.3; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { /* taste-skill-ignore: list row rule */ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.row .name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.row .name > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .name button { all: unset; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .name button:hover { text-decoration: underline; text-underline-offset: 3px; }
.row .val { color: var(--muted); font-size: var(--fs-small); text-align: right; white-space: nowrap; }
.row .val b { color: var(--text); font-weight: 500; font-size: var(--fs-body); }
.row .bar { grid-column: 1 / -1; height: 4px; background: var(--raised); border-radius: 2px; overflow: hidden; }
.row .bar i { display: block; height: 100%; background: var(--chart-3); border-radius: 2px; }
.row .badges { display: flex; gap: 4px; flex: none; }
.note { color: var(--muted); font-size: var(--fs-small); margin-top: 8px; }
.callout { margin-top: 16px; padding: 12px; border-radius: var(--radius-card); background: var(--raised); }
.callout b { font-size: 22px; font-weight: 500; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; color: var(--muted); font-weight: 400; font-size: var(--fs-small); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); }
table.t td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.t .n { text-align: right; }
table.t td button { all: unset; cursor: pointer; }
table.t td button:hover { text-decoration: underline; }
details { margin-top: 8px; }
details summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
details summary:hover { color: var(--text); }
.filter { width: 100%; height: 32px; margin: 8px 0; padding: 0 8px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); }
.trend { width: 100%; height: auto; display: block; }
.trend path.line { fill: none; stroke: var(--chart-3); stroke-width: 2; }
.trend path.proj { fill: none; stroke: var(--chart-3); stroke-width: 2; stroke-dasharray: 4 3; }
.trend circle { fill: var(--surface); stroke: var(--text); stroke-width: 1.5; }
.trend text { fill: var(--muted); font: 11px var(--font); }
.trend .axis path { display: none; }
.trend .axis line { stroke: var(--border); }
.trend .grid line { stroke: var(--rule); }
.trend .cursor { stroke: var(--text); stroke-dasharray: 2 3; }

dialog { /* taste-skill-ignore: floating dialog */ border: 0; border-radius: var(--radius-card); background: var(--surface); color: var(--text); width: min(720px, calc(100% - 32px)); padding: 20px; box-shadow: 0 16px 48px rgb(0 0 0 / 0.2); }
dialog::backdrop { background: rgb(0 0 0 / 0.35); }
.dialoghead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dialoghead h2 { font-size: 20px; font-weight: 500; }
dialog h3 { font-size: var(--fs-section); font-weight: 500; margin: 20px 0 8px; }
dialog p, dialog li { line-height: 1.55; }

@media (max-width: 1100px) {
  html, body { height: auto; }
  .app { height: auto; grid-template-columns: 220px minmax(0, 1fr); }
  .panel { grid-column: 1 / -1; }
  .canvas { height: 78vh; }
}
@media (max-width: 720px) {
  .app { display: block; padding: 0; }
  .side { gap: 12px; padding: 12px 16px; overflow: visible; }
  .nav { display: flex; overflow-x: auto; gap: 4px; }
  .navlabel { display: none; }
  .nav button { flex: none; background: var(--surface); }
  .sidefoot { display: none; }
  .canvas { height: auto; display: block; padding: 0 16px; }
  .mapcard { height: 58vh; }
  .timebar { position: sticky; bottom: 0; z-index: 5; margin: 8px -16px 0; border-radius: 0; }
  .panel { margin: 12px 16px 16px; }
  .mapcard { height: auto; display: flex; flex-direction: column; }
  #map { height: 52vh; }
  .legend { position: static; max-width: none; border: 0; border-radius: 0; }
  .kpi b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- language page ---- */
body.page { height: auto; }
.pagehead { display: flex; align-items: center; gap: 12px; max-width: 1120px; margin: 0 auto; padding: 12px 8px; }
.brandline { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.brandline .mark { width: 22px; height: 22px; }
.langpage { max-width: 1120px; margin: 0 auto; padding: 8px 16px 48px; }
.langhead h1 { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; }
.langhead .sub { color: var(--muted); margin-top: 4px; }
.langhead .kpis { max-width: 560px; }
.langgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: 20px; }
.card { background: var(--surface); border-radius: var(--radius-card); padding: var(--pad); min-width: 0; }
.card.wide { grid-column: 1 / -1; }
.card h2 { font-size: 18px; font-weight: 500; }
.card h3 { font-size: 14px; font-weight: 500; margin: 18px 0 6px; color: var(--muted); }
.hello.big .hello-word { font-size: 40px; line-height: 1.15; }
.pron { display: flex; gap: 24px; margin: 0; }
.pron dt { color: var(--muted); font-size: var(--fs-small); }
.pron dd { margin: 0; font-size: 16px; }
.helloactions { display: flex; gap: 8px; }
.reslist { list-style: none; margin: 0; padding: 0; }
.reslist li { padding: 8px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 2px; } /* taste-skill-ignore: list row rule */
.reslist a { color: var(--text); font-weight: 500; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.reslist a:hover { text-decoration: underline; }
.reslist a .i { width: 13px; height: 13px; color: var(--muted); }
.reslist span { color: var(--muted); font-size: var(--fs-small); }
#minimap { width: 100%; display: block; margin: 12px 0; background: var(--ocean); border-radius: var(--radius-control); }
.dialects { line-height: 1.8; }
@media (max-width: 720px) { .langgrid { grid-template-columns: 1fr; } .langhead h1 { font-size: 26px; } .hello.big .hello-word { font-size: 32px; } }
.morelinks { margin-top: 6px; color: var(--muted); font-size: var(--fs-small); }
.morelinks a { color: var(--text); }

/* ---- token dashboard ---- */
.tokpage .card { margin-top: var(--gap); }
.tokpage .langgrid { margin-top: 0; }
.tokpage .langgrid .card { margin-top: var(--gap); }
.filterrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.filterrow .note { margin: 0; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.seg button { height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-control); background: none; color: var(--muted); cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--text); background: var(--raised); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.cardhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tokkpis { grid-template-columns: repeat(5, 1fr); max-width: none; background: var(--surface); }
.chart { margin-top: 12px; }
.tokpage svg { display: block; overflow: visible; }
.tokpage .bar, .tokpage .dot { fill: var(--chart-3); }
.tokpage .dot { stroke: var(--surface); stroke-width: 2; }
.tokpage .ln { fill: none; stroke: var(--chart-3); stroke-width: 2; }
.tokpage .grid line { stroke: var(--rule); }
.tokpage .marks line { stroke: var(--control); stroke-dasharray: 2 3; }
.tokpage .cross { stroke: var(--muted); }
.tokpage .axis text, .tokpage .axlabel, .tokpage .plabel { fill: var(--muted); font-size: 11px; }
.tokpage .blabel { fill: var(--text); font-size: var(--fs-small); }
.tokpage .bval { fill: var(--muted); font-size: var(--fs-small); }
.tokpage .hit { fill: transparent; }
.tokpage #practiceChart, .tokpage #stepChart, .tokpage #promptChart, .tokpage #overheadChart { margin-top: 12px; }
.tokpage details { margin-top: 12px; }
.tokpage summary { cursor: pointer; color: var(--muted); font-size: var(--fs-small); }
.tablewrap { overflow-x: auto; max-height: 360px; overflow-y: auto; margin-top: 8px; }
.tokpage table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.tokpage th, .tokpage td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.tokpage th { color: var(--muted); font-weight: 500; position: sticky; top: 0; background: var(--surface); }
.tokpage .num { text-align: right; }
.tokpage code { font-size: 12px; }
@media (max-width: 720px) { .tokkpis { grid-template-columns: repeat(2, 1fr); } .tokkpis .kpi { border-left: 0 !important; border-top: 1px solid var(--border); } }
.region { animation: region-in .25s ease-out; }
@keyframes region-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .region { animation: none; } }