:root{color-scheme:dark;--panel:#10151c;--panel2:#151c25;--line:#283342;--text:#eef4fb;--muted:#8fa0b4;--cyan:#39d8ff;--cyan2:#009bc2;--green:#51e897;--danger:#ff6978}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 35% 5%,#10202c 0,#070a0f 32%,#030507 75%);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text)}
.app-shell{height:100vh;display:flex;flex-direction:column}.topbar{height:68px;flex:0 0 68px;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(6,10,15,.9)}h1{font-size:20px;letter-spacing:.12em;margin:0;font-weight:800}h1 span{color:var(--cyan)}.topbar p{margin:4px 0 0;color:var(--muted);font-size:11px;letter-spacing:.06em}
.status{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--muted);font-size:12px;background:#0b1016}.status i{width:8px;height:8px;border-radius:50%;background:#647386}.status.live{color:#bbffda;border-color:#287850}.status.live i{background:var(--green);box-shadow:0 0 13px var(--green)}.status.error{color:#ffd4d8;border-color:#7e3540}.status.error i{background:var(--danger)}.status.frozen{color:#dbe7ff;border-color:#5b72a8}.status.frozen i{background:#83a8ff;box-shadow:0 0 13px #83a8ff}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 365px;gap:14px;flex:1;min-height:0;padding:12px}.stage-column{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}.stage{position:relative;overflow:hidden;width:min(100%,calc((100vh - 116px)*4/3));aspect-ratio:4/3;max-height:calc(100vh - 116px);border:1px solid #263342;border-radius:12px;background:#000;box-shadow:0 18px 50px #0008,inset 0 0 60px #06121a}.stage canvas{display:block;width:100%;height:100%;position:absolute;inset:0;background:#000}.stage video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.start-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,#101a24dd,#030506f5 62%);z-index:3;padding:30px}.start-overlay.hidden{display:none}.camera-icon{font-size:50px;color:var(--cyan);filter:drop-shadow(0 0 20px #23c9ff80)}.start-overlay h2{font-size:24px;margin:10px 0 5px}.start-overlay p{max-width:500px;color:var(--muted);line-height:1.5;margin:0 0 18px}.stage-label{position:absolute;z-index:2;top:12px;left:12px;padding:6px 8px;border:1px solid #ffffff26;background:#03070bbd;color:#a9bfd1;font:10px ui-monospace,monospace;letter-spacing:.12em;border-radius:4px}.stage-hud{position:absolute;z-index:2;right:12px;top:12px;display:flex;gap:8px}.stage-hud span{padding:6px 8px;border:1px solid #ffffff26;background:#03070bbd;color:#a9bfd1;font:10px ui-monospace,monospace;letter-spacing:.1em;border-radius:4px}.mode-badge{color:#7ee7ff!important}
.controls{min-height:0;display:flex;flex-direction:column;gap:10px}.essential-controls{flex:0 0 auto;display:grid;grid-template-columns:1fr;gap:10px}.scroll-controls{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:#324253 transparent}.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:9px;padding:13px;box-shadow:0 8px 22px #0004}.panel.compact{padding:12px}.panel h2{margin:0 0 10px;color:#bcd0df;font-size:10px;letter-spacing:.13em}.field-label{display:block;color:var(--muted);font-size:10px;margin-bottom:5px}.field-label.second{margin-top:9px}select,button{font:inherit}select{width:100%;border:1px solid #334356;background:#090e14;color:var(--text);border-radius:6px;padding:8px;outline:none;font-size:12px}select:focus{border-color:var(--cyan)}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}button{border:1px solid #354456;border-radius:6px;padding:9px 10px;background:#19222d;color:#dce8f3;cursor:pointer;transition:.18s ease;font-size:12px}button:hover:not(:disabled){border-color:#6a8299;transform:translateY(-1px)}button:disabled{opacity:.38;cursor:not-allowed}.primary{background:linear-gradient(180deg,#16bce5,#067e9e);border-color:#35d6fa;color:#001016;font-weight:750}.primary.big{padding:11px 22px}.record-panel .button-row button:first-child{background:linear-gradient(180deg,#c6283f,#801426);border-color:#ff5c70}.record-status{margin:7px 0 0;color:#b8c9d3;font:10px ui-monospace,monospace;min-height:1.2em}
.control{margin:0 0 11px}.control:last-child{margin-bottom:0}.control-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.control label{font-size:11px}.control output{font:10px ui-monospace,monospace;color:var(--cyan)}input[type=range]{width:100%;accent-color:var(--cyan);cursor:pointer;height:18px}.wide{width:100%}.spaced{margin-top:9px}.no-margin{margin-top:0}.fullscreen-btn{width:100%;background:#0d151e;border-color:#3c5165}.lab-only{transition:opacity .2s ease,filter .2s ease}body[data-mode="classic"] .lab-only{opacity:.43;filter:saturate(.45)}body[data-mode="classic"] .lab-only::after{content:"Disponible en Modo Laboratorio";display:block;margin-top:6px;font-size:10px;color:#90a5af}
.recording-badge{position:absolute;top:50px;left:12px;z-index:8;background:#b81228;color:#fff;border:1px solid #ff6677;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:900;letter-spacing:.08em;box-shadow:0 0 20px rgba(255,30,70,.45)}.frozen-badge{position:absolute;z-index:4;left:50%;top:12px;transform:translateX(-50%);padding:7px 12px;border:1px solid #86a9ff;background:#0a1731db;color:#dbe8ff;border-radius:5px;font:10px ui-monospace,monospace;letter-spacing:.12em}.hidden{display:none!important}
footer{height:24px;flex:0 0 24px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:4px 14px;border-top:1px solid var(--line);font-size:9px;color:#718397;background:#06090d}
@media(max-width:950px){html,body{height:auto;min-height:100%;overflow:auto}.app-shell{height:auto;min-height:100vh}.workspace{grid-template-columns:1fr}.stage{width:min(100%,820px);max-height:none}.controls{overflow:visible}.scroll-controls{overflow:visible}.topbar p{display:none}footer{height:auto;flex-direction:column;align-items:flex-start}.workspace{padding:10px}}
@media(max-width:520px){h1{font-size:16px}.status span{display:none}.topbar{height:58px;flex-basis:58px}.workspace{padding:8px}.stage{border-radius:8px}}

.seed-fields{margin-top:9px}.seed-info{margin:6px 0 0;color:#91a7b8;font:10px ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-button{display:block;text-align:center;border:1px dashed #41566b;border-radius:6px;padding:8px;background:#0b1219;color:#d5e4ee;font-size:11px;cursor:pointer}.file-button:hover{border-color:var(--cyan)}.file-button input{display:none}.text-input{width:100%;border:1px solid #334356;background:#090e14;color:var(--text);border-radius:6px;padding:9px;outline:none;font-size:12px}.text-input:focus{border-color:var(--cyan)}.symbol-input{text-align:center;font-size:22px;padding:5px}.seed-apply{background:linear-gradient(180deg,#8054dc,#4c2798);border-color:#a681ff;color:#fff;font-weight:700}.seed-panel .control{margin-top:8px}.seed-panel select+ .seed-fields{margin-top:9px}


.audio-panel{border-color:#334b5e}
.audio-status{margin:8px 0 0;padding:7px 8px;border:1px solid #294153;border-radius:5px;background:#081018;color:#8fe4ff;font:10px ui-monospace,monospace;line-height:1.35}
.audio-note{margin:7px 0 0;color:#8095a5;font-size:9px;line-height:1.35}