*, *::before, *::after { box-sizing: border-box; }
html { background: var(--space); color: var(--starlight); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--font-body); overflow-x: clip; }
h1, h2 { font-family: var(--font-display); font-weight: 750; letter-spacing: -0.035em; line-height: 0.95; margin: 0; }
h1 { font-size: var(--step-hero); } h2 { font-size: var(--step-h2); }
p { max-width: 38ch; margin: 1.25rem 0 0; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.label { font: 400 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.skip { position: fixed; left: var(--gutter); top: -4rem; z-index: var(--z-overlay); background: var(--starlight); color: var(--space); padding: 0.75rem 1rem; border-radius: 999px; }
.skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--plasma); outline-offset: 3px; }
main:focus { outline: none; }
.chrome { position: fixed; inset: 0 0 auto; z-index: var(--z-chrome); display: flex; justify-content: space-between; align-items: center; padding: 1.25rem var(--gutter); pointer-events: none; }
.chrome > * { pointer-events: auto; }
/* the brand carries its own dark chip so it stays readable over cream, ember, plum or the rocket */
.brand { display: inline-flex; gap: 0.5rem; align-items: center; min-height: 44px; padding: 0 0.9rem 0 0.6rem; border-radius: 999px; text-decoration: none; font: 700 1.125rem/1 var(--font-display); color: var(--starlight); background: color-mix(in oklab, var(--space) 72%, transparent); backdrop-filter: blur(8px); }
.pill { min-height: 44px; color: var(--starlight); display: inline-flex; align-items: center; padding: 0 1.25rem; border-radius: 999px; border: 1px solid color-mix(in oklab, currentColor 35%, transparent); text-decoration: none; font-weight: 500; background: color-mix(in oklab, var(--space) 72%, transparent); backdrop-filter: blur(8px); transition: background 220ms var(--ease-out); }
.chapter p > a:not(.pill, .play, .grant) { display: inline-block; padding: 12px 0; margin: -12px 0; }   /* 44px tap target, same visual size */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: calc(var(--z-chrome) + 1); background: var(--fire); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.pill:hover { background: color-mix(in oklab, var(--starlight) 14%, var(--space)); }