/* Shared Таска foundations. Loaded before public and owner-panel recipes. */
:root {
  color-scheme: dark;
  font-family: var(--font-family-ui);
  font-size: var(--type-body);
  font-synthesis: none;

  --bg: #05070a;
  --surface: #0b1015;
  --surface-strong: #111820;
  --line: rgba(255, 255, 255, .13);
  --line-strong: rgba(255, 255, 255, .22);
  --text: #f6f7f8;
  --muted: #9199a5;
  --accent: #c9ff00;

  --font-family-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* The only named type roles used by working pages and the component preview. */
  --type-h1: clamp(38px, 5vw, 62px);
  --type-h2: clamp(28px, 4vw, 40px);
  --type-h3: 22px;
  --type-heading: 20px;
  --type-subheading: 14px;
  --type-body: 17px;
  --type-caption: 13px;

  --type-h1-weight: 700;
  --type-h1-leading: 1.05;
  --type-h1-tracking: -.02em;
  --type-h2-weight: 700;
  --type-h2-leading: 1.1;
  --type-h2-tracking: -.02em;
  --type-h3-weight: 600;
  --type-h3-leading: 1.25;
  --type-h3-tracking: -.01em;
  --type-heading-weight: 600;
  --type-heading-leading: 1.35;
  --type-heading-tracking: -.01em;
  --type-subheading-weight: 600;
  --type-subheading-leading: 1.4;
  --type-subheading-tracking: 0;
  --type-body-weight: 400;
  --type-body-leading: 1.6;
  --type-body-tracking: 0;
  --type-caption-weight: 500;
  --type-caption-leading: 1.5;
  --type-caption-tracking: 0;

  /* Legacy names resolve to the seven roles above; they do not add sizes. */
  --font-size-root: var(--type-body);
  --type-micro: var(--type-caption);
  --type-kicker: var(--type-caption);
  --type-meta: var(--type-caption);
  --type-small: var(--type-subheading);
  --type-reading: var(--type-body);
  --type-default: var(--type-body);
  --type-large: var(--type-heading);
  --type-display-small: var(--type-heading);
  --type-title-compact: var(--type-h2);
  --type-title: var(--type-h2);
  --type-page-title: var(--type-h1);
  --type-cabinet-title: var(--type-h1);

  --space-small: 8px;
  --space-medium: 16px;
  --space-big: 32px;

  --radius-pill: 999px;
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-action: 7px;
  --radius-circle: 50%;

  --size-target: 44px;
  --size-header-control: 38px;
  --border-width: 1px;
  --size-logo: 32px;
  --size-logo-small: 26px;
  --size-logo-mobile: 28px;
  --size-checkbox: 20px;
  --checkbox-offset: 3px;
  --min-height-textarea: 6rem;
  --height-progress: 10px;
  --height-progress-compact: 8px;
  --tracking-code-input: .4em;
  --width-page: 1100px;
  --width-content: 720px;
  --width-copy: 620px;
  --width-narrow: 640px;
  --gutter-page: calc(var(--space-big) + var(--space-medium));
  --gutter-mobile: var(--space-big);
  --gutter-dialog: var(--space-medium);
  --header-action-width: 148px;

  --color-action-ink: #080b05;
  --color-action-hover: #d9ff58;
  --color-action-hover-surface: rgba(201, 255, 0, .08);
  --color-action-tint: rgba(201, 255, 0, .1);
  --color-action-line: rgba(201, 255, 0, .22);
  --color-action-outline: rgba(201, 255, 0, .35);
  --color-action-badge: rgba(201, 255, 0, .36);
  --color-card-surface: var(--surface);
  --color-workflow-surface: var(--surface);
  --color-line-subtle: var(--line);
  --color-line-panel: var(--line);
  --color-line-grid: rgba(255, 255, 255, .035);
  --color-button-hover: #e9e9ec;
  --color-danger: #ff8a8a;
  --color-danger-hover: #ff9a9a;
  --color-danger-line: rgba(255, 120, 120, .6);
  --color-danger-fill: rgba(255, 120, 120, .1);
  --color-danger-solid: #ff7373;
  --color-danger-solid-ink: #21080b;
  --color-warning: #f0d488;
  --color-warning-background: rgba(240, 212, 136, .1);
  --color-warning-border: rgba(240, 212, 136, .4);
  --color-info-background: rgba(255, 255, 255, .04);
  --color-info-border: var(--line);
  --color-success-background: var(--color-action-tint);
  --color-success-border: var(--color-action-outline);
  --color-modal-scrim: rgba(5, 7, 10, .78);

  --opacity-disabled: .58;
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;
  --focus-ring-color: var(--accent);
  --transition-duration: 150ms;
  --transition-easing: ease;
  --shadow-dialog: 0 24px 80px rgba(0, 0, 0, .42);
}

