/* Shared visual vocabulary. Content is visible before and without JavaScript. */
:where(.visual-article,.visual-page,.home-page,.notes-library){--v-sage:#b8dbba;--v-violet:#bdb7ff;--v-warm:#e4c18b;--v-panel:#151512;--v-frame:#47463f;--v-ease:cubic-bezier(.2,.75,.2,1)}
.visual-article .reading{max-width:960px}
.visual-article .reading>p,.visual-article .reading>ul,.visual-article .reading>ol,.visual-article .reading>blockquote{max-width:760px}
.visual-article .article-toc{padding:24px 0;border:0;border-block:1px solid var(--line);margin:32px 0 42px}
.visual-article .article-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 30px}
.v-panel{position:relative;margin:30px 0;padding:28px 30px;border:1px solid var(--v-frame,#47463f);background:var(--v-panel,#151512)}
.v-panel::before{content:"";position:absolute;top:28px;left:-1px;width:3px;height:40px;background:var(--red)}
.reading .v-eyebrow,.v-eyebrow{margin:0 0 12px;font:13px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.reading .v-note,.v-note{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:760px}
.v-panel figcaption,.v-panel>h3{font-size:clamp(22px,2.5vw,29px);font-weight:500;line-height:1.25;letter-spacing:-.02em;margin:0 0 24px}
.v-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}
.v-flow>.v-node{position:relative;min-width:0;margin:0;padding:20px 0 0;border-top:2px solid var(--v-sage,#b8dbba)}
.v-flow>.v-node+.v-node::before{content:"→";position:absolute;left:-23px;top:18px;color:var(--muted)}
.v-node h3,.v-node h4{margin:0 0 10px;font-size:19px;font-weight:500;line-height:1.35}
.v-node p{margin:0;font-size:16px;line-height:1.6}
.v-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-block:1px solid var(--line);margin:26px 0}
.v-compare>*{min-width:0;padding:24px 26px 24px 0}
.v-compare>*+*{padding:24px 0 24px 26px;border-left:1px solid var(--line)}
.v-compare h3,.v-compare h4{margin:0 0 12px;font-size:21px;line-height:1.35;font-weight:500}
.v-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.55}
.v-table th,.v-table td{padding:18px 20px 18px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.v-table thead th{font:13px/1.5 var(--mono);text-transform:uppercase;color:var(--muted)}
.v-table tbody th{font-weight:500}
.v-checklist{padding:0;list-style:none;display:grid;gap:12px;margin:24px 0}
.v-checklist>li{position:relative;margin:0;padding:12px 0 12px 32px;border-bottom:1px solid var(--line);font-size:17px;line-height:1.55}
.v-checklist>li::before{content:"";position:absolute;left:2px;top:20px;width:10px;height:6px;border-left:2px solid var(--v-sage,#b8dbba);border-bottom:2px solid var(--v-sage,#b8dbba);transform:rotate(-45deg)}
[data-visual]{scroll-margin-top:92px}
@media(prefers-reduced-motion:no-preference){.v-enter [data-step]{animation:v-settle .65s var(--v-ease,cubic-bezier(.2,.75,.2,1)) both;animation-delay:var(--v-delay,0ms)}.v-enter:not(:has([data-step])){animation:v-settle .65s ease both}@keyframes v-settle{from{opacity:.55;transform:translateY(12px)}to{opacity:1;transform:none}}}
@media(max-width:650px){.visual-article .article-toc ol{grid-template-columns:1fr}.v-panel{padding:24px 18px}.v-flow,.v-compare{grid-template-columns:1fr}.v-flow{gap:24px}.v-flow>.v-node+.v-node::before{content:none}.v-compare>*{padding:22px 0}.v-compare>*+*{padding:22px 0;border-left:0;border-top:1px solid var(--line)}.v-note{font-size:14px}.v-table{font-size:15px}.v-table th,.v-table td{padding-right:12px}}
@media print{[data-visual],[data-step]{animation:none!important;opacity:1!important;transform:none!important}.v-panel{background:none;color:#111;border-color:#999;break-inside:avoid}.v-note,.v-eyebrow{color:#333}.v-panel::before{display:none}.v-flow,.v-compare{break-inside:avoid}}