/* KEYRUSH / CYBER-BRUTALIST SKIN
   High contrast, exposed structure, hard edges and acid-lime signal colour.
   Intentional challenge defects remain seeded in the application logic/styles. */
:root{color-scheme:dark;--page:#08090a;--panel:#111313;--panel2:#0b0d0c;--text:#f3f5ec;--muted:#a0a79c;--border:#3b433b;--accent:#d6ff35;--accent-ink:#090b06;--correct:#d6ff35;--wrong:#ff5a72;--shadow:7px 7px 0 #d6ff35;--grid:rgba(214,255,53,.055)}
*{box-sizing:border-box}html{background:var(--page)}body{margin:0;min-height:100vh;background-color:var(--page);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;color:var(--text);font-family:Arial,Helvetica,sans-serif;display:flex;align-items:center;justify-content:center;padding:34px 20px}body:before{content:"TKM FOSS // COMMUNITY BUILD";position:fixed;top:14px;left:20px;color:var(--accent);font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em}.container{width:100%;max-width:1000px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px;border-bottom:2px solid var(--accent);padding:0 0 18px}.brand{display:flex;align-items:center;gap:15px}.brand-icon{display:grid;place-items:center;width:54px;height:54px;background:var(--accent);color:var(--accent-ink);border:2px solid var(--accent);font-size:2.2rem;font-weight:900;line-height:1}.brand h1{font-size:clamp(2rem,5vw,3.5rem);line-height:.9;letter-spacing:-.075em;text-transform:uppercase;margin:0;font-weight:950}.eyebrow{font:800 .65rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.2em;color:var(--accent);margin:8px 0 0;text-transform:uppercase}.icon-btn,.ghost-btn,.time-btn,.btn{font:700 .78rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.035em;cursor:pointer;transition:background .12s,color .12s,transform .12s}.icon-btn{border:1px solid var(--text);background:var(--panel);color:var(--text);padding:12px 14px}.icon-btn:hover,.btn:hover,.ghost-btn:hover,.time-btn:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--accent)}.subtitle{color:var(--muted);font-size:.94rem;line-height:1.6;margin:18px 0 25px;max-width:720px}.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-bottom:22px;border:1px solid var(--border)}.stat{background:var(--panel);border-right:1px solid var(--border);padding:15px 13px;min-width:0}.stat:last-child{border-right:0}.stat-label{display:block;color:var(--muted);font:700 .61rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}.stat-value{font-size:clamp(1.4rem,3vw,2.15rem);font-weight:900;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.stat:first-child{background:var(--accent);color:var(--accent-ink)}.stat:first-child .stat-label,.stat:first-child .unit{color:#333b18}.unit{font-size:.72rem;margin-left:3px;color:var(--muted)}.test-panel{background:var(--panel);border:1px solid var(--text);padding:22px;box-shadow:var(--shadow)}.panel-heading,.toolbar,.input-hint{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-heading{font:800 .67rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.live-dot{display:inline-block;width:8px;height:8px;background:var(--accent);margin-right:9px;outline:2px solid #d6ff3533;outline-offset:3px}.tiny-label{font-size:.59rem}.toolbar{margin:19px 0 16px;flex-wrap:wrap}.timer-options{display:flex;gap:0}.time-btn{border:1px solid var(--border);border-right:0;background:var(--panel2);color:var(--muted);padding:11px 14px}.time-btn:last-child{border-right:1px solid var(--border)}.time-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:900}.feature-buttons{display:flex;gap:15px 7px;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end;margin-left:19px;max-width:570px;transform:translateY(7px)}.feature-btn{font:700 .72rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.025em;cursor:pointer;background:var(--panel2);border:1px dashed var(--border);color:var(--text);padding:11px 12px;margin-top:5px}.feature-btn:nth-child(2){margin-top:19px;margin-right:13px}.feature-btn:nth-child(3){margin-top:-3px}.feature-btn:hover{border-color:var(--accent);color:var(--accent);transform:translate(-1px,-1px)}.ghost-btn{background:transparent;border:1px solid #b99aff;color:#d0b9ff;padding:11px 13px}.soon{font-size:.53rem;letter-spacing:.1em;border:1px solid #b99aff;padding:3px 5px;margin-left:5px}.passage{min-height:155px;background:var(--panel2);border:1px solid var(--border);border-left:4px solid var(--accent);padding:23px 21px;font:1.08rem/2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.015em;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);user-select:none}.char.current{background:var(--accent);border-bottom:2px solid var(--accent);color:var(--accent-ink)}.char.correct{color:var(--correct)}.char.wrong{color:var(--wrong);background:#ff5a7220;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.typing-input{display:block;width:100%;margin-top:14px;resize:vertical;min-height:94px;border:1px solid var(--border);border-radius:0;background:#080a09;color:var(--text);font:1rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;padding:15px 16px;outline:none}.typing-input::placeholder{color:#858d81}.typing-input:focus{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}.typing-input:disabled{opacity:.55}.input-hint{color:var(--muted);font: .66rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;margin:10px 2px 19px}kbd{font:inherit;border:1px solid var(--muted);padding:3px 6px;color:var(--text)}.controls{display:flex;gap:10px;flex-wrap:wrap}.btn{border:1px solid var(--text);padding:13px 17px;font-size:.76rem;font-weight:900}.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn-secondary{background:transparent;color:var(--text);border-color:var(--border)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.result{margin:0 0 16px;padding:14px;border:1px solid var(--accent);background:#d6ff3510;text-align:left;color:var(--accent);font:800 .82rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}.hidden{display:none}footer{display:flex;justify-content:space-between;gap:10px;color:#858d81;font:700 .61rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;margin:22px 2px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Intentional challenge: light mode switches surfaces but leaves text tokens inconsistent. */
body.light-mode{--page:#f0f2e9;--panel:#fff;--panel2:#e7eadf;--border:#bfc6b5;--muted:#65705e;--accent:#547600;--accent-ink:#fff;--correct:#167b50;--wrong:#c62f48;background-color:var(--page);background-image:linear-gradient(rgba(40,60,10,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(40,60,10,.06) 1px,transparent 1px)}body.light-mode .passage,body.light-mode .typing-input{color:#eaf1ff}body.light-mode .stat-value{color:#d6ff35}
@media(max-width:680px){body{padding:34px 12px 18px;align-items:flex-start}body:before{font-size:8px;left:12px;top:10px}.topbar{align-items:flex-start}.brand-icon{width:43px;height:43px;font-size:1.8rem}.brand h1{font-size:2.25rem}.icon-btn{max-width:118px;padding:10px;font-size:.65rem}.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.stat{border-bottom:1px solid var(--border);padding:12px 9px}.stat:nth-child(3){border-right:0}.stat:nth-child(4),.stat:nth-child(5){border-bottom:0}.stat-value{font-size:1.5rem}.test-panel{padding:14px;box-shadow:4px 4px 0 var(--accent)}.passage{padding:15px;font-size:.96rem}.tiny-label{display:none}.toolbar{align-items:flex-start}.timer-options{max-width:100%}.time-btn{padding:10px}.ghost-btn{padding:10px 8px;font-size:.65rem}.feature-btn{padding:10px 8px;font-size:.61rem}.feature-buttons{width:100%}.input-hint{align-items:flex-start}.controls .btn{flex:1}footer{flex-direction:column}}
.error-page{text-align:left;max-width:680px;margin:auto;padding:clamp(25px,6vw,56px)}.error-mark{font-size:3.3rem;color:var(--accent);margin-bottom:10px}.error-page h1{font-size:clamp(2rem,6vw,3.8rem);line-height:.95;letter-spacing:-.06em;text-transform:uppercase;margin:14px 0}.error-page .subtitle{margin:12px 0 20px}.error-code{display:inline-block;border:1px solid var(--wrong);padding:9px 12px;color:var(--wrong);font:800 .72rem ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}.error-copy{color:var(--muted);line-height:1.7;margin:22px 0 28px;max-width:420px}.back-link{display:inline-block;text-decoration:none}

/* Extra deliberate visual noise for the community challenge build. */
.brand{gap:17px;align-items:center}.brand-copy{position:relative}.brand h1{ text-shadow:3px 3px 0 #263016; transform:rotate(-1deg); }.brand-stamp{display:inline-block;margin-top:8px;padding:3px 6px;border:1px solid #667052;color:#a4ad8b;font:700 .52rem/1.3 ui-monospace,monospace;letter-spacing:.12em;transform:rotate(1.8deg)}
.wasd-mark{position:relative;display:grid;grid-template-columns:repeat(3,29px);grid-template-rows:repeat(2,29px);gap:4px;padding:7px 8px 21px;background:#071e22;border:2px solid #39cdb2;box-shadow:5px 5px 0 #d6ff35;transform:rotate(-2deg);flex-shrink:0}
.wasd-key{position:relative;border:2px solid #49cdb8;border-radius:5px;background:#e9fff8;color:#073d40;font:900 1rem/1 ui-monospace,monospace;box-shadow:inset -3px -3px 0 #9acdc3,3px 3px 0 #020a0b;width:29px;height:29px;padding:0;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
.key-w{grid-column:2;grid-row:1}.key-a{grid-column:1;grid-row:2}.key-s{grid-column:2;grid-row:2}.key-d{grid-column:3;grid-row:2}
.wasd-key:hover,.wasd-key:focus-visible,.wasd-key.key-active{z-index:2;transform:translateY(-6px) scale(1.12) rotate(3deg);background:#d6ff35;box-shadow:inset -3px -3px 0 #b3d22d,4px 8px 0 #000;outline:2px solid #d6ff35;outline-offset:2px}
.wasd-tip{position:absolute;bottom:4px;left:3px;right:3px;white-space:nowrap;text-align:center;color:#d6ff35;font:700 .43rem/1 ui-monospace,monospace;letter-spacing:.02em}
.ticker{display:flex;gap:23px;overflow:hidden;white-space:nowrap;margin:0 0 13px;padding:7px 10px;background:#d6ff35;color:#090b06;border:1px solid #090b06;box-shadow:4px 4px 0 #56651d;font:900 .58rem/1.2 ui-monospace,monospace;letter-spacing:.1em;transform:rotate(.35deg)}
.ticker span:nth-child(2){transform:translateY(3px)}.ticker span:nth-child(3){transform:translateY(-2px)}.ticker span:nth-child(4){opacity:.65}
.chaos-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-7px 0 23px;padding:0 2px;min-height:24px}
.warning-sticker{display:inline-block;background:#ff5a72;color:#19050a;padding:5px 7px;font:900 .56rem/1 ui-monospace,monospace;letter-spacing:.06em;transform:rotate(-2deg);box-shadow:3px 3px 0 #62202b}
.serial{border-bottom:2px dashed var(--accent);color:var(--muted);font:700 .58rem ui-monospace,monospace;transform:rotate(1.5deg)}
.micro-copy{font:700 .52rem ui-monospace,monospace;letter-spacing:.05em;color:#7f8975}
.panel-heading{position:relative}.panel-code{color:var(--wrong);font-size:.56rem;transform:rotate(-2deg);border:1px solid #ff5a7266;padding:4px 5px;margin-left:auto}
.test-panel{position:relative}.test-panel:after{content:"BETA";position:absolute;right:-9px;top:34%;padding:6px 10px;background:#b99aff;color:#160d2b;font:900 .65rem ui-monospace,monospace;transform:rotate(90deg) translateX(50%);transform-origin:right top;letter-spacing:.14em;box-shadow:3px 3px 0 #44365f;pointer-events:none}
.feature-buttons{column-gap:11px;row-gap:16px}.feature-btn:nth-child(1){transform:rotate(-1deg) translateY(2px)}.feature-btn:nth-child(2){transform:rotate(1.5deg) translateY(6px)}.feature-btn:nth-child(3){transform:rotate(-1deg) translateY(-3px)}
.passage{position:relative;box-shadow:inset -6px 0 0 #d6ff3512,5px 5px 0 #252a1f}
.input-warning{color:var(--wrong);font-weight:900;transform:rotate(-1deg)}
.bottom-chaos{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 0;padding:8px 10px;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);color:#777f70;font:700 .52rem ui-monospace,monospace;letter-spacing:.08em}
.tiny-sticker{color:#08090a;background:#ff5a72;padding:5px 7px;transform:rotate(2deg)}
footer{align-items:center}.foss-credit{display:flex;align-items:center;gap:10px}.foss-credit img{width:38px;height:38px;object-fit:contain;image-rendering:auto;border:1px solid #343b30;border-radius:50%;background:#000;box-shadow:3px 3px 0 #d6ff35}.foss-credit small{display:block;margin-top:3px;color:var(--accent);font-size:.5rem;letter-spacing:.1em}
@media(max-width:680px){.brand{gap:10px}.wasd-mark{transform:scale(.86) rotate(-2deg);transform-origin:left center;margin-right:-9px}.brand-stamp{font-size:.45rem}.ticker{gap:13px;font-size:.5rem}.chaos-strip{flex-wrap:wrap;justify-content:flex-start;gap:8px}.micro-copy{display:none}.panel-code{display:none}.test-panel:after{right:-5px;top:27%;font-size:.52rem}.input-hint{flex-wrap:wrap}.bottom-chaos{flex-wrap:wrap;line-height:1.6}.foss-credit img{width:32px;height:32px}footer{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.wasd-key{transition:none}}

/* ===== Merged from BrokenKey-main: live WPM graph + per-key error heatmap ===== */
/* Analytics Section (Graph & Heatmap) */
.analytics-section {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 24px;
}

.analytics-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.card-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-title-group h3 {
  margin: 0;
  font: 800 0.88rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

.badge {
  font: 800 0.58rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  padding: 3px 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.live-badge {
  background: var(--accent);
  color: var(--accent-ink);
}

.accuracy-badge {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.card-subtitle {
  font: 600 0.68rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--muted);
}

/* WPM Graph */
.chart-wrapper {
  position: relative;
  width: 100%;
  background: var(--panel2);
  border: 1px solid var(--border);
  padding: 12px 10px;
  overflow-x: auto;
}

#wpm-chart {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
}

/* Keyboard Heatmap */
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 0.6rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--muted);
  text-transform: uppercase;
}

.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--border);
}

.keyboard-layout {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--panel2);
  border: 1px solid var(--border);
  padding: 18px 12px;
  align-items: center;
  user-select: none;
  overflow-x: auto;
}

.kb-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  width: 100%;
}

.kb-key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  background: #14171a;
  border: 1px solid var(--border);
  font: 800 0.82rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--text);
  padding: 4px;
  transition: all 0.15s ease;
}

.kb-space {
  min-width: 220px;
}

.kb-char {
  display: block;
}

.kb-err {
  font-size: 0.52rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Heatmap Intensity Levels */
.intensity-0 {
  background: #14171a;
  border-color: var(--border);
  color: var(--muted);
}

.intensity-1 {
  background: rgba(214, 255, 53, 0.12);
  border-color: rgba(214, 255, 53, 0.45);
  color: var(--accent);
}
.intensity-1 .kb-err { color: var(--accent); }

.intensity-2 {
  background: rgba(255, 209, 59, 0.15);
  border-color: rgba(255, 209, 59, 0.6);
  color: #ffd13b;
}
.intensity-2 .kb-err { color: #ffd13b; }

.intensity-3 {
  background: rgba(255, 138, 61, 0.2);
  border-color: rgba(255, 138, 61, 0.7);
  color: #ff8a3d;
}
.intensity-3 .kb-err { color: #ff8a3d; }

.intensity-4 {
  background: rgba(255, 90, 114, 0.28);
  border-color: var(--wrong);
  color: var(--wrong);
  box-shadow: inset 0 0 8px rgba(255, 90, 114, 0.3);
}
.intensity-4 .kb-err { color: var(--wrong); font-weight: 900; }
.analytics-section{margin-top:24px}
@media (max-width:768px){
  .kb-key{min-width:30px;height:38px;font-size:.72rem}
  .kb-space{min-width:140px}
}