/* packages/tokens/src/foundations.css */
@layer sundance.tokens {
  :where(.sd-root, [data-sd-theme]) {
    color-scheme: light;

    /* Public scale controls. Override these on any Sundance subtree. */
    --sd-density: 1;
    --sd-type-scale: 1;
    --sd-content-max: 90rem;

    --sd-font-sans: "Helvetica Neue", "Nimbus Sans", "Nimbus Sans L", "Liberation Sans", Arial, sans-serif;
    --sd-font-display: "Helvetica Neue", "Nimbus Sans", "Nimbus Sans L", "Liberation Sans", Arial, sans-serif;
    --sd-font-mono: "Nimbus Mono PS", "Courier New", monospace;

    --sd-space-1: calc(0.25rem * var(--sd-density));
    --sd-space-2: calc(0.5rem * var(--sd-density));
    --sd-space-3: calc(0.75rem * var(--sd-density));
    --sd-space-4: calc(1rem * var(--sd-density));
    --sd-space-5: calc(1.25rem * var(--sd-density));
    --sd-space-6: calc(1.5rem * var(--sd-density));
    --sd-space-8: calc(2rem * var(--sd-density));
    --sd-space-10: calc(2.5rem * var(--sd-density));
    --sd-space-12: calc(3rem * var(--sd-density));

    --sd-radius-sm: calc(0.2rem * var(--sd-density));
    --sd-radius-md: calc(0.38rem * var(--sd-density));
    --sd-radius-lg: calc(0.62rem * var(--sd-density));
    --sd-radius-pill: 999px;

    /* Visible geometry stays compact; hit targets remain independently tunable. */
    --sd-statusbar-height: calc(1.25rem * var(--sd-density));
    --sd-navbar-height: calc(2.75rem * var(--sd-density));
    --sd-toolbar-height: calc(2.75rem * var(--sd-density));
    --sd-tabbar-height: calc(3.1875rem * var(--sd-density));
    --sd-row-height: calc(2.75rem * var(--sd-density));
    --sd-control-height: calc(1.8125rem * var(--sd-density));
    --sd-control-height-sm: calc(1.625rem * var(--sd-density));
    --sd-control-height-lg: calc(2.25rem * var(--sd-density));
    --sd-touch-target: 2.75rem;
    --sd-icon-size: calc(1.25rem * var(--sd-density));

    --sd-type-xs: calc(0.68rem * var(--sd-type-scale));
    --sd-type-sm: calc(0.8rem * var(--sd-type-scale));
    --sd-type-base: calc(0.94rem * var(--sd-type-scale));
    --sd-type-lg: calc(1.08rem * var(--sd-type-scale));
    --sd-type-xl: calc(1.3rem * var(--sd-type-scale));
    --sd-type-2xl: calc(1.62rem * var(--sd-type-scale));
    --sd-leading-tight: 1.15;
    --sd-leading-normal: 1.42;

    --sd-motion-fast: 90ms;
    --sd-motion-base: 160ms;
    --sd-motion-switch: 85ms;
    --sd-motion-pop: 300ms;
    --sd-ease-press: cubic-bezier(0.2, 0.75, 0.25, 1);

    --sd-accent: #3e7db8;
    --sd-accent-top: #73a7d1;
    --sd-accent-bottom: #245f94;
    --sd-accent-border: #1b507e;
    --sd-accent-ink: #fff;
    --sd-success: #4e8b35;
    --sd-warning: #ad7218;
    --sd-danger: #a83b35;
    --sd-canvas: #b9bec5;
    --sd-canvas-ink: #20252b;
    --sd-surface: #f5f5f2;
    --sd-surface-raised: #fff;
    --sd-surface-inset: #d9dde1;
    --sd-surface-muted: #e8e9e7;
    --sd-ink: #22272c;
    --sd-ink-muted: #666d75;
    --sd-ink-faint: #8b9299;
    --sd-divider: rgba(37, 43, 49, 0.26);
    --sd-border: #737a82;
    --sd-border-strong: #4e555d;
    --sd-highlight: rgba(255, 255, 255, 0.92);
    --sd-highlight-soft: rgba(255, 255, 255, 0.44);
    --sd-shadow: rgba(21, 26, 31, 0.42);
    --sd-shadow-soft: rgba(21, 26, 31, 0.2);

    --sd-bar-top: #89939d;
    --sd-bar-mid: #58636e;
    --sd-bar-bottom: #39434c;
    --sd-bar-ink: #fff;
    --sd-bar-border: #242c33;
    --sd-statusbar-top: #526f93;
    --sd-statusbar-bottom: #304d70;
    --sd-bar-button-top: #99aac2;
    --sd-bar-button-mid: #6d86a6;
    --sd-bar-button-bottom: #42628b;
    --sd-bar-button-border: rgba(0, 0, 0, 0.42);
    --sd-back-button-top: #8da0bb;
    --sd-back-button-mid: #6d86a6;
    --sd-back-button-bottom: #4a6990;
    --sd-back-button-border: rgba(38, 55, 78, 0.86);
    --sd-segment-top: #abbacc;
    --sd-segment-mid: #8299b4;
    --sd-segment-bottom: #6681a4;
    --sd-segment-selected-top: #899fbe;
    --sd-segment-selected-bottom: #41618d;
    --sd-switch-on: #0080ea;
    --sd-switch-off: #eee;
    --sd-switch-thumb-top: #dadada;
    --sd-switch-thumb-bottom: #fcfcfc;
    --sd-switch-label-off: #7d7d7d;
    --sd-switch-off-border: #858585;
    --sd-switch-on-border: #075e9e;
    --sd-search-border: #aab4bf;
    --sd-group-border: #adb3ba;
    --sd-group-divider: #c8c8c8;
    --sd-row-surface: #f7f7f7;
    --sd-row-ink: #000;
    --sd-row-detail: #858585;
    --sd-row-value: #3b5d91;
    --sd-chevron: #7d7d7d;
    --sd-field: #fff;
    --sd-field-ink: #22272c;
    --sd-field-placeholder: #687078;
    --sd-selection: rgba(62, 125, 184, 0.28);
    --sd-tabbar-top: #444c54;
    --sd-tabbar-bottom: #1e252b;
    --sd-tabbar-ink: #cbd0d4;
    --sd-tabbar-active: #fff;
    --sd-sheet-top: #7c838b;
    --sd-sheet-mid: #41474e;
    --sd-sheet-bottom: #14171a;
    --sd-sheet-button-top: #59616a;
    --sd-sheet-button-mid: #3d444c;
    --sd-sheet-button-bottom: #1c2126;
    --sd-alert-top: #64758f;
    --sd-alert-mid: #253858;
    --sd-alert-bottom: #182947;
    --sd-alert-border: #17233a;
    --sd-alert-ink: #fff;

    --sd-shadow-raised: 0 1px 0 var(--sd-highlight), 0 2px 4px var(--sd-shadow-soft), inset 0 1px 0 var(--sd-highlight-soft);
    --sd-shadow-deep: 0 1px 0 var(--sd-highlight), 0 5px 12px var(--sd-shadow);
    --sd-shadow-inset: inset 0 1px 3px var(--sd-shadow-soft), 0 1px 0 var(--sd-highlight-soft);
    --sd-control-text-shadow: 0 1px 0 var(--sd-highlight);
    --sd-etched-text-shadow: 0 1px 0 var(--sd-highlight-soft);
    --sd-focus-ring: 0 0 0 3px color-mix(in srgb, var(--sd-accent) 42%, transparent);

    --sd-linen-highlight: rgba(255, 255, 255, 0.04);
    --sd-linen-shadow: rgba(0, 0, 0, 0.035);
    --sd-metal-highlight: rgba(255, 255, 255, 0.025);
    --sd-metal-shadow: rgba(73, 87, 108, 0.015);
  }

  :where(.sd-root, [data-sd-theme])[data-sd-density="compact"] {
    --sd-density: 0.86;
    --sd-type-scale: 0.94;
  }

  :where(.sd-root, [data-sd-theme])[data-sd-density="standard"] {
    --sd-density: 1;
    --sd-type-scale: 1;
  }

  :where(.sd-root, [data-sd-theme])[data-sd-density="comfortable"] {
    --sd-density: 1.12;
    --sd-type-scale: 1.04;
  }

  :where(.sd-root, [data-sd-theme])[data-sd-density="display"] {
    --sd-density: 1.32;
    --sd-type-scale: 1.2;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.sd-root, [data-sd-theme]) {
      --sd-motion-fast: 0ms;
      --sd-motion-base: 0ms;
      --sd-motion-switch: 0ms;
      --sd-motion-pop: 0ms;
    }
  }
}

