:root{
  --key-fill: hsl(220 8% 18%);
  --key-stroke: hsl(220 10% 32%);
  --key-pressed-fill: hsl(205 85% 55%);
  --key-pressed-stroke: hsl(205 90% 40%);
  --key-ping: hsla(205, 90%, 60%, 0.35);
  --key-heatmap-min: hsl(50 95% 65%);
  --key-heatmap-max: hsl(10 85% 55%);
}

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}
.top-controls select, .top-controls button {
  margin-left: 0.5rem;
}
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
}
.keyboard-container {
  max-width: 900px;
  width: 100%;
}
.kb-wrap { position:relative; display:inline-block; }
svg.keyboard { display:block; height:auto; max-width:100%; }
.controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
#micBtn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: #10b981;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#micBtn.listening {
  background: #ef4444;
}
#micBtn img {
  width: 40px;
  height: 40px;
}
.transcript, .result {
  min-height: 1.5rem;
}
svg.keyboard .key rect,
svg.keyboard .key path {
  fill: var(--key-fill);       /* hsl(220 8% 18%) */
  stroke: var(--key-stroke);   /* hsl(220 10% 32%) */
}
svg.keyboard .key text { fill:#333; }
svg.keyboard .key.pressed rect,
svg.keyboard .key.pressed path {
  fill: var(--key-pressed-fill, hsl(205 85% 55%)) !important;
  stroke: var(--key-pressed-stroke, hsl(205 90% 40%)) !important;
  filter: drop-shadow(0 0 .4rem hsla(205,90%,45%,.55));
}
.key { transition: fill .18s ease, stroke .18s ease, filter .18s ease; }
.key.pressed {
  fill: var(--key-pressed-fill) !important;
  stroke: var(--key-pressed-stroke) !important;
  filter: drop-shadow(0 0 .4rem hsla(205, 90%, 45%, .55));
}
/* Optional ping overlay */
.press-ping {
  position:absolute; pointer-events:none;
  width:18px;height:18px;border-radius:50%;
  background: var(--key-ping);
  transform: translate(-50%,-50%) scale(0.7);
  animation: ping 600ms ease-out forwards;
}
@keyframes ping { 60%{transform:translate(-50%,-50%) scale(1.6); opacity:.6} 100%{opacity:0} }
/* Heatmap utility (applied inline via style attr or class) */
.heatmap { transition: fill .2s ease; }
.settings-form label {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.note {
  font-size: 0.8rem;
  color: #4b5563;
}

/* Smaller/softer glow for the preview */
#kb-preview .key.pressed rect,
#kb-preview .key.pressed path {
  filter: drop-shadow(0 0 .25rem hsla(205,90%,45%,.45));
}

/* The ping in preview will be smaller; no extra CSS needed if we scale in JS */
.title-block{ display:flex; flex-direction:column; gap:.5rem; }
.kb-preview{ max-width:640px; max-height:140px; pointer-events:none; opacity:.98; }
.kb-preview svg{ display:block; width:100%; height:auto; }

:root{
  --bg: #f7f8fa;
  --text: #1b1f23;
  --muted: #6b7280;
  --surface: #ffffff;
  --surface-border: #e5e7eb;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius: 14px;

  /* keyboard colors */
  --key-fill: #ffffff;
  --key-stroke: #cfcfcf;
  --key-text: #333333;
  --key-pressed-fill: hsl(205 85% 55%);
  --key-pressed-stroke: hsl(205 90% 40%);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f14;
    --text: #e5e7eb;
    --muted: #9aa3af;
    --surface: #111827;
    --surface-border: #1f2937;
    --shadow: 0 8px 24px rgba(0,0,0,.35);

    --key-fill: #1a2230;
    --key-stroke: #2a3342;
    --key-text: #d1d5db;
    --key-pressed-fill: hsl(205 90% 55%);
    --key-pressed-stroke: hsl(205 95% 40%);
  }
}

/* page chrome */
body{ background: var(--bg); color: var(--text); }
h1{ font-weight:700; letter-spacing:.2px; margin: 0 0 .4rem 0; }

/* preview card */
.kb-card{
  margin: 1.5rem auto 0;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .75rem 1rem;
}
.kb-preview{ max-width: clamp(1000px, 95vw, 1400px); max-height: 400px; }
.kb-preview svg{ display:block; width:100%; height:auto; }

/* baseline keyboard visuals (apply to BOTH preview & main) */
svg.keyboard .key rect,
svg.keyboard .key path { fill: var(--key-fill); stroke: var(--key-stroke); }
svg.keyboard .key text { fill: var(--key-text); }

/* pressed state (both) */
svg.keyboard .key.pressed rect,
svg.keyboard .key.pressed path {
  fill: var(--key-pressed-fill) !important;
  stroke: var(--key-pressed-stroke) !important;
  filter: drop-shadow(0 0 .35rem hsla(205, 90%, 45%, .55));
}

/* preview: slightly softer glow */
#kb-preview .key.pressed rect,
#kb-preview .key.pressed path {
  filter: drop-shadow(0 0 .25rem hsla(205, 90%, 45%, .4));
}

/* ping overlay dot */
.press-ping {
  position:absolute; pointer-events:none;
  width:16px;height:16px;border-radius:50%;
  background: hsla(205, 90%, 60%, .35);
  transform: translate(-50%,-50%) scale(.7);
  animation: ping 600ms ease-out forwards;
}
@keyframes ping { 60%{transform:translate(-50%,-50%) scale(1.55); opacity:.65} 100%{opacity:0} }

/* Center title and both keyboards */
h1 { text-align: center; margin: 0 0 .5rem; }
.title-block, .kb-card, .kb-preview, .kb-wrap, .keyboard-container { margin-left: auto; margin-right: auto; }

/* Base keyboard look */
:root{
  --key-fill: #ffffff;
  --key-stroke: #cfcfcf;
  --key-text: #333333;
  /* Pressed shading only (slightly darker) */
  --key-pressed-fill: #e9eef7;
  --key-pressed-stroke: #b7c2d9;
}

/* Apply base to both preview & main */
svg.keyboard .key rect,
svg.keyboard .key path { fill: var(--key-fill); stroke: var(--key-stroke); }
svg.keyboard .key text { fill: var(--key-text); }

/* HIGHLIGHT channel: just shading — no glow */
svg.keyboard .key.pressed rect,
svg.keyboard .key.pressed path {
  fill: var(--key-pressed-fill) !important;
  stroke: var(--key-pressed-stroke) !important;
  filter: none !important;           /* no glow */
  transition: fill .18s ease, stroke .18s ease;
}

/* PING channel: simple dot, no sparkle animation */
.press-ping {
  position: absolute; pointer-events: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(50, 140, 255, .35);
  transform: translate(-50%, -50%);
  opacity: .85;
  animation: none;
}

/* HEATMAP channel (colorize by data-heat; JS sets inline style or data-attr) */
.key[data-heat] rect, .key[data-heat] path {
  /* JS will set an inline fill via HSL ramp; leave as-is */
}

/* Optional: make preview/main bigger and centered */
.kb-preview { max-width: clamp(1000px, 95vw, 1400px); max-height: 400px; }
.keyboard-container, .kb-wrap { max-width: clamp(1000px, 95vw, 1400px); }