*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: var(--sf-font);
  font-size: var(--sf-text-base);
  line-height: var(--sf-line);
}

.shell {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--sf-space-4) var(--sf-gutter);
  text-align: center;
}

h1 { font-size: var(--sf-text-xl); margin: var(--sf-space-2) 0; color: var(--sf-brand); }
.lead { font-size: var(--sf-text-lg); }

.note {
  display: flex;
  gap: var(--sf-space-1);
  align-items: center;
  justify-content: center;
  color: var(--sf-text-muted);
}

.icon {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 2px; }