:root{--bg:#111;--bg-2:#1b1b1f;--bg-3:#26262c;--border:#3a3a42;--text:#ececf0;--text-dim:#9a9aa6;--accent:#4c8dff;--green:#2e9e5b;--yellow:#d9a520;--red:#d64545;--blue:#2f6fd6;--purple:#8a52d6;--radius:8px;--tap:44px;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono:ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);margin:0;font-size:16px;overflow-x:hidden}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#app{height:100%}.app{flex-direction:column;min-width:0;height:100%;display:flex}.app-header{background:var(--bg-2);border-bottom:1px solid var(--border);padding:6px 8px}.hdr-row{flex-wrap:wrap;align-items:center;gap:6px 12px;display:flex}.status{min-height:var(--tap);flex:180px;align-items:center;gap:6px;min-width:0;display:flex}.status-text{overflow-wrap:anywhere}.dot{border-radius:50%;flex:none;width:12px;height:12px}.dot-green{background:var(--green)}.dot-yellow{background:var(--yellow)}.dot-red{background:var(--red)}.shortcut{border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:14px}.sc-off{background:var(--bg-3);color:var(--text)}.sc-on{background:var(--red);color:#fff;border-color:var(--red);font-weight:600}.sc-unknown{color:var(--text-dim);background:#3b3b3b}.conn-hint{border-radius:var(--radius);color:#ffd78a;background:#3a2a10;margin-top:4px;padding:6px 8px;font-size:14px}.mode{gap:4px;display:flex}.mode-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}body.mode-edit .app-header{box-shadow:inset 0 -3px 0 var(--yellow)}.tabs{background:var(--bg-2);border-bottom:1px solid var(--border);scrollbar-width:thin;display:flex;overflow-x:auto}.tab{min-height:var(--tap);min-width:var(--tap);color:var(--text-dim);font:inherit;cursor:pointer;background:0 0;border:0;border-bottom:3px solid #0000;flex:none;padding:0 14px}.tab.active{color:var(--text);border-bottom-color:var(--accent)}.main{flex:auto;min-height:0;overflow:hidden auto}.view{min-width:0;padding:10px 8px 24px}.view.mirror{flex-direction:column;height:100%;padding-bottom:8px;display:flex}.btn{min-height:var(--tap);min-width:var(--tap);background:var(--bg-3);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;padding:0 14px}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:active:not(:disabled){background:#34343c}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:focus-visible,.input:focus-visible,.tab:focus-visible,.fader:focus-visible,.mirror-canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-danger{background:var(--red);border-color:var(--red);color:#fff}.btn-flash{touch-action:none}.input{width:100%;min-height:var(--tap);background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font:inherit;padding:8px 10px}.input.invalid{border-color:var(--red)}textarea.input{font-family:var(--mono);resize:vertical;font-size:14px}.field{color:var(--text-dim);flex-direction:column;gap:4px;margin-bottom:10px;font-size:14px;display:flex}.check{min-height:var(--tap);align-items:center;gap:10px;display:flex}.check input{width:24px;height:24px}.row{flex-wrap:wrap;gap:8px;margin:8px 0;display:flex}.card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;padding:10px}.section-title{margin:12px 0 8px;font-size:16px;font-weight:600}.card .section-title{margin-top:0}.hint{color:var(--text-dim);margin:6px 0;font-size:13px}.form-error{color:#ff8a8a;overflow-wrap:anywhere;min-height:1em;font-size:14px}.form-note{color:#ffd78a;overflow-wrap:anywhere;min-height:1em;margin:4px 0;font-size:13px}.pagebar{align-items:center;gap:8px;display:flex}.page-input{text-align:center;width:90px}.scroll-x{padding-bottom:8px;overflow-x:auto}.strips{gap:8px;width:max-content;display:flex}.strip{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;align-items:stretch;gap:6px;width:72px;padding:6px;display:flex}.strip .btn{width:100%;padding:0}.strip-label{text-align:center;overflow-wrap:anywhere;min-height:2.6em;color:var(--text);background:0 0;border:0;padding:0;font-family:inherit;font-size:12px;line-height:1.3}button.strip-label{min-height:var(--tap)}.label-edit{outline:1px dashed var(--yellow);cursor:text}.fader{height:200px;width:var(--tap);background:var(--bg);border:1px solid var(--border);touch-action:none;cursor:ns-resize;border-radius:6px;margin:0 auto;position:relative}.fader-fill{background:var(--blue);opacity:.6;border-radius:0 0 5px 5px;height:0;position:absolute;bottom:0;left:0;right:0}.fader-thumb{background:var(--text);border-radius:4px;height:14px;margin-bottom:-7px;position:absolute;bottom:0;left:-4px;right:-4px}.fader-value{text-align:center;font-variant-numeric:tabular-nums}.tiles{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;display:grid}.tile{gap:4px;display:flex}.tile-main{overflow-wrap:anywhere;flex:auto;min-width:0;min-height:56px}.button-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:10px;display:grid}.cell{flex-direction:column;gap:4px;min-width:0;display:flex}.cmd-btn{overflow-wrap:anywhere;width:100%;min-height:64px}.c-red{background:var(--red);border-color:var(--red);color:#fff}.c-green{background:var(--green);border-color:var(--green);color:#fff}.c-blue{background:var(--blue);border-color:var(--blue);color:#fff}.c-yellow{background:var(--yellow);border-color:var(--yellow);color:#111}.c-purple{background:var(--purple);border-color:var(--purple);color:#fff}.cell-tools{flex-wrap:wrap;gap:4px;display:flex}.cell-tools .btn{flex:auto;padding:0 8px}.cmd-row{gap:8px;display:flex}.cmd-input{min-width:0;font-family:var(--mono);flex:auto}.quickbar{flex-wrap:wrap;gap:8px;margin:10px 0;display:flex}.history{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.history-item{text-align:left;width:100%;font-family:var(--mono);overflow-wrap:anywhere}.mirror-stage{border:1px solid var(--border);background:#000;flex:auto;min-height:200px;position:relative;overflow:hidden}.mirror-canvas{touch-action:none;image-rendering:auto;outline-offset:-2px;position:absolute}.mirror-info{flex-wrap:wrap;align-items:center;gap:4px 12px;padding-top:6px;display:flex}.mirror-link{color:var(--accent);min-height:var(--tap);align-items:center;display:inline-flex}.layout-text{min-height:140px}.diag{grid-template-columns:auto 1fr;gap:4px 12px;margin:0;display:grid}.diag dt{color:var(--text-dim)}.diag dd{font-variant-numeric:tabular-nums;margin:0}.toasts{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));pointer-events:none;z-index:2000;flex-direction:column;align-items:center;gap:6px;display:flex;position:fixed}.toast{border-radius:var(--radius);border:1px solid var(--border);overflow-wrap:anywhere;background:#2c2c34;max-width:100%;padding:10px 14px;box-shadow:0 4px 16px #00000080}.toast-error{border-color:var(--red);background:#4a1f1f}.modal-backdrop{z-index:1000;background:#000000a6;justify-content:center;align-items:center;padding:12px;display:flex;position:fixed;inset:0}.modal{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;width:100%;max-width:460px;max-height:100%;padding:14px;overflow-y:auto}.modal-title{margin:0 0 10px;font-size:18px}.modal-cmd{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0;padding:8px}.modal-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:12px;display:flex}@media (width<=400px){.view{padding-left:6px;padding-right:6px}.tiles{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.button-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}.update-btn,.connect-btn,.install-btn{flex:none;font-weight:600}.pwa-status{overflow-wrap:anywhere;margin:0 0 8px}.row:empty{display:none}