/* ==========================================================================
   UnoByte Markets
   Palette: instrument-panel steel with exchange-board amber. Deliberately not
   pure black — the blue-slate base keeps green/red candles legible without
   the glare of #000, and amber is the vernacular of a trading floor board.
   ========================================================================== */

:root {
  --font-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --step--1: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step-0:  clamp(0.86rem, 0.83rem + 0.14vw, 0.94rem);
  --step-1:  clamp(1.02rem, 0.96rem + 0.28vw, 1.18rem);
  --step-2:  clamp(1.28rem, 1.16rem + 0.58vw, 1.62rem);
  --step-3:  clamp(1.70rem, 1.44rem + 1.20vw, 2.50rem);

  --gutter: clamp(1rem, 0.5rem + 2.4vw, 3rem);
  --radius: 3px;
  --radius-lg: 6px;
  --rule: 1px;
  --maxw: 1440px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html[data-theme="dark"] {
  --bg:        #0B1016;
  --bg-deep:   #070B10;
  --surface:   #111A23;
  --surface-2: #16212C;
  --line:      #1F2C39;
  --line-soft: #17222C;
  --ink:       #DDE6EE;
  --ink-mid:   #96A6B5;
  --ink-dim:   #667888;
  --signal:    #F5A524;
  --signal-dim:#8A5D14;
  --up:        #2BA36F;
  --down:      #E5484D;
  --cool:      #5B9BF8;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 28px -18px rgba(0,0,0,.9);
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg:        #F2F5F8;
  --bg-deep:   #E7ECF2;
  --surface:   #FFFFFF;
  --surface-2: #F6F9FC;
  --line:      #D8E1EA;
  --line-soft: #E6ECF2;
  --ink:       #0E161E;
  --ink-mid:   #4C5E6E;
  --ink-dim:   #6E8092;
  --signal:    #A8620A;
  --signal-dim:#E9CFA6;
  --up:        #10784F;
  --down:      #C22E33;
  --cool:      #1F5FCB;
  --shadow: 0 1px 2px rgba(16,32,48,.05), 0 10px 26px -20px rgba(16,32,48,.35);
  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-cond); font-weight: 600;
  letter-spacing: -0.005em; margin: 0;
  text-wrap: balance;
}

