:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--background:#fafafa;--foreground:#18181b;--muted:#71717a;--muted-light:#a1a1aa;--border:#e4e4e7;--card:#fff;--soft:#f4f4f5;--code:#111113;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--background)}body{color:var(--foreground);background:var(--background);margin:0}a{color:inherit}button,code{font:inherit}.site-header{z-index:20;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fafafae0;border-bottom:1px solid #e4e4e7cc;position:sticky;top:0}.site-header-inner{justify-content:space-between;align-items:center;width:min(1160px,100% - 40px);height:64px;margin:auto;display:flex}.brand{color:#18181b;letter-spacing:-.01em;align-items:center;gap:10px;font-size:14px;font-weight:650;text-decoration:none;display:flex}.brand-icon{color:#fff;background:#18181b;border-radius:7px;place-items:center;width:28px;height:28px;font:600 14px/1 ui-monospace,monospace;display:grid}.site-header nav{align-items:center;gap:28px;display:flex}.site-header nav a{color:#52525b;font-size:13px;font-weight:500;text-decoration:none}.site-header nav a:hover{color:#09090b}.site-header nav .nav-github{border:1px solid var(--border);color:#27272a;background:#fff;border-radius:7px;padding:8px 12px;box-shadow:0 1px 2px #00000008}.page-shell{width:min(1160px,100% - 40px);margin:0 auto}.home-intro{max-width:680px;padding:76px 0 48px}.home-intro h1{letter-spacing:-.045em;margin:0;font-size:clamp(38px,5vw,52px);line-height:1}.home-intro p{color:#52525b;margin:18px 0 0;font-size:16px;line-height:1.6}.example-list{padding-bottom:80px}.code-toolbar{color:#71717a;background:#18181b;border-bottom:1px solid #29292d;grid-template-columns:1fr auto 1fr;align-items:center;min-height:43px;padding:0 13px;font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;display:grid}.window-dots{gap:6px;display:flex}.window-dots i{background:#3f3f46;border-radius:50%;width:8px;height:8px}.example-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.example-card{border:1px solid var(--border);background:var(--card);border-radius:11px;flex-direction:column;min-width:0;min-height:280px;padding:24px;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;box-shadow:0 1px 2px #00000006}.example-card:hover{border-color:#c4c4ca;transform:translateY(-2px);box-shadow:0 10px 30px #0000000e}.example-card-top{justify-content:space-between;align-items:center;margin-bottom:34px;display:flex}.example-index{color:#a1a1aa;font:12px/1 ui-monospace,monospace}.badge{border:1px solid var(--border);color:#52525b;background:#fafafa;border-radius:999px;padding:5px 8px;font:11px/1 ui-monospace,monospace}.example-card h3{letter-spacing:-.025em;margin:0;font-size:21px}.example-card>p{color:var(--muted);margin:12px 0 25px;font-size:14px;line-height:1.6}.card-link{border-top:1px solid #f0f0f1;justify-content:space-between;align-items:center;margin-top:auto;padding-top:17px;font-size:13px;font-weight:600;text-decoration:none;display:flex}.card-link:hover span{transform:translate(3px)}.card-link span{transition:transform .15s}.commands{gap:17px;display:grid}.command-label{color:#71717a;letter-spacing:.07em;text-transform:uppercase;margin:0 0 8px;font-size:11px;font-weight:650}.command-row{border:1px solid var(--border);background:#fafafa;border-radius:8px;align-items:center;min-width:0;display:flex;overflow:hidden}.command-row .prompt{color:#a1a1aa;padding-left:13px;font:12px/1 ui-monospace,monospace}.command-row code{color:#27272a;white-space:nowrap;flex:1;min-width:0;padding:12px 10px;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}.command-row button,.code-copy{border:1px solid var(--border);color:#52525b;cursor:pointer;background:#fff;border-radius:6px;flex:none;margin-right:6px;padding:7px 9px;font-size:11px;font-weight:600}.command-row button:hover,.code-copy:hover{color:#18181b;background:#f4f4f5}.example-page{padding:38px 0 80px}.breadcrumbs{color:#a1a1aa;gap:8px;margin-bottom:62px;font-size:12px;display:flex}.breadcrumbs a{color:#52525b;text-decoration:none}.example-hero{margin-bottom:52px}.example-hero h1{letter-spacing:-.055em;max-width:720px;margin:0;font-size:clamp(44px,6vw,68px);line-height:1}.example-hero>div>p{color:#52525b;max-width:680px;margin:23px 0 0;font-size:17px;line-height:1.65}.example-badges{gap:8px;margin-top:22px;display:flex}.example-badges span{border:1px solid var(--border);color:#52525b;background:#fff;border-radius:7px;padding:6px 9px;font:11px/1 ui-monospace,monospace}.detail-content{max-width:820px}.connect-section h2,.source-heading h2{letter-spacing:-.02em;margin:0 0 18px;font-size:18px}.note{background:#f7f7f8;border-left:2px solid #71717a;margin-top:22px;padding:15px 17px}.note strong{font-size:12px}.note p{color:#71717a;margin:6px 0 0;font-size:12px;line-height:1.6}.source-section{margin-top:64px}.source-heading{justify-content:space-between;align-items:center;gap:30px;margin-bottom:20px;display:flex}.source-heading h2{margin:0}.source-heading>a{color:#52525b;font-size:12px;font-weight:600;text-decoration:none}.source-heading>a:hover{color:#09090b}.code-block{background:var(--code);border:1px solid #27272a;border-radius:11px;overflow:hidden;box-shadow:0 14px 40px #0000001a}.code-toolbar .code-copy{color:#a1a1aa;background:#27272a;border-color:#3f3f46;justify-self:end;margin:0}.code-block pre{color:#d4d4d8;tab-size:2;max-height:680px;margin:0;padding:27px;font:12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;overflow:auto}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#71717a}.token.punctuation{color:#a1a1aa}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:#f0abfc}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin{color:#bef264}.token.operator,.token.entity,.token.url,.language-css .token.string{color:#67e8f9}.token.atrule,.token.attr-value,.token.keyword{color:#c4b5fd}.token.function,.token.class-name{color:#fde68a}.token.regex,.token.important,.token.variable{color:#fdba74}.example-pagination{justify-content:space-between;margin-top:30px;display:flex}.example-pagination a{color:#52525b;font-size:12px;font-weight:600;text-decoration:none}.example-pagination a:hover{color:#09090b}.site-footer{border-top:1px solid var(--border)}.site-footer>div{color:#a1a1aa;gap:24px;width:min(1160px,100% - 40px);margin:auto;padding:27px 0;font-size:12px;display:flex}.site-footer a{color:#71717a;text-decoration:none}.site-footer a:hover{color:#18181b}@media (max-width:900px){.example-grid{grid-template-columns:1fr}.example-card{min-height:250px}}@media (max-width:680px){.site-header-inner,.page-shell,.site-footer>div{width:min(100% - 24px,1160px)}.site-header nav a:not(.nav-github){display:none}.home-intro{padding-top:54px}.source-heading{flex-direction:column;align-items:flex-start}.breadcrumbs{margin-bottom:42px}.example-hero h1{font-size:44px}.code-block pre{padding:20px 16px;font-size:11px}.site-footer>div{flex-wrap:wrap}}