:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: #000;
  color: #f5f5f7;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
[hidden] { display: none !important; }

main {
  min-height: 100vh;
  min-height: 100svh;
  padding: max(64px, calc(50vh - 96px)) 24px 48px;
  padding-top: max(64px, calc(50svh - 96px));
  text-align: center;
}

.stage { width: min(100%, 440px); margin-inline: auto; }
#loading { padding-top: 36px; }
.spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid #262628; border-top-color: #f5f5f7; border-radius: 50%; animation: spin 700ms linear infinite; }
#confirming { margin-top: -40px; }
#confirm-label { font-size: 28px; }
.phone { position: relative; width: 52px; height: 88px; margin: 0 auto 24px; border: 2px solid #77777d; border-radius: 12px; }
.phone-speaker { position: absolute; width: 18px; height: 3px; top: 6px; left: 15px; border-radius: 3px; background: #77777d; }
.side-button { position: absolute; top: 24px; right: -6px; width: 4px; height: 23px; border-radius: 3px; background: #f5f5f7; }
.press-ring { position: absolute; top: 13px; right: -17px; width: 26px; height: 46px; border: 2px solid #f5f5f7; border-radius: 14px; opacity: 0; }
.clicking .side-button { animation: double-press 900ms linear both; }
.clicking .press-ring { animation: double-ring 900ms linear both; }
h1 { margin: 0; font-size: clamp(30px, 6vw, 40px); font-weight: 600; letter-spacing: -1.3px; line-height: 1.2; }
.choices { display: flex; gap: 12px; justify-content: center; margin-top: 32px; }
button {
  width: 128px;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, background 120ms ease;
}
.yes { background: #f5f5f7; color: #090909; }
.no { background: #1c1c1e; border-color: #2b2b2e; color: #f5f5f7; }
@media (hover: hover) { .yes:hover { background: #dcdce0; } .no:hover { background: #2c2c2e; } }
button:active { transform: scale(.96); }
button:focus-visible, a:focus-visible { outline: 3px solid #62a9ff; outline-offset: 5px; }
#success:focus, #question:focus, #confirm-label:focus { outline: none; }
#result { margin-top: -32px; }
.checkmark { width: 72px; height: 72px; color: #32d74b; margin-bottom: 20px; animation: arrive 240ms ease-out both; }
.checkmark path { stroke-dasharray: 1; animation: check 340ms 80ms ease-out both; }
#reveal { margin-top: 36px; }
.reveal-copy { animation: arrive 380ms ease-out both; }
h2 { font-size: 24px; font-weight: 600; letter-spacing: -.5px; margin: 0 0 14px; }
p { color: #9c9ca3; font-size: 17px; line-height: 1.6; margin: 0; text-wrap: pretty; }
.agency-link { display: inline-block; margin-top: 17px; color: #f5f5f7; text-decoration-color: #626269; text-underline-offset: 5px; font-size: 18px; font-weight: 500; }
.agency-link span { display: inline-block; margin-left: 4px; color: #9c9ca3; }
.agency-link:hover { text-decoration-color: #f5f5f7; }
.fine-print { color: #737379; margin-top: 26px; font-size: 12px; }
noscript { display: block; max-width: 440px; margin: 48px auto 0; line-height: 1.6; color: #9c9ca3; }
noscript a { color: #f5f5f7; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes check { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes double-press {
  0%, 18%, 43%, 62%, 100% { transform: translateX(0); background: #f5f5f7; }
  26%, 34%, 70%, 78% { transform: translateX(-3px); background: #32d74b; }
}
@keyframes double-ring {
  0%, 18%, 48%, 62%, 100% { opacity: 0; transform: scale(.8); }
  26%, 70% { opacity: .7; transform: scale(.9); }
  43%, 92% { opacity: 0; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }