:root{--bg: #0b0e14;--surface: #151a24;--surface-2: #1d2533;--border: #2a3343;--text: #e6ebf2;--text-dim: #8a96a8;--accent: #4f9dff;--ok: #3ad29f;--warn: #f5b942;--error: #ff6b6b;--radius: 10px;color-scheme:dark}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--border) transparent}html,body{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 50% -10%,#131a28 0%,var(--bg) 60%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}#app{max-width:720px;margin:0 auto;height:100dvh;overflow:hidden;display:flex;flex-direction:column}.app-content{padding:clamp(16px,4vw,32px);padding-top:20px;display:flex;flex-direction:column;gap:20px;flex:1;min-height:0;overflow:hidden}.connect-btn{width:100%;height:34px;padding:22px 20px;margin:0;border:none;border-radius:0;cursor:pointer;position:sticky;top:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:filter .1s ease,background .25s ease,color .25s ease}.connect-label{font-weight:650;font-size:16px;letter-spacing:.01em}.connect-subtitle{font-size:12px;font-weight:400;letter-spacing:.01em;opacity:.6}.connect-subtitle[hidden]{display:block;visibility:hidden}.connect-btn[data-phase=disconnected] .connect-subtitle[data-kind=error]{opacity:.9;color:var(--error)}.connect-btn[data-phase=idle]{background:var(--accent);color:#03101f}.connect-btn[data-phase=idle]:hover{filter:brightness(1.1)}.connect-btn[data-phase=idle]:active{filter:brightness(.9)}.connect-btn[data-phase=connecting]{background:linear-gradient(90deg,#03101f,#4f9dff,#03101f);background-size:200% 100%;color:#fff;cursor:default;animation:connect-sweep 1.6s linear infinite}.connect-btn[data-phase=connected]{background:#016b0a;color:#fff}.connect-btn[data-phase=connected]:hover{filter:brightness(1.1)}.connect-btn[data-phase=connected]:active{filter:brightness(.9)}.connect-btn[data-phase=disconnected]{background:var(--surface);color:var(--text-dim)}.connect-btn[data-phase=disconnected]:hover{color:var(--text);filter:brightness(1.15)}.connect-btn[data-phase=disconnected]:active{filter:brightness(.9)}.connect-btn[data-phase=retry]{background:var(--accent);color:#03101f}.connect-btn[data-phase=retry]:hover{filter:brightness(1.1)}.connect-btn[data-phase=retry]:active{filter:brightness(.9)}.connect-btn[data-phase=reconnecting]{background:linear-gradient(90deg,#c78100,#e2b86a,#c78100);background-size:200% 100%;color:#fff;animation:connect-sweep 1.6s linear infinite}.connect-btn[data-phase=reconnecting]:hover{filter:brightness(1.1)}.connect-btn[data-phase=reconnecting]:active{filter:brightness(.9)}@keyframes connect-sweep{0%{background-position:100% 0}to{background-position:-100% 0}}.status{margin:0;font-size:14px;color:var(--text-dim)}.status:empty{display:none}.status[data-kind=ok]{color:var(--ok)}.status[data-kind=warn]{color:var(--warn)}.status[data-kind=error]{color:var(--error)}.btn-list[hidden]{display:none}.btn-list{display:flex;flex-direction:column;gap:8px;flex:1 1 0;min-height:0;overflow-y:auto}.btn-group-label{color:var(--text-dim);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:0 4px}.btn-group-label:not(:first-child){margin-top:10px}.empty{color:var(--text-dim);text-align:center;padding:40px 0}.empty--idle{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.45}.empty--idle p{margin:0;font-size:14px}.btn-skeleton{display:flex;flex-direction:column;gap:8px}.btn-skeleton-row{flex:0 1 48px;min-height:26px;border-radius:var(--radius);background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface) 50%,var(--surface-2) 100%);background-size:200% 100%;animation:connect-sweep 1.5s linear infinite}.btn-row{display:flex;align-items:stretch;gap:6px;flex:0 1 48px;min-height:26px}.trigger-btn{flex:1 1 auto;display:flex;align-items:center;gap:12px;padding:0 16px;height:100%;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);background:var(--surface-2);color:var(--text);text-align:left;cursor:pointer;overflow:hidden;position:relative;transition:filter .1s ease,box-shadow .15s ease}.trigger-btn.has-color{background:var(--btn-color);color:#fff}.trigger-btn.has-color:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.1) 60%,transparent 100%);pointer-events:none}.trigger-btn.special-primary{background:linear-gradient(90deg,#2a3a52,var(--surface-2));border-color:#ffffff26}.trigger-btn.special-secondary{background:linear-gradient(90deg,#2d1a40,#1a2440,var(--surface-2));border-color:#ffffff26}.trigger-btn:hover{filter:brightness(1.15)}.trigger-btn:active{filter:brightness(.9)}.trigger-btn:disabled{opacity:.45;cursor:default;filter:none}.btn-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;position:relative}.btn-meta{font-size:12px;color:inherit;opacity:.65;white-space:nowrap;flex:0 0 auto;position:relative}.trigger-btn.has-color .btn-meta{opacity:.75}.playing-badge{display:none;flex:0 0 auto;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:#fff3;color:#fff;position:relative}.trigger-btn.is-active{box-shadow:inset 0 0 0 2px #ffffff8c,0 0 20px -4px var(--btn-color, var(--accent));filter:brightness(1.2)}.trigger-btn.is-active .playing-badge{display:inline-block}.trigger-btn.pulse{animation:btn-pulse .35s ease}@keyframes btn-pulse{0%{box-shadow:0 0 #ffffff73}to{box-shadow:0 0 0 14px transparent}}.settings-btn{flex:0 0 48px;width:48px;height:100%;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease,background .15s ease}.settings-btn:hover{color:var(--text);background:var(--surface-2)}.settings-btn:active{background:var(--border)}.settings-btn[hidden]{display:none}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.modal-overlay[hidden]{display:none}.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:480px;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}.modal-title{font-weight:600;font-size:16px}.modal-close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--text-dim);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease}.modal-close:hover{background:var(--surface-2);color:var(--text)}.modal-body{padding:20px;display:flex;flex-direction:column;gap:12px;max-height:72vh;overflow-y:auto}.json-toggle-btn{align-self:flex-start;padding:8px 16px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-family:SF Mono,ui-monospace,Cascadia Code,Menlo,monospace;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease}.json-toggle-btn:hover{background:var(--border);border-color:#3a455a}.json-area{width:100%;min-height:200px;max-height:60vh;padding:12px;border-radius:8px;border:1px solid var(--border);background:#090c12;color:var(--ok);font-family:SF Mono,ui-monospace,Cascadia Code,Menlo,monospace;font-size:12px;line-height:1.6;resize:vertical}.json-area[hidden]{display:none}.media-controls{display:flex;flex-direction:column;gap:6px}.media-controls[hidden]{display:none}.seek-wrap{width:100%;padding:0 2px}.seek-wrap[hidden]{display:none}.seek-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);margin-bottom:5px;font-variant-numeric:tabular-nums}.seek-loop{display:none}.seek-track{position:relative;height:2px;background:var(--surface-2);border-radius:99px}.seek-fill{position:absolute;top:0;bottom:0;left:0;right:auto;width:0%;background:var(--accent);border-radius:99px}.seek-knob{position:absolute;top:50%;left:0%;width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%)}.mc-btns{display:flex;align-items:center;justify-content:space-evenly}.mc-btn{background:none;border:none;padding:4px 8px;height:28px;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.7;transition:opacity .1s ease}.mc-btn:hover:not(:disabled){opacity:1}.mc-btn:active:not(:disabled){opacity:.5}.mc-btn:disabled{opacity:.2;cursor:default}.mc-btn[data-fc=restart]{color:var(--accent);opacity:.85}.mc-btn[data-fc=pause-play]{color:var(--ok);opacity:.85}.mc-btn[data-fc=stop]{color:var(--error);opacity:.85}.fab-wrap[hidden]{display:none}.fab-wrap{position:fixed;bottom:24px;right:24px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}.fab-bubbles{display:flex;flex-direction:column;align-items:stretch;gap:8px;opacity:0;transform:translateY(8px) scale(.95);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.fab-wrap.is-open .fab-bubbles{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.fab-bubble{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:14px;box-shadow:0 4px 16px #00000059;white-space:nowrap;transition:background .15s ease}.fab-bubble:hover{background:var(--surface-2)}.fab-bubble-label{font-weight:500}.fab{width:48px;height:48px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #0006;transition:transform .2s ease,filter .1s ease;pointer-events:auto}.fab:hover{filter:brightness(1.1)}.fab:active{filter:brightness(.9)}.fab-wrap.is-open .fab{transform:rotate(45deg)}.settings-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:140;opacity:0;pointer-events:none;transition:opacity .25s ease}.settings-backdrop.is-open{opacity:1;pointer-events:auto}.settings-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:16px 16px 0 0;z-index:150;transform:translateY(100%);transition:transform .25s cubic-bezier(.32,.72,0,1)}.settings-sheet.is-open{transform:translateY(0)}@media (min-width: 720px){.settings-sheet{left:calc(50% - 360px);right:calc(50% - 360px)}.fab-wrap{right:calc(50% - 336px)}}.sheet-handle{width:36px;height:4px;border-radius:999px;background:var(--border);margin:12px auto 0}.sheet-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border)}.sheet-title{font-weight:600;font-size:16px}.sheet-close{width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--text-dim);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease}.sheet-close:hover{background:var(--surface-2);color:var(--text)}.sheet-body{padding:20px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:default}.setting-row+.setting-row{margin-top:16px}.setting-label{font-size:14px}.setting-version{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}.setting-version-val{font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums}.setting-control{display:flex;align-items:center;gap:6px}.setting-input{width:64px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:14px;text-align:center}.setting-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}.setting-unit{font-size:14px;color:var(--text-dim)}.toggle-switch{position:relative;width:40px;height:24px;flex-shrink:0}.toggle-switch input{position:absolute;opacity:0;width:0;height:0}.toggle-thumb{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;transition:background .2s,border-color .2s}.toggle-thumb:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text-dim);transition:transform .2s,background .2s}.toggle-switch input:checked+.toggle-thumb{background:var(--accent);border-color:var(--accent)}.toggle-switch input:checked+.toggle-thumb:after{transform:translate(16px);background:#fff}.app-content{padding-bottom:96px}.cfg-form{display:flex;flex-direction:column;gap:14px}.cfg-inline-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cfg-field{display:flex;flex-direction:column;gap:4px}.cfg-field-label{font-size:11px;color:var(--text-dim)}.cfg-input{padding:7px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:14px;width:100%}.cfg-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}.cfg-stepper{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);overflow:hidden}.cfg-stepper .cfg-input{flex:1;min-width:0;border:none;border-radius:0;background:transparent;text-align:center;padding:7px 2px;-moz-appearance:textfield}.cfg-stepper .cfg-input::-webkit-inner-spin-button,.cfg-stepper .cfg-input::-webkit-outer-spin-button{display:none}.cfg-stepper .cfg-input:focus{outline:none;border-color:transparent}.cfg-stepper:focus-within{outline:2px solid var(--accent);outline-offset:1px}.cfg-step-btn{flex-shrink:0;width:28px;border:none;background:transparent;color:var(--text);cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .12s ease}.cfg-step-btn:hover{background:var(--surface)}.cfg-step-btn:active{background:var(--border)}.cfg-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.cfg-row-label{font-size:14px}.cfg-control{display:flex;align-items:center;gap:8px;flex:1}.cfg-range{flex:1;min-width:0;accent-color:var(--accent);cursor:pointer}.cfg-range-r{accent-color:var(--error)}.cfg-range-g{accent-color:var(--ok)}.cfg-range-b{accent-color:var(--accent)}.cfg-pct{font-size:12px;color:var(--text-dim);min-width:38px;text-align:right}.cfg-check{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.cfg-section{display:flex;flex-direction:column;gap:10px;padding-top:10px;border-top:1px solid var(--border)}.cfg-section[hidden]{display:none}.cfg-form.no-playback .cfg-section:not([hidden]){border-top:none;padding-top:0}.cfg-form.no-playback .cfg-section:not([hidden])~.cfg-section:not([hidden]){border-top:1px solid var(--border);padding-top:10px}.cfg-inline-pair[hidden],.cfg-row[hidden]{display:none}.cfg-section-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}.cfg-actions{display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--border)}.cfg-save-btn{flex:1;padding:10px;border-radius:8px;border:none;background:var(--accent);color:#03101f;font-weight:600;font-size:14px;cursor:pointer;transition:filter .1s ease}.cfg-save-btn:hover{filter:brightness(1.1)}.cfg-save-btn:active{filter:brightness(.9)}.led-index-hint{margin:4px 0 0;font-size:11px;color:var(--text-dim);text-align:center}.led-mode-toggle{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:12px}.led-mode-btn{flex:1;padding:8px;border:none;background:var(--surface-2);color:var(--text-dim);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s ease,color .15s ease}.led-mode-btn+.led-mode-btn{border-left:1px solid var(--border)}.led-mode-btn.is-active{background:var(--accent);color:#03101f}.led-mode-btn:not(.is-active):hover{background:var(--border);color:var(--text)}.led-section{display:flex;flex-direction:column;gap:10px;margin-top:12px}.led-section[hidden]{display:none}.ch-stepper{display:flex;align-items:center;gap:8px}.ch-arrow{flex:0 0 44px;height:44px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s ease}.ch-arrow:hover{background:var(--border)}.ch-arrow:active{filter:brightness(.85)}.ch-input{flex:1;padding:10px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:16px;text-align:center;min-width:0}.ch-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}.ch-actions{display:flex;align-items:center;gap:12px;margin-top:14px}.ch-set-btn{flex:1;padding:10px;border-radius:var(--radius);border:none;background:var(--accent);color:#03101f;font-weight:600;font-size:14px;cursor:pointer;transition:filter .1s ease}.ch-set-btn:hover{filter:brightness(1.1)}.ch-set-btn:active{filter:brightness(.9)}.ch-auto-label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;white-space:nowrap}.ch-auto-check{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex:0 0 auto}.ch-brightness-row{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);cursor:default}.ch-brightness-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.ch-brightness-ctrl{display:flex;align-items:center;gap:10px}.ch-brightness-range{flex:1;accent-color:var(--accent);cursor:pointer}.ch-brightness-val{font-size:13px;color:var(--text-dim);min-width:20px;text-align:right}.mapping{display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;overflow-y:auto;padding-bottom:8px}.mapping[hidden]{display:none}.map-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.map-panel-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:12px}.map-secondary-btn{padding:10px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:600;font-size:14px;cursor:pointer;transition:background .1s ease;white-space:nowrap}.map-secondary-btn:hover{background:var(--border)}.map-secondary-btn:active{filter:brightness(.85)}.map-driver-list{display:flex;flex-direction:column;gap:10px}.map-empty{color:var(--text-dim);font-size:14px;text-align:center;margin:4px 0 8px}.map-driver{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);padding:12px}.map-driver-head{display:flex;align-items:center;gap:10px}.map-driver-name{font-weight:650;font-size:15px}.map-driver-meta{flex:1;font-size:12px;color:var(--text-dim)}.map-driver-test,.map-driver-del{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:14px;line-height:1}.map-driver-del:hover{border-color:var(--error);color:var(--error)}.map-driver-test:hover{background:var(--border)}.map-driver-body{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}.map-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:90px}.map-field>span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.map-num{padding:9px 10px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:15px;min-width:0}.map-num:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}.map-field-wide{flex-basis:100%}.map-count-stepper{display:flex;align-items:stretch;gap:6px}.map-count-stepper .map-num{flex:1;text-align:center;min-width:48px}.map-count-btn{flex:0 0 auto;min-width:42px;padding:0 8px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:background .1s ease}.map-count-btn:hover{background:var(--border)}.map-count-btn:active{filter:brightness(.85)}.map-gpio{flex:1 1 100%}.map-field-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:8px}.map-pin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin-bottom:12px}.map-pin-btn{padding:8px 4px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .1s ease,color .1s ease,border-color .1s ease}.map-pin-btn:hover{background:var(--surface-2);color:var(--text)}.map-pin-btn.is-active{background:var(--accent);border-color:var(--accent);color:#03101f;font-weight:650}.map-pin-btn.is-saved{border-color:var(--ok);box-shadow:inset 0 0 0 2px var(--ok)}.map-toggles{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}.map-test{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}.map-test-hint{margin:10px 0 0;font-size:13px;color:var(--text-dim)}.map-add-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.map-add-btn{flex:1;padding:10px;border-radius:var(--radius);border:1px dashed var(--border);background:transparent;color:var(--text);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .1s ease,border-color .1s ease}.map-add-btn:hover{background:var(--surface-2);border-color:var(--accent)}.map-status{margin:12px 0 0;font-size:13px;min-height:18px;color:var(--text-dim)}.map-status[data-kind=ok]{color:var(--ok)}.map-status[data-kind=warn]{color:var(--warn)}.map-status[data-kind=error]{color:var(--error)}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}