:root { color-scheme: light; --ink:#243444; --muted:#526273; --amber:#8a600a; --line:#cbd5df; --paper:#edf1f5; }
* { box-sizing:border-box; }
html { scroll-padding-top:1.5rem; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:#314c65; text-underline-offset:.2em; }
a:hover { color:#111e2b; }
:focus-visible { outline:3px solid #9a6500; outline-offset:5px; }
.test-banner { padding:.7rem 1rem; background:#f4ca6a; color:#372c16; text-align:center; font-size:.88rem; font-weight:700; }
main { max-width:1380px; margin:auto; padding:0 3rem; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(2.4rem,4.5vw,4.2rem); line-height:1.09; letter-spacing:-.045em; margin:1rem 0 1.4rem; }
h2 { font-size:1.75rem; line-height:1.25; letter-spacing:-.025em; margin-bottom:1rem; }
p+p { margin-top:1rem; }
.intro { padding:3.5rem 0 2.5rem; max-width:830px; }
.intro p:not(.eyebrow) { max-width:740px; }
.eyebrow,.role-label { font-size:.76rem; text-transform:uppercase; font-weight:750; letter-spacing:.1em; color:var(--muted); }
.lede { font-size:1.22rem; color:#374c60; }
.intro .button { margin-top:1.7rem; }
.button { display:inline-block; background:#334155; color:white; border:1px solid #334155; border-radius:5px; padding:.8rem 1rem; font:inherit; font-weight:650; text-decoration:none; text-align:center; }
.button:hover { background:#1e293b; color:white; }
.button:disabled { background:#e2e8f0; border-color:#aebbc8; color:#526273; cursor:not-allowed; }
.journey-nav { display:flex; flex-wrap:wrap; border-block:1px solid var(--line); padding:1.1rem 0; gap:1rem 2.2rem; }
.journey-nav a { text-decoration:none; font-weight:650; }
.journey-nav span { color:var(--amber); margin-right:.4rem; }
.reading-note { color:var(--muted); font-size:.9rem; margin:1.3rem 0; max-width:880px; }
.stage { display:grid; grid-template-columns:minmax(230px, .32fr) minmax(0,1fr); gap:1.8rem; padding:3rem 0; border-bottom:1px solid var(--line); align-items:start; }
.explanation { min-width:0; }
.step { color:var(--amber); font-size:2.6rem; font-weight:750; line-height:1; margin-bottom:1.5rem; }
.explanation h3 { text-transform:uppercase; font-size:.73rem; letter-spacing:.08em; color:var(--muted); margin:1.6rem 0 .8rem; }
.explanation p { font-size:.95rem; }
.explanation .step { font-size:2.6rem; }
.click { background:#fff5d9; border-left:4px solid #bf902d; padding:1rem; margin:1.4rem 0; }
.click h3 { margin:0 0 .4rem; color:#564217; }
.screen { min-width:0; margin:0; background:white; border:1px solid var(--line); border-radius:8px; padding:.8rem; }
.screen figcaption { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; font-size:.72rem; color:var(--muted); margin-bottom:.7rem; }
.screen figcaption span { text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.screen figcaption a { font-size:.8rem; padding:.3rem 0; }
.screen img { display:block; width:100%; height:auto; }
.section-heading { padding:3rem 0 0; max-width:850px; }
.section-heading .eyebrow { margin-bottom:.8rem; }
.role-stage { padding-top:2rem; }
.role-label { margin-bottom:.8rem; }
.environment { display:inline-block; background:#fff5d9; border:1px solid #d6b767; padding:.55rem .9rem; border-radius:4px; }
.paths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; margin:1.5rem 0; }
.path { display:flex; flex-direction:column; align-items:flex-start; padding:1.5rem; background:white; border:1px solid var(--line); border-top:4px solid #64748b; border-radius:7px; }
.path h3 { font-size:1.3rem; line-height:1.3; margin-bottom:.8rem; }
.path .button { margin-top:auto; }
.path>p:not(.role-label) { margin-bottom:1.2rem; }
.off { color:#62480d; background:#fff5d9; padding:.7rem; font-size:.9rem; }
.notice { padding:1rem; background:#fff5d9; border-left:4px solid #bf902d; margin-top:1.5rem; }
.notice.ok { background:#dcfce7; border-color:#166534; }
.shortcut { border:1px solid var(--line); background:white; padding:1.5rem; margin:2rem 0; }
.stack label { display:block; margin:1rem 0; }
.stack input { display:block; width:100%; max-width:24rem; padding:.6rem; font:inherit; border:1px solid #64748b; border-radius:4px; }
footer { color:var(--muted); font-size:.85rem; border-top:1px solid var(--line); padding:1.5rem 0 3rem; margin-top:3rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:760px) {
 main { padding:0 1.1rem; }
 .intro { padding-top:2.2rem; }
 .journey-nav { display:grid; grid-template-columns:1fr 1fr; gap:1rem; font-size:.85rem; }
 .stage { grid-template-columns:minmax(0,1fr); gap:1.5rem; padding:2rem 0; }
 .explanation .step { margin-bottom:1rem; }
 .paths { grid-template-columns:minmax(0,1fr); }
 .screen { padding:.5rem; }
 .screen figcaption { align-items:flex-start; }
 .button { max-width:100%; }
}