/* packages/tokens/src/daybreak.css */
@layer sundance.tokens {
  [data-sd-theme="daybreak"] {
    color-scheme: light;
    --sd-accent: #3374d5;
    --sd-accent-top: #4a76b5;
    --sd-accent-bottom: #2864dc;
    --sd-accent-border: #24509c;
    --sd-accent-ink: #fff;
    --sd-success: #4a8436;
    --sd-warning: #ac6d12;
    --sd-danger: #d21e2b;
    --sd-canvas: #c8ced9;
    --sd-canvas-ink: #3e4a5e;
    --sd-surface: #f5f5f5;
    --sd-surface-raised: #f7f7f7;
    --sd-surface-inset: #d8dce2;
    --sd-surface-muted: #e1e4e8;
    --sd-ink: #24282c;
    --sd-ink-muted: #4c5665;
    --sd-ink-faint: #596474;
    --sd-divider: rgba(38, 44, 50, 0.25);
    --sd-border: #747b82;
    --sd-border-strong: #4c545c;
    --sd-highlight: rgba(255, 255, 255, 0.96);
    --sd-highlight-soft: rgba(255, 255, 255, 0.52);
    --sd-shadow: rgba(27, 32, 37, 0.42);
    --sd-shadow-soft: rgba(27, 32, 37, 0.2);
    --sd-bar-top: #aab9cf;
    --sd-bar-mid: #92a5bf;
    --sd-bar-bottom: #637d9f;
    --sd-bar-ink: #fff;
    --sd-bar-border: #3f5c80;
    --sd-statusbar-top: #527298;
    --sd-statusbar-bottom: #304e72;
    --sd-bar-button-top: #5d7390;
    --sd-bar-button-mid: #526b8a;
    --sd-bar-button-bottom: #3f5b7d;
    --sd-bar-button-border: rgba(38, 55, 78, 0.86);
    --sd-back-button-top: #8da0bb;
    --sd-back-button-mid: #6d86a6;
    --sd-back-button-bottom: #4a6990;
    --sd-back-button-border: rgba(38, 55, 78, 0.86);
    --sd-segment-top: #5f7797;
    --sd-segment-mid: #516b8a;
    --sd-segment-bottom: #405e82;
    --sd-segment-selected-top: #59749a;
    --sd-segment-selected-bottom: #31527e;
    --sd-switch-on: #0872c9;
    --sd-switch-off: #eee;
    --sd-switch-thumb-top: #dadada;
    --sd-switch-thumb-bottom: #fcfcfc;
    --sd-switch-label-off: #7d7d7d;
    --sd-switch-off-border: #858585;
    --sd-switch-on-border: #075e9e;
    --sd-search-border: #aab4bf;
    --sd-group-border: #adb3ba;
    --sd-group-divider: #c8c8c8;
    --sd-row-surface: #f7f7f7;
    --sd-row-ink: #000;
    --sd-row-detail: #858585;
    --sd-row-value: #3b5d91;
    --sd-chevron: #7d7d7d;
    --sd-field: #fff;
    --sd-field-ink: #24282c;
    --sd-field-placeholder: #687078;
    --sd-selection: rgba(57, 125, 180, 0.28);
    --sd-tabbar-top: #363b3f;
    --sd-tabbar-bottom: #08090a;
    --sd-tabbar-ink: #c0c4c7;
    --sd-tabbar-active: #fff;
    --sd-sheet-top: #7c838b;
    --sd-sheet-mid: #41474e;
    --sd-sheet-bottom: #14171a;
    --sd-sheet-button-top: #59616a;
    --sd-sheet-button-mid: #3d444c;
    --sd-sheet-button-bottom: #1c2126;
    --sd-alert-top: #75859c;
    --sd-alert-mid: #304466;
    --sd-alert-bottom: #1b2d4c;
    --sd-alert-border: #182641;
    --sd-alert-ink: #fff;
    --sd-control-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92);
    --sd-etched-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.56);
    --sd-metal-highlight: rgba(255, 255, 255, 0.025);
    --sd-metal-shadow: rgba(73, 87, 108, 0.015);
  }
}

/* packages/tokens/src/graphite.css */
@layer sundance.tokens {
  [data-sd-theme="graphite"] {
    color-scheme: dark;
    --sd-accent: #8aa52c;
    --sd-accent-top: #c1d65a;
    --sd-accent-bottom: #617c13;
    --sd-accent-border: #3f5707;
    --sd-accent-ink: #fff;
    --sd-success: #91b838;
    --sd-warning: #dda33a;
    --sd-danger: #b44f48;
    --sd-canvas: #191b1d;
    --sd-canvas-ink: #f1f2ec;
    --sd-surface: #2b2e30;
    --sd-surface-raised: #393d3f;
    --sd-surface-inset: #17191a;
    --sd-surface-muted: #242729;
    --sd-ink: #f2f2ed;
    --sd-ink-muted: #b4b7b3;
    --sd-ink-faint: #858a88;
    --sd-divider: rgba(0, 0, 0, 0.68);
    --sd-border: #111315;
    --sd-border-strong: #050607;
    --sd-highlight: rgba(255, 255, 255, 0.23);
    --sd-highlight-soft: rgba(255, 255, 255, 0.12);
    --sd-shadow: rgba(0, 0, 0, 0.78);
    --sd-shadow-soft: rgba(0, 0, 0, 0.48);
    --sd-bar-top: #4b5052;
    --sd-bar-mid: #292d2f;
    --sd-bar-bottom: #151719;
    --sd-bar-ink: #f8f8f3;
    --sd-bar-border: #050607;
    --sd-statusbar-top: #282d2f;
    --sd-statusbar-bottom: #08090a;
    --sd-bar-button-top: #555b5e;
    --sd-bar-button-mid: #3c4144;
    --sd-bar-button-bottom: #202426;
    --sd-bar-button-border: rgba(0, 0, 0, 0.9);
    --sd-back-button-top: #555b5e;
    --sd-back-button-mid: #3c4144;
    --sd-back-button-bottom: #202426;
    --sd-back-button-border: rgba(0, 0, 0, 0.9);
    --sd-segment-top: #4a4f51;
    --sd-segment-mid: #373b3d;
    --sd-segment-bottom: #242729;
    --sd-segment-selected-top: #758a35;
    --sd-segment-selected-bottom: #3f510d;
    --sd-switch-on: #7e9a1f;
    --sd-switch-off: #2b2e30;
    --sd-switch-thumb-top: #bebfbb;
    --sd-switch-thumb-bottom: #f3f3ed;
    --sd-switch-label-off: #d3d6d2;
    --sd-switch-off-border: #080a0b;
    --sd-switch-on-border: #3c5107;
    --sd-search-border: #080a0b;
    --sd-group-border: #0b0d0e;
    --sd-group-divider: rgba(255, 255, 255, 0.1);
    --sd-row-surface: #333638;
    --sd-row-ink: #f2f2ed;
    --sd-row-detail: #b4b7b3;
    --sd-row-value: #c3d5ee;
    --sd-chevron: #a7aaa7;
    --sd-field: #161819;
    --sd-field-ink: #f2f2ed;
    --sd-field-placeholder: #989e9b;
    --sd-selection: rgba(138, 165, 44, 0.32);
    --sd-tabbar-top: #292c2e;
    --sd-tabbar-bottom: #0c0d0e;
    --sd-tabbar-ink: #9ca19e;
    --sd-tabbar-active: #c8db66;
    --sd-sheet-top: #454b4f;
    --sd-sheet-mid: #292e30;
    --sd-sheet-bottom: #111415;
    --sd-sheet-button-top: #555b5e;
    --sd-sheet-button-mid: #3c4144;
    --sd-sheet-button-bottom: #202426;
    --sd-alert-top: #4b5153;
    --sd-alert-mid: #292e30;
    --sd-alert-bottom: #15191a;
    --sd-alert-border: #050607;
    --sd-alert-ink: #f6f7ef;
    --sd-shadow-raised:
      0 2px 5px rgba(0, 0, 0, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.62);
    --sd-shadow-deep:
      0 7px 15px rgba(0, 0, 0, 0.76),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --sd-shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.76), 0 1px 0 rgba(255, 255, 255, 0.1);
    --sd-control-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.9);
    --sd-etched-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.72);
    --sd-linen-highlight: rgba(255, 255, 255, 0.022);
    --sd-linen-shadow: rgba(0, 0, 0, 0.09);
    --sd-metal-highlight: rgba(255, 255, 255, 0.015);
    --sd-metal-shadow: rgba(0, 0, 0, 0.035);
  }
}

