.demo-page{background:var(--bg);min-height:100vh;color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.demo-header{z-index:20;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(14px);position:sticky;top:0}.demo-header-in{align-items:center;gap:16px;width:min(820px,100vw - 40px);height:64px;margin:0 auto;display:flex}.demo-brand{color:var(--ink);align-items:center;gap:10px;min-width:0;text-decoration:none;display:inline-flex}.demo-logo{color:#fff;background:linear-gradient(135deg,#3157e8,#7c3aed);border-radius:10px;flex:none;place-items:center;width:32px;height:32px;font-size:15px;font-weight:800;display:grid}.demo-brand b{font-size:15px;font-weight:700}.demo-brand i{color:var(--muted);font-size:13px;font-style:normal}.demo-nav{flex:none;align-items:center;gap:6px;margin-left:auto;display:flex}.demo-nav a{color:var(--muted);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;text-decoration:none}.demo-nav a:hover{background:var(--panel);color:var(--ink)}.demo-theme,.demo-lang{border:1px solid var(--line);background:var(--panel);width:34px;height:34px;color:var(--ink);cursor:pointer;border-radius:10px;place-items:center;font:600 12px Inter,sans-serif;display:inline-grid}.demo-theme:hover,.demo-lang:hover{border-color:#c9d2e4}.demo-wrap{width:min(760px,100vw - 40px);margin:0 auto;padding:38px 0 84px}.demo-hero{margin-bottom:26px}.demo-kicker{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;align-items:center;gap:7px;padding:5px 12px;font-size:11px;font-weight:800;display:inline-flex}.demo-hero h1{letter-spacing:-.03em;margin:14px 0 10px;font-size:clamp(26px,4vw,34px);line-height:1.15}.demo-lead{max-width:640px;color:var(--muted);margin:0;font-size:14.5px;line-height:1.7}.demo-card{border:1px solid var(--line);background:var(--panel);border-radius:22px;margin:16px 0;padding:24px;transition:border-color .2s,box-shadow .2s,background .2s;animation:.45s both demo-rise;box-shadow:0 1px 2px #1018280a}.demo-card:nth-of-type(2){animation-delay:60ms}.demo-card:nth-of-type(3){animation-delay:.12s}.demo-card:nth-of-type(4){animation-delay:.18s}.demo-card h2{letter-spacing:-.01em;align-items:center;gap:10px;margin:0 0 14px;font-size:15px;font-weight:800;display:flex}.demo-num{background:color-mix(in srgb, var(--accent) 14%, transparent);width:24px;height:24px;color:var(--accent);border-radius:50%;place-items:center;font-size:12px;font-weight:800;display:inline-grid}.demo-muted{color:var(--muted);margin:12px 0 0;font-size:13px;line-height:1.65}.demo-card code{background:color-mix(in srgb, var(--ink) 7%, transparent);border-radius:6px;padding:1px 5px;font:12px JetBrains Mono,ui-monospace,monospace}.demo-card pre{color:#dbe3f5;background:#10141f;border-radius:14px;max-height:320px;margin:0;padding:16px 18px;font:12.5px/1.65 JetBrains Mono,ui-monospace,monospace;overflow:auto}.demo-card.is-premium{border-color:color-mix(in srgb, #f59e0b 45%, var(--line));background:radial-gradient(400px 180px at 100% 0%, #f59e0b24, transparent 70%), var(--panel)}.demo-card.is-free{border-color:color-mix(in srgb, var(--accent) 30%, var(--line))}.demo-badge{color:#b45309;text-transform:uppercase;letter-spacing:.04em;background:#f59e0b2e;border-radius:999px;align-items:center;gap:5px;padding:4px 11px;font-size:11px;font-weight:800;display:inline-flex}.demo-badge.free{background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent)}.demo-card p{margin:12px 0 0;font-size:14px;line-height:1.65}.demo-actions{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.demo-btn{border:1px solid var(--line);background:var(--panel);height:37px;color:var(--ink);cursor:pointer;border-radius:999px;align-items:center;gap:7px;padding:0 16px;font:600 13px inherit;transition:background .15s,transform .12s;display:inline-flex}.demo-btn:hover{background:color-mix(in srgb, var(--ink) 5%, var(--panel))}.demo-btn:active{transform:scale(.97)}.demo-btn:disabled{opacity:.6;cursor:default}.demo-foot{color:var(--muted);margin:26px 0 0;font-size:12.5px}.demo-foot a{color:var(--accent);text-decoration:none}.demo-foot a:hover{text-decoration:underline}@keyframes demo-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.demo-card{animation:none}}