:root {
  --lime: #ecf86e;
  --ink: #0a0a0a;
  --ink-raised: #151515;
  --line: #2b2b2b;
  --text: #e8e8e8;
  --muted: #aaa;
  --font-head: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: Geist, system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--text); font: 16px/1.6 var(--font-body); }
a { color: var(--lime); }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: var(--font-head); line-height: 1.04; letter-spacing: -0.035em; }
.hero, main, footer { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
.hero { padding: 4.5rem 0 2.5rem; border-bottom: 1px solid var(--line); }
.eyebrow, .step-number { color: var(--lime); font-size: .75rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.hero h1 { max-width: 13ch; margin-bottom: .7rem; font-size: clamp(3rem, 10vw, 6.5rem); }
.tagline { max-width: 42rem; color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.35rem); }
.preview-notice, .callout { padding: .85rem 1rem; border-radius: .5rem; }
.preview-notice { display: inline-block; background: #272727; color: var(--muted); font-size: .92rem; }
.intro { padding: 2rem 0 .5rem; color: var(--muted); }
.status { color: var(--lime); font-size: .92rem; }
.stap, .morning-report { padding: 2.75rem 0; border-bottom: 1px solid var(--line); }
.stap h2, .morning-report h2 { margin-bottom: 1rem; font-size: clamp(1.8rem, 5vw, 2.8rem); }
.uitleg p:last-child, .report-content p:last-child { margin-bottom: 0; }
.callout { margin: 1.3rem 0; background: var(--lime); color: var(--ink); }
.artefact { position: relative; margin-top: 1.25rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--ink-raised); overflow: auto; }
.artefact pre { margin: 0; padding: 1.25rem 5.8rem 1.25rem 1.25rem; color: var(--text); font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
.copy { position: absolute; top: .65rem; right: .65rem; border: 0; border-radius: .3rem; padding: .45rem .65rem; background: var(--lime); color: var(--ink); cursor: pointer; font: 600 .82rem var(--font-body); }
.checkpoint { display: flex; align-items: center; gap: .8rem; margin-top: 1.5rem; color: var(--text); cursor: pointer; font-weight: 600; }
.checkpoint input { width: 1.35rem; height: 1.35rem; accent-color: var(--lime); }
.report-content { padding: 1.2rem; border-left: 3px solid var(--lime); background: var(--ink-raised); color: var(--muted); }
footer { padding: 2rem 0 3rem; color: var(--muted); font-size: .875rem; }
@media (max-width: 480px) { .hero, main, footer { width: min(100% - 2rem, 760px); } .hero { padding-top: 3rem; } }