:root{color-scheme:dark;--bg:#0d1013;--panel:#0d1013;--text:#f4f7fc;--muted:#b5c4d7;--cyan:#42d6e8;--green:#8ee7ba}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0%,#0d1013,transparent 55%),var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}a{color:var(--cyan)}header,main,footer{max-width:1160px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #ffffff18}.brand{text-decoration:none;color:var(--text);max-width:50%}.brand img{display:block;max-width:100%;height:auto}.brand small{font-size:10px;letter-spacing:2px;color:var(--muted)}nav{display:flex;gap:24px}nav a{text-decoration:none}.intro{padding:38px 0 28px;max-width:850px}.eyebrow{color:var(--cyan);font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:750}h1{font-size:clamp(32px,5vw,54px);line-height:1.15;letter-spacing:-1.7px;margin:14px 0}h2{font-size:24px;line-height:1.3;margin:0 0 10px}p{color:var(--muted);margin:8px 0 16px}.mobile-note{font-size:14px}.panel{padding:26px;background:linear-gradient(140deg,#0d1013,var(--panel));border:1px solid #ffffff25;border-radius:20px;margin-bottom:26px}.section-head{display:flex;justify-content:space-between;align-items:start;gap:20px;flex-wrap:wrap}.section-head p{max-width:650px}.controls{display:flex;gap:10px;align-items:end;flex-wrap:wrap}label{font-size:13px;color:var(--muted)}select{display:block}button,select{background:#0d1013;color:var(--text);border:1px solid #ffffff40;padding:10px 14px;border-radius:9px;font:inherit;min-height:44px}button{cursor:pointer}button:hover{border-color:var(--cyan)}button:disabled{opacity:.5;cursor:default}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.stat{background:#0d1013;border:1px solid #ffffff15;border-radius:12px;padding:14px}.stat span{font-size:12px;color:var(--muted);display:block}.stat strong{font-size:27px;color:var(--cyan);font-variant-numeric:tabular-nums}#keyboard-area{border:1px solid #ffffff35;border-radius:12px;background:#0d1013;padding:16px}.keyboard-scroll{overflow-x:auto;padding-bottom:8px}#keyboard{min-width:880px}.key-row{display:flex;gap:5px;margin:5px 0}.key{flex:1;min-width:0;height:45px;border-radius:6px;background:#0d1013;border:1px solid #516479;color:#eff6ff;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1.2;white-space:pre-line;text-align:center}.key.tested{background:#163e36;border-color:var(--green);color:var(--green)}.key.held{background:var(--cyan);color:#0d1013;border-color:#e8ffff;box-shadow:0 0 13px #42d6e860}.numpad{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-width:270px;margin-top:14px}.legend,.readout{display:flex;gap:12px 24px;flex-wrap:wrap;margin:14px 0;font-size:13px}.tested-color{color:var(--green)}.held-color{color:var(--cyan)}.readout b{color:#fff;overflow-wrap:anywhere}.hint{font-size:13px;margin-bottom:0}#key-status{font-size:13px;min-height:21px}.mouse-buttons{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:20px 0}.mouse-button{padding:10px;text-align:center;border-radius:10px;background:#0d1013;border:1px solid #516479}.mouse-button span{font-size:13px;display:block}.mouse-button strong{font-size:22px}.mouse-button.held{background:var(--cyan);color:#0d1013}#mouse-area{position:relative;overflow:hidden;height:240px;border:1px dashed #42d6e890;background:linear-gradient(#42d6e809 1px,transparent 1px),linear-gradient(90deg,#42d6e809 1px,transparent 1px),#0d1013;background-size:24px 24px;border-radius:12px;user-select:none;touch-action:pan-y}.area-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);pointer-events:none}.crosshair{display:none;position:absolute;width:18px;height:18px;border:2px solid var(--cyan);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.faq{margin:40px 0}details{border-bottom:1px solid #ffffff25;padding:16px 0}summary{cursor:pointer;font-weight:650}details p{max-width:900px;padding-top:10px}.related{margin:35px 0}.related>div{display:flex;gap:14px;flex-wrap:wrap}.related a{padding:12px 18px;border:1px solid #ffffff30;border-radius:10px;text-decoration:none}footer{border-top:1px solid #ffffff18;color:var(--muted);font-size:13px}.skip{position:absolute;left:16px;top:-80px;background:var(--bg);padding:12px;z-index:20}.skip:focus{top:10px}.ad-slot{min-height:90px;margin:40px 0}.panel:fullscreen{overflow:auto;border-radius:0;background:var(--bg);padding:30px}.panel:fullscreen #keyboard-area{margin-top:40px}@media(max-width:700px){header,main,footer{padding:18px}nav{gap:12px;font-size:13px}.panel{padding:18px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.mouse-buttons{gap:5px}.mouse-button{padding:8px 2px}.mouse-button span{font-size:11px}.intro{padding-top:26px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.brand{position:relative;padding-left:52px}.brand img.shield{position:absolute;left:0;top:0;width:42px;height:48px;object-fit:contain}@media(max-width:450px){.brand{padding-left:38px}.brand img.shield{width:30px;height:38px}.brand small{font-size:7px;letter-spacing:1px}}

.brand{position:relative;padding-left:52px}.brand img.shield{position:absolute;left:0;top:0;width:42px;height:48px;object-fit:contain}@media(max-width:450px){.brand{padding-left:38px}.brand img.shield{width:30px;height:38px}.brand small{font-size:7px;letter-spacing:1px}}