/* packages/css/src/reset.css */
@layer sundance.reset {
  .sd-root,
  .sd-root *,
  .sd-root *::before,
  .sd-root *::after {
    box-sizing: border-box;
  }

  .sd-root {
    margin: 0;
    color: var(--sd-canvas-ink);
    font-family: var(--sd-font-sans);
    font-size: var(--sd-type-base);
    font-synthesis: none;
    line-height: var(--sd-leading-normal);
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
  }

  .sd-root :where(button, input, textarea, select) {
    color: inherit;
    font: inherit;
  }

  .sd-root :where(button, [role="button"]) {
    touch-action: manipulation;
  }

  .sd-root :where(button, input, textarea, select, [tabindex]):focus-visible {
    outline: 0;
    box-shadow: var(--sd-focus-ring);
  }

  .sd-root ::selection {
    background: var(--sd-selection);
  }

  .sd-root :where([hidden]) {
    display: none !important;
  }
}

/* packages/css/src/materials.css */
@layer sundance.materials {
  .sd-surface {
    color: var(--sd-ink);
    background-color: var(--sd-surface);
  }

  .sd-material--linen {
    background-color: var(--sd-canvas);
    background-image:
      repeating-linear-gradient(90deg, var(--sd-linen-highlight) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(0deg, var(--sd-linen-shadow) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(38deg, transparent 0 3px, rgba(255, 255, 255, 0.025) 3px 4px);
    background-size: auto, auto, 9px 9px;
  }

  .sd-material--metal {
    background-color: var(--sd-canvas);
    background-image:
      linear-gradient(90deg, var(--sd-metal-highlight), transparent 28%, var(--sd-metal-shadow) 68%, var(--sd-metal-highlight)),
      repeating-linear-gradient(90deg, transparent 0 11px, var(--sd-metal-highlight) 11px 12px, transparent 12px 14px);
  }

  .sd-material--graphite {
    background-color: var(--sd-canvas);
    background-image:
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 5px),
      linear-gradient(145deg, rgba(255, 255, 255, 0.03), transparent 42%);
    background-size: 5px 5px, 7px 7px, 100% 100%;
  }

  .sd-raised {
    border: 1px solid var(--sd-border);
    box-shadow: var(--sd-shadow-raised);
  }

  .sd-deep {
    border: 1px solid var(--sd-border-strong);
    box-shadow: var(--sd-shadow-deep);
  }

  .sd-inset {
    border: 1px solid var(--sd-border-strong);
    background: var(--sd-surface-inset);
    box-shadow: var(--sd-shadow-inset);
  }

  .sd-etched {
    color: var(--sd-ink-muted);
    text-shadow: var(--sd-etched-text-shadow);
  }

  .sd-gloss {
    position: relative;
    overflow: hidden;
  }

  .sd-gloss::after {
    position: absolute;
    inset: 0 0 48% 0;
    border-radius: inherit;
    background: linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06));
    content: "";
    pointer-events: none;
  }

  .sd-well {
    border: 1px solid var(--sd-border-strong);
    border-radius: var(--sd-radius-md);
    background: linear-gradient(rgba(0, 0, 0, 0.11), transparent 42%), var(--sd-surface-inset);
    box-shadow: inset 0 2px 4px var(--sd-shadow), 0 1px 0 var(--sd-highlight-soft);
  }
}

