body { margin: 0; overflow: hidden; background-color: #000; font-family: 'Segoe UI', sans-serif; color: #0ff; touch-action: none; }
        #viewport { width: 100%; height: 35vh; background: radial-gradient(circle at top, #2e2e2e 0%, #1a1a1a 100%); position: relative; }
        #mixer { width: 100%; height: 65vh; background: #111; border-top: 3px solid #444; display: flex; flex-direction: column; box-sizing: border-box; padding: 5px; overflow-y: auto; }

        .top-bar { height: 45px; background: #000; border-bottom: 2px solid #333; display: flex; align-items: center; padding: 0 5px; gap: 8px; flex-shrink: 0; justify-content: space-between; }
        .top-bar-left { display: flex; align-items: center; gap: 8px; }
        .top-bar-right { display: flex; align-items: center; gap: 6px; }
        .rec-btn { background: #300; color: #f00; border: 1px solid #600; font-size: 10px; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-weight: bold; }
        .rec-btn.active { background: #f00; color: #fff; animation: blink 1s infinite; }
        @keyframes blink { 0% {opacity: 1} 50% {opacity: 0.4} 100% {opacity: 1} }

        /* Save / Load Buttons styling */
        .io-btn { background: #022; color: #0ff; border: 1px solid #055; font-size: 9px; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-weight: bold; text-transform: uppercase; }
        .io-btn:hover { background: #044; color: #fff; border-color: #0ff; }

        .scene-bar { height: 40px; background: #0a0a1a; border-bottom: 1px solid #044; display: flex; align-items: center; padding: 0 5px; gap: 10px; flex-shrink: 0; }
        .scene-grid { display: flex; gap: 5px; flex: 1; overflow-x: auto; }
        .scene-btn { min-width: 65px; height: 30px; background: #1a1a2a; border: 1px solid #077; color: #0ff; border-radius: 4px; font-size: 9px; cursor: pointer; position: relative; }
        .scene-btn.filled { border-color: #0ff; box-shadow: inset 0 0 5px #044; }
        .scene-btn.active { background: #0ff; color: #000; border-color: #fff; font-weight: bold; }

        .frame-manager { background: #050505; border: 1px solid #333; margin-top: 5px; padding: 5px; border-radius: 4px; }
        .frame-label { font-size: 9px; color: #aaa; margin-bottom: 5px; display: flex; justify-content: space-between; }
        .frame-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; min-height: 50px; }
        .frame-card { min-width: 60px; background: #222; border: 1px solid #444; border-radius: 3px; display: flex; flex-direction: column; align-items: center; padding: 3px; gap: 2px; position: relative; }
        .frame-card.active { border-color: #0f0; background: #030; }
        .frame-card input { width: 90%; background: #000; border: 1px solid #444; color: #0f0; font-size: 8px; text-align: center; }
        .frame-del { position: absolute; top: -5px; right: -5px; background: #500; color: #fff; border: none; border-radius: 50%; width: 14px; height: 14px; font-size: 8px; cursor: pointer; }

        .color-bar { height: 65px; background: #080808; border-bottom: 1px solid #222; display: flex; align-items: center; padding: 0 5px; gap: 10px; flex-shrink: 0; }
        .color-steps-container { display: flex; gap: 5px; overflow-x: auto; flex: 1; padding: 2px 0; align-items: center; height: 100%; }
        .color-step-node { min-width: 65px; height: 35px; background: #222; border: 1px solid #444; border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px; font-size: 8px; position: relative; }
        .color-step-node.active { border-color: #fff; box-shadow: 0 0 5px #fff; background: #333; }
        .color-input-mini { width: 100%; height: 15px; border: none; padding: 0; background: none; cursor: pointer; }
        .color-step-speed { width: 100%; background: #000; color: #0ff; border: 1px solid #333; font-size: 8px; text-align: center; }

        .chase-grid { display: flex; gap: 5px; flex: 1; overflow-x: auto; padding: 0 5px; }
        .chase-btn { min-width: 50px; height: 32px; background: #222; border: 2px solid #444; color: #0ff; border-radius: 4px; font-size: 8px; cursor: pointer; flex-shrink: 0; position: relative; }
        .chase-btn.filled { border-color: #0f0; color: #0f0; }
        .chase-btn.active { background: #044; border-color: #0ff; box-shadow: 0 0 10px #0ff; }

        .color-chase-grid { display: flex; gap: 3px; background: #111; padding: 5px; border-left: 2px solid #333; }
        .col-chase-btn { width: 35px; height: 35px; background: #222; border: 1px solid #444; color: #f0f; border-radius: 4px; font-size: 8px; cursor: pointer; }
        .col-chase-btn.filled { border-color: #f0f; box-shadow: inset 0 0 5px #505; }
        .col-chase-btn.active { background: #505; color: #fff; border-color: #f0f; }

        .step-badge { position: absolute; top: -5px; right: -5px; background: #f00; color: #fff; font-size: 7px; padding: 1px 3px; border-radius: 10px; }
        .fix-count-ctrl { display: flex; align-items: center; gap: 5px; background: #222; padding: 5px; border-radius: 4px; border: 1px solid #444; }
        .btn-qty { background: #444; color: #fff; border: none; width: 25px; height: 25px; border-radius: 3px; cursor: pointer; font-weight: bold; }

        .top-row { display: flex; flex-shrink: 0; padding-top: 5px; min-height: 300px; }
        .panel-fix { width: 15%; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid #333; padding-right: 5px; overflow-y: auto; }
        .btn-fix { background: #222; border: 1px solid #444; color: #0ff; font-size: 9px; padding: 8px 2px; border-radius: 4px; cursor: pointer; text-align: center; }
        .btn-fix.active { background: #0aa; color: #fff; }

        #fix-minibrute { background: #331; color: #ff0; border-color: #660; min-height: 50px; font-weight: bold; font-size: 11px; margin-top: 5px; }
        #sel-minibrute { background: #222; color: #ffa500; border: 1px solid #ffa500; font-size: 9px; padding: 8px 2px; border-radius: 4px; cursor: pointer; }
        #sel-minibrute.active { background: #ffa500; color: #000; }

        .panel-faders { width: 65%; display: flex; flex-direction: column; padding: 0 8px; border-right: 1px solid #333; }
        .fader-grid { display: flex; justify-content: space-around; height: 160px; gap: 2px; }
        .fader-box { display: flex; flex-direction: column; align-items: center; flex: 1; }
        .fader-box label { font-size: 8px; color: #888; margin-bottom: 4px; text-align: center; }
        .slider-v { appearance: none; width: 20px; height: 100%; background: #222; border-radius: 4px; outline: none; -webkit-appearance: slider-vertical; }
        .slider-v::-webkit-slider-thumb { appearance: none; width: 20px; height: 22px; background: #0ff; border-radius: 4px; border: 1px solid #fff; }

        .settings-motion-row { display: flex; flex-direction: column; gap: 5px; background: #1a1a1a; border-radius: 8px; padding: 8px; margin-top: 5px; }
        .motion-grid { display: flex; gap: 6px; }
        .mini-fx-btn { flex: 1; background: #222; border: 1px solid #444; color: #0ff; font-size: 10px; font-weight: bold; padding: 12px 0; border-radius: 4px; cursor: pointer; }
        .mini-fx-btn.active { background: #044; border-color: #0ff; }
        .btn-reset { flex: 0.6; background: #322; color: #f99; border: 1px solid #533; font-size: 9px; padding: 12px 0; border-radius: 4px; cursor: pointer; }

        .sliders-h-row { display: flex; gap: 8px; flex-wrap: wrap; }
        .setting-col { flex: 1; min-width: 80px; display: flex; flex-direction: column; gap: 2px; }
        .setting-col label { font-size: 7px; color: #0f0; font-weight: bold; }
        .slider-h { appearance: none; width: 100%; height: 4px; background: #333; border-radius: 2px; outline: none; }
        .slider-h::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; background: #0f0; border-radius: 50%; }

        .audio-row { display: flex; align-items: center; gap: 10px; background: #000; border: 1px solid #333; padding: 5px 10px; border-radius: 4px; margin-top: 5px; }
        .audio-controls { display: flex; gap: 8px; align-items: center; }
        .audio-btn { background: #222; color: #0ff; border: 1px solid #444; font-size: 9px; padding: 5px 8px; border-radius: 3px; cursor: pointer; }
        #audio-visualizer { flex: 1; height: 15px; background: #050505; border-radius: 2px; overflow: hidden; display: flex; align-items: flex-end; gap: 1px; }
        .vis-bar { flex: 1; background: #0f0; min-height: 1px; }

        .panel-wheels { width: 20%; padding-left: 5px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
        .section-label { font-size: 8px; color: #fff; font-weight: bold; text-align: center; background: #333; padding: 2px; margin-top: 4px; }
        .strobe-unit { display: flex; flex-direction: column; gap: 2px; background: #1a1a1a; padding: 4px; border-radius: 4px; border: 1px solid #333; }
        .btn-strobe-big { background: #222; border: 1px solid #444; color: #0ff; padding: 8px 2px; border-radius: 4px; cursor: pointer; font-size: 9px; transition: all 0.2s; min-height: 35px; }
        .btn-strobe-big.active { background: #0ff; color: #000; box-shadow: 0 0 8px #0ff; border-color: #fff; }
        .strobe-spd { appearance: none; width: 100%; height: 3px; background: #444; outline: none; margin: 2px 0; }
        .strobe-spd::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; background: #0ff; border-radius: 50%; }

        .btn-wheel { background: #222; border: 1px solid #444; color: #0ff; padding: 8px 2px; border-radius: 4px; font-size: 9px; cursor: pointer; }
        .btn-wheel.active { background: #0ff; color: #000; }

        #display { position: absolute; top: 10px; right: 15px; font-size: 10px; color: #0ff; background: rgba(0,0,0,0.8); padding: 4px 8px; border: 1px solid #0ff; z-index: 100; }
        #status-msg { position: absolute; bottom: 10px; left: 10px; font-size: 10px; color: #f00; z-index: 100; font-weight: bold; }
        input[type="file"] { display: none; }

/* Adaptation: natural document height, responsive controls, and no nested page scroll. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width:100%; height:auto; margin:0; overflow-x:hidden; overflow-y:auto; touch-action:auto; }
body { font-size:12px; }
button { min-height:32px; touch-action:manipulation; }
button:focus-visible, input:focus-visible { outline:2px solid #fff; outline-offset:3px; }
#viewport { height:clamp(260px, 36vw, 440px); overflow:hidden; }
#viewport canvas { display:block; width:100%; height:100%; }
#display { font-size:10px; max-width:calc(100% - 24px); }
#mixer { height:auto; overflow:visible; padding:8px; }
.top-bar { height:auto; min-height:50px; flex-wrap:wrap; padding:6px 0; gap:8px; }
.top-bar-left { flex:1; min-width:0; }
.chase-grid { min-width:0; }
.top-bar-right { margin-left:auto; }
.scene-bar { padding:5px 0; height:auto; min-height:46px; }
.color-bar { height:auto; min-height:70px; padding:6px 0; flex-wrap:wrap; }
.color-steps-container { min-width:90px; min-height:48px; }
.color-chase-grid { overflow-x:auto; max-width:100%; }
.top-row { min-height:0; }
.panel-fix { width:13%; overflow:visible; }
.panel-faders { width:67%; min-width:0; }
.panel-wheels { width:20%; overflow:visible; }
.fader-grid { height:185px; padding-block:6px 10px; }
.fader-box { min-width:0; }
.fader-box label { font-size:10px; }
.slider-v { writing-mode:vertical-lr; direction:rtl; appearance:auto; width:22px; height:145px; touch-action:none; accent-color:#00d9db; }
.setting-col label { font-size:9px; }
.settings-motion-row { padding:10px; gap:10px; }
.slider-h { margin:8px 0; }
.app-credit { padding:10px 14px; border-top:1px solid #26343b; color:#99b1b3; font-size:10px; background:#0a1012; }
#status-msg { padding:5px; background:#000a; max-width:calc(100% - 20px); }
@media(max-width:760px) {
 .top-row { flex-wrap:wrap; gap:10px 0; }
 .panel-fix { width:22%; }
 .panel-faders { width:78%; border-right:0; padding-right:0; }
 .panel-wheels { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; gap:6px; }
 .panel-wheels>.section-label, .panel-wheels>div:last-child { grid-column:1/-1; }
 .fader-grid { gap:0; height:170px; }
 .slider-v { height:130px; }
 .fader-box label { font-size:8px; }
 .sliders-h-row { gap:10px; }
 .top-bar-left { flex-basis:100%; gap:4px; }
 .chase-btn { min-width:40px; }
 .rec-btn { padding:6px; font-size:9px; }
 .motion-grid { flex-wrap:wrap; }
 .mini-fx-btn { font-size:9px; }
 .audio-row { gap:5px; padding:6px; flex-wrap:wrap; }
 #audio-visualizer { min-width:40px; }
 .color-chase-grid { width:100%; justify-content:space-between; }
 .col-chase-btn { flex:1; }
 .btn-fix { padding:8px 2px; }
}