/* ══════════════════════════════════════════════════════════════════════════
   TRADZY — THEME LAYER
   ══════════════════════════════════════════════════════════════════════════
   Loaded EARLY, before the inline <style> blocks in index.html.

   ── WHY --acc-rgb IS A BARE TRIPLET ───────────────────────────────────────
   The accent is used far more often with an alpha channel than without:
   ~2,800 of its ~3,100 sites are rgba(184,245,0,<alpha>) at 40-odd different
   alpha values. Plain CSS cannot build an rgba() from a hex custom property,
   so the variable holds the CHANNELS ONLY —

     --acc-rgb: 184, 245, 0;

   and call sites read rgba(var(--acc-rgb), 0.12). --lime is then derived from
   it for the ~250 opaque sites. Setting --acc-rgb is therefore the single
   switch that retints the entire application.

   Do not redefine --lime as a literal in a theme block: --lime must stay
   derived, or the opaque and translucent sites drift apart.

   ── SCOPE ─────────────────────────────────────────────────────────────────
   Accent themes are COMPLETE: scripts/accent-to-var.mjs migrated 2,989 of
   3,099 accent literals onto these variables. The 110 that remain literal are
   deliberate and documented in that script — canvas paint (the CSS engine is
   not involved, so var() cannot resolve), value comparisons, and the mascot's
   own selectable aura palette, which is user data rather than app styling.

   ── LIGHT MODE ────────────────────────────────────────────────────────────
   Surfaces started out far less variable-driven than the accent. A census of
   every colour literal in index.html and assets/, bucketed by saturation:

     pure black   #000 / rgba(0,0,0,A)          397   -> --surf-rgb
     pure white   #fff / rgba(255,255,255,A)    579   -> --ink-rgb
     near-black neutral (#050505, #0a0a0a, …)   203   -> --bg ladder
     blue-grey ink (rgba(170,190,215,.85), …)   844   -> --text ladder
     semantic (red / amber / green / …)       2,930   -> LEFT ALONE

   The last row is the important one: those are meaning-carrying colours — a
   loss is red in both themes — so a light mode must NOT touch them. That is
   also why a naive global inversion of this app looks broken.

   The two pure-neutral buckets were migrated mechanically by
   scripts/neutrals-to-var.mjs and are provably lossless in dark (see below).
   The remaining ladders are driven by the variables in the light block at the
   bottom of this file.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Default accent — the original lime. Overridden by [data-accent]. */
  --acc-rgb: 184, 245, 0;
  --acc-deep: #8cc800;   /* darker accent, for text that needs more weight */

  /* ── THE TWO NEUTRAL CHANNELS ──────────────────────────────────────────
     scripts/neutrals-to-var.mjs rewrote 876 pure-neutral surface colours to
     read from these:

       rgba(0,0,0,A)        -> rgba(var(--surf-rgb),A)   fills, panels, wells
       rgba(255,255,255,A)  -> rgba(var(--ink-rgb),A)    hairlines, dividers

     Only PURE neutrals were migrated, which is what makes the dark theme
     provably unchanged: with the values below every one of those 876 sites
     computes byte-for-byte what it computed before. Light mode swaps the two
     triplets and they all invert together.

     Shadows kept literal black and are not affected — a shadow stays dark in
     a light theme, it just softens. */
  --surf-rgb: 0, 0, 0;
  --ink-rgb: 255, 255, 255;

  /* ── ACCENT TEXT vs ACCENT FILL ────────────────────────────────────────
     scripts/accent-ink-split.mjs pointed the 866 accent values that sit in a
     `color:` declaration at this channel instead of --acc-rgb.

     In DARK the two are identical, so the split is a no-op here — it exists
     entirely for light mode, where they must diverge. The app expresses
     hierarchy in accent text through ALPHA (0.35 for a hint, 0.6 for a label,
     0.9 for a heading). Over black, lower alpha reads as dimmer. Over white it
     reads as *vanishing*, because the text composites toward the background
     rather than away from it — at 0.35 alpha even pure black lands around
     2.2:1. A fill at 0.05 alpha, meanwhile, is SUPPOSED to be barely visible.
     One triplet cannot satisfy both, and CSS cannot select on "used as text". */
  --acc-ink-rgb: var(--acc-rgb);
}

/* --lime and --lime2 are declared in the inline :root in index.html and are
   left to it, so this file never has to be kept in sync with that block.
   index.html defines them as:
     --lime:  rgb(var(--acc-rgb))
     --lime2: var(--acc-deep)
   Both therefore follow --acc-rgb / --acc-deep automatically. */

/* ══════════════════════════════════════════════════════════════════════════
   ACCENTS
   ══════════════════════════════════════════════════════════════════════════
   Each pairs a bright channel triplet (used at low alpha for fills, borders
   and glows, and opaque for headings) with a deeper companion used where the
   bright tone would be too light to read as body text on near-black.

   The bright tone of each is kept at a similar luminance to the original lime
   so the ~2,800 hand-tuned alpha values — 0.03 fills, 0.12 borders, 0.35
   glows — keep landing at the intended weight rather than needing a retune. */

