:root{--bg: #ffffff;--bg-alt: #f6f7f8;--bg-sink: #eceef0;--border: #d7dce1;--border-strong: #c2c9d0;--text: #1a1d21;--text-dim: #5b636c;--text-faint: #8a929b;--link: #1155cc;--link-hover: #0b3d91;--accent: #2f7d32;--warn: #b26a00;--danger: #c62828;--code-bg: #f2f3f5;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--sidebar-w: 244px;--content-max: 860px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font);font-size:13.5px;line-height:1.5;color:var(--text);background:var(--bg)}a{color:var(--link);text-decoration:none}a:hover{color:var(--link-hover);text-decoration:underline}.topbar{display:flex;align-items:center;gap:16px;height:40px;padding:0 14px;border-bottom:1px solid var(--border);background:var(--bg-alt);position:sticky;top:0;z-index:20}.topbar .brand{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px;color:var(--text);letter-spacing:.2px}.topbar .brand:hover{text-decoration:none}.topbar .brand .logo{border-radius:4px;display:block}.topbar nav{display:flex;gap:2px;margin-left:auto}.topbar nav a{padding:4px 9px;border-radius:4px;color:var(--text-dim);font-size:13px}.topbar nav a:hover{background:var(--bg-sink);text-decoration:none}.topbar nav a.active{color:var(--text);background:var(--bg-sink);font-weight:600}.topbar .ver{color:var(--text-faint);font-size:12px;font-family:var(--mono)}.topbar .nav-burger{display:none}@media(max-width:640px){.topbar{gap:10px}.topbar .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:30px;height:30px;margin-left:auto;padding:6px;border-radius:4px;cursor:pointer}.topbar .nav-burger:hover{background:var(--bg-sink)}.topbar .nav-burger span{display:block;height:2px;width:100%;background:var(--text-dim);border-radius:1px;transition:transform .2s,opacity .2s}.topbar nav{display:none;position:absolute;top:40px;left:0;right:0;flex-direction:column;gap:0;margin-left:0;padding:6px;background:var(--bg-alt);border-bottom:1px solid var(--border)}.topbar nav a{padding:9px 11px;font-size:14px}.topbar .nav-toggle:checked~nav{display:flex}.topbar .nav-toggle:checked~.nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}.topbar .nav-toggle:checked~.nav-burger span:nth-child(2){opacity:0}.topbar .nav-toggle:checked~.nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}}.shell{display:flex;align-items:flex-start}.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);border-right:1px solid var(--border);background:var(--bg-alt);position:sticky;top:40px;height:calc(100vh - 40px);overflow-y:auto;padding:10px 0 40px}.sidebar .group{padding:8px 12px 2px}.sidebar .group-title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-faint);font-weight:600;padding:4px 6px}.sidebar a.item{display:block;padding:3px 8px;border-radius:4px;color:var(--text-dim);font-size:13px;line-height:1.45}.sidebar a.item:hover{background:var(--bg-sink);color:var(--text);text-decoration:none}.sidebar a.item.active{background:#e4eaf5;color:var(--link-hover);font-weight:600}.content{flex:1 1 auto;min-width:0;padding:22px 32px 80px}.content .inner{max-width:var(--content-max)}.breadcrumb{color:var(--text-faint);font-size:12px;margin-bottom:10px}.breadcrumb a{color:var(--text-dim)}.prose h1{font-size:22px;margin:0 0 4px;font-weight:650;letter-spacing:-.2px}.prose h2{font-size:16px;margin:26px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border);font-weight:650}.prose h3{font-size:14px;margin:18px 0 6px;font-weight:650}.prose p{margin:8px 0}.prose ul,.prose ol{margin:8px 0;padding-left:22px}.prose li{margin:2px 0}.prose .lede{color:var(--text-dim);font-size:14px;margin-bottom:4px}.prose code{font-family:var(--mono);font-size:12.5px;background:var(--code-bg);border:1px solid var(--border);border-radius:3px;padding:0 4px}.prose pre{background:var(--code-bg);border:1px solid var(--border);border-radius:5px;padding:10px 12px;overflow-x:auto;font-size:12.5px;line-height:1.45}.prose pre code{background:none;border:none;padding:0}.prose table{border-collapse:collapse;width:100%;margin:12px 0;font-size:13px}.prose th,.prose td{border:1px solid var(--border);padding:5px 9px;text-align:left;vertical-align:top}.prose th{background:var(--bg-alt);font-weight:600}.prose tbody tr:nth-child(2n){background:#fafbfc}.prose blockquote{margin:12px 0;padding:6px 12px;border-left:3px solid var(--border-strong);background:var(--bg-alt);color:var(--text-dim)}.note{border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--bg-alt);padding:8px 12px;border-radius:4px;margin:12px 0;font-size:13px}.note.warn{border-left-color:var(--warn)}hr{border:none;border-top:1px solid var(--border);margin:22px 0}.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px;flex-wrap:wrap}.tabs a{padding:6px 12px;color:var(--text-dim);font-size:13px;border:1px solid transparent;border-bottom:none;border-radius:5px 5px 0 0;margin-bottom:-1px}.tabs a:hover{background:var(--bg-alt);text-decoration:none}.tabs a.active{color:var(--text);background:var(--bg);border-color:var(--border);border-bottom-color:var(--bg);font-weight:600}.meta{color:var(--text-faint);font-size:12px;font-family:var(--mono);margin-top:4px}.footer{border-top:1px solid var(--border);color:var(--text-faint);font-size:12px;padding:12px 32px;margin-top:24px}.page-wrap{max-width:960px;margin:0 auto;padding:28px 32px 80px}.hero{padding:12px 0 22px;border-bottom:1px solid var(--border)}.hero h1{font-size:28px;font-weight:680;letter-spacing:-.4px;margin:0 0 8px}.hero .tag{font-size:15px;color:var(--text-dim);max-width:640px;margin:0 0 6px;line-height:1.5}.hero .sub{font-size:13px;color:var(--text-faint);margin:0 0 16px}.cta{display:flex;gap:8px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:6px;font-size:13px;font-weight:550;border:1px solid var(--border-strong);color:var(--text);background:var(--bg)}.btn:hover{background:var(--bg-alt);text-decoration:none}.btn.primary{background:#3f3dd6;border-color:#3f3dd6;color:#fff}.btn.primary:hover{background:#3634bf}.section-block{padding:24px 0;border-bottom:1px solid var(--border)}.section-block:last-child{border-bottom:none}.section-block h2{font-size:15px;font-weight:650;margin:0 0 14px}.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.feature{border:1px solid var(--border);border-radius:6px;padding:12px 14px;background:var(--bg)}.feature .h{font-size:13.5px;font-weight:650;margin:0 0 4px;display:flex;align-items:center;gap:6px}.feature .h .dot{width:7px;height:7px;border-radius:2px;background:var(--accent)}.feature p{margin:0;font-size:13px;color:var(--text-dim);line-height:1.45}.showcase-stack{display:flex;flex-direction:column;gap:20px}.showcase{border:1px solid var(--border);border-radius:7px;overflow:hidden;background:var(--bg)}.showcase .head{padding:12px 15px;border-bottom:1px solid var(--border)}.showcase .head .t{font-size:14.5px;font-weight:650;margin:0}.showcase .head .d{font-size:13px;color:var(--text-dim);margin:4px 0 0;line-height:1.45}.showcase .tabs-strip{display:flex;border-bottom:1px solid var(--border);background:var(--bg-alt);overflow-x:auto}.showcase .tab{font-family:var(--mono);font-size:12px;padding:7px 13px;border:none;border-right:1px solid var(--border);background:none;color:var(--text-dim);cursor:pointer;white-space:nowrap}.showcase .tab:hover{background:var(--bg-sink);color:var(--text)}.showcase .tab.active{background:var(--bg);color:var(--text);font-weight:600;box-shadow:inset 0 -2px #3f3dd6}.showcase .panels{background:#fff}.showcase .panel{display:none}.showcase .panel.active{display:block}.showcase .panel .astro-code{margin:0;border:none;border-radius:0;padding:13px 15px;font-size:12px;line-height:1.55;overflow-x:auto;font-family:var(--mono)}.showcase .uses{padding:9px 15px;border-top:1px solid var(--border);font-size:12px;color:var(--text-faint)}.showcase .uses code{font-family:var(--mono);font-size:11.5px;background:var(--bg-sink);border-radius:3px;padding:1px 5px;margin-right:4px;color:var(--text-dim)}.showcase .badge{font-size:10.5px;font-weight:600;letter-spacing:.3px;vertical-align:middle;padding:1px 7px;border-radius:20px;margin-left:6px;background:var(--bg-sink);color:var(--text-faint)}.showcase .badge.live{background:#e4f5e6;color:#1f7a2e}.showcase .live-bar{display:flex;align-items:center;gap:10px;padding:9px 15px;border-bottom:1px solid var(--border);background:var(--bg-alt)}.showcase .live-bar .k{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.4px;flex:0 0 auto}.showcase .live-bar .u{flex:1 1 auto;min-width:0;overflow-x:auto;white-space:nowrap;font-family:var(--mono);font-size:12px;color:var(--link)}.showcase .live-bar .copy{flex:0 0 auto;font-size:12px;font-weight:550;cursor:pointer;padding:4px 11px;border-radius:5px;border:1px solid var(--border-strong);background:var(--bg);color:var(--text)}.showcase .live-bar .copy:hover{background:var(--bg-sink)}.hint{font-size:12px;color:var(--text-faint);line-height:1.5;margin:16px 0 0}.hint code{font-family:var(--mono);font-size:11.5px;background:var(--bg-sink);border-radius:3px;padding:1px 5px}.demo-callout{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border:1px solid var(--border);border-left:3px solid #3f3dd6;border-radius:8px;background:var(--bg-alt);padding:14px 16px;margin:18px 0 2px}.demo-callout .dc-t{font-size:14px;font-weight:650;margin:0 0 3px}.demo-callout .dc-d{font-size:12.5px;color:var(--text-dim);margin:0;max-width:640px;line-height:1.5}.demo-callout .dc-d code{font-family:var(--mono);font-size:11.5px;background:var(--bg-sink);border-radius:3px;padding:1px 5px}.demo-callout .dc-row{display:flex;align-items:center;gap:8px}.demo-callout .dc-u{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--text);background:var(--bg);border:1px solid var(--border-strong);border-radius:6px;padding:6px 12px}.demo-callout .copy{font-size:12px;font-weight:550;cursor:pointer;padding:6px 12px;border-radius:6px;border:1px solid var(--border-strong);background:var(--bg);color:var(--text)}.demo-callout .copy:hover{background:var(--bg-sink)}.showcase .cols{display:flex;align-items:stretch}.showcase .preview-col{flex:0 0 300px;padding:18px 16px;background:var(--bg-alt);border-right:1px solid var(--border);display:flex;align-items:flex-start;justify-content:center}.showcase .code-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.showcase .code-col .panels{flex:1 1 auto}.shot-ph{width:244px;aspect-ratio:9 / 19;border:1px dashed var(--border-strong);border-radius:20px;background:var(--bg);color:var(--text-faint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.shot-ph span{font-size:12px;letter-spacing:.3px}@media(max-width:860px){.showcase .cols{flex-direction:column}.showcase .preview-col{flex-basis:auto;border-right:none;border-bottom:1px solid var(--border)}}@media(max-width:720px){.page-wrap{padding:18px 16px 60px}.hero h1{font-size:23px}.sidebar{position:static;width:100%;flex-basis:auto;height:auto;border-right:none;border-bottom:1px solid var(--border)}.shell{flex-direction:column}.content{padding:16px 16px 60px}}