/* Сброс, типографика, раскладка экрана (design.md §2, §6) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; background: var(--bg); }
body {
  color: var(--text); font: 400 1rem/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased; overflow: hidden;
  overscroll-behavior: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button {
  background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
svg { display: block; flex: none; }
a { color: var(--primary-text); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Контейнер приложения: колонка 480 по центру, высота = видимая область (с учётом клавиатуры) */
#app {
  position: relative; max-width: 480px; margin: 0 auto;
  height: var(--vvh, 100dvh); display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg);
}
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pad { padding-left: var(--screen-pad); padding-right: var(--screen-pad); }
.safe-top { padding-top: max(8px, var(--safe-top)); }

/* Типографика */
.t-hero { font: 800 2.5rem/2.75rem var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.t-h1 { font: 700 1.625rem/2rem var(--font-display); }
.t-h2 { font: 700 1.25rem/1.625rem var(--font-display); }
.t-phrase { font: 600 1.375rem/1.875rem var(--font-body); }
.t-tile { font: 600 1.125rem/1.5rem var(--font-body); }
.t-body { font: 500 1rem/1.5rem var(--font-body); }
.t-caption { font: 500 .8125rem/1.125rem var(--font-body); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.center { text-align: center; }
.hyph { hyphens: auto; }

.boot { flex: 1; display: grid; place-items: center; color: var(--text-muted); }