@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;
}

:root,
[data-size-variant=md] {
  --ss-tier-tile-w: 108px;
  --ss-tier-tile-h: 108px;
  --ss-tier-label-w: 44px;
  --ss-tier-label-font: var(--ss-ui-lg);
  --ss-tier-gap: 6px;
}

[data-size-variant=sm] {
  --ss-tier-tile-w: 84px;
  --ss-tier-tile-h: 84px;
  --ss-tier-label-w: 36px;
  --ss-tier-label-font: var(--ss-ui-md);
  --ss-tier-gap: var(--ss-s-1);
}

[data-size-variant=lg] {
  --ss-tier-tile-w: 132px;
  --ss-tier-tile-h: 132px;
  --ss-tier-label-w: 56px;
  --ss-tier-label-font: var(--ss-size-h3);
  --ss-tier-gap: var(--ss-s-2);
}

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-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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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;
    }
  }
  .tab::before {
    content: 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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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;
  }
  .overlay::before {
    content: none;
  }
}
.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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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[hidden] {
    display: none;
  }
  :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-tierlist, .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;
  }
  @media (hover: none) and (pointer: coarse) {
    :where(:scope).ss-kbd:not([data-hide-on-mobile=false]) {
      display: none;
    }
  }
}
/* ── 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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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;
    color: var(--ss-fg-muted);
  }
  :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);
    color: color-mix(in oklab, var(--ss-danger) 70%, var(--ss-fg));
  }
  :where(:scope).ss-metric .delta.emphasis.neutral {
    background: var(--ss-hover);
  }
  :where(:scope).ss-metric .delta.emphasis .period {
    color: inherit;
  }
  :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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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;
    }
  }
  .row::before {
    content: 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-tierlist, .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-tierlist, .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-tierlist, .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;
    }
  }
  :where(:scope).ss-svc::before {
    content: 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-tierlist, .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-tierlist, .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 {

  }
  :where(:scope).ss-side .item .ext {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-side .item .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-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);
  }
  .item::before {
    content: none;
  }
}
/* ── 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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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-tierlist, .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);
  }
}
/* ── TierList ── */
@scope (.ss-tierlist) 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, .ss-topbar) {
  :where(:scope).ss-tierlist {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ss-tier-gap);
    font-family: var(--ss-font-body);
  }
  :where(:scope).ss-tierlist .row {
    display: flex;
    align-items: stretch;
    gap: var(--ss-tier-gap);
  }
  :where(:scope).ss-tierlist .letter {
    flex: none;
    width: var(--ss-tier-label-w);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ss-font-display);
    font-size: var(--ss-tier-label-font);
    color: var(--ss-tier-color);
    border: 1px solid color-mix(in srgb, var(--ss-tier-color) 40%, transparent);
    background: color-mix(in srgb, var(--ss-tier-color) 12%, transparent);
    overflow-wrap: anywhere;
    text-align: center;
  }
  :where(:scope).ss-tierlist .zone {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: var(--ss-tier-gap);
    min-height: calc(var(--ss-tier-tile-h) + 2 * var(--ss-tier-gap) + 2px);
    margin: 0;
    padding: var(--ss-tier-gap);
    list-style: none;
    border: 1px solid var(--ss-line);
    background: var(--ss-bg-elev);
    box-sizing: border-box;
    transition: outline-color var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-tierlist .zone.target {
    outline: 1px dashed var(--ss-accent);
    outline-offset: 2px;
  }
  :where(:scope).ss-tierlist .tray-row {
    display: flex;
    flex-direction: column;
    gap: var(--ss-s-1);
    margin-top: var(--ss-s-1);
    padding-top: var(--ss-s-2);
    border-top: 1px solid var(--ss-line);
  }
  :where(:scope).ss-tierlist .tray-label {
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ss-fg-faint);
  }
  :where(:scope).ss-tierlist .zone.tray {
    background: var(--ss-bg-inset);
  }
  :where(:scope).ss-tierlist .cell {
    display: block;
    list-style: none;
  }
  :where(:scope).ss-tierlist .tile {
    width: var(--ss-tier-tile-w);
    height: var(--ss-tier-tile-h);
    display: flex;
    align-items: flex-end;
    padding: 0;
    margin: 0;
    border: 1px solid var(--ss-line);
    border-radius: 0;
    background: var(--ss-bg-inset);
    color: inherit;
    font: inherit;
    text-align: left;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color var(--ss-dur-fast) var(--ss-ease), box-shadow var(--ss-dur-fast) var(--ss-ease);
  }
  :where(:scope).ss-tierlist .tile:hover {
    border-color: var(--ss-line-strong);
  }
  :where(:scope).ss-tierlist .name {
    padding: var(--ss-s-1);
    font-family: var(--ss-font-mono);
    font-size: var(--ss-ui-xs);
    line-height: 1.3;
    color: var(--ss-fg-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    word-break: break-word;
  }
  :where(:scope).ss-tierlist .cell.grabbed .tile {
    border-color: var(--ss-accent);
    box-shadow: var(--ss-shadow-pop);
  }
  :where(:scope).ss-tierlist .cell.shadow {
    opacity: 0.4;
  }
  :where(:scope).ss-tierlist .cell.shadow .tile {
    border-style: dashed;
    border-color: var(--ss-accent);
  }
  :where(:scope).ss-tierlist .ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    pointer-events: none;
    border-color: var(--ss-accent);
    box-shadow: var(--ss-shadow-pop);
    opacity: 0.92;
    cursor: grabbing;
  }
  :where(:scope).ss-tierlist.dragging {
    user-select: none;
  }
  :where(:scope).ss-tierlist.dragging .tile {
    cursor: grabbing;
  }
  :where(:scope).ss-tierlist[data-ss-readonly] .tile {
    cursor: default;
  }
  :where(:scope).ss-tierlist .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-tierlist .tile img, .ss-tierlist .tile svg, .ss-tierlist .tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ── 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-tierlist, .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-tierlist, .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-tierlist, .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;
  }
  :where(:scope).ss-topbar .touch {
    display: none;
    align-items: center;
    color: var(--ss-fg-muted);
  }
  @media (hover: none) and (pointer: coarse) {
    :where(:scope).ss-topbar .touch {
      display: inline-flex;
    }
  }
  @media (max-width: 720px) {
    :where(:scope).ss-topbar .collapsible {
      display: none;
    }
  }
  @media (max-width: 520px) {
    :where(:scope).ss-topbar .ws {
      display: none;
    }
  }
  .tab::before, .skip::before {
    content: none;
  }
}
html, body { margin: 0; min-height: 100%; background: var(--ss-bg); }
[hidden] { display: none !important; }

