/* GodModeReader — shared base styles.  Pages add their own on top. */
:root {
  --bg: #fff; --ink: #1a1a1a; --muted: #5f6368; --line: #e6e6e6; --soft: #fff5f5;
  --red: #e53935; --red-dark: #c62828;
  --stage-bg: #000; --stage-text: #fff; --stage-pivot: #e53935; --stage-tick: #333;
  --mono: "SF Mono", "Cascadia Mono", "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box }
html { color-scheme: light }
body { margin: 0; font: 17px/1.55 var(--sans); color: var(--ink); background: var(--bg) }
a { color: var(--red) }
.wrap { max-width: 60em; margin: 0 auto; padding: 0 1.2em }
header.site { display: flex; align-items: center; justify-content: space-between; padding: 1em 0; gap: 1em; flex-wrap: wrap }
.brand { display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: 1.15em; color: var(--ink); text-decoration: none }
.brand .mark { font-family: var(--mono); font-weight: 700; letter-spacing: .02em }
.brand .mark b { color: var(--red); font-weight: 700 }
nav a { color: var(--muted); text-decoration: none; margin-left: 1.3em; font-size: .95em }
nav a:hover { color: var(--ink) }
h1 { font-size: 2.6em; line-height: 1.1; margin: 0 0 .4em; letter-spacing: -.01em }
h1 em { font-style: normal; color: var(--red) }
h2 { font-size: 1.5em; margin: 2em 0 .5em }
.lead { font-size: 1.2em; color: var(--muted); margin: 0 0 1.3em }
.muted { color: var(--muted) }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: .6em; background: var(--red); color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1em; padding: .8em 1.5em; border-radius: 10px; box-shadow: 0 6px 18px rgba(229,57,53,.28); border: 0; cursor: pointer }
.cta:hover { background: var(--red-dark) }
.cta.quiet { background: transparent; color: var(--ink); box-shadow: none; border: 1px solid var(--line) }
.cta.quiet:hover { background: var(--soft) }
footer.site { border-top: 1px solid var(--line); margin-top: 3em; padding: 1.5em 0 2.5em; color: var(--muted); font-size: .9em }
footer.site a { color: var(--muted) }
/* the stage: one word, pivot letter fixed at the anchor (specs/app.md §3) */
.stage { position: relative; background: var(--stage-bg); color: var(--stage-text); border-radius: 14px; overflow: hidden; font-family: var(--mono); font-size: clamp(28px, 6vw, 56px); user-select: none }
.stage .word { position: absolute; left: 50%; top: 45%; transform: translateY(-50%); white-space: pre; display: flex }
.stage .pivot { color: var(--stage-pivot) }
.stage .tick { position: absolute; left: 50%; width: 2px; margin-left: -1px; background: var(--stage-tick); height: 12% }
.stage .tick.top { top: 0 } .stage .tick.bottom { bottom: 0 }
.spam-hint { font-size: .9em; color: var(--muted); margin: 0 0 1.2em }
.spam-hint:empty { display: none }
.spam-hint p { margin: 4px 0 }
.spam-hint code { user-select: all; overflow-wrap: anywhere }