.kbd{margin:1.25rem 0 0;user-select:none}.kbd--ref .plate{background:var(--kbd-bg);padding:.55rem;border-radius:12px}.krow{display:grid;grid-template-columns:repeat(60,1fr);gap:.24rem}.krow+.krow{margin-top:.24rem}.cap{position:relative;display:grid;place-items:center;min-width:0;height:clamp(2.6rem,5.9vw,3.4rem);border:none;background:var(--card, #fff);border-radius:7px;box-shadow:0 1px 2px color-mix(in srgb,var(--fg) 12%,transparent);transition:border-color .12s,background .12s,color .12s,box-shadow .12s,transform .08s}.cap .b{position:absolute;top:.24rem;left:.38rem;font:.6rem ui-monospace,Menlo,monospace;color:var(--dim);opacity:.8}.cap .h{grid-area:1 / 1;display:grid;place-items:center;font-size:clamp(1.4rem,3.3vw,2.05rem);line-height:1.1;color:var(--fg)}.cap .h.wide{font-size:clamp(1rem,2.3vw,1.4rem)}.cap .h .ring,.cap .h .ink{grid-area:1 / 1}.cap .h .ring{color:var(--dim);opacity:.25;font-weight:400}.cap.chrome{font:.72rem ui-monospace,Menlo,monospace;color:var(--dim)}.cap.ghost{box-shadow:none;border:none;background:transparent}.cap.ck{font:.72rem ui-monospace,Menlo,monospace;color:var(--dim);cursor:pointer}.cap.ck[data-chrome=tab],.cap.ck[data-chrome=caps],.cap.ck[data-chrome=enter]{cursor:default}.kbd--ref .cap:not(.ck):active{transform:translateY(1px)}.cap.ck:hover{color:var(--fg)}.kbd:has(#klayer-optshift:checked) .cap.ck.chord{color:var(--accent)}.kbd--ref .cap{cursor:pointer}.kbd--ref .cap:not(.chrome):hover{border-color:var(--accent)}.kbd--ref .cap.chrome{opacity:.55}.kcaption{display:flex;align-items:center;gap:.8rem;margin-top:.7rem;color:var(--dim);font-size:.8rem;flex-wrap:wrap}.kbd:has(#klayer-opt:checked) .cap.ck[data-chrome=option],.kbd:has(#klayer-optshift:checked) .cap.ck.chord,.kbd:has(#klayer-shift:checked) .cap.ck[data-chrome=shift]{color:#fff;background:var(--accent)}.kbd:has(#klayer-base:checked) .cap .b{position:static;grid-area:1 / 1;font-size:1rem;color:var(--fg);opacity:.8}.kbd--ref .cap .h{display:none}.kbd:has(#klayer-opt:checked) .cap .h.p{display:block}.kbd:has(#klayer-optshift:checked) .cap .h.s{display:block}.kbd:has(#klayer-shift:checked) .cap .h.t{display:block}.cap .h.t{font:500 1.15rem ui-monospace,Menlo,monospace;color:var(--fg)}.cap .h.t.mod{color:var(--accent);font-weight:700}.kbd--drill .cap{cursor:pointer;appearance:none;font:inherit;color:inherit;padding:0}.kbd--drill .cap:active{transform:translateY(1px)}.kbd--drill .cap .b{position:static;grid-area:1 / 1;font-size:.95rem;color:var(--fg)}.kbd--drill .cap .h{display:none}.kbd--drill .cap.chrome{cursor:pointer;color:var(--fg);opacity:1}.kbd--drill .cap.chrome.inert{cursor:default;opacity:.4}.kbd--drill.layer-opt .cap .b{position:absolute;top:.22rem;left:.35rem;font-size:.66rem;color:var(--dim)}.kbd--drill.layer-opt .cap .h.p{display:block;font-size:1.1rem}.kbd--drill.layer-opt.layer-shift .cap .h.p{display:none}.kbd--drill.layer-opt.layer-shift .cap .h.s{display:block;font-size:1.1rem}.kbd--drill .cap.armed{border-color:var(--accent);color:var(--accent)}.kbd--drill .cap.armed.chrome{color:var(--accent)}.kbd--drill .cap.hot,.kbd--drill .cap.need{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}.kbd--drill .cap.hot .b,.kbd--drill .cap.need .b,.kbd--drill .cap.hot .h,.kbd--drill .cap.need .h,.kbd--drill .cap.hot.chrome,.kbd--drill .cap.need.chrome{color:#fff}[data-keymode=pc] .kbd--drill .cap.chrome{font-size:.62rem}.klegend{color:var(--dim);font-size:.82rem;margin-top:.8rem}@media(max-width:40rem){.cap{height:2.1rem;border-radius:5px}.cap .b{font-size:.5rem}.krow{gap:.18rem}}