/* keyboardtest.co tool styles (grey-card standard, same base as mouseclicktest.app) */
.tools{display:grid;gap:18px;padding-top:6px;padding-bottom:30px}
.tools{grid-template-columns:minmax(0,1fr)}
.tools .card{max-width:1120px;width:100%;margin:0 auto;min-width:0}
.tools .card.narrow{max-width:860px}
.intro{border-left:6px solid var(--neon-cyan)}
.field{border:0;padding:0;margin:0 0 12px}
.field legend,.lab{font-weight:700;margin-bottom:6px;color:var(--card-ink);display:block}
input[type=range]{accent-color:var(--neon-lime);width:100%;min-height:36px}
.tool .btn-row{margin:8px 0;display:flex;flex-wrap:wrap;gap:8px}
.hint{display:block;margin:0 0 10px}
.opts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:0 0 12px}
.opts .pills{margin:0}
.chk{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--card-ink);cursor:pointer;min-height:36px}
.chk input{width:20px;height:20px;accent-color:var(--neon-lime)}
.focus-note{background:var(--neon-yellow);color:var(--on-neon)!important;border-radius:12px;padding:10px 14px;font-weight:700;margin:0 0 10px;cursor:pointer}
.focus-note *{color:var(--on-neon)!important}
.mob-note{background:var(--tile);border-radius:12px;padding:10px 14px;margin:0 0 10px}
@media (hover:hover) and (pointer:fine){.mob-note{display:none}}
/* on-screen keyboard */
.kbwrap{background:var(--tile);border-radius:18px;padding:10px;outline:none;overflow-x:auto}
.kb{min-width:540px}.kb.w15{min-width:380px;max-width:860px;margin:0 auto}
.kbwrap:focus-visible{box-shadow:0 0 0 3px var(--t-link)}
.kb{position:relative;width:100%;aspect-ratio:22.5/6.25;container-type:inline-size;user-select:none;-webkit-user-select:none}
.kb .k{position:absolute;padding:2px;box-sizing:border-box}
.kb .k span{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;height:100%;box-sizing:border-box;border-radius:max(3px,.6cqw);background:#5f6a7d;color:#f4f7fb;border:1px solid #8d97a8;
  font:700 clamp(6px,1.15cqw,14px)/1.1 var(--font);padding:.35em .4em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:background .06s}