/*
 * O jeito da guessoca por cima do dssoca: a paleta, as fontes e os componentes são os dele; aqui só muda como a
 * guessoca os usa. Os componentes do dssoca vêm em @scope, que ganha de uma classe solta por proximidade: os ajustes
 * daqui sempre levam uma classe a mais (`:is(.gs-screen, .gs-room)`) para ganhar por especificidade.
 */
:root {
  /* um movimento só: a curva e três durações (resposta, menus, entradas) */
  --gs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gs-fast: 150ms;
  --gs-dur: 200ms;
  --gs-enter: 320ms;
  /* a superfície de tudo o que flutua sobre o telhado: coluna, vez, votação, ranking, bloco, menu e botões do canto */
  --gs-float-bg: color-mix(in srgb, var(--ss-bg) 88%, transparent);
  --gs-float-line: var(--ss-line);
  --gs-float-blur: blur(4px);
  /* o anel de foco do teclado: neutro, visível */
  --gs-focus: color-mix(in srgb, var(--ss-fg) 55%, transparent);
  /* a cor de cada personagem (src/lib/sprites/characters.json): 0–3 o cabelo do herói, 4–7 a capa do esqueleto */
  --gs-char-0: #7d5556; --gs-char-1: #2c2838; --gs-char-2: #d9a441; --gs-char-3: #b9452a;
  --gs-char-4: #982b2b; --gs-char-5: #2f50ad; --gs-char-6: #cdbfb4; --gs-char-7: #6c2fa3;
}
@media (prefers-reduced-motion: reduce) {
  :root { --gs-fast: 0ms; --gs-dur: 0ms; --gs-enter: 0ms; }
}

/* ── os componentes do dssoca, do jeito da guessoca ── */

/* botões: só cor, fundo, borda e um aperto pequeno; sem brilho; o principal desligado fica neutro */
:is(.gs-screen, .gs-room) .ss-btn {
  transition: color var(--gs-fast) var(--gs-ease), background-color var(--gs-fast) var(--gs-ease), border-color var(--gs-fast) var(--gs-ease), opacity var(--gs-fast) var(--gs-ease), transform var(--gs-fast) var(--gs-ease);
}
:is(.gs-screen, .gs-room) .ss-btn:not(:disabled):active { transform: scale(0.98); }
:is(.gs-screen, .gs-room) .ss-btn.primary:not(:disabled):hover { box-shadow: none; }
:is(.gs-screen, .gs-room) .ss-btn.primary:disabled { background: transparent; color: var(--ss-fg-muted); border-color: var(--ss-line); }
:is(.gs-screen, .gs-room) .ss-btn:focus-visible { outline: 2px solid var(--gs-focus); outline-offset: 2px; }
:is(.gs-screen, .gs-room) .ss-btn.gs-sm { min-height: 28px; height: 28px; padding: 0 8px; font-size: var(--ss-ui-sm); gap: 6px; }
:is(.gs-screen, .gs-room) .ss-btn.gs-icon-btn { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; gap: 0; justify-content: center; }

/* a tecla: a assinatura. A mesma em todo lugar; dentro de um botão, herda a cor do texto dele */
:is(.gs-screen, .gs-room) .ss-kbd { gap: 4px; color: var(--ss-fg-muted); font: 500 11px/13px var(--ss-font-mono); }
:is(.gs-screen, .gs-room) .ss-kbd .key { font: inherit; min-width: 18px; padding: 0 4px; color: inherit; background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-bottom-width: 2px; }
:is(.gs-screen, .gs-room) .ss-btn .ss-kbd { color: inherit; opacity: 0.7; }

/* títulos e rótulos em caixa normal, sem espaçamento largo */
:is(.gs-screen, .gs-room) .ss-card .head { text-transform: none; letter-spacing: normal; font-family: var(--ss-font-body); font-size: var(--ss-ui-md); color: var(--ss-fg-muted); }
:is(.gs-screen, .gs-room) .ss-card .head .title { letter-spacing: normal; }
:is(.gs-screen, .gs-room) :is(.ss-field, .ss-textarea) .lbl { text-transform: none; letter-spacing: normal; font: 400 var(--ss-ui-sm)/16px var(--ss-font-body); color: var(--ss-fg-muted); }

/* campos: o foco continua visível, mas baixo; o texto de exemplo sem itálico */
:is(.gs-screen, .gs-room) :is(.ss-field, .ss-textarea) .control:focus-within { border-color: color-mix(in srgb, var(--ss-accent) 50%, var(--ss-line)); box-shadow: none; }
:is(.gs-screen, .gs-room) .ss-input::placeholder, :is(.gs-screen, .gs-room) .ss-textarea .field::placeholder { font-style: normal; }

/* interruptor e segmentado: "ligado" é um degrau de superfície, não o verde */
:is(.gs-screen, .gs-room) .ss-switch .track { background: transparent; border-color: var(--ss-line-strong); }
:is(.gs-screen, .gs-room) .ss-switch .track .thumb { background: var(--ss-fg-faint); }
:is(.gs-screen, .gs-room) .ss-switch .track.on { background: color-mix(in srgb, var(--ss-fg) 14%, transparent); border-color: color-mix(in srgb, var(--ss-fg) 40%, transparent); }
:is(.gs-screen, .gs-room) .ss-switch .track.on .thumb { background: var(--ss-fg); }
:is(.gs-screen, .gs-room) .ss-switch .track:focus-visible { box-shadow: none; outline: 2px solid var(--gs-focus); outline-offset: 2px; }
:is(.gs-screen, .gs-room) .ss-segmented .segment.selected { color: var(--ss-fg); background: color-mix(in srgb, var(--ss-fg) 10%, transparent); }
:is(.gs-screen, .gs-room) .ss-segmented .segment.selected:focus-visible { box-shadow: inset 0 0 0 2px var(--gs-focus); }
.gs-lang .ss-segmented { --ss-seg-font: var(--ss-ui-sm); --ss-seg-py: 7px; --ss-seg-px: 12px; }

/* ── peças da guessoca ── */

/* marcas em texto mono baixo, no lugar das pílulas; só uma por linha tem cor */
.gs-tags { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.gs-tag { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 400 var(--ss-ui-sm)/16px var(--ss-font-mono); color: var(--ss-fg-faint); white-space: nowrap; }
.gs-tags .gs-tag + .gs-tag::before { content: '·'; margin-right: 2px; color: var(--ss-fg-faint); }
.gs-tag.on { color: var(--ss-fg-muted); }
.gs-tag.good { color: var(--ss-green); }
.gs-tag.turn { color: var(--ss-accent); }
/* contagens ao lado do rótulo */
.gs-n { font: 400 var(--ss-ui-sm)/16px var(--ss-font-mono); color: var(--ss-fg-faint); font-variant-numeric: tabular-nums; }
/* o código da sala: letras espaçadas, mono */
.gs-code { font-family: var(--ss-font-mono); font-size: var(--ss-size-h2); font-weight: 500; letter-spacing: 0.25em; font-variant-numeric: tabular-nums; }
.gs-code.small { font-size: var(--ss-size-h3); }
.gs-code.tiny { font-size: var(--ss-ui-sm); letter-spacing: 0.2em; }

.gs-hint { margin: 0; color: var(--ss-fg-faint); font-size: var(--ss-ui-sm); line-height: 16px; }
.gs-error { margin: 0; color: var(--ss-red); font-size: var(--ss-ui-sm); }
.gs-warn { color: var(--ss-yellow); }
.gs-credit { margin: 0; color: var(--ss-fg-faint); font-size: var(--ss-ui-sm); }
.gs-spacer { flex: 1; }
.gs-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gs-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; font-size: var(--ss-ui-md); }
.gs-line h4 { margin: 0; font-size: var(--ss-ui-md); font-weight: 500; }
.gs-two { display: flex; flex-direction: column; gap: 4px; }
/* linhas de configuração: corridas, separadas por um fio */
.gs-rows { display: flex; flex-direction: column; border-top: 1px solid var(--ss-line); }
.gs-rows > .gs-line { min-height: 44px; padding: 8px 0; box-sizing: border-box; border-bottom: 1px solid var(--ss-line); }
.gs-banner { margin: 0; padding: 8px 12px; border: 1px solid var(--ss-line); color: var(--ss-fg-muted); font-size: var(--ss-ui-sm); line-height: 16px; }
.gs-clock { font-family: var(--ss-font-mono); font-variant-numeric: tabular-nums; }
.gs-clock.big { font-size: var(--ss-size-h3); font-weight: 500; line-height: 1; }

/* − valor +: dois botões pequenos iguais e o valor no meio */
.gs-stepper { display: inline-flex; align-items: center; gap: 4px; }
.gs-step-value { min-width: 48px; text-align: center; font: 500 var(--ss-ui-md)/28px var(--ss-font-mono); font-variant-numeric: tabular-nums; }

/* ── telas de painel: o pré-lobby (criar ou entrar) e a sala antes de entrar na turma ── */
.gs-screen { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px 16px; font-family: var(--ss-font-body); color: var(--ss-fg); }
.gs-screen .ss-card .head { padding: 16px 20px; align-items: center; }
.gs-screen .ss-card .body { padding: 20px; }
.gs-screen .ss-card .foot { padding: 12px 20px; font-size: var(--ss-ui-sm); }
.gs-screen .ss-field { gap: 8px; }
.gs-screen .ss-input { padding-block: 0; height: 38px; }
.gs-screen .ss-btn.full-width, .gs-form .ss-btn { min-height: 40px; height: 40px; }
.gs-panel { width: min(460px, 100%); }
.gs-panel .body { display: flex; flex-direction: column; gap: 20px; }
.gs-panel .foot { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gs-pre { width: min(560px, 100%); flex: none; }
.gs-pre .head .heading { display: flex; flex-direction: column; gap: 4px; }
.gs-pre-wrap { display: flex; align-items: center; justify-content: center; gap: 48px; max-width: 100%; }
.gs-create { display: flex; flex-direction: column; gap: 20px; }
.gs-h { margin: 0; font: 500 var(--ss-size-h3)/1.2 var(--ss-font-display); color: var(--ss-fg); }
.gs-h .gs-code { font-size: inherit; }
.gs-field { display: flex; flex-direction: column; gap: 8px; }
.gs-lbl { font: 400 var(--ss-ui-sm)/16px var(--ss-font-body); color: var(--ss-fg-muted); }
.gs-or { display: flex; align-items: center; gap: 12px; color: var(--ss-fg-faint); font-size: var(--ss-ui-sm); }
.gs-or::before, .gs-or::after { content: ''; flex: 1; border-top: 1px solid var(--ss-line); }
.gs-brand { margin: 0; font: 500 28px/1 var(--ss-font-display); letter-spacing: 0; color: var(--ss-fg); }
.gs-tagline { margin: 0; color: var(--ss-fg-muted); font-size: var(--ss-ui-md); }
.gs-title { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.gs-form { display: flex; gap: 8px; align-items: flex-end; }
.gs-form .ss-field { flex: 1; }
.gs-code-input { font-family: var(--ss-font-mono); text-transform: uppercase; letter-spacing: 0.25em; }
.gs-gone .title { color: var(--ss-fg); font-size: var(--ss-size-h3); }

/* o momento do pré-lobby: o personagem escolhido, grande, numa faixa de telhado */
.gs-stage { width: 288px; flex: none; display: flex; flex-direction: column; align-items: center; }
.gs-stage-hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-bottom: -28px; }
.gs-stage-hero .gs-hero { margin-top: -48px; }
.gs-stage-tag { position: relative; z-index: 1; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; background: rgb(0 0 0 / 0.6);
  border: 1px solid var(--ss-line); color: var(--ss-fg); font: 500 var(--ss-ui-sm)/20px var(--ss-font-mono); }
.gs-stage-tag.empty { color: var(--ss-fg-faint); }
.gs-ledge { display: block; image-rendering: pixelated; -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
@media (max-width: 920px) { .gs-stage { display: none; } }

/* os oito personagens para escolher: o escolhido é um degrau de superfície com fio, não o verde */
.gs-swatch { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: var(--ss-radius-1); background-color: var(--ss-bg-inset); background-repeat: no-repeat; image-rendering: pixelated; color: var(--ss-fg-faint); font: 500 var(--ss-ui-xs) var(--ss-font-mono); box-shadow: inset 0 0 0 1px var(--c, var(--ss-line)); }
.gs-swatch.none { background: var(--ss-bg-inset); color: var(--ss-fg-faint); }
.gs-chars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
@media (max-width: 520px) { .gs-chars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gs-char { all: unset; box-sizing: border-box; min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px 8px; border: 1px solid var(--ss-line); cursor: pointer; font-size: var(--ss-ui-xs); color: var(--ss-fg-muted);
  transition: background-color var(--gs-fast) var(--gs-ease), border-color var(--gs-fast) var(--gs-ease); }
/* a janela do retrato é mais larga que a casa: o corte cai mais na ponta da espada e do cachecol, atrás, que no rosto */
.gs-char .gs-hero { margin-top: -8px; translate: -7px 0; }
.gs-char .who { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-char:hover:not(:disabled) { background: var(--ss-hover); }
.gs-char:focus-visible { outline: 2px solid var(--gs-focus); outline-offset: 2px; }
.gs-char.mine { border-color: var(--ss-line-strong); background: color-mix(in srgb, var(--ss-fg) 9%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); color: var(--ss-fg); }
.gs-char:disabled { cursor: not-allowed; opacity: 0.4; }

/* uma pessoa numa linha */
.gs-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1 0 auto; }
.gs-who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-who.off { opacity: 0.5; }
.gs-section h4, .gs-section .gs-sub { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font: 500 var(--ss-ui-md)/20px var(--ss-font-body); color: var(--ss-fg); }
.gs-members { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.gs-members li { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: var(--ss-ui-md); }
.gs-members li .act { margin-left: auto; display: inline-flex; flex: none; }

/*
 * A sala depois de entrar: o telhado atrás de tudo; por cima, sem barra, os botões do canto de cima à esquerda, a coluna
 * da sala à esquerda (recolhível), a vez no meio de cima, o ranking no canto de cima à direita e o bloco embaixo.
 * As medidas batem com `layout.ts` (EDGE 12, GAP 12).
 */
.gs-room { --gs-edge: 12px; --gs-corner-h: 36px; --gs-side-w: 480px; --gs-rank-w: 240px;
  position: fixed; inset: 0; overflow: hidden; font-family: var(--ss-font-body); color: var(--ss-fg); }
.gs-world { position: absolute; inset: 0; z-index: 0; }
.gs-world-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.gs-world-failed { position: absolute; right: 16px; bottom: 16px; z-index: 1; max-width: 420px; margin: 0; color: var(--ss-fg-faint); font-size: var(--ss-ui-sm); }

/* a superfície que flutua: a mesma em todo painel */
.gs-float { box-sizing: border-box; background: var(--gs-float-bg); border: 1px solid var(--gs-float-line); -webkit-backdrop-filter: var(--gs-float-blur); backdrop-filter: var(--gs-float-blur); }
.gs-float-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gs-float-head .heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gs-float-title { margin: 0; font: 500 var(--ss-ui-md)/20px var(--ss-font-body); color: var(--ss-fg); }

/* os botões do canto: do mesmo tamanho, na borda esquerda da coluna, a 12 dela */
.gs-corner-wrap { position: absolute; top: var(--gs-edge); left: var(--gs-edge); z-index: 12; }
.gs-corner { display: flex; gap: 8px; }
.gs-room .gs-corner-btn { box-sizing: border-box; width: var(--gs-corner-h); height: var(--gs-corner-h); min-height: var(--gs-corner-h); padding: 0; gap: 8px; justify-content: center;
  color: var(--ss-fg); background: var(--gs-float-bg); border-color: var(--gs-float-line); -webkit-backdrop-filter: var(--gs-float-blur); backdrop-filter: var(--gs-float-blur); }
.gs-room .gs-corner-btn:not(:disabled):hover { background: color-mix(in srgb, var(--ss-bg-elev) 92%, transparent); border-color: var(--ss-line-strong); }
.gs-room .gs-corner-btn.wide { width: calc(2 * var(--gs-corner-h)); }
.gs-room .gs-corner-btn.copied { width: auto; padding: 0 12px; }
.gs-corner-msg { font-size: var(--ss-ui-sm); }

/* a coluna da sala, à esquerda: cabeça, corpo que rola e pé com a ação principal */
.gs-side { position: absolute; z-index: 10; left: var(--gs-edge); top: calc(2 * var(--gs-edge) + var(--gs-corner-h)); bottom: var(--gs-edge);
  width: min(var(--gs-side-w), calc(100vw - 2 * var(--gs-edge))); box-sizing: border-box; display: flex; flex-direction: column; padding: 0;
  background: var(--gs-float-bg); border: 1px solid var(--gs-float-line); -webkit-backdrop-filter: var(--gs-float-blur); backdrop-filter: var(--gs-float-blur); }
.gs-side-head { flex: none; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 12px 16px; border-bottom: 1px solid var(--ss-line); }
.gs-side-head .meta { color: var(--ss-fg-faint); font-size: var(--ss-ui-sm); }
.gs-side-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 20px; padding: 16px; }
/* um fio só entre as seções (turma | meu post-it | os que faltam | configurações), nunca dentro delas */
.gs-side-body > .gs-sec:not(:first-child) { border-top: 1px solid var(--ss-line); padding-top: 20px; }
/* dentro da coluna, as linhas de configuração se agrupam pelo espaço, sem fio */
.gs-side .gs-rows { border-top: 0; gap: 4px; }
.gs-side .gs-rows > .gs-line { min-height: 36px; padding: 4px 0; border-bottom: 0; }
.gs-side-foot { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ss-line); }
.gs-side-foot:empty { display: none; }
.gs-side-foot .gs-hint { text-align: center; }
.gs-side-foot .gs-dev { align-self: center; }
.gs-sec { display: flex; flex-direction: column; gap: 8px; }
.gs-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.gs-sec-head h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 500 var(--ss-ui-md)/20px var(--ss-font-body); color: var(--ss-fg); }

/* a turma, uma linha por pessoa na ordem das vezes; todas com a mesma forma: nome e ações, depois o post-it e o estado */
.gs-turma { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gs-turma > li { display: flex; gap: 8px; padding: 4px 4px 4px 0; font-size: var(--ss-ui-md); }
.gs-turma > li.turn { background: color-mix(in srgb, var(--ss-fg) 5%, transparent); box-shadow: inset 2px 0 0 var(--ss-accent); }
.gs-turma > li.off { opacity: 0.55; }
.gs-turma .pos { flex: none; width: 24px; color: var(--ss-fg-faint); font: 400 var(--ss-ui-sm)/28px var(--ss-font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.gs-turma .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gs-turma .top { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 28px; }
.gs-turma .top .gs-who { flex: 1 1 auto; }
.gs-turma .act { display: inline-flex; align-items: center; justify-content: flex-end; flex: none; min-width: 112px; }
.gs-turma .sub { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 24px; }
.gs-turma .state { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ss-fg-muted); font-size: var(--ss-ui-sm); }
.gs-turma .writes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ss-fg-faint); }
.gs-turma .sub > .ss-tooltip { flex: 0 1 auto; min-width: 0; max-width: 60%; }
.gs-turma .sub > .ss-tooltip > .trigger { max-width: 100%; }
.gs-turma .sub > .ss-tooltip .gs-chip { max-width: 100%; }
/* para quem escreve: o alvo, o rosto e o nome */
.gs-target { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--ss-fg-muted); }
.gs-target > .ss-icon { color: var(--ss-fg-faint); margin-right: 2px; }
.gs-target .name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* em que pé está: o lápis parado (vazio), o lápis que rabisca (escrevendo, um estado vivo) e o pronto, um tom acima */
.gs-progress { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--ss-fg-faint); }
.gs-progress.writing { color: var(--ss-fg-muted); }
.gs-progress.writing .ss-icon { transform-origin: 20% 80%; animation: gs-scribble 1.2s var(--gs-ease) infinite; }
.gs-progress.ready { color: var(--ss-fg); }
@keyframes gs-scribble { 0%, 100% { transform: translateX(-1px) rotate(-4deg); } 50% { transform: translateX(1.5px) rotate(4deg); } }
.gs-ghosts { margin-top: 8px; }
/* o post-it de alguém dentro da linha: uma etiqueta de uma linha */
.gs-chip { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 24px; max-width: 60%; height: 24px; box-sizing: border-box; padding: 0 8px; justify-content: center;
  border: 1px solid var(--ss-line-strong); color: var(--ss-fg); font: 500 var(--ss-ui-sm)/16px var(--ss-font-mono); }
.gs-chip img { width: 16px; height: 16px; object-fit: contain; flex: none; }
.gs-chip .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-chip.hidden { color: var(--ss-fg-muted); }
.gs-chip.blank { color: var(--ss-fg-faint); border-color: var(--ss-line); }

/* o editor do post-it: o lugar da imagem (um quadrado) e o texto, lado a lado e da mesma altura */
.gs-editor { --gs-slot: 112px; display: flex; flex-direction: column; gap: 8px; }
.gs-editor-box { display: flex; gap: 8px; height: var(--gs-slot); }
.gs-slot { position: relative; flex: none; width: var(--gs-slot); height: var(--gs-slot); box-sizing: border-box; border: 1px dashed var(--ss-line-strong);
  transition: border-color var(--gs-fast) var(--gs-ease), background-color var(--gs-fast) var(--gs-ease); }
.gs-slot.filled { border-style: solid; border-color: var(--ss-line); background: var(--ss-bg-inset); }
.gs-slot-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.gs-slot-pick { all: unset; position: absolute; inset: 0; box-sizing: border-box; display: grid; place-items: center; cursor: pointer; color: var(--ss-fg-faint);
  transition: color var(--gs-fast) var(--gs-ease); }
.gs-slot-pick:disabled { cursor: progress; }
.gs-slot-pick:focus-visible { outline: 2px solid var(--gs-focus); outline-offset: 2px; }
.gs-slot-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ss-fg-faint); }
.gs-slot-label { font: 400 var(--ss-ui-sm)/16px var(--ss-font-body); }
.gs-slot:not(.filled):not(.busy):hover { border-color: var(--ss-fg-faint); background: var(--ss-hover); }
.gs-slot:not(.filled):hover .gs-slot-empty, .gs-slot-pick:focus-visible .gs-slot-empty { color: var(--ss-fg-muted); }
/* com imagem: o mouse em cima (ou o foco) escurece e diz que clicar troca */
.gs-slot-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgb(0 0 0 / 0.6); color: var(--ss-fg); opacity: 0; transition: opacity var(--gs-fast) var(--gs-ease); }
.gs-slot:hover .gs-slot-over, .gs-slot-pick:focus-visible .gs-slot-over { opacity: 1; }
.gs-slot.busy .gs-slot-pick { background: rgb(0 0 0 / 0.6); color: var(--ss-fg-muted); }
/* a lixeira no canto da imagem: pequena e baixa; vermelha com o mouse em cima */
.gs-slot-trash { position: absolute; z-index: 1; top: 4px; right: 4px; }
.gs-trash { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 24px; height: 24px; cursor: pointer;
  color: var(--ss-fg-muted); background: color-mix(in srgb, var(--ss-bg) 85%, transparent); border: 1px solid var(--ss-line);
  transition: color var(--gs-fast) var(--gs-ease), background-color var(--gs-fast) var(--gs-ease), border-color var(--gs-fast) var(--gs-ease); }
.gs-trash:hover, .gs-trash:focus-visible { color: var(--ss-fg-on-danger); background: var(--ss-danger); border-color: var(--ss-danger); }
.gs-trash:focus-visible { outline: 2px solid var(--gs-focus); outline-offset: 2px; }
/* o texto ocupa o resto da linha, na altura do quadrado; a contagem fica dentro, no canto de baixo */
.gs-editor-text { position: relative; flex: 1; min-width: 0; }
:is(.gs-screen, .gs-room) .gs-editor-text.ss-textarea .control { flex: 1; min-height: 0; box-sizing: border-box; }
:is(.gs-screen, .gs-room) .gs-editor .gs-postit-input { height: 100%; box-sizing: border-box; resize: none; padding-bottom: 24px; font-family: var(--ss-font-mono); }
.gs-editor-count { position: absolute; right: 8px; bottom: 4px; pointer-events: none; }
.gs-editor.locked .gs-slot { border-style: solid; border-color: var(--ss-line); }
.gs-editor.locked .gs-slot-empty { opacity: 0.6; }
.gs-editor-foot { flex-wrap: nowrap; min-height: 28px; }

/* a vez e a votação, em cima no meio do que sobra: do tamanho do que mostram */
.gs-top { position: absolute; z-index: 9; top: var(--gs-edge); right: calc(var(--gs-edge) + var(--gs-rank-w) + 12px); display: flex; justify-content: center; pointer-events: none; }
.gs-top > * { pointer-events: auto; }
.gs-turnbar { display: inline-flex; flex-direction: column; align-items: stretch; gap: 8px; max-width: 100%; }
.gs-turn { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 8px 8px 8px 16px; }
.gs-turn.live { box-shadow: inset 2px 0 0 var(--ss-accent); }
.gs-turn .who { font: 500 var(--ss-ui-md)/20px var(--ss-font-body); white-space: nowrap; }
.gs-turn .gs-clock.paused { opacity: 0.5; }
.gs-turn .acts, .gs-vote .acts { display: flex; gap: 8px; margin-left: auto; }
.gs-turn > .gs-hint { margin-left: auto; padding-right: 8px; }
.gs-vote { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; animation: gs-rise var(--gs-enter) var(--gs-ease); }
.gs-vote-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.gs-vote-head .title { font: 500 var(--ss-ui-md)/20px var(--ss-font-body); }
.gs-vote-head .gs-clock { color: var(--ss-fg-muted); font-size: var(--ss-ui-md); }
.gs-vote-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 32px; }
.gs-vote .acts { margin-left: 0; }
.gs-voters { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--ss-ui-sm); color: var(--ss-fg-faint); }
.gs-voters li { display: inline-flex; align-items: center; gap: 4px; }
.gs-voters li.done { color: var(--ss-fg-muted); }
.gs-voters .dot { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
.gs-voters .dot::before { content: ''; width: 4px; height: 4px; background: currentColor; }

/* o ranking, no canto de cima à direita: meio transparente, inteiro com o mouse em cima */
.gs-rank { position: absolute; z-index: 9; top: var(--gs-edge); right: var(--gs-edge); width: var(--gs-rank-w); max-height: calc(100vh - 2 * var(--gs-edge) - 60px); overflow: auto;
  opacity: 0.8; transition: opacity var(--gs-dur) var(--gs-ease); }
.gs-rank:hover, .gs-rank:focus-within { opacity: 1; }
.gs-ranking-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.gs-ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: var(--ss-ui-md); }
.gs-ranking li { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 28px; }
.gs-ranking .gs-who { flex: 1 1 auto; }
.gs-ranking .place { width: 24px; flex: none; font: 400 var(--ss-ui-sm) var(--ss-font-mono); font-variant-numeric: tabular-nums; color: var(--ss-fg-faint); }
.gs-ranking li.gaveup .gs-who { opacity: 0.7; }

/* post-its sobre as cabeças (posicionados pelo WorldRuntime a cada quadro): tooltips do dssoca, que crescem com o mouse */
.gs-heads { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.gs-head { position: absolute; left: 0; top: 0; visibility: hidden; will-change: transform; }
.gs-head:hover { z-index: 5000 !important; }
.gs-head .inner { position: absolute; left: 0; bottom: 0; width: max-content; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gs-head .tip { box-sizing: border-box; width: max-content; max-width: 132px; min-width: 28px; padding: 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--ss-bg-elev); color: var(--ss-fg); border: 1px solid var(--ss-line-strong); box-shadow: 0 4px 12px rgb(0 0 0 / 0.35);
  font: 500 var(--ss-ui-xs)/16px var(--ss-font-mono); text-align: center; pointer-events: auto; cursor: default;
  transform-origin: 50% 100%; transition: transform var(--gs-dur) var(--gs-ease); }
.gs-head .tip:hover { transform: scale(1.7); }
.gs-head .tip img { max-width: 100%; max-height: 40px; object-fit: contain; image-rendering: auto; }
.gs-head .tip .text { overflow-wrap: anywhere; }
.gs-head .tip .blank { color: var(--ss-fg-faint); }
.gs-head .tip.hidden { min-width: 32px; color: var(--ss-fg-muted); }
.gs-head .tip.hidden .q { font: 500 18px/1 var(--ss-font-mono); }
.gs-head .tag { padding: 0 6px; background: rgb(0 0 0 / 0.6); color: var(--ss-fg); font: 500 var(--ss-ui-xs)/16px var(--ss-font-mono); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.gs-head .mine .tag { box-shadow: inset 0 0 0 1px var(--ss-line-strong); }
/* a vez de agora: a cor de destaque, só aqui */
.gs-head .turn .tip { border-color: var(--ss-accent); }
.gs-head .turn .tag { background: var(--ss-accent); color: var(--ss-fg-on-primary); }
.gs-head .done .tip { opacity: 0.8; }

/* o bloco: preso embaixo ao lado da coluna; minimizado, uma aba que sobe um pouco com o mouse em cima */
.gs-notepad { position: absolute; z-index: 11; bottom: var(--gs-edge); display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; }
.gs-notepad textarea { width: 100%; box-sizing: border-box; }
.gs-notepad-tab { all: unset; position: absolute; z-index: 11; bottom: 0; box-sizing: border-box; display: inline-flex; align-items: flex-start; gap: 8px; height: 48px; padding: 12px 12px 0;
  background: var(--gs-float-bg); color: var(--ss-fg); border: 1px solid var(--gs-float-line); border-bottom: 0; -webkit-backdrop-filter: var(--gs-float-blur); backdrop-filter: var(--gs-float-blur);
  font: 500 var(--ss-ui-md)/16px var(--ss-font-body); cursor: pointer; transform: translateY(8px);
  transition: transform var(--gs-dur) var(--gs-ease), border-color var(--gs-fast) var(--gs-ease); }
.gs-notepad-tab:hover, .gs-notepad-tab:focus-visible { transform: translateY(0); border-color: var(--ss-line-strong); }
.gs-notepad-tab:focus-visible { outline: 2px solid var(--gs-focus); outline-offset: 2px; }
.gs-notepad-tab .dot { align-self: center; width: 6px; height: 6px; margin-top: -8px; background: var(--ss-fg-muted); }

/* menu e aviso */
.gs-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / 0.55); }
.gs-menu { background: var(--ss-bg); -webkit-backdrop-filter: none; backdrop-filter: none; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; animation: gs-rise var(--gs-dur) var(--gs-ease); }
.gs-menu .gs-float-head { padding: 16px 20px 12px; }
.gs-menu-body { display: flex; flex-direction: column; gap: 24px; padding: 4px 20px 20px; }
.gs-float-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--ss-line); }
.gs-sound { display: flex; align-items: center; gap: 12px; }
.gs-range { width: 120px; accent-color: var(--ss-fg-muted); }
.gs-range:disabled { opacity: 0.4; }
.gs-volume { min-width: 3ch; text-align: right; font: 400 var(--ss-ui-sm) var(--ss-font-mono); font-variant-numeric: tabular-nums; color: var(--ss-fg-muted); }
.gs-mute { display: inline-flex; align-items: center; gap: 8px; color: var(--ss-fg-muted); }
.gs-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: var(--ss-ui-md); }
.gs-keys li { display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.gs-keys li > span:last-child:not(.ss-kbd) { display: inline-flex; gap: 8px; }
.gs-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; padding: 8px 16px; background: var(--ss-danger); color: var(--ss-fg-on-danger); font-size: var(--ss-ui-sm); }

/* a única entrada: sobe uns pixels e aparece (menu, votação) */
@keyframes gs-rise { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .gs-head .tip, .gs-notepad-tab, .gs-rank, .gs-char, :is(.gs-screen, .gs-room) .ss-btn, .gs-slot, .gs-slot-pick, .gs-slot-over, .gs-trash { transition: none; }
  .gs-menu, .gs-vote, .gs-progress.writing .ss-icon { animation: none; }
}
.ss-tooltip.svelte-bp6353 {
  position: relative;
  display: inline-block;
}

.trigger.svelte-bp6353 {
  display: inline-flex;
}

.tip.svelte-bp6353 {
  --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.svelte-bp6353 {
  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;
}

.ss-tooltip[data-placement=top].svelte-bp6353 .tip:where(.svelte-bp6353) {
  bottom: calc(100% + var(--ss-tooltip-offset, 6px));
  left: 50%;
  transform: translateX(calc(-50% + var(--shift))) scale(0.98);
  transform-origin: bottom center;
}

.ss-tooltip[data-placement=top].svelte-bp6353 .tip.open:where(.svelte-bp6353) {
  transform: translateX(calc(-50% + var(--shift))) scale(1);
}

.ss-tooltip[data-placement=bottom].svelte-bp6353 .tip:where(.svelte-bp6353) {
  top: calc(100% + var(--ss-tooltip-offset, 6px));
  left: 50%;
  transform: translateX(calc(-50% + var(--shift))) scale(0.98);
  transform-origin: top center;
}

.ss-tooltip[data-placement=bottom].svelte-bp6353 .tip.open:where(.svelte-bp6353) {
  transform: translateX(calc(-50% + var(--shift))) scale(1);
}

.ss-tooltip[data-placement=left].svelte-bp6353 .tip:where(.svelte-bp6353) {
  right: calc(100% + var(--ss-tooltip-offset, 6px));
  top: 50%;
  transform: translateY(calc(-50% + var(--shift))) scale(0.98);
  transform-origin: right center;
}

.ss-tooltip[data-placement=left].svelte-bp6353 .tip.open:where(.svelte-bp6353) {
  transform: translateY(calc(-50% + var(--shift))) scale(1);
}

.ss-tooltip[data-placement=right].svelte-bp6353 .tip:where(.svelte-bp6353) {
  left: calc(100% + var(--ss-tooltip-offset, 6px));
  top: 50%;
  transform: translateY(calc(-50% + var(--shift))) scale(0.98);
  transform-origin: left center;
}

.ss-tooltip[data-placement=right].svelte-bp6353 .tip.open:where(.svelte-bp6353) {
  transform: translateY(calc(-50% + var(--shift))) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .tip.svelte-bp6353,
  .tip.open.svelte-bp6353 {
    transition: none;
    transform: none;
  }
  .ss-tooltip[data-placement=top].svelte-bp6353 .tip:where(.svelte-bp6353),
  .ss-tooltip[data-placement=top].svelte-bp6353 .tip.open:where(.svelte-bp6353),
  .ss-tooltip[data-placement=bottom].svelte-bp6353 .tip:where(.svelte-bp6353),
  .ss-tooltip[data-placement=bottom].svelte-bp6353 .tip.open:where(.svelte-bp6353) {
    transform: translateX(calc(-50% + var(--shift)));
  }
  .ss-tooltip[data-placement=left].svelte-bp6353 .tip:where(.svelte-bp6353),
  .ss-tooltip[data-placement=left].svelte-bp6353 .tip.open:where(.svelte-bp6353),
  .ss-tooltip[data-placement=right].svelte-bp6353 .tip:where(.svelte-bp6353),
  .ss-tooltip[data-placement=right].svelte-bp6353 .tip.open:where(.svelte-bp6353) {
    transform: translateY(calc(-50% + var(--shift)));
  }
}
  .gs-hero.svelte-k5jrvn { position: relative; display: inline-block; flex: none; overflow: hidden; }
  .frame.svelte-k5jrvn { position: absolute; background-repeat: no-repeat; image-rendering: pixelated; }
  .frame.animate.svelte-k5jrvn { animation: svelte-k5jrvn-gs-idle var(--dur) steps(var(--steps)) infinite; }
  @keyframes svelte-k5jrvn-gs-idle { to { background-position-x: var(--to); } }
  @media (prefers-reduced-motion: reduce) { .frame.animate.svelte-k5jrvn { animation: none; } }