p, dd, li, summary, figcaption, caption { text-wrap: pretty; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--signal); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--cool);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 60;
  background: var(--signal); color: #0B1016; padding: 0.55rem 0.9rem;
  font-weight: 600; border-radius: var(--radius); transition: top 0.15s var(--ease);
}
.skip:focus { top: 0.5rem; color: #0B1016; }

/* ------------------------------------------------------------------ header */

/* Scrolls away with the page. The blur and translucency existed only to make
   content readable while passing underneath a pinned bar, so they go too —
   against an opaque background they just soften the edge for no reason. */
.masthead {
  background: var(--bg);
  border-bottom: var(--rule) solid var(--line);
}

.masthead__bar {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0.55rem var(--gutter);
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
}

.brand {
  display: flex; align-items: center; gap: 0.6rem; min-width: 0;
  text-decoration: none; color: inherit; border-radius: var(--radius);
}
.brand:hover { color: inherit; }
.brand:hover .brand__mark { border-color: var(--signal); }
.brand__mark {
  display: grid; place-items: center; width: 30px; height: 30px;
  color: var(--signal); background: var(--surface);
  border: var(--rule) solid var(--line); border-radius: var(--radius);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand__name {
  font-family: var(--font-cond); font-weight: 700; font-size: var(--step-1);
  letter-spacing: 0.01em; text-transform: uppercase;
}
.brand__host {
  font-family: var(--font-num); font-size: 0.62rem; color: var(--ink-dim);
  letter-spacing: 0.08em; text-transform: lowercase;
}

.masthead__actions { display: flex; align-items: center; gap: 0.75rem; }

.clocklist {
  display: none; margin: 0; gap: 0.9rem;
  font-family: var(--font-num); font-size: var(--step--1);
  color: var(--ink-mid); font-variant-numeric: tabular-nums;
}
.clocklist b { color: var(--ink-dim); font-weight: 500; letter-spacing: 0.06em; }
@media (min-width: 900px) { .clocklist { display: flex; } }

.iconbtn {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--surface); border: var(--rule) solid var(--line);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.iconbtn:hover { border-color: var(--signal); color: var(--signal); }
.iconbtn__icon { width: 15px; height: 15px; border-radius: 50%; position: relative; }
html[data-theme="dark"] .iconbtn__icon {
  background: transparent; box-shadow: inset -4px -2px 0 0 currentColor;
  transform: rotate(-24deg);
}
html[data-theme="light"] .iconbtn__icon {
  background: currentColor; transform: scale(0.62);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px currentColor;
}

/* ---------------------------------------------------- signature: the ribbon */

.ribbon {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--gutter) 0.6rem;
}

.ribbon__rail { width: 100%; }
.ribbon__rail svg { display: block; width: 100%; height: auto; }
.ribbon__empty { font-size: var(--step--1); color: var(--ink-dim); padding: 0.4rem 0; }

.rib-grid    { stroke: var(--line-soft); stroke-width: 1; }
.rib-tick    { fill: var(--ink-dim); font-family: var(--font-num); font-size: 9px; letter-spacing: 0.04em; }
.rib-label   { fill: var(--ink-mid); font-family: var(--font-cond); font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.rib-track   { fill: var(--line-soft); }
.rib-seg     { fill: var(--signal); opacity: 0.30; }
.rib-seg--live { opacity: 0.85; }
.rib-seg--24  { fill: var(--up); opacity: 0.42; }
.rib-now     { stroke: var(--cool); stroke-width: 1.5; }
.rib-nowcap  { fill: var(--cool); }
.rib-nowtext { fill: var(--cool); font-family: var(--font-num); font-size: 9px; font-weight: 500; }

.statusrow {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
  margin: 0.5rem 0 0; padding: 0;
  font-size: var(--step--1);
}
.statusrow li { display: flex; align-items: baseline; gap: 0.4rem; }
.statusrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-dim);
  transform: translateY(-1px); flex: none;
}
.statusrow .is-open .dot { background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 22%, transparent); }
.statusrow .venue { font-family: var(--font-cond); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.statusrow .when { font-family: var(--font-num); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.statusrow .is-open .when { color: var(--ink-mid); }

/* -------------------------------------------------------------- main layout */

main { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) 3rem; }

/* instrument rail */
.rail {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  border-bottom: var(--rule) solid var(--line);
  margin-top: 0.9rem;
  scroll-snap-type: x proximity;
}
.rail::-webkit-scrollbar { display: none; }

.tile {
  flex: none; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.6rem 1rem 0.65rem; min-width: 8.4rem;
  background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; text-align: left;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
/* The rail's own padding must not indent the page's left edge — the quote block
   and section headings below start flush, and the first tile should match. */
.tile:first-child { padding-left: 0; }
.tile:hover { background: var(--surface-2); }
.tile[aria-selected="true"] { border-bottom-color: var(--signal); background: var(--surface); }
.tile__name {
  font-family: var(--font-cond); font-weight: 600; font-size: var(--step--1);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mid);
  white-space: nowrap;
}
.tile[aria-selected="true"] .tile__name { color: var(--ink); }
.tile__px {
  font-family: var(--font-num); font-size: var(--step-0); font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tile__chg {
  font-family: var(--font-num); font-size: 0.68rem; font-variant-numeric: tabular-nums;
  color: var(--ink-dim); white-space: nowrap;
}
.tile__chg[data-dir="up"] { color: var(--up); }
.tile__chg[data-dir="down"] { color: var(--down); }

/* quote block */
.panel { padding-top: 1.1rem; }

.quote {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.8rem;
  padding-bottom: 0.9rem;
}
.quote__head { margin-right: auto; }
.quote__name { font-size: var(--step-2); line-height: 1.1; }
.quote__meta {
  margin: 0.15rem 0 0; font-family: var(--font-num); font-size: var(--step--1);
  color: var(--ink-dim); letter-spacing: 0.02em;
}
.quote__price { display: flex; align-items: baseline; gap: 0.6rem; }
/* Tabular figures keep digit widths equal, but the digit *count* still varies,
   so the element resized and shoved everything after it sideways. The slot is
   sized from the widest value in the loaded series, set as --num-ch in app.js,
   so it stays put while the crosshair moves and while prices tick. */
.quote__last {
  font-family: var(--font-num); font-size: var(--step-3); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1;
  display: inline-block; min-width: var(--num-ch, 8ch);
}
.quote__chg {
  font-family: var(--font-num); font-size: var(--step-0); font-variant-numeric: tabular-nums;
  padding: 0.15rem 0.4rem; border-radius: var(--radius); white-space: nowrap;
  min-width: 13ch; text-align: center;
}
/* No direction means the move rounded to zero in both figures — neutral, not
   red. :not(:empty) keeps the pill from showing while the quote is loading. */
.quote__chg:not([data-dir]):not(:empty) {
  color: var(--ink-dim); background: color-mix(in srgb, var(--ink-dim) 10%, transparent);
}
.quote__chg[data-dir="up"]   { color: var(--up);   background: color-mix(in srgb, var(--up) 13%, transparent); }
.quote__chg[data-dir="down"] { color: var(--down); background: color-mix(in srgb, var(--down) 13%, transparent); }

.quote__age {
  font-family: var(--font-num); font-size: var(--step--1);
  color: var(--ink-dim); white-space: nowrap; letter-spacing: 0.01em;
}
.quote__age[data-stale="1"] { color: var(--signal); }

.ohlc {
  display: flex; gap: 0.9rem; margin: 0;
  font-family: var(--font-num); font-size: var(--step--1); font-variant-numeric: tabular-nums;
}
.ohlc > div { display: flex; gap: 0.3rem; }
.ohlc dt { color: var(--ink-dim); }
.ohlc dd { margin: 0; display: inline-block; min-width: var(--num-ch, 6ch); }
.ohlc__vol dd { min-width: 7ch; }
.ohlc__vol { display: none; }
@media (min-width: 720px) { .ohlc__vol { display: flex; } }

/* controls */
.controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
  justify-content: space-between;
  padding: 0.5rem 0 0.7rem;
  border-top: var(--rule) solid var(--line);
}
.tfgroup {
  display: flex; gap: 1px; overflow-x: auto; scrollbar-width: none;
  background: var(--line-soft); border: var(--rule) solid var(--line);
  border-radius: var(--radius); padding: 1px;
}
.tfgroup::-webkit-scrollbar { display: none; }
.tf {
  flex: none; padding: 0.3rem 0.6rem; background: var(--bg); border: 0;
  font-family: var(--font-num); font-size: var(--step--1); font-weight: 500;
  color: var(--ink-mid); cursor: pointer; white-space: nowrap;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.tf:hover { color: var(--ink); background: var(--surface-2); }
.tf[aria-selected="true"] { background: var(--signal); color: #0B1016; }
.tf[disabled] { opacity: 0.32; cursor: not-allowed; }

.controls__right { display: flex; align-items: center; gap: 0.75rem; }
.ghostbtn {
  padding: 0.3rem 0.7rem; background: transparent;
  border: var(--rule) solid var(--line); border-radius: var(--radius);
  font-family: var(--font-cond); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mid); cursor: pointer;
}
.ghostbtn:hover { border-color: var(--signal); color: var(--signal); }
.ghostbtn[aria-pressed="true"] {
  border-color: var(--signal); color: var(--signal);
  background: color-mix(in srgb, var(--signal) 12%, transparent);
}
.freshness {
  font-family: var(--font-num); font-size: var(--step--1); color: var(--ink-dim);
  display: flex; align-items: center; gap: 0.4rem; font-variant-numeric: tabular-nums;
}
.freshness::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-dim); flex: none;
}
.freshness[data-live="1"]::before { background: var(--up); animation: pulse 2.4s var(--ease) infinite; }
.freshness[data-live="err"]::before { background: var(--down); }
/* Serving a cached copy because upstream is rate limiting — not an error, but
   not live either, so it gets its own colour rather than sharing one. */
