:root{color-scheme:light dark;--page-fg: #1a1a1a;--page-muted: #5c5c5c;--page-bg: #fbfbfc;--page-panel: #ffffff;--page-border: #e2e4e8;--page-link: #0d5bb5;--page-code-bg: #f2f3f5}@media(prefers-color-scheme:dark){:root{--page-fg: #e8eaed;--page-muted: #a8adb3;--page-bg: #15171a;--page-panel: #1c1f23;--page-border: #33373d;--page-link: #78b0fa;--page-code-bg: #22262b}}*{box-sizing:border-box}body{margin:0;padding:0 1rem 4rem;font:16px/1.6 system-ui,-apple-system,sans-serif;color:var(--page-fg);background:var(--page-bg)}.page-header,main,.page-footer{max-width:60rem;margin:0 auto}.page-header{padding:3rem 0 1.5rem}h1{margin:0 0 .5rem;font-size:clamp(1.75rem,5vw,2.5rem);letter-spacing:-.02em}.lede{margin:0 0 1.5rem;max-width:46rem;color:var(--page-muted);font-size:1.0625rem}.controls{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;padding:.875rem 1rem;background:var(--page-panel);border:1px solid var(--page-border);border-radius:10px;position:sticky;top:0;z-index:10}.controls label{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--page-muted)}.controls select,.controls input,.controls button{font:inherit;font-size:.875rem;color:var(--page-fg);background:var(--page-bg);border:1px solid var(--page-border);border-radius:6px;padding:.25rem .5rem}.controls input[type=color]{padding:0;width:2.5rem;height:1.75rem}.controls input[type=range]{width:7rem;padding:0}.controls button{cursor:pointer}:focus-visible{outline:2px solid var(--page-link);outline-offset:2px}.links{margin:1rem 0 0;display:flex;gap:1rem;font-size:.875rem}a{color:var(--page-link)}section{padding:2.5rem 0;border-top:1px solid var(--page-border)}h2{margin:0 0 .5rem;font-size:1.375rem;letter-spacing:-.01em}h2 .anchor{float:left;margin-left:-1.25rem;width:1.25rem;color:var(--page-border);text-decoration:none}h2 .anchor:hover{color:var(--page-link)}section>p{margin:0 0 1rem;max-width:46rem;color:var(--page-muted)}section>p strong{color:var(--page-fg)}.note{font-size:.875rem;padding:.625rem .875rem;background:var(--page-panel);border-left:3px solid var(--page-border);border-radius:0 6px 6px 0}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;padding:.1em .35em;background:var(--page-code-bg);border-radius:4px}pre{margin:0;padding:.875rem 1rem;overflow-x:auto;background:var(--page-code-bg);border-radius:8px}pre code{padding:0;background:none;font-size:.8125rem;line-height:1.5}details{margin-top:1rem}summary{cursor:pointer;font-size:.875rem;color:var(--page-muted)}summary:hover{color:var(--page-fg)}.demo{--mcs-height: 24rem}.demo.tall{--mcs-height: 30rem}.demo.short{--mcs-height: 18rem}.demo h3{margin:0;padding:.625rem .875rem;font-size:.9375rem;border-bottom:1px solid var(--mcs-border, var(--page-border))}.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1rem;align-items:start}.stack{display:flex;flex-direction:column;gap:1rem}.page-footer{padding:2.5rem 0 0;border-top:1px solid var(--page-border);font-size:.875rem;color:var(--page-muted)}