/* PCB2 workbench: connection first, one key editor, one save destination. */
.studio #sound-preview{display:block;width:100%;max-width:100%;margin:16px 0}.studio details.custom-sound h3{display:none}
.key-overview>section>.panel-head{display:none}
.studio :is(.effects-workspace,.audio-workspace) .section-number{display:none}
.studio .program-name{margin-top:20px}.studio .program-name label{display:block}
.studio .action-choices button{min-height:70px}.studio .action-editor{margin-top:18px}.studio #macro-steps>.step-card:first-child{margin-top:0}
:root{color-scheme:light;--bg:#f2f5f8;--panel:#fff;--line:#dbe2ec;--text:#16243a;--muted:#65738a;--accent:#315ed1;--mint:#207b59;font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",system-ui,sans-serif}
.studio{background:var(--bg);font-size:14px;line-height:1.6}.studio [hidden]{display:none!important}.studio-shell{display:grid;grid-template-columns:208px minmax(0,1fr);min-height:100vh}.studio-sidebar{background:#1c293f;color:#eff4fc;padding:30px 20px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.studio .brand{letter-spacing:0;gap:10px;font-size:21px}.studio .brandmark{color:#d2e1ff;background:#33476a;border:1px solid #5873a0;border-radius:9px;width:40px;height:40px}.studio .brand-sub{font-size:12px;color:#b8c7dd;letter-spacing:0;margin-top:1px}.studio-tabs{display:flex;flex-direction:column;gap:8px;margin-top:38px}.studio-tabs button{border:0;background:transparent;border-radius:8px;color:#bac8de;padding:13px 14px;display:flex;gap:11px;align-items:center;text-align:left;font-weight:600;min-height:48px}.studio-tabs button[aria-selected=true]{color:#fff;background:#354d75}.studio-tabs button:hover{background:#2d4060}.nav-icon{font-size:23px;font-weight:400;width:25px;text-align:center}.sidebar-device{margin-top:auto;padding-top:26px;border-top:1px solid #42516b}.sidebar-device p{font-size:11px;color:#b3c1d7;margin:9px 0 0}.studio .connection{margin:0;color:#b9c8dd;font-size:12px}.studio .connection.online{color:#95e0bd}.studio .connection.online i{background:#95e0bd;box-shadow:none}.studio main{width:100%;max-width:1392px;padding:32px 36px 150px;margin:0 auto;min-width:0}.studio .heading{margin-bottom:22px;align-items:center;gap:14px}.studio h1{font-size:27px;letter-spacing:0;font-weight:700;line-height:1.3}.studio .subtitle{font-size:13px;margin-top:8px;color:var(--muted)}.device-name{font-size:12px;color:var(--muted);white-space:nowrap}
.studio .panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px;box-shadow:none}.studio .panel h2{font-size:17px;font-weight:700}.studio .panel-head{margin-bottom:24px}.studio .panel-head>div{gap:10px}.studio .pill{font-size:11px;border-color:var(--line);background:#f6f8fc;color:var(--muted);padding:5px 9px;border-radius:6px}.studio .pill.active{background:#e9f6ef;color:#207b59;border-color:#bfdfce}.studio .button{border-radius:8px;min-height:44px;font-size:13px;padding:11px 17px;gap:9px}.studio .primary{background:var(--accent);border-color:var(--accent);color:#fff}.studio .primary:hover{background:#244cad}.studio .secondary{background:#fff;border-color:#cbd5e5;color:#344761}.studio .secondary:hover{background:#eef3fc}.studio .quiet{color:#576982;background:transparent;font-size:12px}.studio .caption{font-size:12px;color:var(--muted);line-height:1.8;margin-top:13px}.studio :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #6992eb;outline-offset:3px}.studio :is(input:not([type=checkbox]):not([type=range]):not([type=color]),select,textarea){border:1px solid #cad4e2;border-radius:8px;background:#fff;color:var(--text);font:inherit;padding:11px 12px;width:100%}.studio textarea{resize:vertical;min-height:112px;line-height:1.7}.studio :is(input,select,textarea):disabled{background:#eef1f6}.studio .field-label{font-size:13px;color:#3d506b;margin:0 0 10px}.studio input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}.studio .range-label{color:#465a75;font-size:13px}.studio .range-label output{color:var(--accent)}.studio input[type=range]{background:#dbe4f2;accent-color:var(--accent)}.studio input[type=range]::-webkit-slider-thumb{background:var(--accent);border-color:#fff;box-shadow:0 0 0 1px var(--accent)}.studio input[type=range]::-moz-range-thumb{background:var(--accent)}
.studio .usb-panel{margin-bottom:24px;position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}.studio .usb-intro{flex:1 1 420px;gap:14px;align-items:center}.studio .usb-intro>div{min-width:0;flex:1}.studio .usb-intro h2{font-size:17px;margin:0}.studio .usb-intro p{font-size:12px;color:var(--muted);max-width:620px}.studio .usb-mark{background:#eaf0fc;color:var(--accent);border-color:#cedcf5;border-radius:9px;font-size:22px;width:42px;height:42px}.studio .usb-mode{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}.studio .usb-intro>a{font-size:12px;color:var(--accent);white-space:nowrap}.connection-capabilities{display:flex;gap:7px;flex-wrap:wrap}.connection-manage{margin-left:auto;border:1px solid #d5deea;border-radius:7px;white-space:nowrap}.studio #serial-note{flex-basis:100%;margin:0;font-size:12px;min-height:0}.studio #serial-note.error{color:#a33d2c;background:#fff1ed;padding:12px;border-radius:8px}.desktop-route{display:flex;flex-basis:100%;gap:20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px}.desktop-route strong{font-size:13px}.desktop-route p{margin-top:5px;max-width:650px}.desktop-route-actions{display:flex;align-items:center;gap:15px;font-size:12px;flex-shrink:0}.desktop-route-actions>a:first-child{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.studio .usb-more{flex-basis:100%;font-size:12px}.studio .usb-actions{margin-top:12px}.studio .usb-port-label{font-size:12px}.auto-connect{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-top:13px}.studio .usb-panel[data-connected=true]{padding:15px 18px;gap:8px 14px}.studio .usb-panel[data-connected=true] .usb-intro{flex-basis:210px}.studio .usb-panel[data-connected=true] .usb-mark{width:33px;height:33px;font-size:18px}.studio .usb-panel[data-connected=true] .usb-intro h2{font-size:14px}.studio .usb-panel[data-connected=true][data-expanded=false] :is(.usb-intro p,.usb-mode,#serial-demo,.usb-more){display:none}.studio .usb-panel[data-connected=true][data-expanded=false][data-issue=false] #serial-note{display:none}.studio .usb-panel[data-connected=true][data-expanded=false] #desktop-console-help p{display:none}.studio .usb-panel[data-connected=true][data-expanded=false] #desktop-console-help{padding-top:9px}.studio .usb-panel[data-connected=true][data-expanded=false] #desktop-console-help strong{font-weight:400;color:var(--muted)}
.setup-progress{list-style:none;display:flex;gap:28px;padding:0;margin:0 0 26px;color:#8b97aa;font-size:12px}.setup-progress li{display:flex;align-items:center;gap:9px}.setup-progress li span{display:grid;place-items:center;width:26px;height:26px;border:1px solid #d0d9e7;border-radius:50%;background:#fff;font-size:11px}.setup-progress .current{color:var(--accent);font-weight:700}.setup-progress .current span{background:var(--accent);border-color:var(--accent);color:#fff}.setup-progress .complete{color:#207b59}.setup-progress .complete span{background:#e5f3eb;border-color:#bfdcca;color:#207b59}.workspace{display:grid;gap:24px;min-width:0}.keys-workspace{grid-template-columns:minmax(250px,.85fr) minmax(360px,1.15fr);align-items:start}.workspace-heading h2{font-size:17px;margin:0}.workspace-heading p{font-size:12px;margin:5px 0 20px;color:var(--muted)}.studio .board{background:#dfe6ef;border:1px solid #cad4e2;border-radius:18px;padding:22px;box-shadow:inset 0 1px 0 #fff,0 6px 0 #b9c5d5}.studio .board-label{color:#62728b;font-size:9px;letter-spacing:1px}.studio .keycaps{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.studio .keycap{min-height:148px;gap:11px;padding:22px 15px 18px;background:#fcfdff;color:#20344f;border:1px solid #c8d1df;border-bottom:5px solid #aebdce;border-radius:12px;box-shadow:0 5px 8px #52647d1a,inset 0 1px 0 #fff}.studio .keycap:hover{background:#eff4fd;border-color:#83a2d7}.studio .keycap[aria-pressed=true]{background:#eaf0ff;outline:3px solid #4770d8;outline-offset:3px}.studio .keycap strong{font-size:21px;line-height:1.3;letter-spacing:0;overflow-wrap:anywhere;max-width:100%}.studio .keycap[data-macro=true] strong{font-size:19px;max-height:2.6em;overflow:hidden}.studio .key-name{font-size:11px;color:#73839b;letter-spacing:0;font-family:inherit}.studio .key-detail{font-size:11px;color:#65758d}.studio .keycap.down,.studio .keycap.test{border-color:#4770d8;background:#dbe6ff;transform:translateY(3px)}.studio .board-bottom{color:#677890;font-size:9px;letter-spacing:0}.studio .board-bottom>span:last-child{display:none}.selection-summary{padding:17px 0 0;font-size:13px;font-weight:600;color:#3d5577}.editor-key{display:grid;place-items:center;font-size:12px;font-weight:700;width:31px;height:31px;background:#edf2fc;color:var(--accent);border-radius:7px}.control-fields{border:0;margin:0;padding:0;min-width:0}.action-question{font-weight:600}.action-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.action-choices button{background:#fff;border:1px solid #d0d9e6;border-radius:9px;padding:13px 12px;display:flex;gap:10px;align-items:center;text-align:left;color:#354b68;min-height:80px}.action-choices button[aria-checked=true]{border-color:#4770d8;background:#edf3ff;box-shadow:inset 0 0 0 1px #4770d8}.action-choices button:hover{border-color:#7899d5}.action-symbol{display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;background:#edf1f7;color:#5c7294;font:600 12px ui-monospace,monospace;border-radius:7px}.action-choices button[aria-checked=true] .action-symbol{background:#d8e5ff;color:#315ed1}.action-choices strong{display:block;font-size:13px}.action-choices small{display:block;font-size:11px;color:#6a7b93;margin-top:4px;line-height:1.5}.action-editor{margin-top:24px}.shortcut-preview{background:#f4f7fc;border:1px solid #dce4ef;border-radius:9px;padding:17px 18px;margin-bottom:13px}.shortcut-preview span{font-size:11px;color:var(--muted);display:block}.shortcut-preview strong{display:block;font-size:23px;color:#203a61;margin-top:6px;overflow-wrap:anywhere}.capture-button{width:100%}.preset-block{margin-top:22px}.preset-row{display:flex;flex-wrap:wrap;gap:8px}.preset-row button{font-size:12px;min-height:38px;border:1px solid #d2dbe8;border-radius:7px;color:#465f80;background:#fff;padding:8px 15px}.preset-row button:hover{background:#eef3fc;border-color:#7899d5}.manual-mapping{margin-top:21px;border-top:1px solid var(--line);padding-top:13px;font-size:12px;color:#576c8a}.studio .mapping-row{grid-template-columns:1fr;gap:10px;padding-top:16px;border:0}.studio .mapping-row kbd{display:none}.studio .mapping-row select{padding:10px;font-size:13px}.studio .modifier-group{gap:14px}.studio .modifier-group label{font-size:12px;color:#526882;gap:5px}.optional{font-size:11px;color:#8895a8;margin-left:7px}.step-card{border:1px solid #d8e2ee;border-radius:10px;padding:16px;margin-top:16px;background:#f8fafd}.step-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.step-head strong{font-size:12px;color:#48607e}.step-tools{display:flex;gap:4px}.step-tools button{min-width:29px;min-height:29px;border:1px solid #d3dceb;border-radius:6px;background:#fff;color:#5a7091}.capture-chord{width:100%;margin-top:11px;border-color:#b7cae9;background:#eaf1ff;color:#315ed1;font-size:12px}.capture-chord:hover{background:#dde9ff}.add-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.add-steps button{padding:9px 14px;border:1px dashed #a9bedc;border-radius:7px;background:#fff;color:#526c93;font-size:12px}.editor-error{font-size:12px;color:#a13a2b;line-height:1.7}.companion-note{border-radius:8px;background:#fff8e9;border:1px solid #e9dcb5;padding:13px 15px;margin-top:20px;font-size:12px;color:#745b28}.companion-note strong{font-size:12px}.companion-note p{margin:7px 0;line-height:1.7}.companion-note>a{display:inline-block;text-decoration:underline;text-underline-offset:3px;margin-top:5px}.companion-note[data-ready=true]{background:#edf8f1;border-color:#c9e5d3;color:#28684b}.companion-note[data-ready=true] #macro-support-detail,.companion-note[data-ready=true]>a{display:none}.macro-diagnostics{margin-top:7px;font-size:11px}.macro-diagnostics summary{color:inherit}.effect-test{margin-top:20px;border-top:1px solid var(--line);padding-top:14px;font-size:12px;color:#65738a}.test-keys{margin-top:14px}.connection-placeholder{border:1px dashed #bdcbdc;border-radius:10px;padding:20px;color:#526783;margin-top:22px;font-size:13px}.connection-placeholder p{font-size:12px;margin:6px 0 0}.studio[data-connected=false] .editor-panel{display:none}.studio[data-connected=false] .keys-workspace{grid-template-columns:1fr}.studio[data-connected=false] .key-overview{max-width:500px}.studio[data-connected=false] .keycap strong,.studio[data-connected=false] .key-detail{visibility:hidden}.studio[data-connected=false] .keycap:after{content:"等待連接";font-size:12px;color:#8695ab;position:absolute;bottom:30px}.studio[data-connected=false] .selection-summary{display:none}
.effects-workspace,.audio-workspace{grid-template-columns:repeat(2,minmax(0,1fr))}.studio .patterns button{background:#f6f8fc;border-color:#d5dfee;color:#6c84a7;padding:13px}.studio .patterns span{color:#4e6382;font-size:12px}.studio .patterns button.selected{background:#e8f0ff;border-color:#6d8fce;color:#315ed1}.studio .patterns button.selected span{color:#244caf}.studio .color-row{color:#465a77}.studio .sound-icon{color:#315ed1;background:#eaf0fc}.studio .sound-note strong{font-size:13px}.studio .sound-note p,.studio .target-help{font-size:12px;color:var(--muted)}.studio .sound-note{margin:20px 0}.studio .custom-sound,.studio .sd-audio-files,.studio .advanced-mic{border-top:1px solid var(--line);padding-top:13px;margin-top:21px;font-size:12px}.studio .meter-value strong{font-size:40px}.studio .meter{background:#e1e7f0}.studio .meter-label,.studio .scale{color:#6a7c98}.studio .mic-panel #mic-waveform{height:160px;background:#f0f5fc;border-color:#d1ddec}.studio canvas{border-color:#d1ddec}.studio .mic-diagnostics strong{color:#3f5a7e}.studio .wave-head .quiet{background:#eaf1ff;color:#315ed1;border-radius:7px;padding:10px 13px;font-size:12px}.studio .wave-controls{font-size:11px}.studio .record-display strong{color:#2d4362}.studio .record-display>span:last-child{font-size:10px}.studio .record{background:#b6495b;color:#fff}.studio .record:hover{background:#973a4a}.studio .record-error{color:#aa4236}.studio .download-link{color:#315ed1;font-size:12px}.studio .storage-row{font-size:11px}.studio .sd-audio-files select{font-size:12px}
.studio .save-dock{position:fixed;bottom:18px;left:244px;right:36px;max-width:1320px;margin:0 auto;z-index:20;background:#fffffff5;border:1px solid #cbd8ec;box-shadow:0 5px 25px #20334f16;border-radius:12px;padding:17px 20px;display:grid;grid-template-columns:1fr auto;gap:7px 20px;align-items:center;backdrop-filter:blur(12px)}.save-copy{display:flex;flex-direction:column;gap:3px}.studio .save-dock strong{font-size:13px;color:#294267}.studio #save-state{font-size:11px;color:var(--muted)}.dock-actions{display:flex;align-items:center;gap:10px}.studio .save-dock p{grid-column:1/-1;font-size:11px;color:#687b95;margin:0;line-height:1.6}.studio .save-dock[data-macro-dirty=true] #save-state{display:none}.studio[data-connected=false] .save-dock{display:none}.studio .device-options{margin-top:25px;font-size:12px;color:#65738a}.device-option-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}.studio footer{font-size:10px;color:#8493a8;margin-top:26px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.studio .offline{display:none}.studio .demo-banner{font-size:12px;color:#386044;background:#edf8f0;border-color:#ccdfd1}.demo-banner a{margin-left:12px;text-decoration:underline}.studio:has(.demo-banner:not([hidden])) .usb-panel{display:none}.studio .toast{background:#203c67;color:#fff;border:1px solid #416290;border-radius:9px;bottom:136px;font-size:13px;padding:14px 20px;z-index:80}.studio .toast.error{background:#833c31;color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.studio dialog{max-width:min(530px,calc(100vw - 32px));width:530px;border:1px solid #bacde7;border-radius:14px;padding:28px;background:#fff;color:var(--text);line-height:1.7;box-shadow:0 20px 60px #243a642e}.studio dialog::backdrop{background:#102a4b70;backdrop-filter:blur(3px)}.studio dialog h2{font-size:22px;margin:9px 0 12px}.studio dialog p{color:var(--muted);font-size:12px}.dialog-close{float:right;border:0;background:#f0f3f8;color:#617694;border-radius:7px;font-size:22px;width:33px;height:33px;line-height:1}.studio #capture-pad{border:1px dashed #90add5;border-radius:9px;padding:17px;text-align:center;font-size:12px;color:#657c9b;margin-top:19px;background:#f7faff}.studio #capture-pad:focus{outline:3px solid #719bea;outline-offset:3px}.studio #capture-value{display:block;border:1px solid #c6d7f0;border-radius:9px;padding:21px 14px;text-align:center;color:#214577;background:#edf4ff;min-height:80px;font-size:20px;margin:22px 0 12px;overflow-wrap:anywhere}.studio #capture-chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.captured-key{padding:10px 13px;border:1px solid #c0cfe4;border-bottom-width:3px;border-radius:7px;background:#f2f6fc;color:#315276;font:600 13px ui-monospace,monospace;min-height:40px}.capture-actions{display:flex;gap:10px}.capture-actions .button{flex:1;width:auto}.capture-specials{display:flex;gap:10px;margin:15px 0}.capture-specials button{padding:8px 11px;background:#fff;color:#607593;border:1px solid #ced9e9;border-radius:7px;font-size:12px}
@media(min-width:1600px){.studio .save-dock{left:calc(208px + (100vw - 1600px)/2 + 36px);right:calc((100vw - 1600px)/2 + 36px)}}
@media(max-width:1100px){.studio-shell{grid-template-columns:174px minmax(0,1fr)}.studio-sidebar{padding:27px 16px}.studio main{padding:28px 24px 150px}.keys-workspace{grid-template-columns:minmax(220px,.8fr) minmax(330px,1.2fr);gap:18px}.studio .panel{padding:21px}.studio .board{padding:19px 16px}.studio .keycap{min-height:132px;padding:20px 12px 16px}.studio .action-choices button{gap:8px;padding:11px 9px}.action-symbol{width:29px;height:29px;font-size:10px}.action-choices small{font-size:10px}.studio .save-dock{left:198px;right:24px}.desktop-route{flex-direction:column;align-items:flex-start;gap:12px}.desktop-route-actions{width:100%;justify-content:space-between}}
@media(max-width:900px){.studio-shell{display:block}.studio-sidebar{position:relative;height:auto;padding:16px 22px;display:grid;grid-template-columns:auto 1fr;gap:13px 20px}.studio .brandmark{width:33px;height:33px}.studio .brand{font-size:19px}.studio .brand-sub{font-size:10px}.studio-tabs{grid-column:1/-1;flex-direction:row;gap:7px;margin:0}.studio-tabs button{flex:1;justify-content:center;padding:10px;min-height:43px;font-size:12px}.sidebar-device{border:0;padding:0;align-self:center;margin:0;justify-self:end}.sidebar-device p{display:none}.nav-icon{font-size:20px;width:22px}.keys-workspace{grid-template-columns:minmax(230px,.85fr) minmax(300px,1.15fr)}.studio main{padding:24px 22px 150px}.studio .save-dock{left:22px;right:22px}.studio h1{font-size:24px}.effects-workspace,.audio-workspace{grid-template-columns:1fr}}
@media(max-width:700px){.keys-workspace{grid-template-columns:1fr}.studio .key-overview{max-width:none}.studio .keycap{min-height:110px;gap:6px;padding:15px 14px}.studio .keycaps{gap:12px}.studio .board{padding:18px}.studio .board-label{margin-bottom:14px}.studio .board-bottom{margin-top:16px}.workspace-heading p{margin-bottom:15px}.studio .key-overview>.caption{display:none}.selection-summary{padding-top:16px;margin-bottom:4px}.studio .usb-intro{flex-basis:100%;flex-wrap:wrap;gap:12px}.studio .usb-intro>div{min-width:160px}.studio .usb-intro #serial-choose{flex:1}.studio .connection-capabilities .pill{font-size:10px}.studio .connection-manage{font-size:11px;padding:6px 10px}.studio .usb-panel[data-connected=true] .usb-intro{flex-basis:100%}.studio .usb-panel[data-connected=true] .connection-capabilities{flex:1}.device-name{display:none}.studio .usb-panel{padding:18px}.studio .usb-panel[data-connected=true]{padding:13px 15px}.setup-progress{gap:18px;font-size:11px;margin-bottom:20px}.setup-progress li{gap:6px}.setup-progress li span{width:23px;height:23px}.studio main{padding:22px 16px 155px}.studio .save-dock{left:12px;right:12px;bottom:10px;padding:13px 15px;grid-template-columns:1fr auto;gap:5px 8px}.studio .save-dock strong{font-size:11px}.studio .save-dock p{font-size:10px}.dock-actions{gap:7px}.dock-actions .button{padding:9px 12px;font-size:11px;min-height:39px}.studio #apply{display:none}.studio .connection{font-size:10px}.studio .studio-tabs button{font-size:11px;gap:5px;padding:9px 5px}.studio .studio-sidebar{padding:15px 16px}.studio .action-choices button{min-height:74px}.action-choices strong{font-size:13px}.action-choices small{font-size:11px}.action-symbol{width:33px;height:33px;font-size:11px}.studio .panel-head{margin-bottom:21px}.studio .record-actions{flex-wrap:wrap}.studio .record-actions .button{flex:1}.studio dialog{padding:23px}.studio .capture-actions{flex-wrap:wrap}.studio .toast{bottom:127px;left:16px;right:16px;max-width:none}}
@media(prefers-reduced-motion:reduce){.studio:not([data-motion=full]) *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.setup-progress .pending{color:#926623}.setup-progress .pending span{border-color:#d5ba8a;color:#926623;background:#fff8eb}

/* Visible feedback follows user actions; RGB previews follow the selected LED mode. */
.header-actions{display:flex;align-items:center;gap:15px}.studio .motion-toggle{display:flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid #cdd9ea;background:#fff;border-radius:7px;padding:8px 11px;font-size:11px;min-height:36px}.motion-toggle:before{content:'';width:7px;height:7px;flex-shrink:0;border:1px solid #315ed1;border-radius:50%;background:#315ed1}.motion-toggle[aria-pressed=false]:before{border-color:#8895a8;background:transparent}
.studio .keycap{transition:translate .22s ease,background-color .2s,border-color .2s}.studio .keycap:before{height:6px;border-radius:0 0 7px 7px}.studio .action-choices button,.studio-tabs button,.studio .preset-row button{transition:translate .2s ease,background-color .2s,border-color .2s,box-shadow .2s}
@media(hover:hover){.studio[data-motion=full] .keycap:hover:not(.down):not(.test){translate:0 -4px}.studio[data-motion=full] :is(.action-choices button,.preset-row button):hover:not(:disabled){translate:0 -2px}}
.studio details>summary{list-style:none;display:flex;align-items:center;gap:9px;cursor:pointer}.studio details>summary::-webkit-details-marker{display:none}.studio details>summary:before{content:'';width:6px;height:6px;flex-shrink:0;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transition:transform .24s ease}.studio details[open]>summary:before{transform:rotate(135deg)}
.studio .save-dock{transition:border-color .2s,background-color .2s}.studio .save-dock[data-writing=true]{border-color:#789be2}.studio .save-dock[data-writing=true] #save:before{content:'';display:block;flex-shrink:0;width:13px;height:13px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:pcb2-saving .7s linear infinite}.studio .save-dock[data-saved=true]{border-color:#58a780;background-color:#f2fff7}.studio .save-dock[data-saved=true] #save:before{content:'✓';font-size:14px}
@keyframes pcb2-saving{to{transform:rotate(360deg)}}
.studio[data-motion=full] .save-dock[data-writing=true] #save:before{animation:pcb2-saving .7s linear infinite!important}
.studio[data-motion=full] .board.mode-rainbow .keycap:before{animation:rainbow var(--preview-speed) infinite linear!important}.studio[data-motion=full] .board.mode-rainbow .keycap:nth-child(2):before{animation-delay:-.7s!important}.studio[data-motion=full] .board.mode-rainbow .keycap:nth-child(3):before{animation-delay:-1.4s!important}.studio[data-motion=full] .board.mode-rainbow .keycap:nth-child(4):before{animation-delay:-2.1s!important}.studio[data-motion=full] .board.mode-breathe .keycap:before{animation:breathe var(--preview-speed) infinite ease-in-out!important}
.studio[data-motion=reduced] *,.studio[data-motion=reduced] *:before,.studio[data-motion=reduced] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:700px){.header-actions{align-self:flex-start}.studio .motion-toggle{font-size:10px;padding:7px 9px;min-height:34px}}

/* Connect first. Offline devices do not get a disabled editing workspace. */
.usb-mark svg{width:100%;height:100%;display:block}.studio .usb-intro>.usb-primary-actions{flex:0 0 auto}.usb-primary-actions{display:flex;align-items:center;gap:15px}.usb-primary-actions:has(#serial-choose[hidden]):has(#serial-demo[hidden]){display:none}.usb-primary-actions>a{color:var(--accent);font-size:12px;white-space:nowrap;text-decoration:underline;text-underline-offset:4px}.tool-return{font-size:12px;margin-top:18px;color:var(--muted);line-height:1.8}.tool-return a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.offline-draft{font-size:12px;color:#8b652b;line-height:1.8}.studio .companion-note .desktop-route{border:0;padding:8px 0 0;gap:12px;flex-wrap:wrap;justify-content:flex-start}.desktop-route>a:first-child{font-size:12px;text-decoration:underline;text-underline-offset:3px}.studio .companion-note[data-ready=true] .desktop-route{display:none}
.studio[data-connected=false] :is([role=tabpanel],.setup-progress,.device-options,.save-dock,.studio-tabs){display:none!important}
.studio[data-connected=false] .usb-panel{max-width:760px;margin:76px auto 36px;padding:42px;display:grid;grid-template-columns:135px minmax(0,1fr);gap:18px 35px;align-items:center}.studio[data-connected=false] .usb-intro{display:contents}.studio[data-connected=false] .usb-mark{grid-column:1;grid-row:1/4;width:128px;height:128px;padding:16px;background:#edf3ff;border:1px solid #d2def3;border-radius:24px}.studio[data-connected=false] .usb-copy{grid-column:2;grid-row:1}.studio[data-connected=false] .usb-copy h2{font-size:25px;line-height:1.4}.studio[data-connected=false] .usb-copy p{font-size:14px;line-height:1.8;margin:10px 0 0;max-width:390px}.studio[data-connected=false] .usb-primary-actions{grid-column:2;grid-row:2;margin:3px 0 4px}.studio[data-connected=false] .usb-primary-actions .button{min-height:48px;padding:13px 23px;font-size:14px}.studio[data-connected=false] .usb-primary-actions>a{font-size:13px}.studio[data-connected=false] :is(.usb-mode,.connection-capabilities,#serial-note:not(.error)){display:none}.studio[data-connected=false] .usb-more{grid-column:2;font-size:12px;max-width:100%;min-width:0}.studio[data-connected=false] #serial-note.error{grid-column:1/-1}.studio[data-connected=false] :is(.offline-draft,.offline-download){grid-column:2}.studio[data-connected=false] .usb-actions{display:flex;flex-wrap:wrap}.studio[data-connected=false] .usb-port-label{min-width:160px;flex:1}.studio[data-connected=false] footer{max-width:760px;margin:26px auto 0}
@media(max-width:700px){.studio[data-connected=false] .usb-panel{grid-template-columns:1fr;margin:36px auto 24px;padding:28px 24px;gap:20px}.studio[data-connected=false] .usb-mark{grid-column:1;grid-row:1;width:90px;height:90px;padding:12px;border-radius:19px;justify-self:center}.studio[data-connected=false] .usb-copy{grid-column:1;grid-row:2;text-align:center}.studio[data-connected=false] .usb-copy h2{font-size:23px}.studio[data-connected=false] .usb-copy p{font-size:13px}.studio[data-connected=false] .usb-primary-actions{grid-column:1;grid-row:3;flex-direction:column;gap:14px;align-items:stretch}.studio[data-connected=false] .usb-primary-actions>a{text-align:center}.studio[data-connected=false] :is(.usb-more,.offline-draft,.offline-download){grid-column:1}.studio[data-connected=false] .usb-more{margin-top:4px}.studio[data-connected=false] .usb-more>summary{justify-content:center}}

.text-mode-group{margin-bottom:1.25rem;padding:1rem;border:1px solid var(--line,#d6ddeb);border-radius:12px;background:var(--surface,#fff)}
.text-mode-group select{width:100%;margin:.5rem 0}.text-mode-group .caption{line-height:1.65}

#single-key{width:100%;margin:.6rem 0}.macro-examples{margin-top:22px;padding:16px;border:1px solid #d8e2ee;background:#f6f9ff;border-radius:10px}.example-list{display:grid;gap:8px}.example-list button{padding:12px;text-align:left;border:1px solid #cfdaea;border-radius:8px;background:#fff;color:#344d70}.example-list strong,.example-list small{display:block}.example-list small{margin-top:4px;line-height:1.6;color:#62738d}#application-editor>label{display:block;margin:18px 0 7px}#application-editor>input{width:100%}.action-preview{font-size:12px;line-height:1.9;padding-left:22px;color:#4c6180}

/* Browse actions independently, then assign a physical key and trigger. */
.catalog-intro{display:flex;justify-content:space-between;gap:30px;align-items:center;margin:24px 0}.catalog-intro h2{font-size:25px;margin:10px 0}.catalog-intro p{font-size:13px;color:var(--muted);max-width:560px;line-height:1.9}.eyebrow{font:11px ui-monospace,monospace;letter-spacing:.16em;color:var(--accent)}.catalog-destination{display:grid;grid-template-columns:auto auto;align-items:center;gap:10px 14px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff;min-width:270px;font-size:12px}.catalog-destination select{min-width:145px}.catalog-assignments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0 28px}.catalog-slot{border:1px solid #d2ddec;border-top:3px solid #7595d8;border-radius:10px;background:#fff;padding:17px;text-align:left;color:#334d73;min-width:0}.catalog-slot small{font-size:10px;color:#70809a}.catalog-slot strong{display:block;margin:10px 0;overflow-wrap:anywhere}.catalog-slot p{font-size:11px;color:#637998;line-height:1.8;margin:0}.catalog-toolbar{display:flex;gap:18px;align-items:end;justify-content:space-between;flex-wrap:wrap}.catalog-search{display:flex;flex-direction:column;gap:8px;font-size:12px;min-width:240px}.catalog-filters{display:flex;gap:7px;flex-wrap:wrap}.catalog-filters button{background:#fff;border:1px solid #d3deed;border-radius:7px;padding:9px 12px;color:#5c6e8b;font-size:12px}.catalog-filters button[aria-pressed=true]{background:#eaf0ff;border-color:#7898d8;color:#2753be}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 26px}.catalog-card{display:flex;flex-direction:column;padding:22px;border:1px solid #d4dfed;border-radius:12px;background:#fff;min-width:0;transition:box-shadow .2s,translate .2s}.catalog-card h3{font-size:17px;margin:8px 0 5px}.catalog-card p{font-size:12px;color:#667994;line-height:1.8;min-height:44px}.catalog-card code{display:block;font-size:11px;line-height:1.8;overflow-wrap:anywhere;color:#365b98;background:#f0f5fd;padding:10px;border-radius:6px;margin:auto 0 16px}.catalog-card .button{font-size:12px;width:100%;justify-content:center}.catalog-card .pill{align-self:flex-start;font-size:10px}.gesture-settings{border-top:1px solid var(--line);margin-top:24px;padding-top:19px;font-size:13px}.gesture-timing{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.gesture-timing label{font-size:11px;color:#647795;line-height:1.8}.gesture-timing input{width:100%;margin-top:7px}.gesture-card{border:1px solid #d4dfed;border-radius:9px;margin:12px 0;padding:16px;background:#f8faff}.gesture-card label{display:flex;gap:8px;align-items:center;font-size:12px}.gesture-card select,.gesture-card textarea{width:100%;margin:12px 0 5px}.gesture-card textarea{min-height:78px}.gesture-card .quiet{font-size:11px;padding:7px 0}.gesture-card .caption{overflow-wrap:anywhere}.studio[data-connected=false][data-browse-catalog=true] #page-catalog:not([hidden]){display:block!important}.studio[data-connected=false][data-browse-catalog=true] .studio-tabs{display:flex!important}.studio[data-connected=false][data-browse-catalog=true] .usb-panel{margin:15px 0 25px;max-width:none;padding:20px;grid-template-columns:60px 1fr;gap:10px 20px}.studio[data-connected=false][data-browse-catalog=true] .usb-mark{width:54px;height:54px;padding:8px;border-radius:12px}.studio[data-connected=false][data-browse-catalog=true] .usb-copy h2{font-size:18px}.studio[data-connected=false][data-browse-catalog=true] .usb-copy p{font-size:12px;margin:4px 0}.studio[data-connected=false][data-browse-catalog=true] .usb-primary-actions .button{min-height:36px;font-size:12px;padding:8px 14px}
@media(hover:hover){.studio[data-motion=full] .catalog-card:hover{translate:0 -3px;box-shadow:0 8px 24px #2e4b7612}}
@media(max-width:1200px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-assignments{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.catalog-intro{display:block}.catalog-intro h2{font-size:22px}.catalog-destination{margin-top:20px;min-width:0}.catalog-grid{grid-template-columns:1fr}.catalog-assignments{gap:8px}.catalog-slot{padding:12px}.catalog-slot strong{font-size:13px}.catalog-card{padding:19px}.catalog-search{width:100%}.catalog-filters button{font-size:11px;padding:8px 10px}.studio .studio-tabs .nav-icon{display:none}.header-actions{gap:7px}.header-actions #browse-catalog{font-size:10px}.gesture-timing{grid-template-columns:1fr}}