:root{--bg:#0b0713;--ink:#e7e1f2;--dim:#867d9a;--accent:#a970ff;--accent-deep:#5b21b6;--accent2:#d8b4fe;--panel:#120d1bb8;--edge:#a970ff40}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);margin:0;font-family:Iosevka,JetBrains Mono,Fira Code,ui-monospace,monospace}body:before{content:"";pointer-events:none;z-index:1;background:radial-gradient(80% 60% at 50% -10%,#5b21b638,#0000 60%),radial-gradient(60% 50% at 85% 110%,#d8b4fe14,#0000 60%);position:fixed;inset:0}canvas#hydra-canvas,canvas.hydra-canvas{z-index:0;opacity:.7;inset:0;width:100vw!important;height:100vh!important;position:fixed!important}#app{z-index:2;flex-direction:column;gap:10px;height:100vh;padding:14px 18px 8px;display:flex;position:relative}header{text-shadow:0 1px 10px #000000f2,0 0 3px #000000e6;flex-wrap:wrap;align-items:baseline;gap:10px 22px;display:flex}footer{text-shadow:0 1px 8px #000000f2}h1{letter-spacing:3px;text-transform:lowercase;margin:0;font-size:28px;font-weight:800}.glow{color:var(--accent);text-shadow:0 0 18px #a970ff8c}.tagline{color:var(--dim);margin:0;font-size:12.5px}kbd{border:1px solid var(--edge);color:var(--accent2);background:#1a1426;border-radius:4px;padding:1px 5px;font-size:11px}nav#tunes{flex-wrap:wrap;gap:8px;display:flex}button{font:inherit;cursor:pointer;color:var(--ink);background:var(--panel);border:1px solid var(--edge);border-radius:999px;padding:5px 14px;font-size:12.5px;transition:all .15s}button:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 14px #a970ff59}button.active{background:var(--accent-deep);border-color:var(--accent);color:#fff}.engines{flex-wrap:wrap;align-items:center;gap:6px;display:flex}button.mini{color:var(--dim);padding:3px 10px;font-size:11px}.transport{align-items:center;gap:10px;margin-left:auto;display:flex}button.big{color:var(--accent2);padding:6px 18px;font-size:13.5px}button.big:hover{color:var(--accent)}input[type=range]{appearance:none;background:linear-gradient(90deg, var(--accent-deep), var(--accent));cursor:pointer;border-radius:2px;outline:none;width:110px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent2);border:2px solid var(--bg);border-radius:50%;width:14px;height:14px;box-shadow:0 0 8px #a970ff99}main{border:1px solid var(--edge);background:var(--panel);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:10px;flex:1;width:100%;max-width:720px;min-height:0;overflow:hidden}strudel-editor{display:none}main>div{height:100%}main .cm-editor{height:100%;background:0 0!important}main .cm-gutters{background:0 0!important;border:none!important}main .cm-scroller{font-size:14px;line-height:1.55}.pad-panel{z-index:4;background:var(--panel);border:1px solid var(--edge);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:12px;flex-direction:column;width:min(420px,42vw);height:min(480px,62vh);display:none;position:fixed;top:118px;right:18px;overflow:hidden;box-shadow:0 8px 40px #00000080}.pad-bar{border-bottom:1px solid var(--edge);align-items:center;gap:6px;padding:8px 10px;display:flex}.pad-title{color:var(--accent);letter-spacing:2px;text-shadow:0 0 12px #a970ff80;margin-right:auto;font-size:12.5px}.pad-bar .rec.active{color:#ffd7e0;background:#7f1d3a;border-color:#ff7896}.pad-panel canvas{cursor:crosshair;touch-action:none;flex:1;min-height:0}.pad-hint{color:var(--dim);border-top:1px solid var(--edge);padding:6px 10px;font-size:10.5px}footer{color:var(--dim);justify-content:space-between;padding:0 2px;font-size:11.5px;display:flex}footer a{color:var(--accent2);text-decoration:none}footer a:hover{color:var(--accent)}