.keyboard-page{padding-block:64px 100px}.keyboard-intro{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:56px;margin-bottom:48px}.keyboard-intro h1{font-size:clamp(3.5rem,7vw,6.4rem)}.keyboard-intro .eyebrow{text-decoration:none}.keyboard-intro .lead{margin-top:0}.keyboard-panel{padding:30px;border:1px solid var(--l);margin-top:24px;background:rgb(232 226 211/35%)}.keyboard-panel h2{font-size:1.8rem;letter-spacing:-.04em}.keyboard-panel .eyebrow{margin-top:0;margin-bottom:12px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.profile-badge{border:1px solid var(--l);padding:7px 12px;font:700 .75rem var(--mono);color:var(--m)}.keyboard-page label{display:grid;gap:7px;font-size:.82rem;font-weight:700}.keyboard-page input:not([type=checkbox]),.keyboard-page select{width:100%;padding:11px;border:1px solid #aaa496;border-radius:3px;background:var(--p);color:var(--i);font:500 .9rem ui-sans-serif,system-ui,sans-serif}.geometry-fields{display:flex;align-items:end;gap:16px;margin-top:26px}.geometry-fields label{width:110px}.hint{color:var(--m);font-size:.86rem;line-height:1.6}.layer-buttons{display:flex;gap:0;margin:25px 0 20px}.layer-buttons button{padding:11px 20px;border:1px solid var(--i);background:transparent;color:var(--i);font-weight:750;cursor:pointer}.layer-buttons button+button{border-left:0}.layer-buttons button[aria-pressed=true]{background:var(--i);color:var(--p)}.matrix-container{width:100%;min-width:0;padding:3px 3px 12px}.keyboard-matrix{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:7px;width:100%;min-width:0}.matrix-key{position:relative;min-width:0;min-height:76px;padding:12px 5px 9px;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;border:1px solid #aaa496;border-radius:5px;background:var(--p);color:var(--i);box-shadow:0 3px 0 var(--l);cursor:pointer}.matrix-key:hover{background:var(--q)}.matrix-key[aria-pressed=true]{outline:2px solid var(--s);outline-offset:1px}.matrix-key.custom::after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;background:var(--s);border-radius:50%}.key-label{font:700 .8rem var(--mono);max-width:100%;overflow-wrap:anywhere;line-height:1.2}.key-position{font:500 .6rem var(--mono);color:var(--m)}.matrix-legend{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-top:12px;font-size:.75rem;color:var(--m)}.legend-dot{display:inline-block;width:6px;height:6px;background:var(--s);border-radius:50%;margin-right:5px}.keyboard-workspace{display:grid;grid-template-columns:1fr 1fr;gap:24px}.key-editor form>label,.key-editor form>div:not(.keyboard-actions){margin-top:18px}.key-editor #logical-fields label+label{margin-top:14px}.keyboard-page .check-field{display:flex;align-items:start;gap:10px;font-weight:500}.check-field input{margin-top:4px}.keyboard-actions{display:flex;flex-wrap:wrap;gap:10px;margin-block:24px 16px}.keyboard-page button{cursor:pointer}.keyboard-page button:disabled{opacity:.5;cursor:not-allowed}.keyboard-page :focus-visible{outline:2px solid var(--s);outline-offset:3px}.keyboard-page pre{background:#1d1f1b;color:#eae7dc;font-size:.77rem;max-height:330px;overflow:auto}.json-details{border-block:1px solid var(--l);margin-top:24px}.json-details summary{padding:15px 0;cursor:pointer;font-size:.82rem;font-weight:700}.text-button{padding:0;border:0;background:transparent;color:var(--m);text-decoration:underline;font-size:.82rem}.setup-fields{display:grid;grid-template-columns:1fr 2fr;gap:16px;margin-top:25px}#keyboard-status{padding:12px 16px;border-left:3px solid #31513d;font-size:.9rem;background:var(--q)}#keyboard-status.error{border-color:#9a422b;color:#9a422b}.keyboard-page [hidden]{display:none!important}@media(max-width:760px){.keyboard-intro,.keyboard-workspace{grid-template-columns:1fr}.keyboard-intro{gap:18px}.keyboard-workspace{gap:0}.keyboard-panel{padding:24px 18px}.setup-fields{grid-template-columns:1fr}}@media(max-width:500px){.keyboard-page{padding-top:40px}.geometry-fields{flex-wrap:wrap}.geometry-fields label{flex:1}.geometry-fields button{width:100%}.profile-badge{display:none}}
.profile-field{max-width:500px;margin-top:26px}.key-reference{font:500 .65rem var(--mono);color:var(--m)}
.key-reference{max-width:100%;overflow-wrap:anywhere;line-height:1.15}@media(max-width:760px){.keyboard-matrix{gap:3px}.matrix-key{padding:8px 2px;gap:5px;min-height:66px}.key-label{font-size:clamp(.42rem,2vw,.8rem)}.key-position,.key-reference{font-size:clamp(.36rem,1.5vw,.6rem)}}@media(max-width:500px){.keyboard-matrix{gap:2px}.matrix-key{padding:7px 1px;gap:4px}.key-position{letter-spacing:-.03em}}