/* Bloombroke: ice blue on black. A dense, instant market terminal.
   Spacing scale: 2 4 6 8 12 16 24 32. Type scale: 11 12 13 14 16 18 24 32 44. */

:root {
  /* Surfaces: near-black with a hint of blue, lighter as they rise */
  --bg: hsl(213, 43%, 3%);          /* #05080C */
  --panel: hsl(213, 36%, 6%);
  --panel-2: hsl(212, 32%, 9%);
  --panel-3: hsl(211, 30%, 12%);

  /* Rules */
  --rule: hsl(211, 28%, 12%);        /* row dividers */
  --rule-strong: hsl(210, 24%, 22%); /* panel borders */

  /* Text: primary, secondary, tertiary */
  --text: hsl(206, 100%, 91%);       /* #CFEAFF */
  --text-2: hsl(206, 45%, 76%);
  --dim: hsl(208, 24%, 58%);         /* muted steel blue labels, 5.9:1 on --bg */
  --faint: hsl(210, 18%, 36%);

  --accent: hsl(201, 100%, 71%);     /* #6CCBFF */
  --accent-tint: hsla(201, 100%, 71%, .1);
  --ink: hsl(213, 60%, 3%);          /* text on the accent */

  --up: hsl(147, 70%, 55%);          /* #3DDC84 */
  --down: hsl(0, 100%, 68%);         /* #FF5C5C */
  --up-flash: hsla(147, 70%, 45%, .30);
  --down-flash: hsla(0, 100%, 60%, .28);

  --gutter: 12px;
  /* Every row shares one centred content column. Bar backgrounds stay full-bleed;
     only their contents are inset. 100% resolves against each element's own width. */
  --maxw: 1440px;
  --inset: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  --topbar-h: 30px;
  --cmd-h: 40px;
  --status-h: 22px;
  --tape-h: 26px;
  --keybar-h: 28px;
  --dock-h: calc(var(--status-h) + var(--tape-h) + var(--keybar-h) + 1px);
  --row-h: 24px;

  --font: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: hsla(201, 100%, 71%, .28); color: var(--text); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

h1, h2, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.num { font-variant-numeric: tabular-nums; }
.dim, .muted { color: var(--dim); }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--dim); }
.offscreen { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }

kbd {
  display: inline-block;
  min-width: 18px;
  padding: 0 4px;
  border: 1px solid var(--rule-strong);
  font-family: var(--font);
  font-size: 11px;
  line-height: 16px;
  color: var(--text-2);
  text-align: center;
}

.code { color: var(--accent); white-space: nowrap; }

/* ---- Top bar ---------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--topbar-h);
  padding: 0 var(--inset);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.wordmark { font-size: 13px; font-weight: 600; letter-spacing: .22em; color: var(--text); }
.wordmark:hover { text-decoration: none; color: var(--accent); }

.clock { display: flex; align-items: center; gap: 10px; font-size: 12px; white-space: nowrap; }
.clock .label { color: var(--dim); letter-spacing: .1em; }
.clock-time { color: var(--text); }
.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding-left: 10px; border-left: 1px solid var(--rule-strong);
  color: var(--dim); letter-spacing: .08em; font-weight: 600;
}
.status-dot { width: 6px; height: 6px; background: var(--faint); }
.status[data-open="true"] { color: var(--up); }
.status[data-open="true"] .status-dot { background: var(--up); }

/* ---- Command bar ------------------------------------------------------ */
.commandbar { position: sticky; top: 0; z-index: 10; background: var(--panel); border-bottom: 1px solid var(--rule-strong); }
.cmd { position: relative; display: flex; align-items: center; gap: 10px; height: var(--cmd-h); padding: 0 var(--inset); }
.prompt { font-size: 16px; font-weight: 600; color: var(--accent); line-height: 1; }
.cmd-field { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; }

#cmd {
  width: 100%; height: 100%;
  padding: 0; border: 0; outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
  caret-color: transparent;
}
#cmd::placeholder { color: var(--faint); text-transform: none; opacity: 1; }
.cmd-focused #cmd:placeholder-shown { text-indent: calc(1ch + 8px); }
#cmd:focus-visible { outline: 0; }

.measure { position: absolute; visibility: hidden; white-space: pre; font-family: var(--font); font-size: 16px; letter-spacing: 0; }

.cursor {
  position: absolute; left: 0; top: 50%;
  width: 10px; height: 20px; margin-top: -10px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}
.cmd-focused .cursor { opacity: .9; }
.cmd-focused .cursor.blink { animation: blink 1.1s steps(1, end) infinite; }
@keyframes blink { 0%, 55% { opacity: .9; } 56%, 100% { opacity: 0; } }

.cmd-keys { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); white-space: nowrap; }
.cmd-keys kbd:not(:first-child) { margin-left: 6px; }