/* Scoped primitives shared with the closed-panel preview. */
.ds-button,
.button {
  display: inline-flex;
  min-height: var(--size-target);
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-medium) var(--space-big);
  border: var(--border-width) solid var(--text);
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--bg);
  font: inherit;
  font-size: var(--type-body);
  font-weight: var(--type-heading-weight);
  line-height: var(--type-body-leading);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-duration) var(--transition-easing),
    border-color var(--transition-duration) var(--transition-easing),
    color var(--transition-duration) var(--transition-easing);
}

.ds-button:not(:disabled):not([aria-disabled="true"]):not(.button-disabled):hover,
.button:not(:disabled):not([aria-disabled="true"]):not(.button-disabled):hover { background: var(--color-button-hover); border-color: var(--color-button-hover); }
.ds-button:focus-visible,
.button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.ds-button[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]):not(.button-disabled),
.button[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]):not(.button-disabled) { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.ds-button:disabled,
.ds-button[aria-disabled="true"],
.button:disabled,
.button[aria-disabled="true"],
.button-disabled { cursor: not-allowed; opacity: var(--opacity-disabled); }
.ds-button--primary,
.button-primary { border-color: var(--accent); background: var(--accent); color: var(--color-action-ink); }
.ds-button--primary:not(:disabled):not([aria-disabled="true"]):not(.button-disabled):hover,
.button-primary:not(:disabled):not([aria-disabled="true"]):not(.button-disabled):hover { border-color: var(--color-action-hover); background: var(--color-action-hover); color: var(--color-action-ink); }
.ds-button--secondary,
.button-outline { border-color: var(--accent); background: transparent; color: var(--text); }
.ds-button--secondary:not(:disabled):not([aria-disabled="true"]):not(.button-disabled):hover,
.button-outline:not(:disabled):not([aria-disabled="true"]):not(.button-disabled):hover { border-color: var(--color-action-hover); background: var(--color-action-hover-surface); color: var(--text); }
.ds-button--danger,
.button-danger { border-color: var(--color-danger-line); background: transparent; color: var(--color-danger); }
.ds-button--danger:not(:disabled):not([aria-disabled="true"]):not(.button-disabled):hover,
.button-danger:not(:disabled):not([aria-disabled="true"]):not(.button-disabled):hover { border-color: var(--color-danger); background: var(--color-danger-fill); }
.ds-button--icon,
.button-icon,
.button-square { width: var(--size-target); min-width: var(--size-target); min-height: var(--size-target); height: var(--size-target); padding: 0; border-radius: var(--radius-action); }
.button-ghost { border-color: var(--line-strong); background: var(--color-info-background); color: var(--text); }
.button-ghost:not(:disabled):not([aria-disabled="true"]):not(.button-disabled):hover { border-color: var(--line-strong); background: var(--color-info-background); }
.ds-button--compact { padding: var(--space-small) var(--space-medium); }

.ds-card,
.ds-panel {
  min-width: 0;
  border: var(--border-width) solid var(--line);
  background: var(--surface);
}

.ds-card { padding: var(--space-medium); border-radius: var(--radius-card); }
.ds-panel { padding: var(--space-big); border-radius: var(--radius-panel); }

.ds-tariff-card {
  display: flex;
  min-width: 0;
  min-height: 320px;
  flex-direction: column;
}

.ds-tariff-card > .ds-type-heading { margin: var(--space-medium) 0 0; }
.ds-tariff-card > .ds-tariff-price { margin-block-start: var(--space-medium); white-space: nowrap; }
.ds-tariff-card > .ds-tariff-description {
  flex-grow: 1;
  margin: var(--space-medium) 0 var(--space-big);
  color: var(--muted);
  font-size: var(--type-body);
}
.ds-tariff-card.ds-card .ds-button {
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  margin-block-start: auto;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

@media (max-width: 1000px) {
  .ds-tariff-card.ds-card .ds-button { align-self: stretch; }
  .ds-tariff-card > .ds-tariff-price { white-space: normal; }
}

.ds-status,
.card-status { font-size: var(--type-body); font-weight: var(--type-heading-weight); line-height: var(--type-body-leading); letter-spacing: var(--type-body-tracking); }

.ds-field {
  display: grid;
  gap: var(--space-small);
  color: var(--text);
  font-size: var(--type-subheading);
  font-weight: var(--type-subheading-weight);
  line-height: var(--type-subheading-leading);
}

.ds-input,
.ds-select,
.ds-textarea,
.input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]),
.payment-form input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]) {
  width: 100%;
  min-width: 0;
  min-height: var(--size-target);
  padding: var(--space-small) var(--space-medium);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-input);
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
  font-size: var(--type-body);
  font-weight: var(--type-body-weight);
  line-height: var(--type-subheading-leading);
}

