:root{--font-display:"Space Grotesk",system-ui,sans-serif;--font-body:"Inter",system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--bg:#11151E;--bg-deep:#0C0F16;--surface:#171D29;--surface-2:#1F2735;--elevated:#283143;--border:#2C3648;--border-strong:#3C4960;--text:#F5F8FC;--text-2:#AEB9CC;--text-3:#717D90;--green:#39FF88;--cyan:#31D7FF;--purple:#A855F7;--yellow:#F8D66D;--danger:#FF6B6B;--accent:var(--green);--accent-soft:rgba(57,255,136,0.14);--accent-line:rgba(57,255,136,0.38);--accent-glow:rgba(57,255,136,0.30);--accent-ink:#062815;--speed:1;--radius:16px;--radius-sm:10px;--radius-lg:26px;--maxw:1180px}[data-bg=dark]{--bg:#06080D;--bg-deep:#04060A;--surface:#0D121B;--surface-2:#131A26;--elevated:#1A2231;--border:#1F2838;--border-strong:#2E3A4E}[data-accent=green]{--accent:var(--green);--accent-soft:rgba(57,255,136,0.13);--accent-line:rgba(57,255,136,0.40);--accent-glow:rgba(57,255,136,0.30);--accent-ink:#052a15}[data-accent=cyan]{--accent:var(--cyan);--accent-soft:rgba(49,215,255,0.13);--accent-line:rgba(49,215,255,0.40);--accent-glow:rgba(49,215,255,0.30);--accent-ink:#042530}[data-accent=purple]{--accent:var(--purple);--accent-soft:rgba(168,85,247,0.16);--accent-line:rgba(168,85,247,0.46);--accent-glow:rgba(168,85,247,0.34);--accent-ink:#f3e9ff}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body{background-image:radial-gradient(1100px 620px at 82% -12%,var(--accent-soft),transparent 62%),radial-gradient(820px 520px at -6% 2%,rgba(168,85,247,.06),transparent 58%);background-attachment:fixed}[data-bg=dark] body{background-blend-mode:normal}body:before{content:"";position:fixed;inset:0;background:radial-gradient(140% 90% at 50% -20%,transparent 55%,var(--bg) 100%);pointer-events:none;z-index:0}#root{position:relative;z-index:1}::selection{background:var(--accent);color:var(--accent-ink)}a{color:inherit;text-decoration:none}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.02;margin:0;text-wrap:balance}p{margin:0}.mono{font-family:var(--font-mono)}.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}section{position:relative}.section-pad{padding:116px 0}@media (max-width:720px){.section-pad{padding:78px 0}}.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;color:var(--text-2);background:var(--surface);border:1px solid var(--border);padding:7px 13px;border-radius:999px}.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-glow);animation:pulse calc(2.4s * var(--speed)) infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 8px transparent}to{box-shadow:0 0 0 0 transparent}}.kicker{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.btn{font-family:var(--font-display);font-weight:600;font-size:15.5px;border:none;cursor:pointer;border-radius:12px;padding:14px 22px;display:inline-flex;align-items:center;gap:9px;transition:transform .14s ease,filter .18s ease,box-shadow .2s ease;white-space:nowrap}.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 1px var(--accent-line),0 12px 34px -12px var(--accent-glow)}.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 0 0 1px var(--accent),0 16px 40px -12px var(--accent-glow)}.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-strong)}.btn-ghost:hover{background:var(--surface-2);transform:translateY(-1px)}.input{font-family:var(--font-mono);font-size:15px;background:var(--bg-deep);border:1px solid var(--border-strong);color:var(--text);border-radius:12px;padding:14px 16px;width:100%;outline:none;transition:border-color .16s ease,box-shadow .16s ease}.input::placeholder{color:var(--text-3)}.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.capture{display:flex;gap:10px;align-items:stretch;background:var(--surface);border:1px solid var(--border-strong);border-radius:16px;padding:8px;max-width:480px}.capture .input{background:transparent;border:none}.capture .input:focus{box-shadow:none}@media (max-width:520px){.capture{flex-direction:column}.capture .btn{justify-content:center}}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.panel-elev{background:var(--surface-2)}.win{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}.win-bar{display:flex;align-items:center;gap:8px;padding:12px 15px;background:var(--surface-2);border-bottom:1px solid var(--border)}.win-bar .lights{display:flex;gap:6px}.win-bar .lights i{width:11px;height:11px;border-radius:50%;display:block}.win-bar .lights i:first-child{background:#FF6B6B}.win-bar .lights i:nth-child(2){background:#F8D66D}.win-bar .lights i:nth-child(3){background:#39FF88}.win-bar .title{font-size:12.5px;color:var(--text-3);margin-left:6px}.tag,.win-bar .title{font-family:var(--font-mono)}.tag{font-size:11.5px;padding:3px 9px;border-radius:7px;border:1px solid var(--border-strong);color:var(--text-2);white-space:nowrap}.tag.green{color:var(--green);border-color:rgba(57,255,136,.35);background:rgba(57,255,136,.08)}.tag.cyan{color:var(--cyan);border-color:rgba(49,215,255,.35);background:rgba(49,215,255,.08)}.tag.purple{color:var(--purple);border-color:rgba(168,85,247,.4);background:rgba(168,85,247,.1)}.tag.yellow{color:var(--yellow);border-color:rgba(248,214,109,.35);background:rgba(248,214,109,.08)}.evt{font-family:var(--font-mono);font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:9px;padding:5px 0}.evt .k{color:var(--text-3)}.evt.ok .v{color:var(--green)}.evt.warn .v{color:var(--yellow)}.evt.bad .v{color:var(--danger)}.touch{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--chan,var(--accent));border-radius:12px;padding:12px 14px}.touch .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--chan,var(--accent)) 16%,transparent);color:var(--chan,var(--accent))}.touch .ic svg{width:18px;height:18px}.touch .body{min-width:0;display:flex;flex-direction:column;gap:1px}.touch .body .t{font-weight:600;font-size:14px;font-family:var(--font-display)}.touch .body .s{font-size:12.5px}.touch .body .s,.touch .when{color:var(--text-3);font-family:var(--font-mono)}.touch .when{margin-left:auto;font-size:11px;white-space:nowrap;flex:none}.chan-email{--chan:var(--green)}.chan-popup{--chan:var(--cyan)}.chan-banner{--chan:var(--purple)}.chan-inter{--chan:var(--yellow)}.chan-stop{--chan:var(--danger)}.h1{font-size:clamp(40px,6.4vw,78px)}.h2{font-size:clamp(30px,4.2vw,52px)}.h3{font-size:clamp(21px,2.4vw,29px)}.lead{font-size:clamp(17px,1.5vw,21px);color:var(--text-2);line-height:1.5}.muted{color:var(--text-3)}.grad-accent,.hl{color:var(--accent)}.hl{position:relative}.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}@keyframes fadein{0%{opacity:0}to{opacity:1}}.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em}.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:17px;box-shadow:0 0 22px -6px var(--accent-glow)}.dirsw{display:flex;gap:4px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:4px}.dirsw button{font-family:var(--font-mono);font-size:12px;border:none;background:transparent;color:var(--text-3);padding:7px 11px;border-radius:8px;cursor:pointer;transition:all .14s ease;white-space:nowrap}.dirsw button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}.dirsw button:not(.on):hover{color:var(--text);background:var(--surface-2)}@media (max-width:560px){.dirsw .lbl{display:none}}.grid{display:grid;grid-gap:18px;gap:18px}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}@media (max-width:920px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}@media (max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}@media (max-width:760px){.example-split{grid-template-columns:1fr!important}}