/* Pre-dawn sky canvas pinned behind; story cards scroll over the left edge of the chart (wide) or along the bottom (narrow). System fonts only: the extension sandbox can't load web fonts. */
:root {
  --sky: #0c1322;
  --ink: #ece6da;
  --muted: #8e97ad;
  --ember: #f0a35e;
  --ice: #9ed6f5;
  --rule: #2a3550;
  --display: "Bahnschrift Condensed", "Bahnschrift", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: Georgia, "Times New Roman", serif;
  --mono: Consolas, "SF Mono", Menlo, ui-monospace, monospace;
  color-scheme: dark;
}
html, body { margin: 0; background: var(--sky); color: var(--ink); }
body { font-family: var(--body); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
[hidden] { display: none !important; }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#app { position: relative; z-index: 1; }
.story { box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding: 0 16px; }
.step { min-height: 92vh; display: flex; align-items: center; }
.step:first-child { min-height: 80vh; }
.step:last-child { min-height: 100vh; }
.card { box-sizing: border-box; max-width: 27rem; width: 100%; background: rgba(12, 19, 34, 0.82); border-top: 1px solid var(--rule); padding: 1.1rem 1.3rem 1.3rem; display: grid; gap: .65rem; box-shadow: 0 18px 50px rgba(12, 19, 34, 0.7); }
.hero .card { max-width: 32rem; }
.eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ember); }
h1, h2 { font-family: var(--display); font-weight: 700; font-stretch: condensed; line-height: .95; margin: 0; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
h1 { font-size: clamp(3rem, 9vw, 6rem); }
h2 { font-size: clamp(1.8rem, 4.4vw, 2.7rem); }
p { margin: 0; }
.dek { font-size: 1.08rem; }
.muted { color: var(--muted); }
.ember { color: var(--ember); }
.ice { color: var(--ice); }
.figs { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-family: var(--mono); font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.figs b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.8rem; color: var(--ink); line-height: 1; }
.hint { font-family: var(--mono); font-size: .72rem; color: var(--muted); letter-spacing: .08em; }
.src { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.status { position: fixed; left: 16px; bottom: 12px; margin: 0; font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.error { color: #f3b4a6; font-family: var(--mono); padding: 16px; }
@media (max-width: 760px) {
  .step { align-items: flex-end; padding-bottom: 5vh; }
  .hero { align-items: flex-start; padding-top: 5vh; }
  .card, .hero .card { max-width: none; }
}