.ds-textarea { min-height: var(--min-height-textarea); resize: vertical; }
.ds-field > .field-hint,
.ds-field > .form-error,
.ds-checkbox > .form-error {
  margin: 0;
  font-size: var(--type-caption);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-leading);
}
.ds-input::placeholder,
.ds-textarea::placeholder,
.input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"])::placeholder,
.payment-form input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"])::placeholder { color: var(--muted); }
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus,
.input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]):focus,
.payment-form input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]):focus { border-color: var(--accent); }
.ds-input:focus-visible,
.ds-select:focus-visible,
.ds-textarea:focus-visible,
.input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]):focus-visible,
.payment-form input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.ds-input[aria-invalid="true"],
.ds-select[aria-invalid="true"],
.ds-textarea[aria-invalid="true"],
.input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"])[aria-invalid="true"],
.payment-form input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"])[aria-invalid="true"] { border-color: var(--color-danger); }
.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled,
.input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]):disabled,
.payment-form input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]):disabled { cursor: not-allowed; opacity: var(--opacity-disabled); }

.ds-checkbox {
  display: flex;
  min-height: var(--size-target);
  align-items: flex-start;
  gap: var(--space-small);
  color: var(--text);
  font-size: var(--type-body);
  line-height: var(--type-body-leading);
  cursor: pointer;
}

.ds-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: var(--size-checkbox);
  height: var(--size-checkbox);
  margin: var(--checkbox-offset) 0 0;
  accent-color: var(--accent);
}

.ds-notice {
  padding: var(--space-small) var(--space-medium);
  border: var(--border-width) solid var(--color-info-border);
  border-radius: var(--radius-card);
  background: var(--color-info-background);
  color: var(--text);
  font-size: var(--type-body);
  line-height: var(--type-body-leading);
  overflow-wrap: anywhere;
}

.ds-notice--danger { border-color: var(--color-danger-line); background: var(--color-danger-fill); color: var(--color-danger); }
.ds-notice--warning { border-color: var(--color-warning-border); background: var(--color-warning-background); color: var(--color-warning); }
.ds-notice--success { border-color: var(--color-success-border); background: var(--color-success-background); color: var(--accent); }
.ds-notice--info { border-color: var(--color-info-border); background: var(--color-info-background); color: var(--text); }

.ds-badge,
.card-badge { display: inline-block; flex: 0 0 auto; max-width: 100%; padding: var(--space-small) var(--space-medium); border: var(--border-width) solid var(--line-strong); border-radius: var(--radius-pill); background: var(--color-info-background); color: var(--muted); font-size: var(--type-caption); font-weight: var(--type-caption-weight); line-height: var(--type-caption-leading); letter-spacing: var(--type-caption-tracking); white-space: normal; overflow-wrap: anywhere; }
.ds-badge--info { border-color: var(--color-info-border); background: var(--color-info-background); color: var(--muted); }
.ds-badge--warning { border-color: var(--color-warning-border); background: var(--color-warning-background); color: var(--color-warning); }
.ds-badge--success { border-color: var(--color-success-border); background: var(--color-success-background); color: var(--accent); }
.ds-badge--danger { border-color: var(--color-danger-line); background: var(--color-danger-fill); color: var(--color-danger); }
.card-badge { padding: var(--space-small); border-color: var(--color-action-badge); background: transparent; color: var(--accent); }

.ds-meter,
.meter { margin-top: var(--space-medium); }

