:root {
  --paper: #d1d3d4;
  --paper-2: #c1c4c5;
  --ink: #231f20;
  --muted: #5a5e62;
  --accent: #f15a22;
  --lcd: #e4e3df;
  --lcd-shadow: rgba(0, 0, 0, 0.14);
  --grid: rgba(35, 31, 32, 0.05);
  --dotmatrix: rgba(0, 0, 0, 0.07);
  --surface-alt: var(--ink);
  --text-on-alt: var(--lcd);
  --bloom: none;
  --accent-line: var(--ink);
  --shadow-key: 3px 3px 0 var(--ink);
  --shadow-key-down: 1px 1px 0 var(--ink);
  --pad-lcd: clamp(12px, 3.5cqi, 18px);
  --pad-device: clamp(10px, 3cqi, 18px);
  --gap-device: clamp(8px, 2.5cqi, 12px);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #0e0e0f;
  --paper-2: #18181a;
  --ink: #5dff84;
  --muted: #3aa55a;
  --accent: #f15a22;
  --lcd: #091410;
  --lcd-shadow: rgba(0, 0, 0, 0.55);
  --grid: rgba(93, 255, 132, 0.045);
  --dotmatrix: rgba(93, 255, 132, 0.06);
  --surface-alt: #14241a;
  --text-on-alt: #b6ffc7;
  --bloom: 0 0 6px currentColor;
  --accent-line: #7a2e10;
  --key-primary-bg: var(--ink);
  --key-primary-fg: #0a1820;
  color-scheme: dark;
}

:root[data-theme="dark"] .key.primary {
  background: var(--key-primary-bg);
  color: var(--key-primary-fg);
  border-color: var(--key-primary-fg);
  --shadow-key: 3px 3px 0 var(--key-primary-fg);
  --shadow-key-down: 1px 1px 0 var(--key-primary-fg);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Kalam', cursive;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.chunk { font-family: 'Archivo Black', sans-serif; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.hand { font-family: 'Kalam', cursive; }
.scrawl { font-family: 'Caveat', cursive; font-weight: 700; }
.label {
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}
/* Anywhere we display numbers that change between renders — lock digit
   widths so values update without horizontal jitter. */
.card-rating, .card-addr, .card-hours, .card-vibe,
.card-name, .title-xl, .title-lg, .title-md,
.prompt, .lcd-copy, .landing-ready,
.bar-cell, .wave-bar { font-variant-numeric: tabular-nums; }

.device {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-device);
  padding: var(--pad-device) var(--pad-device) calc(var(--pad-device) + env(safe-area-inset-bottom));
  min-height: 100dvh;
  max-height: 100dvh;
  container-type: inline-size;
  container-name: device;
}

/* On desktop / large screens: show the phone at a fixed comfortable size, centered */
@media (min-width: 520px) and (min-height: 760px) {
  body { align-items: center; padding-block: 40px; }
  .device { min-height: 0; height: min(860px, calc(100dvh - 80px)); max-height: min(860px, calc(100dvh - 80px)); }
}

/* Status strip */
.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(12px, 3.3cqi, 16px);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.status-right {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.5cqi, 12px);
}
.status-leds { display: flex; gap: clamp(3px, 1.2cqi, 6px); }
.theme-toggle {
  appearance: none;
  font: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(11px, 3cqi, 14px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  padding: 2px 6px 2px 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.theme-toggle:active {
  background: var(--surface-alt);
  color: var(--text-on-alt);
}
.loc-badge {
  appearance: none;
  font: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(10px, 2.8cqi, 13px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: transparent;
  border: 1.75px solid var(--accent);
  border-radius: 3px;
  padding: 2px 7px;
  cursor: pointer;
  line-height: 1;
  animation: text-blink 1.6s steps(2, end) infinite;
}
.loc-badge:active { background: var(--accent); color: #fff; }
.theme-toggle .theme-label {
  font-size: 0.85em;
  opacity: 0.85;
}
.led {
  width: clamp(9px, 2.6cqi, 12px);
  height: clamp(9px, 2.6cqi, 12px);
  border: 1.75px solid var(--ink);
  background: transparent;
}
.led-on { background: var(--accent); border-color: var(--accent-line); }
.led-ink { background: var(--ink); }
.led-blink { animation: blink 1s steps(2, end) infinite; }
@keyframes blink { 50% { background: transparent; } }
.text-blink { animation: text-blink 1.4s steps(2, end) infinite; }
@keyframes text-blink { 50% { opacity: 0.35; } }

/* LCD */
.lcd {
  flex: 1;
  position: relative;
  border: 2.5px solid var(--ink);
  border-radius: 4px;
  background: var(--lcd);
  box-shadow: inset 0 3px 0 var(--lcd-shadow), inset 0 -2px 0 rgba(255, 255, 255, 0.18), 4px 4px 0 var(--ink);
  overflow: hidden;
  min-height: 0;
}
.dotmatrix {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--dotmatrix) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
  z-index: 1;
}
/* Scanline — CRT phosphor effect, dark mode only */
.scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: none;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(93, 255, 132, 0.16) 50%,
    transparent 100%
  );
  background-size: 100% 7%;
  background-repeat: no-repeat;
  background-position: 0 -7%;
}
:root[data-theme="dark"] .scanline {
  display: block;
  animation: scanline-slide 7s linear infinite;
}
@keyframes scanline-slide {
  0%   { background-position: 0 -7%; }
  100% { background-position: 0 107%; }
}
.lcd-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: var(--pad-lcd);
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2cqi, 10px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-shadow: var(--bloom);
}
.lcd-inner::-webkit-scrollbar { width: 0; }

