:root{--paper:#07090a;--surface:#10171a;--surface-2:#141d21;--ink:#e8eef5;--ink-2:#c7d6db;--ink-muted:#8a9ca3;--line:#1d2a30;--line-strong:#2a3a42;--accent:#0d5f74;--accent-ink:#7fd1e2;--accent-soft:#12303a;--warm:#f4b860;--sans:"Geist","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;--mono:"Geist Mono","SF Mono",ui-monospace,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0;line-height:1.6}a{color:var(--accent-ink)}.wrap{max-width:1160px;margin:0 auto;padding:0 24px}html[data-lang=zh] [lang=en],html[data-lang=en] [lang=zh]{display:none}header{z-index:5;backdrop-filter:blur(10px);background:#07090acc;border-bottom:1px solid #0000;transition:border-color .2s;position:sticky;top:0}header.scrolled{border-bottom-color:var(--line)}.nav{align-items:center;gap:22px;height:64px;display:flex}.logo{font:700 22px var(--mono);letter-spacing:-.02em;color:var(--ink);text-decoration:none}.logo span{color:var(--accent-ink)}.nav nav{gap:20px;margin-left:auto;font-size:15px;display:flex}.nav nav a{color:var(--ink-2);text-decoration:none}.nav nav a:hover,.nav nav a.on{color:var(--accent-ink)}.lang{border:1px solid var(--line-strong);border-radius:999px;display:flex;overflow:hidden}.lang button{font:600 13px var(--mono);cursor:pointer;color:var(--ink-muted);background:0 0;border:0;padding:6px 12px}html[data-lang=zh] .lang [data-l=zh],html[data-lang=en] .lang [data-l=en]{background:var(--ink);color:#07090a}.hero{text-align:center;padding:72px 0 40px}.hero h1{letter-spacing:-.03em;margin:0;font-size:clamp(40px,7vw,84px);font-weight:800;line-height:1.08}.hero h1 em{color:var(--accent-ink);font-style:normal}.hero .sub{color:var(--ink-2);max-width:720px;margin:22px auto 0;font-size:clamp(17px,2.2vw,22px)}.cta{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px;display:flex}.btn{border:1px solid var(--line-strong);color:var(--ink);background:var(--surface);border-radius:12px;align-items:center;gap:8px;padding:12px 22px;font-size:16px;font-weight:650;text-decoration:none;display:inline-flex}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn:hover{transform:translateY(-1px)}.screen{background:var(--surface);border:1px solid var(--line-strong);aspect-ratio:16/9;border-radius:16px;position:relative;overflow:hidden;box-shadow:0 40px 80px -40px #0f1a1d73}.screen iframe{pointer-events:none;border:0;width:100%;height:100%;position:absolute;inset:0}.screen.big{max-width:1100px;margin:48px auto 0}main section{scroll-margin-top:64px}section.feat{border-top:1px solid var(--line);padding:84px 0}.feat .grid>*{min-width:0}.feat .grid{grid-template-columns:.9fr 1.3fr;align-items:center;gap:56px;display:grid}.feat.flip .grid{grid-template-columns:1.3fr .9fr}.feat.flip .text{order:2}.kicker{font:600 14px var(--mono);letter-spacing:.08em;color:var(--accent-ink);text-transform:uppercase;margin:0 0 12px}.feat h2{letter-spacing:-.01em;margin:0 0 18px;font-size:clamp(28px,3.6vw,42px);line-height:1.2}.feat p{color:var(--ink-2);margin:0 0 14px;font-size:18px}.feat ul{gap:10px;margin:18px 0 0;padding:0;list-style:none;display:grid}.feat li{color:var(--ink-2);padding-left:26px;font-size:16px;position:relative}.feat li:before{content:"";background:var(--accent);width:14px;height:2px;position:absolute;top:.7em;left:0}.chips{flex-wrap:wrap;gap:8px;margin-top:20px;display:flex}.chips a{font:14px var(--mono);color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:4px 12px;text-decoration:none}.chips a:hover{background:var(--accent);color:#fff}section.start{border-top:1px solid var(--line);padding:84px 0}.start h2,.examples h2{text-align:center;margin:0 0 32px;font-size:clamp(28px,3.6vw,42px)}.steps{counter-reset:s;grid-template-columns:repeat(3,1fr);gap:22px;display:grid}.step{background:var(--surface);border:1px solid var(--line);counter-increment:s;border-radius:16px;min-width:0;padding:24px}.step:before{content:counter(s);background:var(--accent);color:#fff;width:34px;height:34px;font:600 16px var(--mono);border-radius:50%;place-items:center;margin-bottom:14px;display:inline-grid}.step h3{margin:0 0 8px;font-size:20px}.step p{color:var(--ink-2);margin:0 0 14px;font-size:16px}pre{color:#d6e2e5;font:14px/1.6 var(--mono);white-space:pre;background:#0f1719;border-radius:12px;margin:0;padding:14px 16px;overflow-x:auto}pre .c{color:#7d9096}.say{background:var(--accent-soft);color:var(--ink);border-radius:12px;padding:12px 16px;font-size:16px}section.examples{border-top:1px solid var(--line);padding:84px 0}.cards{grid-template-columns:repeat(2,1fr);gap:22px;display:grid}.card{color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:18px;text-decoration:none;transition:transform .2s,box-shadow .2s;display:block;overflow:hidden}.card:hover{transform:translateY(-3px);box-shadow:0 30px 60px -35px #0f1a1d73}.card .screen{box-shadow:none;border:0;border-bottom:1px solid var(--line);border-radius:0}.card div.t{padding:18px 22px 22px}.card b{font-size:20px;display:block}.card span.d{color:var(--ink-muted);font-size:15px}footer{border-top:1px solid var(--line);color:var(--ink-muted);padding:40px 0 56px;font-size:15px}footer .wrap{flex-wrap:wrap;align-items:center;gap:24px;display:flex}footer .sp{flex:1}@media (width<=860px){.nav{gap:12px}.nav nav{gap:12px;font-size:14px}.nav nav a[href^="https://github"],html[data-lang=zh] .lang [data-l=zh],html[data-lang=en] .lang [data-l=en]{display:none}.lang{flex:none}.lang button{white-space:nowrap;padding:6px 10px}.feat .grid,.feat.flip .grid{grid-template-columns:1fr;gap:28px}.feat.flip .text{order:0}.steps,.cards{grid-template-columns:1fr}section.feat,section.start,section.examples{padding:56px 0}.hero{padding:48px 0 24px}}@media (width<=420px){.logo{font-size:19px}.nav{gap:8px}.nav nav{gap:9px;font-size:13px}.lang button{padding:5px 8px;font-size:12px}}body.dark{color:#e8eef5;background:#07090a}body.dark header{background:#07090acc;border-bottom-color:#0000}body.dark header.scrolled{border-bottom-color:#1d2a30}body.dark .logo{color:#fff}body.dark .logo span{color:#4fb3c9}body.dark .nav nav a{color:#a9bac0}body.dark .nav nav a:hover,body.dark .nav nav a.on{color:#7fd1e2}body.dark .lang{border-color:#33444c}body.dark .lang button{color:#7d9096}body.dark footer{color:#7d9096;border-top-color:#1d2a30}body.dark footer a{color:#a9bac0}header{transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .2s}body.immersive header{transform:translateY(-100%)}.fx-mini a span{white-space:nowrap;text-shadow:0 0 6px #07090a,0 0 12px #07090a;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;position:absolute;right:30px;transform:translate(6px)}.fx-mini:hover a span{opacity:1;transform:none}.fx-mini:before{content:"";opacity:0;pointer-events:none;background:linear-gradient(270deg,#07090a 55%,#07090a00);width:300px;transition:opacity .25s;position:absolute;top:-24px;bottom:-24px;right:-28px}.fx-mini:hover:before{opacity:1}.fx-mini a{color:#4a5a60;align-items:center;gap:10px;min-height:14px;padding:5px 0;text-decoration:none;transition:color .25s;display:flex;position:relative}.fx-mini a i{background:#22313a;border-radius:1px;flex:none;width:14px;height:2px;margin-left:auto;font-size:0;transition:all .25s;display:block}.fx-mini a:hover{color:#c7d6db}.fx-mini a.done{color:#7d9096}.fx-mini a.done i{background:#2a4a52}.fx-mini a.on{color:#fff}.fx-mini a.on i{background:#e8eef5;width:24px}