/**
 * public/css/tools/keyboard-latency-test.css
 * Keyboard Latency Test — retro keycap + CRT badge + LCD chart
 */
.klt-top {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}

.klt-test-area {
  flex: 1 1 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 292px;
  overflow: hidden;
  cursor: pointer;
  background: rgb(248, 247, 244);
  border: 2px solid rgb(132, 157, 84);
  border-radius: 8px;
  padding: 18px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.65), 4px 4px 0 rgba(132,157,84,.18);
}

.klt-test-area:focus {
  outline: 3px solid rgba(141, 179, 79, .22);
  outline-offset: 3px;
}

.klt-key-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.klt-keycap {
  position: relative;
  display: inline-block;
  width: 160px;
  height: 160px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(180deg, #f0f0f0, #e8e8e8);
  box-shadow:
    inset -12px 0 12px rgba(0,0,0,.05),
    inset 0 -12px 12px rgba(0,0,0,.08),
    0 0 0 2px rgba(0,0,0,.15),
    14px 28px 35px rgba(0,0,0,.15);
  overflow: visible;
  transition: transform .1s ease-in-out, box-shadow .1s ease-in;
  user-select: none;
  cursor: pointer;
}

.klt-keycap::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  bottom: 22px;
  right: 18px;
  background: linear-gradient(90deg, #e0e0e0, #fafafa);
  border-radius: 12px;
  box-shadow: -14px -14px 14px rgba(255,255,255,.5), 14px 8px 14px rgba(0,0,0,.05);
  border-left: 1px solid rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.28);
  border-top: 1px solid rgba(255,255,255,.6);
}

.klt-letter {
  position: absolute;
  left: 20px;
  top: 20px;
  color: #333;
  font-size: 28px;
  font-weight: 600;
  font-family: "IBM Plex Mono", monospace;
  transition: transform .1s;
}

.klt-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: -1;
}

.klt-spark span {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #016c3c;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 16px #00ffaa, 0 0 30px rgba(0,255,170,.5);
}

.klt-spark.fire span { animation: klt-spark-explosion .6s ease-out forwards; }

@keyframes klt-spark-explosion {
  0% { transform: translate(var(--ox), var(--oy)) scale(var(--sc)); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
}

.klt-spark span:nth-child(1){--ox:360px;--oy:-40px;--sx:420px;--sy:-50px;--sc:.6}.klt-spark span:nth-child(2){--ox:200px;--oy:120px;--sx:350px;--sy:180px;--sc:1.1}
.klt-spark span:nth-child(3){--ox:-250px;--oy:60px;--sx:-280px;--sy:240px;--sc:.4}.klt-spark span:nth-child(4){--ox:440px;--oy:-200px;--sx:400px;--sy:-220px;--sc:.8}
.klt-spark span:nth-child(5){--ox:-240px;--oy:-120px;--sx:-440px;--sy:-80px;--sc:1.2}.klt-spark span:nth-child(6){--ox:200px;--oy:90px;--sx:150px;--sy:380px;--sc:.5}
.klt-spark span:nth-child(7){--ox:280px;--oy:-320px;--sx:300px;--sy:-340px;--sc:.9}.klt-spark span:nth-child(8){--ox:-320px;--oy:-160px;--sx:-320px;--sy:-300px;--sc:.3}
.klt-spark span:nth-child(9){--ox:120px;--oy:-400px;--sx:80px;--sy:-420px;--sc:.7}.klt-spark span:nth-child(10){--ox:-220px;--oy:180px;--sx:-390px;--sy:160px;--sc:1}
.klt-spark span:nth-child(11){--ox:480px;--oy:80px;--sx:440px;--sy:100px;--sc:.6}.klt-spark span:nth-child(12){--ox:-250px;--oy:-220px;--sx:-170px;--sy:-370px;--sc:.4}
.klt-spark span:nth-child(13){--ox:260px;--oy:300px;--sx:260px;--sy:340px;--sc:1.2}.klt-spark span:nth-child(14){--ox:-380px;--oy:-100px;--sx:-420px;--sy:-190px;--sc:.5}
.klt-spark span:nth-child(15){--ox:180px;--oy:-140px;--sx:370px;--sy:-280px;--sc:.8}.klt-spark span:nth-child(16){--ox:-300px;--oy:460px;--sx:-30px;--sy:430px;--sc:.3}
.klt-spark span:nth-child(17){--ox:-400px;--oy:-240px;--sx:-380px;--sy:-260px;--sc:.9}.klt-spark span:nth-child(18){--ox:220px;--oy:-360px;--sx:200px;--sy:-390px;--sc:1.1}
.klt-spark span:nth-child(19){--ox:-140px;--oy:340px;--sx:-250px;--sy:350px;--sc:.6}.klt-spark span:nth-child(20){--ox:420px;--oy:140px;--sx:430px;--sy:180px;--sc:.4}
.klt-spark span:nth-child(21){--ox:150px;--oy:420px;--sx:50px;--sy:410px;--sc:.7}.klt-spark span:nth-child(22){--ox:-280px;--oy:60px;--sx:-410px;--sy:50px;--sc:1}
.klt-spark span:nth-child(23){--ox:340px;--oy:260px;--sx:320px;--sy:310px;--sc:.5}.klt-spark span:nth-child(24){--ox:-120px;--oy:-460px;--sx:-100px;--sy:-430px;--sc:.8}

.klt-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #959292;
  margin-top: 16px;
}

