:root {
  --ds-ink-950:#0B1220; --ds-neutral-50:#F6F7FB; --ds-white:#FFFFFF;
  --ds-violet-600:#5B4BDB; --ds-violet-50:#EEECFF; --ds-teal-700:#0F766E;
  --ds-green-700:#15803D; --ds-amber-700:#B45309; --ds-red-700:#C2413B;
  --ds-neutral-200:#D8DEE9; --ds-neutral-600:#526071; --ds-neutral-900:#111827; --ds-neutral-800:#1D2939;
  --ds-violet-300:#BDB5FF; --ds-teal-300:#5EEAD4; --ds-green-300:#86EFAC; --ds-amber-300:#FCD34D; --ds-red-300:#FDA4AF; --ds-neutral-400:#94A3B8;
  --ds-space-1:4px; --ds-space-2:8px; --ds-space-3:12px; --ds-space-4:16px; --ds-space-6:24px; --ds-space-8:32px; --ds-space-12:48px; --ds-space-16:64px;
  --ds-radius-1:8px; --ds-radius-2:12px; --ds-radius-3:16px; --ds-radius-4:24px;
  --ds-shadow-base:none; --ds-shadow-raised:0 8px 24px #0b12200a; --ds-shadow-overlay:0 20px 48px #0b12201a;
  --ds-font-heading:Manrope,system-ui,sans-serif; --ds-font-body:Inter,system-ui,sans-serif;
}
:root, [data-theme="light"] {
  color-scheme:light;
  --ds-surface-canvas:var(--ds-neutral-50); --ds-surface-default:var(--ds-white); --ds-surface-raised:var(--ds-white);
  --ds-text-primary:var(--ds-ink-950); --ds-text-secondary:var(--ds-neutral-600); --ds-border-default:var(--ds-neutral-200); --ds-border-control:var(--ds-neutral-600);
  --ds-action-primary:var(--ds-violet-600); --ds-action-text:var(--ds-white); --ds-action-soft:var(--ds-violet-50); --ds-focus-ring:var(--ds-violet-600);
  --ds-status-success:var(--ds-green-700); --ds-status-warning:var(--ds-amber-700); --ds-status-critical:var(--ds-red-700); --ds-accent:var(--ds-teal-700);
}
[data-theme="dark"], .ds-dark {
  color-scheme:dark;
  --ds-surface-canvas:var(--ds-ink-950); --ds-surface-default:var(--ds-neutral-900); --ds-surface-raised:var(--ds-neutral-800);
  --ds-text-primary:var(--ds-neutral-50); --ds-text-secondary:var(--ds-neutral-200); --ds-border-default:var(--ds-neutral-600); --ds-border-control:var(--ds-neutral-400);
  --ds-action-primary:var(--ds-violet-300); --ds-action-text:var(--ds-ink-950); --ds-action-soft:var(--ds-neutral-800); --ds-focus-ring:var(--ds-violet-300);
  --ds-status-success:var(--ds-green-300); --ds-status-warning:var(--ds-amber-300); --ds-status-critical:var(--ds-red-300); --ds-accent:var(--ds-teal-300);
}
/* Component aliases are resolved locally, so nested theme previews inherit roles. */
body, .ds-dark, [data-theme] {
  --ds-button-primary-background:var(--ds-action-primary); --ds-button-primary-text:var(--ds-action-text);
  --ds-card-background:var(--ds-surface-default); --ds-label-color:var(--ds-text-secondary); --ds-input-border:var(--ds-border-control);
  --ds-badge-success-text:var(--ds-status-success); --ds-alert-warning-text:var(--ds-status-warning); --ds-input-error-text:var(--ds-status-critical); --ds-control-focus:var(--ds-focus-ring);
}
* {box-sizing:border-box} html {scroll-behavior:smooth;scroll-padding-top:120px}
body {margin:0;background:var(--ds-surface-canvas);color:var(--ds-text-primary);font:400 16px/1.625 var(--ds-font-body);overflow-wrap:anywhere}
h1,h2,h3,p,figure {margin:0} h1,h2,h3 {font-family:var(--ds-font-heading);font-weight:700;line-height:1.2;letter-spacing:-.035em}
h1 {font-size:clamp(44px,4.9vw,68px);max-width:17ch} h2 {font-size:clamp(30px,3.3vw,44px);max-width:23ch} h3 {font-size:clamp(20px,2vw,24px)}
p+p {margin-top:var(--ds-space-4)} a {color:inherit;text-underline-offset:4px} button,input,select {font:inherit} button,a,input,select {touch-action:manipulation}
button {cursor:pointer} :focus-visible,.ds-state-focus {outline:3px solid var(--ds-control-focus);outline-offset:4px}
[hidden] {display:none!important} .ds-container {width:min(1180px,calc(100% - 64px));margin-inline:auto}
.ds-section {padding-block:88px} .ds-section:nth-of-type(even):not(.ds-dark) {background:var(--ds-surface-default)}
.ds-dark {background:var(--ds-surface-canvas);color:var(--ds-text-primary)} .ds-eyebrow {font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-accent);margin-bottom:var(--ds-space-4)}
.ds-intro {max-width:760px;margin:var(--ds-space-6) 0 var(--ds-space-8);color:var(--ds-text-secondary);font-size:18px;line-height:30px}
.ds-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-8)} .ds-grid>* {min-width:0}
.ds-three {grid-template-columns:repeat(3,minmax(0,1fr))} .ds-four {grid-template-columns:repeat(4,minmax(0,1fr))}
.ds-stack {display:grid;gap:var(--ds-space-6)} .ds-muted {color:var(--ds-text-secondary)} .ds-small {font-size:14px;line-height:20px} .ds-caption {font-size:12px;line-height:18px}
.ds-header {position:sticky;top:0;z-index:20;background:var(--ds-surface-default);border-bottom:1px solid var(--ds-border-default)}
.ds-nav {min-height:76px;display:flex;justify-content:space-between;align-items:center;gap:var(--ds-space-6)} .ds-nav nav {display:flex;align-items:center;gap:var(--ds-space-6);font-size:14px} .ds-brand {font-weight:600;text-decoration:none}
.ds-skip {position:fixed;top:12px;left:12px;z-index:30;padding:12px;background:var(--ds-surface-default);transform:translateY(-200%)} .ds-skip:focus {transform:none}
.ds-hero {padding-block:72px;background:var(--ds-surface-default)} .ds-hero-grid {grid-template-columns:1.08fr 1fr;align-items:center;gap:48px}
.ds-meta {margin:32px 0 0;font-size:14px} .ds-meta div {display:grid;grid-template-columns:80px 1fr;gap:12px;border-top:1px solid var(--ds-border-default);padding:10px 0} .ds-meta dt {color:var(--ds-text-secondary)} .ds-meta dd {margin:0}
.ds-board {padding:32px;border:1px solid var(--ds-border-default);border-radius:var(--ds-radius-4);background:var(--ds-surface-canvas);background-image:radial-gradient(var(--ds-border-default) 1px,transparent 1px);background-size:20px 20px}
.ds-board-header {display:flex;justify-content:space-between;gap:16px;margin-bottom:24px;font-size:12px;letter-spacing:.1em}
.ds-card,.ds-panel {padding:var(--ds-space-6);border:1px solid var(--ds-border-default);border-radius:var(--ds-radius-3);background:var(--ds-card-background);color:var(--ds-text-primary);box-shadow:var(--ds-shadow-raised)}
.ds-card h3,.ds-panel h3 {margin-bottom:16px} .ds-card p {color:var(--ds-text-secondary)} .ds-card .ds-number {color:var(--ds-text-primary)}
.ds-hero-card {margin-bottom:16px} .ds-hero-card:last-child {margin:0} .ds-hero-card:nth-child(3) {margin-left:32px} .ds-hero-card:nth-child(4) {margin-right:24px}
.ds-row {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px} .ds-actions {display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.ds-number {font:700 40px/1.2 var(--ds-font-heading);letter-spacing:-.04em}.ds-stat {padding-block:24px;border-top:2px solid var(--ds-accent)} .ds-stat strong {display:block;font:700 40px/1.2 var(--ds-font-heading)}
.ds-button {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ds-control-height,48px);padding:10px 18px;border:1px solid transparent;border-radius:var(--ds-radius-1);background:var(--ds-button-primary-background);color:var(--ds-button-primary-text);font-size:14px;line-height:20px;font-weight:600;text-decoration:none}
.ds-secondary {background:var(--ds-surface-default);color:var(--ds-text-primary);border-color:var(--ds-border-control)}
.ds-button:hover:not(:disabled),.ds-state-hover {box-shadow:inset 0 0 0 100px #00000016;text-decoration:underline;text-underline-offset:3px}
.ds-button:active:not(:disabled),.ds-state-active {box-shadow:inset 0 3px 0 #00000050,inset 0 0 0 100px #00000025}
.ds-button:disabled {cursor:not-allowed;opacity:.45;border-style:dashed}
.ds-field {display:grid;gap:8px;font-size:14px;font-weight:600;color:var(--ds-text-primary)} .ds-input,.ds-select {min-width:0;width:100%;min-height:var(--ds-control-height,48px);padding:10px 12px;border:1px solid var(--ds-input-border);border-radius:var(--ds-radius-1);background:var(--ds-surface-default);color:var(--ds-text-primary)}
.ds-input,.ds-select {line-height:20px}
.ds-input:hover,.ds-select:hover {box-shadow:inset 0 0 0 1px var(--ds-input-border)} .ds-input:active,.ds-select:active {box-shadow:inset 0 2px 3px #00000020}
.ds-input[aria-invalid="true"] {border:2px solid var(--ds-input-error-text)} .ds-error {color:var(--ds-input-error-text);font-size:14px;margin-top:8px}
.ds-check {display:flex;gap:12px;align-items:center;min-height:44px;font-size:14px} .ds-check input {width:20px;height:20px;accent-color:var(--ds-action-primary);flex:none}
.ds-badge {display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid currentColor;border-radius:24px;font-size:12px;font-weight:600;color:var(--ds-badge-success-text);white-space:nowrap} .ds-warning {color:var(--ds-alert-warning-text)}
.ds-alert {padding:16px;border:1px solid currentColor;border-left-width:4px;border-radius:var(--ds-radius-1);color:var(--ds-alert-warning-text);font-size:14px}
.ds-data-row {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:var(--ds-item-padding,20px) 0;border-bottom:1px solid var(--ds-border-default);font-size:14px} .ds-data-row:last-child {border-bottom:0}
.ds-demo {--ds-control-height:48px;--ds-item-padding:20px;--ds-demo-gap:24px} [data-density="compact"] .ds-demo {--ds-control-height:44px;--ds-item-padding:12px;--ds-demo-gap:16px} .ds-demo .ds-stack {gap:var(--ds-demo-gap)}
.ds-diagram {display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;margin-top:32px} .ds-fragments {display:flex;flex-wrap:wrap;gap:12px;padding:24px;border:1px dashed var(--ds-border-default);border-radius:24px} .ds-fragments span {padding:12px;border:1px solid var(--ds-border-default);border-radius:8px} .ds-fragments span:nth-child(2) {border-radius:24px;transform:rotate(-5deg)} .ds-fragments span:nth-child(3) {transform:rotate(4deg)}
.ds-principle {padding-top:24px;border-top:1px solid var(--ds-border-default)} .ds-principle h3 {margin:16px 0}.ds-index {color:var(--ds-accent);font-size:14px}
.ds-swatches {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:32px} .ds-swatch {height:96px;border-radius:12px;margin-bottom:12px;border:1px solid var(--ds-border-default)}
.ds-violet {background:var(--ds-violet-600)} .ds-teal {background:var(--ds-teal-700)} .ds-ink {background:var(--ds-ink-950)} .ds-green {background:var(--ds-green-700)} .ds-amber {background:var(--ds-amber-700)} .ds-red {background:var(--ds-red-700)}
code {font-size:12px;overflow-wrap:anywhere} .ds-token-chain {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:32px} .ds-token-chain>div {padding:24px;border:1px solid var(--ds-border-default);border-radius:12px}.ds-token-chain code {display:block;margin-top:12px;color:var(--ds-accent);font-size:16px}
.ds-table {width:100%;border-collapse:collapse;text-align:left;font-size:14px;table-layout:fixed} .ds-table caption {text-align:left;margin-bottom:16px;font-weight:600}.ds-table th,.ds-table td {padding:16px 12px;border-bottom:1px solid var(--ds-border-default);vertical-align:top}.ds-table th {color:var(--ds-text-primary)}.ds-table td {color:var(--ds-text-secondary)}
.ds-type-row {display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--ds-border-default)} .ds-type-row small {font:12px/18px var(--ds-font-body);color:var(--ds-text-secondary);text-align:right;flex:none}
.ds-type-display {font:700 64px/68px var(--ds-font-heading)} .ds-type-h1 {font:700 48px/56px var(--ds-font-heading)} .ds-type-h2 {font:700 36px/44px var(--ds-font-heading)} .ds-type-h3 {font:700 24px/32px var(--ds-font-heading)} .ds-type-large {font:400 18px/30px var(--ds-font-body)} .ds-type-body {font:400 16px/26px var(--ds-font-body)} .ds-type-label {font:600 14px/20px var(--ds-font-body)} .ds-type-caption {font:400 12px/18px var(--ds-font-body)}
.ds-space-row {display:flex;align-items:center;gap:16px;min-height:40px;font-size:12px}.ds-space-row span {width:40px}.ds-space-row i {display:block;height:12px;background:var(--ds-action-primary);border-radius:4px;width:var(--ds-size)}
.ds-space-4 {--ds-size:4px}.ds-space-8 {--ds-size:8px}.ds-space-12 {--ds-size:12px}.ds-space-16 {--ds-size:16px}.ds-space-24 {--ds-size:24px}.ds-space-32 {--ds-size:32px}.ds-space-48 {--ds-size:48px}.ds-space-64 {--ds-size:64px}
.ds-radius-grid {display:flex;flex-wrap:wrap;gap:16px;margin:24px 0}.ds-radius-grid span {padding:16px;border:1px solid var(--ds-border-control);border-radius:var(--ds-radius-1);font-size:12px}.ds-radius-grid span:nth-child(2) {border-radius:12px}.ds-radius-grid span:nth-child(3) {border-radius:16px}.ds-radius-grid span:nth-child(4) {border-radius:24px}
.ds-elevations {display:flex;gap:12px;flex-wrap:wrap}.ds-elevations span {padding:12px;background:var(--ds-surface-raised);border:1px solid var(--ds-border-default);border-radius:8px;font-size:12px}.ds-elevations span:nth-child(2) {box-shadow:var(--ds-shadow-raised)}.ds-elevations span:nth-child(3) {box-shadow:var(--ds-shadow-overlay)}
.ds-theme-preview {padding:32px;background:var(--ds-surface-canvas);border:1px solid var(--ds-border-default);border-radius:24px;color:var(--ds-text-primary)} .ds-theme-preview>p {margin-bottom:16px}
.ds-toolbar {display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:24px 0 32px}.ds-segment {display:flex;flex-wrap:wrap;gap:8px;padding:8px;border:1px solid var(--ds-border-default);border-radius:12px;background:var(--ds-surface-default)}.ds-segment .ds-button[aria-pressed="false"],.ds-tab[aria-selected="false"] {background:var(--ds-surface-default);color:var(--ds-text-primary)}
.ds-component {display:flex;flex-direction:column;gap:24px;justify-content:space-between}.ds-component h3 {font-size:20px;margin:0}.ds-component .ds-caption {color:var(--ds-text-secondary);border-top:1px solid var(--ds-border-default);padding-top:16px}
.ds-state {display:flex;flex-direction:column;gap:16px;padding:24px;border:1px solid var(--ds-border-default);border-radius:16px}.ds-state strong {font-size:14px}.ds-state .ds-button {align-self:start}
.ds-checklist {list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}.ds-checklist li {border-bottom:1px solid var(--ds-border-default);padding:16px 0}.ds-checklist li::before {content:'✓';color:var(--ds-accent);margin-right:12px;font-weight:600}
.ds-workspace {padding:32px;border:1px solid var(--ds-border-default);border-radius:24px;background:var(--ds-surface-canvas)} .ds-workspace-header {margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--ds-border-default)} .ds-workspace h3 {margin:0}.ds-workspace form {max-width:720px}.ds-workspace .ds-grid {gap:var(--ds-demo-gap)}
.ds-feedback {min-height:26px;margin-top:16px;font-size:14px;color:var(--ds-accent)} .ds-doc h3 {font-size:20px}.ds-doc p {font-size:14px}.ds-measure {padding:20px 0;border-top:1px solid var(--ds-border-default)} .ds-measure strong {display:block;margin-bottom:8px}.ds-measure p {font-size:14px;color:var(--ds-text-secondary)}
.ds-grid.ds-intro {max-width:none}
.ds-reflection {font-size:18px;line-height:30px}.ds-next {margin:0;padding-left:20px}.ds-next li {margin-bottom:12px}.ds-cta h2 {max-width:24ch}.ds-cta .ds-actions {margin-top:32px}.ds-footer {padding:32px 0;border-top:1px solid var(--ds-border-default);font-size:14px}
@media(max-width:1050px) {.ds-hero-grid {grid-template-columns:1fr}.ds-hero h1 {max-width:20ch}.ds-board {max-width:760px;width:100%;margin:auto}.ds-four {grid-template-columns:repeat(2,minmax(0,1fr))}.ds-three {grid-template-columns:repeat(2,minmax(0,1fr))}.ds-section {padding-block:68px}}
@media(max-width:780px) {.ds-grid:not(.ds-four),.ds-token-chain {grid-template-columns:1fr}.ds-container {width:calc(100% - 48px)}.ds-swatches {grid-template-columns:repeat(3,minmax(0,1fr))}.ds-nav {padding-block:12px;gap:16px}.ds-nav nav {gap:8px;align-items:flex-end;flex-direction:column}.ds-nav .ds-button {padding:8px 12px}.ds-diagram {grid-template-columns:1fr}.ds-diagram>span {text-align:center;transform:rotate(90deg)}.ds-checklist {grid-template-columns:1fr}.ds-hero {padding-block:56px}.ds-token-chain {gap:12px}}
@media(max-width:480px) {.ds-container {width:calc(100% - 32px)}.ds-section {padding-block:52px}.ds-hero {padding-block:48px}.ds-board,.ds-workspace,.ds-theme-preview {padding:20px}.ds-hero-card:nth-child(3),.ds-hero-card:nth-child(4) {margin-inline:0}.ds-grid {gap:24px}.ds-four {grid-template-columns:1fr}.ds-stats {grid-template-columns:repeat(2,minmax(0,1fr))}.ds-panel,.ds-card {padding:20px}.ds-intro {font-size:16px;line-height:26px}.ds-type-row small {max-width:85px}.ds-type-display {font-size:56px}.ds-table,.ds-table tbody,.ds-table tr,.ds-table td,.ds-table th {display:block;width:100%}.ds-table thead {display:none}.ds-table tr {padding:12px 0;border-bottom:1px solid var(--ds-border-default)}.ds-table td,.ds-table th {padding:6px 0;border:0}.ds-table td::before {content:attr(data-label) ': ';font-weight:600;color:var(--ds-text-primary)}.ds-table caption {display:block}.ds-meta div {grid-template-columns:70px 1fr}.ds-nav {font-size:14px}.ds-nav nav {font-size:12px}.ds-nav .ds-button {font-size:12px}.ds-data-row {gap:8px}}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}*,*::before,*::after {animation:none!important;transition:none!important}}