/* VIPER — technical-paper terminal.
   Rules: 1px hairlines, 0–2px radii, no blur, no gradients, no glow, no floating cards.
   Numbers are always tabular monospace. */

:root {
  --paper: #f1ede4;
  --paper-2: #e9e4d8;
  --paper-3: #ded7c7;
  --ink: #191814;
  --ink-2: #3b3932;
  --muted: #6e695d;
  --faint: #9a9384;
  --rule: #c9c1af;
  --rule-strong: #191814;
  --up: #17714a;
  --up-bg: #d9eadf;
  --down: #b2361c;
  --down-bg: #f1d8cf;
  --accent: #c2410c;
  --accent-ink: #fff8f2;
  --warn-bg: #f4e3a6;
  --grid: rgba(25, 24, 20, 0.07);
  --candle-up: #17714a;
  --candle-down: #b2361c;
  --sel: #1f4fbf;
  --rail-open: 216px;
  --rail-closed: 52px;
  --head-h: 44px;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --cond: "IBM Plex Sans Condensed", "Arial Narrow", var(--sans);
  color-scheme: light;
}

/* Light paper is the default regardless of OS preference; dark is an explicit opt-in toggle. */
:root[data-theme="dark"] {
  --paper: #1b1a17;
  --paper-2: #23221e;
  --paper-3: #2d2b26;
  --ink: #ebe6da;
  --ink-2: #cfc9bb;
  --muted: #9a9384;
  --faint: #6e695d;
  --rule: #3d3a33;
  --rule-strong: #ebe6da;
  --up: #4fb585;
  --up-bg: #1f3a2c;
  --down: #e0694c;
  --down-bg: #43251c;
  --accent: #f07a3a;
  --accent-ink: #1b1a17;
  --warn-bg: #4a3f17;
  --grid: rgba(235, 230, 218, 0.07);
  --candle-up: #4fb585;
  --candle-down: #e0694c;
  --sel: #7aa2ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 13px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.num, .mono, td, th, input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.hide { display: none !important; }

/* ---------------------------------------------------------------- shell */
.shell {
  display: grid;
  grid-template-columns: var(--rail-open) 1fr;
  grid-template-rows: var(--head-h) 1fr;
  height: 100vh;
  transition: grid-template-columns 180ms cubic-bezier(.2,.7,.2,1);
}
.shell.collapsed { grid-template-columns: var(--rail-closed) 1fr; }

.rail {
  grid-row: 1 / span 2;
  border-right: 1px solid var(--rule-strong);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.rail-head {
  height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0 8px 0 14px;
}
.brand {
  font: 600 15px/1 var(--mono);
  letter-spacing: 0.32em;
  white-space: nowrap;
}
.brand i { font-style: normal; color: var(--accent); }
.collapsed .brand { display: none; }
.collapsed .rail-head { justify-content: center; padding: 0; }

.toggle {
  width: 30px; height: 30px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 2px;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
}
.toggle:hover { border-color: var(--ink); }
.toggle path { transition: d 200ms ease; stroke: var(--ink); stroke-width: 1.5; fill: none; }

.nav { list-style: none; margin: 0; padding: 6px 0; flex: 1; }
.nav a {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px 0 12px;
  text-decoration: none;
  color: var(--ink-2);
  border-left: 3px solid transparent;
  white-space: nowrap;
}
.nav a:hover { background: var(--paper-3); color: var(--ink); }
.nav a.active { border-left-color: var(--accent); color: var(--ink); background: var(--paper); font-weight: 600; }
.nav .code { font: 600 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.nav a.active .code { color: var(--accent); }
.nav .lbl { overflow: hidden; text-overflow: ellipsis; }
.badge {
  font: 500 10.5px/1 var(--mono);
  padding: 3px 5px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-2);
  min-width: 18px;
  text-align: center;
}
.badge.hot { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); display: inline-block; }
.pulse.ok { background: var(--up); animation: beat 1.6s steps(2, end) infinite; }
.pulse.bad { background: var(--down); }
@keyframes beat { 50% { opacity: .35; } }
.collapsed .nav a { grid-template-columns: 1fr; justify-items: center; padding: 0; position: relative; }
.collapsed .nav .lbl, .collapsed .nav .badge, .collapsed .nav .pulse { display: none; }
.collapsed .nav a.act .dot-c { display: block; }
.dot-c { display: none; position: absolute; right: 7px; top: 9px; width: 5px; height: 5px; background: var(--accent); }

.rail-foot { border-top: 1px solid var(--rule); padding: 10px 14px; font: 11px/1.5 var(--mono); color: var(--muted); }
.collapsed .rail-foot { display: none; }

/* header */
.head {
  display: flex;
  overflow: hidden;
  align-items: stretch;
  border-bottom: 1px solid var(--rule-strong);
  min-width: 0;
  background: var(--paper);
}
.head > div { display: flex; align-items: center; padding: 0 14px; border-right: 1px solid var(--rule); white-space: nowrap; }
.head .clock { font: 600 15px/1 var(--mono); letter-spacing: 0.02em; }
.head .day { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.head .grow { flex: 1; border-right: none; }
.head .routes { gap: 10px; }
.head .desk { gap: 8px; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.head .desk b { font-weight: 600; }
.head .desk span { color: var(--muted); letter-spacing: .04em; text-transform: none; }
.desks td input { width: 100%; min-width: 90px; }
.ipsel option { font-family: var(--mono); }
.route svg { display: block; }
.route .flow { stroke-dasharray: 3 4; animation: flow 0.9s linear infinite; }
.route .flow.off { animation: none; stroke: var(--faint); }
@keyframes flow { to { stroke-dashoffset: -14; } }
.route text { font: 500 9.5px var(--mono); fill: var(--ink-2); }

.main { overflow: auto; min-width: 0; position: relative; }
.page { padding: 18px 22px 40px; min-width: 0; }

/* typography & structure */
h1, h2, h3 { margin: 0; font-weight: 600; }
.ptitle { display: flex; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 16px; }
.ptitle h1 { font: 600 22px/1 var(--cond); letter-spacing: 0.01em; text-transform: uppercase; }
.ptitle .sub { font: 12px var(--mono); color: var(--muted); }
.sect { margin: 26px 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 5px; }
.sect h2 { font: 600 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.sect .note { font: 11px var(--mono); color: var(--muted); }
.sect .spacer { flex: 1; }
.kicker { font: 600 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* controls */
.btn {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 5px 11px;
  border-radius: 2px;
  cursor: pointer;
  font: 500 12px/1.2 var(--mono);
  letter-spacing: 0.03em;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { border-color: var(--down); color: var(--down); }
.btn.danger:hover { background: var(--down); color: var(--paper); }
.btn.sm { padding: 3px 7px; font-size: 11px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; }
.seg button { border: none; border-right: 1px solid var(--rule); background: var(--paper); padding: 4px 9px; cursor: pointer; font: 500 11.5px/1.2 var(--mono); }
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--ink); color: var(--paper); }
.seg button:hover:not(.on) { background: var(--paper-3); }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 2px;
  padding: 4px 7px;
  font-size: 12px;
}
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }
label.fld { display: grid; gap: 4px; font: 600 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* tables */
table.t { width: 100%; border-collapse: collapse; font-size: 12px; }
table.t th {
  text-align: right; font: 600 10px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--ink); padding: 6px 8px; white-space: nowrap;
  position: sticky; top: 0; background: var(--paper);
}
table.t td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.t th.l, table.t td.l { text-align: left; }
table.t tr:hover td { background: var(--paper-2); }
table.t .empty td { text-align: left; color: var(--muted); font-family: var(--sans); padding: 14px 8px; }
.tablewrap { overflow: auto; max-width: 100%; }

/* tick flip */
.tk { display: inline-flex; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tk span { display: inline-block; }
/* colour lives only inside the keyframes, so a digit returns to ink once it has flipped */
.tk .fu { animation: fu 520ms steps(4, end); }
.tk .fd { animation: fd 520ms steps(4, end); }
@keyframes fu { 0% { transform: translateY(45%); opacity: .2; color: var(--up); } 50% { transform: none; opacity: 1; color: var(--up); } 100% { color: inherit; } }
@keyframes fd { 0% { transform: translateY(-45%); opacity: .2; color: var(--down); } 50% { transform: none; opacity: 1; color: var(--down); } 100% { color: inherit; } }

/* sparkline */
.spark path.line { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.spark path.area { stroke: none; opacity: 0.12; }
.spark .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 900ms ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.spark line.ref { stroke: var(--faint); stroke-dasharray: 2 3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark text { font: 9.5px var(--mono); fill: var(--muted); }

/* toast */
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 6px; z-index: 50; }
.toast { background: var(--ink); color: var(--paper); padding: 8px 12px; font: 12px var(--mono); border-left: 4px solid var(--accent); max-width: 420px; }
.toast.err { border-left-color: var(--down); }

/* modal (no blur, flat scrim) */
.scrim { position: fixed; inset: 0; background: rgba(25,24,20,.45); display: grid; place-items: center; z-index: 40; }
.modal { background: var(--paper); border: 1px solid var(--ink); width: min(520px, 94vw); }
.modal header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ink); padding: 10px 14px; }
.modal header h3 { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.modal .body { padding: 14px; display: grid; gap: 12px; }
.modal footer { border-top: 1px solid var(--rule); padding: 10px 14px; display: flex; justify-content: flex-end; gap: 8px; }

/* ---------------------------------------------------------- VIPER page */
.vp-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: 0 28px; }
.matrix { border-top: 1px solid var(--ink); }
.mx-row {
  display: grid;
  grid-template-columns: 150px 140px 112px minmax(160px, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--rule);
  min-height: 96px;
}
.mx-row > div { padding: 10px 12px 10px 0; }
.mx-name { font: 600 14px/1.1 var(--cond); letter-spacing: 0.02em; text-transform: uppercase; }
.mx-name small { display: block; font: 10.5px var(--mono); color: var(--muted); margin-top: 4px; text-transform: none; letter-spacing: 0; }
.mx-ltp { font: 600 21px/1 var(--mono); }
.mx-chg { font: 500 12px/1.5 var(--mono); }
.mx-spark { height: 86px; border-left: 1px solid var(--rule); padding-left: 10px !important; }
.mx-spark svg { width: 100%; height: 100%; display: block; }
.regime-tag { font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--ink); padding: 2px 4px; display: inline-block; margin-top: 6px; }

.brief { border-top: 2px solid var(--ink); padding: 10px 0 14px; }
.brief + .brief { margin-top: 10px; }
.brief h3 { font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; display: flex; justify-content: space-between; }
.brief .big { font: 600 26px/1.1 var(--mono); margin: 10px 0 6px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; font-size: 12px; }
.kv > div { padding: 4px 0; border-bottom: 1px dotted var(--rule); }
.kv > div:nth-child(even) { text-align: right; font-family: var(--mono); }
.bar { height: 6px; border: 1px solid var(--ink); position: relative; margin: 8px 0 4px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); transition: width .4s ease; }
.bar.accent i { background: var(--accent); }
.note-line { font: 11.5px/1.45 var(--sans); color: var(--ink-2); border-left: 3px solid var(--accent); padding: 2px 0 2px 8px; margin-top: 8px; }

