:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1c2723;background:#f4f4ee;font-synthesis:none;--green:#c4ef70;--line:#d8dcd1;--muted:#63716a}*{box-sizing:border-box}body{margin:0}header,main,footer{width:min(1120px,calc(100% - 64px));margin:auto}header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-weight:900;letter-spacing:-1.5px;font-size:25px;color:inherit;text-decoration:none;display:flex;align-items:center}.brand span{font-weight:450}.brand i{width:9px;height:9px;background:#83b643;border-radius:50%;margin-left:9px}.header-note,.eyebrow,footer,.device-art>span{font-size:10px;font-weight:700;letter-spacing:1.8px}.header-note{color:var(--muted)}.intro{padding:65px 0 40px}.eyebrow{color:var(--muted);margin:0 0 20px}h1{font-size:clamp(48px,7vw,78px);line-height:1.02;letter-spacing:-4px;font-weight:600;margin:0 0 24px}h1 em{font-style:normal;color:#668245}.intro>p:last-child{line-height:1.7;color:var(--muted);font-size:16px}.device-panel{background:#19241f;color:#f6f8f0;display:grid;grid-template-columns:1.2fr 1fr;border-radius:18px;overflow:hidden;min-height:294px}.device-art{background:radial-gradient(ellipse at 50% 70%,#394536 0%,#202c25 55%,#19241f 100%);padding:70px 25px 25px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:43px}.device-art>span{color:#9dafa1;font-size:8px}.device-info{padding:35px 40px;border-left:1px solid #344137;display:flex;align-items:flex-start;flex-direction:column;justify-content:center}.status-pill{font-size:11px;color:#c4d0c3;border:1px solid #566452;border-radius:20px;padding:6px 10px}.status-pill.connected{color:var(--green);border-color:#7c9755}h2{font-size:25px;letter-spacing:-.7px;margin:19px 0 7px}.device-info p{margin:2px 0;color:#b4c0b4;font-size:13px;line-height:1.6}.device-info .battery{font-size:11px;margin:7px 0 18px}button{font:inherit;font-weight:650;font-size:12px;min-height:43px;padding:11px 16px;border:1px solid #c4cdbe;border-radius:7px;background:transparent;color:inherit;cursor:pointer;transition:background .15s}button:hover{background:#e7ebdf}button:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #84a751;outline-offset:3px}.primary{background:var(--green);border-color:var(--green);color:#1a291b}.primary:hover{background:#d6ff90}.primary span{padding-left:28px}button:disabled{opacity:.45;cursor:not-allowed}.device-info #disconnect{margin-top:8px;border:0;min-height:28px;padding:4px 0;color:#b8c8b8}.device-info #disconnect:hover{background:transparent;color:white}#message{font-size:12px;color:var(--muted);padding:14px 0;min-height:48px}#message.error,.notice{color:#9b382d}#message.success{color:#315b20;font-weight:650}.notice{padding:15px;border:1px solid #d9aaa0;border-radius:7px;font-size:13px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:25px 0 75px}.steps article>span{font-size:11px;letter-spacing:2px;color:#7b8a76}.steps h3{font-size:18px;letter-spacing:-.5px;margin:16px 0 8px}.steps p{font-size:13px;line-height:1.7;color:var(--muted);max-width:245px}footer{padding:28px 0 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:8px;letter-spacing:1px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-top:24px}.section-heading .eyebrow{margin-bottom:8px}.section-heading h2{margin:0}.tag{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:8px 12px}.hint{font-size:12px;color:var(--muted);line-height:1.7;margin:15px 0 24px}fieldset{border:0;margin:0;padding:0;min-width:0}.control{border:1px solid var(--line);border-radius:11px;background:#fffef8;margin:14px 0;padding:20px}.control h3{font-size:15px;margin:0 0 15px;display:flex;align-items:center;gap:10px}.control-number{background:#233629;color:var(--green);border-radius:50%;width:27px;height:27px;display:inline-flex;justify-content:center;align-items:center;font-size:11px}.mapping{display:grid;grid-template-columns:125px minmax(125px,190px) 1fr;gap:14px;padding:12px 0;align-items:start;border-top:1px solid #edf0e6}.mapping>label{font-size:12px;padding-top:10px;font-weight:600}select{width:100%;border:1px solid #c9d1c2;border-radius:5px;background:#fffef9;padding:9px;color:#243325;font:inherit;font-size:12px;min-height:37px}.modifiers{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;min-height:37px;align-items:center}.modifiers label{white-space:nowrap;display:flex;align-items:center;gap:4px}input[type=checkbox]{accent-color:#618537;width:15px;height:15px}.mapping details{grid-column:2/4;font-size:11px;color:var(--muted)}summary{cursor:pointer;padding:5px 0}.extra-keys{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:10px 0}.extra-keys label{font-size:10px}.extra-keys select{margin-top:4px}.reserved{font-size:12px;color:var(--muted);border-top:1px solid #edf0e6;padding:13px 0 0;margin:0}.combos{margin:27px 0}.combos>summary{font-weight:650;font-size:15px;padding:12px 0}.combos>summary span{font-weight:400;color:var(--muted);font-size:11px;margin-left:10px}.save-panel{display:flex;align-items:center;justify-content:space-between;background:#e7eddc;border-radius:10px;padding:25px;gap:25px}.save-panel strong{font-size:15px}.save-panel p{font-size:11px;color:var(--muted);margin-bottom:0}.actions{display:flex;gap:10px}.utilities{display:flex;gap:15px;margin:20px 0 60px;flex-wrap:wrap}.utilities button{border:0;padding:8px 0;color:var(--muted);font-size:11px}.utilities .danger{margin-left:auto;color:#965b4e}.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}[hidden]{display:none!important}@media(max-width:700px){header,main,footer{width:calc(100% - 36px)}header{height:77px}.header-note{display:none}.intro{padding-top:40px}h1{letter-spacing:-2.5px}.device-panel{grid-template-columns:1fr}.device-art{padding-top:45px;padding-bottom:28px}.device-info{border-left:0;border-top:1px solid #344137;padding:25px}.steps{gap:23px;grid-template-columns:1fr;padding-bottom:40px}.steps article{display:grid;grid-template-columns:25px 1fr;gap:0 10px}.steps h3{margin:0}.steps p{grid-column:2;max-width:none}.steps article>span{padding-top:4px}footer{display:block;line-height:2}footer span{display:block}.mapping{grid-template-columns:90px 1fr;gap:10px}.modifiers{grid-column:2}.mapping details{grid-column:1/3}.extra-keys{grid-template-columns:repeat(3,1fr)}.save-panel{align-items:stretch;flex-direction:column}.actions{flex-direction:column}.section-heading{gap:15px}.tag{white-space:nowrap}.utilities .danger{margin-left:0}}