/* Generic LCD bits */
.prompt {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(12px, 3.3cqi, 16px);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.prompt .accent { color: var(--accent); }

.divider {
  height: 2px;
  background: var(--ink);
  width: clamp(42px, 13cqi, 64px);
  margin: 6px 0;
}
.hr {
  height: 1px;
  background: var(--ink);
  margin: 8px 0;
  opacity: 0.85;
}

.title-xl {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(52px, 18cqi, 104px);
  line-height: 0.86;
  letter-spacing: -2.5px;
  margin: 0;
}
.title-lg {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 9cqi, 44px);
  line-height: 0.92;
  letter-spacing: -0.8px;
  margin: 0;
}
.title-md {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(18px, 5.8cqi, 28px);
  line-height: 1;
  letter-spacing: -0.4px;
  margin: 0;
}

.lede {
  font-family: 'Kalam', cursive;
  font-size: clamp(14px, 4cqi, 18px);
  line-height: 1.3;
}
.lcd-copy {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(14px, 4.3cqi, 20px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.spacer { flex: 1; min-height: 8px; }

/* LCD bar (loading) */
.bar {
  display: flex;
  gap: clamp(2px, 0.8cqi, 4px);
  width: 100%;
}
.bar-cell {
  flex: 1;
  height: clamp(12px, 4cqi, 20px);
  border: 2px solid var(--ink);
  background: transparent;
}
.bar-cell.on { background: var(--ink); }

.waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 1cqi, 5px);
  height: clamp(56px, 18cqi, 96px);
}
.wave-bar {
  width: clamp(4px, 1.4cqi, 7px);
  background: var(--ink);
  animation: pulse 0.9s ease-in-out infinite;
}
.wave-bar.accent { background: var(--accent); }

@keyframes pulse {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* Categories */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(6px, 2.2cqi, 12px);
  flex: 1;
  align-content: start;
}
.cat {
  appearance: none;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  border-radius: 4px;
  padding: clamp(12px, 3.8cqi, 20px) clamp(10px, 3cqi, 16px);
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.5cqi, 14px);
  position: relative;
  cursor: pointer;
  text-align: left;
  transition: transform 0.05s ease;
  min-height: clamp(52px, 15cqi, 72px);
}
.cat-emoji {
  font-size: clamp(22px, 7cqi, 36px);
  line-height: 1;
}
.cat-label {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(13px, 4.1cqi, 19px);
  letter-spacing: 0.5px;
}
.cat:active,
.cat.is-active {
  background: var(--surface-alt);
  color: var(--text-on-alt);
  transform: translate(1px, 1px);
}
.cat:active .cat-emoji,
.cat.is-active .cat-emoji {
  filter: grayscale(1) contrast(1.4) brightness(1.5);
}

/* Result cards */
.results {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 5cqi, 26px);
  margin-top: clamp(18px, 5.5cqi, 32px);
}
.card {
  appearance: none;
  text-align: left;
  font: inherit;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: clamp(14px, 4cqi, 20px);
  position: relative;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  width: 100%;
  transition: transform 0.05s ease;
}
.card:active { transform: translate(1px, 1px); }
.card.inverse {
  background: var(--surface-alt);
  color: var(--text-on-alt);
}
.card-tag {
  position: absolute;
  top: clamp(-12px, -3cqi, -9px);
  left: clamp(10px, 3.5cqi, 16px);
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(10px, 3cqi, 13px);
  letter-spacing: 1.4px;
  font-weight: 700;
  padding: 2px 8px;
  border: 2px solid var(--ink);
  background: var(--lcd);
  color: var(--ink);
}
.card.inverse .card-tag {
  background: var(--surface-alt);
  color: var(--text-on-alt);
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.card-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(18px, 5.5cqi, 24px);
  letter-spacing: -0.4px;
  line-height: 1.05;
}
.card.hero {
  padding: clamp(20px, 6cqi, 30px) clamp(18px, 5cqi, 26px);
}
.card.hero.committed {
  border-color: var(--accent);
  box-shadow: 4px 4px 0 var(--accent);
}
.card.decoding {
  cursor: progress;
}
.card.decoding .card-name {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0;
}
.card.decoding .card-tag {
  color: var(--accent);
  border-color: var(--accent);
  animation: text-blink 0.6s steps(2, end) infinite;
}
.card.decoding .card-addr,
.card.decoding .card-hours,
.card.decoding .card-blurb,
.card.decoding .card-buzz,
.card.decoding .card-locwarn {
  opacity: 0.22;
  filter: blur(1px);
  transition: opacity 0.18s ease, filter 0.18s ease;
}
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: clamp(16px, 4.5cqi, 22px);
  padding-top: clamp(14px, 4cqi, 18px);
  border-top: 1.5px dashed var(--ink);
}
.card-action {
  appearance: none;
  flex: 1;
  font: inherit;
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(13px, 4cqi, 16px);
  letter-spacing: 0.05em;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(10px, 3cqi, 14px) 8px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.card-action:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}
