.reference-main{padding-block:64px;max-width:1120px;margin-inline:auto}.reference-intro{max-width:680px;margin-bottom:72px}.reference-intro>p:first-child{font:12px var(--font-mono);color:var(--brand-accent)}.reference-intro h1{font:400 clamp(40px,6vw,68px)/1.08 var(--font-display);letter-spacing:-.05em;margin:25px 0}.reference-intro p:last-child{font-size:18px;color:var(--text-secondary);max-width:52ch}.reference-main section{border-top:1px solid var(--border-subtle);padding-block:40px 48px}.reference-main h2{font:500 28px/1.25 var(--font-display);letter-spacing:-.035em;margin:0 0 28px}.reference-main h3{font-size:17px;font-weight:500;margin:0 0 18px}.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.swatch{display:flex;flex-direction:column;justify-content:flex-end;min-height:160px;padding:20px;border:1px solid var(--border-subtle);border-radius:var(--radius-control)}.swatch b{font-size:16px;font-weight:500}.swatch code{font:11px/1.6 var(--font-mono);margin-top:6px}.swatch--page{background:var(--surface-page)}.swatch--panel{background:var(--surface-panel)}.swatch--accent{background:var(--brand-accent);color:var(--on-brand)}.swatch--warning{background:var(--status-warning);color:var(--surface-page)}.reference-note{font-size:13px;color:var(--text-secondary);max-width:76ch;margin-top:20px}.type-specimen{max-width:720px}.type-display{font:400 clamp(32px,4vw,48px)/1.15 var(--font-display);letter-spacing:-.04em;margin:0 0 24px}.type-body{color:var(--text-secondary);max-width:60ch}.type-mono{font:13px/1.6 var(--font-mono);color:var(--brand-accent);margin-top:25px}.reference-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}.button-examples{display:flex;gap:14px;flex-wrap:wrap;align-items:center}.reference-grid form .ds-button{margin-top:18px}.feedback-examples{margin-top:28px}.reference-art{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}.reference-art img{background:#111111;border-radius:var(--radius-control)}.reference-art p{font-size:14px;color:var(--text-secondary)}.reference-main section>p{color:var(--text-secondary);max-width:60ch}.ds-code{max-width:720px}.reference-art a{font-size:14px}@media(max-width:760px){.reference-main{padding-block:38px}.reference-grid,.reference-art{grid-template-columns:1fr;gap:30px}.swatches{grid-template-columns:1fr 1fr}.swatch{min-height:125px;padding:15px}.ds-nav-links{gap:16px}.ds-nav-links>a{display:none}}

.motion-table-wrap{overflow-x:auto;margin-bottom:24px}.motion-table{border-collapse:collapse;width:100%;font-size:var(--text-small)}.motion-table th,.motion-table td{text-align:left;padding:16px;border-bottom:1px solid var(--border-subtle)}.motion-table th{font-weight:600}.motion-table td:nth-child(2){font-family:var(--font-mono)}