.kb.w15 .k span{font-size:clamp(7px,1.6cqw,16px)}
.kb .k.seen span{background:#2d6b74;border-color:#7fdcea}
.kb .k.dbl span{background:#7a2b1f;border-color:#ffb4a0;color:#fff}
.kb .k.long span{background:var(--neon-orange);color:var(--on-neon);border-color:var(--neon-orange)}
.kb .k.down span{background:var(--neon-lime);color:var(--on-neon);border-color:var(--neon-lime)}
.kb .k.nd span{background:transparent;border:1px dashed #8d97a8;color:#c3cad6;font-style:italic}
.kb.show-untested .k:not(.seen):not(.nd):not(.down) span{outline:2px dashed var(--neon-yellow);outline-offset:-3px}
.kb .k.enter-top span{border-bottom-left-radius:0;border-bottom:0}
.kb .k.enter-bot span{border-top-left-radius:0;border-top-right-radius:0;border-top:0}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;padding:0;list-style:none;font-size:.88rem}
.legend li{display:flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid #8d97a8;background:#5f6a7d}
.legend .l-down{background:var(--neon-lime)}.legend .l-seen{background:#2d6b74}.legend .l-dbl{background:#7a2b1f}.legend .l-long{background:var(--neon-orange)}.legend .l-nd{background:transparent;border-style:dashed}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}
.stat{background:var(--tile);border-radius:14px;padding:10px 12px}
.stat span{display:block;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--card-ink-soft)}
.stat b{display:block;font-size:1.5rem;font-weight:800;color:var(--t-cyan);font-variant-numeric:tabular-nums}
.stat.warn b{color:var(--t-orange)}
.chips{list-style:none;padding:0;margin:6px 0 10px;display:flex;flex-wrap:wrap;gap:6px;min-height:30px}
.chips li{background:var(--tile);border-radius:10px;padding:4px 9px;font-size:.88rem;font-variant-numeric:tabular-nums}
.chips li.bad{background:#7a2b1f;color:#fff}
.chips li.on{background:var(--neon-lime);color:var(--on-neon)}
.chips .none{background:transparent;color:var(--card-ink-soft);padding-left:0}
.log{list-style:none;padding:0;margin:6px 0 10px;display:flex;flex-wrap:wrap;gap:6px}
.log li{background:var(--tile);border-radius:10px;padding:4px 9px;font-size:.88rem}
.big-key{background:var(--tile);border-radius:18px;padding:18px;display:grid;place-items:center;min-height:180px;text-align:center}
.big-key b{font-size:clamp(2.6rem,9vw,5rem);font-weight:800;line-height:1;color:var(--t-cyan);text-shadow:0 0 4px rgba(214,246,251,.25);word-break:break-all}
.big-key.down{background:var(--neon-lime)}
.big-key.down b,.big-key.down span{color:var(--on-neon)!important;text-shadow:none}
.big-key span{display:block;margin-top:8px;color:var(--card-ink-soft);font-weight:700}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:12px 0;padding:0;list-style:none}
.kv li{background:var(--tile);border-radius:12px;padding:8px 12px}
.kv li span{display:block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--card-ink-soft)}
.kv li code{font:700 1.05rem/1.3 ui-monospace,Menlo,Consolas,monospace;color:var(--t-lime);word-break:break-all}
.combos{list-style:none;padding:0;margin:8px 0 12px;display:grid;gap:8px}
.combos li{background:var(--tile);border-radius:14px;padding:10px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.combos li .ck{background:#5f6a7d;border:1px solid #8d97a8;border-radius:8px;padding:3px 9px;font-weight:700}
.combos li .ck.on{background:var(--neon-lime);color:var(--on-neon);border-color:var(--neon-lime)}
.combos li .cs{margin-left:auto;font-weight:800;color:var(--card-ink-soft)}
.combos li.pass .cs{color:var(--t-lime)}
.combos li.pass{outline:2px solid var(--neon-lime);outline-offset:-2px}
.lpad{position:relative;user-select:none;-webkit-user-select:none;background:var(--tile);border:2px dashed var(--field-line);border-radius:18px;min-height:160px;display:flex;align-items:center;justify-content:center;padding:16px;outline:none}
.lpad.lit{background:var(--neon-lime);border-color:var(--neon-lime)}
.lpad.lit .pad-label{color:var(--on-neon)}
.pad-label{font-weight:700;color:var(--card-ink-soft);text-align:center;max-width:22em}
.pbar{height:16px;border-radius:9px;background:var(--tile);overflow:hidden;margin:6px 0 4px}
.pbar i{display:block;height:100%;width:0;background:var(--neon-lime);transition:width .15s}
.result{margin-top:16px;padding:16px;border-radius:16px;background:var(--tile);border:1px solid var(--t-lime)}
.res-title{color:var(--t-lime)!important;font-size:1.3rem;margin:0 0 8px}
.res-lines{margin:0 0 10px;padding-left:1.2em}
.report{white-space:pre-wrap;font:600 .92rem/1.45 ui-monospace,Menlo,Consolas,monospace;background:#3b4250;border-radius:12px;padding:12px;margin:8px 0;max-height:320px;overflow:auto;color:#f4f7fb}
.table-wrap{background:var(--card-bg);border-radius:var(--radius);padding:12px;overflow-x:auto;margin:0 0 1em}
.table-wrap caption{text-align:left;font-weight:700;padding:4px 6px 8px;color:var(--card-ink)}
.table-wrap table{width:100%;border-collapse:collapse}
.table-wrap th,.table-wrap td{padding:8px 10px;border-bottom:1px solid var(--card-rule);text-align:left;color:var(--card-ink)}
.tool .table-wrap{background:var(--tile);padding:6px}
.steps li{margin-bottom:.4em}
.updated{margin-top:10px}
kbd{font:700 .9em ui-monospace,Menlo,Consolas,monospace;background:#eef1f5;border:1px solid #c9d0db;border-bottom-width:2px;border-radius:5px;padding:0 .35em;color:#141a26}
.card kbd{background:#444c5b;border-color:#8d97a8;color:#f4f7fb}
@media (max-width:640px){.big-key{min-height:140px}.kbwrap{padding:6px}.stat b{font-size:1.25rem}}