:root[data-accent="lime"]   { --acc-rgb: 184, 245, 0;   --acc-deep: #8cc800; }
:root[data-accent="cyan"]   { --acc-rgb: 0, 224, 255;   --acc-deep: #00a4bd; }
:root[data-accent="violet"] { --acc-rgb: 173, 128, 255; --acc-deep: #8a5cf0; }
:root[data-accent="amber"]  { --acc-rgb: 255, 176, 32;  --acc-deep: #c98600; }
:root[data-accent="rose"]   { --acc-rgb: 255, 94, 128;  --acc-deep: #d13a63; }
:root[data-accent="ice"]    { --acc-rgb: 206, 222, 245; --acc-deep: #93a6bf; }

/* The red used for losses/danger is a fixed semantic colour and must NOT
   follow the accent — a rose accent would otherwise make every loss state
   indistinguishable from every normal state. Re-asserted here so a future
   migration cannot fold it into --acc-rgb by accident. */
:root {
  --red: #ff2244;
  --red2: rgba(255, 34, 68, 0.09);
}

/* The rose accent is close enough to --red that loss states stop reading as
   distinct, so the semantic red is pushed further toward crimson for it. */
:root[data-accent="rose"] {
  --red: #ff1e3c;
}

/* Accent swaps animate rather than snap. Kept to colour-ish properties only:
   a global `transition: all` here would make every layout change in the app
   animate, which is both wrong and expensive. */
:root[data-accent-animating] * {
  transition: background-color 0.28s ease, border-color 0.28s ease,
              color 0.28s ease, box-shadow 0.28s ease, fill 0.28s ease,
              stroke 0.28s ease;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-accent-animating] * { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PICKER (account modal)
   ══════════════════════════════════════════════════════════════════════════ */
.tz-accent-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  /* 18 accents rather than 6 — cap the height and scroll instead of pushing the
     rest of the account modal off screen on a phone. */
  max-height: 232px;
  overflow-y: auto;
}
/* Pro-locked accents keep their real colour AND their default opacity — the
   swatch is the sell, and dimming it both hides the product and changes an
   opacity level that should stay put. The lock badge alone carries the state.
   Still clickable; apply() explains via toast. */
.tz-accent-lock {
  margin-left: auto;
  font-size: var(--fs-11, 11px);
  line-height: 1;
}
.tz-accent-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  min-height: 40px;
  border-radius: var(--r2, 8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  text-align: left;
  min-width: 0;
}
.tz-accent-chip:hover {
  border-color: rgba(var(--acc-rgb), 0.4);
  color: var(--text2);
}
.tz-accent-chip.is-active {
  border-color: rgba(var(--acc-rgb), 0.6);
  background: rgba(var(--acc-rgb), 0.08);
  color: var(--lime);
}
.tz-accent-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  /* The mono swatch is near-white; without a rim it dissolves into a light
     card background and reads as an empty chip. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 10px currentColor;
}
.tz-accent-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tz-accent-note {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text3);
}
@media (max-width: 480px) {
  .tz-accent-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tz-hue-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tz-hue-section .tz-accent-note {
  margin-top: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE
   ══════════════════════════════════════════════════════════════════════════
   Applied by <html data-theme="light">. Specificity note: :root[data-theme]
   is (0,2,0) and beats the plain :root blocks above and the inline :root in
   index.html (both 0,1,0), so this wins regardless of load order.

   THE TWO CHANNEL SWAPS carry most of the work — 876 migrated sites flip on
   these two lines alone. Everything below them is the ladder work: surfaces
   that were bespoke near-blacks, and the blue-grey ink family.

   NOT INVERTED, DELIBERATELY:
     • --red and the semantic status colours. A loss is red in both themes.
     • box-shadow literals. A shadow is cast light, not a surface; it stays
       dark and merely softens. The migration left all 80 of them literal.
     • Dialog scrims. 17 near-opaque blacks on overlay elements were left
       literal so a dialog still separates from the page — every mainstream
       light UI uses a dark scrim, and a white one over white content erases
       the boundary.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* The swap. */
  --surf-rgb: 255, 255, 255;
  --ink-rgb: 15, 22, 32;

  /* Surface ladder. Not pure white: this is a dense data UI viewed for long
     sessions, and a paper-white field behind small mono type is fatiguing.
     --bg1 is the lightest because it is the CARD colour and cards should sit
     above the page, which is the reverse of the dark ladder's ordering. */
  --bg:   #eef1f5;
  --bg1:  #ffffff;
  --bg2:  #f5f7fa;
  --bg3:  #e9edf3;
  --bg4:  #dde3ec;

  --glass:  rgba(255, 255, 255, 0.86);
  --glass2: rgba(255, 255, 255, 0.94);
  --glass3: rgba(255, 255, 255, 0.72);

  /* Ink ladder, mirroring the dark scale's contrast steps rather than its
     values: --text is the strongest, --text4 the faintest. Kept slightly blue
     to preserve the app's cool cast. */
  --text:  #0f1620;
  --text2: #41505f;
  --text3: #6a7889;
  --text4: #a4b0bf;

  --border:  #d8dee7;
  --border2: #c8d1dc;

  /* --lime is NOT overridden here. It is derived as rgb(var(--acc-rgb)), and
     --acc-rgb is itself re-pointed at the dark accent below, so --lime follows
     automatically. Overriding it here as well would double-apply the shift. */

  /* The dark theme leans on a black glow for elevation; on light that reads as
     grime. Elevation becomes a soft neutral drop instead. */
  --glow: 0 0 24px rgba(var(--acc-rgb), 0.28);
  --glow2: 0 8px 32px rgba(15, 22, 32, 0.14);

  color-scheme: light;
}

/* ── THE ACCENT IN LIGHT MODE ──────────────────────────────────────────────
   Measured problem: with the bright accent left alone, 204 elements failed a
   2.5:1 contrast check against their background. Every single one was accent
   text — either rgb(140,200,0) from --acc-deep, or the bright triplet used as
   a TEXT colour at partial alpha, rgba(184,245,0,0.35…0.8). Lime on white is
   roughly 1.4:1; it is not dim, it is illegible.

   The first half of the fix is to re-point --acc-rgb itself, which covers
   fills, borders and glows:

     fill    rgba(var(--acc-rgb), 0.05)  -> a faint tint, as intended
     border  rgba(var(--acc-rgb), 0.25)  -> visible hairline
     glow    rgba(var(--acc-rgb), 0.28)  -> a soft coloured halo

   Each --acc-rgb below is the same hue as its dark counterpart, darkened until
   it clears 4.5:1 on the --bg1 card white, so the accent stays recognisable —
   this is the same colour, not a different one.

   --acc-ink-rgb is the second half, covering the 866 `color:` sites (see
   scripts/accent-ink-split.mjs). It is darker again and closer to neutral,
   because it has to survive being drawn at 0.35 alpha — which costs roughly
   two thirds of its contrast — while keeping just enough hue to still read as
   the accent at full opacity. */
:root[data-theme="light"][data-accent="lime"],
:root[data-theme="light"]:not([data-accent]) { --acc-rgb: 79, 112, 0;  --acc-deep: #3d5600; --acc-ink-rgb: 26, 38, 0; }
:root[data-theme="light"][data-accent="cyan"]   { --acc-rgb: 0, 114, 127;  --acc-deep: #004f58; --acc-ink-rgb: 0, 38, 43; }
:root[data-theme="light"][data-accent="violet"] { --acc-rgb: 100, 56, 184; --acc-deep: #47257f; --acc-ink-rgb: 32, 16, 62; }
:root[data-theme="light"][data-accent="amber"]  { --acc-rgb: 138, 86, 0;   --acc-deep: #5e3a00; --acc-ink-rgb: 46, 28, 0; }
:root[data-theme="light"][data-accent="rose"]   { --acc-rgb: 176, 16, 56;  --acc-deep: #7d0b28; --acc-ink-rgb: 58, 5, 19; }
:root[data-theme="light"][data-accent="ice"]    { --acc-rgb: 70, 82, 95;   --acc-deep: #2f3742; --acc-ink-rgb: 22, 26, 31; }

/* Form controls, scrollbars and the like are painted by the UA, which reads
   color-scheme rather than any of the above. */
:root[data-theme="dark"] { color-scheme: dark; }

/* ── MODE TOGGLE (account modal) ─────────────────────────────────────────── */
.tz-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.tz-mode-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px;
  min-height: 40px;
  border-radius: var(--r2, 8px);
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tz-mode-chip:hover { color: var(--text2); }
.tz-mode-chip.is-active {
  border-color: rgba(var(--acc-rgb), 0.6);
  background: rgba(var(--acc-rgb), 0.08);
  color: var(--lime);
}


/* tz-tokens-start */
/* GENERATED by scripts/gen-theme-tokens.mjs — do not hand-edit.
   66 surface + 275 ink + 133 bright-text tones.
   The dark values are the BYTE-IDENTICAL original literals, which is what
   makes this migration invisible in dark mode. */
:root, :root[data-theme="dark"] {
  --tzs-010203: #010203;
  --tzs-020303: #020303;
  --tzs-030600: #030600;
  --tzs-040406-a980: rgba(4,4,6,0.98);
  --tzs-040608-a900: rgba(4,6,8,0.9);
  --tzs-04060a-a880: rgba(4,6,10,0.88);
  --tzs-04060a-a950: rgba(4,6,10,0.95);
  --tzs-04060a-a970: rgba(4,6,10,0.97);
  --tzs-04060a-a980: rgba(4,6,10,0.98);
  --tzs-04060c-a980: rgba(4,6,12,0.98);
  --tzs-050505: #050505;
  --tzs-050505-a850: rgba(5,5,5,0.85);
  --tzs-050505-a900: rgba(5,5,5,0.9);
  --tzs-050505-a920: rgba(5,5,5,0.92);
  --tzs-050505-a980: rgba(5,5,5,0.98);
  --tzs-050507-a990: rgba(5,5,7,0.99);
  --tzs-050508-a950: rgba(5,5,8,0.95);
  --tzs-05080c-a900: rgba(5,8,12,0.9);
  --tzs-050900: #050900;
  --tzs-06080a-a940: rgba(6,8,10,0.94);
  --tzs-06080c-a980: rgba(6,8,12,0.98);
  --tzs-06080e-a970: rgba(6,8,14,0.97);
  --tzs-060a08-a950: rgba(6,10,8,0.95);
  --tzs-060a0c-a960: rgba(6,10,12,.96);
  --tzs-060a0e: #060a0e;
  --tzs-07090f-a950: rgba(7,9,15,0.95);
  --tzs-070a0f-a880: rgba(7,10,15,.88);
  --tzs-080808: #080808;
  --tzs-080808-a940: rgba(8,8,8,0.94);
  --tzs-080808-a960: rgba(8,8,8,0.96);
  --tzs-08080a-a000: rgba(8,8,10,0);
  --tzs-08080a-a750: rgba(8,8,10,0.75);
  --tzs-08080a-a880: rgba(8,8,10,0.88);
  --tzs-08080a-a900: rgba(8,8,10,0.9);
  --tzs-08080a-a960: rgba(8,8,10,0.96);
  --tzs-08080a-a970: rgba(8,8,10,0.97);
  --tzs-08080a-a980: rgba(8,8,10,0.98);
  --tzs-080a12-a980: rgba(8,10,18,0.98);
  --tzs-080b12-a650: rgba(8,11,18,0.65);
  --tzs-080b12-a950: rgba(8,11,18,0.95);
  --tzs-080b12-a970: rgba(8,11,18,0.97);
  --tzs-080c06-a970: rgba(8,12,6,0.97);
  --tzs-080c0e-a950: rgba(8,12,14,0.95);
  --tzs-080c14-a820: rgba(8,12,20,.82);
  --tzs-0a0a0a: #0a0a0a;
  --tzs-0a0a0a-a950: rgba(10,10,10,0.95);
  --tzs-0a0a0c-a980: rgba(10,10,12,0.98);
  --tzs-0a0a0e-a500: rgba(10,10,14,0.5);
  --tzs-0a0a0e-a900: rgba(10,10,14,0.9);
  --tzs-0a0c0e-a700: rgba(10,12,14,0.7);
  --tzs-0a0d0b: #0a0d0b;
  --tzs-0a0e08-a980: rgba(10,14,8,0.98);
  --tzs-0a0e16-a950: rgba(10,14,22,0.95);
  --tzs-0c0c0c-a920: rgba(12,12,12,0.92);
  --tzs-0c0e06-a990: rgba(12,14,6,0.99);
  --tzs-0c0f16-a900: rgba(12,15,22,0.9);
  --tzs-0d0d0d: #0d0d0d;
  --tzs-0d1018-a900: rgba(13,16,24,0.9);
  --tzs-0d1018-a920: rgba(13,16,24,0.92);
  --tzs-0d1117: #0d1117;
  --tzs-0e0e0e: #0e0e0e;
  --tzs-0f0f0f: #0f0f0f;
  --tzs-111111: #111;
  --tzs-141414: #141414;
  --tzs-1a1a1a: #1a1a1a;
  --tzs-1a1e1a: #1a1e1a;
  --tzi-4a6070: #4a6070;
  --tzi-607080: #607080;
  --tzi-64788c-a350: rgba(100,120,140,0.35);
  --tzi-64788c-a400: rgba(100,120,140,0.4);
  --tzi-64788c-a500: rgba(100,120,140,0.5);
  --tzi-64788c-a600: rgba(100,120,140,0.6);
  --tzi-647896-a500: rgba(100,120,150,0.5);
  --tzi-6482a0-a600: rgba(100,130,160,0.6);
  --tzi-648cc8-a200: rgba(100,140,200,0.2);
  --tzi-648cc8-a700: rgba(100,140,200,0.7);
  --tzi-6b8cba: #6b8cba;
  --tzi-7887a5-a900: rgba(120,135,165,0.9);
  --tzi-8291af-a350: rgba(130,145,175,0.35);
  --tzi-8291af-a500: rgba(130,145,175,0.5);
  --tzi-8291af-a550: rgba(130,145,175,0.55);
  --tzi-8291af-a750: rgba(130,145,175,0.75);
  --tzi-8291af-a850: rgba(130,145,175,0.85);
  --tzi-8296aa-a400: rgba(130,150,170,0.4);
  --tzi-8296b4-a400: rgba(130,150,180,0.4);
  --tzi-82a0be-a650: rgba(130,160,190,0.65);
  --tzi-82a0be-a700: rgba(130,160,190,0.7);
  --tzi-8899aa: #8899aa;
  --tzi-88a0b9-a300: rgba(136,160,185,0.3);
  --tzi-8aa0b8: rgb(138, 160, 184);
  --tzi-8c9bb4-a720: rgba(140,155,180,0.72);
  --tzi-8ca0b4-a350: rgba(140,160,180,0.35);
  --tzi-8ca0b4-a400: rgba(140,160,180,0.4);
  --tzi-8ca0b4-a500: rgba(140,160,180,0.5);
  --tzi-8ca0b4-a600: rgba(140,160,180,0.6);
  --tzi-8ca0be-a450: rgba(140,160,190,0.45);
  --tzi-8ca0be-a500: rgba(140,160,190,0.5);
  --tzi-8ca0be-a600: rgba(140,160,190,0.6);
  --tzi-8ca2c3-a650: rgba(140,162,195,0.65);
  --tzi-8ca5c8-a650: rgba(140,165,200,0.65);
  --tzi-93c5fd-a900: rgba(147,197,253,0.9);
  --tzi-96a8c8-a250: rgba(150,168,200,0.25);
  --tzi-96a8c8-a300: rgba(150,168,200,0.3);
  --tzi-96a8c8-a350: rgba(150,168,200,0.35);
  --tzi-96a8c8-a400: rgba(150,168,200,0.4);
  --tzi-96a8c8-a450: rgba(150,168,200,0.45);
  --tzi-96a8c8-a500: rgba(150,168,200,0.5);
  --tzi-96a8c8-a600: rgba(150,168,200,0.6);
  --tzi-96aabe-a500: rgba(150,170,190,0.5);
  --tzi-96aabe-a600: rgba(150,170,190,0.6);
  --tzi-96aabe-a700: rgba(150,170,190,0.7);
  --tzi-96aabe-a800: rgba(150,170,190,0.8);
  --tzi-96aac8-a220: rgba(150,170,200,0.22);
  --tzi-96aac8-a280: rgba(150,170,200,0.28);
  --tzi-96aac8-a500: rgba(150,170,200,0.5);
  --tzi-96aac8-a600: rgba(150,170,200,0.6);
  --tzi-96aac8-a700: rgba(150,170,200,0.7);
  --tzi-96aad2-a300: rgba(150,170,210,0.3);
  --tzi-96aad2-a550: rgba(150,170,210,0.55);
  --tzi-96acc8-a700: rgba(150,172,200,0.7);
  --tzi-96afd2-a550: rgba(150,175,210,0.55);
  --tzi-96afd2-a600: rgba(150,175,210,0.6);
  --tzi-9baac8-a850: rgba(155,170,200,0.85);
  --tzi-9bb2d0-a820: rgba(155,178,208,0.82);
  --tzi-9bb4d2-a800: rgba(155,180,210,0.8);
  --tzi-a0afc8-a720: rgba(160,175,200,0.72);
  --tzi-a0afc8-a800: rgba(160,175,200,0.8);
  --tzi-a0afc8-a850: rgba(160,175,200,0.85);
  --tzi-a0afc8-a900: rgba(160,175,200,0.9);
  --tzi-a0afc8-a950: rgba(160,175,200,0.95);
  --tzi-a0b4d2-a250: rgba(160,180,210,0.25);
  --tzi-a0b4d2-a300: rgba(160,180,210,0.3);
  --tzi-a0b4d2-a350: rgba(160,180,210,0.35);
  --tzi-a0b4d2-a400: rgba(160,180,210,0.4);
  --tzi-a0b4d2-a420: rgba(160,180,210,0.42);
  --tzi-a0b4d2-a450: rgba(160,180,210,0.45);
  --tzi-a0b4d2-a500: rgba(160,180,210,0.5);
  --tzi-a0b4d2-a550: rgba(160,180,210,0.55);
  --tzi-a0b4d2-a600: rgba(160,180,210,0.6);
  --tzi-a0b4d2-a650: rgba(160,180,210,0.65);
  --tzi-a0b4d2-a700: rgba(160,180,210,0.7);
  --tzi-a0b4d2-a800: rgba(160,180,210,0.8);
  --tzi-a0b8e8: #a0b8e8;
  --tzi-a0b9d2-a060: rgba(160,185,210,0.06);
  --tzi-a0b9d2-a100: rgba(160,185,210,0.1);
  --tzi-a0b9d2-a120: rgba(160,185,210,0.12);
  --tzi-a0b9d2-a150: rgba(160,185,210,0.15);
  --tzi-a0b9d2-a180: rgba(160,185,210,0.18);
  --tzi-a0b9d2-a200: rgba(160,185,210,0.2);
  --tzi-a0b9d2-a250: rgba(160,185,210,0.25);
  --tzi-a0b9d2-a300: rgba(160,185,210,0.3);
  --tzi-a0b9d2-a350: rgba(160,185,210,0.35);
  --tzi-a0b9d2-a400: rgba(160,185,210,0.4);
  --tzi-a0b9d2-a500: rgba(160,185,210,0.5);
  --tzi-a0b9d2-a550: rgba(160,185,210,0.55);
  --tzi-a0b9d2-a600: rgba(160,185,210,0.6);
  --tzi-a0b9d2-a700: rgba(160,185,210,0.7);
  --tzi-a0b9d2-a750: rgba(160,185,210,0.75);
  --tzi-a0b9d2-a850: rgba(160,185,210,.85);
  --tzi-a0b9d7-a280: rgba(160,185,215,0.28);
  --tzi-a0b9d7-a350: rgba(160,185,215,0.35);
  --tzi-a0b9d7-a450: rgba(160,185,215,0.45);
  --tzi-a0b9d7-a500: rgba(160,185,215,0.5);
  --tzi-a0b9d7-a550: rgba(160,185,215,0.55);
  --tzi-a0b9d7-a650: rgba(160,185,215,0.65);
  --tzi-a0b9d7-a800: rgba(160,185,215,0.8);
  --tzi-a0b9d7-a850: rgba(160,185,215,0.85);
  --tzi-a0b9ff-a300: rgba(160,185,255,0.3);
  --tzi-a0b9ff-a500: rgba(160,185,255,0.5);
  --tzi-a0b9ff-a600: rgba(160,185,255,0.6);
  --tzi-a0b9ff-a800: rgba(160,185,255,0.8);
  --tzi-a0bad8-a400: rgba(160,186,216,0.4);
  --tzi-a0d2ff-a800: rgba(160,210,255,.8);
  --tzi-a2bcda-a820: rgba(162,188,218,0.82);
  --tzi-a5bcd4-a800: rgba(165,188,212,0.8);
  --tzi-a5bcd6-a600: rgba(165,188,214,0.6);
  --tzi-a5bcd6-a780: rgba(165,188,214,0.78);
  --tzi-a5bcd7-a400: rgba(165,188,215,0.4);
  --tzi-a5bcd7-a450: rgba(165,188,215,0.45);
  --tzi-a5bcd7-a600: rgba(165,188,215,0.6);
  --tzi-a5bcd7-a700: rgba(165,188,215,0.7);
  --tzi-a5bcd7-a850: rgba(165,188,215,0.85);
  --tzi-a5bed8-a820: rgba(165,190,216,0.82);
  --tzi-a5beda-a820: rgba(165,190,218,0.82);
  --tzi-a5bedc-a750: rgba(165,190,220,0.75);
  --tzi-a8bcd7-a880: rgba(168,188,215,0.88);
  --tzi-aabcd4-a800: rgba(170,188,212,0.8);
  --tzi-aabed7-a050: rgba(170,190,215,0.05);
  --tzi-aabed7-a060: rgba(170,190,215,0.06);
  --tzi-aabed7-a280: rgba(170,190,215,0.28);
  --tzi-aabed7-a350: rgba(170,190,215,0.35);
  --tzi-aabed7-a400: rgba(170,190,215,0.4);
  --tzi-aabed7-a450: rgba(170,190,215,0.45);
  --tzi-aabed7-a500: rgba(170,190,215,0.5);
  --tzi-aabed7-a550: rgba(170,190,215,0.55);
  --tzi-aabed7-a600: rgba(170,190,215,0.6);
  --tzi-aabed7-a700: rgba(170,190,215,0.7);
  --tzi-aabed7-a800: rgba(170,190,215,0.8);
  --tzi-aabed7-a820: rgba(170,190,215,0.82);
  --tzi-aabed7-a840: rgba(170,190,215,0.84);
  --tzi-aabed7-a850: rgba(170,190,215,0.85);
  --tzi-aabed7-a900: rgba(170,190,215,0.9);
  --tzi-aabedc-a500: rgba(170,190,220,0.5);
  --tzi-aabedc-a900: rgba(170,190,220,0.9);
  --tzi-aac0dc-a850: rgba(170,192,220,0.85);
  --tzi-aac0dc-a880: rgba(170,192,220,0.88);
  --tzi-acc3de-a880: rgba(172,195,222,0.88);
  --tzi-acc4de-a850: rgba(172,196,222,0.85);
  --tzi-aef8ff: #aef8ff;
  --tzi-afbed7-a900: rgba(175,190,215,0.9);
  --tzi-afc3da-a880: rgba(175,195,218,0.88);
  --tzi-afc3e1-a400: rgba(175,195,225,0.4);
  --tzi-afc3e1-a650: rgba(175,195,225,.65);
  --tzi-afc3e1-a720: rgba(175,195,225,.72);
  --tzi-afc3e1-a800: rgba(175,195,225,0.8);
  --tzi-afc3e1-a850: rgba(175,195,225,0.85);
  --tzi-b496ff-a700: rgba(180,150,255,0.7);
  --tzi-b4c3d7-a900: rgba(180,195,215,0.9);
  --tzi-b4c3dc-a900: rgba(180,195,220,0.9);
  --tzi-b4c6de-a840: rgba(180,198,222,0.84);
  --tzi-b4c8dc-a550: rgba(180,200,220,0.55);
  --tzi-b4c8e6-a060: rgba(180,200,230,0.06);
  --tzi-b4c8e6-a300: rgba(180,200,230,0.3);
  --tzi-b4c8e6-a350: rgba(180,200,230,0.35);
  --tzi-b4c8e6-a400: rgba(180,200,230,0.4);
  --tzi-b4c8e6-a450: rgba(180,200,230,0.45);
  --tzi-b4c8e6-a500: rgba(180,200,230,0.5);
  --tzi-b4c8e6-a600: rgba(180,200,230,0.6);
  --tzi-b4c8e6-a650: rgba(180,200,230,0.65);
  --tzi-b4c8e6-a700: rgba(180,200,230,0.7);
  --tzi-b4c8e6-a750: rgba(180,200,230,0.75);
  --tzi-b4c8e6-a800: rgba(180,200,230,0.8);
  --tzi-b4c8eb-a650: rgba(180,200,235,0.65);
  --tzi-b4c8eb-a750: rgba(180,200,235,0.75);
  --tzi-b4c8eb-a880: rgba(180,200,235,0.88);
  --tzi-b4c8eb-a900: rgba(180,200,235,0.9);
  --tzi-b4cde6-a850: rgba(180,205,230,0.85);
  --tzi-b4cdeb-a700: rgba(180,205,235,0.7);
  --tzi-b4cdeb-a880: rgba(180,205,235,0.88);
  --tzi-b4dcff-a900: rgba(180,220,255,0.9);
  --tzi-b8d4ff: #b8d4ff;
  --tzi-b8f5ff: #b8f5ff;
  --tzi-b8f5ff-a250: rgba(184,245,255,0.25);
  --tzi-b9d2eb-a650: rgba(185,210,235,0.65);
  --tzi-b9d2eb-a750: rgba(185,210,235,0.75);
  --tzi-b9d2eb-a800: rgba(185,210,235,0.8);
  --tzi-b9d2ec-a860: rgba(185,210,236,0.86);
  --tzi-bcd2ec-a880: rgba(188,210,236,0.88);
  --tzi-bed2eb-a620: rgba(190,210,235,0.62);
  --tzi-bed7f2-a900: rgba(190,215,242,0.9);
  --tzi-c2daf5-a900: rgba(194,218,245,0.9);
  --tzi-c3d2eb-a950: rgba(195,210,235,0.95);
  --tzi-c3d7f0-a950: rgba(195,215,240,0.95);
  --tzi-c4b5fd-a900: rgba(196,181,253,0.9);
  --tzi-c896ff-a140: rgba(200,150,255,0.14);
  --tzi-c8b4ff-a600: rgba(200,180,255,0.6);
  --tzi-c8b4ff-a900: rgba(200,180,255,0.9);
  --tzi-c8d2e6-a012: rgba(200,210,230,0.012);
  --tzi-c8d2e6-a030: rgba(200,210,230,0.03);
  --tzi-c8d2e6-a040: rgba(200,210,230,0.04);
  --tzi-c8d2e6-a050: rgba(200,210,230,0.05);
  --tzi-c8d2e6-a060: rgba(200,210,230,0.06);
  --tzi-c8d2e6-a070: rgba(200,210,230,0.07);
  --tzi-c8d2e6-a080: rgba(200,210,230,0.08);
  --tzi-c8d2e6-a100: rgba(200,210,230,0.1);
  --tzi-c8d2e6-a120: rgba(200,210,230,0.12);
  --tzi-c8d2e6-a140: rgba(200,210,230,.14);
  --tzi-c8d2e6-a150: rgba(200,210,230,0.15);
  --tzi-c8d2e6-a180: rgba(200,210,230,0.18);
  --tzi-c8d2e6-a200: rgba(200,210,230,0.2);
  --tzi-c8d2e6-a250: rgba(200,210,230,0.25);
  --tzi-c8d2e6-a300: rgba(200,210,230,0.3);
  --tzi-c8d2e6-a350: rgba(200,210,230,0.35);
  --tzi-c8d2e6-a400: rgba(200,210,230,0.4);
  --tzi-c8d2e6-a500: rgba(200,210,230,0.5);
  --tzi-c8d2e6-a750: rgba(200,210,230,0.75);
  --tzi-c8d2e6-a800: rgba(200,210,230,0.8);
  --tzi-c8d2e6-a850: rgba(200,210,230,0.85);
  --tzi-c8d2e6-a900: rgba(200,210,230,0.9);
  --tzi-c8d7eb-a020: rgba(200,215,235,0.02);
  --tzi-c8d7eb-a030: rgba(200,215,235,0.03);
  --tzi-c8d7eb-a050: rgba(200,215,235,0.05);
  --tzi-c8d7eb-a060: rgba(200,215,235,0.06);
  --tzi-c8d7eb-a070: rgba(200,215,235,0.07);
  --tzi-c8d7eb-a080: rgba(200,215,235,0.08);
  --tzi-c8d7eb-a100: rgba(200,215,235,0.1);
  --tzi-c8d7eb-a120: rgba(200,215,235,0.12);
  --tzi-c8d7eb-a150: rgba(200,215,235,0.15);
  --tzi-c8d7eb-a200: rgba(200,215,235,0.2);
  --tzi-c8d7eb-a250: rgba(200,215,235,0.25);
  --tzi-c8d7eb-a500: rgba(200,215,235,0.5);
  --tzi-c8d7eb-a750: rgba(200,215,235,0.75);
  --tzi-c8d7f0-a020: rgba(200,215,240,0.02);
  --tzi-c8d7f0-a040: rgba(200,215,240,0.04);
  --tzi-c8d7f0-a080: rgba(200,215,240,0.08);
  --tzi-c8d7f0-a100: rgba(200,215,240,0.1);
  --tzi-c8d7f0-a120: rgba(200,215,240,0.12);
  --tzi-c8d7f0-a140: rgba(200,215,240,0.14);
  --tzi-c8d7f0-a150: rgba(200,215,240,0.15);
  --tzi-c8d7f0-a180: rgba(200,215,240,0.18);
  --tzi-c8d7f0-a200: rgba(200,215,240,0.2);
  --tzi-c8d7f0-a250: rgba(200,215,240,0.25);
  --tzi-c8d7f0-a280: rgba(200,215,240,0.28);
  --tzi-c8d7f0-a300: rgba(200,215,240,0.3);
  --tzi-c8d7f0-a320: rgba(200,215,240,0.32);
  --tzi-c8d7f0-a350: rgba(200,215,240,0.35);
  --tzi-c8d7f0-a380: rgba(200,215,240,0.38);
  --tzi-c8d7f0-a400: rgba(200,215,240,0.4);
  --tzi-c8d7f0-a450: rgba(200,215,240,0.45);
  --tzi-c8d7f0-a500: rgba(200,215,240,0.5);
  --tzi-c8d7f0-a550: rgba(200,215,240,0.55);
  --tzi-c8d7f0-a600: rgba(200,215,240,0.6);
  --tzi-c8d7f0-a620: rgba(200,215,240,0.62);
  --tzi-c8d7f0-a700: rgba(200,215,240,0.7);
  --tzi-c8d7f0-a750: rgba(200,215,240,0.75);
  --tzi-c8d7f0-a800: rgba(200,215,240,0.8);
  --tzi-c8d7f0-a850: rgba(200,215,240,0.85);
  --tzi-c8d7f0-a900: rgba(200,215,240,0.9);
  --tzi-c8d7ff-a700: rgba(200,215,255,0.7);
  --tzi-c8dcff-a850: rgba(200,220,255,0.85);
  --tzi-c8dcff-a880: rgba(200,220,255,0.88);
  --tzi-c8dcff-a900: rgba(200,220,255,0.9);
  --tzi-c8dcff-a950: rgba(200,220,255,0.95);
  --tzi-cdd6e0: #cdd6e0;
  --tzi-d2e1f8-a950: rgba(210,225,248,0.95);
  --tzi-d2e1f8-a970: rgba(210,225,248,0.97);
  --tzi-d7e6ff-a980: rgba(215,230,255,0.98);
  --tzi-dcc8ff-a900: rgba(220,200,255,0.9);
  --tzi-dce6f0-a500: rgba(220,230,240,0.5);
  --tzi-dcebff: rgba(220,235,255,1);
  --tzi-dcebff-a900: rgba(220,235,255,0.9);
  --tzi-dcebff-a950: rgba(220,235,255,0.95);
  --tzi-dcecff: #dcecff;
  --tzi-dceeff-a900: rgba(220,238,255,0.9);
  --tzi-ddeeff: #ddeeff;
  --tzi-ddeeff-a650: rgba(221,238,255,0.65);
  --tzi-ddeeff-a750: rgba(221,238,255,0.75);
  --tzi-ddeeff-a800: rgba(221,238,255,0.8);
  --tzi-ddeeff-a820: rgba(221,238,255,0.82);
  --tzi-ddeeff-a880: rgba(221,238,255,0.88);
  --tzi-ddeeff-a920: rgba(221,238,255,0.92);
  --tzb-00c8ff-a800: rgba(0,200,255,0.8);
  --tzb-00dc6e-a900: rgba(0,220,110,0.9);
  --tzb-00e5ff: #00e5ff;
  --tzb-00e5ff-a720: rgba(0,229,255,.72);
  --tzb-00e5ff-a820: rgba(0,229,255,.82);
  --tzb-22c55e-a900: rgba(34,197,94,0.9);
  --tzb-38cfff-a600: rgba(56,207,255,0.6);
  --tzb-38cfff-a800: rgba(56,207,255,0.8);
  --tzb-44aaff-a920: rgba(68,170,255,0.92);
  --tzb-50dc64-a800: rgba(80,220,100,0.8);
  --tzb-64b464-a550: rgba(100,180,100,0.55);
  --tzb-64b4ff-a300: rgba(100,180,255,0.3);
  --tzb-64b4ff-a400: rgba(100,180,255,0.4);
  --tzb-64b4ff-a450: rgba(100,180,255,0.45);
  --tzb-64b4ff-a500: rgba(100,180,255,0.5);
  --tzb-64b4ff-a700: rgba(100,180,255,0.7);
  --tzb-66bbff: #66bbff;
  --tzb-78a0ff-a450: rgba(120,160,255,0.45);
  --tzb-78a0ff-a700: rgba(120,160,255,0.7);
  --tzb-78beff-a800: rgba(120,190,255,0.8);
  --tzb-78c8ff-a350: rgba(120,200,255,0.35);
  --tzb-78c8ff-a450: rgba(120,200,255,0.45);
  --tzb-78c8ff-a500: rgba(120,200,255,0.5);
  --tzb-78c8ff-a550: rgba(120,200,255,0.55);
  --tzb-78c8ff-a650: rgba(120,200,255,0.65);
  --tzb-78c8ff-a700: rgba(120,200,255,0.7);
  --tzb-78c8ff-a750: rgba(120,200,255,0.75);
  --tzb-78c8ff-a900: rgba(120,200,255,0.9);
  --tzb-78d250-a650: rgba(120,210,80,0.65);
  --tzb-78e68c-a880: rgba(120,230,140,0.88);
  --tzb-78ffa0-a600: rgba(120,255,160,0.6);
  --tzb-7ca3ff: #7ca3ff;
  --tzb-7ca3ff-a400: rgba(124,163,255,0.4);
  --tzb-7ca3ff-a600: rgba(124,163,255,0.6);
  --tzb-7ca3ff-a900: rgba(124,163,255,0.9);
  --tzb-7dd2ff-a680: rgba(125,210,255,0.68);
  --tzb-7dd2ff-a700: rgba(125,210,255,0.7);
  --tzb-7dd2ff-a800: rgba(125,210,255,0.8);
  --tzb-7dd2ff-a900: rgba(125,210,255,0.9);
  --tzb-7ecfff: #7ecfff;
  --tzb-7ecfff-a450: rgba(126,207,255,0.45);
  --tzb-7ecfff-a500: rgba(126,207,255,0.5);
  --tzb-7ecfff-a550: rgba(126,207,255,0.55);
  --tzb-7ecfff-a600: rgba(126,207,255,0.6);
  --tzb-7ecfff-a700: rgba(126,207,255,0.7);
  --tzb-7ecfff-a800: rgba(126,207,255,0.8);
  --tzb-7ecfff-a900: rgba(126,207,255,0.9);
  --tzb-82c8ff-a900: rgba(130,200,255,0.9);
  --tzb-8899ff: #8899ff;
  --tzb-88ccff: #88ccff;
  --tzb-8fe000: #8fe000;
  --tzb-969696-a350: rgba(150,150,150,0.35);
  --tzb-96ffaa-a950: rgba(150,255,170,0.95);
  --tzb-b5f542: #b5f542;
  --tzb-b5f542-a600: rgba(181,245,66,0.6);
  --tzb-c080ff: #c080ff;
  --tzb-c0c0c0: #c0c0c0;
  --tzb-c8c8c8-a500: rgba(200,200,200,0.5);
  --tzb-c8eba0-a950: rgba(200,235,160,0.95);
  --tzb-cc88ff: #cc88ff;
  --tzb-d4f060: #d4f060;
  --tzb-dcdcdc-a800: rgba(220,220,220,0.8);
  --tzb-dcf0c8-a950: rgba(220,240,200,0.95);
  --tzb-dcff64-a900: rgba(220,255,100,0.9);
  --tzb-eaff8a: #eaff8a;
  --tzb-ebbec8-a900: rgba(235,190,200,0.9);
  --tzb-ef9f27: #ef9f27;
  --tzb-ef9f27-a750: rgba(239,159,39,0.75);
  --tzb-ef9f27-a850: rgba(239,159,39,0.85);
  --tzb-ef9f27-a900: rgba(239,159,39,0.9);
  --tzb-efb327: #efb327;
  --tzb-f0c020: #f0c020;
  --tzb-f5c842: #f5c842;
  --tzb-f5c842-a920: rgba(245,200,66,0.92);
  --tzb-f88282-a850: rgba(248,130,130,0.85);
  --tzb-facc15-a780: rgba(250,204,21,0.78);
  --tzb-fdd36d-a900: rgba(253,211,109,0.9);
  --tzb-ff8282: rgba(255,130,130,1);
  --tzb-ff8c00: #ff8c00;
  --tzb-ff8c00-a350: rgba(255,140,0,0.35);
  --tzb-ff8c00-a500: rgba(255,140,0,0.5);
  --tzb-ff8c00-a550: rgba(255,140,0,0.55);
  --tzb-ff8c00-a600: rgba(255,140,0,0.6);
  --tzb-ff8c00-a700: rgba(255,140,0,0.7);
  --tzb-ff8c00-a800: rgba(255,140,0,0.8);
  --tzb-ff9600-a900: rgba(255,150,0,0.9);
  --tzb-ff9614: rgba(255,150,20,1);
  --tzb-ff9b9b-a950: rgba(255,155,155,0.95);
  --tzb-ffa032-a900: rgba(255,160,50,0.9);
  --tzb-ffa032-a950: rgba(255,160,50,0.95);
  --tzb-ffa03c-a800: rgba(255,160,60,0.8);
  --tzb-ffa03c-a900: rgba(255,160,60,0.9);
  --tzb-ffa500: #ffa500;
  --tzb-ffa500-a800: rgba(255,165,0,0.8);
  --tzb-ffa500-a950: rgba(255,165,0,0.95);
  --tzb-ffaa00: #ffaa00;
  --tzb-ffaa30: #ffaa30;
  --tzb-ffb400-a550: rgba(255,180,0,0.55);
  --tzb-ffb400-a600: rgba(255,180,0,0.6);
  --tzb-ffb400-a700: rgba(255,180,0,0.7);
  --tzb-ffb400-a750: rgba(255,180,0,0.75);
  --tzb-ffb400-a800: rgba(255,180,0,0.8);
  --tzb-ffb400-a850: rgba(255,180,0,0.85);
  --tzb-ffb400-a900: rgba(255,180,0,0.9);
  --tzb-ffb464-a900: rgba(255,180,100,0.9);
  --tzb-ffb800: #ffb800;
  --tzb-ffb800-a400: rgba(255,184,0,0.4);
  --tzb-ffb800-a450: rgba(255,184,0,0.45);
  --tzb-ffb800-a500: rgba(255,184,0,0.5);
  --tzb-ffb800-a600: rgba(255,184,0,0.6);
  --tzb-ffb800-a700: rgba(255,184,0,0.7);
  --tzb-ffb800-a800: rgba(255,184,0,0.8);
  --tzb-ffb800-a850: rgba(255,184,0,0.85);
  --tzb-ffb800-a900: rgba(255,184,0,0.9);
  --tzb-ffb800-a950: rgba(255,184,0,.95);
  --tzb-ffb93c-a900: rgba(255,185,60,0.9);
  --tzb-ffbe3c-a900: rgba(255,190,60,0.9);
  --tzb-ffc800: #ffc800;
  --tzb-ffc800-a800: rgba(255,200,0,0.8);
  --tzb-ffc800-a900: rgba(255,200,0,0.9);
  --tzb-ffc832-a800: rgba(255,200,50,0.8);
  --tzb-ffc850-a600: rgba(255,200,80,0.6);
  --tzb-ffc850-a800: rgba(255,200,80,0.8);
  --tzb-ffd250-a900: rgba(255,210,80,0.9);
  --tzb-ffd2aa-a900: rgba(255,210,170,0.9);
  --tzb-ffd600: #ffd600;
  --tzb-ffd700: #ffd700;
  --tzb-ffd700-a550: rgba(255,215,0,0.55);
  --tzb-ffdc32-a920: rgba(255,220,50,0.92);
  --tzb-ffdd44: #ffdd44;
  --tzb-ffdd66: #ffdd66;
  --tzb-ffe040: #ffe040;
  --tzb-fff8c0: #fff8c0;
}
:root[data-theme="light"] {
  --tzs-010203: #e8ecef;
  --tzs-020303: #e8efef;
  --tzs-030600: #ecf0e9;
  --tzs-040406-a980: rgba(234,234,240,0.98);
  --tzs-040608-a900: rgba(234,238,241,0.9);
  --tzs-04060a-a880: rgba(235,237,241,0.88);
  --tzs-04060a-a950: rgba(235,237,241,0.95);
  --tzs-04060a-a970: rgba(235,237,241,0.97);
  --tzs-04060a-a980: rgba(235,237,241,0.98);
  --tzs-04060c-a980: rgba(236,237,242,0.98);
  --tzs-050505: #ededed;
  --tzs-050505-a850: rgba(237,237,237,0.85);
  --tzs-050505-a900: rgba(237,237,237,0.9);
  --tzs-050505-a920: rgba(237,237,237,0.92);
  --tzs-050505-a980: rgba(237,237,237,0.98);
  --tzs-050507-a990: rgba(235,235,241,0.99);
  --tzs-050508-a950: rgba(235,235,241,0.95);
  --tzs-05080c-a900: rgba(236,238,242,0.9);
  --tzs-050900: #edf0ea;
  --tzs-06080a-a940: rgba(236,239,242,0.94);
  --tzs-06080c-a980: rgba(236,238,242,0.98);
  --tzs-06080e-a970: rgba(237,238,242,0.97);
  --tzs-060a08-a950: rgba(236,242,239,0.95);
  --tzs-060a0c-a960: rgba(236,240,242,0.96);
  --tzs-060a0e: #edf0f2;
  --tzs-07090f-a950: rgba(237,239,243,0.95);
  --tzs-070a0f-a880: rgba(237,239,243,0.88);
  --tzs-080808: #efefef;
  --tzs-080808-a940: rgba(239,239,239,0.94);
  --tzs-080808-a960: rgba(239,239,239,0.96);
  --tzs-08080a-a000: rgba(237,237,241,0);
  --tzs-08080a-a750: rgba(237,237,241,0.75);
  --tzs-08080a-a880: rgba(237,237,241,0.88);
  --tzs-08080a-a900: rgba(237,237,241,0.9);
  --tzs-08080a-a960: rgba(237,237,241,0.96);
  --tzs-08080a-a970: rgba(237,237,241,0.97);
  --tzs-08080a-a980: rgba(237,237,241,0.98);
  --tzs-080a12-a980: rgba(239,240,244,0.98);
  --tzs-080b12-a650: rgba(239,240,244,0.65);
  --tzs-080b12-a950: rgba(239,240,244,0.95);
  --tzs-080b12-a970: rgba(239,240,244,0.97);
  --tzs-080c06-a970: rgba(238,242,236,0.97);
  --tzs-080c0e-a950: rgba(237,241,243,0.95);
  --tzs-080c14-a820: rgba(239,241,244,0.82);
  --tzs-0a0a0a: #f0f0f0;
  --tzs-0a0a0a-a950: rgba(240,240,240,0.95);
  --tzs-0a0a0c-a980: rgba(239,239,241,0.98);
  --tzs-0a0a0e-a500: rgba(238,238,243,0.5);
  --tzs-0a0a0e-a900: rgba(238,238,243,0.9);
  --tzs-0a0c0e-a700: rgba(238,241,243,0.7);
  --tzs-0a0d0b: #eef2f0;
  --tzs-0a0e08-a980: rgba(239,243,237,0.98);
  --tzs-0a0e16-a950: rgba(240,242,245,0.95);
  --tzs-0c0c0c-a920: rgba(241,241,241,0.92);
  --tzs-0c0e06-a990: rgba(241,242,237,0.99);
  --tzs-0c0f16-a900: rgba(241,242,245,0.9);
  --tzs-0d0d0d: #f1f1f1;
  --tzs-0d1018-a900: rgba(242,243,246,0.9);
  --tzs-0d1018-a920: rgba(242,243,246,0.92);
  --tzs-0d1117: #f2f3f6;
  --tzs-0e0e0e: #f2f2f2;
  --tzs-0f0f0f: #f2f2f2;
  --tzs-111111: #f3f3f3;
  --tzs-141414: #f5f5f5;
  --tzs-1a1a1a: #f8f8f8;
  --tzs-1a1e1a: #f8f9f8;
  --tzi-4a6070: #6d8a9f;
  --tzi-607080: #657687;
  --tzi-64788c-a350: rgba(93,111,130,0.35);
  --tzi-64788c-a400: rgba(93,111,130,0.4);
  --tzi-64788c-a500: rgba(93,111,130,0.5);
  --tzi-64788c-a600: rgba(93,111,130,0.6);
  --tzi-647896-a500: rgba(86,103,129,0.5);
  --tzi-6482a0-a600: rgba(80,103,126,0.6);
  --tzi-648cc8-a200: rgba(67,83,105,0.2);
  --tzi-648cc8-a700: rgba(67,83,105,0.7);
  --tzi-6b8cba: #46566d;
  --tzi-7887a5-a900: rgba(74,86,111,0.9);
  --tzi-8291af-a350: rgba(66,78,103,0.35);
  --tzi-8291af-a500: rgba(66,78,103,0.5);
  --tzi-8291af-a550: rgba(66,78,103,0.55);
  --tzi-8291af-a750: rgba(66,78,103,0.75);
  --tzi-8291af-a850: rgba(66,78,103,0.85);
  --tzi-8296aa-a400: rgba(70,86,103,0.4);
  --tzi-8296b4-a400: rgba(64,79,100,0.4);
  --tzi-82a0be-a650: rgba(61,78,95,0.65);
  --tzi-82a0be-a700: rgba(61,78,95,0.7);
  --tzi-8899aa: #465462;
  --tzi-88a0b9-a300: rgba(61,77,95,0.3);
  --tzi-8aa0b8: #3c4d5e;
  --tzi-8c9bb4-a720: rgba(62,74,95,0.72);
  --tzi-8ca0b4-a350: rgba(62,78,95,0.35);
  --tzi-8ca0b4-a400: rgba(62,78,95,0.4);
  --tzi-8ca0b4-a500: rgba(62,78,95,0.5);
  --tzi-8ca0b4-a600: rgba(62,78,95,0.6);
  --tzi-8ca0be-a450: rgba(58,71,90,0.45);
  --tzi-8ca0be-a500: rgba(58,71,90,0.5);
  --tzi-8ca0be-a600: rgba(58,71,90,0.6);
  --tzi-8ca2c3-a650: rgba(56,69,88,0.65);
  --tzi-8ca5c8-a650: rgba(54,67,85,0.65);
  --tzi-93c5fd-a900: rgba(35,44,55,0.9);
  --tzi-96a8c8-a250: rgba(51,62,80,0.25);
  --tzi-96a8c8-a300: rgba(51,62,80,0.3);
  --tzi-96a8c8-a350: rgba(51,62,80,0.35);
  --tzi-96a8c8-a400: rgba(51,62,80,0.4);
  --tzi-96a8c8-a450: rgba(51,62,80,0.45);
  --tzi-96a8c8-a500: rgba(51,62,80,0.5);
  --tzi-96a8c8-a600: rgba(51,62,80,0.6);
  --tzi-96aabe-a500: rgba(54,70,85,0.5);
  --tzi-96aabe-a600: rgba(54,70,85,0.6);
  --tzi-96aabe-a700: rgba(54,70,85,0.7);
  --tzi-96aabe-a800: rgba(54,70,85,0.8);
  --tzi-96aac8-a220: rgba(51,63,80,0.22);
  --tzi-96aac8-a280: rgba(51,63,80,0.28);
  --tzi-96aac8-a500: rgba(51,63,80,0.5);
  --tzi-96aac8-a600: rgba(51,63,80,0.6);
  --tzi-96aac8-a700: rgba(51,63,80,0.7);
  --tzi-96aad2-a300: rgba(48,57,75,0.3);
  --tzi-96aad2-a550: rgba(48,57,75,0.55);
  --tzi-96acc8-a700: rgba(51,64,80,0.7);
  --tzi-96afd2-a550: rgba(48,59,75,0.55);
  --tzi-96afd2-a600: rgba(48,59,75,0.6);
  --tzi-9baac8-a850: rgba(50,59,78,0.85);
  --tzi-9bb2d0-a820: rgba(47,59,74,0.82);
  --tzi-9bb4d2-a800: rgba(46,58,73,0.8);
  --tzi-a0afc8-a720: rgba(48,58,75,0.72);
  --tzi-a0afc8-a800: rgba(48,58,75,0.8);
  --tzi-a0afc8-a850: rgba(48,58,75,0.85);
  --tzi-a0afc8-a900: rgba(48,58,75,0.9);
  --tzi-a0afc8-a950: rgba(48,58,75,0.95);
  --tzi-a0b4d2-a250: rgba(45,55,70,0.25);
  --tzi-a0b4d2-a300: rgba(45,55,70,0.3);
  --tzi-a0b4d2-a350: rgba(45,55,70,0.35);
  --tzi-a0b4d2-a400: rgba(45,55,70,0.4);
  --tzi-a0b4d2-a420: rgba(45,55,70,0.42);
  --tzi-a0b4d2-a450: rgba(45,55,70,0.45);
  --tzi-a0b4d2-a500: rgba(45,55,70,0.5);
  --tzi-a0b4d2-a550: rgba(45,55,70,0.55);
  --tzi-a0b4d2-a600: rgba(45,55,70,0.6);
  --tzi-a0b4d2-a650: rgba(45,55,70,0.65);
  --tzi-a0b4d2-a700: rgba(45,55,70,0.7);
  --tzi-a0b4d2-a800: rgba(45,55,70,0.8);
  --tzi-a0b8e8: #262d3b;
  --tzi-a0b9d2-a060: rgba(45,57,70,0.06);
  --tzi-a0b9d2-a100: rgba(45,57,70,0.1);
  --tzi-a0b9d2-a120: rgba(45,57,70,0.12);
  --tzi-a0b9d2-a150: rgba(45,57,70,0.15);
  --tzi-a0b9d2-a180: rgba(45,57,70,0.18);
  --tzi-a0b9d2-a200: rgba(45,57,70,0.2);
  --tzi-a0b9d2-a250: rgba(45,57,70,0.25);
  --tzi-a0b9d2-a300: rgba(45,57,70,0.3);
  --tzi-a0b9d2-a350: rgba(45,57,70,0.35);
  --tzi-a0b9d2-a400: rgba(45,57,70,0.4);
  --tzi-a0b9d2-a500: rgba(45,57,70,0.5);
  --tzi-a0b9d2-a550: rgba(45,57,70,0.55);
  --tzi-a0b9d2-a600: rgba(45,57,70,0.6);
  --tzi-a0b9d2-a700: rgba(45,57,70,0.7);
  --tzi-a0b9d2-a750: rgba(45,57,70,0.75);
  --tzi-a0b9d2-a850: rgba(45,57,70,0.85);
  --tzi-a0b9d7-a280: rgba(43,54,67,0.28);
  --tzi-a0b9d7-a350: rgba(43,54,67,0.35);
  --tzi-a0b9d7-a450: rgba(43,54,67,0.45);
  --tzi-a0b9d7-a500: rgba(43,54,67,0.5);
  --tzi-a0b9d7-a550: rgba(43,54,67,0.55);
  --tzi-a0b9d7-a650: rgba(43,54,67,0.65);
  --tzi-a0b9d7-a800: rgba(43,54,67,0.8);
  --tzi-a0b9d7-a850: rgba(43,54,67,0.85);
  --tzi-a0b9ff-a300: rgba(30,35,47,0.3);
  --tzi-a0b9ff-a500: rgba(30,35,47,0.5);
  --tzi-a0b9ff-a600: rgba(30,35,47,0.6);
  --tzi-a0b9ff-a800: rgba(30,35,47,0.8);
  --tzi-a0bad8-a400: rgba(43,54,67,0.4);
  --tzi-a0d2ff-a800: rgba(30,39,47,0.8);
  --tzi-a2bcda-a820: rgba(42,52,65,0.82);
  --tzi-a5bcd4-a800: rgba(42,54,66,0.8);
  --tzi-a5bcd6-a600: rgba(42,53,65,0.6);
  --tzi-a5bcd6-a780: rgba(42,53,65,0.78);
  --tzi-a5bcd7-a400: rgba(42,52,65,0.4);
  --tzi-a5bcd7-a450: rgba(42,52,65,0.45);
  --tzi-a5bcd7-a600: rgba(42,52,65,0.6);
  --tzi-a5bcd7-a700: rgba(42,52,65,0.7);
  --tzi-a5bcd7-a850: rgba(42,52,65,0.85);
  --tzi-a5bed8-a820: rgba(41,53,64,0.82);
  --tzi-a5beda-a820: rgba(41,51,63,0.82);
  --tzi-a5bedc-a750: rgba(40,50,62,0.75);
  --tzi-a8bcd7-a880: rgba(41,50,63,0.88);
  --tzi-aabcd4-a800: rgba(41,51,64,0.8);
  --tzi-aabed7-a050: rgba(40,50,62,0.05);
  --tzi-aabed7-a060: rgba(40,50,62,0.06);
  --tzi-aabed7-a280: rgba(40,50,62,0.28);
  --tzi-aabed7-a350: rgba(40,50,62,0.35);
  --tzi-aabed7-a400: rgba(40,50,62,0.4);
  --tzi-aabed7-a450: rgba(40,50,62,0.45);
  --tzi-aabed7-a500: rgba(40,50,62,0.5);
  --tzi-aabed7-a550: rgba(40,50,62,0.55);
  --tzi-aabed7-a600: rgba(40,50,62,0.6);
  --tzi-aabed7-a700: rgba(40,50,62,0.7);
  --tzi-aabed7-a800: rgba(40,50,62,0.8);
  --tzi-aabed7-a820: rgba(40,50,62,0.82);
  --tzi-aabed7-a840: rgba(40,50,62,0.84);
  --tzi-aabed7-a850: rgba(40,50,62,0.85);
  --tzi-aabed7-a900: rgba(40,50,62,0.9);
  --tzi-aabedc-a500: rgba(38,47,60,0.5);
  --tzi-aabedc-a900: rgba(38,47,60,0.9);
  --tzi-aac0dc-a850: rgba(38,48,60,0.85);
  --tzi-aac0dc-a880: rgba(38,48,60,0.88);
  --tzi-acc3de-a880: rgba(37,47,58,0.88);
  --tzi-acc4de-a850: rgba(37,47,58,0.85);
  --tzi-aef8ff: #1a2728;
  --tzi-afbed7-a900: rgba(38,46,60,0.9);
  --tzi-afc3da-a880: rgba(37,47,58,0.88);
  --tzi-afc3e1-a400: rgba(35,43,55,0.4);
  --tzi-afc3e1-a650: rgba(35,43,55,0.65);
  --tzi-afc3e1-a720: rgba(35,43,55,0.72);
  --tzi-afc3e1-a800: rgba(35,43,55,0.8);
  --tzi-afc3e1-a850: rgba(35,43,55,0.85);
  --tzi-b496ff-a700: rgba(39,33,52,0.7);
  --tzi-b4c3d7-a900: rgba(37,46,57,0.9);
  --tzi-b4c3dc-a900: rgba(35,42,55,0.9);
  --tzi-b4c6de-a840: rgba(34,43,54,0.84);
  --tzi-b4c8dc-a550: rgba(35,45,55,0.55);
  --tzi-b4c8e6-a060: rgba(32,39,50,0.06);
  --tzi-b4c8e6-a300: rgba(32,39,50,0.3);
  --tzi-b4c8e6-a350: rgba(32,39,50,0.35);
  --tzi-b4c8e6-a400: rgba(32,39,50,0.4);
  --tzi-b4c8e6-a450: rgba(32,39,50,0.45);
  --tzi-b4c8e6-a500: rgba(32,39,50,0.5);
  --tzi-b4c8e6-a600: rgba(32,39,50,0.6);
  --tzi-b4c8e6-a650: rgba(32,39,50,0.65);
  --tzi-b4c8e6-a700: rgba(32,39,50,0.7);
  --tzi-b4c8e6-a750: rgba(32,39,50,0.75);
  --tzi-b4c8e6-a800: rgba(32,39,50,0.8);
  --tzi-b4c8eb-a650: rgba(30,36,47,0.65);
  --tzi-b4c8eb-a750: rgba(30,36,47,0.75);
  --tzi-b4c8eb-a880: rgba(30,36,47,0.88);
  --tzi-b4c8eb-a900: rgba(30,36,47,0.9);
  --tzi-b4cde6-a850: rgba(32,41,50,0.85);
  --tzi-b4cdeb-a700: rgba(30,38,47,0.7);
  --tzi-b4cdeb-a880: rgba(30,38,47,0.88);
  --tzi-b4dcff-a900: rgba(24,31,37,0.9);
  --tzi-b8d4ff: #161b23;
  --tzi-b8f5ff: #162123;
  --tzi-b8f5ff-a250: rgba(22,33,35,0.25);
  --tzi-b9d2eb-a650: rgba(29,37,45,0.65);
  --tzi-b9d2eb-a750: rgba(29,37,45,0.75);
  --tzi-b9d2eb-a800: rgba(29,37,45,0.8);
  --tzi-b9d2ec-a860: rgba(28,36,44,0.86);
  --tzi-bcd2ec-a880: rgba(27,34,43,0.88);
  --tzi-bed2eb-a620: rgba(27,34,42,0.62);
  --tzi-bed7f2-a900: rgba(25,31,39,0.9);
  --tzi-c2daf5-a900: rgba(22,28,35,0.9);
  --tzi-c3d2eb-a950: rgba(25,31,40,0.95);
  --tzi-c3d7f0-a950: rgba(24,30,37,0.95);
  --tzi-c4b5fd-a900: rgba(27,24,38,0.9);
  --tzi-c896ff-a140: rgba(42,33,52,0.14);
  --tzi-c8b4ff-a600: rgba(27,24,37,0.6);
  --tzi-c8b4ff-a900: rgba(27,24,37,0.9);
  --tzi-c8d2e6-a012: rgba(25,30,40,0.012);
  --tzi-c8d2e6-a030: rgba(25,30,40,0.03);
  --tzi-c8d2e6-a040: rgba(25,30,40,0.04);
  --tzi-c8d2e6-a050: rgba(25,30,40,0.05);
  --tzi-c8d2e6-a060: rgba(25,30,40,0.06);
  --tzi-c8d2e6-a070: rgba(25,30,40,0.07);
  --tzi-c8d2e6-a080: rgba(25,30,40,0.08);
  --tzi-c8d2e6-a100: rgba(25,30,40,0.1);
  --tzi-c8d2e6-a120: rgba(25,30,40,0.12);
  --tzi-c8d2e6-a140: rgba(25,30,40,0.14);
  --tzi-c8d2e6-a150: rgba(25,30,40,0.15);
  --tzi-c8d2e6-a180: rgba(25,30,40,0.18);
  --tzi-c8d2e6-a200: rgba(25,30,40,0.2);
  --tzi-c8d2e6-a250: rgba(25,30,40,0.25);
  --tzi-c8d2e6-a300: rgba(25,30,40,0.3);
  --tzi-c8d2e6-a350: rgba(25,30,40,0.35);
  --tzi-c8d2e6-a400: rgba(25,30,40,0.4);
  --tzi-c8d2e6-a500: rgba(25,30,40,0.5);
  --tzi-c8d2e6-a750: rgba(25,30,40,0.75);
  --tzi-c8d2e6-a800: rgba(25,30,40,0.8);
  --tzi-c8d2e6-a850: rgba(25,30,40,0.85);
  --tzi-c8d2e6-a900: rgba(25,30,40,0.9);
  --tzi-c8d7eb-a020: rgba(24,29,37,0.02);
  --tzi-c8d7eb-a030: rgba(24,29,37,0.03);
  --tzi-c8d7eb-a050: rgba(24,29,37,0.05);
  --tzi-c8d7eb-a060: rgba(24,29,37,0.06);
  --tzi-c8d7eb-a070: rgba(24,29,37,0.07);
  --tzi-c8d7eb-a080: rgba(24,29,37,0.08);
  --tzi-c8d7eb-a100: rgba(24,29,37,0.1);
  --tzi-c8d7eb-a120: rgba(24,29,37,0.12);
  --tzi-c8d7eb-a150: rgba(24,29,37,0.15);
  --tzi-c8d7eb-a200: rgba(24,29,37,0.2);
  --tzi-c8d7eb-a250: rgba(24,29,37,0.25);
  --tzi-c8d7eb-a500: rgba(24,29,37,0.5);
  --tzi-c8d7eb-a750: rgba(24,29,37,0.75);
  --tzi-c8d7f0-a020: rgba(22,27,35,0.02);
  --tzi-c8d7f0-a040: rgba(22,27,35,0.04);
  --tzi-c8d7f0-a080: rgba(22,27,35,0.08);
  --tzi-c8d7f0-a100: rgba(22,27,35,0.1);
  --tzi-c8d7f0-a120: rgba(22,27,35,0.12);
  --tzi-c8d7f0-a140: rgba(22,27,35,0.14);
  --tzi-c8d7f0-a150: rgba(22,27,35,0.15);
  --tzi-c8d7f0-a180: rgba(22,27,35,0.18);
  --tzi-c8d7f0-a200: rgba(22,27,35,0.2);
  --tzi-c8d7f0-a250: rgba(22,27,35,0.25);
  --tzi-c8d7f0-a280: rgba(22,27,35,0.28);
  --tzi-c8d7f0-a300: rgba(22,27,35,0.3);
  --tzi-c8d7f0-a320: rgba(22,27,35,0.32);
  --tzi-c8d7f0-a350: rgba(22,27,35,0.35);
  --tzi-c8d7f0-a380: rgba(22,27,35,0.38);
  --tzi-c8d7f0-a400: rgba(22,27,35,0.4);
  --tzi-c8d7f0-a450: rgba(22,27,35,0.45);
  --tzi-c8d7f0-a500: rgba(22,27,35,0.5);
  --tzi-c8d7f0-a550: rgba(22,27,35,0.55);
  --tzi-c8d7f0-a600: rgba(22,27,35,0.6);
  --tzi-c8d7f0-a620: rgba(22,27,35,0.62);
  --tzi-c8d7f0-a700: rgba(22,27,35,0.7);
  --tzi-c8d7f0-a750: rgba(22,27,35,0.75);
  --tzi-c8d7f0-a800: rgba(22,27,35,0.8);
  --tzi-c8d7f0-a850: rgba(22,27,35,0.85);
  --tzi-c8d7f0-a900: rgba(22,27,35,0.9);
  --tzi-c8d7ff-a700: rgba(17,20,27,0.7);
  --tzi-c8dcff-a850: rgba(17,21,27,0.85);
  --tzi-c8dcff-a880: rgba(17,21,27,0.88);
  --tzi-c8dcff-a900: rgba(17,21,27,0.9);
  --tzi-c8dcff-a950: rgba(17,21,27,0.95);
  --tzi-cdd6e0: #1a2028;
  --tzi-d2e1f8-a950: rgba(16,20,25,0.95);
  --tzi-d2e1f8-a970: rgba(16,20,25,0.97);
  --tzi-d7e6ff-a980: rgba(16,19,25,0.98);
  --tzi-dcc8ff-a900: rgba(21,17,27,0.9);
  --tzi-dce6f0-a500: rgba(16,20,25,0.5);
  --tzi-dcebff: #101419;
  --tzi-dcebff-a900: rgba(16,20,25,0.9);
  --tzi-dcebff-a950: rgba(16,20,25,0.95);
  --tzi-dcecff: #101419;
  --tzi-dceeff-a900: rgba(16,21,25,0.9);
  --tzi-ddeeff: #101419;
  --tzi-ddeeff-a650: rgba(16,20,25,0.65);
  --tzi-ddeeff-a750: rgba(16,20,25,0.75);
  --tzi-ddeeff-a800: rgba(16,20,25,0.8);
  --tzi-ddeeff-a820: rgba(16,20,25,0.82);
  --tzi-ddeeff-a880: rgba(16,20,25,0.88);
  --tzi-ddeeff-a920: rgba(16,20,25,0.92);
  --tzb-00c8ff-a800: rgba(0,112,143,0.8);
  --tzb-00dc6e-a900: rgba(0,143,71,0.9);
  --tzb-00e5ff: #00808f;
  --tzb-00e5ff-a720: rgba(0,128,143,0.72);
  --tzb-00e5ff-a820: rgba(0,128,143,0.82);
  --tzb-22c55e-a900: rgba(21,122,58,0.9);
  --tzb-38cfff-a600: rgba(0,108,143,0.6);
  --tzb-38cfff-a800: rgba(0,108,143,0.8);
  --tzb-44aaff-a920: rgba(0,78,143,0.92);
  --tzb-50dc64-a800: rgba(24,119,37,0.8);
  --tzb-64b464-a550: rgba(32,111,32,0.55);
  --tzb-64b4ff-a300: rgba(0,74,143,0.3);
  --tzb-64b4ff-a400: rgba(0,74,143,0.4);
  --tzb-64b4ff-a450: rgba(0,74,143,0.45);
  --tzb-64b4ff-a500: rgba(0,74,143,0.5);
  --tzb-64b4ff-a700: rgba(0,74,143,0.7);
  --tzb-66bbff: #004f8f;
  --tzb-78a0ff-a450: rgba(0,42,143,0.45);
  --tzb-78a0ff-a700: rgba(0,42,143,0.7);
  --tzb-78beff-a800: rgba(0,74,143,0.8);
  --tzb-78c8ff-a350: rgba(0,85,143,0.35);
  --tzb-78c8ff-a450: rgba(0,85,143,0.45);
  --tzb-78c8ff-a500: rgba(0,85,143,0.5);
  --tzb-78c8ff-a550: rgba(0,85,143,0.55);
  --tzb-78c8ff-a650: rgba(0,85,143,0.65);
  --tzb-78c8ff-a700: rgba(0,85,143,0.7);
  --tzb-78c8ff-a750: rgba(0,85,143,0.75);
  --tzb-78c8ff-a900: rgba(0,85,143,0.9);
  --tzb-78d250-a650: rgba(55,114,29,0.65);
  --tzb-78e68c-a880: rgba(22,120,40,0.88);
  --tzb-78ffa0-a600: rgba(0,143,42,0.6);
  --tzb-7ca3ff: #002b8f;
  --tzb-7ca3ff-a400: rgba(0,43,143,0.4);
  --tzb-7ca3ff-a600: rgba(0,43,143,0.6);
  --tzb-7ca3ff-a900: rgba(0,43,143,0.9);
  --tzb-7dd2ff-a680: rgba(0,93,143,0.68);
  --tzb-7dd2ff-a700: rgba(0,93,143,0.7);
  --tzb-7dd2ff-a800: rgba(0,93,143,0.8);
  --tzb-7dd2ff-a900: rgba(0,93,143,0.9);
  --tzb-7ecfff: #005a8f;
  --tzb-7ecfff-a450: rgba(0,90,143,0.45);
  --tzb-7ecfff-a500: rgba(0,90,143,0.5);
  --tzb-7ecfff-a550: rgba(0,90,143,0.55);
  --tzb-7ecfff-a600: rgba(0,90,143,0.6);
  --tzb-7ecfff-a700: rgba(0,90,143,0.7);
  --tzb-7ecfff-a800: rgba(0,90,143,0.8);
  --tzb-7ecfff-a900: rgba(0,90,143,0.9);
  --tzb-82c8ff-a900: rgba(0,80,143,0.9);
  --tzb-8899ff: #00148f;
  --tzb-88ccff: #00528f;
  --tzb-8fe000: #5b8f00;
  --tzb-969696-a350: rgba(111,32,32,0.35);
  --tzb-96ffaa-a950: rgba(0,143,27,0.95);
  --tzb-b5f542: #5a8807;
  --tzb-b5f542-a600: rgba(90,136,7,0.6);
  --tzb-c080ff: #48008f;
  --tzb-c0c0c0: #6f2020;
  --tzb-c8c8c8-a500: rgba(111,32,32,0.5);
  --tzb-c8eba0-a950: rgba(75,118,25,0.95);
  --tzb-cc88ff: #52008f;
  --tzb-d4f060: #6c820c;
  --tzb-dcdcdc-a800: rgba(111,32,32,0.8);
  --tzb-dcf0c8-a950: rgba(71,112,31,0.95);
  --tzb-dcff64-a900: rgba(111,143,0,0.9);
  --tzb-eaff8a: #758f00;
  --tzb-ebbec8-a900: rgba(111,32,50,0.9);
  --tzb-ef9f27: #85540a;
  --tzb-ef9f27-a750: rgba(133,84,10,0.75);
  --tzb-ef9f27-a850: rgba(133,84,10,0.85);
  --tzb-ef9f27-a900: rgba(133,84,10,0.9);
  --tzb-efb327: #85600a;
  --tzb-f0c020: #866909;
  --tzb-f5c842: #886707;
  --tzb-f5c842-a920: rgba(136,103,7,0.92);
  --tzb-f88282-a850: rgba(135,8,8,0.85);
  --tzb-facc15-a780: rgba(140,112,3,0.78);
  --tzb-fdd36d-a900: rgba(141,100,2,0.9);
  --tzb-ff8282: #8f0000;
  --tzb-ff8c00: #8f4e00;
  --tzb-ff8c00-a350: rgba(143,78,0,0.35);
  --tzb-ff8c00-a500: rgba(143,78,0,0.5);
  --tzb-ff8c00-a550: rgba(143,78,0,0.55);
  --tzb-ff8c00-a600: rgba(143,78,0,0.6);
  --tzb-ff8c00-a700: rgba(143,78,0,0.7);
  --tzb-ff8c00-a800: rgba(143,78,0,0.8);
  --tzb-ff9600-a900: rgba(143,84,0,0.9);
  --tzb-ff9614: #8f4f00;
  --tzb-ff9b9b-a950: rgba(143,0,0,0.95);
  --tzb-ffa032-a900: rgba(143,77,0,0.9);
  --tzb-ffa032-a950: rgba(143,77,0,0.95);
  --tzb-ffa03c-a800: rgba(143,73,0,0.8);
  --tzb-ffa03c-a900: rgba(143,73,0,0.9);
  --tzb-ffa500: #8f5c00;
  --tzb-ffa500-a800: rgba(143,92,0,0.8);
  --tzb-ffa500-a950: rgba(143,92,0,0.95);
  --tzb-ffaa00: #8f5f00;
  --tzb-ffaa30: #8f5400;
  --tzb-ffb400-a550: rgba(143,101,0,0.55);
  --tzb-ffb400-a600: rgba(143,101,0,0.6);
  --tzb-ffb400-a700: rgba(143,101,0,0.7);
  --tzb-ffb400-a750: rgba(143,101,0,0.75);
  --tzb-ffb400-a800: rgba(143,101,0,0.8);
  --tzb-ffb400-a850: rgba(143,101,0,0.85);
  --tzb-ffb400-a900: rgba(143,101,0,0.9);
  --tzb-ffb464-a900: rgba(143,74,0,0.9);
  --tzb-ffb800: #8f6700;
  --tzb-ffb800-a400: rgba(143,103,0,0.4);
  --tzb-ffb800-a450: rgba(143,103,0,0.45);
  --tzb-ffb800-a500: rgba(143,103,0,0.5);
  --tzb-ffb800-a600: rgba(143,103,0,0.6);
  --tzb-ffb800-a700: rgba(143,103,0,0.7);
  --tzb-ffb800-a800: rgba(143,103,0,0.8);
  --tzb-ffb800-a850: rgba(143,103,0,0.85);
  --tzb-ffb800-a900: rgba(143,103,0,0.9);
  --tzb-ffb800-a950: rgba(143,103,0,0.95);
  --tzb-ffb93c-a900: rgba(143,92,0,0.9);
  --tzb-ffbe3c-a900: rgba(143,95,0,0.9);
  --tzb-ffc800: #8f7000;
  --tzb-ffc800-a800: rgba(143,112,0,0.8);
  --tzb-ffc800-a900: rgba(143,112,0,0.9);
  --tzb-ffc832-a800: rgba(143,104,0,0.8);
  --tzb-ffc850-a600: rgba(143,98,0,0.6);
  --tzb-ffc850-a800: rgba(143,98,0,0.8);
  --tzb-ffd250-a900: rgba(143,106,0,0.9);
  --tzb-ffd2aa-a900: rgba(143,67,0,0.9);
  --tzb-ffd600: #8f7800;
  --tzb-ffd700: #8f7800;
  --tzb-ffd700-a550: rgba(143,120,0,0.55);
  --tzb-ffdc32-a920: rgba(143,118,0,0.92);
  --tzb-ffdd44: #8f7500;
  --tzb-ffdd66: #8f6f00;
  --tzb-ffe040: #8f7800;
  --tzb-fff8c0: #8f7f00;
}
/* tz-tokens-end */

/* ── EXPERIMENTAL MARKER ───────────────────────────────────────────────────
   Light mode ships opt-in and labelled. Dark is the supported theme and the
   default, and is byte-identical to what it was before the migration — the
   only way to see any of the light work is to deliberately turn it on. */
.tz-beta-tag {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: var(--rad-3);
  font-size: var(--fs-9);
  line-height: 1.4;
  letter-spacing: 0.12em;
  vertical-align: middle;
  border: 1px solid rgba(255, 176, 32, 0.45);
  background: rgba(255, 176, 32, 0.12);
  /* Fixed amber, not the accent: this is a status marker, and it has to keep
     reading as a warning whichever accent is selected. */
  color: #ffb020;
}
:root[data-theme="light"] .tz-beta-tag {
  border-color: rgba(138, 86, 0, 0.5);
  background: rgba(138, 86, 0, 0.1);
  color: #8a5600;
}
.tz-mode-note {
  margin: -4px 0 12px;
  padding: 8px 10px;
  border-radius: var(--r2, 8px);
  border: 1px solid rgba(255, 176, 32, 0.28);
  background: rgba(255, 176, 32, 0.06);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text2);
}
:root[data-theme="light"] .tz-mode-note {
  border-color: rgba(138, 86, 0, 0.3);
  background: rgba(138, 86, 0, 0.06);
}

/* ── APPEARANCE PANEL (collapsible header) ─────────────────────────────────
   The panel sits above #acct-signed-in so it is reachable, and starts closed
   so it costs one row rather than ~230px at the top of a 3,000px modal. */
.tz-appearance-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 0;
  min-height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
}
.tz-appearance-summary {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--lime);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tz-appearance-caret {
  font-size: 11px;
  color: var(--text3);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
#tz-accent-picker:not(.tz-collapsed) .tz-appearance-caret { transform: rotate(180deg); }
/* Height is not animated: the body contains a wrapping grid whose height is
   content-dependent, so a max-height transition would either clip it or need a
   magic number that breaks at the 480px breakpoint. */
#tz-accent-picker.tz-collapsed .tz-appearance-body { display: none; }
.tz-appearance-body { padding-top: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   IN-APP DIALOGS (assets/js/ui/72-prompt.js)
   ══════════════════════════════════════════════════════════════════════════
   z-index sits above every panel in the app. The notes drawer is 9968 and the
   account modal 88888, and a dialog can be raised from inside either, so this
   has to clear both. */
.tzdlg-bg {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Same margin:auto centring used by the popup layer — centres when it fits,
     and degrades to top-aligned + scrollable when it does not, instead of
     clipping the top off. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top, 0px)) 12px
           max(16px, env(safe-area-inset-bottom, 0px)) 12px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.14s ease;
}
.tzdlg-bg.open { opacity: 1; }
.tzdlg {
  margin: auto;
  width: min(380px, 100%);
  box-sizing: border-box;
  background: var(--bg1);
  border: 1px solid rgba(var(--acc-rgb), 0.28);
  border-radius: var(--r3, 14px);
  padding: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  transform: translateY(6px) scale(0.99);
  transition: transform 0.14s ease;
}
.tzdlg-bg.open .tzdlg { transform: none; }
.tzdlg-title {
  font-family: var(--font-big);
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--lime);
  margin-bottom: 6px;
}
.tzdlg-msg {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text2);
  margin-bottom: 12px;
  white-space: pre-line;
}
.tzdlg-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text3);
  margin-bottom: 6px;
}
.tzdlg-input, .tzdlg-select {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  background: rgba(var(--surf-rgb), 0.45);
  border: 1px solid var(--border2);
  border-radius: var(--r2, 8px);
  padding: 8px 12px;
  color: var(--text);
  font-family: var(--font-mono);
  /* 16px, not the app's usual 11-12px: iOS zooms the page in on focus for
     anything smaller and never zooms back out. */
  font-size: 16px;
  outline: none;
}
.tzdlg-input:focus, .tzdlg-select:focus { border-color: rgba(var(--acc-rgb), 0.55); }
.tzdlg-dur { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tzdlg-hint {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  min-height: 1.4em;
}
.tzdlg-err {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--red);
}
.tzdlg-row { display: flex; gap: 8px; margin-top: 16px; }
.tzdlg-btn {
  flex: 1;
  min-height: 44px;
  border-radius: var(--r2, 8px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  cursor: pointer;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tzdlg-btn:hover { color: var(--text); }
.tzdlg-ok {
  border-color: rgba(var(--acc-rgb), 0.5);
  background: rgba(var(--acc-rgb), 0.1);
  color: var(--lime);
}
.tzdlg-ok:hover { background: rgba(var(--acc-rgb), 0.2); }
.tzdlg-ok.danger {
  border-color: rgba(255, 34, 68, 0.5);
  background: rgba(255, 34, 68, 0.1);
  color: var(--red);
}
@media (max-width: 380px) {
  .tzdlg-dur { grid-template-columns: 1fr; }
}

/* ── NOTES: recording state ────────────────────────────────────────────────
   The stop control existed before — the mic button swapped to ⏹ — but it was
   the same 28px icon in a row of four, with no elapsed time and no colour
   change. It read as "there is no stop button". */
.tzn-vstate {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--tzi-afc3e1-a650, rgba(175, 195, 225, 0.65));
  padding: 4px 0;
}
.tzn-vstate.rec { color: #ff5a6a; letter-spacing: 0.08em; }
.tzn-recdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b4e;
  flex-shrink: 0;
  animation: tznRecPulse 1s ease-in-out infinite;
}
@keyframes tznRecPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.25 } }
@media (prefers-reduced-motion: reduce) { .tzn-recdot { animation: none } }
.tzn-stop {
  width: 100%;
  min-height: 40px;
  margin: 4px 0 2px;
  border-radius: var(--r2);
  border: 1px solid rgba(255, 59, 78, 0.5);
  background: rgba(255, 59, 78, 0.12);
  color: #ff6b7a;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.tzn-stop:hover { background: rgba(255, 59, 78, 0.2); }

/* ── TV IMPORT: busy / done states ──────────────────────────────────────────
   Before this the AUTO-FILL + PICKS button gave zero feedback while
   applyTVImport() ran (it does a real network round-trip to level-engine),
   then the modal just vanished. See 06-core-state-utils.js. */
#tv-import-apply-btn.tv-import-busy {
  cursor: wait;
  opacity: 0.75;
  animation: tvImportPulse 1s ease-in-out infinite;
}
@keyframes tvImportPulse { 0%,100% { opacity: 0.75 } 50% { opacity: 0.5 } }
@media (prefers-reduced-motion: reduce) {
  #tv-import-apply-btn.tv-import-busy { animation: none; }
}
#tv-import-apply-btn.tv-import-done {
  cursor: default;
  background: rgb(var(--acc-rgb)) !important;
  transition: background 0.15s ease;
}

/* ── Payload-suggested cards (trend / smc / chart-pat) ───────────────────────
   These three are chart-reading judgment calls a payload can never actually
   prove — see setCardSuggested() in 06-core-state-utils.js. They get a
   visibly distinct dashed style (never the solid sel-* fill a real click
   gets) plus a tap-to-confirm badge, and critically do NOT write
   STATE.cards, so the tier/core-six gate still requires the real click.
   The [data-group]/[data-vis-group] prefix beats the plain .trend-vis-card /
   .cpv-card / .smcv-card base-class rule on specificity regardless of CSS
   source order, without needing a copy of this block per card type. */
[data-group].card-suggested,
[data-vis-group].card-suggested {
  border-style: dashed !important;
  background: rgba(var(--acc-rgb), 0.03);
  position: relative;
}
[data-group].card-suggested.sug-bull,
[data-vis-group].card-suggested.sug-bull,
[data-group].card-suggested.sug-bear,
[data-vis-group].card-suggested.sug-bear {
  border-color: var(--lime);
}
[data-group].card-suggested.sug-neu,
[data-vis-group].card-suggested.sug-neu {
  border-color: var(--lime2);
}
[data-group].card-suggested::after,
[data-vis-group].card-suggested::after {
  content: 'TV SUGGESTS — TAP TO CONFIRM';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-9);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--lime);
  background: rgba(var(--acc-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--acc-rgb), 0.35);
  padding: 1px 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 3px 3px 0 0;
  pointer-events: none;
}

/* ── 2.1: multi-timeframe payload — "+ ADD TIMEFRAME" ────────────────────────
   Stacked extra timeframes (STATE.mtfPayloads) shown as small removable
   chips in the TV-imported dashboard box, colour-coded by that timeframe's
   own directional lean (see tvDirVote() in 06-core-state-utils.js) so a
   trader can see agreement/conflict across timeframes at a glance before
   even running Analyze. Button style matches .tv-reveal-all-btn already in
   this same box. */
.tv-add-tf-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 8px 12px 4px;
  padding: 8px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.1em;
  border: 1px dashed rgba(var(--acc-rgb), 0.35);
  border-radius: var(--r);
  background: transparent;
  color: var(--lime2);
  cursor: pointer;
}
.tv-add-tf-btn:hover {
  border-color: rgba(var(--acc-rgb), 0.6);
  color: var(--lime);
  background: rgba(var(--acc-rgb), 0.05);
}
.tv-mtf-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 12px 8px;
}
.tv-mtf-label {
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.08em;
  color: var(--text3, rgba(160, 188, 200, 0.6));
}
.tv-mtf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 8px;
  border-radius: var(--rad-999);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(var(--acc-rgb), 0.3);
  background: rgba(var(--acc-rgb), 0.05);
  color: var(--text2);
}
.tv-mtf-chip.tv-mtf-bull { border-color: rgba(var(--acc-rgb), 0.5); color: var(--lime); }
.tv-mtf-chip.tv-mtf-bear { border-color: rgba(255, 51, 85, 0.5); color: #ff5570; background: rgba(255, 51, 85, 0.06); }
.tv-mtf-chip.tv-mtf-neu  { border-color: var(--lime2); color: var(--lime2); }
.tv-mtf-chip b {
  cursor: pointer;
  font-weight: 700;
  opacity: 0.6;
  padding: 0 2px;
}
.tv-mtf-chip b:hover { opacity: 1; color: #ff5570; }
.tv-mtf-add-more-btn {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--rad-999);
  border: 1px dashed rgba(var(--acc-rgb), 0.35);
  background: transparent;
  color: var(--lime2);
  cursor: pointer;
}
.tv-mtf-add-more-btn:hover { border-color: rgba(var(--acc-rgb), 0.6); color: var(--lime); }

/* ── 2.3: results display — engine scores + prose-behind-a-disclosure ──────
   PDF: "just score and graphs instead ... showing scores data of all the
   engines ... minimize the text part ... when the score is clicked show a
   dropdown with the text data which backs it." Score+verdict hero and the
   existing per-factor voting table (#factors-tbody) are untouched. */
.engine-scores-panel {
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.05);
}
.engine-scores-title {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.18em;
  color: rgba(var(--acc-ink-rgb), 0.5);
  margin-bottom: 6px;
}
.engine-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.04);
}
.engine-row:last-child { border-bottom: none; }
.engine-row-lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.06em;
  color: var(--text2);
}
.engine-row-val {
  font-family: var(--font-big);
  font-size: var(--fs-15);
  font-weight: 700;
  text-align: right;
}
.engine-row-sub {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text3);
  line-height: 1.4;
}
/* 2.4: a summary OF the rows above, not another raw engine read — a top
   border + slight indent separates it visually without a whole new block. */