.ds-meter-label,
.meter-label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-medium);
  margin-bottom: var(--space-small);
  font-size: var(--type-subheading);
}

.ds-meter-label span:last-child,
.meter-label span:last-child { font-weight: var(--type-subheading-weight); }

.ds-progress,
.progress {
  display: block;
  width: 100%;
  height: var(--height-progress);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-line-subtle);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  color: var(--accent);
}

.ds-progress--compact { height: var(--height-progress-compact); background: var(--color-info-background); }
.ds-progress::-webkit-progress-bar,
.progress::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--color-line-subtle); }
.ds-progress--compact::-webkit-progress-bar { background: var(--color-info-background); }
.ds-progress::-webkit-progress-value,
.progress::-webkit-progress-value { border-radius: var(--radius-pill); background: var(--accent); }
.ds-progress::-moz-progress-bar,
.progress::-moz-progress-bar { border-radius: var(--radius-pill); background: var(--accent); }
.ds-progress--muted,
.progress-muted { color: var(--muted); }
.ds-progress--muted::-webkit-progress-value,
.progress-muted::-webkit-progress-value,
.ds-progress--muted::-moz-progress-bar,
.progress-muted::-moz-progress-bar { background: var(--muted); }

.ds-table-wrap { max-width: 100%; overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; color: var(--text); text-align: left; }
.ds-table th,
.ds-table td { padding: var(--space-small) var(--space-medium); border-bottom: var(--border-width) solid var(--line); vertical-align: top; }
.ds-table th { color: var(--muted); font-size: var(--type-caption); font-weight: var(--type-caption-weight); }
.ds-table td { font-size: var(--type-body); }

.account-details { display: grid; gap: 0; margin: 0; }
.account-details > div { display: grid; grid-template-columns: minmax(84px, .35fr) minmax(0, 1fr); gap: var(--space-medium); align-items: center; padding-block: var(--space-small); }
.account-details > div:not(:last-child) { border-bottom: var(--border-width) solid var(--line); }
.account-details > div:first-child { padding-top: 0; }
.account-details dt { color: var(--muted); }
.account-details dd { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-medium); margin: 0; overflow-wrap: anywhere; }
.account-details dd > span:first-child { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 390px) {
  .account-details > div { grid-template-columns: 1fr; gap: var(--space-small); justify-items: center; text-align: center; }
  .account-details dd { align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }
}

.ds-metric {
  min-width: 0;
  padding: var(--space-medium);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.ds-metric-label { display: block; color: var(--muted); font-size: var(--type-caption); line-height: var(--type-caption-leading); }
.ds-metric-value { display: block; margin-top: var(--space-small); color: var(--accent); font-size: var(--type-h3); font-weight: var(--type-h3-weight); line-height: var(--type-h3-leading); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.ds-disclosure { border-bottom: var(--border-width) solid var(--line); }
.ds-disclosure > summary { padding-block: var(--space-medium); color: var(--text); font-size: var(--type-body); cursor: pointer; }
.ds-disclosure > :not(summary) { margin-block: 0 var(--space-medium); color: var(--muted); }

.ds-sidebar { display: grid; gap: var(--space-small); align-content: start; }
.ds-sidebar-link { display: flex; min-height: var(--size-target); align-items: center; margin: 0; padding: var(--space-small) var(--space-medium); border: 0; border-radius: var(--radius-card); appearance: none; background: transparent; color: var(--muted); font: inherit; font-size: var(--type-body); text-align: left; text-decoration: none; cursor: pointer; }
.ds-sidebar-link:not(:disabled):not([aria-disabled="true"]):not(.button-disabled):hover,
.ds-sidebar-link.is-active:not(:disabled):not([aria-disabled="true"]):not(.button-disabled) { background: var(--color-action-hover-surface); color: var(--accent); }
.ds-sidebar-link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }

.ds-chart { display: block; width: 100%; max-width: 100%; overflow: visible; color: var(--muted); }
.ds-chart-grid { stroke: var(--line); stroke-width: var(--border-width); }
.ds-chart-label { fill: var(--muted); font: var(--type-caption) var(--font-family-ui); }
.ds-chart-series { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-chart-area { fill: var(--color-action-tint); stroke: none; }

.ds-empty-state { padding: var(--space-big); border: var(--border-width) dashed var(--line-strong); border-radius: var(--radius-card); background: var(--color-info-background); color: var(--muted); text-align: center; }

.ds-quota-empty,
.usage-empty {
  --quota-empty-blur: 7px;
  --quota-empty-preview-opacity: .58;
  position: relative;
  display: flex;
  min-height: 188px;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.ds-quota-empty-preview,
.usage-empty-preview {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: space-between;
  gap: var(--space-medium);
  padding: var(--space-medium) 0;
  filter: blur(var(--quota-empty-blur));
  opacity: var(--quota-empty-preview-opacity);
  pointer-events: none;
  user-select: none;
}

.ds-quota-empty-row,
.usage-empty-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-medium); }
.ds-quota-empty-row span,
.usage-empty-row span { display: block; height: var(--space-medium); border-radius: var(--radius-input); background: var(--line-strong); }
.ds-quota-empty-row span:first-child,
.usage-empty-row span:first-child { width: 42%; }
.ds-quota-empty-row span:last-child,
.usage-empty-row span:last-child { width: 28%; }
.ds-quota-empty-meter,
.usage-empty-meter { height: var(--height-progress); border-radius: var(--radius-pill); background: var(--color-line-panel); }
.ds-quota-empty-meter span,
.usage-empty-meter span { display: block; width: 57%; height: 100%; border-radius: inherit; background: var(--color-action-badge); }
.ds-quota-empty-overlay,
.usage-empty-overlay { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-small); padding: var(--space-medium); background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 66%, transparent), color-mix(in srgb, var(--surface) 82%, transparent)); text-align: center; }
.ds-quota-empty-overlay .ds-status,
.ds-quota-empty-overlay .card-status,
.usage-empty-overlay .ds-status,
.usage-empty-overlay .card-status { max-width: 18rem; margin: 0; }

