.ds-body{font-family:var(--font);background:var(--color-bg);color:var(--color-text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}.ds-container{max-width:1200px;padding:var(--space-7) var(--container);margin:0 auto}.ds-header{gap:var(--space-6);margin-bottom:var(--space-10);padding-bottom:var(--space-7);border-bottom:1px solid var(--color-border);flex-direction:column;display:flex}.ds-back{align-items:center;gap:var(--space-2);font-family:var(--mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-muted);width:fit-content;transition:color var(--duration-fast) var(--ease-out);display:inline-flex}.ds-back:hover{color:var(--color-text-strong)}.ds-back svg{width:14px;height:14px}.ds-title-block{max-width:48rem}.ds-eyebrow{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.4em;color:var(--color-brand);margin-bottom:var(--space-4)}.ds-title{font-size:var(--text-3xl);letter-spacing:-.03em;color:var(--color-text-strong);margin-bottom:var(--space-4);font-weight:300;line-height:1.05}.ds-lede{font-size:var(--text-base);color:var(--color-text-secondary);margin-bottom:var(--space-5)}.ds-lede code,.ds-section-lede code{font-family:var(--mono);color:var(--color-text-strong);background:var(--color-fg-6);border-radius:var(--radius-sm);padding:.1em .45em;font-size:.9em}.ds-chips{gap:var(--space-2);flex-wrap:wrap;display:flex}.ds-chip{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;padding:var(--space-1) var(--space-3);border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);color:var(--color-text-muted)}.ds-section{margin-bottom:var(--space-10)}.ds-section-title{font-size:var(--text-xl);color:var(--color-text-strong);margin-bottom:var(--space-2);letter-spacing:-.015em;align-items:baseline;gap:var(--space-3);font-weight:500;display:flex}.ds-section-num{font-family:var(--mono);font-size:var(--text-xs);color:var(--color-brand);letter-spacing:.25em}.ds-section-lede{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-6);max-width:60ch}.ds-color-grid{gap:var(--space-1);margin-bottom:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}.ds-color-grid-accent{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.ds-swatch{aspect-ratio:1;border-radius:var(--radius-md);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out);outline:1px solid var(--color-border);position:relative;overflow:hidden}.ds-swatch:hover{transform:translateY(-2px)}.ds-swatch-label{bottom:var(--space-2);left:var(--space-2);right:var(--space-2);font-family:var(--mono);letter-spacing:.06em;color:var(--color-text-strong);background:var(--color-surface-floating);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);justify-content:space-between;gap:var(--space-2);backdrop-filter:blur(6px);font-size:.62rem;display:flex;position:absolute}.ds-swatch-label code{color:var(--color-text-muted);font-size:.55rem}.ds-semantic-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.ds-semantic-card{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);cursor:pointer;transition:border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out)}.ds-semantic-card:hover{border-color:var(--color-border-strong);transform:translateY(-2px)}.ds-semantic-sample{border-radius:var(--radius-sm);width:100%;height:48px;margin-bottom:var(--space-3)}.ds-semantic-meta{flex-direction:column;gap:.25rem;display:flex}.ds-semantic-meta span{font-family:var(--mono);font-size:var(--text-xs);color:var(--color-text-strong);letter-spacing:.02em;word-break:break-all}.ds-semantic-meta code{font-family:var(--mono);color:var(--color-text-muted);letter-spacing:.04em;font-size:.6rem}.ds-fg-grid{gap:var(--space-2);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-fg-4);border:1px solid var(--color-border);grid-template-columns:repeat(auto-fill,minmax(90px,1fr));display:grid}.ds-fg-card{gap:var(--space-1);cursor:pointer;flex-direction:column;display:flex}.ds-fg-sample{border-radius:var(--radius-sm);outline:1px solid var(--color-border);width:100%;height:48px}.ds-fg-card span{font-family:var(--mono);color:var(--color-text-muted);text-align:center;font-size:.6rem}.ds-type-stack{gap:var(--space-4);flex-direction:column;display:flex}.ds-type-row{gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);cursor:pointer;grid-template-columns:1fr auto;align-items:baseline;display:grid}.ds-type-sample{font-family:var(--font);color:var(--color-text-strong);letter-spacing:-.02em;line-height:1.1}.ds-type-sample.ds-mono{font-family:var(--mono)}.ds-type-meta{font-family:var(--mono);color:var(--color-text-muted);text-align:right;flex-direction:column;gap:.2rem;font-size:.65rem;display:flex}.ds-type-meta code{color:var(--color-text-faint);font-size:.58rem}.ds-space-stack{gap:var(--space-1);flex-direction:column;display:flex}.ds-space-row{align-items:center;gap:var(--space-4);padding:var(--space-2) 0;cursor:pointer;font-family:var(--mono);font-size:var(--text-xs);color:var(--color-text-muted);grid-template-columns:140px 80px 1fr;display:grid}.ds-space-bar{background:var(--color-brand);border-radius:var(--radius-pill);height:8px;display:block}.ds-space-row span{color:var(--color-text-primary)}.ds-space-row code{color:var(--color-text-muted)}.ds-radius-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));display:grid}.ds-radius-card{gap:var(--space-2);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--duration-fast);flex-direction:column;display:flex}.ds-radius-card:hover{border-color:var(--color-border-strong)}.ds-radius-sample{background:var(--color-fg-10);outline:1px solid var(--color-border);width:60px;height:60px}.ds-radius-card span{font-family:var(--mono);color:var(--color-text-strong);font-size:.7rem}.ds-radius-card code{font-family:var(--mono);color:var(--color-text-muted);font-size:.6rem}.ds-motion-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.ds-motion-card{gap:var(--space-2);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;flex-direction:column;display:flex;overflow:hidden}.ds-motion-sample{border-radius:var(--radius-pill);background:var(--color-brand);width:12px;height:12px;transition-property:transform;transition-timing-function:var(--ease-out);transition-duration:var(--duration-base)}.ds-motion-card:hover .ds-motion-sample{transform:translate(1200%)}.ds-motion-card span{font-family:var(--mono);color:var(--color-text-strong);font-size:.75rem}.ds-motion-card code{font-family:var(--mono);color:var(--color-text-muted);word-break:break-word;font-size:.58rem}.ds-components{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.ds-component-card{padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.ds-component-label{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-brand);margin-bottom:var(--space-3)}.ds-component-preview{align-items:flex-start;gap:var(--space-3);flex-direction:column;display:flex}.ds-inline-row{flex-flow:wrap;align-items:center}.ds-shadow-row{gap:var(--space-5);flex-flow:wrap}.ds-shadow-card{background:var(--color-surface-elevated);border-radius:var(--radius-md);width:60px;height:60px;padding:var(--space-1);cursor:pointer;justify-content:center;align-items:flex-end;display:flex}.ds-shadow-card code{font-family:var(--mono);color:var(--color-text-muted);font-size:.55rem}.ds-footer{padding-top:var(--space-5);margin-top:var(--space-8);border-top:1px solid var(--color-border);font-family:var(--mono);font-size:var(--text-xs);color:var(--color-text-muted);justify-content:space-between;align-items:center;display:flex}.ds-footer a{align-items:center;gap:var(--space-2);color:var(--color-text-strong);text-decoration:none;display:inline-flex}.ds-footer a:hover{color:var(--color-brand)}.ds-footer svg{width:12px;height:12px}[data-token]{position:relative}[data-token].ds-copied:after{content:"Copied";font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--color-brand);color:var(--color-bg);border-radius:var(--radius-sm);z-index:2;pointer-events:none;padding:.15rem .4rem;font-size:.55rem;animation:1.2s forwards ds-copied-fade;position:absolute;top:0;right:0;transform:translate(50%,-50%)}@keyframes ds-copied-fade{0%{opacity:0;transform:translate(50%,-20%)}20%{opacity:1;transform:translate(50%,-50%)}80%{opacity:1;transform:translate(50%,-50%)}to{opacity:0;transform:translate(50%,-80%)}}.ds-mixer{gap:var(--space-5);padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);grid-template-columns:220px 1fr;grid-template-areas:"preview controls""preview values""preview actions";display:grid}.ds-mixer-preview{aspect-ratio:1;border-radius:var(--radius-md);background:var(--color-brand);transition:background var(--duration-fast) var(--ease-out);box-shadow:var(--shadow-md);grid-area:preview}.ds-mixer-controls{gap:var(--space-3);flex-direction:column;grid-area:controls;display:flex}.ds-mixer-controls label{align-items:center;gap:var(--space-3);font-family:var(--mono);font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;grid-template-columns:80px 1fr 56px;display:grid}.ds-mixer-controls output{font-family:var(--mono);font-size:var(--text-xs);color:var(--color-text-strong);text-align:right}.ds-mixer-values{font-family:var(--mono);font-size:var(--text-sm);color:var(--color-text-strong);grid-area:values}.ds-mixer-actions{gap:var(--space-2);flex-wrap:wrap;grid-area:actions;display:flex}input[type=range]{appearance:none;background:var(--color-fg-15);border-radius:var(--radius-pill);cursor:pointer;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--color-brand);cursor:pointer;width:16px;height:16px;transition:transform var(--duration-fast) var(--ease-spring);border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{background:var(--color-brand);cursor:pointer;border:0;border-radius:50%;width:16px;height:16px}input[type=range]:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:4px}.ds-btn{font-family:var(--mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--color-border-strong);color:var(--color-text-primary);cursor:pointer;transition:background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);background:0 0}.ds-btn:hover{background:var(--color-surface-hover);color:var(--color-text-strong)}.ds-btn-primary{background:var(--color-text-strong);color:var(--color-bg);border-color:var(--color-text-strong)}.ds-btn-primary:hover{background:color-mix(in srgb, var(--color-text-strong) 90%, var(--color-bg));color:var(--color-bg)}.ds-type-tester{gap:var(--space-4);padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);grid-template-columns:1fr;display:grid}.ds-type-tester-preview{min-height:6rem;font-family:var(--font);letter-spacing:-.03em;color:var(--color-text-strong);padding:var(--space-4);border:1px dashed var(--color-border);border-radius:var(--radius-md);overflow-wrap:break-word;font-size:4rem;font-weight:300;line-height:1.05}.ds-type-tester-input{width:100%;min-height:3.5rem;padding:var(--space-3);font-family:var(--mono);font-size:var(--text-sm);background:var(--color-bg);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);resize:vertical}.ds-type-tester-input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;border-color:var(--color-border-strong)}.ds-type-tester-controls{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}.ds-type-tester-controls label{align-items:center;gap:var(--space-2);font-family:var(--mono);font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;grid-template-columns:80px 1fr 60px;display:grid}.ds-type-tester-controls output{font-family:var(--mono);font-size:var(--text-xs);color:var(--color-text-strong);text-align:right}.ds-type-tester-controls select{padding:var(--space-2);font-family:var(--mono);font-size:var(--text-xs);background:var(--color-bg);color:var(--color-text-primary);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);cursor:pointer;grid-column:2/span 2}.ds-motion-card{font:inherit;text-align:left;border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;padding:var(--space-4);transition:border-color var(--duration-fast), background var(--duration-fast);color:inherit;background:0 0;overflow:hidden}.ds-motion-card:hover{border-color:var(--color-border-strong);background:var(--color-surface-hover)}.ds-motion-card:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.ds-motion-track{background:var(--color-fg-6);border-radius:var(--radius-pill);height:6px;margin-bottom:var(--space-3);position:relative}.ds-motion-ball{background:var(--color-brand);will-change:transform;border-radius:50%;width:14px;height:14px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.ds-motion-card.playing .ds-motion-ball{transform:translate(1900%,-50%)}.ds-tui-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(320px,1fr));display:grid}.ds-tui-theme{border-radius:var(--radius-lg);padding:var(--space-4);font-family:var(--mono);border:1px solid var(--color-border);overflow:hidden}.ds-tui-theme-head{margin-bottom:var(--space-3);justify-content:space-between;align-items:baseline;display:flex}.ds-tui-theme-name{font-size:var(--text-sm);letter-spacing:.14em;text-transform:uppercase;font-weight:500}.ds-tui-theme-head code{letter-spacing:.08em;font-size:.6rem}.ds-tui-swatches{gap:var(--space-1);grid-template-columns:repeat(3,1fr);display:grid}.ds-tui-swatch{aspect-ratio:1.6;border-radius:var(--radius-sm);padding:var(--space-1);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out);justify-content:flex-start;align-items:flex-end;display:flex;position:relative}.ds-tui-swatch:hover{transform:translateY(-2px)}.ds-tui-swatch code{letter-spacing:.06em;text-transform:uppercase;opacity:.85;font-size:.52rem}@media (width<=700px){.ds-mixer{grid-template-columns:1fr;grid-template-areas:"preview""controls""values""actions"}.ds-mixer-preview{aspect-ratio:2;max-width:100%}.ds-type-tester-preview{font-size:2.5rem}}@media (width<=640px){.ds-container{padding:var(--space-5) var(--space-4)}.ds-title{font-size:var(--text-2xl)}.ds-type-row{grid-template-columns:1fr}.ds-type-meta{text-align:left}.ds-space-row{gap:var(--space-2);grid-template-columns:90px 60px 1fr}.ds-footer{gap:var(--space-3);flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion:reduce){.ds-motion-card:hover .ds-motion-sample{transform:none}[data-token].ds-copied:after{opacity:1;animation:none}}