.engine-row-confluence {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(var(--acc-rgb), 0.15);
}
.engine-row-confluence .engine-row-lbl { color: var(--lime2); letter-spacing: 0.1em; }
.analysis-detail-disclosure {
  border-top: 1px solid rgba(var(--ink-rgb), 0.05);
}
.analysis-detail-toggle {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  color: var(--lime2);
}
.analysis-detail-toggle:hover { color: var(--lime); }
.analysis-detail-hint {
  font-size: var(--fs-10);
  letter-spacing: 0.02em;
  color: var(--text3);
  font-weight: 400;
}
.analysis-detail-body {
  padding-bottom: 4px;
}

/* ── 3.4: open-trade bricks ──────────────────────────────────────────────
   Every open trade as its own compact card, colour-coded by staleness
   (computeBrickStaleness() in 06-core-state-utils.js — a function of
   elapsed time, entry timeframe, leverage and the volatility regime
   captured at analysis time). Sits above the empty-state / results, so
   it's visible on the analysis tab whether or not an analysis is showing. */
.otb-title {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.16em;
  color: rgba(var(--acc-ink-rgb), 0.5);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.otb-count {
  font-size: var(--fs-11);
  color: var(--lime2);
  background: rgba(var(--acc-rgb), 0.08);
  border-radius: var(--rad-999);
  padding: 0 6px;
}
.otb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}
.otb-brick {
  position: relative;
  padding: 8px 8px 6px;
  border-radius: var(--r2);
  border: 1px solid rgba(var(--acc-rgb), 0.18);
  background: rgba(var(--surf-rgb), 0.4);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.otb-brick:hover { transform: translateY(-1px); border-color: rgba(var(--acc-rgb), 0.4); }
.otb-brick.otb-yellow { border-color: rgba(255, 200, 0, 0.35); }
.otb-brick.otb-red { border-color: rgba(255, 51, 85, 0.4); }
.otb-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: blink 1.8s infinite;
}
.otb-ticker {
  font-family: var(--font-big);
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  color: var(--lime);
  padding-right: 12px;
}
.otb-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text2);
  margin-top: 2px;
}
.otb-elapsed {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text3);
  margin-top: 3px;
  letter-spacing: 0.04em;
}


