:root{--font-sans:"Space Grotesk", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--accent:#2f4bff;--accent-press:color-mix(in oklab, var(--accent) 80%, black);--accent-soft:color-mix(in oklab, var(--accent) 12%, white);--accent-softer:color-mix(in oklab, var(--accent) 7%, white);--on-accent:#fff;--bg:oklch(98.4% .004 95);--surface:#fff;--surface-2:oklch(97.2% .004 95);--surface-3:oklch(95.5% .005 95);--ink:oklch(22% .012 268);--ink-2:oklch(44% .012 268);--ink-3:oklch(60% .01 268);--ink-4:oklch(72% .008 268);--dark:oklch(20.5% .014 268);--dark-2:oklch(25.5% .016 268);--dark-line:oklch(32% .016 268);--dark-ink:oklch(96% .004 268);--dark-ink-2:oklch(72% .012 268);--line:oklch(91.5% .004 268);--line-2:oklch(94.5% .003 268);--wa:oklch(62% .16 150);--wa-soft:oklch(95% .04 150);--hot:oklch(64% .17 35);--hot-soft:oklch(95.5% .04 40);--warn:oklch(72% .15 78);--info:oklch(62% .13 240);--radius:16px;--radius-sm:10px;--radius-lg:22px;--shadow-1:0 1px 2px oklch(20% .02 268/.05), 0 1px 3px oklch(20% .02 268/.04);--shadow-2:0 2px 6px oklch(20% .02 268/.06), 0 8px 24px oklch(20% .02 268/.06);--shadow-3:0 10px 40px oklch(20% .02 268/.12)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}button{cursor:pointer;font-family:inherit}input,select,textarea{font-family:inherit}.stage{flex-direction:column;min-height:100vh;display:flex}.topbar{z-index:60;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);background:oklch(98.4% .004 95/.85);align-items:center;gap:18px;padding:12px 18px;display:flex;position:sticky;top:0}.topbar .brand{letter-spacing:-.02em;white-space:nowrap;align-items:center;gap:10px;font-size:15px;font-weight:800;display:flex}.topbar .brand .logo{background:var(--ink);width:26px;height:26px;color:var(--bg);border-radius:8px;place-items:center;font-size:13px;font-weight:800;display:grid}.seg{background:var(--surface-3);border:1px solid var(--line);border-radius:12px;gap:2px;padding:3px;display:flex}.seg button{color:var(--ink-2);white-space:nowrap;background:0 0;border:0;border-radius:9px;align-items:center;gap:7px;padding:7px 13px;font-size:12.5px;font-weight:600;transition:all .15s;display:flex}.seg button .n{font-family:var(--font-mono);opacity:.55;font-size:10.5px}.seg button:hover{color:var(--ink)}.seg button[data-on=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}.viewport{flex:1;justify-content:center;padding:0;display:flex;overflow:hidden}.viewport.is-mobile{background:radial-gradient(circle at 50% 0%, oklch(96% .01 268), transparent 60%), var(--bg);align-items:flex-start;padding:34px 16px 60px;overflow:auto}.viewport.is-desktop{align-items:stretch}.desktop-frame{flex-direction:column;width:100%;display:flex;overflow:hidden}.mono{font-family:var(--font-mono)}.chip{background:var(--surface-3);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:4px 9px;font-size:11.5px;font-weight:600;display:inline-flex}.chip.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}.chip.accent{background:var(--accent-soft);color:var(--accent-press);border-color:#0000}.tag-mono{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-size:10px}.btn{white-space:nowrap;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:11px;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:13.5px;font-weight:700;transition:all .15s;display:inline-flex}.btn:hover{border-color:var(--ink-4)}.btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 2px 10px color-mix(in oklab, var(--accent) 35%, transparent);border-color:#0000}.btn.primary:hover{background:var(--accent-press)}.btn.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}.btn.wa{background:var(--wa);color:#fff;border-color:#0000}.btn.ghost{color:var(--ink-2);background:0 0;border-color:#0000}.btn.ghost:hover{background:var(--surface-3);color:var(--ink)}.btn.sm{border-radius:9px;padding:7px 12px;font-size:12.5px}.btn.block{width:100%}.imgph{background:repeating-linear-gradient(135deg,oklch(93% .006 268) 0 10px,oklch(95.5% .005 268) 10px 20px);place-items:center;display:grid;position:relative;overflow:hidden}.imgph .lab{font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:oklch(98.5% .004 95/.7);border-radius:6px;padding:4px 8px;font-size:10.5px}.imgph.dark{background:repeating-linear-gradient(135deg,oklch(30% .01 268) 0 10px,oklch(34% .01 268) 10px 20px)}.imgph.dark .lab{color:var(--dark-ink-2);background:oklch(20% .01 268/.6)}.thin-scroll::-webkit-scrollbar{width:10px;height:10px}.thin-scroll::-webkit-scrollbar-thumb{background:oklch(85% .006 268) padding-box padding-box;border:3px solid #0000;border-radius:99px}.thin-scroll::-webkit-scrollbar-thumb:hover{background:oklch(78% .008 268) padding-box padding-box}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes popIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}.fade-up{animation:.4s cubic-bezier(.2,.7,.3,1) both fadeUp}