:root{--demo-accent:#16fffa;--demo-accent-glow:#16fffa59;--demo-backdrop:#0d0d14;--demo-blue:#007aff;--demo-bronze:#7d5433;--demo-drop:#3cf;--demo-swap:#0078ff40;--demo-card:#26262e;--demo-card-border:#4d4d5980;--demo-card-hover:#69f;--demo-card-selected:#4dcc66;--demo-ws-label:#4db3ff;--demo-dim:#1a1a1fb3;--demo-win-bg:#1e1e24;--demo-win-bar:#2a2a32;--demo-win-border:#ffffff14;--demo-term-bg:#101016;--demo-term-green:#4dcc66;--demo-term-fg:#e6e6eb;--demo-glass:#16161cb8;--demo-wallpaper:linear-gradient(135deg, #1a1d2e 0%, #16182b 45%, #0f1120 100%);--demo-traffic-r:#ff5f57;--demo-traffic-y:#febc2e;--demo-traffic-g:#28c840;--page-bg:#f8f4ec;--page-surface:#fffdf8;--page-fg:#2b1a14;--page-muted:#2b1a149e;--page-accent:#a65136;--page-accent-strong:#763424;--page-accent-soft:#a651361f;--page-link:#9c4b32;--page-frame-border:#76342424;--page-key-bg:linear-gradient(#fffdf8, #efe9dd);--page-key-border:#d8cfc0;--page-key-fg:#4a2e22;--r-frame:16px;--r-win:10px;--r-panel:14px;--r-bar:8px;--r-key:6px;--r-pill:999px;--shadow-win:0 12px 32px #00000073;--shadow-panel:0 24px 64px #0000008c;--font-ui:system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:ui-monospace, "SF Mono", "JetBrains Mono", monospace;--ease-settle:cubic-bezier(.16, 1, .3, 1);--dur-settle:.4s;--ease-cubic:cubic-bezier(.65, 0, .35, 1);--dur-cubic:.35s;--ease-ui:cubic-bezier(.4, 0, .6, 1);--dur-ui:.12s;--ease-quake-in:cubic-bezier(.42, 0, 1, 1);--dur-quake:.2s;--ease-smooth:cubic-bezier(.333, 0, .667, 1);--ease-hand:cubic-bezier(.5, 0, .5, 1);--ease-pop:cubic-bezier(.32, 1.24, .4, 1)}:root[data-theme=dark]{--page-bg:#141210;--page-surface:#1c1815;--page-fg:#efe9e0;--page-muted:#efe9e09e;--page-accent:#c76a4b;--page-accent-strong:#e8b3a0;--page-accent-soft:#c76a4b29;--page-link:#cd7659;--page-frame-border:#efe9e01f;--page-key-bg:linear-gradient(#2a2521, #1e1a17);--page-key-border:#3d352f;--page-key-fg:#e8ddd0}*{box-sizing:border-box}body{font-family:var(--font-ui);background:var(--page-bg);color:var(--page-fg);-webkit-font-smoothing:antialiased;margin:0;line-height:1.6}a{color:var(--page-link)}:focus-visible{outline:2px solid var(--page-accent);outline-offset:2px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.container{width:min(1080px,92vw);margin-inline:auto}.section{content-visibility:auto;contain-intrinsic-size:auto 640px;padding:72px 0}.section-head{text-align:center;max-width:640px;margin:0 auto 40px}.section-head :is(h1,h2){letter-spacing:-.01em;margin:0 0 12px;font-size:clamp(26px,4vw,36px);line-height:1.15}.section-head p{color:var(--page-muted);margin:0}.btn{transition:background var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui);border:1px solid #0000;border-radius:10px;align-items:center;gap:8px;padding:11px 22px;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--page-accent);color:#fff8f2}.btn-primary:hover{background:var(--page-accent-strong)}:root[data-theme=dark] .btn-primary{color:#1c120d}:root[data-theme=dark] .btn-primary:hover{background:var(--page-accent);filter:brightness(1.1)}.btn-ghost{border-color:var(--page-frame-border);color:var(--page-fg);background:var(--page-surface)}.btn-ghost:hover{border-color:var(--page-accent)}.mono{font-family:var(--font-mono)}.demo{flex-direction:column;gap:14px;display:flex}.demo .keys{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.demo .caption{text-align:center;color:var(--page-muted);margin:0;font-size:14px}.demo.is-resetting,.demo.is-resetting *{transition:none!important}.demo.is-live[data-demo] .mock-win,.demo.is-live .strip,.demo.is-live .mover,.demo.is-live .cursor{will-change:transform}.site-header:where(.astro-34bx5uxl){z-index:20;background:color-mix(in srgb, var(--page-bg) 82%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--page-frame-border);position:sticky;top:0}.header-inner:where(.astro-34bx5uxl){justify-content:space-between;align-items:center;height:68px;display:flex}.brand:where(.astro-34bx5uxl){align-items:center;display:inline-flex}.logo:where(.astro-34bx5uxl){width:auto;height:44px}.logo:where(.astro-34bx5uxl).narrow-only{height:36px;display:none}:root[data-theme=dark] .logo:where(.astro-34bx5uxl){filter:brightness(0)invert()sepia(.06)saturate(.8)}@media (width<=560px){.logo:where(.astro-34bx5uxl).wide-only{display:none}.logo:where(.astro-34bx5uxl).narrow-only{display:block}}.nav:where(.astro-34bx5uxl){align-items:center;gap:22px;font-size:14.5px;font-weight:500;display:flex}.nav:where(.astro-34bx5uxl) a:where(.astro-34bx5uxl){color:var(--page-fg);text-decoration:none}.nav:where(.astro-34bx5uxl) a:where(.astro-34bx5uxl):hover{color:var(--page-accent)}@media (width<=560px){.nav:where(.astro-34bx5uxl) a:where(.astro-34bx5uxl):not(:last-of-type){display:none}}.theme-toggle:where(.astro-34bx5uxl){border:1px solid var(--page-frame-border);background:var(--page-surface);color:var(--page-fg);cursor:pointer;border-radius:8px;width:34px;height:34px;font-size:15px;line-height:1}.tt-moon:where(.astro-34bx5uxl),:root[data-theme=dark] .theme-toggle:where(.astro-34bx5uxl) .tt-sun:where(.astro-34bx5uxl){display:none}:root[data-theme=dark] .theme-toggle:where(.astro-34bx5uxl) .tt-moon:where(.astro-34bx5uxl){display:inline}.footer:where(.astro-ocqibz2a){border-top:1px solid var(--page-frame-border);padding:48px 0 64px;font-size:14px}.cols:where(.astro-ocqibz2a){grid-template-columns:2fr 1fr 1fr;gap:32px;display:grid}.col:where(.astro-ocqibz2a){flex-direction:column;align-items:flex-start;gap:8px;display:flex}.col:where(.astro-ocqibz2a) b:where(.astro-ocqibz2a){margin-bottom:4px}.col:where(.astro-ocqibz2a) p:where(.astro-ocqibz2a){color:var(--page-muted);margin:0}.col:where(.astro-ocqibz2a) a:where(.astro-ocqibz2a){color:var(--page-muted);text-decoration:none}.col:where(.astro-ocqibz2a) a:where(.astro-ocqibz2a):hover{color:var(--page-accent)}@media (width<=640px){.cols:where(.astro-ocqibz2a){grid-template-columns:1fr}}.frame:where(.astro-co2ttyoz){border:1px solid var(--page-frame-border);border-radius:var(--r-frame);width:100%;overflow:hidden;box-shadow:0 2px 24px #3c1e1414;container-type:size}.desktop:where(.astro-co2ttyoz){background:var(--demo-wallpaper);width:100%;height:100%;font-family:var(--font-ui);position:relative}.menubar:where(.astro-co2ttyoz){backdrop-filter:blur(8px);color:#ffffff8c;z-index:3;background:#1010188c;justify-content:space-between;align-items:center;height:4.5%;min-height:16px;padding:0 2.2%;font-size:clamp(6px,1.6cqw,11px);display:flex;position:absolute;inset:0 0 auto}.mb-left:where(.astro-co2ttyoz){gap:1.6em;display:flex}.mb-app:where(.astro-co2ttyoz){color:#ffffffd9;font-weight:600}.notch:where(.astro-co2ttyoz){z-index:4;opacity:0;width:18%;height:4.5%;min-height:16px;transition:opacity .25s var(--ease-ui);background:#000;border-radius:0 0 6px 6px;position:absolute;top:0;left:50%;transform:translate(-50%)}.mock-win:where(.astro-eokwpega){background:var(--demo-win-bg);border:1px solid var(--demo-win-border);border-radius:var(--r-win);box-shadow:var(--shadow-win);flex-direction:column;display:flex;position:absolute;overflow:hidden}.mock-win:where(.astro-eokwpega).is-focused{box-shadow:0 0 0 2.5px var(--demo-accent), 0 0 14px var(--demo-accent-glow), var(--shadow-win)}.win-bar:where(.astro-eokwpega){background:var(--demo-win-bar);flex:none;align-items:center;gap:4%;height:clamp(12px,14%,22px);max-height:22px;padding:0 5%;display:flex}.tl:where(.astro-eokwpega){aspect-ratio:1;border-radius:50%;flex:none;width:clamp(4px,6%,8px)}.tl-r:where(.astro-eokwpega){background:var(--demo-traffic-r)}.tl-y:where(.astro-eokwpega){background:var(--demo-traffic-y)}.tl-g:where(.astro-eokwpega){background:var(--demo-traffic-g)}.win-title:where(.astro-eokwpega){color:#ffffff8c;white-space:nowrap;font-size:clamp(5px,1.4cqw,10px);overflow:hidden}.win-body:where(.astro-eokwpega){flex-direction:column;flex:1;gap:9%;padding:8% 7%;display:flex;position:relative}.sk:where(.astro-eokwpega){background:#ffffff21;border-radius:99px;height:7%;min-height:3px;display:block}.sk-a:where(.astro-eokwpega){background:#ffffff38;width:72%}.sk-b:where(.astro-eokwpega){width:88%}.sk-c:where(.astro-eokwpega){width:55%}.v-notes:where(.astro-eokwpega) .sk-a:where(.astro-eokwpega){background:#ffd68273}.v-browser:where(.astro-eokwpega) .sk-a:where(.astro-eokwpega){background:#6699ff73}.v-terminal:where(.astro-eokwpega){background:var(--demo-term-bg)}.v-terminal:where(.astro-eokwpega) .win-body:where(.astro-eokwpega){font-family:var(--font-mono);color:var(--demo-term-fg);gap:6%;font-size:clamp(6px,1.7cqw,11px)}.prompt:where(.astro-eokwpega){color:var(--demo-term-green)}.keycap{align-items:center;gap:6px;display:inline-flex;& kbd{border:1px solid var(--page-key-border);border-radius:var(--r-key);background:var(--page-key-bg);min-width:28px;height:28px;color:var(--page-key-fg);font-family:var(--font-ui);transition:transform var(--dur-ui) var(--ease-ui), background var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui);border-bottom-width:2px;justify-content:center;align-items:center;padding:0 7px;font-size:13px;display:inline-flex}&.is-pressed kbd{background:var(--page-accent-soft);border-bottom-width:1px;border-color:var(--page-accent);color:var(--page-accent);transform:translateY(1px)}& .plus{color:var(--page-muted);font-size:12px}& .key-label{color:var(--page-muted);margin-left:4px;font-size:13px}}[data-playground]{outline:none;& .frame{transition:box-shadow var(--dur-ui) var(--ease-ui)}&:focus-visible .frame{box-shadow:0 0 0 3px var(--page-accent)}& .desktop{overscroll-behavior-x:contain}& .pg-strip{transform:translateX(calc(var(--pan,0) * -100cqw));transition:transform .45s var(--ease-settle);position:absolute;inset:0}&.is-panning .pg-strip{transition:none}& .pg-strip .mock-win{cursor:pointer;transition:left .45s var(--ease-settle), top .45s var(--ease-settle), width .45s var(--ease-settle), height .45s var(--ease-settle), opacity .25s var(--ease-ui), transform .25s var(--ease-settle), box-shadow var(--dur-ui) var(--ease-ui)}& .pg-strip .mock-win.is-hidden-tab{opacity:0;pointer-events:none}& .pg-tabs{height:4cqh;transition:left .45s var(--ease-settle), width .45s var(--ease-settle);gap:.6cqw;display:flex;position:absolute}& .pg-tab{border:1px solid var(--demo-win-border);background:var(--demo-glass);color:#ffffff8c;min-width:0;font:inherit;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;border-radius:.8cqw;flex:1 1 0;padding:0 .8cqw;font-size:clamp(6px,1.4cqw,10px);overflow:hidden}& .pg-tab.is-active{color:#fff;border-color:var(--demo-accent)}& .pg-empty,& .pg-try{color:#fff9;pointer-events:none;margin:0;font-size:clamp(10px,2cqw,15px);position:absolute;top:52%;left:50%;transform:translate(-50%,-50%)}& .pg-empty{display:none}&.is-empty .pg-empty{display:block}& .pg-try{border-radius:var(--r-pill);background:var(--demo-glass);color:#fff;transition:opacity var(--dur-ui) var(--ease-ui);z-index:9;padding:.6em 1.2em;top:auto;bottom:6cqh}&:focus-within .pg-try{opacity:0}& .pg-key{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;padding:0}& .pg-lessons{border:1px solid var(--page-frame-border);background:var(--page-surface);border-radius:14px;padding:18px 22px}& .pg-steps{flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none;display:flex}& .pg-step{border:1px solid var(--page-frame-border);border-radius:var(--r-pill);width:28px;height:28px;color:var(--page-muted);font:inherit;cursor:pointer;background:0 0;font-size:12px}& .pg-step.is-done{background:var(--page-accent-soft);color:var(--page-fg)}& .pg-step.is-current{border-color:var(--page-accent);color:var(--page-fg)}& .pg-lesson h2{margin:0 0 6px;font-size:20px}& .pg-lesson p{color:var(--page-muted);margin:0}& .pg-nav{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin-top:16px;display:flex;& .btn{font:inherit;cursor:pointer;padding:7px 16px;font-size:14px;font-weight:600}& .btn:disabled{opacity:.4;cursor:default;transform:none}}& .pg-done{color:var(--page-accent);visibility:hidden;margin:0 auto 0 0;font-weight:600}&.is-done .pg-done{visibility:visible}}@starting-style{[data-playground] .pg-strip .mock-win{opacity:0;transform:scale(.94)}}@media (prefers-reduced-motion:reduce){[data-playground] .pg-strip,[data-playground] .pg-strip .mock-win,[data-playground] .pg-tabs{transition:none}}