/* tz-type-tokens-start */
/* GENERATED by scripts/type-to-var.mjs — do not hand-edit.
   30 distinct font-size values, one token each, all derived
   from a single --fs-scale multiplier. At --fs-scale:1 every migrated site
   computes to the exact pixel value it had before this migration — verified
   by the same A/B harness used for the colour migration. Changing ONLY
   --fs-scale nudges every font-size in the app proportionally; changing one
   --fs-N token nudges only sites that used that exact original size. */
:root {
  --fs-scale: 1;
  --fs-0: calc(0px * var(--fs-scale));
  --fs-9: calc(9px * var(--fs-scale));
  --fs-10: calc(10px * var(--fs-scale));
  --fs-11: calc(11px * var(--fs-scale));
  --fs-12: calc(12px * var(--fs-scale));
  --fs-13: calc(13px * var(--fs-scale));
  --fs-14: calc(14px * var(--fs-scale));
  --fs-15: calc(15px * var(--fs-scale));
  --fs-16: calc(16px * var(--fs-scale));
  --fs-17: calc(17px * var(--fs-scale));
  --fs-18: calc(18px * var(--fs-scale));
  --fs-19: calc(19px * var(--fs-scale));
  --fs-20: calc(20px * var(--fs-scale));
  --fs-22: calc(22px * var(--fs-scale));
  --fs-24: calc(24px * var(--fs-scale));
  --fs-26: calc(26px * var(--fs-scale));
  --fs-28: calc(28px * var(--fs-scale));
  --fs-30: calc(30px * var(--fs-scale));
  --fs-32: calc(32px * var(--fs-scale));
  --fs-34: calc(34px * var(--fs-scale));
  --fs-36: calc(36px * var(--fs-scale));
  --fs-38: calc(38px * var(--fs-scale));
  --fs-40: calc(40px * var(--fs-scale));
  --fs-42: calc(42px * var(--fs-scale));
  --fs-44: calc(44px * var(--fs-scale));
  --fs-48: calc(48px * var(--fs-scale));
  --fs-52: calc(52px * var(--fs-scale));
  --fs-56: calc(56px * var(--fs-scale));
  --fs-58: calc(58px * var(--fs-scale));
  --fs-64: calc(64px * var(--fs-scale));
}
/* tz-type-tokens-end */


