:root{color-scheme:light;--bg: #efede8;--surface: #fbfaf7;--ink: #1d1d1f;--muted: #6b6a66;--line: #dcd9d2;--case: #cbc8c1;--case-edge: #b3afa6;--cap-light: #f6f4ef;--cap-light-edge: #d2cec4;--cap-light-ink: #2a2a2c;--cap-dark: #4b4b50;--cap-dark-edge: #2f2f33;--cap-dark-ink: #f1efe9;--red: #d33b2c;--red-edge: #a32a1d;--accent: #d33b2c;--accent-ink: #ffffff;--accent-soft: #f7dcd8;--warn: #9a6400;--warn-soft: #fbedd0;--ok: #2f8a4b;--focus: #2463d6;--radius: 12px;--shadow: 0 1px 2px rgb(0 0 0 / .05), 0 4px 16px rgb(0 0 0 / .04);--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg: #18181a;--surface: #222225;--ink: #ecebe7;--muted: #9a9893;--line: #34343a;--case: #2c2c30;--case-edge: #1f1f22;--cap-light: #d8d5ce;--cap-light-edge: #a9a59c;--cap-dark: #46464c;--cap-dark-edge: #2a2a2e;--accent: #e5503f;--accent-soft: #4a2420;--warn: #f0b44c;--warn-soft: #3d3020;--ok: #5cc27d;--focus: #7aa7ff;--shadow: none}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}h1,h2{margin:0;line-height:1.25}h1{font-size:1.35rem;letter-spacing:-.01em}h2{font-size:1rem;font-weight:600}code{font-family:var(--mono);font-size:.85em}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.muted{color:var(--muted);margin:.15rem 0 0}.hint{color:var(--muted);font-size:.82rem;margin:.5rem 0 0}.center{text-align:center}.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.app{max-width:1120px;margin:0 auto;padding:28px 20px 40px;display:flex;flex-direction:column;gap:16px}.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:14px}.brand-mark{display:inline-flex;gap:5px;padding:9px 10px;background:var(--cap-dark);border-radius:10px;box-shadow:inset 0 -3px 0 var(--cap-dark-edge)}.brand-mark span{width:14px;height:14px;border-radius:50%;background:var(--red)}.conn{display:flex;align-items:center;gap:8px;font-size:.9rem}.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}.conn-dot.demo{background:var(--warn)}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.card>h2+*{margin-top:.6rem}.columns{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}.col-main,.col-side{display:flex;flex-direction:column;gap:16px;min-width:0}@media(max-width:860px){.columns{grid-template-columns:minmax(0,1fr)}}.foot{font-size:.8rem;text-align:center;margin-top:8px}.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:.45rem .9rem;font-weight:500;font-size:.9rem;cursor:pointer}.btn:hover:not(:disabled){border-color:var(--muted)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.primary:hover:not(:disabled){filter:brightness(1.06);border-color:var(--accent)}.btn.danger{background:transparent;border-color:var(--accent);color:var(--accent)}.btn.subtle,.btn.ghost{background:transparent}.btn.ghost{border-color:transparent;padding:.3rem .55rem}.btn.big{padding:.65rem 1.6rem;font-size:1rem}.input{font:inherit;font-size:.9rem;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.45rem .7rem;min-width:0;flex:1}.callout{margin:0;padding:.6rem .85rem;border-radius:8px;font-size:.88rem}.callout.error{background:var(--accent-soft);color:var(--ink);border-left:3px solid var(--accent)}.callout.warn{background:var(--warn-soft);border-left:3px solid var(--warn)}.connect{max-width:560px;margin:40px auto 0;padding:28px}.steps{margin:.9rem 0 1.2rem;padding-left:1.2rem;display:grid;gap:.35rem}.board-card{padding:14px}.board-scroll{overflow-x:auto;padding-bottom:2px}.board{position:relative;min-width:760px;aspect-ratio:18.25 / 6.25;container-type:inline-size;margin:10px}.board:before{content:"";position:absolute;inset:-10px;background:var(--case);border-radius:14px;box-shadow:inset 0 -4px 0 var(--case-edge)}.key{position:absolute;padding:.22cqw;border:0;background:none;cursor:pointer}.key-face{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:.45cqw .6cqw .75cqw;border-radius:.55cqw;text-align:left;font-size:clamp(8px,1.05cqw,13px);font-weight:600;transition:transform 80ms ease,box-shadow 80ms ease}.cap-light .key-face{background:var(--cap-light);color:var(--cap-light-ink);box-shadow:inset 0 -.35cqw 0 var(--cap-light-edge)}.cap-dark .key-face{background:var(--cap-dark);color:var(--cap-dark-ink);box-shadow:inset 0 -.35cqw 0 var(--cap-dark-edge)}.cap-red .key-face{background:var(--red);color:#fff;box-shadow:inset 0 -.35cqw 0 var(--red-edge);font-size:clamp(10px,1.4cqw,17px)}.key:hover .key-face{transform:translateY(-1px)}.key.selected .key-face{outline:.25cqw solid var(--focus);outline-offset:.12cqw}.key-legend{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.key-target{align-self:flex-start;max-width:100%;font-family:var(--mono);font-size:clamp(7px,.82cqw,11px);font-weight:700;line-height:1.3;padding:0 .3cqw;border-radius:.3cqw;background:var(--accent);color:var(--accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cap-red .key-target{background:#1d1d1f}.externals{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px;padding:0 4px}.pad{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.pad .externals-text{min-width:150px}.more-slots{font-size:.82rem;padding:.3rem .6rem}.externals .hint{margin:0}.externals-text{display:flex;flex-direction:column;font-size:.85rem;margin-right:6px}.externals-text span{color:var(--muted);font-size:.78rem}.ext{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--bg);cursor:pointer}.ext-dot{width:30px;height:30px;border-radius:50%;background:var(--red);box-shadow:inset 0 -3px 0 var(--red-edge)}.ext-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;font-size:.85rem;font-weight:600}.ext-target{font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--muted)}.ext.remapped .ext-target{color:var(--accent);font-weight:700}.ext.selected{outline:2px solid var(--focus);outline-offset:1px}.editor{display:flex;flex-direction:column;gap:16px}.editor-head{display:flex;justify-content:space-between;align-items:flex-start}.editor-head h2{font-size:1.15rem}.field{display:flex;flex-direction:column;gap:8px}.field .hint{margin:0}.field-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:9px;align-self:flex-start}.seg button{border:0;background:transparent;padding:.35rem .75rem;border-radius:6px;font-size:.88rem;cursor:pointer}.seg button.on{background:var(--surface);box-shadow:0 1px 2px #0000001f;font-weight:600}.targets{display:flex;flex-direction:column;gap:12px;max-height:340px;overflow-y:auto;padding-right:4px}.target-group{display:flex;flex-direction:column;gap:6px}.target-group-title{font-size:.78rem;color:var(--muted)}.chips{display:flex;flex-wrap:wrap;gap:5px}.chip{min-width:2.4rem;padding:.3rem .55rem;border:1px solid var(--line);border-radius:7px;background:var(--bg);font-family:var(--mono);font-size:.8rem;font-weight:500;cursor:pointer}.chip:hover:not(:disabled){border-color:var(--muted)}.chip.warn{border-style:dashed}.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.chip:disabled{opacity:.3;cursor:not-allowed}.editor-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line)}.preview strong{font-family:var(--mono);color:var(--accent)}.remaps{list-style:none;padding:0;margin:.6rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}.remaps button{width:100%;display:flex;align-items:center;gap:8px;padding:.45rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:.86rem;text-align:left;cursor:pointer}.remaps button.on{border-color:var(--focus)}.remaps .arrow{color:var(--muted)}.remaps strong{font-family:var(--mono);font-size:.82rem;margin-left:auto}.profile{display:flex;flex-direction:column;gap:14px}.profile-head{display:flex;gap:12px;align-items:flex-start}.profile-head .muted{font-size:.85rem}.led{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bg);border:1px solid var(--line);color:var(--muted)}.led.on{color:var(--red);box-shadow:0 0 0 3px var(--accent-soft)}.danger-zone{font-size:.85rem}.backup{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--line)}.backup .muted{font-size:.85rem;margin:0}.backup .hint{margin:0}.tips ul{margin:.6rem 0 0;padding-left:1.1rem;font-size:.86rem;color:var(--muted);display:grid;gap:.3rem}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);max-width:calc(100vw - 32px);background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:10px;font-size:.9rem;box-shadow:0 8px 24px #0003}@media(max-width:600px){.app{padding:20px 16px 32px}}