.doc{max-width:var(--container);margin:0 auto;padding:0 var(--space-6)}.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-surface) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--color-border)}.topbar__inner{max-width:var(--container);margin:0 auto;padding:var(--space-3) var(--space-6);display:flex;align-items:center;gap:var(--space-4)}.topnav{display:flex;gap:var(--space-1);flex:1;flex-wrap:wrap}.topnav a{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-muted);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);transition:all var(--dur-fast) var(--ease-out)}.topnav a:hover{color:var(--color-ink);background:var(--color-surface-sunken);text-decoration:none}.topnav a.is-active{color:var(--color-on-primary);background:var(--color-primary)}.hero-band{padding:var(--space-20) 0 var(--space-16)}.section{padding:var(--space-16) 0;border-top:1px solid var(--color-border)}.section__eyebrow{font-size:var(--text-caption);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-primary-700);margin-bottom:var(--space-3)}.section__title{font-size:var(--text-h1);margin-bottom:var(--space-3)}.section__lead{font-size:var(--text-lg);color:var(--color-muted);max-width:60ch;margin-bottom:var(--space-10)}.subsection__title{font-size:var(--text-h4);margin:var(--space-12) 0 var(--space-5);display:flex;align-items:center;gap:var(--space-3)}.subsection__title:before{content:"";width:10px;height:22px;border-radius:var(--radius-sm);background:var(--color-primary)}.grid{display:grid;gap:var(--space-5)}.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}@media (max-width:820px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}.swatch{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-raised);box-shadow:var(--shadow-xs)}.swatch__chip{height:84px}.swatch__meta{padding:var(--space-3) var(--space-4)}.swatch__name{font-weight:var(--weight-bold);font-size:var(--text-sm)}.swatch__var{color:var(--color-muted)}.swatch__hex,.swatch__var{font-family:var(--font-mono);font-size:12px}.swatch__hex{color:var(--color-ink-soft);display:flex;justify-content:space-between;align-items:center;margin-top:4px}.copy-btn{font-family:var(--font-mono);font-size:11px;cursor:pointer;border:1px solid var(--color-border);background:var(--color-surface-sunken);border-radius:var(--radius-sm);padding:2px 7px;color:var(--color-muted)}.copy-btn:hover{color:var(--color-ink);border-color:var(--color-border-strong)}.token-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.token-table td,.token-table th{text-align:left;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);vertical-align:middle}.token-table th{font-size:var(--text-caption);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-muted);background:var(--color-surface-sunken)}.token-table tr:last-child td{border-bottom:0}.token-table code{color:var(--color-primary-700);background:var(--color-primary-100);padding:2px 6px;border-radius:5px}.token-table .dim,.token-table code{font-family:var(--font-mono);font-size:12px}.token-table .dim{color:var(--color-muted)}.spec-card{background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-xs)}.type-row{display:flex;align-items:baseline;gap:var(--space-5);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);flex-wrap:wrap}.type-row:last-child{border-bottom:0}.type-row__meta{width:200px;flex-shrink:0}.type-row__role{font-weight:var(--weight-bold);font-size:var(--text-sm)}.type-row__spec{font-family:var(--font-mono);font-size:11px;color:var(--color-muted)}.type-row__sample{flex:1;min-width:0}.metric-row{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) 0}.metric-row__bar{background:var(--color-primary);height:16px;border-radius:var(--radius-sm)}.metric-row__label{font-family:var(--font-mono);font-size:12px;color:var(--color-ink-soft);width:220px}.radius-box{background:var(--color-primary-100);border:2px solid var(--color-primary);height:80px;display:grid;place-items:end;padding:8px}.radius-box span{font-family:var(--font-mono);font-size:11px;color:var(--color-primary-700)}.shadow-box{background:var(--color-surface-raised);height:96px;border-radius:var(--radius-lg);display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;color:var(--color-muted)}.demo,.shadow-box{border:1px solid var(--color-border)}.demo{background:var(--color-surface-raised);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-xs)}.demo__label{font-size:var(--text-caption);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-muted);margin-bottom:var(--space-4)}.demo__row{align-items:center;flex-wrap:wrap}.demo__col,.demo__row{display:flex;gap:var(--space-4)}.demo__col{flex-direction:column}.demo--sunken{background:var(--color-surface-sunken)}.note{font-size:var(--text-sm);color:var(--color-muted);margin-top:var(--space-3)}.ds-sidebar-demo .lesson-sidebar{display:flex;flex-direction:column;position:static;height:auto;max-width:280px;padding:var(--space-6) var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg)}footer.doc-footer{padding:var(--space-16) 0;border-top:1px solid var(--color-border);color:var(--color-muted);font-size:var(--text-sm);text-align:center}.hero-flex{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-12);align-items:center}@media (max-width:860px){.hero-flex{grid-template-columns:1fr}}.hero-h1{font-size:var(--text-display);line-height:1.02;margin:var(--space-5) 0}.hero-h1 em{color:var(--color-primary-700);font-style:normal}.hero-sub{font-size:var(--text-lg);color:var(--color-muted);max-width:46ch}.hero-card{background:var(--color-ink);color:var(--color-surface);border-radius:var(--radius-3xl);padding:var(--space-10);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;gap:var(--space-5)}.hero-card .streak,.hero-card .xp{background:color-mix(in srgb,var(--color-primary) 24%,transparent)}.mini-legend{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}.principle{display:flex;gap:var(--space-4)}.principle__n{font-family:var(--font-display);font-weight:800;font-size:var(--text-h2);color:var(--color-primary);line-height:1}.logo-cell{display:grid;place-items:center;padding:var(--space-8);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.a11y-pair{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-md);font-weight:700;font-size:var(--text-sm)}.a11y-ratio{margin-left:auto;font-family:var(--font-mono);font-size:12px;opacity:.85}