@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@500;600;700;800&display=swap";
:root{--bg:#020406;--surface:#050a0d;--surface2:#0b1418;--surface3:#141f25;--surface-hover:#1b2a31;--border:#1a2a2f;--border-hover:#263c43;--border-active:#10b981;--accent:#10b981;--accent-hover:#34d399;--accent-dim:#10b98126;--accent-glow:#10b98159;--text:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--text-inverse:#020406;--success:#10b981;--warning:#f59e0b;--error:#ef4444;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--shadow-sm:0 1px 2px #00000080;--shadow-md:0 4px 20px #0009;--shadow-lg:0 12px 48px #000000b3;--shadow-xl:0 24px 72px #000c;--shadow-glow:0 0 28px #10b9814d;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--transition-fast:.15s var(--ease-out);--transition-normal:.25s var(--ease-out);--transition-slow:.4s var(--ease-out);--nav-bg:#020406d9;--title-gradient:linear-gradient(135deg, #fff 40%, #10b981);--preview-gradient:linear-gradient(180deg, #fff 40%, #10b981);--checker-1:#050a0d;--checker-2:#0b1418}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-size:16px}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:9999;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");position:fixed;inset:0}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}h1,h2,h3,h4,h5,h6{letter-spacing:1px;font-family:Bebas Neue,Inter,sans-serif;font-weight:400}input[type=number],input[type=text],select,textarea{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);appearance:textfield;outline:none;width:100%;padding:10px 12px;font-family:JetBrains Mono,monospace;font-size:13px}input::-webkit-outer-spin-button{appearance:none}input::-webkit-inner-spin-button{appearance:none}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}select option{background:var(--surface2)}textarea{resize:none;height:56px;font-family:Inter,sans-serif;font-size:12px;line-height:1.6}input[type=range]{appearance:none;background:var(--border);cursor:pointer;border-radius:2px;outline:none;width:100%;height:3px;position:relative}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);width:16px;height:16px;transition:transform var(--transition-fast), box-shadow var(--transition-fast);box-shadow:0 0 0 0 var(--accent-dim);border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 6px var(--accent-dim);transform:scale(1.2)}input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 8px var(--accent-dim);transform:scale(1.1)}input[type=color]{cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;width:28px;height:28px;padding:0}.mono{font-family:JetBrains Mono,monospace}.display{font-family:Bebas Neue,sans-serif}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes glow-pulse{0%,to{box-shadow:0 0 4px var(--accent-dim)}50%{box-shadow:0 0 16px var(--accent-glow)}}@keyframes slide-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}