.freshness[data-live="stale"]::before { background: var(--signal); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* chart */
.chartwrap {
  position: relative;
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.chart { height: clamp(340px, 56vh, 620px); width: 100%; }

.chart__state {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; text-align: center; padding: 1.5rem;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  font-size: var(--step--1); color: var(--ink-mid);
}
/* Required. `display: flex` above is an author rule and `[hidden]` is only a
   user-agent rule, and origin outranks specificity — so without this the
   overlay stays painted over the chart forever, whatever the hidden attribute
   says. Any element you toggle with `hidden` needs this once you give it a
   display value. */
.chart__state[hidden] { display: none; }

/* ------------------------------------------------------- loading skeleton --
   Candles fill in left to right, then breathe on a staggered delay so the wave
   keeps travelling. The shape is deterministic, so a re-render never jitters,
   and the bars stay neutral grey rather than red/green — a loading state should
   not imply a direction the data has not confirmed yet. */

.sk {
  width: 100%; max-width: 900px; height: min(58%, 260px);
  display: block; opacity: 0.9;
}
.sk-grid { stroke: var(--line-soft); stroke-width: 1; }
/* Keyed to --ink-dim rather than --line so the skeleton is legible in both
   themes. Element opacity multiplies with the group's animated opacity, so the
   bodies peak around 0.55 — present, but clearly a placeholder. */
.sk-candle line { stroke: var(--ink-dim); stroke-width: 2; opacity: 0.4; }
.sk-candle rect { fill: var(--ink-dim); opacity: 0.55; }

.sk-candle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation:
    sk-in 0.5s var(--ease) forwards,
    sk-wave 2.6s var(--ease) infinite;
  animation-delay:
    calc(var(--i) * 22ms),
    calc(var(--i) * 22ms + 0.5s);
}

@keyframes sk-in {
  from { opacity: 0; transform: scaleY(0.2); }
  to   { opacity: 1; transform: scaleY(1); }
}
@keyframes sk-wave {
  0%, 100% { opacity: 0.4; }
  45%      { opacity: 1; }
}

.sk-caption {
  margin: 0; font-family: var(--font-num); font-size: var(--step--1);
  color: var(--ink-dim); letter-spacing: 0.02em;
}
.sk-caption b { color: var(--ink-mid); font-weight: 500; }
.chart__state strong { font-family: var(--font-cond); font-size: var(--step-1); color: var(--ink); display: block; }
.chart__state span { max-width: 48ch; text-wrap: pretty; }
.chart__state code {
  font-family: var(--font-num); font-size: 0.72rem; color: var(--ink-dim);
  background: var(--surface-2); padding: 0.1rem 0.35rem; border-radius: var(--radius);
}

/* ---------------------------------------------- pending-number placeholders --
   A number that has not arrived should say so. Em-dashes read as "no data",
   which is a different and more alarming claim than "still fetching". */

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.tile[data-state="loading"] .tile__px,
.tile[data-state="loading"] .tile__chg { color: transparent; position: relative; }
.tile[data-state="loading"] .tile__px::after,
.tile[data-state="loading"] .tile__chg::after {
  content: "";
  position: absolute; left: 0; right: 0.5rem; top: 0.16em; bottom: 0.16em;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink-dim) 13%, transparent),
    color-mix(in srgb, var(--ink-dim) 30%, transparent),
    color-mix(in srgb, var(--ink-dim) 13%, transparent)
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
/* Stagger the rail so it reads as a queue draining, not eight synchronised bars. */
.tile:nth-child(2n) .tile__px::after  { animation-delay: 0.2s; }
.tile:nth-child(3n) .tile__px::after  { animation-delay: 0.4s; }

.tile[data-state="error"] .tile__px  { color: var(--ink-dim); }
.tile[data-state="error"] .tile__chg { color: var(--ink-dim); font-size: 0.62rem; }

.quote[data-state="loading"] .quote__last,
.quote[data-state="loading"] .ohlc dd { color: transparent; position: relative; }
.quote[data-state="loading"] .quote__last::after,
.quote[data-state="loading"] .ohlc dd::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0.16em; bottom: 0.16em;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink-dim) 13%, transparent),
    color-mix(in srgb, var(--ink-dim) 30%, transparent),
    color-mix(in srgb, var(--ink-dim) 13%, transparent)
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

.legendnote {
  margin: 0.6rem 0 0; font-size: var(--step--1); color: var(--ink-dim);
  font-family: var(--font-num);
}

/* ------------------------------------------------------------ static prose */

.prose { margin-top: 3.2rem; }
.prose > h2 {
  font-size: var(--step-2); padding-bottom: 0.45rem;
  border-bottom: var(--rule) solid var(--line);
}
.prose > h2::before {
  content: ""; display: block;
  width: 1.75rem; height: 2px;
  background: var(--signal);
  margin-bottom: 0.7rem;
}
/* Intentionally unconstrained: the cards below run the full width, and a 62ch
   column above them read as a mistake rather than as a measure. */
.prose > p { max-width: none; color: var(--ink-mid); margin: 0.9rem 0 0; }

.cards {
  display: grid; gap: 1px; margin-top: 1.4rem;
  background: var(--surface);
  border: var(--rule) solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: 1fr;
}
/* Ten instruments, so 1, 2 and 5 columns all divide evenly — no ragged last
   row at any breakpoint. Four columns left two cells over, which is what made
   the block look lopsided. If the instrument count changes, revisit these. */
@media (min-width: 600px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) {
  .cards { grid-template-columns: repeat(5, 1fr); }
  /* Narrower columns need tighter gutters and a smaller heading, or the
     two-word titles wrap onto three lines. */
  .card { padding: 0.95rem 1rem 1.1rem; }
  .card h3 { font-size: var(--step--1); letter-spacing: 0.03em; }
  .card p { font-size: 0.76rem; line-height: 1.55; }
}

/* Each card paints the 1px separator to its right and below. An incomplete
   last row therefore leaves invisible cells rather than solid blocks, and the
   grid stays correct for any number of instruments. Overflow on .cards clips
   the trailing edges. */
.card {
  background: var(--surface); padding: 1rem 1.1rem 1.2rem;
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
.card h3 {
  font-size: var(--step-0); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 0.4rem;
}
.card p { margin: 0; font-size: var(--step--1); color: var(--ink-mid); line-height: 1.6; }

.tablewrap { overflow-x: auto; margin-top: 1.4rem; }
.hours { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 40rem; }
.hours th, .hours td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: var(--rule) solid var(--line); }
.hours thead th {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-dim); font-weight: 600; border-bottom-color: var(--ink-dim);
}
.hours tbody th { font-family: var(--font-cond); font-weight: 600; color: var(--ink); }
.hours td { color: var(--ink-mid); font-family: var(--font-num); font-size: 0.74rem; }

.foot {
  border-top: var(--rule) solid var(--line);
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.4rem var(--gutter) 2.5rem;
  font-size: var(--step--1); color: var(--ink-dim);
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.35rem 2rem;
}
.foot p { margin: 0; }
.foot__tz { font-family: var(--font-num); }

/* ----------------------------------------------------------------- a11y/motion */

@media (prefers-reduced-motion: reduce) {
  .sk-candle { opacity: 0.55; animation: none; }
  .tile[data-state="loading"] .tile__px::after,
  .tile[data-state="loading"] .tile__chg::after,
  .quote[data-state="loading"] .quote__last::after,
  .quote[data-state="loading"] .ohlc dd::after {
    animation: none;
    background: color-mix(in srgb, var(--ink-dim) 20%, transparent);
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .masthead, .rail, .controls, .skip { display: none; }
  body { background: #fff; color: #000; }
}