/* ---------------------------------------------------------- Market page */
.api-grid { display: grid; grid-template-columns: minmax(0, 1fr); }

.chain { font-size: 11.5px; }
.chain th, .chain td { padding: 4px 6px !important; }
.chain td.strike, .chain th.strike { text-align: center; font-weight: 600; background: var(--paper-2); border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.chain tr.atm td { background: var(--warn-bg); }
.chain tr.itm-c td.c, .chain tr.itm-p td.p { background: var(--paper-2); }
.chain td.mark { font-weight: 600; }
.chain thead tr.side th { text-align: center; border-bottom: 1px solid var(--rule); }

/* ------------------------------------------------------- Positions page */
.auto-row { display: grid; grid-template-columns: 170px auto 1fr; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.tri { position: relative; display: inline-grid; grid-template-columns: repeat(3, 58px); border: 1px solid var(--ink); border-radius: 2px; height: 28px; }
.tri button { position: relative; z-index: 1; border: none; background: transparent; cursor: pointer; font: 600 11px/1 var(--mono); letter-spacing: .08em; }
.tri .knob { position: absolute; top: 0; bottom: 0; width: 58px; background: var(--ink); transition: transform 180ms cubic-bezier(.2,.7,.2,1); }
.tri button.on { color: var(--paper); }
.tri[data-v="AUTO"] .knob { background: var(--accent); }
.tri[data-v="OFF"] .knob { background: var(--faint); }
.guard { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.guard > div { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); }
.guard .pair { display: flex; gap: 6px; margin-top: 6px; }
.guard .pair select { width: 90px; }
.guard .pair input { width: 90px; }
.kill { display: flex; align-items: center; gap: 14px; border: 1px solid var(--down); padding: 10px 14px; margin-top: 16px; }

/* ----------------------------------------------------------- Learnings */
.tabs { display: flex; border-bottom: 1px solid var(--ink); margin-bottom: 14px; }
.tabs button { border: 1px solid transparent; border-bottom: none; background: none; padding: 8px 14px; cursor: pointer; font: 600 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: -1px; }
.tabs button.on { border-color: var(--ink); background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--paper); }
.ingest { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
.drop { border: 1px dashed var(--ink-2); padding: 26px; text-align: center; font: 12px var(--mono); color: var(--muted); cursor: pointer; }
.drop.over { background: var(--paper-2); border-style: solid; }
textarea.instr { width: 100%; min-height: 170px; resize: vertical; font: 13px/1.5 var(--mono); }
.rule-kind { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--ink); padding: 2px 4px; }
.rule-kind.note { border-style: dashed; color: var(--muted); border-color: var(--muted); }
.ledger td.l { white-space: normal; max-width: 420px; line-height: 1.4; }
.patch { font-family: var(--mono); font-size: 11.5px; }

/* --------------------------------------------------------------- Shadow */
.sh-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 0 28px; }
.feed { max-height: 420px; overflow: auto; border-top: 1px solid var(--ink); }
.feed .it { display: grid; grid-template-columns: 64px 90px 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: 11.5px; }
.feed .it .a { font: 600 10.5px var(--mono); text-transform: uppercase; }
.feed .it.enter .a { color: var(--up); }
.feed .it.blocked .a { color: var(--down); }
.feed .it.skip .a { color: var(--muted); }
.curve { height: 220px; border: 1px solid var(--ink); }
.curve svg { width: 100%; height: 100%; display: block; }
.heat td { text-align: center !important; font-size: 11px; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .vp-grid, .sh-grid, .ingest { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* On phones the open rail overlays the workspace instead of squeezing it. */
  .shell, .shell.collapsed { grid-template-columns: var(--rail-closed) minmax(0, 1fr); }
  .shell:not(.collapsed) .rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-open); z-index: 30; border-right: 1px solid var(--ink); }
  .head > div { padding: 0 10px; }
  .head .synth { font-size: 10px; letter-spacing: .04em; }
  .ptitle { flex-wrap: wrap; }
  .page { padding: 12px 16px 32px; }
  .mx-row { grid-template-columns: 1fr 1fr; }
  .mx-spark { grid-column: 1 / -1; border-left: none; padding-left: 0 !important; }
  .head .day, .head .routes { display: none; }
  .chart-wrap { height: 420px; }
  .auto-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------- theme switch: SURF's ukiyo-e wave */
