@import "https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap";
:root{--bg-deep:#07090d;--bg-surface:#0b0e14;--bg-elevated:#10141d;--bg-glass:#0b0e14c7;--bg-glass-active:#10141deb;--zed-green:#00f59b;--zed-green-hover:#0f8;--zed-emerald:#10b981;--zed-emerald-dark:#059669;--zed-mint:#34d399;--zed-glow:#00f59b38;--zed-glow-intense:#00f59b73;--zed-bg-tint:#00f59b0f;--border-subtle:#ffffff12;--border-zed:#00f59b40;--border-zed-active:#00f59b99;--border-glass:#ffffff1a;--coral-urgent:#ff2e63;--coral-glow:#ff2e6359;--amber-baseline:#f59e0b;--amber-glow:#f59e0b40;--font-display:"Geist", "Outfit", -apple-system, sans-serif;--font-sans:"Geist", -apple-system, sans-serif;--font-mono:"JetBrains Mono", "Geist Mono", monospace;--ease-spring:cubic-bezier(.16, 1, .3, 1);--ease-tactile:cubic-bezier(.2, .8, .2, 1)}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;margin:0;padding:0}html{background-color:var(--bg-deep);scroll-behavior:smooth}body{background-color:var(--bg-deep);color:#e2e8f0;font-family:var(--font-sans);selection-background-color:var(--zed-green);selection-color:#07090d;min-height:100vh;position:relative;overflow-x:hidden}::selection{background:var(--zed-green);color:#07090d}body:before{content:"";pointer-events:none;z-index:0;will-change:transform;background:radial-gradient(circle at 50% 0,#00f59b1f 0%,#0000 60%),radial-gradient(circle at 10% 90%,#10b98114 0%,#0000 50%),radial-gradient(circle at 90% 60%,#00f59b0f 0%,#0000 45%);position:fixed;inset:0;transform:translateZ(0)}body:after{content:"";pointer-events:none;z-index:0;will-change:transform;background-image:linear-gradient(90deg,#00f59b06 1px,#0000 1px),linear-gradient(#00f59b06 1px,#0000 1px);background-size:32px 32px;position:fixed;inset:0;transform:translateZ(0)}.glass-surface{background:var(--bg-glass);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-subtle);transition:border-color .25s var(--ease-spring), box-shadow .25s var(--ease-spring);contain:layout style;border-radius:18px;transform:translateZ(0);box-shadow:0 24px 48px -15px #000c,inset 0 1px #ffffff14}.glass-surface:hover{border-color:#00f59b33;box-shadow:0 28px 52px -15px #000000d9,0 0 20px -5px #00f59b1a,inset 0 1px #ffffff1f}.tactile-key{cursor:pointer;transition:all .15s var(--ease-tactile);-webkit-user-select:none;user-select:none;touch-action:manipulation;background:linear-gradient(#111620 0%,#0c1017 100%);border:1px solid #ffffff14;border-bottom:3px solid #000c;border-radius:14px;padding:16px 18px;position:relative;overflow:hidden;box-shadow:0 10px 20px -5px #0009,inset 0 1px #ffffff1a}.tactile-key:before{content:"";opacity:0;background:linear-gradient(90deg,#0000,#00f59b66,#0000);height:1px;transition:opacity .2s;position:absolute;top:0;left:0;right:0}.tactile-key:hover{border-color:var(--border-zed);box-shadow:0 16px 32px -8px var(--zed-glow), inset 0 1px 0 #ffffff2e;transform:translateY(-2px)}.tactile-key:hover:before{opacity:1}.tactile-key:active{border-bottom-width:1px;transform:translateY(2px);box-shadow:0 4px 8px #000000e6}.tactile-key-selected{border-color:var(--zed-green)!important;box-shadow:0 0 30px var(--zed-glow), inset 0 1px 0 #00f59b66!important;background:linear-gradient(#131e24 0%,#0e161b 100%)!important}.tactile-key-urgent{background:linear-gradient(#260d15 0%,#15070c 100%);border-color:#ff2e634d}.tactile-key-urgent:hover{border-color:var(--coral-urgent);box-shadow:0 16px 32px -8px var(--coral-glow)}.tactile-key-urgent.tactile-key-selected{border-color:var(--coral-urgent)!important;box-shadow:0 0 30px var(--coral-glow)!important}.pill-zed{background:var(--zed-bg-tint);border:1px solid var(--border-zed);color:var(--zed-green);font-family:var(--font-mono);letter-spacing:.04em;border-radius:9999px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-flex;box-shadow:0 0 15px #00f59b1f}.pill-baseline{color:#fbbf24;font-family:var(--font-mono);background:#f59e0b14;border:1px solid #f59e0b4d;border-radius:9999px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;display:inline-flex}.btn-zed{background:var(--zed-green);color:#07090d;font-family:var(--font-sans);cursor:pointer;transition:all .2s var(--ease-spring);box-shadow:0 8px 24px -6px var(--zed-glow-intense);border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 22px;font-size:13px;font-weight:800;display:inline-flex}.btn-zed:hover{background:var(--zed-green-hover);box-shadow:0 12px 28px -4px var(--zed-glow-intense);transform:translateY(-2px)}.btn-zed:active{transform:translateY(1px)}.btn-zed-ghost{color:#f1f5f9;border:1px solid var(--border-subtle);font-family:var(--font-sans);cursor:pointer;background:#ffffff08;border-radius:10px;align-items:center;gap:6px;padding:8px 14px;font-size:12px;font-weight:600;transition:all .2s;display:inline-flex}.btn-zed-ghost:hover{background:var(--zed-bg-tint);border-color:var(--border-zed);color:var(--zed-green)}.led-zed{background-color:var(--zed-green);width:8px;height:8px;box-shadow:0 0 12px var(--zed-green);border-radius:50%;animation:1.8s infinite zedPulse}@keyframes zedPulse{0%,to{opacity:1;filter:brightness();transform:scale(1)}50%{opacity:.6;filter:brightness(1.4);transform:scale(.85)}}.horizon-track{background:#ffffff0d;border-radius:9999px;height:6px;position:relative;overflow:hidden}.horizon-bar-zed{height:100%;box-shadow:0 0 18px var(--zed-glow-intense);transition:width .4s var(--ease-spring);background:linear-gradient(90deg,#10b981,#00f59b);border-radius:9999px}.horizon-bar-baseline{opacity:.7;background:#f59e0b;border-radius:9999px;height:100%;transition:width 1.2s ease-out}.spline-wrapper{contain:paint layout;will-change:transform;justify-content:center;align-items:center;width:100%;height:380px;display:flex;position:relative;transform:translateZ(0)}.audio-spectrogram-canvas{width:100%;height:52px;display:block}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:#141b26;border:1px solid #00f59b1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--zed-emerald-dark)}