/* packages/css/src/components.css */
@layer sundance.components {
  .sd-root {
    min-height: 100%;
    background: var(--sd-canvas);
  }

  :where(
    .sd-bar-button,
    .sd-button,
    .sd-segmented__item,
    .sd-switch,
    button.sd-row,
    .sd-tab,
    .sd-stepper__button,
    .sd-toolbar__item,
    .sd-slider,
    .sd-page-control__dot,
    .sd-media__transport-button
  ) {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }

  .sd-window {
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid var(--sd-border-strong);
    border-radius: 0;
    background: var(--sd-surface);
    box-shadow: var(--sd-shadow-deep);
  }

  .sd-navbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 52%) minmax(0, 1fr);
    align-items: center;
    min-height: var(--sd-navbar-height);
    padding: var(--sd-space-1) var(--sd-space-2);
    border-bottom: 1px solid var(--sd-bar-border);
    color: var(--sd-bar-ink);
    background:
      linear-gradient(rgba(255, 255, 255, 0.34), transparent 14%),
      linear-gradient(var(--sd-bar-top), var(--sd-bar-mid) 52%, var(--sd-bar-bottom));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 color-mix(in srgb, var(--sd-bar-bottom) 78%, black),
      0 1px 2px var(--sd-shadow-soft);
  }

  .sd-navbar__leading {
    min-width: 0;
    max-width: 100%;
    justify-self: start;
  }

  .sd-navbar__trailing {
    min-width: 0;
    max-width: 100%;
    justify-self: end;
  }

  .sd-navbar__heading {
    min-width: 0;
    text-align: center;
  }

  .sd-navbar__title {
    display: block;
    overflow: hidden;
    font-family: var(--sd-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.05;
    text-overflow: ellipsis;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.58);
    white-space: nowrap;
  }

  .sd-navbar__subtitle {
    display: block;
    margin-top: 0.1rem;
    font-size: var(--sd-type-xs);
    font-weight: 700;
    opacity: 0.76;
  }

  .sd-bar-button,
  .sd-button {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sd-control-height);
    min-width: 0;
    max-width: 100%;
    padding: 0 var(--sd-space-4);
    border: 1px solid var(--sd-border-strong);
    border-radius: var(--sd-radius-md);
    color: var(--sd-ink);
    background:
      linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08) 48%, transparent 49%),
      linear-gradient(var(--sd-surface-raised), var(--sd-surface-muted));
    box-shadow: var(--sd-shadow-raised);
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    text-shadow: var(--sd-control-text-shadow);
    cursor: pointer;
    transition: filter var(--sd-motion-fast), transform var(--sd-motion-fast) var(--sd-ease-press);
    user-select: none;
    white-space: nowrap;
  }

  .sd-bar-button {
    min-height: var(--sd-control-height);
    padding-inline: calc(0.72rem * var(--sd-density));
    border-color: var(--sd-bar-button-border);
    border-radius: calc(0.3125rem * var(--sd-density));
    color: var(--sd-bar-ink);
    background: linear-gradient(
      var(--sd-bar-button-top) 0,
      var(--sd-bar-button-mid) 48%,
      var(--sd-bar-button-bottom) 100%
    );
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.42),
      0 1px 2px rgba(15, 30, 49, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.38),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    font-size: calc(0.75rem * var(--sd-type-scale));
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.52);
  }

  .sd-bar-button--back {
    --sd-back-tip: calc(0.62rem * var(--sd-density));
    --sd-back-inner-tip: calc(0.56rem * var(--sd-density));
    --sd-back-corner: calc(0.3rem * var(--sd-density));
    --sd-back-corner-inset: calc(0.12rem * var(--sd-density));
    margin-left: calc(0.12rem * var(--sd-density));
    padding-right: calc(0.62rem * var(--sd-density));
    padding-left: calc(0.84rem * var(--sd-density));
    border: 0;
    border-radius: 0;
    background: var(--sd-back-button-border);
    box-shadow: none;
    clip-path: polygon(
      0 48%,
      0 52%,
      var(--sd-back-tip) 98%,
      calc(100% - var(--sd-back-corner)) 98%,
      calc(100% - var(--sd-back-corner-inset)) 91%,
      100% 80%,
      100% 20%,
      calc(100% - var(--sd-back-corner-inset)) 9%,
      calc(100% - var(--sd-back-corner)) 2%,
      var(--sd-back-tip) 2%,
      0 48%
    );
    filter: none;
    isolation: isolate;
  }

  .sd-bar-button--back::before {
    position: absolute;
    z-index: -1;
    inset: 1px 0.5px 1px 1px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.22), transparent 18%),
      linear-gradient(
        var(--sd-back-button-top) 0,
        var(--sd-back-button-mid) 48%,
        var(--sd-back-button-bottom) 100%
      );
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.48),
      inset 0 -1px 0 rgba(0, 0, 0, 0.28);
    clip-path: polygon(
      0 48%,
      0 52%,
      var(--sd-back-inner-tip) 98%,
      calc(100% - var(--sd-back-corner)) 98%,
      calc(100% - var(--sd-back-corner-inset)) 91%,
      100% 80%,
      100% 20%,
      calc(100% - var(--sd-back-corner-inset)) 9%,
      calc(100% - var(--sd-back-corner)) 2%,
      var(--sd-back-inner-tip) 2%,
      0 48%
    );
    content: "";
    pointer-events: none;
  }

  .sd-bar-button--back:hover:not(:disabled) {
    filter: brightness(1.06);
  }

  .sd-bar-button--back:active:not(:disabled) {
    filter: brightness(0.9);
  }

  .sd-button--primary {
    border-color: var(--sd-accent-border);
    color: var(--sd-accent-ink);
    background:
      linear-gradient(rgba(255, 255, 255, 0.24), transparent 49%),
      linear-gradient(var(--sd-accent-top) 0, var(--sd-accent) 48%, var(--sd-accent-bottom) 100%);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.42),
      0 1px 2px rgba(24, 45, 75, 0.46),
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 -1px 0 rgba(0, 0, 0, 0.24);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.56);
  }

  .sd-button--danger {
    min-height: calc(2.0625rem * var(--sd-density));
    border-color: color-mix(in srgb, var(--sd-danger) 74%, black);
    color: #fff;
    background:
      radial-gradient(
        ellipse 120% 94% at 50% -12%,
        rgba(255, 255, 255, 0.42) 0,
        rgba(255, 255, 255, 0.2) 42%,
        rgba(255, 255, 255, 0.08) 52%,
        rgba(255, 255, 255, 0) 65%
      ),
      linear-gradient(
        color-mix(in srgb, var(--sd-danger) 75%, white) 0,
        color-mix(in srgb, var(--sd-danger) 96%, white) 56%,
        color-mix(in srgb, var(--sd-danger) 94%, black) 100%
      );
    box-shadow:
      0 1px 2px rgba(69, 10, 8, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(80, 0, 0, 0.32);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.58);
  }

  .sd-button--quiet {
    border-color: transparent;
    color: var(--sd-accent);
    background: transparent;
    box-shadow: none;
    text-shadow: none;
  }

  .sd-button--block {
    display: flex;
    width: 100%;
  }

  .sd-button--small {
    min-height: var(--sd-control-height-sm);
    padding-inline: var(--sd-space-3);
    font-size: var(--sd-type-sm);
  }

  .sd-button--large {
    min-height: var(--sd-control-height-lg);
    padding-inline: var(--sd-space-5);
    font-size: var(--sd-type-lg);
  }

  :where(.sd-button, .sd-bar-button):hover:not(:disabled) {
    filter: brightness(1.06);
  }

  :where(.sd-button, .sd-bar-button):active:not(:disabled),
  :where(.sd-button, .sd-bar-button)[aria-pressed="true"] {
    box-shadow: inset 0 2px 4px var(--sd-shadow), 0 1px 0 var(--sd-highlight-soft);
    filter: brightness(0.9);
    transform: translateY(1px);
  }

  :where(.sd-button, .sd-bar-button):disabled,
  :where(.sd-button, .sd-bar-button)[aria-disabled="true"] {
    cursor: not-allowed;
    filter: grayscale(0.35);
    opacity: 0.48;
  }

  .sd-panel {
    overflow: hidden;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-sm);
    color: var(--sd-ink);
    background:
      linear-gradient(rgba(255, 255, 255, 0.18), transparent 22%),
      var(--sd-surface);
    box-shadow: var(--sd-shadow-raised);
  }

  .sd-panel__header {
    padding: var(--sd-space-3) var(--sd-space-4);
    border-bottom: 1px solid var(--sd-divider);
    background: linear-gradient(var(--sd-surface-raised), var(--sd-surface-muted));
    box-shadow: inset 0 1px 0 var(--sd-highlight);
  }

  .sd-panel__title {
    margin: 0;
    font-family: var(--sd-font-display);
    font-size: var(--sd-type-lg);
    line-height: var(--sd-leading-tight);
  }

  .sd-panel__body {
    padding: var(--sd-space-4);
  }

  .sd-group {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid var(--sd-group-border);
    border-radius: var(--sd-radius-lg);
    background: var(--sd-surface-raised);
    box-shadow: var(--sd-shadow-raised);
    list-style: none;
  }

  .sd-group__title {
    margin: 0 0 var(--sd-space-2);
    padding-inline: var(--sd-space-3);
    color: var(--sd-ink-muted);
    font-size: var(--sd-type-base);
    font-weight: 700;
    letter-spacing: 0;
    text-shadow: var(--sd-etched-text-shadow);
  }

  .sd-row {
    display: flex;
    align-items: center;
    min-height: var(--sd-row-height);
    gap: var(--sd-space-3);
    padding: var(--sd-space-2) calc(0.625rem * var(--sd-density));
    color: var(--sd-row-ink);
    background: var(--sd-row-surface);
  }

  .sd-row + .sd-row {
    border-top: 1px solid var(--sd-group-divider);
    box-shadow: inset 0 1px 0 var(--sd-highlight-soft);
  }

  button.sd-row,
  a.sd-row {
    width: 100%;
    border: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  :where(button.sd-row, a.sd-row):hover {
    background: color-mix(in srgb, var(--sd-accent) 12%, var(--sd-surface-raised));
  }

  .sd-row__icon {
    display: grid;
    flex: 0 0 calc(1.875rem * var(--sd-density));
    width: calc(1.875rem * var(--sd-density));
    height: calc(1.875rem * var(--sd-density));
    place-items: center;
    border: 0;
    border-radius: 0;
    color: var(--sd-accent);
    background: transparent;
    box-shadow: none;
    font-weight: 900;
    text-shadow: 0 1px 0 var(--sd-highlight-soft);
  }

  .sd-row__content {
    min-width: 0;
    flex: 1;
  }

  .sd-row__label {
    display: block;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.22;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sd-row__detail {
    display: block;
    overflow: hidden;
    margin-top: 0.18rem;
    color: var(--sd-row-detail);
    font-size: var(--sd-type-sm);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sd-row__value {
    overflow: hidden;
    max-width: 45%;
    color: var(--sd-row-value);
    font-size: var(--sd-type-lg);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sd-row__chevron {
    width: 0.55rem;
    height: 0.55rem;
    border-top: 2px solid var(--sd-chevron);
    border-right: 2px solid var(--sd-chevron);
    transform: rotate(45deg);
  }

  .sd-field,
  .sd-search {
    width: 100%;
    height: var(--sd-control-height);
    min-height: var(--sd-control-height);
    margin: 0;
    padding: 0 var(--sd-space-3);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-md);
    color: var(--sd-field-ink);
    background: var(--sd-field);
    box-shadow: var(--sd-shadow-inset);
    line-height: 1.2;
  }

  .sd-field::placeholder,
  .sd-search::placeholder {
    color: var(--sd-field-placeholder);
  }

  .sd-search {
    border-radius: var(--sd-radius-pill);
    padding-inline: calc(2.25rem * var(--sd-density)) var(--sd-space-3);
    border-color: var(--sd-search-border);
    background:
      radial-gradient(
        circle at calc(1.05rem * var(--sd-density)) 50%,
        transparent 0 calc(0.32rem * var(--sd-density)),
        var(--sd-field-placeholder) calc(0.33rem * var(--sd-density)) calc(0.43rem * var(--sd-density)),
        transparent calc(0.44rem * var(--sd-density))
      ),
      linear-gradient(
        45deg,
        transparent 0 43%,
        var(--sd-field-placeholder) 44% 59%,
        transparent 60% 100%
      ) calc(1.36rem * var(--sd-density)) calc(50% + 0.32rem) /
        calc(0.48rem * var(--sd-density)) calc(0.48rem * var(--sd-density)) no-repeat,
      var(--sd-field);
  }

  textarea.sd-field {
    height: auto;
    min-height: 6rem;
    padding-block: var(--sd-space-2);
    resize: vertical;
  }

  .sd-field-label {
    display: grid;
    gap: var(--sd-space-2);
    color: var(--sd-ink);
    font-size: var(--sd-type-sm);
    font-weight: 700;
  }

  .sd-segmented {
    display: inline-flex;
    min-height: var(--sd-control-height);
    min-width: min(100%, 16rem);
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--sd-bar-button-border);
    border-radius: calc(0.34rem * var(--sd-density));
    background: var(--sd-segment-bottom);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -2px 2px rgba(0, 0, 0, 0.28);
  }

  .sd-segmented__item {
    position: relative;
    min-height: calc(var(--sd-control-height) - 2px);
    min-width: 0;
    flex: 1;
    padding: 0 var(--sd-space-3);
    border: 0;
    border-radius: 0;
    color: var(--sd-bar-ink);
    background: linear-gradient(
      var(--sd-segment-top) 0,
      var(--sd-segment-mid) 48%,
      var(--sd-segment-bottom) 100%
    );
    font-size: var(--sd-type-sm);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .sd-segmented__item + .sd-segmented__item {
    border-left: 1px solid rgba(34, 56, 86, 0.7);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.16);
  }

  .sd-segmented__item[aria-pressed="true"] {
    z-index: 1;
    border-left-color: transparent;
    color: var(--sd-bar-ink);
    background: linear-gradient(var(--sd-segment-selected-top), var(--sd-segment-selected-bottom));
    box-shadow:
      inset 0 1px 3px rgba(0, 0, 0, 0.58),
      inset 0 -1px 0 rgba(255, 255, 255, 0.12);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  }

  .sd-switch {
    position: relative;
    display: inline-flex;
    width: calc(4.8125rem * var(--sd-density));
    height: calc(1.6875rem * var(--sd-density));
    overflow: hidden;
    flex: 0 0 auto;
    align-items: center;
    padding: 0;
    border: 1px solid var(--sd-switch-off-border);
    border-radius: var(--sd-radius-pill);
    background:
      linear-gradient(to top, rgba(255, 255, 255, 0.42), transparent 52%),
      var(--sd-switch-off);
    box-shadow:
      0 1px 1px rgba(0, 0, 0, 0.28),
      inset 0 2px 4px rgba(0, 0, 0, 0.3),
      inset 0 -1px 0 rgba(255, 255, 255, 0.78);
    cursor: pointer;
    transition: background var(--sd-motion-switch) linear;
  }

  .sd-switch::before {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    display: block;
    width: calc(1.5625rem * var(--sd-density));
    height: calc(1.5625rem * var(--sd-density));
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    background: linear-gradient(var(--sd-switch-thumb-top), var(--sd-switch-thumb-bottom));
    box-shadow:
      0 1px 2px rgba(2, 8, 12, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    content: "";
    transform: translateY(-50%);
    transition: transform var(--sd-motion-switch) ease-out;
  }

  .sd-switch::after {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: calc(0.75rem * var(--sd-density));
    color: var(--sd-switch-label-off);
    content: "OFF";
    font-size: calc(0.88rem * var(--sd-type-scale));
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
    transform: translateY(-50%);
  }

  .sd-switch[aria-checked="true"] {
    border-color: var(--sd-switch-on-border);
    background:
      linear-gradient(to top, rgba(255, 255, 255, 0.36), transparent 52%),
      var(--sd-switch-on);
  }

  .sd-switch[aria-checked="true"]::before {
    transform: translateX(calc(3.125rem * var(--sd-density))) translateY(-50%);
  }

  .sd-switch[aria-checked="true"]::after {
    right: auto;
    left: calc(0.9rem * var(--sd-density));
    color: var(--sd-accent-ink);
    content: "ON";
  }

  .sd-progress {
    overflow: hidden;
    height: calc(0.6875rem * var(--sd-density));
    border: 1px solid var(--sd-border-strong);
    border-radius: var(--sd-radius-pill);
    background: var(--sd-surface-inset);
    box-shadow: var(--sd-shadow-inset);
  }

  .sd-progress__fill {
    height: 100%;
    border-right: 1px solid var(--sd-accent-border);
    border-radius: inherit;
    background:
      linear-gradient(rgba(255, 255, 255, 0.48), transparent 46%),
      repeating-linear-gradient(120deg, transparent 0 7px, rgba(255, 255, 255, 0.18) 7px 11px),
      linear-gradient(var(--sd-accent-top), var(--sd-accent-bottom));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 1px 0 2px var(--sd-shadow-soft);
  }

  .sd-badge {
    display: inline-flex;
    min-width: calc(1.72rem * var(--sd-density));
    min-height: calc(1.72rem * var(--sd-density));
    align-items: center;
    justify-content: center;
    padding: 0 calc(0.36rem * var(--sd-density));
    border: 1px solid rgba(255, 255, 255, 0.98);
    border-radius: var(--sd-radius-pill);
    color: #fff;
    background:
      radial-gradient(
        ellipse 125% 96% at 50% -15%,
        rgba(255, 255, 255, 0.78) 0,
        rgba(255, 255, 255, 0.34) 32%,
        rgba(255, 255, 255, 0.1) 48%,
        rgba(255, 255, 255, 0) 66%
      ),
      linear-gradient(
        color-mix(in srgb, var(--sd-danger) 54%, white) 0,
        var(--sd-danger) 47%,
        color-mix(in srgb, var(--sd-danger) 84%, black) 100%
      );
    box-shadow:
      0 1px 3px rgba(69, 10, 8, 0.56),
      0 0 0 1px rgba(69, 10, 8, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      inset 0 -2px 0 rgba(79, 0, 0, 0.32);
    font-size: var(--sd-type-base);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(80, 0, 0, 0.66);
  }

  .sd-tabbar {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    min-height: var(--sd-tabbar-height);
    border-top: 1px solid var(--sd-border-strong);
    color: var(--sd-tabbar-ink);
    background:
      linear-gradient(rgba(255, 255, 255, 0.15), transparent 30%),
      linear-gradient(var(--sd-tabbar-top), var(--sd-tabbar-bottom));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.17);
  }

  .sd-tab {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: var(--sd-tabbar-height);
    overflow: hidden;
    place-content: center;
    gap: 0.06rem;
    padding: var(--sd-space-1);
    border: 0;
    color: inherit;
    background: transparent;
    font-size: calc(0.68rem * var(--sd-type-scale));
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
    cursor: pointer;
  }

  .sd-tab::after {
    display: block;
    content: attr(aria-label);
    line-height: 1;
  }

  .sd-tab__icon {
    display: block;
    font-size: 1.25rem;
    line-height: 1;
  }

  .sd-tab[aria-selected="true"],
  .sd-tab[aria-current="page"] {
    color: var(--sd-tabbar-active);
    background:
      linear-gradient(rgba(255, 255, 255, 0.18), transparent 45%),
      linear-gradient(rgba(84, 88, 90, 0.9), rgba(37, 40, 42, 0.72));
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70% 100%;
    border-radius: calc(0.3rem * var(--sd-density)) calc(0.3rem * var(--sd-density)) 0 0;
    box-shadow: none;
  }

  .sd-alert {
    position: relative;
    overflow: hidden;
    width: min(100%, 17.5rem);
    border: 2px solid #c4c7cf;
    border-radius: calc(0.75rem * var(--sd-density));
    color: var(--sd-alert-ink);
    background: #0b1b44;
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.48),
      inset 0 0 0 2px rgba(255, 255, 255, 0.18);
    text-align: center;
  }

  .sd-alert::before {
    position: absolute;
    z-index: 0;
    top: -1px;
    left: -10%;
    width: 120%;
    height: calc(2rem * var(--sd-density));
    border-radius: 0 0 50% 50% / 0 0 28% 28%;
    background: linear-gradient(#8490a9 0, #586889 58%, #354874 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
    content: "";
    pointer-events: none;
  }

  .sd-alert__body {
    position: relative;
    z-index: 1;
    padding: calc(0.875rem * var(--sd-density)) var(--sd-space-3) var(--sd-space-3);
  }

  .sd-alert__title {
    margin: 0 0 var(--sd-space-1);
    font-family: var(--sd-font-display);
    font-size: var(--sd-type-lg);
  }

  .sd-alert__message {
    margin: 0;
    color: var(--sd-alert-ink);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.62);
    line-height: 1.2;
  }

  .sd-alert__actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
    gap: calc(0.75rem * var(--sd-density));
    padding: calc(0.375rem * var(--sd-density));
    border-top: 0;
    background: transparent;
  }

  .sd-alert__actions .sd-button {
    min-height: calc(2.625rem * var(--sd-density));
    border-color: #131e3a;
    color: #fff;
    background: linear-gradient(#909bb4 0, #697897 47%, #33466f 53%, #142650 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.52),
      inset 0 -1px 0 rgba(0, 0, 0, 0.36),
      0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
  }

  .sd-alert__actions .sd-button:last-child {
    border-color: #53617c;
    background: linear-gradient(#bac4d5 0, #8f9db7 47%, #7182a3 53%, #5e7097 100%);
  }

  .sd-stepper {
    display: inline-grid;
    grid-template-columns: 2.75rem minmax(3.5rem, auto) 2.75rem;
    overflow: hidden;
    border: 1px solid var(--sd-border-strong);
    border-radius: var(--sd-radius-md);
    background: var(--sd-surface-muted);
    box-shadow: var(--sd-shadow-raised);
  }

  .sd-stepper__button {
    min-height: var(--sd-touch-target);
    border: 0;
    color: var(--sd-ink);
    background: linear-gradient(var(--sd-surface-raised), var(--sd-surface-muted));
    font-size: var(--sd-type-xl);
    font-weight: 900;
    cursor: pointer;
  }

  .sd-stepper__button:active {
    background: var(--sd-surface-inset);
    box-shadow: inset 0 2px 3px var(--sd-shadow-soft);
  }

  .sd-stepper__value {
    display: grid;
    min-width: 4rem;
    place-items: center;
    border-inline: 1px solid var(--sd-divider);
    color: var(--sd-ink);
    background: var(--sd-field);
    box-shadow: var(--sd-shadow-inset);
    font-weight: 800;
  }

  .sd-statusbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    min-height: var(--sd-statusbar-height);
    align-items: center;
    padding-inline: var(--sd-space-2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.72);
    color: #fff;
    background: linear-gradient(var(--sd-statusbar-top), var(--sd-statusbar-bottom));
    font-size: calc(0.75rem * var(--sd-type-scale));
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 -1px 0 #000;
  }

  .sd-statusbar__leading {
    justify-self: start;
  }

  .sd-statusbar__time {
    justify-self: center;
  }

  .sd-statusbar__trailing {
    justify-self: end;
  }

  .sd-toolbar {
    display: flex;
    min-height: var(--sd-toolbar-height);
    align-items: center;
    justify-content: space-around;
    gap: var(--sd-space-2);
    padding: var(--sd-space-1) var(--sd-space-2);
    border-top: 1px solid var(--sd-bar-border);
    color: var(--sd-bar-ink);
    background:
      linear-gradient(rgba(255, 255, 255, 0.34), transparent 48%),
      linear-gradient(var(--sd-bar-top), var(--sd-bar-bottom));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 2px var(--sd-shadow-soft);
  }

  .sd-toolbar__item {
    display: inline-grid;
    min-width: var(--sd-touch-target);
    min-height: var(--sd-control-height);
    place-items: center;
    padding-inline: var(--sd-space-2);
    border: 0;
    color: inherit;
    background: transparent;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.72);
    cursor: pointer;
  }

  .sd-toolbar__item:active,
  .sd-toolbar__item[aria-pressed="true"] {
    color: var(--sd-accent-ink);
    filter: brightness(0.82);
    transform: translateY(1px);
  }

  .sd-slider {
    width: 100%;
    height: var(--sd-touch-target);
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
  }

  .sd-slider::-webkit-slider-runnable-track {
    height: calc(0.5625rem * var(--sd-density));
    border: 1px solid var(--sd-border-strong);
    border-radius: var(--sd-radius-pill);
    background:
      linear-gradient(
        90deg,
        var(--sd-accent-bottom) 0,
        var(--sd-accent-top) var(--sd-slider-position, 50%),
        var(--sd-surface-inset) var(--sd-slider-position, 50%),
        var(--sd-surface-raised) 100%
      );
    box-shadow: inset 0 1px 2px var(--sd-shadow-soft);
  }

  .sd-slider::-webkit-slider-thumb {
    width: calc(1.25rem * var(--sd-density));
    height: calc(1.25rem * var(--sd-density));
    margin-top: calc(-0.40625rem * var(--sd-density));
    appearance: none;
    border: 1px solid var(--sd-border-strong);
    border-radius: 50%;
    background:
      linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.12) 50%, transparent 51%),
      linear-gradient(#a6a6a6, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.38), inset 0 1px 0 #fff;
  }

  .sd-slider::-moz-range-track {
    height: calc(0.5625rem * var(--sd-density));
    border: 1px solid var(--sd-border-strong);
    border-radius: var(--sd-radius-pill);
    background: var(--sd-surface-inset);
    box-shadow: inset 0 1px 2px var(--sd-shadow-soft);
  }

  .sd-slider::-moz-range-progress {
    height: calc(0.5625rem * var(--sd-density));
    border-radius: var(--sd-radius-pill);
    background: linear-gradient(var(--sd-accent-top), var(--sd-accent-bottom));
  }

  .sd-slider::-moz-range-thumb {
    width: calc(1.25rem * var(--sd-density));
    height: calc(1.25rem * var(--sd-density));
    border: 1px solid var(--sd-border-strong);
    border-radius: 50%;
    background: linear-gradient(#a6a6a6, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.38), inset 0 1px 0 #fff;
  }

  .sd-activity {
    display: inline-block;
    width: calc(1.25rem * var(--sd-density));
    height: calc(1.25rem * var(--sd-density));
    border-radius: 50%;
    background: repeating-conic-gradient(currentColor 0 8deg, transparent 8deg 30deg);
    color: var(--sd-ink-muted);
    mask: radial-gradient(circle, transparent 0 42%, #000 45% 100%);
    animation: sd-spin 1200ms linear infinite;
  }

  .sd-activity--large {
    width: calc(2.1875rem * var(--sd-density));
    height: calc(2.1875rem * var(--sd-density));
  }

  .sd-activity--small {
    width: calc(0.875rem * var(--sd-density));
    height: calc(0.875rem * var(--sd-density));
  }

  .sd-page-control {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: var(--sd-space-2);
  }

  .sd-page-control__dot {
    position: relative;
    width: var(--sd-touch-target);
    height: var(--sd-touch-target);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0.58;
    cursor: pointer;
  }

  .sd-page-control__dot::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(0.42rem * var(--sd-density));
    height: calc(0.42rem * var(--sd-density));
    border-radius: 50%;
    background: var(--sd-ink-faint);
    box-shadow: 0 1px 0 var(--sd-highlight-soft);
    content: "";
    transform: translate(-50%, -50%);
  }

  .sd-page-control__dot[aria-current="true"] {
    opacity: 1;
  }

  .sd-page-control__dot[aria-current="true"]::before {
    background: var(--sd-accent);
  }

  .sd-action-sheet {
    display: grid;
    width: min(100%, 30rem);
    gap: var(--sd-space-3);
    padding: var(--sd-space-3) calc(1.5rem * var(--sd-density));
    border-top: 1px solid var(--sd-border-strong);
    background:
      linear-gradient(rgba(255, 255, 255, 0.2), transparent 18%),
      linear-gradient(var(--sd-sheet-top), var(--sd-sheet-mid) 28%, var(--sd-sheet-bottom));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 -3px 10px var(--sd-shadow);
  }

  .sd-action-sheet__group {
    display: grid;
    gap: var(--sd-space-2);
  }

  .sd-action-sheet__title {
    margin: 0;
    padding: var(--sd-space-2);
    color: var(--sd-bar-ink);
    font-size: var(--sd-type-sm);
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.62);
  }

  .sd-action-sheet .sd-button {
    min-height: calc(2.625rem * var(--sd-density));
    border: 2px solid #202329;
    border-radius: calc(0.625rem * var(--sd-density));
    font-size: var(--sd-type-lg);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  }

  .sd-action-sheet .sd-button:not(.sd-button--danger) {
    color: var(--sd-ink);
    background:
      linear-gradient(rgba(255, 255, 255, 0.32), transparent 50%),
      linear-gradient(var(--sd-surface-raised), var(--sd-surface-muted));
    text-shadow: var(--sd-control-text-shadow);
  }

  .sd-action-sheet > .sd-button:last-child {
    margin-top: var(--sd-space-3);
    color: var(--sd-bar-ink);
    background: linear-gradient(var(--sd-sheet-button-top), var(--sd-sheet-button-mid) 48%, var(--sd-sheet-button-bottom));
    text-shadow: 0 -1px 0 #000;
  }

  .sd-list {
    margin: 0;
    padding: 0;
    background: var(--sd-surface-raised);
    list-style: none;
  }

  .sd-list .sd-row {
    border-radius: 0;
  }

  .sd-list .sd-row + .sd-row {
    border-top: 1px solid var(--sd-divider);
  }

  .sd-message {
    width: fit-content;
    max-width: min(78%, 32rem);
    padding: var(--sd-space-2) var(--sd-space-3);
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-lg);
    color: var(--sd-ink);
    background:
      linear-gradient(rgba(255, 255, 255, 0.7), transparent 42%),
      linear-gradient(var(--sd-surface-raised), var(--sd-surface-muted));
    box-shadow: 0 1px 2px var(--sd-shadow-soft), inset 0 1px 0 var(--sd-highlight);
    line-height: 1.25;
  }

  .sd-message--sent {
    margin-inline-start: auto;
    border-color: var(--sd-accent-border);
    color: var(--sd-accent-ink);
    background:
      linear-gradient(rgba(255, 255, 255, 0.42), transparent 48%),
      linear-gradient(var(--sd-accent-top), var(--sd-accent-bottom));
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.36);
  }

  @keyframes sd-spin {
    to {
      transform: rotate(1turn);
    }
  }

  @container (max-width: 22rem) {
    .sd-navbar {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 46%) minmax(0, 0.9fr);
      padding-inline: var(--sd-space-1);
    }

    .sd-navbar__title {
      font-size: var(--sd-type-lg);
    }

    .sd-row {
      gap: var(--sd-space-2);
      padding-inline: var(--sd-space-3);
    }

    .sd-row__value {
      max-width: 38%;
    }

    .sd-alert__actions {
      grid-template-columns: 1fr;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sd-activity {
      animation: none;
      opacity: 0.72;
    }
  }

  @media (forced-colors: active) {
    .sd-button,
    .sd-bar-button,
    .sd-segmented,
    .sd-switch,
    .sd-progress,
    .sd-group,
    .sd-alert,
    .sd-stepper,
    .sd-action-sheet {
      border: 1px solid CanvasText;
      box-shadow: none;
    }
  }
}

