*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-16)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
body.no-tabs { padding-bottom: env(safe-area-inset-bottom); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.page { max-width: 720px; margin: 0 auto; padding: var(--sp-16); }
.page-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--sp-8);
  min-height: 56px; padding: 0 var(--sp-16);
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.page-head h1 { font-size: var(--fs-20); }
.muted { color: var(--muted); }
.stack > * + * { margin-top: var(--sp-12); }