.head > .theme-cell { padding: 0; border-right: none; }
.theme { position: relative; width: 150px; height: 100%; min-height: 44px; padding: 0; border: 0; border-left: 1px solid var(--rule); overflow: hidden; display: block; cursor: pointer; background: none; }
.theme svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.theme .sky { transition: fill 400ms cubic-bezier(.7, 0, .2, 1); }
.theme .wave { transform-box: view-box; transition: transform 500ms cubic-bezier(.7, 0, .2, 1); }
.theme.surge .wave { animation: surge 700ms cubic-bezier(.7, 0, .2, 1); }
@keyframes surge { 0% { transform: translateX(0) } 40% { transform: translateX(-9px) } 100% { transform: translateX(0) } }
.theme .moon { transition: opacity 400ms cubic-bezier(.7, 0, .2, 1), transform 500ms cubic-bezier(.7, 0, .2, 1); }
.theme .lbl { position: absolute; right: 6px; bottom: 5px; font: 600 10px var(--mono); letter-spacing: .1em; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 1px 5px; }

/* ---------------------------------------------------------- SURF chart (ported 1:1 from Adhunik Surf, scoped) */
.surf-chart {
  --s-paper: #F6F5F0; --s-ink: #111111; --s-ink-2: #4A4944; --s-ink-3: #8A8880; --s-rule: #D8D6CE;
  --s-pos: #0A6847; --s-neg: #B8261E; --s-klein: #1D4ED8;
  --s-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  background: var(--s-paper); color: var(--s-ink); border: 1px solid var(--s-rule); font: 14px/1.45 var(--s-sans);
}
:root[data-theme="dark"] .surf-chart {
  --s-paper: #121211; --s-ink: #F2F1EC; --s-ink-2: #B7B4AA; --s-ink-3: #7C796F; --s-rule: #2F2E2A;
  --s-pos: #3DB57F; --s-neg: #E5574D; --s-klein: #5B8CF0;
}
.surf-chart .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.surf-chart .dim { color: var(--s-ink-3); }
.surf-chart .pos { color: var(--s-pos); }
.surf-chart .neg { color: var(--s-neg); }
.surf-chart button { background: var(--s-paper); color: var(--s-ink); border: 1px solid var(--s-ink); border-radius: 0; padding: 5px 12px; cursor: pointer; font-weight: 600; font-size: 12px; letter-spacing: .03em; font-family: var(--s-sans); }
.surf-chart button:active { transform: translateY(1px); }
.surf-chart button:disabled { opacity: .45; cursor: default; }
.surf-chart .chart-wrap { position: relative; height: calc(100vh - 230px); min-height: 460px; border-top: 1px solid var(--s-rule); }
.surf-chart .chart-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.surf-chart .toolbar { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--s-rule); }
.surf-chart .toolbar > .grp { display: flex; border-right: 1px solid var(--s-rule); padding: 6px 10px; gap: 4px; align-items: center; }
.surf-chart .toolbar button { border-color: var(--s-rule); padding: 3px 8px; font-family: var(--mono); font-weight: 500; font-size: 11.5px; }
.surf-chart .toolbar button.on { background: var(--s-ink); color: var(--s-paper); border-color: var(--s-ink); }
.surf-chart .toolbar svg { display: block; }