@tradecanvas/chart 1.43.0 → 1.44.0

package/dist/widget/index.js

@@ -1,5 +1,5 @@
-import { C as e, a as t, c as n, i as r, n as i, o as a, r as o, t as s } from "../LayoutSession-Cg9dd59R.js";
-import { a as c, c as l, i as u, n as d, o as f, r as p, s as m, t as h } from "../i18n-Bt8FI6Wl.js";
+import { C as e, a as t, c as n, i as r, n as i, o as a, r as o, t as s } from "../LayoutSession-Dh4Kqna4.js";
+import { a as c, c as l, i as u, n as d, o as f, r as p, s as m, t as h } from "../i18n-DjzoHpMJ.js";
 import { CHART_STYLE_KEYS as g, CHART_TYPE_ICONS as _, DARK_THEME as v, DEFAULT_SIGNAL_STYLE as y, DEFAULT_TRADE_ZONE_STYLE as b, DEFAULT_TRADING_CONFIG as x, DRAWING_TOOL_ICONS as ee, LIGHT_THEME as te, PHI as ne, PRICE_SOURCES as re, UI_ICONS as ie, barTimeUnit as ae, formatPrice as oe, iconSvg as se, indicatorSource as ce, isTimeFrame as le, isValidTimeZone as ue, marketStatus as de, offsetAt as fe, parseIndicatorSource as pe, phiStep as me, readChartStyleOverrides as he, readChartTypeOptions as ge, readIndicatorPlotStyles as _e, readNews as ve, readQuote as ye, sanitizeDrawingOptions as be, sanitizeDrawingStyle as xe, stepDecimals as Se, tickBarCount as Ce, timeParts as we, timeframeBucketStart as Te, timeframeToMs as S, tzLabel as Ee, wallToUtc as De, zoneOffsetMinutes as Oe } from "@tradecanvas/commons";
 import { ChartStateManager as ke, INDICATOR_CATEGORIES as Ae, INTERVAL_LIMITS as je, INTERVAL_UNITS as Me, MAX_ALERT_BARS as Ne, MIN_ALERT_BARS as Pe, RANGE_PRESETS as Fe, SYMBOL_INDICATOR_IDS as Ie, indicatorCategory as Le, indicatorValuePrecision as Re, isSeriesPalette as ze, plotColor as Be, plotShown as Ve, rangePresetStart as He, servesTimeframe as Ue, sourceParam as We, withResampling as Ge } from "@tradecanvas/core";
 //#region src/io/resampleOHLCV.ts
@@ -1224,7 +1224,7 @@ var O = [...new Set([
 		...jt
 	].flatMap((e) => e.rows.flatMap((e) => e.keys)),
 	...[...Ot, ...kt].flatMap((e) => e.keys)
-])], Ft = "/* === TradeCanvas Widget — Premium Styles === */\n\n/*\n * The HTML `hidden` attribute only sets `display: none` via the UA stylesheet,\n * which any author `display` rule (e.g. `.tcw-alerts-panel { display: flex }`)\n * silently overrides — leaving panels stuck open when JS sets `el.hidden = true`.\n * Force `hidden` to win for every namespaced widget element. Scoped to `tcw-`\n * so it never touches the host page.\n */\n[class^=\"tcw-\"][hidden],\n[class*=\" tcw-\"][hidden] {\n  display: none !important;\n}\n\n/* Control tooltips (WidgetTooltip): quick to appear, slide in from the control. */\n.tcw-tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 60;\n  max-width: 240px;\n  padding: var(--tcw-space-3) var(--tcw-space-4);\n  border-radius: var(--tcw-tooltip-radius);\n  background: var(--tcw-tooltip-bg);\n  color: var(--tcw-tooltip-fg);\n  box-shadow: var(--tcw-tooltip-shadow);\n  width: max-content;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight);\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transform: translate(var(--tcw-tip-dx, 0), var(--tcw-tip-dy, 0));\n  transition:\n    opacity 110ms var(--tcw-ease-out),\n    transform 110ms var(--tcw-ease-out),\n    visibility 0s linear 110ms;\n}\n\n.tcw-tooltip--visible {\n  opacity: 1;\n  visibility: visible;\n  transform: none;\n  transition:\n    opacity 110ms var(--tcw-ease-out),\n    transform 110ms var(--tcw-ease-out),\n    visibility 0s;\n}\n\n/* The modal portal: carries the tokens and fonts, but no box of its own. */\n.tcw-root.tcw-portal {\n  display: contents;\n}\n\n/* Fullscreen: the root fills the screen; the chart resizes with it. */\n.tcw-root:fullscreen {\n  width: 100vw;\n  height: 100vh;\n  height: 100dvh;\n}\n\n.tcw-root {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  font-family: var(--tcw-font);\n  font-feature-settings: 'cv11', 'ss01', 'ss03';\n  font-size: var(--tcw-font-size);\n  line-height: 1.4;\n  color: #e6e3dc;\n  background: #131416;\n  font-variant-numeric: tabular-nums;\n  position: relative;\n  overflow: hidden;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  /* --- Dark theme tokens (default) ---\n   * Print at night: warm ink on an off-black, never pure white on black, so\n   * text doesn't glare. Grey for everything that is normal; colour only where\n   * it means something. */\n  --tcw-bg: #131416;\n  --tcw-bg-surface: #131416;\n  --tcw-bg-elevated: #1b1c1f;\n  --tcw-bg-overlay: rgba(19, 20, 22, 0.6);\n  --tcw-border: #2a2b2f;\n  --tcw-border-strong: #3a3b40;\n  /* Tooltips are the ink turned over: light on the dark ground. */\n  --tcw-tooltip-bg: #e6e3dc;\n  --tcw-tooltip-fg: #131416;\n  --tcw-text: #e6e3dc;\n  --tcw-text-dim: #a9a6a0;\n  --tcw-text-muted: #8c8a85;\n\n  /* Ink blue: links, focus and what you picked. --tcw-accent-ink is the text colour on an accent fill. */\n  --tcw-accent: #7d9bff;\n  --tcw-accent-hover: #98b0ff;\n  --tcw-accent-ink: #131416;\n  --tcw-accent-soft: rgba(125, 155, 255, 0.14);\n  --tcw-accent-glow: rgba(125, 155, 255, 0.22);\n  --tcw-accent-line: rgba(125, 155, 255, 0.55);\n\n  --tcw-red: #e2706b;\n  --tcw-red-soft: rgba(226, 112, 107, 0.12);\n  --tcw-green: #4fae8a;\n  --tcw-green-soft: rgba(79, 174, 138, 0.12);\n\n  --tcw-hover-bg: rgba(230, 227, 220, 0.06);\n  --tcw-active-bg: rgba(230, 227, 220, 0.1);\n  --tcw-divider: rgba(230, 227, 220, 0.07);\n\n  /* Motion */\n  --tcw-ease: cubic-bezier(0.2, 0, 0, 1);\n  --tcw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --tcw-dur-fast: 120ms;\n  --tcw-dur-normal: 180ms;\n  --tcw-dur-slow: 260ms;\n\n  /* Spacing: Fibonacci numbers, so each step is near φ times the one before. */\n  --tcw-space-1: 2px;\n  --tcw-space-2: 3px;\n  --tcw-space-3: 5px;\n  --tcw-space-4: 8px;\n  --tcw-space-5: 13px;\n  --tcw-space-6: 21px;\n  --tcw-space-7: 34px;\n\n  /* The look (UI system): Print's values. The `ui` option sets them inline. */\n  --tcw-radius-xs: 1px;\n  --tcw-radius-sm: 2px;\n  --tcw-radius: 3px;\n  --tcw-radius-lg: 5px;\n  --tcw-radius-xl: 8px;\n  --tcw-control-radius: var(--tcw-radius);\n  --tcw-input-radius: var(--tcw-radius);\n  --tcw-menu-radius: var(--tcw-radius-lg);\n  --tcw-dialog-radius: var(--tcw-radius-xl);\n  --tcw-panel-radius: var(--tcw-radius-lg);\n  --tcw-tooltip-radius: var(--tcw-radius-sm);\n  --tcw-tag-radius: var(--tcw-radius-sm);\n  --tcw-toast-radius: var(--tcw-radius-lg);\n  --tcw-toolbar-radius: 0px;\n  --tcw-sidebar-radius: 0px;\n  --tcw-toolbar-h: 42px;\n  --tcw-control-h: 26px;\n  --tcw-control-h-sm: 20px;\n  --tcw-icon: 16px;\n  --tcw-sidebar-w: 42px;\n  --tcw-menu-item-h: 33px;\n  --tcw-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --tcw-font-size: 13px;\n  --tcw-font-size-sm: 11px;\n  --tcw-font-size-xs: 10px;\n  --tcw-font-size-lg: 15px;\n  --tcw-font-size-xl: 18px;\n  --tcw-font-size-display: 21px;\n  --tcw-weight: 400;\n  --tcw-weight-strong: 600;\n  --tcw-label-case: uppercase;\n  --tcw-label-tracking: 0.06em;\n  --tcw-border-w: 1px;\n  --tcw-sep-w: 1px;\n  --tcw-menu-shadow: 0 0 0 1px var(--tcw-border), var(--tcw-shadow-md);\n  --tcw-dialog-shadow: 0 0 0 1px var(--tcw-border), var(--tcw-shadow-lg);\n  --tcw-tooltip-shadow: var(--tcw-shadow-sm);\n  --tcw-blur: 0px;\n  --tcw-surface-opacity: 100%;\n\n  /* Elevation */\n  --tcw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --tcw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);\n  --tcw-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);\n  --tcw-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.35);\n  --tcw-ring: 0 0 0 2px rgba(125, 155, 255, 0.5);\n\n  /* Type */\n  --tcw-font-mono: 'Cascadia Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;\n}\n\n/* Print by day: ink on paper. */\n.tcw-root[data-tcw-theme='light'] {\n  color: #1b1d21;\n  background: #fbfaf6;\n\n  --tcw-bg: #fbfaf6;\n  --tcw-bg-surface: #fbfaf6;\n  --tcw-bg-elevated: #ffffff;\n  --tcw-bg-overlay: rgba(251, 250, 246, 0.8);\n  --tcw-border: #dcd8cf;\n  --tcw-border-strong: #c7c2b7;\n  --tcw-tooltip-bg: #1b1d21;\n  --tcw-tooltip-fg: #fbfaf6;\n  --tcw-text: #1b1d21;\n  --tcw-text-dim: #4a4e57;\n  --tcw-text-muted: #6c7077;\n\n  /* A deeper ink blue: readable as text on paper, white text readable on it. */\n  --tcw-accent: #2348c4;\n  --tcw-accent-hover: #1b3a9f;\n  --tcw-accent-ink: #ffffff;\n  --tcw-accent-soft: rgba(35, 72, 196, 0.1);\n  --tcw-accent-glow: rgba(35, 72, 196, 0.16);\n  --tcw-accent-line: rgba(35, 72, 196, 0.45);\n  --tcw-ring: 0 0 0 2px rgba(35, 72, 196, 0.4);\n\n  /* Darker semantic colours: used as text on paper. */\n  --tcw-red: #b8423f;\n  --tcw-red-soft: rgba(184, 66, 63, 0.1);\n  --tcw-green: #1f7a5c;\n  --tcw-green-soft: rgba(31, 122, 92, 0.1);\n\n  --tcw-hover-bg: rgba(27, 29, 33, 0.05);\n  --tcw-active-bg: rgba(27, 29, 33, 0.08);\n  --tcw-divider: #e7e3da;\n\n  /* Warm shadows, as paper casts. */\n  --tcw-shadow-sm: 0 1px 2px rgba(40, 34, 22, 0.06);\n  --tcw-shadow-md: 0 4px 12px rgba(40, 34, 22, 0.08), 0 1px 3px rgba(40, 34, 22, 0.05);\n  --tcw-shadow-lg: 0 12px 36px rgba(40, 34, 22, 0.13), 0 4px 12px rgba(40, 34, 22, 0.07);\n  --tcw-shadow-xl: 0 24px 64px rgba(40, 34, 22, 0.17), 0 12px 24px rgba(40, 34, 22, 0.09);\n}\n\n/* === Toolbar === */\n\n.tcw-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 var(--tcw-space-4);\n  height: var(--tcw-toolbar-h);\n  border-bottom: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  flex-shrink: 0;\n  position: relative;\n  z-index: 20;\n}\n\n.tcw-toolbar-symbol {\n  font-size: var(--tcw-font-size-lg);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  display: inline-flex;\n  align-items: center;\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-4);\n  white-space: nowrap;\n  letter-spacing: -0.015em;\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  border-radius: var(--tcw-control-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-toolbar-symbol:hover {\n  background: var(--tcw-hover-bg);\n}\n\n/* With the symbol search switched off, the button only names the symbol. */\n.tcw-toolbar-symbol[aria-disabled=\"true\"] {\n  cursor: default;\n}\n\n.tcw-toolbar-symbol[aria-disabled=\"true\"]:hover {\n  background: transparent;\n}\n\n.tcw-toolbar-sep {\n  width: var(--tcw-sep-w);\n  /* A button's height over phi: the rule stands as tall as the icons beside it. */\n  height: calc(var(--tcw-control-h) / 1.618);\n  background: var(--tcw-border);\n  flex-shrink: 0;\n  margin: 0 var(--tcw-space-3);\n}\n\n.tcw-toolbar-group {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n  padding: 0 var(--tcw-space-2);\n}\n\n.tcw-toolbar-spacer {\n  flex: 1;\n}\n\n.tcw-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-4);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight);\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease);\n  white-space: nowrap;\n  line-height: 1;\n  letter-spacing: -0.005em;\n}\n\n.tcw-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn:active {\n  transform: translateY(0.5px);\n}\n\n.tcw-btn.tcw-active {\n  background: var(--tcw-on-bg);\n  color: var(--tcw-on-fg);\n  font-weight: var(--tcw-weight-strong);\n  box-shadow: var(--tcw-on-ring);\n}\n\n.tcw-btn:focus-visible,\n.tcw-btn-icon:focus-visible,\n.tcw-sidebar-btn:focus-visible,\n.tcw-dropdown-trigger:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-btn-icon {\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease);\n  line-height: 1;\n  position: relative;\n}\n\n.tcw-btn-icon:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn-icon svg {\n  display: block;\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n\n.tcw-badge-count {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  padding: 1px var(--tcw-space-3);\n  border-radius: var(--tcw-tag-radius);\n  font-family: var(--tcw-font-mono);\n}\n\n/* === Dropdown === */\n\n.tcw-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-4);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight);\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.tcw-dropdown-trigger:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-dropdown {\n  position: absolute;\n  top: 100%;\n  margin-top: var(--tcw-space-3);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  z-index: 50;\n  width: max-content;\n  max-width: min(340px, calc(100vw - 16px));\n  padding: var(--tcw-menu-pad);\n  max-height: 420px;\n  overflow-y: auto;\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-pop-in {\n  from { opacity: 0; transform: translateY(-4px) scale(0.98); }\n  to { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n.tcw-dropdown-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--tcw-menu-item-h);\n  padding: var(--tcw-space-1) var(--tcw-space-4);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  width: 100%;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-align: start;\n  border-radius: var(--tcw-menu-item-radius);\n  gap: var(--tcw-space-5);\n}\n\n.tcw-dropdown-item:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n/* A menu row led by an icon (chart types): icon then label, not spread apart. */\n.tcw-dropdown-item--icon {\n  justify-content: flex-start;\n  gap: var(--tcw-space-4);\n}\n\n.tcw-dropdown-item svg,\n.tcw-flyout-item svg {\n  flex-shrink: 0;\n}\n\n/* The drawing-group button's icon holder: a plain box for the swapped SVG. */\n.tcw-sidebar-icon {\n  display: inline-flex;\n}\n\n.tcw-dropdown-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: var(--tcw-weight-strong);\n}\n\n/* Timeframe menu: pick on the left, pin (star) on the right. */\n.tcw-tf-more {\n  padding: 0 5px;\n}\n\n.tcw-tf-more svg {\n  display: block;\n}\n\n.tcw-tf-row {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.tcw-tf-row .tcw-dropdown-item {\n  flex: 1;\n  min-width: 0;\n}\n\n.tcw-tf-star {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-tf-star:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-tf-star.tcw-active {\n  color: var(--tcw-accent);\n}\n\n.tcw-tf-star.tcw-active svg {\n  fill: currentColor;\n}\n\n.tcw-tf-star:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n.tcw-tf-remove {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-tf-row:hover .tcw-tf-remove,\n.tcw-tf-remove:focus-visible {\n  opacity: 1;\n}\n\n/* No hover on touch screens: keep it visible rather than a hidden tap target. */\n@media (hover: none) {\n  .tcw-tf-remove { opacity: 1; }\n}\n\n.tcw-tf-remove:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-tf-remove:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* Typed interval, under the list: stays in view while the list scrolls. */\n.tcw-tf-custom {\n  position: sticky;\n  bottom: -6px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin: 4px -6px -6px;\n  padding: 6px 10px 8px;\n  border-top: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-elevated);\n}\n\n.tcw-tf-custom-hint:empty {\n  display: none;\n}\n\n.tcw-tf-custom-hint {\n  flex-basis: 100%;\n  width: 0;\n  min-width: 100%;\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.35;\n}\n\n.tcw-tf-custom-input {\n  flex: 1;\n  /* Fills the row: its own width would follow the font (16px on touch). */\n  width: 0;\n  min-width: 0;\n  height: 26px;\n  padding: 0 8px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text);\n  font: inherit;\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n}\n\n.tcw-tf-custom-input::placeholder {\n  color: var(--tcw-text-dim);\n}\n\n.tcw-tf-custom-input:focus {\n  outline: none;\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n\n.tcw-tf-custom-input[aria-invalid='true'] {\n  border-color: var(--tcw-red);\n  box-shadow: 0 0 0 2px var(--tcw-red-soft);\n}\n\n.tcw-tf-custom-add {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  flex-shrink: 0;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n  cursor: pointer;\n}\n\n.tcw-tf-custom-add:hover {\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent);\n}\n\n.tcw-tf-custom-add:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: 1px;\n}\n\n.tcw-dropdown-label {\n  text-transform: var(--tcw-label-case);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: var(--tcw-space-4) var(--tcw-space-4) var(--tcw-space-2);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-dropdown-divider {\n  border-top: 1px solid var(--tcw-divider);\n  margin: 6px 4px;\n}\n\n.tcw-tag {\n  font-size: var(--tcw-font-size-xs);\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  padding: 2px 6px;\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-hover-bg);\n  letter-spacing: 0.02em;\n}\n\n/* === Body === */\n\n.tcw-body {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  background: var(--tcw-bg);\n}\n\n.tcw-chart-container {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n/* === History pill (older bars loading at the left edge) === */\n\n.tcw-history-pill {\n  position: absolute;\n  top: 50%;\n  left: 10px;\n  z-index: 4;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 10px 5px 8px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-shadow-sm);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1;\n  white-space: nowrap;\n  transform: translateY(-50%);\n  opacity: 1;\n  transition: opacity var(--tcw-dur-normal) var(--tcw-ease-out);\n  pointer-events: none;\n}\n\n.tcw-history-pill--hidden {\n  opacity: 0;\n}\n\n.tcw-history-pill--error {\n  border-color: color-mix(in srgb, var(--tcw-red) 45%, var(--tcw-border));\n  color: var(--tcw-red);\n}\n\n.tcw-history-spinner {\n  width: 10px;\n  height: 10px;\n  border: 1.5px solid var(--tcw-accent-soft);\n  border-top-color: var(--tcw-accent);\n  border-radius: 50%;\n  animation: tcw-history-spin 0.8s linear infinite;\n}\n\n.tcw-history-pill--error .tcw-history-spinner {\n  border-color: currentColor;\n  animation: none;\n}\n\n@keyframes tcw-history-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* === Loading overlay (candle skeleton) === */\n\n.tcw-loading-overlay {\n  /* Uses a modifier class rather than the `hidden` attribute — the global\n     `[hidden] { display: none !important }` rule above would cut the\n     opacity transition off before it can play. */\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--tcw-bg);\n  opacity: 1;\n  transition: opacity var(--tcw-dur-slow) var(--tcw-ease-out);\n  pointer-events: none;\n}\n\n.tcw-loading-overlay--hidden {\n  opacity: 0;\n}\n\n.tcw-loading-card {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 14px;\n  padding: 22px 26px 20px;\n  border: 1px solid transparent;\n  border-radius: var(--tcw-panel-radius);\n}\n\n/* A slow switch: the previous chart stays readable underneath, dimmed, so the\n   click visibly registered without blanking the screen. */\n.tcw-loading-overlay--veil {\n  background: color-mix(in srgb, var(--tcw-bg) 55%, transparent);\n}\n\n.tcw-loading-overlay--veil .tcw-loading-card {\n  background: var(--tcw-bg-elevated);\n  border-color: var(--tcw-border);\n  box-shadow: var(--tcw-menu-shadow);\n}\n\n.tcw-loading-candles {\n  position: relative;\n  display: flex;\n  gap: 7px;\n  height: 64px;\n}\n\n/* One candle: the element is the wick's column, ::before the wick, ::after the body. */\n.tcw-loading-candle {\n  position: relative;\n  width: 8px;\n  height: 100%;\n  color: var(--tcw-red);\n  opacity: 0.28;\n  animation: tcw-candle-light 1.6s var(--tcw-ease) infinite;\n  animation-delay: var(--tcw-delay, 0ms);\n}\n\n.tcw-loading-candle--up { color: var(--tcw-green); }\n\n.tcw-loading-candle::before,\n.tcw-loading-candle::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  background: currentColor;\n  transform: translateX(-50%);\n}\n\n.tcw-loading-candle::before {\n  top: var(--tcw-wick-top);\n  width: 1.5px;\n  height: var(--tcw-wick-h);\n}\n\n.tcw-loading-candle::after {\n  top: var(--tcw-body-top);\n  width: 8px;\n  height: var(--tcw-body-h);\n  border-radius: 1.5px;\n}\n\n/* Each candle brightens and lifts slightly in turn, left to right. */\n@keyframes tcw-candle-light {\n  0%, 55%, 100% { opacity: 0.28; transform: translateY(0); }\n  20% { opacity: 1; transform: translateY(-2px); }\n}\n\n.tcw-loading-track {\n  position: relative;\n  width: 100%;\n  min-width: 88px;\n  height: 2px;\n  border-radius: 1px;\n  background: var(--tcw-border);\n  overflow: hidden;\n}\n\n.tcw-loading-track > span {\n  position: absolute;\n  inset: 0;\n  width: 40%;\n  border-radius: 1px;\n  background: linear-gradient(90deg, transparent, var(--tcw-accent), transparent);\n  animation: tcw-loading-sweep 1.6s var(--tcw-ease) infinite;\n}\n\n@keyframes tcw-loading-sweep {\n  from { transform: translateX(-100%); }\n  to { transform: translateX(250%); }\n}\n\n/* The status text is announced, not shown — the candles say \"loading\". */\n.tcw-loading-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.tcw-loading-overlay--error .tcw-loading-candles,\n.tcw-loading-overlay--error .tcw-loading-track {\n  display: none;\n}\n\n/* A failure is shown: why the chart is empty and that a retry is running. */\n.tcw-loading-overlay--error .tcw-loading-label {\n  position: static;\n  width: auto;\n  height: auto;\n  overflow: visible;\n  clip-path: none;\n  white-space: normal;\n  max-width: 320px;\n  text-align: center;\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size);\n}\n\n/* Reduced motion: nothing slides or lifts, but the candles still glow in\n   turn and the track breathes, so the wait never looks frozen. */\n@media (prefers-reduced-motion: reduce) {\n  .tcw-loading-candle {\n    animation: tcw-candle-glow 2.4s ease-in-out infinite;\n    animation-delay: var(--tcw-delay, 0ms);\n  }\n  .tcw-loading-track > span {\n    width: 100%;\n    background: var(--tcw-accent);\n    animation: tcw-loading-breathe 2.4s ease-in-out infinite;\n  }\n}\n\n@keyframes tcw-candle-glow {\n  0%, 60%, 100% { opacity: 0.28; }\n  25% { opacity: 0.9; }\n}\n\n@keyframes tcw-loading-breathe {\n  0%, 100% { opacity: 0.15; }\n  50% { opacity: 0.7; }\n}\n\n/* === On-chart indicator legend (WidgetIndicatorLegend) === */\n\n.tcw-ind-legend {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 1px;\n  max-width: calc(100% - 140px);\n  pointer-events: none;\n}\n\n.tcw-ind-legend--collapsed > .tcw-ind-legend-row {\n  display: none;\n}\n\n.tcw-ind-legend-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  max-width: 100%;\n  padding: 0 var(--tcw-space-2);\n  border-radius: var(--tcw-radius-sm);\n  /* The figures face at the size of the price legend above: one block, columns that line up. */\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 19px;\n  font-feature-settings: 'tnum';\n  white-space: nowrap;\n  color: var(--tcw-text-dim);\n  pointer-events: auto;\n  cursor: default;\n  /* A narrow pane: the values shrink first, then the row is clipped. */\n  overflow: hidden;\n}\n\n/* A pane's indicator: at the top of its pane, where the canvas title was,\n   short enough to sit in the pane's header below the divider's grab zone. */\n.tcw-ind-legend-row--pane {\n  position: absolute;\n  z-index: 3;\n  line-height: 15px;\n}\n\n.tcw-ind-legend-row:hover,\n.tcw-ind-legend-row:focus-within {\n  background: color-mix(in srgb, var(--tcw-bg-elevated) 90%, transparent);\n  box-shadow: 0 0 0 1px var(--tcw-border);\n}\n\n.tcw-ind-legend-name {\n  padding: 0;\n  border: none;\n  background: none;\n  font: inherit;\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  cursor: pointer;\n}\n\n.tcw-ind-legend-name:hover {\n  color: var(--tcw-accent);\n}\n\n.tcw-ind-legend-values {\n  display: inline-flex;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n  overflow: hidden;\n}\n\n.tcw-ind-legend-row--hidden .tcw-ind-legend-name,\n.tcw-ind-legend-row--hidden .tcw-ind-legend-values {\n  opacity: 0.45;\n}\n\n/* Show / settings / remove: on hover or keyboard focus (always on touch). */\n.tcw-ind-legend-actions {\n  display: none;\n  gap: 1px;\n  margin-left: -2px;\n}\n\n.tcw-ind-legend-row:hover .tcw-ind-legend-actions,\n.tcw-ind-legend-row:focus-within .tcw-ind-legend-actions {\n  display: inline-flex;\n}\n\n@media (hover: none) {\n  .tcw-ind-legend-actions {\n    display: inline-flex;\n  }\n\n  /* Finger-sized targets. */\n  .tcw-ind-legend-act,\n  .tcw-ind-legend-toggle {\n    min-width: 28px;\n    min-height: 24px;\n  }\n}\n\n.tcw-ind-legend-act {\n  display: inline-grid;\n  place-items: center;\n  width: 20px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-ind-legend-act:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ind-legend-act[data-act='remove']:hover {\n  color: var(--tcw-red);\n}\n\n.tcw-ind-legend-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  margin-top: 1px;\n  padding: 1px 5px;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.tcw-ind-legend-toggle[hidden] {\n  display: none;\n}\n\n.tcw-ind-legend-toggle:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ind-legend-name:focus-visible,\n.tcw-ind-legend-act:focus-visible,\n.tcw-ind-legend-toggle:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* === Sidebar === */\n\n.tcw-sidebar {\n  width: var(--tcw-sidebar-w);\n  flex-shrink: 0;\n  background: var(--tcw-bg-surface);\n  border-inline-end: var(--tcw-border-w) solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--tcw-space-3) 0;\n  /* On a short screen the tools scroll; the menus sit outside it. */\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.tcw-sidebar::-webkit-scrollbar {\n  display: none;\n}\n.tcw-sidebar > * {\n  flex-shrink: 0;\n}\n\n.tcw-tool-group-wrap {\n  position: relative;\n}\n\n.tcw-sidebar-btn {\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  margin: 1px 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease);\n  position: relative;\n  flex-shrink: 0;\n  line-height: 1;\n  border-radius: var(--tcw-control-radius);\n}\n\n.tcw-sidebar-btn svg {\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n\n.tcw-sidebar-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-sidebar-btn.tcw-active {\n  color: var(--tcw-on-icon-fg);\n  background: var(--tcw-on-icon-bg);\n  box-shadow: var(--tcw-on-icon-ring);\n}\n\n.tcw-sidebar-btn.tcw-danger:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-red-soft);\n}\n\n.tcw-multi-dot {\n  position: absolute;\n  bottom: 3px;\n  right: 3px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  opacity: 0.7;\n}\n\n/* The drawing tools' sections: always a hairline (it groups the tools), even in\n   looks that drop the rules between toolbar groups. */\n.tcw-sidebar-divider {\n  width: 20px;\n  height: max(1px, var(--tcw-sep-w));\n  background: var(--tcw-divider);\n  margin: 5px 0;\n  flex-shrink: 0;\n}\n\n.tcw-sidebar-spacer {\n  flex: 1;\n}\n\n/* === Flyout === */\n\n.tcw-flyout {\n  position: absolute;\n  margin-inline-start: 6px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  min-width: 180px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  z-index: 30;\n  padding: var(--tcw-menu-pad);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  animation: tcw-slide-right var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n/* Spans the gap to the toolbar button: crossing it stays inside the menu. */\n.tcw-flyout::before {\n  content: '';\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  right: 100%;\n  width: 8px;\n}\n\n@keyframes tcw-slide-right {\n  from { opacity: 0; transform: translateX(-4px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.tcw-flyout-header {\n  text-transform: var(--tcw-label-case);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-2);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-flyout-hint {\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-1);\n  border-top: 1px solid var(--tcw-border);\n  margin-top: var(--tcw-space-2);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n\n.tcw-flyout-item {\n  min-height: var(--tcw-menu-item-h);\n  padding: var(--tcw-space-1) var(--tcw-space-4);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  border: none;\n  background: transparent;\n  text-align: start;\n  font-family: inherit;\n  border-radius: var(--tcw-menu-item-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-flyout-item:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n.tcw-flyout-item:focus-visible {\n  outline: none;\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n  box-shadow: inset 0 0 0 1px var(--tcw-accent);\n}\n\n.tcw-flyout-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: var(--tcw-weight-strong);\n}\n\n\n/* Favorites strip — pinned drawing tools above the tool groups. */\n.tcw-sidebar-favorites {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.tcw-sidebar-favorites .tcw-sidebar-btn {\n  position: relative;\n}\n.tcw-sidebar-favorites .tcw-sidebar-btn::before {\n  content: '';\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  opacity: 0.7;\n}\n\n/* === Modal === */\n\n.tcw-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(12, 12, 10, 0.42);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  z-index: 100;\n  animation: tcw-fade-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.tcw-modal {\n  position: fixed;\n  z-index: 101;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-dialog-radius);\n  width: 520px;\n  max-width: 92vw;\n  max-height: 82vh;\n  max-height: 82dvh;\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--tcw-dialog-shadow);\n  animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n}\n\n@keyframes tcw-modal-in {\n  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }\n  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }\n}\n\n.tcw-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n/* A dialog's title is phi times its text (21 to 13). */\n.tcw-modal-header h3 {\n  font-size: var(--tcw-font-size-display);\n  font-weight: var(--tcw-weight-strong);\n  margin: 0;\n  color: var(--tcw-text);\n  letter-spacing: -0.015em;\n}\n\n.tcw-modal-close {\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border-radius: var(--tcw-control-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-modal-close:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-modal-tabs {\n  display: flex;\n  /* Four tabs in a long language on a phone: they wrap rather than clip. No overflow here: in the\n     dialog's column it would let a long body squash the tabs, and clip the underline of the active one. */\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  gap: var(--tcw-space-2);\n  padding: var(--tcw-tabs-pad-block) var(--tcw-space-6);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n.tcw-modal-tab {\n  flex-shrink: 0;\n  white-space: nowrap;\n  height: var(--tcw-tab-h);\n  padding: var(--tcw-tab-pad);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight);\n  color: var(--tcw-text-muted);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-bottom: var(--tcw-tab-line) solid transparent;\n  border-radius: var(--tcw-tab-radius);\n  margin-bottom: calc(var(--tcw-tab-line) / -2);\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n  font-family: inherit;\n  letter-spacing: -0.005em;\n}\n\n.tcw-modal-tab:hover {\n  color: var(--tcw-text-dim);\n  background: var(--tcw-tab-hover);\n}\n\n.tcw-modal-tab.tcw-active {\n  color: var(--tcw-tab-on-fg);\n  background: var(--tcw-tab-on-bg);\n  border-bottom-color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-modal-body {\n  padding: var(--tcw-space-6);\n  overflow-y: auto;\n  flex: 1;\n}\n\n.tcw-settings-section {\n  margin-bottom: var(--tcw-space-6);\n}\n\n.tcw-settings-section:last-child {\n  margin-bottom: 0;\n}\n\n.tcw-settings-section-title {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  margin-bottom: var(--tcw-space-4);\n}\n\n.tcw-settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tcw-space-4) 0;\n}\n\n.tcw-settings-row + .tcw-settings-row {\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-settings-label {\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text-dim);\n  letter-spacing: -0.005em;\n}\n\n.tcw-color-picker-wrap {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.tcw-color-picker-wrap input[type='color'] {\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  cursor: pointer;\n  padding: 2px;\n}\n\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch {\n  border: none;\n  border-radius: var(--tcw-radius-xs);\n}\n\n.tcw-color-hex {\n  font-size: var(--tcw-font-size-xs);\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  min-width: 64px;\n  letter-spacing: 0.01em;\n}\n\n/* A colour left to the part itself: the swatch shows where the picker starts, faded. */\n.tcw-color-auto input[type='color'] {\n  opacity: 0.45;\n  border-style: dashed;\n}\n\n.tcw-color-auto .tcw-color-hex {\n  font-family: inherit;\n  font-style: italic;\n}\n\n.tcw-color-auto-btn {\n  height: 24px;\n  padding: 0 8px;\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  background: transparent;\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-color-auto-btn:hover,\n.tcw-color-auto-btn:focus-visible {\n  color: var(--tcw-text);\n  border-color: var(--tcw-accent);\n}\n\n.tcw-toggle {\n  width: 36px;\n  height: 20px;\n  background: rgba(255, 255, 255, 0.12);\n  border-radius: 10px;\n  position: relative;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n  border: none;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n.tcw-toggle::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition:\n    left var(--tcw-dur-normal) var(--tcw-ease-out),\n    background var(--tcw-dur-fast) var(--tcw-ease);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-glow);\n}\n\n.tcw-toggle.tcw-on::after {\n  left: 18px;\n  background: #fff;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle::after {\n  background: #999;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on::after {\n  background: #fff;\n}\n\n.tcw-settings-select {\n  padding: 6px 10px;\n  font-size: var(--tcw-font-size-sm);\n  font-family: inherit;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  color: var(--tcw-text);\n  cursor: pointer;\n  transition: border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-settings-select:hover {\n  border-color: var(--tcw-border-strong);\n}\n\n.tcw-settings-select:focus-visible {\n  outline: none;\n  border-color: var(--tcw-accent);\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-top: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  border-radius: 0 0 var(--tcw-dialog-radius) var(--tcw-dialog-radius);\n}\n\n.tcw-reset-link {\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  text-decoration-color: var(--tcw-border-strong);\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), text-decoration-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-reset-link:hover {\n  color: var(--tcw-text-dim);\n  text-decoration-color: currentColor;\n}\n\n.tcw-done-btn {\n  padding: var(--tcw-space-4) var(--tcw-space-6);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease),\n    box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n  letter-spacing: -0.005em;\n}\n\n.tcw-done-btn:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-done-btn:disabled { opacity: 0.45; cursor: not-allowed; }\n\n.tcw-done-btn:active {\n  transform: translateY(0.5px);\n}\n\n/* === Status Bar === */\n\n.tcw-statusbar {\n  /* Above sidebar buttons that overflow a short chart; menus (z 30+) stay on top. */\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 7px 16px;\n  border-top: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  flex-shrink: 0;\n  font-feature-settings: 'tnum';\n}\n\n.tcw-status-right {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  margin-inline-start: auto;\n  min-width: 0;\n  white-space: nowrap;\n}\n\n/* Narrow screens: the range presets close up. */\n@media (max-width: 640px) {\n  .tcw-range-btn {\n    padding: 4px 5px;\n  }\n}\n\n/* Range presets + go to date, bottom left */\n.tcw-range-bar {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n  margin: -4px 12px -4px -8px;\n  min-width: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n.tcw-range-bar::-webkit-scrollbar {\n  display: none;\n}\n\n.tcw-range-btn {\n  flex-shrink: 0;\n  padding: 4px 7px;\n  font: inherit;\n  font-weight: var(--tcw-weight-strong);\n  letter-spacing: 0.02em;\n  color: var(--tcw-text-muted);\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-range-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-range-btn:active {\n  color: var(--tcw-accent);\n}\n\n.tcw-range-btn:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n.tcw-range-goto {\n  display: inline-grid;\n  place-items: center;\n  margin-inline-start: 6px;\n  padding: 4px 6px;\n}\n\n.tcw-range-goto svg {\n  display: block;\n}\n\n.tcw-status-indicator {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  font-weight: var(--tcw-weight);\n}\n\n.tcw-status-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition: background var(--tcw-dur-normal) var(--tcw-ease), box-shadow var(--tcw-dur-normal) var(--tcw-ease);\n  position: relative;\n}\n\n.tcw-status-dot.tcw-connected {\n  background: var(--tcw-green);\n  box-shadow: 0 0 0 3px rgba(31, 168, 116, 0.18);\n}\n\n.tcw-status-dot.tcw-connected::after {\n  content: '';\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--tcw-green);\n  opacity: 0;\n  animation: tcw-pulse 2.2s ease-out 3;\n}\n\n@keyframes tcw-pulse {\n  0% { opacity: 0.6; transform: scale(0.6); }\n  100% { opacity: 0; transform: scale(2.2); }\n}\n\n.tcw-status-dot.tcw-error {\n  background: var(--tcw-red);\n  box-shadow: 0 0 0 3px rgba(232, 80, 91, 0.2);\n}\n\n/* === Watchlist === */\n\n.tcw-watchlist {\n  width: 220px;\n  flex-shrink: 0;\n  background: var(--tcw-bg-surface);\n  border-inline-start: 1px solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-shadow: var(--tcw-shadow-sm);\n}\n\n.tcw-watchlist-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 8px 6px 8px;\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n/* The shown list's name: opens the lists menu. */\n.tcw-watchlist-name {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--tcw-control-h-sm);\n  padding: 0 6px;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  text-align: start;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.tcw-watchlist-name::after {\n  content: '';\n  flex: none;\n  width: 0;\n  height: 0;\n  margin-inline-start: auto;\n  border: 4px solid transparent;\n  border-top-color: currentColor;\n  border-bottom-width: 0;\n  opacity: 0.7;\n}\n\n.tcw-watchlist-add {\n  flex: none;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-lg);\n  line-height: 1;\n  cursor: pointer;\n}\n\n.tcw-watchlist-name:hover,\n.tcw-watchlist-add:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n.tcw-watchlist-name:focus-visible,\n.tcw-watchlist-add:focus-visible,\n.tcw-watchlist-input:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* The lists menu, under the header. */\n.tcw-watchlist-menu {\n  top: calc(100% - 2px);\n  left: 6px;\n  right: 6px;\n  margin-top: 0;\n}\n.tcw-watchlist-count {\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n}\n.tcw-watchlist-menu .tcw-danger {\n  color: var(--tcw-red);\n}\n\n/* Naming a list in place. */\n.tcw-watchlist-input {\n  flex: 1;\n  min-width: 0;\n  height: var(--tcw-control-h-sm);\n  padding: 0 8px;\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n}\n\n.tcw-watchlist-empty {\n  padding: 16px 14px;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.5;\n}\n\n/* A row's remove button shows on hover or focus, over its numbers. */\n.tcw-watchlist-remove {\n  position: absolute;\n  top: 50%;\n  right: 6px;\n  display: grid;\n  place-items: center;\n  width: 20px;\n  height: 20px;\n  border: 0;\n  border-radius: var(--tcw-radius-sm);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  line-height: 1;\n  opacity: 0;\n  transform: translateY(-50%);\n  cursor: pointer;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-watchlist-row:hover .tcw-watchlist-remove,\n.tcw-watchlist-row:focus-within .tcw-watchlist-remove {\n  opacity: 1;\n}\n.tcw-watchlist-remove:hover {\n  color: var(--tcw-red);\n}\n.tcw-watchlist-row.tcw-watchlist-dragging {\n  opacity: 0.45;\n}\n\n.tcw-watchlist-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n\n.tcw-watchlist-row {\n  position: relative;\n  display: grid;\n  grid-template-columns: 1fr auto auto;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n  border-inline-start: 2px solid transparent;\n  outline: none;\n}\n\n.tcw-watchlist-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-watchlist-row:focus-visible {\n  background: var(--tcw-hover-bg);\n  border-inline-start-color: var(--tcw-accent);\n}\n\n.tcw-watchlist-row.tcw-watchlist-active {\n  background: var(--tcw-accent-soft);\n  border-inline-start-color: var(--tcw-accent);\n}\n\n.tcw-watchlist-symbol {\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  letter-spacing: -0.005em;\n  white-space: nowrap;\n}\n\n.tcw-watchlist-spark {\n  width: 56px;\n  height: 22px;\n  align-self: center;\n}\n\n.tcw-watchlist-stats {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 1px;\n  font-variant-numeric: tabular-nums;\n  font-family: var(--tcw-font-mono);\n}\n\n.tcw-watchlist-price {\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  font-weight: var(--tcw-weight);\n}\n\n.tcw-watchlist-change {\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  font-weight: var(--tcw-weight);\n}\n\n.tcw-watchlist-change.tcw-up {\n  color: var(--tcw-green);\n}\n\n.tcw-watchlist-change.tcw-down {\n  color: var(--tcw-red);\n}\n\n/* === Toast === */\n\n.tcw-toast-icon {\n  display: inline-flex;\n  vertical-align: -2px;\n  margin-inline-end: 7px;\n  color: var(--tcw-accent);\n}\n.tcw-toast-error .tcw-toast-icon { color: var(--tcw-red); }\n\n/* Over an open dialog: above its backdrop, at the window's foot. */\n.tcw-toast.tcw-toast-over {\n  position: fixed;\n  z-index: 120;\n}\n\n.tcw-toast {\n  position: absolute;\n  bottom: 60px;\n  left: 50%;\n  transform: translate(-50%, 12px);\n  z-index: 40;\n  padding: var(--tcw-space-4) var(--tcw-space-5);\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-toast-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight);\n  color: var(--tcw-text);\n  opacity: 0;\n  transition: opacity var(--tcw-dur-normal) var(--tcw-ease-out), transform var(--tcw-dur-normal) var(--tcw-ease-out);\n  pointer-events: none;\n  max-width: calc(100% - 32px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  letter-spacing: -0.005em;\n}\n\n.tcw-toast.tcw-toast-in {\n  opacity: 1;\n  transform: translate(-50%, 0);\n}\n\n.tcw-toast-error {\n  border-color: var(--tcw-red);\n  color: var(--tcw-red);\n}\n\n/* === Replay scrubber === */\n\n/* Picking the replay start: the bars right of the pointer would be hidden. */\n.tcw-replay-shade {\n  position: absolute;\n  z-index: 4;\n  pointer-events: none;\n  background: color-mix(in srgb, var(--tcw-bg) 62%, transparent);\n  border-inline-start: 1.5px dashed var(--tcw-accent);\n}\n\n.tcw-replay-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.tcw-replay-group[hidden] { display: none; }\n\n.tcw-replay-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px;\n  color: var(--tcw-text-dim);\n  white-space: nowrap;\n}\n\n.tcw-replay-text-btn {\n  height: 26px;\n  padding: 0 10px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-weight: var(--tcw-weight);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast), border-color var(--tcw-dur-fast), color var(--tcw-dur-fast);\n}\n\n.tcw-replay-text-btn:hover { background: var(--tcw-hover-bg); border-color: var(--tcw-border-strong); }\n.tcw-replay-text-btn:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* At the last bar: the way out is the next thing to do. */\n.tcw-replay-bar--ended .tcw-replay-realtime {\n  background: var(--tcw-accent);\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n}\n\n.tcw-replay-btn:disabled { opacity: 0.4; cursor: default; }\n\n@media (max-width: 640px) {\n  .tcw-replay-bar {\n    flex-wrap: wrap;\n    justify-content: center;\n    max-width: calc(100% - 24px);\n    border-radius: var(--tcw-panel-radius);\n  }\n  .tcw-replay-hint { white-space: normal; }\n}\n\n.tcw-replay-bar {\n  position: absolute;\n  left: 50%;\n  /* Above the 30px time axis, so its dates stay readable. */\n  bottom: 40px;\n  transform: translateX(-50%);\n  z-index: 25;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n.tcw-replay-btn {\n  width: 28px;\n  height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-dim);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  font-family: inherit;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-replay-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-replay-btn.tcw-replay-play {\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  width: 32px;\n  height: 32px;\n  box-shadow: 0 0 0 3px var(--tcw-accent-glow);\n}\n\n.tcw-replay-btn.tcw-replay-play:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-replay-scrubber {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 220px;\n  height: 4px;\n  background: var(--tcw-border-strong);\n  border-radius: 2px;\n  outline: none;\n  cursor: pointer;\n}\n\n.tcw-replay-scrubber::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n  box-shadow: 0 0 0 1px var(--tcw-accent), 0 2px 6px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n}\n\n.tcw-replay-scrubber::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n  box-shadow: 0 0 0 1px var(--tcw-accent), 0 2px 6px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n}\n\n.tcw-replay-progress {\n  font-size: var(--tcw-font-size-xs);\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  min-width: 64px;\n  text-align: center;\n  font-feature-settings: 'tnum';\n}\n\n.tcw-replay-speed {\n  padding: 4px 8px;\n  font-size: var(--tcw-font-size-xs);\n  font-family: var(--tcw-font-mono);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n}\n\n.tcw-replay-speed:hover {\n  border-color: var(--tcw-border-strong);\n}\n\n@media (max-width: 640px) {\n  .tcw-replay-scrubber {\n    width: 140px;\n  }\n  .tcw-replay-progress {\n    display: none;\n  }\n}\n\n/* === Responsive === */\n\n@media (max-width: 768px) {\n  .tcw-toolbar {\n    padding: 0 4px;\n    height: max(44px, var(--tcw-toolbar-h));   /* Apple HIG minimum touch target */\n  }\n  .tcw-toolbar-sep {\n    display: none;\n  }\n  .tcw-btn,\n  .tcw-dropdown-trigger {\n    height: max(40px, var(--tcw-control-h));   /* fatter tap target */\n    padding: 0 12px;\n    font-size: var(--tcw-font-size);\n  }\n  .tcw-btn-icon {\n    width: max(40px, var(--tcw-control-h));\n    height: max(40px, var(--tcw-control-h));\n  }\n  .tcw-sidebar {\n    width: max(44px, var(--tcw-sidebar-w));\n  }\n  .tcw-sidebar-btn {\n    width: max(40px, var(--tcw-control-h));\n    height: max(40px, var(--tcw-control-h));\n  }\n  .tcw-modal {\n    width: 94vw;\n    border-radius: var(--tcw-dialog-radius);\n  }\n\n  /* Replay scrubber compact mode */\n  .tcw-replay-scrubber {\n    width: 120px;\n  }\n  .tcw-replay-progress {\n    display: none;\n  }\n}\n\n/* === Mobile bottom-sheet pattern ===\n * On phones, swap floating-centered modals for full-width sheets that slide\n * up from the bottom. Bigger hit targets, no awkward off-screen clipping,\n * matches how every modern iOS/Android app handles overflow UI.\n */\n@media (max-width: 640px) {\n  .tcw-modal {\n    top: auto;\n    /* Above the on-screen keyboard (the widget sets it from visualViewport). */\n    bottom: var(--tcw-keyboard-inset, 0px);\n    padding-left: env(safe-area-inset-left, 0px);\n    padding-right: env(safe-area-inset-right, 0px);\n    left: 0;\n    right: 0;\n    transform: none;\n    /* The border and the safe-area padding inside the screen's width. */\n    box-sizing: border-box;\n    width: 100vw;\n    max-width: 100vw;\n    /* Less the on-screen keyboard: a sheet's top never goes above the screen. */\n    max-height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    max-height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n    border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n    border-bottom: none;\n    /* Grab handle */\n    padding-top: 8px;\n  }\n\n  /* Visual \"grab handle\" affordance — a short pill at the top of every sheet */\n  .tcw-modal::before {\n    content: '';\n    display: block;\n    width: 36px;\n    height: 4px;\n    border-radius: 2px;\n    background: var(--tcw-border-strong);\n    margin: 0 auto 8px;\n    opacity: 0.7;\n  }\n\n  /* Reuse the existing modal-in animation but slide from below instead of\n   * popping from center, so the entrance reads as a sheet, not a dialog. */\n  @keyframes tcw-modal-in {\n    from { opacity: 0; transform: translateY(20px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .tcw-modal {\n    animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n  }\n\n  /* Safe-area-aware footer padding for iPhone notch / home indicator */\n  .tcw-modal-footer {\n    padding-bottom: max(14px, env(safe-area-inset-bottom));\n  }\n\n  /* Larger tap targets inside sheets: taller, not more padding, so a tab's text stays inside its chip. */\n  .tcw-modal-tab {\n    min-height: 40px;\n    padding-inline: 16px;\n  }\n  .tcw-dropdown-item {\n    padding: 12px 12px;\n    font-size: var(--tcw-font-size-lg);\n  }\n}\n\n/* === Price alerts panel === */\n\n.tcw-alerts-panel {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 40;\n  width: 300px;\n  max-width: calc(100vw - 24px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n\n@keyframes tcw-alerts-in {\n  from { opacity: 0; transform: translateY(-6px) scale(0.98); }\n  to { opacity: 1; transform: none; }\n}\n\n.tcw-alerts-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-weight: var(--tcw-weight-strong);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-alerts-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-alerts-close:hover {\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n}\n\n.tcw-alerts-form {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  padding: 12px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-alerts-form input,\n.tcw-alerts-form select {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  outline: none;\n}\n.tcw-alerts-form input:focus,\n.tcw-alerts-form select:focus {\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-alerts-message,\n.tcw-alerts-source {\n  grid-column: 1 / -1;\n}\n\n.tcw-alerts-add {\n  grid-column: 1 / -1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 34px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent-ink);\n  background: var(--tcw-accent);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-alerts-add:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-alerts-list {\n  max-height: 260px;\n  overflow-y: auto;\n  padding: 6px;\n}\n\n.tcw-alerts-empty {\n  padding: 18px 12px;\n  text-align: center;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-muted);\n  line-height: 1.5;\n}\n\n.tcw-alerts-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 8px 8px;\n  border-radius: var(--tcw-radius-sm);\n}\n.tcw-alerts-row:hover {\n  background: var(--tcw-bg-surface);\n}\n.tcw-alerts-triggered {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-alerts-info {\n  min-width: 0;\n}\n.tcw-alerts-row-main {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-alerts-row-note {\n  margin-top: 2px;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-alerts-badge {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: 2px 5px;\n  border-radius: var(--tcw-tag-radius);\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-alerts-del {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-alerts-del:hover {\n  background: var(--tcw-red-soft);\n  color: var(--tcw-red);\n}\n\n@media (max-width: 640px) {\n  .tcw-alerts-panel {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-width: 100vw;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n  }\n  .tcw-alerts-list {\n    max-height: 40vh;\n    max-height: 40dvh;\n    padding-bottom: max(8px, env(safe-area-inset-bottom));\n  }\n}\n\n/* === Data Window === */\n\n.tcw-datawin {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 38;\n  width: 200px;\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-datawin-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 9px 12px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-datawin-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-datawin-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-datawin-body { padding: 6px 4px; max-height: 360px; overflow-y: auto; }\n.tcw-datawin-empty { padding: 14px; text-align: center; font-size: var(--tcw-font-size-sm); color: var(--tcw-text-muted); }\n.tcw-datawin-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 3px 8px;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-datawin-label { color: var(--tcw-text-muted); }\n.tcw-datawin-value { color: var(--tcw-text); font-variant-numeric: tabular-nums; font-weight: var(--tcw-weight-strong); }\n.tcw-datawin-value.tcw-up { color: var(--tcw-green); }\n.tcw-datawin-value.tcw-down { color: var(--tcw-red); }\n.tcw-datawin-sub {\n  margin: 6px 8px 2px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  border-top: 1px solid var(--tcw-border);\n  padding-top: 6px;\n}\n\n@media (max-width: 640px) {\n  .tcw-datawin { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0; }\n}\n\n/* === Depth-of-market ladder === */\n\n.tcw-ladder {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 41;\n  width: 240px;\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-ladder-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-ladder-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-ladder-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-ladder-cols {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  padding: 4px 0;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-ladder-cols span { text-align: center; }\n.tcw-ladder-body { max-height: 360px; overflow-y: auto; }\n.tcw-ladder-empty { padding: 18px; text-align: center; font-size: var(--tcw-font-size-sm); color: var(--tcw-text-muted); }\n\n.tcw-ladder-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  height: 22px;\n  font-variant-numeric: tabular-nums;\n}\n.tcw-ladder-cell {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: none;\n  background: transparent;\n  font-size: var(--tcw-font-size-xs);\n  cursor: pointer;\n  font-variant-numeric: tabular-nums;\n  overflow: hidden;\n}\n.tcw-ladder-cell:disabled { cursor: default; }\n/* Depth bar grows from the centre column outward. */\n.tcw-ladder-cell::before {\n  content: '';\n  position: absolute;\n  top: 1px; bottom: 1px;\n  width: var(--w, 0%);\n}\n.tcw-ladder-bid { justify-content: flex-end; padding-right: 8px; color: var(--tcw-green); }\n.tcw-ladder-bid::before { right: 0; background: var(--tcw-green-soft); }\n.tcw-ladder-bid span, .tcw-ladder-bid { position: relative; }\n.tcw-ladder-ask { justify-content: flex-start; padding-left: 8px; color: var(--tcw-red); }\n.tcw-ladder-ask::before { left: 0; background: var(--tcw-red-soft); }\n.tcw-ladder-cell:not(:disabled):hover::before { opacity: 0.7; filter: brightness(1.4); }\n.tcw-ladder-cell > * { position: relative; }\n.tcw-ladder-price {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-dim);\n  border-inline-start: 1px solid var(--tcw-border);\n  border-inline-end: 1px solid var(--tcw-border);\n}\n.tcw-ladder-price.tcw-ask { color: var(--tcw-red); }\n.tcw-ladder-price.tcw-bid { color: var(--tcw-green); }\n\n@media (max-width: 640px) {\n  .tcw-ladder { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0; }\n  .tcw-ladder-body { max-height: 45vh; max-height: 45dvh; padding-bottom: max(0px, env(safe-area-inset-bottom)); }\n}\n\n/* === Bracket order placement === */\n\n.tcw-btn-long:hover { color: var(--tcw-green) !important; }\n.tcw-btn-short:hover { color: var(--tcw-red) !important; }\n\n/*\n * Placing a bracket: a strip at the foot of the chart, over its time axis\n * (30 px, the chart's TIME_AXIS_HEIGHT), clear of the tags along its top; its\n * name and Place in the side's colour. Centred by its margins, not a\n * transform: the entrance animation ends on `transform: none`, which left it\n * starting at the middle.\n */\n.tcw-bracket-bar {\n  position: absolute;\n  bottom: calc(30px + var(--tcw-space-5));\n  inset-inline: 0;\n  margin-inline: auto;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: calc(100% - 2 * var(--tcw-space-4));\n  z-index: 45;\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  padding-block: var(--tcw-space-3);\n  padding-inline: var(--tcw-space-5) var(--tcw-space-3);\n  background: var(--tcw-bg-elevated);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-bracket-bar[data-side='buy'] { --tcw-side: var(--tcw-green); }\n.tcw-bracket-bar[data-side='sell'] { --tcw-side: var(--tcw-red); }\n/* The name gives way first: in German or Russian it would push Place off a phone. */\n.tcw-bracket-label {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-side, var(--tcw-text));\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n/* The replay bar has the chart's foot while it shows: the bracket's goes to the top. */\n.tcw-chart-container:has(> .tcw-replay-bar) > .tcw-bracket-bar {\n  top: var(--tcw-space-4);\n  bottom: auto;\n}\n.tcw-bracket-hint {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.tcw-bracket-cancel,\n.tcw-bracket-confirm {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-control-h);\n  padding-inline: var(--tcw-space-5);\n  border-radius: var(--tcw-control-radius);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-bracket-cancel {\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  background: transparent;\n  color: var(--tcw-text);\n}\n.tcw-bracket-cancel:hover { background: var(--tcw-hover-bg); }\n/* The ground's own colour reads on the side's: dark on the dark theme's light greens, paper on the light theme's deep ones. */\n.tcw-bracket-confirm {\n  border: none;\n  background: var(--tcw-side, var(--tcw-accent));\n  color: var(--tcw-bg);\n  font-weight: var(--tcw-weight-strong);\n}\n.tcw-bracket-confirm:hover { background: color-mix(in srgb, var(--tcw-side, var(--tcw-accent)) 86%, var(--tcw-text)); }\n.tcw-bracket-cancel:focus-visible,\n.tcw-bracket-confirm:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n@media (max-width: 640px) {\n  .tcw-bracket-bar {\n    inset-inline: var(--tcw-space-4);\n    width: auto;\n    max-width: none;\n  }\n  .tcw-bracket-hint { display: none; }\n  .tcw-bracket-label { margin-inline-end: auto; }\n  .tcw-bracket-cancel,\n  .tcw-bracket-confirm { height: 34px; }\n}\n\n@media (forced-colors: active) {\n  .tcw-bracket-bar { border: 1px solid CanvasText; }\n  .tcw-bracket-confirm { border: 1px solid ButtonText; }\n  .tcw-bracket-cancel:focus-visible,\n  .tcw-bracket-confirm:focus-visible { outline: 2px solid Highlight; }\n}\n\n/* === Drawing style + templates popover === */\n\n.tcw-style-panel {\n  position: absolute;\n  bottom: 12px;\n  inset-inline-start: var(--tcw-panel-left);\n  z-index: 40;\n  width: 220px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-style-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n}\n.tcw-style-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-style-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n\n.tcw-style-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.tcw-style-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: 1px solid var(--tcw-border-strong);\n  cursor: pointer;\n  padding: 0;\n}\n.tcw-style-swatch.tcw-on { outline: 2px solid var(--tcw-accent); outline-offset: 1px; }\n.tcw-style-picker {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  cursor: pointer;\n}\n.tcw-style-width, .tcw-style-dash {\n  flex: 1;\n  min-width: 0;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  font-size: var(--tcw-font-size-xs);\n}\n.tcw-style-width span { width: 16px; background: currentColor; border-radius: var(--tcw-radius-xs); }\n.tcw-style-width.tcw-on, .tcw-style-dash.tcw-on {\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent);\n}\n\n.tcw-style-subhead {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  margin-top: 2px;\n}\n.tcw-style-save { display: flex; gap: 6px; }\n.tcw-style-name {\n  flex: 1;\n  min-width: 0;\n  height: 28px;\n  padding: 0 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  outline: none;\n}\n.tcw-style-name:focus { border-color: var(--tcw-accent); }\n.tcw-style-savebtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 10px;\n  height: 28px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent-ink);\n  background: var(--tcw-accent);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-style-savebtn:hover { background: var(--tcw-accent-hover); }\n\n.tcw-style-templates { display: flex; flex-direction: column; gap: 2px; max-height: 140px; overflow-y: auto; }\n.tcw-style-empty { font-size: var(--tcw-font-size-xs); color: var(--tcw-text-muted); padding: 4px 0; }\n.tcw-style-template { display: flex; align-items: center; gap: 4px; }\n.tcw-style-apply {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 7px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  text-align: start;\n}\n.tcw-style-apply:hover { background: var(--tcw-bg-surface); }\n.tcw-style-tdot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; }\n.tcw-style-tdel {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-style-tdel:hover { background: var(--tcw-red-soft); color: var(--tcw-red); }\n\n/* === Settings range slider === */\n\n.tcw-settings-range {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.tcw-settings-range input[type='range'] {\n  width: 110px;\n  accent-color: var(--tcw-accent);\n  cursor: pointer;\n}\n.tcw-settings-range-val {\n  min-width: 38px;\n  text-align: end;\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-dim);\n}\n\n/* === Indicator settings dialog === */\n\n/* Narrow on a desktop; on a phone a sheet across the screen like every dialog. */\n@media (min-width: 641px) {\n  .tcw-modal-narrow {\n    max-width: 360px;\n  }\n}\n.tcw-indi-input {\n  width: 110px;\n  height: 30px;\n  padding: 0 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  outline: none;\n  font-variant-numeric: tabular-nums;\n}\n.tcw-indi-input:focus {\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-indi-select {\n  width: 150px;\n  padding-right: 4px;\n  cursor: pointer;\n}\n/* A level: its value and a remove button. */\n.tcw-indi-level {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.tcw-indi-remove {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-indi-remove:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-hover-bg);\n}\n.tcw-indi-remove:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n.tcw-indi-add {\n  margin-top: 8px;\n}\n.tcw-indi-color {\n  width: 36px;\n  height: 28px;\n  padding: 2px;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n\n/* === Object tree panel === */\n\n.tcw-tree-panel {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 39;\n  width: 280px;\n  max-width: calc(100vw - 24px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n\n.tcw-tree-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-weight: var(--tcw-weight-strong);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-tree-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-tree-close:hover {\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n}\n\n.tcw-tree-section {\n  padding: 6px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-tree-section:last-child {\n  border-bottom: none;\n}\n.tcw-tree-section-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 8px 4px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n}\n.tcw-tree-add {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-tree-add:hover {\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n}\n.tcw-tree-dot {\n  flex-shrink: 0;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.tcw-tree-list {\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.tcw-tree-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: var(--tcw-radius-sm);\n}\n.tcw-tree-row:hover {\n  background: var(--tcw-bg-surface);\n}\n.tcw-tree-hidden .tcw-tree-name {\n  opacity: 0.5;\n}\n.tcw-tree-name {\n  min-width: 0;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-tree-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n.tcw-tree-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-tree-btn:hover {\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text);\n}\n.tcw-tree-btn.tcw-tree-on {\n  color: var(--tcw-accent);\n}\n.tcw-tree-btn.tcw-tree-del:hover {\n  background: var(--tcw-red-soft);\n  color: var(--tcw-red);\n}\n.tcw-tree-group .tcw-tree-name {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: var(--tcw-weight-strong);\n}\n.tcw-tree-group .tcw-tree-name svg {\n  flex: none;\n  color: var(--tcw-text-muted);\n}\n.tcw-tree-member {\n  margin-left: 14px;\n  padding-left: 10px;\n  border-inline-start: 1px solid var(--tcw-border-strong);\n  border-radius: 0 var(--tcw-radius-sm) var(--tcw-radius-sm) 0;\n}\n.tcw-tree-rename {\n  flex: 1;\n  min-width: 0;\n  padding: 3px 6px;\n  border: 1px solid var(--tcw-accent-line);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-tree-rename:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-tree-empty {\n  padding: 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-muted);\n}\n\n@media (max-width: 640px) {\n  .tcw-tree-panel {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-width: 100vw;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n  }\n  .tcw-tree-list {\n    max-height: 30vh;\n    max-height: 30dvh;\n  }\n  .tcw-tree-section:last-child {\n    padding-bottom: max(6px, env(safe-area-inset-bottom));\n  }\n}\n\n/* === Reduced motion === */\n\n@media (prefers-reduced-motion: reduce) {\n  .tcw-root *,\n  .tcw-root *::before,\n  .tcw-root *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n\n  /* Except the loader's slow glow (opacity only): without it a long wait\n     looks frozen. */\n  .tcw-root .tcw-loading-candle,\n  .tcw-root .tcw-loading-track > span {\n    animation-duration: 2.4s !important;\n    animation-iteration-count: infinite !important;\n    animation-delay: var(--tcw-delay, 0ms) !important;\n  }\n}\n\n/* --- Drawing settings dialog --- */\n.tcw-drawing-text {\n  min-height: 56px;\n  resize: vertical;\n  font-family: inherit;\n}\n/* The text a drawing writes takes the dialog's width, under its name. */\n.tcw-text-row {\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--tcw-space-3);\n}\n.tcw-text-row .tcw-drawing-text { box-sizing: border-box; width: 100%; }\n.tcw-levels-editor { display: grid; gap: var(--tcw-space-3); }\n/* Two columns of levels on a desktop, as a Fibonacci tool has a dozen. */\n.tcw-levels-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--tcw-space-3) var(--tcw-space-6);\n  max-height: 260px;\n  overflow-y: auto;\n  padding-inline-end: var(--tcw-space-1);\n}\n@media (max-width: 640px) {\n  .tcw-levels-grid { grid-template-columns: minmax(0, 1fr); }\n}\n.tcw-level-row {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: var(--tcw-space-3);\n}\n.tcw-level-row .tcw-indi-input { box-sizing: border-box; width: 100%; min-width: 0; }\n.tcw-level-row input[type='checkbox'] { accent-color: var(--tcw-accent); }\n.tcw-level-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: 0;\n  border-radius: var(--tcw-radius-sm, 4px);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-level-remove:hover { color: var(--tcw-text); background: var(--tcw-bg-elevated); }\n.tcw-level-remove:focus-visible { outline: 2px solid var(--tcw-accent); outline-offset: 1px; }\n.tcw-level-add { justify-self: start; }\n\n/* --- Context menu (right-click on a drawing) --- */\n.tcw-context-menu {\n  position: absolute;\n  z-index: 70;\n  min-width: 200px;\n  /* Taller than the room (many templates, say), it scrolls. */\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--tcw-menu-pad);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n}\n.tcw-context-item {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  width: 100%;\n  min-height: var(--tcw-menu-item-h);\n  padding: var(--tcw-space-1) var(--tcw-space-4);\n  border: 0;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  text-align: start;\n  cursor: pointer;\n}\n.tcw-context-item svg, .tcw-context-icon { flex: none; width: 14px; height: 14px; color: var(--tcw-text-muted); }\n.tcw-context-item:hover, .tcw-context-item:focus-visible { background: var(--tcw-hover-bg); outline: none; }\n.tcw-context-item:focus-visible { box-shadow: inset 0 0 0 1px var(--tcw-accent); }\n.tcw-context-danger, .tcw-context-danger svg { color: var(--tcw-red); }\n.tcw-context-sep { height: 1px; margin: var(--tcw-space-2) var(--tcw-space-4); background: var(--tcw-divider); }\n.tcw-context-label { flex: 1; min-width: 0; }\n/* A shortcut, and the mark of a submenu, at the row's end. */\n.tcw-context-key {\n  flex: none;\n  margin-inline-start: var(--tcw-space-5);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-muted);\n}\n.tcw-context-item svg.tcw-context-more { width: 12px; height: 12px; }\n/* Right to left, a submenu opens to the left: its marks point there. */\n[dir='rtl'] .tcw-context-more, [dir='rtl'] .tcw-context-back > svg { transform: scaleX(-1); }\n/* No keyboard under a finger: the keys stay named to a screen reader only. */\n@media (hover: none) { .tcw-context-key { display: none; } }\n.tcw-context-item[aria-expanded='true'] { background: var(--tcw-hover-bg); }\n/* The choice made among radios: a dot where a switch has its tick. */\n.tcw-context-dot { display: grid; place-items: center; }\n.tcw-context-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tcw-text); }\n/* An entry that can be removed: its x on the row in hand, always on a touch screen. */\n.tcw-context-row { display: flex; align-items: center; border-radius: var(--tcw-menu-item-radius); }\n.tcw-context-row .tcw-context-item { flex: 1; min-width: 0; }\n.tcw-context-row:hover { background: var(--tcw-hover-bg); }\n.tcw-context-row:hover .tcw-context-item { background: transparent; }\n.tcw-context-remove {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  margin-inline-end: var(--tcw-space-1);\n  border: 0;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-context-row:hover .tcw-context-remove, .tcw-context-row:focus-within .tcw-context-remove { opacity: 1; }\n.tcw-context-remove:hover { color: var(--tcw-red); background: var(--tcw-hover-bg); }\n@media (hover: none) { .tcw-context-remove { opacity: 1; } }\n/* --- Toolbar over a selected drawing --- */\n.tcw-sel-toolbar {\n  position: absolute;\n  z-index: 65;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 3px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-divider);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  font-family: var(--tcw-font);\n  white-space: nowrap;\n  animation: tcw-sel-in var(--tcw-dur-fast) var(--tcw-ease-out);\n}\n@keyframes tcw-sel-in { from { opacity: 0; transform: translateY(3px); } }\n.tcw-sel-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n  min-width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  padding: 0 6px;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-sel-btn svg { flex: none; }\n.tcw-sel-btn:hover, .tcw-sel-btn[aria-expanded=\"true\"] { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n.tcw-sel-btn:focus-visible, .tcw-sel-swatch:focus-visible, .tcw-sel-option:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--tcw-accent); }\n.tcw-sel-btn.tcw-sel-on { color: var(--tcw-accent); background: var(--tcw-accent-soft); }\n.tcw-sel-danger:hover { color: var(--tcw-red); background: var(--tcw-red-soft); }\n.tcw-sel-color {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tcw-text) 25%, transparent);\n}\n.tcw-sel-width {\n  display: inline-block;\n  width: 16px;\n  height: var(--w, 1px);\n  max-height: 6px;\n  border-radius: 1px;\n  background: currentColor;\n}\n.tcw-sel-sep { flex: none; width: 1px; height: 18px; margin: 0 3px; background: var(--tcw-divider); }\n.tcw-sel-pop {\n  position: absolute;\n  z-index: 66;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 120px;\n  padding: 4px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-divider);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  font-family: var(--tcw-font);\n}\n.tcw-sel-pop--color {\n  display: grid;\n  grid-template-columns: repeat(4, 24px);\n  gap: 6px;\n  min-width: 0;\n  padding: 8px;\n}\n.tcw-sel-swatch {\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tcw-text) 20%, transparent);\n  cursor: pointer;\n  transition: transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-sel-swatch:hover { transform: scale(1.1); }\n.tcw-sel-swatch.tcw-sel-on { box-shadow: 0 0 0 2px var(--tcw-bg-elevated), 0 0 0 4px var(--tcw-accent); }\n.tcw-sel-option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: var(--tcw-menu-item-h);\n  padding: 4px 10px;\n  border: 0;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  text-align: start;\n  cursor: pointer;\n}\n.tcw-sel-option:hover { background: var(--tcw-bg-surface); }\n.tcw-sel-option.tcw-sel-on { color: var(--tcw-accent); }\n@media (prefers-reduced-motion: reduce) {\n  .tcw-sel-toolbar { animation: none; }\n  .tcw-sel-swatch { transition: none; }\n}\n\n/* --- Account panel (positions, orders, history) --- */\n.tcw-account-dock {\n  flex: none;\n}\n.tcw-account {\n  display: flex;\n  flex-direction: column;\n  height: 220px;\n  border-top: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n}\n.tcw-account-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 8px;\n  border-bottom: 1px solid var(--tcw-divider);\n}\n.tcw-account-tabs {\n  display: flex;\n  gap: 2px;\n  flex: 1;\n  min-width: 0;\n  overflow-x: auto;\n}\n.tcw-account-tab {\n  padding: 6px 10px;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  cursor: pointer;\n}\n.tcw-account-tab:hover { color: var(--tcw-text); background: var(--tcw-hover-bg); }\n.tcw-account-tab[aria-selected=\"true\"] { color: var(--tcw-text); background: var(--tcw-active-bg); }\n.tcw-account-tab:focus-visible, .tcw-account-new:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--tcw-accent); }\n.tcw-account-new {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  border: 1px solid var(--tcw-accent-line);\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  cursor: pointer;\n}\n.tcw-account-new:hover { background: var(--tcw-accent-glow); }\n.tcw-account-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n}\n.tcw-account-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-account-table th {\n  position: sticky;\n  top: 0;\n  padding: 6px 10px;\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-weight: var(--tcw-weight);\n  text-align: start;\n  border-bottom: 1px solid var(--tcw-divider);\n}\n.tcw-account-table td {\n  padding: 5px 10px;\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-divider);\n  white-space: nowrap;\n}\n.tcw-account-table tr:hover td { background: var(--tcw-hover-bg); }\n.tcw-account-side { font-weight: var(--tcw-weight-strong); }\n.tcw-account-buy, .tcw-account-up { color: var(--tcw-green); }\n.tcw-account-sell, .tcw-account-down { color: var(--tcw-red); }\n.tcw-account-actions { display: flex; gap: 2px; }\n.tcw-account-empty, .tcw-account-summary {\n  margin: 0;\n  padding: 14px 12px;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-account-summary { padding: 8px 12px; color: var(--tcw-text-dim); }\n@media (max-width: 640px) {\n  .tcw-account { height: 45vh; height: 45dvh; }\n}\n\n/* --- Named layouts --- */\n.tcw-layouts-btn { max-width: 190px; }\n.tcw-layouts-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.tcw-layouts-dirty {\n  width: 6px;\n  height: 6px;\n  flex: none;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n}\n.tcw-name-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--tcw-font-size-sm); color: var(--tcw-text-dim); }\n.tcw-name-field .tcw-indi-input { width: 100%; height: 34px; font-size: var(--tcw-font-size); }\n\n/* --- Chart grid --- */\n.tcw-grid { background: var(--tcw-bg); }\n.tcw-grid-bar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-height: calc(var(--tcw-control-h) + 8px);\n  padding: 0 8px;\n  border-bottom: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.tcw-grid-bar::-webkit-scrollbar { display: none; }\n.tcw-grid-group { display: flex; align-items: center; gap: 2px; flex: none; }\n.tcw-grid-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: 4px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  letter-spacing: var(--tcw-label-tracking);\n  text-transform: var(--tcw-label-case);\n  color: var(--tcw-text-muted);\n}\n.tcw-grid-sync[aria-pressed=\"true\"] { color: var(--tcw-accent); }\n.tcw-grid-cells {\n  flex: 1;\n  min-height: 0;\n  display: grid;\n  gap: 1px;\n  background: var(--tcw-border);\n}\n.tcw-grid-cell {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  background: var(--tcw-bg);\n}\n.tcw-grid-cell-active::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--tcw-accent);\n  pointer-events: none;\n  z-index: 5;\n}\n\n/* --- Host toolbar buttons --- */\n.tcw-toolbar-host { display: inline-flex; align-items: center; gap: 2px; }\n.tcw-toolbar-host:empty { display: none; }\n.tcw-host-btn { display: inline-flex; align-items: center; gap: 4px; }\n\n/* --- Host sidebar buttons, status bar items, and the layer over the chart --- */\n.tcw-sidebar-host { display: flex; flex-direction: column; align-items: center; }\n.tcw-sidebar-host:empty { display: none; }\n.tcw-status-host { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.tcw-status-host:empty { display: none; }\n.tcw-status-host-item { white-space: nowrap; }\n.tcw-status-host-btn {\n  margin: -4px -6px;\n  padding: 4px 6px;\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-status-host-btn:hover { color: var(--tcw-text); background: var(--tcw-hover-bg); }\n.tcw-status-host-btn:focus-visible { outline: 2px solid var(--tcw-accent); outline-offset: -2px; }\n/* Over the plot and under the widget's own overlays; the pointer reaches the chart unless an element of yours takes it. */\n.tcw-host-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }\n\n/* --- Pane buttons (move, fold, maximise) --- */\n.tcw-pane-controls {\n  position: absolute;\n  z-index: 4;\n  display: flex;\n  gap: 1px;\n  transform: translateX(-100%);\n  padding: 1px;\n  border-radius: var(--tcw-radius-sm);\n  background: color-mix(in srgb, var(--tcw-bg) 80%, transparent);\n  opacity: 0.55;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-pane-controls:hover,\n.tcw-pane-controls:focus-within { opacity: 1; }\n.tcw-pane-btn {\n  display: inline-grid;\n  place-items: center;\n  width: 18px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-pane-btn:hover { color: var(--tcw-text); background: var(--tcw-hover-bg); }\n.tcw-pane-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tcw-accent-soft); }\n\n/* --- Typed interval --- */\n.tcw-interval-input {\n  position: absolute;\n  z-index: 20;\n  left: 50%;\n  top: 40%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 12px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-lg, 10px);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n}\n.tcw-interval-field {\n  width: 150px;\n  height: 36px;\n  padding: 0 10px;\n  font: inherit;\n  font-size: var(--tcw-font-size-xl);\n  font-weight: var(--tcw-weight-strong);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-accent);\n  border-radius: var(--tcw-input-radius);\n  outline: none;\n}\n.tcw-interval-field[aria-invalid] { border-color: var(--tcw-red); }\n.tcw-interval-hint { font-size: var(--tcw-font-size-xs); color: var(--tcw-text-muted); max-width: 170px; }\n\n/* --- Alerts: lines, moves, bar close, expiry --- */\n.tcw-alerts-source { grid-column: auto; }\n.tcw-alerts-row-fields {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n}\n.tcw-alerts-row-fields[hidden] { display: none; }\n.tcw-alerts-row-fields > input[hidden] { display: none; }\n.tcw-alerts-row-fields:has(> input[hidden]) { grid-template-columns: 1fr; }\n.tcw-alerts-options { align-items: center; }\n.tcw-alerts-form .tcw-alerts-check {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-dim);\n}\n.tcw-alerts-form .tcw-alerts-check input { width: auto; height: auto; }\n.tcw-alerts-form input[aria-invalid=\"true\"] { border-color: var(--tcw-red); }\n.tcw-alerts-row-meta { margin-top: 2px; font-size: var(--tcw-font-size-xs); color: var(--tcw-text-muted); }\n.tcw-alerts-expired { opacity: 0.6; }\n\n/* --- Signal marker note --- */\n.tcw-marker-tip {\n  position: absolute;\n  z-index: 12;\n  pointer-events: none;\n  padding: 6px 8px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-tooltip-radius);\n  background: var(--tcw-tooltip-bg);\n  color: var(--tcw-tooltip-fg);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.45;\n  font-variant-numeric: tabular-nums;\n  box-shadow: var(--tcw-menu-shadow);\n  max-width: 240px;\n}\n.tcw-marker-tip strong { display: block; font-size: var(--tcw-font-size-sm); }\n\n/* === Navigation over the chart ===\n * Centred on the plot's bottom edge, shown while a mouse is over the chart. */\n.tcw-nav {\n  position: absolute;\n  z-index: 15;\n  display: flex;\n  gap: 2px;\n  padding: 3px;\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: calc(var(--tcw-control-radius) + 3px);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n  opacity: 0;\n  pointer-events: none;\n  transform: translate(-50%, calc(-100% - 12px));\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-nav.tcw-nav-shown {\n  opacity: 1;\n  pointer-events: auto;\n}\n.tcw-nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  touch-action: none;\n}\n.tcw-nav-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n.tcw-nav-btn:active {\n  background: var(--tcw-active-bg);\n}\n.tcw-nav-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n.tcw-nav-btn svg {\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n@media (hover: none) {\n  .tcw-nav { display: none; }\n}\n\n/* === Symbol info ===\n * Top left, beside the drawing tools: the panels on the right stay clear. */\n.tcw-syminfo {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-start: var(--tcw-panel-left);\n  z-index: 38;\n  width: 288px;\n  max-height: calc(100% - var(--tcw-panel-top) - 12px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-syminfo-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 9px 12px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-syminfo-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-syminfo-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-syminfo-body,\n.tcw-syminfo-news {\n  padding: 12px 14px;\n  overflow-y: auto;\n}\n.tcw-syminfo-body {\n  display: grid;\n  gap: 10px;\n}\n.tcw-syminfo-symbol {\n  font-size: var(--tcw-font-size-lg);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n}\n.tcw-syminfo-desc {\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-dim);\n}\n.tcw-syminfo-meta {\n  margin-top: 2px;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n.tcw-syminfo-quote {\n  display: flex;\n  align-items: baseline;\n  gap: 10px;\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-syminfo-price {\n  font-size: var(--tcw-font-size-display);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n}\n.tcw-syminfo-change { font-size: var(--tcw-font-size-sm); }\n.tcw-syminfo-change.tcw-up { color: var(--tcw-green); }\n.tcw-syminfo-change.tcw-down { color: var(--tcw-red); }\n.tcw-syminfo-status {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-dim);\n}\n.tcw-syminfo-status::before,\n.tcw-status-market::before {\n  content: '';\n  flex: none;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n}\n.tcw-syminfo-status[data-state='open']::before,\n.tcw-syminfo-status[data-state='always']::before,\n.tcw-status-market[data-state='open']::before {\n  background: var(--tcw-green);\n}\n.tcw-syminfo-stats {\n  display: grid;\n  gap: 4px;\n  margin: 0;\n  padding-top: 10px;\n  border-top: 1px solid var(--tcw-divider);\n}\n.tcw-syminfo-stat {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-syminfo-stat dt { color: var(--tcw-text-muted); }\n.tcw-syminfo-stat dd {\n  margin: 0;\n  color: var(--tcw-text);\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.tcw-syminfo-news {\n  border-top: 1px solid var(--tcw-divider);\n}\n.tcw-syminfo-news-title {\n  margin-bottom: 8px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-muted);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n.tcw-syminfo-news-list {\n  display: grid;\n  gap: 10px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.tcw-syminfo-news-item {\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.4;\n  color: var(--tcw-text);\n}\n.tcw-syminfo-news-item a {\n  color: var(--tcw-text);\n  text-decoration: none;\n}\n.tcw-syminfo-news-item a:hover { color: var(--tcw-accent); text-decoration: underline; }\n.tcw-syminfo-news-item a:focus-visible { outline: none; box-shadow: var(--tcw-ring); border-radius: var(--tcw-radius-xs); }\n.tcw-syminfo-news-meta,\n.tcw-syminfo-news-note {\n  margin-top: 2px;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n\n/* Numbers keep their sign on the left, and mixed text its own order, in a right-to-left widget too. */\n.tcw-watchlist-price,\n.tcw-watchlist-change,\n.tcw-syminfo-price,\n.tcw-syminfo-change {\n  unicode-bidi: isolate;\n  direction: ltr;\n}\n.tcw-syminfo-desc,\n.tcw-syminfo-meta,\n.tcw-syminfo-status,\n.tcw-syminfo-stat dd,\n.tcw-syminfo-news-meta {\n  unicode-bidi: plaintext;\n}\n\n/* The market's status in the status bar. */\n.tcw-status-market {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  color: var(--tcw-text-muted);\n}\n\n@media (max-width: 640px) {\n  .tcw-syminfo {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-height: 70%;\n    border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n  }\n}\n\n/* === The look: how chosen controls show, floating bars, segmented intervals ===\n * Each switch sets variables on its own root, which its parts read: a grid's\n * look never reaches into a chart that has one of its own. */\n\n/* A chosen button (`ui.active`): a tinted fill (default), a solid pill, or an underline.\n * Dialog tabs are chips, or underlined in the underline look. Panels sit below the\n * toolbar and beside the drawing tools. */\n.tcw-root {\n  --tcw-on-bg: var(--tcw-accent-soft);\n  --tcw-on-fg: var(--tcw-accent);\n  --tcw-on-ring: none;\n  --tcw-on-icon-bg: var(--tcw-accent-soft);\n  --tcw-on-icon-fg: var(--tcw-accent);\n  --tcw-on-icon-ring: none;\n  --tcw-tabs-pad-block: var(--tcw-space-4);\n  --tcw-tab-h: var(--tcw-control-h);\n  --tcw-tab-pad: 0 var(--tcw-space-5);\n  --tcw-tab-line: 0px;\n  --tcw-tab-radius: var(--tcw-control-radius);\n  --tcw-tab-hover: var(--tcw-hover-bg);\n  --tcw-tab-on-bg: var(--tcw-on-bg);\n  --tcw-tab-on-fg: var(--tcw-on-fg);\n  /* A menu's rows sit inside its padding with corners that follow its own: the menu's\n   * corner less the padding between, so the two curves run parallel (Print: 5 - 3 = 2). */\n  --tcw-menu-pad: var(--tcw-space-2);\n  --tcw-menu-item-radius: max(0px, calc(var(--tcw-menu-radius) - var(--tcw-menu-pad)));\n  --tcw-panel-top: calc(var(--tcw-toolbar-h) + var(--tcw-space-3));\n  --tcw-panel-left: calc(var(--tcw-sidebar-w) + var(--tcw-space-5));\n}\n.tcw-root[data-tcw-active='solid'] {\n  --tcw-on-bg: var(--tcw-text);\n  --tcw-on-fg: var(--tcw-bg);\n  --tcw-on-icon-bg: var(--tcw-text);\n  --tcw-on-icon-fg: var(--tcw-bg);\n}\n/* Print picks a tool in ink blue on a tint: a solid square would outweigh the chart beside it. */\n.tcw-root[data-tcw-ui='print'][data-tcw-active='solid'] {\n  --tcw-on-icon-bg: var(--tcw-accent-soft);\n  --tcw-on-icon-fg: var(--tcw-accent);\n}\n.tcw-root[data-tcw-active='underline'] {\n  --tcw-on-bg: var(--tcw-active-bg);\n  --tcw-on-fg: var(--tcw-text);\n  --tcw-on-ring: inset 0 -2px 0 var(--tcw-accent);\n  --tcw-on-icon-bg: var(--tcw-active-bg);\n  --tcw-on-icon-fg: var(--tcw-accent);\n  --tcw-on-icon-ring: inset 2px 0 0 var(--tcw-accent);\n  --tcw-tabs-pad-block: 0px;\n  --tcw-tab-h: auto;\n  --tcw-tab-pad: 11px 14px;\n  --tcw-tab-line: 2px;\n  --tcw-tab-radius: 0px;\n  --tcw-tab-hover: transparent;\n  --tcw-tab-on-bg: transparent;\n  --tcw-tab-on-fg: var(--tcw-accent);\n}\n.tcw-root[data-tcw-toolbar='floating'] {\n  --tcw-panel-top: calc(var(--tcw-toolbar-h) + 2 * var(--tcw-border-w) + 14px);\n}\n.tcw-root[data-tcw-sidebar='floating'] {\n  --tcw-panel-left: calc(var(--tcw-sidebar-w) + 2 * var(--tcw-border-w) + 22px);\n}\n\n/* The toolbar as an island (`ui.toolbar: 'floating'`). */\n.tcw-root[data-tcw-toolbar='floating'] > .tcw-toolbar {\n  margin: 8px 10px 0;\n  padding-inline: calc(min(var(--tcw-toolbar-radius), var(--tcw-toolbar-h) / 2) / 2 + 8px);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-toolbar-radius);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n}\n\n/* The drawing tools as an island (`ui.sidebar: 'floating'`). */\n.tcw-root[data-tcw-sidebar='floating'] > .tcw-body > .tcw-sidebar {\n  align-self: flex-start;\n  max-height: calc(100% - 20px);\n  margin: 10px 6px 10px 10px;\n  padding-block: calc(min(var(--tcw-sidebar-radius), var(--tcw-sidebar-w) / 2) / 2 + 6px);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-sidebar-radius);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n}\n\n/* Frosted menus (`ui.blur` above 0): the chart shows through, blurred. */\n@supports (background: color-mix(in srgb, red 50%, transparent)) {\n  .tcw-dropdown,\n  .tcw-flyout,\n  .tcw-context-menu {\n    background: color-mix(in srgb, var(--tcw-bg-elevated) var(--tcw-surface-opacity), transparent);\n  }\n}\n\n/* The interval buttons in one track (`ui.intervals: 'segmented'`). */\n.tcw-root[data-tcw-intervals='segmented'] > .tcw-toolbar > .tcw-tf-group {\n  gap: 2px;\n  margin: 0 4px;\n  padding: 3px;\n  border-radius: calc(var(--tcw-control-radius) + 3px);\n  background: var(--tcw-hover-bg);\n}\n.tcw-root[data-tcw-intervals='segmented'] > .tcw-toolbar > .tcw-tf-group .tcw-btn {\n  height: calc(var(--tcw-control-h) - 6px);\n  padding: 0 9px;\n}\n\n/* Phones: the variants keep comfortable tap targets and room for the bar. */\n@media (max-width: 768px) {\n  .tcw-root[data-tcw-intervals='segmented'] > .tcw-toolbar > .tcw-tf-group .tcw-btn {\n    height: max(34px, calc(var(--tcw-control-h) - 6px));\n    padding: 0 10px;\n  }\n  .tcw-root[data-tcw-toolbar='floating'] > .tcw-toolbar {\n    margin: 6px 6px 0;\n    padding-inline: 4px;\n  }\n  .tcw-root[data-tcw-sidebar='floating'] > .tcw-body > .tcw-sidebar {\n    margin: 6px 4px 6px 6px;\n  }\n}\n\n/* --- Phones and tablets --- */\n\n/* Taps without the grey flash or the double-tap zoom's wait. The chart area\n   sets its own touch-action for its gestures. */\n.tcw-root {\n  -webkit-tap-highlight-color: transparent;\n  touch-action: manipulation;\n}\n\n/* iOS zooms the page into an input under 16 px when it takes focus. */\n@media (pointer: coarse) {\n  .tcw-root input:not([type='color']):not([type='range']):not([type='checkbox']):not([type='radio']),\n  .tcw-root select,\n  .tcw-root textarea {\n    font-size: max(16px, 1em);\n  }\n}\n\n/* Sheets and lists scroll on their own, without dragging the page behind them. */\n.tcw-modal {\n  overscroll-behavior: contain;\n}\n\n/* === The bars' newer parts ===\n * Interval sections and the chart type's icon, the Trade menu's button, undo\n * and redo off while idle, the tool menus' shortcuts and stars, the status\n * bar's clock and scale switches, and the grip of the selection toolbar. */\n\n/* The interval menu: each unit under its heading, a hairline between them. */\n.tcw-tf-section + .tcw-tf-section {\n  margin-top: var(--tcw-space-2);\n  padding-top: var(--tcw-space-1);\n  border-top: 1px solid var(--tcw-divider);\n}\n\n/* The chart type: its icon alone, square. */\n.tcw-dropdown-trigger[data-role='charttype'] {\n  justify-content: center;\n  width: var(--tcw-control-h);\n  padding: 0;\n}\n\n/* Undo and redo with nothing to do: there, quiet, not pressable. */\n.tcw-btn-icon:disabled {\n  opacity: 0.35;\n  cursor: default;\n  background: transparent;\n  color: var(--tcw-text-muted);\n}\n\n/* A tool menu's row: the tool, its shortcut, and a star beside it. */\n.tcw-flyout-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n}\n.tcw-flyout-row > .tcw-flyout-item {\n  flex: 1;\n  min-width: 0;\n}\n.tcw-flyout-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-flyout-key {\n  flex: none;\n  margin-inline-start: var(--tcw-space-5);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n.tcw-flyout-pin {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n/* Shown on the row in hand; always for a pinned tool, filled in ink blue; always on a touch screen. */\n.tcw-flyout-row:hover .tcw-flyout-pin,\n.tcw-flyout-row:focus-within .tcw-flyout-pin,\n.tcw-flyout-pin[aria-pressed='true'],\n.tcw-root[data-tcw-narrow] .tcw-flyout-pin {\n  opacity: 1;\n}\n@media (hover: none) {\n  .tcw-flyout-pin {\n    opacity: 1;\n  }\n}\n.tcw-flyout-pin:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n.tcw-flyout-pin[aria-pressed='true'] {\n  color: var(--tcw-accent);\n}\n.tcw-flyout-pin[aria-pressed='true'] svg path {\n  fill: currentColor;\n}\n\n/* The clock: the time in figures, the zone beside it; it opens the zones. */\n.tcw-status-clock,\n.tcw-status-scale-btn {\n  height: var(--tcw-control-h-sm);\n  padding: 0 var(--tcw-space-3);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-status-clock {\n  font-family: var(--tcw-font-mono);\n}\n.tcw-status-clock:hover,\n.tcw-status-scale-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n.tcw-status-clock:focus-visible,\n.tcw-status-scale-btn:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* The scale switches: %, log, auto, in ink blue while on. */\n.tcw-status-scale {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n  padding-inline-start: var(--tcw-space-3);\n  border-inline-start: var(--tcw-sep-w) solid var(--tcw-border);\n}\n.tcw-status-scale-btn[aria-pressed='true'] {\n  color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n/* A narrow widget keeps the range presets and the clock: the scale switches (also in the\n   settings and the scale's menu) give them the room, and the connection's word is left to\n   screen readers beside its dot. */\n.tcw-root[data-tcw-narrow] .tcw-status-scale {\n  display: none;\n}\n.tcw-root[data-tcw-narrow] .tcw-status-indicator > span:not(.tcw-status-dot) {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* The selection toolbar's grip: dots to take it by. */\n.tcw-sel-grip {\n  flex: none;\n  width: var(--tcw-space-4);\n  height: var(--tcw-control-h-sm);\n  margin-inline: var(--tcw-space-1) var(--tcw-space-2);\n  background-image: radial-gradient(circle, var(--tcw-text-muted) 1px, transparent 1.4px);\n  background-size: 4px 4px;\n  background-position: center;\n  opacity: 0.7;\n  cursor: grab;\n  touch-action: none;\n}\n.tcw-sel-grip:active {\n  cursor: grabbing;\n}\n\n/* --- A narrow widget (a phone, or a narrow column): data-tcw-narrow ---\n   Set from the widget's own width, below 641px. The toolbar keeps the\n   chart's own controls (symbol, interval, type, indicators) and puts the\n   rest under \"more\"; the drawing tools wait behind a button over the chart;\n   a grid shows one chart at a time, picked by its tab. */\n\n.tcw-toolbar-more,\n.tcw-sidebar-fab,\n.tcw-tf-current,\n.tcw-grid-tabs {\n  display: none;\n}\n\n/* The toolbar fits itself too (on a tablet, a window half a screen wide):\n   the right-hand buttons that don't fit fold under \"more\" (`--collapsed`\n   shows it), and `--icons` drops the menus' labels and the interval buttons.\n   Narrow folds them all. */\n.tcw-toolbar [data-tcw-folded],\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-toolbar-overflow {\n  display: none;\n}\n.tcw-toolbar--collapsed > .tcw-toolbar-more,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar > .tcw-toolbar-more {\n  display: inline-flex;\n  margin-inline-start: auto;\n}\n.tcw-toolbar--icons.tcw-toolbar--tf-menu > .tcw-tf-group,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar.tcw-toolbar--tf-menu > .tcw-tf-group {\n  display: none;\n}\n.tcw-toolbar--icons .tcw-tf-more,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-tf-more {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 10px;\n}\n.tcw-toolbar--icons .tcw-tf-current,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-tf-current {\n  display: inline;\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent);\n}\n.tcw-toolbar--icons .tcw-trigger-label,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-trigger-label {\n  display: none;\n}\n\n/* The drawing tools lie over the chart when opened, from its edge. */\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  /* Under the toolbar (20), whose menus open over it. */\n  z-index: 18;\n  box-shadow: var(--tcw-menu-shadow);\n  transform: translateX(-100%);\n  visibility: hidden;\n  transition: transform var(--tcw-dur-normal) var(--tcw-ease-out), visibility 0s linear var(--tcw-dur-normal);\n}\n.tcw-root[data-tcw-narrow][dir='rtl'] > .tcw-body > .tcw-sidebar {\n  transform: translateX(100%);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar.tcw-sidebar-open {\n  transform: none;\n  visibility: visible;\n  transition: transform var(--tcw-dur-normal) var(--tcw-ease-out), visibility 0s;\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-flyout {\n  z-index: 19;\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset-inline-start: 10px;\n  /* Clear of the time axis. */\n  bottom: 44px;\n  z-index: 17;\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: 999px;\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text);\n  box-shadow: var(--tcw-menu-shadow);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast), color var(--tcw-dur-fast), border-color var(--tcw-dur-fast);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab.tcw-active {\n  background: var(--tcw-accent);\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab[aria-expanded='true'] {\n  visibility: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar,\n  .tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar.tcw-sidebar-open {\n    transition: none;\n  }\n}\n\n/* A narrow grid: one chart at a time, a tab for each. */\n.tcw-grid[data-tcw-narrow] > .tcw-grid-bar > .tcw-grid-tabs {\n  display: flex;\n}\n.tcw-grid-tab {\n  white-space: nowrap;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells {\n  display: flex;\n  flex-direction: column;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells > .tcw-grid-cell {\n  flex: 1;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells > .tcw-grid-cell:not(.tcw-grid-cell-current) {\n  display: none;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells > .tcw-grid-cell-active::after {\n  display: none;\n}\n\n/* Phones: menus open as sheets from the bottom, in reach of a thumb and\n   never off screen (a menu's own place may be off the side of a phone). */\n@media (max-width: 640px) {\n  .tcw-dropdown,\n  .tcw-context-menu {\n    position: fixed !important;\n    /* Above the on-screen keyboard (the indicators' search). */\n    inset: auto 0 var(--tcw-keyboard-inset, 0px) 0 !important;\n    margin: 0 !important;\n    width: auto;\n    max-width: none;\n    max-height: 70vh !important;\n    max-height: 70dvh !important;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    z-index: 80;\n    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));\n    border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n    border-bottom: none;\n  }\n  .tcw-dropdown-item,\n  .tcw-context-item {\n    min-height: 44px;\n  }\n}\n", It = "/* === Base controls: fields, selects, checks, sliders, calendar, scrollbars ===\n *\n * One look for every form control in the widget, from tokens. Fields are\n * quiet until used: a faint fill and hairline, a firmer line on hover, and\n * on focus the line turns accent (no ring). Selects and date fields open\n * the widget's own list and calendar (formControls.ts).\n */\n\n.tcw-root {\n  color-scheme: dark;\n\n  --tcw-field-bg: rgba(230, 227, 220, 0.04);\n  --tcw-field-bg-hover: rgba(230, 227, 220, 0.06);\n  --tcw-field-bg-focus: rgba(230, 227, 220, 0.03);\n  --tcw-field-line: rgba(230, 227, 220, 0.12);\n  --tcw-field-line-hover: rgba(230, 227, 220, 0.22);\n  --tcw-field-line-focus: var(--tcw-accent-line);\n  --tcw-field-placeholder: var(--tcw-text-muted);\n  --tcw-check-line: rgba(230, 227, 220, 0.3);\n  --tcw-scroll-thumb: rgba(230, 227, 220, 0.14);\n  --tcw-scroll-thumb-hover: rgba(230, 227, 220, 0.26);\n  /* Glyphs drawn in a field's background (a background image takes no currentColor). */\n  --tcw-field-chevron: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.75l3 3 3-3' fill='none' stroke='%238c8a85' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  --tcw-field-calendar: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238c8a85' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='2'/%3E%3Cpath d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/%3E%3C/g%3E%3C/svg%3E\");\n  --tcw-check-mark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.25l2.6 2.6L12 5.5' fill='none' stroke='%23131416' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n}\n\n.tcw-root[data-tcw-theme='light'] {\n  color-scheme: light;\n\n  /* Fields are white boxes on the paper, ruled in ink, as on a printed form. */\n  --tcw-field-bg: #ffffff;\n  --tcw-field-bg-hover: #ffffff;\n  --tcw-field-bg-focus: #ffffff;\n  --tcw-field-line: rgba(27, 29, 33, 0.16);\n  --tcw-field-line-hover: rgba(27, 29, 33, 0.3);\n  --tcw-check-line: rgba(27, 29, 33, 0.34);\n  --tcw-scroll-thumb: rgba(27, 29, 33, 0.16);\n  --tcw-scroll-thumb-hover: rgba(27, 29, 33, 0.3);\n  --tcw-field-chevron: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.75l3 3 3-3' fill='none' stroke='%236c7077' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  --tcw-field-calendar: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%236c7077' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='2'/%3E%3Cpath d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/%3E%3C/g%3E%3C/svg%3E\");\n  --tcw-check-mark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.25l2.6 2.6L12 5.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n}\n\n/* --- Text, number, date and time fields, and selects --- */\n\n/* Fields speak the widget's type, not the browser's (a part's own font still wins). */\n:where(.tcw-root) :where(input, select, textarea, button) {\n  font-family: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-settings-select,\n  .tcw-settings-number,\n  .tcw-goto-input,\n  .tcw-watchlist-input,\n  .tcw-indi-input,\n  .tcw-style-name,\n  .tcw-drawing-text,\n  .tcw-replay-speed,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-alerts-form select\n) {\n  border: 1px solid var(--tcw-field-line);\n  border-radius: var(--tcw-input-radius);\n  background-color: var(--tcw-field-bg);\n  color: var(--tcw-text);\n  outline: none;\n  box-shadow: none;\n  transition:\n    border-color var(--tcw-dur-fast) var(--tcw-ease),\n    background-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-settings-select,\n  .tcw-settings-number,\n  .tcw-goto-input,\n  .tcw-watchlist-input,\n  .tcw-indi-input,\n  .tcw-style-name,\n  .tcw-drawing-text,\n  .tcw-replay-speed,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-alerts-form select\n):hover:not(:disabled, :focus) {\n  border-color: var(--tcw-field-line-hover);\n  background-color: var(--tcw-field-bg-hover);\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-settings-select,\n  .tcw-settings-number,\n  .tcw-goto-input,\n  .tcw-watchlist-input,\n  .tcw-indi-input,\n  .tcw-style-name,\n  .tcw-drawing-text,\n  .tcw-replay-speed,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-alerts-form select\n):is(:focus, :focus-visible, [aria-expanded='true']) {\n  border-color: var(--tcw-field-line-focus);\n  background-color: var(--tcw-field-bg-focus);\n  outline: none;\n  box-shadow: none;\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-indi-input,\n  .tcw-watchlist-input,\n  .tcw-goto-input,\n  .tcw-alerts-form input\n):is([aria-invalid='true'], [aria-invalid='']):is(*, :hover, :focus) {\n  /* As specific as the hover rule and later, so a wrong value stays red under the pointer and in focus. */\n  border-color: var(--tcw-red);\n  box-shadow: none;\n}\n\n.tcw-root :is(input, textarea)::placeholder {\n  color: var(--tcw-field-placeholder);\n  opacity: 1;\n}\n\n.tcw-root :is(input, select, textarea):disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Selects: the browser's arrow gives way to a fine chevron. */\n.tcw-root select:not([multiple]):not([size]) {\n  appearance: none;\n  -webkit-appearance: none;\n  background-image: var(--tcw-field-chevron);\n  background-repeat: no-repeat;\n  background-size: 12px 12px;\n  background-position: right 8px center;\n  padding-inline-end: 26px;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n\n.tcw-root[dir='rtl'] select:not([multiple]):not([size]),\n.tcw-root [dir='rtl'] select:not([multiple]):not([size]) {\n  background-position: left 8px center;\n}\n\n/* Number fields: the steppers show only on a field in use. */\n.tcw-root input[type='number']::-webkit-inner-spin-button,\n.tcw-root input[type='number']::-webkit-outer-spin-button {\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root input[type='number']:is(:hover, :focus)::-webkit-inner-spin-button {\n  opacity: 0.55;\n}\n\n/* Date and time: the widget's calendar icon where the browser's own can be hidden. */\n@supports selector(::-webkit-calendar-picker-indicator) {\n  .tcw-root input[type='date'] {\n    background-image: var(--tcw-field-calendar);\n    background-repeat: no-repeat;\n    background-size: 15px 15px;\n    background-position: right 8px center;\n    padding-inline-end: 30px;\n    cursor: text;\n  }\n\n  .tcw-root[dir='rtl'] input[type='date'],\n  .tcw-root [dir='rtl'] input[type='date'] {\n    background-position: left 8px center;\n  }\n}\n\n.tcw-root input:is([type='date'], [type='time'])::-webkit-calendar-picker-indicator {\n  display: none;\n}\n\n.tcw-root input:is([type='date'], [type='time'])::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n\n/* --- Checkboxes and radios --- */\n\n.tcw-root input:is([type='checkbox'], [type='radio']) {\n  appearance: none;\n  -webkit-appearance: none;\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  border: 1.5px solid var(--tcw-check-line);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent center / 14px 14px no-repeat;\n  cursor: pointer;\n  vertical-align: middle;\n  transition:\n    border-color var(--tcw-dur-fast) var(--tcw-ease),\n    background-color var(--tcw-dur-fast) var(--tcw-ease),\n    box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root input[type='radio'] {\n  border-radius: 50%;\n}\n\n.tcw-root input:is([type='checkbox'], [type='radio']):hover:not(:disabled) {\n  border-color: var(--tcw-text-dim);\n}\n\n.tcw-root input[type='checkbox']:checked {\n  border-color: var(--tcw-accent);\n  background-color: var(--tcw-accent);\n  background-image: var(--tcw-check-mark);\n}\n\n.tcw-root input[type='radio']:checked {\n  border-color: var(--tcw-accent);\n  background-image: radial-gradient(circle, var(--tcw-accent) 0 3.5px, transparent 4px);\n}\n\n.tcw-root input:is([type='checkbox'], [type='radio']):focus {\n  outline: none;\n}\n\n.tcw-root input:is([type='checkbox'], [type='radio']):focus-visible {\n  box-shadow: 0 0 0 3px var(--tcw-accent-soft);\n}\n\n/* --- Sliders --- */\n\n.tcw-root input[type='range'] {\n  appearance: none;\n  -webkit-appearance: none;\n  height: 4px;\n  border-radius: 999px;\n  background: var(--tcw-field-line-hover);\n  outline: none;\n  cursor: pointer;\n}\n\n.tcw-root input[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);\n  transition: transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root input[type='range']::-moz-range-thumb {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n}\n\n.tcw-root input[type='range']:hover::-webkit-slider-thumb {\n  transform: scale(1.12);\n}\n\n.tcw-root input[type='range']:focus-visible::-webkit-slider-thumb {\n  box-shadow: 0 0 0 4px var(--tcw-accent-soft);\n}\n\n/* --- The select list --- */\n\n.tcw-select-menu {\n  z-index: 120;\n  padding: var(--tcw-menu-pad);\n  max-width: min(360px, calc(100vw - 16px));\n  font-size: var(--tcw-font-size);\n}\n\n.tcw-select-group {\n  padding: var(--tcw-space-4) var(--tcw-space-4) var(--tcw-space-2);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-muted);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-select-option {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  min-height: var(--tcw-menu-item-h);\n  padding-block: 0;\n  padding-inline: var(--tcw-space-3) var(--tcw-space-5);\n  border-radius: var(--tcw-menu-item-radius);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.tcw-select-option-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tcw-select-check {\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n}\n\n.tcw-select-option.tcw-active {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-select-option[aria-selected='true'] {\n  color: var(--tcw-text);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-select-option[aria-selected='true'] .tcw-select-check {\n  background: var(--tcw-accent);\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.25l3 3L12.5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n  mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.25l3 3L12.5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n}\n\n.tcw-select-option[aria-disabled='true'] {\n  opacity: 0.4;\n  cursor: default;\n  background: none;\n}\n\n/* --- The calendar --- */\n\n.tcw-calendar {\n  z-index: 120;\n  width: 268px;\n  padding: 10px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n.tcw-calendar-head {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-bottom: 8px;\n}\n\n.tcw-calendar-title {\n  flex: 1;\n  text-align: center;\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  letter-spacing: -0.01em;\n}\n\n.tcw-calendar-nav {\n  display: inline-grid;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-calendar-nav svg {\n  width: 16px;\n  height: 16px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.6;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.tcw-calendar[dir='rtl'] .tcw-calendar-nav svg,\n[dir='rtl'] .tcw-calendar-nav svg {\n  transform: scaleX(-1);\n}\n\n.tcw-calendar-nav:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-calendar-weekdays,\n.tcw-calendar-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n}\n\n.tcw-calendar-weekdays {\n  margin-bottom: 4px;\n  padding: 3px 0;\n  border-radius: var(--tcw-radius-sm);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-calendar-weekday {\n  text-align: center;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-muted);\n  line-height: 20px;\n}\n\n.tcw-calendar-grid {\n  row-gap: 2px;\n}\n\n.tcw-calendar-week {\n  display: contents;\n}\n\n.tcw-calendar-day {\n  position: relative;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-calendar-day:hover:not(:disabled) {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-calendar-day.tcw-outside {\n  color: var(--tcw-text-muted);\n  opacity: 0.55;\n}\n\n/* Today: accent figures over a short line. */\n.tcw-calendar-day.tcw-today {\n  color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-calendar-day.tcw-today::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  bottom: 5px;\n  width: 12px;\n  height: 2px;\n  margin-left: -6px;\n  border-radius: 1px;\n  background: currentColor;\n}\n\n.tcw-calendar-day[aria-selected='true'] {\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  font-weight: var(--tcw-weight-strong);\n  opacity: 1;\n}\n\n.tcw-calendar-day:disabled {\n  opacity: 0.28;\n  cursor: not-allowed;\n}\n\n.tcw-calendar-day:focus {\n  outline: none;\n}\n\n.tcw-calendar-day:focus-visible {\n  box-shadow: inset 0 0 0 1.5px var(--tcw-accent);\n}\n\n.tcw-calendar-foot {\n  display: flex;\n  justify-content: flex-end;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-calendar-today {\n  height: 26px;\n  padding: 0 10px;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-accent);\n  font: inherit;\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n}\n\n.tcw-calendar-today:hover {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-calendar-today:focus-visible,\n.tcw-calendar-nav:focus-visible {\n  outline: none;\n  box-shadow: inset 0 0 0 1.5px var(--tcw-accent);\n}\n\n/* --- Scrollbars: thin and rounded, a thumb on no track. Low specificity:\n   a part that hides its bar keeps it hidden. --- */\n\n:where(.tcw-root) ::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n\n:where(.tcw-root) ::-webkit-scrollbar-track,\n:where(.tcw-root) ::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n:where(.tcw-root) ::-webkit-scrollbar-thumb {\n  background: var(--tcw-scroll-thumb);\n  background-clip: padding-box;\n  border: 3px solid transparent;\n  border-radius: 999px;\n}\n\n:where(.tcw-root) ::-webkit-scrollbar-thumb:hover {\n  background: var(--tcw-scroll-thumb-hover);\n  background-clip: padding-box;\n  border: 2.5px solid transparent;\n}\n\n/* Engines without the pseudo-elements take the standard properties. */\n@supports not selector(::-webkit-scrollbar) {\n  :where(.tcw-root, .tcw-root *) {\n    scrollbar-width: thin;\n    scrollbar-color: var(--tcw-scroll-thumb) transparent;\n  }\n}\n\n/* --- Switches: flat, no glow --- */\n\n.tcw-root .tcw-toggle.tcw-on {\n  box-shadow: none;\n}\n\n.tcw-root .tcw-toggle::after {\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\n}\n\n.tcw-root .tcw-toggle:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--tcw-accent-soft);\n}\n\n/* One choice of a few in a row (a radio group): the chosen one as the look shows a chosen button. */\n.tcw-segmented {\n  display: inline-flex;\n  flex-wrap: wrap;\n  max-width: 100%;\n  gap: 2px;\n  padding: 2px;\n  border-radius: calc(var(--tcw-control-radius) + 2px);\n  background: var(--tcw-hover-bg);\n}\n.tcw-segment {\n  height: calc(var(--tcw-control-h) - 4px);\n  padding-inline: var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-segment:hover { color: var(--tcw-text); }\n.tcw-segment[aria-checked='true'] {\n  background: var(--tcw-on-bg);\n  color: var(--tcw-on-fg);\n  font-weight: var(--tcw-weight-strong);\n  box-shadow: var(--tcw-on-ring);\n}\n.tcw-segment:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A number between a − and a +: one field, the figure right-aligned in the chart's mono type. */\n.tcw-stepper {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: stretch;\n  height: var(--tcw-control-h);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-bg);\n  overflow: hidden;\n}\n.tcw-stepper:focus-within { box-shadow: var(--tcw-ring); }\n.tcw-stepper .tcw-indi-input {\n  width: 110px;\n  height: auto;\n  padding-inline: var(--tcw-space-3);\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n.tcw-stepper .tcw-indi-input::-webkit-inner-spin-button,\n.tcw-stepper .tcw-indi-input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }\n.tcw-stepper .tcw-indi-input:focus { outline: none; box-shadow: none; }\n.tcw-stepper-btn {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n}\n.tcw-stepper-btn:hover { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n.tcw-stepper-btn:focus-visible { outline: none; background: var(--tcw-hover-bg); color: var(--tcw-text); }\n\n/* Forced colours drop the box-shadow rings: an outline marks focus and the chosen choice. */\n@media (forced-colors: active) {\n  .tcw-segment[aria-checked='true'] { outline: 2px solid Highlight; }\n  .tcw-segment:focus-visible,\n  .tcw-stepper-btn:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }\n  .tcw-stepper:focus-within { outline: 2px solid Highlight; }\n}\n", Lt = "/* === The indicators dialog === */\n\n/* 610 wide, a Fibonacci number: the groups take 233 and the list 377 beside them (377 : 233 = phi).\n   A fixed height, so the dialog keeps still while a search shortens the list. */\n.tcw-modal.tcw-ip {\n  width: 610px;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n.tcw-ip-search,\n.tcw-ss-search {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: none;\n  height: var(--tcw-control-h);\n  margin: var(--tcw-space-4) var(--tcw-space-6);\n  padding: 0 var(--tcw-space-4);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text-muted);\n  transition: border-color var(--tcw-dur-fast) var(--tcw-ease), box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ip-search:focus-within,\n.tcw-ss-search:focus-within {\n  border-color: var(--tcw-accent);\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-ip-search svg,\n.tcw-ss-search svg {\n  flex: none;\n}\n\n.tcw-ip-search input,\n.tcw-ss-search input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n}\n\n.tcw-ip-search input::placeholder,\n.tcw-ss-search input::placeholder {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-ip-body {\n  display: grid;\n  grid-template-columns: 233px minmax(0, 1fr);\n  flex: 1;\n  min-height: 0;\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-ip-nav,\n.tcw-set-nav {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: var(--tcw-space-4) var(--tcw-space-3);\n  /* Logical sides: in Arabic, Hebrew or Persian the tabs sit on the right. */\n  border-inline-end: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  overflow-y: auto;\n  border-end-start-radius: var(--tcw-dialog-radius);\n}\n\n.tcw-ip-tab,\n.tcw-set-tab {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: none;\n  height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  text-align: start;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ip-tab svg,\n.tcw-set-tab svg {\n  flex: none;\n}\n\n/* The kinds start below a gap: favourites and templates are yours, the rest the library's. */\n.tcw-ip-tab[data-view='all'] {\n  margin-top: var(--tcw-space-4);\n}\n\n.tcw-ip-tab:hover,\n.tcw-set-tab:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-ip-tab.tcw-active,\n.tcw-set-tab.tcw-active {\n  background: var(--tcw-on-bg);\n  color: var(--tcw-on-fg);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-ip-nav--searching .tcw-ip-tab.tcw-active {\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font-weight: var(--tcw-weight);\n}\n\n.tcw-ip-list {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 0 var(--tcw-space-4) var(--tcw-space-5);\n}\n\n/* Each kind's name stays at the top while its indicators scroll under it. */\n.tcw-ip-heading {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: var(--tcw-space-5) var(--tcw-space-4) var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-ip-list > :first-child:not(.tcw-ip-heading) {\n  margin-top: var(--tcw-space-4);\n}\n\n.tcw-ip-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n  border-radius: var(--tcw-menu-item-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ip-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ip-add {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: 1;\n  min-width: 0;\n  height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  text-align: start;\n  cursor: pointer;\n}\n\n.tcw-ip-add:focus-visible,\n.tcw-ip-aside:focus-visible,\n.tcw-ip-tab:focus-visible,\n.tcw-set-tab:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-ip-add svg {\n  flex: none;\n  color: var(--tcw-text-muted);\n}\n\n.tcw-ip-name {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ip-short {\n  flex: none;\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n}\n\n/* Where it draws, quietly at the row's end. */\n.tcw-ip-kind {\n  flex: none;\n  margin-inline-start: auto;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* How many are on the chart: ink on its wash, the figures in a column. */\n.tcw-ip-count {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  min-width: var(--tcw-space-6);\n  height: var(--tcw-space-6);\n  padding: 0 var(--tcw-space-2);\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n}\n\n.tcw-ip-aside {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n/* Shown on the row in hand; always for a starred one, filled in ink; always on a touch screen. */\n.tcw-ip-row:hover .tcw-ip-aside,\n.tcw-ip-row:focus-within .tcw-ip-aside,\n.tcw-ip-star[aria-pressed='true'] {\n  opacity: 1;\n}\n\n@media (hover: none) {\n  .tcw-ip-aside {\n    opacity: 1;\n  }\n}\n\n.tcw-ip-aside:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ip-star[aria-pressed='true'] {\n  color: var(--tcw-accent);\n}\n\n.tcw-ip-star[aria-pressed='true'] svg path {\n  fill: currentColor;\n}\n\n.tcw-ip-remove:hover {\n  color: var(--tcw-red);\n}\n\n.tcw-ip-save {\n  flex: none;\n  width: 100%;\n  color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-ip-save svg {\n  color: currentColor;\n}\n\n.tcw-ip-save:hover {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-ip-empty {\n  max-width: 34ch;\n  padding: var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.5;\n  text-wrap: pretty;\n}\n\n/* Heard by a screen reader, not seen. */\n.tcw-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* A phone: the dialog is the widget's sheet, as tall as a sheet goes, and the groups a row of chips. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-ip {\n    /* Above the on-screen keyboard: the sheet's top stays on the screen. */\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-ip-search,\n  .tcw-ss-search {\n    margin-inline: var(--tcw-space-4);\n  }\n\n  .tcw-ip-body {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n\n  .tcw-ip-nav,\n  .tcw-set-nav {\n    flex-direction: row;\n    gap: var(--tcw-space-2);\n    padding: var(--tcw-space-3) var(--tcw-space-4);\n    border-inline-end: none;\n    border-bottom: 1px solid var(--tcw-divider);\n    border-radius: 0;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n  }\n\n  .tcw-ip-tab[data-view='all'] {\n    margin-top: 0;\n    margin-inline-start: var(--tcw-space-4);\n  }\n\n  .tcw-ip-tab,\n  .tcw-set-tab {\n    /* A finger's size, as the dialogs' other tabs on a phone. */\n    min-height: 40px;\n    border: var(--tcw-border-w) solid var(--tcw-border);\n  }\n\n\n  .tcw-ip-list {\n    padding-inline: var(--tcw-space-3);\n  }\n}\n\n/* === The indicator settings, and a drawing's === */\n\n/* One half step of phi under the indicators dialog: 610 / sqrt(phi) = 480. */\n@media (min-width: 641px) {\n  .tcw-modal.tcw-modal-narrow.tcw-indi,\n  .tcw-modal.tcw-modal-narrow.tcw-drawing-settings {\n    width: 480px;\n    max-width: 92vw;\n  }\n}\n\n/* A line, or a kind of interval: ticked where it shows, its name, then what sets it. */\n.tcw-indi-plot-name {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n  cursor: pointer;\n}\n\n.tcw-indi-plot-name .tcw-settings-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Unticked, its name steps back. */\n.tcw-indi-plot-name:has(input:not(:checked)) .tcw-settings-label {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-indi-plot-controls,\n.tcw-indi-range {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: none;\n}\n\n.tcw-indi-plot-controls .tcw-indi-select {\n  width: 104px;\n}\n\n.tcw-indi-range {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-indi-range .tcw-indi-input {\n  width: 68px;\n  text-align: end;\n}\n\n.tcw-indi-range .tcw-indi-input:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n/* Defaults on the left; Cancel and Ok on the right, one height for all three. */\n.tcw-indi .tcw-modal-footer,\n.tcw-set .tcw-modal-footer,\n.tcw-drawing-settings .tcw-modal-footer {\n  gap: var(--tcw-space-4);\n}\n\n.tcw-footer-end {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n}\n\n.tcw-indi .tcw-modal-footer button,\n.tcw-set .tcw-modal-footer button,\n.tcw-drawing-settings .tcw-modal-footer button {\n  height: var(--tcw-menu-item-h);\n  padding-block: 0;\n}\n\n.tcw-footer-menu,\n.tcw-footer-cancel {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  padding-inline: var(--tcw-space-5);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-footer-cancel {\n  border-color: var(--tcw-border-strong);\n  color: var(--tcw-text);\n}\n\n.tcw-footer-menu:hover,\n.tcw-footer-menu[aria-expanded='true'],\n.tcw-footer-cancel:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-footer-menu:focus-visible,\n.tcw-footer-cancel:focus-visible,\n.tcw-indi .tcw-done-btn:focus-visible,\n.tcw-set .tcw-done-btn:focus-visible,\n.tcw-drawing-settings .tcw-done-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A drawing's switches: the box, then its name, a list without rules between. */\n.tcw-check-row {\n  justify-content: flex-start;\n  gap: var(--tcw-space-4);\n  padding-block: var(--tcw-space-3);\n  cursor: pointer;\n}\n\n.tcw-settings-row + .tcw-check-row,\n.tcw-check-row + .tcw-settings-row {\n  border-top: 0;\n}\n\n/* A point: its name, then its price, date and time in columns; on a phone the price over the date and time. */\n.tcw-draw-point {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);\n  gap: var(--tcw-space-4);\n}\n\n.tcw-draw-point > .tcw-settings-label {\n  white-space: nowrap;\n}\n\n.tcw-draw-point .tcw-indi-plot-controls {\n  display: contents;\n}\n\n.tcw-draw-point input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n}\n\n.tcw-draw-point input[type='number'] {\n  text-align: end;\n}\n\n@media (max-width: 640px) {\n  .tcw-draw-point {\n    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);\n  }\n\n  .tcw-draw-point > .tcw-settings-label {\n    grid-row: span 2;\n  }\n\n  .tcw-draw-point input[type='number'] {\n    grid-column: span 2;\n  }\n}\n\n.tcw-drawing-settings .tcw-indi-plot-controls input[type='number']:not(.tcw-draw-point *) {\n  width: 68px;\n  text-align: end;\n}\n\n/* The unit after a number (the fill's opacity in %). */\n.tcw-unit {\n  margin-inline-start: calc(-1 * var(--tcw-space-2));\n  color: var(--tcw-text-muted);\n}\n\n/* === The chart settings === */\n\n/* 776 x 610: half a step of phi wider than the indicators dialog (610 x sqrt(phi) = 776), as tall as it,\n   so the dialog is a sqrt(phi) rectangle. The tabs take 233 down the side, as the indicator groups do. */\n.tcw-modal.tcw-set {\n  width: 776px;\n  max-width: 94vw;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n.tcw-set-body {\n  display: grid;\n  grid-template-columns: 233px minmax(0, 1fr);\n  flex: 1;\n  min-height: 0;\n}\n\n.tcw-set-panel {\n  min-width: 0;\n}\n\n/* A phone: the widget's sheet across the screen, the tabs a row of chips over the settings. After the rules above, which it overrides. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-set {\n    width: 100vw;\n    max-width: 100vw;\n    /* Above the on-screen keyboard: the sheet's top stays on the screen. */\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-set-body {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n}\n\n/* === The symbol search, and the same dialog comparing === */\n\n/* As wide and as still as the indicators dialog: 610, a fixed height while a search shortens the list. */\n.tcw-modal.tcw-ss {\n  width: 610px;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n/* Comparing: how the next symbol goes on the chart, under the search. */\n.tcw-ss-way {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  flex: none;\n  margin: 0 var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n\n.tcw-ss-way > span {\n  flex: none;\n}\n\n.tcw-root .tcw-ss-way-select {\n  flex: 1;\n  min-width: 0;\n  height: var(--tcw-control-h);\n  padding-block: 0;\n}\n\n/* The kinds the results come in: All, stock, crypto… */\n.tcw-ss-kinds {\n  display: flex;\n  flex-wrap: wrap;\n  flex: none;\n  gap: var(--tcw-space-3);\n  margin: 0 var(--tcw-space-6) var(--tcw-space-4);\n}\n\n.tcw-ss-type {\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-5);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  text-transform: capitalize;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ss-type:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-ss-type[aria-pressed='true'] {\n  border-color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-type:focus-visible,\n.tcw-ss-remove:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* The symbol takes 144 (89 x phi), the name the rest; kind and exchange at the end. The heads line up\n   with the rows: the inset of what scrolls and the row's own. */\n.tcw-ss-columns,\n.tcw-ss-row {\n  display: grid;\n  grid-template-columns: 144px minmax(0, 1fr) auto;\n  align-items: center;\n  column-gap: var(--tcw-space-5);\n}\n\n.tcw-ss-columns {\n  flex: none;\n  padding: var(--tcw-space-3) calc(var(--tcw-space-4) * 2);\n  border-top: 1px solid var(--tcw-divider);\n  border-bottom: 1px solid var(--tcw-divider);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* What scrolls: what is compared, the symbols, a note when there are none. */\n.tcw-ss-results {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  /* A row the arrows reach scrolls in below its heading, not under it. */\n  scroll-padding-block-start: calc(var(--tcw-space-5) + var(--tcw-space-2) + var(--tcw-font-size-xs) * 1.5 - var(--tcw-space-3));\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-5);\n}\n\n.tcw-ss-row {\n  min-height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border-radius: var(--tcw-menu-item-radius);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ss-row.tcw-selected {\n  background: var(--tcw-hover-bg);\n}\n\n/* The figures of a ticker, in the mono face, left to right in any widget, at the start of its column;\n   the chart's own in ink. */\n.tcw-ss-symbol {\n  justify-self: start;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text);\n  font-family: var(--tcw-font-mono);\n  font-weight: var(--tcw-weight-strong);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ss-row.tcw-current .tcw-ss-symbol {\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-symbol mark {\n  background: transparent;\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-desc-cell {\n  min-width: 0;\n}\n\n/* As wide as its words, at the start of the column, whichever way they run. */\n.tcw-ss-desc {\n  display: block;\n  width: fit-content;\n  max-width: 100%;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-size: var(--tcw-font-size-sm);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ss-meta {\n  display: flex;\n  align-items: baseline;\n  gap: var(--tcw-space-4);\n  justify-self: end;\n  white-space: nowrap;\n}\n\n.tcw-ss-kind {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n}\n\n.tcw-ss-exchange {\n  color: var(--tcw-text-dim);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* The chart's symbol, or one on it already: a check after the exchange. */\n.tcw-ss-row:has(.tcw-ss-check) {\n  grid-template-columns: 144px minmax(0, 1fr) auto auto;\n}\n\n.tcw-ss-check {\n  display: inline-grid;\n  place-items: center;\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-heading[hidden] {\n  display: none;\n}\n\n/* \"On the chart\" and \"Symbols\", above their rows while they scroll. */\n.tcw-ss-heading {\n  position: sticky;\n  top: calc(var(--tcw-space-3) * -1);\n  z-index: 1;\n  padding: var(--tcw-space-5) var(--tcw-space-4) var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-ss-added-row {\n  display: grid;\n  grid-template-columns: 144px minmax(0, 1fr) auto;\n  align-items: center;\n  column-gap: var(--tcw-space-5);\n  min-height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border-radius: var(--tcw-menu-item-radius);\n}\n\n.tcw-ss-added-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n/* How it is compared, after the line's colour where it has one of its own. */\n.tcw-ss-way-cell {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n}\n\n.tcw-ss-swatch {\n  flex: none;\n  width: var(--tcw-space-4);\n  height: var(--tcw-space-4);\n  border-radius: var(--tcw-radius-sm);\n}\n\n.tcw-ss-way-label {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-size: var(--tcw-font-size-sm);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ss-remove {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-ss-remove:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-red);\n}\n\n.tcw-ss-empty {\n  max-width: 44ch;\n  padding: var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.5;\n  text-wrap: pretty;\n}\n\n/* The way the dialog opens too: a letter typed on the chart. */\n.tcw-ss-foot {\n  flex: none;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-top: 1px solid var(--tcw-divider);\n  border-radius: 0 0 var(--tcw-dialog-radius) var(--tcw-dialog-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  text-align: center;\n}\n\n/* === Go to === */\n\n/* 377: the step of phi under the search dialogs. */\n@media (min-width: 641px) {\n  .tcw-modal.tcw-goto {\n    width: 377px;\n  }\n}\n\n.tcw-goto-form {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.tcw-goto-fields {\n  display: grid;\n  gap: var(--tcw-space-5);\n  padding: var(--tcw-space-6) var(--tcw-space-6) var(--tcw-space-4);\n}\n\n/* The date takes the room; the time 144 beside it; a range's end named above its two. */\n.tcw-goto-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 144px;\n  gap: var(--tcw-space-3) var(--tcw-space-4);\n  align-items: center;\n}\n\n.tcw-goto-label {\n  grid-column: 1 / -1;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-root .tcw-goto-input {\n  width: 100%;\n  min-width: 0;\n  height: var(--tcw-control-h);\n  box-sizing: border-box;\n  padding: 0 var(--tcw-space-4);\n  font-size: var(--tcw-font-size);\n  font-variant-numeric: tabular-nums;\n}\n\n/* No time on daily bars: the date across the row. */\n.tcw-goto-input[type='date']:last-child {\n  grid-column: 1 / -1;\n}\n\n/* The month under the fields, part of the dialog: no card of its own. */\n.tcw-calendar.tcw-goto-calendar {\n  position: static;\n  width: auto;\n  padding: var(--tcw-space-4) var(--tcw-space-6) var(--tcw-space-5);\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  animation: none;\n}\n\n.tcw-goto-calendar .tcw-calendar-day {\n  height: 34px;\n}\n\n.tcw-goto .tcw-modal-footer {\n  justify-content: flex-end;\n  gap: var(--tcw-space-4);\n}\n\n.tcw-goto .tcw-modal-footer button {\n  height: var(--tcw-menu-item-h);\n  padding-block: 0;\n}\n\n.tcw-goto .tcw-done-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A phone: both are the widget's sheet; the search as tall as a sheet goes, its symbols 89 wide. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-ss {\n    /* Above the on-screen keyboard: the sheet's top stays on the screen. */\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-ss-way,\n  .tcw-ss-kinds {\n    margin-inline: var(--tcw-space-4);\n  }\n\n  .tcw-ss-columns,\n  .tcw-ss-row,\n  .tcw-ss-added-row {\n    grid-template-columns: 89px minmax(0, 1fr) auto;\n  }\n\n  .tcw-ss-row:has(.tcw-ss-check) {\n    grid-template-columns: 89px minmax(0, 1fr) auto auto;\n  }\n\n  .tcw-ss-kind {\n    display: none;\n  }\n\n  .tcw-ss-row,\n  .tcw-ss-added-row {\n    min-height: 44px;\n  }\n}\n\n/* Without a keyboard there are no letters to type on the chart. */\n@media (hover: none) and (pointer: coarse) {\n  .tcw-ss-foot {\n    display: none;\n  }\n}\n\n/* === The shortcut sheet === */\n\n/* As wide and as still as the indicators dialog: 610, a fixed height while a search shortens the list. */\n.tcw-modal.tcw-hotkey-sheet {\n  width: 610px;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n.tcw-hotkey-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 0 var(--tcw-space-6) var(--tcw-space-5);\n  border-top: 1px solid var(--tcw-divider);\n  columns: 2;\n  column-gap: var(--tcw-space-7);\n}\n\n/* A group keeps together in its column, its name above its rows. */\n.tcw-hotkey-group {\n  break-inside: avoid;\n  padding-top: var(--tcw-space-5);\n}\n\n.tcw-hotkey-heading {\n  padding-bottom: var(--tcw-space-3);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* What it does on the left, its keys on the right, the keys in a column of their own. */\n.tcw-hotkey-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--tcw-space-4);\n  min-height: calc(var(--tcw-space-6) + var(--tcw-space-3));\n  padding: var(--tcw-space-2) 0;\n}\n\n.tcw-hotkey-label {\n  min-width: 0;\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.4;\n}\n\n.tcw-hotkey-keys {\n  display: inline-flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--tcw-space-2);\n  flex: none;\n  max-width: 55%;\n}\n\n/* A key: its name in the mono face on a key's face. */\n.tcw-hotkey-key,\n.tcw-cp-key {\n  display: inline-block;\n  min-width: calc(var(--tcw-space-6) - var(--tcw-space-2));\n  padding: 0 var(--tcw-space-3);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-bottom-width: 2px;\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text-dim);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.6;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* A gesture is not a key: its words, quieter. */\n.tcw-hotkey-gesture {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  white-space: nowrap;\n}\n\n.tcw-hotkey-sep {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n}\n\n.tcw-hotkey-empty {\n  padding: var(--tcw-space-6) 0;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n\n/* How to open it again, at its foot. */\n.tcw-hotkey-foot {\n  flex: none;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-top: 1px solid var(--tcw-divider);\n  border-radius: 0 0 var(--tcw-dialog-radius) var(--tcw-dialog-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n}\n\n/* === The command palette === */\n\n/* 610 wide, a third of the way down: a launcher, not a form; its search is the dialogs' search row. */\n.tcw-modal.tcw-cp {\n  top: 19.1%;\n  transform: translate(-50%, 0);\n  width: 610px;\n  max-height: min(610px, 76.4vh);\n  max-height: min(610px, 76.4dvh);\n  animation: none;\n}\n\n.tcw-cp .tcw-cp-search {\n  margin-top: var(--tcw-space-5);\n}\n\n.tcw-cp-results {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  /* A row the arrows reach scrolls in below its group's heading, not under it. */\n  scroll-padding-block-start: calc(var(--tcw-space-5) + var(--tcw-space-2) + var(--tcw-font-size-xs) * 1.5);\n  padding: 0 var(--tcw-space-4) var(--tcw-space-4);\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-cp-heading {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: var(--tcw-space-5) var(--tcw-space-4) var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-cp-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border-radius: var(--tcw-menu-item-radius);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size);\n  cursor: pointer;\n}\n\n.tcw-cp-row.tcw-selected {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-cp-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* What is on now: its name in ink, a check at the end. */\n.tcw-cp-row.tcw-on .tcw-cp-label {\n  color: var(--tcw-accent);\n}\n\n.tcw-cp-check {\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  color: var(--tcw-accent);\n}\n\n.tcw-cp-empty {\n  padding: var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n\n/* === Layouts === */\n\n/* 480, as the settings of an indicator: a list of names and when they were saved. On a phone, the sheet's width. */\n.tcw-modal.tcw-layouts-dialog {\n  max-height: min(610px, 86vh);\n  max-height: min(610px, 86dvh);\n}\n@media (min-width: 641px) {\n  .tcw-modal.tcw-layouts-dialog { width: 480px; }\n}\n\n.tcw-layouts-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-5);\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-layouts-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--tcw-space-1);\n}\n\n.tcw-layouts-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  padding-inline-end: var(--tcw-space-3);\n  border-radius: var(--tcw-menu-item-radius);\n}\n\n.tcw-layouts-row:hover,\n.tcw-layouts-row:focus-within {\n  background: var(--tcw-hover-bg);\n}\n\n/* A column for the check of the one open, so every name starts at the same place. */\n.tcw-layouts-open {\n  display: grid;\n  grid-template-columns: var(--tcw-space-5) minmax(0, 1fr);\n  column-gap: var(--tcw-space-3);\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  padding: var(--tcw-space-3) var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  text-align: start;\n  cursor: pointer;\n}\n\n.tcw-layouts-open:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-layouts-name,\n.tcw-layouts-meta {\n  grid-column: 2;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-layouts-name {\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-layouts-meta {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n}\n\n.tcw-layouts-check {\n  display: inline-grid;\n  place-items: center;\n  grid-column: 1;\n  grid-row: 1 / span 2;\n  color: var(--tcw-accent);\n}\n\n.tcw-layouts-open[aria-current='true'] .tcw-layouts-name {\n  color: var(--tcw-accent);\n}\n\n/* Rename and delete show on the row in hand; always on a touch screen. */\n.tcw-layouts-row .tcw-account-actions {\n  display: flex;\n  gap: var(--tcw-space-1);\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-layouts-row:is(:hover, :focus-within) .tcw-account-actions,\n.tcw-layouts-row .tcw-account-actions:has(.tcw-layouts-confirm) {\n  opacity: 1;\n}\n\n@media (hover: none) {\n  .tcw-layouts-row .tcw-account-actions {\n    opacity: 1;\n  }\n}\n\n.tcw-layouts-confirm {\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-red);\n  /* White on the red in every theme. */\n  color: #fff;\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n}\n\n.tcw-layouts-confirm:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A phone: the sheets as tall as they go, the shortcuts in one column. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-hotkey-sheet {\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-hotkey-body {\n    columns: 1;\n    padding-inline: var(--tcw-space-4);\n  }\n\n  /* Their own heights outrank the sheet's: give them back its height, less the keyboard, and the palette its slide up. */\n  .tcw-modal.tcw-cp,\n  .tcw-modal.tcw-layouts-dialog {\n    max-height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    max-height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-modal.tcw-cp {\n    top: auto;\n    transform: none;\n    animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n  }\n\n  .tcw-cp .tcw-cp-search {\n    margin-top: var(--tcw-space-3);\n  }\n\n  :is(.tcw-hotkey-search, .tcw-cp-search, .tcw-layouts-search-row) {\n    margin-inline: var(--tcw-space-4);\n  }\n\n  .tcw-cp-row {\n    min-height: 44px;\n  }\n}\n\n/* === The order ticket === */\n\n/* 480, as a drawing's settings: the side, the order, its stop and target, then the receipt. On a phone, the sheet's width. */\n.tcw-modal.tcw-order-ticket {\n  max-height: min(610px, 92vh);\n  max-height: min(610px, 92dvh);\n}\n@media (min-width: 641px) {\n  .tcw-modal.tcw-order-ticket { width: 480px; }\n}\n.tcw-order-ticket[data-side='buy'] { --tcw-side: var(--tcw-green); }\n.tcw-order-ticket[data-side='sell'] { --tcw-side: var(--tcw-red); }\n\n.tcw-ticket-heading {\n  display: flex;\n  align-items: baseline;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n}\n.tcw-ticket-symbol {\n  overflow: hidden;\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.tcw-ticket-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n/* Buy and Sell: the chosen one filled with its colour, the ground's own colour on it. */\n.tcw-ticket-side {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--tcw-space-3);\n  margin-bottom: var(--tcw-space-4);\n}\n.tcw-ticket-side-btn {\n  height: 34px;\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-lg);\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-ticket-side-btn:hover { color: var(--tcw-text); }\n.tcw-ticket-buy[aria-pressed='true'] { border-color: var(--tcw-green); background: var(--tcw-green); color: var(--tcw-bg); }\n.tcw-ticket-sell[aria-pressed='true'] { border-color: var(--tcw-red); background: var(--tcw-red); color: var(--tcw-bg); }\n.tcw-ticket-side-btn:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* A row's control goes under its name when they don't fit side by side (a long choice at 320 px). */\n.tcw-ticket-row {\n  flex-wrap: wrap;\n  gap: var(--tcw-space-3) var(--tcw-space-5);\n}\n.tcw-ticket-market {\n  color: var(--tcw-text-dim);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* A stop or a target: its switch, its name with how far it is under it, then its price. */\n.tcw-ticket-optional {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: center;\n  gap: var(--tcw-space-4);\n}\n.tcw-ticket-optional-name {\n  display: flex;\n  flex-direction: column;\n  gap: var(--tcw-space-1);\n  min-width: 0;\n}\n.tcw-ticket-away {\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n  /* Left to right inside, but at the name's start in either direction (the column's, not its own). */\n  align-self: flex-start;\n}\n\n/* The receipt: under a torn-paper rule, each sum a label and a figure in the mono type. */\n.tcw-ticket-summary:not(:empty) {\n  display: grid;\n  gap: var(--tcw-space-2);\n  margin: 0 var(--tcw-space-6) var(--tcw-space-4);\n  padding-top: var(--tcw-space-4);\n  border-top: var(--tcw-border-w) dashed var(--tcw-border-strong);\n}\n.tcw-ticket-summary-row {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--tcw-space-5);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-ticket-figure {\n  color: var(--tcw-text);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-ticket-figure.tcw-ticket-up { color: var(--tcw-green); }\n.tcw-ticket-figure.tcw-ticket-down { color: var(--tcw-red); }\n\n.tcw-ticket-problems {\n  padding: 0 var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-ticket-problems p { margin: var(--tcw-space-1) 0; }\n\n/* Cancel and Place alone, at the end, as tall as each other. */\n.tcw-order-ticket .tcw-modal-footer { justify-content: flex-end; }\n.tcw-order-ticket .tcw-modal-footer button { height: var(--tcw-menu-item-h); padding-block: 0; }\n.tcw-ticket-place {\n  height: var(--tcw-menu-item-h);\n  padding-inline: var(--tcw-space-6);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-side, var(--tcw-accent));\n  color: var(--tcw-bg);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n}\n.tcw-ticket-place:hover:not(:disabled) { background: color-mix(in srgb, var(--tcw-side, var(--tcw-accent)) 86%, var(--tcw-text)); }\n.tcw-ticket-place:disabled { opacity: 0.45; cursor: not-allowed; }\n.tcw-ticket-place:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* A phone: the ticket is a sheet above the keyboard, its controls a finger's size. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-order-ticket {\n    max-height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    max-height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n  .tcw-stepper .tcw-indi-input { width: 96px; }\n  .tcw-stepper-btn, .tcw-segment { min-width: 34px; }\n  .tcw-segment { height: 34px; }\n  .tcw-stepper { height: 38px; }\n}\n\n/* Forced colours drop the box-shadow rings: an outline marks focus and the chosen side. */\n@media (forced-colors: active) {\n  .tcw-ticket-side-btn[aria-pressed='true'] { outline: 2px solid Highlight; }\n  .tcw-ticket-place { border: 1px solid ButtonText; }\n  .tcw-ticket-side-btn:focus-visible,\n  .tcw-ticket-place:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }\n}\n", Rt = "/* === The dock: the panels by the chart, and their rail === */\n\n/* In the body's row after the chart: the panel of the page open beside the chart, the rail at the outer edge\n   (both mirror in a right-to-left widget). */\n.tcw-dock {\n  position: relative;\n  display: flex;\n  flex: none;\n  min-height: 0;\n}\n\n/* The rail: as wide as the drawing tools on the other side, its buttons as theirs. */\n.tcw-dock-rail {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  width: var(--tcw-sidebar-w);\n  padding: var(--tcw-space-3) 0;\n  border-inline-start: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n}\n\n.tcw-dock-btn {\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-dock-btn svg {\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n\n.tcw-dock-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n/* The page open: in ink on its wash, as a tool in use on the other side. */\n.tcw-dock-btn[aria-pressed='true'] {\n  background: var(--tcw-on-icon-bg, var(--tcw-accent-soft));\n  color: var(--tcw-on-icon-fg, var(--tcw-accent));\n}\n\n.tcw-dock-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* The edge in focus shows as its line, in ink: a ring round a strip this thin reads as two lines. */\n.tcw-dock-resize:focus-visible {\n  outline: none;\n}\n\n@media (forced-colors: active) {\n  .tcw-dock-resize:is(:hover, :active, :focus-visible)::after {\n    background: Highlight;\n  }\n}\n\n/* The panel: 296 wide to start (377 / sqrt(phi)), from 233 to 377. */\n.tcw-dock-panel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: var(--tcw-dock-w, 296px);\n  min-height: 0;\n  border-inline-start: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n}\n\n/* Its edge by the chart: a strip to drag, a line in ink while in hand. */\n.tcw-dock-resize {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(var(--tcw-space-3) * -1);\n  z-index: 3;\n  width: calc(var(--tcw-space-3) * 2);\n  cursor: col-resize;\n  touch-action: none;\n}\n\n.tcw-dock-resize::after {\n  content: '';\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(var(--tcw-space-3) - 1px);\n  width: 2px;\n  background: transparent;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-dock-resize:hover::after,\n.tcw-dock-resize:active::after,\n.tcw-dock-resize:focus-visible::after {\n  background: var(--tcw-accent);\n}\n\n/* A page fills the panel and scrolls under its header; the floating panels it was lose their card. */\n.tcw-dock-panel > .tcw-dock-page {\n  position: static;\n  inset: auto;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: auto;\n  max-width: none;\n  max-height: none;\n  min-height: 0;\n  margin: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  animation: none;\n}\n\n/* One header for every page: its title, its own buttons, and the close at the end. 34 tall (21 + 13). */\n.tcw-dock-page > :is(.tcw-watchlist-header, .tcw-alerts-header, .tcw-tree-header, .tcw-datawin-header, .tcw-syminfo-header) {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  flex: none;\n  min-height: calc(var(--tcw-space-6) + var(--tcw-space-5));\n  margin: 0;\n  padding-block: 0;\n  padding-inline: var(--tcw-space-5) var(--tcw-space-3);\n  border-bottom: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-dock-page > :is(.tcw-alerts-header, .tcw-tree-header, .tcw-datawin-header, .tcw-syminfo-header) > span:first-child {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-dock-page :is(.tcw-watchlist-add, .tcw-watchlist-close, .tcw-alerts-close, .tcw-tree-close, .tcw-datawin-close, .tcw-syminfo-close) {\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-dock-page :is(.tcw-watchlist-add, .tcw-watchlist-close, .tcw-alerts-close, .tcw-tree-close, .tcw-datawin-close, .tcw-syminfo-close):hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-dock-page :is(.tcw-watchlist-add, .tcw-watchlist-close, .tcw-alerts-close, .tcw-tree-close, .tcw-datawin-close, .tcw-syminfo-close):focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* What scrolled in a box of its own on a floating panel scrolls with the page here (a phone's caps too). */\n.tcw-dock-page :is(.tcw-alerts-list, .tcw-datawin-body, .tcw-watchlist-list, .tcw-tree-list) {\n  max-height: none;\n  overflow-y: visible;\n}\n\n.tcw-dock-page .tcw-watchlist-list {\n  flex: 1;\n}\n\n/* The watchlist was a bar of its own: its width and shadow are the panel's now. */\n.tcw-dock-panel > .tcw-watchlist {\n  width: auto;\n  border-inline-start: none;\n  box-shadow: none;\n  overflow: hidden;\n}\n\n/* The symbol info's own padding sits under the header. */\n.tcw-dock-page.tcw-syminfo > .tcw-syminfo-body {\n  padding: var(--tcw-space-5);\n}\n\n/* Narrow (a phone, a narrow column): no rail; the panel rises from the bottom over the chart, 61.8% tall. */\n.tcw-root[data-tcw-narrow] .tcw-dock-rail,\n.tcw-root[data-tcw-narrow] .tcw-dock-resize {\n  display: none;\n}\n\n.tcw-root[data-tcw-narrow] .tcw-dock {\n  position: static;\n}\n\n/* Above the chart's lines and tags, under its toasts; above the on-screen keyboard. */\n.tcw-root[data-tcw-narrow] .tcw-dock-panel {\n  position: absolute;\n  inset-inline: 0;\n  bottom: var(--tcw-keyboard-inset, 0px);\n  z-index: 38;\n  width: auto;\n  height: 61.8%;\n  max-height: calc(100% - var(--tcw-keyboard-inset, 0px));\n  border-inline-start: none;\n  border-top: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-dialog-shadow);\n  padding-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n.tcw-root[data-tcw-narrow] .tcw-dock-page > :is(.tcw-watchlist-header, .tcw-alerts-header, .tcw-tree-header, .tcw-datawin-header, .tcw-syminfo-header) {\n  background: var(--tcw-bg-elevated);\n}\n\n/* The small buttons in a panel's rows: the browser's padding left their icons 8 px wide in a 20 px button. */\n:is(.tcw-tree-btn, .tcw-tree-add, .tcw-alerts-del, .tcw-watchlist-remove) {\n  padding: 0;\n}\n\n:is(.tcw-tree-btn, .tcw-tree-add, .tcw-alerts-del, .tcw-watchlist-remove) svg {\n  flex: none;\n}\n\n/* A page's title as the others': the watchlist's is its list's name, a menu. */\n.tcw-dock-page .tcw-watchlist-name {\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-3);\n  margin-inline-start: calc(var(--tcw-space-3) * -1);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: none;\n  letter-spacing: normal;\n  flex: 0 1 auto;\n}\n\n/* Its caret beside the name, the add and close buttons at the end. */\n.tcw-dock-page .tcw-watchlist-name::after {\n  margin-inline-start: var(--tcw-space-3);\n}\n\n.tcw-dock-page .tcw-watchlist-add {\n  margin-inline-start: auto;\n}\n", zt = /* @__PURE__ */ "toolbar,sidebar,statusBar,dock,alerts,objectTree,symbolInfo,symbolSearch,settings,indicatorSettings,drawingSettings,dataWindow,commandPalette,hotkeySheet,goToDate,replay,screenshot,copyImage,shareView,autoFib,themeToggle,fullscreen,accountPanel,orderTicket,bracketOrders,depthLadder,layouts,indicatorTemplates,compare,indicatorLegend,navigation,customTimeframes,intervalTyping,symbolTyping,dragDropImport,hotkeys,toasts,toolbar.symbol,toolbar.symbolInfo,toolbar.timeframes,toolbar.timeframeMenu,toolbar.chartType,toolbar.indicators,toolbar.layouts,toolbar.replay,toolbar.bracketOrders,toolbar.depthLadder,toolbar.accountPanel,toolbar.objectTree,toolbar.alerts,toolbar.screenshot,toolbar.settings,toolbar.themeToggle,toolbar.fullscreen,toolbar.compare,toolbar.undo,toolbar.redo,toolbar.trade,sidebar.cursor,sidebar.favorites,sidebar.lines,sidebar.fibonacci,sidebar.patterns,sidebar.forecasting,sidebar.annotation,sidebar.style,sidebar.magnet,sidebar.eraser,sidebar.zoomArea,sidebar.stayInDrawing,sidebar.undo,sidebar.redo,sidebar.clear,sidebar.lockAll,sidebar.hideAll,dock.watchlist,dock.alerts,dock.objectTree,dock.dataWindow,dock.symbolInfo,statusBar.range,statusBar.goToDate,statusBar.market,statusBar.connection,statusBar.symbol,statusBar.clock,statusBar.scale,statusBar.rangeTimeframe,indicatorLegend.values,indicatorLegend.visibility,indicatorLegend.settings,indicatorLegend.remove,indicatorLegend.more,pane.move,pane.collapse,pane.maximize,navigation.zoom,navigation.scroll,navigation.reset,menu.chart,menu.chart.alert,menu.chart.order,menu.chart.orderTicket,menu.chart.horizontalLine,menu.chart.resetView,menu.chart.drawings,menu.chart.exportData,menu.chart.settings,menu.chart.scale,menu.chart.goToDate,menu.chart.paneScale,menu.priceAxisAdd,menu.chart.indicators,menu.chart.timezone,menu.drawing,menu.drawing.settings,menu.drawing.alert,menu.drawing.order,menu.drawing.group,menu.drawing.lock,menu.drawing.hide,menu.drawing.duplicate,menu.drawing.delete,selectionToolbar,hotkeys.commandPalette,hotkeys.symbolSearch,hotkeys.save,hotkeys.tools,hotkeys.invertScale,hotkeys.goToDate,hotkeys.help,hotkeys.resetView".split(","), Bt = new Set(zt), Vt = {
+])], Ft = "/* === TradeCanvas Widget — Premium Styles === */\n\n/*\n * The HTML `hidden` attribute only sets `display: none` via the UA stylesheet,\n * which any author `display` rule (e.g. `.tcw-alerts-panel { display: flex }`)\n * silently overrides — leaving panels stuck open when JS sets `el.hidden = true`.\n * Force `hidden` to win for every namespaced widget element. Scoped to `tcw-`\n * so it never touches the host page.\n */\n[class^=\"tcw-\"][hidden],\n[class*=\" tcw-\"][hidden] {\n  display: none !important;\n}\n\n/* Control tooltips (WidgetTooltip): quick to appear, slide in from the control. */\n.tcw-tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 60;\n  max-width: 240px;\n  padding: var(--tcw-space-3) var(--tcw-space-4);\n  border-radius: var(--tcw-tooltip-radius);\n  background: var(--tcw-tooltip-bg);\n  color: var(--tcw-tooltip-fg);\n  box-shadow: var(--tcw-tooltip-shadow);\n  width: max-content;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight);\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transform: translate(var(--tcw-tip-dx, 0), var(--tcw-tip-dy, 0));\n  transition:\n    opacity 110ms var(--tcw-ease-out),\n    transform 110ms var(--tcw-ease-out),\n    visibility 0s linear 110ms;\n}\n\n.tcw-tooltip--visible {\n  opacity: 1;\n  visibility: visible;\n  transform: none;\n  transition:\n    opacity 110ms var(--tcw-ease-out),\n    transform 110ms var(--tcw-ease-out),\n    visibility 0s;\n}\n\n/* The modal portal: carries the tokens and fonts, but no box of its own. */\n.tcw-root.tcw-portal {\n  display: contents;\n}\n\n/* Fullscreen: the root fills the screen; the chart resizes with it. */\n.tcw-root:fullscreen {\n  width: 100vw;\n  height: 100vh;\n  height: 100dvh;\n}\n\n.tcw-root {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  font-family: var(--tcw-font);\n  font-feature-settings: 'cv11', 'ss01', 'ss03';\n  font-size: var(--tcw-font-size);\n  line-height: 1.4;\n  color: #e6e3dc;\n  background: #131416;\n  font-variant-numeric: tabular-nums;\n  position: relative;\n  overflow: hidden;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  /* --- Dark theme tokens (default) ---\n   * Print at night: warm ink on an off-black, never pure white on black, so\n   * text doesn't glare. Grey for everything that is normal; colour only where\n   * it means something. */\n  --tcw-bg: #131416;\n  --tcw-bg-surface: #131416;\n  --tcw-bg-elevated: #1b1c1f;\n  --tcw-bg-overlay: rgba(19, 20, 22, 0.6);\n  --tcw-border: #2a2b2f;\n  --tcw-border-strong: #3a3b40;\n  /* Tooltips are the ink turned over: light on the dark ground. */\n  --tcw-tooltip-bg: #e6e3dc;\n  --tcw-tooltip-fg: #131416;\n  --tcw-text: #e6e3dc;\n  --tcw-text-dim: #a9a6a0;\n  --tcw-text-muted: #8c8a85;\n\n  /* Ink blue: links, focus and what you picked. --tcw-accent-ink is the text colour on an accent fill. */\n  --tcw-accent: #7d9bff;\n  --tcw-accent-hover: #98b0ff;\n  --tcw-accent-ink: #131416;\n  --tcw-accent-soft: rgba(125, 155, 255, 0.14);\n  --tcw-accent-glow: rgba(125, 155, 255, 0.22);\n  --tcw-accent-line: rgba(125, 155, 255, 0.55);\n\n  --tcw-red: #e2706b;\n  --tcw-red-soft: rgba(226, 112, 107, 0.12);\n  --tcw-green: #4fae8a;\n  --tcw-green-soft: rgba(79, 174, 138, 0.12);\n\n  --tcw-hover-bg: rgba(230, 227, 220, 0.06);\n  --tcw-active-bg: rgba(230, 227, 220, 0.1);\n  --tcw-divider: rgba(230, 227, 220, 0.07);\n\n  /* Motion */\n  --tcw-ease: cubic-bezier(0.2, 0, 0, 1);\n  --tcw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --tcw-dur-fast: 120ms;\n  --tcw-dur-normal: 180ms;\n  --tcw-dur-slow: 260ms;\n\n  /* Spacing: Fibonacci numbers, so each step is near φ times the one before. */\n  --tcw-space-1: 2px;\n  --tcw-space-2: 3px;\n  --tcw-space-3: 5px;\n  --tcw-space-4: 8px;\n  --tcw-space-5: 13px;\n  --tcw-space-6: 21px;\n  --tcw-space-7: 34px;\n\n  /* The look (UI system): Print's values. The `ui` option sets them inline. */\n  --tcw-radius-xs: 1px;\n  --tcw-radius-sm: 2px;\n  --tcw-radius: 3px;\n  --tcw-radius-lg: 5px;\n  --tcw-radius-xl: 8px;\n  --tcw-control-radius: var(--tcw-radius);\n  --tcw-input-radius: var(--tcw-radius);\n  --tcw-menu-radius: var(--tcw-radius-lg);\n  --tcw-dialog-radius: var(--tcw-radius-xl);\n  --tcw-panel-radius: var(--tcw-radius-lg);\n  --tcw-tooltip-radius: var(--tcw-radius-sm);\n  --tcw-tag-radius: var(--tcw-radius-sm);\n  --tcw-toast-radius: var(--tcw-radius-lg);\n  --tcw-toolbar-radius: 0px;\n  --tcw-sidebar-radius: 0px;\n  --tcw-toolbar-h: 42px;\n  --tcw-control-h: 26px;\n  --tcw-control-h-sm: 20px;\n  --tcw-icon: 16px;\n  --tcw-sidebar-w: 42px;\n  --tcw-menu-item-h: 33px;\n  --tcw-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --tcw-font-size: 13px;\n  --tcw-font-size-sm: 11px;\n  --tcw-font-size-xs: 10px;\n  --tcw-font-size-lg: 15px;\n  --tcw-font-size-xl: 18px;\n  --tcw-font-size-display: 21px;\n  --tcw-weight: 400;\n  --tcw-weight-strong: 600;\n  --tcw-label-case: uppercase;\n  --tcw-label-tracking: 0.06em;\n  --tcw-border-w: 1px;\n  --tcw-sep-w: 1px;\n  --tcw-menu-shadow: 0 0 0 1px var(--tcw-border), var(--tcw-shadow-md);\n  --tcw-dialog-shadow: 0 0 0 1px var(--tcw-border), var(--tcw-shadow-lg);\n  --tcw-tooltip-shadow: var(--tcw-shadow-sm);\n  --tcw-blur: 0px;\n  --tcw-surface-opacity: 100%;\n\n  /* Elevation */\n  --tcw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --tcw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);\n  --tcw-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);\n  --tcw-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55), 0 12px 24px rgba(0, 0, 0, 0.35);\n  --tcw-ring: 0 0 0 2px rgba(125, 155, 255, 0.5);\n\n  /* Type */\n  --tcw-font-mono: 'Cascadia Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;\n}\n\n/* Print by day: ink on paper. */\n.tcw-root[data-tcw-theme='light'] {\n  color: #1b1d21;\n  background: #fbfaf6;\n\n  --tcw-bg: #fbfaf6;\n  --tcw-bg-surface: #fbfaf6;\n  --tcw-bg-elevated: #ffffff;\n  --tcw-bg-overlay: rgba(251, 250, 246, 0.8);\n  --tcw-border: #dcd8cf;\n  --tcw-border-strong: #c7c2b7;\n  --tcw-tooltip-bg: #1b1d21;\n  --tcw-tooltip-fg: #fbfaf6;\n  --tcw-text: #1b1d21;\n  --tcw-text-dim: #4a4e57;\n  --tcw-text-muted: #6c7077;\n\n  /* A deeper ink blue: readable as text on paper, white text readable on it. */\n  --tcw-accent: #2348c4;\n  --tcw-accent-hover: #1b3a9f;\n  --tcw-accent-ink: #ffffff;\n  --tcw-accent-soft: rgba(35, 72, 196, 0.1);\n  --tcw-accent-glow: rgba(35, 72, 196, 0.16);\n  --tcw-accent-line: rgba(35, 72, 196, 0.45);\n  --tcw-ring: 0 0 0 2px rgba(35, 72, 196, 0.4);\n\n  /* Darker semantic colours: used as text on paper. */\n  --tcw-red: #b8423f;\n  --tcw-red-soft: rgba(184, 66, 63, 0.1);\n  --tcw-green: #1f7a5c;\n  --tcw-green-soft: rgba(31, 122, 92, 0.1);\n\n  --tcw-hover-bg: rgba(27, 29, 33, 0.05);\n  --tcw-active-bg: rgba(27, 29, 33, 0.08);\n  --tcw-divider: #e7e3da;\n\n  /* Warm shadows, as paper casts. */\n  --tcw-shadow-sm: 0 1px 2px rgba(40, 34, 22, 0.06);\n  --tcw-shadow-md: 0 4px 12px rgba(40, 34, 22, 0.08), 0 1px 3px rgba(40, 34, 22, 0.05);\n  --tcw-shadow-lg: 0 12px 36px rgba(40, 34, 22, 0.13), 0 4px 12px rgba(40, 34, 22, 0.07);\n  --tcw-shadow-xl: 0 24px 64px rgba(40, 34, 22, 0.17), 0 12px 24px rgba(40, 34, 22, 0.09);\n}\n\n/* === Toolbar === */\n\n.tcw-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 var(--tcw-space-4);\n  height: var(--tcw-toolbar-h);\n  border-bottom: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  flex-shrink: 0;\n  position: relative;\n  z-index: 20;\n}\n\n.tcw-toolbar-symbol {\n  font-size: var(--tcw-font-size-lg);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  display: inline-flex;\n  align-items: center;\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-4);\n  white-space: nowrap;\n  letter-spacing: -0.015em;\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  border-radius: var(--tcw-control-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-toolbar-symbol:hover {\n  background: var(--tcw-hover-bg);\n}\n\n/* With the symbol search switched off, the button only names the symbol. */\n.tcw-toolbar-symbol[aria-disabled=\"true\"] {\n  cursor: default;\n}\n\n.tcw-toolbar-symbol[aria-disabled=\"true\"]:hover {\n  background: transparent;\n}\n\n.tcw-toolbar-sep {\n  width: var(--tcw-sep-w);\n  /* A button's height over phi: the rule stands as tall as the icons beside it. */\n  height: calc(var(--tcw-control-h) / 1.618);\n  background: var(--tcw-border);\n  flex-shrink: 0;\n  margin: 0 var(--tcw-space-3);\n}\n\n.tcw-toolbar-group {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n  padding: 0 var(--tcw-space-2);\n}\n\n.tcw-toolbar-spacer {\n  flex: 1;\n}\n\n.tcw-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-4);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight);\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease);\n  white-space: nowrap;\n  line-height: 1;\n  letter-spacing: -0.005em;\n}\n\n.tcw-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn:active {\n  transform: translateY(0.5px);\n}\n\n.tcw-btn.tcw-active {\n  background: var(--tcw-on-bg);\n  color: var(--tcw-on-fg);\n  font-weight: var(--tcw-weight-strong);\n  box-shadow: var(--tcw-on-ring);\n}\n\n.tcw-btn:focus-visible,\n.tcw-btn-icon:focus-visible,\n.tcw-sidebar-btn:focus-visible,\n.tcw-dropdown-trigger:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-btn-icon {\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease);\n  line-height: 1;\n  position: relative;\n}\n\n.tcw-btn-icon:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-btn-icon svg {\n  display: block;\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n\n.tcw-badge-count {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  padding: 1px var(--tcw-space-3);\n  border-radius: var(--tcw-tag-radius);\n  font-family: var(--tcw-font-mono);\n}\n\n/* === Dropdown === */\n\n.tcw-dropdown-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-4);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight);\n  font-family: inherit;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.tcw-dropdown-trigger:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-dropdown {\n  position: absolute;\n  top: 100%;\n  margin-top: var(--tcw-space-3);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  z-index: 50;\n  width: max-content;\n  max-width: min(340px, calc(100vw - 16px));\n  padding: var(--tcw-menu-pad);\n  max-height: 420px;\n  overflow-y: auto;\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-pop-in {\n  from { opacity: 0; transform: translateY(-4px) scale(0.98); }\n  to { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n.tcw-dropdown-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--tcw-menu-item-h);\n  padding: var(--tcw-space-1) var(--tcw-space-4);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n  width: 100%;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-align: start;\n  border-radius: var(--tcw-menu-item-radius);\n  gap: var(--tcw-space-5);\n}\n\n.tcw-dropdown-item:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n/* A menu row led by an icon (chart types): icon then label, not spread apart. */\n.tcw-dropdown-item--icon {\n  justify-content: flex-start;\n  gap: var(--tcw-space-4);\n}\n\n.tcw-dropdown-item svg,\n.tcw-flyout-item svg {\n  flex-shrink: 0;\n}\n\n/* The drawing-group button's icon holder: a plain box for the swapped SVG. */\n.tcw-sidebar-icon {\n  display: inline-flex;\n}\n\n.tcw-dropdown-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: var(--tcw-weight-strong);\n}\n\n/* Timeframe menu: pick on the left, pin (star) on the right. */\n.tcw-tf-more {\n  padding: 0 5px;\n}\n\n.tcw-tf-more svg {\n  display: block;\n}\n\n.tcw-tf-row {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.tcw-tf-row .tcw-dropdown-item {\n  flex: 1;\n  min-width: 0;\n}\n\n.tcw-tf-star {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-tf-star:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-tf-star.tcw-active {\n  color: var(--tcw-accent);\n}\n\n.tcw-tf-star.tcw-active svg {\n  fill: currentColor;\n}\n\n.tcw-tf-star:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n.tcw-tf-remove {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-tf-row:hover .tcw-tf-remove,\n.tcw-tf-remove:focus-visible {\n  opacity: 1;\n}\n\n/* No hover on touch screens: keep it visible rather than a hidden tap target. */\n@media (hover: none) {\n  .tcw-tf-remove { opacity: 1; }\n}\n\n.tcw-tf-remove:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-tf-remove:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* Typed interval, under the list: stays in view while the list scrolls. */\n.tcw-tf-custom {\n  position: sticky;\n  bottom: -6px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin: 4px -6px -6px;\n  padding: 6px 10px 8px;\n  border-top: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-elevated);\n}\n\n.tcw-tf-custom-hint:empty {\n  display: none;\n}\n\n.tcw-tf-custom-hint {\n  flex-basis: 100%;\n  width: 0;\n  min-width: 100%;\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.35;\n}\n\n.tcw-tf-custom-input {\n  flex: 1;\n  /* Fills the row: its own width would follow the font (16px on touch). */\n  width: 0;\n  min-width: 0;\n  height: 26px;\n  padding: 0 8px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text);\n  font: inherit;\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n}\n\n.tcw-tf-custom-input::placeholder {\n  color: var(--tcw-text-dim);\n}\n\n.tcw-tf-custom-input:focus {\n  outline: none;\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n\n.tcw-tf-custom-input[aria-invalid='true'] {\n  border-color: var(--tcw-red);\n  box-shadow: 0 0 0 2px var(--tcw-red-soft);\n}\n\n.tcw-tf-custom-add {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  flex-shrink: 0;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n  cursor: pointer;\n}\n\n.tcw-tf-custom-add:hover {\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent);\n}\n\n.tcw-tf-custom-add:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: 1px;\n}\n\n.tcw-dropdown-label {\n  text-transform: var(--tcw-label-case);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: var(--tcw-space-4) var(--tcw-space-4) var(--tcw-space-2);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-dropdown-divider {\n  border-top: 1px solid var(--tcw-divider);\n  margin: 6px 4px;\n}\n\n.tcw-tag {\n  font-size: var(--tcw-font-size-xs);\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  padding: 2px 6px;\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-hover-bg);\n  letter-spacing: 0.02em;\n}\n\n/* === Body === */\n\n.tcw-body {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  background: var(--tcw-bg);\n}\n\n.tcw-chart-container {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n/* === History pill (older bars loading at the left edge) === */\n\n.tcw-history-pill {\n  position: absolute;\n  top: 50%;\n  left: 10px;\n  z-index: 4;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 10px 5px 8px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-shadow-sm);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1;\n  white-space: nowrap;\n  transform: translateY(-50%);\n  opacity: 1;\n  transition: opacity var(--tcw-dur-normal) var(--tcw-ease-out);\n  pointer-events: none;\n}\n\n.tcw-history-pill--hidden {\n  opacity: 0;\n}\n\n.tcw-history-pill--error {\n  border-color: color-mix(in srgb, var(--tcw-red) 45%, var(--tcw-border));\n  color: var(--tcw-red);\n}\n\n.tcw-history-spinner {\n  width: 10px;\n  height: 10px;\n  border: 1.5px solid var(--tcw-accent-soft);\n  border-top-color: var(--tcw-accent);\n  border-radius: 50%;\n  animation: tcw-history-spin 0.8s linear infinite;\n}\n\n.tcw-history-pill--error .tcw-history-spinner {\n  border-color: currentColor;\n  animation: none;\n}\n\n@keyframes tcw-history-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* === Loading overlay (candle skeleton) === */\n\n.tcw-loading-overlay {\n  /* Uses a modifier class rather than the `hidden` attribute — the global\n     `[hidden] { display: none !important }` rule above would cut the\n     opacity transition off before it can play. */\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--tcw-bg);\n  opacity: 1;\n  transition: opacity var(--tcw-dur-slow) var(--tcw-ease-out);\n  pointer-events: none;\n}\n\n.tcw-loading-overlay--hidden {\n  opacity: 0;\n}\n\n.tcw-loading-card {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 14px;\n  padding: 22px 26px 20px;\n  border: 1px solid transparent;\n  border-radius: var(--tcw-panel-radius);\n}\n\n/* A slow switch: the previous chart stays readable underneath, dimmed, so the\n   click visibly registered without blanking the screen. */\n.tcw-loading-overlay--veil {\n  background: color-mix(in srgb, var(--tcw-bg) 55%, transparent);\n}\n\n.tcw-loading-overlay--veil .tcw-loading-card {\n  background: var(--tcw-bg-elevated);\n  border-color: var(--tcw-border);\n  box-shadow: var(--tcw-menu-shadow);\n}\n\n.tcw-loading-candles {\n  position: relative;\n  display: flex;\n  gap: 7px;\n  height: 64px;\n}\n\n/* One candle: the element is the wick's column, ::before the wick, ::after the body. */\n.tcw-loading-candle {\n  position: relative;\n  width: 8px;\n  height: 100%;\n  color: var(--tcw-red);\n  opacity: 0.28;\n  animation: tcw-candle-light 1.6s var(--tcw-ease) infinite;\n  animation-delay: var(--tcw-delay, 0ms);\n}\n\n.tcw-loading-candle--up { color: var(--tcw-green); }\n\n.tcw-loading-candle::before,\n.tcw-loading-candle::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  background: currentColor;\n  transform: translateX(-50%);\n}\n\n.tcw-loading-candle::before {\n  top: var(--tcw-wick-top);\n  width: 1.5px;\n  height: var(--tcw-wick-h);\n}\n\n.tcw-loading-candle::after {\n  top: var(--tcw-body-top);\n  width: 8px;\n  height: var(--tcw-body-h);\n  border-radius: 1.5px;\n}\n\n/* Each candle brightens and lifts slightly in turn, left to right. */\n@keyframes tcw-candle-light {\n  0%, 55%, 100% { opacity: 0.28; transform: translateY(0); }\n  20% { opacity: 1; transform: translateY(-2px); }\n}\n\n.tcw-loading-track {\n  position: relative;\n  width: 100%;\n  min-width: 88px;\n  height: 2px;\n  border-radius: 1px;\n  background: var(--tcw-border);\n  overflow: hidden;\n}\n\n.tcw-loading-track > span {\n  position: absolute;\n  inset: 0;\n  width: 40%;\n  border-radius: 1px;\n  background: linear-gradient(90deg, transparent, var(--tcw-accent), transparent);\n  animation: tcw-loading-sweep 1.6s var(--tcw-ease) infinite;\n}\n\n@keyframes tcw-loading-sweep {\n  from { transform: translateX(-100%); }\n  to { transform: translateX(250%); }\n}\n\n/* The status text is announced, not shown — the candles say \"loading\". */\n.tcw-loading-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.tcw-loading-overlay--error .tcw-loading-candles,\n.tcw-loading-overlay--error .tcw-loading-track {\n  display: none;\n}\n\n/* A failure is shown: why the chart is empty and that a retry is running. */\n.tcw-loading-overlay--error .tcw-loading-label {\n  position: static;\n  width: auto;\n  height: auto;\n  overflow: visible;\n  clip-path: none;\n  white-space: normal;\n  max-width: 320px;\n  text-align: center;\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size);\n}\n\n/* Reduced motion: nothing slides or lifts, but the candles still glow in\n   turn and the track breathes, so the wait never looks frozen. */\n@media (prefers-reduced-motion: reduce) {\n  .tcw-loading-candle {\n    animation: tcw-candle-glow 2.4s ease-in-out infinite;\n    animation-delay: var(--tcw-delay, 0ms);\n  }\n  .tcw-loading-track > span {\n    width: 100%;\n    background: var(--tcw-accent);\n    animation: tcw-loading-breathe 2.4s ease-in-out infinite;\n  }\n}\n\n@keyframes tcw-candle-glow {\n  0%, 60%, 100% { opacity: 0.28; }\n  25% { opacity: 0.9; }\n}\n\n@keyframes tcw-loading-breathe {\n  0%, 100% { opacity: 0.15; }\n  50% { opacity: 0.7; }\n}\n\n/* === On-chart indicator legend (WidgetIndicatorLegend) === */\n\n.tcw-ind-legend {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 1px;\n  max-width: calc(100% - 140px);\n  pointer-events: none;\n}\n\n.tcw-ind-legend--collapsed > .tcw-ind-legend-row {\n  display: none;\n}\n\n.tcw-ind-legend-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  max-width: 100%;\n  padding: 0 var(--tcw-space-2);\n  border-radius: var(--tcw-radius-sm);\n  /* The figures face at the size of the price legend above: one block, columns that line up. */\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 19px;\n  font-feature-settings: 'tnum';\n  white-space: nowrap;\n  color: var(--tcw-text-dim);\n  pointer-events: auto;\n  cursor: default;\n  /* A narrow pane: the values shrink first, then the row is clipped. */\n  overflow: hidden;\n}\n\n/* A pane's indicator: at the top of its pane, where the canvas title was,\n   short enough to sit in the pane's header below the divider's grab zone. */\n.tcw-ind-legend-row--pane {\n  position: absolute;\n  z-index: 3;\n  line-height: 15px;\n}\n\n.tcw-ind-legend-row:hover,\n.tcw-ind-legend-row:focus-within {\n  background: color-mix(in srgb, var(--tcw-bg-elevated) 90%, transparent);\n  box-shadow: 0 0 0 1px var(--tcw-border);\n}\n\n.tcw-ind-legend-name {\n  padding: 0;\n  border: none;\n  background: none;\n  font: inherit;\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  cursor: pointer;\n}\n\n.tcw-ind-legend-name:hover {\n  color: var(--tcw-accent);\n}\n\n.tcw-ind-legend-values {\n  display: inline-flex;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n  overflow: hidden;\n}\n\n.tcw-ind-legend-row--hidden .tcw-ind-legend-name,\n.tcw-ind-legend-row--hidden .tcw-ind-legend-values {\n  opacity: 0.45;\n}\n\n/* Show / settings / remove: on hover or keyboard focus (always on touch). */\n.tcw-ind-legend-actions {\n  display: none;\n  gap: 1px;\n  margin-left: -2px;\n}\n\n.tcw-ind-legend-row:hover .tcw-ind-legend-actions,\n.tcw-ind-legend-row:focus-within .tcw-ind-legend-actions {\n  display: inline-flex;\n}\n\n@media (hover: none) {\n  .tcw-ind-legend-actions {\n    display: inline-flex;\n  }\n\n  /* Finger-sized targets. */\n  .tcw-ind-legend-act,\n  .tcw-ind-legend-toggle {\n    min-width: 28px;\n    min-height: 24px;\n  }\n}\n\n.tcw-ind-legend-act {\n  display: inline-grid;\n  place-items: center;\n  width: 20px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-ind-legend-act:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ind-legend-act[data-act='remove']:hover {\n  color: var(--tcw-red);\n}\n\n.tcw-ind-legend-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  margin-top: 1px;\n  padding: 1px 5px;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.tcw-ind-legend-toggle[hidden] {\n  display: none;\n}\n\n.tcw-ind-legend-toggle:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ind-legend-name:focus-visible,\n.tcw-ind-legend-act:focus-visible,\n.tcw-ind-legend-toggle:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* === Sidebar === */\n\n.tcw-sidebar {\n  width: var(--tcw-sidebar-w);\n  flex-shrink: 0;\n  background: var(--tcw-bg-surface);\n  border-inline-end: var(--tcw-border-w) solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--tcw-space-3) 0;\n  /* On a short screen the tools scroll; the menus sit outside it. */\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.tcw-sidebar::-webkit-scrollbar {\n  display: none;\n}\n.tcw-sidebar > * {\n  flex-shrink: 0;\n}\n\n.tcw-tool-group-wrap {\n  position: relative;\n}\n\n.tcw-sidebar-btn {\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  margin: 1px 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    color var(--tcw-dur-fast) var(--tcw-ease);\n  position: relative;\n  flex-shrink: 0;\n  line-height: 1;\n  border-radius: var(--tcw-control-radius);\n}\n\n.tcw-sidebar-btn svg {\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n\n.tcw-sidebar-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-sidebar-btn.tcw-active {\n  color: var(--tcw-on-icon-fg);\n  background: var(--tcw-on-icon-bg);\n  box-shadow: var(--tcw-on-icon-ring);\n}\n\n.tcw-sidebar-btn.tcw-danger:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-red-soft);\n}\n\n.tcw-multi-dot {\n  position: absolute;\n  bottom: 3px;\n  right: 3px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  opacity: 0.7;\n}\n\n/* The drawing tools' sections: always a hairline (it groups the tools), even in\n   looks that drop the rules between toolbar groups. */\n.tcw-sidebar-divider {\n  width: 20px;\n  height: max(1px, var(--tcw-sep-w));\n  background: var(--tcw-divider);\n  margin: 5px 0;\n  flex-shrink: 0;\n}\n\n.tcw-sidebar-spacer {\n  flex: 1;\n}\n\n/* === Flyout === */\n\n.tcw-flyout {\n  position: absolute;\n  margin-inline-start: 6px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  min-width: 180px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  z-index: 30;\n  padding: var(--tcw-menu-pad);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  animation: tcw-slide-right var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n/* Spans the gap to the toolbar button: crossing it stays inside the menu. */\n.tcw-flyout::before {\n  content: '';\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  right: 100%;\n  width: 8px;\n}\n\n@keyframes tcw-slide-right {\n  from { opacity: 0; transform: translateX(-4px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n\n.tcw-flyout-header {\n  text-transform: var(--tcw-label-case);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-2);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-flyout-hint {\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-1);\n  border-top: 1px solid var(--tcw-border);\n  margin-top: var(--tcw-space-2);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n\n.tcw-flyout-item {\n  min-height: var(--tcw-menu-item-h);\n  padding: var(--tcw-space-1) var(--tcw-space-4);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  border: none;\n  background: transparent;\n  text-align: start;\n  font-family: inherit;\n  border-radius: var(--tcw-menu-item-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-flyout-item:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n.tcw-flyout-item:focus-visible {\n  outline: none;\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n  box-shadow: inset 0 0 0 1px var(--tcw-accent);\n}\n\n.tcw-flyout-item.tcw-active {\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  font-weight: var(--tcw-weight-strong);\n}\n\n\n/* Favorites strip — pinned drawing tools above the tool groups. */\n.tcw-sidebar-favorites {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.tcw-sidebar-favorites .tcw-sidebar-btn {\n  position: relative;\n}\n.tcw-sidebar-favorites .tcw-sidebar-btn::before {\n  content: '';\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  opacity: 0.7;\n}\n\n/* === Modal === */\n\n.tcw-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(12, 12, 10, 0.42);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  z-index: 100;\n  animation: tcw-fade-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n@keyframes tcw-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.tcw-modal {\n  position: fixed;\n  z-index: 101;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-dialog-radius);\n  width: 520px;\n  max-width: 92vw;\n  max-height: 82vh;\n  max-height: 82dvh;\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--tcw-dialog-shadow);\n  animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n}\n\n@keyframes tcw-modal-in {\n  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }\n  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }\n}\n\n.tcw-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n/* A dialog's title is phi times its text (21 to 13). */\n.tcw-modal-header h3 {\n  font-size: var(--tcw-font-size-display);\n  font-weight: var(--tcw-weight-strong);\n  margin: 0;\n  color: var(--tcw-text);\n  letter-spacing: -0.015em;\n}\n\n.tcw-modal-close {\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border-radius: var(--tcw-control-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-modal-close:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-modal-tabs {\n  display: flex;\n  /* Four tabs in a long language on a phone: they wrap rather than clip. No overflow here: in the\n     dialog's column it would let a long body squash the tabs, and clip the underline of the active one. */\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  gap: var(--tcw-space-2);\n  padding: var(--tcw-tabs-pad-block) var(--tcw-space-6);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n.tcw-modal-tab {\n  flex-shrink: 0;\n  white-space: nowrap;\n  height: var(--tcw-tab-h);\n  padding: var(--tcw-tab-pad);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight);\n  color: var(--tcw-text-muted);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-bottom: var(--tcw-tab-line) solid transparent;\n  border-radius: var(--tcw-tab-radius);\n  margin-bottom: calc(var(--tcw-tab-line) / -2);\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n  font-family: inherit;\n  letter-spacing: -0.005em;\n}\n\n.tcw-modal-tab:hover {\n  color: var(--tcw-text-dim);\n  background: var(--tcw-tab-hover);\n}\n\n.tcw-modal-tab.tcw-active {\n  color: var(--tcw-tab-on-fg);\n  background: var(--tcw-tab-on-bg);\n  border-bottom-color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-modal-body {\n  padding: var(--tcw-space-6);\n  overflow-y: auto;\n  flex: 1;\n}\n\n.tcw-settings-section {\n  margin-bottom: var(--tcw-space-6);\n}\n\n.tcw-settings-section:last-child {\n  margin-bottom: 0;\n}\n\n.tcw-settings-section-title {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  margin-bottom: var(--tcw-space-4);\n}\n\n.tcw-settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tcw-space-4) 0;\n}\n\n.tcw-settings-row + .tcw-settings-row {\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-settings-label {\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text-dim);\n  letter-spacing: -0.005em;\n}\n\n.tcw-color-picker-wrap {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.tcw-color-picker-wrap input[type='color'] {\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  cursor: pointer;\n  padding: 2px;\n}\n\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n.tcw-color-picker-wrap input[type='color']::-webkit-color-swatch {\n  border: none;\n  border-radius: var(--tcw-radius-xs);\n}\n\n.tcw-color-hex {\n  font-size: var(--tcw-font-size-xs);\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  min-width: 64px;\n  letter-spacing: 0.01em;\n}\n\n/* A colour left to the part itself: the swatch shows where the picker starts, faded. */\n.tcw-color-auto input[type='color'] {\n  opacity: 0.45;\n  border-style: dashed;\n}\n\n.tcw-color-auto .tcw-color-hex {\n  font-family: inherit;\n  font-style: italic;\n}\n\n.tcw-color-auto-btn {\n  height: 24px;\n  padding: 0 8px;\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  background: transparent;\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-color-auto-btn:hover,\n.tcw-color-auto-btn:focus-visible {\n  color: var(--tcw-text);\n  border-color: var(--tcw-accent);\n}\n\n.tcw-toggle {\n  width: 36px;\n  height: 20px;\n  background: rgba(255, 255, 255, 0.12);\n  border-radius: 10px;\n  position: relative;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n  border: none;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n.tcw-toggle::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition:\n    left var(--tcw-dur-normal) var(--tcw-ease-out),\n    background var(--tcw-dur-fast) var(--tcw-ease);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-glow);\n}\n\n.tcw-toggle.tcw-on::after {\n  left: 18px;\n  background: #fff;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle::after {\n  background: #999;\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on {\n  background: var(--tcw-accent);\n}\n\n.tcw-root[data-tcw-theme='light'] .tcw-toggle.tcw-on::after {\n  background: #fff;\n}\n\n.tcw-settings-select {\n  padding: 6px 10px;\n  font-size: var(--tcw-font-size-sm);\n  font-family: inherit;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  color: var(--tcw-text);\n  cursor: pointer;\n  transition: border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-settings-select:hover {\n  border-color: var(--tcw-border-strong);\n}\n\n.tcw-settings-select:focus-visible {\n  outline: none;\n  border-color: var(--tcw-accent);\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-top: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  border-radius: 0 0 var(--tcw-dialog-radius) var(--tcw-dialog-radius);\n}\n\n.tcw-reset-link {\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  text-decoration-color: var(--tcw-border-strong);\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), text-decoration-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-reset-link:hover {\n  color: var(--tcw-text-dim);\n  text-decoration-color: currentColor;\n}\n\n.tcw-done-btn {\n  padding: var(--tcw-space-4) var(--tcw-space-6);\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  font-family: inherit;\n  transition:\n    background var(--tcw-dur-fast) var(--tcw-ease),\n    transform var(--tcw-dur-fast) var(--tcw-ease),\n    box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n  letter-spacing: -0.005em;\n}\n\n.tcw-done-btn:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-done-btn:disabled { opacity: 0.45; cursor: not-allowed; }\n\n.tcw-done-btn:active {\n  transform: translateY(0.5px);\n}\n\n/* === Status Bar === */\n\n.tcw-statusbar {\n  /* Above sidebar buttons that overflow a short chart; menus (z 30+) stay on top. */\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 7px 16px;\n  border-top: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  flex-shrink: 0;\n  font-feature-settings: 'tnum';\n}\n\n.tcw-status-right {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  margin-inline-start: auto;\n  min-width: 0;\n  white-space: nowrap;\n}\n\n/* Narrow screens: the range presets close up. */\n@media (max-width: 640px) {\n  .tcw-range-btn {\n    padding: 4px 5px;\n  }\n}\n\n/* Range presets + go to date, bottom left */\n.tcw-range-bar {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n  margin: -4px 12px -4px -8px;\n  min-width: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n.tcw-range-bar::-webkit-scrollbar {\n  display: none;\n}\n\n.tcw-range-btn {\n  flex-shrink: 0;\n  padding: 4px 7px;\n  font: inherit;\n  font-weight: var(--tcw-weight-strong);\n  letter-spacing: 0.02em;\n  color: var(--tcw-text-muted);\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-range-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-range-btn:active {\n  color: var(--tcw-accent);\n}\n\n.tcw-range-btn:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n.tcw-range-goto {\n  display: inline-grid;\n  place-items: center;\n  margin-inline-start: 6px;\n  padding: 4px 6px;\n}\n\n.tcw-range-goto svg {\n  display: block;\n}\n\n.tcw-status-indicator {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  font-weight: var(--tcw-weight);\n}\n\n.tcw-status-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n  transition: background var(--tcw-dur-normal) var(--tcw-ease), box-shadow var(--tcw-dur-normal) var(--tcw-ease);\n  position: relative;\n}\n\n.tcw-status-dot.tcw-connected {\n  background: var(--tcw-green);\n  box-shadow: 0 0 0 3px rgba(31, 168, 116, 0.18);\n}\n\n.tcw-status-dot.tcw-connected::after {\n  content: '';\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--tcw-green);\n  opacity: 0;\n  animation: tcw-pulse 2.2s ease-out 3;\n}\n\n@keyframes tcw-pulse {\n  0% { opacity: 0.6; transform: scale(0.6); }\n  100% { opacity: 0; transform: scale(2.2); }\n}\n\n.tcw-status-dot.tcw-error {\n  background: var(--tcw-red);\n  box-shadow: 0 0 0 3px rgba(232, 80, 91, 0.2);\n}\n\n/* === Watchlist === */\n\n.tcw-watchlist {\n  width: 220px;\n  flex-shrink: 0;\n  background: var(--tcw-bg-surface);\n  border-inline-start: 1px solid var(--tcw-border);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-shadow: var(--tcw-shadow-sm);\n}\n\n.tcw-watchlist-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 8px 6px 8px;\n  border-bottom: 1px solid var(--tcw-divider);\n}\n\n/* The shown list's name: opens the lists menu. */\n.tcw-watchlist-name {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--tcw-control-h-sm);\n  padding: 0 6px;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  text-align: start;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.tcw-watchlist-name::after {\n  content: '';\n  flex: none;\n  width: 0;\n  height: 0;\n  margin-inline-start: auto;\n  border: 4px solid transparent;\n  border-top-color: currentColor;\n  border-bottom-width: 0;\n  opacity: 0.7;\n}\n\n.tcw-watchlist-add {\n  flex: none;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-lg);\n  line-height: 1;\n  cursor: pointer;\n}\n\n.tcw-watchlist-name:hover,\n.tcw-watchlist-add:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n.tcw-watchlist-name:focus-visible,\n.tcw-watchlist-add:focus-visible,\n.tcw-watchlist-input:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* The lists menu, under the header. */\n.tcw-watchlist-menu {\n  top: calc(100% - 2px);\n  left: 6px;\n  right: 6px;\n  margin-top: 0;\n}\n.tcw-watchlist-count {\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n}\n.tcw-watchlist-menu .tcw-danger {\n  color: var(--tcw-red);\n}\n\n/* Naming a list in place. */\n.tcw-watchlist-input {\n  flex: 1;\n  min-width: 0;\n  height: var(--tcw-control-h-sm);\n  padding: 0 8px;\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n}\n\n.tcw-watchlist-empty {\n  padding: 16px 14px;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.5;\n}\n\n/* A row's remove button shows on hover or focus, over its numbers. */\n.tcw-watchlist-remove {\n  position: absolute;\n  top: 50%;\n  right: 6px;\n  display: grid;\n  place-items: center;\n  width: 20px;\n  height: 20px;\n  border: 0;\n  border-radius: var(--tcw-radius-sm);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  line-height: 1;\n  opacity: 0;\n  transform: translateY(-50%);\n  cursor: pointer;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-watchlist-row:hover .tcw-watchlist-remove,\n.tcw-watchlist-row:focus-within .tcw-watchlist-remove {\n  opacity: 1;\n}\n.tcw-watchlist-remove:hover {\n  color: var(--tcw-red);\n}\n.tcw-watchlist-row.tcw-watchlist-dragging {\n  opacity: 0.45;\n}\n\n.tcw-watchlist-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n\n.tcw-watchlist-row {\n  position: relative;\n  display: grid;\n  grid-template-columns: 1fr auto auto;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n  border-inline-start: 2px solid transparent;\n  outline: none;\n}\n\n.tcw-watchlist-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-watchlist-row:focus-visible {\n  background: var(--tcw-hover-bg);\n  border-inline-start-color: var(--tcw-accent);\n}\n\n.tcw-watchlist-row.tcw-watchlist-active {\n  background: var(--tcw-accent-soft);\n  border-inline-start-color: var(--tcw-accent);\n}\n\n.tcw-watchlist-symbol {\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  letter-spacing: -0.005em;\n  white-space: nowrap;\n}\n\n.tcw-watchlist-spark {\n  width: 56px;\n  height: 22px;\n  align-self: center;\n}\n\n.tcw-watchlist-stats {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 1px;\n  font-variant-numeric: tabular-nums;\n  font-family: var(--tcw-font-mono);\n}\n\n.tcw-watchlist-price {\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  font-weight: var(--tcw-weight);\n}\n\n.tcw-watchlist-change {\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  font-weight: var(--tcw-weight);\n}\n\n.tcw-watchlist-change.tcw-up {\n  color: var(--tcw-green);\n}\n\n.tcw-watchlist-change.tcw-down {\n  color: var(--tcw-red);\n}\n\n/* === Toast === */\n\n.tcw-toast-icon {\n  display: inline-flex;\n  vertical-align: -2px;\n  margin-inline-end: 7px;\n  color: var(--tcw-accent);\n}\n.tcw-toast-error .tcw-toast-icon { color: var(--tcw-red); }\n\n/* Over an open dialog: above its backdrop, at the window's foot. */\n.tcw-toast.tcw-toast-over {\n  position: fixed;\n  z-index: 120;\n}\n\n.tcw-toast {\n  position: absolute;\n  bottom: 60px;\n  left: 50%;\n  transform: translate(-50%, 12px);\n  z-index: 40;\n  padding: var(--tcw-space-4) var(--tcw-space-5);\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-toast-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight);\n  color: var(--tcw-text);\n  opacity: 0;\n  transition: opacity var(--tcw-dur-normal) var(--tcw-ease-out), transform var(--tcw-dur-normal) var(--tcw-ease-out);\n  pointer-events: none;\n  max-width: calc(100% - 32px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  letter-spacing: -0.005em;\n}\n\n.tcw-toast.tcw-toast-in {\n  opacity: 1;\n  transform: translate(-50%, 0);\n}\n\n.tcw-toast-error {\n  border-color: var(--tcw-red);\n  color: var(--tcw-red);\n}\n\n/* === Replay scrubber === */\n\n/* Picking the replay start: the bars right of the pointer would be hidden. */\n.tcw-replay-shade {\n  position: absolute;\n  z-index: 4;\n  pointer-events: none;\n  background: color-mix(in srgb, var(--tcw-bg) 62%, transparent);\n  border-inline-start: 1.5px dashed var(--tcw-accent);\n}\n\n.tcw-replay-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.tcw-replay-group[hidden] { display: none; }\n\n.tcw-replay-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px;\n  color: var(--tcw-text-dim);\n  white-space: nowrap;\n}\n\n.tcw-replay-text-btn {\n  height: 26px;\n  padding: 0 10px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-weight: var(--tcw-weight);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast), border-color var(--tcw-dur-fast), color var(--tcw-dur-fast);\n}\n\n.tcw-replay-text-btn:hover { background: var(--tcw-hover-bg); border-color: var(--tcw-border-strong); }\n.tcw-replay-text-btn:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* At the last bar: the way out is the next thing to do. */\n.tcw-replay-bar--ended .tcw-replay-realtime {\n  background: var(--tcw-accent);\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n}\n\n.tcw-replay-btn:disabled { opacity: 0.4; cursor: default; }\n\n@media (max-width: 640px) {\n  .tcw-replay-bar {\n    flex-wrap: wrap;\n    justify-content: center;\n    max-width: calc(100% - 24px);\n    border-radius: var(--tcw-panel-radius);\n  }\n  .tcw-replay-hint { white-space: normal; }\n}\n\n.tcw-replay-bar {\n  position: absolute;\n  left: 50%;\n  /* Above the 30px time axis, so its dates stay readable. */\n  bottom: 40px;\n  transform: translateX(-50%);\n  z-index: 25;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n.tcw-replay-btn {\n  width: 28px;\n  height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-dim);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  font-family: inherit;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-replay-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-replay-btn.tcw-replay-play {\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  width: 32px;\n  height: 32px;\n  box-shadow: 0 0 0 3px var(--tcw-accent-glow);\n}\n\n.tcw-replay-btn.tcw-replay-play:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-replay-scrubber {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 220px;\n  height: 4px;\n  background: var(--tcw-border-strong);\n  border-radius: 2px;\n  outline: none;\n  cursor: pointer;\n}\n\n.tcw-replay-scrubber::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n  box-shadow: 0 0 0 1px var(--tcw-accent), 0 2px 6px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n}\n\n.tcw-replay-scrubber::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n  box-shadow: 0 0 0 1px var(--tcw-accent), 0 2px 6px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n}\n\n.tcw-replay-progress {\n  font-size: var(--tcw-font-size-xs);\n  font-family: var(--tcw-font-mono);\n  color: var(--tcw-text-muted);\n  min-width: 64px;\n  text-align: center;\n  font-feature-settings: 'tnum';\n}\n\n.tcw-replay-speed {\n  padding: 4px 8px;\n  font-size: var(--tcw-font-size-xs);\n  font-family: var(--tcw-font-mono);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n}\n\n.tcw-replay-speed:hover {\n  border-color: var(--tcw-border-strong);\n}\n\n@media (max-width: 640px) {\n  .tcw-replay-scrubber {\n    width: 140px;\n  }\n  .tcw-replay-progress {\n    display: none;\n  }\n}\n\n/* === Responsive === */\n\n@media (max-width: 768px) {\n  .tcw-toolbar {\n    padding: 0 4px;\n    height: max(44px, var(--tcw-toolbar-h));   /* Apple HIG minimum touch target */\n  }\n  .tcw-toolbar-sep {\n    display: none;\n  }\n  .tcw-btn,\n  .tcw-dropdown-trigger {\n    height: max(40px, var(--tcw-control-h));   /* fatter tap target */\n    padding: 0 12px;\n    font-size: var(--tcw-font-size);\n  }\n  .tcw-btn-icon {\n    width: max(40px, var(--tcw-control-h));\n    height: max(40px, var(--tcw-control-h));\n  }\n  .tcw-sidebar {\n    width: max(44px, var(--tcw-sidebar-w));\n  }\n  .tcw-sidebar-btn {\n    width: max(40px, var(--tcw-control-h));\n    height: max(40px, var(--tcw-control-h));\n  }\n  .tcw-modal {\n    width: 94vw;\n    border-radius: var(--tcw-dialog-radius);\n  }\n\n  /* Replay scrubber compact mode */\n  .tcw-replay-scrubber {\n    width: 120px;\n  }\n  .tcw-replay-progress {\n    display: none;\n  }\n}\n\n/* === Mobile bottom-sheet pattern ===\n * On phones, swap floating-centered modals for full-width sheets that slide\n * up from the bottom. Bigger hit targets, no awkward off-screen clipping,\n * matches how every modern iOS/Android app handles overflow UI.\n */\n@media (max-width: 640px) {\n  .tcw-modal {\n    top: auto;\n    /* Above the on-screen keyboard (the widget sets it from visualViewport). */\n    bottom: var(--tcw-keyboard-inset, 0px);\n    padding-left: env(safe-area-inset-left, 0px);\n    padding-right: env(safe-area-inset-right, 0px);\n    left: 0;\n    right: 0;\n    transform: none;\n    /* The border and the safe-area padding inside the screen's width. */\n    box-sizing: border-box;\n    width: 100vw;\n    max-width: 100vw;\n    /* Less the on-screen keyboard: a sheet's top never goes above the screen. */\n    max-height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    max-height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n    border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n    border-bottom: none;\n    /* Grab handle */\n    padding-top: 8px;\n  }\n\n  /* Visual \"grab handle\" affordance — a short pill at the top of every sheet */\n  .tcw-modal::before {\n    content: '';\n    display: block;\n    width: 36px;\n    height: 4px;\n    border-radius: 2px;\n    background: var(--tcw-border-strong);\n    margin: 0 auto 8px;\n    opacity: 0.7;\n  }\n\n  /* Reuse the existing modal-in animation but slide from below instead of\n   * popping from center, so the entrance reads as a sheet, not a dialog. */\n  @keyframes tcw-modal-in {\n    from { opacity: 0; transform: translateY(20px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .tcw-modal {\n    animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n  }\n\n  /* Safe-area-aware footer padding for iPhone notch / home indicator */\n  .tcw-modal-footer {\n    padding-bottom: max(14px, env(safe-area-inset-bottom));\n  }\n\n  /* Larger tap targets inside sheets: taller, not more padding, so a tab's text stays inside its chip. */\n  .tcw-modal-tab {\n    min-height: 40px;\n    padding-inline: 16px;\n  }\n  .tcw-dropdown-item {\n    padding: 12px 12px;\n    font-size: var(--tcw-font-size-lg);\n  }\n}\n\n/* === Price alerts panel === */\n\n.tcw-alerts-panel {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 40;\n  width: 300px;\n  max-width: calc(100vw - 24px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n\n@keyframes tcw-alerts-in {\n  from { opacity: 0; transform: translateY(-6px) scale(0.98); }\n  to { opacity: 1; transform: none; }\n}\n\n.tcw-alerts-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-weight: var(--tcw-weight-strong);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-alerts-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-alerts-close:hover {\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n}\n\n.tcw-alerts-form {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  padding: 12px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n\n.tcw-alerts-form input,\n.tcw-alerts-form select {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  outline: none;\n}\n.tcw-alerts-form input:focus,\n.tcw-alerts-form select:focus {\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-alerts-message,\n.tcw-alerts-source {\n  grid-column: 1 / -1;\n}\n\n.tcw-alerts-add {\n  grid-column: 1 / -1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 34px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent-ink);\n  background: var(--tcw-accent);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-alerts-add:hover {\n  background: var(--tcw-accent-hover);\n}\n\n.tcw-alerts-list {\n  max-height: 260px;\n  overflow-y: auto;\n  padding: 6px;\n}\n\n.tcw-alerts-empty {\n  padding: 18px 12px;\n  text-align: center;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-muted);\n  line-height: 1.5;\n}\n\n.tcw-alerts-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 8px 8px;\n  border-radius: var(--tcw-radius-sm);\n}\n.tcw-alerts-row:hover {\n  background: var(--tcw-bg-surface);\n}\n.tcw-alerts-triggered {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-alerts-info {\n  min-width: 0;\n}\n.tcw-alerts-row-main {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-alerts-row-note {\n  margin-top: 2px;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-alerts-badge {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  padding: 2px 5px;\n  border-radius: var(--tcw-tag-radius);\n  color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-alerts-del {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-alerts-del:hover {\n  background: var(--tcw-red-soft);\n  color: var(--tcw-red);\n}\n\n@media (max-width: 640px) {\n  .tcw-alerts-panel {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-width: 100vw;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n  }\n  .tcw-alerts-list {\n    max-height: 40vh;\n    max-height: 40dvh;\n    padding-bottom: max(8px, env(safe-area-inset-bottom));\n  }\n}\n\n/* === Data Window === */\n\n.tcw-datawin {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 38;\n  width: 200px;\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-datawin-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 9px 12px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-datawin-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-datawin-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-datawin-body { padding: 6px 4px; max-height: 360px; overflow-y: auto; }\n.tcw-datawin-empty { padding: 14px; text-align: center; font-size: var(--tcw-font-size-sm); color: var(--tcw-text-muted); }\n.tcw-datawin-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 3px 8px;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-datawin-label { color: var(--tcw-text-muted); }\n.tcw-datawin-value { color: var(--tcw-text); font-variant-numeric: tabular-nums; font-weight: var(--tcw-weight-strong); }\n.tcw-datawin-value.tcw-up { color: var(--tcw-green); }\n.tcw-datawin-value.tcw-down { color: var(--tcw-red); }\n.tcw-datawin-sub {\n  margin: 6px 8px 2px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  border-top: 1px solid var(--tcw-border);\n  padding-top: 6px;\n}\n\n@media (max-width: 640px) {\n  .tcw-datawin { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0; }\n}\n\n/* === Bracket order placement === */\n\n.tcw-btn-long:hover { color: var(--tcw-green) !important; }\n.tcw-btn-short:hover { color: var(--tcw-red) !important; }\n\n/*\n * Placing a bracket: a strip at the foot of the chart, over its time axis\n * (30 px, the chart's TIME_AXIS_HEIGHT), clear of the tags along its top; its\n * name and Place in the side's colour. Centred by its margins, not a\n * transform: the entrance animation ends on `transform: none`, which left it\n * starting at the middle.\n */\n.tcw-bracket-bar {\n  position: absolute;\n  bottom: calc(30px + var(--tcw-space-5));\n  inset-inline: 0;\n  margin-inline: auto;\n  box-sizing: border-box;\n  width: max-content;\n  max-width: calc(100% - 2 * var(--tcw-space-4));\n  z-index: 45;\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  padding-block: var(--tcw-space-3);\n  padding-inline: var(--tcw-space-5) var(--tcw-space-3);\n  background: var(--tcw-bg-elevated);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-bracket-bar[data-side='buy'] { --tcw-side: var(--tcw-green); }\n.tcw-bracket-bar[data-side='sell'] { --tcw-side: var(--tcw-red); }\n/* The name gives way first: in German or Russian it would push Place off a phone. */\n.tcw-bracket-label {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-side, var(--tcw-text));\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n/* The replay bar has the chart's foot while it shows: the bracket's goes to the top. */\n.tcw-chart-container:has(> .tcw-replay-bar) > .tcw-bracket-bar {\n  top: var(--tcw-space-4);\n  bottom: auto;\n}\n.tcw-bracket-hint {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.tcw-bracket-cancel,\n.tcw-bracket-confirm {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-control-h);\n  padding-inline: var(--tcw-space-5);\n  border-radius: var(--tcw-control-radius);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-bracket-cancel {\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  background: transparent;\n  color: var(--tcw-text);\n}\n.tcw-bracket-cancel:hover { background: var(--tcw-hover-bg); }\n/* The ground's own colour reads on the side's: dark on the dark theme's light greens, paper on the light theme's deep ones. */\n.tcw-bracket-confirm {\n  border: none;\n  background: var(--tcw-side, var(--tcw-accent));\n  color: var(--tcw-bg);\n  font-weight: var(--tcw-weight-strong);\n}\n.tcw-bracket-confirm:hover { background: color-mix(in srgb, var(--tcw-side, var(--tcw-accent)) 86%, var(--tcw-text)); }\n.tcw-bracket-cancel:focus-visible,\n.tcw-bracket-confirm:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n@media (max-width: 640px) {\n  .tcw-bracket-bar {\n    inset-inline: var(--tcw-space-4);\n    width: auto;\n    max-width: none;\n  }\n  .tcw-bracket-hint { display: none; }\n  .tcw-bracket-label { margin-inline-end: auto; }\n  .tcw-bracket-cancel,\n  .tcw-bracket-confirm { height: 34px; }\n}\n\n@media (forced-colors: active) {\n  .tcw-bracket-bar { border: 1px solid CanvasText; }\n  .tcw-bracket-confirm { border: 1px solid ButtonText; }\n  .tcw-bracket-cancel:focus-visible,\n  .tcw-bracket-confirm:focus-visible { outline: 2px solid Highlight; }\n}\n\n/* === Drawing style + templates popover === */\n\n.tcw-style-panel {\n  position: absolute;\n  bottom: 12px;\n  inset-inline-start: var(--tcw-panel-left);\n  z-index: 40;\n  width: 220px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-style-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n}\n.tcw-style-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-style-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n\n.tcw-style-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.tcw-style-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: 1px solid var(--tcw-border-strong);\n  cursor: pointer;\n  padding: 0;\n}\n.tcw-style-swatch.tcw-on { outline: 2px solid var(--tcw-accent); outline-offset: 1px; }\n.tcw-style-picker {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  cursor: pointer;\n}\n.tcw-style-width, .tcw-style-dash {\n  flex: 1;\n  min-width: 0;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  font-size: var(--tcw-font-size-xs);\n}\n.tcw-style-width span { width: 16px; background: currentColor; border-radius: var(--tcw-radius-xs); }\n.tcw-style-width.tcw-on, .tcw-style-dash.tcw-on {\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent);\n}\n\n.tcw-style-subhead {\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n  margin-top: 2px;\n}\n.tcw-style-save { display: flex; gap: 6px; }\n.tcw-style-name {\n  flex: 1;\n  min-width: 0;\n  height: 28px;\n  padding: 0 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  outline: none;\n}\n.tcw-style-name:focus { border-color: var(--tcw-accent); }\n.tcw-style-savebtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 10px;\n  height: 28px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent-ink);\n  background: var(--tcw-accent);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-style-savebtn:hover { background: var(--tcw-accent-hover); }\n\n.tcw-style-templates { display: flex; flex-direction: column; gap: 2px; max-height: 140px; overflow-y: auto; }\n.tcw-style-empty { font-size: var(--tcw-font-size-xs); color: var(--tcw-text-muted); padding: 4px 0; }\n.tcw-style-template { display: flex; align-items: center; gap: 4px; }\n.tcw-style-apply {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 7px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  text-align: start;\n}\n.tcw-style-apply:hover { background: var(--tcw-bg-surface); }\n.tcw-style-tdot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; }\n.tcw-style-tdel {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-style-tdel:hover { background: var(--tcw-red-soft); color: var(--tcw-red); }\n\n/* === Settings range slider === */\n\n.tcw-settings-range {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.tcw-settings-range input[type='range'] {\n  width: 110px;\n  accent-color: var(--tcw-accent);\n  cursor: pointer;\n}\n.tcw-settings-range-val {\n  min-width: 38px;\n  text-align: end;\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-dim);\n}\n\n/* === Indicator settings dialog === */\n\n/* Narrow on a desktop; on a phone a sheet across the screen like every dialog. */\n@media (min-width: 641px) {\n  .tcw-modal-narrow {\n    max-width: 360px;\n  }\n}\n.tcw-indi-input {\n  width: 110px;\n  height: 30px;\n  padding: 0 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  outline: none;\n  font-variant-numeric: tabular-nums;\n}\n.tcw-indi-input:focus {\n  border-color: var(--tcw-accent);\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-indi-select {\n  width: 150px;\n  padding-right: 4px;\n  cursor: pointer;\n}\n/* A level: its value and a remove button. */\n.tcw-indi-level {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.tcw-indi-remove {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-indi-remove:hover {\n  color: var(--tcw-red);\n  background: var(--tcw-hover-bg);\n}\n.tcw-indi-remove:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n.tcw-indi-add {\n  margin-top: 8px;\n}\n.tcw-indi-color {\n  width: 36px;\n  height: 28px;\n  padding: 2px;\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-sm);\n  cursor: pointer;\n}\n\n/* === Object tree panel === */\n\n.tcw-tree-panel {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-end: 12px;\n  z-index: 39;\n  width: 280px;\n  max-width: calc(100vw - 24px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: 1px solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n\n.tcw-tree-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  font-weight: var(--tcw-weight-strong);\n  font-size: var(--tcw-font-size);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-tree-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-tree-close:hover {\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n}\n\n.tcw-tree-section {\n  padding: 6px;\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-tree-section:last-child {\n  border-bottom: none;\n}\n.tcw-tree-section-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 8px 4px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: calc(var(--tcw-weight-strong) + 100);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  color: var(--tcw-text-muted);\n}\n.tcw-tree-add {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-tree-add:hover {\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n}\n.tcw-tree-dot {\n  flex-shrink: 0;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.tcw-tree-list {\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.tcw-tree-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: var(--tcw-radius-sm);\n}\n.tcw-tree-row:hover {\n  background: var(--tcw-bg-surface);\n}\n.tcw-tree-hidden .tcw-tree-name {\n  opacity: 0.5;\n}\n.tcw-tree-name {\n  min-width: 0;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-tree-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n.tcw-tree-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-muted);\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n}\n.tcw-tree-btn:hover {\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text);\n}\n.tcw-tree-btn.tcw-tree-on {\n  color: var(--tcw-accent);\n}\n.tcw-tree-btn.tcw-tree-del:hover {\n  background: var(--tcw-red-soft);\n  color: var(--tcw-red);\n}\n.tcw-tree-group .tcw-tree-name {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: var(--tcw-weight-strong);\n}\n.tcw-tree-group .tcw-tree-name svg {\n  flex: none;\n  color: var(--tcw-text-muted);\n}\n.tcw-tree-member {\n  margin-left: 14px;\n  padding-left: 10px;\n  border-inline-start: 1px solid var(--tcw-border-strong);\n  border-radius: 0 var(--tcw-radius-sm) var(--tcw-radius-sm) 0;\n}\n.tcw-tree-rename {\n  flex: 1;\n  min-width: 0;\n  padding: 3px 6px;\n  border: 1px solid var(--tcw-accent-line);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-tree-rename:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--tcw-accent-soft);\n}\n.tcw-tree-empty {\n  padding: 8px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-muted);\n}\n\n@media (max-width: 640px) {\n  .tcw-tree-panel {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-width: 100vw;\n    border-radius: var(--tcw-radius-xl) var(--tcw-radius-xl) 0 0;\n  }\n  .tcw-tree-list {\n    max-height: 30vh;\n    max-height: 30dvh;\n  }\n  .tcw-tree-section:last-child {\n    padding-bottom: max(6px, env(safe-area-inset-bottom));\n  }\n}\n\n/* === Reduced motion === */\n\n@media (prefers-reduced-motion: reduce) {\n  .tcw-root *,\n  .tcw-root *::before,\n  .tcw-root *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n\n  /* Except the loader's slow glow (opacity only): without it a long wait\n     looks frozen. */\n  .tcw-root .tcw-loading-candle,\n  .tcw-root .tcw-loading-track > span {\n    animation-duration: 2.4s !important;\n    animation-iteration-count: infinite !important;\n    animation-delay: var(--tcw-delay, 0ms) !important;\n  }\n}\n\n/* --- Drawing settings dialog --- */\n.tcw-drawing-text {\n  min-height: 56px;\n  resize: vertical;\n  font-family: inherit;\n}\n/* The text a drawing writes takes the dialog's width, under its name. */\n.tcw-text-row {\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--tcw-space-3);\n}\n.tcw-text-row .tcw-drawing-text { box-sizing: border-box; width: 100%; }\n.tcw-levels-editor { display: grid; gap: var(--tcw-space-3); }\n/* Two columns of levels on a desktop, as a Fibonacci tool has a dozen. */\n.tcw-levels-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--tcw-space-3) var(--tcw-space-6);\n  max-height: 260px;\n  overflow-y: auto;\n  padding-inline-end: var(--tcw-space-1);\n}\n@media (max-width: 640px) {\n  .tcw-levels-grid { grid-template-columns: minmax(0, 1fr); }\n}\n.tcw-level-row {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: var(--tcw-space-3);\n}\n.tcw-level-row .tcw-indi-input { box-sizing: border-box; width: 100%; min-width: 0; }\n.tcw-level-row input[type='checkbox'] { accent-color: var(--tcw-accent); }\n.tcw-level-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: 0;\n  border-radius: var(--tcw-radius-sm, 4px);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-level-remove:hover { color: var(--tcw-text); background: var(--tcw-bg-elevated); }\n.tcw-level-remove:focus-visible { outline: 2px solid var(--tcw-accent); outline-offset: 1px; }\n.tcw-level-add { justify-self: start; }\n\n/* --- Context menu (right-click on a drawing) --- */\n.tcw-context-menu {\n  position: absolute;\n  z-index: 70;\n  min-width: 200px;\n  /* Taller than the room (many templates, say), it scrolls. */\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--tcw-menu-pad);\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n}\n.tcw-context-item {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  width: 100%;\n  min-height: var(--tcw-menu-item-h);\n  padding: var(--tcw-space-1) var(--tcw-space-4);\n  border: 0;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  text-align: start;\n  cursor: pointer;\n}\n.tcw-context-item svg, .tcw-context-icon { flex: none; width: 14px; height: 14px; color: var(--tcw-text-muted); }\n.tcw-context-item:hover, .tcw-context-item:focus-visible { background: var(--tcw-hover-bg); outline: none; }\n.tcw-context-item:focus-visible { box-shadow: inset 0 0 0 1px var(--tcw-accent); }\n.tcw-context-danger, .tcw-context-danger svg { color: var(--tcw-red); }\n.tcw-context-sep { height: 1px; margin: var(--tcw-space-2) var(--tcw-space-4); background: var(--tcw-divider); }\n.tcw-context-label { flex: 1; min-width: 0; }\n/* A shortcut, and the mark of a submenu, at the row's end. */\n.tcw-context-key {\n  flex: none;\n  margin-inline-start: var(--tcw-space-5);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text-muted);\n}\n.tcw-context-item svg.tcw-context-more { width: 12px; height: 12px; }\n/* Right to left, a submenu opens to the left: its marks point there. */\n[dir='rtl'] .tcw-context-more, [dir='rtl'] .tcw-context-back > svg { transform: scaleX(-1); }\n/* No keyboard under a finger: the keys stay named to a screen reader only. */\n@media (hover: none) { .tcw-context-key { display: none; } }\n.tcw-context-item[aria-expanded='true'] { background: var(--tcw-hover-bg); }\n/* The choice made among radios: a dot where a switch has its tick. */\n.tcw-context-dot { display: grid; place-items: center; }\n.tcw-context-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tcw-text); }\n/* An entry that can be removed: its x on the row in hand, always on a touch screen. */\n.tcw-context-row { display: flex; align-items: center; border-radius: var(--tcw-menu-item-radius); }\n.tcw-context-row .tcw-context-item { flex: 1; min-width: 0; }\n.tcw-context-row:hover { background: var(--tcw-hover-bg); }\n.tcw-context-row:hover .tcw-context-item { background: transparent; }\n.tcw-context-remove {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  margin-inline-end: var(--tcw-space-1);\n  border: 0;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-context-row:hover .tcw-context-remove, .tcw-context-row:focus-within .tcw-context-remove { opacity: 1; }\n.tcw-context-remove:hover { color: var(--tcw-red); background: var(--tcw-hover-bg); }\n@media (hover: none) { .tcw-context-remove { opacity: 1; } }\n/* --- Toolbar over a selected drawing --- */\n.tcw-sel-toolbar {\n  position: absolute;\n  z-index: 65;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 3px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-divider);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  font-family: var(--tcw-font);\n  white-space: nowrap;\n  animation: tcw-sel-in var(--tcw-dur-fast) var(--tcw-ease-out);\n}\n@keyframes tcw-sel-in { from { opacity: 0; transform: translateY(3px); } }\n.tcw-sel-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n  min-width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  padding: 0 6px;\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-sel-btn svg { flex: none; }\n.tcw-sel-btn:hover, .tcw-sel-btn[aria-expanded=\"true\"] { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n.tcw-sel-btn:focus-visible, .tcw-sel-swatch:focus-visible, .tcw-sel-option:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--tcw-accent); }\n.tcw-sel-btn.tcw-sel-on { color: var(--tcw-accent); background: var(--tcw-accent-soft); }\n.tcw-sel-danger:hover { color: var(--tcw-red); background: var(--tcw-red-soft); }\n.tcw-sel-color {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tcw-text) 25%, transparent);\n}\n.tcw-sel-width {\n  display: inline-block;\n  width: 16px;\n  height: var(--w, 1px);\n  max-height: 6px;\n  border-radius: 1px;\n  background: currentColor;\n}\n.tcw-sel-sep { flex: none; width: 1px; height: 18px; margin: 0 3px; background: var(--tcw-divider); }\n.tcw-sel-pop {\n  position: absolute;\n  z-index: 66;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 120px;\n  padding: 4px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-divider);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  font-family: var(--tcw-font);\n}\n.tcw-sel-pop--color {\n  display: grid;\n  grid-template-columns: repeat(4, 24px);\n  gap: 6px;\n  min-width: 0;\n  padding: 8px;\n}\n.tcw-sel-swatch {\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tcw-text) 20%, transparent);\n  cursor: pointer;\n  transition: transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-sel-swatch:hover { transform: scale(1.1); }\n.tcw-sel-swatch.tcw-sel-on { box-shadow: 0 0 0 2px var(--tcw-bg-elevated), 0 0 0 4px var(--tcw-accent); }\n.tcw-sel-option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: var(--tcw-menu-item-h);\n  padding: 4px 10px;\n  border: 0;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  text-align: start;\n  cursor: pointer;\n}\n.tcw-sel-option:hover { background: var(--tcw-bg-surface); }\n.tcw-sel-option.tcw-sel-on { color: var(--tcw-accent); }\n@media (prefers-reduced-motion: reduce) {\n  .tcw-sel-toolbar { animation: none; }\n  .tcw-sel-swatch { transition: none; }\n}\n\n/* --- The account: a panel under the chart; its head the tabs, the totals, a new order and its close. --- */\n.tcw-account-dock {\n  flex: none;\n}\n.tcw-account {\n  display: flex;\n  flex-direction: column;\n  /* 233, on the widget's φ ladder. */\n  height: 233px;\n  border-top: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n}\n.tcw-account-head {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-height: calc(var(--tcw-space-6) + var(--tcw-space-5));\n  padding-inline: var(--tcw-space-4) var(--tcw-space-3);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n.tcw-account-tabs {\n  display: flex;\n  gap: var(--tcw-space-1);\n  min-width: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.tcw-account-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-tab-h);\n  padding: var(--tcw-tab-pad);\n  border: 0;\n  border-radius: var(--tcw-tab-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  cursor: pointer;\n}\n.tcw-account-tab:hover { color: var(--tcw-text); background: var(--tcw-tab-hover); }\n.tcw-account-tab[aria-selected='true'] {\n  color: var(--tcw-tab-on-fg);\n  background: var(--tcw-tab-on-bg);\n  font-weight: var(--tcw-weight-strong);\n  box-shadow: inset 0 calc(-1 * var(--tcw-tab-line)) 0 var(--tcw-accent);\n}\n/* A tab's count: a figure in a soft pill. */\n.tcw-account-count {\n  min-width: 1.6em;\n  padding-inline: var(--tcw-space-2);\n  border-radius: 999px;\n  background: var(--tcw-hover-bg);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  text-align: center;\n}\n/* The open and realised P&L, on every tab, in the mono figures. Short of room, they keep their start: the open P&L's words stay whole. */\n.tcw-account-totals {\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n  justify-content: safe flex-end;\n  gap: var(--tcw-space-5);\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tcw-account-new {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  height: var(--tcw-control-h);\n  padding-inline: var(--tcw-space-4);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  cursor: pointer;\n}\n.tcw-account-new:hover { background: var(--tcw-hover-bg); }\n.tcw-account-tab:focus-visible,\n.tcw-account-new:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n.tcw-account-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n/* The rows: headings in the label case, figures set right in the mono type. */\n.tcw-account-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-account-table th {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  height: var(--tcw-control-h);\n  padding-inline: var(--tcw-space-4);\n  border-bottom: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-align: start;\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n  white-space: nowrap;\n}\n.tcw-account-table td {\n  height: calc(var(--tcw-control-h) + var(--tcw-space-2));\n  padding-inline: var(--tcw-space-4);\n  border-bottom: 1px solid var(--tcw-divider);\n  color: var(--tcw-text);\n  white-space: nowrap;\n}\n.tcw-account-table :is(th, td).tcw-num {\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n}\n.tcw-account-table tbody tr:hover td { background: var(--tcw-hover-bg); }\n.tcw-account-side { font-weight: var(--tcw-weight-strong); }\n.tcw-account-buy, .tcw-account-up { color: var(--tcw-green); }\n.tcw-account-sell, .tcw-account-down { color: var(--tcw-red); }\n.tcw-account-actions { display: flex; justify-content: flex-end; gap: var(--tcw-space-1); }\n.tcw-account-empty {\n  margin: 0;\n  padding: var(--tcw-space-6);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  text-align: center;\n}\n\n/*\n * A narrow widget (a phone, a narrow column): the totals go under the tabs,\n * and each row is a card of named figures. The headings stay for a screen\n * reader, unseen: the cells name themselves on screen. The panel is a step\n * of phi taller (377) for two cards and more, at most 45% of a phone's screen.\n */\n.tcw-root[data-tcw-narrow] .tcw-account {\n  height: 377px;\n  max-height: 45vh;\n  max-height: 45dvh;\n}\n.tcw-root[data-tcw-narrow] .tcw-account-head { flex-wrap: wrap; padding-block: var(--tcw-space-2); }\n/* The tabs give way (they scroll): New order and the close keep the first line. */\n.tcw-root[data-tcw-narrow] .tcw-account-tabs { flex: 1 1 0; }\n.tcw-root[data-tcw-narrow] .tcw-account-totals { order: 3; flex-basis: 100%; justify-content: flex-start; padding-inline: var(--tcw-space-3); }\n.tcw-root[data-tcw-narrow] .tcw-account-table thead {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n.tcw-root[data-tcw-narrow] .tcw-account-table,\n.tcw-root[data-tcw-narrow] .tcw-account-table tbody { display: block; }\n.tcw-root[data-tcw-narrow] .tcw-account-table tbody tr {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--tcw-space-2) var(--tcw-space-5);\n  padding: var(--tcw-space-4);\n  border-bottom: 1px solid var(--tcw-divider);\n}\n.tcw-root[data-tcw-narrow] .tcw-account-table td {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--tcw-space-3);\n  height: auto;\n  padding: 0;\n  border: 0;\n}\n.tcw-root[data-tcw-narrow] .tcw-account-table td::before {\n  content: attr(data-label);\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font);\n  font-size: var(--tcw-font-size-xs);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n.tcw-root[data-tcw-narrow] .tcw-account-table td:first-child,\n.tcw-root[data-tcw-narrow] .tcw-account-table td[data-label=''] { grid-column: 1 / -1; }\n.tcw-root[data-tcw-narrow] .tcw-account-table td[data-label='']::before { content: none; }\n.tcw-root[data-tcw-narrow] .tcw-account-table td[data-label=''] .tcw-account-actions { width: 100%; }\n.tcw-root[data-tcw-narrow] .tcw-account-table .tcw-tree-btn { width: 34px; height: 34px; }\n\n@media (forced-colors: active) {\n  .tcw-account-tab[aria-selected='true'] { outline: 2px solid Highlight; }\n  .tcw-account-tab:focus-visible,\n  .tcw-account-new:focus-visible { outline: 2px solid Highlight; }\n}\n\n/* --- Named layouts --- */\n.tcw-layouts-btn { max-width: 190px; }\n.tcw-layouts-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.tcw-layouts-dirty {\n  width: 6px;\n  height: 6px;\n  flex: none;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n}\n.tcw-name-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--tcw-font-size-sm); color: var(--tcw-text-dim); }\n.tcw-name-field .tcw-indi-input { width: 100%; height: 34px; font-size: var(--tcw-font-size); }\n\n/* --- Chart grid --- */\n.tcw-grid { background: var(--tcw-bg); }\n.tcw-grid-bar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-height: calc(var(--tcw-control-h) + 8px);\n  padding: 0 8px;\n  border-bottom: 1px solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.tcw-grid-bar::-webkit-scrollbar { display: none; }\n.tcw-grid-group { display: flex; align-items: center; gap: 2px; flex: none; }\n.tcw-grid-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-right: 4px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  letter-spacing: var(--tcw-label-tracking);\n  text-transform: var(--tcw-label-case);\n  color: var(--tcw-text-muted);\n}\n.tcw-grid-sync[aria-pressed=\"true\"] { color: var(--tcw-accent); }\n.tcw-grid-cells {\n  flex: 1;\n  min-height: 0;\n  display: grid;\n  gap: 1px;\n  background: var(--tcw-border);\n}\n.tcw-grid-cell {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  background: var(--tcw-bg);\n}\n.tcw-grid-cell-active::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--tcw-accent);\n  pointer-events: none;\n  z-index: 5;\n}\n\n/* --- Host toolbar buttons --- */\n.tcw-toolbar-host { display: inline-flex; align-items: center; gap: 2px; }\n.tcw-toolbar-host:empty { display: none; }\n.tcw-host-btn { display: inline-flex; align-items: center; gap: 4px; }\n\n/* --- Host sidebar buttons, status bar items, and the layer over the chart --- */\n.tcw-sidebar-host { display: flex; flex-direction: column; align-items: center; }\n.tcw-sidebar-host:empty { display: none; }\n.tcw-status-host { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.tcw-status-host:empty { display: none; }\n.tcw-status-host-item { white-space: nowrap; }\n.tcw-status-host-btn {\n  margin: -4px -6px;\n  padding: 4px 6px;\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-status-host-btn:hover { color: var(--tcw-text); background: var(--tcw-hover-bg); }\n.tcw-status-host-btn:focus-visible { outline: 2px solid var(--tcw-accent); outline-offset: -2px; }\n/* Over the plot and under the widget's own overlays; the pointer reaches the chart unless an element of yours takes it. */\n.tcw-host-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }\n\n/* --- Pane buttons (move, fold, maximise) --- */\n.tcw-pane-controls {\n  position: absolute;\n  z-index: 4;\n  display: flex;\n  gap: 1px;\n  transform: translateX(-100%);\n  padding: 1px;\n  border-radius: var(--tcw-radius-sm);\n  background: color-mix(in srgb, var(--tcw-bg) 80%, transparent);\n  opacity: 0.55;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-pane-controls:hover,\n.tcw-pane-controls:focus-within { opacity: 1; }\n.tcw-pane-btn {\n  display: inline-grid;\n  place-items: center;\n  width: 18px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-pane-btn:hover { color: var(--tcw-text); background: var(--tcw-hover-bg); }\n.tcw-pane-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tcw-accent-soft); }\n\n/* --- Typed interval --- */\n.tcw-interval-input {\n  position: absolute;\n  z-index: 20;\n  left: 50%;\n  top: 40%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 12px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-radius-lg, 10px);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n}\n.tcw-interval-field {\n  width: 150px;\n  height: 36px;\n  padding: 0 10px;\n  font: inherit;\n  font-size: var(--tcw-font-size-xl);\n  font-weight: var(--tcw-weight-strong);\n  font-variant-numeric: tabular-nums;\n  color: var(--tcw-text);\n  background: var(--tcw-bg-surface);\n  border: 1px solid var(--tcw-accent);\n  border-radius: var(--tcw-input-radius);\n  outline: none;\n}\n.tcw-interval-field[aria-invalid] { border-color: var(--tcw-red); }\n.tcw-interval-hint { font-size: var(--tcw-font-size-xs); color: var(--tcw-text-muted); max-width: 170px; }\n\n/* --- Alerts: lines, moves, bar close, expiry --- */\n.tcw-alerts-source { grid-column: auto; }\n.tcw-alerts-row-fields {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n}\n.tcw-alerts-row-fields[hidden] { display: none; }\n.tcw-alerts-row-fields > input[hidden] { display: none; }\n.tcw-alerts-row-fields:has(> input[hidden]) { grid-template-columns: 1fr; }\n.tcw-alerts-options { align-items: center; }\n.tcw-alerts-form .tcw-alerts-check {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-dim);\n}\n.tcw-alerts-form .tcw-alerts-check input { width: auto; height: auto; }\n.tcw-alerts-form input[aria-invalid=\"true\"] { border-color: var(--tcw-red); }\n.tcw-alerts-row-meta { margin-top: 2px; font-size: var(--tcw-font-size-xs); color: var(--tcw-text-muted); }\n.tcw-alerts-expired { opacity: 0.6; }\n\n/* --- Signal marker note --- */\n.tcw-marker-tip {\n  position: absolute;\n  z-index: 12;\n  pointer-events: none;\n  padding: 6px 8px;\n  border: 1px solid var(--tcw-border);\n  border-radius: var(--tcw-tooltip-radius);\n  background: var(--tcw-tooltip-bg);\n  color: var(--tcw-tooltip-fg);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.45;\n  font-variant-numeric: tabular-nums;\n  box-shadow: var(--tcw-menu-shadow);\n  max-width: 240px;\n}\n.tcw-marker-tip strong { display: block; font-size: var(--tcw-font-size-sm); }\n\n/* === Navigation over the chart ===\n * Centred on the plot's bottom edge, shown while a mouse is over the chart. */\n.tcw-nav {\n  position: absolute;\n  z-index: 15;\n  display: flex;\n  gap: 2px;\n  padding: 3px;\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: calc(var(--tcw-control-radius) + 3px);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n  opacity: 0;\n  pointer-events: none;\n  transform: translate(-50%, calc(-100% - 12px));\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-nav.tcw-nav-shown {\n  opacity: 1;\n  pointer-events: auto;\n}\n.tcw-nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  border: 0;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  touch-action: none;\n}\n.tcw-nav-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n.tcw-nav-btn:active {\n  background: var(--tcw-active-bg);\n}\n.tcw-nav-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n.tcw-nav-btn svg {\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n@media (hover: none) {\n  .tcw-nav { display: none; }\n}\n\n/* === Symbol info ===\n * Top left, beside the drawing tools: the panels on the right stay clear. */\n.tcw-syminfo {\n  position: absolute;\n  top: var(--tcw-panel-top);\n  inset-inline-start: var(--tcw-panel-left);\n  z-index: 38;\n  width: 288px;\n  max-height: calc(100% - var(--tcw-panel-top) - 12px);\n  display: flex;\n  flex-direction: column;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-panel-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  overflow: hidden;\n  animation: tcw-alerts-in var(--tcw-dur, 160ms) var(--tcw-ease, ease) both;\n}\n.tcw-syminfo-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 9px 12px;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n  border-bottom: 1px solid var(--tcw-border);\n}\n.tcw-syminfo-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n.tcw-syminfo-close:hover { background: var(--tcw-bg-surface); color: var(--tcw-text); }\n.tcw-syminfo-body,\n.tcw-syminfo-news {\n  padding: 12px 14px;\n  overflow-y: auto;\n}\n.tcw-syminfo-body {\n  display: grid;\n  gap: 10px;\n}\n.tcw-syminfo-symbol {\n  font-size: var(--tcw-font-size-lg);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n}\n.tcw-syminfo-desc {\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-dim);\n}\n.tcw-syminfo-meta {\n  margin-top: 2px;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n.tcw-syminfo-quote {\n  display: flex;\n  align-items: baseline;\n  gap: 10px;\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-syminfo-price {\n  font-size: var(--tcw-font-size-display);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text);\n}\n.tcw-syminfo-change { font-size: var(--tcw-font-size-sm); }\n.tcw-syminfo-change.tcw-up { color: var(--tcw-green); }\n.tcw-syminfo-change.tcw-down { color: var(--tcw-red); }\n.tcw-syminfo-status {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  font-size: var(--tcw-font-size-sm);\n  color: var(--tcw-text-dim);\n}\n.tcw-syminfo-status::before,\n.tcw-status-market::before {\n  content: '';\n  flex: none;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--tcw-text-muted);\n}\n.tcw-syminfo-status[data-state='open']::before,\n.tcw-syminfo-status[data-state='always']::before,\n.tcw-status-market[data-state='open']::before {\n  background: var(--tcw-green);\n}\n.tcw-syminfo-stats {\n  display: grid;\n  gap: 4px;\n  margin: 0;\n  padding-top: 10px;\n  border-top: 1px solid var(--tcw-divider);\n}\n.tcw-syminfo-stat {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-syminfo-stat dt { color: var(--tcw-text-muted); }\n.tcw-syminfo-stat dd {\n  margin: 0;\n  color: var(--tcw-text);\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n}\n.tcw-syminfo-news {\n  border-top: 1px solid var(--tcw-divider);\n}\n.tcw-syminfo-news-title {\n  margin-bottom: 8px;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-muted);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n.tcw-syminfo-news-list {\n  display: grid;\n  gap: 10px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.tcw-syminfo-news-item {\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.4;\n  color: var(--tcw-text);\n}\n.tcw-syminfo-news-item a {\n  color: var(--tcw-text);\n  text-decoration: none;\n}\n.tcw-syminfo-news-item a:hover { color: var(--tcw-accent); text-decoration: underline; }\n.tcw-syminfo-news-item a:focus-visible { outline: none; box-shadow: var(--tcw-ring); border-radius: var(--tcw-radius-xs); }\n.tcw-syminfo-news-meta,\n.tcw-syminfo-news-note {\n  margin-top: 2px;\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n\n/* Numbers keep their sign on the left, and mixed text its own order, in a right-to-left widget too. */\n.tcw-watchlist-price,\n.tcw-watchlist-change,\n.tcw-syminfo-price,\n.tcw-syminfo-change {\n  unicode-bidi: isolate;\n  direction: ltr;\n}\n.tcw-syminfo-desc,\n.tcw-syminfo-meta,\n.tcw-syminfo-status,\n.tcw-syminfo-stat dd,\n.tcw-syminfo-news-meta {\n  unicode-bidi: plaintext;\n}\n\n/* The market's status in the status bar. */\n.tcw-status-market {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  color: var(--tcw-text-muted);\n}\n\n@media (max-width: 640px) {\n  .tcw-syminfo {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 100vw;\n    max-height: 70%;\n    border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n  }\n}\n\n/* === The look: how chosen controls show, floating bars, segmented intervals ===\n * Each switch sets variables on its own root, which its parts read: a grid's\n * look never reaches into a chart that has one of its own. */\n\n/* A chosen button (`ui.active`): a tinted fill (default), a solid pill, or an underline.\n * Dialog tabs are chips, or underlined in the underline look. Panels sit below the\n * toolbar and beside the drawing tools. */\n.tcw-root {\n  --tcw-on-bg: var(--tcw-accent-soft);\n  --tcw-on-fg: var(--tcw-accent);\n  --tcw-on-ring: none;\n  --tcw-on-icon-bg: var(--tcw-accent-soft);\n  --tcw-on-icon-fg: var(--tcw-accent);\n  --tcw-on-icon-ring: none;\n  --tcw-tabs-pad-block: var(--tcw-space-4);\n  --tcw-tab-h: var(--tcw-control-h);\n  --tcw-tab-pad: 0 var(--tcw-space-5);\n  --tcw-tab-line: 0px;\n  --tcw-tab-radius: var(--tcw-control-radius);\n  --tcw-tab-hover: var(--tcw-hover-bg);\n  --tcw-tab-on-bg: var(--tcw-on-bg);\n  --tcw-tab-on-fg: var(--tcw-on-fg);\n  /* A menu's rows sit inside its padding with corners that follow its own: the menu's\n   * corner less the padding between, so the two curves run parallel (Print: 5 - 3 = 2). */\n  --tcw-menu-pad: var(--tcw-space-2);\n  --tcw-menu-item-radius: max(0px, calc(var(--tcw-menu-radius) - var(--tcw-menu-pad)));\n  --tcw-panel-top: calc(var(--tcw-toolbar-h) + var(--tcw-space-3));\n  --tcw-panel-left: calc(var(--tcw-sidebar-w) + var(--tcw-space-5));\n}\n.tcw-root[data-tcw-active='solid'] {\n  --tcw-on-bg: var(--tcw-text);\n  --tcw-on-fg: var(--tcw-bg);\n  --tcw-on-icon-bg: var(--tcw-text);\n  --tcw-on-icon-fg: var(--tcw-bg);\n}\n/* Print picks a tool in ink blue on a tint: a solid square would outweigh the chart beside it. */\n.tcw-root[data-tcw-ui='print'][data-tcw-active='solid'] {\n  --tcw-on-icon-bg: var(--tcw-accent-soft);\n  --tcw-on-icon-fg: var(--tcw-accent);\n}\n.tcw-root[data-tcw-active='underline'] {\n  --tcw-on-bg: var(--tcw-active-bg);\n  --tcw-on-fg: var(--tcw-text);\n  --tcw-on-ring: inset 0 -2px 0 var(--tcw-accent);\n  --tcw-on-icon-bg: var(--tcw-active-bg);\n  --tcw-on-icon-fg: var(--tcw-accent);\n  --tcw-on-icon-ring: inset 2px 0 0 var(--tcw-accent);\n  --tcw-tabs-pad-block: 0px;\n  --tcw-tab-h: auto;\n  --tcw-tab-pad: 11px 14px;\n  --tcw-tab-line: 2px;\n  --tcw-tab-radius: 0px;\n  --tcw-tab-hover: transparent;\n  --tcw-tab-on-bg: transparent;\n  --tcw-tab-on-fg: var(--tcw-accent);\n}\n.tcw-root[data-tcw-toolbar='floating'] {\n  --tcw-panel-top: calc(var(--tcw-toolbar-h) + 2 * var(--tcw-border-w) + 14px);\n}\n.tcw-root[data-tcw-sidebar='floating'] {\n  --tcw-panel-left: calc(var(--tcw-sidebar-w) + 2 * var(--tcw-border-w) + 22px);\n}\n\n/* The toolbar as an island (`ui.toolbar: 'floating'`). */\n.tcw-root[data-tcw-toolbar='floating'] > .tcw-toolbar {\n  margin: 8px 10px 0;\n  padding-inline: calc(min(var(--tcw-toolbar-radius), var(--tcw-toolbar-h) / 2) / 2 + 8px);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-toolbar-radius);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n}\n\n/* The drawing tools as an island (`ui.sidebar: 'floating'`). */\n.tcw-root[data-tcw-sidebar='floating'] > .tcw-body > .tcw-sidebar {\n  align-self: flex-start;\n  max-height: calc(100% - 20px);\n  margin: 10px 6px 10px 10px;\n  padding-block: calc(min(var(--tcw-sidebar-radius), var(--tcw-sidebar-w) / 2) / 2 + 6px);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-sidebar-radius);\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-menu-shadow);\n}\n\n/* Frosted menus (`ui.blur` above 0): the chart shows through, blurred. */\n@supports (background: color-mix(in srgb, red 50%, transparent)) {\n  .tcw-dropdown,\n  .tcw-flyout,\n  .tcw-context-menu {\n    background: color-mix(in srgb, var(--tcw-bg-elevated) var(--tcw-surface-opacity), transparent);\n  }\n}\n\n/* The interval buttons in one track (`ui.intervals: 'segmented'`). */\n.tcw-root[data-tcw-intervals='segmented'] > .tcw-toolbar > .tcw-tf-group {\n  gap: 2px;\n  margin: 0 4px;\n  padding: 3px;\n  border-radius: calc(var(--tcw-control-radius) + 3px);\n  background: var(--tcw-hover-bg);\n}\n.tcw-root[data-tcw-intervals='segmented'] > .tcw-toolbar > .tcw-tf-group .tcw-btn {\n  height: calc(var(--tcw-control-h) - 6px);\n  padding: 0 9px;\n}\n\n/* Phones: the variants keep comfortable tap targets and room for the bar. */\n@media (max-width: 768px) {\n  .tcw-root[data-tcw-intervals='segmented'] > .tcw-toolbar > .tcw-tf-group .tcw-btn {\n    height: max(34px, calc(var(--tcw-control-h) - 6px));\n    padding: 0 10px;\n  }\n  .tcw-root[data-tcw-toolbar='floating'] > .tcw-toolbar {\n    margin: 6px 6px 0;\n    padding-inline: 4px;\n  }\n  .tcw-root[data-tcw-sidebar='floating'] > .tcw-body > .tcw-sidebar {\n    margin: 6px 4px 6px 6px;\n  }\n}\n\n/* --- Phones and tablets --- */\n\n/* Taps without the grey flash or the double-tap zoom's wait. The chart area\n   sets its own touch-action for its gestures. */\n.tcw-root {\n  -webkit-tap-highlight-color: transparent;\n  touch-action: manipulation;\n}\n\n/* iOS zooms the page into an input under 16 px when it takes focus. */\n@media (pointer: coarse) {\n  .tcw-root input:not([type='color']):not([type='range']):not([type='checkbox']):not([type='radio']),\n  .tcw-root select,\n  .tcw-root textarea {\n    font-size: max(16px, 1em);\n  }\n}\n\n/* Sheets and lists scroll on their own, without dragging the page behind them. */\n.tcw-modal {\n  overscroll-behavior: contain;\n}\n\n/* === The bars' newer parts ===\n * Interval sections and the chart type's icon, the Trade menu's button, undo\n * and redo off while idle, the tool menus' shortcuts and stars, the status\n * bar's clock and scale switches, and the grip of the selection toolbar. */\n\n/* The interval menu: each unit under its heading, a hairline between them. */\n.tcw-tf-section + .tcw-tf-section {\n  margin-top: var(--tcw-space-2);\n  padding-top: var(--tcw-space-1);\n  border-top: 1px solid var(--tcw-divider);\n}\n\n/* The chart type: its icon alone, square. */\n.tcw-dropdown-trigger[data-role='charttype'] {\n  justify-content: center;\n  width: var(--tcw-control-h);\n  padding: 0;\n}\n\n/* Undo and redo with nothing to do: there, quiet, not pressable. */\n.tcw-btn-icon:disabled {\n  opacity: 0.35;\n  cursor: default;\n  background: transparent;\n  color: var(--tcw-text-muted);\n}\n\n/* A tool menu's row: the tool, its shortcut, and a star beside it. */\n.tcw-flyout-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n}\n.tcw-flyout-row > .tcw-flyout-item {\n  flex: 1;\n  min-width: 0;\n}\n.tcw-flyout-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tcw-flyout-key {\n  flex: none;\n  margin-inline-start: var(--tcw-space-5);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  color: var(--tcw-text-muted);\n}\n.tcw-flyout-pin {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n/* Shown on the row in hand; always for a pinned tool, filled in ink blue; always on a touch screen. */\n.tcw-flyout-row:hover .tcw-flyout-pin,\n.tcw-flyout-row:focus-within .tcw-flyout-pin,\n.tcw-flyout-pin[aria-pressed='true'],\n.tcw-root[data-tcw-narrow] .tcw-flyout-pin {\n  opacity: 1;\n}\n@media (hover: none) {\n  .tcw-flyout-pin {\n    opacity: 1;\n  }\n}\n.tcw-flyout-pin:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n.tcw-flyout-pin[aria-pressed='true'] {\n  color: var(--tcw-accent);\n}\n.tcw-flyout-pin[aria-pressed='true'] svg path {\n  fill: currentColor;\n}\n\n/* The clock: the time in figures, the zone beside it; it opens the zones. */\n.tcw-status-clock,\n.tcw-status-scale-btn {\n  height: var(--tcw-control-h-sm);\n  padding: 0 var(--tcw-space-3);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  cursor: pointer;\n  transition: color var(--tcw-dur-fast) var(--tcw-ease), background var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-status-clock {\n  font-family: var(--tcw-font-mono);\n}\n.tcw-status-clock:hover,\n.tcw-status-scale-btn:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n.tcw-status-clock:focus-visible,\n.tcw-status-scale-btn:focus-visible {\n  outline: 2px solid var(--tcw-accent);\n  outline-offset: -2px;\n}\n\n/* The scale switches: %, log, auto, in ink blue while on. */\n.tcw-status-scale {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n  padding-inline-start: var(--tcw-space-3);\n  border-inline-start: var(--tcw-sep-w) solid var(--tcw-border);\n}\n.tcw-status-scale-btn[aria-pressed='true'] {\n  color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n/* A narrow widget keeps the range presets and the clock: the scale switches (also in the\n   settings and the scale's menu) give them the room, and the connection's word is left to\n   screen readers beside its dot. */\n.tcw-root[data-tcw-narrow] .tcw-status-scale {\n  display: none;\n}\n.tcw-root[data-tcw-narrow] .tcw-status-indicator > span:not(.tcw-status-dot) {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* The selection toolbar's grip: dots to take it by. */\n.tcw-sel-grip {\n  flex: none;\n  width: var(--tcw-space-4);\n  height: var(--tcw-control-h-sm);\n  margin-inline: var(--tcw-space-1) var(--tcw-space-2);\n  background-image: radial-gradient(circle, var(--tcw-text-muted) 1px, transparent 1.4px);\n  background-size: 4px 4px;\n  background-position: center;\n  opacity: 0.7;\n  cursor: grab;\n  touch-action: none;\n}\n.tcw-sel-grip:active {\n  cursor: grabbing;\n}\n\n/* --- A narrow widget (a phone, or a narrow column): data-tcw-narrow ---\n   Set from the widget's own width, below 641px. The toolbar keeps the\n   chart's own controls (symbol, interval, type, indicators) and puts the\n   rest under \"more\"; the drawing tools wait behind a button over the chart;\n   a grid shows one chart at a time, picked by its tab. */\n\n.tcw-toolbar-more,\n.tcw-sidebar-fab,\n.tcw-tf-current,\n.tcw-grid-tabs {\n  display: none;\n}\n\n/* The toolbar fits itself too (on a tablet, a window half a screen wide):\n   the right-hand buttons that don't fit fold under \"more\" (`--collapsed`\n   shows it), and `--icons` drops the menus' labels and the interval buttons.\n   Narrow folds them all. */\n.tcw-toolbar [data-tcw-folded],\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-toolbar-overflow {\n  display: none;\n}\n.tcw-toolbar--collapsed > .tcw-toolbar-more,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar > .tcw-toolbar-more {\n  display: inline-flex;\n  margin-inline-start: auto;\n}\n.tcw-toolbar--icons.tcw-toolbar--tf-menu > .tcw-tf-group,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar.tcw-toolbar--tf-menu > .tcw-tf-group {\n  display: none;\n}\n.tcw-toolbar--icons .tcw-tf-more,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-tf-more {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 0 10px;\n}\n.tcw-toolbar--icons .tcw-tf-current,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-tf-current {\n  display: inline;\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-accent);\n}\n.tcw-toolbar--icons .tcw-trigger-label,\n.tcw-root[data-tcw-narrow] > .tcw-toolbar .tcw-trigger-label {\n  display: none;\n}\n\n/* The drawing tools lie over the chart when opened, from its edge. */\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: 0;\n  /* Under the toolbar (20), whose menus open over it. */\n  z-index: 18;\n  box-shadow: var(--tcw-menu-shadow);\n  transform: translateX(-100%);\n  visibility: hidden;\n  transition: transform var(--tcw-dur-normal) var(--tcw-ease-out), visibility 0s linear var(--tcw-dur-normal);\n}\n.tcw-root[data-tcw-narrow][dir='rtl'] > .tcw-body > .tcw-sidebar {\n  transform: translateX(100%);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar.tcw-sidebar-open {\n  transform: none;\n  visibility: visible;\n  transition: transform var(--tcw-dur-normal) var(--tcw-ease-out), visibility 0s;\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-flyout {\n  z-index: 19;\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset-inline-start: 10px;\n  /* Clear of the time axis. */\n  bottom: 44px;\n  z-index: 17;\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: 999px;\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text);\n  box-shadow: var(--tcw-menu-shadow);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast), color var(--tcw-dur-fast), border-color var(--tcw-dur-fast);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab.tcw-active {\n  background: var(--tcw-accent);\n  border-color: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n.tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar-fab[aria-expanded='true'] {\n  visibility: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar,\n  .tcw-root[data-tcw-narrow] > .tcw-body > .tcw-sidebar.tcw-sidebar-open {\n    transition: none;\n  }\n}\n\n/* A narrow grid: one chart at a time, a tab for each. */\n.tcw-grid[data-tcw-narrow] > .tcw-grid-bar > .tcw-grid-tabs {\n  display: flex;\n}\n.tcw-grid-tab {\n  white-space: nowrap;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells {\n  display: flex;\n  flex-direction: column;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells > .tcw-grid-cell {\n  flex: 1;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells > .tcw-grid-cell:not(.tcw-grid-cell-current) {\n  display: none;\n}\n.tcw-grid-has-tabs[data-tcw-narrow] > .tcw-grid-cells > .tcw-grid-cell-active::after {\n  display: none;\n}\n\n/* Phones: menus open as sheets from the bottom, in reach of a thumb and\n   never off screen (a menu's own place may be off the side of a phone). */\n@media (max-width: 640px) {\n  .tcw-dropdown,\n  .tcw-context-menu {\n    position: fixed !important;\n    /* Above the on-screen keyboard (the indicators' search). */\n    inset: auto 0 var(--tcw-keyboard-inset, 0px) 0 !important;\n    margin: 0 !important;\n    width: auto;\n    max-width: none;\n    max-height: 70vh !important;\n    max-height: 70dvh !important;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    z-index: 80;\n    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));\n    border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n    border-bottom: none;\n  }\n  .tcw-dropdown-item,\n  .tcw-context-item {\n    min-height: 44px;\n  }\n}\n", It = "/* === Base controls: fields, selects, checks, sliders, calendar, scrollbars ===\n *\n * One look for every form control in the widget, from tokens. Fields are\n * quiet until used: a faint fill and hairline, a firmer line on hover, and\n * on focus the line turns accent (no ring). Selects and date fields open\n * the widget's own list and calendar (formControls.ts).\n */\n\n.tcw-root {\n  color-scheme: dark;\n\n  --tcw-field-bg: rgba(230, 227, 220, 0.04);\n  --tcw-field-bg-hover: rgba(230, 227, 220, 0.06);\n  --tcw-field-bg-focus: rgba(230, 227, 220, 0.03);\n  --tcw-field-line: rgba(230, 227, 220, 0.12);\n  --tcw-field-line-hover: rgba(230, 227, 220, 0.22);\n  --tcw-field-line-focus: var(--tcw-accent-line);\n  --tcw-field-placeholder: var(--tcw-text-muted);\n  --tcw-check-line: rgba(230, 227, 220, 0.3);\n  --tcw-scroll-thumb: rgba(230, 227, 220, 0.14);\n  --tcw-scroll-thumb-hover: rgba(230, 227, 220, 0.26);\n  /* Glyphs drawn in a field's background (a background image takes no currentColor). */\n  --tcw-field-chevron: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.75l3 3 3-3' fill='none' stroke='%238c8a85' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  --tcw-field-calendar: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%238c8a85' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='2'/%3E%3Cpath d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/%3E%3C/g%3E%3C/svg%3E\");\n  --tcw-check-mark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.25l2.6 2.6L12 5.5' fill='none' stroke='%23131416' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n}\n\n.tcw-root[data-tcw-theme='light'] {\n  color-scheme: light;\n\n  /* Fields are white boxes on the paper, ruled in ink, as on a printed form. */\n  --tcw-field-bg: #ffffff;\n  --tcw-field-bg-hover: #ffffff;\n  --tcw-field-bg-focus: #ffffff;\n  --tcw-field-line: rgba(27, 29, 33, 0.16);\n  --tcw-field-line-hover: rgba(27, 29, 33, 0.3);\n  --tcw-check-line: rgba(27, 29, 33, 0.34);\n  --tcw-scroll-thumb: rgba(27, 29, 33, 0.16);\n  --tcw-scroll-thumb-hover: rgba(27, 29, 33, 0.3);\n  --tcw-field-chevron: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.75l3 3 3-3' fill='none' stroke='%236c7077' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  --tcw-field-calendar: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%236c7077' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='2'/%3E%3Cpath d='M2.5 6.5h11M5.5 2v3M10.5 2v3'/%3E%3C/g%3E%3C/svg%3E\");\n  --tcw-check-mark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.25l2.6 2.6L12 5.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n}\n\n/* --- Text, number, date and time fields, and selects --- */\n\n/* Fields speak the widget's type, not the browser's (a part's own font still wins). */\n:where(.tcw-root) :where(input, select, textarea, button) {\n  font-family: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-settings-select,\n  .tcw-settings-number,\n  .tcw-goto-input,\n  .tcw-watchlist-input,\n  .tcw-indi-input,\n  .tcw-style-name,\n  .tcw-drawing-text,\n  .tcw-replay-speed,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-alerts-form select\n) {\n  border: 1px solid var(--tcw-field-line);\n  border-radius: var(--tcw-input-radius);\n  background-color: var(--tcw-field-bg);\n  color: var(--tcw-text);\n  outline: none;\n  box-shadow: none;\n  transition:\n    border-color var(--tcw-dur-fast) var(--tcw-ease),\n    background-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-settings-select,\n  .tcw-settings-number,\n  .tcw-goto-input,\n  .tcw-watchlist-input,\n  .tcw-indi-input,\n  .tcw-style-name,\n  .tcw-drawing-text,\n  .tcw-replay-speed,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-alerts-form select\n):hover:not(:disabled, :focus) {\n  border-color: var(--tcw-field-line-hover);\n  background-color: var(--tcw-field-bg-hover);\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-settings-select,\n  .tcw-settings-number,\n  .tcw-goto-input,\n  .tcw-watchlist-input,\n  .tcw-indi-input,\n  .tcw-style-name,\n  .tcw-drawing-text,\n  .tcw-replay-speed,\n  .tcw-alerts-form input:not([type='checkbox']),\n  .tcw-alerts-form select\n):is(:focus, :focus-visible, [aria-expanded='true']) {\n  border-color: var(--tcw-field-line-focus);\n  background-color: var(--tcw-field-bg-focus);\n  outline: none;\n  box-shadow: none;\n}\n\n.tcw-root :is(\n  .tcw-tf-custom-input,\n  .tcw-indi-input,\n  .tcw-watchlist-input,\n  .tcw-goto-input,\n  .tcw-alerts-form input\n):is([aria-invalid='true'], [aria-invalid='']):is(*, :hover, :focus) {\n  /* As specific as the hover rule and later, so a wrong value stays red under the pointer and in focus. */\n  border-color: var(--tcw-red);\n  box-shadow: none;\n}\n\n.tcw-root :is(input, textarea)::placeholder {\n  color: var(--tcw-field-placeholder);\n  opacity: 1;\n}\n\n.tcw-root :is(input, select, textarea):disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Selects: the browser's arrow gives way to a fine chevron. */\n.tcw-root select:not([multiple]):not([size]) {\n  appearance: none;\n  -webkit-appearance: none;\n  background-image: var(--tcw-field-chevron);\n  background-repeat: no-repeat;\n  background-size: 12px 12px;\n  background-position: right 8px center;\n  padding-inline-end: 26px;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n\n.tcw-root[dir='rtl'] select:not([multiple]):not([size]),\n.tcw-root [dir='rtl'] select:not([multiple]):not([size]) {\n  background-position: left 8px center;\n}\n\n/* Number fields: the steppers show only on a field in use. */\n.tcw-root input[type='number']::-webkit-inner-spin-button,\n.tcw-root input[type='number']::-webkit-outer-spin-button {\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root input[type='number']:is(:hover, :focus)::-webkit-inner-spin-button {\n  opacity: 0.55;\n}\n\n/* Date and time: the widget's calendar icon where the browser's own can be hidden. */\n@supports selector(::-webkit-calendar-picker-indicator) {\n  .tcw-root input[type='date'] {\n    background-image: var(--tcw-field-calendar);\n    background-repeat: no-repeat;\n    background-size: 15px 15px;\n    background-position: right 8px center;\n    padding-inline-end: 30px;\n    cursor: text;\n  }\n\n  .tcw-root[dir='rtl'] input[type='date'],\n  .tcw-root [dir='rtl'] input[type='date'] {\n    background-position: left 8px center;\n  }\n}\n\n.tcw-root input:is([type='date'], [type='time'])::-webkit-calendar-picker-indicator {\n  display: none;\n}\n\n.tcw-root input:is([type='date'], [type='time'])::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n\n/* --- Checkboxes and radios --- */\n\n.tcw-root input:is([type='checkbox'], [type='radio']) {\n  appearance: none;\n  -webkit-appearance: none;\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  border: 1.5px solid var(--tcw-check-line);\n  border-radius: var(--tcw-radius-sm);\n  background: transparent center / 14px 14px no-repeat;\n  cursor: pointer;\n  vertical-align: middle;\n  transition:\n    border-color var(--tcw-dur-fast) var(--tcw-ease),\n    background-color var(--tcw-dur-fast) var(--tcw-ease),\n    box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root input[type='radio'] {\n  border-radius: 50%;\n}\n\n.tcw-root input:is([type='checkbox'], [type='radio']):hover:not(:disabled) {\n  border-color: var(--tcw-text-dim);\n}\n\n.tcw-root input[type='checkbox']:checked {\n  border-color: var(--tcw-accent);\n  background-color: var(--tcw-accent);\n  background-image: var(--tcw-check-mark);\n}\n\n.tcw-root input[type='radio']:checked {\n  border-color: var(--tcw-accent);\n  background-image: radial-gradient(circle, var(--tcw-accent) 0 3.5px, transparent 4px);\n}\n\n.tcw-root input:is([type='checkbox'], [type='radio']):focus {\n  outline: none;\n}\n\n.tcw-root input:is([type='checkbox'], [type='radio']):focus-visible {\n  box-shadow: 0 0 0 3px var(--tcw-accent-soft);\n}\n\n/* --- Sliders --- */\n\n.tcw-root input[type='range'] {\n  appearance: none;\n  -webkit-appearance: none;\n  height: 4px;\n  border-radius: 999px;\n  background: var(--tcw-field-line-hover);\n  outline: none;\n  cursor: pointer;\n}\n\n.tcw-root input[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);\n  transition: transform var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-root input[type='range']::-moz-range-thumb {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: var(--tcw-accent);\n  border: 2px solid var(--tcw-bg-elevated);\n}\n\n.tcw-root input[type='range']:hover::-webkit-slider-thumb {\n  transform: scale(1.12);\n}\n\n.tcw-root input[type='range']:focus-visible::-webkit-slider-thumb {\n  box-shadow: 0 0 0 4px var(--tcw-accent-soft);\n}\n\n/* --- The select list --- */\n\n.tcw-select-menu {\n  z-index: 120;\n  padding: var(--tcw-menu-pad);\n  max-width: min(360px, calc(100vw - 16px));\n  font-size: var(--tcw-font-size);\n}\n\n.tcw-select-group {\n  padding: var(--tcw-space-4) var(--tcw-space-4) var(--tcw-space-2);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-muted);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-select-option {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  min-height: var(--tcw-menu-item-h);\n  padding-block: 0;\n  padding-inline: var(--tcw-space-3) var(--tcw-space-5);\n  border-radius: var(--tcw-menu-item-radius);\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.tcw-select-option-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tcw-select-check {\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n}\n\n.tcw-select-option.tcw-active {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-select-option[aria-selected='true'] {\n  color: var(--tcw-text);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-select-option[aria-selected='true'] .tcw-select-check {\n  background: var(--tcw-accent);\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.25l3 3L12.5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n  mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.25l3 3L12.5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") center / contain no-repeat;\n}\n\n.tcw-select-option[aria-disabled='true'] {\n  opacity: 0.4;\n  cursor: default;\n  background: none;\n}\n\n/* --- The calendar --- */\n\n.tcw-calendar {\n  z-index: 120;\n  width: 268px;\n  padding: 10px;\n  background: var(--tcw-bg-elevated);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-menu-radius);\n  box-shadow: var(--tcw-menu-shadow);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  backdrop-filter: blur(var(--tcw-blur));\n  -webkit-backdrop-filter: blur(var(--tcw-blur));\n  animation: tcw-pop-in var(--tcw-dur-normal) var(--tcw-ease-out);\n}\n\n.tcw-calendar-head {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-bottom: 8px;\n}\n\n.tcw-calendar-title {\n  flex: 1;\n  text-align: center;\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  letter-spacing: -0.01em;\n}\n\n.tcw-calendar-nav {\n  display: inline-grid;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-calendar-nav svg {\n  width: 16px;\n  height: 16px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.6;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.tcw-calendar[dir='rtl'] .tcw-calendar-nav svg,\n[dir='rtl'] .tcw-calendar-nav svg {\n  transform: scaleX(-1);\n}\n\n.tcw-calendar-nav:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-calendar-weekdays,\n.tcw-calendar-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n}\n\n.tcw-calendar-weekdays {\n  margin-bottom: 4px;\n  padding: 3px 0;\n  border-radius: var(--tcw-radius-sm);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-calendar-weekday {\n  text-align: center;\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  color: var(--tcw-text-muted);\n  line-height: 20px;\n}\n\n.tcw-calendar-grid {\n  row-gap: 2px;\n}\n\n.tcw-calendar-week {\n  display: contents;\n}\n\n.tcw-calendar-day {\n  position: relative;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-calendar-day:hover:not(:disabled) {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-calendar-day.tcw-outside {\n  color: var(--tcw-text-muted);\n  opacity: 0.55;\n}\n\n/* Today: accent figures over a short line. */\n.tcw-calendar-day.tcw-today {\n  color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-calendar-day.tcw-today::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  bottom: 5px;\n  width: 12px;\n  height: 2px;\n  margin-left: -6px;\n  border-radius: 1px;\n  background: currentColor;\n}\n\n.tcw-calendar-day[aria-selected='true'] {\n  background: var(--tcw-accent);\n  color: var(--tcw-accent-ink);\n  font-weight: var(--tcw-weight-strong);\n  opacity: 1;\n}\n\n.tcw-calendar-day:disabled {\n  opacity: 0.28;\n  cursor: not-allowed;\n}\n\n.tcw-calendar-day:focus {\n  outline: none;\n}\n\n.tcw-calendar-day:focus-visible {\n  box-shadow: inset 0 0 0 1.5px var(--tcw-accent);\n}\n\n.tcw-calendar-foot {\n  display: flex;\n  justify-content: flex-end;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-calendar-today {\n  height: 26px;\n  padding: 0 10px;\n  border: none;\n  border-radius: var(--tcw-radius-sm);\n  background: transparent;\n  color: var(--tcw-accent);\n  font: inherit;\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n}\n\n.tcw-calendar-today:hover {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-calendar-today:focus-visible,\n.tcw-calendar-nav:focus-visible {\n  outline: none;\n  box-shadow: inset 0 0 0 1.5px var(--tcw-accent);\n}\n\n/* --- Scrollbars: thin and rounded, a thumb on no track. Low specificity:\n   a part that hides its bar keeps it hidden. --- */\n\n:where(.tcw-root) ::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n\n:where(.tcw-root) ::-webkit-scrollbar-track,\n:where(.tcw-root) ::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n:where(.tcw-root) ::-webkit-scrollbar-thumb {\n  background: var(--tcw-scroll-thumb);\n  background-clip: padding-box;\n  border: 3px solid transparent;\n  border-radius: 999px;\n}\n\n:where(.tcw-root) ::-webkit-scrollbar-thumb:hover {\n  background: var(--tcw-scroll-thumb-hover);\n  background-clip: padding-box;\n  border: 2.5px solid transparent;\n}\n\n/* Engines without the pseudo-elements take the standard properties. */\n@supports not selector(::-webkit-scrollbar) {\n  :where(.tcw-root, .tcw-root *) {\n    scrollbar-width: thin;\n    scrollbar-color: var(--tcw-scroll-thumb) transparent;\n  }\n}\n\n/* --- Switches: flat, no glow --- */\n\n.tcw-root .tcw-toggle.tcw-on {\n  box-shadow: none;\n}\n\n.tcw-root .tcw-toggle::after {\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\n}\n\n.tcw-root .tcw-toggle:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px var(--tcw-accent-soft);\n}\n\n/* One choice of a few in a row (a radio group): the chosen one as the look shows a chosen button. */\n.tcw-segmented {\n  display: inline-flex;\n  flex-wrap: wrap;\n  max-width: 100%;\n  gap: 2px;\n  padding: 2px;\n  border-radius: calc(var(--tcw-control-radius) + 2px);\n  background: var(--tcw-hover-bg);\n}\n.tcw-segment {\n  height: calc(var(--tcw-control-h) - 4px);\n  padding-inline: var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-segment:hover { color: var(--tcw-text); }\n.tcw-segment[aria-checked='true'] {\n  background: var(--tcw-on-bg);\n  color: var(--tcw-on-fg);\n  font-weight: var(--tcw-weight-strong);\n  box-shadow: var(--tcw-on-ring);\n}\n.tcw-segment:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A number between a − and a +: one field, the figure right-aligned in the chart's mono type. */\n.tcw-stepper {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: stretch;\n  height: var(--tcw-control-h);\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-bg);\n  overflow: hidden;\n}\n.tcw-stepper:focus-within { box-shadow: var(--tcw-ring); }\n.tcw-stepper .tcw-indi-input {\n  width: 110px;\n  height: auto;\n  padding-inline: var(--tcw-space-3);\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n.tcw-stepper .tcw-indi-input::-webkit-inner-spin-button,\n.tcw-stepper .tcw-indi-input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }\n.tcw-stepper .tcw-indi-input:focus { outline: none; box-shadow: none; }\n.tcw-stepper-btn {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--tcw-control-h);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text-dim);\n  cursor: pointer;\n}\n.tcw-stepper-btn:hover { background: var(--tcw-hover-bg); color: var(--tcw-text); }\n.tcw-stepper-btn:focus-visible { outline: none; background: var(--tcw-hover-bg); color: var(--tcw-text); }\n\n/* Forced colours drop the box-shadow rings: an outline marks focus and the chosen choice. */\n@media (forced-colors: active) {\n  .tcw-segment[aria-checked='true'] { outline: 2px solid Highlight; }\n  .tcw-segment:focus-visible,\n  .tcw-stepper-btn:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }\n  .tcw-stepper:focus-within { outline: 2px solid Highlight; }\n}\n", Lt = "/* === The indicators dialog === */\n\n/* 610 wide, a Fibonacci number: the groups take 233 and the list 377 beside them (377 : 233 = phi).\n   A fixed height, so the dialog keeps still while a search shortens the list. */\n.tcw-modal.tcw-ip {\n  width: 610px;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n.tcw-ip-search,\n.tcw-ss-search {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: none;\n  height: var(--tcw-control-h);\n  margin: var(--tcw-space-4) var(--tcw-space-6);\n  padding: 0 var(--tcw-space-4);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-input-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text-muted);\n  transition: border-color var(--tcw-dur-fast) var(--tcw-ease), box-shadow var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ip-search:focus-within,\n.tcw-ss-search:focus-within {\n  border-color: var(--tcw-accent);\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-ip-search svg,\n.tcw-ss-search svg {\n  flex: none;\n}\n\n.tcw-ip-search input,\n.tcw-ss-search input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n}\n\n.tcw-ip-search input::placeholder,\n.tcw-ss-search input::placeholder {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-ip-body {\n  display: grid;\n  grid-template-columns: 233px minmax(0, 1fr);\n  flex: 1;\n  min-height: 0;\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-ip-nav,\n.tcw-set-nav {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: var(--tcw-space-4) var(--tcw-space-3);\n  /* Logical sides: in Arabic, Hebrew or Persian the tabs sit on the right. */\n  border-inline-end: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  overflow-y: auto;\n  border-end-start-radius: var(--tcw-dialog-radius);\n}\n\n.tcw-ip-tab,\n.tcw-set-tab {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: none;\n  height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  text-align: start;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ip-tab svg,\n.tcw-set-tab svg {\n  flex: none;\n}\n\n/* The kinds start below a gap: favourites and templates are yours, the rest the library's. */\n.tcw-ip-tab[data-view='all'] {\n  margin-top: var(--tcw-space-4);\n}\n\n.tcw-ip-tab:hover,\n.tcw-set-tab:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-ip-tab.tcw-active,\n.tcw-set-tab.tcw-active {\n  background: var(--tcw-on-bg);\n  color: var(--tcw-on-fg);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-ip-nav--searching .tcw-ip-tab.tcw-active {\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font-weight: var(--tcw-weight);\n}\n\n.tcw-ip-list {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 0 var(--tcw-space-4) var(--tcw-space-5);\n}\n\n/* Each kind's name stays at the top while its indicators scroll under it. */\n.tcw-ip-heading {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: var(--tcw-space-5) var(--tcw-space-4) var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-ip-list > :first-child:not(.tcw-ip-heading) {\n  margin-top: var(--tcw-space-4);\n}\n\n.tcw-ip-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-1);\n  border-radius: var(--tcw-menu-item-radius);\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ip-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ip-add {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: 1;\n  min-width: 0;\n  height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  text-align: start;\n  cursor: pointer;\n}\n\n.tcw-ip-add:focus-visible,\n.tcw-ip-aside:focus-visible,\n.tcw-ip-tab:focus-visible,\n.tcw-set-tab:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-ip-add svg {\n  flex: none;\n  color: var(--tcw-text-muted);\n}\n\n.tcw-ip-name {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ip-short {\n  flex: none;\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n}\n\n/* Where it draws, quietly at the row's end. */\n.tcw-ip-kind {\n  flex: none;\n  margin-inline-start: auto;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* How many are on the chart: ink on its wash, the figures in a column. */\n.tcw-ip-count {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  min-width: var(--tcw-space-6);\n  height: var(--tcw-space-6);\n  padding: 0 var(--tcw-space-2);\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n}\n\n.tcw-ip-aside {\n  flex: none;\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h-sm);\n  height: var(--tcw-control-h-sm);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n/* Shown on the row in hand; always for a starred one, filled in ink; always on a touch screen. */\n.tcw-ip-row:hover .tcw-ip-aside,\n.tcw-ip-row:focus-within .tcw-ip-aside,\n.tcw-ip-star[aria-pressed='true'] {\n  opacity: 1;\n}\n\n@media (hover: none) {\n  .tcw-ip-aside {\n    opacity: 1;\n  }\n}\n\n.tcw-ip-aside:hover {\n  color: var(--tcw-text);\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-ip-star[aria-pressed='true'] {\n  color: var(--tcw-accent);\n}\n\n.tcw-ip-star[aria-pressed='true'] svg path {\n  fill: currentColor;\n}\n\n.tcw-ip-remove:hover {\n  color: var(--tcw-red);\n}\n\n.tcw-ip-save {\n  flex: none;\n  width: 100%;\n  color: var(--tcw-accent);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-ip-save svg {\n  color: currentColor;\n}\n\n.tcw-ip-save:hover {\n  background: var(--tcw-accent-soft);\n}\n\n.tcw-ip-empty {\n  max-width: 34ch;\n  padding: var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.5;\n  text-wrap: pretty;\n}\n\n/* Heard by a screen reader, not seen. */\n.tcw-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* A phone: the dialog is the widget's sheet, as tall as a sheet goes, and the groups a row of chips. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-ip {\n    /* Above the on-screen keyboard: the sheet's top stays on the screen. */\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-ip-search,\n  .tcw-ss-search {\n    margin-inline: var(--tcw-space-4);\n  }\n\n  .tcw-ip-body {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n\n  .tcw-ip-nav,\n  .tcw-set-nav {\n    flex-direction: row;\n    gap: var(--tcw-space-2);\n    padding: var(--tcw-space-3) var(--tcw-space-4);\n    border-inline-end: none;\n    border-bottom: 1px solid var(--tcw-divider);\n    border-radius: 0;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scrollbar-width: none;\n  }\n\n  .tcw-ip-tab[data-view='all'] {\n    margin-top: 0;\n    margin-inline-start: var(--tcw-space-4);\n  }\n\n  .tcw-ip-tab,\n  .tcw-set-tab {\n    /* A finger's size, as the dialogs' other tabs on a phone. */\n    min-height: 40px;\n    border: var(--tcw-border-w) solid var(--tcw-border);\n  }\n\n\n  .tcw-ip-list {\n    padding-inline: var(--tcw-space-3);\n  }\n}\n\n/* === The indicator settings, and a drawing's === */\n\n/* One half step of phi under the indicators dialog: 610 / sqrt(phi) = 480. */\n@media (min-width: 641px) {\n  .tcw-modal.tcw-modal-narrow.tcw-indi,\n  .tcw-modal.tcw-modal-narrow.tcw-drawing-settings {\n    width: 480px;\n    max-width: 92vw;\n  }\n}\n\n/* A line, or a kind of interval: ticked where it shows, its name, then what sets it. */\n.tcw-indi-plot-name {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n  cursor: pointer;\n}\n\n.tcw-indi-plot-name .tcw-settings-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Unticked, its name steps back. */\n.tcw-indi-plot-name:has(input:not(:checked)) .tcw-settings-label {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-indi-plot-controls,\n.tcw-indi-range {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-3);\n  flex: none;\n}\n\n.tcw-indi-plot-controls .tcw-indi-select {\n  width: 104px;\n}\n\n.tcw-indi-range {\n  color: var(--tcw-text-muted);\n}\n\n.tcw-indi-range .tcw-indi-input {\n  width: 68px;\n  text-align: end;\n}\n\n.tcw-indi-range .tcw-indi-input:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n/* Defaults on the left; Cancel and Ok on the right, one height for all three. */\n.tcw-indi .tcw-modal-footer,\n.tcw-set .tcw-modal-footer,\n.tcw-drawing-settings .tcw-modal-footer {\n  gap: var(--tcw-space-4);\n}\n\n.tcw-footer-end {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n}\n\n.tcw-indi .tcw-modal-footer button,\n.tcw-set .tcw-modal-footer button,\n.tcw-drawing-settings .tcw-modal-footer button {\n  height: var(--tcw-menu-item-h);\n  padding-block: 0;\n}\n\n.tcw-footer-menu,\n.tcw-footer-cancel {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  padding-inline: var(--tcw-space-5);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-footer-cancel {\n  border-color: var(--tcw-border-strong);\n  color: var(--tcw-text);\n}\n\n.tcw-footer-menu:hover,\n.tcw-footer-menu[aria-expanded='true'],\n.tcw-footer-cancel:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-footer-menu:focus-visible,\n.tcw-footer-cancel:focus-visible,\n.tcw-indi .tcw-done-btn:focus-visible,\n.tcw-set .tcw-done-btn:focus-visible,\n.tcw-drawing-settings .tcw-done-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A drawing's switches: the box, then its name, a list without rules between. */\n.tcw-check-row {\n  justify-content: flex-start;\n  gap: var(--tcw-space-4);\n  padding-block: var(--tcw-space-3);\n  cursor: pointer;\n}\n\n.tcw-settings-row + .tcw-check-row,\n.tcw-check-row + .tcw-settings-row {\n  border-top: 0;\n}\n\n/* A point: its name, then its price, date and time in columns; on a phone the price over the date and time. */\n.tcw-draw-point {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);\n  gap: var(--tcw-space-4);\n}\n\n.tcw-draw-point > .tcw-settings-label {\n  white-space: nowrap;\n}\n\n.tcw-draw-point .tcw-indi-plot-controls {\n  display: contents;\n}\n\n.tcw-draw-point input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n}\n\n.tcw-draw-point input[type='number'] {\n  text-align: end;\n}\n\n@media (max-width: 640px) {\n  .tcw-draw-point {\n    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);\n  }\n\n  .tcw-draw-point > .tcw-settings-label {\n    grid-row: span 2;\n  }\n\n  .tcw-draw-point input[type='number'] {\n    grid-column: span 2;\n  }\n}\n\n.tcw-drawing-settings .tcw-indi-plot-controls input[type='number']:not(.tcw-draw-point *) {\n  width: 68px;\n  text-align: end;\n}\n\n/* The unit after a number (the fill's opacity in %). */\n.tcw-unit {\n  margin-inline-start: calc(-1 * var(--tcw-space-2));\n  color: var(--tcw-text-muted);\n}\n\n/* === The chart settings === */\n\n/* 776 x 610: half a step of phi wider than the indicators dialog (610 x sqrt(phi) = 776), as tall as it,\n   so the dialog is a sqrt(phi) rectangle. The tabs take 233 down the side, as the indicator groups do. */\n.tcw-modal.tcw-set {\n  width: 776px;\n  max-width: 94vw;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n.tcw-set-body {\n  display: grid;\n  grid-template-columns: 233px minmax(0, 1fr);\n  flex: 1;\n  min-height: 0;\n}\n\n.tcw-set-panel {\n  min-width: 0;\n}\n\n/* A phone: the widget's sheet across the screen, the tabs a row of chips over the settings. After the rules above, which it overrides. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-set {\n    width: 100vw;\n    max-width: 100vw;\n    /* Above the on-screen keyboard: the sheet's top stays on the screen. */\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-set-body {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: auto minmax(0, 1fr);\n  }\n}\n\n/* === The symbol search, and the same dialog comparing === */\n\n/* As wide and as still as the indicators dialog: 610, a fixed height while a search shortens the list. */\n.tcw-modal.tcw-ss {\n  width: 610px;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n/* Comparing: how the next symbol goes on the chart, under the search. */\n.tcw-ss-way {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  flex: none;\n  margin: 0 var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n\n.tcw-ss-way > span {\n  flex: none;\n}\n\n.tcw-root .tcw-ss-way-select {\n  flex: 1;\n  min-width: 0;\n  height: var(--tcw-control-h);\n  padding-block: 0;\n}\n\n/* The kinds the results come in: All, stock, crypto… */\n.tcw-ss-kinds {\n  display: flex;\n  flex-wrap: wrap;\n  flex: none;\n  gap: var(--tcw-space-3);\n  margin: 0 var(--tcw-space-6) var(--tcw-space-4);\n}\n\n.tcw-ss-type {\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-5);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  text-transform: capitalize;\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease), border-color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ss-type:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-ss-type[aria-pressed='true'] {\n  border-color: var(--tcw-accent);\n  background: var(--tcw-accent-soft);\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-type:focus-visible,\n.tcw-ss-remove:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* The symbol takes 144 (89 x phi), the name the rest; kind and exchange at the end. The heads line up\n   with the rows: the inset of what scrolls and the row's own. */\n.tcw-ss-columns,\n.tcw-ss-row {\n  display: grid;\n  grid-template-columns: 144px minmax(0, 1fr) auto;\n  align-items: center;\n  column-gap: var(--tcw-space-5);\n}\n\n.tcw-ss-columns {\n  flex: none;\n  padding: var(--tcw-space-3) calc(var(--tcw-space-4) * 2);\n  border-top: 1px solid var(--tcw-divider);\n  border-bottom: 1px solid var(--tcw-divider);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* What scrolls: what is compared, the symbols, a note when there are none. */\n.tcw-ss-results {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  /* A row the arrows reach scrolls in below its heading, not under it. */\n  scroll-padding-block-start: calc(var(--tcw-space-5) + var(--tcw-space-2) + var(--tcw-font-size-xs) * 1.5 - var(--tcw-space-3));\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-5);\n}\n\n.tcw-ss-row {\n  min-height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border-radius: var(--tcw-menu-item-radius);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-ss-row.tcw-selected {\n  background: var(--tcw-hover-bg);\n}\n\n/* The figures of a ticker, in the mono face, left to right in any widget, at the start of its column;\n   the chart's own in ink. */\n.tcw-ss-symbol {\n  justify-self: start;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text);\n  font-family: var(--tcw-font-mono);\n  font-weight: var(--tcw-weight-strong);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ss-row.tcw-current .tcw-ss-symbol {\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-symbol mark {\n  background: transparent;\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-desc-cell {\n  min-width: 0;\n}\n\n/* As wide as its words, at the start of the column, whichever way they run. */\n.tcw-ss-desc {\n  display: block;\n  width: fit-content;\n  max-width: 100%;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-size: var(--tcw-font-size-sm);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ss-meta {\n  display: flex;\n  align-items: baseline;\n  gap: var(--tcw-space-4);\n  justify-self: end;\n  white-space: nowrap;\n}\n\n.tcw-ss-kind {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n}\n\n.tcw-ss-exchange {\n  color: var(--tcw-text-dim);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* The chart's symbol, or one on it already: a check after the exchange. */\n.tcw-ss-row:has(.tcw-ss-check) {\n  grid-template-columns: 144px minmax(0, 1fr) auto auto;\n}\n\n.tcw-ss-check {\n  display: inline-grid;\n  place-items: center;\n  color: var(--tcw-accent);\n}\n\n.tcw-ss-heading[hidden] {\n  display: none;\n}\n\n/* \"On the chart\" and \"Symbols\", above their rows while they scroll. */\n.tcw-ss-heading {\n  position: sticky;\n  top: calc(var(--tcw-space-3) * -1);\n  z-index: 1;\n  padding: var(--tcw-space-5) var(--tcw-space-4) var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-ss-added-row {\n  display: grid;\n  grid-template-columns: 144px minmax(0, 1fr) auto;\n  align-items: center;\n  column-gap: var(--tcw-space-5);\n  min-height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border-radius: var(--tcw-menu-item-radius);\n}\n\n.tcw-ss-added-row:hover {\n  background: var(--tcw-hover-bg);\n}\n\n/* How it is compared, after the line's colour where it has one of its own. */\n.tcw-ss-way-cell {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n}\n\n.tcw-ss-swatch {\n  flex: none;\n  width: var(--tcw-space-4);\n  height: var(--tcw-space-4);\n  border-radius: var(--tcw-radius-sm);\n}\n\n.tcw-ss-way-label {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--tcw-text-dim);\n  font-size: var(--tcw-font-size-sm);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-ss-remove {\n  display: inline-grid;\n  place-items: center;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-ss-remove:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-red);\n}\n\n.tcw-ss-empty {\n  max-width: 44ch;\n  padding: var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.5;\n  text-wrap: pretty;\n}\n\n/* The way the dialog opens too: a letter typed on the chart. */\n.tcw-ss-foot {\n  flex: none;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-top: 1px solid var(--tcw-divider);\n  border-radius: 0 0 var(--tcw-dialog-radius) var(--tcw-dialog-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  text-align: center;\n}\n\n/* === Go to === */\n\n/* 377: the step of phi under the search dialogs. */\n@media (min-width: 641px) {\n  .tcw-modal.tcw-goto {\n    width: 377px;\n  }\n}\n\n.tcw-goto-form {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.tcw-goto-fields {\n  display: grid;\n  gap: var(--tcw-space-5);\n  padding: var(--tcw-space-6) var(--tcw-space-6) var(--tcw-space-4);\n}\n\n/* The date takes the room; the time 144 beside it; a range's end named above its two. */\n.tcw-goto-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 144px;\n  gap: var(--tcw-space-3) var(--tcw-space-4);\n  align-items: center;\n}\n\n.tcw-goto-label {\n  grid-column: 1 / -1;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-root .tcw-goto-input {\n  width: 100%;\n  min-width: 0;\n  height: var(--tcw-control-h);\n  box-sizing: border-box;\n  padding: 0 var(--tcw-space-4);\n  font-size: var(--tcw-font-size);\n  font-variant-numeric: tabular-nums;\n}\n\n/* No time on daily bars: the date across the row. */\n.tcw-goto-input[type='date']:last-child {\n  grid-column: 1 / -1;\n}\n\n/* The month under the fields, part of the dialog: no card of its own. */\n.tcw-calendar.tcw-goto-calendar {\n  position: static;\n  width: auto;\n  padding: var(--tcw-space-4) var(--tcw-space-6) var(--tcw-space-5);\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  animation: none;\n}\n\n.tcw-goto-calendar .tcw-calendar-day {\n  height: 34px;\n}\n\n.tcw-goto .tcw-modal-footer {\n  justify-content: flex-end;\n  gap: var(--tcw-space-4);\n}\n\n.tcw-goto .tcw-modal-footer button {\n  height: var(--tcw-menu-item-h);\n  padding-block: 0;\n}\n\n.tcw-goto .tcw-done-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A phone: both are the widget's sheet; the search as tall as a sheet goes, its symbols 89 wide. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-ss {\n    /* Above the on-screen keyboard: the sheet's top stays on the screen. */\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-ss-way,\n  .tcw-ss-kinds {\n    margin-inline: var(--tcw-space-4);\n  }\n\n  .tcw-ss-columns,\n  .tcw-ss-row,\n  .tcw-ss-added-row {\n    grid-template-columns: 89px minmax(0, 1fr) auto;\n  }\n\n  .tcw-ss-row:has(.tcw-ss-check) {\n    grid-template-columns: 89px minmax(0, 1fr) auto auto;\n  }\n\n  .tcw-ss-kind {\n    display: none;\n  }\n\n  .tcw-ss-row,\n  .tcw-ss-added-row {\n    min-height: 44px;\n  }\n}\n\n/* Without a keyboard there are no letters to type on the chart. */\n@media (hover: none) and (pointer: coarse) {\n  .tcw-ss-foot {\n    display: none;\n  }\n}\n\n/* === The shortcut sheet === */\n\n/* As wide and as still as the indicators dialog: 610, a fixed height while a search shortens the list. */\n.tcw-modal.tcw-hotkey-sheet {\n  width: 610px;\n  height: min(610px, 86vh);\n  height: min(610px, 86dvh);\n  max-height: none;\n}\n\n.tcw-hotkey-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 0 var(--tcw-space-6) var(--tcw-space-5);\n  border-top: 1px solid var(--tcw-divider);\n  columns: 2;\n  column-gap: var(--tcw-space-7);\n}\n\n/* A group keeps together in its column, its name above its rows. */\n.tcw-hotkey-group {\n  break-inside: avoid;\n  padding-top: var(--tcw-space-5);\n}\n\n.tcw-hotkey-heading {\n  padding-bottom: var(--tcw-space-3);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n/* What it does on the left, its keys on the right, the keys in a column of their own. */\n.tcw-hotkey-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--tcw-space-4);\n  min-height: calc(var(--tcw-space-6) + var(--tcw-space-3));\n  padding: var(--tcw-space-2) 0;\n}\n\n.tcw-hotkey-label {\n  min-width: 0;\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  line-height: 1.4;\n}\n\n.tcw-hotkey-keys {\n  display: inline-flex;\n  align-items: baseline;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--tcw-space-2);\n  flex: none;\n  max-width: 55%;\n}\n\n/* A key: its name in the mono face on a key's face. */\n.tcw-hotkey-key,\n.tcw-cp-key {\n  display: inline-block;\n  min-width: calc(var(--tcw-space-6) - var(--tcw-space-2));\n  padding: 0 var(--tcw-space-3);\n  border: var(--tcw-border-w) solid var(--tcw-border);\n  border-bottom-width: 2px;\n  border-radius: var(--tcw-tag-radius);\n  background: var(--tcw-bg);\n  color: var(--tcw-text-dim);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  line-height: 1.6;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* A gesture is not a key: its words, quieter. */\n.tcw-hotkey-gesture {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  white-space: nowrap;\n}\n\n.tcw-hotkey-sep {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n}\n\n.tcw-hotkey-empty {\n  padding: var(--tcw-space-6) 0;\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n\n/* How to open it again, at its foot. */\n.tcw-hotkey-foot {\n  flex: none;\n  padding: var(--tcw-space-5) var(--tcw-space-6);\n  border-top: 1px solid var(--tcw-divider);\n  border-radius: 0 0 var(--tcw-dialog-radius) var(--tcw-dialog-radius);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n}\n\n/* === The command palette === */\n\n/* 610 wide, a third of the way down: a launcher, not a form; its search is the dialogs' search row. */\n.tcw-modal.tcw-cp {\n  top: 19.1%;\n  transform: translate(-50%, 0);\n  width: 610px;\n  max-height: min(610px, 76.4vh);\n  max-height: min(610px, 76.4dvh);\n  animation: none;\n}\n\n.tcw-cp .tcw-cp-search {\n  margin-top: var(--tcw-space-5);\n}\n\n.tcw-cp-results {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  /* A row the arrows reach scrolls in below its group's heading, not under it. */\n  scroll-padding-block-start: calc(var(--tcw-space-5) + var(--tcw-space-2) + var(--tcw-font-size-xs) * 1.5);\n  padding: 0 var(--tcw-space-4) var(--tcw-space-4);\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-cp-heading {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: var(--tcw-space-5) var(--tcw-space-4) var(--tcw-space-2);\n  background: var(--tcw-bg-elevated);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n\n.tcw-cp-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-4);\n  min-height: var(--tcw-menu-item-h);\n  padding: 0 var(--tcw-space-4);\n  border-radius: var(--tcw-menu-item-radius);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size);\n  cursor: pointer;\n}\n\n.tcw-cp-row.tcw-selected {\n  background: var(--tcw-hover-bg);\n}\n\n.tcw-cp-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* What is on now: its name in ink, a check at the end. */\n.tcw-cp-row.tcw-on .tcw-cp-label {\n  color: var(--tcw-accent);\n}\n\n.tcw-cp-check {\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  color: var(--tcw-accent);\n}\n\n.tcw-cp-empty {\n  padding: var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n\n/* === Layouts === */\n\n/* 480, as the settings of an indicator: a list of names and when they were saved. On a phone, the sheet's width. */\n.tcw-modal.tcw-layouts-dialog {\n  max-height: min(610px, 86vh);\n  max-height: min(610px, 86dvh);\n}\n@media (min-width: 641px) {\n  .tcw-modal.tcw-layouts-dialog { width: 480px; }\n}\n\n.tcw-layouts-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--tcw-space-3) var(--tcw-space-4) var(--tcw-space-5);\n  border-top: 1px solid var(--tcw-divider);\n}\n\n.tcw-layouts-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--tcw-space-1);\n}\n\n.tcw-layouts-row {\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  padding-inline-end: var(--tcw-space-3);\n  border-radius: var(--tcw-menu-item-radius);\n}\n\n.tcw-layouts-row:hover,\n.tcw-layouts-row:focus-within {\n  background: var(--tcw-hover-bg);\n}\n\n/* A column for the check of the one open, so every name starts at the same place. */\n.tcw-layouts-open {\n  display: grid;\n  grid-template-columns: var(--tcw-space-5) minmax(0, 1fr);\n  column-gap: var(--tcw-space-3);\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  padding: var(--tcw-space-3) var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-menu-item-radius);\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  text-align: start;\n  cursor: pointer;\n}\n\n.tcw-layouts-open:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n.tcw-layouts-name,\n.tcw-layouts-meta {\n  grid-column: 2;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-layouts-name {\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-layouts-meta {\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n}\n\n.tcw-layouts-check {\n  display: inline-grid;\n  place-items: center;\n  grid-column: 1;\n  grid-row: 1 / span 2;\n  color: var(--tcw-accent);\n}\n\n.tcw-layouts-open[aria-current='true'] .tcw-layouts-name {\n  color: var(--tcw-accent);\n}\n\n/* Rename and delete show on the row in hand; always on a touch screen. */\n.tcw-layouts-row .tcw-account-actions {\n  display: flex;\n  gap: var(--tcw-space-1);\n  opacity: 0;\n  transition: opacity var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-layouts-row:is(:hover, :focus-within) .tcw-account-actions,\n.tcw-layouts-row .tcw-account-actions:has(.tcw-layouts-confirm) {\n  opacity: 1;\n}\n\n@media (hover: none) {\n  .tcw-layouts-row .tcw-account-actions {\n    opacity: 1;\n  }\n}\n\n.tcw-layouts-confirm {\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-4);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-red);\n  /* White on the red in every theme. */\n  color: #fff;\n  font: inherit;\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n}\n\n.tcw-layouts-confirm:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* A phone: the sheets as tall as they go, the shortcuts in one column. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-hotkey-sheet {\n    height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-hotkey-body {\n    columns: 1;\n    padding-inline: var(--tcw-space-4);\n  }\n\n  /* Their own heights outrank the sheet's: give them back its height, less the keyboard, and the palette its slide up. */\n  .tcw-modal.tcw-cp,\n  .tcw-modal.tcw-layouts-dialog {\n    max-height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    max-height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n\n  .tcw-modal.tcw-cp {\n    top: auto;\n    transform: none;\n    animation: tcw-modal-in var(--tcw-dur-slow) var(--tcw-ease-out);\n  }\n\n  .tcw-cp .tcw-cp-search {\n    margin-top: var(--tcw-space-3);\n  }\n\n  :is(.tcw-hotkey-search, .tcw-cp-search, .tcw-layouts-search-row) {\n    margin-inline: var(--tcw-space-4);\n  }\n\n  .tcw-cp-row {\n    min-height: 44px;\n  }\n}\n\n/* === The order ticket === */\n\n/* 480, as a drawing's settings: the side, the order, its stop and target, then the receipt. On a phone, the sheet's width. */\n.tcw-modal.tcw-order-ticket {\n  max-height: min(610px, 92vh);\n  max-height: min(610px, 92dvh);\n}\n@media (min-width: 641px) {\n  .tcw-modal.tcw-order-ticket { width: 480px; }\n}\n.tcw-order-ticket[data-side='buy'] { --tcw-side: var(--tcw-green); }\n.tcw-order-ticket[data-side='sell'] { --tcw-side: var(--tcw-red); }\n\n.tcw-ticket-heading {\n  display: flex;\n  align-items: baseline;\n  gap: var(--tcw-space-4);\n  min-width: 0;\n}\n.tcw-ticket-symbol {\n  overflow: hidden;\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.tcw-ticket-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n/* Buy and Sell: the chosen one filled with its colour, the ground's own colour on it. */\n.tcw-ticket-side {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--tcw-space-3);\n  margin-bottom: var(--tcw-space-4);\n}\n.tcw-ticket-side-btn {\n  height: 34px;\n  border: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-dim);\n  font: inherit;\n  font-size: var(--tcw-font-size-lg);\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n.tcw-ticket-side-btn:hover { color: var(--tcw-text); }\n.tcw-ticket-buy[aria-pressed='true'] { border-color: var(--tcw-green); background: var(--tcw-green); color: var(--tcw-bg); }\n.tcw-ticket-sell[aria-pressed='true'] { border-color: var(--tcw-red); background: var(--tcw-red); color: var(--tcw-bg); }\n.tcw-ticket-side-btn:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* A row's control goes under its name when they don't fit side by side (a long choice at 320 px). */\n.tcw-ticket-row {\n  flex-wrap: wrap;\n  gap: var(--tcw-space-3) var(--tcw-space-5);\n}\n.tcw-ticket-market {\n  color: var(--tcw-text-dim);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n/* A stop or a target: its switch, its name with how far it is under it, then its price. */\n.tcw-ticket-optional {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: center;\n  gap: var(--tcw-space-4);\n}\n.tcw-ticket-optional-name {\n  display: flex;\n  flex-direction: column;\n  gap: var(--tcw-space-1);\n  min-width: 0;\n}\n.tcw-ticket-away {\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n  /* Left to right inside, but at the name's start in either direction (the column's, not its own). */\n  align-self: flex-start;\n}\n\n/* The receipt: under a torn-paper rule, each sum a label and a figure in the mono type. */\n.tcw-ticket-summary:not(:empty) {\n  display: grid;\n  gap: var(--tcw-space-2);\n  margin: 0 var(--tcw-space-6) var(--tcw-space-4);\n  padding-top: var(--tcw-space-4);\n  border-top: var(--tcw-border-w) dashed var(--tcw-border-strong);\n}\n.tcw-ticket-summary-row {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--tcw-space-5);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-ticket-figure {\n  color: var(--tcw-text);\n  font-family: var(--tcw-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-ticket-figure.tcw-ticket-up { color: var(--tcw-green); }\n.tcw-ticket-figure.tcw-ticket-down { color: var(--tcw-red); }\n\n.tcw-ticket-problems {\n  padding: 0 var(--tcw-space-6) var(--tcw-space-4);\n  color: var(--tcw-red);\n  font-size: var(--tcw-font-size-sm);\n}\n.tcw-ticket-problems p { margin: var(--tcw-space-1) 0; }\n\n/* Cancel and Place alone, at the end, as tall as each other. */\n.tcw-order-ticket .tcw-modal-footer { justify-content: flex-end; }\n.tcw-order-ticket .tcw-modal-footer button { height: var(--tcw-menu-item-h); padding-block: 0; }\n.tcw-ticket-place {\n  height: var(--tcw-menu-item-h);\n  padding-inline: var(--tcw-space-6);\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: var(--tcw-side, var(--tcw-accent));\n  color: var(--tcw-bg);\n  font: inherit;\n  font-size: var(--tcw-font-size);\n  font-weight: var(--tcw-weight-strong);\n  cursor: pointer;\n}\n.tcw-ticket-place:hover:not(:disabled) { background: color-mix(in srgb, var(--tcw-side, var(--tcw-accent)) 86%, var(--tcw-text)); }\n.tcw-ticket-place:disabled { opacity: 0.45; cursor: not-allowed; }\n.tcw-ticket-place:focus-visible { outline: none; box-shadow: var(--tcw-ring); }\n\n/* A phone: the ticket is a sheet above the keyboard, its controls a finger's size. */\n@media (max-width: 640px) {\n  .tcw-modal.tcw-order-ticket {\n    max-height: calc(92vh - var(--tcw-keyboard-inset, 0px));\n    max-height: calc(92dvh - var(--tcw-keyboard-inset, 0px));\n  }\n  .tcw-stepper .tcw-indi-input { width: 96px; }\n  .tcw-stepper-btn, .tcw-segment { min-width: 34px; }\n  .tcw-segment { height: 34px; }\n  .tcw-stepper { height: 38px; }\n}\n\n/* Forced colours drop the box-shadow rings: an outline marks focus and the chosen side. */\n@media (forced-colors: active) {\n  .tcw-ticket-side-btn[aria-pressed='true'] { outline: 2px solid Highlight; }\n  .tcw-ticket-place { border: 1px solid ButtonText; }\n  .tcw-ticket-side-btn:focus-visible,\n  .tcw-ticket-place:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }\n}\n", Rt = "/* === The dock: the panels by the chart, and their rail === */\n\n/* In the body's row after the chart: the panel of the page open beside the chart, the rail at the outer edge\n   (both mirror in a right-to-left widget). */\n.tcw-dock {\n  position: relative;\n  display: flex;\n  flex: none;\n  min-height: 0;\n}\n\n/* The rail: as wide as the drawing tools on the other side, its buttons as theirs. */\n.tcw-dock-rail {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  width: var(--tcw-sidebar-w);\n  padding: var(--tcw-space-3) 0;\n  border-inline-start: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n}\n\n.tcw-dock-btn {\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease), color var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-dock-btn svg {\n  width: var(--tcw-icon);\n  height: var(--tcw-icon);\n}\n\n.tcw-dock-btn:hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n/* The page open: in ink on its wash, as a tool in use on the other side. */\n.tcw-dock-btn[aria-pressed='true'] {\n  background: var(--tcw-on-icon-bg, var(--tcw-accent-soft));\n  color: var(--tcw-on-icon-fg, var(--tcw-accent));\n}\n\n.tcw-dock-btn:focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* The edge in focus shows as its line, in ink: a ring round a strip this thin reads as two lines. */\n.tcw-dock-resize:focus-visible {\n  outline: none;\n}\n\n@media (forced-colors: active) {\n  .tcw-dock-resize:is(:hover, :active, :focus-visible)::after {\n    background: Highlight;\n  }\n}\n\n/* The panel: 296 wide to start (377 / sqrt(phi)), from 233 to 377. */\n.tcw-dock-panel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: var(--tcw-dock-w, 296px);\n  min-height: 0;\n  border-inline-start: var(--tcw-border-w) solid var(--tcw-border);\n  background: var(--tcw-bg-surface);\n}\n\n/* Its edge by the chart: a strip to drag, a line in ink while in hand. */\n.tcw-dock-resize {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(var(--tcw-space-3) * -1);\n  z-index: 3;\n  width: calc(var(--tcw-space-3) * 2);\n  cursor: col-resize;\n  touch-action: none;\n}\n\n.tcw-dock-resize::after {\n  content: '';\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(var(--tcw-space-3) - 1px);\n  width: 2px;\n  background: transparent;\n  transition: background var(--tcw-dur-fast) var(--tcw-ease);\n}\n\n.tcw-dock-resize:hover::after,\n.tcw-dock-resize:active::after,\n.tcw-dock-resize:focus-visible::after {\n  background: var(--tcw-accent);\n}\n\n/* A page fills the panel and scrolls under its header; the floating panels it was lose their card. */\n.tcw-dock-panel > .tcw-dock-page {\n  position: static;\n  inset: auto;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: auto;\n  max-width: none;\n  max-height: none;\n  min-height: 0;\n  margin: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  animation: none;\n}\n\n/* One header for every page: its title, its own buttons, and the close at the end. 34 tall (21 + 13). */\n.tcw-dock-page > :is(.tcw-watchlist-header, .tcw-alerts-header, .tcw-tree-header, .tcw-datawin-header, .tcw-syminfo-header, .tcw-ladder-header) {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  gap: var(--tcw-space-2);\n  flex: none;\n  min-height: calc(var(--tcw-space-6) + var(--tcw-space-5));\n  margin: 0;\n  padding-block: 0;\n  padding-inline: var(--tcw-space-5) var(--tcw-space-3);\n  border-bottom: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n}\n\n.tcw-dock-page > :is(.tcw-alerts-header, .tcw-tree-header, .tcw-datawin-header, .tcw-syminfo-header) > span:first-child {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tcw-dock-page :is(.tcw-watchlist-add, .tcw-watchlist-close, .tcw-alerts-close, .tcw-tree-close, .tcw-datawin-close, .tcw-syminfo-close, .tcw-ladder-close) {\n  display: inline-grid;\n  place-items: center;\n  flex: none;\n  width: var(--tcw-control-h);\n  height: var(--tcw-control-h);\n  padding: 0;\n  border: none;\n  border-radius: var(--tcw-control-radius);\n  background: transparent;\n  color: var(--tcw-text-muted);\n  cursor: pointer;\n}\n\n.tcw-dock-page :is(.tcw-watchlist-add, .tcw-watchlist-close, .tcw-alerts-close, .tcw-tree-close, .tcw-datawin-close, .tcw-syminfo-close, .tcw-ladder-close):hover {\n  background: var(--tcw-hover-bg);\n  color: var(--tcw-text);\n}\n\n.tcw-dock-page :is(.tcw-watchlist-add, .tcw-watchlist-close, .tcw-alerts-close, .tcw-tree-close, .tcw-datawin-close, .tcw-syminfo-close, .tcw-ladder-close):focus-visible {\n  outline: none;\n  box-shadow: var(--tcw-ring);\n}\n\n/* What scrolled in a box of its own on a floating panel scrolls with the page here (a phone's caps too). */\n.tcw-dock-page :is(.tcw-alerts-list, .tcw-datawin-body, .tcw-watchlist-list, .tcw-tree-list) {\n  max-height: none;\n  overflow-y: visible;\n}\n\n.tcw-dock-page .tcw-watchlist-list {\n  flex: 1;\n}\n\n/* The watchlist was a bar of its own: its width and shadow are the panel's now. */\n.tcw-dock-panel > .tcw-watchlist {\n  width: auto;\n  border-inline-start: none;\n  box-shadow: none;\n  overflow: hidden;\n}\n\n/* The symbol info's own padding sits under the header. */\n.tcw-dock-page.tcw-syminfo > .tcw-syminfo-body {\n  padding: var(--tcw-space-5);\n}\n\n/* Narrow (a phone, a narrow column): no rail; the panel rises from the bottom over the chart, 61.8% tall. */\n.tcw-root[data-tcw-narrow] .tcw-dock-rail,\n.tcw-root[data-tcw-narrow] .tcw-dock-resize {\n  display: none;\n}\n\n.tcw-root[data-tcw-narrow] .tcw-dock {\n  position: static;\n}\n\n/* Above the chart's lines and tags, under its toasts; above the on-screen keyboard. */\n.tcw-root[data-tcw-narrow] .tcw-dock-panel {\n  position: absolute;\n  inset-inline: 0;\n  bottom: var(--tcw-keyboard-inset, 0px);\n  z-index: 38;\n  width: auto;\n  height: 61.8%;\n  max-height: calc(100% - var(--tcw-keyboard-inset, 0px));\n  border-inline-start: none;\n  border-top: var(--tcw-border-w) solid var(--tcw-border-strong);\n  border-radius: var(--tcw-dialog-radius) var(--tcw-dialog-radius) 0 0;\n  background: var(--tcw-bg-elevated);\n  box-shadow: var(--tcw-dialog-shadow);\n  padding-bottom: env(safe-area-inset-bottom, 0px);\n}\n\n.tcw-root[data-tcw-narrow] .tcw-dock-page > :is(.tcw-watchlist-header, .tcw-alerts-header, .tcw-tree-header, .tcw-datawin-header, .tcw-syminfo-header, .tcw-ladder-header) {\n  background: var(--tcw-bg-elevated);\n}\n\n/* The small buttons in a panel's rows: the browser's padding left their icons 8 px wide in a 20 px button. */\n:is(.tcw-tree-btn, .tcw-tree-add, .tcw-alerts-del, .tcw-watchlist-remove) {\n  padding: 0;\n}\n\n:is(.tcw-tree-btn, .tcw-tree-add, .tcw-alerts-del, .tcw-watchlist-remove) svg {\n  flex: none;\n}\n\n/* A page's title as the others': the watchlist's is its list's name, a menu. */\n.tcw-dock-page .tcw-watchlist-name {\n  height: var(--tcw-control-h);\n  padding: 0 var(--tcw-space-3);\n  margin-inline-start: calc(var(--tcw-space-3) * -1);\n  color: var(--tcw-text);\n  font-size: var(--tcw-font-size-sm);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: none;\n  letter-spacing: normal;\n  flex: 0 1 auto;\n}\n\n/* Its caret beside the name, the add and close buttons at the end. */\n.tcw-dock-page .tcw-watchlist-name::after {\n  margin-inline-start: var(--tcw-space-3);\n}\n\n.tcw-dock-page .tcw-watchlist-add {\n  margin-inline-start: auto;\n}\n\n/* === The depth ladder, a page of the dock === */\n\n.tcw-ladder-title {\n  flex: 1;\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  font: inherit;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/*\n * Bid, price, ask: under the header, in the label case. The heading and each\n * row are grids of their own, so their columns are fixed shares: a row's\n * content (a mark of your orders) never moves its column off the others'.\n */\n.tcw-ladder-cols,\n.tcw-ladder-row {\n  --tcw-ladder-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);\n}\n.tcw-ladder-cols {\n  position: sticky;\n  top: calc(var(--tcw-space-6) + var(--tcw-space-5));\n  z-index: 1;\n  display: grid;\n  grid-template-columns: var(--tcw-ladder-columns);\n  align-items: center;\n  height: var(--tcw-space-6);\n  padding-inline: var(--tcw-space-3);\n  border-bottom: 1px solid var(--tcw-divider);\n  background: var(--tcw-bg-surface);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n  text-transform: var(--tcw-label-case);\n  letter-spacing: var(--tcw-label-tracking);\n}\n.tcw-ladder-cols span:first-child { text-align: end; padding-inline-end: var(--tcw-space-4); }\n.tcw-ladder-cols span:nth-child(2) { text-align: center; }\n.tcw-ladder-cols span:last-child { padding-inline-start: var(--tcw-space-4); }\n\n.tcw-ladder-body { flex: 1; padding-inline: var(--tcw-space-3); }\n\n/* A row 21 tall: the bid's size, the price, the ask's size, in the mono figures. */\n.tcw-ladder-row {\n  display: grid;\n  grid-template-columns: var(--tcw-ladder-columns);\n  height: var(--tcw-space-6);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-sm);\n  font-variant-numeric: tabular-nums;\n}\n/* A side's size over a bar grown from the price outward, as long as its share of the largest. */\n.tcw-ladder-cell {\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  padding-inline: var(--tcw-space-4);\n  border: none;\n  background: transparent;\n  color: var(--tcw-text);\n  font: inherit;\n  cursor: pointer;\n}\n.tcw-ladder-cell::before {\n  content: '';\n  position: absolute;\n  inset-block: 2px;\n  z-index: -1;\n  width: var(--w, 0%);\n  border-radius: 1px;\n}\n.tcw-ladder-bid { justify-content: flex-end; }\n.tcw-ladder-bid::before { inset-inline-end: 0; background: var(--tcw-green-soft); }\n.tcw-ladder-ask { justify-content: flex-start; }\n.tcw-ladder-ask::before { inset-inline-start: 0; background: var(--tcw-red-soft); }\n.tcw-ladder-cell:not(:disabled):hover { background: var(--tcw-hover-bg); }\n.tcw-ladder-cell:disabled { cursor: default; }\n.tcw-ladder-cell:focus-visible { outline: none; box-shadow: inset var(--tcw-ring); }\n.tcw-ladder-price {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--tcw-space-2);\n  min-width: 0;\n  overflow: hidden;\n  padding-inline: var(--tcw-space-3);\n  border-inline: 1px solid var(--tcw-divider);\n  white-space: nowrap;\n}\n.tcw-ladder-price.tcw-ask { color: var(--tcw-red); }\n.tcw-ladder-price.tcw-bid { color: var(--tcw-green); }\n/* Your orders at a price: their quantity, stamped in the side's colour. */\n.tcw-ladder-own {\n  flex: none;\n  padding-inline: var(--tcw-space-2);\n  border-radius: 2px;\n  color: var(--tcw-bg);\n  font-size: var(--tcw-font-size-xs);\n  font-weight: var(--tcw-weight-strong);\n}\n.tcw-ladder-own[data-side='buy'] { background: var(--tcw-green); }\n.tcw-ladder-own[data-side='sell'] { background: var(--tcw-red); }\n/* The spread, between the asks and the bids, on a torn-paper rule. */\n.tcw-ladder-spread {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--tcw-space-6);\n  border-block: 1px dashed var(--tcw-border-strong);\n  color: var(--tcw-text-muted);\n  font-family: var(--tcw-font-mono);\n  font-size: var(--tcw-font-size-xs);\n  font-variant-numeric: tabular-nums;\n}\n.tcw-ladder-empty {\n  padding: var(--tcw-space-6);\n  color: var(--tcw-text-muted);\n  font-size: var(--tcw-font-size-sm);\n  text-align: center;\n}\n\n/* Narrow (a finger, not a pointer): rows a control tall, 26 not 21. */\n.tcw-root[data-tcw-narrow] .tcw-ladder-row {\n  height: var(--tcw-control-h);\n}\n\n/* Forced colours drop the bars' and the marks' fills: the bars show in the system's highlight, the marks framed. */\n@media (forced-colors: active) {\n  .tcw-ladder-cell::before { forced-color-adjust: none; background: Highlight; opacity: 0.3; }\n  .tcw-ladder-cell:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }\n  .tcw-ladder-own { border: 1px solid CanvasText; }\n}\n", zt = /* @__PURE__ */ "toolbar,sidebar,statusBar,dock,alerts,objectTree,symbolInfo,symbolSearch,settings,indicatorSettings,drawingSettings,dataWindow,commandPalette,hotkeySheet,goToDate,replay,screenshot,copyImage,shareView,autoFib,themeToggle,fullscreen,accountPanel,orderTicket,bracketOrders,depthLadder,layouts,indicatorTemplates,compare,indicatorLegend,navigation,customTimeframes,intervalTyping,symbolTyping,dragDropImport,hotkeys,toasts,toolbar.symbol,toolbar.symbolInfo,toolbar.timeframes,toolbar.timeframeMenu,toolbar.chartType,toolbar.indicators,toolbar.layouts,toolbar.replay,toolbar.bracketOrders,toolbar.depthLadder,toolbar.accountPanel,toolbar.objectTree,toolbar.alerts,toolbar.screenshot,toolbar.settings,toolbar.themeToggle,toolbar.fullscreen,toolbar.compare,toolbar.undo,toolbar.redo,toolbar.trade,sidebar.cursor,sidebar.favorites,sidebar.lines,sidebar.fibonacci,sidebar.patterns,sidebar.forecasting,sidebar.annotation,sidebar.style,sidebar.magnet,sidebar.eraser,sidebar.zoomArea,sidebar.stayInDrawing,sidebar.undo,sidebar.redo,sidebar.clear,sidebar.lockAll,sidebar.hideAll,dock.watchlist,dock.alerts,dock.objectTree,dock.dataWindow,dock.symbolInfo,dock.depthLadder,statusBar.range,statusBar.goToDate,statusBar.market,statusBar.connection,statusBar.symbol,statusBar.clock,statusBar.scale,statusBar.rangeTimeframe,indicatorLegend.values,indicatorLegend.visibility,indicatorLegend.settings,indicatorLegend.remove,indicatorLegend.more,pane.move,pane.collapse,pane.maximize,navigation.zoom,navigation.scroll,navigation.reset,menu.chart,menu.chart.alert,menu.chart.order,menu.chart.orderTicket,menu.chart.horizontalLine,menu.chart.resetView,menu.chart.drawings,menu.chart.exportData,menu.chart.settings,menu.chart.scale,menu.chart.goToDate,menu.chart.paneScale,menu.priceAxisAdd,menu.chart.indicators,menu.chart.timezone,menu.drawing,menu.drawing.settings,menu.drawing.alert,menu.drawing.order,menu.drawing.group,menu.drawing.lock,menu.drawing.hide,menu.drawing.duplicate,menu.drawing.delete,selectionToolbar,hotkeys.commandPalette,hotkeys.symbolSearch,hotkeys.save,hotkeys.tools,hotkeys.invertScale,hotkeys.goToDate,hotkeys.help,hotkeys.resetView".split(","), Bt = new Set(zt), Vt = {
 	toolbar: ["toolbar"],
 	drawingTools: [
 		"sidebar",
@@ -7763,29 +7763,39 @@ function Zo(e, t, n) {
 	}
 }
 //#endregion
+//#region src/widget/signedFigure.ts
+var Qo = /^[-+−]/;
+function $o(e, t, n) {
+	let r = e.replace(Qo, "");
+	return r === n.replace(Qo, "") ? r : t > 0 ? `+${r}` : t < 0 ? `-${r}` : r;
+}
+function es(e) {
+	return e.startsWith("+") ? "up" : e.startsWith("-") ? "down" : null;
+}
+//#endregion
 //#region src/widget/WidgetAccountPanel.ts
-var Qo = [
+var ts = [
 	"positions",
 	"orders",
 	"history"
-], $o = [
+], ns = [
 	"order",
 	"close",
 	"reverse",
 	"stopLoss",
 	"takeProfit"
-], es = [
+], rs = [
 	"market",
 	"limit",
 	"stop"
-], ts = ["gtc", "day"];
-function ns(e, t, n) {
+], is = ["gtc", "day"], as = "—", os = "{pnl}", ss = 3;
+function cs(e, t, n) {
 	return e.includes(t ?? "") ? t : n;
 }
-function rs(e, t) {
+function ls(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
 }
-function is(e, t) {
+function us(e, t) {
 	if (t === null) return null;
 	let n = e.quantity - (e.closedQuantity ?? 0), r = e.side === "buy" ? 1 : -1;
 	return {
@@ -7793,12 +7803,20 @@ function is(e, t) {
 		pct: e.entryPrice === 0 ? 0 : (t - e.entryPrice) / e.entryPrice * 100 * r
 	};
 }
-function as(e, t = 2) {
-	return `${e > 0 ? "+" : ""}${e.toFixed(t)}`;
+function ds(e) {
+	let t = document.createElement("span");
+	return t.dir = "ltr", t.textContent = e, t;
+}
+function fs(e) {
+	let t = es(e);
+	return t ? `tcw-account-${t}` : "";
 }
-var os = class {
+var ps = class {
 	el;
 	tabButtons = /* @__PURE__ */ new Map();
+	tabLabels = /* @__PURE__ */ new Map();
+	tabCounts = /* @__PURE__ */ new Map();
+	totalsEl;
 	content;
 	tab = "positions";
 	snapshot = {
@@ -7815,14 +7833,19 @@ var os = class {
 		r.className = "tcw-account-head";
 		let i = document.createElement("div");
 		i.className = "tcw-account-tabs", i.setAttribute("role", "tablist"), i.addEventListener("keydown", (e) => this.onTabKey(e));
-		for (let e of Qo) {
+		for (let e of ts) {
 			let t = document.createElement("button");
-			t.type = "button", t.className = "tcw-account-tab", t.setAttribute("role", "tab"), t.id = `tcw-account-tab-${e}`, t.addEventListener("click", () => this.selectTab(e)), this.tabButtons.set(e, t), i.appendChild(t);
+			t.type = "button", t.className = "tcw-account-tab", t.setAttribute("role", "tab"), t.id = `tcw-account-tab-${e}`;
+			let n = document.createElement("span");
+			n.className = "tcw-account-tab-label", n.textContent = this.t(`account.${e}`);
+			let r = document.createElement("span");
+			r.className = "tcw-account-count", t.append(n, r), t.addEventListener("click", () => this.selectTab(e)), this.tabButtons.set(e, t), this.tabLabels.set(e, n.textContent), this.tabCounts.set(e, r), i.appendChild(t);
 		}
+		this.totalsEl = document.createElement("div"), this.totalsEl.className = "tcw-account-totals";
 		let a = document.createElement("button");
 		a.type = "button", a.className = "tcw-account-new", k(a, "orderTicket"), a.innerHTML = A("plus", 13), a.append(this.t("account.newOrder")), a.addEventListener("click", () => this.callbacks.onNewOrder());
 		let o = document.createElement("button");
-		o.type = "button", o.className = "tcw-tree-close", o.setAttribute("aria-label", this.t("account.close")), o.innerHTML = A("x", 14), o.addEventListener("click", () => this.closePanel()), r.append(i, a, o), this.content = document.createElement("div"), this.content.className = "tcw-account-body", this.content.setAttribute("role", "tabpanel"), this.el.append(r, this.content), e.appendChild(this.el), this.renderTabs();
+		o.type = "button", o.className = "tcw-tree-close", o.setAttribute("aria-label", this.t("account.close")), o.innerHTML = A("x", 14), o.addEventListener("click", () => this.closePanel()), r.append(i, this.totalsEl, a, o), this.content = document.createElement("div"), this.content.className = "tcw-account-body", this.content.setAttribute("role", "tabpanel"), this.el.append(r, this.content), e.appendChild(this.el), this.renderTabs();
 	}
 	isOpen() {
 		return this.open;
@@ -7838,8 +7861,8 @@ var os = class {
 	}
 	update(e) {
 		let t = this.snapshot;
-		if (this.snapshot = e, rs(t.positions, e.positions) && rs(t.orders, e.orders) && rs(t.fills, e.fills) && t.realisedPnl === e.realisedPnl) {
-			this.open && this.tab === "positions" && t.price !== e.price && this.patchPrices();
+		if (this.snapshot = e, ls(t.positions, e.positions) && ls(t.orders, e.orders) && ls(t.fills, e.fills) && t.realisedPnl === e.realisedPnl) {
+			t.price !== e.price && (this.renderTotals(), this.open && this.tab === "positions" && this.patchPrices());
 			return;
 		}
 		this.renderTabs(), this.open && this.render();
@@ -7851,10 +7874,10 @@ var os = class {
 		this.tab = e, this.renderTabs(), this.render();
 	}
 	onTabKey(e) {
-		let t = Qo.indexOf(this.tab), n = e.key === "ArrowRight" ? t + 1 : e.key === "ArrowLeft" ? t - 1 : -2;
+		let t = ts.indexOf(this.tab), n = e.key === "ArrowRight" ? t + 1 : e.key === "ArrowLeft" ? t - 1 : -2;
 		if (n === -2) return;
 		e.preventDefault();
-		let r = Qo[(n + Qo.length) % Qo.length];
+		let r = ts[(n + ts.length) % ts.length];
 		this.selectTab(r), this.tabButtons.get(r)?.focus();
 	}
 	renderTabs() {
@@ -7865,8 +7888,22 @@ var os = class {
 		};
 		for (let [t, n] of this.tabButtons) {
 			let r = t === this.tab;
-			n.textContent = `${this.t(`account.${t}`)} (${e[t]})`, n.setAttribute("aria-selected", String(r)), n.tabIndex = r ? 0 : -1, r && this.content.setAttribute("aria-labelledby", n.id);
+			this.tabCounts.get(t).textContent = String(e[t]), n.setAttribute("aria-label", `${this.tabLabels.get(t)} (${e[t]})`), n.setAttribute("aria-selected", String(r)), n.tabIndex = r ? 0 : -1, r && this.content.setAttribute("aria-labelledby", n.id);
 		}
+		this.renderTotals();
+	}
+	renderTotals() {
+		let { positions: e, price: t, fills: n, realisedPnl: r } = this.snapshot, i = [], a = e.reduce((e, n) => {
+			let r = us(n, t);
+			return r === null ? e : (e ?? 0) + r.pnl;
+		}, null);
+		a !== null && i.push(this.total("account.openPnl", a)), (n.length > 0 || r !== void 0 && r !== 0) && i.push(this.total("account.realised", r ?? n.reduce((e, t) => e + (t.pnl ?? 0), 0))), this.totalsEl.replaceChildren(...i);
+	}
+	total(e, t) {
+		let n = document.createElement("span"), r = this.amount(t);
+		n.className = `tcw-account-total ${fs(r)}`.trim();
+		let i = this.t(e), a = i.indexOf(os), o = ds(r);
+		return a < 0 ? n.append(`${i} `, o) : n.append(i.slice(0, a), o, i.slice(a + 5)), n;
 	}
 	render() {
 		let e = document.activeElement, t = e instanceof HTMLElement && this.content.contains(e) ? e.dataset.focusKey : void 0;
@@ -7874,34 +7911,47 @@ var os = class {
 	}
 	patchPrices() {
 		let { price: e } = this.snapshot;
-		for (let t of this.live) t.price.textContent = e === null ? "—" : this.callbacks.formatPrice(e), this.writePnl(t.pnl, is(t.position, e));
+		for (let t of this.live) t.price.textContent = e === null ? as : this.callbacks.formatPrice(e), this.writePnl(t.pnl, us(t.position, e));
+	}
+	amount(e) {
+		return $o(this.money(Math.abs(e)), e, this.money(0));
+	}
+	money(e) {
+		return this.callbacks.formatAmount ? this.callbacks.formatAmount(e) : e.toFixed(2);
+	}
+	percent(e) {
+		let t = (e) => this.callbacks.formatNumber ? this.callbacks.formatNumber(e, 2) : e.toFixed(2);
+		return `${$o(t(Math.abs(e)), e, t(0))}%`;
 	}
 	writePnl(e, t) {
-		e.className = t === null ? "" : t.pnl >= 0 ? "tcw-account-up" : "tcw-account-down", e.textContent = t === null ? "—" : `${as(t.pnl)} (${as(t.pct)}%)`;
+		if (t === null) {
+			e.className = "", e.textContent = as;
+			return;
+		}
+		let n = this.amount(t.pnl);
+		e.className = fs(n), e.textContent = `${n} · ${this.percent(t.pct)}`;
 	}
 	table(e, t, n) {
 		if (t.length === 0) {
 			let e = document.createElement("p");
-			e.className = "tcw-account-empty", e.textContent = this.t(n), this.content.replaceChildren(e);
-			return;
-		}
-		let r = document.createElement("table");
-		r.className = "tcw-account-table";
-		let i = r.createTHead().insertRow();
-		for (let t of e) {
-			let e = document.createElement("th");
-			e.scope = "col", e.textContent = t ? this.t(t) : "", i.appendChild(e);
-		}
-		r.createTBody().append(...t), this.content.replaceChildren(r);
-	}
-	row(e, t = "") {
-		let n = document.createElement("tr");
-		t && (n.className = t);
-		for (let t of e) {
-			let e = n.insertCell();
-			typeof t == "string" ? e.textContent = t : e.appendChild(t);
+			return e.className = "tcw-account-empty", e.textContent = this.t(n), this.content.replaceChildren(e), null;
+		}
+		let r = e.map((e) => e.key ? this.t(e.key) : ""), i = document.createElement("table");
+		i.className = "tcw-account-table", i.setAttribute("role", "table");
+		let a = i.createTHead().insertRow();
+		a.setAttribute("role", "row"), e.forEach((e, t) => {
+			let n = document.createElement("th");
+			n.scope = "col", n.setAttribute("role", "columnheader"), n.textContent = r[t], e.num && (n.className = "tcw-num"), a.appendChild(n);
+		});
+		let o = i.createTBody();
+		for (let n of t) {
+			let t = o.insertRow();
+			t.setAttribute("role", "row"), n.forEach((n, i) => {
+				let a = t.insertCell();
+				a.setAttribute("role", "cell"), a.dataset.label = r[i], e[i].num && (a.className = "tcw-num"), typeof n == "string" ? a.textContent = n : a.appendChild(n);
+			});
 		}
-		return n;
+		return this.content.replaceChildren(i), i;
 	}
 	sideCell(e, t = "position") {
 		let n = document.createElement("span");
@@ -7919,59 +7969,82 @@ var os = class {
 		}
 		return t;
 	}
+	price(e) {
+		return e === void 0 ? as : this.callbacks.formatPrice(e);
+	}
 	renderPositions() {
-		let { formatPrice: e } = this.callbacks, { price: t } = this.snapshot, n = this.snapshot.positions.map((n) => {
-			let r = n.quantity - (n.closedQuantity ?? 0), i = document.createElement("span");
-			this.writePnl(i, is(n, t));
-			let a = `${this.sideText(n.side, "position")} ${r} @ ${e(n.entryPrice)}`, o = this.row([
-				this.sideCell(n.side),
-				String(r),
-				e(n.entryPrice),
-				t === null ? "—" : e(t),
-				i,
-				n.stopLoss === void 0 ? "—" : e(n.stopLoss),
-				n.takeProfit === void 0 ? "—" : e(n.takeProfit),
+		let { formatPrice: e } = this.callbacks, { price: t } = this.snapshot, n = [], r = this.snapshot.positions.map((r) => {
+			let i = r.quantity - (r.closedQuantity ?? 0), a = ds("");
+			this.writePnl(a, us(r, t)), n.push(a);
+			let o = `${this.sideText(r.side, "position")} ${i} @ ${e(r.entryPrice)}`;
+			return [
+				this.sideCell(r.side),
+				String(i),
+				e(r.entryPrice),
+				t === null ? as : e(t),
+				a,
+				this.price(r.stopLoss),
+				this.price(r.takeProfit),
 				this.actions({
-					icon: "repeat",
-					label: `${this.t("account.reverse")}: ${a}`,
-					key: `reverse:${n.id}`,
-					run: () => this.callbacks.onReversePosition(n.id)
+					icon: "arrowUpDown",
+					label: `${this.t("account.reverse")}: ${o}`,
+					key: `reverse:${r.id}`,
+					run: () => this.callbacks.onReversePosition(r.id)
 				}, {
 					icon: "x",
-					label: `${this.t("account.closePosition")}: ${a}`,
-					key: `close:${n.id}`,
-					run: () => this.callbacks.onClosePosition(n.id),
+					label: `${this.t("account.closePosition")}: ${o}`,
+					key: `close:${r.id}`,
+					run: () => this.callbacks.onClosePosition(r.id),
 					danger: !0
 				})
-			]);
-			return this.live.push({
-				position: n,
-				price: o.cells[3],
-				pnl: i
-			}), o;
-		});
-		this.table([
-			"account.side",
-			"account.quantity",
-			"account.entry",
-			"account.price",
-			"account.pnl",
-			"account.stopLoss",
-			"account.takeProfit",
-			"account.actions"
-		], n, "account.noPositions");
+			];
+		}), i = this.table([
+			{ key: "account.side" },
+			{
+				key: "account.quantity",
+				num: !0
+			},
+			{
+				key: "account.entry",
+				num: !0
+			},
+			{
+				key: "account.price",
+				num: !0
+			},
+			{
+				key: "account.pnl",
+				num: !0
+			},
+			{
+				key: "account.stopLoss",
+				num: !0
+			},
+			{
+				key: "account.takeProfit",
+				num: !0
+			},
+			{ key: null }
+		], r, "account.noPositions");
+		if (!i) return;
+		let a = [...i.tBodies[0].rows];
+		this.snapshot.positions.forEach((e, t) => this.live.push({
+			position: e,
+			price: a[t].cells[ss],
+			pnl: n[t]
+		}));
 	}
 	renderOrders() {
 		let { formatPrice: e } = this.callbacks, t = this.snapshot.orders.map((t) => {
-			let n = ns(es, t.type === "stopLimit" ? "stop" : t.type, "limit"), r = `${this.sideText(t.side, "trade")} ${t.quantity} @ ${e(t.price)}`;
-			return this.row([
+			let n = cs(rs, t.type === "stopLimit" ? "stop" : t.type, "limit"), r = `${this.sideText(t.side, "trade")} ${t.quantity} @ ${e(t.price)}`;
+			return [
 				this.sideCell(t.side, "trade"),
 				this.t(`ticket.type.${n}`),
 				String(t.quantity),
 				e(t.price),
-				t.stopLoss === void 0 ? "—" : e(t.stopLoss),
-				t.takeProfit === void 0 ? "—" : e(t.takeProfit),
-				t.timeInForce ? this.t(`ticket.tif.${ns(ts, t.timeInForce, "gtc")}`) : "—",
+				this.price(t.stopLoss),
+				this.price(t.takeProfit),
+				t.timeInForce ? this.t(`ticket.tif.${cs(is, t.timeInForce, "gtc")}`) : as,
 				this.actions({
 					icon: "x",
 					label: `${this.t("account.cancelOrder")}: ${r}`,
@@ -7979,50 +8052,66 @@ var os = class {
 					run: () => this.callbacks.onCancelOrder(t.id),
 					danger: !0
 				})
-			]);
+			];
 		});
 		this.table([
-			"account.side",
-			"ticket.type",
-			"account.quantity",
-			"account.price",
-			"account.stopLoss",
-			"account.takeProfit",
-			"ticket.timeInForce",
-			"account.actions"
+			{ key: "account.side" },
+			{ key: "ticket.type" },
+			{
+				key: "account.quantity",
+				num: !0
+			},
+			{
+				key: "account.price",
+				num: !0
+			},
+			{
+				key: "account.stopLoss",
+				num: !0
+			},
+			{
+				key: "account.takeProfit",
+				num: !0
+			},
+			{ key: "ticket.timeInForce" },
+			{ key: null }
 		], t, "account.noOrders");
 	}
 	renderHistory() {
 		let { formatPrice: e, formatTime: t } = this.callbacks, n = [...this.snapshot.fills].reverse().map((n) => {
-			let r = document.createElement("span");
-			return n.pnl === void 0 ? r.textContent = "—" : (r.className = n.pnl >= 0 ? "tcw-account-up" : "tcw-account-down", r.textContent = as(n.pnl)), this.row([
+			let r = ds("");
+			return n.pnl === void 0 ? r.textContent = as : (r.textContent = this.amount(n.pnl), r.className = fs(r.textContent)), [
 				t(n.time),
 				this.sideCell(n.side, "trade"),
 				String(n.quantity),
 				e(n.price),
-				this.t(`account.reason.${ns($o, n.reason, "order")}`),
+				this.t(`account.reason.${cs(ns, n.reason, "order")}`),
 				r
-			]);
+			];
 		});
 		this.table([
-			"account.time",
-			"account.side",
-			"account.quantity",
-			"account.price",
-			"account.reason",
-			"account.pnl"
+			{ key: "account.time" },
+			{ key: "account.side" },
+			{
+				key: "account.quantity",
+				num: !0
+			},
+			{
+				key: "account.price",
+				num: !0
+			},
+			{ key: "account.reason" },
+			{
+				key: "account.pnl",
+				num: !0
+			}
 		], n, "account.noFills");
-		let r = this.snapshot.realisedPnl ?? this.snapshot.fills.reduce((e, t) => e + (t.pnl ?? 0), 0);
-		if (n.length > 0) {
-			let e = document.createElement("p");
-			e.className = "tcw-account-summary", e.textContent = p(this.t("account.realised"), { pnl: as(r) }), this.content.appendChild(e);
-		}
 	}
-}, ss = 1e-9;
-function cs(e, t) {
+}, ms = 1e-9;
+function hs(e, t) {
 	return e.type === "market" ? t : e.price;
 }
-function ls(e, t, n = {}) {
+function gs(e, t, n = {}) {
 	let r = [];
 	(!(e.quantity > 0) || !Number.isFinite(e.quantity)) && r.push("quantity"), e.type !== "market" && (!(e.price > 0) || !Number.isFinite(e.price)) && r.push("price"), e.type === "market" && !((t ?? e.price) > 0) && r.push("market");
 	let i = e.side === "buy";
@@ -8032,18 +8121,18 @@ function ls(e, t, n = {}) {
 	}
 	let a = (e) => e === null || Number.isFinite(e) && e > 0;
 	a(e.stopLoss) || r.push("stopLoss"), a(e.takeProfit) || r.push("takeProfit");
-	let o = cs(e, t);
-	return o !== null && o > 0 && (e.stopLoss !== null && a(e.stopLoss) && (i ? e.stopLoss >= o : e.stopLoss <= o) && r.push("stopLossSide"), e.takeProfit !== null && a(e.takeProfit) && (i ? e.takeProfit <= o : e.takeProfit >= o) && r.push("takeProfitSide")), [...r, ...us(e, n)];
+	let o = hs(e, t);
+	return o !== null && o > 0 && (e.stopLoss !== null && a(e.stopLoss) && (i ? e.stopLoss >= o : e.stopLoss <= o) && r.push("stopLossSide"), e.takeProfit !== null && a(e.takeProfit) && (i ? e.takeProfit <= o : e.takeProfit >= o) && r.push("takeProfitSide")), [...r, ..._s(e, n)];
 }
-function us(e, t) {
+function _s(e, t) {
 	let n = [], r = e.type === "market" ? null : e.price, i = [
 		r,
 		e.stopLoss,
 		e.takeProfit
 	].filter((e) => e !== null && Number.isFinite(e) && e > 0), { roundPrice: a, limits: o, lot: s } = t;
-	return a && i.some((e) => Math.abs(a(e) - e) > ss) && n.push("priceStep"), o && r !== null && r > 0 && (r > o.ceiling + ss || r < o.floor - ss) && n.push("priceLimits"), s !== void 0 && s > 1 && e.quantity > s && e.quantity % s !== 0 && n.push("lot"), n;
+	return a && i.some((e) => Math.abs(a(e) - e) > ms) && n.push("priceStep"), o && r !== null && r > 0 && (r > o.ceiling + ms || r < o.floor - ms) && n.push("priceLimits"), s !== void 0 && s > 1 && e.quantity > s && e.quantity % s !== 0 && n.push("lot"), n;
 }
-function ds(e, t) {
+function vs(e, t) {
 	let n = {
 		side: e.side,
 		type: e.type,
@@ -8052,14 +8141,14 @@ function ds(e, t) {
 	};
 	return e.type === "stop" && (n.stopPrice = e.price), e.type !== "market" && (n.timeInForce = e.timeInForce), e.stopLoss !== null && (n.stopLoss = e.stopLoss), e.takeProfit !== null && (n.takeProfit = e.takeProfit), n;
 }
-function fs(e, t) {
-	let n = cs(e, t);
+function ys(e, t) {
+	let n = hs(e, t);
 	if (n === null || e.stopLoss === null || e.takeProfit === null) return null;
 	let r = Math.abs(n - e.stopLoss);
 	return r > 0 ? Math.abs(e.takeProfit - n) / r : null;
 }
-function ps(e, t, n, r = 1) {
-	let i = cs(e, t);
+function bs(e, t, n, r = 1) {
+	let i = hs(e, t);
 	if (i === null || !(i > 0) || !Number.isFinite(n) || !(e.quantity > 0)) return null;
 	let a = e.side === "buy" ? 1 : -1;
 	return {
@@ -8067,18 +8156,18 @@ function ps(e, t, n, r = 1) {
 		amount: (n - i) * e.quantity * a * r
 	};
 }
-function ms(e, t, n = {}) {
-	let r = n.multiplier !== void 0 && n.multiplier > 0 ? n.multiplier : 1, i = cs(e, t), a = i !== null && i > 0 && e.quantity > 0 ? i * e.quantity * r : null, o = ls(e, t), s = (n, i) => n === null || o.includes(i) ? null : ps(e, t, n, r)?.amount ?? null, c = s(e.stopLoss, "stopLossSide"), l = s(e.takeProfit, "takeProfitSide");
+function xs(e, t, n = {}) {
+	let r = n.multiplier !== void 0 && n.multiplier > 0 ? n.multiplier : 1, i = hs(e, t), a = i !== null && i > 0 && e.quantity > 0 ? i * e.quantity * r : null, o = gs(e, t), s = (n, i) => n === null || o.includes(i) ? null : bs(e, t, n, r)?.amount ?? null, c = s(e.stopLoss, "stopLossSide"), l = s(e.takeProfit, "takeProfitSide");
 	return {
 		value: a,
 		risk: c,
 		reward: l,
-		ratio: c !== null && l !== null ? fs(e, t) : null
+		ratio: c !== null && l !== null ? ys(e, t) : null
 	};
 }
 //#endregion
 //#region src/widget/WidgetOrderTicket.ts
-var hs = 229, gs = 1, _s = 2, vs = .999999999, ys = 0, bs = class {
+var Ss = 229, Cs = 1, ws = 2, Ts = .999999999, Es = 0, Ds = class {
 	backdrop;
 	modal;
 	symbolEl;
@@ -8089,11 +8178,11 @@ var hs = 229, gs = 1, _s = 2, vs = .999999999, ys = 0, bs = class {
 	draft = null;
 	lastPrice = null;
 	rules = {};
-	step = ws;
-	round = (e) => Ts(e, e);
+	step = ks;
+	round = (e) => As(e, e);
 	typed = /* @__PURE__ */ new Map();
 	returnFocus = null;
-	uid = ++ys;
+	uid = ++Es;
 	constructor(e, t, n = h) {
 		this.callbacks = t, this.t = n, this.backdrop = document.createElement("div"), this.backdrop.className = "tcw-modal-backdrop", this.backdrop.hidden = !0;
 		let r = !1;
@@ -8102,7 +8191,7 @@ var hs = 229, gs = 1, _s = 2, vs = .999999999, ys = 0, bs = class {
 		}), this.backdrop.addEventListener("click", (e) => {
 			e.target === this.backdrop && r && this.close(), r = !1;
 		}), this.modal = document.createElement("div"), this.modal.className = "tcw-modal tcw-order-ticket", this.modal.setAttribute("role", "dialog"), this.modal.setAttribute("aria-modal", "true"), this.modal.setAttribute("aria-labelledby", `tcw-ticket-title-${this.uid}`), this.modal.addEventListener("keydown", (e) => {
-			if (e.key === "Escape" && !e.isComposing && e.keyCode !== hs) {
+			if (e.key === "Escape" && !e.isComposing && e.keyCode !== Ss) {
 				e.stopPropagation(), this.close();
 				return;
 			}
@@ -8124,7 +8213,7 @@ var hs = 229, gs = 1, _s = 2, vs = .999999999, ys = 0, bs = class {
 		u.className = "tcw-footer-end", u.append(l, this.submit), c.append(u), this.modal.append(i, this.body, this.summaryEl, this.problemsEl, c), this.backdrop.appendChild(this.modal), e.appendChild(this.backdrop);
 	}
 	open(e) {
-		this.returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null, this.lastPrice = e.lastPrice, this.rules = e.rules ?? {}, this.step = e.step ?? ws, this.round = e.round ?? ((e) => Ts(e, e)), this.typed.clear(), this.symbolEl.textContent = e.symbol ?? "";
+		this.returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null, this.lastPrice = e.lastPrice, this.rules = e.rules ?? {}, this.step = e.step ?? ks, this.round = e.round ?? ((e) => As(e, e)), this.typed.clear(), this.symbolEl.textContent = e.symbol ?? "";
 		let t = this.round(e.price ?? e.lastPrice ?? 0), n = e.side ?? "buy", r = "market";
 		e.price !== void 0 && e.lastPrice !== null && t !== e.lastPrice && (r = t < e.lastPrice == (n === "buy") ? "limit" : "stop"), this.draft = {
 			side: n,
@@ -8160,14 +8249,14 @@ var hs = 229, gs = 1, _s = 2, vs = .999999999, ys = 0, bs = class {
 		return t > 0 ? Number((10 ** -t).toFixed(t)) : 1;
 	}
 	priceStep(e, t) {
-		return this.step(t > 0 ? e : e * vs);
+		return this.step(t > 0 ? e : e * Ts);
 	}
 	writePrice(e) {
-		return Number.isFinite(e) ? this.step === ws ? String(e) : e.toFixed(Se(this.step(e))) : "";
+		return Number.isFinite(e) ? this.step === ks ? String(e) : e.toFixed(Se(this.step(e))) : "";
 	}
 	place() {
 		let e = this.draft;
-		!e || ls(e, this.lastPrice, this.rules).length > 0 || (this.callbacks.onSubmit(ds(e, this.lastPrice)), this.close());
+		!e || gs(e, this.lastPrice, this.rules).length > 0 || (this.callbacks.onSubmit(vs(e, this.lastPrice)), this.close());
 	}
 	set(e, t = !1) {
 		this.draft && (this.draft = {
@@ -8202,7 +8291,7 @@ var hs = 229, gs = 1, _s = 2, vs = .999999999, ys = 0, bs = class {
 		return r.className = "tcw-settings-label", r.textContent = this.t(e), n.append(r, t), n;
 	}
 	choices(e, t, n, r, i) {
-		let a = e === "type" ? "ticket.type" : "ticket.tif", o = xs(e, pr(t.map((e) => ({
+		let a = e === "type" ? "ticket.type" : "ticket.tif", o = Os(e, pr(t.map((e) => ({
 			value: e,
 			label: this.t(`${a}.${e}`)
 		})), n, i, this.t(r)));
@@ -8235,7 +8324,7 @@ var hs = 229, gs = 1, _s = 2, vs = .999999999, ys = 0, bs = class {
 		return this.stepped(e, t, (e, t) => this.priceStep(e, t), () => this.lastPrice ?? this.draft?.price ?? 0, (e) => this.writePrice(e), n);
 	}
 	stepped(e, t, n, r, i, a) {
-		let o = xs(e, document.createElement("input"));
+		let o = Os(e, document.createElement("input"));
 		o.type = "number", o.className = "tcw-indi-input", o.step = "any", o.min = "0", o.value = this.typed.get(e) ?? i(t);
 		let s = this.t(`ticket.${e}`);
 		o.setAttribute("aria-label", s), o.addEventListener("input", () => {
@@ -8273,25 +8362,25 @@ var hs = 229, gs = 1, _s = 2, vs = .999999999, ys = 0, bs = class {
 		if (!t) return NaN;
 		let n = t.type === "market" ? this.lastPrice ?? t.price : t.price;
 		if (!(n > 0)) return NaN;
-		let r = e === "stopLoss" ? -gs : _s;
+		let r = e === "stopLoss" ? -Cs : ws;
 		return this.round(n * (1 + (t.side === "buy" ? r : -r) / 100));
 	}
 	check() {
 		let e = this.draft;
 		if (!e) return;
-		let t = ls(e, this.lastPrice, this.rules), n = t.map((e) => this.problemText(e));
+		let t = gs(e, this.lastPrice, this.rules), n = t.map((e) => this.problemText(e));
 		n.join("\n") !== [...this.problemsEl.children].map((e) => e.textContent).join("\n") && this.problemsEl.replaceChildren(...n.map((e) => {
 			let t = document.createElement("p");
 			return t.textContent = e, t;
 		}));
 		for (let t of ["stopLoss", "takeProfit"]) {
-			let n = this.body.querySelector(`.tcw-ticket-away[data-for="${t}"]`), r = e[t], i = r === null ? null : ps(e, this.lastPrice, r, this.rules.multiplier);
+			let n = this.body.querySelector(`.tcw-ticket-away[data-for="${t}"]`), r = e[t], i = r === null ? null : bs(e, this.lastPrice, r, this.rules.multiplier);
 			n && (n.textContent = i ? `${this.signedNumber(i.pct, 2)}% · ${this.amount(i.amount)}` : "");
 		}
 		this.renderSummary(e), this.submit.disabled = t.length > 0, this.submit.textContent = this.t(e.side === "buy" ? "ticket.placeBuy" : "ticket.placeSell");
 	}
 	renderSummary(e) {
-		let t = ms(e, this.lastPrice, this.rules), n = [
+		let t = xs(e, this.lastPrice, this.rules), n = t.risk === null ? null : this.amount(t.risk), r = t.reward === null ? null : this.amount(t.reward), i = [
 			[
 				"value",
 				"ticket.value",
@@ -8301,14 +8390,14 @@ var hs = 229, gs = 1, _s = 2, vs = .999999999, ys = 0, bs = class {
 			[
 				"risk",
 				"ticket.risk",
-				t.risk === null ? null : this.amount(t.risk),
-				Ss(t.risk)
+				n,
+				n === null ? null : es(n)
 			],
 			[
 				"reward",
 				"ticket.reward",
-				t.reward === null ? null : this.amount(t.reward),
-				Ss(t.reward)
+				r,
+				r === null ? null : es(r)
 			],
 			[
 				"ratio",
@@ -8317,7 +8406,7 @@ var hs = 229, gs = 1, _s = 2, vs = .999999999, ys = 0, bs = class {
 				null
 			]
 		];
-		this.summaryEl.replaceChildren(...n.filter(([, , e]) => e !== null).map(([e, t, n, r]) => {
+		this.summaryEl.replaceChildren(...i.filter(([, , e]) => e !== null).map(([e, t, n, r]) => {
 			let i = document.createElement("div");
 			i.className = "tcw-ticket-summary-row", i.dataset.row = e;
 			let a = document.createElement("span");
@@ -8330,10 +8419,10 @@ var hs = 229, gs = 1, _s = 2, vs = .999999999, ys = 0, bs = class {
 		return this.callbacks.formatNumber ? this.callbacks.formatNumber(e, t) : e.toFixed(t);
 	}
 	signedNumber(e, t) {
-		return Cs(this.number(Math.abs(e), t), e);
+		return $o(this.number(Math.abs(e), t), e, this.number(0, t));
 	}
 	amount(e) {
-		return Cs(this.money(Math.abs(e)), e);
+		return $o(this.money(Math.abs(e)), e, this.money(0));
 	}
 	money(e) {
 		return (this.callbacks.formatAmount ?? this.callbacks.formatPrice)(e);
@@ -8346,27 +8435,20 @@ var hs = 229, gs = 1, _s = 2, vs = .999999999, ys = 0, bs = class {
 		}) : e === "lot" ? p(t, { lot: r ?? 1 }) : t;
 	}
 };
-function xs(e, t) {
+function Os(e, t) {
 	return t.dataset.ticketField = e, t;
 }
-function Ss(e) {
-	return e === null || e === 0 ? null : e > 0 ? "up" : "down";
-}
-function Cs(e, t) {
-	let n = e.replace(/^[-+−]/, "");
-	return /[1-9]/.test(n) ? t > 0 ? `+${n}` : t < 0 ? `-${n}` : n : n;
-}
-function ws(e) {
+function ks(e) {
 	let t = Math.abs(e);
 	return t > 0 ? 10 ** Math.floor(Math.log10(t / 100)) : 1;
 }
-function Ts(e, t) {
+function As(e, t) {
 	let n = Math.abs(t), r = n >= 10 || n === 0 ? 2 : n >= 1 ? 4 : Math.min(10, Math.ceil(-Math.log10(n)) + 3);
 	return Number(e.toFixed(r));
 }
 //#endregion
 //#region src/widget/WidgetNamePrompt.ts
-var Es = 0, Ds = class {
+var js = 0, Ms = class {
 	backdrop;
 	titleEl;
 	input;
@@ -8374,7 +8456,7 @@ var Es = 0, Ds = class {
 	request = null;
 	returnFocus = null;
 	busy = !1;
-	uid = ++Es;
+	uid = ++js;
 	constructor(e, t = h) {
 		this.t = t, this.backdrop = document.createElement("div"), this.backdrop.className = "tcw-modal-backdrop", this.backdrop.hidden = !0;
 		let n = !1;
@@ -8434,7 +8516,7 @@ var Es = 0, Ds = class {
 			}
 		}
 	}
-}, Os = 0, ks = class {
+}, Ns = 0, Ps = class {
 	backdrop;
 	search;
 	listEl;
@@ -8442,7 +8524,7 @@ var Es = 0, Ds = class {
 	confirming = null;
 	returnFocus = null;
 	loadSeq = 0;
-	uid = ++Os;
+	uid = ++Ns;
 	constructor(e, t, n = h) {
 		this.callbacks = t, this.t = n, this.backdrop = document.createElement("div"), this.backdrop.className = "tcw-modal-backdrop", this.backdrop.hidden = !0;
 		let r = !1;
@@ -8548,7 +8630,7 @@ var Es = 0, Ds = class {
 			this.confirming = null, await this.refresh(), this.isOpen() && this.search.focus();
 		}
 	}
-}, As = 5, js = class {
+}, Fs = 5, Is = class {
 	menu;
 	prompt;
 	dialog;
@@ -8556,7 +8638,7 @@ var Es = 0, Ds = class {
 	constructor(e, t) {
 		this.session = e, this.host = t;
 		let { root: n, t: r } = t;
-		this.menu = new M(n, r("toolbar.layouts")), this.prompt = new Ds(n, r), this.dialog = new ks(n, {
+		this.menu = new M(n, r("toolbar.layouts")), this.prompt = new Ms(n, r), this.dialog = new Ps(n, {
 			list: () => e.list(),
 			currentId: () => e.current()?.id ?? null,
 			onOpen: (e) => void this.open(e),
@@ -8634,7 +8716,7 @@ var Es = 0, Ds = class {
 		}
 		let { session: t } = this, { t: n, root: r } = this.host, i = [];
 		try {
-			i = (await t.list()).slice(0, As);
+			i = (await t.list()).slice(0, Fs);
 		} catch {}
 		if (this.destroyed) return;
 		let a = t.current(), o = [{
@@ -8672,13 +8754,13 @@ var Es = 0, Ds = class {
 	destroy() {
 		this.destroyed = !0, this.menu.destroy(), this.prompt.destroy(), this.dialog.destroy();
 	}
-}, Ms = 0, Ns = class {
+}, Ls = 0, Rs = class {
 	el;
 	input;
 	hint;
 	returnFocus = null;
 	constructor(e, t, n) {
-		this.labels = t, this.onApply = n, this.el = document.createElement("div"), this.el.className = "tcw-interval-input", this.el.hidden = !0, this.el.setAttribute("role", "dialog"), this.el.setAttribute("aria-label", t.title), this.input = document.createElement("input"), this.input.type = "text", this.input.className = "tcw-interval-field", this.input.autocomplete = "off", this.input.spellcheck = !1, this.input.maxLength = 6, this.input.setAttribute("aria-label", t.title), this.hint = document.createElement("div"), this.hint.className = "tcw-interval-hint", this.hint.setAttribute("role", "status"), this.hint.id = `tcw-interval-hint-${++Ms}`, this.input.setAttribute("aria-describedby", this.hint.id), this.el.append(this.input, this.hint), e.appendChild(this.el), this.input.addEventListener("input", () => this.check()), this.input.addEventListener("keydown", (e) => {
+		this.labels = t, this.onApply = n, this.el = document.createElement("div"), this.el.className = "tcw-interval-input", this.el.hidden = !0, this.el.setAttribute("role", "dialog"), this.el.setAttribute("aria-label", t.title), this.input = document.createElement("input"), this.input.type = "text", this.input.className = "tcw-interval-field", this.input.autocomplete = "off", this.input.spellcheck = !1, this.input.maxLength = 6, this.input.setAttribute("aria-label", t.title), this.hint = document.createElement("div"), this.hint.className = "tcw-interval-hint", this.hint.setAttribute("role", "status"), this.hint.id = `tcw-interval-hint-${++Ls}`, this.input.setAttribute("aria-describedby", this.hint.id), this.el.append(this.input, this.hint), e.appendChild(this.el), this.input.addEventListener("input", () => this.check()), this.input.addEventListener("keydown", (e) => {
 			e.key === "Enter" ? (e.preventDefault(), e.stopPropagation(), this.apply()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.close());
 		}), this.input.addEventListener("blur", () => this.close(!1));
 	}
@@ -8709,7 +8791,7 @@ var Es = 0, Ds = class {
 		}
 		this.input.setAttribute("aria-invalid", "true"), this.hint.textContent = this.labels.invalid;
 	}
-}, Ps = class {
+}, zs = class {
 	constructor(e = "tcw:indicator-templates") {
 		this.key = e;
 	}
@@ -8754,23 +8836,23 @@ var Es = 0, Ds = class {
 			localStorage.setItem(this.key, JSON.stringify(this.list().filter((t) => t.name !== e)));
 		} catch {}
 	}
-}, Y = [], Fs = /* @__PURE__ */ new Map(), Is = null, Ls = (e) => {
+}, Y = [], Bs = /* @__PURE__ */ new Map(), Vs = null, Hs = (e) => {
 	let t = e.target instanceof Node ? e.target : null;
-	t !== null && Y.some((e) => e.contains(t) || Fs.get(e)?.some((e) => e.contains(t))) || (Is = null);
+	t !== null && Y.some((e) => e.contains(t) || Bs.get(e)?.some((e) => e.contains(t))) || (Vs = null);
 };
-function Rs(e, t = []) {
+function Us(e, t = []) {
 	let n = () => {
-		Is = e;
+		Vs = e;
 	}, r = [e, ...t];
 	for (let e of r) e.addEventListener("pointerdown", n, !0);
-	return Y.length === 0 && document.addEventListener("pointerdown", Ls, !0), Y.push(e), Fs.set(e, t), () => {
+	return Y.length === 0 && document.addEventListener("pointerdown", Hs, !0), Y.push(e), Bs.set(e, t), () => {
 		for (let e of r) e.removeEventListener("pointerdown", n, !0);
 		let t = Y.indexOf(e);
-		t >= 0 && Y.splice(t, 1), Fs.delete(e), Y.length === 0 && document.removeEventListener("pointerdown", Ls, !0), Is === e && (Is = null);
+		t >= 0 && Y.splice(t, 1), Bs.delete(e), Y.length === 0 && document.removeEventListener("pointerdown", Hs, !0), Vs === e && (Vs = null);
 	};
 }
-function zs(e, t = !1) {
-	let n = Is?.isConnected ? Is : null;
+function Ws(e, t = !1) {
+	let n = Vs?.isConnected ? Vs : null;
 	if (!n) {
 		let e = document.activeElement;
 		n = e ? Y.find((t) => t.contains(e)) ?? null : null;
@@ -8783,27 +8865,27 @@ function X() {
 }
 //#endregion
 //#region src/widget/widgetLayout.ts
-var Bs = [
+var Gs = [
 	"regular",
 	"logarithmic",
 	"percentage",
 	"indexedTo100"
-], Vs = (e) => typeof e == "object" && !!e && !Array.isArray(e);
-function Hs(e) {
+], Ks = (e) => typeof e == "object" && !!e && !Array.isArray(e);
+function qs(e) {
 	let { theme: t, timestamp: n, ...r } = e;
 	return r;
 }
-function Us(e) {
-	return !Vs(e) || e.v !== 1 || typeof e.symbol != "string" || !e.symbol || typeof e.timeframe != "string" || !(le(e.timeframe) || Ce(e.timeframe) !== null) ? null : {
+function Js(e) {
+	return !Ks(e) || e.v !== 1 || typeof e.symbol != "string" || !e.symbol || typeof e.timeframe != "string" || !(le(e.timeframe) || Ce(e.timeframe) !== null) ? null : {
 		v: 1,
 		symbol: e.symbol,
 		timeframe: e.timeframe,
-		scaleMode: Bs.find((t) => t === e.scaleMode) ?? "regular",
+		scaleMode: Gs.find((t) => t === e.scaleMode) ?? "regular",
 		invertScale: e.invertScale === !0,
-		chart: Vs(e.chart) ? Hs(e.chart) : null
+		chart: Ks(e.chart) ? qs(e.chart) : null
 	};
 }
-function Ws(e) {
+function Ys(e) {
 	try {
 		return JSON.parse(e);
 	} catch {
@@ -8812,16 +8894,16 @@ function Ws(e) {
 }
 //#endregion
 //#region src/widget/DrawingFavoritesStore.ts
-function Gs() {
+function Xs() {
 	try {
 		return typeof localStorage < "u" ? localStorage : null;
 	} catch {
 		return null;
 	}
 }
-var Ks = class {
+var Zs = class {
 	favorites = [];
-	constructor(e = "tcw:draw-favorites", t = Gs()) {
+	constructor(e = "tcw:draw-favorites", t = Xs()) {
 		this.storageKey = e, this.storage = t, this.load();
 	}
 	list() {
@@ -8858,7 +8940,7 @@ var Ks = class {
 };
 //#endregion
 //#region src/widget/keyboardInset.ts
-function qs(e) {
+function Qs(e) {
 	let t = typeof window < "u" ? window.visualViewport : null;
 	if (!t) return () => {};
 	let n = -1, r = () => {
@@ -8872,7 +8954,7 @@ function qs(e) {
 		t.removeEventListener("resize", r), t.removeEventListener("scroll", r);
 	};
 }
-function Js(e, t) {
+function $s(e, t) {
 	let n = null, r = () => {
 		let r = e.clientWidth;
 		if (r === 0 && n !== null) return;
@@ -8885,9 +8967,9 @@ function Js(e, t) {
 }
 //#endregion
 //#region src/widget/WidgetGoToDate.ts
-var Ys = /^(\d{4})-(\d{2})-(\d{2})$/, Xs = /^(\d{2}):(\d{2})$/;
-function Zs(e, t, n) {
-	let r = Ys.exec(e), i = t ? Xs.exec(t) : [
+var ec = /^(\d{4})-(\d{2})-(\d{2})$/, tc = /^(\d{2}):(\d{2})$/;
+function nc(e, t, n) {
+	let r = ec.exec(e), i = t ? tc.exec(t) : [
 		"",
 		"00",
 		"00"
@@ -8911,7 +8993,7 @@ function Z(e, t) {
 		time: `${n(r.hours)}:${n(r.minutes)}`
 	};
 }
-var Q = ["date", "range"], Qs = 1, $s = class {
+var Q = ["date", "range"], rc = 1, ic = class {
 	backdrop = null;
 	fieldsEl = null;
 	tabButtons = [];
@@ -8928,7 +9010,7 @@ var Q = ["date", "range"], Qs = 1, $s = class {
 	start = null;
 	tab = "date";
 	returnFocus = null;
-	uid = Qs++;
+	uid = rc++;
 	constructor(e, t, n, r) {
 		this.layer = e, this.labels = t, this.locale = n, this.onSubmit = r;
 	}
@@ -9097,7 +9179,7 @@ var Q = ["date", "range"], Qs = 1, $s = class {
 	min: 233,
 	default: 296,
 	max: 377
-}, ec = .382, tc = (e) => !e.hidden && getComputedStyle(e).display !== "none", nc = class {
+}, ac = .382, oc = (e) => !e.hidden && getComputedStyle(e).display !== "none", sc = class {
 	element;
 	panel;
 	rail;
@@ -9143,7 +9225,7 @@ var Q = ["date", "range"], Qs = 1, $s = class {
 		let t = this.panel.contains(document.activeElement);
 		if (this.hideCurrent(), this.panel.hidden = !0, t) {
 			let t = this.pages.get(e)?.button;
-			(t && (this.options.railShown?.() ?? !0) && tc(t) ? t : this.options.focusAfterClose?.(e))?.focus();
+			(t && (this.options.railShown?.() ?? !0) && oc(t) ? t : this.options.focusAfterClose?.(e))?.focus();
 		}
 		this.options.onChange?.(null);
 	}
@@ -9160,7 +9242,7 @@ var Q = ["date", "range"], Qs = 1, $s = class {
 		return this.open_ === e;
 	}
 	syncRail() {
-		let e = [...this.pages.values()].map((e) => e.button), t = e.filter(tc), n = e.find((e) => e.tabIndex === 0);
+		let e = [...this.pages.values()].map((e) => e.button), t = e.filter(oc), n = e.find((e) => e.tabIndex === 0);
 		if (n && t.includes(n)) return;
 		let r = t.find((e) => e.getAttribute("aria-pressed") === "true") ?? t[0];
 		for (let t of e) t.tabIndex = t === r ? 0 : -1;
@@ -9177,7 +9259,7 @@ var Q = ["date", "range"], Qs = 1, $s = class {
 	}
 	maxNow() {
 		let e = this.options.room?.() ?? 0;
-		return e <= 0 ? $.max : Math.max($.min, Math.min($.max, Math.floor(e * ec)));
+		return e <= 0 ? $.max : Math.max($.min, Math.min($.max, Math.floor(e * ac)));
 	}
 	clamp(e, t = this.maxNow()) {
 		return Math.round(Math.min(t, Math.max($.min, e)));
@@ -9221,12 +9303,12 @@ var Q = ["date", "range"], Qs = 1, $s = class {
 		for (let { button: t } of this.pages.values()) t.tabIndex = t === e ? 0 : -1;
 	}
 	onRailKey(e) {
-		let t = [...this.pages.values()].map((e) => e.button).filter(tc), n = t.indexOf(e.target);
+		let t = [...this.pages.values()].map((e) => e.button).filter(oc), n = t.indexOf(e.target);
 		if (n < 0) return;
 		let r = e.key === "ArrowDown" ? (n + 1) % t.length : e.key === "ArrowUp" ? (n - 1 + t.length) % t.length : e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : -1;
 		r < 0 || (e.preventDefault(), t[r].focus());
 	}
-}, rc = [
+}, cc = [
 	"percent",
 	"scale",
 	"pane",
@@ -9234,7 +9316,7 @@ var Q = ["date", "range"], Qs = 1, $s = class {
 	"ratio",
 	"correlation",
 	"correlationLog"
-], ic = {
+], lc = {
 	percent: "compare.percent",
 	scale: "compare.ownScale",
 	pane: "compare.ownPane",
@@ -9243,16 +9325,16 @@ var Q = ["date", "range"], Qs = 1, $s = class {
 	correlation: "compare.way.correlation",
 	correlationLog: "compare.way.correlationLog"
 };
-function ac(e) {
-	return rc.includes(e);
+function uc(e) {
+	return cc.includes(e);
 }
-function oc(e) {
-	return rc.map((t) => ({
+function dc(e) {
+	return cc.map((t) => ({
 		id: t,
-		label: e(ic[t])
+		label: e(lc[t])
 	}));
 }
-function sc(e, t) {
+function fc(e, t) {
 	switch (e.id) {
 		case "compareSymbol": return t ? "pane" : "scale";
 		case "spread": return e.params.mode === "ratio" ? "ratio" : "spread";
@@ -9261,24 +9343,24 @@ function sc(e, t) {
 		default: return null;
 	}
 }
-function cc(e, t, n, r) {
+function pc(e, t, n, r) {
 	let i = e.map((e) => ({
 		id: e.id,
 		symbol: e.symbol,
-		way: r(ic.percent),
+		way: r(lc.percent),
 		color: e.color
 	}));
 	for (let e of t) {
-		let t = e.params.symbol, a = sc(e, n.has(e.instanceId));
+		let t = e.params.symbol, a = fc(e, n.has(e.instanceId));
 		!a || typeof t != "string" || !t || i.push({
 			id: e.instanceId,
 			symbol: t,
-			way: r(ic[a])
+			way: r(lc[a])
 		});
 	}
 	return i;
 }
-var lc = 8, uc = 4, dc = 3, fc = "[title]:not([title=\"\"]), [data-tip]:not([data-tip=\"\"])", pc = class {
+var mc = 8, hc = 4, gc = 3, _c = "[title]:not([title=\"\"]), [data-tip]:not([data-tip=\"\"])", vc = class {
 	el;
 	target = null;
 	source = null;
@@ -9289,9 +9371,9 @@ var lc = 8, uc = 4, dc = 3, fc = "[title]:not([title=\"\"]), [data-tip]:not([dat
 	observer;
 	constructor(e) {
 		this.root = e, this.el = document.createElement("div"), this.el.className = "tcw-tooltip", this.el.setAttribute("aria-hidden", "true"), e.appendChild(this.el), e.addEventListener("pointerover", this.onOver), e.addEventListener("pointerout", this.onOut), e.addEventListener("pointerdown", this.onPress, !0), e.addEventListener("keydown", this.onPress, !0), e.addEventListener("focusin", this.onFocus), e.addEventListener("focusout", this.onBlur), e.addEventListener("wheel", this.hide, { passive: !0 }), this.observer = new MutationObserver(() => {
-			this.pressed?.hasAttribute("title") && mc(this.pressed);
+			this.pressed?.hasAttribute("title") && yc(this.pressed);
 			let e = this.target;
-			!e || this.source !== "pointer" || !e.hasAttribute("title") || (mc(e), this.isVisible() && this.show(e));
+			!e || this.source !== "pointer" || !e.hasAttribute("title") || (yc(e), this.isVisible() && this.show(e));
 		}), this.observer.observe(e, {
 			subtree: !0,
 			attributes: !0,
@@ -9299,24 +9381,24 @@ var lc = 8, uc = 4, dc = 3, fc = "[title]:not([title=\"\"]), [data-tip]:not([dat
 		});
 	}
 	destroy() {
-		this.hide(), this.pressed && hc(this.pressed), this.observer.disconnect(), this.root.removeEventListener("pointerover", this.onOver), this.root.removeEventListener("pointerout", this.onOut), this.root.removeEventListener("pointerdown", this.onPress, !0), this.root.removeEventListener("keydown", this.onPress, !0), this.root.removeEventListener("focusin", this.onFocus), this.root.removeEventListener("focusout", this.onBlur), this.root.removeEventListener("wheel", this.hide), this.el.remove();
+		this.hide(), this.pressed && bc(this.pressed), this.observer.disconnect(), this.root.removeEventListener("pointerover", this.onOver), this.root.removeEventListener("pointerout", this.onOut), this.root.removeEventListener("pointerdown", this.onPress, !0), this.root.removeEventListener("keydown", this.onPress, !0), this.root.removeEventListener("focusin", this.onFocus), this.root.removeEventListener("focusout", this.onBlur), this.root.removeEventListener("wheel", this.hide), this.el.remove();
 	}
 	onOver = (e) => {
 		if (e.pointerType === "touch") return;
 		let t = this.tipTarget(e.target);
-		!t || t === this.pressed || t === this.target && this.source === "pointer" || (mc(t), this.schedule(t, "pointer", Date.now() < this.warmUntil || this.isVisible()));
+		!t || t === this.pressed || t === this.target && this.source === "pointer" || (yc(t), this.schedule(t, "pointer", Date.now() < this.warmUntil || this.isVisible()));
 	};
 	onOut = (e) => {
 		let t = e.relatedTarget, n = (e) => !!e && !!t && e.contains(t);
-		this.pressed && !n(this.pressed) && (hc(this.pressed), this.pressed = null), this.source === "pointer" && !n(this.target) && this.hide();
+		this.pressed && !n(this.pressed) && (bc(this.pressed), this.pressed = null), this.source === "pointer" && !n(this.target) && this.hide();
 	};
 	onPress = () => {
 		let e = this.target, t = this.source === "pointer";
-		this.warmUntil = 0, this.clearTimer(), cancelAnimationFrame(this.watchFrame), this.el.classList.remove("tcw-tooltip--visible"), this.target = null, this.source = null, this.pressed && this.pressed !== e && hc(this.pressed), this.pressed = t ? e : null;
+		this.warmUntil = 0, this.clearTimer(), cancelAnimationFrame(this.watchFrame), this.el.classList.remove("tcw-tooltip--visible"), this.target = null, this.source = null, this.pressed && this.pressed !== e && bc(this.pressed), this.pressed = t ? e : null;
 	};
 	onFocus = (e) => {
 		let t = this.tipTarget(e.target);
-		!t || !vc(t) || t === this.pressed || this.schedule(t, "focus", !0);
+		!t || !Cc(t) || t === this.pressed || this.schedule(t, "focus", !0);
 	};
 	onBlur = (e) => {
 		if (this.source !== "focus") return;
@@ -9324,16 +9406,16 @@ var lc = 8, uc = 4, dc = 3, fc = "[title]:not([title=\"\"]), [data-tip]:not([dat
 		this.target && t && this.target.contains(t) || this.hide();
 	};
 	hide = () => {
-		this.clearTimer(), cancelAnimationFrame(this.watchFrame), this.isVisible() && (this.warmUntil = Date.now() + 500), this.el.classList.remove("tcw-tooltip--visible"), this.target && this.source === "pointer" && hc(this.target), this.target = null, this.source = null;
+		this.clearTimer(), cancelAnimationFrame(this.watchFrame), this.isVisible() && (this.warmUntil = Date.now() + 500), this.el.classList.remove("tcw-tooltip--visible"), this.target && this.source === "pointer" && bc(this.target), this.target = null, this.source = null;
 	};
 	tipTarget(e) {
 		if (!(e instanceof Element)) return null;
-		let t = e.closest(fc);
+		let t = e.closest(_c);
 		return t && t !== this.el && this.root.contains(t) ? t : null;
 	}
 	schedule(e, t, n) {
 		let r = this.target;
-		if (this.clearTimer(), cancelAnimationFrame(this.watchFrame), r && r !== e && this.source === "pointer" && hc(r), this.target = e, this.source = t, n) {
+		if (this.clearTimer(), cancelAnimationFrame(this.watchFrame), r && r !== e && this.source === "pointer" && bc(r), this.target = e, this.source = t, n) {
 			this.show(e);
 			return;
 		}
@@ -9342,27 +9424,27 @@ var lc = 8, uc = 4, dc = 3, fc = "[title]:not([title=\"\"]), [data-tip]:not([dat
 		}, 300);
 	}
 	show(e) {
-		if (!_c(e)) {
+		if (!Sc(e)) {
 			this.hide();
 			return;
 		}
-		this.el.textContent = gc(e), this.place(e), this.el.classList.add("tcw-tooltip--visible"), this.watch(e);
+		this.el.textContent = xc(e), this.place(e), this.el.classList.add("tcw-tooltip--visible"), this.watch(e);
 	}
 	watch(e) {
 		cancelAnimationFrame(this.watchFrame), this.watchFrame = requestAnimationFrame(() => {
-			this.target === e && (_c(e) ? this.watch(e) : this.hide());
+			this.target === e && (Sc(e) ? this.watch(e) : this.hide());
 		});
 	}
 	place(e) {
-		let t = this.root.getBoundingClientRect(), n = e.getBoundingClientRect(), r = this.el.offsetWidth, i = this.el.offsetHeight, a = n.left - t.left, o = n.top - t.top, s = yc(e);
-		s === "bottom" && o + n.height + lc + i > t.height ? s = "top" : s === "top" && o - lc - i < 0 ? s = "bottom" : s === "right" && a + n.width + lc + r > t.width && (s = "left");
+		let t = this.root.getBoundingClientRect(), n = e.getBoundingClientRect(), r = this.el.offsetWidth, i = this.el.offsetHeight, a = n.left - t.left, o = n.top - t.top, s = wc(e);
+		s === "bottom" && o + n.height + mc + i > t.height ? s = "top" : s === "top" && o - mc - i < 0 ? s = "bottom" : s === "right" && a + n.width + mc + r > t.width && (s = "left");
 		let c, l;
-		s === "top" || s === "bottom" ? (c = a + n.width / 2 - r / 2, l = s === "bottom" ? o + n.height + lc : o - lc - i) : (c = s === "right" ? a + n.width + lc : a - lc - r, l = o + n.height / 2 - i / 2), c = Math.max(uc, Math.min(t.width - r - uc, c)), l = Math.max(uc, Math.min(t.height - i - uc, l)), this.el.style.left = `${Math.round(c)}px`, this.el.style.top = `${Math.round(l)}px`;
+		s === "top" || s === "bottom" ? (c = a + n.width / 2 - r / 2, l = s === "bottom" ? o + n.height + mc : o - mc - i) : (c = s === "right" ? a + n.width + mc : a - mc - r, l = o + n.height / 2 - i / 2), c = Math.max(hc, Math.min(t.width - r - hc, c)), l = Math.max(hc, Math.min(t.height - i - hc, l)), this.el.style.left = `${Math.round(c)}px`, this.el.style.top = `${Math.round(l)}px`;
 		let u = {
-			top: [0, dc],
-			bottom: [0, -dc],
-			left: [dc, 0],
-			right: [-dc, 0]
+			top: [0, gc],
+			bottom: [0, -gc],
+			left: [gc, 0],
+			right: [-gc, 0]
 		}[s];
 		this.el.style.setProperty("--tcw-tip-dx", `${u[0]}px`), this.el.style.setProperty("--tcw-tip-dy", `${u[1]}px`), this.el.dataset.side = s;
 	}
@@ -9373,32 +9455,32 @@ var lc = 8, uc = 4, dc = 3, fc = "[title]:not([title=\"\"]), [data-tip]:not([dat
 		this.showTimer !== null && (clearTimeout(this.showTimer), this.showTimer = null);
 	}
 };
-function mc(e) {
+function yc(e) {
 	let t = e.getAttribute("title");
 	t !== null && (e.dataset.tip = t, e.removeAttribute("title"));
 }
-function hc(e) {
+function bc(e) {
 	e.dataset.tip !== void 0 && !e.hasAttribute("title") && (e.setAttribute("title", e.dataset.tip), delete e.dataset.tip);
 }
-function gc(e) {
+function xc(e) {
 	return e.dataset.tip ?? e.getAttribute("title") ?? "";
 }
-function _c(e) {
+function Sc(e) {
 	return e.isConnected && e.getClientRects().length > 0 && !e.disabled;
 }
-function vc(e) {
+function Cc(e) {
 	try {
 		return e.matches(":focus-visible");
 	} catch {
 		return !1;
 	}
 }
-function yc(e) {
+function wc(e) {
 	return e.dataset.tipSide || (e.closest(".tcw-sidebar") ? "right" : e.closest(".tcw-statusbar, .tcw-replay-bar") ? "top" : "bottom");
 }
 //#endregion
 //#region src/widget/WidgetIndicatorLegend.ts
-var bc = 2, xc = class {
+var Tc = 2, Ec = class {
 	stack;
 	toggle;
 	rows = /* @__PURE__ */ new Map();
@@ -9440,7 +9522,7 @@ var bc = 2, xc = class {
 			e.key = r, e.el.style.left = `${Math.round(n.x)}px`, e.el.style.top = `${Math.round(n.y)}px`;
 			let i = this.labels, a = (t, r, i, a) => {
 				let o = e.buttons.get(t);
-				!r && document.activeElement === o && e.buttons.get("max").focus(), o.hidden = !r, o.innerHTML = A(i, 12), Sc(o, a ?? t, n.label);
+				!r && document.activeElement === o && e.buttons.get("max").focus(), o.hidden = !r, o.innerHTML = A(i, 12), Dc(o, a ?? t, n.label);
 			};
 			a("up", n.canMoveUp && !n.maximized, "arrowUp", i.paneUp), a("down", n.canMoveDown && !n.maximized, "arrowDown", i.paneDown), a("fold", !n.maximized, n.collapsed ? "chevronDown" : "chevronUp", n.collapsed ? i.paneExpand : i.paneCollapse), a("max", !0, n.maximized ? "minimize" : "maximize", n.maximized ? i.paneRestore : i.paneMaximize), e.el.dataset.collapsed = String(n.collapsed), e.el.dataset.maximized = String(n.maximized);
 		}
@@ -9505,7 +9587,7 @@ var bc = 2, xc = class {
 	}
 	fill(e, t) {
 		let n = `${t.label}|${t.visible}|${!!t.offInterval}`;
-		n !== e.state && (e.state = n, e.visible = t.visible, e.name.textContent = t.label, e.name.title = this.labels.settings, e.el.classList.toggle("tcw-ind-legend-row--hidden", !t.visible || !!t.offInterval), t.offInterval && this.labels.offInterval ? e.el.title = this.labels.offInterval : e.el.removeAttribute("title"), e.eye.innerHTML = A(t.visible ? "eye" : "eyeOff", 13), Sc(e.eye, t.visible ? this.labels.hide : this.labels.show, t.label), Sc(e.settings, this.labels.settings, t.label), e.more && (Sc(e.more, this.labels.more ?? "More", t.label), e.more.setAttribute("aria-haspopup", "menu")), Sc(e.remove, this.labels.remove, t.label));
+		n !== e.state && (e.state = n, e.visible = t.visible, e.name.textContent = t.label, e.name.title = this.labels.settings, e.el.classList.toggle("tcw-ind-legend-row--hidden", !t.visible || !!t.offInterval), t.offInterval && this.labels.offInterval ? e.el.title = this.labels.offInterval : e.el.removeAttribute("title"), e.eye.innerHTML = A(t.visible ? "eye" : "eyeOff", 13), Dc(e.eye, t.visible ? this.labels.hide : this.labels.show, t.label), Dc(e.settings, this.labels.settings, t.label), e.more && (Dc(e.more, this.labels.more ?? "More", t.label), e.more.setAttribute("aria-haspopup", "menu")), Dc(e.remove, this.labels.remove, t.label));
 		let r = t.values.map((e) => `${e.text}${e.color ?? ""}`).join("
");
 		r !== e.valuesKey && (e.valuesKey = r, e.values.replaceChildren(...t.values.map((e) => {
 			let t = document.createElement("span");
@@ -9523,22 +9605,22 @@ var bc = 2, xc = class {
 		return this.stack.querySelectorAll(":scope > .tcw-ind-legend-row").length;
 	}
 	renderToggle(e) {
-		let t = e >= bc;
+		let t = e >= Tc;
 		!t && this.collapsed && this.setCollapsed(!1);
 		let n = `${t}|${this.collapsed}|${e}`;
 		if (n === this.toggleKey || (this.toggleKey = n, this.toggle.hidden = !t, !t)) return;
 		let r = this.collapsed ? this.labels.expand : this.labels.collapse;
-		Sc(this.toggle, r, this.collapsed ? `(${e})` : void 0), this.toggle.setAttribute("aria-expanded", String(!this.collapsed));
+		Dc(this.toggle, r, this.collapsed ? `(${e})` : void 0), this.toggle.setAttribute("aria-expanded", String(!this.collapsed));
 		let i = A(this.collapsed ? "chevronDown" : "chevronUp", 12);
 		this.toggle.innerHTML = this.collapsed ? `${i}<span>${e}</span>` : i;
 	}
 };
-function Sc(e, t, n) {
+function Dc(e, t, n) {
 	e.title = t, e.setAttribute("aria-label", n ? `${t} ${n}` : t);
 }
 //#endregion
 //#region src/widget/legendValues.ts
-function Cc(e, t, n, r) {
+function Oc(e, t, n, r) {
 	if (!t) return [];
 	let i = e.plots;
 	if (!i) {
@@ -9568,20 +9650,20 @@ function Cc(e, t, n, r) {
 	}
 	return o;
 }
-var wc = /* @__PURE__ */ new Map();
-function Tc(e) {
-	let t = wc.get(e);
+var kc = /* @__PURE__ */ new Map();
+function Ac(e) {
+	let t = kc.get(e);
 	return t || (t = new Intl.NumberFormat(e, {
 		notation: "compact",
 		maximumFractionDigits: 2
-	}), wc.set(e, t)), t;
+	}), kc.set(e, t)), t;
 }
-function Ec(e, t = "en-US") {
-	return Math.abs(e) >= 1e6 ? Tc(t).format(e) : oe(e, Re(e), t);
+function jc(e, t = "en-US") {
+	return Math.abs(e) >= 1e6 ? Ac(t).format(e) : oe(e, Re(e), t);
 }
 //#endregion
 //#region src/widget/WidgetBracketBar.ts
-var Dc = class {
+var Mc = class {
 	el;
 	labelEl;
 	callbacks;
@@ -9609,7 +9691,7 @@ var Dc = class {
 	destroy() {
 		this.el.remove();
 	}
-}, Oc = class {
+}, Nc = class {
 	options;
 	audioCtx = null;
 	audioEl = null;
@@ -9672,7 +9754,7 @@ var Dc = class {
 };
 //#endregion
 //#region src/widget/ladderRows.ts
-function kc(e, t = 12) {
+function Pc(e, t = 12) {
 	let n = [...e.asks].sort((e, t) => e.price - t.price).slice(0, t), r = [...e.bids].sort((e, t) => t.price - e.price).slice(0, t), i = n.length > 0 ? n[0].price : null, a = r.length > 0 ? r[0].price : null, o = i !== null && a !== null ? (i + a) / 2 : null, s = /* @__PURE__ */ new Map(), c = (e) => {
 		let t = s.get(e);
 		return t || (t = {
@@ -9688,31 +9770,45 @@ function kc(e, t = 12) {
 	return {
 		rows: l,
 		maxVolume: u,
-		mid: o
+		mid: o,
+		spread: i !== null && a !== null ? i - a : null,
+		bestBid: a
 	};
 }
 //#endregion
 //#region src/widget/WidgetDepthLadder.ts
-var Ac = class {
+var Fc = 1e-9, Ic = class {
 	el;
+	colsEl;
 	bodyEl;
 	callbacks;
 	open = !1;
 	levels;
+	model = null;
+	orders = [];
+	drawn = [];
+	spreadEl;
+	placed = !1;
 	constructor(e, t, n = 12, r = h) {
-		this.t = r, this.callbacks = t, this.levels = n, this.el = document.createElement("div"), this.el.className = "tcw-ladder", k(this.el, "depthLadder"), this.el.hidden = !0;
+		this.t = r, this.callbacks = t, this.levels = n, this.el = document.createElement("section"), this.el.className = "tcw-ladder", this.el.setAttribute("aria-label", this.t("ladder.title")), k(this.el, "depthLadder"), this.el.hidden = !0;
 		let i = document.createElement("div");
 		i.className = "tcw-ladder-header";
-		let a = document.createElement("span");
-		a.textContent = this.t("ladder.title");
+		let a = document.createElement("h3");
+		a.className = "tcw-ladder-title", a.textContent = this.t("ladder.title");
 		let o = document.createElement("button");
-		o.type = "button", o.className = "tcw-ladder-close", o.setAttribute("aria-label", this.t("common.close")), o.innerHTML = A("x", 14), o.addEventListener("click", () => this.close()), i.appendChild(a), i.appendChild(o), this.el.appendChild(i);
-		let s = document.createElement("div");
-		s.className = "tcw-ladder-cols", s.innerHTML = [
-			this.t("ladder.bid"),
-			this.t("ladder.price"),
-			this.t("ladder.ask")
-		].map((e) => `<span>${j(e)}</span>`).join(""), this.el.appendChild(s), this.bodyEl = document.createElement("div"), this.bodyEl.className = "tcw-ladder-body", this.el.appendChild(this.bodyEl), e.appendChild(this.el);
+		o.type = "button", o.className = "tcw-ladder-close", o.setAttribute("aria-label", this.t("common.close")), o.innerHTML = A("x", 14), o.addEventListener("click", () => this.callbacks.onClose ? this.callbacks.onClose() : this.close()), i.append(a, o), this.colsEl = document.createElement("div"), this.colsEl.className = "tcw-ladder-cols";
+		for (let e of [
+			"ladder.bid",
+			"ladder.price",
+			"ladder.ask"
+		]) {
+			let t = document.createElement("span");
+			t.textContent = this.t(e), this.colsEl.appendChild(t);
+		}
+		this.bodyEl = document.createElement("div"), this.bodyEl.className = "tcw-ladder-body", this.spreadEl = document.createElement("div"), this.spreadEl.className = "tcw-ladder-spread", this.el.append(i, this.colsEl, this.bodyEl), e.appendChild(this.el);
+	}
+	get element() {
+		return this.el;
 	}
 	isOpen() {
 		return this.open;
@@ -9721,50 +9817,109 @@ var Ac = class {
 		this.open ? this.close() : this.openPanel();
 	}
 	openPanel() {
-		this.open = !0, this.el.hidden = !1, this.callbacks.onToggle?.(!0);
+		this.open = !0, this.placed = !1, this.el.hidden = !1, this.render(), this.callbacks.onToggle?.(!0);
 	}
 	close() {
-		this.open = !1, this.el.hidden = !0, this.callbacks.onToggle?.(!1);
+		this.open && (this.open = !1, this.el.hidden = !0, this.callbacks.onToggle?.(!1));
 	}
 	setData(e) {
-		if (!e) {
-			this.renderEmpty();
-			return;
-		}
-		this.render(kc(e, this.levels));
+		this.model = e ? Pc(e, this.levels) : null, this.render();
+	}
+	setOrders(e) {
+		this.orders = e, this.render();
 	}
 	destroy() {
 		this.el.remove();
 	}
-	renderEmpty() {
-		this.bodyEl.replaceChildren();
-		let e = document.createElement("div");
-		e.className = "tcw-ladder-empty", e.textContent = this.t("ladder.empty"), this.bodyEl.appendChild(e);
+	render() {
+		if (!this.open) return;
+		let e = this.model;
+		if (!e || e.rows.length === 0) {
+			let e = document.createElement("div");
+			e.className = "tcw-ladder-empty", e.textContent = this.t("ladder.empty"), this.bodyEl.replaceChildren(e), this.drawn = [];
+			return;
+		}
+		let t = Lc(e.rows);
+		e.rows.length === this.drawn.length && e.rows.every((e, t) => e.price === this.drawn[t].price) || (this.drawn = e.rows.map((e) => this.newRow(e.price)), this.bodyEl.replaceChildren(...this.drawn.map((e) => e.row)));
+		let n = e.maxVolume > 0 ? 100 / e.maxVolume : 0;
+		e.rows.forEach((e, r) => this.fillRow(this.drawn[r], e, n, this.nearness(e.price, t))), this.putSpread(e, t), this.placeSpread();
 	}
-	render(e) {
-		if (this.bodyEl.replaceChildren(), e.rows.length === 0) {
-			this.renderEmpty();
+	putSpread(e, t) {
+		let { spread: n, bestBid: r } = e, i = n === null || r === null ? -1 : e.rows.findIndex((e) => e.price < r + t);
+		if (n === null || i < 0) {
+			this.spreadEl.remove();
 			return;
 		}
-		let t = e.maxVolume > 0 ? 1 / e.maxVolume : 0;
-		for (let n of e.rows) {
-			let e = n.askVolume > 0, r = document.createElement("div");
-			r.className = "tcw-ladder-row";
-			let i = document.createElement("button");
-			i.type = "button", i.className = "tcw-ladder-cell tcw-ladder-bid", n.bidVolume > 0 ? (i.textContent = jc(n.bidVolume), i.style.setProperty("--w", `${(n.bidVolume * t * 100).toFixed(1)}%`), i.title = p(this.t("ladder.sellAt"), { price: this.callbacks.formatPrice(n.price) }), i.addEventListener("click", () => this.callbacks.onTrade("sell", n.price))) : i.disabled = !0;
-			let a = document.createElement("div");
-			a.className = `tcw-ladder-price ${e ? "tcw-ask" : "tcw-bid"}`, a.textContent = this.callbacks.formatPrice(n.price);
-			let o = document.createElement("button");
-			o.type = "button", o.className = "tcw-ladder-cell tcw-ladder-ask", n.askVolume > 0 ? (o.textContent = jc(n.askVolume), o.style.setProperty("--w", `${(n.askVolume * t * 100).toFixed(1)}%`), o.title = p(this.t("ladder.buyAt"), { price: this.callbacks.formatPrice(n.price) }), o.addEventListener("click", () => this.callbacks.onTrade("buy", n.price))) : o.disabled = !0, r.appendChild(i), r.appendChild(a), r.appendChild(o), this.bodyEl.appendChild(r);
+		this.spreadEl.textContent = p(this.t("ladder.spread"), { spread: this.callbacks.formatPrice(n) });
+		let a = this.drawn[i].row;
+		this.spreadEl.nextElementSibling !== a && this.bodyEl.insertBefore(this.spreadEl, a);
+	}
+	nearness(e, t) {
+		let n = this.callbacks.priceStep?.(e) ?? 0;
+		return n > 0 ? Math.min(n / 2, t) : t;
+	}
+	newRow(e) {
+		let t = document.createElement("div");
+		t.className = "tcw-ladder-row";
+		let n = document.createElement("div");
+		n.className = "tcw-ladder-price";
+		let r = document.createElement("span");
+		r.className = "tcw-ladder-figure", n.appendChild(r);
+		let i = this.newCell("sell", e), a = this.newCell("buy", e);
+		return t.append(i, n, a), {
+			price: e,
+			row: t,
+			bid: i,
+			ask: a,
+			cell: n,
+			figure: r
+		};
+	}
+	newCell(e, t) {
+		let n = document.createElement("button");
+		return n.type = "button", n.className = `tcw-ladder-cell ${e === "sell" ? "tcw-ladder-bid" : "tcw-ladder-ask"}`, n.addEventListener("click", () => this.callbacks.onTrade(e, t)), n;
+	}
+	fillRow(e, t, n, r) {
+		e.cell.className = `tcw-ladder-price ${t.askVolume > 0 ? "tcw-ask" : "tcw-bid"}`, e.figure.textContent = this.callbacks.formatPrice(t.price), this.fillCell(e.bid, "sell", t.bidVolume, t.price, n), this.fillCell(e.ask, "buy", t.askVolume, t.price, n);
+		for (let t of e.cell.querySelectorAll(".tcw-ladder-own")) t.remove();
+		for (let n of ["buy", "sell"]) {
+			let i = this.orders.filter((e) => e.side === n && Math.abs(e.price - t.price) < r).reduce((e, t) => e + t.quantity, 0);
+			if (i <= 0) continue;
+			let a = document.createElement("span");
+			a.className = "tcw-ladder-own", a.dataset.side = n, a.textContent = String(i);
+			let o = `${this.t(n === "buy" ? "ticket.buy" : "ticket.sell")} ${i}`;
+			a.setAttribute("aria-label", o), a.title = o, n === "buy" ? e.cell.insertBefore(a, e.figure) : e.cell.appendChild(a);
 		}
 	}
+	fillCell(e, t, n, r, i) {
+		if (!(n > 0)) {
+			e.disabled = !0, e.textContent = "", e.removeAttribute("aria-label"), e.title = "", e.style.removeProperty("--w");
+			return;
+		}
+		e.disabled = !1;
+		let a = Rc(n);
+		e.textContent = a, e.style.setProperty("--w", `${(n * i).toFixed(1)}%`);
+		let o = p(this.t(t === "sell" ? "ladder.sellAt" : "ladder.buyAt"), { price: this.callbacks.formatPrice(r) });
+		e.setAttribute("aria-label", `${a}, ${o}`), e.title = o;
+	}
+	placeSpread() {
+		let e = this.el;
+		if (this.placed || !this.spreadEl.isConnected || e.clientHeight === 0) return;
+		let t = e.getBoundingClientRect().top, n = this.colsEl.getBoundingClientRect().bottom - t, r = this.spreadEl.getBoundingClientRect().top - t;
+		e.scrollTop += r - n - (e.clientHeight - n - this.spreadEl.offsetHeight) / 2, this.placed = !0;
+	}
 };
-function jc(e) {
-	return e >= 1e3 ? (e / 1e3).toFixed(1) + "k" : e >= 1 ? e.toFixed(2).replace(/\.00$/, "") : e.toPrecision(2);
+function Lc(e) {
+	let t = Infinity;
+	for (let n = 1; n < e.length; n++) t = Math.min(t, Math.abs(e[n - 1].price - e[n].price));
+	return Number.isFinite(t) && t > 0 ? t / 2 : Fc;
+}
+function Rc(e) {
+	return e >= 1e3 ? `${Number((e / 1e3).toFixed(1))}k` : String(Number(e >= 1 ? e.toFixed(2) : e.toPrecision(2)));
 }
 //#endregion
 //#region src/widget/WidgetDataWindow.ts
-var Mc = class {
+var zc = class {
 	el;
 	bodyEl;
 	callbacks;
@@ -9806,11 +9961,11 @@ var Mc = class {
 		let t = this.callbacks.formatPrice, n = e.ohlc;
 		this.bodyEl.appendChild(this.row(this.t("dataWindow.open"), t(n.open))), this.bodyEl.appendChild(this.row(this.t("dataWindow.high"), t(n.high))), this.bodyEl.appendChild(this.row(this.t("dataWindow.low"), t(n.low))), this.bodyEl.appendChild(this.row(this.t("dataWindow.close"), t(n.close)));
 		let r = e.change > 0 ? "up" : e.change < 0 ? "down" : "", i = e.change > 0 ? "+" : "";
-		this.bodyEl.appendChild(this.row(this.t("dataWindow.change"), `${i}${t(e.change)} (${i}${e.changePct.toFixed(2)}%)`, r)), this.bodyEl.appendChild(this.row(this.t("dataWindow.volume"), Pc(n.volume)));
+		this.bodyEl.appendChild(this.row(this.t("dataWindow.change"), `${i}${t(e.change)} (${i}${e.changePct.toFixed(2)}%)`, r)), this.bodyEl.appendChild(this.row(this.t("dataWindow.volume"), Vc(n.volume)));
 		for (let t of e.indicators) {
 			let e = document.createElement("div");
 			e.className = "tcw-datawin-sub", e.textContent = t.name, this.bodyEl.appendChild(e);
-			for (let e of t.values) this.bodyEl.appendChild(this.row(e.key, Nc(e.value)));
+			for (let e of t.values) this.bodyEl.appendChild(this.row(e.key, Bc(e.value)));
 		}
 	}
 	row(e, t, n = "") {
@@ -9822,43 +9977,43 @@ var Mc = class {
 		return a.className = `tcw-datawin-value${n ? ` tcw-${n}` : ""}`, a.textContent = t, r.appendChild(i), r.appendChild(a), r;
 	}
 };
-function Nc(e) {
+function Bc(e) {
 	if (!Number.isFinite(e)) return "—";
 	let t = Math.abs(e);
 	return t >= 1e3 ? e.toFixed(2) : t >= 1 ? e.toFixed(4) : e.toPrecision(4);
 }
-function Pc(e) {
+function Vc(e) {
 	return e >= 1e9 ? (e / 1e9).toFixed(2) + "B" : e >= 1e6 ? (e / 1e6).toFixed(2) + "M" : e >= 1e3 ? (e / 1e3).toFixed(2) + "K" : e.toFixed(0);
 }
 //#endregion
 //#region src/widget/widgetShareState.ts
-var Fc = globalThis.Buffer;
-function Ic(e) {
-	if (Fc) return Fc.from(e, "utf8").toString("base64");
+var Hc = globalThis.Buffer;
+function Uc(e) {
+	if (Hc) return Hc.from(e, "utf8").toString("base64");
 	let t = new TextEncoder().encode(e), n = "";
 	for (let e of t) n += String.fromCharCode(e);
 	return btoa(n);
 }
-function Lc(e) {
-	if (Fc) return Fc.from(e, "base64").toString("utf8");
+function Wc(e) {
+	if (Hc) return Hc.from(e, "base64").toString("utf8");
 	let t = atob(e), n = new Uint8Array(t.length);
 	for (let e = 0; e < t.length; e++) n[e] = t.charCodeAt(e);
 	return new TextDecoder().decode(n);
 }
-function Rc(e) {
+function Gc(e) {
 	return e.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
-function zc(e) {
+function Kc(e) {
 	let t = e.replace(/-/g, "+").replace(/_/g, "/");
 	return t + (t.length % 4 == 0 ? "" : "=".repeat(4 - t.length % 4));
 }
-function Bc(e) {
-	return Rc(Ic(JSON.stringify(e)));
+function qc(e) {
+	return Gc(Uc(JSON.stringify(e)));
 }
-function Vc(e) {
+function Jc(e) {
 	if (!e) return null;
 	try {
-		let t = Lc(zc(e)), n = JSON.parse(t);
+		let t = Wc(Kc(e)), n = JSON.parse(t);
 		return !n || n.v !== 1 || typeof n.symbol != "string" ? null : {
 			v: 1,
 			symbol: n.symbol,
@@ -9872,20 +10027,20 @@ function Vc(e) {
 		return null;
 	}
 }
-var Hc = "tcw";
-function Uc(e) {
+var Yc = "tcw";
+function Xc(e) {
 	let t = e.startsWith("#") ? e.slice(1) : e;
 	for (let e of t.split("&")) {
 		let t = e.indexOf("=");
-		if (t > 0 && e.slice(0, t) === Hc) return decodeURIComponent(e.slice(t + 1));
+		if (t > 0 && e.slice(0, t) === Yc) return decodeURIComponent(e.slice(t + 1));
 	}
 	return null;
 }
-function Wc(e, t) {
+function Zc(e, t) {
 	let [n] = e.split("#");
-	return `${n}#${Hc}=${t}`;
+	return `${n}#${Yc}=${t}`;
 }
-var Gc = [
+var Qc = [
 	[
 		34,
 		16,
@@ -9942,7 +10097,7 @@ var Gc = [
 		30,
 		!0
 	]
-], Kc = class {
+], $c = class {
 	el;
 	label;
 	showTimer = null;
@@ -9952,7 +10107,7 @@ var Gc = [
 		let n = document.createElement("div");
 		n.className = "tcw-loading-card";
 		let r = document.createElement("div");
-		r.className = "tcw-loading-candles", r.setAttribute("aria-hidden", "true"), Gc.forEach(([e, t, n, i, a], o) => {
+		r.className = "tcw-loading-candles", r.setAttribute("aria-hidden", "true"), Qc.forEach(([e, t, n, i, a], o) => {
 			let s = document.createElement("span");
 			s.className = a ? "tcw-loading-candle tcw-loading-candle--up" : "tcw-loading-candle", s.style.setProperty("--tcw-body-top", `${e}px`), s.style.setProperty("--tcw-body-h", `${t}px`), s.style.setProperty("--tcw-wick-top", `${n}px`), s.style.setProperty("--tcw-wick-h", `${i}px`), s.style.setProperty("--tcw-delay", `${o * 110}ms`), r.appendChild(s);
 		}), n.appendChild(r);
@@ -9989,7 +10144,7 @@ var Gc = [
 	clearTimer() {
 		this.showTimer !== null && (clearTimeout(this.showTimer), this.showTimer = null);
 	}
-}, qc = 4e3, Jc = class {
+}, el = 4e3, tl = class {
 	el;
 	text;
 	hideTimer = null;
@@ -9999,7 +10154,7 @@ var Gc = [
 		n.className = "tcw-history-spinner", n.setAttribute("aria-hidden", "true"), this.text = document.createElement("span"), this.el.append(n, this.text), e.appendChild(this.el);
 	}
 	update(e) {
-		this.clearTimer(), e.state === "loading" ? this.show(this.texts.loading, !1) : e.state === "error" ? (this.show(this.texts.failed, !0), this.hideTimer = setTimeout(() => this.hide(), qc)) : this.hide();
+		this.clearTimer(), e.state === "loading" ? this.show(this.texts.loading, !1) : e.state === "error" ? (this.show(this.texts.failed, !0), this.hideTimer = setTimeout(() => this.hide(), el)) : this.hide();
 	}
 	destroy() {
 		this.clearTimer(), this.el.remove();
@@ -10013,13 +10168,13 @@ var Gc = [
 	clearTimer() {
 		this.hideTimer !== null && clearTimeout(this.hideTimer), this.hideTimer = null;
 	}
-}, Yc = "host:";
-function Xc(e, t) {
+}, nl = "host:";
+function rl(e, t) {
 	return [
 		...e,
 		...e.length > 0 && t.length > 0 ? ["separator"] : [],
 		...t.map((e, t) => ({
-			id: `${Yc}${t}`,
+			id: `${nl}${t}`,
 			label: e.label,
 			icon: e.icon,
 			danger: e.danger,
@@ -10027,12 +10182,12 @@ function Xc(e, t) {
 		}))
 	];
 }
-function Zc(e, t) {
-	return e.startsWith(Yc) ? (t[Number(e.slice(5))]?.onSelect(), !0) : !1;
+function il(e, t) {
+	return e.startsWith(nl) ? (t[Number(e.slice(5))]?.onSelect(), !0) : !1;
 }
 //#endregion
 //#region src/widget/hostHotkeys.ts
-var Qc = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent), $c = {
+var al = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent), ol = {
 	ctrl: "ctrl",
 	control: "ctrl",
 	cmd: "ctrl",
@@ -10043,7 +10198,7 @@ var Qc = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platfo
 	option: "alt",
 	opt: "alt",
 	shift: "shift"
-}, el = {
+}, sl = {
 	esc: "escape",
 	space: " ",
 	spacebar: " ",
@@ -10055,7 +10210,7 @@ var Qc = typeof navigator < "u" && /mac|iphone|ipad|ipod/i.test(navigator.platfo
 	return: "enter",
 	plus: "+"
 };
-function tl(e) {
+function cl(e) {
 	let t = e.split("+").map((e) => e.trim()), n = t.pop();
 	if (!n) return null;
 	let r = {
@@ -10065,23 +10220,23 @@ function tl(e) {
 		display: []
 	};
 	for (let e of t) {
-		let t = $c[e.toLowerCase()];
+		let t = ol[e.toLowerCase()];
 		if (!t) return null;
 		r[t] = !0;
 	}
 	let i = n.toLowerCase();
-	if ($c[i]) return null;
+	if (ol[i]) return null;
 	if (/^[a-z]$/.test(i)) r.code = `Key${i.toUpperCase()}`, r.char = i;
 	else if (/^[0-9]$/.test(i)) r.code = `Digit${i}`, r.char = i;
-	else if (r.key = el[i] ?? i, r.shift && r.key.length === 1) return null;
+	else if (r.key = sl[i] ?? i, r.shift && r.key.length === 1) return null;
 	return r.display = [
-		...r.ctrl ? [Qc ? "⌘" : "Ctrl"] : [],
+		...r.ctrl ? [al ? "⌘" : "Ctrl"] : [],
 		...r.alt ? ["Alt"] : [],
 		...r.shift ? ["Shift"] : [],
 		r.key === " " ? "Space" : n.length === 1 ? n.toUpperCase() : n
 	], r;
 }
-function nl(e, t) {
+function ll(e, t) {
 	if ((e.ctrlKey || e.metaKey) !== t.ctrl || e.altKey !== t.alt) return !1;
 	if (t.code !== void 0) {
 		if (e.shiftKey !== t.shift) return !1;
@@ -10091,54 +10246,56 @@ function nl(e, t) {
 	}
 	return t.shift && !e.shiftKey ? !1 : e.key.toLowerCase() === t.key;
 }
-var rl = new Set(/* @__PURE__ */ "escape(enter(delete(backspace(arrowleft(arrowright(arrowup(arrowdown(home(end(+(-(=( (,(.(ctrl+z(ctrl+shift+z(ctrl+y(ctrl+c(ctrl+v(ctrl+d(ctrl+g(ctrl+shift+g(ctrl+[(ctrl+]".split("("));
-function il(e) {
+var ul = new Set(/* @__PURE__ */ "escape(enter(delete(backspace(arrowleft(arrowright(arrowup(arrowdown(home(end(+(-(=( (,(.(ctrl+z(ctrl+shift+z(ctrl+y(ctrl+c(ctrl+v(ctrl+d(ctrl+g(ctrl+shift+g(ctrl+[(ctrl+]".split("("));
+function dl(e) {
 	let t = `${e.ctrl ? "ctrl+" : ""}${e.alt ? "alt+" : ""}${e.shift ? "shift+" : ""}${e.char ?? e.key}`;
-	return rl.has(t);
+	return ul.has(t);
 }
-function al(e) {
+function fl(e) {
 	let t = typeof e.composedPath == "function" ? e.composedPath()[0] : e.target;
 	return t instanceof HTMLElement ? t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName) : !1;
 }
 //#endregion
 //#region src/widget/ChartWidget.ts
-var ol = 48, sl = 5e4, cl = 100;
-function ll() {
+var pl = 48, ml = 5e4, hl = 100;
+function gl() {
 	return new Promise((e) => {
 		if (typeof requestAnimationFrame != "function" || document.hidden) {
 			setTimeout(e, 0);
 			return;
 		}
-		let t = setTimeout(e, cl);
+		let t = setTimeout(e, hl);
 		requestAnimationFrame(() => setTimeout(() => {
 			clearTimeout(t), e();
 		}, 0));
 	});
 }
-var ul = [
+var _l = [
 	"#4c8dff",
 	"#a57cff",
 	"#1398a8",
 	"#e25592",
 	"#8a93a3",
 	"#62c895"
-], dl = 864e5, fl = {
+], vl = 864e5, yl = {
 	alerts: "alerts",
 	objectTree: "objectTree",
 	dataWindow: "dataWindow",
-	symbolInfo: "symbolInfo"
-}, pl = 2, ml = {
+	symbolInfo: "symbolInfo",
+	depthLadder: "depthLadder"
+}, bl = 2, xl = {
 	alerts: "alerts",
 	objectTree: "objects",
-	symbolInfo: "symbolInfo"
+	symbolInfo: "symbolInfo",
+	depthLadder: "trade"
 };
-function hl(e) {
-	if (e.ctrlKey || e.metaKey || e.altKey || e.isComposing || e.keyCode === Cl || e.getModifierState?.("AltGraph")) return null;
+function Sl(e) {
+	if (e.ctrlKey || e.metaKey || e.altKey || e.isComposing || e.keyCode === Al || e.getModifierState?.("AltGraph")) return null;
 	if (/^[a-z]$/i.test(e.key)) return e.key;
 	let t = /^Key([A-Z])$/.exec(e.code ?? "");
 	return t && [...e.key].length === 1 && !/[\s\d]/.test(e.key) ? t[1].toLowerCase() : null;
 }
-var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
+var Cl = 4, wl = 7, Tl = 17, El = 3, Dl = [
 	"1m",
 	"3m",
 	"5m",
@@ -10148,10 +10305,10 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 	"2h",
 	"4h",
 	"1d"
-], xl = 5e3, Sl = () => {
+], Ol = 5e3, kl = () => {
 	let e = document.activeElement;
 	return e instanceof Element && e.closest("[role=\"dialog\"], [aria-modal=\"true\"], [role=\"menu\"]") !== null;
-}, Cl = 229, wl = 1e3, Tl = O.filter((e) => g[e] !== "color"), El = () => typeof document < "u" && document.hidden, Dl = 200, Ol = class {
+}, Al = 229, jl = 1e3, Ml = O.filter((e) => g[e] !== "color"), Nl = () => typeof document < "u" && document.hidden, Pl = 200, Fl = class {
 	chart;
 	state;
 	themeOf = {
@@ -10201,7 +10358,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 	symbolLoads = /* @__PURE__ */ new Map();
 	ui;
 	legendMenu = null;
-	templates = new Ps();
+	templates = new zs();
 	templatePrompt = null;
 	chartTemplates = new Xa();
 	chartTemplatePrompt = null;
@@ -10220,11 +10377,11 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 	dataWindow = null;
 	lastHoverIndex = null;
 	legendHoverIndex = null;
-	favoritesStore = new Ks();
-	indicatorFavorites = new Ks("tcw:indicator-favorites");
+	favoritesStore = new Zs();
+	indicatorFavorites = new Zs("tcw:indicator-favorites");
 	indicatorDefaults = new Ha();
-	timeframeFavorites = new Ks("tcw:tf-favorites");
-	customTimeframes = new Ks("tcw:tf-custom");
+	timeframeFavorites = new Zs("tcw:tf-favorites");
+	customTimeframes = new Zs("tcw:tf-custom");
 	timeframes = [];
 	watchlist = null;
 	watchlistSparkBuffer = /* @__PURE__ */ new Map();
@@ -10351,8 +10508,8 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			connectionState: t.adapter ? "connecting" : "disconnected",
 			connectionMessage: t.adapter ? this.t("status.connecting") : ""
 		}, rn(), this.root = document.createElement("div"), this.root.className = "tcw-root", this.root.dataset.tcwTheme = i ? "dark" : "light";
-		let m = t.dir === "ltr" || t.dir === "rtl" ? t.dir : zl(t.locale) ? "rtl" : "ltr";
-		this.root.dir = m, this.portal.dir = m, e.appendChild(this.root), this.tooltip = new pc(this.root), this.portal.className = "tcw-root tcw-portal", this.portal.dataset.tcwTheme = this.root.dataset.tcwTheme, this.stopKeyboardInset = qs([this.root, this.portal]), this.stopNarrow = Js(this.root, (e) => {
+		let m = t.dir === "ltr" || t.dir === "rtl" ? t.dir : Kl(t.locale) ? "rtl" : "ltr";
+		this.root.dir = m, this.portal.dir = m, e.appendChild(this.root), this.tooltip = new vc(this.root), this.portal.className = "tcw-root tcw-portal", this.portal.dataset.tcwTheme = this.root.dataset.tcwTheme, this.stopKeyboardInset = Qs([this.root, this.portal]), this.stopNarrow = $s(this.root, (e) => {
 			this.toolbar?.fit(), e || this.sidebar?.closeOverlay(), this.syncRail();
 		}), this.ui = G(t.ui);
 		let h = t.ui !== void 0;
@@ -10387,7 +10544,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			onToggleAccount: t.trading === !1 ? void 0 : () => this.toggleAccountPanel(),
 			onLayouts: t.layouts === !1 ? void 0 : (e) => void this.layoutsUI?.openMenu(e),
 			onBracket: t.trading === !1 ? void 0 : (e) => this.startBracket(e),
-			onToggleLadder: t.trading !== !1 && t.depthLadder ? () => this.depthLadder?.toggle() : void 0,
+			onToggleLadder: t.trading !== !1 && t.depthLadder ? () => this.toggleLadder() : void 0,
 			onOrderTicket: t.trading === !1 ? void 0 : () => this.openOrderTicket(),
 			onCompare: t.adapter && s.compareSymbols !== !1 ? () => this.handleAddCompare() : void 0,
 			onUndo: () => this.chart.undo(),
@@ -10420,16 +10577,16 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			onHideAll: (e) => {
 				this.chart.setDrawingsVisible(this.chart.getDrawings().map((e) => e.id), !e), this.refreshDrawingsState(), this.refreshObjects();
 			}
-		}, this.t), this.chartContainer = document.createElement("div"), this.chartContainer.className = "tcw-chart-container", this.chartContainer.dir = "ltr", g.appendChild(this.chartContainer), this.loading = new Kc(this.chartContainer, this.t("status.loading")), this.historyPill = new Jc(this.chartContainer, {
+		}, this.t), this.chartContainer = document.createElement("div"), this.chartContainer.className = "tcw-chart-container", this.chartContainer.dir = "ltr", g.appendChild(this.chartContainer), this.loading = new $c(this.chartContainer, this.t("status.loading")), this.historyPill = new tl(this.chartContainer, {
 			loading: this.t("history.loading"),
 			failed: this.t("history.failed")
-		}), this.dock = new nc(g, {
+		}), this.dock = new sc(g, {
 			labels: {
 				rail: this.t("dock.rail"),
 				resize: this.t("dock.resize")
 			},
-			savedWidth: () => Fl(),
-			saveWidth: (e) => Il(e),
+			savedWidth: () => Hl(),
+			saveWidth: (e) => Ul(e),
 			railShown: () => this.railShown(),
 			focusAfterClose: (e) => this.panelFocusTarget(e),
 			room: () => g.clientWidth
@@ -10474,7 +10631,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 				this.toolbar?.setActive("symbolInfo", e), e && (this.refreshSymbolInfo(), this.loadNews());
 			}
 		}), this.marketTimer = setInterval(() => this.refreshMarket(), 3e4), this.onPageShown = () => {
-			El() || this.refreshMarket();
+			Nl() || this.refreshMarket();
 		}, document.addEventListener("visibilitychange", this.onPageShown), this.dragDrop = new a(this.chartContainer, {
 			onData: (e, t, n) => {
 				this.setData(e);
@@ -10523,8 +10680,8 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 				onAuto: () => this.changeSettings({ autoScale: !this.chart.isAutoScale() })
 			}
 		}), this.clockTimer = setInterval(() => {
-			!El() && this.featureState.statusBar && this.featureState["statusBar.clock"] && this.statusBar?.tick();
-		}, wl), this.chart.on("priceRangeChange", () => this.refreshScaleSwitches()), this.refreshScaleSwitches(), this.goToDate = new $s(this.overlayHost, () => ({
+			!Nl() && this.featureState.statusBar && this.featureState["statusBar.clock"] && this.statusBar?.tick();
+		}, jl), this.chart.on("priceRangeChange", () => this.refreshScaleSwitches()), this.refreshScaleSwitches(), this.goToDate = new ic(this.overlayHost, () => ({
 			title: this.t("goTo.title"),
 			date: this.t("range.date"),
 			range: this.t("goTo.range"),
@@ -10575,7 +10732,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 				eraser: t ?? this.state.eraser,
 				zoomArea: n ?? this.state.zoomArea
 			}, this.updateUI();
-		}), this.chart.on("indicatorAdd", () => this.syncIndicatorsFromChart()), this.chart.on("indicatorRemove", () => this.syncIndicatorsFromChart()), this.chart.setPaneTitlesVisible(!this.featureState.indicatorLegend), this.indicatorLegend = new xc(this.chartContainer, {
+		}), this.chart.on("indicatorAdd", () => this.syncIndicatorsFromChart()), this.chart.on("indicatorRemove", () => this.syncIndicatorsFromChart()), this.chart.setPaneTitlesVisible(!this.featureState.indicatorLegend), this.indicatorLegend = new Ec(this.chartContainer, {
 			onToggleVisible: (e, t) => {
 				this.chart.setIndicatorVisible(e, t), this.scheduleLegend(), this.objectTree?.isOpen() && this.refreshObjects();
 			},
@@ -10630,7 +10787,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			if (this.replayBar?.getMode() !== "select" || !this.replayBar.isMounted()) return;
 			let t = e.payload.point;
 			this.positionReplayShade(t?.x ?? null);
-		}), this.dataWindow = new Mc(this.root, {
+		}), this.dataWindow = new zc(this.root, {
 			formatPrice: (e) => this.formatAlertPrice(e),
 			onClose: () => this.closePanelByHand("dataWindow")
 		}, this.t), this.chart.on("crosshairMove", (e) => {
@@ -10647,7 +10804,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			},
 			toWallTime: (e) => Z(e * ae(this.chart.getData()), this.displayTimezone()),
 			fromWallTime: (e, t) => {
-				let n = Zs(e, t, this.displayTimezone());
+				let n = nc(e, t, this.displayTimezone());
 				return n === null ? null : n / ae(this.chart.getData());
 			},
 			roundPrice: (e) => this.chart.roundPrice(e),
@@ -10740,12 +10897,12 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 				area: "priceAxisAdd",
 				price: i
 			});
-		}), this.chart.on("signalMarkerHover", (e) => this.showMarkerTip(e.payload)), this.intervalInput = new Ns(this.chartContainer, {
+		}), this.chart.on("signalMarkerHover", (e) => this.showMarkerTip(e.payload)), this.intervalInput = new Rs(this.chartContainer, {
 			title: this.t("interval.title"),
 			hint: this.t("interval.hint"),
 			invalid: this.t("interval.invalid")
 		}, (e) => this.selectTypedTimeframe(e)), t.layouts !== !1 && this.setupLayouts(t.layouts === !0 || t.layouts === void 0 ? {} : t.layouts), t.trading !== !1) {
-			this.orderTicket = new bs(this.root, {
+			this.orderTicket = new Ds(this.root, {
 				onSubmit: (e) => {
 					this.chart.placeOrderIntent(e), this.say(p(this.t("ticket.sent"), {
 						side: this.t(e.side === "buy" ? "ticket.buy" : "ticket.sell"),
@@ -10756,7 +10913,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 				formatPrice: (e) => this.formatAlertPrice(e),
 				formatAmount: (e) => this.formatMoney(e),
 				formatNumber: (e, t) => this.formatNumber(e, t)
-			}, this.t), this.accountPanel = new os(_, {
+			}, this.t), this.accountPanel = new ps(_, {
 				onClosePosition: (e) => this.chart.closePositionIntent(e),
 				onReversePosition: (e) => this.chart.reversePositionIntent(e),
 				onCancelOrder: (e) => this.chart.cancelOrderIntent(e),
@@ -10766,6 +10923,8 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 					let { date: t, time: n } = Z(e, this.displayTimezone());
 					return `${t} ${n}`;
 				},
+				formatAmount: (e) => this.formatMoney(e),
+				formatNumber: (e, t) => this.formatNumber(e, t),
 				onToggle: (e) => {
 					this.toolbar?.setActive("account", e), this.refreshAccount();
 				}
@@ -10778,28 +10937,38 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 				"indicatorUpdate"
 			]) this.chart.on(e, () => this.refreshAccountSoon());
 		}
-		t.trading !== !1 && (this.bracketBar = new Dc(this.chartContainer, {
-			onConfirm: () => this.chart.confirmBracket(),
-			onCancel: () => {
-				this.chart.cancelBracket(), this.bracketBar?.hide();
+		if (t.trading !== !1) {
+			if (this.bracketBar = new Mc(this.chartContainer, {
+				onConfirm: () => this.chart.confirmBracket(),
+				onCancel: () => {
+					this.chart.cancelBracket(), this.bracketBar?.hide();
+				}
+			}, this.t), this.chart.on("bracketPlace", (e) => {
+				let t = e.payload;
+				this.bracketBar?.hide(), this.say(p(this.t(t.side === "buy" ? "bracket.longPlaced" : "bracket.shortPlaced"), { rr: t.riskReward.toFixed(2) }));
+			}), t.depthLadder) {
+				this.depthLadder = new Ic(this.root, {
+					onTrade: (e, t) => {
+						this.chart.placeOrderIntent({
+							side: e,
+							type: "limit",
+							price: t
+						}), this.say(p(this.t(e === "buy" ? "order.buyLimit" : "order.sellLimit"), { price: this.formatAlertPrice(t) }));
+					},
+					formatPrice: (e) => this.formatAlertPrice(e),
+					priceStep: (e) => this.chart.getPriceStep(e),
+					onToggle: (e) => this.toolbar?.setActive("ladder", e),
+					onClose: () => this.closePanelByHand("depthLadder")
+				}, void 0, this.t);
+				let e = this.depthLadder;
+				this.chart.on("ordersChange", () => e.setOrders(this.chart.getOrders()));
 			}
-		}, this.t), this.chart.on("bracketPlace", (e) => {
-			let t = e.payload;
-			this.bracketBar?.hide(), this.say(p(this.t(t.side === "buy" ? "bracket.longPlaced" : "bracket.shortPlaced"), { rr: t.riskReward.toFixed(2) }));
-		}), t.depthLadder && (this.depthLadder = new Ac(this.root, {
-			onTrade: (e, t) => {
-				this.chart.placeOrderIntent({
-					side: e,
-					type: "limit",
-					price: t
-				}), this.say(p(this.t(e === "buy" ? "order.buyLimit" : "order.sellLimit"), { price: this.formatAlertPrice(t) }));
-			},
-			formatPrice: (e) => this.formatAlertPrice(e),
-			onToggle: (e) => this.toolbar?.setActive("ladder", e)
-		}, void 0, this.t)), this.chart.on("dataUpdate", (e) => {
-			let t = e.payload;
-			t && t.bracket === "cancelled" && this.bracketBar?.hide();
-		})), this.alertsPanel = new Hi(this.root, {
+			this.chart.on("dataUpdate", (e) => {
+				let t = e.payload;
+				t && t.bracket === "cancelled" && this.bracketBar?.hide();
+			});
+		}
+		this.alertsPanel = new Hi(this.root, {
 			onClose: () => this.closePanelByHand("alerts"),
 			onAdd: ({ price: e, condition: t, message: n, channel: r, label: i, options: a }) => {
 				try {
@@ -10819,7 +10988,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		}, this.t), this.chart.on("alertAdd", () => this.refreshAlerts()), this.chart.on("alertRemove", () => this.refreshAlerts()), this.chart.on("alertUpdate", () => this.refreshAlerts()), this.chart.on("alertExpired", (e) => {
 			let t = e.payload;
 			this.refreshAlerts(), this.featureState.alerts && this.say(p(this.t("alerts.expiredToast"), { text: t.message ?? this.alertText(t) }));
-		}), t.alertNotifications && (this.alertNotifier = new Oc(t.alertNotifications)), this.chart.on("alertTriggered", (e) => {
+		}), t.alertNotifications && (this.alertNotifier = new Nc(t.alertNotifications)), this.chart.on("alertTriggered", (e) => {
 			let t = e.payload;
 			if (this.refreshAlerts(), !this.featureState.alerts) return;
 			let n = `${this.alertText(t)}${t.message ? ` — ${t.message}` : ""}`;
@@ -10898,11 +11067,11 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			onAction: (e) => this.handleAction(e),
 			onClose: () => {}
 		}, this.overlayHost, this.t, {
-			list: () => Ml(),
-			add: (e) => Nl([e, ...Ml().filter((t) => t !== e)])
+			list: () => zl(),
+			add: (e) => Bl([e, ...zl().filter((t) => t !== e)])
 		}), this.boundGlobalKeydown = (e) => {
 			if (this.featureState.hotkeys && this.replayBar?.isMounted() && this.handleReplayKey(e) || this.handleHostHotkey(e)) return;
-			let t = zs(this.root), n = (e) => this.featureState.hotkeys && this.featureState[e];
+			let t = Ws(this.root), n = (e) => this.featureState.hotkeys && this.featureState[e];
 			if ((e.ctrlKey || e.metaKey) && e.key === "k") {
 				if (!t || !n("hotkeys.commandPalette") || !this.featureState.commandPalette) return;
 				e.preventDefault(), this.toggleCommandPalette();
@@ -10910,21 +11079,21 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 				if (!t || !n("hotkeys.symbolSearch") || !this.featureState.symbolSearch) return;
 				e.preventDefault(), this.openSymbolSearch();
 			} else if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && (e.key === "s" || e.key === "S")) {
-				if (!this.layoutSession || !n("hotkeys.save") || !this.featureState.layouts || X() || !zs(this.root, !0)) return;
+				if (!this.layoutSession || !n("hotkeys.save") || !this.featureState.layouts || X() || !Ws(this.root, !0)) return;
 				e.preventDefault(), this.saveLayout();
 			} else if (e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey && Di[e.code]) {
-				if (e.defaultPrevented || X() || !t || Sl() || !n("hotkeys.tools")) return;
+				if (e.defaultPrevented || X() || !t || kl() || !n("hotkeys.tools")) return;
 				e.preventDefault(), this.handleDrawingTool(Di[e.code]);
 			} else if (/^[0-9]$/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
-				if (e.defaultPrevented || !this.intervalInput || !n("intervalTyping") || X() || Sl() || !zs(this.root, !0)) return;
+				if (e.defaultPrevented || !this.intervalInput || !n("intervalTyping") || X() || kl() || !Ws(this.root, !0)) return;
 				let t = document.activeElement;
 				if (t && t !== document.body && !this.root.contains(t)) return;
 				e.preventDefault(), this.intervalInput.open(e.key);
-			} else if (hl(e) !== null) {
-				if (e.defaultPrevented || !n("symbolTyping") || !this.featureState.symbolSearch || X() || Sl() || !zs(this.root, !0)) return;
+			} else if (Sl(e) !== null) {
+				if (e.defaultPrevented || !n("symbolTyping") || !this.featureState.symbolSearch || X() || kl() || !Ws(this.root, !0)) return;
 				let t = document.activeElement;
 				if (t && t !== document.body && !this.root.contains(t)) return;
-				e.preventDefault(), this.openSymbolSearch(hl(e));
+				e.preventDefault(), this.openSymbolSearch(Sl(e));
 			} else if (e.altKey && !e.ctrlKey && !e.metaKey && (e.code === "KeyI" || e.code === "KeyG" || e.code === "KeyR")) {
 				if (X() || !t) return;
 				if (e.code === "KeyI") {
@@ -10938,10 +11107,10 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 				if (X() || !t || !n("hotkeys.help") || !this.featureState.hotkeySheet) return;
 				e.preventDefault(), this.openHotkeySheet();
 			}
-		}, document.addEventListener("keydown", this.boundGlobalKeydown), document.addEventListener("fullscreenchange", this.onFullscreenChange), this.unregisterKeys = Rs(this.root, [this.portal]), t.adapter ? (this.adapter = t.adapter, this.connectStream()) : this.chart.setDataTimeframe(this.state.timeframe), this.watchlist && (this.watchlistInterval = setInterval(() => this.tickWatchlist(), 1e3)), this.markSwitchedOff(), requestAnimationFrame(() => {
+		}, document.addEventListener("keydown", this.boundGlobalKeydown), document.addEventListener("fullscreenchange", this.onFullscreenChange), this.unregisterKeys = Us(this.root, [this.portal]), t.adapter ? (this.adapter = t.adapter, this.connectStream()) : this.chart.setDataTimeframe(this.state.timeframe), this.watchlist && (this.watchlistInterval = setInterval(() => this.tickWatchlist(), 1e3)), this.markSwitchedOff(), requestAnimationFrame(() => {
 			this.destroyed || (this.toolbar?.tidy(), this.sidebar?.tidy());
 		}), this.refreshMarket(), this.updateUI(), t.onReady?.(this.chart), t.shareUrl && typeof location < "u") {
-			let e = Uc(location.hash);
+			let e = Xc(location.hash);
 			e && this.importState(e);
 		}
 	}
@@ -10980,7 +11149,10 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		return t ? { ...t } : null;
 	}
 	openPanel(e) {
-		return !(e === "watchlist" ? this.watchlist !== null : this.featureState[fl[e]]) || !this.dock ? !1 : (this.dock.open(e), this.dock.current() === e);
+		return !this.hasPanel(e) || !this.dock ? !1 : (this.dock.open(e), this.dock.current() === e);
+	}
+	hasPanel(e) {
+		return e === "watchlist" ? this.watchlist !== null : e === "depthLadder" && this.depthLadder === null ? !1 : this.featureState[yl[e]];
 	}
 	closePanel() {
 		this.dock?.close();
@@ -10995,7 +11167,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		n && !this.featureState.symbolInfo || (n ? this.dock?.open("symbolInfo") : this.dock?.closePage("symbolInfo"));
 	}
 	refreshMarket() {
-		if (El()) return;
+		if (Nl()) return;
 		let e = de(this.chart.getSymbolInfo(), Date.now());
 		this.statusBar?.setMarket(e.state, this.t(e.state === "open" ? "symbolInfo.open" : "symbolInfo.closed")), this.refreshSymbolInfo();
 	}
@@ -11030,7 +11202,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		return this.options.locale || "en";
 	}
 	createWatchlist(e, t) {
-		let n = t.persist ? Ll() : null, r = new gi({
+		let n = t.persist ? Wl() : null, r = new gi({
 			lists: t.lists,
 			activeList: t.activeList,
 			symbols: this.symbols,
@@ -11118,7 +11290,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		t.refPrice !== void 0 && this.hostWatchlistRefPrice.set(e, t.refPrice), this.watchlist?.setEntry(e, t);
 	}
 	tickWatchlist() {
-		if (!this.watchlist || this.quotes.has(this.state.symbol) || El()) return;
+		if (!this.watchlist || this.quotes.has(this.state.symbol) || Nl()) return;
 		let e = this.chart.getData();
 		if (e.length === 0) return;
 		let t = e[e.length - 1], n = this.hostWatchlistRefPrice.get(this.state.symbol);
@@ -11229,7 +11401,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		for (; o > 0 && n[o - 1].time * r >= a;) o--;
 		let s = this.displayTimezone();
 		return Vn({
-			dayShare: n.slice(-Dl).some((e) => {
+			dayShare: n.slice(-Pl).some((e) => {
 				let t = e.time * r, n = new Date(t + fe(s, t) * 6e4).getUTCDay();
 				return n === 0 || n === 6;
 			}) ? 1 : 5 / 7,
@@ -11287,7 +11459,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			e.hide();
 			return;
 		}
-		let i = this.chartOffset(), a = this.chart.getPlotRect(), o = Rl(r.map((e) => this.chart.getDrawingRect(e.id))) ?? {
+		let i = this.chartOffset(), a = this.chart.getPlotRect(), o = Gl(r.map((e) => this.chart.getDrawingRect(e.id))) ?? {
 			x: a.x + a.width / 2,
 			y: a.y,
 			width: 0,
@@ -11329,7 +11501,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		});
 	}
 	promptSaveDrawingTemplate(e, t) {
-		this.drawingTemplatePrompt ??= new Ds(this.root, this.t), this.drawingTemplatePrompt.open({
+		this.drawingTemplatePrompt ??= new Ms(this.root, this.t), this.drawingTemplatePrompt.open({
 			title: this.t("drawingSettings.saveTemplateTitle"),
 			submitLabel: this.t("common.save"),
 			placeholder: this.drawingToolName(t.type),
@@ -11365,11 +11537,11 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			id: e,
 			type: s.type,
 			selected: o
-		}) ?? [] : [], l = Xc(a, c);
+		}) ?? [] : [], l = rl(a, c);
 		if (l.length === 0) return;
 		let u = this.chartContainer.getBoundingClientRect(), d = this.root.getBoundingClientRect();
 		this.drawingMenu.open(l, u.left - d.left + t, u.top - d.top + n, (t) => {
-			Zc(t, c) || this.runDrawingMenuAction(e, o, t);
+			il(t, c) || this.runDrawingMenuAction(e, o, t);
 		});
 	}
 	runDrawingMenuAction(e, t, n) {
@@ -11463,11 +11635,11 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 	}
 	openChartMenu(e, t, n, r) {
 		if (!this.chartMenu) return;
-		let i = this.options.chartMenuItems?.(r) ?? [], a = Xc(e, i);
+		let i = this.options.chartMenuItems?.(r) ?? [], a = rl(e, i);
 		if (a.length === 0) return;
 		let o = this.chartContainer.getBoundingClientRect(), s = this.root.getBoundingClientRect();
 		this.chartMenu.open(a, o.left - s.left + t, o.top - s.top + n, (e) => {
-			Zc(e, i) || (e.startsWith("tz:") ? this.changeSettings({ timezone: e.slice(3) }) : this.runChartMenuAction(e, r));
+			il(e, i) || (e.startsWith("tz:") ? this.changeSettings({ timezone: e.slice(3) }) : this.runChartMenuAction(e, r));
 		});
 	}
 	setFeatures(e) {
@@ -11499,7 +11671,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			["dataWindow", () => this.dock?.closePage("dataWindow")],
 			["accountPanel", () => this.toggleAccountPanel(!1)],
 			["orderTicket", () => this.orderTicket?.close()],
-			["depthLadder", () => this.depthLadder?.close()],
+			["depthLadder", () => this.dock?.closePage("depthLadder")],
 			["goToDate", () => this.goToDate?.close()],
 			["settings", () => this.settings?.close()],
 			["indicatorSettings", () => this.indicatorSettings?.close()],
@@ -11521,9 +11693,9 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		for (let [n, r] of t) e(n) && r();
 	}
 	addHotkey(e) {
-		let t = tl(e.keys);
+		let t = cl(e.keys);
 		if (!t) return console.warn(`[ChartWidget] Can't read the shortcut "${e.keys}": modifiers (Ctrl, Alt, Shift) and a key, joined by +.`), null;
-		il(t) && console.warn(`[ChartWidget] The chart answers ${e.keys} itself (drawings, scrolling or zoom): both will run.`);
+		dl(t) && console.warn(`[ChartWidget] The chart answers ${e.keys} itself (drawings, scrolling or zoom): both will run.`);
 		let n = {
 			spec: e,
 			parsed: t
@@ -11533,17 +11705,17 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		} };
 	}
 	handleHostHotkey(e) {
-		if (this.hostHotkeys.length === 0 || !this.featureState.hotkeys || e.isComposing || e.keyCode === Cl || e.getModifierState?.("AltGraph") || e.defaultPrevented || X() || al(e) || Sl()) return !1;
-		let t = this.hostHotkeys.find((t) => nl(e, t.parsed));
+		if (this.hostHotkeys.length === 0 || !this.featureState.hotkeys || e.isComposing || e.keyCode === Al || e.getModifierState?.("AltGraph") || e.defaultPrevented || X() || fl(e) || kl()) return !1;
+		let t = this.hostHotkeys.find((t) => ll(e, t.parsed));
 		if (!t) return !1;
 		let n = !t.parsed.ctrl && !t.parsed.alt;
-		if (!zs(this.root, n)) return !1;
+		if (!Ws(this.root, n)) return !1;
 		let r = document.activeElement;
 		return n && r && r !== document.body && !this.root.contains(r) ? !1 : (e.preventDefault(), t.spec.onPress(e), !0);
 	}
 	keepingLook(e) {
 		this.settingsEdit && this.settings?.close();
-		let t = this.chart.getOverrides?.({ layer: "user" }) ?? {}, n = Object.fromEntries(Tl.filter((e) => t[e] !== void 0).map((e) => [e, t[e]]));
+		let t = this.chart.getOverrides?.({ layer: "user" }) ?? {}, n = Object.fromEntries(Ml.filter((e) => t[e] !== void 0).map((e) => [e, t[e]]));
 		e(), Object.keys(n).length > 0 && this.chart.applyOverrides(n, { layer: "user" });
 	}
 	sheetKeyOn(e) {
@@ -11596,7 +11768,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 				let r = e.items();
 				if (r.length === 0) return;
 				let i = t.getBoundingClientRect(), a = this.root.getBoundingClientRect();
-				n.open(Xc([], r), i.left - a.left, i.bottom - a.top + 2, (e) => Zc(e, r), t);
+				n.open(rl([], r), i.left - a.left, i.bottom - a.top + 2, (e) => il(e, r), t);
 			}
 		});
 		return r.setAttribute("aria-haspopup", "menu"), r.setAttribute("aria-expanded", "false"), t.tidy(), {
@@ -11835,7 +12007,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 				from: r(a.from),
 				to: r(a.to)
 			},
-			withTime: !(S(this.state.timeframe) >= dl),
+			withTime: !(S(this.state.timeframe) >= vl),
 			max: o,
 			today: o
 		});
@@ -11845,12 +12017,12 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		if (t.length === 0) return;
 		let r = ae(t);
 		if (e.kind === "date") {
-			let i = Zs(e.date, e.time, n);
+			let i = nc(e.date, e.time, n);
 			if (i === null) return;
 			this.chart.goToTime(i / r), i / r < t[0].time && this.say(this.t("range.beforeData"));
 			return;
 		}
-		let i = Zs(e.from.date, e.from.time, n), a = Zs(e.to.date, e.to.time, n);
+		let i = nc(e.from.date, e.from.time, n), a = nc(e.to.date, e.to.time, n);
 		i === null || a === null || (this.chart.setVisibleRange(i / r, a / r), Math.min(i, a) / r < t[0].time && this.say(this.t("range.beforeData")));
 	}
 	pinnedTimeframes() {
@@ -11899,7 +12071,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 				this.say(this.t("templates.nothing"), "error");
 				return;
 			}
-			this.templatePrompt ??= new Ds(this.root, this.t), this.templatePrompt.open({
+			this.templatePrompt ??= new Ms(this.root, this.t), this.templatePrompt.open({
 				title: this.t("templates.saveTitle"),
 				submitLabel: this.t("common.save"),
 				placeholder: this.t("templates.namePlaceholder"),
@@ -11925,9 +12097,9 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 	}
 	async switchLocalTimeframe() {
 		if (!this.baseSeries) return;
-		let e = ++this.localSeq, t = this.lastLocalSwitchMs >= ol || this.baseSeries.length >= sl;
+		let e = ++this.localSeq, t = this.lastLocalSwitchMs >= pl || this.baseSeries.length >= ml;
 		try {
-			if (t && (this.loading.begin(this.chart.getData().length > 0, !0), await ll(), e !== this.localSeq || this.destroyed)) return;
+			if (t && (this.loading.begin(this.chart.getData().length > 0, !0), await gl(), e !== this.localSeq || this.destroyed)) return;
 			this.applyTimeframeData();
 		} finally {
 			e === this.localSeq && this.loading.end();
@@ -11972,6 +12144,9 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			connectionMessage: t
 		}, this.updateUI();
 	}
+	toggleLadder() {
+		!this.depthLadder || !this.featureState.depthLadder || this.dock?.toggle("depthLadder");
+	}
 	toggleAlerts() {
 		!this.alertsPanel || !this.featureState.alerts || this.dock?.toggle("alerts");
 	}
@@ -11984,7 +12159,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			id: e.id,
 			params: e.params
 		}));
-		return Bc({
+		return qc({
 			v: 1,
 			symbol: this.state.symbol,
 			timeframe: this.state.timeframe,
@@ -11995,7 +12170,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		});
 	}
 	async importState(e) {
-		let t = Vc(e);
+		let t = Jc(e);
 		return t ? (t.symbol && t.symbol !== this.state.symbol && await this.setSymbol(t.symbol), t.timeframe && t.timeframe !== this.state.timeframe && await this.setTimeframe(t.timeframe), t.chartType && this.applyChartType(t.chartType), this.chart.setScaleMode(t.scaleMode), this.chart.applyIndicatorSetup(t.indicators.map((e, t) => ({
 			id: e.id,
 			instanceId: `shared_${t}`,
@@ -12007,7 +12182,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		this.say(e ? this.t("toast.imageCopied") : this.t("toast.imageCopyFailed"), e ? "info" : "error");
 	}
 	async copyShareLink() {
-		let e = Wc(typeof location < "u" ? location.href : "", this.exportState());
+		let e = Zc(typeof location < "u" ? location.href : "", this.exportState());
 		try {
 			await navigator.clipboard.writeText(e), this.say(this.t("toast.linkCopied"));
 		} catch {
@@ -12120,6 +12295,16 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			parts: ["dock.symbolInfo", "symbolInfo"],
 			onShow: () => i.open(),
 			onHide: () => i.close()
+		});
+		let a = this.depthLadder;
+		a && e.addPage({
+			id: "depthLadder",
+			label: this.t("ladder.title"),
+			icon: "ladder",
+			element: a.element,
+			parts: ["dock.depthLadder", "depthLadder"],
+			onShow: () => a.openPanel(),
+			onHide: () => a.close()
 		}), this.syncRail(), this.fitDockToWidth(), typeof ResizeObserver < "u" && (this.dockObserver = new ResizeObserver(() => this.fitDockToWidth()), this.dockObserver.observe(this.root));
 	}
 	fitDockToWidth() {
@@ -12137,7 +12322,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		this.toolbar?.setRailed("alerts", e && this.featureState["dock.alerts"]), this.toolbar?.setRailed("objects", e && this.featureState["dock.objectTree"]), this.toolbar?.fit();
 	}
 	panelFocusTarget(e) {
-		let t = ml[e], n = t ? this.root.querySelector(`.tcw-toolbar [data-role="${t}"]`) : null, r = this.root.hasAttribute("data-tcw-narrow");
+		let t = xl[e], n = t ? this.root.querySelector(`.tcw-toolbar [data-role="${t}"]`) : null, r = this.root.hasAttribute("data-tcw-narrow");
 		return n && !n.hidden && !(r && n.classList.contains("tcw-toolbar-overflow")) ? n : this.root.querySelector(".tcw-toolbar-more") ?? this.chartContainer;
 	}
 	closePanelByHand(e) {
@@ -12155,7 +12340,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			defaults: n.descriptor.defaultConfig,
 			params: n.params,
 			inputs: n.descriptor.inputs,
-			lineSources: kl(e, t),
+			lineSources: Il(e, t),
 			plots: n.descriptor.plots,
 			colors: r?.colors,
 			lineWidth: r?.lineWidths[0],
@@ -12197,11 +12382,11 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 				symbols: this.symbols,
 				current: this.state.symbol,
 				search: this.symbolSearchFn(),
-				ways: oc(this.t),
+				ways: dc(this.t),
 				way: this.compareWay,
 				compared: this.comparedNow(),
 				onAdd: (e, t) => {
-					ac(t) && (this.compareWay = t, this.addCompareSymbol(e, t));
+					uc(t) && (this.compareWay = t, this.addCompareSymbol(e, t));
 				},
 				onRemove: (e) => {
 					this.compares.some((t) => t.id === e) ? this.handleRemoveCompare(e) : this.chart.removeIndicator(e);
@@ -12211,7 +12396,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 	}
 	comparedNow() {
 		let e = new Set(this.chart.getIndicatorPanes().flatMap((e) => e.instanceIds));
-		return cc(this.compares, this.chart.getActiveIndicators(), e, this.t);
+		return pc(this.compares, this.chart.getActiveIndicators(), e, this.t);
 	}
 	refreshCompareDialog() {
 		this.symbolSearch?.isComparing() && this.symbolSearch.setCompared(this.comparedNow());
@@ -12235,7 +12420,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		try {
 			let t = await Ge(this.adapter).fetchHistory(e, this.state.timeframe, this.options.historyLimit ?? 500);
 			if (this.destroyed || this.compares.some((t) => t.symbol === e)) return;
-			let r = ul[this.compares.length % ul.length];
+			let r = _l[this.compares.length % _l.length];
 			this.compares.length === 0 && this.chart.setCompareMode("percent"), this.chart.addCompareSymbol(n, e, t, r), this.compares = [...this.compares, {
 				id: n,
 				symbol: e,
@@ -12330,7 +12515,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		return typeof a == "number" && Number.isFinite(a) ? a : null;
 	}
 	formatMoney(e) {
-		return this.formatNumber(e, Math.min(Se(this.chart.getPriceStep()), pl));
+		return this.formatNumber(e, Math.min(Se(this.chart.getPriceStep()), bl));
 	}
 	formatNumber(e, t) {
 		let n = this.settingsState.numberLocale || void 0;
@@ -12658,7 +12843,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		t && (this.touchSettings(Object.keys(t.settings), O), this.applySettings(t.settings), this.chart.resetOverrides([...O], { layer: "user" }), this.chart.applyOverrides(t.style, { layer: "user" }), this.settings?.refresh(this.settingsState), this.say(p(this.t("templates.applied"), { name: e })));
 	}
 	promptSaveChartTemplate() {
-		this.chartTemplatePrompt ??= new Ds(this.overlayHost(), this.t), this.chartTemplatePrompt.open({
+		this.chartTemplatePrompt ??= new Ms(this.overlayHost(), this.t), this.chartTemplatePrompt.open({
 			title: this.t("settings.saveTemplateTitle"),
 			submitLabel: this.t("common.save"),
 			placeholder: this.t("settings.templatePlaceholder"),
@@ -12695,7 +12880,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		return this.state.timeframe;
 	}
 	captureLayout() {
-		let e = this.chart.saveState(), t = e ? Ws(e) : null, n = t && typeof t == "object" ? Hs(t) : null;
+		let e = this.chart.saveState(), t = e ? Ys(e) : null, n = t && typeof t == "object" ? qs(t) : null;
 		return {
 			v: 1,
 			symbol: this.state.symbol,
@@ -12708,7 +12893,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 	async restoreLayout(e) {
 		if (e.symbol !== this.state.symbol && await this.setSymbol(e.symbol), e.timeframe !== this.state.timeframe && await this.setTimeframe(e.timeframe), !this.destroyed) {
 			if (e.chart) {
-				this.chart.loadState(JSON.stringify(Hs(e.chart)));
+				this.chart.loadState(JSON.stringify(qs(e.chart)));
 				let t = e.chart.chartType;
 				typeof t == "string" && (this.state = {
 					...this.state,
@@ -12725,7 +12910,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		return JSON.stringify(this.captureLayout());
 	}
 	async applyLayoutContent(e) {
-		let t = Us(Ws(e));
+		let t = Js(Ys(e));
 		return t ? (await this.restoreLayout(t), !0) : !1;
 	}
 	setupLayouts(e) {
@@ -12744,7 +12929,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			onChange: () => this.toolbar?.setLayout(t.current()?.name ?? null, t.isDirty()),
 			onError: () => this.say(this.t("layouts.saveFailed"), "error")
 		});
-		this.layoutSession = t, this.layoutsUI = new js(t, {
+		this.layoutSession = t, this.layoutsUI = new Is(t, {
 			root: this.root,
 			t: this.t,
 			saveKeys: () => this.keysShown("hotkeys.save", `${kr}+S`),
@@ -12918,7 +13103,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 	}
 	replayStepOptions() {
 		let e = S(this.state.timeframe);
-		return bl.filter((t) => {
+		return Dl.filter((t) => {
 			let n = S(t);
 			return !(n < e) || e % n !== 0 ? !1 : this.adapter ? Ue(this.adapter, t) : this.baseSeries !== null && this.baseTimeframeMs > 0 && n >= this.baseTimeframeMs && n % this.baseTimeframeMs === 0;
 		});
@@ -12928,7 +13113,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		if (this.replayStepsCache?.key === t) return this.replayStepsCache.steps;
 		let n = null;
 		if (this.adapter) {
-			let t = Math.max(1, Math.round(S(this.state.timeframe) / S(e))), r = Math.min(xl, Math.max(this.chart.getData().length, 100) * t);
+			let t = Math.max(1, Math.round(S(this.state.timeframe) / S(e))), r = Math.min(Ol, Math.max(this.chart.getData().length, 100) * t);
 			try {
 				n = await Ge(this.adapter).fetchHistory(this.state.symbol, e, r);
 			} catch {
@@ -13099,26 +13284,26 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			row: n
 		}));
 		let a = this.settingsState.numberLocale || "en-US", o = this.chart.getActiveIndicators().map((t) => {
-			let n = i.get(t.instanceId) ?? null, o = r >= 0 ? this.chart.getIndicatorOutput(t.instanceId)?.series?.[r] : null, s = this.chart.getIndicatorStyle(t.instanceId), c = t.visible && t.shown === !1, l = c ? [] : Cc(t.descriptor, o, s?.colors ?? [], s?.plots);
+			let n = i.get(t.instanceId) ?? null, o = r >= 0 ? this.chart.getIndicatorOutput(t.instanceId)?.series?.[r] : null, s = this.chart.getIndicatorStyle(t.instanceId), c = t.visible && t.shown === !1, l = c ? [] : Oc(t.descriptor, o, s?.colors ?? [], s?.plots);
 			return {
 				instanceId: t.instanceId,
 				label: e(t.id, t.params, t.descriptor.defaultConfig, t.descriptor.shortName),
 				visible: t.visible,
 				offInterval: c,
 				values: l.map((e) => ({
-					text: n ? Ec(e.value, a) : this.chart.formatPrice(e.value),
+					text: n ? jc(e.value, a) : this.chart.formatPrice(e.value),
 					color: e.color
 				})),
 				pane: n ? {
-					x: n.x + gl,
-					y: n.y + Math.min(_l + n.row * vl, Math.max(_l, n.height - vl)),
-					width: n.width - 2 * gl
+					x: n.x + Cl,
+					y: n.y + Math.min(wl + n.row * Tl, Math.max(wl, n.height - Tl)),
+					width: n.width - 2 * Cl
 				} : null
 			};
 		}), s = this.chart.getPlotRect(), c = this.chart.getMaximizedPane(), l = (e) => o.find((t) => t.instanceId === e)?.label ?? "", u = this.chart.getIndicatorPanes().map((e) => ({
 			instanceId: e.instanceId,
-			x: e.rect.x + e.rect.width - gl,
-			y: e.rect.y + yl,
+			x: e.rect.x + e.rect.width - Cl,
+			y: e.rect.y + El,
 			label: l(e.instanceId),
 			collapsed: this.chart.isPaneCollapsed(e.instanceId),
 			maximized: c === e.instanceId,
@@ -13126,7 +13311,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 			canMoveDown: this.chart.canMovePane(e.instanceId, 1)
 		}));
 		this.indicatorLegend.update(o, {
-			left: s.x + gl,
+			left: s.x + Cl,
 			top: this.chart.getLegendBottom() + 1
 		}, u);
 	}
@@ -13172,11 +13357,11 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		let u = this.chart.getActiveIndicators().find((t) => t.instanceId === e)?.id ?? "", d = this.options.indicatorMenuItems?.({
 			instanceId: e,
 			indicatorId: u
-		}) ?? [], f = Xc(c, d);
+		}) ?? [], f = rl(c, d);
 		if (f.length === 0) return;
 		let p = t.getBoundingClientRect(), m = this.root.getBoundingClientRect();
 		n.open(f, p.left - m.left, p.bottom - m.top + 2, (t) => {
-			Zc(t, d) || (t === "settings" ? this.openIndicatorSettings(e) : t === "remove" ? this.handleRemoveIndicator(e) : t.startsWith("move:") && this.chart.moveIndicatorToPane(e, t.slice(5)), this.scheduleLegend());
+			il(t, d) || (t === "settings" ? this.openIndicatorSettings(e) : t === "remove" ? this.handleRemoveIndicator(e) : t.startsWith("move:") && this.chart.moveIndicatorToPane(e, t.slice(5)), this.scheduleLegend());
 		}, t);
 	}
 	updateUI() {
@@ -13201,7 +13386,7 @@ var gl = 4, _l = 7, vl = 17, yl = 3, bl = [
 		return !0;
 	}
 };
-function kl(t, n) {
+function Il(t, n) {
 	let r = (e) => {
 		let t = We(e.descriptor);
 		return t && pe(e.params[t])?.instanceId || null;
@@ -13224,42 +13409,42 @@ function kl(t, n) {
 	}
 	return a;
 }
-var Al = "tcw:recentCommands", jl = 10;
-function Ml() {
+var Ll = "tcw:recentCommands", Rl = 10;
+function zl() {
 	try {
-		let e = JSON.parse(Ll()?.getItem(Al) ?? "[]");
-		return Array.isArray(e) ? e.filter((e) => typeof e == "string").slice(0, jl) : [];
+		let e = JSON.parse(Wl()?.getItem(Ll) ?? "[]");
+		return Array.isArray(e) ? e.filter((e) => typeof e == "string").slice(0, Rl) : [];
 	} catch {
 		return [];
 	}
 }
-function Nl(e) {
+function Bl(e) {
 	try {
-		Ll()?.setItem(Al, JSON.stringify(e.slice(0, jl)));
+		Wl()?.setItem(Ll, JSON.stringify(e.slice(0, Rl)));
 	} catch {}
 }
-var Pl = "tcw:dockWidth";
-function Fl() {
+var Vl = "tcw:dockWidth";
+function Hl() {
 	try {
-		let e = Number(Ll()?.getItem(Pl) ?? NaN);
+		let e = Number(Wl()?.getItem(Vl) ?? NaN);
 		return Number.isFinite(e) && e > 0 ? e : null;
 	} catch {
 		return null;
 	}
 }
-function Il(e) {
+function Ul(e) {
 	try {
-		Ll()?.setItem(Pl, String(e));
+		Wl()?.setItem(Vl, String(e));
 	} catch {}
 }
-function Ll() {
+function Wl() {
 	try {
 		return typeof localStorage < "u" ? localStorage : null;
 	} catch {
 		return null;
 	}
 }
-function Rl(e) {
+function Gl(e) {
 	let t = e.filter((e) => e !== null);
 	if (t.length === 0) return null;
 	let n = Math.min(...t.map((e) => e.x)), r = Math.min(...t.map((e) => e.y)), i = Math.max(...t.map((e) => e.x + e.width)), a = Math.max(...t.map((e) => e.y + e.height));
@@ -13270,26 +13455,26 @@ function Rl(e) {
 		height: a - r
 	};
 }
-function zl(e) {
+function Kl(e) {
 	return !!e && /^(ar|he|iw|fa|ur|ps|yi|dv|ckb|sd|ug)(-|$)/i.test(e);
 }
 //#endregion
 //#region src/widget/ChartWidgetGrid.ts
-var Bl = {
+var ql = {
 	symbol: !1,
 	interval: !1,
 	crosshair: !0,
 	time: !1,
 	drawings: !1,
 	replay: !1
-}, Vl = [
+}, Jl = [
 	"symbol",
 	"interval",
 	"crosshair",
 	"time",
 	"drawings",
 	"replay"
-], Hl = {
+], Yl = {
 	"1x1": {
 		cols: 1,
 		rows: 1
@@ -13323,25 +13508,25 @@ var Bl = {
 		rows: 3
 	}
 };
-function Ul(e) {
-	return typeof e == "string" && Object.prototype.hasOwnProperty.call(Hl, e);
+function Xl(e) {
+	return typeof e == "string" && Object.prototype.hasOwnProperty.call(Yl, e);
 }
-function Wl(e) {
+function Zl(e) {
 	return JSON.parse(JSON.stringify(e));
 }
-function Gl(e, t, n = 16) {
+function Ql(e, t, n = 16) {
 	let r = (20 - 2 * (e - 1)) / e, i = (20 - 2 * (t - 1)) / t, a = "";
 	for (let n = 0; n < t; n++) for (let t = 0; t < e; t++) a += `<rect x="${2 + t * (r + 2)}" y="${2 + n * (i + 2)}" width="${r}" height="${i}" rx="1"/>`;
 	return `<svg width="${n}" height="${n}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">${a}</svg>`;
 }
-function Kl(e) {
+function $l(e) {
 	if (typeof e != "object" || !e) return null;
 	let t = e;
-	if (t.v !== 1 || t.kind !== "grid" || !Ul(t.layout) || !Array.isArray(t.cells)) return null;
-	let n = t.cells.map(Us);
+	if (t.v !== 1 || t.kind !== "grid" || !Xl(t.layout) || !Array.isArray(t.cells)) return null;
+	let n = t.cells.map(Js);
 	if (n.some((e) => e === null)) return null;
-	let r = typeof t.sync == "object" && t.sync !== null ? t.sync : {}, i = { ...Bl };
-	for (let e of Vl) typeof r[e] == "boolean" && (i[e] = r[e]);
+	let r = typeof t.sync == "object" && t.sync !== null ? t.sync : {}, i = { ...ql };
+	for (let e of Jl) typeof r[e] == "boolean" && (i[e] = r[e]);
 	let a = typeof t.active == "number" && Number.isInteger(t.active) ? t.active : 0;
 	return {
 		v: 1,
@@ -13352,7 +13537,7 @@ function Kl(e) {
 		cells: n
 	};
 }
-var ql = class {
+var eu = class {
 	root;
 	cellsEl;
 	cells = [];
@@ -13378,17 +13563,17 @@ var ql = class {
 	destroyed = !1;
 	unregisterKeys = () => {};
 	onKeyDown = (e) => {
-		!(e.ctrlKey || e.metaKey) || e.altKey || e.shiftKey || e.key !== "s" && e.key !== "S" || !this.layoutsUI || X() || !zs(this.root, !0) || (e.preventDefault(), this.layoutsUI.save());
+		!(e.ctrlKey || e.metaKey) || e.altKey || e.shiftKey || e.key !== "s" && e.key !== "S" || !this.layoutsUI || X() || !Ws(this.root, !0) || (e.preventDefault(), this.layoutsUI.save());
 	};
 	constructor(e, t = {}) {
-		this.options = t, this.layout = Ul(t.layout) ? t.layout : "1x2", this.sync = {
-			...Bl,
+		this.options = t, this.layout = Xl(t.layout) ? t.layout : "1x2", this.sync = {
+			...ql,
 			...t.sync
-		}, this.t = d(f(t.widget?.locale, t.widget?.messages)), rn(), this.root = document.createElement("div"), this.root.className = "tcw-root tcw-grid", this.root.dataset.tcwTheme = t.widget?.theme === "light" ? "light" : "dark", K(this.root, G(t.widget?.ui), { variables: t.widget?.ui !== void 0 }), t.bar !== !1 && this.root.appendChild(this.buildBar()), this.cellsEl = document.createElement("div"), this.cellsEl.className = "tcw-grid-cells", this.root.appendChild(this.cellsEl), e.appendChild(this.root), this.stopNarrow = Js(this.root), this.applyShape();
+		}, this.t = d(f(t.widget?.locale, t.widget?.messages)), rn(), this.root = document.createElement("div"), this.root.className = "tcw-root tcw-grid", this.root.dataset.tcwTheme = t.widget?.theme === "light" ? "light" : "dark", K(this.root, G(t.widget?.ui), { variables: t.widget?.ui !== void 0 }), t.bar !== !1 && this.root.appendChild(this.buildBar()), this.cellsEl = document.createElement("div"), this.cellsEl.className = "tcw-grid-cells", this.root.appendChild(this.cellsEl), e.appendChild(this.root), this.stopNarrow = $s(this.root), this.applyShape();
 		for (let e = 0; e < this.shapeCount(); e++) this.cells.push(this.createCell(e));
 		this.markActive();
 		let n = this.cells[0]?.el.querySelector(".tcw-root")?.dataset.tcwTheme;
-		n && (this.root.dataset.tcwTheme = n), t.layouts !== !1 && this.setupLayouts(t.layouts === !0 || t.layouts === void 0 ? {} : t.layouts), this.unregisterKeys = Rs(this.root), document.addEventListener("keydown", this.onKeyDown);
+		n && (this.root.dataset.tcwTheme = n), t.layouts !== !1 && this.setupLayouts(t.layouts === !0 || t.layouts === void 0 ? {} : t.layouts), this.unregisterKeys = Us(this.root), document.addEventListener("keydown", this.onKeyDown);
 	}
 	get relaying() {
 		return this.relayDepth > 0;
@@ -13420,7 +13605,7 @@ var ql = class {
 		return this.layout;
 	}
 	setLayout(e) {
-		if (e === this.layout || !Ul(e)) return;
+		if (e === this.layout || !Xl(e)) return;
 		this.layout = e;
 		let t = this.shapeCount();
 		for (; this.cells.length > t;) {
@@ -13510,7 +13695,7 @@ var ql = class {
 		return JSON.stringify(this.captureLayout());
 	}
 	async applyLayoutContent(e) {
-		let t = Kl(Ws(e));
+		let t = $l(Ys(e));
 		return t ? (await this.restoreLayout(t), !0) : !1;
 	}
 	destroy() {
@@ -13521,17 +13706,17 @@ var ql = class {
 		}
 	}
 	shapeCount() {
-		let { cols: e, rows: t } = Hl[this.layout];
+		let { cols: e, rows: t } = Yl[this.layout];
 		return e * t;
 	}
 	applyShape() {
-		let { cols: e, rows: t } = Hl[this.layout];
+		let { cols: e, rows: t } = Yl[this.layout];
 		this.cellsEl.style.gridTemplateColumns = `repeat(${e}, minmax(0, 1fr))`, this.cellsEl.style.gridTemplateRows = `repeat(${t}, minmax(0, 1fr))`;
 	}
 	createCell(e) {
 		let t = document.createElement("div");
 		t.className = "tcw-grid-cell", t.setAttribute("role", "region"), t.setAttribute("aria-label", p(this.t("grid.chart"), { n: e + 1 })), this.cellsEl.appendChild(t);
-		let n = this.options.widget ?? {}, r = this.options.cells?.[e] ?? {}, i = this.cells[this.active]?.widget, a = {}, o = new Ol(t, {
+		let n = this.options.widget ?? {}, r = this.options.cells?.[e] ?? {}, i = this.cells[this.active]?.widget, a = {}, o = new Fl(t, {
 			...n,
 			...r,
 			...i && this.sync.symbol ? { symbol: i.getSymbol() } : {},
@@ -13585,7 +13770,7 @@ var ql = class {
 					t.replaySeekToTime(n);
 					return;
 				}
-				let r = Jl(t.getData(), n);
+				let r = tu(t.getData(), n);
 				r >= 0 && t.replayStart({
 					startIndex: r,
 					paused: !0
@@ -13630,7 +13815,7 @@ var ql = class {
 	copyDrawings(e) {
 		let t = e.widget.getSymbol(), n = e.widget.getChart().getDrawings();
 		this.quietly(() => {
-			for (let r of this.cells) r !== e && r.widget.getSymbol() === t && r.widget.getChart().setDrawings(Wl(n));
+			for (let r of this.cells) r !== e && r.widget.getSymbol() === t && r.widget.getChart().setDrawings(Zl(n));
 		});
 	}
 	mergeDrawings() {
@@ -13642,7 +13827,7 @@ var ql = class {
 				let e = /* @__PURE__ */ new Map();
 				for (let n of t) for (let t of n.widget.getChart().getDrawings()) e.has(t.id) || e.set(t.id, t);
 				let n = [...e.values()];
-				for (let e of t) e.widget.getChart().setDrawings(Wl(n));
+				for (let e of t) e.widget.getChart().setDrawings(Zl(n));
 			}
 		});
 	}
@@ -13678,20 +13863,20 @@ var ql = class {
 		e.className = "tcw-grid-bar", e.setAttribute("role", "toolbar"), e.setAttribute("aria-label", this.t("grid.bar")), this.tabsEl = document.createElement("div"), this.tabsEl.className = "tcw-grid-group tcw-grid-tabs", this.root.classList.add("tcw-grid-has-tabs"), this.tabsEl.setAttribute("role", "group"), this.tabsEl.setAttribute("aria-label", this.t("grid.charts")), e.appendChild(this.tabsEl);
 		let t = document.createElement("div");
 		t.className = "tcw-grid-group", t.setAttribute("role", "group"), t.setAttribute("aria-label", this.t("grid.layout"));
-		let n = this.options.layoutChoices?.filter(Ul) ?? Object.keys(Hl);
+		let n = this.options.layoutChoices?.filter(Xl) ?? Object.keys(Yl);
 		for (let e of n) {
-			let { cols: n, rows: r } = Hl[e], i = n * r === 1 ? this.t("grid.single") : p(this.t("grid.layoutOption"), {
+			let { cols: n, rows: r } = Yl[e], i = n * r === 1 ? this.t("grid.single") : p(this.t("grid.layoutOption"), {
 				count: n * r,
 				cols: n,
 				rows: r
 			}), a = document.createElement("button");
-			a.type = "button", a.className = "tcw-btn-icon", a.title = i, a.setAttribute("aria-label", i), a.innerHTML = Gl(n, r), a.addEventListener("click", () => this.setLayout(e)), this.layoutButtons.set(e, a), t.appendChild(a);
+			a.type = "button", a.className = "tcw-btn-icon", a.title = i, a.setAttribute("aria-label", i), a.innerHTML = Ql(n, r), a.addEventListener("click", () => this.setLayout(e)), this.layoutButtons.set(e, a), t.appendChild(a);
 		}
 		let r = document.createElement("div");
 		r.className = "tcw-grid-group", r.setAttribute("role", "group"), r.setAttribute("aria-label", this.t("grid.sync"));
 		let i = document.createElement("span");
 		i.className = "tcw-grid-label", i.innerHTML = `${A("link", 13)}<span>${j(this.t("grid.sync"))}</span>`, r.appendChild(i);
-		for (let e of Vl) {
+		for (let e of Jl) {
 			let t = document.createElement("button");
 			t.type = "button", t.className = "tcw-btn tcw-grid-sync", t.textContent = this.t(`grid.sync.${e}`), t.title = this.t(`grid.sync.${e}.hint`), t.addEventListener("click", () => this.setSync({ [e]: !this.sync[e] })), this.syncButtons.set(e, t), r.appendChild(t);
 		}
@@ -13738,7 +13923,7 @@ var ql = class {
 			onChange: () => this.renderLayoutsButton(),
 			onError: () => this.toast(this.t("layouts.saveFailed"), "error")
 		});
-		this.session = t, this.layoutsUI = new js(t, {
+		this.session = t, this.layoutsUI = new Is(t, {
 			root: this.root,
 			t: this.t,
 			toast: (e, t) => this.toast(e, t),
@@ -13752,12 +13937,12 @@ var ql = class {
 		this.cells[this.active]?.widget.toast(e, t);
 	}
 };
-function Jl(e, t) {
+function tu(e, t) {
 	let n = -1;
 	for (let r = 0; r < e.length && e[r].time < t; r++) n = r;
 	return n;
 }
 //#endregion
-export { _ as CHART_TYPE_ICONS, Ol as ChartWidget, ql as ChartWidgetGrid, Bl as DEFAULT_GRID_SYNC, ee as DRAWING_TOOL_ICONS, l as EN_MESSAGES, Hl as GRID_SHAPES, s as LayoutSession, i as MAX_LAYOUT_NAME, ie as UI_ICONS, m as VI_MESSAGES, zt as WIDGET_FEATURES, Qi as WIDGET_UI_PRESETS, K as applyWidgetUI, o as cleanLayoutName, cn as createChartTypeIcon, A as createIcon, sn as createToolIcon, u as findWidgetLocale, se as iconSvg, r as localStorageLayouts, t as memoryLayouts, Kl as readGridLayout, mi as readWatchlists, Us as readWidgetLayout, c as registerWidgetLocale, G as resolveWidgetUI, oa as widgetUIVariables };
+export { _ as CHART_TYPE_ICONS, Fl as ChartWidget, eu as ChartWidgetGrid, ql as DEFAULT_GRID_SYNC, ee as DRAWING_TOOL_ICONS, l as EN_MESSAGES, Yl as GRID_SHAPES, s as LayoutSession, i as MAX_LAYOUT_NAME, ie as UI_ICONS, m as VI_MESSAGES, zt as WIDGET_FEATURES, Qi as WIDGET_UI_PRESETS, K as applyWidgetUI, o as cleanLayoutName, cn as createChartTypeIcon, A as createIcon, sn as createToolIcon, u as findWidgetLocale, se as iconSvg, r as localStorageLayouts, t as memoryLayouts, $l as readGridLayout, mi as readWatchlists, Js as readWidgetLayout, c as registerWidgetLocale, G as resolveWidgetUI, oa as widgetUIVariables };
 
 //# sourceMappingURL=index.js.map