.suggest {
  position: absolute;
  top: 100%;
  left: calc(var(--inset) + 18px);
  width: min(600px, calc(100% - var(--inset) * 2 - 18px));
  background: var(--panel-2);
  border: 1px solid var(--rule-strong);
  z-index: 20;
}
.suggest li {
  display: grid;
  grid-template-columns: minmax(96px, max-content) 1fr;
  gap: 16px;
  align-items: center;
  height: var(--row-h);
  padding: 0 8px;
  cursor: pointer;
}
.suggest li:hover, .suggest li.is-active { background: var(--panel-3); }
.suggest .sug-name { color: var(--text); font-weight: 600; }
.suggest .sug-hint { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest li.is-usage { cursor: default; }
.suggest li.is-usage .sug-name { color: var(--accent); font-weight: 400; }

.share {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  cursor: pointer;
}
.share:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }

/* ---- Screen ----------------------------------------------------------- */
.screen { padding: 8px var(--inset) calc(var(--dock-h) + 16px); outline: 0; }

.footnote { margin-top: 6px; font-size: 11px; color: var(--dim); }
.notice { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text); margin-bottom: 6px; }
.examples { margin-top: 8px; line-height: 2; }
.examples .code { margin-right: 12px; }
.codes { color: var(--text-2); word-spacing: 4px; }
.loading { color: var(--dim); letter-spacing: .08em; }
.panel-msg { color: var(--text-2); }

