/* kit.css: the look every motion visual shares (newsroom/visual-kit/kit.css). build.py puts it first in styles.css and the
   visual's own CSS after it.
   Palette: dark card, white text, indigo and cyan for marks, rose only for "not confirmed / not stated", amber only for a note.
   Two frames on one DOM: tall (the fixed 1060px frame below 900px wide) is the base; wide (the block's aspect ratio, 5:4 or
   16:10 on screens 900px and wider) overrides it in the media query near the end. The wide query must match WIDE_QUERY in kit.js.
   Wide sizes are in rem and the root font size scales with the frame, so the wide design is one fixed composition. */
:root {
  --bg: #0b1726; --panel: #102039; --panel2: #16294a; --line: #2f4668; --line2: #4a6590;
  --mute: #b9c7dc; --ink: #0b1726;
  --indigo: #635bff; --indigo-t: #b3afff; --cyan: #06b6d4; --cyan-t: #3fd9f0; --rose: #fb7185; --amber: #fbbf24;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; font-size: 16px; }
body { margin: 0; background: var(--bg); color: #fff; font-family: var(--font); line-height: 1.35; min-height: 100vh; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
.lw { display: none; }
.lt { display: inline; }

/* ---------- the frame ---------- */
.stage { position: relative; display: flex; flex-direction: column; height: 100vh; padding: 0.6rem 0.7rem 0.5rem; gap: 0.4rem; max-width: 46rem; margin: 0 auto; }
.top { display: flex; flex-direction: column; gap: 0.4rem; }
h1 { margin: 0; font-size: 1.1rem; line-height: 1.2; font-weight: 700; }
.ctl { display: flex; gap: 0.5rem; }
.btn { min-height: 2.5rem; min-width: 5.5rem; padding: 0 1rem; border: 1px solid #5b7399; background: var(--panel2); border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.btn:hover:not(:disabled) { border-color: #fff; }
.btn:disabled { color: #a8b6cc; border-color: var(--line); background: transparent; cursor: default; }
.btn[hidden] { display: none; }

/* ---------- slider row: label, range input, readout ---------- */
.scrub { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center; flex: none; }
.scrub-l { font-size: 0.875rem; color: var(--mute); white-space: nowrap; }
.scrub input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 2.2rem; margin: 0; background: transparent; cursor: pointer; }
.scrub input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #3a5278; }
.scrub input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #3a5278; }
.scrub input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 5px solid var(--indigo); }
.scrub input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 5px solid var(--indigo); }
.when { grid-column: 1 / span 2; margin: 0; font-size: 0.875rem; color: var(--mute); min-height: 1.35em; }

/* ---------- tooltip: a sheet over the free edge of the frame (tall), floating beside the target (wide) ---------- */
.dock { flex: none; }
.tip { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; z-index: 30; max-height: 58%; overflow: auto; padding: 0.5rem 0.8rem 0.6rem; background: #09111f; border: 1px solid #5b7399; border-left-width: 5px; border-radius: 0.5rem; font-size: 0.875rem; box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.6); pointer-events: none; }
.tip.pinned { pointer-events: auto; }
.tip[hidden] { display: none; }
.tip p { margin: 0; }
.tip[data-tone="plain"], .tip[data-tone="stage"] { border-left-color: var(--indigo); }
.tip[data-tone="rose"] { border-left-color: var(--rose); }
.tip[data-tone="amber"] { border-left-color: var(--amber); }
.tip[data-tone="cyan"] { border-left-color: var(--cyan); }
.tk-kick { color: var(--mute); }
.tk-title { font-weight: 700; font-size: 1rem; margin-top: 0.1rem !important; }
.tk-plain { margin-top: 0.25rem !important; }
.vb { margin-top: 0.35rem; }
.vh { color: var(--cyan-t); font-weight: 700; }
.q { margin: 0.1rem 0 0; padding: 0 0 0 0.6rem; border-left: 2px solid #5b7399; font-style: italic; }
.vn { color: var(--mute); margin-top: 0.15rem !important; }
.tk-der { margin-top: 0.4rem !important; color: var(--cyan-t); font-weight: 600; }
.tk-mid { margin-top: 0.4rem !important; }
.tk-ns { margin-top: 0.4rem !important; color: var(--rose); font-weight: 600; }
.tk-close { display: none; position: sticky; bottom: 0; margin-top: 0.5rem; min-height: 2.6rem; padding: 0 1.2rem; background: var(--panel2); border: 1px solid #5b7399; border-radius: 0.4rem; font-weight: 600; font-size: 0.875rem; pointer-events: auto; }
.tip.pinned .tk-close { display: inline-block; }
.src { margin: 0; flex: none; font-size: 0.875rem; color: var(--mute); }
.tipping .src { display: none; }

/* ---------- wide frame ---------- */
@media (min-aspect-ratio: 21/20) {
  .lw { display: inline; }
  .lt { display: none; }
  html { font-size: min(calc(100vw / 53), calc(100vh / 42.4)); }
  body { overflow: hidden; }
  .stage { max-width: calc(100vh * 1.25); padding: 0.5rem 1rem 0.35rem; gap: 0.3rem; }
  .top { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
  h1 { font-size: 1.2rem; }
  .btn { min-height: 1.9rem; min-width: 4.6rem; padding: 0 0.8rem; font-size: 0.85rem; }
  .scrub { grid-template-columns: auto minmax(0, 20rem) 1fr; column-gap: 0.7rem; }
  .scrub-l { font-size: 0.85rem; }
  .scrub input[type="range"] { height: 1.6rem; }
  .scrub input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; border-width: 4px; }
  .when { grid-column: auto; font-size: 0.85rem; }
  .dock { position: static; height: 0; }
  .tip { right: auto; bottom: auto; width: 28rem; max-width: calc(100% - 1rem); max-height: calc(100% - 1rem); font-size: 0.85rem; padding: 0.5rem 0.7rem; }
  .tk-title { font-size: 0.95rem; }
  .tk-close { margin-top: 0.4rem; min-height: 1.9rem; font-size: 0.85rem; }
  .src, .tipping .src { display: block; font-size: 0.8rem; }
}

/* ---------- without script ----------
   A module script runs a moment after first paint, so the plain list waits 1.4 seconds before it appears. A reader with script
   never sees it flash, a reader without script still gets it. */
html:not(.js) .plain { opacity: 0; animation: nojs 0.01s 1.4s forwards; }
@keyframes nojs { to { opacity: 1; } }
html:not(.js) body { overflow: auto; }
html:not(.js) .stage { height: auto; min-height: 100vh; }
html:not(.js) .scrub, html:not(.js) .dock, html:not(.js) .ctl, html:not(.js) .chart { display: none; }
html.js .plain { display: none; }

/* ---------- reduced motion, and the freeze while a tooltip is open ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.frozen *, .frozen *::before, .frozen *::after { transition: none !important; animation: none !important; }

/* Chart styles. Come after kit.css in styles.css. The tall frame is the base (the fixed 1060px frame below 900px wide); the wide
   frame (5:4) overrides it in the media query near the end. Five views on one DOM: main (nine months, four years with the fall
   and the rises), ai (the AI Security Engineer role by month) and share (the AI terms share and the estimated count).
   Bars are real buttons sized by custom properties the engine sets (--w a fraction of the track, --hm the taller bar of a pair).
   Bars start at zero: the zero line is drawn. Two series colours only: 2025 pale blue, 2026 cyan. Rose marks the fall only. */
:root { --y25: #a9c4ff; --y26: #06b6d4; }
/* the kit sheet is placed with top or bottom only; with both set by the sheet rule it would stretch to its maximum height */
.tip { bottom: auto; }
@media not all and (min-aspect-ratio: 21/20) { .tip { max-height: 80%; } }
.chart { display: flex; flex-direction: column; gap: 0.4rem; flex: none; }
.panel { border-top: 1px solid var(--line2); padding: 0.3rem 0 0; min-width: 0; }
.phead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.8rem; }
.ph { margin: 0; font-size: 1rem; line-height: 1.2; font-weight: 700; }
.pu { margin: 0.05rem 0 0; font-size: 0.875rem; line-height: 1.3; color: var(--mute); }
.cap.lw { }
.cap { margin: 0; font-size: 0.875rem; line-height: 1.3; font-weight: 700; color: #fff; }
.subrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.8rem; }
.capr { width: 100%; }
.capr { margin-top: 0.1rem; font-weight: 400; color: var(--mute); }
.caprb { margin-top: 0.3rem; color: #fff; }
.key { display: flex; flex-wrap: wrap; gap: 0 0.8rem; margin-left: auto; font-size: 0.875rem; line-height: 1.3; color: var(--mute); }
.key li { display: flex; align-items: center; gap: 0.3rem; }
.sw { display: inline-block; flex: none; width: 0.85rem; height: 0.85rem; border-radius: 2px; }
.sw.s25 { background: var(--y25); }
.sw.s26 { background: var(--y26); }
.sw.dash { height: 0; width: 1.2rem; border-radius: 0; border-top: 2px dashed #fff; }

/* ---------- views: one is shown, the others are out of the layout ---------- */
.views { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: none; }
.vbtn { flex: 1 1 0; min-width: 0; padding: 0 0.5rem; }
.vbtn[aria-pressed="true"] { background: var(--indigo); border-color: #fff; color: #fff; }
.stage[data-view="main"] .vai, .stage[data-view="main"] .vsh,
.stage[data-view="ai"] .vmain, .stage[data-view="ai"] .vsh,
.stage[data-view="share"] .vmain, .stage[data-view="share"] .vai { display: none; }

/* ---------- bars ---------- */
.seg { position: relative; display: block; flex: none; width: calc(var(--w, 0) * 100%); height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--indigo); text-align: left; }
.seg:hover, .seg.pin { box-shadow: 0 0 0 2px #fff; z-index: 2; }
.cur { background: rgba(99, 91, 255, 0.2); }

/* ---------- pair plots: months, the AI role, the AI share (rows on the tall frame, columns on the wide one) ---------- */
.pplot { --lab: 2.9rem; --chw: 2.7rem; --bh: 0.9rem; --rowh: 2.15rem; position: relative; padding-top: 1.15rem; margin-top: 0.1rem; }
.pplot.pai, .pplot.psh { --chw: 0rem; }
.pplot.psh { --bh: 0.95rem; --rowh: 1.3rem; --lab: 3.3rem; }
.pplot.pai { --bh: 1.15rem; --rowh: 2.7rem; }
.psh .bv { right: auto; left: 0.35rem; }
.xaxis { position: absolute; left: var(--lab); right: var(--chw); top: 0; bottom: 0; pointer-events: none; }
.pplot .xaxis { right: var(--chw); }
.gl { position: absolute; top: 1.15rem; bottom: 0; left: calc(var(--k) * 100%); width: 0; border-left: 1px dashed var(--line2); }
.tk { position: absolute; top: 0; left: calc(var(--k) * 100%); transform: translateX(-50%); font-size: 0.875rem; line-height: 1.2; color: var(--mute); }
.tk.end { transform: translateX(-100%); }
.tk.minor { display: none; }
.pcols { position: relative; display: flex; flex-direction: column; }
.prow { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; height: var(--rowh); border-radius: 0.3rem; }
.prow:focus-within { background: rgba(99, 91, 255, 0.2); }
.plab { font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.plab .lw { display: none; }
.pair { position: relative; display: block; width: 100%; height: calc(var(--bh) * 2 + 2px); margin: 0; padding: 0; border: 0; background: none; text-align: left; }
.psh .pair { height: var(--bh); }
.bar { position: absolute; left: 0; height: var(--bh); width: calc(var(--w, 0) * (100% - var(--chw))); }
.b25 { top: 0; background: var(--y25); }
.b26 { top: calc(var(--bh) + 2px); background: var(--y26); }
.psh .b26, .psh .b25 { top: 0; }
.pair:hover .bar, .pair.pin .bar { box-shadow: 0 0 0 2px #fff; z-index: 2; }
.bv { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); font-size: 0.875rem; font-weight: 700; line-height: 1; color: var(--ink); white-space: nowrap; }
.pai .bv { right: auto; left: calc(100% + 0.3rem); color: #fff; background: var(--bg); }
.pch { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: var(--chw); text-align: right; font-size: 0.875rem; font-weight: 700; line-height: 1.05; white-space: nowrap; }
.pch span { display: block; }
.pch.dn { color: var(--rose); }
.pch.upc { color: var(--cyan-t); }
.hcol.outside .bar { background: transparent; border: 2px solid var(--y25); }
.hcol.outside .bv { color: #fff; }
.pline { position: absolute; left: calc(var(--lab) + var(--k) * (100% - var(--lab))); top: calc(var(--i0) * var(--rowh)); height: calc(var(--n) * var(--rowh)); width: 0; border-left: 2px dashed #fff; pointer-events: none; z-index: 3; }
.yband { display: none; }
.outn { margin-top: 0.3rem; }
.psh .cap { margin-top: 0.1rem; }

/* ---------- the four years, the fall and the rises (always horizontal bars) ---------- */
.yplot, .eplot { --ylab: 2.7rem; --yh: 1.3rem; position: relative; padding-top: 1.15rem; margin-top: 0.1rem; }
.yplot .xaxis, .eplot .xaxis { left: var(--ylab); right: 0; }
.yrow { display: grid; grid-template-columns: var(--ylab) minmax(0, 1fr); align-items: start; margin-top: 0.2rem; }
.ylab { font-size: 0.875rem; font-weight: 600; line-height: var(--yh); white-space: nowrap; }
.ytrack { position: relative; min-width: 0; }
.ybar { height: var(--yh); }
.yv { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); font-size: 0.875rem; font-weight: 700; line-height: 1; color: var(--ink); white-space: nowrap; }
.ybar.y2023, .ybar.y2024 { background: #8da3c7; }
.ybar.y2025, .ebar.y2025 { background: var(--y25); }
.ybar.y2026, .ebar.y2026 { background: var(--y26); }
.ebar { height: var(--yh); }
.ychip { display: block; margin-top: 0.05rem; font-size: 0.875rem; font-weight: 700; line-height: 1.15; white-space: nowrap; pointer-events: none; }
.ychip.up { color: var(--cyan-t); }
.ychip.dn { color: var(--rose); }
.gap { position: absolute; left: calc(var(--gl, 0) * 100%); top: 0; height: var(--yh); width: calc(var(--w, 0) * 100%); background: repeating-linear-gradient(135deg, rgba(251, 113, 133, 0.95) 0 4px, rgba(251, 113, 133, 0.4) 4px 8px); }
.gapt { display: none; }
.fallnote { margin: 0.15rem 0 0; font-size: 0.875rem; font-weight: 700; line-height: 1.25; color: var(--rose); }
.shw { margin-top: 0.4rem; }
.shead { margin: 0; font-size: 1rem; line-height: 1.2; font-weight: 700; }
.ssub { margin: 0.05rem 0 0; font-size: 0.875rem; line-height: 1.3; color: var(--mute); }
.srow { margin: 0.25rem 0 0 var(--ylab); }
.slab { display: block; font-size: 0.875rem; line-height: 1.25; color: #fff; }
.sline { position: relative; height: 0.85rem; margin-top: 0.1rem; }
.sliver { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--w, 0) * 100%); overflow: visible; background: var(--indigo); }
.sliver::after { content: ""; position: absolute; inset: -0.2rem -0.7rem; }
.sliver.outline { background: transparent; box-shadow: 0 0 0 1px var(--indigo-t); }
.sliver.outline:hover, .sliver.outline.pin { box-shadow: 0 0 0 2px #fff; }
.zbar { position: absolute; left: 52%; top: 0; height: 100%; width: calc(var(--w, 0) * 100%); background: var(--indigo); }
.zbar.outline { background: transparent; border: 2px solid var(--indigo-t); }
.tip[data-tone="cap"] { border-left-color: var(--indigo-t); }

h1 { font-size: 1rem; }

/* ---------- the plain tables, shown without script ---------- */
.plain { padding: 0.2rem 0; font-size: 0.95rem; }
.plain table { width: 100%; border-collapse: collapse; margin: 0.3rem 0 0.8rem; }
.plain caption { padding: 0.3rem 0; text-align: left; font-weight: 700; }
.plain th, .plain td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.plain th { color: var(--mute); font-weight: 600; }
.plain p { margin: 0.3rem 0; }

/* ---------- very narrow screens: the title leaves the frame (it stays for screen readers) so the charts fit ---------- */
@media (max-width: 329px) {
  h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .stage { padding: 0.45rem 0.55rem 0.4rem; gap: 0.3rem; }
  .pplot { --lab: 2.7rem; }
  .vbtn { padding: 0 0.3rem; }
}

/* ---------- wide frame: 53rem by 42.4rem composition, bars as columns ---------- */
@media (min-aspect-ratio: 21/20) {
  .stage[data-view="main"] .chart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
  .stage[data-view="ai"] .chart { display: block; }
  .stage[data-view="share"] .chart { display: grid; grid-template-columns: 31fr 19fr; gap: 0.45rem; }
  .panel { border: 1px solid var(--line); border-radius: 0.6rem; background: #0d1a2d; padding: 0.35rem 0.6rem 0.4rem; }
  .ph { font-size: 0.95rem; }
  .pu, .cap, .key, .ssub, .slab, .plab, .tk, .ylab, .yv, .ychip, .fallnote, .bv, .pch { font-size: 0.875rem; }
  .src, .tipping .src, .btn, .tk-close, .tip { font-size: 0.875rem; }
  .views { flex-wrap: nowrap; gap: 0.5rem; }
  .vbtn { flex: none; min-width: 0; padding: 0 0.9rem; }
  .vbtn .lt, .shead .lt, .ssub .lt { display: none; }
  .vbtn .lw { display: inline; }
  .phead { gap: 0 1rem; }
  .capm { width: auto; }

  .pplot { --lab: 3.4rem; --ph: 8.3rem; --ncol: 9; padding: 0 0 1.45rem var(--lab); margin-top: 0.35rem; }
  .pplot.pai { --ph: 24rem; }
  .pplot.psh { --ph: 20.5rem; --lab: 2.2rem; }
  .xaxis, .pplot .xaxis { left: var(--lab); right: 0; top: 0; bottom: auto; height: var(--ph); }
  .pplot .gl { top: auto; bottom: calc(var(--k) * 100%); left: 0; right: 0; width: auto; border-left: 0; border-top: 1px dashed var(--line2); }
  .pplot .tk.minor { display: block; }
  .pplot .tk, .pplot .tk.end { top: auto; left: auto; right: calc(100% + 0.35rem); bottom: calc(var(--k) * 100%); transform: translateY(50%); }
  .pcols { display: grid; grid-template-columns: repeat(var(--ncol), minmax(0, 1fr)); height: var(--ph); border-left: 2px solid var(--mute); border-bottom: 2px solid var(--mute); }
  .prow { position: relative; display: block; height: 100%; }
  .plab { position: absolute; top: calc(100% + 0.2rem); left: 0; right: 0; text-align: center; }
  .plab .lw { display: inline; }
  .plab .lt { display: none; }
  .pair { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: calc(var(--hm, 0) * var(--ph) + 1.55rem); }
  .psh .pair { height: calc(var(--hm, 0) * var(--ph) + 1.1rem); }
  .bar { --bw: 1.85rem; bottom: 0; top: auto; width: var(--bw); height: calc(var(--w, 0) * var(--ph)); }
  .pai .bar { --bw: 1.9rem; }
  .pai .bv { left: 50%; right: auto; color: #fff; background: #0d1a2d; padding: 0 0.1rem; }
  .psh .bv { left: 50%; }
  .psh .b25, .psh .b26 { top: auto; }
  .b25 { left: calc(50% - var(--bw) - 0.04rem); }
  .b26 { left: calc(50% + 0.04rem); }
  .psh .bar { --bw: 0.8rem; left: 50%; transform: translateX(-50%); }
  .hcol.outside .bar { border-bottom: 0; }
  .bv { right: auto; left: 50%; top: auto; bottom: calc(100% + 0.1rem); transform: translateX(-50%); color: #fff; }
  .pm .bv { display: none; }
  .psh .bv { display: none; }
  .pch { right: auto; left: 0; top: auto; bottom: calc(var(--hm, 0) * var(--ph) + 0.2rem); width: 100%; text-align: center; transform: none; }
  .pch span { display: inline-block; vertical-align: middle; }
  .pch span:first-child { display: none; }
  .pch::before { content: ""; display: inline-block; vertical-align: middle; margin-right: 0.25rem; border-left: 0.32rem solid transparent; border-right: 0.32rem solid transparent; }
  .pch.dn::before { border-top: 0.5rem solid var(--rose); }
  .pch.upc::before { border-bottom: 0.5rem solid var(--cyan-t); }
  .psh .pair:hover .bv, .psh .pair:focus-visible .bv, .psh .pair.pin .bv { display: block; }
  .pline { left: calc(var(--i0) / 21 * 100%); top: auto; bottom: calc(var(--k) * var(--ph)); width: calc(var(--n) / 21 * 100%); height: 0; border-left: 0; border-top: 2px dashed #fff; }
  .pcols .pline { margin-left: 0; }
  .yband { display: flex; position: absolute; left: var(--lab); right: 0; bottom: -0.1rem; height: 1.2rem; font-size: 0.875rem; font-weight: 700; color: var(--mute); }
  .yband span { text-align: center; border-top: 1px solid var(--line2); padding-top: 0.05rem; }
  .yb1 { width: calc(12 / 21 * 100%); }
  .yb2 { width: calc(9 / 21 * 100%); }
  .pplot.psh { padding-bottom: 2.6rem; }

  .yplot, .eplot { --ylab: 3.4rem; --yh: 1.3rem; padding-top: 1.15rem; margin-top: 0.15rem; }
  .yrow { margin-top: 0.3rem; }
  .ychip { position: absolute; left: 0.5rem; top: calc(var(--yh) / 2); margin: 0; transform: translateY(-50%); color: var(--ink) !important; }
  .ychip.up { background: var(--y25); }
  .ychip.dn { background: var(--y26); }
  .gapt { display: block; position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.875rem; font-weight: 700; line-height: 1; color: var(--ink); white-space: nowrap; background: rgba(255, 255, 255, 0.9); padding: 0.1rem 0.3rem; border-radius: 0.2rem; }
  .fallnote { display: none; }
  .shw { display: flex; align-items: baseline; gap: 0 0.8rem; margin-top: 0.4rem; }
  .shead { font-size: 0.95rem; }
  h1 { font-size: 1.2rem; }
  .srow { position: relative; height: 1.5rem; margin-top: 0.2rem; }
  .sline { position: absolute; inset: 0; margin: 0; height: auto; }
  .slab { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); white-space: nowrap; z-index: 1; }
  .sliver { top: 0.2rem; height: calc(100% - 0.4rem); }
  .zbar { left: 58%; top: 0.2rem; height: calc(100% - 0.4rem); }
  .caprb { margin-top: 0.35rem; }
  .eplot { margin-top: 0.1rem; }
  .pes .yplot, .pes .eplot { --ylab: 2.8rem; }
}