/* База: reset, типографика, layout, footer. Только на токенах. */
* { box-sizing: border-box; }

/* HTML `hidden` атрибут должен скрывать любой элемент — даже если у него
   в стилях задан `display: flex/grid` (специфичность класса > UA-stylesheet
   для `[hidden]`). Без этого `el.hidden = true` молча игнорируется. */
[hidden] { display: none !important; }

/* UA-stylesheet иногда не покрывает `<script type="importmap">` — он
   рендерится как inline-text (whitespace в layout). Принудительно скрываем
   все script-теги. */
script { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: var(--fs-body-lg);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--gutter);
}

.h1 { font-size: var(--fs-h2); font-weight: var(--fw-bold); margin: 0 0 var(--space-4); }
.muted { color: var(--muted); font-size: var(--fs-caption); }

.footer {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-3) var(--gutter) var(--space-4);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-caption);
}
.footer a {
  color: inherit;          /* тот же приглушённый вид, но кликабельно */
  text-decoration: none;
}
.footer a:hover { text-decoration: underline; }