:root{--bg:#0e0f14;--bg2:#161821;--bg3:#1f2230;--text:#e6e9f4;--text-dim:#8189a3;--accent:#7d8cfa;--accent-h:#96a3ff;--accent2:#a78bfa;--green:#4ade80;--red:#fb7185;--border:#2a2e40;--key-bg:#252938;--key-hover:#343a52;--key-sel:#7d8cfa;--key-sel-fg:#0e0f14;color:var(--text);background:var(--bg);margin:0;font-family:system-ui,Segoe UI,Hiragino Sans,Yu Gothic UI,Meiryo,sans-serif;font-size:14px}:root[data-theme=light]{--bg:#fefdfa;--bg2:#fff;--bg3:#faf6ed;--text:#3c362c;--text-dim:#a2977f;--accent:#f28a30;--accent-h:#e37b1f;--accent2:#f4b73f;--green:#3fb46a;--red:#e35050;--border:#eee3cf;--key-bg:#fbf7ee;--key-hover:#f6ecd9;--key-sel:#f28a30;--key-sel-fg:#fff}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg)}#root,.app{flex-direction:column;min-height:100svh;display:flex}.toast{z-index:200;cursor:pointer;text-align:center;border-radius:8px;max-width:480px;padding:12px 20px;font-size:13px;font-weight:500;animation:.2s toast-in;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #0006}.toast--error{color:var(--red);border:1px solid var(--red);background:#f7768e26}.toast--success{color:var(--green);border:1px solid var(--green);background:#9ece6a26}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.app-header{background:var(--bg2);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:16px;padding:12px 24px;display:flex}.app-logo{flex-shrink:0;width:auto;height:24px;display:block}.theme-toggle{flex-shrink:0;margin-left:auto;padding:4px 12px;font-size:12px}.connection-bar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.status{border-radius:999px;padding:4px 10px;font-size:13px}.status--connected{color:var(--green)}.status--error{color:var(--red)}.btn{border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:6px 16px;font-size:13px;font-weight:500;transition:background .15s,opacity .15s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:linear-gradient(135deg, var(--accent), var(--accent2));color:var(--key-sel-fg);border-color:#0000}.btn--primary:hover:not(:disabled){filter:brightness(1.12)}.btn--ghost{color:var(--text);background:0 0}.btn--ghost:hover{background:var(--bg3)}.btn--small{padding:4px 10px;font-size:12px}.app-main{flex:1;padding:24px;overflow-x:auto}.placeholder{flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:60vh;display:flex}.placeholder-text{color:var(--text);font-size:18px}.placeholder-note{color:var(--text-dim);font-size:13px}.tabs{border-bottom:1px solid var(--border);gap:4px;margin-bottom:20px;padding-bottom:0;display:flex}.tab{cursor:pointer;color:var(--text-dim);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:8px 20px;font-size:14px;transition:color .15s,border-color .15s}.tab:hover{color:var(--text)}.tab--active{color:var(--accent);border-bottom-color:var(--accent)}.layer-selector{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;display:flex}.btn--layer{background:var(--bg2);color:var(--text-dim);border-color:var(--border);min-width:80px}.btn--layer:hover{color:var(--text);background:var(--bg3)}.btn--layer-active{background:var(--accent);color:var(--key-sel-fg);border-color:var(--accent)}.layout-scroll{justify-content:center;padding:28px 0;display:flex;overflow-x:auto}.all-layers-view{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.all-layers-view>p{grid-column:1/-1}.all-layers-item{border:1px solid var(--border);background:var(--bg2);border-radius:8px;min-width:0;padding:4px 8px 8px}.all-layers-item .layout-scroll{padding:8px 0}@media (width<=900px){.all-layers-view{grid-template-columns:1fr}}.all-layers-label{color:var(--text-dim);padding:4px 2px 0;font-size:13px;font-weight:600}.keyboard-layout{flex-shrink:0;display:block}.keyboard-layout-wrap{flex-direction:column;align-items:center;gap:10px;display:flex}.key-desc-bar{text-align:center;background:var(--bg2);border:1px solid var(--border);min-height:38px;color:var(--text);border-radius:8px;justify-content:center;align-items:center;max-width:560px;padding:8px 16px;font-size:13px;line-height:1.5;transition:color .1s;display:flex}.key{background:var(--key-bg);border:1px solid var(--border);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:background .1s,border-color .1s,transform 80ms,box-shadow .1s;display:flex;position:absolute;overflow:hidden;box-shadow:0 2px 4px #0000002e}.key:hover{background:var(--key-hover);border-color:var(--accent)}.key--selected{box-shadow:0 0 0 2px color-mix(in srgb, var(--key-sel) 35%, transparent), 0 2px 8px color-mix(in srgb, var(--key-sel) 45%, transparent);background:var(--key-sel)!important;border-color:var(--accent)!important}.key--selected .key__label{color:var(--key-sel-fg)}.key--none{opacity:.35}.key--ball{opacity:.4;cursor:default;pointer-events:none;border-style:dashed}.key--ball .key__label:after{content:" 🖱";font-size:.7em}.key--dragover{transform:scale(1.06);background:color-mix(in srgb, var(--accent) 30%, var(--key-bg))!important;border-color:var(--accent)!important}.key__label{color:var(--text);text-align:center;pointer-events:none;white-space:pre-wrap;word-break:normal;overflow-wrap:break-word;line-break:loose;font-size:11px;font-weight:600;line-height:1.2}.key__dual-wrapper{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.key__shift{color:var(--text-dim);pointer-events:none;font-size:9px;font-weight:500;line-height:1;position:absolute;top:2px;right:3px}.key__main{color:var(--text);text-align:center;pointer-events:none;white-space:pre-wrap;word-break:normal;overflow-wrap:break-word;line-break:loose;font-size:12px;font-weight:700;line-height:1.2}.key--selected .key__main{color:var(--key-sel-fg)}.key--selected .key__shift{color:color-mix(in srgb, var(--key-sel-fg) 60%, transparent)}.keypicker-panel{background:var(--bg2);border:1px solid var(--border);border-radius:10px;flex-direction:column;display:flex;overflow:hidden}.keypicker-panel__tabs{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:4px;padding:10px 12px 0;display:flex}.keypicker-panel__keys{flex-wrap:wrap;gap:5px;max-height:220px;padding:12px;display:flex;overflow-y:auto}.picker-key{background:var(--bg3);border:1px solid var(--border);cursor:pointer;text-align:center;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:52px;padding:6px 4px;transition:background .1s,border-color .1s;display:flex;overflow:hidden}.picker-key:hover{background:var(--key-hover);border-color:var(--accent)}.picker-key--current{background:var(--accent);border-color:var(--accent)}.picker-key--current .picker-key__char,.picker-key--current .picker-key__name{color:var(--key-sel-fg)}.picker-key__char{color:var(--text);white-space:pre-wrap;word-break:break-all;max-width:100%;font-size:13px;font-weight:700;line-height:1.2}.picker-key__name{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:9px;overflow:hidden}.trackball-bar{background:var(--bg2);border:1px solid var(--border);border-radius:10px;flex-wrap:wrap;align-items:center;gap:16px;padding:10px 16px;display:flex}.collapsible-card__body .trackball-bar{background:0 0;border:none;border-radius:0;padding:0}.trackball-bar__select{background:var(--bg3);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:4px 8px;font-size:12px}.trackball-bar__select:focus{border-color:var(--accent);outline:none}.trackball-bar__item--invert{flex:none;gap:6px}.trackball-bar__item--invert .btn{min-width:56px}.trackball-bar__title{color:var(--text-dim);white-space:nowrap;font-size:12px;font-weight:600}.trackball-bar__item{flex:1;align-items:center;gap:8px;min-width:180px;display:flex}.trackball-bar__label{color:var(--text-dim);white-space:nowrap;font-size:12px}.trackball-bar__label strong{color:var(--text);margin-left:2px}.trackball-bar__scale{color:var(--text-dim);white-space:nowrap;font-size:10px}.slider{accent-color:var(--accent);flex:1;min-width:80px}.keymap-view{flex-direction:column;gap:16px;display:flex}.firmware-flasher{flex-direction:column;gap:24px;max-width:560px;display:flex}.flash-step{align-items:flex-start;gap:16px;display:flex}.flash-step-num{background:var(--accent);color:#1a1b26;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;margin-top:2px;font-size:13px;font-weight:700;display:flex}.flash-step-body{flex-direction:column;flex:1;gap:10px;display:flex}.flash-step-label{color:var(--text);font-size:13px;line-height:1.5}.fw-source-tabs{background:var(--bg3);border-radius:8px;gap:4px;width:fit-content;padding:4px;display:flex}.fw-source-tab{cursor:pointer;color:var(--text-dim);background:0 0;border:none;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:500;transition:background .15s,color .15s}.fw-source-tab:hover{color:var(--text)}.fw-source-tab--active{background:var(--bg2);color:var(--accent)}.model-selector{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.detected-model{color:var(--green);margin-left:4px;font-size:12px}.countdown-box{background:var(--bg2);border:1px solid var(--accent);text-align:center;border-radius:12px;flex-direction:column;align-items:center;gap:8px;padding:24px;display:flex}.countdown-label{color:var(--accent);font-size:15px;font-weight:700}.countdown-num{color:var(--accent);font-variant-numeric:tabular-nums;font-size:64px;font-weight:900;line-height:1}.countdown-sub{color:var(--text-dim);font-size:12px}.file-input{color:var(--text);background:var(--bg2);border:1px solid var(--border);cursor:pointer;border-radius:6px;width:100%;padding:8px 10px;font-size:13px}.file-input::file-selector-button{background:var(--bg3);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:4px;margin-right:10px;padding:4px 10px;font-size:12px}.flash-file-name{color:var(--green);font-size:12px}.flash-alert{border-radius:8px;padding:12px 16px;font-size:13px;line-height:1.5}.flash-alert--info{color:var(--accent);border:1px solid var(--accent);background:#7aa2f726}.flash-alert--warn{color:#e0af68;background:#e0af6826;border:1px solid #e0af68}.flash-alert--done{color:var(--green);border:1px solid var(--green);background:#9ece6a26}.flash-alert--error{color:var(--red);border:1px solid var(--red);background:#f7768e26}.flash-progress-wrap{background:var(--bg3);border-radius:12px;height:24px;position:relative;overflow:hidden}.flash-progress-bar{background:var(--accent);border-radius:12px;height:100%;transition:width .3s}.flash-progress-label{color:var(--key-sel-fg);justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex;position:absolute;inset:0}.tap-picker{flex-direction:column;gap:6px;display:flex}.tap-picker__search-wrap{position:relative}.tap-picker__tabs{flex-wrap:wrap;gap:3px;display:flex}.tap-picker__tabs .tab{padding:4px 10px;font-size:12px}.tap-picker__grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:3px;max-height:200px;padding:2px;display:grid;overflow-y:auto}.builder-panel{flex-direction:column;gap:14px;display:flex}.builder-panel__desc{color:var(--text-dim);font-size:12px}.builder-panel__set{align-self:flex-start}.builder-section{flex-direction:column;gap:6px;display:flex}.builder-section__label{color:var(--text-dim);font-size:12px;font-weight:600}.builder-mod-buttons{flex-wrap:wrap;gap:6px;display:flex}.builder-layer-buttons{gap:8px;display:flex}.builder-preview{color:var(--accent);background:var(--bg3);border-radius:6px;padding:8px 12px;font-size:13px}.builder-preview strong{color:var(--text)}.keypicker-panel__type-tabs{border-bottom:1px solid var(--border);gap:4px;margin-bottom:8px;padding:8px 8px 0;display:flex}.mt-builder{flex-direction:column;gap:10px;padding:12px;display:flex}.mt-builder__desc{color:var(--text-dim);font-size:12px}.mt-builder__row{align-items:center;gap:8px;display:flex}.mt-builder__row label{min-width:120px;font-size:12px}.mt-builder__row select{background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:4px;flex:1;padding:4px 8px}.mt-builder__preview{color:var(--accent);background:var(--bg3);border-radius:4px;padding:6px 10px;font-size:12px}.mt-builder__set{align-self:flex-start;margin-top:4px}.td-picker{padding:12px}.td-picker__desc{color:var(--text-dim);margin-bottom:10px;font-size:12px}.td-picker__slots{flex-wrap:wrap;gap:6px;display:flex}.picker-key--td{background:var(--bg3);min-width:56px;font-weight:600}.td-slots{flex-direction:column;gap:12px;display:flex}.td-slot{border:1px solid var(--border);border-radius:8px;overflow:hidden}.td-slot__header{background:var(--bg3);flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;display:flex}.td-slot__label{color:var(--accent);min-width:44px;font-weight:700}.td-slot__summary{color:var(--text-dim);flex:1;font-size:12px}.td-slot__body{flex-direction:column;gap:8px;padding:10px 12px;display:flex}.td-row{align-items:center;gap:8px;font-size:13px;display:flex}.td-row span{min-width:150px;color:var(--text-dim)}.td-keycode-select{background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:4px;flex:1;padding:4px 8px}.td-saving{color:var(--accent);margin-left:auto;font-size:11px}.settings-desc{color:var(--text-dim);margin-bottom:12px;font-size:12px;line-height:1.6}.layout-toggle-row{gap:10px;margin-bottom:10px;display:flex}.layout-toggle-btn{border:2px solid var(--border);background:var(--bg3);color:var(--text-dim);cursor:pointer;text-align:center;border-radius:8px;flex-direction:column;flex:1;align-items:center;gap:4px;padding:10px 14px;font-size:14px;font-weight:600;transition:all .15s;display:flex}.layout-toggle-btn:hover{border-color:var(--accent);color:var(--text)}.layout-toggle-btn--active{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 15%, var(--bg3));color:var(--accent)}.layout-toggle-example{color:var(--text-dim);font-size:11px;font-weight:400}.layout-toggle-btn--active .layout-toggle-example{color:var(--accent);opacity:.8}.settings-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px 20px}.settings-card h2{color:var(--text);margin-bottom:12px;font-size:16px;font-weight:700}.feedback-tab{flex-direction:column;gap:16px;max-width:640px;margin:0 auto;padding:4px 0;display:flex}.feedback-intro{color:var(--text);font-size:14px;line-height:1.7}.feedback-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;gap:16px;padding:18px 20px;display:flex}.feedback-card__icon{flex-shrink:0;font-size:28px;line-height:1.2}.feedback-card__body{flex-direction:column;flex:1;gap:10px;display:flex}.feedback-card__title{color:var(--text);font-size:16px;font-weight:700}.feedback-card__desc{color:var(--text-dim);font-size:13px;line-height:1.7}.feedback-examples{flex-wrap:wrap;gap:6px;padding:0;list-style:none;display:flex}.feedback-examples li{color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--bg3));border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);border-radius:999px;padding:3px 10px;font-size:11px}.feedback-card__btn{align-self:flex-start;margin-top:4px;text-decoration:none}.feedback-note{color:var(--text-dim);font-size:11px;line-height:1.6}.collapsible-card{overflow:hidden;padding:0!important}.collapsible-card__header{cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:16px 20px;transition:background .15s;display:flex}.collapsible-card__header:hover{background:var(--bg3)}.collapsible-card__title{color:var(--text);font-size:16px;font-weight:700}.collapsible-card__title .settings-unit{font-size:12px;font-weight:400}.collapsible-card__chevron{color:var(--text-dim);flex-shrink:0;font-size:11px}.collapsible-card__body{padding:0 20px 18px;animation:.18s collapse-in}@keyframes collapse-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.macos-layout-toggle{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;display:flex}.macos-layout-label{color:var(--text);white-space:nowrap;font-size:13px}.macos-toggle-btn{flex:0 auto;min-width:130px;padding:8px 12px}.macos-steps{flex-direction:column;gap:6px;margin-bottom:10px;display:flex}.macos-step{color:var(--text);align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;display:flex}.macos-step__num{color:var(--accent);flex-shrink:0;min-width:20px;font-weight:700}.macos-command-block{border:1px solid var(--border);background:var(--bg);border-radius:8px;align-items:stretch;gap:0;margin-bottom:10px;display:flex;overflow:hidden}.macos-command-text{color:var(--green);word-break:break-all;white-space:pre-wrap;flex:1;padding:10px 12px;font-family:SF Mono,Menlo,Monaco,Consolas,monospace;font-size:11px;line-height:1.5;overflow-x:auto}.macos-copy-btn{background:var(--bg3);border:none;border-left:1px solid var(--border);cursor:pointer;color:var(--text);white-space:nowrap;flex-shrink:0;padding:10px 16px;font-size:13px;font-weight:600;transition:background .15s,color .15s}.macos-copy-btn:hover{background:var(--key-hover)}.macos-copy-btn--done{background:color-mix(in srgb, var(--green) 15%, var(--bg3));color:var(--green)}.macos-setup-note{color:var(--text-dim);margin-top:8px;font-size:11px;line-height:1.6}.layout-toggle-note{color:var(--text-dim);background:var(--bg3);border-left:3px solid var(--accent);border-radius:6px;padding:8px 12px;font-size:12px;line-height:1.6}.btn--sm{padding:3px 8px;font-size:11px}.settings-tab{flex-direction:column;gap:16px;max-width:640px;margin:0 auto;padding:20px;display:flex}.settings-notice{background:var(--bg3);border:1px solid var(--border);color:var(--text-dim);border-radius:8px;padding:12px 16px;font-size:13px}.settings-unit{color:var(--text-dim);margin-left:8px;font-size:12px;font-weight:400}.tapping-term-row{align-items:center;gap:16px;margin-top:12px;display:flex}.tapping-term-slider{accent-color:var(--accent);flex:1;height:4px}.tapping-term-value{color:var(--accent);text-align:right;min-width:60px;font-size:15px;font-weight:700}.tapping-term-hints{color:var(--text-dim);justify-content:space-between;margin-top:6px;font-size:11px;display:flex}.setting-rows{flex-direction:column;gap:2px;display:flex}.setting-row{border-bottom:1px solid var(--border);align-items:center;gap:16px;padding:14px 0;display:flex}.setting-row:last-child{border-bottom:none}.setting-row--disabled{opacity:.5}.setting-row__text{flex-direction:column;flex:1;gap:4px;display:flex}.setting-row__label{font-size:14px;font-weight:600}.setting-row__desc{color:var(--text-dim);font-size:12px;line-height:1.5}.toggle-btn{border:1px solid var(--border);background:var(--bg3);min-width:54px;color:var(--text-dim);cursor:pointer;border-radius:20px;flex-shrink:0;padding:6px 12px;font-size:12px;font-weight:700;transition:background .15s,color .15s,border-color .15s}.toggle-btn--on{background:var(--accent);color:var(--bg);border-color:var(--accent)}.toggle-btn:disabled{cursor:not-allowed}.led-test-panel{border:1px solid var(--border);background:var(--bg2);border-radius:10px;flex-direction:column;gap:14px;max-width:640px;margin:0 auto;padding:20px;display:flex}.led-test-panel--embedded{background:0 0;border:none;max-width:none;margin:0;padding:0}.settings-card-title{color:var(--text);font-size:16px;font-weight:700}.led-test-desc,.led-test-hint{color:var(--text-dim);font-size:13px;line-height:1.6}.led-test-hint{color:var(--accent);font-weight:600}.led-test-controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.led-test-index{color:var(--accent);min-width:100px;font-size:20px;font-weight:700}.led-test-progress{color:var(--text-dim);font-size:12px}.led-test-layout-wrap{padding-bottom:8px;overflow-x:auto}.led-rec-key{background:var(--key-bg);border:1px solid var(--border);cursor:pointer;border-radius:5px;flex-direction:column;justify-content:center;align-items:center;gap:2px;transition:background .1s,border-color .1s;display:flex}.led-rec-key:hover:not(:disabled){background:var(--key-hover);border-color:var(--accent)}.led-rec-key__id{color:var(--text-dim);pointer-events:none;font-size:10px;font-weight:600}.led-rec-key__led{color:#ff6400;pointer-events:none;font-size:11px;font-weight:700}.led-rec-key--mapped{background:color-mix(in srgb, #ff6400 18%, var(--key-bg));border-color:#ff6400}.led-rec-key--ball{opacity:.25;cursor:not-allowed}.led-rec-key--dim{opacity:.35}.led-rec-key:disabled{cursor:not-allowed}.led-layout-bg--picking{cursor:crosshair}.led-layout-overlay{cursor:crosshair;z-index:10}.underglow-dot--recorded{pointer-events:none;z-index:5;background:#a78bfa66;border:2px solid #a78bfa;border-radius:50%;width:14px;height:14px;position:absolute}.led-mapping-table{border:1px solid var(--border);background:var(--bg);border-radius:6px;flex-direction:column;gap:2px;max-height:320px;padding:8px;display:flex;overflow-y:auto}.led-map-row{border-radius:4px;gap:12px;padding:3px 6px;font-size:12px;display:flex}.led-map-idx{color:var(--text-dim);min-width:52px;font-weight:700}.led-map-val{color:var(--text)}.led-map-row--key{background:#ff64001a}.led-map-row--underglow{background:#a78bfa1f}.led-map-row--skip{background:color-mix(in srgb, var(--accent) 10%, transparent)}.led-map-row--unmapped{opacity:.45}.underglow-board-wrap{flex-direction:column;gap:6px;display:flex}.underglow-board{border:2px solid var(--border);background:var(--bg);cursor:crosshair;border-radius:6px;position:relative;overflow:hidden}.underglow-board__pcb{border:1px dashed color-mix(in srgb, var(--accent) 50%, transparent);pointer-events:none;border-radius:3px;position:absolute;top:6px;bottom:6px}.underglow-board__pcb-label{color:var(--text-dim);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:11px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.underglow-dot{pointer-events:none;background:#ff8c0059;border:1.5px solid #ff8c00d9;border-radius:50%;width:14px;height:14px;position:absolute}.underglow-board__hint{color:var(--text-dim);font-size:11px}.key-palette{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden}.key-palette__header{cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:12px 16px;transition:background .15s;display:flex}.key-palette__header:hover{background:var(--bg3)}.key-palette__title{color:var(--text);font-size:14px;font-weight:700}.key-palette__title .settings-unit{margin-left:8px;font-size:11px;font-weight:400}.key-palette__body{padding:0 16px 16px}.key-palette__grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px;max-height:260px;padding:2px;display:grid;overflow-y:auto}.key-palette__grid .picker-key{cursor:grab}.key-palette__grid .picker-key:active{cursor:grabbing}.mod-bar{background:var(--bg3);border:1px solid var(--border);border-radius:8px;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;padding:8px 10px;display:flex}.mod-bar__label{color:var(--text-dim);white-space:nowrap;font-size:12px}.mod-bar__hint{color:var(--accent);margin-left:4px;font-size:11px}.mod-bar__hint strong{color:var(--text)}.picker-key--dim{opacity:.3}.hold-kind-tabs{gap:4px;margin-bottom:8px;display:flex}.hold-kind-tabs .tab{padding:4px 14px;font-size:12px}.custom-hex-input{letter-spacing:1px;max-width:200px;font-family:SF Mono,Menlo,Monaco,Consolas,monospace;font-size:16px}.modal-overlay{z-index:1000;background:#000000a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-dialog{background:var(--bg2);border:1px solid var(--border);border-radius:12px;flex-direction:column;width:860px;max-width:96vw;max-height:88vh;display:flex;overflow:hidden;box-shadow:0 20px 60px #0009}.modal-header{border-bottom:1px solid var(--border);background:var(--bg3);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.modal-title{color:var(--text-dim);font-size:14px}.modal-title strong{color:var(--accent);font-size:15px}.modal-title__code{color:var(--text-dim);margin-left:6px;font-size:11px}.modal-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:18px;line-height:1}.modal-close:hover{color:var(--text);background:var(--bg)}.modal-type-tabs{border-bottom:1px solid var(--border);gap:4px;padding:10px 14px 0;display:flex}.modal-type-tabs .tab{padding:6px 16px;font-size:13px}.modal-body{flex:1;padding:14px;overflow-y:auto}.gesture-grid{flex-direction:column;gap:8px;margin:10px 0;display:flex}.gesture-row{align-items:center;gap:12px;display:flex}.gesture-dir{width:60px;color:var(--text);font-weight:600}.gesture-key-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text);cursor:pointer;text-align:left;border-radius:6px;flex:1;padding:8px 12px;font-size:14px}.gesture-key-btn:hover:not(:disabled){background:var(--bg3);border-color:var(--accent)}.gesture-key-btn:disabled{opacity:.5;cursor:not-allowed}.modal-search{margin-bottom:10px;position:relative}.modal-search__input{background:var(--bg3);border:1px solid var(--border);width:100%;color:var(--text);border-radius:6px;padding:8px 36px 8px 12px;font-size:13px}.modal-search__input:focus{border-color:var(--accent);outline:none}.modal-search__clear{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:14px;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.modal-search__clear:hover{color:var(--text);background:var(--bg)}.modal-panel__tabs{flex-wrap:wrap;gap:4px;margin-bottom:10px;display:flex}.modal-panel__grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px;max-height:380px;padding:2px;display:grid;overflow-y:auto}.picker-empty{text-align:center;color:var(--text-dim);grid-column:1/-1;padding:24px 0;font-size:13px}.modal-result-count{color:var(--text-dim);text-align:right;margin-top:6px;font-size:11px}.modal-td__slots{flex-direction:column;gap:10px;display:flex}.modal-td__slot{border:1px solid var(--border);border-radius:8px;overflow:hidden}.modal-td__slot--active{border-color:var(--accent)}.modal-td__slot-header{background:var(--bg3);justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.modal-td__slot-body{flex-direction:column;gap:8px;padding:8px 12px;display:flex}.btn--unsaved{animation:2s ease-in-out infinite unsaved-pulse;position:relative}@keyframes unsaved-pulse{0%,to{box-shadow:0 0 #7aa2f780}50%{box-shadow:0 0 0 6px #7aa2f700}}.welcome-guide{background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--bg2)), var(--bg2));border:1px solid var(--accent);border-radius:12px;flex-direction:column;gap:14px;margin-bottom:16px;padding:16px 20px;animation:.3s guide-in;display:flex}@keyframes guide-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.welcome-guide--done{flex-direction:row;justify-content:center;align-items:center;gap:10px;padding:14px 20px;animation:.2s guide-in}.welcome-done-icon{font-size:20px}.welcome-done-text{color:var(--green);font-size:15px;font-weight:700}.welcome-guide__header{justify-content:space-between;align-items:center;gap:12px;display:flex}.welcome-guide__title{color:var(--accent);font-size:14px;font-weight:700}.welcome-guide__close{color:var(--text-dim);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:4px;flex-shrink:0;padding:3px 8px;font-size:12px}.welcome-guide__close:hover{color:var(--text);background:var(--bg3)}.welcome-steps{flex-wrap:wrap;align-items:stretch;gap:8px;display:flex}.welcome-step{background:var(--bg3);border:1.5px solid var(--border);opacity:.5;border-radius:8px;flex:1;align-items:center;gap:8px;min-width:160px;padding:10px 14px;transition:all .2s;display:flex}.welcome-step--done{opacity:.6;border-color:var(--green);background:color-mix(in srgb, var(--green) 8%, var(--bg3))}.welcome-step--active{opacity:1;border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--bg3));box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent)}.welcome-step__icon{flex-shrink:0;font-size:22px}.welcome-step__body{flex-direction:column;flex:1;gap:2px;display:flex}.welcome-step__num{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:600}.welcome-step--active .welcome-step__num{color:var(--accent)}.welcome-step__title{color:var(--text);font-size:13px;font-weight:700}.welcome-step__desc{color:var(--text-dim);font-size:11px;line-height:1.4}.welcome-step--active .welcome-step__desc{color:var(--text)}.welcome-step__arrow{color:var(--text-dim);flex-shrink:0;align-self:center;font-size:16px;display:none}.macro-editor{flex-direction:column;gap:16px;padding:4px 0;display:flex}.macro-buffer-bar{color:var(--text-dim);align-items:center;gap:10px;font-size:11px;display:flex}.macro-buffer-label{flex-shrink:0}.macro-buffer-track{background:var(--bg3);border-radius:3px;flex:1;height:6px;overflow:hidden}.macro-buffer-fill{border-radius:3px;height:100%;transition:width .3s,background .3s}.macro-buffer-pct{flex-shrink:0}.macro-layout{flex-wrap:wrap;align-items:flex-start;gap:16px;display:flex}.macro-slot-list{flex-direction:column;flex-shrink:0;gap:4px;min-width:220px;display:flex}.macro-slot-btn{background:var(--bg2);border:1px solid var(--border);cursor:pointer;text-align:left;border-radius:6px;align-items:center;gap:8px;width:100%;padding:7px 10px;transition:background .1s,border-color .1s;display:flex}.macro-slot-btn:hover:not(:disabled){background:var(--bg3);border-color:var(--accent)}.macro-slot-btn--active{background:var(--accent)!important;border-color:var(--accent)!important}.macro-slot-btn--active .macro-slot-id,.macro-slot-btn--active .macro-slot-preview{color:var(--key-sel-fg)!important}.macro-slot-btn:disabled{opacity:.4;cursor:not-allowed}.macro-slot-id{color:var(--accent);min-width:28px;font-size:11px;font-weight:700}.macro-slot-btn--active .macro-slot-id{color:var(--key-sel-fg)}.macro-slot-preview{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px;overflow:hidden}.macro-slot-btn--has-data .macro-slot-preview{color:var(--text)}.macro-edit-panel{background:var(--bg2);border:1px solid var(--border);border-radius:10px;flex-direction:column;flex:1;gap:14px;min-width:300px;padding:16px;display:flex}.macro-edit-title{color:var(--accent);font-size:15px;font-weight:700}.macro-edit-hint{color:var(--text-dim);margin-left:8px;font-size:11px;font-weight:400}.macro-steps{flex-direction:column;gap:6px;display:flex}.macro-step{align-items:center;gap:8px;display:flex}.macro-step-num{color:var(--text-dim);text-align:right;min-width:16px;font-size:12px;font-weight:600}.macro-kc-select{flex:1;align-items:center;gap:6px;display:flex}.macro-kc-search{background:var(--bg3);border:1px solid var(--border);width:110px;color:var(--text);border-radius:4px;flex-shrink:0;padding:4px 8px;font-size:11px}.macro-kc-search:focus{border-color:var(--accent);outline:none}.macro-kc-dropdown{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:4px;flex:1;padding:4px 6px;font-size:12px}.macro-kc-dropdown:focus{border-color:var(--accent);outline:none}.macro-edit-actions{flex-wrap:wrap;gap:8px;display:flex}.macro-edit-desc{color:var(--text-dim);font-size:11px;line-height:1.6}.macro-edit-header{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.macro-edit-toolbar{flex-wrap:wrap;gap:6px;margin-left:auto;display:flex}.btn--record-stop{cursor:pointer;background:var(--red);color:#fff;border:none;border-radius:6px;padding:6px 16px;font-size:13px;font-weight:700;animation:1s ease-in-out infinite rec-pulse}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.7}}.macro-recording-indicator{border:1px solid var(--red);color:var(--red);background:#f7768e1f;border-radius:8px;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-weight:600;display:flex}.macro-rec-dot{font-size:10px;animation:.8s ease-in-out infinite rec-pulse}.macro-rec-count{opacity:.8;margin-left:auto;font-size:11px}.mstep-recording{background:var(--bg3);border-radius:6px;align-items:center;gap:8px;padding:5px 8px;animation:.15s step-in;display:flex}@keyframes step-in{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}.mstep-rec-key{color:var(--text);min-width:32px;font-size:14px;font-weight:700}.mstep-rec-delay{color:var(--text-dim);background:var(--bg2);border-radius:4px;padding:2px 6px;font-size:11px}.mstep{flex-direction:column;gap:2px;display:flex}.mstep-delay{align-items:center;padding-left:28px;display:flex}.mstep-delay-badge{color:var(--text-dim);background:var(--bg3);border-radius:4px;align-items:center;gap:4px;padding:2px 6px;font-size:11px;display:flex}.mstep-delay-input{background:var(--bg2);border:1px solid var(--border);width:56px;color:var(--text);text-align:right;border-radius:3px;padding:1px 4px;font-size:11px}.mstep-delay-rm{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:12px;line-height:1}.mstep-delay-rm:hover{color:var(--red)}.mstep-delay-add{border:1px dashed var(--border);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:4px;padding:1px 8px;font-size:10px}.mstep-delay-add:hover{border-color:var(--accent);color:var(--accent)}.mstep-key{background:var(--bg3);border-radius:6px;align-items:center;gap:6px;padding:4px 6px;display:flex}.mstep-num{color:var(--text-dim);text-align:right;min-width:16px;font-size:11px;font-weight:600}.mstep-key-select{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:4px;flex:1;padding:3px 6px;font-size:12px}.mstep-key-select:focus{border-color:var(--accent);outline:none}.mstep-key-label{color:var(--accent);text-align:center;min-width:28px;font-size:13px;font-weight:700}.mstep-hold-btn{background:var(--bg2);color:var(--text-dim);border:1px solid var(--border);cursor:pointer;white-space:nowrap;border-radius:4px;flex-shrink:0;padding:3px 8px;font-size:11px;font-weight:600;transition:background .1s,color .1s,border-color .1s}.mstep-hold-btn:hover{border-color:var(--accent);color:var(--text)}.mstep-hold-btn--on{background:color-mix(in srgb, var(--accent) 18%, var(--bg2));color:var(--accent);border-color:var(--accent)}.mstep-delete{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:13px;line-height:1}.mstep-delete:hover{color:var(--red);background:#f7768e1a}.macro-empty-hint{color:var(--text-dim);text-align:center;padding:16px 0;font-size:12px}.matrix-layout-wrap{width:100%;margin-top:8px;position:relative;overflow:hidden}.matrix-key{border:1.5px solid var(--border);background:var(--key-bg);-webkit-user-select:none;user-select:none;border-radius:5px;justify-content:center;align-items:center;transition:background 80ms,border-color 80ms,box-shadow 80ms;display:flex}.matrix-key__label{color:var(--text-dim);pointer-events:none;font-size:9px}.matrix-key--idle{opacity:.5}.matrix-key--pressed{background:#22c55e;border-color:#16a34a;box-shadow:0 0 8px #22c55e88}.matrix-key--pressed .matrix-key__label{color:#fff;font-weight:700}.matrix-key--touched{background:#14532d55;border-color:#22c55e88}.matrix-key--touched .matrix-key__label{color:#86efac}.reorder-bar{background:color-mix(in srgb, var(--accent) 14%, transparent);border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);border-radius:8px;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0;padding:8px 12px;font-size:13px;display:flex}.btn--layer[draggable=true]{cursor:grab}.btn--layer-dragging{opacity:.45}