:root {
  color-scheme: dark;
  --bg: #14161a;
  --card: #1f2228;
  --fg: #e8e8e8;
  --dim: #9a9ca3;
  --accent: #ffb454;
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--fg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#app { display: flex; flex-direction: column; min-height: 100dvh; }
header, main, footer { padding: 0 16px; }
h1 { font-size: 24px; margin: 16px 0; }
main { flex: 1; }
.card { background: var(--card); border-radius: 12px; padding: 4px 16px; margin-bottom: 12px; }
ol { padding-left: 20px; }
button {
  font: inherit; min-height: 48px; padding: 0 20px; margin: 0 0 16px; border: 0; border-radius: 10px;
  background: var(--accent); color: #1a1206; font-weight: 600;
}
footer { color: var(--dim); font-size: 14px; padding-bottom: 16px; }
.unsupported { max-width: 32em; padding: 24px 16px; }
.unsupported .missing { color: var(--dim); font-size: 14px; }