/* Let's Go design tokens: the only place a visual value is written. Components and
   screens use these names; change a value here and the whole app follows. The values come
   from the owner's mockup (design-preview/terminal.dc.html). */
:root {
  color-scheme: dark;

  /* Surfaces, from the page up */
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --line: #38383a;
  --line-2: #48484a;
  --surface-deep: #19191b;
  --surface-sunken: #141416;
  --line-soft: #232326;
  --surface-section: #161618;
  --surface-row-hover: #232325;
  --line-row: #26262a;
  --scrim: rgba(0, 0, 0, .35);
  --surface-glass: rgba(28, 28, 30, .72);
  /* A plate over the chart (the tiles, the drawing bars, the tools' panel, the indicators' legend),
     no outline, lifted by a soft shadow; the pressed button is a
     plain lighter fill, not an accent ring (owner, 2026-10-16). */
  --plate-bg: rgba(36, 36, 38, .58);  /* glass (owner, LAB-364): the chart shows through, blurred */
  --plate-blur: blur(14px) saturate(160%);
  --legend-slack: 40px;     /* the legend's values grow as the pointer moves: it goes compact this early */
  --h-tog: 22px;            /* a toggle in a chart tile */        /* the handle that folds the tools' panel */
  --t-new-mark: 1.6s;       /* a new indicator's soft tint fades this long */
  --plate-shadow: 0 10px 26px -12px rgba(0, 0, 0, .9);
  --plate-sep: rgba(255, 255, 255, .07);
  --plate-hover: #3a3a3c;
  --plate-on: #48484a;
  --r-plate: 10px;
  --ring-glass: rgba(255, 255, 255, .14);

  /* Text, from loud to quiet */
  --ink: #ffffff;
  --ink-soft: #e5e5ea;
  --ink-2: #98989f;
  --ink-3: #7c7c82;
  --ink-4: #636366;
  --ink-5: #48484a;

  /* Accent and meaning */
  --accent: #ff9f0a;
  --accent-tint: rgba(255, 159, 10, .14);
  --accent-glow: rgba(255, 159, 10, .35);
  --accent-hover: #ffb340;
  --accent-tint-hover: rgba(255, 159, 10, .22);
  --accent-wash: rgba(255, 159, 10, .06);   /* a sorted field's row in the sort's menu */
  --accent-wash-2: rgba(255, 159, 10, .10);
  --on-accent: #000000;
  --pos: #30d158;
  --pos-tint: rgba(48, 209, 88, .14);
  --pos-flash: rgba(48, 209, 88, .18);
  --neg: #ff453a;
  --neg-tint: rgba(255, 69, 58, .16);
  --neg-flash: rgba(255, 69, 58, .18);

  /* Trading */
  --tp: #64d2ff;
  --sl: #ffd60a;
  --candle-up: #4cc38a;
  --candle-down: #e5675f;
  /* The line and area chart types (LAB-333): the close line and the fill under it */
  --chart-line: #0a84ff;
  /* Indicators (LAB-334, LAB-338): the palette a chart's indicator takes its colour from (the
     colour dropdown's presets), and MACD's signal */
  --ind-0: #bf5af2;
  --ind-1: #d4e157;  /* not blue: the line view is blue */
  --ind-2: #ff7eb6;
  --ind-3: #e8e8ea;
  --ind-4: #8e8cf7;
  --ind-5: #f7b955;
  --ind-6: #b58cff;
  --ind-7: #5ac8fa;
  --ind-8: #4fd1c5;
  --ind-9: #ff8f6b;
  --ind-10: #a3e4ff;
  --ind-11: #c9a27e;
  --ind-signal: #ff8a3d;
  /* Where a position opened: its own pair of colours, so the mark stands out among the ticks */
  /* The entry and the exit of a trade: a green and a red of their own, brighter than the
     candles and ringed in the background colour, so they read on top of them (owner,
     2026-10-15). */
  --entry-buy: #4dff4d;
  --entry-sell: #4dff4d;
  --trade-exit: #ff3b5c;
  /* Order book on the chart (owner's mockup): translucent bars per level in the candle
     colours, the biggest levels named in the light tones */
  --book-bar-alpha: .26;
  --book-wall-ask: #ff8a80;
  --book-wall-bid: #7ee2a0;
  /* Price lines on the chart, steps in time: the last trade, the ticker, the mark (LAB-335) */
  --price-last: #e5e5ea;
  --price-ticker: #bf5af2;
  --price-mark: #ff9f0a;

  /* Markets: a venue takes the colour of its index — blue is the spot, green the futures (owner, 2026-10-09) */
  --market-0: #64d2ff;
  --market-0-tint: rgba(100, 210, 255, .14);
  --market-1: #30d158;
  --market-1-tint: rgba(48, 209, 88, .14);
  --market-2: #ffd60a;
  --market-2-tint: rgba(255, 214, 10, .14);
  --market-3: #ff6482;
  --market-3-tint: rgba(255, 100, 130, .14);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Instrument Sans', 'Segoe UI', sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Instrument Sans', 'Segoe UI', sans-serif;
  --fs-2xs: 9px;
  --fs-xs: 10px;
  --fs-s: 10.5px;
  --fs-m: 11px;
  --fs-base: 12px;
  --fs: 12.5px;
  --fs-l: 13px;
  --fs-xl: 13.5px;
  --fs-2xl: 15px;
  --fs-title: 17px;
  /* The indicators' palette and settings (LAB-355, the owner's mockup) */
  --fs-kbd: 9.5px;
  --h-kbd: 18px;            /* a keycap */
  --fs-ms: 11.5px;
  --fs-h: 14px;
  --fs-h3: 18px;
  --fs-h2: 20px;
  --tracking-caps: .06em;
  --tracking-tight: -.01em;

  /* Space */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 16px;
  --sp-9: 18px;
  --sp-10: 20px;
  --sp-11: 24px;

  /* Corners */
  --r-xs: 4px;
  --r-s: 6px;
  --r-m: 7px;
  --r-ml: 8px;
  --r-l: 9px;
  --r-xl: 11px;
  --r-2xl: 14px;
  --r-card: 12px;  /* the reports' tiles and cards (owner's mockup) */
  --r-3xl: 16px;
  --r-4xl: 18px;
  --r-round: 999px;

  /* Sizes */
  --h-control: 26px;
  --h-row: 28px;
  --h-item: 30px;
  --h-field: 34px;
  --h-button: 36px;
  --h-panel-bar: 42px;
  --h-top-bar: 52px;
  --h-journal-bar: 28px;
  --w-journal-search: 220px;
  --w-journal-time: 64px;
  --w-journal-src: 150px;
  --w-journal-pair: 120px;
  --w-drawer: 480px;
  --w-screen: 920px;
  --h-card: 58px;
  --h-field-l: 46px;
  --r-field: 13px;
  --h-cta: 50px;
  --sp-screen: 52px;
  --h-bal-row: 34px;
  --w-balances-min: 600px;
  --w-balances-compact: 560px;
  --w-lang-tile: 150px;     /* a language's tile in the settings */
  /* The settings window (LAB-383, the owner's mockup "Settings") */
  --w-settings: 900px;
  --h-settings: 620px;
  --w-settings-nav: 232px;
  --h-settings-head: 64px;
  --h-st-nav: 38px;         /* a section in the list */
  --h-st-row: 50px;         /* a setting's row in a card */
  --h-st-line: 46px;        /* a price line's row */
  --h-st-upd: 58px;
  --h-st-lang: 50px;
  --h-st-color: 38px;       /* a colour's row */
  --h-st-result: 40px;      /* a search result */
  --w-st-theme: 250px;      /* a theme's card and a colour group, at the least */
  --w-st-mini: 108px;       /* a theme's little picture */
  --h-st-mini: 66px;
  --h-st-pv: 172px;         /* the live preview over the chart's and the look's sections */
  --w-st-pv-axis: 62px;
  --st-dot: 6px;            /* "changed" and "live" in the list */
  --gap-st: 22px;           /* between the groups of a section */
  --sp-st-bottom: 28px;
  --sp-st-empty: 40px;
  --st-pv-vl: 132px;        /* the preview's volume labels */
  --st-pv-chip: 96px;       /* where an order's chip stands on its line */
  --t-st-pv: .2s;
  --w-st-sm-chart: 430px;   /* the small chart's wider preview: mini, compact or full by the threshold */
  --h-st-sm-chart: 230px;
  --sp-st-sub: 40px;        /* a row under another: the drawings' groups */
  /* The Telegram pictures, style 3a (LAB-391, the owner's mockup): an outcome's colours —
     its colour, background, soft words, pill, dark ink on it, axis labels, muted line */
  --tg-pos: #3fd68f; --tg-pos-bg: #0a1a12; --tg-pos-soft: #a7b5ad; --tg-pos-pill: rgba(63,214,143,.16); --tg-pos-dk: #06120d; --tg-pos-x: #7f9187; --tg-pos-mu: #2f5c46;
  --tg-neg: #ff6166; --tg-neg-bg: #1a0b0c; --tg-neg-soft: #c4b0b0; --tg-neg-pill: rgba(255,97,102,.16); --tg-neg-dk: #1a0b0c; --tg-neg-x: #9a7f80; --tg-neg-mu: #5c2f31;
  --tg-acc: #ff7a1a; --tg-acc-bg: #1a1108; --tg-acc-soft: #c9b8a8; --tg-acc-pill: rgba(255,122,26,.16); --tg-acc-dk: #1a1108; --tg-acc-x: #9a8775; --tg-acc-mu: #5c3d22;
  --tg-neu: #f4f5f4; --tg-neu-bg: #101213; --tg-neu-soft: #a3a8a6; --tg-neu-pill: rgba(244,245,244,.12); --tg-neu-dk: #101213; --tg-neu-x: #7a807e; --tg-neu-mu: #3a4240;
  --tg-ink: #f4f5f4; --tg-soft-pill: rgba(244,245,244,.14); --tg-hair: rgba(244,245,244,.09); --tg-dash: rgba(244,245,244,.22);
  --tg-badge: rgba(244,245,244,.12); --tg-hatch: rgba(255,97,102,.32); --tg-zero: rgba(244,245,244,.2); --tg-guide: rgba(244,245,244,.16);
  --tg-pos-box: rgba(63,214,143,.16); --tg-neg-box: rgba(255,97,102,.16); --tg-acc-box: rgba(255,122,26,.14); --tg-was: #5d625f;
  --tg-entry: rgba(244,245,244,.4); --tg-old: rgba(244,245,244,.35); --tg-gap: rgba(244,245,244,.45); --tg-gap-hatch: rgba(244,245,244,.12);
  --tg-line-open: #6b7371;
  --tg-bar: #6b5a4a; --tg-bar-neg: #6b4a4b; --tg-bar-low: #4a3a2c;
  /* The notifications' section (LAB-351, the same mockup) */
  --h-ntf-tab: 34px;        /* its four tabs */
  --h-ntf-field: 34px;      /* the token's field and its button */
  --h-ntf-bot: 64px;        /* the bot's row */
  --s-ntf-ico: 40px;
  --s-ntf-num: 26px;        /* a step's number */
  --s-ntf-x: 28px;          /* "take the chat out" */
  --h-st-small: 28px;       /* a small field or button in a row */
  --h-st-btn: 30px;
  --h-ntf-chip: 30px;       /* a chat's chip under an event */
  --w-ntf-search: 180px;
  --w-ntf-search-s: 160px;
  --w-ntf-dd: 150px;        /* a chat's route */
  --w-ntf-menu: 290px;      /* the route's presets */
  --w-ntf-sum: 88px;        /* where an event goes: "to every chat" */
  --w-ntf-time: 58px;       /* the quiet hours' edges */
  --sp-ntf-empty: 22px;
  --fs-caret: 8px;
  --fs-av-xs: 8px;
  --s-av: 28px;             /* a chat's round mark, and its sizes */
  --s-av-l: 30px;
  --s-av-m: 24px;
  --s-av-s: 22px;
  --s-av-xs: 20px;
  --ico-m: 15px;
  --av-tint: 18%;
  --av-0: var(--market-0); --av-1: var(--ind-0); --av-2: var(--pos); --av-3: var(--ind-2); --av-4: var(--sl); --av-5: var(--ind-4); --av-6: var(--ind-8);
  --w-tree: 176px;
  /* Market Live v4 (LAB-389, the owner's mockup): the bar, the tree, the table, the filters' window */
  --h-ml-sep: 18px;
  --h-ml-chip: 24px;
  --w-ml-chip-x: 18px;
  --h-ml-btn: 28px;
  --h-ml-mini: 20px;
  --r-ml-mini: 5px;
  --h-ml-act: 30px;
  --w-ml-chev: 12px;
  --w-ml-indent: 26px;      /* a quote under its market */
  --h-ml-row: 24px;
  --w-ml-rank: 34px;
  --w-ml-pair: 170px;
  --w-ml-col: 64px;
  --w-ml-more: 28px;
  --w-ml-min: 1000px;
  --sp-ml-th: 3px;
  --w-ml-empty: 380px;
  --w-ml-empty-ico: 48px;
  --ico-ml-empty: 22px;
  --w-mf: 600px;
  --r-mf: 16px;
  --h-mf-head: 60px;
  --fs-mf-title: 16px;
  --w-mf-cap: 84px;
  --h-mf-cap: 14px;
  --sp-mf-cap: 9px;
  --w-mf-dot: 7px;
  --sp-mf-n: 3px;
  --w-mf-q: 400px;
  --h-mf-q: 32px;
  --sp-mf-q: 3px;
  --w-mf-q-ico: 28px;
  --sp-mf-ico: 9px;
  --r-mf-q: 8px;
  --w-mf-qin: 90px;
  --sp-mf-tok: 3px;
  --r-mf-sug: 10px;
  --h-mf-row: 38px;
  --w-mf-in: 168px;         /* a condition's numbers: one field, or from – to (r2) */
  --w-mf-op: 32px;
  --w-mf-u: 14px;           /* the unit after a condition's numbers */
  --h-mf-show: 32px;
  /* The sort's menu of every table (LAB-389/390) */
  --w-sort-menu: 340px;
  --r-sort-menu: 12px;
  --h-sm-field: 36px;
  --w-sm-box: 16px;
  --r-sm-box: 5px;
  --sp-sm-abs: 7px;
  --h-sm-dir: 22px;
  --w-sm-dir: 28px;
  --w-menu: 240px;
  --w-popover: 320px;
  --w-modal: 440px;
  --w-swatch: 34px;
  --h-swatch: 24px;
  --h-progress: 4px;
  --w-modal-wide: 560px;
  --w-calendar: 280px;
  --w-palette: 860px;
  --w-palette-list: 240px;
  --h-palette: 560px;
  --h-palette-head: 60px;
  --guide: 34px;
  --win-edge: 5px;
  --win-corner: 12px;
  --w-axis-price: 62px;
  --w-field-pct: 46px;
  --w-field-usd: 64px;      /* a notification's threshold in dollars */
  --w-field-time: 112px;    /* an hour and minute, the quiet hours' edges (room for AM/PM and the clock) */
  --w-picker: 230px;
  --h-axis-tag: 16px;
  --h-axis-caption: 18px;
  --h-time-axis: 16px;
  /* Chart: the book's place right of "now", candle geometry, the screen-pinned grid */
  --chart-gap: 60px;
  --w-book: 116px;
  /* Charts by their region's size (LAB-380, the owner's mockup): full when at least the first two
     wide and tall (px), compact above the last two, mini below; the owner picks the set. A full
     chart has the % axis this wide, the book with this much plot (a small one with the second). */
  --chart-th-early: 640 320 440 220;
  --chart-th-normal: 520 260 360 180;
  --chart-th-late: 420 220 300 150;
  --chart-pct-min-w: 600px;
  --chart-book-min: 440px;
  --chart-book-min-s: 300px;
  --chart-gap-s: 24px;     /* "now" this far left of the book on a small chart */
  /* A mini chart (LAB-384, the owner's 1G): no axes, "now" this far from the edge, a grid barely
     there, the last price in a chip at the top right, a slim bar over it with a slim tab. */
  --chart-gap-m: 14px;
  --chart-grid-faint: rgba(255, 255, 255, .035);
  --mini-level-alpha: .6;  /* the dotted line at the last price */
  --w-mini-price: 96px;    /* the tiles leave the chip this much room */
  --h-panel-bar-m: 28px;
  --h-mini-tab: 22px;
  --mini-top: 34px;        /* the auto scale keeps the high this far down, under the tiles, */
  --mini-bottom: 10px;     /* and the low this far up */
  /* The auto-scale holds its fit while what is drawn stays this share of the height away from
     the edges and fills at least this share of it (LAB-408) */
  /* The algorithms' panel (LAB-386): the list's width, the code editor's type and colours */
  --w-algo-side: 260px;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fs-code: 12.5px;
  --lh-code: 19px;
  --w-algo-gutter: 40px;
  --h-algo-item: 30px;
  --h-algo-chip: 24px;
  --w-algo-name: 280px;
  --w-algo-name-min: 120px;
  --w-algo-fact: 180px;
  --w-algo-coin-q: 90px;
  --code-kw: #ff7ab2;
  --code-fn: #67b7a4;
  --code-ev: #b281eb;
  --code-str: #fc6a5d;
  --code-num: #d9c97c;
  --code-com: #7f8c98;
  --code-bad: rgba(255, 69, 58, .14);
  --algo-level: #b281eb;     /* an algorithm's level on the chart */
  --algo-level-past: rgba(178, 129, 235, .4); /* where the level stood before */
  --algo-dash: 5 4;
  --w-blocks: 860px;        /* the blocks' and the help's column */
  --w-blk-name: 96px;
  --w-blk-pop: 360px;
  --w-algo-new: 640px;
  --w-docs-nav: 260px;       /* the docs site's sections column (scripts/docs-site) */
  --w-algo-seen: 240px;      /* the editor's side: what a run sees */       /* the template cards' window */      /* the blocks' parameters column */
  --fit-edge: 0.05;
  --fit-fill: 0.4;
  --fit-slack: 4px;        /* a mini chart's fit has no margin: the price may pass its edges this far */
  --t-axis-shrink: 2500ms; /* the % axis narrows only this long after its range last changed */
  --volume-h-s: 36px;      /* a small chart's volume: this tall at most, */
  --volume-share-s: .14;   /* or this share of its plot */
  --volume-h-m: 16px;      /* a mini chart's volume, a soft silhouette: this tall at most, */
  --volume-share-m: .1;    /* or this share of its plot, */
  --volume-area-m: rgba(124, 124, 130, .28); /* in this colour */
  --h-chart-tools-c: 24px; /* the tile of a compact chart */
  --h-chart-tools-m: 20px; /* and of a mini one */
  --line-faint: rgba(255, 255, 255, .05);
  --sm-off: rgba(255, 255, 255, .05);
  --book-row: 4px;
  --candle-wick: 2px;
  --candle-gap: 1px;
  --candle-outline: 1px; /* a hollow candle's frame */
  --chart-line-w: 1.5px;
  --chart-area-alpha: .3; /* the area's fill under the line, fading to nothing at the floor */
  --tick-size: 6px;      /* a trade on the tick chart: a dot this wide, whatever its size */
  --chart-load-alpha: .3;   /* the left edge's line while older ticks come in (LAB-423) */
  --tick-alpha: .8;      /* and this opaque: the newest lies on top, the older show through */
  /* Volume at the foot of the plot (LAB-237): a bar per candle, 8 px time segments on ticks */
  --volume-h: 100px;
  --volume-seg: 8px;
  --volume-alpha: .55;
  --grid-step: 72px;
  /* Indicators (LAB-334): the lines, the Bollinger band's fill and middle line, an oscillator's
     band under the plot and its inner margin, the menu's name column and number fields */
  --ind-line: 1.5px;
  --ind-band-alpha: .07;
  --ind-mid-alpha: .55;
  --ind-hist-alpha: .42;  /* MACD's histogram, half that where it shrinks */
  /* The bands under the plot (LAB-355, the owner's mockup): open and folded to the chip, the
     chip's room above the lines and its offset, the room under them, the levels' dashes */
  --h-osc: 92px;
  --h-osc-fold: 24px;
  --h-osc-min: 48px;     /* a band dragged on its top edge stays between these */
  --h-osc-max: 360px;
  --osc-edge: 4px;       /* how near the edge the pointer takes it */
  --osc-head: 28px;
  --osc-chip: 4px;
  --osc-foot: 8px;
  --ind-level: rgba(255, 255, 255, .16);
  --surface-hot: rgba(44, 44, 46, .95);
  /* The legend's plate and its buttons, the settings popover, the palette, the colour picker */
  --h-ind-chip: 20px;
  --ind-btn: 18px;
  --ind-btn-l: 20px;
  --w-ind-edit: 320px;
  --w-ind-lbl: 92px;
  --w-ind-field: 40px;
  --w-pal: 860px;
  --h-pal: 560px;
  --w-pal-list: 240px;
  --h-pal-head: 60px;
  --h-pal-q: 40px;
  --h-pal-group: 34px;
  --h-pal-item: 38px;
  --h-pal-foot: 34px;
  --h-pal-btn: 36px;
  --h-pv-plot: 124px;
  --pad-pal: 20px;
  --pv-grid: rgba(255, 255, 255, .035);
  --pv-band-alpha: .09;
  --w-cp: 264px;
  --h-cp-sv: 164px;
  --h-cp-hue: 12px;
  --cp-dot: 18px;
  --cp-knob: 20px;
  --cp-knob-hue: 18px;
  --cp-black: #000000;
  --cp-white: #ffffff;
  --cp-hue: linear-gradient(to right, #ff0000, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000);
  --surface-pop: rgba(28, 28, 30, .94);
  --ring-pop: rgba(255, 255, 255, .1);
  --line-pop: rgba(255, 255, 255, .08);
  --blur-pop: 20px;
  /* Orders on the chart (owner's mockup "Orders on Chart", 2026-10-11): the key-chip that is
     the handle, where it sits, the entry triangle, the marks, how dim the history is */
  --order-line: 2px;
  --order-chip-h: 17px;      /* the chip: 17 px (owner, 2026-10-14) */
  --fs-chip: 11px;
  /* The core's load in the bottom bar (LAB-413): its pill, the popover's columns. */
  --h-journal-pill: 22px;
  --w-hp-market: 72px;
  --w-hp-col: 52px;
  /* A row of the search window: fixed, so thousands of pairs scroll by arithmetic (LAB-421). */
  --h-palette-item: 32px;
  /* A number in a settings row (LAB-418). */
  --w-st-num: 64px;
  /* The chart's own toolbar (owner's mockup, 2026-10-12): a pill inside the plot, top left */
  --h-chart-tools: 30px;
  --h-mini: 22px;
  --chart-pct-w: 0px;        /* the % axis, as wide as its labels (LAB-404); the chart sets it */
  --w-lev-pop: 184px;
  --order-chip-x: 10px;      /* the chip from the start of its segment */
  --order-chip-min: 6px;     /* and from the % axis at the least */
  --order-chip-pad: 5px;
  --order-chip-key: 7px;     /* a key with no text is this much colour */
  --order-chip-gap: 16px;    /* chips and axis tags keep this apart */
  --order-chip-ring: 1.5px;
  --order-mark: 12px;        /* the entry and exit triangle (LAB-238, back in LAB-395) */
  --order-end: 7px;          /* the cross at the end of a cancelled trace */
  --order-step-alpha: .8;    /* an old price of a live order, relative to its line */
  --order-trace-alpha: .5;   /* a finished order */
  --order-foreign-alpha: .7;
  --order-edge-alpha: .7;    /* a line pinned to the top or bottom edge */
  --order-ghost-alpha: .25;  /* where a dragged line was */
  --h-order-tag: 18px;       /* the book strip's tags */
  --w-order-card: 176px;
  --t-order-card: 300ms;     /* the pointer rests on a chip this long before the card */
  /* Icons: Material Symbols drawn inline, sized by place */
  --ico: 16px;
  --ico-s: 14px;
  --ico-x: 11px;            /* the × on a chip or a token */
  --sp-pop-edge: 8px;       /* a popup keeps this far from the window's edges (LAB-390) */
  --w-rule-x: 24px;         /* the × at a filter rule's end, under which its list's head has nothing */
  --ico-2xs: 10px;
  --ico-l: 20px;
  --ico-check: 12px;  /* the check mark in a check box */
  /* The search fields' magnifier (Material Symbols "search"), a mask the field's colour fills */
  --mask-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  --ico-stroke: 1.4px; /* the drawn icons' lines: the chart's views */
  --toggle-w: 34px;
  --toggle-h: 20px;
  --check: 16px;
  --dot: 7px;
  --splitter: 6px;
  --splitter-cross: 14px;   /* the grip where two splitters cross (LAB-412) */
  --splitter-link: 6px;     /* splitters this close on one line are one line */
  --splitter-snap: 10px;    /* a part dragged this close to its neighbour sticks to its level */
  --splitter-snap-zone: 8px; /* a drag this close to a half, third or quarter stands on it (LAB-422) */
  --splitter-cross-reach: 40px; /* a grab this close to a cross takes the whole line, farther its part */
  --split-guide: 1px;       /* the line at the place a drag snapped to */
  --min-app-width: 1280px;
  /* Reports (LAB-332, owner's mockup): the strip and card heads, the stat tiles, the PnL chart */
  --h-rp-strip: 40px;
  --fs-stat: 20px;
  --fs-stat-s: 17px;
  --h-rp-chart: 220px;
  --h-rp-chart-m: 170px;
  --h-rp-chart-s: 140px;
  --h-rp-bars: 40px;
  --w-rp-axis: 54px;
  --w-rp-axis-s: 46px;
  --w-rp-wide: 900px;      /* a panel this wide gets the table and six tiles */
  --w-rp-tight: 600px;
  --w-rp-xs: 420px;
  --w-rp-modal: 620px;
  --w-rp-month: 238px;
  --w-rp-presets: 136px;   /* the calendar's presets column */
  --rp-tile-gap: 5px;      /* between a tile's caption, value and note */
  --w-rp-side: 300px;      /* the breakdown card next to the chart, at the least */
  --rp-tag-pad: 5px;       /* the value tag at the chart's right edge */
  --rp-hover-dot: 9px;
  --rp-hover-ring: 3px;
  --rp-bars-gap: 26px;     /* the day bars under the curve */
  --h-rp-bar: 6px;         /* a breakdown row's losses-and-profits bar */
  --w-rp-bd-name: 72px;
  --w-rp-bd-name-xs: 64px;
  --w-rp-bd-n: 30px;
  --w-rp-bd-pnl: 86px;
  --w-rp-bd-pnl-xs: 78px;
  --w-rp-top-i: 18px;      /* the best and worst rows: rank, pair, detail, result */
  --w-rp-top-who: 150px;
  --w-rp-top-res: 96px;
  --w-rp-top-i-s: 16px;
  --w-rp-top-res-s: 92px;
  --h-rp-row2: 42px;       /* a two-line row of the narrow panel */
  --h-rp-row2l: 46px;      /* a trade in the narrow list */
  --h-rp-chip: 24px;       /* an active filter over the table */
  --h-rp-foot: 38px;
  --w-rp-search: 200px;
  --w-rp-search-m: 160px;
  --w-rp-search-s: 130px;
  --h-rp-mini: 20px;       /* a filter section's head and its "снять" */
  --h-rp-tag-x: 18px;      /* the cross of a pair tag */
  --h-rp-suggest: 200px;   /* the pair suggestions, at most */
  /* The order's options (LAB-399, the owner's mockup "Параметры ордера - вкладки"): the window,
     its tabs, cards, rows and wells, the big switch, the quiet pin; the top bar's sums and the
     tiles' dropdowns */
  --w-oo: 460px;
  --h-oo-body: 300px;       /* the cards' column, at the least */
  --h-oo-tab: 30px;
  --h-oo-row: 48px;         /* a setting's row */
  --h-oo-sub: 42px;         /* a row inside its card */
  --h-oo-cap: 34px;         /* a caption inside a card */
  --h-oo-field: 28px;
  --w-oo-field: 66px;
  --sp-oo-unit: 22px;       /* a field's room for its unit, */
  --sp-oo-unit-x: 9px;      /* and the unit from its right edge */
  --h-oo-size: 32px;        /* a sum and the dashed plus */
  --s-oo-x: 18px;           /* the cross on a sum */
  --r-oo-x: 5px;
  --ico-oo-add: 13px;
  --ico-oo-pin: 13px;
  --ico-oo-count: 12px;     /* the pin before "n/max" */
  --w-oo-pin: 26px;         /* the pin's column, kept on every row */
  --pin-tilt: 40deg;        /* a pin not pinned leans */
  --t-pin: .2s;
  --toggle-w-l: 38px;
  --toggle-h-l: 22px;
  --knob-l: 18px;
  --shadow-knob-l: 0 1px 3px rgba(0, 0, 0, .45);
  --t-toggle: .18s;
  --tracking-oo-cap: .05em;
  --accent-ring: rgba(255, 159, 10, .7);       /* a focused field */
  --accent-ring-edit: rgba(255, 159, 10, .75); /* a sum edited in the bar */
  --accent-ring-soft: rgba(255, 159, 10, .55); /* a focused field in a tile's dropdown */
  --scrim-deep: rgba(0, 0, 0, .5);
  --sp-sizes-bar: 5px;
  --sp-size: 9px;
  --w-size-edit: 44px;      /* a sum being edited: at the least, else per digit plus the room */
  --w-size-edit-ch: 8px;
  --w-size-edit-pad: 20px;
  --w-tile-chev: 22px;
  --w-tile-list: 180px;
  --w-tile-dd: 264px;
  --h-tile-dd-row: 36px;
  --w-tile-dd-field: 62px;
  --tile-dd-off: .45;       /* the settings of a switch that is off */
  --shadow-dd: 0 24px 48px -16px rgba(0, 0, 0, .95);
  /* The update window (LAB-353, the owner's mockup "Update Window", round 5): one size in
     every state, the hero on top, slides turning by themselves */
  --w-upd: 540px;
  --h-upd: 600px;
  --h-upd-hero: 272px;
  --h-upd-foot: 61px;
  --h-upd-seg: 3px;
  --upd-seg: rgba(255, 255, 255, .22);
  --upd-head-top: 26px;
  --upd-shade: rgba(28, 28, 30, .85);     /* the hero darkens under the head and melts into the window */
  --upd-shade-0: rgba(28, 28, 30, 0);
  --upd-glow-at: 120% 90% at 50% 30%;     /* a state's icon on its colour */
  --upd-glow-stop: 70%;
  --glow-accent: rgba(255, 159, 10, .18);
  --glow-tp: rgba(100, 210, 255, .16);
  --glow-sl: rgba(255, 214, 10, .16);
  --glow-pos: rgba(48, 209, 88, .18);
  --glow-neg: rgba(255, 69, 58, .16);
  --upd-badge: rgba(255, 255, 255, .1);
  --upd-gif: rgba(0, 0, 0, .6);
  --h-upd-badge: 18px;
  --h-upd-tag: 20px;
  --w-upd-tile: 28px;
  --w-upd-tile-l: 72px;
  --r-upd-tile: 8px;
  --r-upd-tile-l: 20px;
  --shadow-upd-tile: 0 0 0 1px var(--ring), 0 20px 40px rgba(0, 0, 0, .4);
  --fs-upd-title: 22px;
  --fs-upd-glyph: 14px;
  --fs-upd-glyph-l: 34px;
  --fs-upd-chip: 11.5px;
  --fs-upd-count: 26px;
  --tracking-upd: -.02em;
  --tracking-upd-group: .05em;
  --upd-art-top: 64px;                    /* "And N more": the two lists under the head */
  --upd-art-bottom: 22px;
  --upd-group-gap: 9px;
  --upd-dot: 4px;
  --upd-dot-top: 7px;
  --upd-link-gap: 5px;
  --upd-ver-gap: 1px;
  --upd-prog-gap: 7px;
  --w-upd-note-i: 18px;
  --upd-text-lines: 5;
  --upd-zoom: 1.03;                      /* a slide leaves: the picture grows a little, the text sinks */
  --upd-rise: 6px;
  --t-upd-fade: .18s;
  --t-upd-rise: .22s;
  --t-slide: 7000ms;
  --t-slide-swap: 160ms;
  /* Drawings on the chart (LAB-350, the owner's mockup "Chart Drawing Tools"): the palette a
     drawing's colour is a place in, the dashes, the handles and what the pointer catches, the
     panels and the settings */
  --draw-0: #ff9f0a;
  --draw-1: #ffd60a;
  --draw-2: #30d158;
  --draw-3: #64d2ff;
  --draw-4: #0a84ff;
  --draw-5: #bf5af2;
  --draw-6: #ff7eb6;
  --draw-7: #ff453a;
  --draw-8: #d4e157;
  --draw-9: #4fd1c5;
  --draw-10: #5ac8fa;
  --draw-11: #8e8cf7;
  --draw-12: #e8e8ea;
  --draw-13: #7c7c82;
  --draw-dash-1: 7 5;
  --draw-dash-2: 2 4;
  --draw-dash-3: 8 3 1 3;   /* dash-dot (LAB-405) */
  --draw-marker-k: 3.5;     /* a highlighter's stroke: its width 1-4 times this */
  --draw-tb-px: 7px;        /* a caption's plate: its padding across and down */
  --draw-tb-py: 4px;
  /* A drawing's settings (LAB-405, the owner's mockup): the popover and its rows. */
  --w-dw-pop: 360px;
  --w-dw-pv: 420px;         /* the preview beside the settings (r2): its plate, at least this tall */
  --h-dw-pv: 300px;
  --w-dw-pv-min: 830px;     /* a window narrower than this shows the settings alone */
  --sp-dw-edge: 16px;       /* the window keeps this far from the screen's edges */
  --dw-pv-grid: rgba(255, 255, 255, .045);
  --dw-pv-candle-alpha: .42;
  --h-dw-x: 26px;
  --h-dw-tab: 26px;
  --h-dw-cap: 30px;
  --h-dw-row: 36px;
  --w-dw-lbl: 100px;
  --h-dw-seg: 28px;
  --h-dw-ctl: 30px;
  --h-dw-foot: 32px;
  --w-dw-swatch: 20px;
  --w-dw-num: 110px;
  --w-dw-num-wide: 190px;
  --w-dw-num-price: 122px;
  --w-dw-num-bar: 68px;
  --w-dw-num-mid: 120px;
  --w-dw-num-short: 88px;
  --w-dw-slide: 120px;
  --w-dw-slide-val: 34px;
  --w-dw-lv: 64px;
  --w-dw-lvc: 32px;
  --h-dw-lvx: 22px;
  --w-dmenu: 300px;
  --h-dbar: var(--h-button); /* the selected drawing's bar on the chart (LAB-405): the app's sizes, the rail's icons */
  --w-dbar-grip: 16px;
  --w-dbar-btn: 30px;
  --h-dbar-btn: 30px;
  --w-dbar-chip: 32px;
  --h-dbar-wd: 30px;
  --w-dbar-dash: 36px;
  --w-dbar-bar: 18px;       /* a colour chip's bar */
  --w-dbar-list: 150px;     /* its width and line lists */
  --draw-bar-gap: 14px;     /* from the drawing's points */
  --draw-bar-top: 46px;     /* no higher than this: the tiles are there */
  --draw-bar-edge: 4px;
  /* Its colour picker: the frame, the spectrum, the tabs, the fields; the checkerboard under a
     colour with opacity; the palette's ten greys and ten hues (four shades of each are mixed). */
  --w-dcp: 280px;
  --h-dcp-sv: 164px;
  --h-cp-tab: 22px;
  --h-cp-field: 28px;
  --w-cp-back: 32px;
  --w-cp-pct: 62px;
  --gap-cp-grid: 3px;
  --shadow-knob: rgba(0, 0, 0, .5);
  --checker: repeating-conic-gradient(#636366 0% 25%, #2c2c2e 0% 50%) 0 0 / 8px 8px;
  --checker-s: repeating-conic-gradient(#8e8e93 0% 25%, #48484a 0% 50%) 0 0 / 6px 6px;
  --checker-xs: repeating-conic-gradient(#636366 0% 25%, #2c2c2e 0% 50%) 0 0 / 4px 4px;
  --dcp-gray-0: #ffffff; --dcp-gray-1: #e5e5ea; --dcp-gray-2: #c7c7cc; --dcp-gray-3: #aeaeb2; --dcp-gray-4: #98989f;
  --dcp-gray-5: #7c7c82; --dcp-gray-6: #636366; --dcp-gray-7: #48484a; --dcp-gray-8: #2c2c2e; --dcp-gray-9: #000000;
  --dcp-hue-0: #ff453a; --dcp-hue-1: #ff9f0a; --dcp-hue-2: #ffd60a; --dcp-hue-3: #d4e157; --dcp-hue-4: #30d158;
  --dcp-hue-5: #4fd1c5; --dcp-hue-6: #64d2ff; --dcp-hue-7: #0a84ff; --dcp-hue-8: #8e8cf7; --dcp-hue-9: #bf5af2;
  --draw-hit: 6px;          /* the pointer catches a line this near */
  --draw-grab: 7px;         /* and a handle */
  --draw-anchor: 4.5px;
  --draw-anchor-hot: 6px;
  --draw-snap-ring: 5px;    /* the magnet's mark at the crosshair */
  --draw-magnet: 30px;      /* the weak magnet pulls this far */
  --draw-dot: 3px;
  --draw-head: 8px;         /* an arrow's head, plus twice the line */
  --draw-box: rgba(28, 28, 30, .94);
  --draw-box-line: 15px;
  --draw-band-alpha: .16;   /* the selected drawing's span on the axes */
  --draw-weak-alpha: .75;   /* a hovered drawing's handles */
  --draw-pos-tp-alpha: .16;  /* a position's target zone */
  --draw-pos-sl-alpha: .14;  /* and its stop zone */
  --draw-pos-res-alpha: .22; /* the result so far, from its start to the exit */
  --draw-pos-line-alpha: .7; /* the target's and the stop's lines */
  --draw-pos-dash: 3 3;      /* the way from the entry to the exit */
  --draw-pos-dot: 3.5px;     /* the exit's mark */
  --draw-pos-w: 150px;       /* a new position is at least this wide */
  --t-draw-hold: 300ms;     /* a press held this long on a group opens its list */
  --draw-tools-x: 8px;      /* the tools' panel on the plot: this far from the % axis, and the tiles from it */
  --draw-pad: 3px;
  --w-draw-btn: 32px;
  --ico-draw: 18px;
  --w-draw-chev: 12px;      /* the corner that opens a group's list (the mockup) */
  --w-db: 26px;
  --h-db: 24px;
  --w-db-caret: 12px;
  --w-db-dash: 30px;
  --ico-db: 16px;
  --ico-db-s: 14px;
  --w-draw-fly: 270px;
  --h-fly-row: 32px;
  --w-dw-width: 40px;
  --w-dw-dash: 44px;
  --fs-draw-caret: 7px;
  --h-dw-line: 12px;
  --w-dw-w-ic: 24px;
  --w-dw-dash-ic: 28px;
  --w-dt-chev-ic: 5px;
  --sp-ob-empty: 40px;
  --draw-gap-s: 5px;
  --draw-name-pad: 7px;
  --w-objects: 196px;       /* the objects' column right of the rail (LAB-379, the mockup) */
  --h-ob-head: 42px;
  --h-ob-pill: 18px;        /* the count in its head */
  --h-ob-row: 28px;
  --w-ob-grip: 10px; --w-ob-grip-ic: 5px; --h-ob-grip-ic: 10px;
  --ico-ob: 15px;           /* a row's tool icon, a menu row's icon */
  --ico-xs: 13px; --ico-xs2: 12px;
  --ob-edge: 24px;          /* a dragged row this close to the list's edge scrolls it */
  --ob-scroll: 8px;         /* … by this much a frame */
  --ob-lift: 1.02;          /* the dragged row, a touch larger */
  --t-layer: .15s;          /* the rows sliding aside and home */
  --ease-layer: ease;
  --shadow-ob-lift: 0 8px 20px -6px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--line-2);
  --shadow-objs-float: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 60px -12px rgba(0, 0, 0, .9);
  --w-ob-menu: 210px; --h-ob-menu-row: 30px;
  --sp-px3: 3px; --sp-px5: 5px; --sp-px7: 7px;
  /* The drawing rail at the workspace's left edge (LAB-379, the mockup). */
  --w-rail: 44px;
  --r-panel: 12px;          /* a workspace column: the panels, the rail, the objects */
  --h-rail-btn: 28px;       /* its lower buttons */
  --w-rail-sep: 20px;
  --rail-dim: .4;           /* the tools with no chart to draw on */
  --fs-rail-count: 9px;
  /* The active chart: its tab, and its region's glow when the objects point at it. */
  --accent-tint-mid: rgba(255, 159, 10, .24);
  --accent-tint-hi: rgba(255, 159, 10, .28);
  --dot-act: 6px;           /* the active chart's dot on its tab */
  --glow-active: 0 0 0 2px var(--accent), 0 0 24px rgba(255, 159, 10, .35);
  --t-flash: 650ms;
  --h-kbd-s: 16px;          /* a small keycap: the drawing hint, the objects' foot */
  --draw-guide-dash: 4 4;   /* a channel's middle, a Fibonacci's guides */
  --draw-guide-alpha: .8;
  --draw-mid-alpha: .6;
  --draw-fill-channel: .1;  /* the backgrounds: a channel, a pitchfork, the Fibonacci bands */
  --draw-fill-fork: .08;
  --draw-fill-fib: .08;
  --draw-fibext-min: 80px;  /* an extension's levels at least this long */
  --draw-fib-label-room: 170px; /* room left of the levels for their labels, else they go above */
  --w-dw-check: 16px;
  /* Stage 3: shapes, brushes, rulers, notes and marks (the mockup's sizes) */
  --draw-fill-alpha: .14;   /* a shape's or a ruler's background */
  --draw-sel-alpha: .6;     /* the dashed frame round a selected text or brush stroke */
  --draw-sel-dash: 3 3;
  --draw-sel-pad: 6px;
  --draw-text-pad: 4px;
  --draw-text-lh: 1.3;      /* a text note's line height, by its size */
  --draw-brush-step: 2px;   /* a brush takes a point every this far */
  --draw-close: 9px;        /* a path closes when a point lands this near its first */
  --draw-ruler-gap: 6px;    /* a ruler's box from its range */
  --draw-ruler-head: 14px;  /* a ruler's arrow is long enough for a head */
  --draw-label-h: 22px;     /* a price label: its plate, the tail down to the price, the dot */
  --draw-label-tail: 9px;
  --draw-label-x: 10px;
  --draw-label-pad: 8px;
  --draw-label-dot: 2.5px;
  --draw-mark-head: 9px;    /* an arrow mark: half its head, the head's length, half the stem, the whole */
  --draw-mark-neck: 10px;
  --draw-mark-stem: 3.5px;
  --draw-mark-h: 23px;
  --draw-mark-text: 28px;   /* where its words begin from the point */
  --w-draw-te: 160px;       /* a text note's editor, at least */
  --draw-te-bg: rgba(0, 0, 0, .55);

  /* Depth */
  --shadow-menu: 0 20px 44px -16px rgba(0, 0, 0, .85);
  --shadow-modal: 0 30px 60px -20px rgba(0, 0, 0, .9);
  --shadow-knob: 0 1px 2px rgba(0, 0, 0, .4);
  --ring: rgba(255, 255, 255, .06);
  --blur: 3px;
  --blur-glass: 8px;
  --z-sticky: 2;
  --z-corner: 3;
  --z-splitter: 20;
  --z-dock: 30;
  --z-menu: 60;
  --z-popover: 65;
  --z-modal: 70;
  --z-toast: 90;
  --z-context: 96;
  --z-picker: 97;  /* the colour picker, over a menu or a popover */

  /* Motion */
  --t-fast: .15s;
  --t-order-repeat: 1000ms; /* two orders from keys or clicks are never closer than this (a double press is one order) */
  --t-move: .3s;
  --dim: .35;
  --faded: .45;
  --line-rest: .85;
  --line-hot: .95;

  --scrollbar: #48484a;

  /* ----- the funding page (LAB-419, the owner's mockup) ----- */
  --w-fund-card: 440px;     /* the coin's card beside the table */
  --w-fund-more: 28px;      /* the head's last column */
  --w-fund-search: 200px;
  --w-fund-search-s: 140px; /* the search of a panel narrower than 560 px */
  --sp-fund-cell: 3px;
  --h-fund-val: 18px;       /* a cell's value, a tinted plate for the rate */
  --ico-fund-mine: 11px;
  --ico-fund-mine-l: 12px;
  --h-fund-card-head: 42px;
  --h-fund-act: 28px;
  --h-fund-chart: 150px;
  --w-fund-axis: 52px;
  --h-fund-ro: 16px;
  --h-fund-range: 22px;
  --sp-fund-range: 9px;
  --sp-fund-line: 7px;
  --w-fund-swatch: 10px;
  --h-fund-acc-cap: 34px;
  --h-fund-acc-row: 26px;
  --h-fund-next-row: 34px;
  --w-fund-tile: 150px;
  --sp-fund-tile: 11px;
  --sp-fund-stat: 9px;
  --sp-fund-gap: 5px;
  --w-fund-sk: 64px;
  --h-fund-sk: 12px;
  --h-fund-sk-row: 10px;
  --w-fund-sk-1: 78px;
  --w-fund-sk-2: 56px;
  --w-fund-sk-3: 50px;
  --tracking-fund: .05em;
  --w-fund-np: 300px;
  --w-fund-np-ic: 32px;
  --h-fund-np-line: 42px;
  --w-fund-np-in: 96px;
  --sp-fund-pct: 22px;
  --sp-fund-pct-x: 9px;
  --fund-grid: rgba(255, 255, 255, .05);
  --fund-cursor: rgba(255, 255, 255, .28);
  --toggle-w-xs: 26px;
  --toggle-h-xs: 16px;
  --knob-xs: 12px;
  --sp-fund-sk-y: 3px;
  --ico-fund-np: 16px;
}