.ds-dialog {
  width: min(var(--width-content), calc(100% - var(--gutter-dialog)));
  max-width: var(--width-content);
  max-height: min(86vh, 760px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  background: transparent;
  color: var(--text);
}

.ds-dialog::backdrop { background: var(--color-modal-scrim); }
.ds-dialog-panel { padding: var(--space-big); border: var(--border-width) solid var(--line-strong); border-radius: var(--radius-panel); background: var(--surface-strong); box-shadow: var(--shadow-dialog); }

/* Visual type roles; semantic heading elements remain chosen by each page. */
.ds-type-h1 { font-size: var(--type-h1); font-weight: var(--type-h1-weight); line-height: var(--type-h1-leading); letter-spacing: var(--type-h1-tracking); }
.ds-type-h2 { font-size: var(--type-h2); font-weight: var(--type-h2-weight); line-height: var(--type-h2-leading); letter-spacing: var(--type-h2-tracking); }
.ds-type-h3 { font-size: var(--type-h3); font-weight: var(--type-h3-weight); line-height: var(--type-h3-leading); letter-spacing: var(--type-h3-tracking); }
.ds-type-heading { font-size: var(--type-heading); font-weight: var(--type-heading-weight); line-height: var(--type-heading-leading); letter-spacing: var(--type-heading-tracking); }
.ds-type-subheading { font-size: var(--type-subheading); font-weight: var(--type-subheading-weight); line-height: var(--type-subheading-leading); letter-spacing: var(--type-subheading-tracking); }
.ds-type-body { font-size: var(--type-body); font-weight: var(--type-body-weight); line-height: var(--type-body-leading); letter-spacing: var(--type-body-tracking); }
.ds-type-caption { font-size: var(--type-caption); font-weight: var(--type-caption-weight); line-height: var(--type-caption-leading); letter-spacing: var(--type-caption-tracking); }

/* Native-radio carousel. Each instance owns its radio group and generated ids;
   the ordinal selectors keep the recipe reusable and work without JavaScript. */
.ds-carousel {
  position: relative;
  width: min(calc(100% - var(--space-big)), var(--width-page));
  margin: calc(var(--space-big) + var(--space-small)) auto 0;
}

.ds-carousel-radio {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.ds-carousel-window { overflow: hidden; border-radius: var(--radius-panel); }
.ds-carousel-track { display: flex; margin: 0; padding: 0; list-style: none; transition: transform var(--transition-duration) var(--transition-easing); }
.ds-carousel-slide { display: flex; flex: 0 0 100%; flex-direction: column; min-width: 0; overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-panel); background: var(--surface); visibility: hidden; transition: visibility 0s linear var(--transition-duration); }
.ds-carousel-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: var(--space-small); padding: var(--space-big); }
.ds-carousel-copy h3, .ds-carousel-copy p { margin: 0; }
.ds-carousel-copy p { max-width: var(--width-copy); color: var(--muted); }
.ds-carousel--text .ds-carousel-copy { width: min(100%, var(--width-copy)); margin-inline: auto; }
.ds-carousel--text .ds-carousel-copy a { color: var(--accent); }
.ds-carousel-controls { display: grid; width: min(100%, var(--width-content)); grid-template-columns: var(--size-target) minmax(0, 1fr) var(--size-target); align-items: center; gap: var(--space-small); margin: var(--space-medium) auto 0; }
.ds-carousel-arrows { display: contents; }
.ds-carousel-arrow { display: none; width: var(--size-target); height: var(--size-target); flex: none; place-items: center; border: var(--border-width) solid var(--color-action-outline); border-radius: var(--radius-circle); background: transparent; color: var(--accent); font-size: var(--type-h3); line-height: 1; cursor: pointer; transition: background var(--transition-duration) var(--transition-easing), border-color var(--transition-duration) var(--transition-easing), transform var(--transition-duration) var(--transition-easing); }
.ds-carousel-prev { grid-column: 1; grid-row: 1; }
.ds-carousel-next { grid-column: 3; grid-row: 1; }
.ds-carousel-arrow:hover { border-color: var(--accent); background: var(--color-action-hover-surface); }
.ds-carousel-arrow:active { transform: scale(.94); }
.ds-carousel-arrow.is-off { border-color: var(--line); color: var(--muted); cursor: default; }
.ds-carousel-arrow.is-off:hover { border-color: var(--line); background: transparent; }
.ds-carousel-dots { display: flex; min-width: 0; max-width: 100%; flex-wrap: wrap; grid-column: 2; grid-row: 1; justify-content: center; }
.ds-carousel-dot { display: grid; width: var(--size-target); height: var(--size-target); flex: 0 0 var(--size-target); place-items: center; cursor: pointer; }
.ds-carousel-dot::before { width: var(--space-small); height: var(--space-small); border-radius: var(--radius-circle); background: var(--line-strong); transition: background var(--transition-duration) var(--transition-easing), transform var(--transition-duration) var(--transition-easing); content: ""; }
.ds-carousel-dot:hover::before { background: var(--muted); }
.ds-carousel-dot:active::before { transform: scale(.8); }