/* packages/css/src/legacy.css */
@layer sundance.legacy {
  .sd-app-shell {
    --sd-app-width: 20rem;
    --sd-app-height: 30rem;
    --sd-app-table-canvas: #c8ced8;
    --sd-app-row: #f7f7f7;
    --sd-app-row-border: #b8bcc1;
    position: relative;
    display: flex;
    width: min(100%, var(--sd-app-width));
    height: min(var(--sd-app-height), 100svh);
    min-height: 24rem;
    overflow: hidden;
    flex-direction: column;
    isolation: isolate;
    border: 1px solid var(--sd-border-strong);
    color: var(--sd-ink);
    background: var(--sd-app-table-canvas);
    box-shadow: var(--sd-shadow-deep);
    container-type: inline-size;
  }

  .sd-app-shell--fluid {
    width: 100%;
    height: auto;
    min-height: 30rem;
  }

  .sd-app-shell > :where(.sd-statusbar, .sd-navbar, .sd-toolbar, .sd-tabbar) {
    flex: 0 0 auto;
  }

  .sd-app-shell__viewport {
    position: relative;
    min-height: 0;
    overflow: hidden auto;
    flex: 1 1 auto;
    background:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px),
      var(--sd-app-table-canvas);
    overscroll-behavior: contain;
  }

  .sd-app-shell__viewport--plain {
    background: var(--sd-app-row);
  }

  .sd-app-view {
    min-height: 100%;
  }

  .sd-app-view--stack {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
  }

  .sd-app-view--stack > :where(.sd-navbar, .sd-toolbar, .sd-tabbar) {
    flex: 0 0 auto;
  }

  .sd-app-view__content {
    min-height: 0;
    overflow: hidden auto;
    flex: 1 1 auto;
    overscroll-behavior: contain;
  }

  .sd-navbar__title[data-sd-view-title]:focus-visible {
    box-shadow: none;
  }

  .sd-app-view[hidden],
  .sd-overlay[hidden] {
    display: none;
  }

  [data-sd-direction="forward"] .sd-app-view:not([hidden]) {
    animation: sd-view-forward var(--sd-motion-base) ease-out;
  }

  [data-sd-direction="back"] .sd-app-view:not([hidden]) {
    animation: sd-view-back var(--sd-motion-base) ease-out;
  }

  .sd-statusbar__network {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: calc(0.25rem * var(--sd-density));
  }

  .sd-statusbar__signal {
    display: inline-flex;
    height: calc(0.625rem * var(--sd-density));
    align-items: flex-end;
    gap: 1px;
  }

  .sd-statusbar__signal > i {
    display: block;
    width: 2px;
    background: currentColor;
    box-shadow: 0 0 1px #000;
  }

  .sd-statusbar__signal > i:nth-child(1) { height: 30%; }
  .sd-statusbar__signal > i:nth-child(2) { height: 45%; }
  .sd-statusbar__signal > i:nth-child(3) { height: 62%; }
  .sd-statusbar__signal > i:nth-child(4) { height: 80%; }
  .sd-statusbar__signal > i:nth-child(5) { height: 100%; }

  .sd-statusbar__battery {
    display: inline-flex;
    align-items: center;
    gap: calc(0.2rem * var(--sd-density));
  }

  .sd-statusbar__battery-meter {
    position: relative;
    display: inline-block;
    width: calc(1.35rem * var(--sd-density));
    height: calc(0.62rem * var(--sd-density));
    padding: 1px;
    border: 1px solid currentColor;
    border-radius: 2px;
    box-shadow: 0 0 1px #000;
  }

  .sd-statusbar__battery-meter::after {
    position: absolute;
    top: 24%;
    right: -3px;
    width: 2px;
    height: 52%;
    background: currentColor;
    content: "";
  }

  .sd-statusbar__battery-level {
    display: block;
    width: var(--sd-battery-level, 100%);
    height: 100%;
    border-radius: 1px;
    background: currentColor;
  }

  .sd-table {
    margin: 0;
    padding: 0;
    color: var(--sd-ink);
  }

  .sd-table__section {
    margin: 0;
    padding: 0;
  }

  .sd-table__header,
  .sd-table__footer {
    margin: 0;
    padding-inline: calc(0.75rem * var(--sd-density));
    color: #566273;
    font-size: calc(0.72rem * var(--sd-type-scale));
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
  }

  .sd-table__header {
    padding-top: calc(0.9rem * var(--sd-density));
    padding-bottom: calc(0.38rem * var(--sd-density));
    text-transform: uppercase;
  }

  .sd-table__footer {
    padding-top: calc(0.42rem * var(--sd-density));
    padding-bottom: calc(0.85rem * var(--sd-density));
    font-weight: 500;
  }

  .sd-table__group {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sd-table .sd-row {
    min-height: var(--sd-row-height);
    color: var(--sd-row-ink);
    background: var(--sd-row-surface);
  }

  .sd-table .sd-row + .sd-row {
    border-top-color: var(--sd-app-row-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  }

  .sd-table--plain .sd-table__header {
    position: sticky;
    z-index: 1;
    top: 0;
    min-height: calc(1.45rem * var(--sd-density));
    padding-block: calc(0.24rem * var(--sd-density));
    border-block: 1px solid #8c9aab;
    color: #fff;
    background: linear-gradient(#aab7c7, #7f90a6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
    text-shadow: 0 -1px 0 rgba(35, 49, 67, 0.72);
  }

  .sd-table--plain .sd-row {
    border-bottom: 1px solid var(--sd-app-row-border);
  }

  .sd-table--plain .sd-row + .sd-row {
    border-top: 0;
  }

  .sd-table--grouped {
    padding: 0 calc(0.56rem * var(--sd-density)) calc(0.85rem * var(--sd-density));
  }

  .sd-table--grouped .sd-table__group {
    overflow: hidden;
    border: 1px solid var(--sd-group-border);
    border-radius: calc(0.58rem * var(--sd-density));
    background: var(--sd-app-row);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 1px 0 #fff;
  }

  .sd-table--grouped .sd-row:first-child {
    border-radius: calc(0.5rem * var(--sd-density)) calc(0.5rem * var(--sd-density)) 0 0;
  }

  .sd-table--grouped .sd-row:last-child {
    border-radius: 0 0 calc(0.5rem * var(--sd-density)) calc(0.5rem * var(--sd-density));
  }

  .sd-table--grouped .sd-row:only-child {
    border-radius: calc(0.5rem * var(--sd-density));
  }

  .sd-row__icon--bezel {
    flex-basis: calc(1.875rem * var(--sd-density));
    width: calc(1.875rem * var(--sd-density));
    height: calc(1.875rem * var(--sd-density));
    border: 1px solid color-mix(in srgb, var(--sd-accent-border) 72%, black);
    border-radius: calc(0.38rem * var(--sd-density));
    color: var(--sd-accent-ink);
    background:
      linear-gradient(rgba(255, 255, 255, 0.5), transparent 48%),
      linear-gradient(var(--sd-accent-top), var(--sd-accent-bottom));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 1px 2px rgba(0, 0, 0, 0.34);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.48);
  }

  .sd-row__checkmark {
    width: calc(0.8rem * var(--sd-density));
    height: calc(0.42rem * var(--sd-density));
    border-bottom: 3px solid var(--sd-accent);
    border-left: 3px solid var(--sd-accent);
    filter: drop-shadow(0 1px 0 #fff);
    transform: rotate(-45deg);
  }

  .sd-media {
    display: grid;
    min-height: 100%;
    align-content: start;
    padding: calc(1rem * var(--sd-density));
    color: #fff;
    background:
      radial-gradient(circle at 50% 24%, rgba(126, 139, 154, 0.58), transparent 42%),
      linear-gradient(#4a525d, #20252b 72%);
    text-shadow: 0 -1px 0 #000;
  }

  .sd-media__artwork {
    position: relative;
    width: min(78%, calc(13.25rem * var(--sd-density)));
    aspect-ratio: 1;
    overflow: hidden;
    justify-self: center;
    border: 1px solid #111;
    background: #d4d4d4;
    box-shadow: 0 calc(0.35rem * var(--sd-density)) calc(0.8rem * var(--sd-density)) rgba(0, 0, 0, 0.68);
  }

  .sd-media__artwork::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.27), transparent 28% 72%, rgba(0, 0, 0, 0.16));
    content: "";
    pointer-events: none;
  }

  .sd-media__artwork > :where(img, svg) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sd-media__placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #553516;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.52), transparent 32%),
      linear-gradient(145deg, #f7d68b, #cf8543 58%, #914832);
    font-family: var(--sd-font-display);
    font-size: var(--sd-type-xl);
    font-weight: 900;
    text-align: center;
  }

  .sd-media__metadata {
    min-width: 0;
    padding: calc(0.65rem * var(--sd-density)) 0 calc(0.42rem * var(--sd-density));
    text-align: center;
  }

  .sd-media__title,
  .sd-media__subtitle {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sd-media__title {
    font-size: calc(1rem * var(--sd-type-scale));
  }

  .sd-media__subtitle {
    margin-top: calc(0.15rem * var(--sd-density));
    color: #c7cdd3;
    font-size: calc(0.7rem * var(--sd-type-scale));
  }

  .sd-media__timeline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(0.45rem * var(--sd-density));
    color: #d5d9dd;
    font-size: calc(0.58rem * var(--sd-type-scale));
  }

  .sd-media__timeline .sd-slider {
    height: calc(1.6rem * var(--sd-density));
  }

  .sd-media__transport {
    display: flex;
    min-height: calc(4rem * var(--sd-density));
    align-items: center;
    justify-content: center;
    gap: calc(1.4rem * var(--sd-density));
  }

  .sd-media__transport-button {
    display: grid;
    min-width: var(--sd-touch-target);
    min-height: var(--sd-touch-target);
    place-items: center;
    padding: 0;
    border: 0;
    color: #f5f6f7;
    background: transparent;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.72));
    cursor: pointer;
  }

  .sd-media__transport-button--primary {
    width: calc(3.25rem * var(--sd-density));
    height: calc(3.25rem * var(--sd-density));
    border: 1px solid #090b0d;
    border-radius: 50%;
    color: #202429;
    background:
      linear-gradient(rgba(255, 255, 255, 0.78), transparent 48%),
      linear-gradient(#f7f7f7, #a8adb2 52%, #e0e2e4);
    box-shadow: inset 0 1px 0 #fff, 0 3px 5px rgba(0, 0, 0, 0.72);
    filter: none;
  }

  .sd-media__transport-button:active {
    filter: brightness(0.78);
    transform: translateY(1px);
  }

  .sd-media__volume {
    display: grid;
    grid-template-columns: var(--sd-icon-size) minmax(0, 1fr) var(--sd-icon-size);
    align-items: center;
    gap: calc(0.42rem * var(--sd-density));
    color: #e3e6e8;
  }

  .sd-overlay {
    position: absolute;
    z-index: 50;
    inset: 0;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: calc(0.75rem * var(--sd-density));
    background: rgba(0, 0, 0, 0.48);
    animation: sd-overlay-in var(--sd-motion-base) ease-out;
  }

  .sd-overlay--sheet {
    align-items: end;
    padding: 0;
  }

  .sd-overlay--sheet .sd-action-sheet {
    width: 100%;
  }

  .sd-overlay:not(.sd-overlay--sheet) .sd-overlay__surface {
    transform-origin: 50% 50%;
    animation: sd-overlay-alert-in var(--sd-motion-pop) linear;
  }

  .sd-overlay--sheet .sd-overlay__surface {
    animation: sd-overlay-sheet-in var(--sd-motion-base) ease-out;
  }

  @keyframes sd-overlay-in {
    from { opacity: 0; }
  }

  @keyframes sd-view-forward {
    from { transform: translateX(100%); }
  }

  @keyframes sd-view-back {
    from { transform: translateX(-28%); }
  }

  @keyframes sd-overlay-alert-in {
    0% {
      opacity: 0;
      transform: scale(0.52);
    }

    58% {
      opacity: 1;
      transform: scale(1.075);
    }

    78% { transform: scale(0.965); }
    91% { transform: scale(1.018); }
    100% { transform: scale(1); }
  }

  @keyframes sd-overlay-sheet-in {
    from { transform: translateY(100%); }
  }

  @container (max-width: 22rem) {
    .sd-table__header,
    .sd-table__footer {
      padding-inline: calc(0.6rem * var(--sd-density));
    }

    .sd-media {
      padding: calc(0.75rem * var(--sd-density));
    }

    .sd-media__artwork {
      width: min(72%, calc(11.5rem * var(--sd-density)));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sd-overlay,
    .sd-overlay__surface,
    [data-sd-direction] .sd-app-view:not([hidden]) {
      animation: none;
    }
  }
}

/* packages/css/src/icons.css */
@layer sundance.components {
  .sd-pictogram {
    display: inline-block;
    width: var(--sd-icon-size);
    height: var(--sd-icon-size);
    flex: 0 0 auto;
    overflow: visible;
    color: currentColor;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.56));
    vector-effect: non-scaling-stroke;
  }

  .sd-pictogram * {
    vector-effect: non-scaling-stroke;
  }

  .sd-tab[aria-selected="true"] .sd-pictogram,
  .sd-tab[aria-current="page"] .sd-pictogram {
    color: var(--sd-tabbar-active);
  }

  @media (forced-colors: active) {
    .sd-pictogram {
      filter: none;
    }
  }
}

/* packages/css/src/utilities.css */
@layer sundance.utilities {
  .sd-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-4);
  }

  .sd-stack--tight {
    gap: var(--sd-space-2);
  }

  .sd-stack--loose {
    gap: var(--sd-space-6);
  }

  .sd-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sd-space-3);
  }

  .sd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--sd-space-3);
  }

  .sd-grow {
    flex: 1;
  }

  .sd-full {
    width: 100%;
  }

  .sd-text-center {
    text-align: center;
  }

  .sd-text-muted {
    color: var(--sd-ink-muted);
  }

  .sd-text-small {
    font-size: var(--sd-type-sm);
  }

  .sd-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}