:root {
  color-scheme: dark;
  --background: #000000;
  --text: #f5f5f7;
  --muted: #9e9ea6;
  --accent: #0074e8;
  --surface: #1d1d1f;
  --focus: #69b0ff;
  font: 100%/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--background);
  color: var(--text);
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
}
main { width: min(100%, 440px); text-align: center; padding-block: 24px; }
.brand { width: 80px; height: 80px; border-radius: 22px; display: grid; place-items: center; margin: 0 auto 32px; background: var(--surface); font-size: 1.5rem; font-weight: 700; }
h1 { margin: 0 0 20px; font-size: clamp(2rem, 7vw, 2.75rem); letter-spacing: -0.025em; line-height: 1.1; overflow-wrap: anywhere; }
p { margin: 0; }
.intro { color: var(--muted); font-size: 1.0625rem; }
.open-app {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 24px;
  margin: 32px auto 20px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-weight: 600;
  text-decoration: none;
  touch-action: manipulation;
}
.open-app:active { opacity: 0.8; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.hint { color: var(--muted); font-size: 0.875rem; }
footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 32px; }
footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 0.875rem; }
@media (hover: hover) { .open-app:hover { background: #0066cc; } footer a:hover { color: var(--text); } }
@media (prefers-contrast: more) { :root { --muted: #d6d6dc; } }