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