/* tz-radius-tokens-start */
/* GENERATED by scripts/radius-to-var.mjs — do not hand-edit.
   6 border-radius values with no home in the existing
   --r/--r2/--r3/--r4 scale (4px/8px/14px/20px already cover their own raw
   sites via that scale directly, not through a token here). Each of these
   computes to its exact original pixel value — no scale multiplier, unlike
   --fs-N; border-radius steps don't share the "nudge everything
   proportionally" use case type size does. */
:root {
  --rad-2: 2px;
  --rad-3: 3px;
  --rad-6: 6px;
  --rad-12: 12px;
  --rad-16: 16px;
  --rad-999: 999px;
}
/* tz-radius-tokens-end */

/* ══════════════════════════════════════════════════════════════════════════
   HUE OVERLAY THEMING
   ══════════════════════════════════════════════════════════════════════════
   Previously the accent was themed by rewriting --acc-rgb, which only retinted
   things that actually referenced that token. Measured across app/assets/js:
   365 canvas fillStyle/strokeStyle assignments, exactly ONE of which used
   var(). Plus 147 hardcoded lime literals and 248 hardcoded red literals. So
   the entire chart/canvas layer — equity curve included — silently ignored the
   theme, which is why parts of the app looked off-brand once the accent moved.

   Migrating 365 canvas paint sites to tokens would be a large, risky change,
   and canvas cannot resolve var() natively anyway (hence the tzCanvasColor()
   shim). A single compositing-level hue rotation catches EVERYTHING — DOM,
   canvas, gradients, shadows, SVG — with one property and no per-site edits,
   and it preserves every colour RELATIONSHIP in the palette rather than
   letting individual hues drift apart. One brand, rotated.

   Applied to <body>, not <html>: the filter must contain the modals, which are
   body-level siblings of .app (filtering .app would leave every modal
   unshifted — the exact inconsistency this replaces).

   position:fixed is safe here specifically because this app's document never
   scrolls — it is a fixed-viewport shell with internal scroll containers
   (verified: document.scrollingElement.scrollHeight === innerHeight). A filter
   makes an element the containing block for fixed descendants, which normally
   breaks fixed positioning on a scrolling page; here there is nothing to
   scroll, and the open modal was measured identical (y:0 h:720) filtered and
   unfiltered.

   Gated behind [data-hue-active] so the default install creates no extra
   compositing layer and pays nothing.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --tz-hue: 0deg;
  --tz-sat: 1;
}
:root[data-hue-active] body {
  filter: hue-rotate(var(--tz-hue)) saturate(var(--tz-sat));
  /* A filter turns body into a containing block, which changes which ancestor
     clips overflowing descendants — at 375px the 3,280px-wide
     #stats-ticker-track marquee pushed body.scrollWidth from 375 to 665 once
     the filter was on.
     MUST be `clip`, not `hidden`: the app already sets overflow-x:clip on body,
     and `hidden` overrides it with a real scroll container, which measured as
     genuinely scrollable (body.scrollLeft moved to 290 — worse than the
     problem being fixed). `clip` suppresses the overflow without ever creating
     a scroll port. Vertical scrolling is untouched. */
  overflow-x: clip;
}
/* Colour that carries MEANING must not be repainted by a cosmetic theme.
   Counter-rotating by the exact inverse restores true colour.

   - img/video: the user's own chart screenshots and photos.
   - .chat-rank-badge.rank-1/2/3: the chat leaderboard's own rank system, which
     is podium colour — gold #ffd700, silver #c0c0c0, bronze #cd7f32. Rotate
     those and "gold" renders green or purple and the medal stops meaning
     anything. Note .rank-top is deliberately NOT exempt: it is authored in
     var(--acc-rgb), i.e. it is the generic accent and SHOULD follow the theme.
   - .tz-no-hue: opt-out hook for anything else semantic.

   saturate(calc(1 / var(--tz-sat))) is the exact inverse of the outer
   saturate(), so these keep default appearance under every preset. Nothing here
   touches opacity — hue-rotate and saturate cannot change alpha, so every
   element keeps the exact opacity it has by default. */