.klt-sub,
.klt-key-status {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: #959292;
  margin-top: 6px;
}

.klt-key-status {
  color: #aaa;
  margin-top: 3px;
}

.klt-key-status strong { color: rgb(105, 130, 63); }

.klt-right {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.klt-scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  margin: -2px 0 16px;
}

.klt-score-card {
  position: relative;
  overflow: hidden;
  border: 2px solid rgb(132,157,84);
  border-radius: 8px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgb(251,250,246), rgb(239,237,229));
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.72), 4px 4px 0 rgba(132,157,84,.14);
}

.klt-score-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(132,157,84,.045) 0, rgba(132,157,84,.045) 1px, transparent 1px, transparent 7px);
}

.klt-score-title {
  position: relative;
  z-index: 1;
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #2b2f36;
  margin-bottom: 8px;
}

.klt-score-card strong {
  position: relative;
  z-index: 1;
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 18px;
  color: rgb(105,130,63);
  letter-spacing: .02em;
}

.klt-vs {
  align-self: center;
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 2px solid rgb(132,157,84);
  background: rgb(142,168,92);
  color: #fff;
  font-family: "Rajdhani", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .08em;
  box-shadow: 0 7px 18px rgba(132,157,84,.22), inset 1px 1px 0 rgba(255,255,255,.25);
}


