* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }

.display-wizard {
  font-family: "Uncial Antiqua", serif;
  letter-spacing: 0.02em;
}

.container { max-width: var(--container-w); margin: 0 auto; padding: 0 20px; }
.surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* Links */
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* Focus ring */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 8px; }

/* Utility chips */
.tag { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border-radius:999px; background:var(--brand-gray-100); color:var(--text); border:1px solid var(--border); }
@media (prefers-color-scheme: dark) { .tag { background:#1a1a25; } }