.card-action.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-line);
  box-shadow: 2px 2px 0 var(--accent-line);
}
:root[data-theme="dark"] .card-action.primary {
  background: var(--ink);
  color: var(--key-primary-fg);
  border-color: var(--key-primary-fg);
  box-shadow: 2px 2px 0 var(--key-primary-fg);
}
.stamp-card {
  position: absolute;
  top: clamp(-12px, -3cqi, -8px);
  right: clamp(8px, 3cqi, 18px);
  transform: rotate(8deg);
  border: 3px solid var(--accent);
  color: var(--accent);
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(13px, 3.8cqi, 16px);
  letter-spacing: 0.18em;
  padding: 4px 10px;
  background: var(--lcd);
  pointer-events: none;
  text-shadow: none;
}
.card.hero .card-name {
  font-size: clamp(24px, 8cqi, 36px);
  letter-spacing: -0.6px;
}
.card.hero .card-blurb { font-size: clamp(14px, 4cqi, 17px); margin-top: 16px; }
.card.hero .card-buzz { margin-top: 18px; }
.card.hero .card-rating { font-size: clamp(15px, 4.5cqi, 19px); }
.card-rating {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(13px, 4cqi, 17px);
  font-weight: 700;
  white-space: nowrap;
}
.card-addr {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(10px, 3cqi, 13px);
  margin-top: 6px;
  opacity: 0.85;
  letter-spacing: 0.04em;
}
.card-hours {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(11px, 3.3cqi, 14px);
  font-weight: 700;
  color: var(--accent);
  margin-top: 8px;
  letter-spacing: 0.08em;
}
.card-vibe {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(11px, 3.3cqi, 14px);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-top: 8px;
  color: currentColor;
  display: inline-block;
}
.card-locwarn {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(10px, 3cqi, 13px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: transparent;
  border: 1.5px dashed var(--accent);
  border-radius: 3px;
  padding: 6px 10px;
  margin-top: 10px;
  cursor: pointer;
}
.card-locwarn:active { background: var(--accent); color: #fff; }
.card-hours-dot {
  display: inline-block;
  animation: text-blink 1.6s steps(2, end) infinite;
}
.card-blurb {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(13px, 3.6cqi, 16px);
  font-weight: 500;
  margin-top: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.card-blurb-skel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.card-blurb-skel .skel-bar {
  display: block;
  height: clamp(11px, 3.2cqi, 14px);
  background: currentColor;
  border-radius: 2px;
  opacity: 0.1;
  animation: skel-pulse 1.4s ease-in-out infinite;
}
.card-blurb-skel .skel-bar:nth-child(1) { width: 88%; }
.card-blurb-skel .skel-bar:nth-child(2) { width: 96%; animation-delay: 0.18s; }
.card-blurb-skel .skel-bar:nth-child(3) { width: 60%; animation-delay: 0.36s; }
@keyframes skel-pulse {
  0%, 100% { opacity: 0.08; }
  50%      { opacity: 0.22; }
}
.card-buzz {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.buzz {
  font-family: 'Space Mono', monospace;
  font-size: clamp(9px, 2.8cqi, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1.5px solid currentColor;
}

/* Share toast (clipboard fallback) */
.share-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  background: var(--ink);
  color: var(--lcd);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 200;
}
.share-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Empty state */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding-top: 12px;
}
.empty .glyph {
  font-size: clamp(64px, 22cqi, 120px);
  line-height: 1;
}
.empty .scrawl {
  font-size: clamp(22px, 7cqi, 32px);
  line-height: 1.05;
}

/* Hardware keys */
.hardware {
  display: flex;
  gap: clamp(6px, 2cqi, 10px);
}
.hardware .key { flex: 1; }
.key {
  appearance: none;
  font: inherit;
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(14px, 4.5cqi, 24px) 6px clamp(10px, 3.2cqi, 18px);
  position: relative;
  cursor: pointer;
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(13px, 4cqi, 18px);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-key);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
  text-align: center;
  min-height: clamp(54px, 15cqi, 70px);
}
.key.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-line);
  --shadow-key: 3px 3px 0 var(--accent-line);
  --shadow-key-down: 1px 1px 0 var(--accent-line);
}
.key.icon {
  font-size: clamp(20px, 6.5cqi, 30px);
  line-height: 1;
  padding-top: clamp(14px, 4.2cqi, 22px);
  padding-bottom: clamp(10px, 3cqi, 16px);
}
.key.xl {
  font-size: clamp(20px, 6.5cqi, 30px);
  letter-spacing: 0.06em;
  padding: clamp(22px, 6.5cqi, 36px) 10px clamp(18px, 5cqi, 28px);
  min-height: clamp(70px, 20cqi, 100px);
}
.key:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: var(--shadow-key-down);
  transform: translate(2px, 2px);
}
.key:not(:disabled):active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-key-down);
}

