@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Electrolize&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap");
@font-face {
  font-family: "Caskaydia Cove";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Caskaydia-Cove.ttf") format("truetype");
}
@font-face {
  font-family: "Caskaydia Cove Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Caskaydia-Cove-Mono.ttf") format("truetype");
}
:root,
[data-theme=dark] {
  /* Native form controls + scrollbars follow the theme (DS-0069). */
  color-scheme: dark;
  --ss-bg: oklch(17.01% 0.0026 325.69); /* #100f10 */
  --ss-fg: oklch(90.04% 0.0103 145.49); /* #dae0da */
  --ss-accent: oklch(84.89% 0.2044 145.21); /* #66ef73 */
  --ss-black: oklch(21.98% 0.0194 144.88); /* #151d15 */
  --ss-red: oklch(72% 0.1108 33.1); /* #e18a77 */
  --ss-green: oklch(71.89% 0.1091 143.25); /* #7ab677 */
  --ss-yellow: oklch(71.89% 0.1097 98.41); /* #b6a54e */
  --ss-blue: oklch(72.1% 0.1096 222.03); /* #46b4d6 */
  --ss-magenta: oklch(72.1% 0.1096 6.23); /* #df879a */
  --ss-cyan: oklch(72% 0.11 177.59); /* #46bba4 */
  --ss-white: oklch(92.98% 0.0068 145.52); /* #e5e9e5 */
  --ss-bright-black: oklch(64.11% 0.0206 145.33); /* #859085 */
  --ss-bright-red: oklch(80.07% 0.1154 33.43); /* #ffa28d */
  --ss-bright-green: oklch(80.04% 0.1274 143.09); /* #8bd387 */
  --ss-bright-yellow: oklch(80.11% 0.127 98.62); /* #d3bf56 */
  --ss-bright-blue: oklch(79.9% 0.1266 222.5); /* #4acff8 */
  --ss-bright-magenta: oklch(79.94% 0.1201 6.42); /* #ff9cb1 */
  --ss-bright-cyan: oklch(79.96% 0.1268 177.65); /* #4ad8bd */
  --ss-bright-white: oklch(99.1% 0.005 145.54); /* #fafdfa */
}

[data-theme=light] {
  /* Native form controls + scrollbars follow the theme (DS-0069). */
  color-scheme: light;
  --ss-bg: oklch(95.39% 0.0119 145.48); /* #ebf2eb */
  --ss-fg: oklch(25.05% 0.0095 145.29); /* #1f231f */
  --ss-accent: oklch(51.99% 0.1328 145.23); /* #2b7c34 */
  --ss-black: oklch(20.11% 0.0221 144.7); /* #101910 */
  --ss-red: oklch(54.52% 0.1095 33.83); /* #a65644 */
  --ss-green: oklch(52.45% 0.1094 143.17); /* #407a3e */
  --ss-yellow: oklch(50% 0.1034 98.12); /* #736300 */
  --ss-blue: oklch(52.5% 0.0976 222.77); /* #007693 */
  --ss-magenta: oklch(55.03% 0.1093 6.63); /* #a65467 */
  --ss-cyan: oklch(52.45% 0.0966 177.84); /* #007c6a */
  --ss-white: oklch(88% 0.0087 145.5); /* #d4d9d4 */
  --ss-bright-black: oklch(44.95% 0.0184 145.26); /* #4f584f */
  --ss-bright-red: oklch(48.1% 0.1266 33.46); /* #983d2a */
  --ss-bright-green: oklch(48.04% 0.1268 143.28); /* #286f28 */
  --ss-bright-yellow: oklch(43.12% 0.0892 98.4); /* #5d5000 */
  --ss-bright-blue: oklch(48% 0.0893 222.84); /* #006882 */
  --ss-bright-magenta: oklch(48.07% 0.1266 6.56); /* #963952 */
  --ss-bright-cyan: oklch(48.12% 0.0892 177.06); /* #006e5d */
  --ss-bright-white: oklch(99.1% 0.005 145.54); /* #fafdfa */
}

:root,
[data-theme=dark] {
  /* surfaces — elevation = mixing the bg toward bright-white */
  --ss-bg-elev: color-mix(in oklab, var(--ss-bg) 88%, var(--ss-bright-white));
  --ss-bg-elev-hover: color-mix(in oklab, var(--ss-bg) 83%, var(--ss-bright-white));
  --ss-bg-inset: rgba(7, 6, 7, 0);
  --ss-line: color-mix(in srgb, var(--ss-bright-white) 12%, transparent);
  --ss-line-strong: color-mix(in srgb, var(--ss-bright-white) 22%, transparent);
  /* foreground */
  --ss-fg-shine: var(--ss-bright-white);
  --ss-fg-muted: color-mix(in oklab, var(--ss-fg) 72%, var(--ss-bg));
  --ss-fg-faint: var(--ss-bright-black); /* AA ≥4.5:1 solved by the generator (DS-0013) */
  --ss-fg-on-primary: var(--ss-bg);
  /* brand — --ss-primary is the accent's semantic name; components keep reading it */
  --ss-primary: var(--ss-accent);
  --ss-primary-soft: color-mix(in srgb, var(--ss-accent) 18%, transparent);
  --ss-primary-hover: color-mix(in oklab, var(--ss-accent) 82%, white);
  /* deprecated aliases (0.12.0) — removal next minor. purple → magenta (ANSI
     naming); lime → green (the softer code accent is now the green slot). */
  --ss-purple: var(--ss-magenta);
  --ss-lime: var(--ss-green);
  /* neutral washes — theme-aware overlays derived from the extreme slots */
  --ss-hover: color-mix(in srgb, var(--ss-bright-white) 5%, transparent);
  --ss-code-overlay: color-mix(in srgb, var(--ss-bright-white) 6%, transparent);
  --ss-skeleton: color-mix(in srgb, var(--ss-bright-white) 10%, transparent);
  /* destructive + sentiment — danger/success alias the red slot / accent;
     hover deepens, -soft washes back, on-danger is the readable label.
     Used by Button (DS-0032), Sparkline trend (DS-0035), MetricTile (DS-0037). */
  --ss-danger: var(--ss-red);
  --ss-danger-hover: color-mix(in oklab, var(--ss-red) 80%, white);
  --ss-danger-soft: color-mix(in srgb, var(--ss-red) 18%, transparent);
  --ss-fg-on-danger: var(--ss-bg);
  --ss-success: var(--ss-accent);
  --ss-success-soft: var(--ss-primary-soft);
  /* code — the console surface sits just off the page bg; syntax roles map
     straight onto the terminal slots (string=green, keyword=magenta, …) */
  --ss-code-bg: color-mix(in oklab, var(--ss-bg) 65%, var(--ss-black));
  --ss-code-fg: var(--ss-fg);
  --ss-code-string: var(--ss-green);
  --ss-code-number: var(--ss-yellow);
  --ss-code-keyword: var(--ss-magenta);
  --ss-code-func: var(--ss-blue);
  --ss-code-comment: var(--ss-bright-black);
  /* log-level accents — theme-correct on the code surface */
  --ss-log-info: var(--ss-code-func);
  --ss-log-warn: var(--ss-yellow);
  --ss-log-err: var(--ss-red);
  --ss-log-ok: var(--ss-code-string);
  --ss-selection-bg: var(--ss-accent);
  --ss-selection-fg: var(--ss-fg-on-primary);
  /* badge tones — six semantic tones (DS-0119) as translucent slot washes;
     positive tracks the accent (matching --ss-success), the rest track their
     slots. Every -fg is a text slot the generator AA-solved on bg + bg-elev. */
  --ss-badge-brand-bg: color-mix(in srgb, var(--ss-blue) 12%, transparent);
  --ss-badge-brand-border: color-mix(in srgb, var(--ss-blue) 40%, transparent);
  --ss-badge-brand-fg: var(--ss-blue);
  --ss-badge-neutral-bg: color-mix(in srgb, var(--ss-bright-white) 6%, transparent);
  --ss-badge-neutral-border: var(--ss-line);
  --ss-badge-neutral-fg: var(--ss-fg-muted);
  --ss-badge-positive-bg: color-mix(in srgb, var(--ss-accent) 12%, transparent);
  --ss-badge-positive-border: color-mix(in srgb, var(--ss-accent) 40%, transparent);
  --ss-badge-positive-fg: var(--ss-accent);
  --ss-badge-caution-bg: color-mix(in srgb, var(--ss-yellow) 12%, transparent);
  --ss-badge-caution-border: color-mix(in srgb, var(--ss-yellow) 40%, transparent);
  --ss-badge-caution-fg: var(--ss-yellow);
  --ss-badge-critical-bg: color-mix(in srgb, var(--ss-red) 12%, transparent);
  --ss-badge-critical-border: color-mix(in srgb, var(--ss-red) 40%, transparent);
  --ss-badge-critical-fg: var(--ss-red);
  --ss-badge-info-bg: color-mix(in srgb, var(--ss-cyan) 12%, transparent);
  --ss-badge-info-border: color-mix(in srgb, var(--ss-cyan) 40%, transparent);
  --ss-badge-info-fg: var(--ss-cyan);
}

[data-theme=light] {
  /* surfaces — panels read as elevated by going all the way to bright-white;
     lines are stronger so square borders stay legible */
  --ss-bg-elev: var(--ss-bright-white);
  --ss-bg-elev-hover: color-mix(in oklab, var(--ss-bright-white) 96%, var(--ss-black));
  --ss-bg-inset: rgba(0, 0, 0, 0);
  --ss-line: color-mix(in srgb, var(--ss-black) 16%, transparent);
  --ss-line-strong: color-mix(in srgb, var(--ss-black) 30%, transparent);
  /* foreground — overlays flip to dark washes on the light page */
  --ss-fg-shine: var(--ss-black);
  --ss-fg-muted: color-mix(in oklab, var(--ss-fg) 72%, var(--ss-bg));
  --ss-fg-on-primary: var(--ss-bright-white); /* light accent is deep → light label */
  --ss-primary-soft: color-mix(in srgb, var(--ss-accent) 12%, transparent);
  --ss-primary-hover: color-mix(in oklab, var(--ss-accent) 85%, black);
  --ss-hover: color-mix(in srgb, var(--ss-black) 5%, transparent);
  --ss-code-overlay: color-mix(in srgb, var(--ss-black) 6%, transparent);
  --ss-skeleton: color-mix(in srgb, var(--ss-black) 10%, transparent);
  --ss-danger-hover: color-mix(in oklab, var(--ss-red) 82%, black);
  --ss-danger-soft: color-mix(in srgb, var(--ss-red) 12%, transparent);
  --ss-fg-on-danger: var(--ss-bright-white);
  /* code — barely off the page bg (a dark console block is too loud inline
     on a light page; LogStream still reads as a distinct surface) */
  --ss-code-bg: color-mix(in oklab, var(--ss-bg) 92%, var(--ss-black));
  /* badge tones — deeper washes so the fills read on the light page; the
     washed surface sits between bg and bg-elev, both of which every -fg slot
     was AA-solved against. positive/critical use the -hover deepenings the
     old dedicated light -fg literals approximated. */
  --ss-badge-brand-bg: color-mix(in srgb, var(--ss-blue) 10%, transparent);
  --ss-badge-brand-border: color-mix(in srgb, var(--ss-blue) 35%, transparent);
  --ss-badge-neutral-bg: color-mix(in srgb, var(--ss-black) 5%, transparent);
  --ss-badge-positive-bg: color-mix(in srgb, var(--ss-accent) 10%, transparent);
  --ss-badge-positive-border: color-mix(in srgb, var(--ss-accent) 35%, transparent);
  --ss-badge-positive-fg: var(--ss-primary-hover);
  --ss-badge-caution-bg: color-mix(in srgb, var(--ss-yellow) 10%, transparent);
  --ss-badge-caution-border: color-mix(in srgb, var(--ss-yellow) 35%, transparent);
  --ss-badge-critical-bg: color-mix(in srgb, var(--ss-red) 10%, transparent);
  --ss-badge-critical-border: color-mix(in srgb, var(--ss-red) 35%, transparent);
  --ss-badge-critical-fg: var(--ss-danger-hover);
  --ss-badge-info-bg: color-mix(in srgb, var(--ss-cyan) 10%, transparent);
  --ss-badge-info-border: color-mix(in srgb, var(--ss-cyan) 35%, transparent);
}

:root {
  --ss-font-display: 'Electrolize', 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --ss-font-subhead: 'Electrolize', 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --ss-font-body: 'JetBrains Mono', 'Caskaydia Cove', ui-monospace, 'SF Mono', Menlo, monospace;
  --ss-font-alt: 'Electrolize', 'Inter', system-ui, sans-serif;
  --ss-font-mono:
    'JetBrains Mono', 'Caskaydia Cove Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ss-size-display: clamp(36px, 8vw, 54px);
  --ss-size-h1: 32px;
  --ss-size-h2: 24px;
  --ss-size-h3: 20px;
  --ss-size-body: 16px;
  --ss-size-sm: 14px;
  --ss-size-xs: 12px;
  --ss-s-1: 4px;
  --ss-s-2: 8px;
  --ss-s-3: 12px;
  --ss-s-4: 16px;
  --ss-s-5: 20px;
  --ss-s-6: 24px;
  --ss-s-8: 32px;
  --ss-s-10: 40px;
  --ss-s-12: 48px;
  --ss-s-16: 64px;
  /* radii — ALL SQUARE */
  --ss-radius-0: 0;
  --ss-radius-1: 0;
  --ss-radius-2: 0;
  --ss-radius-pill: 0;
  /* elevation */
  --ss-shadow-0: none;
  --ss-shadow-1: 0 0 0 1px var(--ss-line);
  --ss-shadow-2: 0 1px 0 0 rgba(0, 0, 0, 0.4), 0 0 0 1px var(--ss-line);
  --ss-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.35);
  --ss-shadow-glow: 0 0 24px color-mix(in srgb, var(--ss-accent) 35%, transparent);
  /* motion */
  --ss-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ss-dur-fast: 150ms;
  --ss-dur: 250ms;
  --ss-dur-slow: 350ms;
  --ss-dur-xslow: 650ms;
  /* Icon spin (loader) — one full 360° turn; disabled under reduced motion. */
  --ss-icon-spin-dur: 900ms;
}

:root,
[data-size-variant=md] {
  --ss-leading: 1.5;
  --ss-ui-xs: 11px; /* micro uppercase labels */
  --ss-ui-sm: 12px; /* secondary chrome text  */
  --ss-ui-md: 13px; /* primary chrome text    */
  --ss-ui-lg: 15px; /* names / logo           */
  --ss-icon: 20px; /* md icon box (DS-0109 scale: sm 16 / md 20 / lg 24) */
  --ss-control-font: 14px;
  --ss-control-py: 9px;
  --ss-control-px: 16px;
  --ss-input-font: 15px;
  --ss-input-py: 13px;
  --ss-input-px: 16px;
  --ss-panel-head-py: 12px;
  --ss-panel-head-px: 18px;
  --ss-panel-body-py: 18px;
  --ss-panel-body-px: 18px;
  --ss-card-py: 16px;
  --ss-card-px: 18px;
  --ss-metric-val: 32px;
  --ss-row-py: 9px;
  --ss-row-px: 14px;
  --ss-badge-px: 12px;
  --ss-badge-dot: 5px;
  --ss-badge-gap: 6px;
  /* chip padding-y — used by chip-like paddings in Topbar/LogStream/ServiceCard
     (formerly read --ss-badge-py, which DS-0121 dropped from the Badge). */
  --ss-chip-py: 5px;
  --ss-gap: 14px;
  --ss-gap-sm: 10px;
  --ss-gap-xs: 6px; /* extra-small gap for dense intra-component lists (DS-0124) */
  --ss-block-gap: 28px;
  --ss-shell-side-w: 220px;
  --ss-shell-top-h: 48px;
  --ss-main-py: 28px;
  --ss-main-px: 36px;
  /* Sidebar component — expanded/rail widths + per-item badge padding (DS-0039) */
  --ss-side-w: 220px;
  --ss-side-w-rail: 56px;
  --ss-side-badge-py: 2px;
  --ss-side-badge-px: 6px;
  /* toast (DS-0041) — icon box + swipe-dismiss threshold */
  --ss-toast-ic: 18px;
  --ss-toast-swipe: 72px;
  /* empty-state visual + width (rescales with the size axis) */
  --ss-empty-glyph: 40px;
  --ss-empty-glyph-compact: 28px;
  --ss-empty-max-w: 420px;
  /* sparkline (DS-0035) */
  --ss-spark-h: 18px;
  --ss-spark-bar-w: 3px;
  --ss-spark-gap: 1px;
}

[data-size-variant=sm] {
  --ss-leading: 1.3;
  --ss-ui-xs: 9.5px;
  --ss-ui-sm: 10.5px;
  --ss-ui-md: 11.5px;
  --ss-ui-lg: 13px;
  --ss-icon: 16px; /* sm icon box (DS-0109) */
  --ss-control-font: 12px;
  --ss-control-py: 5px;
  --ss-control-px: 9px;
  --ss-input-font: 14px;
  --ss-input-py: 10px;
  --ss-input-px: 12px;
  --ss-panel-head-py: 7px;
  --ss-panel-head-px: 12px;
  --ss-panel-body-py: 10px;
  --ss-panel-body-px: 12px;
  --ss-card-py: 10px;
  --ss-card-px: 12px;
  --ss-metric-val: 26px;
  --ss-row-py: 5px;
  --ss-row-px: 10px;
  --ss-badge-px: 8px;
  --ss-badge-dot: 4px;
  --ss-badge-gap: 5px;
  --ss-chip-py: 3px;
  --ss-gap: 8px;
  --ss-gap-sm: 6px;
  --ss-gap-xs: 4px; /* extra-small gap for dense intra-component lists (DS-0124) */
  --ss-block-gap: 16px;
  --ss-shell-side-w: 180px;
  --ss-shell-top-h: 36px;
  --ss-main-py: 16px;
  --ss-main-px: 20px;
  /* Sidebar component (DS-0039) */
  --ss-side-w: 180px;
  --ss-side-w-rail: 44px;
  --ss-side-badge-py: 1px;
  --ss-side-badge-px: 5px;
  /* toast (DS-0041) */
  --ss-toast-ic: 15px;
  --ss-toast-swipe: 60px;
  /* empty-state visual + width */
  --ss-empty-glyph: 32px;
  --ss-empty-glyph-compact: 22px;
  --ss-empty-max-w: 360px;
  /* sparkline (DS-0035) */
  --ss-spark-h: 14px;
  --ss-spark-bar-w: 2px;
  --ss-spark-gap: 1px;
}

[data-size-variant=lg] {
  --ss-leading: 1.6;
  --ss-ui-xs: 12.5px;
  --ss-ui-sm: 13.5px;
  --ss-ui-md: 15px;
  --ss-ui-lg: 17px;
  --ss-icon: 24px; /* lg icon box (DS-0109) */
  --ss-control-font: 16px;
  --ss-control-py: 12px;
  --ss-control-px: 22px;
  --ss-input-font: 17px;
  --ss-input-py: 17px;
  --ss-input-px: 20px;
  --ss-panel-head-py: 16px;
  --ss-panel-head-px: 24px;
  --ss-panel-body-py: 24px;
  --ss-panel-body-px: 24px;
  --ss-card-py: 22px;
  --ss-card-px: 24px;
  --ss-metric-val: 40px;
  --ss-row-py: 12px;
  --ss-row-px: 18px;
  --ss-badge-px: 16px;
  --ss-badge-dot: 6px;
  --ss-badge-gap: 7px;
  --ss-chip-py: 7px;
  --ss-gap: 18px;
  --ss-gap-sm: 13px;
  --ss-gap-xs: 8px; /* extra-small gap for dense intra-component lists (DS-0124) */
  --ss-block-gap: 36px;
  --ss-shell-side-w: 260px;
  --ss-shell-top-h: 56px;
  --ss-main-py: 36px;
  --ss-main-px: 48px;
  /* Sidebar component (DS-0039) */
  --ss-side-w: 260px;
  --ss-side-w-rail: 64px;
  --ss-side-badge-py: 3px;
  --ss-side-badge-px: 8px;
  /* toast (DS-0041) */
  --ss-toast-ic: 22px;
  --ss-toast-swipe: 88px;
  /* empty-state visual + width */
  --ss-empty-glyph: 52px;
  --ss-empty-glyph-compact: 36px;
  --ss-empty-max-w: 480px;
  /* sparkline (DS-0035) */
  --ss-spark-h: 26px;
  --ss-spark-bar-w: 4px;
  --ss-spark-gap: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ss-dur-fast: 0ms;
    --ss-dur: 0ms;
    --ss-dur-slow: 0ms;
    --ss-dur-xslow: 0ms;
  }
}
:root {
  --ss-menu-pad: 4px;
  --ss-menu-item-py: 8px;
  --ss-menu-item-px: 12px;
  --ss-menu-item-gap: 10px;
  --ss-menu-min-w: 180px;
  --ss-menu-offset: 6px;
}

[data-size-variant=sm] {
  --ss-menu-pad: 3px;
  --ss-menu-item-py: 5px;
  --ss-menu-item-px: 9px;
  --ss-menu-item-gap: 8px;
  --ss-menu-min-w: 150px;
  --ss-menu-offset: 5px;
}

[data-size-variant=lg] {
  --ss-menu-pad: 6px;
  --ss-menu-item-py: 11px;
  --ss-menu-item-px: 16px;
  --ss-menu-item-gap: 12px;
  --ss-menu-min-w: 220px;
  --ss-menu-offset: 8px;
}

[data-size-variant=md],
:root {
  --ss-acc-head-py: var(--ss-row-py);
  --ss-acc-head-px: var(--ss-row-px);
  --ss-acc-body-py: var(--ss-s-3);
  --ss-acc-body-px: var(--ss-row-px);
  --ss-acc-gap: var(--ss-s-3);
}

[data-size-variant=sm] {
  --ss-acc-head-py: var(--ss-s-1);
  --ss-acc-head-px: var(--ss-s-2);
  --ss-acc-body-py: var(--ss-s-2);
  --ss-acc-body-px: var(--ss-s-2);
  --ss-acc-gap: var(--ss-s-2);
}

[data-size-variant=lg] {
  --ss-acc-head-py: var(--ss-s-3);
  --ss-acc-head-px: var(--ss-s-4);
  --ss-acc-body-py: var(--ss-s-4);
  --ss-acc-body-px: var(--ss-s-4);
  --ss-acc-gap: var(--ss-s-4);
}

:root,
[data-size-variant=md] {
  --ss-seg-font: var(--ss-ui-md);
  --ss-seg-py: 7px;
  --ss-seg-px: 14px;
  --ss-seg-gap: var(--ss-gap-sm);
}

[data-size-variant=sm] {
  --ss-seg-font: var(--ss-ui-sm);
  --ss-seg-py: 4px;
  --ss-seg-px: 9px;
  --ss-seg-gap: 6px;
}

[data-size-variant=lg] {
  --ss-seg-font: var(--ss-ui-lg);
  --ss-seg-py: 10px;
  --ss-seg-px: 20px;
  --ss-seg-gap: 12px;
}

:root {
  --ss-bottom-nav-h: var(--ss-shell-top-h, 48px);
  --ss-bottom-nav-px: var(--ss-s-2, 8px);
  --ss-bottom-nav-tab-py: var(--ss-s-1, 4px);
  --ss-bottom-nav-gap: 4px;
  --ss-bottom-nav-label-fs: var(--ss-ui-xs, 11px);
}

:root,
[data-size-variant=md] {
  --ss-bottom-nav-badge-top: -6px;
  --ss-bottom-nav-badge-dx: 6px;
  --ss-bottom-nav-badge-min-w: 14px;
  --ss-bottom-nav-badge-h: 14px;
  --ss-bottom-nav-badge-fs: 9px;
  --ss-bottom-nav-badge-px: 3px;
}

[data-size-variant=sm] {
  --ss-bottom-nav-badge-top: -5px;
  --ss-bottom-nav-badge-dx: 5px;
  --ss-bottom-nav-badge-min-w: 12px;
  --ss-bottom-nav-badge-h: 12px;
  --ss-bottom-nav-badge-fs: 8px;
  --ss-bottom-nav-badge-px: 2px;
}

[data-size-variant=lg] {
  --ss-bottom-nav-badge-top: -7px;
  --ss-bottom-nav-badge-dx: 7px;
  --ss-bottom-nav-badge-min-w: 16px;
  --ss-bottom-nav-badge-h: 16px;
  --ss-bottom-nav-badge-fs: 10px;
  --ss-bottom-nav-badge-px: 4px;
}

:root,
[data-size-variant=md] {
  --ss-log-min-h: 160px;
  --ss-log-max-h: 240px;
  --ss-log-t-w: 58px;
  --ss-log-lvl-w: 38px;
}

[data-size-variant=sm] {
  --ss-log-min-h: 120px;
  --ss-log-max-h: 200px;
  --ss-log-t-w: 52px;
  --ss-log-lvl-w: 34px;
}

[data-size-variant=lg] {
  --ss-log-min-h: 200px;
  --ss-log-max-h: 320px;
  --ss-log-t-w: 64px;
  --ss-log-lvl-w: 42px;
}

:root {
  --ss-image-frame-bg: var(--ss-bg-elev);
  --ss-image-shimmer: color-mix(in srgb, var(--ss-bright-white) 6%, transparent);
  --ss-image-shimmer-dur: var(--ss-dur-xslow);
  --ss-image-focus-w: 2px;
  --ss-image-caption-gap: var(--ss-s-2);
  --ss-image-backdrop: rgba(0, 0, 0, 0.82);
  --ss-image-lightbox-z: 1000;
  --ss-image-lightbox-pad: var(--ss-s-8);
}

[data-theme=light] {
  --ss-image-shimmer: color-mix(in srgb, var(--ss-bright-white) 50%, transparent);
  --ss-image-backdrop: rgba(0, 0, 0, 0.66);
}

[data-size-variant=md],
:root {
  --ss-image-glyph: 28px;
  --ss-image-fallback-min: 120px;
  --ss-image-close: 36px;
}

[data-size-variant=sm] {
  --ss-image-glyph: 22px;
  --ss-image-fallback-min: 96px;
  --ss-image-close: 30px;
}

[data-size-variant=lg] {
  --ss-image-glyph: 36px;
  --ss-image-fallback-min: 160px;
  --ss-image-close: 44px;
}

[data-size-variant=md],
:root {
  --ss-heading-size: var(--ss-size-display);
  --ss-heading-mb: var(--ss-s-4);
  --ss-heading-shadow: 3px;
}

[data-size-variant=sm] {
  --ss-heading-size: clamp(30px, 6.5vw, 44px);
  --ss-heading-mb: var(--ss-s-3);
  --ss-heading-shadow: 2px;
}

[data-size-variant=lg] {
  --ss-heading-size: clamp(44px, 9vw, 64px);
  --ss-heading-mb: var(--ss-s-6);
  --ss-heading-shadow: 4px;
}

[data-size-variant=md],
:root {
  --ss-container-max-w: 875px;
  --ss-container-px: var(--ss-main-px);
  --ss-container-page-py: var(--ss-s-10);
}

[data-size-variant=sm] {
  --ss-container-max-w: 760px;
  --ss-container-px: var(--ss-s-5);
  --ss-container-page-py: var(--ss-s-8);
}

[data-size-variant=lg] {
  --ss-container-max-w: 1000px;
  --ss-container-px: var(--ss-s-12);
  --ss-container-page-py: var(--ss-s-12);
}

:root {
  --ss-spinner-color: var(--ss-primary);
}

:root,
[data-size-variant=md] {
  --ss-spinner-font: 16px;
}

[data-size-variant=sm] {
  --ss-spinner-font: 13px;
}

[data-size-variant=lg] {
  --ss-spinner-font: 22px;
}

html {
  font-family: var(--ss-font-body);
  font-size: clamp(16px, 1vw + 12px, 20px);
  line-height: var(--ss-leading);
  color: var(--ss-fg);
  background: var(--ss-bg);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

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

::selection {
  background: var(--ss-selection-bg);
  color: var(--ss-selection-fg);
}

.hs-display,
h1.hs-display {
  font-family: var(--ss-font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--ss-size-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ss-fg);
  margin: 0 0 var(--ss-s-4) 0;
  text-shadow: 3px 3px var(--ss-bg);
  position: relative;
  z-index: 0;
}

.hs-display > span {
  position: relative;
}

.hs-display > span::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -8%;
  top: 70%;
  height: 20%;
  background: var(--ss-primary);
  opacity: 0.9;
  z-index: -1;
}

h1,
.hs-h1 {
  font-family: var(--ss-font-subhead);
  font-weight: 400;
  font-size: var(--ss-size-h1);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 var(--ss-s-3) 0;
  color: var(--ss-fg);
}

h2,
.hs-h2 {
  font-family: var(--ss-font-subhead);
  font-weight: 400;
  font-size: var(--ss-size-h2);
  line-height: 32px;
  letter-spacing: 0.01em;
  margin: 0 0 var(--ss-s-2) 0;
  color: var(--ss-fg);
}

h3,
.hs-h3 {
  font-family: var(--ss-font-subhead);
  font-weight: 400;
  font-size: var(--ss-size-h3);
  line-height: 28px;
  letter-spacing: 0.01em;
  margin: 0 0 var(--ss-s-2) 0;
  color: var(--ss-fg);
}

p,
.hs-p {
  font-family: var(--ss-font-body);
  font-size: var(--ss-size-body);
  line-height: calc(var(--ss-size-body) * var(--ss-leading));
  color: var(--ss-fg);
  margin: 0 0 var(--ss-s-3) 0;
}

small,
.hs-sm {
  font-size: var(--ss-size-sm);
  line-height: 20px;
  color: var(--ss-fg-muted);
}

.hs-caption {
  font-family: var(--ss-font-mono);
  text-transform: lowercase;
  font-size: var(--ss-size-xs);
  letter-spacing: 0.04em;
  color: var(--ss-fg-faint);
}

a,
.hs-link {
  color: inherit;
  text-decoration: none;
  position: relative;
  font-weight: 600;
  transition: color var(--ss-dur) var(--ss-ease);
}

a::before,
.hs-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--ss-primary);
  transition: height var(--ss-dur) var(--ss-ease);
}

a:hover::before,
.hs-link:hover::before {
  height: 2px;
}

a.hs-no-underline::before,
.hs-no-underline::before {
  display: none;
}

code,
kbd,
.hs-mono {
  font-family: var(--ss-font-mono);
  font-size: 0.92em;
  color: var(--ss-code-fg);
  /* per-theme wash (DS-0069): light overlay on dark, dark overlay on light */
  background: var(--ss-code-overlay);
  padding: 0.1em 0.35em;
}

pre {
  font-family: var(--ss-font-mono);
  background: var(--ss-code-bg);
  color: var(--ss-code-fg);
  padding: var(--ss-s-4);
  overflow: auto;
  line-height: 1.45;
  font-size: var(--ss-size-sm);
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-track {
  background: var(--ss-bg);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(24deg, var(--ss-bg) 0%, var(--ss-primary) 50%, var(--ss-bg) 100%);
}

:where(button, a, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ss-primary);
  outline-offset: 2px;
}

.ss-app {
  display: grid;
  grid-template-columns: var(--ss-shell-side-w) 1fr;
  grid-template-rows: var(--ss-shell-top-h) 1fr;
  min-height: 100vh;
}

.ss-main {
  padding: var(--ss-main-py) var(--ss-main-px) 60px;
  overflow: auto;
}

.ss-pageHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--ss-block-gap);
  gap: 24px;
}
.ss-pageHead h1 {
  font-family: var(--ss-font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.015em;
  text-shadow: 3px 3px var(--ss-bg);
}
.ss-pageHead h1 .accent {
  position: relative;
}
.ss-pageHead h1 .accent::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -6%;
  top: 70%;
  height: 22%;
  background: var(--ss-primary);
  opacity: 0.9;
  z-index: -1;
}
.ss-pageHead .sub {
  color: var(--ss-fg-muted);
  font-size: var(--ss-ui-md);
  margin-top: 6px;
  font-family: var(--ss-font-mono);
}

.ss-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ss-gap);
  margin-bottom: var(--ss-block-gap);
}

.ss-grid-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--ss-gap);
  margin-bottom: var(--ss-gap);
}

.ss-svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ss-gap-sm);
}

.ss-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-bg);
  position: relative;
  overflow: hidden;
}
.ss-login::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 3px);
  pointer-events: none;
}

.ss-login-card {
  width: 380px;
  padding: var(--ss-s-8);
  border: 1px solid var(--ss-line);
  background: var(--ss-bg-elev);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.ss-login-card .mark {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ss-login-card .mark .wm {
  font-family: var(--ss-font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.01em;
}
.ss-login-card .h {
  font-family: var(--ss-font-subhead);
  font-size: 20px;
}
.ss-login-card .sub {
  color: var(--ss-fg-muted);
  font-size: 13px;
  margin-top: -10px;
}
.ss-login-card .footer {
  font-family: var(--ss-font-mono);
  font-size: 10px;
  color: var(--ss-fg-faint);
  text-align: center;
  margin-top: 6px;
}

.ss-table {
  width: 100%;
  border-collapse: collapse;
}
.ss-table th,
.ss-table td {
  text-align: left;
  padding: var(--ss-row-py) var(--ss-row-px);
  font-size: var(--ss-ui-md);
  border-bottom: 1px solid var(--ss-line);
  font-family: var(--ss-font-mono);
}
.ss-table th {
  font-size: var(--ss-ui-xs);
  color: var(--ss-fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  padding: var(--ss-row-py) var(--ss-row-px);
}
.ss-table tr:hover td {
  background: var(--ss-hover);
}
.ss-table .mono {
  color: var(--ss-fg-muted);
}

.ss-footer {
  margin-top: var(--ss-s-3);
  padding-top: var(--ss-s-2);
  border-top: 1px solid var(--ss-line);
  display: flex;
  justify-content: space-between;
  font-family: var(--ss-font-mono);
  font-size: var(--ss-ui-sm);
  color: var(--ss-fg-faint);
}

/*
 * dssoca vanilla.css — GENERATED by scripts/build-vanilla.mjs from the components' <style>
 * blocks (DS-0148). Do not edit.
 *
 * Load AFTER dssoca/theme.css or dssoca/tokens.css. Every component is wrapped in a donut
 * @scope (…) to (…) block, so the browser must support CSS @scope
 * (Chrome/Edge 118+, Safari 17.4+, Firefox 2026+). Markup contract: the exact DOM the Svelte
 * components render — see the "Plain HTML & CSS" guide in the docs.
 */
/* ── Accordion ── */
@scope (.ss-accordion) to (.ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-accordion {
    --ss-acc-head-py: var(--ss-row-py);
    --ss-acc-head-px: var(--ss-row-px);
    --ss-acc-body-py: var(--ss-s-3);
    --ss-acc-body-px: var(--ss-row-px);
    --ss-acc-gap: var(--ss-s-3);
  }
  :where(:scope).ss-accordion[data-size-variant=sm] {
    --ss-acc-head-py: var(--ss-s-1);
    --ss-acc-head-px: var(--ss-s-2);
    --ss-acc-body-py: var(--ss-s-2);
    --ss-acc-body-px: var(--ss-s-2);
    --ss-acc-gap: var(--ss-s-2);
  }
  :where(:scope).ss-accordion[data-size-variant=lg] {
    --ss-acc-head-py: var(--ss-s-3);
    --ss-acc-head-px: var(--ss-s-4);
    --ss-acc-body-py: var(--ss-s-4);
    --ss-acc-body-px: var(--ss-s-4);
    --ss-acc-gap: var(--ss-s-4);
  }
  :where(:scope).ss-accordion {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ss-line);
    background: var(--ss-bg);
  }
  :where(:scope).ss-accordion .item + .item {
    border-top: 1px solid var(--ss-line);
  }
  :where(:scope).ss-accordion .heading {
    margin: 0;
    font: inherit;
  }
  :where(:scope).ss-accordion .head {
    display: flex;
    align-items: center;
    gap: var(--ss-acc-gap);
    width: 100%;
    box-sizing: border-box;
    padding: var(--ss-acc-head-py) var(--ss-acc-head-px);
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--ss-fg);
    font: 500 var(--ss-ui-md) var(--ss-font-mono);
    transition: background var(--ss-dur-fast) var(--ss-ease), color var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-accordion .head:hover:not([aria-disabled=true]) {
    background: var(--ss-hover);
  }
  :where(:scope).ss-accordion .head:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: -2px;
  }
  :where(:scope).ss-accordion .head[aria-disabled=true] {
    cursor: not-allowed;
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-accordion .head .title {
    flex: 1 1 auto;
    min-width: 0;
  }
  :where(:scope).ss-accordion .head .hint {
    flex: 0 0 auto;
    color: var(--ss-fg-faint);
    font-size: var(--ss-ui-sm);
  }
  :where(:scope).ss-accordion .head .chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform var(--ss-dur) var(--ss-ease);
    color: var(--ss-fg-muted);
  }
  :where(:scope).ss-accordion[data-overflow=truncate] .head .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(:scope).ss-accordion .item.open .head .chevron {
    transform: rotate(180deg);
  }
  :where(:scope).ss-accordion .panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--ss-dur) var(--ss-ease);
  }
  :where(:scope).ss-accordion .panel[hidden] {
    display: grid;
    grid-template-rows: 0fr;
  }
  :where(:scope).ss-accordion .panel:not([hidden]) {
    grid-template-rows: 1fr;
  }
  :where(:scope).ss-accordion .panel-clip {
    overflow: hidden;
    min-height: 0;
  }
  :where(:scope).ss-accordion .panel-inner {
    padding: var(--ss-acc-body-py) var(--ss-acc-body-px);
    color: var(--ss-fg-muted);
    font-size: var(--ss-ui-md);
    line-height: var(--ss-leading);
  }
}
/* ── Avatar ── */
@scope (.ss-avatar) to (.ss-accordion, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-avatar {
    --ss-avatar-size: var(--ss-avatar-size-md, 36px);
  }
  :where(:scope).ss-avatar[data-size-variant=sm] {
    --ss-avatar-size: var(--ss-avatar-size-sm, 28px);
  }
  :where(:scope).ss-avatar[data-size-variant=lg] {
    --ss-avatar-size: var(--ss-avatar-size-lg, 48px);
  }
  :where(:scope).ss-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-avatar-size);
    height: var(--ss-avatar-size);
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 0;
    background: var(--ss-avatar-bg, var(--ss-bg-elev));
    color: var(--ss-fg-on-primary, var(--ss-bg));
    user-select: none;
    vertical-align: middle;
  }
  .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .initials {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-avatar-font, calc(var(--ss-avatar-size) * 0.4));
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
  }
}
/* ── Badge ── */
@scope (.ss-badge) to (.ss-accordion, .ss-avatar, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-badge {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    padding: 0 var(--ss-badge-px);
    line-height: 1.6;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: var(--ss-badge-gap);
    text-transform: lowercase;
    border: 1px solid var(--ss-line);
  }
  :where(:scope).ss-badge.brand {
    background: var(--ss-badge-brand-bg);
    color: var(--ss-badge-brand-fg);
    border-color: var(--ss-badge-brand-border);
  }
  :where(:scope).ss-badge.neutral {
    background: var(--ss-badge-neutral-bg);
    color: var(--ss-badge-neutral-fg);
    border-color: var(--ss-badge-neutral-border);
  }
  :where(:scope).ss-badge.positive {
    background: var(--ss-badge-positive-bg);
    color: var(--ss-badge-positive-fg);
    border-color: var(--ss-badge-positive-border);
  }
  :where(:scope).ss-badge.caution {
    background: var(--ss-badge-caution-bg);
    color: var(--ss-badge-caution-fg);
    border-color: var(--ss-badge-caution-border);
  }
  :where(:scope).ss-badge.critical {
    background: var(--ss-badge-critical-bg);
    color: var(--ss-badge-critical-fg);
    border-color: var(--ss-badge-critical-border);
  }
  :where(:scope).ss-badge.info {
    background: var(--ss-badge-info-bg);
    color: var(--ss-badge-info-fg);
    border-color: var(--ss-badge-info-border);
  }
  :where(:scope).ss-badge .dot {
    width: var(--ss-badge-dot);
    height: var(--ss-badge-dot);
    background: currentColor;
    flex: none;
  }
  :where(:scope).ss-badge .count {
    text-transform: none;
    font-variant-numeric: tabular-nums;
  }
}
/* ── BottomNav ── */
@scope (.ss-bottom-nav) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-bottom-nav {
    --_bar-h: var(--ss-bottom-nav-h, var(--ss-shell-top-h, 48px));
    --_pad-x: var(--ss-bottom-nav-px, var(--ss-s-2, 8px));
    --_tab-py: var(--ss-bottom-nav-tab-py, var(--ss-s-1, 4px));
    --_gap: var(--ss-bottom-nav-gap, 4px);
    --_label-fs: var(--ss-bottom-nav-label-fs, var(--ss-ui-xs, 11px));
    --_badge-top: var(--ss-bottom-nav-badge-top, -6px);
    --_badge-dx: var(--ss-bottom-nav-badge-dx, 6px);
    --_badge-min-w: var(--ss-bottom-nav-badge-min-w, 14px);
    --_badge-h: var(--ss-bottom-nav-badge-h, 14px);
    --_badge-fs: var(--ss-bottom-nav-badge-fs, 9px);
    --_badge-px: var(--ss-bottom-nav-badge-px, 3px);
  }
  :where(:scope).ss-bottom-nav[data-size-variant=sm] {
    --_badge-top: var(--ss-bottom-nav-badge-top, -5px);
    --_badge-dx: var(--ss-bottom-nav-badge-dx, 5px);
    --_badge-min-w: var(--ss-bottom-nav-badge-min-w, 12px);
    --_badge-h: var(--ss-bottom-nav-badge-h, 12px);
    --_badge-fs: var(--ss-bottom-nav-badge-fs, 8px);
    --_badge-px: var(--ss-bottom-nav-badge-px, 2px);
  }
  :where(:scope).ss-bottom-nav[data-size-variant=lg] {
    --_badge-top: var(--ss-bottom-nav-badge-top, -7px);
    --_badge-dx: var(--ss-bottom-nav-badge-dx, 7px);
    --_badge-min-w: var(--ss-bottom-nav-badge-min-w, 16px);
    --_badge-h: var(--ss-bottom-nav-badge-h, 16px);
    --_badge-fs: var(--ss-bottom-nav-badge-fs, 10px);
    --_badge-px: var(--ss-bottom-nav-badge-px, 4px);
  }
  :where(:scope).ss-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--ss-bg) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -1px 0 var(--ss-line);
    font-family: var(--ss-font-mono);
  }
  :where(:scope).ss-bottom-nav .list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
  }
  :where(:scope).ss-bottom-nav .row {
    display: flex;
  }
  :where(:scope).ss-bottom-nav .tab {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--_gap);
    width: 100%;
    min-height: max(var(--_bar-h), 44px);
    padding: var(--_tab-py) var(--_pad-x);
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    color: var(--ss-fg-faint);
    background: none;
    border: 0;
    border-top: 2px solid transparent;
    font: inherit;
    transition: color var(--ss-dur-fast) var(--ss-ease), background var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-bottom-nav .tab:hover {
    color: var(--ss-fg);
  }
  :where(:scope).ss-bottom-nav .tab:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: -2px;
  }
  :where(:scope).ss-bottom-nav .tab.active {
    color: var(--ss-primary);
    background: color-mix(in srgb, var(--ss-accent) 6%, transparent);
    border-top-color: var(--ss-primary);
  }
  :where(:scope).ss-bottom-nav .tab:disabled, :where(:scope).ss-bottom-nav .tab.disabled {
    cursor: default;
    opacity: 0.45;
  }
  :where(:scope).ss-bottom-nav .tab:disabled:hover, :where(:scope).ss-bottom-nav .tab.disabled:hover {
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-bottom-nav .glyph {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  :where(:scope).ss-bottom-nav .badge {
    position: absolute;
    top: var(--_badge-top);
    left: calc(50% + var(--_badge-dx));
    min-width: var(--_badge-min-w);
    height: var(--_badge-h);
    padding: 0 var(--_badge-px);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ss-font-mono);
    font-size: var(--_badge-fs);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ss-fg-on-primary);
    background: var(--ss-primary);
    border-radius: 0;
  }
  :where(:scope).ss-bottom-nav .label {
    font-size: var(--_label-fs);
    line-height: 1;
    letter-spacing: 0.02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(:scope).ss-bottom-nav .tab {
      transition: none;
    }
  }
}
/* ── BoxPlot ── */
@scope (.ss-boxplot) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-boxplot {
    display: inline-flex;
    flex-direction: column;
    gap: var(--ss-gap-sm);
    font-family: var(--ss-font-body);
    color: var(--ss-fg);
    max-width: 100%;
  }
  :where(:scope).ss-boxplot.fluid {
    display: flex;
    width: 100%;
  }
  :where(:scope).ss-boxplot .plot {
    position: relative;
    width: 100%;
  }
  :where(:scope).ss-boxplot .canvas {
    display: block;
    max-width: 100%;
    height: auto;
    overflow: visible;
  }
  :where(:scope).ss-boxplot.fluid .canvas {
    width: 100%;
  }
  :where(:scope).ss-boxplot .empty {
    align-self: center;
    margin: auto;
    padding: var(--ss-gap-sm);
    color: var(--ss-fg-muted);
    font-family: var(--ss-font-mono);
    line-height: 1;
    min-height: var(--ss-chart-h, 240px);
    display: flex;
    align-items: center;
  }
  :where(:scope).ss-boxplot .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  :where(:scope).ss-boxplot .grid {
    stroke: var(--ss-line);
    stroke-width: 1;
    opacity: 0.5;
    shape-rendering: crispEdges;
  }
  :where(:scope).ss-boxplot .axis {
    stroke: var(--ss-line);
    stroke-width: 1;
    shape-rendering: crispEdges;
  }
  :where(:scope).ss-boxplot .tick {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    fill: var(--ss-fg-muted);
  }
  :where(:scope).ss-boxplot .axis-label {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    fill: var(--ss-fg-muted);
  }
  :where(:scope).ss-boxplot .whisker {
    stroke: var(--ss-line-strong);
    stroke-width: 1;
    shape-rendering: crispEdges;
  }
  :where(:scope).ss-boxplot .box {
    cursor: pointer;
    fill-opacity: 0.18;
    stroke-width: 1.5;
    transition: fill-opacity var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-boxplot .box:hover {
    fill-opacity: 0.3;
  }
  :where(:scope).ss-boxplot .box:focus-visible {
    outline: none;
    stroke: var(--ss-fg);
    stroke-width: 2;
  }
  :where(:scope).ss-boxplot .median {
    stroke-width: 2;
    shape-rendering: crispEdges;
  }
  :where(:scope).ss-boxplot .point {
    fill-opacity: 0.6;
    pointer-events: none;
  }
  :where(:scope).ss-boxplot .tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    pointer-events: none;
    background: var(--ss-bg-elev);
    border: 1px solid var(--ss-line-strong);
    padding: var(--ss-gap-sm);
    font-size: var(--ss-ui-xs);
    line-height: 1.3;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 2;
  }
  :where(:scope).ss-boxplot .tooltip .t-label {
    font-family: var(--ss-font-mono);
    color: var(--ss-fg);
  }
  :where(:scope).ss-boxplot .tooltip .t-val {
    font-family: var(--ss-font-mono);
    color: var(--ss-fg-muted);
  }
}
/* ── BumpChart ── */
@scope (.ss-bump) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-bump {
    display: inline-flex;
    flex-direction: column;
    gap: var(--ss-gap-sm);
    font-family: var(--ss-font-body);
    color: var(--ss-fg);
    max-width: 100%;
  }
  :where(:scope).ss-bump.fluid {
    display: flex;
    width: 100%;
  }
  :where(:scope).ss-bump .plot {
    position: relative;
    width: 100%;
  }
  :where(:scope).ss-bump .canvas {
    display: block;
    max-width: 100%;
    height: auto;
    overflow: visible;
  }
  :where(:scope).ss-bump.fluid .canvas {
    width: 100%;
  }
  :where(:scope).ss-bump .empty {
    align-self: center;
    margin: auto;
    padding: var(--ss-gap-sm);
    color: var(--ss-fg-muted);
    font-family: var(--ss-font-mono);
    line-height: 1;
    min-height: var(--ss-chart-h, 240px);
    display: flex;
    align-items: center;
  }
  :where(:scope).ss-bump .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  :where(:scope).ss-bump .grid {
    stroke: var(--ss-line);
    stroke-width: 1;
    opacity: 0.5;
    shape-rendering: crispEdges;
  }
  :where(:scope).ss-bump .axis {
    stroke: var(--ss-line);
    stroke-width: 1;
    shape-rendering: crispEdges;
  }
  :where(:scope).ss-bump .tick {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    fill: var(--ss-fg-muted);
  }
  :where(:scope).ss-bump .line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  :where(:scope).ss-bump .node {
    cursor: pointer;
    transition: r var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-bump .node:hover, :where(:scope).ss-bump .node:focus-visible {
    outline: none;
    r: 7;
  }
  :where(:scope).ss-bump .node:focus-visible {
    stroke: var(--ss-fg);
    stroke-width: 2;
  }
  :where(:scope).ss-bump .series-label {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    pointer-events: none;
  }
  :where(:scope).ss-bump .tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    pointer-events: none;
    background: var(--ss-bg-elev);
    border: 1px solid var(--ss-line-strong);
    padding: var(--ss-gap-sm);
    font-size: var(--ss-ui-xs);
    line-height: 1.3;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 2;
  }
  :where(:scope).ss-bump .tooltip .t-label {
    font-family: var(--ss-font-mono);
    color: var(--ss-fg);
  }
  :where(:scope).ss-bump .tooltip .t-val {
    font-family: var(--ss-font-mono);
    color: var(--ss-fg-muted);
  }
}
/* ── Button ── */
@scope (.ss-btn) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-btn {
    font-family: var(--ss-font-body);
    font-size: var(--ss-control-font);
    line-height: 1;
    min-height: calc(var(--ss-control-font) + var(--ss-control-py) * 2);
    box-sizing: border-box;
    font-weight: 500;
    padding: var(--ss-control-py) var(--ss-control-px);
    border: 1px solid var(--ss-line);
    background: transparent;
    color: var(--ss-fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--ss-gap-sm);
    transition: all var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-btn:not(:disabled):hover {
    background: var(--ss-hover);
    border-color: var(--ss-line-strong);
  }
  :where(:scope).ss-btn.primary {
    background: var(--ss-primary);
    color: var(--ss-fg-on-primary);
    border-color: var(--ss-primary);
    font-weight: 600;
  }
  :where(:scope).ss-btn.primary:not(:disabled):hover {
    background: var(--ss-primary-hover);
    border-color: var(--ss-primary-hover);
    box-shadow: var(--ss-shadow-glow);
  }
  :where(:scope).ss-btn.danger {
    background: var(--ss-danger);
    color: var(--ss-fg-on-danger);
    border-color: var(--ss-danger);
    font-weight: 600;
  }
  :where(:scope).ss-btn.danger:not(:disabled):hover {
    background: var(--ss-danger-hover);
    border-color: var(--ss-danger-hover);
  }
  :where(:scope).ss-btn.ghost {
    border-color: transparent;
    color: var(--ss-fg-muted);
    padding: var(--ss-control-py) var(--ss-gap-sm);
  }
  :where(:scope).ss-btn.ghost:not(:disabled):hover {
    color: var(--ss-fg);
    background: var(--ss-hover);
    border-color: transparent;
  }
  :where(:scope).ss-btn {

  }
  :where(:scope).ss-btn.icon-only {
    padding: var(--ss-control-py);
    gap: 0;
  }
  :where(:scope).ss-btn {

  }
  :where(:scope).ss-btn.full-width {
    width: 100%;
    justify-content: center;
  }
  :where(:scope).ss-btn {

  }
  :where(:scope).ss-btn.loading {
    cursor: progress;
    opacity: 0.8;
  }
  :where(:scope).ss-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
  }
  .label {
    display: inline-flex;
    align-items: center;
  }
  .affix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    min-height: 0;
    min-width: 0;
    line-height: 0;
  }
}
/* ── Card ── */
@scope (.ss-card) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-card {
    position: relative;
    border: 1px solid var(--ss-line);
    background: var(--ss-bg-elev);
    border-radius: 0;
  }
  :where(:scope).ss-card.elevated {
    border-color: transparent;
    box-shadow: var(--ss-shadow-1);
  }
  :where(:scope).ss-card.interactive {
    cursor: pointer;
    transition: box-shadow var(--ss-dur-fast) var(--ss-ease), border-color var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-card.interactive:hover {
    border-color: var(--ss-line-strong);
  }
  :where(:scope).ss-card.interactive.elevated:hover {
    box-shadow: var(--ss-shadow-2);
  }
  :where(:scope).ss-card.interactive:focus-within {
    border-color: var(--ss-line-strong);
  }
  .media {
    display: block;
    line-height: 0;
  }
  .head {
    padding: var(--ss-panel-head-py) var(--ss-panel-head-px);
    border-bottom: 1px solid var(--ss-line);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ss-gap-sm);
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-sm);
    color: var(--ss-fg-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .head .heading {
    display: flex;
    flex-direction: column;
    gap: var(--ss-s-1);
    min-width: 0;
  }
  .head .title {
    color: var(--ss-fg);
    letter-spacing: 0.06em;
  }
  .head .desc {
    color: var(--ss-fg-muted);
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--ss-font-body);
  }
  .head .meta {
    color: var(--ss-fg-faint);
    text-transform: lowercase;
    letter-spacing: 0.04em;
  }
  .actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--ss-gap);
    align-items: center;
  }
  .body {
    padding: var(--ss-panel-body-py) var(--ss-panel-body-px);
  }
  .foot {
    position: relative;
    z-index: 1;
    padding: var(--ss-panel-head-py) var(--ss-panel-head-px);
    border-top: 1px solid var(--ss-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-gap-sm);
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-sm);
    color: var(--ss-fg-faint);
  }
  .overlay {
    position: static;
  }
  .overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}
.ss-card .media img, .ss-card .media svg, .ss-card .media video {
  display: block;
  width: 100%;
}
/* ── Chart ── */
@scope (.ss-chart) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-chart {
    display: inline-flex;
    flex-direction: column;
    gap: var(--ss-gap-sm);
    font-family: var(--ss-font-body);
    color: var(--ss-fg);
    max-width: 100%;
  }
  :where(:scope).ss-chart.fluid {
    display: flex;
    width: 100%;
  }
  :where(:scope).ss-chart .plot {
    position: relative;
    width: 100%;
  }
  :where(:scope).ss-chart .canvas {
    display: block;
    max-width: 100%;
    height: auto;
    overflow: visible;
  }
  :where(:scope).ss-chart.fluid .canvas {
    width: 100%;
  }
  :where(:scope).ss-chart .empty {
    align-self: center;
    margin: auto;
    padding: var(--ss-gap-sm);
    color: var(--ss-fg-muted);
    font-family: var(--ss-font-mono);
    line-height: 1;
    min-height: var(--ss-chart-h, 240px);
    display: flex;
    align-items: center;
  }
  :where(:scope).ss-chart .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  :where(:scope).ss-chart .grid {
    stroke: var(--ss-line);
    stroke-width: 1;
    opacity: 0.5;
    shape-rendering: crispEdges;
  }
  :where(:scope).ss-chart .axis {
    stroke: var(--ss-line);
    stroke-width: 1;
    shape-rendering: crispEdges;
  }
  :where(:scope).ss-chart .tick {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    fill: var(--ss-fg-muted);
  }
  :where(:scope).ss-chart .line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  :where(:scope).ss-chart .area {
    opacity: 0.18;
    stroke: none;
  }
  :where(:scope).ss-chart .point {
    cursor: pointer;
    transition: r var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-chart .point:hover, :where(:scope).ss-chart .point:focus-visible {
    outline: none;
    r: 6;
  }
  :where(:scope).ss-chart .point:focus-visible {
    stroke: var(--ss-fg);
    stroke-width: 2;
  }
  :where(:scope).ss-chart .bar {
    cursor: pointer;
    transition: opacity var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-chart .bar:hover {
    opacity: 0.85;
  }
  :where(:scope).ss-chart .bar:focus-visible {
    outline: none;
    stroke: var(--ss-fg);
    stroke-width: 2;
  }
  :where(:scope).ss-chart .tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    pointer-events: none;
    background: var(--ss-bg-elev);
    border: 1px solid var(--ss-line-strong);
    padding: var(--ss-gap-sm);
    font-size: var(--ss-ui-xs);
    line-height: 1.3;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 2;
  }
  :where(:scope).ss-chart .tooltip .t-label {
    font-family: var(--ss-font-mono);
    color: var(--ss-fg);
  }
  :where(:scope).ss-chart .tooltip .t-val {
    font-family: var(--ss-font-mono);
    color: var(--ss-fg-muted);
  }
  :where(:scope).ss-chart .legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-gap-sm);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  :where(:scope).ss-chart .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ss-ui-xs);
    font-family: var(--ss-font-mono);
    color: var(--ss-fg-muted);
  }
  :where(:scope).ss-chart .swatch {
    width: 10px;
    height: 10px;
    flex: none;
    display: inline-block;
  }
}
/* ── Container ── */
@scope (.ss-container) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-container {
    --ss-container-max-w: 875px;
    --ss-container-px: var(--ss-main-px);
    --ss-container-page-py: var(--ss-s-10);
  }
  :where(:scope).ss-container[data-size-variant=sm] {
    --ss-container-max-w: 760px;
    --ss-container-px: var(--ss-s-5);
    --ss-container-page-py: var(--ss-s-8);
  }
  :where(:scope).ss-container[data-size-variant=lg] {
    --ss-container-max-w: 1000px;
    --ss-container-px: var(--ss-s-12);
    --ss-container-page-py: var(--ss-s-12);
  }
  :where(:scope).ss-container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--ss-container-max-w);
    margin-inline: auto;
    padding-inline: var(--ss-container-px);
  }
  :where(:scope).ss-container.page {
    min-height: 100vh;
    min-height: 100svh;
    padding-block: var(--ss-container-page-py);
  }
}
/* ── DateField ── */
@scope (.ss-datefield) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-datefield {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  :where(:scope).ss-datefield .lbl {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    color: var(--ss-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  :where(:scope).ss-datefield .lbl .req {
    color: var(--ss-red);
    margin-left: 2px;
  }
  :where(:scope).ss-datefield .control {
    display: flex;
    align-items: center;
    gap: var(--ss-gap-sm);
    background: transparent;
    color: var(--ss-fg);
    border: 1px solid var(--ss-line);
    padding: 0 var(--ss-input-px);
    transition: border-color var(--ss-dur-fast) var(--ss-ease), box-shadow var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-datefield .control:focus-within {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 3px var(--ss-primary-soft);
  }
  :where(:scope).ss-datefield.invalid .control {
    border-color: var(--ss-red);
  }
  :where(:scope).ss-datefield.invalid .control:focus-within {
    border-color: var(--ss-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-danger) 22%, transparent);
  }
  :where(:scope).ss-datefield.disabled .control {
    border-color: var(--ss-line);
  }
  :where(:scope).ss-datefield .msg {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    letter-spacing: 0.02em;
  }
  :where(:scope).ss-datefield .msg.hint {
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-datefield .msg.error {
    color: var(--ss-red);
  }
  .field {
    font-family: var(--ss-font-body);
    font-size: var(--ss-input-font);
    background: transparent;
    color: var(--ss-fg);
    border: none;
    padding: var(--ss-input-py) 0;
    width: 100%;
    min-width: 0;
    transition: color var(--ss-dur-fast) var(--ss-ease);
  }
  .field:focus {
    outline: none;
  }
  .field[readonly] {
    color: var(--ss-fg-muted);
    cursor: default;
  }
  .field:disabled {
    color: var(--ss-fg-faint);
    cursor: not-allowed;
    -webkit-text-fill-color: var(--ss-fg-faint);
  }
  .field::-webkit-calendar-picker-indicator {
    filter: var(--ss-datefield-indicator-filter, invert(0.7));
    opacity: var(--ss-datefield-indicator-opacity, 0.7);
    cursor: pointer;
    transition: opacity var(--ss-dur-fast) var(--ss-ease);
  }
  .field:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
  }
  .field:disabled::-webkit-calendar-picker-indicator {
    cursor: not-allowed;
    opacity: 0.35;
  }
}
/* ── EmptyState ── */
@scope (.ss-empty) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ss-s-3);
    text-align: center;
    padding: var(--ss-s-12) var(--ss-s-4);
    max-width: var(--ss-empty-max-w);
    margin-inline: auto;
  }
  :where(:scope).ss-empty.full-width {
    max-width: none;
  }
  :where(:scope).ss-empty .ic {
    line-height: 1;
    margin-bottom: var(--ss-s-1);
  }
  :where(:scope).ss-empty .ic.glyph {
    font-size: var(--ss-empty-glyph);
  }
  :where(:scope).ss-empty .title {
    margin: 0;
    font-family: var(--ss-font-display);
    font-size: var(--ss-size-h2);
    color: var(--ss-fg);
  }
  :where(:scope).ss-empty.error .title {
    color: var(--ss-red);
  }
  :where(:scope).ss-empty .msg {
    margin: 0;
    color: var(--ss-fg-muted);
    font-size: var(--ss-ui-md);
    max-width: 40ch;
    line-height: var(--ss-leading);
  }
  :where(:scope).ss-empty .act {
    margin-top: var(--ss-s-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ss-s-3);
    flex-wrap: wrap;
  }
  :where(:scope).ss-empty .foot {
    margin-top: var(--ss-s-2);
    color: var(--ss-fg-faint);
    font-size: var(--ss-ui-sm);
  }
  :where(:scope).ss-empty.compact {
    gap: var(--ss-s-2);
    padding: var(--ss-s-6) var(--ss-s-3);
  }
  :where(:scope).ss-empty.compact .title {
    font-size: var(--ss-size-h3);
  }
  :where(:scope).ss-empty.compact .ic.glyph {
    font-size: var(--ss-empty-glyph-compact);
  }
  :where(:scope).ss-empty.compact .act {
    margin-top: var(--ss-s-3);
  }
}
/* ── FileDrop ── */
@scope (.ss-filedrop) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-filedrop {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  :where(:scope).ss-filedrop .lbl {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    color: var(--ss-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  :where(:scope).ss-filedrop .zone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: var(--ss-filedrop-min-h, 96px);
    padding: var(--ss-filedrop-py, var(--ss-s-4, 16px)) var(--ss-filedrop-px, var(--ss-s-3, 12px));
    background: transparent;
    color: var(--ss-fg);
    border: 1px dashed var(--ss-line);
    cursor: pointer;
    transition: border-color var(--ss-dur-fast) var(--ss-ease), background var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-filedrop .zone:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 2px;
  }
  :where(:scope).ss-filedrop .zone.dragging {
    border-color: var(--ss-primary);
    background: var(--ss-primary-soft);
  }
  :where(:scope).ss-filedrop .native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  :where(:scope).ss-filedrop .prompt {
    display: flex;
    flex-direction: column;
    gap: var(--ss-gap-sm, 4px);
    pointer-events: none;
  }
  :where(:scope).ss-filedrop .prompt .title {
    font-family: var(--ss-font-body);
    font-size: var(--ss-input-font);
    color: var(--ss-fg);
  }
  :where(:scope).ss-filedrop .prompt .sub {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-filedrop .files {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ss-gap-xs);
  }
  :where(:scope).ss-filedrop .file {
    display: flex;
    align-items: center;
    gap: var(--ss-gap-sm, 4px);
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    color: var(--ss-fg);
    border: 1px solid var(--ss-line);
    padding: var(--ss-filedrop-file-py, 4px) var(--ss-filedrop-file-px, 8px);
  }
  :where(:scope).ss-filedrop .file .name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(:scope).ss-filedrop .file .bytes {
    flex: none;
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-filedrop .file .remove {
    flex: none;
  }
  :where(:scope).ss-filedrop .remove, :where(:scope).ss-filedrop .clear {
    font-family: var(--ss-font-body);
    background: transparent;
    border: none;
    color: var(--ss-fg-faint);
    padding: 0;
    cursor: pointer;
    line-height: 1;
    transition: color var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-filedrop .remove:hover, :where(:scope).ss-filedrop .clear:hover {
    color: var(--ss-fg);
  }
  :where(:scope).ss-filedrop .remove:focus-visible, :where(:scope).ss-filedrop .clear:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 2px;
    color: var(--ss-fg);
  }
  :where(:scope).ss-filedrop .clear {
    align-self: flex-start;
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  :where(:scope).ss-filedrop .msg {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    letter-spacing: 0.02em;
  }
  :where(:scope).ss-filedrop .msg.hint {
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-filedrop .msg.error {
    color: var(--ss-red);
  }
  :where(:scope).ss-filedrop.invalid .zone {
    border-color: var(--ss-red);
  }
  :where(:scope).ss-filedrop.invalid .zone:focus-visible {
    outline-color: var(--ss-red);
  }
  :where(:scope).ss-filedrop.disabled .zone {
    cursor: not-allowed;
    color: var(--ss-fg-faint);
    border-color: var(--ss-line);
  }
  :where(:scope).ss-filedrop.disabled .zone .title {
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-filedrop.disabled .remove, :where(:scope).ss-filedrop.disabled .clear {
    cursor: not-allowed;
    color: var(--ss-fg-faint);
  }
}
/* ── Heading ── */
@scope (.ss-heading) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-heading {
    --ss-heading-size: var(--ss-size-display);
    --ss-heading-mb: var(--ss-s-4);
    --ss-heading-shadow: 3px;
  }
  :where(:scope).ss-heading[data-size-variant=sm] {
    --ss-heading-size: clamp(30px, 6.5vw, 44px);
    --ss-heading-mb: var(--ss-s-3);
    --ss-heading-shadow: 2px;
  }
  :where(:scope).ss-heading[data-size-variant=lg] {
    --ss-heading-size: clamp(44px, 9vw, 64px);
    --ss-heading-mb: var(--ss-s-6);
    --ss-heading-shadow: 4px;
  }
  :where(:scope).ss-heading {
    font-family: var(--ss-font-display);
    font-style: normal;
    font-weight: 400;
    font-size: var(--ss-heading-size);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ss-fg);
    margin: 0 0 var(--ss-heading-mb) 0;
    text-shadow: var(--ss-heading-shadow) var(--ss-heading-shadow) var(--ss-bg);
    position: relative;
    z-index: 0;
  }
  :where(:scope).ss-heading.centered {
    text-align: center;
  }
  :where(:scope).ss-heading .txt {
    position: relative;
  }
  :where(:scope).ss-heading.accent .txt::before {
    content: "";
    position: absolute;
    left: -2%;
    right: -8%;
    top: 70%;
    height: 20%;
    background: var(--ss-primary);
    opacity: 0.9;
    z-index: -1;
  }
}
/* ── Heatmap ── */
@scope (.ss-heatmap) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-heatmap {
    display: inline-flex;
    flex-direction: column;
    gap: var(--ss-gap-sm);
    font-family: var(--ss-font-body);
    color: var(--ss-fg);
    max-width: 100%;
  }
  :where(:scope).ss-heatmap .plot {
    position: relative;
    width: 100%;
  }
  :where(:scope).ss-heatmap .canvas {
    display: block;
    max-width: 100%;
    height: auto;
    overflow: visible;
  }
  :where(:scope).ss-heatmap .empty {
    align-self: center;
    margin: auto;
    padding: var(--ss-gap-sm);
    color: var(--ss-fg-muted);
    font-family: var(--ss-font-mono);
    line-height: 1;
    min-height: var(--ss-chart-h, 240px);
    display: flex;
    align-items: center;
  }
  :where(:scope).ss-heatmap .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  :where(:scope).ss-heatmap .header {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    fill: var(--ss-fg-muted);
  }
  :where(:scope).ss-heatmap .axis-label {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    fill: var(--ss-fg-muted);
  }
  :where(:scope).ss-heatmap .cell {
    stroke: var(--ss-line);
    stroke-width: 1;
    cursor: pointer;
    shape-rendering: crispEdges;
    transition: fill-opacity var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-heatmap .cell:hover {
    fill-opacity: 1;
  }
  :where(:scope).ss-heatmap .cell:focus-visible {
    outline: none;
    stroke: var(--ss-fg);
    stroke-width: 2;
  }
  :where(:scope).ss-heatmap .cell-empty {
    fill: none;
    cursor: default;
  }
  :where(:scope).ss-heatmap .cell-text {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    fill: var(--ss-fg);
    pointer-events: none;
  }
  :where(:scope).ss-heatmap .tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    pointer-events: none;
    background: var(--ss-bg-elev);
    border: 1px solid var(--ss-line-strong);
    padding: var(--ss-gap-sm);
    font-size: var(--ss-ui-xs);
    line-height: 1.3;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 2;
  }
  :where(:scope).ss-heatmap .tooltip .t-label {
    font-family: var(--ss-font-mono);
    color: var(--ss-fg);
  }
  :where(:scope).ss-heatmap .tooltip .t-val {
    font-family: var(--ss-font-mono);
    color: var(--ss-fg-muted);
  }
}
/* ── Icon ── */
@keyframes ss-icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@scope (.ss-icon) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-icon {
    display: inline-block;
    flex: none;
    transform-origin: center;
  }
  :where(:scope).ss-icon[data-rotate="90"] {
    transform: rotate(90deg);
  }
  :where(:scope).ss-icon[data-rotate="180"] {
    transform: rotate(180deg);
  }
  :where(:scope).ss-icon[data-rotate="270"] {
    transform: rotate(270deg);
  }
  :where(:scope).ss-icon.flip-h {
    transform: scaleX(-1);
  }
  :where(:scope).ss-icon.flip-v {
    transform: scaleY(-1);
  }
  :where(:scope).ss-icon.spin {
    animation: ss-icon-spin var(--ss-icon-spin-dur, 900ms) linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(:scope).ss-icon.spin {
      animation: none;
    }
  }
}
.ss-icon .ss-icon-dot {
  fill: currentColor;
  stroke: none;
}
/* ── Image ── */
@keyframes ss-image-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@keyframes ss-image-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@scope (.ss-image, .ss-image-lightbox) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-image {
    margin: 0;
    display: block;
    max-width: 100%;
  }
  .frame {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: var(--ss-image-frame-bg);
  }
  :where(:scope).ss-image:not(.has-ratio) .frame {
    background: none;
  }
  .img {
    display: block;
    width: 100%;
    height: auto;
  }
  .has-ratio .img {
    height: 100%;
  }
  .trigger {
    appearance: none;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    color: inherit;
    font: inherit;
  }
  .trigger:focus-visible {
    outline: var(--ss-image-focus-w) solid var(--ss-primary);
    outline-offset: calc(-1 * var(--ss-image-focus-w));
  }
  .skeleton {
    position: absolute;
    inset: 0;
    background: var(--ss-skeleton);
    background-image: linear-gradient(90deg, transparent 0%, var(--ss-image-shimmer) 50%, transparent 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: ss-image-shimmer var(--ss-image-shimmer-dur) ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .skeleton {
      animation: none;
      background-image: none;
    }
  }
  .fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ss-image-frame-bg);
    color: var(--ss-fg-faint);
    border: 1px solid var(--ss-line);
  }
  :where(:scope).ss-image:not(.has-ratio) .fallback {
    position: static;
    min-height: var(--ss-image-fallback-min);
  }
  .fallback .glyph {
    font-size: var(--ss-image-glyph);
    line-height: 1;
  }
  figcaption {
    margin-top: var(--ss-image-caption-gap);
    color: var(--ss-fg-muted);
    font-size: var(--ss-ui-sm);
    line-height: var(--ss-leading, 1.5);
  }
  :where(:scope).ss-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--ss-image-lightbox-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ss-image-lightbox-pad);
  }
  :where(:scope).ss-image-lightbox .backdrop {
    position: absolute;
    inset: 0;
    appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: zoom-out;
    background: var(--ss-image-backdrop);
    animation: ss-image-fade var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-image-lightbox .dialog-body {
    position: relative;
    z-index: 1;
    max-width: min(92vw, 1400px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ss-s-2);
    animation: ss-image-fade var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-image-lightbox .full {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: var(--ss-shadow-pop);
    background: var(--ss-bg-elev);
  }
  :where(:scope).ss-image-lightbox .lightbox-caption {
    margin: 0;
    color: var(--ss-fg-shine);
    font-size: var(--ss-ui-md);
    text-align: center;
  }
  :where(:scope).ss-image-lightbox .close {
    position: absolute;
    top: calc(-1 * var(--ss-s-10));
    right: 0;
    appearance: none;
    background: var(--ss-bg-elev);
    border: 1px solid var(--ss-line-strong);
    color: var(--ss-fg);
    cursor: pointer;
    width: var(--ss-image-close);
    height: var(--ss-image-close);
    font-size: var(--ss-size-h3);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  :where(:scope).ss-image-lightbox .close:hover {
    background: var(--ss-bg-elev-hover);
  }
  :where(:scope).ss-image-lightbox .close:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(:scope).ss-image-lightbox .backdrop, :where(:scope).ss-image-lightbox .dialog-body {
      animation: none;
    }
  }
}
/* ── Input ── */
@scope (.ss-field) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  :where(:scope).ss-field .lbl {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    color: var(--ss-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  :where(:scope).ss-field .lbl .req {
    color: var(--ss-red);
    margin-left: 2px;
  }
  :where(:scope).ss-field .control {
    display: flex;
    align-items: center;
    gap: var(--ss-gap-sm);
    background: transparent;
    color: var(--ss-fg);
    border: 1px solid var(--ss-line);
    padding: 0 var(--ss-input-px);
    transition: border-color var(--ss-dur-fast) var(--ss-ease), box-shadow var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-field .control:focus-within {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 3px var(--ss-primary-soft);
  }
  :where(:scope).ss-field.invalid .control {
    border-color: var(--ss-red);
  }
  :where(:scope).ss-field.invalid .control:focus-within {
    border-color: var(--ss-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-danger) 22%, transparent);
  }
  :where(:scope).ss-field.disabled .control {
    border-color: var(--ss-line);
  }
  :where(:scope).ss-field .affix {
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--ss-fg-faint);
    font-size: var(--ss-input-font);
  }
  :where(:scope).ss-field .clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-family: var(--ss-font-body);
    font-size: var(--ss-input-font);
    line-height: 1;
    background: transparent;
    border: none;
    color: var(--ss-fg-faint);
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: color var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-field .clear:hover {
    color: var(--ss-fg);
  }
  :where(:scope).ss-field .clear:focus-visible {
    outline: none;
    color: var(--ss-fg);
    box-shadow: 0 0 0 2px var(--ss-primary-soft);
  }
  :where(:scope).ss-field .msg {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    letter-spacing: 0.02em;
  }
  :where(:scope).ss-field .msg.hint {
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-field .msg.error {
    color: var(--ss-red);
  }
  .ss-input {
    font-family: var(--ss-font-body);
    font-size: var(--ss-input-font);
    background: transparent;
    color: var(--ss-fg);
    border: none;
    padding: var(--ss-input-py) 0;
    width: 100%;
    min-width: 0;
    transition: color var(--ss-dur-fast) var(--ss-ease);
  }
  .ss-input:focus {
    outline: none;
  }
  .ss-input::placeholder {
    font-style: italic;
    color: var(--ss-fg-faint);
  }
  .ss-input[readonly] {
    color: var(--ss-fg-muted);
    cursor: default;
  }
  .ss-input:disabled {
    color: var(--ss-fg-faint);
    cursor: not-allowed;
    -webkit-text-fill-color: var(--ss-fg-faint);
  }
}
/* ── Kbd ── */
@scope (.ss-kbd) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-kbd {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--ss-badge-gap) / 2);
    font-family: var(--ss-font-mono);
    font-size: var(--ss-size-xs);
  }
  :where(:scope).ss-kbd .key {
    font-family: inherit;
    font-size: inherit;
    line-height: 1.6;
    padding: 0 calc(var(--ss-badge-px) / 2);
    min-width: 1.8em;
    box-sizing: border-box;
    text-align: center;
    background: var(--ss-badge-neutral-bg);
    color: var(--ss-badge-neutral-fg);
    border: 1px solid var(--ss-badge-neutral-border);
    border-bottom-color: var(--ss-line-strong);
  }
  :where(:scope).ss-kbd .sep, :where(:scope).ss-kbd .or {
    color: var(--ss-fg-muted);
    flex: none;
  }
  :where(:scope).ss-kbd .or {
    font-size: var(--ss-ui-xs);
    letter-spacing: 0.05em;
  }
}
/* ── Link ── */
@scope (.ss-link) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-link {
    font-family: var(--ss-font-body);
    font-weight: 600;
    color: var(--ss-primary);
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ss-gap-sm);
    cursor: pointer;
    transition: color var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-link:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 2px;
  }
  :where(:scope).ss-link.disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }
  :where(:scope).ss-link.inline .label {
    position: relative;
  }
  :where(:scope).ss-link.inline .label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--ss-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ss-dur-slow) var(--ss-ease), height var(--ss-dur-fast) var(--ss-ease), box-shadow var(--ss-dur-slow) var(--ss-ease);
  }
  :where(:scope).ss-link.inline:hover .label::after, :where(:scope).ss-link.inline:focus-visible .label::after {
    transform: scaleX(1);
    height: 2px;
    box-shadow: var(--ss-shadow-glow);
  }
  :where(:scope).ss-link.inline.disabled .label::after {
    display: none;
  }
  :where(:scope).ss-link.inline:visited {
    color: var(--ss-fg-muted);
  }
  :where(:scope).ss-link.inline:visited .label::after {
    background: var(--ss-fg-muted);
  }
  :where(:scope).ss-link.button {
    font-weight: 600;
    color: var(--ss-fg-on-primary);
    background: var(--ss-primary);
    border: 1px solid var(--ss-primary);
    padding: var(--ss-control-py) var(--ss-control-px);
    line-height: 1;
    transition: background var(--ss-dur-fast) var(--ss-ease), border-color var(--ss-dur-fast) var(--ss-ease), box-shadow var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-link.button:hover {
    background: var(--ss-primary-hover);
    border-color: var(--ss-primary-hover);
    box-shadow: var(--ss-shadow-glow);
  }
  :where(:scope).ss-link.button.disabled:hover {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
    box-shadow: none;
  }
  :where(:scope).ss-link.button .label::after {
    display: none;
  }
  :where(:scope).ss-link.button:visited {
    color: var(--ss-fg-on-primary);
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
.ss-link .ss-link-ext {
  color: currentColor;
}
/* ── LogStream ── */
@keyframes ss-logs-pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
@scope (.ss-logs) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-logs {
    --_min-h: var(--ss-log-min-h, 160px);
    --_max-h: var(--ss-log-max-h, 240px);
    --_t-w: var(--ss-log-t-w, 58px);
    --_lvl-w: var(--ss-log-lvl-w, 38px);
  }
  :where(:scope).ss-logs[data-size-variant=sm] {
    --_min-h: var(--ss-log-min-h, 120px);
    --_max-h: var(--ss-log-max-h, 200px);
    --_t-w: var(--ss-log-t-w, 52px);
    --_lvl-w: var(--ss-log-lvl-w, 34px);
  }
  :where(:scope).ss-logs[data-size-variant=lg] {
    --_min-h: var(--ss-log-min-h, 200px);
    --_max-h: var(--ss-log-max-h, 320px);
    --_t-w: var(--ss-log-t-w, 64px);
    --_lvl-w: var(--ss-log-lvl-w, 42px);
  }
  :where(:scope).ss-logs {
    font-family: var(--ss-font-mono);
    background: var(--ss-code-bg);
    color: var(--ss-code-fg);
    border: 1px solid var(--ss-line);
    display: flex;
    flex-direction: column;
  }
  .bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ss-gap-sm);
    padding: var(--ss-gap-sm) var(--ss-panel-body-px);
    border-bottom: 1px solid var(--ss-line);
  }
  .filters {
    display: flex;
    gap: var(--ss-gap-sm);
  }
  .chip {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-sm);
    line-height: 1;
    padding: var(--ss-chip-py) var(--ss-badge-px);
    border: 1px solid var(--ss-line);
    background: transparent;
    color: var(--ss-code-fg);
    cursor: pointer;
    transition: all var(--ss-dur-fast) var(--ss-ease);
  }
  .chip:hover {
    border-color: var(--ss-line-strong);
  }
  .chip[aria-pressed=true] {
    border-color: var(--ss-line-strong);
  }
  .chip[aria-pressed=false] {
    opacity: 0.45;
  }
  .chip.info[aria-pressed=true] {
    color: var(--ss-log-info);
  }
  .chip.warn[aria-pressed=true] {
    color: var(--ss-log-warn);
  }
  .chip.err[aria-pressed=true] {
    color: var(--ss-log-err);
  }
  .chip.ok[aria-pressed=true] {
    color: var(--ss-log-ok);
  }
  .search {
    flex: 1 1 8ch;
    min-width: 8ch;
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-sm);
    padding: var(--ss-chip-py) var(--ss-gap-sm);
    border: 1px solid var(--ss-line);
    background: transparent;
    color: var(--ss-code-fg);
  }
  .search:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 1px;
  }
  .search::placeholder {
    color: var(--ss-fg-faint);
  }
  .viewport {
    position: relative;
  }
  .scroll {
    font-size: var(--ss-ui-md);
    padding: var(--ss-gap) var(--ss-panel-body-px);
    min-height: var(--_min-h);
    max-height: var(--_max-h);
    overflow: auto;
  }
  .scroll .ln {
    display: flex;
    gap: var(--ss-gap-sm);
    line-height: 1.45;
    white-space: pre-wrap;
  }
  .scroll.nowrap .ln {
    white-space: pre;
  }
  .scroll .msg {
    white-space: inherit;
  }
  .scroll .t {
    color: var(--ss-fg-faint);
    min-width: var(--_t-w);
    flex: none;
  }
  .scroll .lvl {
    min-width: var(--_lvl-w);
    flex: none;
  }
  .scroll .lvl.info {
    color: var(--ss-log-info);
  }
  .scroll .lvl.warn {
    color: var(--ss-log-warn);
  }
  .scroll .lvl.err {
    color: var(--ss-log-err);
  }
  .scroll .lvl.ok {
    color: var(--ss-log-ok);
  }
  .scroll .svc {
    color: var(--ss-code-keyword);
    flex: none;
  }
  .status {
    display: flex;
    align-items: center;
    gap: var(--ss-gap-sm);
    color: var(--ss-fg-faint);
    font-size: var(--ss-ui-sm);
    padding-bottom: var(--ss-gap-sm);
  }
  .status .dot {
    width: var(--ss-s-2);
    height: var(--ss-s-2);
    background: var(--ss-primary);
    animation: ss-logs-pulse var(--ss-dur-xslow) var(--ss-ease) infinite;
  }
  .jump {
    position: absolute;
    right: var(--ss-gap);
    bottom: var(--ss-gap);
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-sm);
    line-height: 1;
    padding: var(--ss-chip-py) var(--ss-badge-px);
    border: 1px solid var(--ss-line-strong);
    background: var(--ss-bg-elev);
    color: var(--ss-fg);
    cursor: pointer;
    box-shadow: var(--ss-shadow-2);
  }
  .jump:hover {
    border-color: var(--ss-primary);
  }
  .jump:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 1px;
  }
}
/* ── Menu ── */
@scope (.ss-menu) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-menu {
    position: relative;
    display: inline-block;
  }
  .trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-gap-sm);
    font: 500 var(--ss-control-font) var(--ss-font-mono);
    color: var(--ss-fg);
    background: transparent;
    border: 1px solid var(--ss-line);
    padding: var(--ss-control-py) var(--ss-control-px);
    cursor: pointer;
    transition: border-color var(--ss-dur-fast) var(--ss-ease), background var(--ss-dur-fast) var(--ss-ease), color var(--ss-dur-fast) var(--ss-ease);
  }
  .trigger:hover {
    border-color: var(--ss-line-strong);
    background: var(--ss-hover);
  }
  .trigger:focus-visible {
    outline: none;
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 3px var(--ss-primary-soft);
  }
  .panel {
    position: absolute;
    z-index: 50;
    min-width: var(--ss-menu-min-w);
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--ss-menu-pad);
    background: var(--ss-bg-elev);
    border: 1px solid var(--ss-line);
    box-shadow: var(--ss-shadow-pop);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transition: opacity var(--ss-dur) var(--ss-ease), transform var(--ss-dur) var(--ss-ease), visibility 0s linear var(--ss-dur);
  }
  .panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity var(--ss-dur) var(--ss-ease), transform var(--ss-dur) var(--ss-ease), visibility 0s linear 0s;
  }
  :where(:scope).ss-menu[data-side=bottom] .panel {
    top: calc(100% + var(--ss-menu-offset));
    transform-origin: top;
  }
  :where(:scope).ss-menu[data-side=top] .panel {
    bottom: calc(100% + var(--ss-menu-offset));
    transform-origin: bottom;
  }
  :where(:scope).ss-menu[data-side=top] .panel:not(.open) {
    transform: translateY(6px) scale(0.98);
  }
  :where(:scope).ss-menu[data-align=start] .panel {
    left: 0;
  }
  :where(:scope).ss-menu[data-align=end] .panel {
    right: 0;
  }
  .item {
    display: flex;
    align-items: center;
    gap: var(--ss-menu-item-gap);
    width: 100%;
    text-align: left;
    font: 500 var(--ss-ui-md) var(--ss-font-mono);
    color: var(--ss-fg-muted);
    background: transparent;
    border: none;
    padding: var(--ss-menu-item-py) var(--ss-menu-item-px);
    cursor: pointer;
    transition: background var(--ss-dur-fast) var(--ss-ease), color var(--ss-dur-fast) var(--ss-ease);
  }
  .item:hover {
    color: var(--ss-fg);
    background: var(--ss-hover);
  }
  .item:focus-visible {
    outline: none;
    color: var(--ss-fg);
    background: var(--ss-hover);
    box-shadow: inset 2px 0 0 0 var(--ss-primary);
  }
  .item.selected {
    color: var(--ss-fg);
    background: color-mix(in srgb, var(--ss-accent) 6%, transparent);
  }
  .item:disabled, .item[aria-disabled=true] {
    color: var(--ss-fg-faint);
    cursor: not-allowed;
  }
  .item:disabled:hover, .item[aria-disabled=true]:hover {
    background: transparent;
    color: var(--ss-fg-faint);
  }
  .item .lead {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-icon);
    height: var(--ss-icon);
  }
  .item .lead.swatch {
    border: 1px solid var(--ss-line);
  }
  .item .lead.emoji {
    font-size: var(--ss-icon);
    line-height: 1;
  }
  .item .label {
    flex: 1 1 auto;
    min-width: 0;
  }
  .item .marker {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-icon);
    color: var(--ss-primary);
  }
}
/* ── MetricTile ── */
@keyframes ss-metric-skeleton-pulse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.45;
  }
}
@scope (.ss-metric) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-metric {
    padding: var(--ss-card-py) var(--ss-card-px);
    border: 1px solid var(--ss-line);
    background: var(--ss-bg-elev);
    display: flex;
    flex-direction: column;
    gap: var(--ss-s-1);
  }
  :where(:scope).ss-metric .label {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    color: var(--ss-fg-faint);
    text-transform: lowercase;
    letter-spacing: 0.04em;
  }
  :where(:scope).ss-metric .val {
    font-family: var(--ss-font-display);
    font-weight: 400;
    font-size: var(--ss-metric-val);
    line-height: 1;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
  }
  :where(:scope).ss-metric .val .small {
    font-size: 0.5em;
    opacity: 0.5;
  }
  :where(:scope).ss-metric .delta {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    display: inline-flex;
    align-items: baseline;
    gap: var(--ss-s-1);
  }
  :where(:scope).ss-metric .delta.positive {
    color: var(--ss-success);
  }
  :where(:scope).ss-metric .delta.negative {
    color: var(--ss-danger);
  }
  :where(:scope).ss-metric .delta.neutral {
    color: var(--ss-fg-muted);
  }
  :where(:scope).ss-metric .delta .period {
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-metric .delta.emphasis {
    align-self: flex-start;
    padding: var(--ss-s-1) var(--ss-s-2);
    border-radius: var(--ss-radius-0);
  }
  :where(:scope).ss-metric .delta.emphasis.positive {
    background: var(--ss-success-soft);
  }
  :where(:scope).ss-metric .delta.emphasis.negative {
    background: var(--ss-danger-soft);
  }
  :where(:scope).ss-metric .delta.emphasis.neutral {
    background: var(--ss-hover);
  }
  :where(:scope).ss-metric .chart {
    margin-top: var(--ss-s-1);
  }
  :where(:scope).ss-metric .skeleton {
    background: var(--ss-skeleton);
    border-radius: var(--ss-radius-0);
    animation: ss-metric-skeleton-pulse var(--ss-dur-xslow) var(--ss-ease) infinite alternate;
  }
  :where(:scope).ss-metric .skeleton-val {
    height: var(--ss-metric-val);
    width: 60%;
  }
  :where(:scope).ss-metric .skeleton-delta {
    height: var(--ss-ui-xs);
    width: 35%;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(:scope).ss-metric .skeleton {
      animation: none;
    }
  }
}
/* ── Modal ── */
@scope (.ss-modal) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-modal {
    padding: 0;
    border: 1px solid var(--ss-line);
    background: var(--ss-bg-elev);
    color: var(--ss-fg);
    box-shadow: var(--ss-shadow-pop);
    width: var(--ss-modal-w, 32rem);
    max-width: var(--ss-modal-max, calc(100vw - var(--ss-s-8)));
    max-height: var(--ss-modal-max-h, calc(100vh - var(--ss-s-16)));
    margin: auto;
    overflow: hidden;
  }
  :where(:scope).ss-modal::backdrop {
    background: var(--ss-modal-backdrop, rgba(0, 0, 0, 0.62));
  }
  :where(:scope).ss-modal[data-size-variant=sm] {
    --ss-modal-w: 24rem;
  }
  :where(:scope).ss-modal[data-size-variant=lg] {
    --ss-modal-w: 48rem;
  }
  :where(:scope).ss-modal[data-fullscreen] {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
  }
  @supports (height: 100dvh) {
    :where(:scope).ss-modal[data-fullscreen] {
      width: 100dvw;
      height: 100dvh;
    }
  }
  .panel {
    display: flex;
    flex-direction: column;
    max-height: inherit;
  }
  :where(:scope).ss-modal[data-fullscreen] .panel {
    height: 100%;
    max-height: none;
  }
  :where(:scope).ss-modal[data-fullscreen] .head, :where(:scope).ss-modal[data-fullscreen] .foot {
    flex: none;
  }
  :where(:scope).ss-modal[data-fullscreen] .body {
    flex: 1 1 auto;
    min-height: 0;
  }
  .head {
    display: flex;
    align-items: center;
    gap: var(--ss-modal-head-gap, var(--ss-s-3));
    padding: var(--ss-modal-pad-y, var(--ss-s-4)) var(--ss-modal-pad-x, var(--ss-s-5));
    border-bottom: 1px solid var(--ss-line);
  }
  .title {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    font-family: var(--ss-font-display, var(--ss-font-body));
    font-size: var(--ss-modal-title, var(--ss-size-h3));
    line-height: 1.2;
    color: var(--ss-fg);
  }
  :where(:scope).ss-modal.danger .title {
    color: var(--ss-danger);
  }
  .close {
    flex: none;
    margin-left: auto;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-modal-close, var(--ss-s-8));
    height: var(--ss-modal-close, var(--ss-s-8));
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ss-fg-muted);
    font-size: var(--ss-size-h3);
    line-height: 1;
    cursor: pointer;
    transition: color var(--ss-dur-fast) var(--ss-ease), border-color var(--ss-dur-fast) var(--ss-ease);
  }
  .close:hover {
    color: var(--ss-fg);
    border-color: var(--ss-line-strong);
  }
  .close:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 2px;
    color: var(--ss-fg);
  }
  .body {
    padding: var(--ss-modal-pad-y, var(--ss-s-4)) var(--ss-modal-pad-x, var(--ss-s-5));
    overflow: auto;
    color: var(--ss-fg);
    font-family: var(--ss-font-body);
    line-height: var(--ss-leading, 1.5);
  }
  .foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ss-modal-foot-gap, var(--ss-s-2));
    padding: var(--ss-modal-pad-y, var(--ss-s-4)) var(--ss-modal-pad-x, var(--ss-s-5));
    border-top: 1px solid var(--ss-line);
  }
}
/* ── NumberField ── */
@scope (.ss-numberfield) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-numberfield {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  :where(:scope).ss-numberfield .lbl {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    color: var(--ss-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  :where(:scope).ss-numberfield .lbl .req {
    color: var(--ss-red);
    margin-left: 2px;
  }
  :where(:scope).ss-numberfield .control {
    display: flex;
    align-items: stretch;
    background: transparent;
    color: var(--ss-fg);
    border: 1px solid var(--ss-line);
    transition: border-color var(--ss-dur-fast) var(--ss-ease), box-shadow var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-numberfield .control:focus-within {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 3px var(--ss-primary-soft);
  }
  :where(:scope).ss-numberfield.invalid .control {
    border-color: var(--ss-red);
  }
  :where(:scope).ss-numberfield.invalid .control:focus-within {
    border-color: var(--ss-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-danger) 22%, transparent);
  }
  :where(:scope).ss-numberfield.disabled .control {
    border-color: var(--ss-line);
  }
  :where(:scope).ss-numberfield .step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--ss-numberfield-step-w, 2.25em);
    font-family: var(--ss-font-mono);
    font-size: var(--ss-input-font);
    line-height: 1;
    background: transparent;
    border: none;
    color: var(--ss-fg-muted);
    cursor: pointer;
    transition: color var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-numberfield .step:hover:not(:disabled) {
    color: var(--ss-fg);
  }
  :where(:scope).ss-numberfield .step:focus-visible {
    outline: none;
    color: var(--ss-fg);
    box-shadow: 0 0 0 2px var(--ss-primary-soft);
  }
  :where(:scope).ss-numberfield .step:disabled {
    color: var(--ss-fg-faint);
    cursor: not-allowed;
  }
  :where(:scope).ss-numberfield .msg {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    letter-spacing: 0.02em;
  }
  :where(:scope).ss-numberfield .msg.hint {
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-numberfield .msg.error {
    color: var(--ss-red);
  }
  .ss-input {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-input-font);
    background: transparent;
    color: var(--ss-fg);
    border: none;
    padding: var(--ss-input-py) var(--ss-input-px);
    width: 100%;
    min-width: 0;
    text-align: center;
    transition: color var(--ss-dur-fast) var(--ss-ease);
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .ss-input::-webkit-outer-spin-button, .ss-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .ss-input:focus {
    outline: none;
  }
  .ss-input::placeholder {
    font-style: italic;
    color: var(--ss-fg-faint);
  }
  .ss-input[readonly] {
    color: var(--ss-fg-muted);
    cursor: default;
  }
  .ss-input:disabled {
    color: var(--ss-fg-faint);
    cursor: not-allowed;
    -webkit-text-fill-color: var(--ss-fg-faint);
  }
}
/* ── Pagination ── */
@scope (.ss-pagination) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-pagination {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--ss-line);
    background: var(--ss-bg);
    width: max-content;
    max-width: 100%;
  }
  :where(:scope).ss-pagination .page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ss-pagination-min, 2.25em);
    font: 500 var(--ss-pagination-font, 0.875rem)/1 var(--ss-font-mono);
    color: var(--ss-fg-muted);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--ss-line);
    padding: var(--ss-pagination-py, 0.5em) var(--ss-pagination-px, 0.625em);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--ss-dur-fast) var(--ss-ease), background var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-pagination .page:first-child {
    border-left: 0;
  }
  :where(:scope).ss-pagination .page:hover:not(.active):not(:disabled) {
    color: var(--ss-fg);
    background: var(--ss-hover);
  }
  :where(:scope).ss-pagination .page.active {
    color: var(--ss-fg-on-primary);
    background: var(--ss-primary);
    cursor: default;
  }
  :where(:scope).ss-pagination .page:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ss-primary-soft);
    z-index: 1;
  }
  :where(:scope).ss-pagination .page.active:focus-visible {
    box-shadow: inset 0 0 0 2px var(--ss-bg);
  }
  :where(:scope).ss-pagination .page:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }
  :where(:scope).ss-pagination .page.active:disabled {
    opacity: 1;
    cursor: default;
  }
  :where(:scope).ss-pagination .nav-btn {
    font-size: var(--ss-pagination-nav-font, 1rem);
  }
  :where(:scope).ss-pagination .ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ss-pagination-min, 2.25em);
    padding: var(--ss-pagination-py, 0.5em) var(--ss-pagination-px, 0.625em);
    border-left: 1px solid var(--ss-line);
    color: var(--ss-fg-muted);
    font-family: var(--ss-font-mono);
    line-height: 1;
    user-select: none;
  }
}
/* ── ScatterPlot ── */
@scope (.ss-scatter) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-scatter {
    display: inline-flex;
    flex-direction: column;
    gap: var(--ss-gap-sm);
    font-family: var(--ss-font-body);
    color: var(--ss-fg);
    max-width: 100%;
  }
  :where(:scope).ss-scatter.fluid {
    display: flex;
    width: 100%;
  }
  :where(:scope).ss-scatter .plot {
    position: relative;
    width: 100%;
  }
  :where(:scope).ss-scatter .canvas {
    display: block;
    max-width: 100%;
    height: auto;
    overflow: visible;
  }
  :where(:scope).ss-scatter.fluid .canvas {
    width: 100%;
  }
  :where(:scope).ss-scatter .empty {
    align-self: center;
    margin: auto;
    padding: var(--ss-gap-sm);
    color: var(--ss-fg-muted);
    font-family: var(--ss-font-mono);
    line-height: 1;
    min-height: var(--ss-chart-h, 240px);
    display: flex;
    align-items: center;
  }
  :where(:scope).ss-scatter .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  :where(:scope).ss-scatter .grid {
    stroke: var(--ss-line);
    stroke-width: 1;
    opacity: 0.5;
    shape-rendering: crispEdges;
  }
  :where(:scope).ss-scatter .axis {
    stroke: var(--ss-line);
    stroke-width: 1;
    shape-rendering: crispEdges;
  }
  :where(:scope).ss-scatter .ref {
    stroke: var(--ss-line-strong);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    shape-rendering: crispEdges;
  }
  :where(:scope).ss-scatter .tick {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    fill: var(--ss-fg-muted);
  }
  :where(:scope).ss-scatter .quadrant {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    fill: var(--ss-fg-muted);
    opacity: 0.75;
  }
  :where(:scope).ss-scatter .axis-label {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    fill: var(--ss-fg-muted);
  }
  :where(:scope).ss-scatter .point {
    cursor: pointer;
    fill-opacity: 0.85;
    transition: fill-opacity var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-scatter .point:hover {
    fill-opacity: 1;
  }
  :where(:scope).ss-scatter .point:focus-visible {
    outline: none;
    stroke: var(--ss-fg);
    stroke-width: 2;
  }
  :where(:scope).ss-scatter .point-label {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    fill: var(--ss-fg);
    pointer-events: none;
  }
  :where(:scope).ss-scatter .tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    pointer-events: none;
    background: var(--ss-bg-elev);
    border: 1px solid var(--ss-line-strong);
    padding: var(--ss-gap-sm);
    font-size: var(--ss-ui-xs);
    line-height: 1.3;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 2;
  }
  :where(:scope).ss-scatter .tooltip .t-label {
    font-family: var(--ss-font-mono);
    color: var(--ss-fg);
  }
  :where(:scope).ss-scatter .tooltip .t-val {
    font-family: var(--ss-font-mono);
    color: var(--ss-fg-muted);
  }
}
/* ── SearchPalette ── */
@scope (.ss-search-palette) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-search-palette {
    padding: 0;
    border: 1px solid var(--ss-line-strong);
    background: var(--ss-bg-elev);
    color: var(--ss-fg);
    box-shadow: var(--ss-shadow-pop);
    font-family: var(--ss-font-mono);
    width: var(--ss-search-palette-w, 40rem);
    max-width: var(--ss-search-palette-max, calc(100vw - var(--ss-s-8)));
    margin: var(--ss-search-palette-top, 15vh) auto auto;
    overflow: hidden;
  }
  :where(:scope).ss-search-palette::backdrop {
    background: var(--ss-search-palette-backdrop, rgba(0, 0, 0, 0.62));
  }
  :where(:scope).ss-search-palette[data-size-variant=sm] {
    --ss-search-palette-w: 32rem;
  }
  :where(:scope).ss-search-palette[data-size-variant=lg] {
    --ss-search-palette-w: 48rem;
  }
  .panel {
    display: flex;
    flex-direction: column;
  }
  .input {
    width: 100%;
    padding: var(--ss-search-palette-input-pad, var(--ss-s-4)) var(--ss-s-4);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ss-line);
    color: var(--ss-fg);
    font-family: inherit;
    font-size: var(--ss-search-palette-input-size, var(--ss-ui-lg, var(--ss-size-body)));
  }
  .input:focus {
    outline: none;
    border-bottom-color: var(--ss-primary);
  }
  .input::placeholder {
    color: var(--ss-fg-muted);
  }
  .results {
    overflow-y: auto;
    max-height: var(--ss-search-palette-list-h, 60vh);
    overscroll-behavior: contain;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .state {
    margin: 0;
    padding: var(--ss-s-4);
    font-size: var(--ss-ui-sm);
    color: var(--ss-fg-muted);
  }
  .group-label {
    display: block;
    padding: var(--ss-s-3) var(--ss-s-4) var(--ss-s-1);
    font-size: var(--ss-ui-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ss-fg-muted);
  }
  .row {
    display: block;
    width: 100%;
    padding: var(--ss-s-2) var(--ss-s-4);
    border: none;
    border-left: 2px solid transparent;
    padding-left: calc(var(--ss-s-4) - 2px);
    background: transparent;
    color: var(--ss-fg);
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .row.active {
    background: var(--ss-primary-soft);
    border-left-color: var(--ss-primary);
  }
  .row.disabled {
    color: var(--ss-fg-faint, var(--ss-fg-muted));
    cursor: default;
  }
  .label {
    display: block;
    font-size: var(--ss-ui-md);
    line-height: var(--ss-leading, 1.5);
  }
  .hint {
    display: block;
    margin-top: 2px;
    font-size: var(--ss-ui-sm);
    color: var(--ss-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .foot {
    padding: var(--ss-s-2) var(--ss-s-4);
    border-top: 1px solid var(--ss-line);
    font-size: var(--ss-ui-xs);
    color: var(--ss-fg-muted);
  }
  @media (max-width: 767px) {
    :where(:scope).ss-search-palette {
      margin: 0;
      width: 100vw;
      max-width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
    }
    .panel {
      height: 100%;
    }
    .results {
      flex: 1;
      max-height: none;
    }
  }
}
/* ── SegmentedControl ── */
@scope (.ss-segmented) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-segmented {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--ss-line);
    background: var(--ss-bg);
    width: max-content;
    max-width: 100%;
  }
  :where(:scope).ss-segmented.full {
    display: flex;
    width: 100%;
  }
  :where(:scope).ss-segmented .segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ss-seg-gap);
    font: 500 var(--ss-seg-font)/1 var(--ss-font-body);
    color: var(--ss-fg-muted);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--ss-line);
    padding: var(--ss-seg-py) var(--ss-seg-px);
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: color var(--ss-dur-fast) var(--ss-ease), background var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-segmented .segment:first-child {
    border-left: 0;
  }
  :where(:scope).ss-segmented .segment:hover:not(.selected):not(:disabled) {
    color: var(--ss-fg);
    background: var(--ss-hover);
  }
  :where(:scope).ss-segmented .segment.selected {
    color: var(--ss-fg-on-primary);
    background: var(--ss-primary);
  }
  :where(:scope).ss-segmented .segment:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ss-primary-soft);
    z-index: 1;
  }
  :where(:scope).ss-segmented .segment.selected:focus-visible {
    box-shadow: inset 0 0 0 2px var(--ss-bg);
  }
  :where(:scope).ss-segmented .segment:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }
  :where(:scope).ss-segmented .segment .label {
    display: inline-block;
  }
  :where(:scope).ss-segmented.full .segment {
    flex: 1 1 0;
    min-width: 0;
  }
}
.ss-segmented .segment .ic {
  flex: 0 0 auto;
}
/* ── Select ── */
@scope (.ss-select) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-select {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  :where(:scope).ss-select .lbl {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    color: var(--ss-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  :where(:scope).ss-select .lbl .req {
    color: var(--ss-red);
    margin-left: 2px;
  }
  :where(:scope).ss-select .control {
    position: relative;
    display: flex;
    align-items: center;
    background: transparent;
    color: var(--ss-fg);
    border: 1px solid var(--ss-line);
    padding: 0 var(--ss-input-px);
    transition: border-color var(--ss-dur-fast) var(--ss-ease), box-shadow var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-select .control:focus-within {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 3px var(--ss-primary-soft);
  }
  :where(:scope).ss-select.invalid .control {
    border-color: var(--ss-red);
  }
  :where(:scope).ss-select.invalid .control:focus-within {
    border-color: var(--ss-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-danger) 22%, transparent);
  }
  :where(:scope).ss-select.disabled .control {
    border-color: var(--ss-line);
  }
  :where(:scope).ss-select .chevron {
    flex: none;
    pointer-events: none;
    width: 0;
    height: 0;
    margin-left: var(--ss-gap-sm);
    border-left: var(--ss-select-chevron, 5px) solid transparent;
    border-right: var(--ss-select-chevron, 5px) solid transparent;
    border-top: var(--ss-select-chevron, 5px) solid var(--ss-fg-muted);
    transition: border-top-color var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-select:not(.disabled) .control:focus-within .chevron {
    border-top-color: var(--ss-fg);
  }
  :where(:scope).ss-select.disabled .chevron {
    border-top-color: var(--ss-fg-faint);
  }
  :where(:scope).ss-select .msg {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    letter-spacing: 0.02em;
  }
  :where(:scope).ss-select .msg.hint {
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-select .msg.error {
    color: var(--ss-red);
  }
  .select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--ss-font-body);
    font-size: var(--ss-input-font);
    background: transparent;
    color: var(--ss-fg);
    border: none;
    padding: var(--ss-input-py) 0;
    width: 100%;
    min-width: 0;
    cursor: pointer;
    transition: color var(--ss-dur-fast) var(--ss-ease);
  }
  .select:focus {
    outline: none;
  }
  .select:disabled {
    color: var(--ss-fg-faint);
    cursor: not-allowed;
    -webkit-text-fill-color: var(--ss-fg-faint);
  }
  .select option, .select optgroup {
    background: var(--ss-bg-elev);
    color: var(--ss-fg);
  }
}
/* ── ServiceCard ── */
@keyframes ss-svc-shimmer {
  100% {
    transform: translateX(100%);
  }
}
@scope (.ss-svc) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-svc {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--ss-gap);
    padding: var(--ss-card-py) var(--ss-card-px);
    border: 1px solid var(--ss-line);
    background: var(--ss-bg-elev);
    color: var(--ss-fg);
    text-decoration: none;
    transition: all var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-svc .head {
    display: flex;
    align-items: center;
    gap: var(--ss-gap-sm);
  }
  :where(:scope).ss-svc .head .name {
    font-family: var(--ss-font-display);
    font-size: var(--ss-ui-lg);
    letter-spacing: -0.005em;
  }
  :where(:scope).ss-svc .head .host {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-sm);
    color: var(--ss-fg-muted);
  }
  :where(:scope).ss-svc .status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  :where(:scope).ss-svc .meta {
    grid-column: 1/-1;
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-sm);
    color: var(--ss-fg-muted);
    display: flex;
    flex-direction: column;
    gap: var(--ss-s-1);
  }
  :where(:scope).ss-svc .footer {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-gap-sm);
    margin-top: 2px;
  }
  :where(:scope).ss-svc .foot-meta {
    display: flex;
    align-items: center;
    gap: var(--ss-gap-sm);
  }
  :where(:scope).ss-svc .latency {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-sm);
    color: var(--ss-fg-muted);
  }
  :where(:scope).ss-svc .updated {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-sm);
    color: var(--ss-fg-muted);
  }
  :where(:scope)a.ss-svc, :where(:scope)[role=button].ss-svc {
    cursor: pointer;
  }
  :where(:scope)a.ss-svc:hover, :where(:scope)[role=button].ss-svc:hover {
    border-color: var(--ss-line-strong);
    background: var(--ss-bg-elev-hover);
  }
  :where(:scope)a.ss-svc:focus-visible, :where(:scope)[role=button].ss-svc:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 2px;
  }
  :where(:scope).ss-svc.disabled {
    cursor: default;
    opacity: 0.55;
  }
  :where(:scope).ss-svc.loading {
    cursor: default;
  }
  .sk {
    background: var(--ss-bg-elev-hover);
    position: relative;
    overflow: hidden;
  }
  .sk::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--ss-hover), transparent);
    animation: ss-svc-shimmer var(--ss-dur-xslow) var(--ss-ease) infinite;
  }
  .sk-name {
    width: 120px;
    height: var(--ss-ui-lg);
    margin-bottom: var(--ss-s-1);
  }
  .sk-host {
    width: 90px;
    height: var(--ss-ui-sm);
  }
  .sk-badge {
    width: 64px;
    height: calc(var(--ss-ui-xs) + var(--ss-chip-py) * 2);
  }
  .sk-spark {
    width: 100%;
    height: var(--ss-icon);
  }
  @media (prefers-reduced-motion: reduce) {
    .sk::after {
      animation: none;
    }
  }
}
/* ── ShortcutsHelp ── */
@scope (.ss-shortcuts-help) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-shortcuts-help {
    display: flex;
    flex-direction: column;
    gap: var(--ss-gap-sm);
    font-size: var(--ss-size-sm);
  }
  :where(:scope).ss-shortcuts-help .group {
    min-width: 0;
  }
  :where(:scope).ss-shortcuts-help .gname {
    margin: 0;
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-sm);
    font-weight: 400;
    color: var(--ss-fg-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  :where(:scope).ss-shortcuts-help .rows {
    margin: 0;
  }
  :where(:scope).ss-shortcuts-help .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-gap-sm);
    padding: var(--ss-s-2) 0;
    border-bottom: 1px solid var(--ss-line);
  }
  :where(:scope).ss-shortcuts-help .row:last-child {
    border-bottom: 0;
  }
  :where(:scope).ss-shortcuts-help .label {
    margin: 0;
    min-width: 0;
    color: var(--ss-fg);
  }
  :where(:scope).ss-shortcuts-help .keys {
    margin: 0;
    flex: none;
  }
  :where(:scope).ss-shortcuts-help .controls {
    margin: 0;
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--ss-s-1);
  }
  :where(:scope).ss-shortcuts-help .row.recording {
    background: var(--ss-primary-soft);
  }
  :where(:scope).ss-shortcuts-help .prompt {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-sm);
    color: var(--ss-primary);
  }
  :where(:scope).ss-shortcuts-help .row.off .label {
    color: var(--ss-fg-muted);
  }
  :where(:scope).ss-shortcuts-help .row.off .txt {
    text-decoration: line-through;
  }
  :where(:scope).ss-shortcuts-help .off-tag {
    margin-left: var(--ss-s-1);
    color: var(--ss-fg-muted);
  }
  :where(:scope).ss-shortcuts-help .extra {
    color: var(--ss-fg-muted);
  }
  :where(:scope).ss-shortcuts-help .globals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-gap-sm);
    padding-top: var(--ss-s-2);
    border-top: 1px solid var(--ss-line);
  }
  :where(:scope).ss-shortcuts-help .status {
    margin: 0;
    min-height: 1.4em;
    font-size: var(--ss-ui-sm);
    color: var(--ss-fg-muted);
  }
}
/* ── Sidebar ── */
@scope (.ss-side) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-side {
    border-right: 1px solid var(--ss-line);
    padding: var(--ss-gap) var(--ss-s-1);
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--ss-bg);
    width: var(--ss-side-w);
    min-height: 100%;
    transition: width var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-side[data-collapsed] {
    width: var(--ss-side-w-rail);
  }
  :where(:scope).ss-side[data-collapsed] .section {
    text-indent: -9999px;
    height: 1px;
    padding: 0;
    overflow: hidden;
  }
  :where(:scope).ss-side[data-collapsed] .label, :where(:scope).ss-side[data-collapsed] .badge, :where(:scope).ss-side[data-collapsed] .caret {
    display: none;
  }
  :where(:scope).ss-side[data-collapsed] .item {
    justify-content: center;
    gap: 0;
  }
  :where(:scope).ss-side[data-collapsed] .dot {
    margin-left: 0;
  }
  :where(:scope).ss-side[data-collapsed] .sublist {
    padding-left: 0;
  }
  :where(:scope).ss-side .list, :where(:scope).ss-side .sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  :where(:scope).ss-side .sublist {
    padding-left: var(--ss-s-3);
  }
  :where(:scope).ss-side .row {
    display: block;
  }
  :where(:scope).ss-side .rail-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ss-fg-faint);
    padding: var(--ss-row-py) var(--ss-row-px);
    margin-bottom: var(--ss-s-1);
    transition: color var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-side .rail-toggle:hover {
    color: var(--ss-fg);
  }
  :where(:scope).ss-side .section {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    color: var(--ss-fg-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: var(--ss-row-px) var(--ss-row-px) var(--ss-s-1);
  }
  :where(:scope).ss-side .item {
    display: flex;
    align-items: center;
    gap: var(--ss-s-2);
    width: 100%;
    padding: var(--ss-row-py) var(--ss-row-px);
    cursor: pointer;
    color: var(--ss-fg-muted);
    font: 500 var(--ss-ui-md) var(--ss-font-mono);
    border-left: 2px solid transparent;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    background: none;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    transition: all var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-side .item:hover {
    color: var(--ss-fg);
    background: var(--ss-hover);
  }
  :where(:scope).ss-side .item.active {
    color: var(--ss-fg);
    background: color-mix(in srgb, var(--ss-accent) 6%, transparent);
    border-left-color: var(--ss-primary);
  }
  :where(:scope).ss-side .item .label {
    flex: 1 1 auto;
    min-width: 0;
  }
  :where(:scope).ss-side .item .badge {
    flex: 0 0 auto;
    margin-left: auto;
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    line-height: 1;
    color: var(--ss-fg-muted);
    background: var(--ss-hover);
    border: 1px solid var(--ss-line);
    padding: var(--ss-side-badge-py) var(--ss-side-badge-px);
    border-radius: 0;
  }
  :where(:scope).ss-side .item .badge + .dot {
    margin-left: var(--ss-s-1);
  }
  :where(:scope).ss-side .item .dot {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin-left: auto;
    background: var(--ss-primary);
  }
  :where(:scope).ss-side .item .dot.warn {
    background: var(--ss-yellow);
  }
  :where(:scope).ss-side .item .dot.err {
    background: var(--ss-red);
  }
  :where(:scope).ss-side .item .caret {
    flex: 0 0 auto;
    margin-left: var(--ss-s-1);
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transition: transform var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-side .item .caret.open {
    transform: rotate(90deg);
  }
  :where(:scope).ss-side .item .badge + .caret, :where(:scope).ss-side .item .dot + .caret {
    margin-left: var(--ss-s-1);
  }
  :where(:scope).ss-side .item.child {
    font-size: var(--ss-ui-sm);
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-side .item.child:hover {
    color: var(--ss-fg);
  }
}
/* ── Sparkline ── */
@scope (.ss-spark) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-spark {
    display: inline-flex;
    align-items: flex-end;
    gap: var(--ss-spark-gap, 1px);
    height: var(--ss-spark-h, var(--ss-icon, 18px));
    position: relative;
  }
  :where(:scope).ss-spark.fluid {
    width: 100%;
  }
  :where(:scope).ss-spark i {
    width: var(--ss-spark-bar-w, 3px);
    background: var(--ss-primary);
    opacity: 0.85;
    border-radius: 0;
  }
  :where(:scope).ss-spark.fluid i {
    flex: 1 1 0;
    width: auto;
    min-width: 1px;
  }
  :where(:scope).ss-spark .single {
    margin: 0 auto;
  }
  :where(:scope).ss-spark .empty {
    align-self: center;
    margin: auto;
    color: var(--ss-fg-muted);
    font-family: var(--ss-font-mono);
    line-height: 1;
  }
  :where(:scope).ss-spark .chart {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  :where(:scope).ss-spark .line {
    fill: none;
    stroke: var(--ss-primary);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  :where(:scope).ss-spark .area {
    opacity: 0.22;
    stroke: none;
  }
  :where(:scope).ss-spark .marker {
    fill: var(--ss-primary);
  }
}
/* ── Spinner ── */
@keyframes ss-spinner-boxBounce2 {
  0% {
    content: "▌";
  }
  25% {
    content: "▀";
  }
  50% {
    content: "▐";
  }
  75% {
    content: "▄";
  }
  100% {
    content: "▌";
  }
}
@keyframes ss-spinner-boxBounce {
  0% {
    content: "▖";
  }
  25% {
    content: "▘";
  }
  50% {
    content: "▝";
  }
  75% {
    content: "▗";
  }
  100% {
    content: "▖";
  }
}
@keyframes ss-spinner-squareCorners {
  0% {
    content: "◰";
  }
  25% {
    content: "◳";
  }
  50% {
    content: "◲";
  }
  75% {
    content: "◱";
  }
  100% {
    content: "◰";
  }
}
@keyframes ss-spinner-toggle2 {
  0% {
    content: "▫";
  }
  50% {
    content: "▪";
  }
  100% {
    content: "▫";
  }
}
@keyframes ss-spinner-toggle3 {
  0% {
    content: "□";
  }
  50% {
    content: "■";
  }
  100% {
    content: "□";
  }
}
@keyframes ss-spinner-toggle4 {
  0% {
    content: "■";
  }
  25% {
    content: "□";
  }
  50% {
    content: "▪";
  }
  75% {
    content: "▫";
  }
  100% {
    content: "■";
  }
}
@keyframes ss-spinner-pipe {
  0% {
    content: "┤";
  }
  12.5% {
    content: "┘";
  }
  25% {
    content: "┴";
  }
  37.5% {
    content: "└";
  }
  50% {
    content: "├";
  }
  62.5% {
    content: "┌";
  }
  75% {
    content: "┬";
  }
  87.5% {
    content: "┐";
  }
  100% {
    content: "┤";
  }
}
@keyframes ss-spinner-line {
  0% {
    content: "-";
  }
  25% {
    content: "\\";
  }
  50% {
    content: "|";
  }
  75% {
    content: "/";
  }
  100% {
    content: "-";
  }
}
@keyframes ss-spinner-growVertical {
  0% {
    content: "▁";
  }
  10% {
    content: "▃";
  }
  20% {
    content: "▄";
  }
  30% {
    content: "▅";
  }
  40% {
    content: "▆";
  }
  50% {
    content: "▇";
  }
  60% {
    content: "▆";
  }
  70% {
    content: "▅";
  }
  80% {
    content: "▄";
  }
  90% {
    content: "▃";
  }
  100% {
    content: "▁";
  }
}
@keyframes ss-spinner-growHorizontal {
  0% {
    content: "▏";
  }
  8.333% {
    content: "▎";
  }
  16.667% {
    content: "▍";
  }
  25% {
    content: "▌";
  }
  33.333% {
    content: "▋";
  }
  41.667% {
    content: "▊";
  }
  50% {
    content: "▉";
  }
  58.333% {
    content: "▊";
  }
  66.667% {
    content: "▋";
  }
  75% {
    content: "▌";
  }
  83.333% {
    content: "▍";
  }
  91.667% {
    content: "▎";
  }
  100% {
    content: "▏";
  }
}
@scope (.ss-spinner) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-spinner {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-gap-sm);
    color: var(--ss-spinner-color, var(--ss-primary));
  }
  :where(:scope).ss-spinner .frame {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-spinner-font, var(--ss-control-font));
    line-height: 1;
    min-width: 1ch;
    text-align: center;
    color: currentColor;
  }
  :where(:scope).ss-spinner .lbl {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-sm);
    color: var(--ss-fg-muted);
    letter-spacing: 0.02em;
  }
  :where(:scope).ss-spinner .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .frame:empty::before {
    content: "▌";
    display: inline-block;
    min-width: 1ch;
    text-align: center;
    animation: ss-spinner-boxBounce2 400ms steps(1, end) infinite;
  }
  :where(:scope).ss-spinner[data-variant="boxBounce2"] .frame:empty::before {
    content: "▌";
    animation-name: ss-spinner-boxBounce2;
    animation-duration: 400ms;
  }
  :where(:scope).ss-spinner[data-variant="boxBounce"] .frame:empty::before {
    content: "▖";
    animation-name: ss-spinner-boxBounce;
    animation-duration: 480ms;
  }
  :where(:scope).ss-spinner[data-variant="squareCorners"] .frame:empty::before {
    content: "◰";
    animation-name: ss-spinner-squareCorners;
    animation-duration: 720ms;
  }
  :where(:scope).ss-spinner[data-variant="toggle2"] .frame:empty::before {
    content: "▫";
    animation-name: ss-spinner-toggle2;
    animation-duration: 160ms;
  }
  :where(:scope).ss-spinner[data-variant="toggle3"] .frame:empty::before {
    content: "□";
    animation-name: ss-spinner-toggle3;
    animation-duration: 240ms;
  }
  :where(:scope).ss-spinner[data-variant="toggle4"] .frame:empty::before {
    content: "■";
    animation-name: ss-spinner-toggle4;
    animation-duration: 400ms;
  }
  :where(:scope).ss-spinner[data-variant="pipe"] .frame:empty::before {
    content: "┤";
    animation-name: ss-spinner-pipe;
    animation-duration: 800ms;
  }
  :where(:scope).ss-spinner[data-variant="line"] .frame:empty::before {
    content: "-";
    animation-name: ss-spinner-line;
    animation-duration: 520ms;
  }
  :where(:scope).ss-spinner[data-variant="growVertical"] .frame:empty::before {
    content: "▁";
    animation-name: ss-spinner-growVertical;
    animation-duration: 1200ms;
  }
  :where(:scope).ss-spinner[data-variant="growHorizontal"] .frame:empty::before {
    content: "▏";
    animation-name: ss-spinner-growHorizontal;
    animation-duration: 1440ms;
  }
  @media (prefers-reduced-motion: reduce) {
    .frame:empty::before {
      animation: none;
    }
  }
}
/* ── Switch ── */
@scope (.ss-switch) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  :where(:scope).ss-switch.has-label {
    gap: var(--ss-switch-gap, var(--ss-gap-sm));
  }
  :where(:scope).ss-switch .track {
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
    width: var(--ss-switch-w, 2.25rem);
    height: var(--ss-switch-h, 1.25rem);
    padding: var(--ss-switch-pad, 2px);
    border-radius: 0;
    border: 1px solid var(--ss-line);
    background: var(--ss-bg-elev);
    cursor: pointer;
    box-sizing: border-box;
    transition: background var(--ss-dur-fast) var(--ss-ease), border-color var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-switch .track .thumb {
    position: absolute;
    top: var(--ss-switch-pad, 2px);
    left: var(--ss-switch-pad, 2px);
    width: var(--ss-switch-thumb, 1rem);
    height: var(--ss-switch-thumb, 1rem);
    border-radius: 0;
    background: var(--ss-fg);
    transition: transform var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-switch .track.on {
    background: var(--ss-primary);
    border-color: var(--ss-primary);
  }
  :where(:scope).ss-switch .track.on .thumb {
    background: var(--ss-bg);
    transform: translateX(calc(var(--ss-switch-w, 2.25rem) - var(--ss-switch-thumb, 1rem) - 2 * var(--ss-switch-pad, 2px) - 2px));
  }
  :where(:scope).ss-switch .track:not(:disabled):hover {
    border-color: var(--ss-line-strong);
  }
  :where(:scope).ss-switch .track:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ss-primary-soft);
  }
  :where(:scope).ss-switch .track:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }
  :where(:scope).ss-switch .label {
    font: 500 var(--ss-control-font)/1 var(--ss-font-body);
    color: var(--ss-fg);
    cursor: pointer;
    user-select: none;
  }
  :where(:scope).ss-switch .label.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  :where(:scope).ss-switch:has(.track:disabled) .label {
    cursor: not-allowed;
    opacity: 0.45;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(:scope).ss-switch .track, :where(:scope).ss-switch .track .thumb {
      transition: none;
    }
  }
}
/* ── Table ── */
@scope (.ss-table) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-textarea, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ss-font-body);
    font-size: var(--ss-table-font, var(--ss-ui-xs));
    color: var(--ss-fg);
    background: var(--ss-bg);
  }
  :where(:scope).ss-table caption {
    caption-side: top;
    text-align: left;
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    color: var(--ss-fg-muted);
    letter-spacing: 0.04em;
    padding-bottom: var(--ss-gap-sm);
  }
  :where(:scope).ss-table .head {
    text-align: left;
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ss-fg-muted);
    background: var(--ss-bg-elev);
    border-bottom: 1px solid var(--ss-line-strong);
    padding: var(--ss-table-py, 8px) var(--ss-table-px, 12px);
    white-space: nowrap;
  }
  :where(:scope).ss-table .head[data-align=right] {
    text-align: right;
  }
  :where(:scope).ss-table .head[data-align=center] {
    text-align: center;
  }
  :where(:scope).ss-table .head.numeric {
    font-family: var(--ss-font-mono);
  }
  :where(:scope).ss-table .sort {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-gap-sm);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: color var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-table .sort:hover {
    color: var(--ss-fg);
  }
  :where(:scope).ss-table .sort:focus-visible {
    outline: none;
    color: var(--ss-fg);
    box-shadow: 0 0 0 2px var(--ss-primary-soft);
  }
  :where(:scope).ss-table .head[data-align=right] .sort {
    flex-direction: row-reverse;
  }
  :where(:scope).ss-table .indicator {
    color: var(--ss-fg-faint);
    font-family: var(--ss-font-mono);
    line-height: 1;
  }
  :where(:scope).ss-table th[aria-sort=ascending], :where(:scope).ss-table th[aria-sort=descending] {
    color: var(--ss-fg);
  }
  :where(:scope).ss-table th[aria-sort=ascending] .indicator, :where(:scope).ss-table th[aria-sort=descending] .indicator {
    color: var(--ss-primary);
  }
  :where(:scope).ss-table .row {
    transition: background var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-table .row:hover {
    background: var(--ss-hover);
  }
  :where(:scope).ss-table .cell {
    padding: var(--ss-table-py, 8px) var(--ss-table-px, 12px);
    border-bottom: 1px solid var(--ss-line);
    vertical-align: middle;
    text-align: left;
  }
  :where(:scope).ss-table .cell[data-align=right] {
    text-align: right;
  }
  :where(:scope).ss-table .cell[data-align=center] {
    text-align: center;
  }
  :where(:scope).ss-table .cell.numeric {
    font-family: var(--ss-font-mono);
  }
  :where(:scope).ss-table .cell.empty {
    text-align: center;
    color: var(--ss-fg-muted);
    font-family: var(--ss-font-mono);
    padding: var(--ss-table-empty-py, 24px) var(--ss-table-px, 12px);
  }
}
/* ── Textarea ── */
@scope (.ss-textarea) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-toaster, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-textarea {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  :where(:scope).ss-textarea .lbl {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    color: var(--ss-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  :where(:scope).ss-textarea .lbl .req {
    color: var(--ss-red);
    margin-left: 2px;
  }
  :where(:scope).ss-textarea .control {
    display: flex;
    align-items: stretch;
    background: transparent;
    color: var(--ss-fg);
    border: 1px solid var(--ss-line);
    padding: 0 var(--ss-input-px);
    transition: border-color var(--ss-dur-fast) var(--ss-ease), box-shadow var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-textarea .control:focus-within {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 3px var(--ss-primary-soft);
  }
  :where(:scope).ss-textarea.invalid .control {
    border-color: var(--ss-red);
  }
  :where(:scope).ss-textarea.invalid .control:focus-within {
    border-color: var(--ss-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-danger) 22%, transparent);
  }
  :where(:scope).ss-textarea.disabled .control {
    border-color: var(--ss-line);
  }
  :where(:scope).ss-textarea .field {
    font-family: var(--ss-font-body);
    font-size: var(--ss-input-font);
    line-height: 1.5;
    background: transparent;
    color: var(--ss-fg);
    border: none;
    padding: var(--ss-input-py) 0;
    width: 100%;
    min-width: 0;
    resize: vertical;
    transition: color var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-textarea .field:focus {
    outline: none;
  }
  :where(:scope).ss-textarea .field::placeholder {
    font-style: italic;
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-textarea .field[readonly] {
    color: var(--ss-fg-muted);
    cursor: default;
  }
  :where(:scope).ss-textarea .field:disabled {
    color: var(--ss-fg-faint);
    cursor: not-allowed;
    -webkit-text-fill-color: var(--ss-fg-faint);
  }
  :where(:scope).ss-textarea .field.autosize {
    resize: none;
    overflow-y: auto;
  }
  @supports (field-sizing: content) {
    :where(:scope).ss-textarea .field.autosize {
      field-sizing: content;
    }
  }
  :where(:scope).ss-textarea .msg {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    letter-spacing: 0.02em;
  }
  :where(:scope).ss-textarea .msg.hint {
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-textarea .msg.error {
    color: var(--ss-red);
  }
}
/* ── Toaster ── */
@keyframes ss-toast-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ss-toast-in {
  from {
    opacity: 0;
    transform: translate(var(--ss-toast-fly-x, 16px), var(--ss-toast-fly-y, 0));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ss-toast-out {
  to {
    opacity: 0;
    transform: translate(var(--ss-toast-fly-x, 16px), var(--ss-toast-fly-y, 0));
  }
}
@scope (.ss-toaster) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-tooltip, .ss-topbar) {
  :where(:scope).ss-toaster {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--ss-s-2);
    max-width: min(360px, 100vw - var(--ss-s-8));
    pointer-events: none;
    top: var(--ss-s-4);
    right: var(--ss-s-4);
  }
  :where(:scope).ss-toaster[data-position=top-left] {
    right: auto;
    left: var(--ss-s-4);
  }
  :where(:scope).ss-toaster[data-position=bottom-right] {
    top: auto;
    bottom: var(--ss-s-4);
    flex-direction: column-reverse;
  }
  :where(:scope).ss-toaster[data-position=bottom-left] {
    top: auto;
    right: auto;
    bottom: var(--ss-s-4);
    left: var(--ss-s-4);
    flex-direction: column-reverse;
  }
  :where(:scope).ss-toaster[data-position=top-center] {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
  :where(:scope).ss-toaster[data-position=bottom-center] {
    top: auto;
    right: auto;
    bottom: var(--ss-s-4);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column-reverse;
  }
  .ss-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--ss-s-3);
    padding: var(--ss-s-3) var(--ss-s-4);
    background: var(--ss-bg-elev);
    border: 1px solid var(--ss-line);
    border-left: 3px solid var(--ss-fg-faint);
    box-shadow: var(--ss-shadow-pop);
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-md);
    color: var(--ss-fg);
    touch-action: pan-y;
    outline: none;
  }
  .ss-toast:focus-visible {
    border-color: var(--ss-line-strong);
    box-shadow: var(--ss-shadow-pop), 0 0 0 2px var(--ss-primary);
  }
  .ss-toast:not(.dragging) {
    transition: transform var(--ss-dur-fast) var(--ss-ease);
  }
  .ss-toast.success {
    border-left-color: var(--ss-primary);
  }
  .ss-toast.error {
    border-left-color: var(--ss-red);
  }
  .ss-toast.info {
    border-left-color: var(--ss-cyan);
  }
  .ss-toast.loading {
    border-left-color: var(--ss-fg-faint);
  }
  .ss-toast .ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-toast-ic);
    height: var(--ss-toast-ic);
    font-size: var(--ss-ui-sm);
    color: var(--ss-fg-on-primary);
    flex: none;
  }
  .ss-toast.success .ic {
    background: var(--ss-primary);
  }
  .ss-toast.error .ic {
    background: var(--ss-red);
  }
  .ss-toast.info .ic {
    background: var(--ss-cyan);
  }
  .ss-toast .spinner {
    box-sizing: border-box;
    background: transparent;
    border: 2px solid var(--ss-line-strong);
    border-top-color: var(--ss-cyan);
    animation: ss-toast-spin 0.7s linear infinite;
  }
  .ss-toast .spinner.still {
    animation: none;
    border-color: var(--ss-cyan);
  }
  .ss-toast .msg {
    flex: 1;
    line-height: 1.3;
  }
  .ss-toast .action {
    flex: none;
    background: none;
    border: 1px solid var(--ss-line-strong);
    color: var(--ss-fg);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--ss-ui-sm);
    line-height: 1;
    padding: var(--ss-s-1) var(--ss-s-2);
  }
  .ss-toast .action:hover {
    background: var(--ss-hover);
    border-color: var(--ss-fg-faint);
  }
  .ss-toast .action:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 1px;
  }
  .ss-toast .x {
    flex: none;
    background: none;
    border: none;
    color: var(--ss-fg-faint);
    cursor: pointer;
    font-size: var(--ss-size-h3);
    line-height: 1;
    padding: 0;
  }
  .ss-toast .x:hover {
    color: var(--ss-fg);
  }
  .ss-toast .x:focus-visible {
    outline: 2px solid var(--ss-primary);
    outline-offset: 1px;
  }
  @media (prefers-reduced-motion: reduce) {
    .ss-toast .spinner {
      animation: none;
      border-color: var(--ss-cyan);
    }
  }
  .ss-toast {
    animation: ss-toast-in var(--ss-dur-fast) var(--ss-ease) both;
  }
  .ss-toast.leaving {
    animation: ss-toast-out var(--ss-dur-fast) var(--ss-ease) forwards;
    pointer-events: none;
  }
  :where(:scope).ss-toaster[data-position$="left"] {
    --ss-toast-fly-x: -16px;
  }
  :where(:scope).ss-toaster[data-position$="center"] {
    --ss-toast-fly-x: 0px;
  }
  :where(:scope).ss-toaster[data-position="top-center"] {
    --ss-toast-fly-y: -16px;
  }
  :where(:scope).ss-toaster[data-position="bottom-center"] {
    --ss-toast-fly-y: 16px;
  }
}
/* ── Tooltip ── */
@scope (.ss-tooltip) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-topbar) {
  :where(:scope).ss-tooltip {
    position: relative;
    display: inline-block;
  }
  .trigger {
    display: inline-flex;
  }
  .tip {
    --shift: 0px;
    position: absolute;
    z-index: 60;
    display: block;
    width: max-content;
    max-width: var(--ss-tooltip-max-w, 240px);
    padding: var(--ss-tooltip-py, 4px) var(--ss-tooltip-px, 8px);
    font: 500 var(--ss-ui-xs) var(--ss-font-mono);
    color: var(--ss-fg);
    background: var(--ss-bg-elev);
    border: 1px solid var(--ss-line);
    box-shadow: var(--ss-shadow-pop);
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.98);
    transition: opacity var(--ss-dur) var(--ss-ease), transform var(--ss-dur) var(--ss-ease), visibility 0s linear var(--ss-dur);
  }
  .tip.open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity var(--ss-dur) var(--ss-ease), transform var(--ss-dur) var(--ss-ease), visibility 0s linear 0s;
  }
  :where(:scope).ss-tooltip[data-placement=top] .tip {
    bottom: calc(100% + var(--ss-tooltip-offset, 6px));
    left: 50%;
    transform: translateX(calc(-50% + var(--shift))) scale(0.98);
    transform-origin: bottom center;
  }
  :where(:scope).ss-tooltip[data-placement=top] .tip.open {
    transform: translateX(calc(-50% + var(--shift))) scale(1);
  }
  :where(:scope).ss-tooltip[data-placement=bottom] .tip {
    top: calc(100% + var(--ss-tooltip-offset, 6px));
    left: 50%;
    transform: translateX(calc(-50% + var(--shift))) scale(0.98);
    transform-origin: top center;
  }
  :where(:scope).ss-tooltip[data-placement=bottom] .tip.open {
    transform: translateX(calc(-50% + var(--shift))) scale(1);
  }
  :where(:scope).ss-tooltip[data-placement=left] .tip {
    right: calc(100% + var(--ss-tooltip-offset, 6px));
    top: 50%;
    transform: translateY(calc(-50% + var(--shift))) scale(0.98);
    transform-origin: right center;
  }
  :where(:scope).ss-tooltip[data-placement=left] .tip.open {
    transform: translateY(calc(-50% + var(--shift))) scale(1);
  }
  :where(:scope).ss-tooltip[data-placement=right] .tip {
    left: calc(100% + var(--ss-tooltip-offset, 6px));
    top: 50%;
    transform: translateY(calc(-50% + var(--shift))) scale(0.98);
    transform-origin: left center;
  }
  :where(:scope).ss-tooltip[data-placement=right] .tip.open {
    transform: translateY(calc(-50% + var(--shift))) scale(1);
  }
  @media (prefers-reduced-motion: reduce) {
    .tip, .tip.open {
      transition: none;
      transform: none;
    }
    :where(:scope).ss-tooltip[data-placement=top] .tip, :where(:scope).ss-tooltip[data-placement=top] .tip.open, :where(:scope).ss-tooltip[data-placement=bottom] .tip, :where(:scope).ss-tooltip[data-placement=bottom] .tip.open {
      transform: translateX(calc(-50% + var(--shift)));
    }
    :where(:scope).ss-tooltip[data-placement=left] .tip, :where(:scope).ss-tooltip[data-placement=left] .tip.open, :where(:scope).ss-tooltip[data-placement=right] .tip, :where(:scope).ss-tooltip[data-placement=right] .tip.open {
      transform: translateY(calc(-50% + var(--shift)));
    }
  }
}
/* ── Topbar ── */
@scope (.ss-topbar) to (.ss-accordion, .ss-avatar, .ss-badge, .ss-bottom-nav, .ss-boxplot, .ss-bump, .ss-btn, .ss-card, .ss-chart, .ss-container, .ss-datefield, .ss-empty, .ss-filedrop, .ss-heading, .ss-heatmap, .ss-icon, .ss-image, .ss-image-lightbox, .ss-field, .ss-kbd, .ss-link, .ss-logs, .ss-menu, .ss-metric, .ss-modal, .ss-numberfield, .ss-pagination, .ss-scatter, .ss-search-palette, .ss-segmented, .ss-select, .ss-svc, .ss-shortcuts-help, .ss-side, .ss-spark, .ss-spinner, .ss-switch, .ss-table, .ss-textarea, .ss-toaster, .ss-tooltip) {
  :where(:scope).ss-topbar {
    grid-column: 1/-1;
    display: flex;
    align-items: stretch;
    background: var(--ss-bg);
    border-bottom: 1px solid var(--ss-line);
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-md);
    color: var(--ss-fg-muted);
    user-select: none;
    position: relative;
    top: 0;
    z-index: 10;
  }
  :where(:scope).ss-topbar.sticky {
    position: sticky;
  }
  :where(:scope).ss-topbar .skip {
    position: absolute;
    left: var(--ss-s-1);
    top: var(--ss-s-1);
    z-index: 20;
    padding: var(--ss-chip-py) var(--ss-badge-px);
    background: var(--ss-primary);
    color: var(--ss-fg-on-primary);
    font: 500 var(--ss-ui-md) var(--ss-font-mono);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-topbar .skip:focus-visible, :where(:scope).ss-topbar .skip:focus {
    transform: translateY(0);
  }
  :where(:scope).ss-topbar .seg {
    display: flex;
    align-items: center;
    gap: var(--ss-s-2);
    padding: 0 var(--ss-panel-head-px);
    border-right: 1px solid var(--ss-line);
    cursor: default;
    flex: none;
  }
  :where(:scope).ss-topbar .seg.right {
    border-right: none;
    border-left: 1px solid var(--ss-line);
  }
  :where(:scope).ss-topbar .seg.click {
    cursor: pointer;
  }
  :where(:scope).ss-topbar .seg.click:hover {
    background: var(--ss-hover);
    color: var(--ss-fg);
  }
  :where(:scope).ss-topbar button.seg {
    background: transparent;
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
    color: inherit;
    font: inherit;
    min-height: var(--ss-s-6);
  }
  :where(:scope).ss-topbar button.seg.right {
    border-left: 1px solid var(--ss-line);
  }
  :where(:scope).ss-topbar .logo {
    color: var(--ss-fg);
  }
  :where(:scope).ss-topbar .logo .mark {
    display: block;
  }
  :where(:scope).ss-topbar .logo .nm {
    font-family: var(--ss-font-display);
    font-size: var(--ss-ui-lg);
    letter-spacing: 0.02em;
    line-height: 1;
  }
  :where(:scope).ss-topbar .ws {
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  :where(:scope).ss-topbar .ws .tab {
    display: flex;
    align-items: center;
    flex: none;
    white-space: nowrap;
    padding: 0 var(--ss-row-px);
    min-height: var(--ss-s-6);
    color: var(--ss-fg-faint);
    border-right: 1px solid var(--ss-line);
    cursor: pointer;
    font: 500 var(--ss-ui-md) var(--ss-font-mono);
    background: transparent;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    text-decoration: none;
    transition: all var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-topbar .ws .tab:hover {
    color: var(--ss-fg);
    background: var(--ss-hover);
  }
  :where(:scope).ss-topbar .ws .tab .n {
    color: var(--ss-fg-faint);
    margin-right: 6px;
  }
  :where(:scope).ss-topbar .ws .tab.active {
    color: var(--ss-fg);
    background: color-mix(in srgb, var(--ss-accent) 6%, transparent);
    box-shadow: inset 0 -2px 0 var(--ss-primary);
  }
  :where(:scope).ss-topbar .ws .tab.active .n {
    color: var(--ss-primary);
  }
  :where(:scope).ss-topbar .grow {
    flex: 1;
  }
  :where(:scope).ss-topbar .dot {
    width: 6px;
    height: 6px;
    background: var(--ss-primary);
    display: inline-block;
  }
  :where(:scope).ss-topbar .stat {
    font-variant-numeric: tabular-nums;
  }
  :where(:scope).ss-topbar .stat .k {
    color: var(--ss-fg-faint);
    margin-right: var(--ss-s-1);
  }
  :where(:scope).ss-topbar .stat .v {
    color: var(--ss-fg);
  }
  :where(:scope).ss-topbar .clock {
    color: var(--ss-fg);
    font-variant-numeric: tabular-nums;
  }
  :where(:scope).ss-topbar .clock .sep {
    color: var(--ss-fg-faint);
    margin: 0 2px;
  }
  :where(:scope).ss-topbar .kbd {
    display: inline-flex;
    align-items: center;
  }
  @media (max-width: 720px) {
    :where(:scope).ss-topbar .collapsible {
      display: none;
    }
  }
  @media (max-width: 520px) {
    :where(:scope).ss-topbar .ws {
      display: none;
    }
  }
}
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ss-bg); }
#app { position: fixed; inset: 0; }
.tm-gl { position: fixed; inset: 0; }
[hidden] { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; font-family: var(--ss-font-body); color: var(--ss-fg); }
#hud > * { pointer-events: auto; }

.tm-score { position: absolute; top: 12px; left: 12px; width: 300px; }
.tm-score .tm-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tm-score .foot { font-size: var(--ss-ui-sm); color: var(--ss-fg-muted); }
.tm-seats { position: absolute; top: 12px; right: 12px; }

.tm-keys { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: 92vw; background: var(--ss-bg-elev); border: 1px solid var(--ss-line); padding: 8px 14px; font-size: var(--ss-ui-sm); color: var(--ss-fg-muted); }
.tm-keys .tm-k { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.tm-keys .tm-k.on { color: var(--ss-accent); }
.tm-keys .tm-k.hot { color: var(--ss-fg); }

.tm-log { position: absolute; bottom: 12px; left: 12px; width: 320px; --ss-log-min-h: 0; --ss-log-max-h: 150px; border: 1px solid var(--ss-line); background: var(--ss-bg-elev); }
.tm-log .scroll { font-size: var(--ss-ui-sm); }

.tm-prompt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 360px; }
.tm-prompt .body { display: flex; flex-direction: column; gap: 12px; }
.tm-prompt .tm-title { font-family: var(--ss-font-display); font-size: var(--ss-size-h3); margin: 0; }
.tm-prompt .tm-text { color: var(--ss-fg-muted); font-size: var(--ss-ui-sm); margin: 0; }
.tm-prompt .tm-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tm-prompt .tm-row .ss-btn { gap: 10px; }

.tm-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); display: flex; align-items: center; justify-content: center; }
.tm-menu { width: min(760px, 94vw); max-height: 94vh; overflow: auto; }
.tm-menu .body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
.tm-menu .foot { justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; background: var(--ss-bg-elev); }
.tm-section h4 { margin: 0 0 8px; font-family: var(--ss-font-mono); font-size: var(--ss-ui-sm); color: var(--ss-fg-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 400; }
.tm-section + .tm-section { margin-top: 16px; }
.tm-rules { display: flex; flex-direction: column; gap: 6px; }
.tm-rules .tm-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--ss-ui-sm); }
.tm-rules .tm-line > span:first-child { color: var(--ss-fg); }
.tm-hint { color: var(--ss-fg-faint); font-size: var(--ss-ui-xs); margin-top: 8px; }
.tm-rows { list-style: none; padding: 0; }
.tm-crosshair { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border: 1px solid var(--ss-accent); opacity: 0.6; pointer-events: none; }

@media (max-width: 900px) { .tm-log { display: none; } .tm-menu .body { grid-template-columns: 1fr; } }

/* telas fora da mesa: início e sala */
.tm-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: var(--ss-font-body); color: var(--ss-fg); }
.tm-panel { width: min(460px, 100%); max-height: 94vh; overflow: auto; }
.tm-panel .body { display: flex; flex-direction: column; gap: 16px; }
.tm-panel .foot { justify-content: flex-end; }
.tm-form { display: flex; gap: 8px; align-items: flex-end; }
.tm-form .ss-field { flex: 1; }
.tm-code-input { font-family: var(--ss-font-mono); text-transform: uppercase; letter-spacing: 0.2em; }
.tm-share { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tm-code { font-family: var(--ss-font-mono); font-size: var(--ss-size-h2); letter-spacing: 0.25em; }
.tm-members { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tm-members li { display: flex; align-items: center; gap: 8px; }
.tm-members li.off > span:first-child { color: var(--ss-fg-faint); text-decoration: line-through; }
.tm-members li > .ss-btn { margin-left: auto; }
.tm-warn { color: var(--ss-yellow); }
.tm-error { margin: 0; color: var(--ss-red); font-size: var(--ss-ui-sm); }

/* lobby: duplas, fantasmas, regras */
.tm-lobby { width: min(640px, 100%); }
.tm-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tm-team .head { padding-bottom: 0; }
.tm-team.mine { border-color: var(--ss-accent); }
.tm-team .body { display: flex; flex-direction: column; gap: 8px; min-height: 64px; }
.tm-team .foot { justify-content: flex-end; }
.tm-team-name { font-family: var(--ss-font-display); font-weight: 700; width: 100%; }
.tm-members li.empty > span { color: var(--ss-fg-faint); font-size: var(--ss-ui-xs); }
.tm-seats .tm-bot { color: var(--ss-fg-faint); font-size: var(--ss-ui-xs); margin-left: 2px; }
.tm-toast { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: var(--ss-bg-elev); border: 1px solid var(--ss-line); padding: 6px 12px; font-family: var(--ss-font-body); font-size: var(--ss-ui-sm); z-index: 2; }
@media (max-width: 640px) { .tm-teams { grid-template-columns: 1fr; } }
.tm-log-hint { display: block; color: var(--ss-fg-faint); font-size: var(--ss-ui-xs); font-style: italic; }
.tm-lang .ss-segmented { font-size: var(--ss-ui-xs); }

  div.svelte-1iek59z {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  canvas.svelte-1iek59z {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
  }