.kb-app{--canvas:#fff;--surface:#f6f3ee;--ink:#27221c;--muted:#655c50;--line:#8c7c67;--accent:#8a4600;--observed:#0b6f56;--observed-bg:#ddf3e9;--pressed:#713600;--pressed-bg:#ffdcaa;margin:0;background:var(--canvas);color:var(--ink);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light}
html[data-mg-theme=dark] .kb-app{--canvas:#0a0a0b;--surface:#211e19;--ink:#f5efe7;--muted:#c0b5a6;--line:#766b5d;--accent:#ffc58a;--observed:#92e6c3;--observed-bg:#123c2e;--pressed:#25170a;--pressed-bg:#ffc58a;color-scheme:dark}
.kb-app *{box-sizing:border-box}.kb-app [hidden]{display:none!important}.kb-app a{color:var(--accent);text-underline-offset:3px}.kb-app button,.kb-app select,.kb-app textarea{font:inherit}.kb-app button,.kb-app select{min-height:44px;border:1px solid var(--line);border-radius:8px;padding:9px 14px;background:var(--canvas);color:var(--ink)}.kb-app button{cursor:pointer;font-weight:650}.kb-app button:disabled{cursor:default;color:var(--muted);border-style:dashed;background:var(--surface)}.kb-app button.primary{background:var(--accent);border-color:var(--accent);color:var(--canvas)}.kb-app button.primary:disabled{background:var(--surface);color:var(--muted);border-color:var(--line)}.kb-app :focus-visible{outline:3px solid var(--accent);outline-offset:4px}.kb-app h1,.kb-app h2,.kb-app h3{line-height:1.2;letter-spacing:-.025em}.kb-app h1{font-size:clamp(2rem,5vw,3.4rem);margin:0 0 10px}.kb-app h2{font-size:1.65rem}.kb-app h3{font-size:1.15rem}.kb-app p{margin:0 0 16px}.kb-shell{max-width:1240px;margin:auto;padding-left:28px;padding-right:28px;min-width:0}.kb-app .skip{position:absolute;left:16px;top:-100px;z-index:100;background:var(--canvas);padding:12px}.kb-app .skip:focus{top:6px}.kb-header{border-bottom:1px solid var(--line)}.kb-header-inner{display:flex;align-items:center;gap:28px;min-height:86px}.kb-brand{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:750;text-decoration:none;color:var(--ink)!important;white-space:nowrap}.kb-nav{display:flex;gap:22px;margin-left:auto}.kb-nav a,.kb-mobile-nav a{color:var(--muted);text-decoration:none;font-weight:600}.kb-nav a[aria-current],.kb-mobile-nav a[aria-current]{color:var(--accent);text-decoration:underline}.kb-theme{display:flex;align-items:center;gap:8px;font-size:13px}.kb-menu{display:none}.kb-mobile-nav{padding-top:12px;padding-bottom:20px}.kb-mobile-nav a{display:block;padding:10px 0}.kb-app .mg-breadcrumbs{max-width:1240px;margin:auto}.kb-main{padding-top:38px;padding-bottom:64px}.kb-intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}.kb-intro p{font-size:19px;color:var(--muted);margin:0}.kb-local{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);white-space:nowrap}.kb-toolbar{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin:24px 0 20px}.kb-field{display:grid;gap:5px;font-size:13px;font-weight:600}.kb-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}.kb-capture{border:1px solid var(--line);border-radius:14px;overflow-x:auto;overscroll-behavior-x:contain;background:var(--surface);padding:22px;scrollbar-gutter:stable;min-width:0}.kb-capture[data-active=true]{box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)}.kb-capture:focus-visible{outline-offset:5px}.kb-status{display:flex;align-items:center;gap:10px;font-size:14px;margin:0 0 12px;flex-wrap:wrap}.kb-status strong{font:700 12px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.kb-status span{color:var(--muted)}.kb-keyboard{display:grid;grid-template-columns:minmax(560px,1fr) 136px 180px;gap:22px;min-width:980px}.kb-capture[data-profile=tkl-87] .kb-keyboard{grid-template-columns:minmax(560px,1fr) 136px;min-width:760px}.kb-capture[data-profile=compact-61] .kb-keyboard{grid-template-columns:1fr;min-width:580px}.kb-main-keys{min-width:0}.kb-function{display:flex;gap:4px;margin-bottom:20px}.kb-function .kb-key:first-child{margin-right:22px}.kb-row{display:flex;gap:4px;margin-bottom:5px}.kb-key{flex:var(--w,1) 1 0;min-width:0;min-height:47px;border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;background:var(--canvas);color:var(--ink);display:flex;align-items:center;justify-content:center;position:relative;font:11px/1.15 ui-monospace,SFMono-Regular,Consolas,monospace;padding:3px;text-align:center;overflow-wrap:anywhere;transition:background-color .08s,color .08s}.kb-key[data-state=observed]{background:var(--observed-bg);color:var(--observed);border-color:var(--observed)}.kb-key[data-state=observed]:after{content:"";position:absolute;right:3px;bottom:3px;width:4px;height:4px;border-radius:50%;background:currentColor}.kb-key[data-state=held]{background:var(--pressed-bg);color:var(--pressed);border-color:var(--pressed);border-bottom-width:1px;transform:translateY(2px)}.kb-nav-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;align-content:start}.kb-nav-keys .kb-print{grid-column:span 1}.kb-nav-keys .kb-arrow-up{grid-column:2;margin-top:50px}.kb-numpad{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;align-content:start;padding-top:67px}.kb-numpad .kb-key[data-code=NumpadAdd],.kb-numpad .kb-key[data-code=NumpadEnter]{grid-row:span 2}.kb-numpad .kb-key[data-code=Numpad0]{grid-column:span 2}.kb-capture[data-names=Mac] .kb-row:last-child [data-code=ControlLeft]{order:1}.kb-capture[data-names=Mac] .kb-row:last-child [data-code=AltLeft]{order:2}.kb-capture[data-names=Mac] .kb-row:last-child [data-code=MetaLeft]{order:3}.kb-capture[data-names=Mac] .kb-row:last-child [data-code=Space]{order:4}.kb-capture[data-names=Mac] .kb-row:last-child [data-code=MetaRight]{order:5}.kb-capture[data-names=Mac] .kb-row:last-child [data-code=AltRight]{order:6}.kb-capture[data-names=Mac] .kb-row:last-child [data-code=ContextMenu]{order:7}.kb-capture[data-names=Mac] .kb-row:last-child [data-code=ControlRight]{order:8}.kb-legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin:14px 0}.kb-dot{display:inline-block;width:10px;height:10px;border:1px solid var(--line);border-radius:3px;margin-right:6px}.kb-dot.observed{background:var(--observed-bg);border-color:var(--observed)}.kb-dot.held{background:var(--pressed-bg);border-color:var(--accent)}.kb-scroll-cue{font-size:12px;color:var(--muted);margin-top:8px!important}.kb-readout{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);margin-bottom:20px}.kb-readout p{margin:0;font-size:13px;color:var(--muted)}.kb-number{font:500 28px ui-monospace,monospace;color:var(--ink)}.kb-number small{font-size:16px;color:var(--muted)}.kb-app progress{width:100%;max-width:280px;height:5px;accent-color:var(--observed)}.kb-current{display:flex;gap:22px;flex-wrap:wrap;margin:20px 0}.kb-current div{min-width:70px;max-width:100%}.kb-current dt{font-size:12px;color:var(--muted)}.kb-current dd{margin:2px 0;font:14px ui-monospace,monospace;overflow-wrap:anywhere;max-width:100%;unicode-bidi:plaintext}.kb-current .kb-event-key{max-width:260px}.kb-app details{border:1px solid var(--line);border-radius:9px;padding:14px 18px;margin:18px 0}.kb-app summary{cursor:pointer;font-weight:650;min-height:28px}.kb-table-wrap{overflow-x:auto;max-width:100%}.kb-app table{width:100%;border-collapse:collapse;font-size:13px;margin:18px 0}.kb-app th,.kb-app td{text-align:left;border-bottom:1px solid var(--line);padding:9px;white-space:nowrap}.kb-app th{font-weight:650}.kb-exports{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin:26px 0 10px}.kb-exports .kb-field{min-width:150px}.kb-small{font-size:13px;color:var(--muted)}.kb-notice{min-height:26px;font-size:14px;color:var(--accent);overflow-wrap:anywhere}.kb-help{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;column-gap:70px;row-gap:24px}.kb-help section{max-width:60ch}.kb-help p,.kb-help li{color:var(--muted)}.kb-help h2{font-size:1.3rem}.kb-app .kb-doc{max-width:820px;padding-top:44px;padding-bottom:70px;overflow-wrap:anywhere}.kb-doc h2{margin-top:38px}.kb-doc h3{margin-top:28px}.kb-doc li{margin-bottom:9px}.kb-doc .lede{font-size:19px;color:var(--muted)}.kb-doc aside{border-left:3px solid var(--accent);padding:12px 20px;background:var(--surface);margin:28px 0}.kb-footer{border-top:1px solid var(--line);padding:34px 0}.kb-footer-inner{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}.kb-footer p{font-size:13px;color:var(--muted);margin:12px 0 0}.kb-footer nav{display:flex;gap:18px;flex-wrap:wrap;align-content:start}.kb-footer nav a{font-size:13px}.kb-app dialog{background:var(--canvas);color:var(--ink);border:1px solid var(--line);border-radius:14px;width:min(480px,calc(100% - 32px));padding:26px;max-height:85vh;overflow:auto}.kb-app dialog::backdrop{background:rgb(0 0 0/.65)}.kb-app dialog h2{font-size:1.4rem;margin-top:0}.kb-dialog-actions{display:flex;gap:10px;justify-content:end;flex-wrap:wrap}.kb-app textarea{width:100%;min-height:200px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:12px;resize:vertical;font-size:12px}.kb-app .kb-inline-counts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;font-size:13px}.kb-app .kb-inline-counts p{margin:0}.kb-app .kb-break{overflow-wrap:anywhere}.kb-app code{font-size:.9em}
@media(max-width:850px){.kb-shell{padding-left:20px;padding-right:20px}.kb-nav{display:none}.kb-theme{margin-left:auto}.kb-menu{display:block}.kb-main{padding-top:25px}.kb-intro{align-items:start}.kb-local{display:none}.kb-actions{margin-left:0}.kb-help{column-gap:30px}.kb-header-inner{gap:14px}}
@media(max-width:520px){.kb-shell{padding-left:16px;padding-right:16px}.kb-header-inner{flex-wrap:wrap;gap:10px;min-height:94px;padding-top:12px;padding-bottom:12px}.kb-brand{font-size:16px}.kb-theme{order:3;width:100%;margin:0;justify-content:space-between}.kb-theme select{min-width:150px}.kb-menu{margin-left:auto}.kb-intro p{font-size:17px}.kb-toolbar{gap:10px}.kb-toolbar>.kb-field{flex:1 1 125px;min-width:0}.kb-toolbar select{width:100%;max-width:100%}.kb-actions{width:100%}.kb-actions button{flex:1 1 auto;padding:9px 10px}.kb-capture{padding:16px}.kb-readout{gap:14px;grid-template-columns:1fr 1fr}.kb-readout>div:first-child{grid-column:1/-1}.kb-help{grid-template-columns:1fr;gap:10px;margin-top:38px}.kb-current{gap:14px}.kb-current div{min-width:60px}.kb-exports{display:grid;grid-template-columns:1fr 1fr}.kb-exports>button:first-child{grid-column:1/-1}.kb-exports .kb-field{min-width:0}.kb-exports select{width:100%}.kb-footer nav{gap:14px}.kb-app .kb-inline-counts{grid-template-columns:1fr}.kb-main{padding-bottom:38px}.kb-app dialog{padding:20px}}
@media(prefers-reduced-motion:reduce){.kb-key{transition:none}}

/* Keep the navigation cluster in physical key order, independent of grid auto-placement. */
.kb-nav-keys{grid-template-rows:repeat(3,47px) 63px repeat(2,47px)}.kb-nav-keys .kb-arrow-up{grid-column:2;grid-row:5;margin-top:0}.kb-nav-keys [data-code=ArrowLeft]{grid-column:1;grid-row:6}.kb-nav-keys [data-code=ArrowDown]{grid-column:2;grid-row:6}.kb-nav-keys [data-code=ArrowRight]{grid-column:3;grid-row:6}