/* Idle pulse on the FIND key after ~3s of dormant time */
.key.xl.primary {
  animation: idle-pulse 2.4s ease-in-out 3s infinite;
}
.key.xl.primary:active,
.key.xl.primary:focus-visible {
  animation: none;
}
@keyframes idle-pulse {
  0%, 100% { box-shadow: var(--shadow-key); }
  50%      { box-shadow: var(--shadow-key), 0 0 0 5px rgba(241, 90, 34, 0.18); }
}
:root[data-theme="dark"] .key.xl.primary {
  animation-name: idle-pulse-dark;
}
@keyframes idle-pulse-dark {
  0%, 100% { box-shadow: var(--shadow-key); }
  50%      { box-shadow: var(--shadow-key), 0 0 0 5px rgba(93, 255, 132, 0.22); }
}

/* Landing */
.landing-screen {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
}
.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: clamp(10px, 3cqi, 18px);
}
.landing-logo {
  font-size: clamp(72px, 22cqi, 120px);
  letter-spacing: 8px;
  line-height: 1;
  margin-bottom: clamp(4px, 1.5cqi, 10px);
}
.landing-title { line-height: 0.86; }
.landing-divider { margin-top: clamp(10px, 3cqi, 16px); }
.landing-tagline {
  margin-top: clamp(14px, 4cqi, 20px) !important;
}
.landing-ready {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(20px, 6cqi, 28px);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.22em;
  text-align: center;
  padding-bottom: 0;
  margin-bottom: calc(-1 * var(--pad-lcd) + clamp(4px, 1cqi, 8px));
}

/* Screen transitions — fallback pop for browsers without View Transitions */
.screen { animation: pop 0.18s ease-out; }
@keyframes pop {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

/* When View Transitions is supported, disable the per-screen pop so the
   ::view-transition-* animations own the navigation feel without doubling. */
@supports (view-transition-name: none) {
  .screen { animation: none; }

  ::view-transition-old(root) {
    animation: vt-out 0.18s cubic-bezier(0.4, 0, 1, 1) both;
  }
  ::view-transition-new(root) {
    animation: vt-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  @keyframes vt-out {
    to { opacity: 0; transform: translateY(-6px); }
  }
  @keyframes vt-in {
    from { opacity: 0; transform: translateY(10px); }
  }
}

/* Short viewports (e.g. iPhone SE 667px tall in landscape-ish space) */
@media (max-height: 720px) {
  .title-xl { font-size: clamp(44px, 14cqi, 72px); letter-spacing: -1.5px; }
  .title-lg { font-size: clamp(24px, 7.5cqi, 36px); }
  .empty .glyph { font-size: clamp(48px, 16cqi, 80px); }
  .waveform { height: clamp(44px, 12cqi, 68px); }
  .bar-cell { height: clamp(10px, 3cqi, 14px); }
  .cat { min-height: clamp(48px, 13cqi, 60px); padding: clamp(10px, 3cqi, 14px) clamp(8px, 2.5cqi, 12px); }
  .cat-emoji { font-size: clamp(20px, 6cqi, 28px); }
  .results { gap: clamp(14px, 4cqi, 20px); margin-top: clamp(16px, 4.5cqi, 24px); }
  .card { padding: clamp(12px, 3.5cqi, 16px); }
}

/* Landscape: cap device height so the LCD doesn't get crushed by keys */
@media (orientation: landscape) and (max-height: 520px) {
  .device { max-height: 100dvh; }
  .key { min-height: 46px; padding: 10px 4px 8px; }
  .key.xl { min-height: 56px; padding: 14px 8px 10px; font-size: clamp(18px, 4cqi, 24px); }
  .title-xl { font-size: clamp(36px, 9cqi, 60px); }
}