:root[data-hue-active] img,
:root[data-hue-active] video,
:root[data-hue-active] .chat-rank-badge.rank-1,
:root[data-hue-active] .chat-rank-badge.rank-2,
:root[data-hue-active] .chat-rank-badge.rank-3,
:root[data-hue-active] .tz-no-hue {
  filter: hue-rotate(calc(-1 * var(--tz-hue))) saturate(calc(1 / var(--tz-sat)));
}

/* ══════════════════════════════════════════════════════════════════════════
   IDENTITY AURAS — deterministic per-user "planet" avatars
   ══════════════════════════════════════════════════════════════════════════
   Replaces the first-letter avatar. Every user gets a unique, stable planet
   derived from their account id, so identity is visual and instantly
   recognisable without ever accepting an uploaded image — which removes the
   entire moderation surface (an image upload in a social product is an
   adult-content and abuse vector that would need review tooling to run safely).

   Modelled as an actual lit sphere, not a flat colour blend: a directional
   highlight (simulated sun) and an opposite shadow (terminator) are blended
   OVER a multi-hue "surface" built from several overlapping soft colour
   blobs — see applyIdentityAura() in 23-supabase-init-auth.js for exactly how
   many blobs and which hues. Deterministic per account, so the same person
   renders identically on every device/session with nothing stored
   server-side.

   .tz-aura itself only clips its OWN background to a circle (border-radius
   clips background-image regardless of overflow) — overflow stays visible so
   the ring pseudo-element below can extend past the sphere's edge, the way a
   real ring does.

   Auras carry identity, not theme, so they are exempt from the hue overlay via
   .tz-no-hue — otherwise every user's "unique" colour would shift together
   and stop being an identifier. */
