:root{--bg:#07070b;--panel:#101018;--panel2:#171724;--line:#272740;--tx:#ececf6;--mut:#8b8ba8;--g:#35ff9a;--p:#b06bff;--b:#3aa8ff;--r:#ff4d7a;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font:15px/1.45 -apple-system,system-ui,Segoe UI,Roboto,sans-serif;overscroll-behavior:none}
#app{display:flex;flex-direction:column;height:100dvh;max-width:1100px;margin:0 auto}
button,select,input,textarea{font:inherit;color:var(--tx)}
button,select,input[type=number],input[type=text]{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
button{cursor:pointer}button:active{transform:scale(.97)}
button.pri{background:linear-gradient(90deg,#1fd67c,var(--g));color:#032;border:0;font-weight:700}
button.danger{border-color:var(--r);color:var(--r)}
button.mini,.chip{padding:4px 10px;font-size:13px;border-radius:8px}
.chip.on,.mini.on{background:var(--p);border-color:var(--p);color:#fff}
input[type=range]{accent-color:var(--p);width:100%;min-width:0}
select{max-width:100%}
header#top{padding:calc(8px + var(--safe-t)) 14px 6px;display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.3px}.brand b{color:var(--g)}
#pname{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:2px 2px;font-weight:600;min-width:0}
.tv{display:flex;gap:10px;flex-wrap:wrap;grid-column:1/-1}
.tv label{display:flex;gap:6px;align-items:center;color:var(--mut);font-size:12px}
.tv input,.tv select{padding:4px 8px;font-size:14px;color:var(--tx)}
#bpm{width:64px}
.status{font-size:12px;color:var(--mut);text-align:right;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#prog{height:3px;background:transparent}#prog i{display:block;height:100%;width:0;background:var(--g);transition:width .15s}
main#views{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px 14px 20px}
.view{display:none}.view.on{display:block}
#transport{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line);background:#0b0b12}
#transport .play{width:46px;height:46px;border-radius:50%;padding:0;background:linear-gradient(135deg,#1fd67c,var(--g));color:#032;border:0;font-size:18px;font-weight:700;flex:none}
#scrub{flex:1}#tcur{font:12px ui-monospace,monospace;color:var(--mut);min-width:84px;text-align:right}
nav#tabs{display:flex;border-top:1px solid var(--line);background:#0b0b12;padding-bottom:var(--safe-b)}
nav#tabs button{flex:1;background:transparent;border:0;border-radius:0;padding:7px 2px 8px;color:var(--mut);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:1px}
nav#tabs button i{font-style:normal;font-size:19px;line-height:1.1}
nav#tabs button.on{color:var(--g)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px}
h2{font-size:16px;margin:2px 0 10px}h3{font-size:14px;margin:12px 0 6px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px}
.hint{color:var(--mut);font-size:13px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row>*{min-width:0}
.grow{flex:1}
/* gráfica */
#gcard canvas{width:100%;height:210px;display:block;border-radius:10px;background:#fbfbfd;touch-action:pan-y}
#formula{font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--g);white-space:pre-wrap;word-break:break-word;margin:0 0 8px;max-height:96px;overflow:auto}
.gtool{display:flex;gap:10px;align-items:center;margin-top:8px;color:var(--mut);font-size:12px;flex-wrap:wrap}
.gtool label{display:flex;gap:6px;align-items:center;flex:1;min-width:140px}
/* pistas */
.tr{border-left:4px solid var(--c,var(--g))}.tr.sel{box-shadow:0 0 0 1px var(--c,var(--g)) inset}
.trh{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.trh input[type=text]{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:3px 2px;font-weight:600;flex:1;min-width:110px}
.dot{width:12px;height:12px;border-radius:50%;background:var(--c,var(--g));flex:none}
.sl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}.sl span:first-child{min-width:54px}.sl b{min-width:46px;text-align:right;color:var(--tx);font:12px ui-monospace,monospace}
.sl input[type=range]{flex:1}
textarea{width:100%;min-height:96px;background:#0b0b12;border:1px solid var(--line);border-radius:10px;padding:8px;font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace;color:#d7ffe9;resize:vertical}
textarea.bad{border-color:var(--r)}.err{color:var(--r);font-size:12px;min-height:14px}
.fld{display:grid;grid-template-columns:62px minmax(0,1fr);gap:6px 8px;align-items:center;margin-top:6px;font-size:12px;color:var(--mut)}
.fld select{width:100%}.fld input[type=text]{width:100%;min-width:0;font:12.5px ui-monospace,monospace;color:#d7ffe9;padding:5px 8px}
.fxbox{border:1px dashed var(--line);border-radius:10px;padding:8px;margin-top:8px}
.fxi{border-bottom:1px solid var(--line);padding:6px 0}.fxi:last-child{border:0}
.fxh{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:13px}
/* arreglo */
.mx{overflow:auto;border:1px solid var(--line);border-radius:12px}
table.mx2{border-collapse:separate;border-spacing:0;width:100%}
.mx2 th,.mx2 td{padding:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:center;min-width:64px}
.mx2 th:first-child,.mx2 td:first-child{position:sticky;left:0;background:var(--panel);z-index:2;text-align:left;padding:6px 8px;min-width:120px;font-size:12px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx2 th{font-size:11px;padding:6px 4px;background:var(--panel2);cursor:pointer}
.cell{width:100%;height:36px;border:0;border-radius:0;background:transparent;padding:0;font-size:11px;color:var(--mut)}
.cell.c1{background:var(--c);color:#031}.cell.c2{background:linear-gradient(90deg,transparent,var(--c));color:#031}.cell.c3{background:linear-gradient(90deg,var(--c),transparent);color:#fff}
/* sonidos */
.cats{display:flex;gap:6px;overflow:auto;padding-bottom:6px;margin-bottom:6px}.cats .chip{white-space:nowrap}
.snd{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.snd .nm{flex:1;min-width:0}.snd .nm b{display:block;font-size:14px}.snd .nm small{color:var(--mut)}
.snd pre{margin:6px 0 0;font:11.5px/1.45 ui-monospace,monospace;color:var(--g);white-space:pre-wrap;background:#0b0b12;padding:8px;border-radius:8px}
/* generar */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mut)}
.styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.styles button{text-align:left;padding:10px}.styles button.on{border-color:var(--g);background:#0f2a1f}
.styles small{display:block;color:var(--mut)}
details{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:8px;background:var(--panel2)}
summary{cursor:pointer;font-weight:600}
code{background:#0b0b12;border:1px solid var(--line);border-radius:5px;padding:1px 5px;font:12px ui-monospace,monospace;color:var(--g)}
pre.code{background:#0b0b12;border:1px solid var(--line);border-radius:8px;padding:8px;overflow:auto;font:12px/1.5 ui-monospace,monospace;color:#d7ffe9}
table.t{border-collapse:collapse;width:100%;font-size:13px}.t td{border-bottom:1px solid var(--line);padding:4px 6px;vertical-align:top}.t td:first-child{white-space:nowrap}
.meter{display:flex;gap:14px;flex-wrap:wrap;font:13px ui-monospace,monospace}.meter b{color:var(--g)}
.toast{position:fixed;left:50%;bottom:calc(150px + var(--safe-b));transform:translateX(-50%);background:#1b1b2c;border:1px solid var(--p);padding:8px 14px;border-radius:10px;z-index:9;font-size:13px;max-width:88vw}
@media(min-width:900px){#gcard canvas{height:260px}}