:root{--page-bg:#f7f7f7;--text-color:#111827;--muted-color:#4b5563;--card-bg:#fff;--panel-bg:#fff;--border-color:#e5e7eb;--shadow:0 4px 12px #0000000f;--shadow-strong:0 8px 18px #00000014;--button-bg:#fff;--button-border:#e5e7eb;--button-text:#111827;--button-shadow:0 4px 12px #0000000f;--button-shadow-strong:0 8px 18px #00000014;--button-disabled-bg:#f3f4f6;--button-disabled-border:#e5e7eb;--button-disabled-text:#9ca3af;--accent:#0f62fe;--accent-soft:#60a5fa;--checkbox-bg:#f3f4f6;--subtle-bg:#f9fafb;--warn-bg:#fff7ed;--warn-border:#fdba74;--warn-text:#9a3412;--success:#047857;--success-bg:#ecfdf3;--success-border:#bbf7d0;--success-text:#065f46;--info-bg:#e8f0ff;--info-border:#cbdafe;--info-text:#0f172a;--error-bg:#fef2f2;--error-border:#fecdd3;--error-text:#991b1b;--dev-toggle-bg:#fff;--dev-toggle-text:#111827;--progress-start:#0f62fe;--progress-end:#60a5fa;--detected-bg:#eaf2ff;--detected-border:#d0e1ff;--detected-text:#0f172a;--detected-muted:#4b5563;--pill-bg:#0f62fe;--pill-text:#fff;--pill-warn-bg:#f59e0b;--pill-warn-text:#0f172a;color:var(--text-color);background-color:var(--page-bg);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--page-bg:#0b1220;--text-color:#e5e7eb;--muted-color:#94a3b8;--card-bg:#0f172a;--panel-bg:#0f172a;--border-color:#1f2937;--shadow:0 2px 10px #00000059;--shadow-strong:0 10px 24px #00000073;--button-bg:#182338;--button-border:#25344c;--button-text:#e5e7eb;--button-shadow:0 6px 18px #00000080;--button-shadow-strong:0 12px 28px #0000008c;--button-disabled-bg:#111827;--button-disabled-border:#1f2937;--button-disabled-text:#6b7280;--accent:#69a6ff;--accent-soft:#8ab4f8;--checkbox-bg:#111827;--subtle-bg:#111827;--warn-bg:#2b1600;--warn-border:#b45309;--warn-text:#fbbf24;--success:#34d399;--success-bg:#0f2b20;--success-border:#1e3a2f;--success-text:#a7f3d0;--info-bg:#142742;--info-border:#1f3353;--info-text:#dbeafe;--error-bg:#2a0f16;--error-border:#4a1c24;--error-text:#fecdd3;--dev-toggle-bg:#0f172a;--dev-toggle-text:#e5e7eb;--progress-start:#69a6ff;--progress-end:#8ab4f8;--detected-bg:#0f1b33;--detected-border:#1f2f4a;--detected-text:#e5e7eb;--detected-muted:#94a3b8;--pill-bg:#69a6ff;--pill-text:#0b1220;--pill-warn-bg:#fbbf24;--pill-warn-text:#0b1220}}.layout-preview{--tile-size:196px;--tile-gap:12px;--row-padding:6px;isolation:isolate;z-index:0;width:100%;margin-top:14px;display:block;position:relative}.panel-header.layout-panel-header{flex-flow:row;justify-content:space-between;align-items:flex-start;gap:12px}.layout-heading-text{flex-direction:column;gap:4px;display:flex}@media (max-width:640px){.panel-header.layout-panel-header{flex-wrap:wrap;align-items:center}}.encoder-column{gap:var(--tile-gap);flex-direction:column;flex:none;align-items:center;margin-top:6px;display:flex}.encoder-tile{width:var(--tile-size);height:calc(2*var(--tile-size) + var(--tile-gap) + 4*var(--row-padding) - 2px);border:1px solid var(--border-color);background:var(--encoder-bg);box-shadow:var(--shadow);z-index:0;border-radius:14px;flex-direction:column;justify-content:space-between;gap:10px;padding:48px 12px 12px;display:flex;position:relative;overflow:hidden}.encoder-label{z-index:4;background:var(--card-bg);box-shadow:var(--shadow);white-space:nowrap;text-overflow:ellipsis;text-align:center;border-radius:8px;justify-content:center;align-items:center;max-width:90%;padding:6px 24px;font-size:13px;font-weight:700;display:inline-flex;position:absolute;top:10px;left:50%;overflow:hidden;transform:translate(-50%)}.encoder-press{color:var(--muted-color);font-size:12px}.layout-actions{flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;display:inline-flex}.layout-scroll{cursor:auto;-webkit-user-select:none;user-select:none;width:100%;max-width:100%;display:flex;overflow-x:auto}.layout-scroll.scrollable{cursor:grab}.layout-scroll.scrollable:active{cursor:grabbing}.layout-scroll-inner{gap:var(--tile-gap);flex-wrap:nowrap;align-items:flex-start;width:max-content;min-width:auto;display:flex}.button-grid{gap:var(--tile-gap);flex-direction:column;flex:1 0 auto;width:max-content;min-width:auto;display:flex}.button-grid-inner{gap:var(--tile-gap);flex-direction:column;width:max-content;min-width:100%;display:flex}.button-row{gap:var(--tile-gap);padding:var(--row-padding)4px calc(var(--row-padding) + 10px);box-sizing:border-box;flex-wrap:nowrap;width:100%;max-width:100%;margin:0 -4px;display:flex}.layout-scroll::-webkit-scrollbar{height:12px}.layout-scroll::-webkit-scrollbar-track{background:#ffffff14;border-radius:999px;margin:2px 0}.layout-scroll::-webkit-scrollbar-thumb{background:#ffffff73;border:2px solid #0003;border-radius:999px}.layout-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff8c}.layout-scroll{scrollbar-width:thin;scrollbar-color:#ffffff8c #ffffff14}.button-tile{width:var(--tile-size);height:var(--tile-size);text-align:center;border:1px solid var(--border-color);background:var(--card-bg);box-shadow:var(--shadow);z-index:0;border-radius:12px;flex-direction:column;flex:none;justify-content:space-between;gap:8px;padding:12px;display:flex;position:relative;overflow:hidden}.button-bg{z-index:0;position:absolute;inset:0}.lighting-preview{border:1px solid var(--border-color);background:var(--card-bg);width:80px;height:80px;box-shadow:var(--shadow);border-radius:12px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.lighting-preview-surface{border-radius:inherit;pointer-events:none;box-shadow:var(--shadow);border:1px solid #ffffff29;transition:opacity 80ms;position:absolute;inset:0;overflow:hidden}.lighting-preview.interactive{cursor:pointer;transition:transform .12s,box-shadow .12s}.lighting-preview.interactive:hover,.lighting-preview.interactive:focus-visible{box-shadow:var(--shadow-strong);transform:translateY(-2px)}.lighting-preview-label{z-index:2;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow);background:#0000008c;border-radius:8px;margin-bottom:8px;padding:6px 10px;font-size:12px;font-weight:700;position:relative}.button-grid .button-tile.clickable{cursor:auto}.layout-scroll.scrollable .button-tile.clickable{cursor:grab}.layout-scroll.scrollable .button-tile.clickable:active{cursor:grabbing}.button-tile .button-action{cursor:pointer}.button-main{z-index:1;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;padding-top:46px;display:flex;position:relative}.button-label-row{z-index:4;box-shadow:none;background:0 0;border-radius:0;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:0;display:grid;position:absolute;top:0;left:0;right:0}.button-label-pill{white-space:nowrap;text-overflow:ellipsis;background:var(--card-bg);max-width:140px;box-shadow:var(--shadow);border-radius:8px;justify-self:center;padding:6px 12px;font-weight:700;display:inline-block;overflow:hidden}.button-flag{background:var(--flag-bg);width:32px;height:32px;color:var(--flag-text);box-shadow:var(--shadow);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;border:none;border-radius:999px;justify-content:center;align-items:center;padding:0;font-size:20px;font-weight:600;line-height:1;display:inline-flex;position:relative}.button-flag.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 20}.bootloader-legend{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.legend-item{align-items:center;gap:4px;display:inline-flex}.legend-icon{vertical-align:middle;justify-content:center;align-items:center;font-size:22px;line-height:1;display:inline-flex}.legend-text{align-items:center;line-height:1.2;display:inline-flex}.button-flag.boot-flag,.button-flag.chord-flag{background:var(--flag-bg);color:var(--flag-text)}.button-flag.inactive{background:var(--flag-bg-muted);color:var(--flag-text-muted);box-shadow:none}.button-flag:disabled,.button-flag[aria-disabled=true]{cursor:default;opacity:.75}.button-flag.placeholder{opacity:.6}.button-tile-actions{box-shadow:var(--shadow-strong);z-index:5;pointer-events:none;background:linear-gradient(#0000,#0000003d);border-radius:12px;flex-direction:column;justify-content:flex-end;gap:12px;padding:56px 12px 14px;display:flex;position:absolute;inset:0}.hover-actions{opacity:0;pointer-events:none;transition:opacity .14s}.button-tile:hover .hover-actions,.button-tile:focus-within .hover-actions,.encoder-binding-tile:hover .hover-actions,.encoder-binding-tile:focus-within .hover-actions{opacity:1}.hover-actions .button-action{pointer-events:none}.button-tile:hover .hover-actions .button-action,.button-tile:focus-within .hover-actions .button-action,.encoder-binding-tile:hover .hover-actions .button-action,.encoder-binding-tile:focus-within .hover-actions .button-action{pointer-events:auto}.button-tile:hover .hover-actions .button-action:disabled,.button-tile:focus-within .hover-actions .button-action:disabled,.encoder-binding-tile:hover .hover-actions .button-action:disabled,.encoder-binding-tile:focus-within .hover-actions .button-action:disabled{pointer-events:none}.button-action{flex:1;padding:8px 0;font-size:13px;font-weight:600}.button-tile.rainbow,.lighting-preview-surface.passive.rainbow{background:var(--card-bg);box-shadow:var(--shadow);border-color:#ffffff38}.button-tile.rainbow:before,.lighting-preview-surface.passive.rainbow:before{content:"";border-radius:inherit;background:linear-gradient(135deg,rgba(255,77,79,var(--rainbow-alpha,1)),rgba(255,77,79,var(--rainbow-alpha,1)));animation:rainbow-roll var(--rainbow-duration,13s)steps(192)infinite;animation-delay:var(--rainbow-delay,0s);mix-blend-mode:var(--rainbow-blend-mode,multiply);opacity:var(--rainbow-overlay-opacity,1);pointer-events:none;z-index:0;position:absolute;inset:0}.button-tile.breathing,.lighting-preview-surface.passive.breathing{animation:breathing-shell var(--breathing-duration,8s)ease-in-out infinite}.button-tile.breathing:before,.lighting-preview-surface.passive.breathing:before{content:"";border-radius:inherit;background:inherit;opacity:1;z-index:0;pointer-events:none;will-change:filter,opacity;position:absolute;inset:0}@keyframes rainbow-roll{0%{filter:hue-rotate()}to{filter:hue-rotate(-360deg)}}@keyframes breathing-shell{0%{filter:brightness(var(--breathing-min,.2));opacity:1;box-shadow:0 0 0 1px #ffffff0d,0 6px 16px #00000029}50%{filter:brightness();opacity:1;box-shadow:0 0 0 1px #ffffff24,0 14px 34px #00000052}to{filter:brightness(var(--breathing-min,.2));opacity:1;box-shadow:0 0 0 1px #ffffff0d,0 6px 16px #00000029}}.binding-text{text-overflow:ellipsis;-webkit-line-clamp:2;overflow-wrap:anywhere;-webkit-box-orient:vertical;margin-bottom:6px;font-weight:600;line-height:1.25;display:-webkit-box;overflow:hidden}.encoder-binding-list{flex-direction:column;flex:1;gap:10px;min-height:0;margin-top:4px;display:flex}.encoder-binding-tile{border:1px solid var(--border-color);background:var(--card-bg);box-shadow:var(--shadow);z-index:0;border-radius:12px;flex-direction:column;flex:1;gap:6px;min-height:0;padding:12px;transition:transform .12s,box-shadow .12s,border-color .12s;display:flex;position:relative;overflow:hidden}.encoder-binding-tile:hover{box-shadow:var(--shadow-strong);transform:translateY(-1px)}.encoder-binding-top{justify-content:center;align-items:center;gap:12px;display:flex}.encoder-binding-top .muted{background:var(--card-bg);border:1px solid var(--border-color);box-shadow:var(--shadow);white-space:nowrap;text-overflow:ellipsis;border-radius:999px;justify-content:center;align-items:center;max-width:100%;padding:6px 14px;font-weight:600;line-height:1.2;display:inline-flex;overflow:hidden}.encoder-binding-main{z-index:1;text-align:center;flex-direction:column;flex:1;align-items:center;gap:6px;display:flex;position:relative}.encoder-binding-tile .binding-text{text-align:center;margin-bottom:0}.encoder-binding-body{box-sizing:border-box;flex:1;justify-content:center;align-items:center;width:100%;padding:6px 8px 10px;display:flex}.encoder-binding-actions{box-shadow:var(--shadow-strong);z-index:2;background:linear-gradient(#0000,#0000003d);border-radius:12px;flex-direction:column;justify-content:flex-end;gap:8px;padding:56px 12px 14px;display:flex;position:absolute;inset:0}.step-header-left{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.step-select{align-items:center;gap:6px;display:inline-flex}.drag-handle{cursor:grab;-webkit-user-select:none;user-select:none;color:var(--text-color);font-weight:700}.drag-handle:active{cursor:grabbing}.step-card-selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 6px 18px #0000002e;background:linear-gradient(180deg,#0000000f,#0000001f),var(--subtle-bg);position:relative}.step-card-selected:before{content:"";background:var(--accent);border-radius:10px;width:6px;position:absolute;inset:6px auto 6px -4px}.step-card-selected:after{content:"";background:rgba(var(--accent-rgb,63,133,255),.05);pointer-events:none;border-radius:10px;position:absolute;inset:4px}.step-card-dragging{opacity:.7}.step-card-drop-target,.step-card-drag-group{outline:2px dashed var(--accent);outline-offset:2px}.step-card-highlight{animation:.46s step-highlight}.step-card-removing{pointer-events:none;max-height:1200px;animation:.22s forwards step-remove}.modal-body{flex-direction:column;gap:12px;margin-top:12px;padding-bottom:20px;padding-right:4px;display:flex;overflow-y:auto}.modal-actions{justify-content:flex-end;gap:10px;margin-top:16px;display:flex}.radio-row{flex-wrap:wrap;gap:16px;display:flex}.radio{align-items:center;gap:8px;font-size:14px;display:inline-flex}.steps-list{flex-direction:column;flex:none;gap:10px;display:flex}.steps-pane{flex-direction:column;gap:10px;min-height:260px;max-height:min(70vh,640px);display:flex}.steps-scroll{flex:auto;min-height:120px;max-height:calc(min(70vh,640px) - 120px);padding-right:4px;overflow-y:auto}.step-card{border:1px solid var(--border-color);background:var(--subtle-bg);box-shadow:var(--shadow);border-radius:12px;flex:none;padding:10px 12px;transition:transform .14s,box-shadow .14s,border-color .14s;overflow:hidden}.step-card-fresh{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;animation:.24s forwards step-in;transform:translateY(-6px)}.step-card-collapsed{background:var(--card-bg);padding-bottom:12px}.step-card-collapsed .step-header{margin-bottom:0}.step-body{opacity:0;pointer-events:none;max-height:0;margin-top:0;padding-top:0;transition:max-height .18s,opacity .15s,transform .15s,padding-top .15s,margin-top .15s;overflow:hidden;transform:translateY(-4px)}.step-body.expanded{opacity:1;pointer-events:auto;max-height:1200px;margin-top:2px;padding-top:6px;transition:max-height .16s,opacity .14s,transform .14s,padding-top .14s,margin-top .14s;transform:translateY(0)}.step-card-pause{background:var(--card-bg);border-style:dashed}.step-header{cursor:pointer;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;display:flex}.step-header-actions{flex-wrap:wrap;gap:6px;display:flex}.step-title{font-weight:600}.step-preview{white-space:nowrap;text-overflow:ellipsis;max-width:320px;overflow:hidden}.checkbox-row{flex-wrap:wrap;gap:8px;display:flex}.checkbox-row.tight{gap:6px}.step-body .checkbox:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb,63,133,255),.35);background:linear-gradient(180deg,rgba(var(--accent-rgb,63,133,255),.12),rgba(var(--accent-rgb,63,133,255),.18));color:var(--text-color)}.timing-row{flex-wrap:wrap;gap:10px;display:flex}.inline-input{flex-direction:column;flex:1;gap:6px;min-width:140px;display:flex}.step-actions{flex-wrap:wrap;gap:8px;padding-bottom:6px;display:flex}.step-controls{flex-flow:column;align-items:flex-start;gap:6px;margin-bottom:8px;display:flex}.step-control-buttons{flex-wrap:wrap;gap:8px;display:flex}.step-kind-toggle{flex-wrap:wrap;gap:8px;margin-bottom:8px;display:flex}.btn.ghost.active{border-color:var(--accent);color:var(--accent)}.step-dropzone{border:1px dashed var(--border-color);text-align:center;color:var(--text-color);opacity:.8;background:var(--subtle-bg);border-radius:10px;padding:10px;font-size:13px}.step-dropzone.drop-target{border-color:var(--accent);color:var(--accent);opacity:1}.key-capture{border:1px dashed var(--border-color);background:var(--card-bg);cursor:pointer;min-width:96px;min-height:38px;box-shadow:var(--shadow);-webkit-user-select:none;user-select:none;border-radius:10px;justify-content:center;align-items:center;padding:8px 10px;display:inline-flex}.key-capture.capturing{border-color:var(--accent);color:var(--accent)}.key-row{flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:8px;display:flex}.key-select{flex:1;min-width:220px}.key-actions{flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;min-width:180px;display:flex}.key-actions .btn{justify-content:center;align-items:center;min-height:40px;display:inline-flex}.key-row+.timing-row{margin-top:10px}.hidden-key-input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.mouse-value-input:disabled,.value-na-input:disabled{background:repeating-linear-gradient(135deg,var(--card-bg),var(--card-bg)10px,var(--border-color)10px,var(--border-color)14px);border-color:var(--border-color);color:var(--muted-color);box-shadow:none;cursor:not-allowed}.mouse-value-input:disabled::placeholder,.value-na-input:disabled::placeholder{color:var(--muted-color)}.mouse-help-spacer{margin-top:6px;margin-bottom:12px}.local-error-banner{margin-bottom:.35rem;animation:.16s local-error-in,.24s 2s forwards local-error-out;overflow:hidden}@keyframes local-error-in{0%{opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:translateY(-6px)}to{opacity:1;max-height:200px;margin-bottom:.35rem;padding-top:10px;padding-bottom:10px;transform:translateY(0)}}@keyframes local-error-out{0%{opacity:1;max-height:200px;margin-bottom:.35rem;padding-top:10px;padding-bottom:10px;transform:translateY(0)}to{opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:translateY(-6px)}}.gap-spacer{margin-top:12px}@keyframes step-highlight{0%{box-shadow:0 0 0 0 var(--accent);transform:translateY(-2px)}60%{transform:translateY(0);box-shadow:0 0 0 6px #0000}to{box-shadow:var(--shadow);transform:none}}@keyframes step-remove{to{opacity:0;max-height:0;box-shadow:none;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(-6px)scale(.97)}}@keyframes step-in{to{opacity:1;max-height:1200px;padding-top:10px;padding-bottom:12px;transform:translateY(0)}}@keyframes modal-pop{0%{opacity:0;transform:translateY(-14px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes modal-pop-out{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(12px)scale(.985)}}@keyframes backdrop-fade{0%{opacity:0}to{opacity:1}}@keyframes backdrop-fade-out{0%{opacity:1}to{opacity:0}}:root{--page-bg:#f7f7f7;--text-color:#111827;--muted-color:#4b5563;--card-bg:#fff;--panel-bg:#fff;--encoder-bg:#f6f7fb;--border-color:#e5e7eb;--shadow:0 4px 12px #0000000f;--shadow-strong:0 8px 18px #00000014;--button-bg:#fff;--button-border:#e5e7eb;--button-text:#111827;--button-primary-text:#fff;--button-shadow:0 4px 12px #0000000f;--button-shadow-strong:0 8px 18px #00000014;--button-disabled-bg:#f3f4f6;--button-disabled-border:#e5e7eb;--button-disabled-text:#9ca3af;--accent:#0f62fe;--accent-soft:#60a5fa;--checkbox-bg:#f3f4f6;--subtle-bg:#f9fafb;--warn-bg:#fff7ed;--warn-border:#fdba74;--warn-text:#9a3412;--success:#047857;--success-bg:#ecfdf3;--success-border:#bbf7d0;--success-text:#065f46;--info-bg:#e8f0ff;--info-border:#cbdafe;--info-text:#0f172a;--error-bg:#fef2f2;--error-border:#fecdd3;--error-text:#991b1b;--dev-toggle-bg:#fff;--dev-toggle-text:#111827;--progress-start:#0f62fe;--progress-end:#60a5fa;--detected-bg:#eaf2ff;--detected-border:#d0e1ff;--detected-text:#0f172a;--detected-muted:#4b5563;--pill-bg:#0f62fe;--pill-text:#fff;--pill-warn-bg:#f59e0b;--pill-warn-text:#0f172a;--flag-bg:#0f62fe;--flag-text:#fff;--flag-bg-muted:#cbd5e1;--flag-text-muted:#1f2937;--rainbow-blend-mode:multiply;--rainbow-overlay-opacity:.95;color:var(--text-color);background-color:var(--page-bg);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--page-bg:#0b1220;--text-color:#e5e7eb;--muted-color:#94a3b8;--card-bg:#0f172a;--panel-bg:#0f172a;--encoder-bg:#0c1528;--border-color:#1f2937;--shadow:0 2px 10px #00000059;--shadow-strong:0 10px 24px #00000073;--button-bg:#182338;--button-border:#25344c;--button-text:#e5e7eb;--button-primary-text:#0b1220;--button-shadow:0 6px 18px #00000080;--button-shadow-strong:0 12px 28px #0000008c;--button-disabled-bg:#111827;--button-disabled-border:#1f2937;--button-disabled-text:#6b7280;--accent:#69a6ff;--accent-soft:#8ab4f8;--checkbox-bg:#111827;--subtle-bg:#111827;--warn-bg:#241a0d;--warn-border:#c27c2c;--warn-text:#f3cf7a;--success:#34d399;--success-bg:#0f2b20;--success-border:#1e3a2f;--success-text:#a7f3d0;--info-bg:#142742;--info-border:#1f3353;--info-text:#dbeafe;--error-bg:#2a0f16;--error-border:#4a1c24;--error-text:#fecdd3;--dev-toggle-bg:#0f172a;--dev-toggle-text:#e5e7eb;--progress-start:#69a6ff;--progress-end:#8ab4f8;--detected-bg:#0f1b33;--detected-border:#1f2f4a;--detected-text:#e5e7eb;--detected-muted:#94a3b8;--pill-bg:#69a6ff;--pill-text:#0b1220;--pill-warn-bg:#fbbf24;--pill-warn-text:#0b1220;--flag-bg:#69a6ff;--flag-text:#0b1220;--flag-bg-muted:#25344c;--flag-text-muted:#e5e7eb;--rainbow-blend-mode:screen;--rainbow-overlay-opacity:1}}*{box-sizing:border-box}body{min-height:100vh;margin:0}a{color:inherit;text-decoration:none}.modal-backdrop{z-index:1200;background:#0009;justify-content:center;align-items:center;padding:20px;animation:.16s forwards backdrop-fade;display:flex;position:fixed;inset:0}.modal-backdrop.closing{animation:.16s forwards backdrop-fade-out}.modal{background:var(--card-bg);color:var(--text-color);border:1px solid var(--border-color);width:min(900px,95vw);max-height:90vh;box-shadow:var(--shadow-strong);transform-origin:top;z-index:1201;border-radius:14px;flex-direction:column;padding:16px;animation:.22s cubic-bezier(.22,.61,.36,1) forwards modal-pop;display:flex;overflow:hidden}.modal.closing{animation:.2s forwards modal-pop-out}.modal-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.modal-title{font-weight:700}.config-modal{width:min(520px,90vw)}.demo-modal{width:min(320px,90vw)}.demo-option{border:1px solid var(--border-color);background:var(--card-bg);border-radius:12px;align-items:flex-start;gap:10px;padding:10px 12px;transition:border-color .12s,box-shadow .12s,background .12s;display:flex}.demo-option input[type=radio]{margin-top:4px}.demo-option-body{flex-direction:column;gap:4px;display:flex}.demo-option-name{font-weight:600}.demo-option.demo-option-selected{border-color:var(--accent);box-shadow:0 0 0 2px #0f62fe47}.code-block{background:var(--card-bg);border:1px solid var(--border-color);white-space:pre-wrap;word-break:break-word;color:var(--text-color);border-radius:12px;outline:0;max-height:240px;padding:10px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:1.5;overflow:auto}.code-block.clickable{cursor:pointer}.code-block-flash{border-color:var(--accent);animation:.22s code-flash;box-shadow:0 0 0 3px #0f62fe59}.text-area{resize:vertical;color:var(--text-color);background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;outline:0;max-height:300px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:12px;line-height:1.5;overflow:auto}.text-area:focus,.text-area:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px #0f62fe47}@keyframes code-flash{0%{border-color:var(--accent);box-shadow:0 0 0 4px #0f62fe59}60%{border-color:var(--accent);box-shadow:0 0 0 8px #0f62fe00}to{box-shadow:none;border-color:var(--border-color)}}select,input[type=color]{border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-color);cursor:pointer;appearance:none;border-radius:10px;min-height:38px;padding:8px 10px;font-size:14px;line-height:1.2;box-shadow:inset 0 1px 2px #0000000a}select:focus-visible,input[type=color]:focus-visible{border-color:#0f62fe59;outline:none;box-shadow:0 0 0 1px #0f62fe2e,inset 0 1px 2px #0000000a}input[type=color]{width:48px;padding:6px}.lighting-modal,.modal.lighting-modal{width:min(410px,95vw)}.modal.step-modal{width:min(560px,95vw)}.select-input{width:100%;display:block}.app-shell{background:var(--page-bg);min-height:100vh;color:var(--text-color)}.container{max-width:900px;margin:0 auto;padding:32px 20px 80px}.title{margin:0;font-size:26px;font-weight:600}.muted{color:var(--muted-color)}.small{font-size:12px}.link{color:var(--accent)}.link:hover{text-decoration:underline}.hidden{display:none}.actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.actions+.space-y-2{margin-top:12px}.btn{border:1px solid var(--button-border);background:var(--button-bg);box-shadow:var(--button-shadow);color:var(--button-text);cursor:pointer;-webkit-tap-highlight-color:#0f62fe1f;border-radius:14px;padding:10px 16px;transition:transform .12s,box-shadow .12s}.btn:hover:not(:disabled){box-shadow:var(--button-shadow-strong);transform:translateY(-1px)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn:disabled{background:var(--button-disabled-bg);border-color:var(--button-disabled-border);color:var(--button-disabled-text);box-shadow:none;opacity:1;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--button-primary-text);border-color:var(--accent)}.btn-warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}.btn-warn:hover:not(:disabled){border-color:var(--warn-text)}.btn.ghost{border:1px solid var(--border-color);color:var(--text-color);box-shadow:none;background:0 0;border-radius:10px;padding:6px 10px}.btn-demo{background:var(--button-bg);border-color:var(--button-border);color:var(--button-text);box-shadow:var(--button-shadow)}.btn-demo:hover:not(:disabled){box-shadow:var(--button-shadow-strong)}.btn-drop{background:#f9fafb;border-style:dashed}.btn-drop.btn:disabled{background:var(--button-disabled-bg);border-style:dashed}.panel{background:var(--panel-bg);border:1px solid var(--border-color);box-shadow:var(--shadow);border-radius:16px;margin-top:12px;padding:16px}.panel-header{flex-direction:column;justify-content:space-between;gap:8px;display:flex}.panel-title{font-weight:600}.checkbox{background:var(--checkbox-bg);border:1px solid var(--border-color);border-radius:10px;align-items:center;gap:8px;padding:8px 10px;font-size:12px;display:inline-flex}.grid.two-col{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;display:grid}.card{border:1px solid var(--border-color);background:var(--card-bg);border-radius:12px;padding:12px}.card.subtle{background:var(--subtle-bg)}.card-title{margin-bottom:6px;font-weight:600}.status{font-size:14px}.space-y-2>*+*{margin-top:10px}.status-banner{border:1px solid var(--info-border);background:var(--info-bg);color:var(--info-text);box-shadow:var(--shadow);--status-progress-track:#00000014;--status-progress-start:var(--progress-start);--status-progress-end:var(--progress-end);border-radius:12px;padding:12px 14px}.status-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.status-title{font-weight:600}.status-body{color:var(--muted-color);margin-top:4px;font-size:13px}.status-body .code-block{margin-top:8px}.status-code-block{white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto}.status-spinner{border:2px solid;border-color:currentColor currentColor #0000 #0000;border-radius:999px;flex-shrink:0;width:16px;height:16px;animation:.8s linear infinite status-spin;display:inline-block}@keyframes status-spin{to{transform:rotate(360deg)}}.status-progress-block{flex-direction:column;gap:6px;margin-top:10px;display:flex}.status-progress{background:var(--status-progress-track);border-radius:999px;width:100%;height:10px;overflow:hidden}.status-progress-bar{background:linear-gradient(90deg,var(--status-progress-start),var(--status-progress-end));border-radius:999px;height:100%}.status-progress-meta{color:inherit;opacity:.85;font-size:12px}@media (prefers-color-scheme:dark){.status-banner{--status-progress-track:#ffffff24}}.status-success{border-color:var(--success-border);background:var(--success-bg);color:var(--success-text);--status-progress-start:#0ea15a;--status-progress-end:#34d399}.status-warn{border-color:var(--warn-border);background:var(--warn-bg);color:var(--warn-text);--status-progress-start:#d97706;--status-progress-end:#fbbf24}.status-error{border-color:var(--error-border);background:var(--error-bg);color:var(--error-text);--status-progress-start:#dc2626;--status-progress-end:#f87171}.toast-container{z-index:1400;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:fixed;top:16px;right:16px}.toast{background:var(--card-bg);min-width:0;max-width:280px;color:var(--text-color);border:1px solid var(--border-color);box-shadow:var(--shadow);pointer-events:auto;border-radius:10px;padding:10px 12px;font-weight:600;animation:.16s ease-out forwards toast-slide}.toast.toast-success{border-color:var(--success-border);background:var(--success-bg);color:var(--success-text)}.toast.toast-info{border-color:var(--info-border);background:var(--info-bg);color:var(--info-text)}.toast.toast-warn{border-color:var(--warn-border);background:var(--warn-bg);color:var(--warn-text)}.toast.toast-error{border-color:var(--error-border);background:var(--error-bg);color:var(--error-text)}@keyframes toast-slide{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.clickable{cursor:pointer}.input-row{flex-direction:column;gap:6px;display:flex}.input-label{color:var(--muted-color);font-size:12px}.text-input{border:1px solid var(--border-color);background:var(--card-bg);width:100%;color:var(--text-color);border-radius:10px;padding:10px 12px;box-shadow:inset 0 1px 2px #0000000a}.text-input:focus-visible{border-color:#0f62fe59;outline:none;box-shadow:0 0 0 1px #0f62fe2e,inset 0 1px 2px #0000000a}.pause-help{margin-top:6px}.detected-card{background:var(--detected-bg);border:1px solid var(--detected-border);box-shadow:var(--shadow);border-radius:16px;padding:14px 16px}.detected-header{align-items:center;gap:8px;margin-bottom:6px;display:flex}.pill{background:var(--pill-bg);color:var(--pill-text);letter-spacing:.2px;border-radius:999px;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.pill-warn{background:var(--pill-warn-bg);color:var(--pill-warn-text)}.pill-demo{color:#fff7ed;background:#9a3412;border:1px solid #ea580c}.detected-name{color:var(--detected-text);font-size:18px;font-weight:600}.detected-help{color:var(--detected-muted);margin-top:6px;font-size:13px}.detected-meta{color:var(--detected-muted);margin-top:6px}.success{color:var(--success)}.progress{margin-top:8px}.progress-bar{background:linear-gradient(90deg,var(--progress-start),var(--progress-end));border-radius:999px;height:8px}.warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}.dev-toggle{z-index:1100;position:fixed;bottom:16px;right:16px}.dev-toggle-label{background:var(--dev-toggle-bg);border:1px solid var(--border-color);box-shadow:var(--shadow-strong);color:var(--dev-toggle-text);border-radius:12px;align-items:center;gap:8px;padding:8px 12px;font-size:12px;display:inline-flex}.error-text{color:var(--error-text);margin-top:6px}