:root {
  --bg: #0E1218;
  --panel: #161B23;
  --text: #E8ECF1;
  --muted: #6B7684;
  --line: rgba(232, 236, 241, 0.09);
  --grid: rgba(232, 236, 241, 0.035);
  --mint: #7EE0C3;
  --mint-dim: rgba(126, 224, 195, 0.14);
  --amber: #FF8A5B;
  --amber-dim: rgba(255, 138, 91, 0.14);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 42px 42px;
  color: var(--text);
  font-family: 'Space Mono', 'IBM Plex Mono', ui-monospace, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  overflow-x: hidden;
}

.stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 56px 40px;
  text-align: center;
}

/* viewfinder corner brackets — the signature element */
.stage::before,
.stage::after,
.corner-tl, .corner-br {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: var(--accent, var(--mint));
  transition: border-color 0.4s ease;
}
.stage::before {
  top: 0; left: 0;
  border-top: 2px solid var(--accent, var(--mint));
  border-left: 2px solid var(--accent, var(--mint));
}
.stage::after {
  top: 0; right: 0;
  border-top: 2px solid var(--accent, var(--mint));
  border-right: 2px solid var(--accent, var(--mint));
}
.corner-tl {
  bottom: 0; left: 0;
  border-bottom: 2px solid var(--accent, var(--mint));
  border-left: 2px solid var(--accent, var(--mint));
}
.corner-br {
  bottom: 0; right: 0;
  border-bottom: 2px solid var(--accent, var(--mint));
  border-right: 2px solid var(--accent, var(--mint));
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 18px;
}

.scan-line {
  position: absolute;
  left: 6px; right: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--mint)), transparent);
  opacity: 0.7;
  animation: sweep 3.2s ease-in-out infinite;
}

@keyframes sweep {
  0%   { top: 12%; opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { top: 88%; opacity: 0.8; }
  90%  { opacity: 0; }
  100% { top: 88%; opacity: 0; }
}

h1 {
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 34px;
  font-weight: 700;
}

.buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

button, .btn {
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 30px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

button:hover, .btn:hover {
  transform: translateY(-1px);
}

.btn-yes:hover { border-color: var(--mint); background: var(--mint-dim); }
.btn-no:hover  { border-color: var(--amber); background: var(--amber-dim); }

.result {
  font-size: clamp(22px, 4.5vw, 30px);
  font-weight: 700;
  margin: 0 0 30px;
  letter-spacing: -0.01em;
}

.counter {
  margin-top: 44px;
  padding-top: 0;
}

.counter-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.counter-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent, var(--mint));
  font-variant-numeric: tabular-nums;
}

.pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, var(--mint));
  margin-right: 8px;
  animation: pulse 1.6s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.footer-link {
  margin: 40px 0 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .scan-line, .pulse-dot { animation: none; }
}