:root{--ink:#16181d;--ink-soft:#5a6072;--bg:#fff;--bg-soft:#f5f6f8;--line:#e3e5ea;--accent:#6b21a8;--accent-soft:#f3e8ff;--box:#ede9fe;--box-line:#c4b5fd;--radius:6px;--mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace}@media (prefers-color-scheme:dark){:root{--ink:#e8eaf0;--ink-soft:#9aa1b4;--bg:#14161a;--bg-soft:#1b1e24;--line:#2b2f38;--accent:#c4a2f7;--accent-soft:#2a2140;--box:#2d2545;--box-line:#4c3f78}}*,:before,:after{box-sizing:border-box}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}code{font-family:var(--mono);background:var(--bg-soft);border:1px solid var(--line);border-radius:3px;padding:.1em .35em;font-size:.875em}a{color:var(--accent)}.page-header{border-bottom:1px solid var(--line);background:var(--bg-soft);padding:3rem 1.5rem 2.25rem}.page-header__inner,main,.page-footer{max-width:1140px;margin-inline:auto}.page-header h1{letter-spacing:-.02em;margin:0 0 .5rem;font-size:clamp(1.75rem,4vw,2.5rem)}.lede{max-width:62ch;color:var(--ink-soft);margin:0 0 1rem;font-size:1.0625rem}.build-meta{color:var(--ink-soft);margin:0;font-size:.875rem}main{padding:0 1.5rem}.demo{border-bottom:1px solid var(--line);padding:2.5rem 0}.demo:last-child{border-bottom:0}.demo h2{letter-spacing:-.01em;margin:0 0 .375rem;font-size:1.25rem}.demo__note{max-width:70ch;color:var(--ink-soft);margin:0 0 1.25rem;font-size:.9375rem}.demo--highlight{background:var(--accent-soft);border-radius:var(--radius);margin-inline:-1.5rem;padding-inline:1.5rem}.tag{vertical-align:middle;background:var(--accent-soft);color:var(--accent);letter-spacing:.02em;text-transform:uppercase;border-radius:999px;margin-left:.5rem;padding:.15em .5em;font-size:.6875rem;font-weight:600;display:inline-block}.box{background:var(--box);border:1px solid var(--box-line);border-radius:var(--radius);font-family:var(--mono);text-align:center;color:var(--ink);overflow-wrap:anywhere;margin-bottom:.75rem;padding:.75rem .5rem;font-size:.8125rem}.box--sm{padding:.75rem .125rem;font-size:.75rem}.box--outer{text-align:left;background:0 0;border-style:dashed}.box--plain{background:repeating-linear-gradient(45deg, transparent, transparent 6px, var(--line) 6px, var(--line) 7px);border-style:dashed}.snippet{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);margin-top:.25rem}.snippet__summary{cursor:pointer;color:var(--ink-soft);-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.8125rem;list-style:none;display:flex}.snippet__summary::-webkit-details-marker{display:none}.snippet__summary:before{content:"";border-top:4px solid #0000;border-bottom:4px solid #0000;border-left:5px solid;width:0;height:0;transition:transform .12s}.snippet[open] .snippet__summary:before{transform:rotate(90deg)}.snippet__summary:hover{color:var(--ink)}.snippet__label{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;font-size:.6875rem}.snippet__body{border-top:1px solid var(--line);position:relative}.snippet__pre{font-family:var(--mono);tab-size:2;margin:0;padding:.875rem 1rem;font-size:.75rem;line-height:1.65;overflow-x:auto}.snippet__pre code{all:unset;font:inherit;color:var(--ink)}:root{--sh-sign:#8b93a7;--sh-entity:#7c3aed;--sh-property:#0369a1;--sh-string:#047857;--sh-keyword:#be185d;--sh-comment:#8b93a7;--sh-jsxliterals:#16181d;--sh-class:#b45309;--sh-identifier:#16181d}@media (prefers-color-scheme:dark){:root{--sh-sign:#6c748a;--sh-entity:#c4a2f7;--sh-property:#7dd3fc;--sh-string:#6ee7b7;--sh-keyword:#f9a8d4;--sh-comment:#6c748a;--sh-jsxliterals:#cbd2e0;--sh-class:#fcd34d;--sh-identifier:#cbd2e0}}.snippet__copy{z-index:1;border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);letter-spacing:.02em;cursor:pointer;border-radius:4px;padding:.25rem .625rem;font:600 .6875rem/1.4 system-ui,sans-serif;transition:color .12s,border-color .12s;position:absolute;top:.5rem;right:.5rem}.snippet__copy:hover{color:var(--accent);border-color:var(--accent)}.snippet__copy:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.page-footer{color:var(--ink-soft);padding:2rem 1.5rem 3rem;font-size:.875rem}