* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-canvas); }
body { margin: 0; min-width: 320px; color: var(--color-ink); background: var(--color-canvas); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
button { color: inherit; font: inherit; }

.content-container { width: 100%; max-width: var(--content-width); margin-inline: auto; }
.page-shell { min-height: 100vh; min-height: 100dvh; overflow: hidden; background: var(--color-paper); box-shadow: 0 0 60px rgba(24, 42, 53, .08); }
.page-gutter { padding-left: max(var(--page-gutter), env(safe-area-inset-left)); padding-right: max(var(--page-gutter), env(safe-area-inset-right)); }
.prototype-view { display: none; }
.prototype-view.is-active { display: flex; }

.type-meta { margin: 0; color: var(--color-text-muted); font-size: 10px; font-weight: 600; letter-spacing: .16em; }
.type-issue { font: 13px/1 var(--font-serif); letter-spacing: .13em; }
.type-display { font: 400 var(--type-display-size)/1.2 var(--font-serif); letter-spacing: .035em; }
.type-section-number { color: var(--color-type-01); font: var(--type-section-number-size)/1 var(--font-serif); }
.type-section-title { font: 400 var(--type-section-title-size)/1.45 var(--font-serif); letter-spacing: .02em; }
.type-body { color: var(--color-text-secondary); font-size: var(--type-body-size); line-height: 2; }
.type-support { color: var(--color-text-muted); font-size: var(--type-support-size); line-height: 1.9; }
.type-caption { color: var(--color-text-muted); font-size: var(--type-caption-size); line-height: 1.7; }
.type-data-label { font: 400 var(--type-data-label-size)/1.4 var(--font-serif); }
.type-data-value { color: var(--color-accent); font-size: var(--type-data-value-size); font-weight: 500; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; }
}