/* Official supplied symbol stays unmodified; replace wordmark element with a licensed asset later. */
.brand{gap:15px;letter-spacing:-.7px}.brand-symbol{display:block;width:92px;height:auto}.brand .brand-wordmark{font-family:ui-sans-serif,system-ui,sans-serif;font-size:28px;font-weight:650;font-style:italic}
.device-panel{border:1px solid #344137;transition:border-color .2s,box-shadow .2s}.device-panel.is-connected{border-color:#769f83;box-shadow:0 0 0 3px #769f831a}.is-connected .device-info{background:#213429}.status-pill{display:flex;align-items:center;gap:7px}.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:#a9afa9}.status-pill.connected{color:#c2e5cc;border-color:#789c81}.status-pill.connected::before{background:#9ed2ac}
.mapping{grid-template-columns:105px minmax(145px,180px) minmax(0,1fr);gap:12px 18px}.mapping h4{font-size:12px;margin:11px 0}.mapping>.action-type-label{padding-top:0;font-size:10px;color:var(--muted)}.action-type-label select{margin-top:5px}.keyboard-options{min-width:0}.keyboard-options>.modifiers{margin-top:7px}.mapping details{margin-top:4px}.mapping>.action-summary{grid-column:3;margin:0;color:#486148;font-size:12px}.mapping>select{margin-top:19px}.diagnostics{margin-top:15px;font-size:11px;color:var(--muted)}.diagnostics pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}#message{white-space:pre-line;line-height:1.6}
@media(max-width:700px){.mapping{grid-template-columns:1fr}.mapping h4{margin:0}.mapping>.action-summary{grid-column:1}.mapping>select{margin-top:0}.mapping>.action-type-label{max-width:100%}.brand-symbol{width:80px}.brand .brand-wordmark{font-size:25px}.section-heading{flex-wrap:wrap}.device-info{min-width:0}.extra-keys{grid-template-columns:repeat(2,minmax(0,1fr))}.device-info .battery{font-size:12px}}


/* Version 1 composition, with the official symbol replacing inaccurate artwork. */
.brand .brand-wordmark{font-family:var(--shortbar-brand-font);font-style:italic;font-weight:650}
.intro h1{font-family:var(--shortbar-brand-font);font-weight:600}
.symbol-plaque{width:min(270px,85%);padding:20px;background:#fff;border-radius:9px}
.device-symbol{display:block;width:100%;height:auto}
.device-art{padding:44px 25px;gap:28px}
.device-art>span{text-transform:uppercase}
.mapping{grid-template-columns:105px minmax(170px,245px) minmax(0,1fr)}
.mapping>.action-picker{margin-top:0;min-height:42px}
.keyboard-options>.modifiers{margin-top:0}
.mapping>.action-summary{grid-column:2/4;font-size:12px}
.mapping>.keyboard-options{grid-column:3}
.modifiers label{min-height:30px}
@media(max-width:700px){.mapping{grid-template-columns:1fr;gap:10px}.mapping>.keyboard-options,.mapping>.action-summary{grid-column:1}.device-art{padding:35px 20px}}

/* Rich actions extend the existing mapping editor, without changing the page design. */
.layout-field{display:block;max-width:280px;font-size:12px;margin:18px 0}.layout-field select{margin-top:7px}
.macro-editor{grid-column:2/4;min-width:0}.macro-editor label{display:block;font-size:12px;margin:12px 0}.macro-editor input{font:inherit;width:100%;padding:10px;border:1px solid #c9d1c2;border-radius:5px;background:#fffef9;color:#243325;box-sizing:border-box}.macro-editor select{margin-top:5px}.macro-editor .hint{margin:10px 0}.sequence-step{border-top:1px solid var(--line);padding:15px 0}.sequence-step h5{font-size:13px;margin:0 0 10px}.step-chord{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}.step-chord select{width:150px}.step-actions{display:flex;gap:10px;flex-wrap:wrap}.macro-editor button{margin:5px 0}.sequence-step .modifiers label{display:flex;margin:0}.macro-editor input[type=checkbox]{width:15px;padding:0}.sequence-step>label{max-width:260px}
@media(max-width:700px){.macro-editor{grid-column:1}.step-chord select{max-width:100%}}

/* Rotary product additions; five-button layout retains its existing rules. */
.rotary-control { grid-column: 1 / -1; }
.rotary-knob { width: 86px; height: 86px; margin: 0 auto 24px; border: 8px solid #25483b; border-radius: 50%; background: #e7e8df; box-shadow: inset 0 0 0 2px #c7cebf; position: relative; }
.rotary-knob::before { content: ''; position: absolute; width: 4px; height: 17px; background: #25483b; top: 6px; left: calc(50% - 2px); border-radius: 2px; }
.scroll-settings { display: flex; flex-wrap: wrap; gap: 24px; margin: 20px 0; }
.scroll-settings[hidden] { display: none; }
.scroll-settings label { display: grid; gap: 8px; min-width: 160px; }