:root{--navy:#1f3a5f;--navy2:#2b4d7a;--ink:#1a1d21;--muted:#5a626b;--bg:#faf9f7;--card:#fff;--line:#e4e1db;--red:#c0392b}
/* Hemodynamic variable colours. These are not a design choice: they are read
   out of the cell shading Neal applied himself in the N5 edit doc, which is the
   table he points at when he writes "the same colors I used for parameters in
   N5". One colour per variable, not per role.
   Each has an -ink pair. The raw fill is faithful to his document and is what
   the underline rule uses; most of them fail contrast as text on white, so the
   -ink form carries the same hue darkened enough to read. Never set text in a
   raw fill; never set a rule in an -ink. */
:root{--v-map:#EE0000;--v-map-ink:#C00000;
      --v-co:#FFC000;--v-co-ink:#8F6400;
      --v-rap:#00B050;--v-rap-ink:#00753A;
      --v-papm:#000000;--v-papm-ink:#000000;
      --v-lap:#F058CD;--v-lap-ink:#B01E90;
      --v-svr:#00B0F0;--v-svr-ink:#006B96;
      --insight:#16706B}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6;font-size:17px}
a{color:var(--navy2);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:820px;margin:0 auto;padding:0 22px}
header.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:5;box-shadow:0 2px 0 var(--red)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-weight:700;letter-spacing:.5px;font-size:19px;color:#fff;border-left:3px solid var(--red);padding-left:10px}
.brand span{opacity:.65;font-weight:400;font-size:13px;margin-left:10px;padding-left:10px;border-left:1px solid rgba(255,255,255,.3)}
.levelchip{background:var(--red);color:#fff;font-size:12px;font-weight:600;padding:4px 11px;border-radius:20px}
.levelchip.informed{background:var(--navy2)}
.stepper{background:#fff;border-bottom:1px solid var(--line)}
.stepper .wrap{display:flex;gap:6px;overflow-x:auto;padding:10px 22px}
.step{white-space:nowrap;font-size:12.5px;color:var(--muted);padding:5px 10px;border-radius:16px;border:1px solid var(--line)}
.step.active{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:600}
.step.done{color:var(--navy2);border-color:#cdd6e2}
.step.off{color:#b7bcc2;border-style:dashed}
/* Grouped stepper, for the Informed pathway. Seventeen pills do not fit one row,
   and a scrolling strip hides both the length of the pathway and which modules
   are built. Grouping shows all of it and makes the shape legible: three
   foundations, seven interfaces, six on monitoring, one to apply. Novice keeps
   the single row, where eight steps fit without scrolling. Chosen 2026-08-04. */
.stepper.grouped .wrap{display:block;overflow-x:visible;padding:12px 22px}
.stepgroup{display:flex;align-items:center;gap:12px;margin:7px 0}
.stepgroup .glabel{flex:0 0 176px;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.9px;text-align:right}
.stepgroup .gsteps{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:820px){.stepgroup{display:block}.stepgroup .glabel{text-align:left;margin-bottom:5px}}
main{padding:34px 0 10px}
.eyebrow{color:var(--red);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin:0 0 6px}
h1{font-size:31px;line-height:1.2;margin:0 0 14px}
h2{font-size:21px;margin:30px 0 8px;color:var(--navy);border-left:4px solid var(--red);padding-left:11px}
p{margin:0 0 14px}.lead{font-size:19px;color:#33383e}
.eq{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);padding:14px 18px;border-radius:6px;font-size:19px;margin:16px 0;font-family:"Cambria Math",Georgia,serif}
.eq small{display:block;color:var(--muted);font-size:13px;margin-top:6px;font-family:inherit}
.callout{border:1px solid var(--line);border-left:5px solid #c9862b;background:#fdf6ea;border-radius:6px;padding:14px 18px;margin:18px 0}
.callout .tag{font-size:12px;font-weight:700;color:#c9862b;text-transform:uppercase;letter-spacing:1px}
.callout a.detour{font-weight:600}.newtab{font-size:12px;color:var(--muted)}
.callout .abicon{width:34px;height:auto;vertical-align:-10px;margin-right:9px}
.callout .busimg{display:block;max-width:420px;width:100%;height:auto;margin:14px auto 2px}
.recap{font-size:14.5px;color:#3f4650;background:#eef2f7;border-left:4px solid var(--navy2);border-radius:0 6px 6px 0;padding:9px 15px;margin:0 0 22px}
.recap b{color:var(--navy)}
.bridge{background:#fff8ee;border:1px solid #e7d7b8;border-radius:8px;padding:13px 18px;margin:24px 0 2px}
.bridge .q{font-size:11.5px;font-weight:700;color:#c9862b;text-transform:uppercase;letter-spacing:1px}
.bridge p{margin:5px 0 0;font-size:16px}
.bus{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.bus .box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px}
.bus .l{font-size:26px;font-weight:800;color:var(--navy)}.bus .t{font-weight:600;margin:2px 0 4px}.bus .d{font-size:14px;color:var(--muted)}
table.grid{border-collapse:collapse;width:100%;margin:16px 0;font-size:14px;background:#fff}
table.grid th,table.grid td{border:1px solid var(--line);padding:7px 9px;text-align:center}
table.grid th{background:var(--navy);color:#fff;font-weight:600}
table.grid td.rh{text-align:left;font-weight:700;background:#f4f6f9}
/* Shock-grid arrows. Neal asked for one colour rather than red for up and green
   for down, 2026-08-04. Applied site-wide, not just N5, since the same grid
   appears on N3, N6 and N8 and a per-page split would read as a mistake. */
.up,.dn,.eqm{color:var(--ink);font-weight:700}
.figframe{border:2px dashed #c8a0a0;border-radius:8px;background:#fdf7f6;color:#8a6b6b;padding:26px 16px;text-align:center;margin:20px 0;font-size:14px}
.figframe b{color:var(--red)}.figframe .src{display:block;font-size:12px;color:#a98;margin-top:6px}
.fig{margin:20px 0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;text-align:center}
.fig img{max-width:520px;width:100%;height:auto;border-radius:4px}
.fig img.w400{max-width:400px}
.fig img.w640{max-width:640px}
.fig img.wfull{max-width:100%}
.figpair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.figpair img{max-width:100%;width:100%;height:auto;border-radius:4px}
@media(max-width:640px){.figpair{grid-template-columns:1fr}}
.callout.insight{border-left-color:var(--insight);background:#eef6f5}
.callout.insight .tag{color:var(--insight);display:inline-block;vertical-align:middle;margin-right:9px}
.callout .insighticon{width:34px;height:auto;vertical-align:-10px;margin-right:9px}
/* One class per hemodynamic variable, matching Neal's own shading. Text takes
   the -ink form, the underline rule takes the raw fill.
   These must out-specify `table.grid th`, which sets color:#fff. Selecting on
   `th.v-co` alone loses that tie and renders white on white. */
table.grid th.v-map,table.grid td.v-map{color:var(--v-map-ink)}
table.grid th.v-co,table.grid td.v-co{color:var(--v-co-ink)}
table.grid th.v-rap,table.grid td.v-rap{color:var(--v-rap-ink)}
table.grid th.v-papm,table.grid td.v-papm{color:var(--v-papm-ink)}
table.grid th.v-lap,table.grid td.v-lap{color:var(--v-lap-ink)}
table.grid th.v-svr,table.grid td.v-svr{color:var(--v-svr-ink)}
table.grid th.v-map,table.grid th.v-co,table.grid th.v-rap,table.grid th.v-papm,table.grid th.v-lap,table.grid th.v-svr{background:#fff;border-bottom:3px solid}
table.grid th.v-map{border-bottom-color:var(--v-map)}
table.grid th.v-co{border-bottom-color:var(--v-co)}
table.grid th.v-rap{border-bottom-color:var(--v-rap)}
table.grid th.v-papm{border-bottom-color:var(--v-papm)}
table.grid th.v-lap{border-bottom-color:var(--v-lap)}
table.grid th.v-svr{border-bottom-color:var(--v-svr)}
/* Subheads. Added 2026-08-03 with N7-T2's Troubleshooting section, the first
   use of h3 on the site. Sits deliberately below h2, which carries the red rule. */
main h3{font-size:17px;font-weight:700;color:var(--navy);margin:22px 0 4px}
/* Body lists. Added 2026-08-03 when N7-T1's complication list became the first
   prose <ul> on the site and fell through to browser defaults (40px indent,
   tighter leading than the surrounding paragraphs). Scoped to main so the
   stepper, pager and refs lists keep their own rules. */
main ul,main ol:not(.refs ol){margin:12px 0;padding-left:22px}
main li{margin-bottom:5px}
.closing{margin-top:22px}
.fig figcaption{font-size:13.5px;color:#4a4f56;margin-top:8px;text-align:left}
.fig figcaption .src{display:block;color:#9aa0a7;font-style:italic;font-size:12px;margin-top:3px}
.refs{margin-top:34px;border-top:1px solid var(--line);padding-top:12px}
.refs h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.refs ol{margin:0;padding-left:20px;color:var(--muted);font-size:13px}.refs li{margin-bottom:3px}
.attrib{font-size:12px;color:#8a8f96;margin-top:8px;font-style:italic}
.pager{display:flex;justify-content:space-between;gap:12px;margin:30px 0 10px}
.pg{flex:1;border:1px solid var(--line);background:#fff;border-radius:8px;padding:12px 16px;display:block}
.pg:hover{border-color:var(--navy2);text-decoration:none}.pg .k{font-size:12px;color:var(--muted)}.pg .v{font-weight:700;color:var(--navy)}
.pg.next{text-align:right}.pg.disabled{opacity:.5;pointer-events:none}
.hero{position:relative;background:#1f3a5f}
.hero .herobg{display:block;width:100%;height:auto}
.hero .herotext{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;color:#fff}
.hero .herotext::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,33,50,.62),rgba(18,33,50,.24) 42%,transparent 62%);pointer-events:none}
.hero .herotext .wrap{width:100%;position:relative;z-index:1}
.hero h1{color:#fff;font-size:clamp(34px,5.2vw,54px);margin:0;letter-spacing:.5px;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.hero h1 span{color:#ff8a7a}
.hero p{opacity:.94;font-size:clamp(15px,1.7vw,18px);max-width:520px;margin:12px 0 0;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
.lvl{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px;display:block}
.lvl.active{border:2px solid var(--navy);box-shadow:0 4px 18px rgba(31,58,95,.1)}
.lvl .name{font-size:19px;font-weight:700;color:var(--navy)}.lvl .desc{font-size:14px;color:var(--muted);margin:6px 0 12px}
.lvl .go{display:inline-block;background:var(--navy);color:#fff;padding:8px 16px;border-radius:6px;font-weight:600;font-size:14px}
.lvl.soon{opacity:.6}.lvl.soon .go{background:#c9ccd1}
.pilotbar{background:#fff4d6;border:1px solid #e7d08a;color:#6b551d;font-size:13.5px;padding:10px 16px;border-radius:8px;margin:20px 0}
footer.site{margin:40px 0 60px;color:#9aa0a7;font-size:12.5px;text-align:center}
.ribbon{position:fixed;bottom:14px;right:14px;background:var(--red);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;padding:6px 12px;border-radius:20px;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.2)}
@media(max-width:640px){.cards,.bus{grid-template-columns:1fr}}