.home-main { overflow-x: clip; }
.tool-shell { margin: 8px auto 34px; padding: clamp(14px, 2vw, 24px); }
.tool-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.tool-title h2 { margin:0; font-size:clamp(1.3rem,2.6vw,1.8rem); line-height:1.2; letter-spacing:-.025em; }
.tool-title p { margin:6px 0 0; color:var(--muted); font-size:.93rem; }
.live-badge { display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; padding:7px 10px; border-radius:999px; background:#ecfdf3; color:#067647; font-size:.78rem; font-weight:800; }
.live-badge::before { width:8px; height:8px; border-radius:50%; background:#12b76a; content:""; box-shadow:0 0 0 4px rgba(18,183,106,.12); }
.control-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; padding:12px; border:1px solid var(--border); border-radius:14px; background:#f9fafb; }
.control-group { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.control-label { margin-right:2px; color:#475467; font-size:.78rem; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
.segment-button,.theme-button,.start-button,.reset-button { min-height:40px; border:1px solid var(--border); border-radius:10px; background:#fff; color:#344054; font-size:.88rem; font-weight:750; cursor:pointer; }
.segment-button,.theme-button { padding:8px 12px; }
.segment-button:hover,.theme-button:hover { border-color:#f0b6ad; }
.segment-button[aria-pressed="true"],.theme-button[aria-pressed="true"] { border-color:var(--brand); background:#fff1ec; color:#9f2f24; }
.test-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.start-button,.reset-button { min-width:112px; padding:9px 16px; }
.start-button { border-color:var(--brand); background:var(--brand); color:#fff; box-shadow:0 5px 12px rgba(217,65,47,.22); }
.start-button:hover { filter:brightness(.96); transform:translateY(-1px); }
.start-button:focus-visible { outline:3px solid rgba(217,65,47,.22); outline-offset:2px; }
.start-button[aria-pressed="true"] { border-color:#067647; background:#12b76a; box-shadow:0 5px 12px rgba(18,183,106,.22); }
.reset-button { border-color:#fecaca; background:#fff7f7; color:#b42318; }
.reset-button:hover { background:#fff0f0; }

/* The stage never scrolls horizontally. JS measures the natural keyboard and scales it to fit. */
.keyboard-fit { position:relative; width:100%; height:340px; overflow:hidden; border-radius:18px; }
.keyboard-board {
  --unit: 50px;
  --gap: 6px;
  --row-gap: 8px;
  --key-h: 48px;
  --key-bg:#f8fafc; --key-text:#344054; --key-border:#d0d5dd; --key-shadow:#98a2b3;
  --key-special-bg:#e4e7ec; --key-special-text:#344054; --board-bg:#202938; --board-border:#111827;
  --tested-bg:#d1fadf; --tested-text:#05603a; --tested-border:#6ce9a6;
  --held-bg:#f97316; --held-text:#fff; --held-border:#ea580c;
  position:absolute; top:0; left:50%; width:max-content; max-width:none; padding:14px;
  border:1px solid var(--board-border); border-radius:18px; background:var(--board-bg);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.24),0 16px 26px rgba(16,24,40,.16);
  transform-origin:top center; will-change:transform;
}
.keyboard-board[data-theme="navy"] {
  --key-bg:#e8ecff; --key-text:#18225b; --key-border:#7883c7; --key-shadow:#48539d;
  --key-special-bg:#c8cff8; --key-special-text:#18225b; --board-bg:#20265f; --board-border:#171b46;
  --tested-bg:#b9f4d7; --tested-text:#04563a; --tested-border:#55d89a;
  --held-bg:#ff8a4c; --held-text:#281106; --held-border:#ff6a1f;
}
.keyboard-section-row { display:flex; align-items:flex-start; gap:10px; }
.keyboard-main,.nav-stack { display:grid; gap:var(--row-gap); }
.keyboard-row { display:flex; gap:var(--gap); min-height:var(--key-h); }
.keyboard-row.function-row { margin-bottom:0; }
.key {
  width:calc(var(--unit) * var(--w,1)); min-width:calc(var(--unit) * var(--w,1)); height:var(--key-h);
  display:inline-flex; align-items:center; justify-content:center; padding:0 5px; border:1px solid var(--key-border);
  border-radius:8px; background:var(--key-bg); color:var(--key-text); font-size:12px; font-weight:780; line-height:1;
  text-align:center; box-shadow:inset 0 -3px 0 var(--key-shadow); user-select:none;
  transition:transform .06s ease,background-color .08s ease,color .08s ease;
}
.key.special { background:var(--key-special-bg); color:var(--key-special-text); }
.key.is-tested { border-color:var(--tested-border); background:var(--tested-bg); color:var(--tested-text); box-shadow:inset 0 -3px 0 var(--tested-border); }
.key.is-held { transform:translateY(2px); border-color:var(--held-border); background:var(--held-bg); color:var(--held-text); box-shadow:inset 0 -1px 0 var(--held-border); }
.key-gap { width:calc(var(--unit) * var(--w,.5)); min-width:calc(var(--unit) * var(--w,.5)); }

/* Full / TKL navigation block: function keys at the top, navigation and arrows below. */
.nav-stack .keyboard-row { width:calc(var(--unit) * 3 + var(--gap) * 2); }
.nav-stack .key { width:var(--unit); min-width:var(--unit); }
.nav-stack .nav-empty { width:var(--unit); min-width:var(--unit); height:var(--key-h); }

/* Full-size numpad with explicit positioning so +, Enter and 0 always align correctly. */
.numpad-grid {
  display:grid; grid-template-columns:repeat(4,var(--unit)); grid-template-rows:repeat(6,var(--key-h));
  gap:var(--row-gap) var(--gap); width:calc(var(--unit) * 4 + var(--gap) * 3);
}
.numpad-grid .key { width:var(--unit); min-width:var(--unit); }
.numpad-grid .np-spacer { grid-column:1 / -1; grid-row:1; }
.numpad-grid [data-code="NumLock"] { grid-column:1; grid-row:2; }
.numpad-grid [data-code="NumpadDivide"] { grid-column:2; grid-row:2; }
.numpad-grid [data-code="NumpadMultiply"] { grid-column:3; grid-row:2; }
.numpad-grid [data-code="NumpadSubtract"] { grid-column:4; grid-row:2; }
.numpad-grid [data-code="Numpad7"] { grid-column:1; grid-row:3; }
.numpad-grid [data-code="Numpad8"] { grid-column:2; grid-row:3; }
.numpad-grid [data-code="Numpad9"] { grid-column:3; grid-row:3; }
.numpad-grid [data-code="NumpadAdd"] { grid-column:4; grid-row:3 / span 2; height:calc(var(--key-h) * 2 + var(--row-gap)); }
.numpad-grid [data-code="Numpad4"] { grid-column:1; grid-row:4; }
.numpad-grid [data-code="Numpad5"] { grid-column:2; grid-row:4; }
.numpad-grid [data-code="Numpad6"] { grid-column:3; grid-row:4; }
.numpad-grid [data-code="Numpad1"] { grid-column:1; grid-row:5; }
.numpad-grid [data-code="Numpad2"] { grid-column:2; grid-row:5; }
.numpad-grid [data-code="Numpad3"] { grid-column:3; grid-row:5; }
.numpad-grid [data-code="NumpadEnter"] { grid-column:4; grid-row:5 / span 2; height:calc(var(--key-h) * 2 + var(--row-gap)); }
.numpad-grid [data-code="Numpad0"] { grid-column:1 / span 2; grid-row:6; width:calc(var(--unit) * 2 + var(--gap)); }
.numpad-grid [data-code="NumpadDecimal"] { grid-column:3; grid-row:6; }

/* 75% has a true compact arrangement; navigation keys and arrows are integrated into the main rows. */
.layout-75 .keyboard-section-row { display:block; }
.layout-75 .keyboard-main { gap:6px; }
.layout-75 .keyboard-row { gap:5px; }
.layout-75 .key { font-size:11.5px; }

.keyboard-help { margin:12px 2px 0; color:var(--muted); font-size:.82rem; }
.status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }
.status-card { min-width:0; padding:13px 14px; border:1px solid var(--border); border-radius:13px; background:#fff; }
.status-card span { display:block; color:var(--muted); font-size:.76rem; font-weight:750; text-transform:uppercase; letter-spacing:.035em; }
.status-card strong { display:block; min-width:0; margin-top:3px; overflow:hidden; color:#101828; font-size:clamp(1.1rem,2.4vw,1.55rem); line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.privacy-note { display:flex; gap:10px; margin-top:14px; padding:12px 14px; border:1px solid #d1fadf; border-radius:12px; background:#ecfdf3; color:#05603a; font-size:.86rem; }
.privacy-note strong { color:#045c3b; }
.quick-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:24px 0 8px; }
.step-card { padding:18px; border:1px solid var(--border); border-radius:15px; background:#fff; }
.step-number { display:inline-grid; place-items:center; width:30px; height:30px; margin-bottom:10px; border-radius:9px; background:#fff1ec; color:#9f2f24; font-weight:850; }
.step-card h3 { margin:0 0 6px; font-size:1rem; }
.step-card p { margin:0; color:var(--muted); font-size:.9rem; }
.info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0 26px; }
.info-card { padding:18px; border:1px solid var(--border); border-radius:15px; background:#f9fafb; }
.info-card h3 { margin:0 0 7px; font-size:1.04rem; }
.info-card p { margin:0; color:var(--muted); font-size:.92rem; }
.faq-list { display:grid; gap:10px; margin-top:16px; }
.faq-item { border:1px solid var(--border); border-radius:14px; background:#fff; overflow:clip; }
.faq-item summary { padding:16px 18px; cursor:pointer; color:#101828; font-weight:750; }
.faq-item p { margin:0; padding:0 18px 17px; color:#475467; }
@media (max-width:900px) { .status-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .quick-steps,.info-grid{grid-template-columns:1fr;} }
@media (max-width:620px) {
  .tool-shell{padding:12px;} .tool-head{display:grid;} .live-badge{width:fit-content;} .control-bar{display:grid;} .control-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;} .control-label{grid-column:1/-1;} .segment-button,.theme-button,.start-button,.reset-button{padding-inline:7px;font-size:.78rem;} .test-actions{width:100%;margin-left:0;} .start-button,.reset-button{flex:1;min-width:0;} .status-grid{grid-template-columns:1fr 1fr;} .keyboard-board{--unit:48px;}
}