/* ---- Panels ----------------------------------------------------------- */
.grid, .stack {
  display: grid;
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { grid-template-columns: minmax(0, 1fr); }

.panel { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.panel-solo { border: 1px solid var(--rule-strong); }
.panel[hidden] { display: none; }

.panel-head {
  display: flex; align-items: stretch; justify-content: space-between; gap: 8px;
  height: 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule-strong);
}
.panel-label {
  display: flex; align-items: center;
  margin: 0;
  padding: 0 8px;
  background: var(--accent);
  color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
a.panel-label:hover { text-decoration: none; background: var(--text); }
.panel-meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  min-width: 0;
  padding-right: 8px;
  font-size: 11px; color: var(--dim); letter-spacing: .04em;
  white-space: nowrap; overflow: hidden;
}
.panel-body { flex: 1; min-height: 0; padding: 8px 10px; }
.panel-body.flush, .panel-body:has(> table) { padding: 0; }
.panel-body.flush > .loading, .panel-body.flush > .panel-msg,
.panel-body.flush > .chart-host > .loading, .panel-body.flush > .chart-host > .panel-msg { padding: 8px 2px; }

.tabs { display: flex; align-self: stretch; margin-right: -8px; border-left: 1px solid var(--rule-strong); }
.tab { display: flex; align-items: center; padding: 0 8px; color: var(--dim); font-size: 11px; }
button.tab { border: 0; background: transparent; font-family: var(--font); cursor: pointer; }
.tab:hover { text-decoration: none; color: var(--text); background: var(--panel-3); }
.tab.is-active { color: var(--ink); background: var(--text-2); }

/* ---- Live or delayed tags ------------------------------------------------ */
.fresh {
  display: inline-block;
  padding: 0 3px;
  border: 1px solid currentColor;
  font-size: 9px; font-weight: 600; line-height: 12px; letter-spacing: .06em;
  vertical-align: middle;
}
.fresh.is-rt { color: var(--accent); }
.fresh.is-dly { color: var(--dim); border-color: var(--rule-strong); }

/* ---- Tables ----------------------------------------------------------- */
.grid-table { width: 100%; border-collapse: collapse; }
.grid-table th, .grid-table td { height: var(--row-h); padding: 0 10px; text-align: left; white-space: nowrap; }
.grid-table thead th {
  height: 22px;
  font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--rule-strong);
}
.grid-table .num { text-align: right; }
.grid-table tbody tr:not(.group-row) { border-bottom: 1px solid var(--rule); }
.grid-table tbody tr:not(.group-row):hover { background: var(--panel-2); }
.grid-table .row-link { cursor: pointer; }
.grid-table .row-link:hover { background: var(--panel-3); }
.grid-table .row-link:hover .name a { color: var(--accent); }
.grid-table .row-link:focus { outline: 0; background: var(--panel-3); box-shadow: inset 2px 0 0 var(--accent); }
.grid-table th.tag, .grid-table td.tag { width: 1%; padding: 0 2px 0 0; text-align: right; }
.grid-table .name { width: 100%; font-weight: 400; color: var(--text-2); max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.grid-table .name a { color: var(--text-2); }
.grid-table .name a:hover { color: var(--accent); text-decoration: none; }
.grid-table .last { color: var(--text); font-weight: 600; }
.grid-table .time { color: var(--dim); }
.grid-table .moves { color: var(--dim); }
.group-row th {
  height: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}

/* Price tick: a flat 400 ms background flash, no motion */
.tick-up { background: var(--up-flash); }
.tick-down { background: var(--down-flash); }

/* ---- HOME ------------------------------------------------------------- */
.grid-home .panel-wide { grid-column: 1 / -1; }
.mk-cols { columns: 3 340px; column-gap: 0; column-rule: 1px solid var(--rule-strong); }
.mk-cols .mk-group { break-inside: avoid; background: var(--bg); }
.mk-cols .mk-group .group-row th { border-top: 0; }

/* ---- Range chart: presets, dates, chart ------------------------------- */
.rc { display: flex; flex-direction: column; min-width: 0; }
.ch-bar {
  display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; gap: 0 12px;
  min-height: 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
.ch-tabs { margin-right: 0; border-left: 0; overflow-x: auto; scrollbar-width: none; }
.ch-tabs::-webkit-scrollbar { display: none; }
.ch-tabs .tab { height: 24px; }
.ch-dates { display: flex; align-items: center; gap: 10px; padding-right: 8px; font-size: 11px; color: var(--dim); }
.ch-dates label { display: flex; align-items: center; gap: 6px; letter-spacing: .06em; }
.ch-dates input {
  height: 20px; padding: 0 4px;
  border: 1px solid var(--rule-strong); background: var(--bg);
  color: var(--text-2); font-family: var(--font); font-size: 11px;
  color-scheme: dark;
}
.ch-dates.is-active input { color: var(--text); border-color: var(--accent); }
.ch-dates input:focus { outline: 1px solid var(--accent); outline-offset: 0; }
.ch-hv { color: var(--text); }
.panel-body:has(> .rc-home) { position: relative; min-height: 330px; }
.rc-home { position: absolute; inset: 0; }
.rc-home .chart-host-home { position: relative; inset: auto; flex: 1; min-height: 0; height: auto; margin: 8px 0 0 10px; }

/* ---- Charts ----------------------------------------------------------- */
.chart-host { position: relative; height: 320px; margin: 8px 0 0 10px; }
.chart-host-lg { height: 400px; }
.chart { display: block; overflow: visible; touch-action: pan-y; }
.ch-grid, .ch-vgrid { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.ch-axis { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ch-ylab, .ch-xlab { fill: var(--dim); font-family: var(--font); font-size: 11px; }
.ch-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ch-stop { stop-color: var(--accent); }
.ch-last-line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; opacity: .45; shape-rendering: crispEdges; }
.ch-last-bg { fill: var(--accent); }
.ch-last { fill: var(--ink); font-family: var(--font); font-size: 11px; font-weight: 600; }
.ch-cross { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 2 2; shape-rendering: crispEdges; }
.ch-dot { fill: var(--text); }

/* ---- Stats (key numbers) --------------------------------------------- */
.stats { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; border-top: 1px solid var(--rule); }
.stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--row-h); border-bottom: 1px solid var(--rule); }
.stat dt { color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.stat dd { display: flex; align-items: center; margin: 0; color: var(--text); text-align: right; }
.stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; margin-top: 12px; }
.rangebar { width: 72px; height: 6px; margin-left: 8px; flex: 0 0 auto; }
.rb-track { fill: var(--rule-strong); }
.rb-mark { fill: var(--accent); }

/* ---- QUOTE ------------------------------------------------------------ */
.q-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 24px; }
.q-name { color: var(--text-2); font-size: 14px; }
.q-hero .fresh { align-self: center; font-size: 10px; line-height: 14px; }
.q-hero { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; font-size: 44px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.q-ccy { font-size: 14px; font-weight: 400; letter-spacing: .06em; color: var(--accent); }
.q-chg { margin-top: 2px; font-size: 16px; }
.q-chg span { margin-left: 8px; }
.q-ext { margin-top: 8px; font-size: 12px; }
.q-asof { margin-top: 4px; font-size: 11px; letter-spacing: .06em; }

/* ---- FX and CPI ------------------------------------------------------- */
.fx-from { font-size: 14px; color: var(--text-2); }
.fx-from .num { color: var(--text); }
.hero {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px;
  margin-top: 2px;
  font-size: 44px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
  color: var(--text);
}
.hero-unit { font-size: 18px; font-weight: 400; letter-spacing: .06em; color: var(--accent); }
.hero.is-long { font-size: 36px; }
.hero.is-xlong { font-size: 28px; }
.fx-to { margin-top: 2px; font-size: 13px; color: var(--text-2); }
.fx-to.dim { color: var(--dim); }
.swap { margin-top: 10px; }

/* ---- BUY -------------------------------------------------------------- */
.buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 32px; padding: 4px 0 8px; }
.buy-stats { margin-top: 16px; max-width: 640px; }
.buy-stats dd.dim { color: var(--dim); font-size: 12px; }
.buy-side { display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
.stamp {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 8px 28px 10px;
  border: 2px solid currentColor;
  outline: 1px solid currentColor; outline-offset: 3px;
  text-transform: uppercase;
  transform: rotate(-4deg);
  animation: stamp-in 180ms cubic-bezier(.2, .8, .2, 1) both;
}
.stamp-k { font-size: 11px; font-weight: 600; letter-spacing: .3em; }
.stamp-v { font-size: 44px; font-weight: 600; line-height: 1.05; letter-spacing: .12em; }
.stamp-buy { color: var(--up); }
.stamp-think { color: var(--accent); }
.stamp-skip { color: var(--down); }
@keyframes stamp-in { from { transform: rotate(-4deg) scale(1.25); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
.stamp-line { margin-top: 14px; color: var(--text-2); text-align: center; }
.how { align-self: stretch; margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 8px; }
.how summary { cursor: pointer; color: var(--accent); font-size: 12px; list-style: none; }
.how summary::-webkit-details-marker { display: none; }
.how summary::before { content: '+ '; }
.how[open] summary::before { content: '- '; }
.how-list { margin-top: 8px; display: grid; gap: 6px; color: var(--text-2); font-size: 12px; line-height: 1.5; }

/* ---- WHATIF ----------------------------------------------------------- */
.wi-intro { color: var(--text-2); margin-bottom: 10px; }
.wi-groups { columns: 4 250px; column-gap: 12px; outline: 0; }
.wi-group { break-inside: avoid; margin-bottom: 12px; border: 1px solid var(--rule); background: var(--bg); }
.wi-co { margin: 0; padding: 0 8px; height: 22px; display: flex; align-items: center; gap: 8px; background: var(--panel); border-bottom: 1px solid var(--rule); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--accent); }
.wi-item {
  display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: var(--row-h); padding: 0 8px;
  cursor: pointer; user-select: none; color: var(--text-2);
}
.wi-item:hover { background: var(--panel-2); }
.wi-item:focus { outline: 0; background: var(--panel-3); box-shadow: inset 2px 0 0 var(--accent); }
.wi-item.is-on { color: var(--text); }
.wi-box { color: var(--faint); }
.wi-item.is-on .wi-box { color: var(--accent); font-weight: 600; }
.wi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-meta { color: var(--dim); font-size: 12px; white-space: nowrap; }
.wi-years input {
  width: 10ch; height: 20px; padding: 0 4px;
  border: 1px solid var(--rule-strong); background: var(--panel);
  color: var(--text); font-family: var(--font); font-size: 12px; text-transform: uppercase; text-align: right;
}
.wi-years input:focus { outline: 1px solid var(--accent); outline-offset: 0; }
.wi-bar {
  position: sticky; bottom: calc(var(--dock-h) + 4px);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; padding: 6px 8px;
  background: var(--panel-2); border: 1px solid var(--rule-strong);
  font-size: 12px;
}
.wi-count { color: var(--text); font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.wi-cmd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wi-keys { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.wi-run {
  height: 24px; padding: 0 16px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--ink);
  font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: .12em; cursor: pointer;
}
.wi-run:hover { background: var(--text); border-color: var(--text); }

.wi-sentence { font-size: 16px; color: var(--text-2); }
.wi-sentence .num { color: var(--text); font-weight: 600; }
.wi-sentence .up, .hero-value.up { color: var(--up); }
.wi-sentence .down, .hero-value.down { color: var(--down); }
.wi-mult { font-size: 18px; font-weight: 600; }
.wi-mult span + span { margin-left: 12px; }
.wi-quip { margin-top: 8px; color: var(--text-2); }
.wi-receipt { margin: 16px -10px 0; border-top: 1px solid var(--rule-strong); overflow-x: auto; }
.wi-table tfoot th, .wi-table tfoot td { height: 28px; font-weight: 600; border-top: 1px solid var(--rule-strong); padding: 0 10px; }
.wi-table tfoot .name { color: var(--text); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.wi-table .is-loss .name a { color: var(--down); }
.wi-when { color: var(--text-2); }
.wi-when-m { display: none; }
.wi-source { margin-top: 10px; font-size: 11px; color: var(--dim); }
.wi-actions { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; }
.wi-note-name { color: var(--text); }
.how-list a { color: var(--accent); }

/* WHATIF certificate: text over the art, placed in % of the image (the same numbers as
   POS in lib/og.js), sized in cqw so it scales with the paper. */
.wi-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "cert" "body"; gap: 14px 28px; }
.wi-head { grid-area: head; min-width: 0; }
.wi-certcol { grid-area: cert; min-width: 0; }
.wi-body { grid-area: body; min-width: 0; }
.wi-body > .wi-receipt:first-child { margin-top: 0; }
@media (min-width: 1100px) {
  .wi-layout:not(.no-cert) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cert head" "cert body"; grid-template-rows: auto 1fr; align-items: start; }
}
.wi-cert {
  --paper-ink: #2A1A10; --paper-soft: #5A4330; --paper-red: #C23B2A;
  position: relative; container-type: inline-size;
  width: 97%; max-width: 860px; margin: 4px 0 0 3%;
}
.wc-paper { display: block; width: 100%; height: auto; }
.wc {
  position: absolute; transform: translate(-50%, -50%);
  white-space: nowrap; text-align: center; line-height: 1; color: var(--paper-ink); pointer-events: none;
}
.wc-receipt {
  left: 7.33%; top: 13.3%; transform: rotate(-15deg); transform-origin: top left;
  display: flex; flex-direction: column; text-align: left;
  font-size: .92cqw; line-height: 2.18cqw; font-weight: 800; color: var(--paper-soft);
}
.wc-ribbon { left: 49.6%; top: 20.2%; font-family: 'Caveat', cursive; font-weight: 700; font-size: 3.8cqw; }
.wc-big { left: 49%; top: 43.5%; font-size: 11cqw; font-weight: 800; letter-spacing: -.04em; transform: translate(-50%, -50%) rotate(-1.5deg); }
.wi-cert.is-loss .wc-big { color: var(--paper-red); }
.wc-today { left: 49%; top: 56.5%; font-family: 'Caveat', cursive; font-weight: 700; font-size: 2.8cqw; color: var(--paper-soft); }
.wc-l1, .wc-l2 { left: 49.9%; font-size: calc(var(--fs, 2.4) * var(--k, 1) * 1cqw); }
.wc-l1 { top: calc(71.3% - .62em); font-weight: 800; }
.wc-l2 { top: calc(76.9% - .62em); font-weight: 600; color: var(--paper-soft); }
.wc-mult { left: 82.5%; top: 68.4%; font-size: 3cqw; font-weight: 800; }
.wi-cert.is-loss .wc-mult { top: 66.2%; color: var(--paper-soft); }
.wc-strike {
  left: 82.5%; top: 66.2%; width: 9.2%; height: .45cqw; border-radius: .3cqw;
  background: var(--paper-red); transform: translate(-50%, -50%) rotate(-14deg);
}
.wc-dodged { left: 82.5%; top: 72%; font-family: 'Caveat', cursive; font-weight: 700; font-size: 2.4cqw; color: var(--paper-red); }
/* On a phone the small lines grow a little; they still stay on the paper. */
@container (max-width: 520px) {
  .wc-l1, .wc-l2 { --k: 1.15; }
  .wc-today { font-size: 3.4cqw; }
}
.wc-sticker { position: absolute; left: -3%; bottom: -5%; width: 17%; height: auto; transform: rotate(-8deg); pointer-events: none; }
.wi-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wi-btn {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--text);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-decoration: none; cursor: pointer;
}
.wi-btn:first-child { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.wi-btn:hover { text-decoration: none; background: var(--text); border-color: var(--text); color: var(--ink); }

/* ---- NEWS ------------------------------------------------------------- */
.news-row {
  display: grid;
  grid-template-columns: 48px 40px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 4px 10px;
  min-height: var(--row-h);
  border-bottom: 1px solid var(--rule);
}
.news-row:hover { background: var(--panel-2); }
.news-time { color: var(--dim); }
.news-src { color: var(--accent); font-size: 11px; letter-spacing: .04em; }
.news-title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-title:visited { color: var(--text-2); }
.news-title:hover { color: var(--accent); text-decoration: none; }

/* ---- HELP ------------------------------------------------------------- */
.cmd-list { margin: -8px -10px; }
.cmd-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 4px 10px;
  min-height: var(--row-h);
  border-bottom: 1px solid var(--rule);
}
.cmd-row:last-child { border-bottom: 0; }
.cmd-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-hint { color: var(--text-2); }
.cmd-example { text-align: right; }
.cmd-example .code + .code { margin-left: 10px; }
.cmd-row.is-soon .cmd-name, .cmd-row.is-soon .cmd-hint, .cmd-row.is-soon .cmd-example { color: var(--faint); }
.cmd-row.is-soon .cmd-example { font-size: 11px; letter-spacing: .1em; }

.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.keys div { display: flex; align-items: baseline; gap: 10px; }
.keys dt { flex: 0 0 96px; }
.keys dd { margin: 0; color: var(--text-2); }

/* ---- Boot log (first visit) ------------------------------------------ */
.boot { padding-top: 4px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.boot-line:first-child { color: var(--text); font-weight: 600; letter-spacing: .12em; margin-bottom: 6px; }
.boot-ok { color: var(--accent); }
.boot-cursor { display: inline-block; width: 1ch; height: 15px; margin-top: 4px; background: var(--accent); animation: blink 1.1s steps(1, end) infinite; }
.boot-skip { margin-top: 24px; font-size: 11px; color: var(--dim); }

/* ---- Dock: status line, ticker tape, function keys --------------------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--bg);
  border-top: 1px solid var(--rule-strong);
}
.statusline {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--status-h);
  padding: 0 var(--inset);
  background: var(--panel);
  font-size: 11px; letter-spacing: .06em;
  white-space: nowrap;
}
.status-msg { color: var(--accent); overflow: hidden; text-overflow: ellipsis; }
.status-msg[data-kind="warn"] { color: var(--down); }
.status-note { color: var(--faint); }

.tape {
  position: relative;
  height: var(--tape-h);
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tape-track { display: flex; width: max-content; height: 100%; }
.tape-track.is-running { animation: tape var(--tape-duration, 60s) linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
.tape-group { display: flex; align-items: center; }
.tape-item {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 0 16px;
  font-size: 12px;
  line-height: calc(var(--tape-h) - 2px);
  color: var(--text);
  border-right: 1px solid var(--rule);
}
.tape-item:hover { text-decoration: none; background: var(--panel-2); }
.tape-name { color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.tape-item .fresh { align-self: center; font-size: 8px; line-height: 10px; padding: 0 2px; }
.tape-empty { padding: 0 var(--gutter); line-height: var(--tape-h); font-size: 11px; color: var(--dim); }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.keybar {
  display: flex;
  height: var(--keybar-h);
  padding: 0 calc(var(--inset) - 8px);
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.keybar::-webkit-scrollbar { display: none; }
.fkey {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--text-2);
  white-space: nowrap;
}
.fkey:hover { text-decoration: none; background: var(--panel-3); color: var(--text); }
.fkey-n { color: var(--dim); font-weight: 400; }
.fkey.is-active { background: var(--accent); color: var(--ink); }
.fkey.is-active .fkey-n { color: var(--ink); }

/* ---- Narrower screens ------------------------------------------------- */
@media (max-width: 1100px) {
  .cmd-keys { display: none; }
  .grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  :root { --gutter: 8px; --row-h: 28px; }
  body { font-size: 13px; }

  .clock .label { display: none; }
  .clock { gap: 8px; }
  .status { padding-left: 8px; letter-spacing: .04em; }
  .wordmark { letter-spacing: .14em; }

  .suggest { left: var(--gutter); width: calc(100% - var(--gutter) * 2); }
  .suggest li { grid-template-columns: 72px 1fr; gap: 10px; height: 32px; }

  .grid-table th, .grid-table td { padding: 0 8px; }
  .grid-table .chg, .grid-table .time, .grid-table .moves { display: none; }
  .ch-bar { gap: 0; }
  .ch-tabs { width: 100%; border-bottom: 1px solid var(--rule); }
  .ch-dates { padding: 4px 8px; gap: 8px; }
  .ch-dates input { width: 128px; }
  .panel-body:has(> .rc-home) { min-height: 300px; }

  .q-top { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .q-hero, .hero { font-size: 34px; }
  .hero.is-long { font-size: 28px; }
  .hero.is-xlong { font-size: 22px; }
  .hero-unit { font-size: 14px; }
  .buy { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wi-groups { columns: 1; }
  .wi-keys { display: none; }
  .wi-bar { gap: 8px; }
  .wi-cmd { flex-basis: 100%; order: 3; }
  .wi-run { margin-left: auto; }
  .wi-sh, .wi-table .wi-sh, .wi-table .wi-when { display: none; }
  .wi-table tbody .name { white-space: normal; padding-top: 4px; padding-bottom: 4px; }
  .wi-when-m { display: block; font-size: 11px; }
  .wi-sentence { font-size: 14px; }
  .wi-receipt { margin: 12px -10px 0; }
  .stamp-v { font-size: 36px; }
  .stats-row { grid-template-columns: minmax(0, 1fr); }
  .chart-host { height: 240px; margin-left: 6px; }
  .chart-host-lg { height: 280px; }
  .rc-home .chart-host-home { margin-left: 6px; }

  .news-row { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 4px 8px; }
  .news-src { display: none; }
  .news-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  .cmd-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 8px; }
  .cmd-name { white-space: normal; }
  .cmd-example { text-align: left; }
  .cmd-hint { font-size: 12px; }
  .keys { grid-template-columns: minmax(0, 1fr); }

  .status-note { display: none; }
  .tape-item { padding: 0 12px; }
  .fkey { padding: 0 10px; }
}

/* ---- Reduced motion: no tape scroll, flash as text colour only -------- */
@media (prefers-reduced-motion: reduce) {
  .tape-track.is-running { animation: none; }
  .tape { overflow-x: auto; scrollbar-width: none; }
  .cmd-focused .cursor.blink { animation: none; opacity: .9; }
  .boot-cursor { animation: none; }
  .stamp { animation: none; }
  .tick-up { background: none; color: var(--up) !important; }
  .tick-down { background: none; color: var(--down) !important; }
}

/* ---- FINANCIALS and SCREEN ------------------------------------------- */
:root {
  --series-1: #3987e5; /* revenue: blue, validated with --series-2 on the dark surface */
  --series-2: #d55181; /* net income: magenta */
}
.fin-bar { justify-content: space-between; }
.fin-periods { border-left: 1px solid var(--rule-strong); }
.fin-chart-wrap { padding: 6px 0 0 10px; border-bottom: 1px solid var(--rule-strong); }
.fin-chart-head { display: flex; align-items: center; gap: 16px; min-height: 18px; padding-right: 10px; font-size: 11px; color: var(--text-2); letter-spacing: .04em; }
.fin-key { display: inline-flex; align-items: center; gap: 6px; }
.fin-sw { display: inline-block; width: 10px; height: 10px; }
.fin-sw-rev { background: var(--series-1); }
.fin-sw-net { background: var(--series-2); }
.fin-hover { margin-left: auto; color: var(--text); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.fin-chart-host { position: relative; height: 150px; margin-top: 4px; }
.fin-bar-rev { fill: var(--series-1); }
.fin-bar-net { fill: var(--series-2); }
.fin-hit { fill: transparent; }
.fin-col.is-on .fin-hit { fill: var(--panel-2); }
.fin-scroll { overflow-x: auto; }
.fin-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.fin-table tbody tr:not(.group-row):hover th:first-child { background: var(--panel-2); }
.fin-table .name { width: auto; max-width: none; min-width: 150px; }
.fin-table thead th { height: auto; padding-top: 4px; padding-bottom: 4px; vertical-align: bottom; }
.fin-table thead .fin-unit { text-align: left; }
.fin-per, .fin-end { display: block; }
.fin-per a { color: var(--text); }
.fin-per a:hover { color: var(--accent); text-decoration: none; }
.fin-end { color: var(--faint); font-size: 10px; letter-spacing: .04em; }
.fin-table td.num { min-width: 84px; }
.fin-table .group-row td, .fin-table .group-row th:first-child { background: var(--panel); border-bottom: 1px solid var(--rule); }
.fin-table td.is-derived { text-decoration: underline dotted var(--dim); text-underline-offset: 3px; }
.fin-table .fin-ratio .name, .fin-table .fin-ratio td:not(.up):not(.down) { color: var(--dim); }
.fin-msg { padding: 8px 10px; }

.sc-filters > summary { display: none; }
.sc-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; }
.sc-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-lab { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.sc-range { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 6px; }
.sc-range .sc-lab { grid-column: 1 / -1; }
.sc-form select, .sc-form input {
  width: 100%; min-width: 0; height: 24px; padding: 0 6px;
  border: 1px solid var(--rule-strong); background: var(--panel);
  color: var(--text); font-family: var(--font); font-size: 12px;
  color-scheme: dark;
}
.sc-form input { text-transform: uppercase; }
.sc-form input::placeholder { color: var(--faint); text-transform: none; opacity: 1; }
.sc-form select:focus, .sc-form input:focus { outline: 1px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.sc-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.sc-clear, .sc-more {
  height: 24px; padding: 0 12px;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--text-2);
  font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: .1em; cursor: pointer;
}
.sc-clear:hover, .sc-more:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.sc-err { color: var(--down); font-size: 12px; }
.sc-presets { margin-top: 8px; font-size: 12px; line-height: 2; }
.sc-presets .code { margin-right: 6px; }
.sc-presets + .sc-presets { margin-top: 0; }
.sc-scroll { overflow-x: auto; }
.sc-table .sc-sym { font-weight: 600; }
.sc-table .sc-sym a { color: var(--text); }
.sc-table .name { min-width: 180px; }
.sc-table .sc-ind { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.sc-sort { color: var(--dim); }
.sc-sort:hover { color: var(--text); text-decoration: none; }
.sc-sort.is-on { color: var(--accent); }
.sc-more-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; font-size: 12px; }
.sc-none { padding: 8px 10px; }
.sc-rule { padding: 4px 10px; border-bottom: 1px solid var(--rule-strong); background: var(--panel); color: var(--text-2); font-size: 12px; }
.sc-rule-k { margin-right: 8px; color: var(--accent); font-weight: 600; letter-spacing: .08em; }

@media (max-width: 1100px) {
  .sc-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .fin-table .name { min-width: 128px; white-space: normal; line-height: 1.2; }
  .fin-table td.num { min-width: 72px; }
  .fin-hover { flex-basis: 100%; margin-left: 0; }
  .fin-chart-head { flex-wrap: wrap; gap: 4px 12px; }
  .fin-chart-wrap { padding-left: 6px; }
  .sc-form { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
  .sc-filters > summary { display: flex; gap: 8px; align-items: baseline; cursor: pointer; list-style: none; font-size: 12px; }
  .sc-filters > summary::-webkit-details-marker { display: none; }
  .sc-filters > summary::before { content: '+'; color: var(--accent); }
  .sc-filters[open] > summary::before { content: '-'; }
  .sc-sum-k { color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
  .sc-sum-v { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sc-table .sc-vol, .sc-table .sc-sec, .sc-table .sc-ind, .sc-table .sc-cty { display: none; }
  .sc-table .name { min-width: 0; }
}

/* ---- WATCH, PORTFOLIO, the watchlist star and the function bar ---------- */
.star {
  display: flex; align-items: center;
  padding: 0 8px; margin-right: auto;
  border: 0; border-right: 1px solid var(--rule-strong);
  background: transparent; color: var(--dim);
  font-family: var(--font); font-size: 14px; line-height: 1; cursor: pointer;
}
.star:hover { color: var(--text); background: var(--panel-3); }
.star.is-on { color: var(--accent); }

.fnbar {
  display: flex; align-items: stretch;
  min-height: 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto; scrollbar-width: none;
}
.fnbar::-webkit-scrollbar { display: none; }
.fn {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  border: 0; border-right: 1px solid var(--rule);
  background: transparent; color: var(--text-2);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  cursor: pointer; white-space: nowrap;
}
.fn:hover { text-decoration: none; background: var(--panel-3); color: var(--text); }
.fn-n { color: var(--faint); font-weight: 400; }
.fn.is-active { background: var(--text-2); color: var(--ink); }
.fn.is-active .fn-n { color: var(--ink); }
.fn.is-soon { color: var(--faint); }
.fn.is-soon:hover { color: var(--dim); }
.fn-watch { margin-left: auto; border-left: 1px solid var(--rule); }
.fn-watch.is-on { color: var(--accent); }

.wl-top:empty { display: none; }
.wl-top, .pf-top { padding: 0; }
.wl-top > *, .pf-top > * { padding: 6px 10px; border-bottom: 1px solid var(--rule); }
.wl-msg { color: var(--text); }
.wl-msg.is-warn { color: var(--down); }
.wl-note { color: var(--dim); font-size: 12px; }
.wl-note .code { margin-left: 8px; }
.wl-export, .pf-export { display: flex; align-items: center; gap: 10px; }
.wl-export input, .pf-export textarea, .pf-import textarea {
  flex: 1; min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--rule-strong); background: var(--bg);
  color: var(--text); font-family: var(--font); font-size: 12px;
}
.wl-export input { height: 24px; }
.pf-export { align-items: flex-start; }
.pf-export textarea, .pf-import textarea { resize: vertical; line-height: 1.5; }
.wl-export input:focus, .pf-export textarea:focus, .pf-import textarea:focus { outline: 1px solid var(--accent); outline-offset: 0; }
.pf-import { display: grid; gap: 6px; }
.pf-import label { font-size: 11px; letter-spacing: .06em; }
.pf-import-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-file { color: var(--dim); }
.pf-file input { margin-left: 6px; color: var(--text-2); font-family: var(--font); font-size: 11px; }
.pf-btn {
  display: inline-flex; align-items: center; height: 24px; padding: 0 12px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--ink);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .1em; cursor: pointer; white-space: nowrap;
}
.pf-btn:hover { text-decoration: none; background: var(--text); border-color: var(--text); }
.wl-empty, .pf-empty { padding: 10px; line-height: 2; }
.wl-empty .code, .pf-empty .code { margin: 0 4px; }

.wl-table .th-sort {
  padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.wl-table .th-sort:hover, .wl-table .th-sort.is-on { color: var(--text); }
.wl-table .wl-sym, .pf-table .pf-sym { width: 1%; font-weight: 600; }
.wl-table .wl-sym a, .pf-table .pf-sym a { color: var(--text); }
.wl-table tbody .name, .pf-table tbody .name { color: var(--dim); }
.wl-table .name-h, .pf-table .name-h { width: 100%; }
.wl-52 { display: flex; align-items: center; justify-content: flex-end; gap: 0; height: var(--row-h); }
.wl-52 .rangebar { margin: 0 8px; }
.wl-lo, .wl-hi { color: var(--dim); font-size: 11px; }
.wl-act { width: 1%; padding: 0 4px 0 0 !important; text-align: right; }
.wl-btn {
  width: 22px; height: 20px; padding: 0;
  border: 0; background: transparent; color: var(--faint);
  font-family: var(--font); font-size: 13px; line-height: 1; cursor: pointer;
}
.wl-btn:hover:not([disabled]) { color: var(--text); background: var(--panel-3); }
.wl-btn[data-act="remove"]:hover { color: var(--down); }
.wl-btn[disabled] { opacity: .3; cursor: default; }
.wl-table tr.is-dragging { opacity: .45; }
.wl-table tr.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.wl-table tr.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.wl-table tr[draggable="true"] { cursor: grab; }
.wl-cname { margin-left: 6px; font-size: 11px; }
.h-more { padding: 4px 10px; font-size: 12px; }

.pf-table tfoot th, .pf-table tfoot td { height: 28px; padding: 0 10px; font-weight: 600; border-top: 1px solid var(--rule-strong); white-space: nowrap; }
.pf-table tfoot .name { font-weight: 400; font-size: 11px; letter-spacing: .04em; max-width: none; }
.pf-table .pf-val { color: var(--text); font-weight: 600; }
.pf-flag { margin-left: 6px; padding: 0 3px; border: 1px solid var(--rule-strong); color: var(--dim); font-size: 9px; font-weight: 600; letter-spacing: .06em; vertical-align: middle; }
.pf-alloc { padding: 2px 0; }
.alloc-bar { display: flex; gap: 1px; height: 14px; background: var(--bg); }
.alloc-seg { flex: 1 1 0; min-width: 2px; }
.alloc-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: 12px; }
.alloc-legend li { display: flex; align-items: center; gap: 8px; }
.alloc-legend a { color: var(--text); font-weight: 600; }
.alloc-dot { width: 8px; height: 8px; flex: 0 0 auto; }

@media (max-width: 1100px) {
  .wl-table .wl-wide { display: none; }
}
@media (max-width: 639px) {
  .wl-table .name-h, .wl-table tbody .name, .pf-table .name-h, .pf-table .name { display: none; }
  .wl-table .wl-sym, .pf-table .pf-sym { width: 100%; }
  .pf-table .pf-nm { display: none; }
  .pf-table tfoot .name { display: none; }
  .pf-table th, .pf-table td { padding: 0 6px; }
  .wl-top > *, .pf-top > * { padding: 6px 8px; }
  .wl-note .code { margin-left: 0; margin-right: 8px; }
  .wl-export, .pf-export { flex-wrap: wrap; }
  .wl-btn { width: 28px; height: 26px; }
  .fn { padding: 0 9px; }
  .fnbar { min-height: 30px; }
}