.section-heading>p svg{vertical-align:-2px;color:var(--viva-violet);margin-right:4px}.section-heading>p code,.foundation-note code{background:var(--surface);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-small);border-radius:4px;padding:2px 4px}.token-bars{gap:8px;margin:0;padding:0;list-style:none;display:grid}.token-bars li{grid-template-columns:64px 1fr;align-items:center;gap:16px;display:grid}.token-bars code{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-small);font-variant-numeric:tabular-nums;text-align:right}.token-bar{background:var(--viva-cyan);border-radius:2px;height:20px;display:block}.radius-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.radius-grid li{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-raised);justify-items:start;gap:8px;padding:20px;display:grid}.radius-demo{border:2px solid var(--viva-violet);background:color-mix(in srgb, var(--viva-violet) 10%, transparent);width:72px;height:72px;margin-bottom:4px}.radius-grid code{color:var(--viva-violet-readable);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-small)}.radius-grid b{font-size:var(--text-body);font-variant-numeric:tabular-nums}.radius-grid li>span:last-child{color:var(--muted);font-size:var(--text-small);line-height:1.5}[data-theme=dark] .radius-grid code{color:var(--cornflower)}.layer-stack{border:1px solid var(--border);border-radius:var(--radius-md);margin:0;padding:0;list-style:none;overflow:hidden}.layer-stack li{background:var(--surface-raised);grid-template-columns:56px 200px 1fr;align-items:center;gap:16px;padding:12px 20px;display:grid}.layer-stack li+li{border-top:1px solid var(--border-soft)}.layer-stack b{font-size:var(--text-body);font-variant-numeric:tabular-nums;text-align:right}.layer-stack code{color:var(--viva-violet-readable);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-small)}.layer-stack span{color:var(--muted);font-size:var(--text-small);line-height:1.5}[data-theme=dark] .layer-stack code{color:var(--cornflower)}.elevation-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;display:grid}.elevation-grid article{border-radius:var(--radius-md);background:var(--surface-raised);align-content:center;gap:8px;min-height:140px;padding:24px;display:grid}.elevation-grid code{color:var(--viva-violet-readable);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-small)}.elevation-grid span{color:var(--muted);font-size:var(--text-small);line-height:1.5}[data-theme=dark] .elevation-grid code{color:var(--cornflower)}.motion-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.motion-list li{border:1px solid var(--border);border-radius:var(--radius-sm);grid-template-columns:180px 1fr 2fr;align-items:baseline;gap:16px;padding:12px 16px;display:grid}.motion-list code{color:var(--viva-violet-readable);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-small)}.motion-list b{font-size:var(--text-small);font-variant-numeric:tabular-nums}.motion-list span{color:var(--muted);font-size:var(--text-small)}[data-theme=dark] .motion-list code{color:var(--cornflower)}.foundation-note{max-width:64ch;color:var(--muted);font-size:var(--text-small);margin:16px 0 0;line-height:1.6}.state-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.state-grid li{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-raised);justify-items:start;gap:8px;padding:20px;display:grid}.state-grid b{font-size:var(--text-small);margin-top:4px}.state-grid li>span:last-child{color:var(--muted);font-size:var(--text-small);line-height:1.5}.state-demo{cursor:default}.state-demo.is-hover{border-color:var(--slate-500);color:var(--ink)}.state-demo.is-active{transform:scale(.97)}.state-demo.is-focus{outline:3px solid color-mix(in srgb, var(--focus) 65%, transparent);outline-offset:3px}.state-demo.is-disabled{opacity:.72;cursor:wait}@media (max-width:900px){.layer-stack li{grid-template-columns:48px 1fr}.layer-stack li>span:last-child{grid-column:2}.motion-list li{grid-template-columns:1fr;gap:4px}}