.mock-line { white-space: pre-wrap; }
.mock-cursor {
  display: inline-block; width: 7px; height: 13px; background: #22d3ee;
  vertical-align: middle; margin-left: 2px; animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.metric-bar { transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
kbd {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-bottom: 3px solid rgba(0,0,0,0.5);
  color: #22d3ee;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateY(0);
  transition: transform 0.08s ease, border-bottom-width 0.08s ease, box-shadow 0.08s ease;
  cursor: default;
}
kbd:hover, kbd:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: rgba(34,211,238,0.3); }