.tz-aura {
  position: relative;
  overflow: visible;
  border-radius: 50%;
  isolation: isolate;   /* keeps the ring/moon's own blend modes from leaking onto siblings */
  /* background-image (the sphere itself: highlight + shadow + colour blobs,
     each with its own background-blend-mode) is painted inline by
     applyIdentityAura() — the blob count and blend-mode list are both
     variable length, which a CSS custom property can't express. Everything
     CONSTANT across every aura lives here. */
  background-color: hsl(220 12% 14%);   /* fallback before the inline paint lands */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),   /* crisp rim at small sizes */
    0 0 0 3px var(--tz-aura-glow, transparent);  /* soft colour halo, set inline per user */
  color: transparent;      /* the initial is replaced by the planet itself */
  text-indent: -9999px;    /* keeps existing textContent for tooltips/a11y, unseen */
  flex-shrink: 0;
}
/* RING — a flattened, rotated ellipse behind the sphere. Only ~1 in 4 auras
   get one (see applyIdentityAura); .tz-aura-ring gates it so the other 3/4
   pay zero extra cost. Sized and coloured entirely via inline custom
   properties so one rule serves every user's ring. Sitting at z-index -1
   behind an OPAQUE sphere is what makes the centre disappear behind the
   planet and only the two side "wings" show — the classic Saturn silhouette
   — without needing a second front-layer copy. */
.tz-aura-ring::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 172%; height: 172%;
  z-index: -1;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--tz-ring-rot, 0deg)) scaleY(var(--tz-ring-squash, 0.32));
  background: radial-gradient(circle,
    transparent 55%,
    var(--tz-ring-c, rgba(255,255,255,.5)) 57%,
    var(--tz-ring-c, rgba(255,255,255,.5)) 63%,
    transparent 66%);
  opacity: .85;
  pointer-events: none;
}
/* MOON — a small companion sphere with its own miniature highlight/shadow,
   independent of the ring (a body can have neither, either, or both — Saturn
   has both). ~1 in 5 auras get one. */
.tz-aura-moon::after {
  content: '';
  position: absolute;
  width: var(--tz-moon-size, 26%);
  height: var(--tz-moon-size, 26%);
  left: var(--tz-moon-x, 78%);
  top: var(--tz-moon-y, 74%);
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(circle at 60% 68%, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 60%),
    var(--tz-moon-c, hsl(220 20% 70%));
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  pointer-events: none;
}