.ds-page { max-width: 1440px; margin: auto; font-size: 14px; line-height: 1.6; }



.ds-eyebrow { font-size:12px; letter-spacing:.14em; font-weight:600; color:var(--accent); }
.ds-section { padding:24px 0; border-top:1px solid var(--line); }
.ds-section > header { display:flex; gap:16px; margin-bottom:20px; }
.ds-index { font:12px var(--font-code); color:var(--accent); padding-top:5px; }
.ds-section h2 { font-size:18px; font-weight:600; margin:0 0 4px; }
.ds-section header p { margin:0; color:var(--muted); max-width:900px; }
.ds-swatches { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.ds-swatch { min-width:0; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--surface); }
.ds-color { height:64px; border-bottom:1px solid var(--line); }
.ds-swatch > div:last-child { display:flex; flex-direction:column; padding:12px; gap:3px; }
.ds-swatch strong { font-size:13px; font-weight:600; }
.ds-page code { font:12px/1.6 var(--font-code); overflow-wrap:anywhere; }
.ds-swatch small, .ds-token { font-size:12px; color:var(--muted); }
.ds-contrast { display:flex; flex-wrap:wrap; gap:24px; padding:20px 0 0; }
.ds-contrast span { display:flex; flex-direction:column; font-size:12px; }
.ds-contrast strong { font-size:20px; color:var(--accent); font-variant-numeric:tabular-nums; }
.ds-contrast small { color:var(--muted); }
.ds-type-list > div { display:grid; grid-template-columns:190px 1fr; align-items:center; gap:24px; padding:16px 0; border-bottom:1px solid var(--line); }
.ds-type-list > div > div { display:flex; flex-direction:column; font-size:12px; }
.ds-type-list code { color:var(--muted); }
.ds-type-list p { margin:0; }
.ds-note { font-size:12px; color:var(--muted); margin:16px 0 0; }
.ds-note a { color:var(--accent); text-underline-offset:4px; }
.ds-examples { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ds-demo-card { padding:24px; background:rgba(var(--surface-rgb),var(--surface-alpha)); border:1px solid var(--line-strong); border-radius:var(--radius-lg); }
.ds-demo-card.ds-rose { border-color:color-mix(in srgb,var(--rose) 60%,transparent); }
.ds-demo-card h3 { font-size:20px; font-weight:500; margin:8px 0 12px; }
.ds-demo-card p { color:var(--muted); }
.ds-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.ds-actions .tk-button { min-height:40px; }
.ds-checkbox { display:flex; align-items:center; gap:8px; margin-top:16px; }
.ds-focus { outline:2px solid var(--accent); outline-offset:3px; }
.ds-state-buttons { gap:16px; }
.ds-status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.ds-status { display:flex; align-items:center; gap:8px; padding:12px; background:var(--surface); border:1px solid currentColor; border-radius:var(--radius-sm); font-size:12px; }
.ds-status svg { flex:0 0 18px; width:18px; height:18px; }
.ds-status.positive { color:var(--positive); }.ds-status.warning { color:var(--warning); }.ds-status.negative { color:var(--negative); }
.ds-feedback:empty { display:none; }.ds-feedback { color:var(--positive); }
.ds-measures { display:flex; gap:24px; margin-bottom:24px; }
.ds-measures > div { display:flex; align-items:center; flex-direction:column; gap:8px; }
.ds-measures i { height:32px; background:var(--accent); border-radius:2px; }
.ds-details { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ds-details p { color:var(--muted); margin:8px 0; }
.ds-icon-row { display:grid; grid-template-columns:repeat(4,24px); align-content:center; gap:16px; color:var(--accent); }
.ds-icon-row svg { width:20px; height:20px; }
.ds-layout-example { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:16px; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-md); }
.ds-layout-example h3 { margin:0; font-size:18px; }.ds-layout-example p { margin:4px 0 0; color:var(--muted); }
.ds-rules { padding-left:20px; color:var(--muted); }.ds-rules li { margin:8px 0; }
.ds-footer { border-top:1px solid var(--line); padding:24px 0; font-size:12px; color:var(--muted); }
@media(max-width:1100px) { .ds-swatches { grid-template-columns:repeat(3,minmax(0,1fr)); }.ds-details { grid-template-columns:repeat(2,1fr); } }
@media(max-width:760px) { .ds-swatches { grid-template-columns:repeat(2,minmax(0,1fr)); }.ds-type-list > div { grid-template-columns:1fr; gap:8px; }.ds-examples,.ds-status-grid { grid-template-columns:1fr; }.ds-demo-card { padding:16px; }.ds-measures { gap:16px; }.ds-details { gap:16px; }.ds-actions .tk-button { min-height:44px; } }

.ds-section:first-child { border-top:0; padding-top:8px; }
.ds-section > header { margin-bottom:12px; }

/* Comparisons inherit the same semantic contract as the live application. */
.ds-comparisons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ds-sample .ds-demo-card { min-width:0; background:var(--work-panel); border-color:var(--border-subtle); }
.ds-sample .tk-button { border-color:var(--control-edge); font-size:var(--control-size); }
.ds-sample .tk-button.primary { border-color:var(--primary-edge); box-shadow:var(--primary-shadow); }
.ds-sample .reading-copy { font-size:var(--reading-size); line-height:1.6; }
.ds-sample .tk-field { margin:16px 0; }
.ds-border-examples { display:flex; flex-wrap:wrap; gap:12px; }
.ds-border-examples span { padding:12px; border:1px solid; border-radius:var(--radius-sm); }
.ds-border-examples .ds-border-subtle { border-color:var(--border-subtle); }
.ds-border-examples .ds-border-control { border-color:var(--border-control); }
.ds-refinement { margin:8px 0; padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--work-panel); }
.ds-refinement summary { cursor:pointer; font-weight:600; padding:4px; }
.ds-refinement dl { display:grid; grid-template-columns:minmax(140px,1fr) 3fr; gap:8px 16px; }
.ds-refinement dt { color:var(--accent); }.ds-refinement dd { margin:0; }
.ds-sample .ds-website { background:linear-gradient(135deg,color-mix(in srgb,var(--metal-rose) 8%,var(--work-surface)),var(--work-surface)); }
@media(max-width:760px) { .ds-comparisons { grid-template-columns:1fr; }.ds-refinement dl { grid-template-columns:1fr; }.ds-refinement dd { margin-bottom:8px; } }

.ds-sample .ds-demo-card.metal-rose { border-color:var(--metal-rose); box-shadow:var(--metal-rose-shadow); }
@media(max-width:480px) { .ds-details { grid-template-columns:minmax(0,1fr); } }

.ds-border-examples .ds-border-emphasis { border-color:var(--border-emphasis); }
.ds-context-copy { color:var(--context-accent)!important; }
.ds-error-example { color:var(--negative); }