/* MyVascNotes guide pages - plain, fast, same palette as the generator. */
:root{--bg:#0f1318;--surface:#181d24;--surface-2:#1e252e;--text:#e2e8f0;--muted:#9fb0c4;
 --border:#2a3444;--accent:#5b9bf0;--mint:#2CE3A0;--warn:#f0b357}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.65;
 font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent)}
main{max-width:820px;margin:0 auto;padding:0 20px 64px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
 max-width:820px;margin:0 auto;padding:16px 20px;border-bottom:1px solid var(--border)}
.brand{font-size:19px;font-weight:600;color:var(--text);text-decoration:none;letter-spacing:-.01em}
.brand b{color:var(--accent)}
.cta{display:inline-block;background:var(--accent);color:#07121f;font-weight:650;text-decoration:none;
 padding:9px 16px;border-radius:7px;font-size:14px}
.cta:hover{background:#7db0f5}
.cta.big{padding:13px 22px;font-size:16px}
.byline{color:var(--muted);font-size:14px;margin:-6px 0 18px}
.crumb{font-size:13px;color:var(--muted);margin:22px 0 6px}
.crumb a{color:var(--muted)}
h1{font-size:clamp(25px,4.4vw,34px);line-height:1.2;letter-spacing:-.02em;margin:.2em 0 .45em}
h2{font-size:21px;line-height:1.3;margin:2.1em 0 .5em;letter-spacing:-.01em}
h3{font-size:16.5px;margin:1.7em 0 .4em}
p,li{font-size:16px}
.answer{font-size:18px;line-height:1.6;color:var(--text);background:var(--surface);
 border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:14px 18px;margin:0 0 26px}
.lede{color:var(--muted);font-size:14.5px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
 background:var(--surface-2);padding:1px 5px;border-radius:4px}
table.codes{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:14.5px}
table.codes th,table.codes td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
table.codes th{color:var(--muted);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
table.codes td.c{font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap;font-weight:600}
table.codes tr.hi td{background:rgba(91,155,240,.10)}
table.codes tr.hi td.c{color:var(--accent)}
pre.note{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px;
 overflow-x:auto;white-space:pre-wrap;word-wrap:break-word;font-size:13px;line-height:1.55;
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#cfdcea}
details{margin:14px 0 22px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
summary{cursor:pointer;padding:11px 15px;font-size:14.5px;font-weight:600;color:var(--accent)}
details[open] summary{border-bottom:1px solid var(--border)}
details pre.note{border:0;border-radius:0;margin:0;background:transparent}
.disc,.warn{border-radius:8px;padding:14px 18px;margin:26px 0;font-size:14.5px;line-height:1.6}
.disc{background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.disc strong{color:var(--text)}
.warn{background:rgba(240,179,87,.08);border:1px solid rgba(240,179,87,.35);color:#e8d3ad}
.warn strong{color:var(--warn)}
ul.codelist{padding-left:20px}
ul.codelist li{margin:5px 0;font-size:14.5px}
ul.check{padding-left:20px}
ul.check li{margin:7px 0}
.tool{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px 22px;margin:34px 0 10px}
.tool h2{margin-top:0}
.more ul{padding-left:20px}
.more li{margin:6px 0}
footer{border-top:1px solid var(--border);margin-top:40px;padding:22px 20px 40px;max-width:820px;
 margin-left:auto;margin-right:auto;color:var(--muted);font-size:13.5px}
footer .fine{font-size:12px;line-height:1.6}
@media (max-width:620px){main{padding:0 16px 48px}.top{padding:14px 16px}}