:root{color-scheme:dark;--bg: #07080a;--surface: #101318;--surface-2: #151922;--line: rgba(255, 255, 255, .12);--line-strong: rgba(255, 255, 255, .22);--text: #f5f7fb;--muted: #9ea7b5;--cyan: #46d9ff;--coral: #ff5f7f;--lime: #a1ff4a;--gold: #ffca5f}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{min-height:100dvh;overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,label,select,input{-webkit-tap-highlight-color:transparent}button{color:inherit}h1,h2,p{margin:0}.app-shell{width:100vw;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) minmax(270px,42dvh);background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 20%),var(--bg);overflow:hidden}.stage-band{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:max(12px,env(safe-area-inset-top)) 12px 10px}.top-strip,.transport-bar,.panel-heading,.status-row,.brand-mark,.tool-button,.download-link,.status-line,.slider-field span{display:flex;align-items:center}.top-strip{justify-content:space-between;gap:10px}.brand-mark{gap:8px;min-width:0;font-weight:750;letter-spacing:0}.brand-mark svg{color:var(--cyan);flex:0 0 auto}.status-row{justify-content:flex-end;flex-wrap:wrap;gap:6px}.status-chip{min-height:26px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:8px;padding:0 8px;color:var(--muted);background:#101318c7;font-size:.76rem;white-space:nowrap}.status-chip.is-ready{color:var(--lime);border-color:#a1ff4a52}.status-chip.is-live{color:var(--gold);border-color:#ffca5f57}.stage-frame{width:min(100%,470px);max-height:100%;margin:0 auto;position:relative;overflow:hidden;border:1px solid var(--line-strong);border-radius:8px;background:#050608;box-shadow:0 18px 50px #00000075;touch-action:none}.preview-canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}.preview-canvas:active{cursor:grabbing}.hidden-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-2px;top:-2px}.transport-bar{gap:8px;overflow-x:auto;padding-bottom:env(safe-area-inset-bottom);scrollbar-width:none}.transport-bar::-webkit-scrollbar,.control-dock::-webkit-scrollbar{display:none}.tool-button,.download-link{min-height:42px;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:8px;background:#12161deb;color:var(--text);padding:0 12px;text-decoration:none;font-weight:700;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.tool-button input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.tool-button.primary{color:#031018;border-color:transparent;background:linear-gradient(135deg,var(--cyan),#f4fbff)}.tool-button.export{margin-left:auto;background:#241a0eeb;border-color:#ffca5f52;color:#ffe7a8}.tool-button:disabled{opacity:.45;cursor:not-allowed}.control-dock{min-height:0;overflow-y:auto;display:grid;gap:10px;padding:10px 12px max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#080a0df5;scrollbar-width:none}.control-panel{display:grid;gap:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:12px}.panel-heading{justify-content:space-between;gap:8px;color:var(--muted)}.panel-heading h1,.panel-heading h2{flex:1;min-width:0;color:var(--text);font-size:.95rem;letter-spacing:0}.file-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.file-stat{min-width:0;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:#ffffff09}.file-stat span,.file-stat strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-stat span{color:var(--muted);font-size:.78rem}.file-stat strong{margin-top:3px;font-size:.92rem}.audio-button{min-width:92px}.segmented{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px;padding:4px;border-radius:8px;background:#090b0f;border:1px solid var(--line)}.segmented button{min-width:0;min-height:34px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-weight:700;white-space:nowrap}.segmented button.is-selected{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}.slider-field{display:grid;gap:7px}.slider-field span{justify-content:space-between;gap:12px;color:var(--muted);font-size:.82rem}.slider-field strong{color:var(--text);font-size:.8rem;font-variant-numeric:tabular-nums}.slider-field input[type=range]{width:100%;height:26px;margin:0;accent-color:var(--cyan)}.swatch-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.swatch{min-height:38px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(90deg,var(--swatch-core),var(--swatch)),#111;cursor:pointer}.swatch.is-selected{border-color:var(--gold);box-shadow:0 0 0 2px #ffca5f26}.select-field{display:grid;gap:7px}.select-field span{color:var(--muted);font-size:.82rem}.select-field select{width:100%;min-height:40px;border:1px solid var(--line);border-radius:8px;background:#090b0f;color:var(--text);padding:0 10px}.progress-rail{height:8px;overflow:hidden;border-radius:999px;border:1px solid var(--line);background:#090b0f}.progress-rail span{display:block;height:100%;min-width:0;background:linear-gradient(90deg,var(--cyan),var(--gold),var(--coral));transition:width .16s linear}.download-link{justify-content:flex-start;min-width:0;color:#061015;background:var(--lime);border-color:transparent}.download-link svg{flex:0 0 auto}.download-link{overflow:hidden;text-overflow:ellipsis}.status-line{justify-content:space-between;gap:8px;color:var(--muted);font-size:.78rem}.status-line span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(min-width:900px){body{overflow:hidden}.app-shell{grid-template-columns:minmax(0,1fr) 390px;grid-template-rows:1fr}.stage-band{padding:18px}.stage-frame{width:min(76vh,520px)}.control-dock{border-top:0;border-left:1px solid var(--line);padding:18px}}@media(max-width:390px){.brand-mark span{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.transport-bar{gap:6px}.tool-button{padding:0 10px}.segmented{grid-template-columns:repeat(2,minmax(0,1fr))}}
