:root{--bg:#eceef3;--surface:#fff;--surface-2:#f5f6f9;--line:#e2e4ea;--text:#16181d;--text-2:#5d6370;--text-3:#9a9fab;--ink:#0d0e11;--on-ink:#fff;--accent:#ff6a1a;--accent-soft:#fff1e8;--ok:#18b26b;--danger:#e5484d;--shadow:0 1px 2px #1018280a, 0 4px 16px #1018280f;--radius:14px;color:var(--text);background:var(--bg);font-family:Inter,Segoe UI,system-ui,sans-serif;font-size:14px}[data-theme=dark]{--bg:#111317;--surface:#1a1d23;--surface-2:#22262e;--line:#2c313a;--text:#eef0f4;--text-2:#a4aab6;--text-3:#6b7280;--ink:#f2f3f5;--on-ink:#0d0e11;--accent-soft:#3a2416;--shadow:0 1px 2px #0000004d, 0 6px 20px #00000040;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);margin:0;transition:background .2s}button,select,input{font:inherit;color:inherit}.btn{border:1px solid var(--line);background:var(--surface);cursor:pointer;white-space:nowrap;border-radius:8px;align-items:center;gap:6px;height:34px;padding:0 14px;font-weight:500;transition:border-color .15s,background .15s,opacity .15s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--text-3)}.btn:disabled{opacity:.4;cursor:default}.btn.ink{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}.btn.ink:hover:not(:disabled){opacity:.85}.btn.ghost{color:var(--text-2);background:0 0;border-color:#0000}.btn.ghost:hover:not(:disabled){background:var(--surface-2);color:var(--text)}.btn.lg{border-radius:10px;height:42px;padding:0 22px;font-size:15px}.icon-btn{width:34px;height:34px;color:var(--text-2);cursor:pointer;background:0 0;border:none;border-radius:8px;place-items:center;display:grid}.icon-btn:hover{background:var(--surface);color:var(--text)}.topbar{align-items:center;gap:12px;height:56px;padding:0 20px;display:flex}.logo{letter-spacing:.06em;align-items:center;gap:8px;font-size:15px;font-weight:800;display:flex}.logo svg{color:var(--accent)}.spacer{flex:1}.device-pill{background:var(--surface);border:1px solid var(--line);border-radius:999px;align-items:center;gap:10px;height:34px;padding:0 6px 0 12px;font-weight:500;display:flex}.conn-dot{background:var(--ok);width:8px;height:8px;box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);border-radius:50%}.tag{background:var(--surface-2);color:var(--text-2);border-radius:6px;padding:2px 7px;font-size:11px;font-weight:700}.empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:18px;min-height:calc(100vh - 56px);padding:24px;display:flex}.empty-img{filter:grayscale()contrast(.9);opacity:.55;width:min(720px,90vw);-webkit-mask-image:linear-gradient(#000 55%,#0000);mask-image:linear-gradient(#000 55%,#0000)}.empty h2{margin:0;font-size:22px}.empty p{color:var(--text-2);margin:0}.hint{font-size:12px;color:var(--text-3)!important}.layout{grid-template-columns:220px 1fr;gap:20px;max-width:1400px;margin:0 auto;padding:8px 20px 20px;display:grid}.sidenav{flex-direction:column;align-self:start;gap:2px;display:flex;position:sticky;top:12px}.nav-item{height:42px;color:var(--text-2);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:10px;align-items:center;gap:10px;padding:0 14px;font-weight:500;display:flex}.nav-item:hover{background:var(--surface);color:var(--text)}.nav-item.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.nav-item.active svg{color:var(--accent)}.nav-foot{color:var(--text-3);margin-top:16px;padding:12px 14px;font-size:12px;line-height:1.5}.content{flex-direction:column;gap:16px;min-width:0;display:flex}.stage{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px 16px}.stage-head{align-items:center;gap:10px;min-height:34px;margin-bottom:8px;display:flex}.stage-head h2{margin:0;font-size:18px}.sub{color:var(--text-3);font-size:13px}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}.card h3{margin:0 0 14px;font-size:14px;font-weight:600}.grid-2{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;display:grid}.savebar{background:var(--ink);color:var(--on-ink);border-radius:12px;align-items:center;gap:10px;padding:10px 12px 10px 18px;animation:.18s ease-out rise;display:flex;position:sticky;bottom:16px;box-shadow:0 10px 30px #0003}.savebar .btn{border-color:color-mix(in srgb, var(--on-ink) 30%, transparent);color:var(--on-ink);background:0 0}.savebar .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}@keyframes rise{0%{transform:translateY(8px)}}.kb-svg{-webkit-user-select:none;user-select:none;width:100%;display:block}.kb-key rect{fill:#0000;stroke:#0000;stroke-width:2px;cursor:pointer;transition:stroke .1s}.kb-key:hover rect{stroke:var(--accent)}.kb-key rect.sel{stroke:var(--accent);stroke-width:3px}.kb-key rect.changed{stroke:var(--accent);stroke-dasharray:4 3}.kb-badge{fill:#fff;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:var(--accent);stroke-width:3px;stroke-linejoin:round;font-size:8.5px;font-weight:700}.kb-static rect{cursor:default}.effect-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;display:grid}.effect-tile{border:1.5px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;border-radius:10px;flex-direction:column;align-items:flex-start;gap:10px;padding:12px;font-size:13px;font-weight:500;transition:border-color .15s,background .15s;display:flex;position:relative}.effect-tile svg{color:var(--text-3)}.effect-tile:hover{border-color:var(--text-3)}.effect-tile.active{border-color:var(--accent);background:var(--accent-soft)}.effect-tile.active svg{color:var(--accent)}.live{color:var(--ok);font-size:10px;font-weight:700;position:absolute;top:8px;right:8px}.control{border-top:1px solid var(--line);flex-direction:column;gap:10px;padding:14px 0;display:flex}.control:first-of-type{border-top:none;padding-top:0}.control-head{justify-content:space-between;font-weight:500;display:flex}.control-head .val{color:var(--text-3);font-variant-numeric:tabular-nums}.segmented{background:var(--surface-2);border-radius:9px;grid-auto-columns:1fr;grid-auto-flow:column;gap:2px;padding:3px;display:grid}.segmented button{height:30px;color:var(--text-2);cursor:pointer;background:0 0;border:none;border-radius:7px;font-weight:500}.segmented button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0000001f}.segmented button:disabled{opacity:.4;cursor:default}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{border:2px solid var(--surface);width:34px;height:34px;box-shadow:0 0 0 1px var(--line);cursor:pointer;border-radius:50%;padding:0;position:relative}.swatch.on{box-shadow:0 0 0 2px var(--accent)}.swatch.rainbow{background:conic-gradient(#ff3b3b,#ffd500,#3bff6b,#3bd5ff,#5b3bff,#ff3bd5,#ff3b3b)}.swatch.sm{width:26px;height:26px}.swatch .edit{background:var(--ink);width:16px;height:16px;color:var(--on-ink);opacity:0;border-radius:50%;place-items:center;transition:opacity .15s;display:grid;position:absolute;bottom:-4px;right:-4px}.swatch:hover .edit{opacity:1}.hidden-color{opacity:0;cursor:pointer;position:absolute;inset:0}.muted{color:var(--text-3)}.note{color:var(--text-3);font-size:12px;line-height:1.5}.toolrow{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.brush{border-radius:12px;flex-shrink:0;width:48px;height:48px;position:relative;box-shadow:inset 0 0 0 1px #0000001a}.hex{border:1px solid var(--line);background:var(--surface);text-transform:uppercase;border-radius:8px;width:92px;height:34px;padding:0 10px;font-family:ui-monospace,monospace}.divider{background:var(--line);align-self:stretch;width:1px;margin:0 4px}.mode-toggle{gap:4px;display:flex}.picker{flex-direction:column;gap:14px;display:flex}.picker-head{align-items:center;gap:12px;display:flex}.keycap{background:var(--surface-2);border:1px solid var(--line);border-bottom-width:3px;border-radius:9px;place-items:center;min-width:44px;height:44px;padding:0 10px;font-weight:600;display:grid}.arrow{color:var(--text-3)}.keycap.target{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:7px;height:30px;padding:0 11px;font-size:13px;font-weight:500}.chip:hover{border-color:var(--text-3)}.chip.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}.search{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;width:100%;height:36px;padding:0 12px}.search:focus,.hex:focus{outline:2px solid var(--accent);outline-offset:-1px}.key-list{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;max-height:210px;padding:2px;display:grid;overflow:auto}.key-list .chip{padding:0 4px}.section-label{color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:600}.empty-pick{height:100%;min-height:220px;color:var(--text-3);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex}.toasts{z-index:10;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:20px;right:20px}.toast{background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line);border-radius:10px;align-items:center;gap:10px;max-width:380px;padding:10px 14px;animation:.18s ease-out rise;display:flex}.toast.error{border-color:var(--danger);color:var(--danger);cursor:pointer}.spin{animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.skeleton{border-radius:var(--radius);background:linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);background-size:200% 100%;min-height:200px;animation:1.2s infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}@media (width<=960px){.layout{grid-template-columns:1fr}.sidenav{flex-direction:row;position:static;overflow-x:auto}.nav-foot{display:none}.grid-2{grid-template-columns:1fr}}.setting-row{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px;display:flex}.setting-row h3{margin-bottom:4px}.setting-row .note{margin:0}.toggle{background:var(--line);cursor:pointer;border:none;border-radius:999px;flex-shrink:0;width:44px;height:26px;padding:3px;transition:background .15s}.toggle span{background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .15s;display:block;box-shadow:0 1px 3px #00000040}.toggle.on{background:var(--accent)}.toggle.on span{transform:translate(18px)}.range{width:100%;max-width:420px;accent-color:var(--accent)}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.warn{color:var(--danger);align-items:center;gap:6px;font-weight:500;display:inline-flex}.danger-card{border:1px solid color-mix(in srgb, var(--danger) 25%, transparent)}.chip:disabled{cursor:default}