.klt-crt-monitor { display: flex; flex-direction: column; width: 100%; }
.klt-monitor-body {
  position: relative;
  background: linear-gradient(160deg,#d8d3c6 0%,#e8e4da 15%,#f0ece2 30%,#ebe7dd 55%,#ddd9ce 75%,#d1ccc0);
  border-radius: 14px 14px 8px 8px;
  padding: 10px 10px 8px;
  box-shadow: inset 2px 2px 5px rgba(255,255,255,.45), inset -2px -2px 6px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.18);
}
.klt-outer-bezel {
  background: linear-gradient(145deg,#bfbab0 0%,#cfcac0 25%,#d6d1c6 60%,#c5c0b5);
  border-radius: 11px 11px 6px 6px;
  padding: 4px;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,.16), inset -1px -1px 2px rgba(255,255,255,.35);
}
.klt-inner-bezel {
  background: linear-gradient(155deg,#a8a39a 0%,#b8b3a8 20%,#c2bdb2 50%,#b5b0a5 80%,#a9a49b);
  border-radius: 8px 8px 5px 5px;
  padding: 12px 12px 10px;
  box-shadow: inset 3px 3px 10px rgba(0,0,0,.32), inset -1px -1px 4px rgba(255,255,255,.15);
}
.klt-screen-glass {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 5px 5px 2px 2px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 5px 5px 20px rgba(0,0,0,.65), inset -2px -2px 8px rgba(100,180,140,.06), 0 1px 0 rgba(255,255,255,.08);
}
.klt-crt-display {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #4c6e3f;
  background-image: radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.4) 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
}
.klt-crt-display::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,.4) 50%), linear-gradient(90deg, rgba(160,224,160,.07), rgba(0,0,0,.3));
  background-size: 100% 3px, 2px 100%;
}
.klt-screen-text {
  position: relative;
  z-index: 5;
  font-family: 'Courier New', 'IBM Plex Mono', monospace;
  color: #a0e0a0;
  text-shadow: 0 0 6px rgba(160,224,160,.8), 0 0 15px rgba(160,224,160,.3);
}
.klt-rank-badge { text-align: center; }
.klt-rating-emoji { display: block; font-size: 4.5rem; line-height: 1; margin-bottom: 6px; filter: drop-shadow(0 0 10px rgba(255,215,0,.7)); }
.klt-rating-word { display: block; font-size: 2rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #b8e8b8; }
.klt-control-panel {
  position: relative;
  background: linear-gradient(162deg,#dbd6ca 0%,#eae5da 18%,#f2ede3 38%,#ece8dd 62%,#e0dbcf 82%,#d4cfc3);
  border-radius: 0 0 10px 10px;
  padding: 10px 18px 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  box-shadow: inset 2px 2px 5px rgba(255,255,255,.42), inset -2px -2px 6px rgba(0,0,0,.07), 0 3px 10px rgba(0,0,0,.13);
}
.klt-vent-grille { display: flex; gap: 3px; }
.klt-slat { width: 4px; height: 26px; border-radius: 1.5px; background: linear-gradient(90deg,#6a655c 0%,#8a856e 25%,#a8a38a 50%,#ccc7ae 75%,#ded9c6); box-shadow: inset 1px 1px 2px rgba(0,0,0,.18), inset -1px 0 1px rgba(255,255,255,.35); }
.klt-brand-area { display: flex; align-items: center; }
.klt-brand-logo { width: 40px; height: 26px; background: #fff; border: 1.5px solid #aaa598; border-radius: 3px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 -1px 0 rgba(0,0,0,.04); padding: 2px 0; box-sizing: border-box; margin-right: 10px; }
.klt-brand-logo span { font-weight: 900; font-size: 11px; letter-spacing: 2px; color: #333; }
.klt-brand-text { font-size: 5px; line-height: 1.35; color: #777268; letter-spacing: .3px; }
.klt-controls-group { display: flex; align-items: center; gap: 8px; }
.klt-ctrl-btn { width: 22px; height: 22px; border-radius: 3px; border: 1.5px solid #a09b90; background: linear-gradient(165deg,#eae5da 0%,#ddd8cd 45%,#d1ccc0); box-shadow: 0 2px 4px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; }
.klt-ctrl-icon-contrast { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid #6d6860; margin-top: -2px; }
.klt-ctrl-icon-brightness { width: 10px; height: 10px; border: 2px solid #6d6860; border-radius: 50%; }
.klt-ctrl-icon-power { width: 12px; height: 12px; border: 2px solid #6d6860; border-radius: 50%; position: relative; }
.klt-ctrl-icon-power::after { content: ""; position: absolute; width: 2px; height: 7px; background: #6d6860; top: -3px; left: 50%; transform: translateX(-50%); border-radius: 1px; }

.klt-overall-row { display: flex; }
.klt-overall-reset { width: 100%; padding: 10px 18px; }
.klt-keyboard-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.klt-keyboard-control { border: 1px solid rgba(132,157,84,.45); border-radius: 8px; padding: 10px; background: rgba(248,247,244,.74); box-shadow: inset 1px 1px 0 rgba(255,255,255,.45); transition: border-color .15s, box-shadow .15s, background .15s; }
.klt-select-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 14px;border:2px solid rgb(132,157,84);border-radius:8px;background:linear-gradient(145deg,#eaf4d0,#c8da94);font-family:"Rajdhani",sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#1f232a;cursor:pointer;transition:all .12s ease;box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),0 4px 8px rgba(132,157,84,.18);}
.klt-select-btn:hover{background:linear-gradient(145deg,#d8ecb0,#b8ce7e);border-color:#6a7f3a;transform:translateY(-1px);}
.klt-select-btn:active{transform:translateY(1px);box-shadow:inset 2px 2px 6px rgba(82,87,99,.18),inset -1px -1px 3px rgba(248,246,242,.4);}
.klt-keyboard-control.is-active { border-color: rgb(132,157,84); background: rgba(142,168,92,.12); box-shadow: inset 1px 1px 0 rgba(255,255,255,.55), 0 0 0 3px rgba(132,157,84,.12); }
.klt-keyboard-control-title { font-family: "Rajdhani", sans-serif; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #2b2f36; margin-bottom: 8px; }
.klt-keyboard-control-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.klt-keyboard-control .klt-btn { width: 100%; padding: 8px 10px; }
.klt-sample-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; font-family: "IBM Plex Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #959292; }
.klt-sample-field .core-input { min-width: 0; width: 100%; }

.klt-stats-panel { background: rgb(248,247,244); border: 2px solid rgb(132,157,84); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.klt-section-title { font-family: "Rajdhani", sans-serif; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #2b2f36; text-align: center; }
.klt-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.klt-stat { background: rgb(142,168,92); border: 1px solid rgb(132,157,84); border-radius: 6px; padding: 10px 12px; min-width: 0; }
.klt-stat-label { font-family: "IBM Plex Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.8); margin-bottom: 6px; }
.klt-stat-val { font-family: "Rajdhani", sans-serif; font-size: 26px; font-weight: 700; line-height: 1; color: #fff; word-break: break-word; }
.klt-stat-val.accent { color: #fff; }
.klt-divider { height: 1px; background: rgb(132,157,84); opacity: .25; margin: 0 2px; }

.klt-bottom { display: flex; gap: 16px; }
.klt-lcd-screen {
  --lcd-bg-start: rgba(190,210,118,.92);
  --lcd-bg-mid: rgba(137,161,83,.86);
  --lcd-bg-end: rgba(55,94,46,.94);
  --lcd-bg-deep: rgba(38,38,38,.98);
  --lcd-text: rgba(232,246,191,.95);
  --lcd-text-dim: rgba(230,245,190,.85);
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(190,210,118,.18);
  border-radius: 12px;
  padding: 16px;
  background: radial-gradient(circle at center, var(--lcd-bg-start) 0%, var(--lcd-bg-mid) 28%, var(--lcd-bg-end) 62%, var(--lcd-bg-deep) 100%);
  box-shadow: inset 0 0 0 2px rgba(38,38,38,.14), inset 0 0 32px rgba(190,210,118,.12);
}
.klt-lcd-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  opacity: .88;
  background: repeating-linear-gradient(0deg, rgba(17,25,123,.055) 0, rgba(17,25,123,.055) 1px, transparent 1px, transparent 8px), repeating-linear-gradient(90deg, rgba(190,210,118,.05) 0, rgba(190,210,118,.05) 1px, transparent 1px, transparent 8px);
}
.klt-hz { flex: 0 0 120px; min-width: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.klt-hz-label-top { position: relative; z-index: 1; font-family: 'Rajdhani', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--lcd-text-dim); margin-bottom: 8px; }
.klt-hz-val { position: relative; z-index: 1; font-family: "Rajdhani", sans-serif; font-size: 38px; line-height: 1; color: var(--lcd-text); text-shadow: 0 0 6px rgba(190,210,118,.5); }
.klt-hz-unit { position: relative; z-index: 1; font-family: "IBM Plex Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--lcd-text-dim); margin-top: 4px; }
.klt-hz-formula { position: relative; z-index: 1; font-family: "IBM Plex Mono", monospace; font-size: 9px; color: rgba(230,245,190,.45); margin-top: 6px; }
.klt-chart-wrap { flex: 1 1 auto; }
.klt-chart-header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.klt-chart-title { font-family: 'Rajdhani', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--lcd-text); }
.klt-chart-legend { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
.klt-chart-legend span { display: inline-flex; align-items: center; gap: 8px; font-family: "IBM Plex Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--lcd-text-dim); }
.klt-legend-line { display: inline-block; width: 24px; height: 2px; border-radius: 999px; }
.klt-legend-line.latency { background: linear-gradient(90deg,#cce67a,#8db34f); box-shadow: 0 0 4px rgba(204,230,122,.6); }
.klt-legend-line.avg { background: linear-gradient(90deg,#f6dc6e,#d9ab2d); box-shadow: 0 0 4px rgba(246,220,110,.4); }
.klt-chart-shell { position: relative; z-index: 1; width: 100%; height: 280px; }
.klt-chart-shell canvas { width: 100%; height: 100%; }
.klt-lcd-footnote { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-family: "IBM Plex Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--lcd-text-dim); }
.klt-lcd-footnote strong { color: var(--lcd-text); text-shadow: 0 0 4px rgba(190,210,118,.42); }
.klt-disclaimer { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: #959292; margin-top: 12px; text-align: right; }

[data-theme="dark"] .klt-test-area,
[data-theme="dark"] .klt-stats-panel { background: #1a1e1a; border-color: #4a5e4a; box-shadow: 4px 4px 10px rgba(0,0,0,.35), inset 1px 1px 0 rgba(255,255,255,.04); }
[data-theme="dark"] .klt-keycap { background: linear-gradient(180deg,#2a2e2a,#1e241e); box-shadow: inset -12px 0 12px rgba(0,0,0,.18), inset 0 -12px 12px rgba(0,0,0,.22), 0 0 0 2px rgba(120,140,95,.35), 14px 28px 35px rgba(0,0,0,.32); }
[data-theme="dark"] .klt-keycap::before { background: linear-gradient(90deg,#202720,#313b31); border-color: rgba(255,255,255,.05); }
[data-theme="dark"] .klt-letter { color: #8a9a6a; }
[data-theme="dark"] .klt-section-title { color: #d9dfcc; }
[data-theme="dark"] .klt-key-status strong { color: #b9d176; }
[data-theme="dark"] .klt-monitor-body { background: linear-gradient(160deg,#2a2a26,#36352f 34%,#24241f); }
[data-theme="dark"] .klt-control-panel { background: linear-gradient(162deg,#2a2925,#37342e 48%,#24231f); }
[data-theme="dark"] .klt-brand-logo { background: #ddd8ca; }
[data-theme="dark"] .klt-score-card { background: linear-gradient(180deg,#20261f,#171c17); border-color: #4a5e4a; box-shadow: 4px 4px 10px rgba(0,0,0,.35), inset 1px 1px 0 rgba(255,255,255,.04); }
[data-theme="dark"] .klt-score-title { color: #d9dfcc; }
[data-theme="dark"] .klt-keyboard-control { background: rgba(26,30,26,.74); border-color: #4a5e4a; box-shadow: inset 1px 1px 0 rgba(255,255,255,.04); }
[data-theme="dark"] .klt-keyboard-control.is-active { border-color: #63763f; background: rgba(99,118,63,.18); box-shadow: 0 0 0 3px rgba(99,118,63,.16); }
[data-theme="dark"] .klt-keyboard-control-title { color: #d9dfcc; }
[data-theme="dark"] .klt-sample-field { color: #aab29f; }
[data-theme="dark"] .klt-btn-secondary { color: #b9d176; border-color: #63763f; }
[data-theme="dark"] .core-input { background: #1f241f; color: #d9dfcc; border-color: #4a5e4a; }

@media (max-width: 980px) {
  .klt-top,
  .klt-bottom { flex-direction: column; }
  .klt-right { flex: 1 1 auto; }
  .klt-hz { flex: 0 0 auto; }
}

@media (max-width: 768px) {
  .klt-test-area { min-height: 230px; }
  .klt-keyboard-controls { grid-template-columns: 1fr; }
  .klt-scoreboard { grid-template-columns: 1fr; }
  .klt-vs { justify-self: center; width: 58px; }
  .klt-keycap { width: 120px; height: 120px; border-radius: 10px; }
  .klt-letter { font-size: 22px; left: 15px; top: 15px; }
  .klt-rating-emoji { font-size: 3rem; }
  .klt-rating-word { font-size: 1.4rem; }
  .klt-chart-shell { height: 220px; }
  .klt-lcd-footnote { flex-direction: column; align-items: flex-start; gap: 5px; }
  .klt-stat-val { font-size: 22px; }
}