:root{color-scheme:dark;--ink:#0c1016;--surface:#151b24;--surface-raised:#1c2430;--line:#344153;--text:#edf2f8;--muted:#9ba9ba;--signal:#70a7ff;--ready:#43d19e;--danger:#ff858f;--key:#e9edf3;--key-text:#17202c;--key-edge:#aeb8c6;--radius:14px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--ink);color:var(--text);font:15px/1.45 "Avenir Next","Segoe UI",system-ui,sans-serif}.shell{width:min(1180px,100%);margin:auto;padding:20px}.app-header,.identity,.status-line,.control-strip,.panel-heading,.keyboard-heading,.send-row,.dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}.app-header{padding:4px 2px 18px;border-bottom:1px solid var(--line)}.identity{justify-content:flex-start}.device-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid #52627a;border-radius:10px;background:#222c3a;color:#b9d2ff;font-weight:700;letter-spacing:.04em}.app-header h1{font-size:20px;margin:0}.app-header p,.panel-heading p,.keyboard-heading p,.login p,.settings-form p{margin:2px 0 0;color:var(--muted)}.status-line{color:var(--muted)}#dot{width:9px;height:9px;border-radius:50%;background:#667284}#dot.relay{background:var(--signal);box-shadow:0 0 0 5px #70a7ff1c}#dot.ok{background:var(--ready);box-shadow:0 0 0 5px #43d19e1c}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px}.login{width:min(420px,100%);margin:70px auto}.login label{display:block;color:var(--muted);margin:15px 0}.login input,textarea{display:block;width:100%;margin-top:6px;background:#0e141d;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:12px;font:inherit;outline:none}.login input:focus,textarea:focus{border-color:var(--signal);box-shadow:0 0 0 3px #70a7ff20}.login button{width:100%}.control-strip{margin:16px 0;min-height:62px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#111720}.control-strip strong,.control-strip small{display:block}.control-strip small{color:var(--muted);margin-top:2px}.profile-switch,.settings-form fieldset{margin:0;border:0;padding:0}.profile-switch legend,.settings-form legend{font-size:12px;color:var(--muted);margin-bottom:5px}.profile-switch label,.dialog-profiles label{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid var(--line);background:#171e28;cursor:pointer}.profile-switch label:first-of-type,.dialog-profiles label:first-child{border-radius:8px 0 0 8px}.profile-switch label:last-of-type,.dialog-profiles label:last-child{border-radius:0 8px 8px 0}.profile-switch label+label,.dialog-profiles label+label{margin-left:-1px}.profile-switch label:has(input:checked),.dialog-profiles label:has(input:checked){position:relative;background:#24344d;border-color:var(--signal);color:#dce9ff}.profile-switch input,.dialog-profiles input{position:absolute;opacity:0;pointer-events:none}.strip-actions{display:flex;gap:8px}.workspace{display:grid;grid-template-columns:1.05fr .95fr;gap:14px}.panel-heading{align-items:flex-start}.panel-heading h2,.keyboard-heading h2,.settings-form h2{font-size:16px;margin:0}.panel-heading output{color:#cfe0ff;font-weight:600}.trackpad-wrap{display:grid;grid-template-columns:1fr 54px;gap:9px;margin-top:14px}.pad,.scroll-zone{height:280px;border:1px solid #42516a;border-radius:12px;background:#111925;touch-action:none;user-select:none}.pad{display:grid;place-content:center;text-align:center;color:#bdc8d7}.pad small{display:block;color:var(--muted);margin-top:4px}.scroll-zone{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:13px 0;color:var(--muted)}.scroll-zone b{font-size:12px;writing-mode:vertical-rl;letter-spacing:.08em}.button-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}button{border:1px solid #43516a;background:var(--surface-raised);color:var(--text);padding:10px 12px;border-radius:9px;font:inherit;font-weight:600;cursor:pointer}button:hover{border-color:#667995}button:active{transform:translateY(1px)}button.primary{background:#dbe8ff;color:#132037;border-color:#dbe8ff}button.active{background:#31517f;border-color:#7eb0ff;color:#fff}button.quiet{background:transparent}button.danger{background:transparent;color:#ffb4ba;border-color:#6a444b}.speed-control{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin-top:14px;color:var(--muted)}.speed-control input{width:100%;accent-color:var(--signal)}textarea{min-height:150px;resize:vertical;margin:13px 0 0}.send-row{justify-content:flex-start;margin-top:9px}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-top:16px}.option-grid label{display:flex;align-items:flex-start;gap:8px;color:#c7d0dc}.option-grid input{margin-top:3px;accent-color:var(--signal)}.note{color:var(--muted);font-size:13px;margin:15px 0 0}.shortcut-panel{margin-top:14px}.modifier-bar,.shortcut-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.modifier-bar button{min-width:92px}.shortcut-presets button{font-weight:500}.keyboard-panel{margin-top:14px;padding:17px;border:1px solid #46546a;border-radius:var(--radius);background:#10161f}.keyboard-heading{align-items:flex-start}.keyboard-heading span{padding:5px 9px;border:1px solid var(--line);border-radius:8px;color:var(--muted)}.keyboard-scroll{overflow-x:auto;padding:15px 0 4px}.keyboard{min-width:920px;display:grid;gap:7px}.key-row{display:flex;gap:7px}.keycap{flex:1;min-width:43px;min-height:43px;padding:6px 7px;border:0;border-bottom:3px solid var(--key-edge);border-radius:7px;background:var(--key);color:var(--key-text);font-size:13px;font-weight:650;white-space:pre-line}.keycap:hover{border-color:#7d8da2;background:#fff}.keycap:active,.keycap.active{transform:translateY(2px);border-bottom-width:1px;background:#c8dcff}.keycap.wide{flex:1.5}.keycap.wider{flex:2}.keycap.space{flex:6}.keycap.gap-after{margin-right:16px}.message{min-height:22px;margin:12px 2px 0;color:var(--muted)}.error{color:var(--danger);min-height:20px}[hidden]{display:none!important}dialog{width:min(520px,calc(100% - 28px));padding:0;border:1px solid #536178;border-radius:15px;background:var(--surface);color:var(--text);box-shadow:0 30px 90px #000b}dialog::backdrop{background:#05070bb8}.settings-form{padding:20px}.settings-form fieldset{margin:20px 0}.dialog-profiles{display:flex}.dialog-actions{justify-content:space-between;margin-top:22px}@media(max-width:820px){.shell{padding:12px}.app-header{align-items:flex-start}.status-line{max-width:48%;text-align:right}.control-strip{align-items:flex-start;flex-wrap:wrap}.workspace{grid-template-columns:1fr}.profile-switch{order:3;width:100%}.pad,.scroll-zone{height:240px}}@media(max-width:520px){.device-mark{display:none}.app-header h1{font-size:17px}.option-grid{grid-template-columns:1fr}.strip-actions{margin-left:auto}.button-row button{padding:9px 5px}.panel{padding:14px}.profile-switch label{padding:6px 9px}.keyboard-heading{display:block}.keyboard-heading span{display:inline-block;margin-top:8px}}
.numeric-pad{margin-top:9px;padding-top:12px;border-top:1px solid var(--line)}.numeric-pad>span{display:block;margin-bottom:8px;color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}.numeric-grid{display:grid;grid-template-columns:repeat(4,minmax(43px,1fr));gap:7px;width:290px}.numeric-grid .keycap{width:auto}.numeric-grid .numpad-zero{grid-column:span 2}
.primary-pointer{margin-top:14px}.primary-pointer .trackpad-wrap{grid-template-columns:minmax(0,1fr) 58px}.keyboard{min-width:0;margin-top:15px}.key-row{min-width:0}.keycap{min-width:0;overflow:hidden}.numeric-grid{width:min(290px,100%);grid-template-columns:repeat(4,minmax(0,1fr))}.more-controls{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);background:#10161f}.more-controls>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 17px;cursor:pointer;list-style:none}.more-controls>summary::-webkit-details-marker{display:none}.more-controls>summary strong,.more-controls>summary small{display:block}.more-controls>summary small{margin-top:2px;color:var(--muted)}.summary-action{min-width:58px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:0;text-align:center}.summary-action::after{content:"Open";font-size:13px}.more-controls[open] .summary-action::after{content:"Close"}.secondary-workspace{padding:0 12px 12px}.secondary-workspace .shortcut-panel{margin-top:0}.more-controls>summary:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--signal);outline-offset:2px}@media(max-width:620px){.keyboard-panel{padding:12px;overflow:hidden}.keyboard{width:100%;gap:7px;margin-top:12px}.key-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}.keycap{width:auto;min-width:0;min-height:40px;padding:4px 1px;font-size:10px;line-height:1.05}.keycap.wide,.keycap.wider{grid-column:span 2}.keycap.space{grid-column:span 5}.keycap.gap-after{margin-right:0}.numeric-pad{margin-top:4px}.numeric-grid{width:100%;gap:5px}.numeric-grid .keycap{font-size:11px}.more-controls>summary{padding:14px}.secondary-workspace{padding:0 8px 8px}.primary-pointer .trackpad-wrap{grid-template-columns:minmax(0,1fr) 48px}}@media(max-width:380px){.key-row{grid-template-columns:repeat(8,minmax(0,1fr))}.keycap.space{grid-column:span 4}}