:root{color-scheme:dark;--font-sans:Inter, ui-sans-serif, system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--page:#0c0c0d;--surface:#111112;--surface-raised:#151516;--line:#29292b;--line-soft:#202022;--text:#f4f4f5;--muted:#8d8d92;--quiet:#626267;--accent:#9f8cff;--accent-soft:#282338;--danger:#f87171;font-family:var(--font-sans);background:var(--page);color:var(--text)}:root[data-theme=light]{color-scheme:light;--page:#f7f7f6;--surface:#fff;--surface-raised:#fafafa;--line:#dedede;--line-soft:#e9e9e8;--text:#171718;--muted:#737377;--quiet:#9b9b9f;--accent:#6651d7;--accent-soft:#ece8ff;--danger:#dc2626}*{box-sizing:border-box}html{background:var(--page);overflow-x:clip}body{background:var(--page);min-width:320px;margin:0;overflow-x:clip}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}.app{width:min(760px,100% - 32px);margin:0 auto;padding:28px 0 56px}.top-links{justify-content:flex-end;gap:8px;display:flex}.icon-button,.copy-button,.preview-toggle{border:1px solid var(--line);background:var(--surface);width:34px;height:34px;color:var(--muted);cursor:pointer;border-radius:10px;place-items:center;display:inline-grid}.icon-button:hover,.copy-button:hover,.preview-toggle:hover{color:var(--text);background:var(--surface-raised)}.icon-button svg,.copy-button svg,.preview-toggle svg{width:16px;height:16px}.hero{text-align:center;justify-items:center;padding:52px 0 34px;display:grid}.mark{border:1px solid var(--line);background:var(--surface);width:58px;height:58px;color:var(--accent);border-radius:18px;place-items:center;margin-bottom:18px;display:grid}.mark svg{width:30px;height:30px}h1{letter-spacing:-.055em;margin:0;font-size:clamp(2.2rem,8vw,3.25rem);font-weight:590}.subtitle{color:var(--muted);margin:9px 0 0;font-size:.92rem}.author-note{color:var(--quiet);margin:12px 0 0;font-size:.75rem}.author-note a{color:var(--muted);text-underline-offset:3px}.segmented{border:1px solid var(--line);background:var(--surface);border-radius:12px;gap:2px;width:fit-content;padding:3px;display:flex;position:relative}.segmented button{min-height:30px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:0 13px;font-size:.78rem}.segmented button[aria-selected=true],.segmented button[aria-pressed=true],.segmented button[data-active=true]{background:var(--accent-soft);color:var(--text)}.family-tabs{margin:0 auto 18px}.example-stack{gap:10px;display:grid}.example-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.example-cell,.preview-surface,.vue-surface,.astro-surface{border:1px solid var(--line-soft);background:linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px), var(--surface);background-size:32px 32px;border-radius:18px;place-items:center;min-height:190px;display:grid;position:relative;overflow:hidden}.example-cell--large{min-height:250px}[data-family-panel][hidden]{display:none}.section{margin-top:56px}.section-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;display:flex}.section-heading h2{letter-spacing:-.02em;margin:0;font-size:1rem;font-weight:580}.section-heading p{color:var(--quiet);margin:0;font-size:.72rem}.code-block{border:1px solid var(--line);background:var(--surface);border-radius:14px;align-items:center;min-height:54px;display:flex;position:relative;overflow:auto}.code-block pre{color:var(--muted);white-space:pre-wrap;margin:0;padding:16px 52px 16px 16px;font:.76rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}.code-block .copy-button{position:absolute;top:9px;right:9px}.controls{border:1px solid var(--line);background:var(--surface);border-radius:16px;gap:18px;padding:18px;display:grid}.control-row{grid-template-columns:86px 1fr;align-items:center;gap:12px;display:grid}.control-label{color:var(--quiet);font-size:.72rem}.control-options{flex-wrap:wrap;gap:5px;display:flex}.control-options button{border:1px solid var(--line);background:var(--surface-raised);min-height:29px;color:var(--muted);cursor:pointer;border-radius:9px;padding:0 10px;font-size:.73rem}.control-options button[data-active=true]{border-color:color-mix(in srgb, var(--accent) 45%, var(--line));background:var(--accent-soft);color:var(--text)}.range-control{grid-template-columns:1fr 44px;align-items:center;gap:12px;display:grid}.range-control input{width:100%;accent-color:var(--accent)}.range-control output{color:var(--muted);text-align:right;font:.7rem ui-monospace,monospace}.playground-preview{margin-top:10px;position:relative}.preview-surface{min-height:310px}.preview-toolbar{gap:6px;display:flex;position:absolute;bottom:12px;right:12px}.variant-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.variant-card{border:1px solid var(--line-soft);background:var(--surface);border-radius:16px;place-items:center;min-height:150px;padding:18px;display:grid}.variant-label{color:var(--quiet);text-align:center;margin-top:9px;font:.66rem ui-monospace,monospace}.integration-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.integration-card{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:18px}.integration-card h3{margin:0 0 7px;font-size:.88rem;font-weight:580}.integration-card p{color:var(--muted);margin:0;font-size:.76rem;line-height:1.55}.vue-surface{min-height:240px;margin-top:10px}.framework-demos{grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;display:grid}.framework-demos .vue-surface,.framework-demos .astro-surface{min-height:240px;margin-top:0}.footer{border-top:1px solid var(--line-soft);color:var(--quiet);text-align:center;margin-top:64px;padding-top:20px;font-size:.72rem}.mock-chat{border:1px solid var(--line);background:var(--surface-raised);width:min(420px,100% - 36px);box-shadow:inset 0 0 42px color-mix(in srgb, var(--text) 2%, transparent);border-radius:18px;padding:12px}.mock-chat input{width:100%;min-height:58px;color:var(--text);background:0 0;border:0;outline:0}.mock-chat-bottom{align-items:center;gap:6px;display:flex}.mock-chip,.mock-action,.mock-button,.mock-search,.mock-search-shell{border:1px solid var(--line);background:var(--surface-raised);color:var(--muted)}.mock-chip{border-radius:8px;padding:5px 8px;font-size:.68rem}.mock-action{width:30px;height:30px;color:var(--text);border-radius:9px;place-items:center;margin-left:auto;display:grid}.mock-button{min-height:38px;color:var(--text);border-radius:11px;padding:0 16px}.mock-button--round{border-radius:50%;width:46px;height:46px;min-height:0;padding:0}.mock-button--pill{border-radius:999px}.mock-search{border-radius:13px;outline:0;width:min(260px,100% - 32px);min-height:42px;padding:0 14px}.mock-search-shell{border-radius:13px;align-items:center;width:min(260px,100% - 32px);min-height:42px;padding:0 14px;display:flex}.mock-search-shell input{width:100%;min-width:0;color:var(--text);background:0 0;border:0;outline:0}.mock-card{border:1px solid var(--line);background:var(--surface-raised);border-radius:16px;width:min(310px,100% - 32px);padding:18px}.mock-card strong{font-size:.82rem;font-weight:580;display:block}.mock-card span{color:var(--muted);margin-top:6px;font-size:.72rem;display:block}@media (width<=640px){.app{width:min(100% - 20px,760px)}.hero{padding-top:34px}.example-grid,.variant-grid,.integration-grid,.framework-demos{grid-template-columns:1fr}.control-row{grid-template-columns:1fr;gap:8px}.example-cell{min-height:170px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.site-bar{z-index:40;border-bottom:1px solid var(--line-soft);background:color-mix(in oklab, var(--page) 88%, transparent);backdrop-filter:blur(10px);align-items:center;gap:16px;width:100%;padding:12px max(16px,50% - 380px);display:flex;position:sticky;top:0}.site-brand{font-family:var(--font-mono);letter-spacing:-.01em;color:var(--muted);font-size:.78rem;text-decoration:none}.site-brand:hover{color:var(--text)}.site-nav{gap:4px;margin-inline-start:auto;display:flex}.site-nav a{color:var(--muted);border-radius:999px;padding:5px 10px;font-size:.82rem;text-decoration:none;transition:color .15s,background .15s}.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--text);background:var(--surface-raised)}.site-actions{gap:6px;display:flex}.site-foot{border-top:1px solid var(--line-soft);width:min(760px,100% - 32px);color:var(--quiet);flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin:64px auto 40px;padding-top:20px;font-size:.74rem;display:flex}.home{width:min(760px,100% - 32px);margin:0 auto;padding:88px 0 0}.home-title{letter-spacing:-.03em;margin:0;font-size:clamp(2rem,6vw,2.8rem);font-weight:600}.home-lede{max-width:46ch;color:var(--muted);margin:16px 0 0;line-height:1.6}.home-list{gap:12px;margin:48px 0 0;display:grid}.home-card{border:1px solid var(--line-soft);background:var(--surface);color:inherit;border-radius:14px;gap:6px;padding:20px;text-decoration:none;transition:border-color .15s,transform .15s;display:grid}.home-card:hover{border-color:var(--line);transform:translateY(-1px)}.home-card-head{align-items:baseline;gap:10px;display:flex}.home-card h2{margin:0;font-size:1rem;font-weight:600}.home-card code{font-family:var(--font-mono);color:var(--quiet);font-size:.72rem}.home-card p{color:var(--muted);margin:0;font-size:.86rem;line-height:1.55}