@charset "UTF-8";
/*
 * 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;
  }
}