.ds-carousel-radio:nth-of-type(1):checked ~ .ds-carousel-window .ds-carousel-track { transform: translateX(0%); }
.ds-carousel-radio:nth-of-type(1):checked ~ .ds-carousel-controls .arrow-1 { display: grid; }
.ds-carousel-radio:nth-of-type(1):checked ~ .ds-carousel-controls .dot-1::before { background: var(--accent); transform: scale(1.4); }
.ds-carousel-radio:nth-of-type(1):focus-visible ~ .ds-carousel-controls .dot-1 { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(0px - var(--focus-ring-offset)); border-radius: var(--radius-circle); }
.ds-carousel-radio:nth-of-type(1):checked ~ .ds-carousel-window .ds-carousel-track .ds-carousel-slide:nth-child(1) { visibility: visible; transition-delay: 0s; }
.ds-carousel-radio:nth-of-type(2):checked ~ .ds-carousel-window .ds-carousel-track { transform: translateX(-100%); }
.ds-carousel-radio:nth-of-type(2):checked ~ .ds-carousel-controls .arrow-2 { display: grid; }
.ds-carousel-radio:nth-of-type(2):checked ~ .ds-carousel-controls .dot-2::before { background: var(--accent); transform: scale(1.4); }
.ds-carousel-radio:nth-of-type(2):focus-visible ~ .ds-carousel-controls .dot-2 { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(0px - var(--focus-ring-offset)); border-radius: var(--radius-circle); }
.ds-carousel-radio:nth-of-type(2):checked ~ .ds-carousel-window .ds-carousel-track .ds-carousel-slide:nth-child(2) { visibility: visible; transition-delay: 0s; }
.ds-carousel-radio:nth-of-type(3):checked ~ .ds-carousel-window .ds-carousel-track { transform: translateX(-200%); }
.ds-carousel-radio:nth-of-type(3):checked ~ .ds-carousel-controls .arrow-3 { display: grid; }
.ds-carousel-radio:nth-of-type(3):checked ~ .ds-carousel-controls .dot-3::before { background: var(--accent); transform: scale(1.4); }
.ds-carousel-radio:nth-of-type(3):focus-visible ~ .ds-carousel-controls .dot-3 { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(0px - var(--focus-ring-offset)); border-radius: var(--radius-circle); }
.ds-carousel-radio:nth-of-type(3):checked ~ .ds-carousel-window .ds-carousel-track .ds-carousel-slide:nth-child(3) { visibility: visible; transition-delay: 0s; }
.ds-carousel-radio:nth-of-type(4):checked ~ .ds-carousel-window .ds-carousel-track { transform: translateX(-300%); }
.ds-carousel-radio:nth-of-type(4):checked ~ .ds-carousel-controls .arrow-4 { display: grid; }
.ds-carousel-radio:nth-of-type(4):checked ~ .ds-carousel-controls .dot-4::before { background: var(--accent); transform: scale(1.4); }
.ds-carousel-radio:nth-of-type(4):focus-visible ~ .ds-carousel-controls .dot-4 { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(0px - var(--focus-ring-offset)); border-radius: var(--radius-circle); }
.ds-carousel-radio:nth-of-type(4):checked ~ .ds-carousel-window .ds-carousel-track .ds-carousel-slide:nth-child(4) { visibility: visible; transition-delay: 0s; }
.ds-carousel-radio:nth-of-type(5):checked ~ .ds-carousel-window .ds-carousel-track { transform: translateX(-400%); }
.ds-carousel-radio:nth-of-type(5):checked ~ .ds-carousel-controls .arrow-5 { display: grid; }
.ds-carousel-radio:nth-of-type(5):checked ~ .ds-carousel-controls .dot-5::before { background: var(--accent); transform: scale(1.4); }
.ds-carousel-radio:nth-of-type(5):focus-visible ~ .ds-carousel-controls .dot-5 { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(0px - var(--focus-ring-offset)); border-radius: var(--radius-circle); }
.ds-carousel-radio:nth-of-type(5):checked ~ .ds-carousel-window .ds-carousel-track .ds-carousel-slide:nth-child(5) { visibility: visible; transition-delay: 0s; }
.ds-carousel-radio:nth-of-type(6):checked ~ .ds-carousel-window .ds-carousel-track { transform: translateX(-500%); }
.ds-carousel-radio:nth-of-type(6):checked ~ .ds-carousel-controls .arrow-6 { display: grid; }
.ds-carousel-radio:nth-of-type(6):checked ~ .ds-carousel-controls .dot-6::before { background: var(--accent); transform: scale(1.4); }
.ds-carousel-radio:nth-of-type(6):focus-visible ~ .ds-carousel-controls .dot-6 { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(0px - var(--focus-ring-offset)); border-radius: var(--radius-circle); }
.ds-carousel-radio:nth-of-type(6):checked ~ .ds-carousel-window .ds-carousel-track .ds-carousel-slide:nth-child(6) { visibility: visible; transition-delay: 0s; }
.ds-carousel-radio:nth-of-type(7):checked ~ .ds-carousel-window .ds-carousel-track { transform: translateX(-600%); }
.ds-carousel-radio:nth-of-type(7):checked ~ .ds-carousel-controls .arrow-7 { display: grid; }
.ds-carousel-radio:nth-of-type(7):checked ~ .ds-carousel-controls .dot-7::before { background: var(--accent); transform: scale(1.4); }
.ds-carousel-radio:nth-of-type(7):focus-visible ~ .ds-carousel-controls .dot-7 { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(0px - var(--focus-ring-offset)); border-radius: var(--radius-circle); }
.ds-carousel-radio:nth-of-type(7):checked ~ .ds-carousel-window .ds-carousel-track .ds-carousel-slide:nth-child(7) { visibility: visible; transition-delay: 0s; }
.ds-carousel-radio:nth-of-type(8):checked ~ .ds-carousel-window .ds-carousel-track { transform: translateX(-700%); }
.ds-carousel-radio:nth-of-type(8):checked ~ .ds-carousel-controls .arrow-8 { display: grid; }
.ds-carousel-radio:nth-of-type(8):checked ~ .ds-carousel-controls .dot-8::before { background: var(--accent); transform: scale(1.4); }
.ds-carousel-radio:nth-of-type(8):focus-visible ~ .ds-carousel-controls .dot-8 { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(0px - var(--focus-ring-offset)); border-radius: var(--radius-circle); }
.ds-carousel-radio:nth-of-type(8):checked ~ .ds-carousel-window .ds-carousel-track .ds-carousel-slide:nth-child(8) { visibility: visible; transition-delay: 0s; }
.ds-carousel-radio:nth-of-type(9):checked ~ .ds-carousel-window .ds-carousel-track { transform: translateX(-800%); }
.ds-carousel-radio:nth-of-type(9):checked ~ .ds-carousel-controls .arrow-9 { display: grid; }
.ds-carousel-radio:nth-of-type(9):checked ~ .ds-carousel-controls .dot-9::before { background: var(--accent); transform: scale(1.4); }
.ds-carousel-radio:nth-of-type(9):focus-visible ~ .ds-carousel-controls .dot-9 { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(0px - var(--focus-ring-offset)); border-radius: var(--radius-circle); }
.ds-carousel-radio:nth-of-type(9):checked ~ .ds-carousel-window .ds-carousel-track .ds-carousel-slide:nth-child(9) { visibility: visible; transition-delay: 0s; }
.ds-carousel-radio:nth-of-type(10):checked ~ .ds-carousel-window .ds-carousel-track { transform: translateX(-900%); }
.ds-carousel-radio:nth-of-type(10):checked ~ .ds-carousel-controls .arrow-10 { display: grid; }
.ds-carousel-radio:nth-of-type(10):checked ~ .ds-carousel-controls .dot-10::before { background: var(--accent); transform: scale(1.4); }
.ds-carousel-radio:nth-of-type(10):focus-visible ~ .ds-carousel-controls .dot-10 { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(0px - var(--focus-ring-offset)); border-radius: var(--radius-circle); }
.ds-carousel-radio:nth-of-type(10):checked ~ .ds-carousel-window .ds-carousel-track .ds-carousel-slide:nth-child(10) { visibility: visible; transition-delay: 0s; }
.ds-carousel-radio:nth-of-type(11):checked ~ .ds-carousel-window .ds-carousel-track { transform: translateX(-1000%); }
.ds-carousel-radio:nth-of-type(11):checked ~ .ds-carousel-controls .arrow-11 { display: grid; }
.ds-carousel-radio:nth-of-type(11):checked ~ .ds-carousel-controls .dot-11::before { background: var(--accent); transform: scale(1.4); }
.ds-carousel-radio:nth-of-type(11):focus-visible ~ .ds-carousel-controls .dot-11 { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(0px - var(--focus-ring-offset)); border-radius: var(--radius-circle); }
.ds-carousel-radio:nth-of-type(11):checked ~ .ds-carousel-window .ds-carousel-track .ds-carousel-slide:nth-child(11) { visibility: visible; transition-delay: 0s; }
.ds-carousel-radio:nth-of-type(12):checked ~ .ds-carousel-window .ds-carousel-track { transform: translateX(-1100%); }
.ds-carousel-radio:nth-of-type(12):checked ~ .ds-carousel-controls .arrow-12 { display: grid; }
.ds-carousel-radio:nth-of-type(12):checked ~ .ds-carousel-controls .dot-12::before { background: var(--accent); transform: scale(1.4); }
.ds-carousel-radio:nth-of-type(12):focus-visible ~ .ds-carousel-controls .dot-12 { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(0px - var(--focus-ring-offset)); border-radius: var(--radius-circle); }
.ds-carousel-radio:nth-of-type(12):checked ~ .ds-carousel-window .ds-carousel-track .ds-carousel-slide:nth-child(12) { visibility: visible; transition-delay: 0s; }

@media (max-width: 760px) {
  .ds-carousel { margin-top: var(--space-big); }
  .ds-carousel-copy { padding: var(--space-medium); }
}

@media (min-width: 861px) {
  .ds-carousel--text .ds-carousel-slide { min-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-button,
  .button,
  .ds-carousel-track,
  .ds-carousel-slide,
  .ds-carousel-arrow,
  .ds-carousel-dot::before { transition: none; }
}