:root{--bg: #161616;--concrete: #2b2b2b;--concrete-2: #333;--line: #000;--ink: #e8e8e3;--dim: #8a8a82;--hot: #ff5722;--hot-2: #ffab40;--cyan: #26c6da;--cyan-2: #80deea;--violet: #b388ff;--green: #69f0ae;--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:radial-gradient(120% 80% at 50% -10%,#242424 0%,var(--bg) 60%,#0d0d0d 100%);color:var(--ink);font-family:Courier New,ui-monospace,monospace;font-weight:700;letter-spacing:.5px;padding:22px;-webkit-font-smoothing:none;min-height:100%}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9999;background:var(--grain);background-size:180px 180px;opacity:.05;mix-blend-mode:overlay}.app{max-width:1180px;margin:0 auto}.frame{border:3px solid var(--line);background:linear-gradient(180deg,#2f2f2f,#262626);box-shadow:14px 14px #000000d9,0 0 0 1px #3a3a3a inset,0 30px 80px #0009;position:relative;animation:frameIn .35s ease-out both}@keyframes frameIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.frame:before,.frame:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#777,#1a1a1a);box-shadow:0 0 0 2px #000;z-index:5}.frame:before{top:7px;left:7px}.frame:after{top:7px;right:7px}header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#f2f2ec,#d9d9d0);color:var(--line);padding:14px 20px;border-bottom:4px solid var(--line);flex-wrap:wrap;gap:8px;position:relative}header:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:repeating-linear-gradient(90deg,var(--hot) 0 18px,#000 18px 26px)}.logo{font-size:30px;letter-spacing:5px;text-shadow:2px 2px 0 #bdbdb3,3px 3px 0 rgba(0,0,0,.15)}.logo small{font-size:11px;letter-spacing:5px;color:#6a6a60;display:block;margin-top:-3px;text-shadow:none}.tag{font-size:11px;letter-spacing:2px;background:var(--hot);color:#000;padding:5px 11px;border:2px solid #000;box-shadow:3px 3px #000}.layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px}@media (max-width: 860px){.layout{grid-template-columns:1fr}}.panel{background:linear-gradient(180deg,#363636,#2c2c2c);border:3px solid var(--line);border-left:6px solid var(--cyan);box-shadow:6px 6px #000000b3,inset 0 1px #ffffff0d;padding:14px;margin-bottom:16px}.left .panel:nth-child(1){border-left-color:var(--hot)}.left .panel:nth-child(3){border-left-color:var(--violet)}.right .panel:nth-child(2){border-left-color:var(--hot-2)}.panel-title{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--cyan-2);margin-bottom:12px}.panel-title:before{content:"";width:9px;height:15px;background:var(--hot);box-shadow:2px 2px #000}.title-hint{font-weight:700;color:var(--dim);font-size:.66rem;letter-spacing:1px;margin-left:auto}.hint{font-size:.78rem;color:var(--dim);line-height:1.7;letter-spacing:.5px;text-transform:none}.hint b{color:var(--ink)}.presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset{display:flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(180deg,#3a3a3a,#2c2c2c);color:var(--ink);border:3px solid #000;padding:10px 12px;cursor:pointer;box-shadow:4px 4px #000,inset 0 2px #ffffff1f;transition:transform .05s,box-shadow .05s,filter .1s}.preset:hover{filter:brightness(1.18) saturate(1.1)}.preset:active{transform:translate(4px,4px);box-shadow:0 0 #000}.preset.active{background:linear-gradient(180deg,#ff7a52,var(--hot));color:#000;box-shadow:4px 4px #000,0 0 12px #ff572299,inset 0 2px #ffffff59}.preset-icon{font-size:1.15rem}.waveform,.spectrum{width:100%;height:auto;display:block;background:#050505;border:3px solid var(--line);box-shadow:inset 0 0 40px #000000d9}.spectrum{margin-top:8px}.ab-row{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}.ab-label{color:var(--cyan-2);font-size:.78rem;font-weight:700;letter-spacing:1px;text-transform:uppercase}.ab-hint{color:var(--hot-2);font-size:.72rem;letter-spacing:1px;text-transform:uppercase}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.btn{font:inherit;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1.2px;background:var(--ink);color:#000;border:3px solid #000;padding:9px 13px;cursor:pointer;box-shadow:4px 4px #000,inset 0 2px #ffffff47,inset 0 -4px 7px #00000038;transition:transform .05s,box-shadow .05s,filter .1s}.btn:hover{filter:brightness(1.12) saturate(1.1)}.btn:active{transform:translate(4px,4px);box-shadow:0 0 #000,inset 0 2px 5px #0006}.btn.primary{background:var(--hot);color:#000}.btn.save{background:var(--green);color:#000}.btn.ghost{background:var(--concrete);color:var(--ink)}.btn.on{background:var(--green);color:#000;animation:playpulse 1.3s ease-in-out infinite}@keyframes playpulse{0%,to{box-shadow:4px 4px #000,inset 0 2px #ffffff47}50%{box-shadow:4px 4px #000,0 0 16px #69f0aebf,inset 0 2px #ffffff47}}.ic{font:inherit;font-weight:700;font-size:.75rem;letter-spacing:.5px;text-transform:uppercase;background:linear-gradient(180deg,#3a3a3a,#2c2c2c);color:var(--ink);border:2px solid #000;padding:6px 8px;cursor:pointer;box-shadow:3px 3px #000,inset 0 1px #ffffff1f;transition:transform .05s,box-shadow .05s,filter .1s}.ic:hover{filter:brightness(1.2)}.ic:active{transform:translate(3px,3px);box-shadow:0 0 #000}.ic.danger:hover{background:var(--hot);color:#000}.ic:disabled{opacity:.4;cursor:default;box-shadow:none;transform:none}.variations{margin-top:12px;border-top:3px solid #000;padding-top:10px}.var-head{display:flex;align-items:center;justify-content:space-between;font-size:.72rem;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.var-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.var-item{display:flex;gap:2px}.var-load{flex:1;font:inherit;font-weight:700;font-size:.8rem;background:linear-gradient(180deg,#ffc874,var(--hot-2));color:#000;border:2px solid #000;padding:8px 0;cursor:pointer;box-shadow:3px 3px #000,inset 0 1px #ffffff4d}.var-load:hover{filter:brightness(1.1)}.var-load:active{transform:translate(3px,3px);box-shadow:0 0 #000}.save-row{display:flex;gap:8px;margin-top:8px}.save-input{flex:1;font:inherit;font-weight:700;letter-spacing:1px;background:linear-gradient(180deg,#0a0a0a,#050505);color:var(--cyan-2);border:2px solid #555;padding:9px 12px;text-transform:uppercase;box-shadow:inset 0 0 6px #000c}.save-input::placeholder{color:var(--dim)}.save-input:focus{outline:none;border-color:var(--cyan)}.lib-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.lib-head .panel-title{margin-bottom:0}.lib-head-actions{display:flex;gap:4px}.lib-empty{color:var(--dim);font-size:.78rem;line-height:1.6;margin-top:10px;text-transform:uppercase;letter-spacing:1px}.lib-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto;margin-top:10px}.lib-item{display:flex;align-items:center;gap:6px;background:linear-gradient(180deg,#353535,#2c2c2c);border:2px solid #000;padding:4px 6px 4px 4px;box-shadow:3px 3px #00000080}.lib-load{flex:1;display:flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:.82rem;text-align:left;text-transform:uppercase;letter-spacing:.5px;background:transparent;color:var(--ink);border:none;padding:7px 8px;cursor:pointer}.lib-load:hover{color:var(--cyan-2)}.lib-icon{font-size:1.05rem}.lib-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lib-actions{display:flex;gap:2px}.waves{display:flex;flex-wrap:wrap;gap:8px}.wave{font:inherit;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(180deg,#3a3a3a,#2c2c2c);color:var(--ink);border:3px solid #000;padding:8px 14px;cursor:pointer;box-shadow:3px 3px #000,inset 0 2px #ffffff1f;transition:transform .05s,box-shadow .05s,filter .1s}.wave:hover{filter:brightness(1.18)}.wave:active{transform:translate(3px,3px);box-shadow:0 0 #000}.wave.active{background:linear-gradient(180deg,#5fdcef,var(--cyan));color:#000;box-shadow:3px 3px #000,0 0 12px #26c6da80,inset 0 2px #ffffff59}.sliders{display:flex;flex-direction:column;gap:9px}.slider-row{display:grid;grid-template-columns:28px 128px 1fr 52px;align-items:center;gap:8px;font-size:.78rem}.slider-row.locked .slider-label{color:var(--violet)}.lock{font-size:.78rem;line-height:1;background:linear-gradient(180deg,#3a3a3a,#2a2a2a);border:2px solid #000;padding:4px 2px;cursor:pointer;color:var(--dim);box-shadow:2px 2px #000}.lock:hover{filter:brightness(1.3)}.lock.on{background:#000;color:var(--violet);border-color:var(--violet);box-shadow:0 0 7px #b388ff80}.slider-label{color:var(--dim);text-transform:uppercase;letter-spacing:.5px}.slider-val{text-align:center;font-variant-numeric:tabular-nums;color:var(--cyan-2);font-size:.82rem;background:#0a0a0a;padding:3px 4px;border:2px solid #444;box-shadow:inset 0 0 6px #000c;text-shadow:0 0 6px rgba(128,222,234,.5)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:9px;background:linear-gradient(180deg,#000,#1c1c1c);border:2px solid #555;outline:none;box-shadow:inset 0 1px 3px #000c}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:22px;background:linear-gradient(180deg,#ff7a52,var(--hot));border:2px solid #000;cursor:pointer;box-shadow:0 0 0 1px #000,inset 0 2px #fff6,2px 2px #00000080}input[type=range]::-moz-range-thumb{width:15px;height:22px;background:var(--hot);border:2px solid #000;cursor:pointer;border-radius:0}.lib-list::-webkit-scrollbar{width:12px}.lib-list::-webkit-scrollbar-track{background:#0d0d0d;border:2px solid #000}.lib-list::-webkit-scrollbar-thumb{background:var(--hot);border:2px solid #000}button:focus-visible,input:focus-visible{outline:3px solid var(--cyan-2);outline-offset:2px}button,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent}@media (max-width: 760px){body{padding:8px}.frame{box-shadow:6px 6px #000000d9}.frame:before,.frame:after{display:none}.logo{font-size:22px;letter-spacing:3px}.layout{padding:10px;gap:10px}.slider-row{grid-template-columns:26px 96px 1fr 48px}}