/*
  RicherNews Article Visual System — v2.0 "paper dossier"
  Shared visual vocabulary for long-form editorial pages.
  Palette matches the house article style: warm paper neutrals, ink-blue
  accent, mono evidence labels, flat borders over heavy shadows.
  All classes are prefixed rn-viz- to avoid collisions with legacy articles.
*/

.rn-viz-page,
.rn-article-page {
  --viz-page:#f8f5ec;
  --viz-surface:#fffdf9;
  --viz-tint:#f6f2e9;
  --viz-ink:#1d2433;
  --viz-soft:#4d586b;
  --viz-faint:#848ea0;
  --viz-rule:#e6e1d4;
  --viz-rule-strong:#cdc6b4;
  --viz-navy:#16233f;
  --viz-blue:#2b4a8b;
  --viz-blue-soft:#e9edf6;
  --viz-onaccent:#ffffff;
  --viz-gold:#f2c14e;
  --viz-gold-deep:#8a6100;
  --viz-gold-soft:#fbf1dc;
  --viz-red:#b3261e;
  --viz-red-soft:#fbeae8;
  --viz-green:#1f7a4d;
  --viz-green-soft:#e8f5ee;
  --viz-purple:#6d5a93;
  --viz-purple-soft:#eeeaf5;
  --viz-shadow:0 1px 3px rgba(29,36,51,.05), 0 12px 30px -22px rgba(29,36,51,.22);
  --viz-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --viz-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --viz-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --viz-hand:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  --viz-script:"Segoe Script","Brush Script MT",cursive;
}

.rn-viz-page {
  color:var(--viz-ink);
  background:var(--viz-page);
  font-family:var(--viz-sans);
  font-size:17px;
  line-height:1.68;
}

.rn-viz-page[data-theme="dark"],
.rn-article-page[data-theme="dark"] {
  --viz-page:#0d1219;
  --viz-surface:#131a24;
  --viz-tint:#1a2230;
  --viz-ink:#e9edf2;
  --viz-soft:#b4bec9;
  --viz-faint:#97a3b2;
  --viz-rule:#27313d;
  --viz-rule-strong:#3b4653;
  --viz-navy:#0c1523;
  --viz-blue:#8db2e8;
  --viz-blue-soft:#1c2a40;
  --viz-onaccent:#0d1420;
  --viz-gold:#e8c06b;
  --viz-gold-deep:#e8c06b;
  --viz-gold-soft:#241c0e;
  --viz-red:#f2887f;
  --viz-red-soft:#2a1614;
  --viz-green:#79d0a1;
  --viz-green-soft:#14251c;
  --viz-purple:#b9a5d9;
  --viz-purple-soft:#241d33;
  --viz-shadow:0 1px 3px rgba(0,0,0,.4), 0 16px 40px -26px rgba(0,0,0,.8);
}

.rn-viz-page *,
.rn-viz-page *::before,
.rn-viz-page *::after { box-sizing:border-box; }

/* Embedding shared components inside article pages (.rn-article-page):
   spacing wrapper, plus !important shields against article-level p rules. */
.rn-viz-embed { margin:30px 0; }
.rn-article-page .rn-viz-caption { margin:0 !important; color:var(--viz-faint) !important; font:11px/1.5 var(--viz-mono) !important; }
.rn-article-page .rn-viz-source-quote p { margin:8px 0 0 !important; color:var(--viz-ink) !important; font:17px/1.52 var(--viz-serif) !important; }
.rn-article-page .rn-viz-quiz summary { color:var(--viz-ink) !important; }

.rn-viz-shell { max-width:1180px; margin:0 auto; padding:34px 24px 80px; }
.rn-viz-header { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; padding:34px 0 28px; border-bottom:2px solid var(--viz-ink); }
.rn-viz-kicker { display:flex; align-items:center; gap:11px; margin:0 0 12px; color:var(--viz-blue); font:800 11px/1.2 var(--viz-mono); letter-spacing:.16em; text-transform:uppercase; }
.rn-viz-kicker::after { content:""; flex:1; max-width:120px; height:1px; background:var(--viz-rule-strong); }
.rn-viz-header h1 { max-width:16ch; margin:0; color:var(--viz-ink); font:600 clamp(36px,6.6vw,66px)/1.02 var(--viz-serif); letter-spacing:-.022em; }
.rn-viz-intro { max-width:62ch; margin:18px 0 0; color:var(--viz-soft); font:italic 19px/1.55 var(--viz-serif); }
.rn-viz-theme { display:inline-flex; align-items:center; gap:8px; align-self:start; border:1px solid var(--viz-rule-strong); border-radius:999px; padding:9px 14px; color:var(--viz-soft); background:var(--viz-surface); font:700 11px/1 var(--viz-sans); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.rn-viz-theme:hover { border-color:var(--viz-blue); color:var(--viz-blue); }
.rn-viz-nav { position:sticky; top:64px; z-index:20; display:flex; gap:8px; overflow-x:auto; margin:0 -24px 34px; padding:12px 24px; border-bottom:1px solid var(--viz-rule); background:color-mix(in srgb,var(--viz-page) 92%,transparent); backdrop-filter:blur(14px); }
.rn-viz-nav a { flex:0 0 auto; padding:7px 12px; border:1px solid var(--viz-rule); border-radius:999px; color:var(--viz-soft); background:var(--viz-surface); font:700 11px/1 var(--viz-sans); text-decoration:none; white-space:nowrap; }
.rn-viz-nav a:hover { color:var(--viz-onaccent); border-color:var(--viz-blue); background:var(--viz-blue); }
.rn-viz-section { margin:58px 0 0; scroll-margin-top:130px; }
.rn-viz-section-head { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline; margin:0 0 22px; }
.rn-viz-section-no { color:var(--viz-blue); font:800 30px/1 var(--viz-mono); letter-spacing:-.04em; }
.rn-viz-section h2 { margin:0; color:var(--viz-ink); font:600 clamp(27px,4vw,40px)/1.05 var(--viz-serif); letter-spacing:-.015em; }
.rn-viz-section-head p { grid-column:2; margin:2px 0 0; color:var(--viz-soft); font:italic 15px/1.5 var(--viz-serif); }
.rn-viz-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.rn-viz-demo { position:relative; min-width:0; overflow:hidden; border:1px solid var(--viz-rule); border-radius:12px; background:var(--viz-surface); box-shadow:var(--viz-shadow); animation:rnVizEnter .55s both cubic-bezier(.2,.7,.2,1); animation-delay:calc(var(--viz-order,0) * 35ms); }
.rn-viz-demo-wide { grid-column:1 / -1; }
.rn-viz-demo-head { display:flex; align-items:center; gap:10px; min-height:46px; padding:10px 15px; border-bottom:1px solid var(--viz-rule); background:var(--viz-tint); }
.rn-viz-demo-no { color:var(--viz-blue); font:800 11px/1 var(--viz-mono); }
.rn-viz-demo-title { color:var(--viz-ink); font:700 13px/1.2 var(--viz-sans); }
.rn-viz-demo-use { margin-left:auto; color:var(--viz-faint); font:10px/1 var(--viz-mono); text-transform:uppercase; letter-spacing:.08em; }
.rn-viz-stage { min-height:172px; padding:22px; color:var(--viz-ink); background:var(--viz-surface); }
.rn-viz-stage > :last-child { margin-bottom:0; }
.rn-viz-caption { margin:0; color:var(--viz-faint); font:11px/1.5 var(--viz-mono); }

/* Shared primitives */
.rn-viz-label { display:inline-block; margin:0 0 8px; color:var(--viz-blue); font:800 10px/1.2 var(--viz-mono); letter-spacing:.12em; text-transform:uppercase; }
.rn-viz-pill { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--viz-rule); border-radius:999px; padding:5px 9px; color:var(--viz-soft); background:var(--viz-tint); font:700 11px/1 var(--viz-sans); }
.rn-viz-dot { width:7px; height:7px; border-radius:50%; background:var(--viz-blue); }
.rn-viz-good { color:var(--viz-green) !important; }
.rn-viz-bad { color:var(--viz-red) !important; }
.rn-viz-warn { color:var(--viz-gold-deep) !important; }
.rn-viz-mono { font-family:var(--viz-mono); }
.rn-viz-scroll { overflow-x:auto; overscroll-behavior-inline:contain; }
.rn-viz-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* 01-15: words and typography */
.rn-viz-dropcap { margin:0; font:19px/1.72 var(--viz-serif); }
.rn-viz-dropcap::first-letter { float:left; margin:6px 10px 0 0; color:var(--viz-blue); font:600 62px/.74 var(--viz-serif); }
.rn-viz-highlight { display:inline; padding:2px 4px; color:var(--viz-ink); background:linear-gradient(transparent 52%,var(--viz-gold) 52% 92%,transparent 92%); box-decoration-break:clone; }
.rn-viz-page[data-theme="dark"] .rn-viz-highlight { background:linear-gradient(transparent 52%,rgba(232,192,107,.42) 52% 92%,transparent 92%); }
.rn-viz-eyebrow-line { display:flex; align-items:center; gap:10px; margin:0; color:var(--viz-blue); font:800 11px/1 var(--viz-mono); letter-spacing:.15em; text-transform:uppercase; }
.rn-viz-eyebrow-line::after { content:""; flex:1; height:1px; background:var(--viz-rule-strong); }
.rn-viz-pull-sentence { margin:0; color:var(--viz-ink); font:600 clamp(24px,4vw,36px)/1.14 var(--viz-serif); letter-spacing:-.015em; }
.rn-viz-annotated { position:relative; display:inline-block; color:var(--viz-ink); font:600 27px/1.3 var(--viz-serif); text-decoration:underline wavy var(--viz-red) 2px; text-underline-offset:7px; }
.rn-viz-annotated::after { content:"\2196  " attr(data-note); position:absolute; left:14px; top:calc(100% + 9px); color:var(--viz-red); font:600 13px/1.2 var(--viz-hand); transform:rotate(-2deg); white-space:nowrap; }
.rn-viz-definition { display:grid; grid-template-columns:auto 1fr; gap:14px; margin:0; padding-left:14px; border-left:3px solid var(--viz-gold); }
.rn-viz-definition dt { color:var(--viz-blue); font:600 27px/1.1 var(--viz-serif); }
.rn-viz-definition dt em { display:block; margin-top:4px; color:var(--viz-faint); font:italic 12px/1.3 var(--viz-serif); }
.rn-viz-definition dd { margin:0; color:var(--viz-soft); font-size:14.5px; }
.rn-viz-redline { margin:0; color:var(--viz-faint); font:600 23px/1.28 var(--viz-serif); text-decoration:line-through 2.5px var(--viz-red); }
.rn-viz-correction { margin:8px 0 0; color:var(--viz-ink); font:600 26px/1.2 var(--viz-serif); }
.rn-viz-margin-note { max-width:280px; margin-left:auto; padding:10px 0 10px 14px; border-left:2px solid var(--viz-gold); color:var(--viz-soft); font:italic 14.5px/1.55 var(--viz-serif); }
.rn-viz-display { margin:0; color:var(--viz-ink); font:600 clamp(33px,6vw,56px)/1 var(--viz-serif); letter-spacing:-.025em; }
.rn-viz-deck { margin:0; color:var(--viz-soft); font:italic 21px/1.48 var(--viz-serif); }
.rn-viz-lead { margin:0; color:var(--viz-ink); font:19px/1.66 var(--viz-serif); }
.rn-viz-smallcaps { margin:0; color:var(--viz-soft); font:700 13px/1.6 var(--viz-sans); font-variant:small-caps; letter-spacing:.13em; }
.rn-viz-code { display:inline-block; border:1px solid var(--viz-rule); border-radius:5px; padding:2px 6px; color:var(--viz-purple); background:var(--viz-purple-soft); font:12px/1.4 var(--viz-mono); }
.rn-viz-key { display:inline-block; min-width:28px; margin:0 2px; border:1px solid var(--viz-rule-strong); border-bottom-width:3px; border-radius:6px; padding:4px 7px; color:var(--viz-ink); background:var(--viz-tint); font:700 11px/1 var(--viz-mono); text-align:center; }
.rn-viz-footnote { display:flex; gap:8px; color:var(--viz-faint); font:12.5px/1.55 var(--viz-sans); }
.rn-viz-footnote sup { color:var(--viz-blue); font:800 10px/1.4 var(--viz-mono); }

/* 16-25: quotes and voices */
.rn-viz-quote { margin:0; padding-left:18px; border-left:3px solid var(--viz-gold); color:var(--viz-ink); font:italic 24px/1.38 var(--viz-serif); }
.rn-viz-quote cite { display:block; margin-top:12px; color:var(--viz-faint); font:700 11px/1.3 var(--viz-sans); font-style:normal; text-transform:uppercase; letter-spacing:.1em; }
.rn-viz-person-quote { display:grid; grid-template-columns:54px 1fr; gap:16px; align-items:start; }
.rn-viz-avatar { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; color:#fff; background:var(--viz-navy); border:2px solid var(--viz-gold); box-shadow:0 0 0 3px var(--viz-gold-soft); font:600 18px/1 var(--viz-serif); }
.rn-viz-person-quote blockquote { margin:0; color:var(--viz-ink); font:italic 18px/1.48 var(--viz-serif); }
.rn-viz-person-quote blockquote::before { content:"\201C"; margin-right:2px; color:var(--viz-gold); font:700 1.3em/0 var(--viz-serif); font-style:normal; vertical-align:-.12em; }
.rn-viz-person-quote cite { display:block; margin-top:8px; color:var(--viz-faint); font:700 11px/1.2 var(--viz-sans); font-style:normal; text-transform:uppercase; letter-spacing:.07em; }
.rn-viz-person-quote cite::before { content:"\2014 "; color:var(--viz-rule-strong); }
.rn-viz-quote-card { position:relative; margin:0; padding:24px; border-radius:12px; color:#f4f1e8; background:var(--viz-navy); }
.rn-viz-quote-card::before { content:"\201C"; position:absolute; right:14px; top:-5px; color:var(--viz-gold); font:700 76px/1 var(--viz-serif); opacity:.55; }
.rn-viz-quote-card p { position:relative; max-width:85%; margin:0; font:600 20px/1.42 var(--viz-serif); }
.rn-viz-quote-wall { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rn-viz-quote-wall span { position:relative; padding:24px 12px 12px; border:1px solid var(--viz-rule); border-radius:8px; color:var(--viz-soft); background:var(--viz-tint); font:italic 13px/1.4 var(--viz-serif); }
.rn-viz-quote-wall span::before { content:"\201C"; position:absolute; left:10px; top:2px; color:var(--viz-gold); font:700 26px/1 var(--viz-serif); }
.rn-viz-quote-wall span:nth-child(2) { background:var(--viz-blue-soft); }
.rn-viz-quote-wall span:nth-child(3) { background:var(--viz-gold-soft); }
.rn-viz-opposed { position:relative; display:grid; grid-template-columns:1fr 1px 1fr; gap:18px; align-items:stretch; }
.rn-viz-opposed::before { content:""; grid-column:2; grid-row:1; background:var(--viz-rule-strong); }
.rn-viz-opposed::after { content:"VS"; position:absolute; left:50%; top:50%; padding:6px 8px; border-radius:999px; color:#f4f1e8; background:var(--viz-navy); font:800 9px/1 var(--viz-mono); letter-spacing:.06em; transform:translate(-50%,-50%); }
.rn-viz-opposed blockquote { margin:0; padding-left:12px; color:var(--viz-ink); font:italic 17px/1.48 var(--viz-serif); }
.rn-viz-opposed blockquote:first-child { border-left:3px solid var(--viz-blue); }
.rn-viz-opposed blockquote:last-child { grid-column:3; border-left:3px solid var(--viz-red); }
.rn-viz-source-quote { margin:0; padding:16px; border:1px dashed var(--viz-rule-strong); border-radius:10px; background:var(--viz-tint); }
.rn-viz-source-quote .source { color:var(--viz-blue); font:800 10px/1 var(--viz-mono); text-transform:uppercase; letter-spacing:.1em; }
.rn-viz-source-quote p { margin:8px 0 0; font:17px/1.52 var(--viz-serif); }
.rn-viz-transcript { display:grid; grid-template-columns:32px 1fr; gap:10px 12px; font-size:14px; }
.rn-viz-transcript b { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#f4f1e8; background:var(--viz-navy); font:800 11px/1 var(--viz-mono); }
.rn-viz-transcript b:nth-of-type(2) { color:var(--viz-blue); background:var(--viz-blue-soft); }
.rn-viz-transcript p { margin:0; padding-bottom:10px; border-bottom:1px dotted var(--viz-rule-strong); color:var(--viz-soft); }
.rn-viz-transcript p:last-child { padding-bottom:0; border-bottom:0; }
.rn-viz-testimony { position:relative; margin:0; padding:32px 20px 20px 52px; border-top:3px solid var(--viz-blue); background:var(--viz-blue-soft); font:17.5px/1.52 var(--viz-serif); }
.rn-viz-testimony::before { content:"\00A7"; position:absolute; left:18px; top:30px; color:var(--viz-blue); font:700 24px/1 var(--viz-serif); }
.rn-viz-testimony::after { content:"HEARING RECORD"; position:absolute; right:12px; top:8px; color:var(--viz-blue); font:800 9px/1 var(--viz-mono); letter-spacing:.14em; opacity:.7; }
.rn-viz-review { display:grid; gap:8px; padding:16px; border:1px solid var(--viz-rule); border-radius:10px; background:var(--viz-tint); }
.rn-viz-review .stars-row { display:flex; align-items:center; gap:10px; }
.rn-viz-stars { color:var(--viz-gold); font-size:18px; letter-spacing:2px; text-shadow:0 1px 0 var(--viz-gold-deep); }
.rn-viz-review .sc { padding:3px 8px; border-radius:5px; color:var(--viz-gold-deep); background:var(--viz-gold-soft); font:800 11px/1 var(--viz-mono); }
.rn-viz-review p { margin:0; font:italic 18px/1.48 var(--viz-serif); }
.rn-viz-review cite { color:var(--viz-faint); font:700 11px/1 var(--viz-sans); font-style:normal; text-transform:uppercase; letter-spacing:.07em; }
.rn-viz-quote-strip { display:flex; gap:10px; overflow-x:auto; padding-bottom:5px; scroll-snap-type:x proximity; }
.rn-viz-quote-strip blockquote { position:relative; flex:0 0 210px; margin:0; padding:26px 13px 13px; border:1px solid var(--viz-rule); border-top:3px solid var(--viz-blue); border-radius:10px; color:var(--viz-soft); background:var(--viz-tint); font:italic 13px/1.42 var(--viz-serif); scroll-snap-align:start; }
.rn-viz-quote-strip blockquote::before { content:"\201C"; position:absolute; left:11px; top:4px; color:var(--viz-gold); font:700 26px/1 var(--viz-serif); }
.rn-viz-quote-strip blockquote:nth-child(2) { border-top-color:var(--viz-gold); }
.rn-viz-quote-strip blockquote:nth-child(3) { border-top-color:var(--viz-purple); }
.rn-viz-chat { display:grid; gap:9px; }
.rn-viz-bubble { max-width:82%; padding:10px 13px; border-radius:13px 13px 13px 3px; color:var(--viz-ink); background:var(--viz-tint); font-size:13px; }
.rn-viz-bubble.reply { justify-self:end; border-radius:13px 13px 3px 13px; color:var(--viz-onaccent); background:var(--viz-blue); }

/* 26-40: numbers and indicators */
.rn-viz-big-number { color:var(--viz-blue); font:600 clamp(52px,10vw,90px)/.88 var(--viz-serif); letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.rn-viz-big-number small { display:block; margin-top:14px; color:var(--viz-soft); font:600 13px/1.45 var(--viz-sans); letter-spacing:0; }
.rn-viz-stat-row { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--viz-rule); }
.rn-viz-stat-row div { padding:16px; border-left:1px solid var(--viz-rule); }
.rn-viz-stat-row div:first-child { border-left:0; }
.rn-viz-stat-row b { display:block; color:var(--viz-blue); font:600 28px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-stat-row span { display:block; margin-top:6px; color:var(--viz-faint); font-size:11.5px; line-height:1.35; }
.rn-viz-stat-row em { display:inline-block; margin-top:7px; padding:2px 6px; border-radius:4px; color:var(--viz-green); background:var(--viz-green-soft); font:800 9.5px/1.3 var(--viz-mono); font-style:normal; }
.rn-viz-stat-row em.dn { color:var(--viz-red); background:var(--viz-red-soft); }
.rn-viz-delta { display:flex; align-items:baseline; gap:10px; }
.rn-viz-delta b { color:var(--viz-green); font:700 44px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-delta b::before { content:"\25B2"; margin-right:7px; font-size:.42em; vertical-align:.5em; }
.rn-viz-delta.down b { color:var(--viz-red); }
.rn-viz-delta.down b::before { content:"\25BC"; }
.rn-viz-delta span { color:var(--viz-soft); font-size:13px; }
.rn-viz-range { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding-top:30px; }
.rn-viz-range .line { position:relative; height:9px; border-radius:999px; background:linear-gradient(90deg,var(--viz-green),var(--viz-gold),var(--viz-red)); }
.rn-viz-range .line::before { content:"64"; position:absolute; left:64%; bottom:16px; padding:3px 8px; border-radius:5px; color:var(--viz-surface); background:var(--viz-ink); font:800 11px/1.3 var(--viz-mono); transform:translateX(-50%); }
.rn-viz-range .line::after { content:""; position:absolute; left:64%; top:50%; width:17px; height:17px; border:3px solid var(--viz-surface); border-radius:50%; background:var(--viz-ink); transform:translate(-50%,-50%); box-shadow:0 0 0 1px var(--viz-rule-strong); }
.rn-viz-range span { color:var(--viz-faint); font:700 11px/1 var(--viz-mono); }
.rn-viz-split-stat { display:grid; grid-template-columns:64fr 36fr; gap:2px; border-radius:12px; overflow:hidden; }
.rn-viz-split-stat div { padding:18px; color:#f4f1e8; background:var(--viz-navy); }
.rn-viz-split-stat div:last-child { color:#3a2c05; background:var(--viz-gold); }
.rn-viz-split-stat b { display:block; font:600 36px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-split-stat span { display:block; margin-top:3px; font:700 10px/1.4 var(--viz-mono); text-transform:uppercase; letter-spacing:.08em; opacity:.85; }
.rn-viz-ratio { display:flex; align-items:center; justify-content:center; gap:18px; }
.rn-viz-ratio .side { display:grid; justify-items:center; gap:8px; }
.rn-viz-ratio b { font:600 50px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-ratio .to { color:var(--viz-faint); font:italic 18px/1 var(--viz-serif); }
.rn-viz-ratio .dots { display:flex; gap:5px; }
.rn-viz-ratio .dots i { width:12px; height:12px; border-radius:50%; background:var(--viz-blue); }
.rn-viz-ratio .side:last-child .dots i { background:var(--viz-gold); }
.rn-viz-pictograph { display:grid; grid-template-columns:repeat(10,1fr); gap:6px; max-width:300px; }
.rn-viz-person { position:relative; aspect-ratio:1/1.9; }
.rn-viz-person::before { content:""; position:absolute; top:0; left:50%; width:44%; aspect-ratio:1; border-radius:50%; background:var(--viz-rule); transform:translateX(-50%); }
.rn-viz-person::after { content:""; position:absolute; top:46%; left:12%; right:12%; bottom:0; border-radius:42% 42% 34% 34%; background:var(--viz-rule); }
.rn-viz-person.on { animation:rnVizPop .35s both; }
.rn-viz-person.on::before,.rn-viz-person.on::after { background:var(--viz-blue); }
.rn-viz-gauge { position:relative; width:190px; height:95px; overflow:hidden; margin:8px auto 0; }
.rn-viz-gauge::before { content:""; position:absolute; left:0; right:0; top:0; height:190px; border-radius:50%; background:conic-gradient(from -90deg, var(--viz-blue) 0deg 129.6deg, var(--viz-tint) 129.6deg 180deg, transparent 180deg 360deg); -webkit-mask:radial-gradient(circle at 50% 50%, transparent 61px, #000 62px); mask:radial-gradient(circle at 50% 50%, transparent 61px, #000 62px); }
.rn-viz-gauge b { position:absolute; left:0; right:0; bottom:16px; text-align:center; font:600 36px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-gauge span { position:absolute; left:0; right:0; bottom:2px; text-align:center; color:var(--viz-faint); font:700 9px/1 var(--viz-mono); letter-spacing:.12em; text-transform:uppercase; }
.rn-viz-progress { display:grid; gap:8px; }
.rn-viz-progress-track { position:relative; height:18px; border-radius:999px; background:var(--viz-tint); border:1px solid var(--viz-rule); }
.rn-viz-progress-track::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--viz-page) calc(25% - 1px) 25%); border-radius:inherit; pointer-events:none; }
.rn-viz-progress-fill { position:relative; z-index:1; width:72%; height:100%; border-radius:999px; background:var(--viz-blue); animation:rnVizGrowW 1s .15s both cubic-bezier(.2,.7,.2,1); }
.rn-viz-progress-fill::after { content:"72%"; position:absolute; right:8px; top:50%; color:var(--viz-onaccent); font:800 9.5px/1 var(--viz-mono); transform:translateY(-50%); }
.rn-viz-score { position:relative; display:grid; place-items:center; width:116px; aspect-ratio:1; margin:auto; border-radius:50%; background:conic-gradient(var(--viz-green) 0 84%, var(--viz-green-soft) 84%); }
.rn-viz-score::before { content:""; position:absolute; inset:11px; border-radius:50%; background:var(--viz-surface); }
.rn-viz-score b { position:relative; font:600 34px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-score b::after { content:"of 100"; display:block; margin-top:3px; color:var(--viz-faint); font:700 8.5px/1 var(--viz-mono); letter-spacing:.1em; text-transform:uppercase; text-align:center; }
.rn-viz-kpi-ribbon { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; border-radius:10px; color:#f4f1e8; background:linear-gradient(100deg,var(--viz-navy),#2b4a8b); }
.rn-viz-kpi-ribbon b { font:600 30px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-kpi-ribbon span { font-size:12px; opacity:.85; }
.rn-viz-kpi-ribbon em { padding:4px 8px; border-radius:5px; color:#9fe3bd; background:rgba(255,255,255,.12); font:800 10px/1 var(--viz-mono); font-style:normal; }
.rn-viz-ticker { position:relative; overflow:hidden; border-radius:8px; padding:11px 0; background:var(--viz-navy); }
.rn-viz-ticker .tape { display:inline-flex; gap:26px; padding-left:14px; white-space:nowrap; animation:rnVizTicker 16s linear infinite; }
.rn-viz-ticker span { color:#aeb9cc; font:700 12px/1 var(--viz-mono); }
.rn-viz-ticker b { color:#f4f1e8; }
.rn-viz-ticker em { font-style:normal; font-size:11px; }
.rn-viz-ticker em.up { color:#7bd0a0; }
.rn-viz-ticker em.dn { color:#f08c86; }
.rn-viz-number-stack { display:grid; gap:0; }
.rn-viz-number-stack div { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:baseline; padding:10px 0; }
.rn-viz-number-stack i { border-bottom:2px dotted var(--viz-rule-strong); transform:translateY(-4px); }
.rn-viz-number-stack b { color:var(--viz-blue); font:600 20px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-number-stack span { color:var(--viz-soft); font-size:12.5px; }
.rn-viz-percentile { position:relative; height:52px; margin-bottom:8px; background:linear-gradient(90deg,var(--viz-blue-soft),var(--viz-blue)) 0 100%/100% 9px no-repeat; border-radius:0 0 5px 5px; }
.rn-viz-percentile::before { content:"82nd"; position:absolute; left:82%; bottom:22px; padding:4px 8px; border-radius:5px; color:var(--viz-onaccent); background:var(--viz-blue); font:800 11px/1.3 var(--viz-mono); transform:translateX(-50%); }
.rn-viz-percentile::after { content:""; position:absolute; left:82%; bottom:-2px; width:14px; height:14px; border:3px solid var(--viz-surface); border-radius:50%; background:var(--viz-ink); transform:translateX(-50%); box-shadow:0 0 0 1px var(--viz-rule-strong); }
.rn-viz-benchmark { display:grid; grid-template-columns:auto 1fr; gap:12px 12px; align-items:center; padding-right:34px; }
.rn-viz-benchmark span { color:var(--viz-ink); font:700 12px/1.3 var(--viz-sans); }
.rn-viz-benchmark .bar { height:10px; border-radius:99px; background:var(--viz-tint); }
.rn-viz-benchmark .bar i { position:relative; display:block; width:var(--w,60%); height:100%; border-radius:99px; background:var(--viz-blue); }
.rn-viz-benchmark .bar:last-of-type i { background:var(--viz-rule-strong); }
.rn-viz-benchmark .bar i::after { content:attr(data-v); position:absolute; left:calc(100% + 7px); top:50%; color:var(--viz-soft); font:800 10.5px/1 var(--viz-mono); transform:translateY(-50%); }
.rn-viz-w15 { --w:15%; }.rn-viz-w25 { --w:25%; }.rn-viz-w30 { --w:30%; }.rn-viz-w40 { --w:40%; }.rn-viz-w48 { --w:48%; }.rn-viz-w55 { --w:55%; }.rn-viz-w60 { --w:60%; }.rn-viz-w70 { --w:70%; }.rn-viz-w75 { --w:75%; }.rn-viz-w82 { --w:82%; }.rn-viz-w90 { --w:90%; }.rn-viz-w100 { --w:100%; }

/* 41-55: tables and comparisons */
.rn-viz-table { width:100%; min-width:520px; border-collapse:collapse; color:var(--viz-ink); font-size:13.5px; }
.rn-viz-table caption { display:flex; align-items:center; gap:10px; margin-bottom:10px; color:var(--viz-blue); font:800 10px/1 var(--viz-mono); text-align:left; text-transform:uppercase; letter-spacing:.1em; }
.rn-viz-table caption::after { content:""; flex:1; height:1px; background:var(--viz-rule-strong); }
.rn-viz-table th,.rn-viz-table td { padding:10px 12px; border-bottom:1px solid var(--viz-rule); text-align:left; font-variant-numeric:tabular-nums; }
.rn-viz-table tbody th,.rn-viz-table tbody td:first-child { font-weight:700; }
.rn-viz-table thead th { color:var(--viz-soft); border-bottom:2px solid var(--viz-rule-strong); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; }
.rn-viz-table tbody tr:hover { background:var(--viz-tint); }
.rn-viz-table .num { font:700 12.5px var(--viz-mono); }
.rn-viz-table .num.up { color:var(--viz-green); }
.rn-viz-table .num.up::before { content:"\25B2 "; font-size:8px; vertical-align:1px; }
.rn-viz-table .tag { display:inline-block; padding:3px 9px; border-radius:99px; font:700 10.5px/1.3 var(--viz-sans); font-style:normal; }
.rn-viz-table .tag.bad { color:var(--viz-red); background:var(--viz-red-soft); }
.rn-viz-table .tag.mid { color:var(--viz-gold-deep); background:var(--viz-gold-soft); }
.rn-viz-table .tag.good { color:var(--viz-green); background:var(--viz-green-soft); }
.rn-viz-table-striped tbody tr:nth-child(even) { background:var(--viz-tint); }
.rn-viz-heat-table { min-width:0 !important; border-collapse:separate; border-spacing:3px; }
.rn-viz-heat-table th,.rn-viz-heat-table td { border-bottom:0; }
.rn-viz-heat-table thead th { color:var(--viz-faint); font:800 9.5px/1.3 var(--viz-mono); text-align:center; letter-spacing:.06em; }
.rn-viz-heat-table tbody th { color:var(--viz-soft); font:700 12px/1.3 var(--viz-sans); }
.rn-viz-heat-table tbody tr:hover { background:none; }
.rn-viz-heat { text-align:center !important; border-radius:7px; font:800 10.5px/1.4 var(--viz-mono); text-transform:uppercase; letter-spacing:.04em; }
.rn-viz-heat.low { color:var(--viz-green); background:var(--viz-green-soft); }
.rn-viz-heat.mid { color:var(--viz-gold-deep); background:var(--viz-gold-soft); }
.rn-viz-heat.high { color:var(--viz-red); background:var(--viz-red-soft); }
.rn-viz-check,.rn-viz-cross { text-align:center !important; font-weight:900; font-size:14px; }
.rn-viz-check { color:var(--viz-green); background:var(--viz-green-soft); }
.rn-viz-cross { color:var(--viz-red); background:var(--viz-red-soft); }
.rn-viz-procon { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rn-viz-procon section { padding:15px; border-radius:10px; background:var(--viz-green-soft); border-top:3px solid var(--viz-green); }
.rn-viz-procon section:last-child { background:var(--viz-red-soft); border-top-color:var(--viz-red); }
.rn-viz-procon h3 { display:flex; align-items:center; gap:8px; margin:0 0 10px; color:var(--viz-green); font:800 12px/1 var(--viz-mono); text-transform:uppercase; }
.rn-viz-procon h3::before { content:"+"; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#fff; background:var(--viz-green); font:800 12px/1 var(--viz-sans); }
.rn-viz-procon section:last-child h3 { color:var(--viz-red); }
.rn-viz-procon section:last-child h3::before { content:"\2212"; background:var(--viz-red); }
.rn-viz-procon ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; color:var(--viz-soft); font-size:13px; }
.rn-viz-procon li { position:relative; padding-left:16px; }
.rn-viz-procon li::before { content:"+"; position:absolute; left:0; color:var(--viz-green); font-weight:800; }
.rn-viz-procon section:last-child li::before { content:"\2212"; color:var(--viz-red); }
.rn-viz-before-after { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch; }
.rn-viz-before-after section { padding:14px 15px; border:1px solid var(--viz-rule); border-radius:10px; background:var(--viz-tint); }
.rn-viz-before-after section:last-of-type { border-color:var(--viz-blue); background:var(--viz-blue-soft); }
.rn-viz-before-after b { display:block; margin-bottom:4px; color:var(--viz-faint); font:800 10px/1.4 var(--viz-mono); text-transform:uppercase; letter-spacing:.12em; }
.rn-viz-before-after section:last-of-type b { color:var(--viz-blue); }
.rn-viz-before-after .arrow { display:grid; place-items:center; align-self:center; width:34px; height:34px; border-radius:50%; color:#3a2c05; background:var(--viz-gold); font-size:16px; }
.rn-viz-price-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-items:end; padding-top:12px; }
.rn-viz-price-card { padding:16px 13px; border:1px solid var(--viz-rule); border-radius:10px; text-align:center; }
.rn-viz-price-card span { color:var(--viz-faint); font:800 10px/1.4 var(--viz-mono); text-transform:uppercase; letter-spacing:.1em; }
.rn-viz-price-card.featured { position:relative; padding-top:22px; border:2px solid var(--viz-blue); background:var(--viz-blue-soft); }
.rn-viz-price-card.featured em { position:absolute; left:50%; top:-11px; padding:4px 9px; border-radius:99px; color:#3a2c05; background:var(--viz-gold); font:800 8.5px/1 var(--viz-mono); font-style:normal; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; transform:translateX(-50%); }
.rn-viz-price-card b { display:block; margin:6px 0 0; font:600 26px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-price-card b small { color:var(--viz-faint); font:700 11px/1 var(--viz-sans); }
.rn-viz-rank { counter-reset:rank; display:grid; gap:0; margin:0; padding:0; list-style:none; }
.rn-viz-rank li { counter-increment:rank; display:grid; grid-template-columns:28px 1fr auto; gap:12px; padding:9px 8px; border-bottom:1px solid var(--viz-rule); align-items:center; }
.rn-viz-rank li::before { content:counter(rank); display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:var(--viz-soft); background:var(--viz-tint); font:800 11px/1 var(--viz-mono); }
.rn-viz-rank li:nth-child(1) { background:var(--viz-gold-soft); border-radius:8px; border-bottom-color:transparent; }
.rn-viz-rank li:nth-child(1)::before { color:#3a2c05; background:var(--viz-gold); }
.rn-viz-rank li:nth-child(2)::before { color:#3d4451; background:#ccd2dc; }
.rn-viz-rank li:nth-child(3)::before { color:#4c2f14; background:#dcab7a; }
.rn-viz-rank b { color:var(--viz-ink); font-size:13.5px; }
.rn-viz-rank span { padding:3px 8px; border-radius:5px; color:var(--viz-soft); background:var(--viz-tint); font:800 11.5px/1 var(--viz-mono); }
.rn-viz-rank li:nth-child(1) span { color:var(--viz-gold-deep); background:var(--viz-surface); }
.rn-viz-score-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.rn-viz-score-grid div { display:grid; place-content:center; justify-items:center; gap:2px; aspect-ratio:1.35; border:1px solid var(--viz-rule); border-radius:8px; background:var(--viz-tint); }
.rn-viz-score-grid b { color:var(--viz-ink); font:800 16px/1 var(--viz-mono); }
.rn-viz-score-grid span { color:var(--viz-faint); font:700 8.5px/1 var(--viz-mono); text-transform:uppercase; letter-spacing:.06em; }
.rn-viz-score-grid div.best { border-color:var(--viz-blue); background:var(--viz-blue); }
.rn-viz-score-grid div.best b { color:var(--viz-onaccent); }
.rn-viz-score-grid div.best span { color:var(--viz-onaccent); opacity:.75; }
.rn-viz-winner { position:relative; padding:18px; border:2px solid var(--viz-gold); border-radius:12px; background:radial-gradient(circle at 20% 0%, color-mix(in srgb,var(--viz-gold) 18%,var(--viz-gold-soft)), var(--viz-gold-soft) 60%); }
.rn-viz-winner .badge { color:var(--viz-gold-deep); font:800 10px/1 var(--viz-mono); text-transform:uppercase; letter-spacing:.12em; }
.rn-viz-winner .badge::before { content:"\2605 "; }
.rn-viz-winner h3 { margin:7px 0 4px; font:600 26px/1 var(--viz-serif); }
.rn-viz-compare { position:relative; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--viz-rule); border-radius:10px; overflow:visible; }
.rn-viz-compare::after { content:"OR"; position:absolute; left:50%; top:50%; padding:5px 8px; border:1px solid var(--viz-rule-strong); border-radius:999px; color:var(--viz-faint); background:var(--viz-surface); font:800 9px/1 var(--viz-mono); transform:translate(-50%,-50%); }
.rn-viz-compare section { padding:16px; }
.rn-viz-compare section + section { border-left:1px solid var(--viz-rule); background:var(--viz-tint); border-radius:0 10px 10px 0; }
.rn-viz-compare .ey { display:block; margin-bottom:5px; color:var(--viz-faint); font:800 9.5px/1.3 var(--viz-mono); text-transform:uppercase; letter-spacing:.12em; }
.rn-viz-compare h3 { margin:0 0 4px; font:600 19px/1.1 var(--viz-serif); }
.rn-viz-compare .v { display:block; margin:0 0 5px; color:var(--viz-blue); font:600 24px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-tradeoff { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; }
.rn-viz-tradeoff div:not(.vs) { padding:15px; border:1px solid var(--viz-rule); border-top:3px solid var(--viz-blue); border-radius:10px; background:var(--viz-blue-soft); text-align:center; }
.rn-viz-tradeoff div:not(.vs):last-child { border-top-color:var(--viz-purple); background:var(--viz-purple-soft); }
.rn-viz-tradeoff .vs { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#3a2c05; background:var(--viz-gold); font:800 8px/1 var(--viz-mono); text-align:center; }
.rn-viz-risk { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:0 0 24px 22px; }
.rn-viz-risk::before { content:"IMPACT"; position:absolute; left:-15px; top:50%; color:var(--viz-faint); font:800 9px/1 var(--viz-mono); letter-spacing:.14em; transform:rotate(-90deg) translateX(50%); transform-origin:left top; }
.rn-viz-risk::after { content:"LIKELIHOOD \2192"; position:absolute; left:0; top:calc(100% + 8px); color:var(--viz-faint); font:800 9px/1 var(--viz-mono); letter-spacing:.1em; }
.rn-viz-risk div { display:grid; place-items:center; min-height:44px; border-radius:6px; color:var(--viz-green); background:var(--viz-green-soft); font:800 10px/1 var(--viz-mono); text-transform:uppercase; letter-spacing:.05em; }
.rn-viz-risk div:nth-child(3n+2),.rn-viz-risk div:nth-child(7) { color:var(--viz-gold-deep); background:var(--viz-gold-soft); }
.rn-viz-risk div:nth-child(3),.rn-viz-risk div:nth-child(6),.rn-viz-risk div:nth-child(9) { color:var(--viz-red); background:var(--viz-red-soft); }
.rn-viz-risk div:nth-child(9) { color:#fff; background:var(--viz-red); }
.rn-viz-quadrants { display:grid; grid-template-columns:1fr 1fr; gap:2px; overflow:hidden; border-radius:10px; background:var(--viz-rule-strong); border:1px solid var(--viz-rule-strong); }
.rn-viz-quadrants section { min-height:84px; padding:12px; background:var(--viz-surface); border-top:3px solid var(--viz-green); }
.rn-viz-quadrants section:nth-child(2) { border-top-color:var(--viz-red); }
.rn-viz-quadrants section:nth-child(3) { border-top-color:var(--viz-blue); }
.rn-viz-quadrants section:nth-child(4) { border-top-color:var(--viz-gold-deep); }
.rn-viz-quadrants b { display:block; color:var(--viz-green); font:800 10px/1.6 var(--viz-mono); text-transform:uppercase; }
.rn-viz-quadrants section:nth-child(2) b { color:var(--viz-red); }
.rn-viz-quadrants section:nth-child(3) b { color:var(--viz-blue); }
.rn-viz-quadrants section:nth-child(4) b { color:var(--viz-gold-deep); }
.rn-viz-quadrants span { color:var(--viz-soft); font-size:12px; }
.rn-viz-receipt { position:relative; max-width:300px; margin:10px auto; padding:16px 18px; border-inline:1px solid var(--viz-rule-strong); background:var(--viz-tint); font:12px/1.6 var(--viz-mono); }
.rn-viz-receipt::before { content:""; position:absolute; left:-1px; right:-1px; bottom:100%; height:9px; background:conic-gradient(from 135deg at 50% 0%, var(--viz-tint) 90deg, transparent 0) 0 0/14px 9px repeat-x; }
.rn-viz-receipt::after { content:""; position:absolute; left:-1px; right:-1px; top:100%; height:9px; background:conic-gradient(from -45deg at 50% 100%, var(--viz-tint) 90deg, transparent 0) 0 0/14px 9px repeat-x; }
.rn-viz-receipt .rhd { justify-content:center; gap:8px; border-bottom:1px dashed var(--viz-rule-strong); padding-bottom:7px; margin-bottom:5px; font-weight:800; letter-spacing:.14em; }
.rn-viz-receipt div { display:flex; justify-content:space-between; border-bottom:1px dotted var(--viz-rule-strong); padding:4px 0; }
.rn-viz-receipt .total { margin-top:6px; border-top:2px solid var(--viz-ink); border-bottom:0; font-weight:800; }
.rn-viz-receipt .code { display:block; height:26px; margin-top:12px; border-bottom:0; background:repeating-linear-gradient(90deg, var(--viz-ink) 0 2px, transparent 2px 5px, var(--viz-ink) 5px 8px, transparent 8px 10px); opacity:.8; }

/* 56-75: charts and data shapes */
.rn-viz-bars { display:grid; gap:11px; }
.rn-viz-bar-row { display:grid; grid-template-columns:90px 1fr 36px; gap:10px; align-items:center; color:var(--viz-ink); font:700 12px/1.3 var(--viz-sans); }
.rn-viz-bar-row b { color:var(--viz-soft); font:800 11px/1 var(--viz-mono); font-variant-numeric:tabular-nums; text-align:right; }
.rn-viz-bar-track { height:16px; border-radius:999px; background:var(--viz-tint); overflow:hidden; }
.rn-viz-bar-fill { display:block; width:var(--w); height:100%; border-radius:999px; background:var(--viz-blue); animation:rnVizGrow .8s both; transform-origin:left; }
.rn-viz-bar-row:first-child .rn-viz-bar-fill { background:var(--viz-navy); }
.rn-viz-page[data-theme="dark"] .rn-viz-bar-row:first-child .rn-viz-bar-fill { background:var(--viz-blue); opacity:.55; }
.rn-viz-columns { display:flex; align-items:end; gap:8px; height:126px; margin-bottom:20px; padding-top:18px; border-bottom:1px solid var(--viz-rule-strong); }
.rn-viz-column { position:relative; flex:1; height:var(--h); border-radius:4px 4px 0 0; background:var(--viz-blue); animation:rnVizRise .7s both; transform-origin:bottom; }
.rn-viz-column:last-child { background:var(--viz-gold); }
.rn-viz-column::before { content:attr(data-l); position:absolute; top:calc(100% + 6px); left:50%; color:var(--viz-faint); font:700 9.5px/1 var(--viz-mono); transform:translateX(-50%); }
.rn-viz-column::after { content:attr(data-v); position:absolute; bottom:calc(100% + 5px); left:50%; color:var(--viz-soft); font:800 10px/1 var(--viz-mono); transform:translateX(-50%); }
.rn-viz-h20 { --h:20%; }.rn-viz-h30 { --h:30%; }.rn-viz-h45 { --h:45%; }.rn-viz-h55 { --h:55%; }.rn-viz-h70 { --h:70%; }.rn-viz-h85 { --h:85%; }.rn-viz-h100 { --h:100%; }
.rn-viz-stacked { display:flex; gap:2px; height:34px; overflow:hidden; border-radius:8px; }
.rn-viz-stacked span { display:grid; place-items:center; color:var(--viz-onaccent); font:800 10px/1 var(--viz-mono); }
.rn-viz-stacked span::after { content:attr(data-v); }
.rn-viz-stacked span:nth-child(1) { width:48%; background:var(--viz-blue); }
.rn-viz-stacked span:nth-child(2) { width:32%; background:var(--viz-gold); color:#3a2c05; }
.rn-viz-stacked span:nth-child(3) { width:20%; background:var(--viz-purple); color:#fff; }
.rn-viz-stacked-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; color:var(--viz-soft); font:700 10.5px/1 var(--viz-mono); }
.rn-viz-stacked-legend i { display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:2px; background:var(--viz-blue); }
.rn-viz-stacked-legend span:nth-child(2) i { background:var(--viz-gold); }
.rn-viz-stacked-legend span:nth-child(3) i { background:var(--viz-purple); }
.rn-viz-diverging { display:grid; gap:10px; }
.rn-viz-diverging .hd { display:grid; grid-template-columns:64px 1fr 2px 1fr; gap:8px; color:var(--viz-faint); font:800 9px/1 var(--viz-mono); letter-spacing:.1em; }
.rn-viz-diverging .hd s { text-decoration:none; }
.rn-viz-diverging .hd s:first-of-type { grid-column:2; color:var(--viz-red); justify-self:end; }
.rn-viz-diverging .hd s:last-of-type { grid-column:4; color:var(--viz-green); }
.rn-viz-diverging .r { display:grid; grid-template-columns:64px 1fr 2px 1fr; gap:8px; align-items:center; height:15px; }
.rn-viz-diverging .cat { color:var(--viz-soft); font:700 10.5px/1.2 var(--viz-mono); }
.rn-viz-diverging .r i { background:var(--viz-rule-strong); align-self:stretch; }
.rn-viz-diverging .left { justify-self:end; width:var(--w); height:100%; background:var(--viz-red); border-radius:3px 0 0 3px; }
.rn-viz-diverging .right { width:var(--w); height:100%; background:var(--viz-green); border-radius:0 3px 3px 0; }
.rn-viz-lollipop { display:grid; gap:24px; padding:8px 22px 0 0; }
.rn-viz-lollipop div { position:relative; height:3px; width:var(--w); border-radius:2px; background:var(--viz-rule-strong); }
.rn-viz-lollipop div::before { content:attr(data-l); position:absolute; left:0; bottom:8px; color:var(--viz-soft); font:700 10.5px/1 var(--viz-mono); }
.rn-viz-lollipop div::after { content:attr(data-v); position:absolute; right:0; top:50%; display:grid; place-items:center; width:26px; height:26px; border:2.5px solid var(--viz-surface); border-radius:50%; color:var(--viz-onaccent); background:var(--viz-blue); font:800 9.5px/1 var(--viz-mono); transform:translate(50%,-50%); box-shadow:0 0 0 1px var(--viz-blue); }
.rn-viz-dotplot { position:relative; height:104px; margin-bottom:22px; border-left:1px solid var(--viz-rule-strong); border-bottom:1px solid var(--viz-rule-strong); background-image:linear-gradient(var(--viz-rule) 1px,transparent 1px); background-size:100% 25%; }
.rn-viz-dotplot::after { content:"AGE \2192"; position:absolute; right:0; top:calc(100% + 6px); color:var(--viz-faint); font:700 9px/1 var(--viz-mono); letter-spacing:.08em; }
.rn-viz-dotplot i { position:absolute; left:var(--x); bottom:var(--y); width:11px; height:11px; border:2px solid var(--viz-surface); border-radius:50%; background:var(--viz-blue); transform:translate(-50%,50%); box-shadow:0 0 0 1px var(--viz-blue); }
.rn-viz-dotplot i::after { content:attr(data-v); position:absolute; bottom:calc(100% + 5px); left:50%; color:var(--viz-faint); font:700 9px/1 var(--viz-mono); transform:translateX(-50%); white-space:nowrap; }
.rn-viz-dotplot i:nth-child(1) { --x:15%; --y:22%; }
.rn-viz-dotplot i:nth-child(2) { --x:34%; --y:45%; }
.rn-viz-dotplot i:nth-child(3) { --x:52%; --y:38%; }
.rn-viz-dotplot i:nth-child(4) { --x:68%; --y:72%; }
.rn-viz-dotplot i:nth-child(5) { --x:88%; --y:80%; }
.rn-viz-spark { width:100%; height:90px; overflow:visible; color:var(--viz-blue); }
.rn-viz-spark polyline,.rn-viz-spark path.line { fill:none; stroke:currentColor; stroke-width:3; vector-effect:non-scaling-stroke; }
.rn-viz-spark path.area { fill:var(--viz-blue-soft); stroke:none; }
.rn-viz-spark circle.end { fill:currentColor; stroke:var(--viz-surface); stroke-width:2.5; }
.rn-viz-spark text.v { fill:var(--viz-soft); font:800 12px var(--viz-mono); }
.rn-viz-donut { display:grid; place-items:center; width:136px; aspect-ratio:1; margin:auto; border-radius:50%; background:conic-gradient(var(--viz-blue) 0 67.5%,var(--viz-surface) 67.5% 68.5%,var(--viz-gold) 68.5% 83.5%,var(--viz-surface) 83.5% 84.5%,var(--viz-tint) 84.5%); }
.rn-viz-donut::after { content:attr(data-v); display:grid; place-content:center; width:82px; aspect-ratio:1; border-radius:50%; color:var(--viz-ink); background:var(--viz-surface); font:600 25px/1 var(--viz-serif); box-shadow:0 0 0 1px var(--viz-rule); }
.rn-viz-donut-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:12px; color:var(--viz-soft); font:700 10.5px/1 var(--viz-mono); }
.rn-viz-donut-legend i { display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:2px; background:var(--viz-blue); }
.rn-viz-donut-legend span:nth-child(2) i { background:var(--viz-gold); }
.rn-viz-donut-legend span:nth-child(3) i { background:var(--viz-tint); box-shadow:inset 0 0 0 1px var(--viz-rule-strong); }
.rn-viz-half-donut { position:relative; width:170px; height:85px; margin:auto; overflow:hidden; }
.rn-viz-half-donut::before { content:""; position:absolute; left:0; right:0; top:0; height:170px; border-radius:50%; background:conic-gradient(from -90deg, var(--viz-gold) 0deg 95.4deg, var(--viz-tint) 95.4deg 180deg, transparent 180deg 360deg); -webkit-mask:radial-gradient(circle at 50% 50%, transparent 53px, #000 54px); mask:radial-gradient(circle at 50% 50%, transparent 53px, #000 54px); }
.rn-viz-half-donut::after { content:"53%"; position:absolute; left:0; right:0; bottom:0; text-align:center; color:var(--viz-ink); font:600 27px/1 var(--viz-serif); }
.rn-viz-waterfall { display:flex; align-items:flex-end; gap:6px; height:120px; border-bottom:1px solid var(--viz-rule-strong); }
.rn-viz-waterfall span { flex:1; border-radius:3px; background:var(--viz-green); }
.rn-viz-waterfall span.down { background:var(--viz-red); }
.rn-viz-waterfall span.total { background:var(--viz-blue); border-radius:3px 3px 0 0; }
.rn-viz-waterfall span:nth-child(1) { height:38%; }
.rn-viz-waterfall span:nth-child(2) { height:24%; margin-bottom:38%; }
.rn-viz-waterfall span:nth-child(3) { height:14%; margin-bottom:48%; }
.rn-viz-waterfall span:nth-child(4) { height:30%; margin-bottom:48%; }
.rn-viz-waterfall span:nth-child(5) { height:78%; }
.rn-viz-slopesvg { display:block; width:100%; max-width:310px; height:auto; margin:auto; }
.rn-viz-slopesvg .ax { stroke:var(--viz-rule-strong); stroke-width:1.5; }
.rn-viz-slopesvg .ln { stroke:var(--viz-blue); stroke-width:3; }
.rn-viz-slopesvg circle { fill:var(--viz-blue); stroke:var(--viz-surface); stroke-width:2.5; }
.rn-viz-slopesvg text { fill:var(--viz-faint); font:700 10px var(--viz-mono); }
.rn-viz-slopesvg text.v { fill:var(--viz-ink); font:800 13px var(--viz-mono); }
.rn-viz-scatter { position:relative; height:120px; margin-bottom:22px; border-left:1px solid var(--viz-rule-strong); border-bottom:1px solid var(--viz-rule-strong); background-image:linear-gradient(var(--viz-rule) 1px,transparent 1px),linear-gradient(90deg,var(--viz-rule) 1px,transparent 1px); background-size:25% 25%; }
.rn-viz-scatter::before { content:"RETURN \2191"; position:absolute; left:6px; top:4px; color:var(--viz-faint); font:700 9px/1 var(--viz-mono); letter-spacing:.08em; }
.rn-viz-scatter::after { content:"RISK \2192"; position:absolute; right:0; top:calc(100% + 6px); color:var(--viz-faint); font:700 9px/1 var(--viz-mono); letter-spacing:.08em; }
.rn-viz-scatter .trend { position:absolute; left:4%; right:4%; top:50%; border-top:2px dashed color-mix(in srgb,var(--viz-blue) 55%,transparent); transform:rotate(-25deg); }
.rn-viz-scatter i { position:absolute; left:var(--x); bottom:var(--y); width:9px; height:9px; border-radius:50%; background:var(--viz-purple); opacity:.85; }
.rn-viz-scatter i:nth-child(1) { --x:18%; --y:22%; }
.rn-viz-scatter i:nth-child(2) { --x:31%; --y:38%; }
.rn-viz-scatter i:nth-child(3) { --x:47%; --y:31%; }
.rn-viz-scatter i:nth-child(4) { --x:59%; --y:61%; }
.rn-viz-scatter i:nth-child(5) { --x:77%; --y:67%; }
.rn-viz-scatter i:nth-child(6) { --x:88%; --y:84%; }
.rn-viz-histogram { position:relative; display:flex; align-items:end; gap:2px; height:110px; margin-bottom:20px; border-bottom:1px solid var(--viz-rule-strong); }
.rn-viz-histogram i { flex:1; height:var(--h); border-radius:3px 3px 0 0; background:var(--viz-blue-soft); border-top:2.5px solid var(--viz-blue); }
.rn-viz-histogram .mean { position:absolute; left:52%; top:0; bottom:-1px; border-left:2px dashed var(--viz-red); }
.rn-viz-histogram .mean::after { content:"MEDIAN"; position:absolute; left:5px; top:-2px; color:var(--viz-red); font:800 8.5px/1 var(--viz-mono); letter-spacing:.1em; }
.rn-viz-histogram::before { content:"$0"; position:absolute; left:0; top:calc(100% + 6px); color:var(--viz-faint); font:700 9.5px/1 var(--viz-mono); }
.rn-viz-histogram::after { content:"$250K+"; position:absolute; right:0; top:calc(100% + 6px); color:var(--viz-faint); font:700 9.5px/1 var(--viz-mono); }
.rn-viz-chart-timeline { position:relative; display:flex; justify-content:space-between; padding-top:26px; }
.rn-viz-chart-timeline::before { content:""; position:absolute; left:5%; right:5%; top:32px; height:2px; background:linear-gradient(90deg, var(--viz-blue) 0 55%, var(--viz-rule-strong) 55%); }
.rn-viz-chart-timeline span { position:relative; width:14px; height:14px; border:3px solid var(--viz-surface); border-radius:50%; background:var(--viz-blue); box-shadow:0 0 0 1px var(--viz-blue); }
.rn-viz-chart-timeline span:nth-child(3) { background:var(--viz-gold); box-shadow:0 0 0 1px var(--viz-gold-deep), 0 0 0 5px var(--viz-gold-soft); }
.rn-viz-chart-timeline span:nth-child(4) { background:var(--viz-rule-strong); box-shadow:0 0 0 1px var(--viz-rule-strong); }
.rn-viz-chart-timeline b { position:absolute; bottom:calc(100% + 8px); left:50%; padding:3px 7px; border:1px solid var(--viz-rule); border-radius:5px; color:var(--viz-soft); background:var(--viz-tint); font:700 9.5px/1 var(--viz-mono); transform:translateX(-50%); }
.rn-viz-chart-timeline span:nth-child(3) b { color:var(--viz-gold-deep); border-color:var(--viz-gold); background:var(--viz-gold-soft); }
.rn-viz-bumpsvg { display:block; width:100%; max-width:320px; height:auto; margin:auto; }
.rn-viz-bumpsvg line { stroke-width:3; stroke-linecap:round; }
.rn-viz-bumpsvg .s1 { stroke:var(--viz-blue); }
.rn-viz-bumpsvg .s2 { stroke:var(--viz-purple); }
.rn-viz-bumpsvg .s3 { stroke:var(--viz-green); }
.rn-viz-bumpsvg circle { stroke:var(--viz-surface); stroke-width:2.5; }
.rn-viz-bumpsvg circle.s1 { fill:var(--viz-blue); }
.rn-viz-bumpsvg circle.s2 { fill:var(--viz-purple); }
.rn-viz-bumpsvg circle.s3 { fill:var(--viz-green); }
.rn-viz-bumpsvg text { fill:var(--viz-soft); font:700 10px var(--viz-mono); }
.rn-viz-bumpsvg text.rk { fill:var(--viz-faint); font-size:9px; }
.rn-viz-thermometer { position:relative; width:26px; height:116px; margin:0 auto 34px; border:2px solid var(--viz-rule-strong); border-radius:13px; background:var(--viz-tint); }
.rn-viz-thermometer::before { content:""; position:absolute; left:5px; right:5px; bottom:5px; height:66%; border-radius:8px; background:linear-gradient(var(--viz-gold),var(--viz-red)); }
.rn-viz-thermometer::after { content:"72"; position:absolute; left:50%; bottom:-26px; display:grid; place-items:center; width:44px; height:44px; border:3px solid var(--viz-surface); border-radius:50%; color:#fff; background:var(--viz-red); font:800 13px/1 var(--viz-mono); transform:translateX(-50%); box-shadow:0 0 0 2px var(--viz-rule-strong); }
.rn-viz-target { position:relative; width:140px; aspect-ratio:1; margin:auto; border:1px solid var(--viz-rule-strong); border-radius:50%; background:radial-gradient(circle, var(--viz-red) 0 13%, var(--viz-surface) 13% 16%, var(--viz-gold) 16% 32%, var(--viz-surface) 32% 35%, var(--viz-blue-soft) 35% 58%, var(--viz-surface) 58% 61%, var(--viz-tint) 61% 100%); }
.rn-viz-target::after { content:"\2715"; position:absolute; left:57%; top:31%; color:var(--viz-ink); font:900 15px/1 var(--viz-sans); text-shadow:0 0 4px var(--viz-surface); }
.rn-viz-distribution { display:flex; height:64px; align-items:end; gap:2px; border-bottom:1px solid var(--viz-rule-strong); }
.rn-viz-distribution i { flex:1; height:var(--h); border-radius:3px 3px 0 0; background:var(--viz-blue); }
.rn-viz-distribution .rn-viz-h30 { opacity:.4; }
.rn-viz-distribution .rn-viz-h45 { opacity:.55; }
.rn-viz-distribution .rn-viz-h55 { opacity:.65; }
.rn-viz-distribution .rn-viz-h70 { opacity:.78; }
.rn-viz-distribution .rn-viz-h85 { opacity:.9; }
.rn-viz-distribution .rn-viz-h100 { opacity:1; }
.rn-viz-dashboard { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.rn-viz-dashboard div { position:relative; padding:12px; border:1px solid var(--viz-rule); border-top:3px solid var(--viz-blue); border-radius:0 0 8px 8px; background:var(--viz-surface); box-shadow:var(--viz-shadow); }
.rn-viz-dashboard div:nth-child(2) { border-top-color:var(--viz-green); }
.rn-viz-dashboard div:nth-child(3) { border-top-color:var(--viz-gold); }
.rn-viz-dashboard div:nth-child(4) { border-top-color:var(--viz-purple); }
.rn-viz-dashboard b { display:block; color:var(--viz-ink); font:600 23px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-dashboard span { display:block; margin-top:3px; color:var(--viz-faint); font:700 9px/1.4 var(--viz-mono); text-transform:uppercase; letter-spacing:.08em; }
.rn-viz-dashboard em { position:absolute; right:9px; top:9px; padding:2px 6px; border-radius:4px; color:var(--viz-green); background:var(--viz-green-soft); font:800 9px/1.3 var(--viz-mono); font-style:normal; }
.rn-viz-dashboard em.dn { color:var(--viz-red); background:var(--viz-red-soft); }

/* 76-88: sequence, systems, and explanation */
.rn-viz-timeline { position:relative; display:grid; gap:14px; padding-left:26px; }
.rn-viz-timeline::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--viz-rule-strong); }
.rn-viz-timeline div { position:relative; }
.rn-viz-timeline div::before { content:""; position:absolute; left:-24px; top:5px; width:12px; height:12px; border:3px solid var(--viz-surface); border-radius:50%; background:var(--viz-blue); box-shadow:0 0 0 1px var(--viz-blue); }
.rn-viz-timeline b { display:block; color:var(--viz-ink); font-size:13.5px; }
.rn-viz-timeline span { display:inline-block; margin-top:4px; padding:2px 7px; border:1px solid var(--viz-rule); border-radius:5px; color:var(--viz-faint); background:var(--viz-tint); font:700 9.5px/1.4 var(--viz-mono); text-transform:uppercase; letter-spacing:.06em; }
.rn-viz-timeline div:last-child::before { background:var(--viz-gold); box-shadow:0 0 0 1px var(--viz-gold-deep); }
.rn-viz-steps { counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rn-viz-steps div { counter-increment:step; position:relative; padding:14px; border:1px solid var(--viz-rule); border-radius:10px; background:var(--viz-tint); }
.rn-viz-steps div::before { content:counter(step); display:grid; place-items:center; width:28px; height:28px; margin-bottom:11px; border-radius:50%; color:#3a2c05; background:var(--viz-gold); font:800 13px/1 var(--viz-mono); box-shadow:0 0 0 3px var(--viz-gold-soft); }
.rn-viz-steps div:not(:last-child)::after { content:"\2192"; position:absolute; right:-15px; top:50%; color:var(--viz-gold-deep); font-size:15px; transform:translateY(-50%); }
.rn-viz-steps b { font-size:13.5px; }
.rn-viz-flow { display:flex; gap:8px; align-items:center; }
.rn-viz-flow span { flex:1; padding:11px; border:1px solid var(--viz-rule); border-radius:8px; color:var(--viz-ink); background:var(--viz-tint); font:700 11px/1.3 var(--viz-sans); text-align:center; }
.rn-viz-flow span:first-child { color:var(--viz-onaccent); border-color:var(--viz-blue); background:var(--viz-blue); }
.rn-viz-flow span:last-child { color:var(--viz-green); border-color:var(--viz-green); background:var(--viz-green-soft); }
.rn-viz-flow i { color:var(--viz-gold-deep); font-style:normal; font-weight:800; }
.rn-viz-tree { display:grid; gap:0; text-align:center; }
.rn-viz-tree .root { position:relative; justify-self:center; padding:9px 15px; border-radius:8px; color:var(--viz-onaccent); background:var(--viz-blue); font-weight:700; }
.rn-viz-tree .root::after { content:""; position:absolute; left:50%; top:100%; width:2px; height:12px; background:var(--viz-rule-strong); }
.rn-viz-tree .branches { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; padding-top:12px; }
.rn-viz-tree .branches::before { content:""; position:absolute; left:25%; right:25%; top:0; height:2px; background:var(--viz-rule-strong); }
.rn-viz-tree .branches span { position:relative; padding:10px; border-radius:8px; font-size:12.5px; }
.rn-viz-tree .branches span::before { content:""; position:absolute; left:50%; bottom:100%; width:2px; height:12px; background:var(--viz-rule-strong); }
.rn-viz-tree .branches span:first-child { color:var(--viz-ink); background:var(--viz-green-soft); }
.rn-viz-tree .branches span:last-child { color:var(--viz-ink); background:var(--viz-red-soft); }
.rn-viz-funnel { display:grid; justify-items:center; gap:3px; }
.rn-viz-funnel span { width:var(--w); padding:8px; color:var(--viz-onaccent); font:700 10px/1 var(--viz-mono); text-align:center; }
.rn-viz-funnel span:nth-child(1) { background:var(--viz-navy); color:#f4f1e8; clip-path:polygon(0 0,100% 0,91% 100%,9% 100%); }
.rn-viz-funnel span:nth-child(2) { background:var(--viz-blue); clip-path:polygon(0 0,100% 0,86.5% 100%,13.5% 100%); }
.rn-viz-funnel span:nth-child(3) { background:color-mix(in srgb,var(--viz-blue) 72%,var(--viz-tint)); clip-path:polygon(0 0,100% 0,83.3% 100%,16.7% 100%); }
.rn-viz-funnel span:nth-child(4) { background:color-mix(in srgb,var(--viz-blue) 45%,var(--viz-tint)); color:var(--viz-ink); clip-path:polygon(0 0,100% 0,88% 100%,12% 100%); }
.rn-viz-ladder { position:relative; display:grid; gap:12px; max-width:260px; margin:auto; padding:6px 0; }
.rn-viz-ladder::before,.rn-viz-ladder::after { content:""; position:absolute; top:0; bottom:0; width:5px; border-radius:3px; background:var(--viz-rule-strong); }
.rn-viz-ladder::before { left:6px; }
.rn-viz-ladder::after { right:6px; }
.rn-viz-ladder div { margin:0 18px; padding:9px 11px; border:1px solid var(--viz-rule); border-radius:6px; color:var(--viz-soft); background:var(--viz-tint); font:700 11px/1.4 var(--viz-mono); text-align:center; text-transform:uppercase; letter-spacing:.06em; }
.rn-viz-ladder div:first-child { color:var(--viz-gold-deep); border-color:var(--viz-gold); background:var(--viz-gold-soft); }
.rn-viz-roadmap { position:relative; display:flex; justify-content:space-between; gap:8px; padding:13px 0; border-top:3px solid var(--viz-rule-strong); }
.rn-viz-roadmap::before { content:""; position:absolute; left:0; top:-3px; width:56%; height:3px; background:var(--viz-green); }
.rn-viz-roadmap div { position:relative; width:24%; color:var(--viz-soft); font-size:11.5px; }
.rn-viz-roadmap div::before { content:""; position:absolute; left:0; top:-21px; width:12px; height:12px; border-radius:50%; background:var(--viz-rule-strong); }
.rn-viz-roadmap div.done::before { background:var(--viz-green); }
.rn-viz-roadmap div.cur { color:var(--viz-ink); font-weight:700; }
.rn-viz-roadmap div.cur::before { background:var(--viz-blue); box-shadow:0 0 0 4px var(--viz-blue-soft); }
.rn-viz-milestones { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding-top:20px; }
.rn-viz-milestones::before { content:""; position:absolute; left:6%; right:6%; top:5px; height:2px; background:var(--viz-rule-strong); }
.rn-viz-milestones div { position:relative; padding:11px 8px; border:1px solid var(--viz-rule); border-radius:8px; color:var(--viz-soft); background:var(--viz-tint); font-size:11.5px; text-align:center; }
.rn-viz-milestones div::before { content:""; position:absolute; left:50%; top:-19px; width:10px; height:10px; border:2px solid var(--viz-surface); border-radius:50%; background:var(--viz-blue); box-shadow:0 0 0 1px var(--viz-blue); transform:translateX(-50%); }
.rn-viz-milestones b { display:block; color:var(--viz-blue); font:600 17px/1.3 var(--viz-serif); }
.rn-viz-checklist { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.rn-viz-checklist li { position:relative; padding-left:27px; color:var(--viz-soft); font-size:13.5px; }
.rn-viz-checklist li::before { content:"\2713"; position:absolute; left:0; top:1px; display:grid; place-items:center; width:18px; height:18px; border-radius:5px; color:#fff; background:var(--viz-green); font:800 11px/1 var(--viz-sans); }
.rn-viz-recipe { counter-reset:recipe; display:grid; gap:8px; }
.rn-viz-recipe div { counter-increment:recipe; display:grid; grid-template-columns:30px 1fr; gap:4px 12px; align-items:start; padding:11px 13px; border:1px solid var(--viz-rule); border-radius:9px; background:var(--viz-tint); }
.rn-viz-recipe div::before { content:counter(recipe); display:grid; place-items:center; width:30px; aspect-ratio:1; border-radius:50%; color:#3a2c05; background:var(--viz-gold); font:800 12px/1 var(--viz-mono); box-shadow:0 0 0 3px var(--viz-gold-soft); }
.rn-viz-recipe b { align-self:center; font-size:13.5px; }
.rn-viz-recipe span { grid-column:2; color:var(--viz-faint); font-size:12px; line-height:1.45; }
.rn-viz-anatomy { position:relative; display:grid; place-items:center; min-height:130px; border:1px dashed var(--viz-rule-strong); border-radius:50%; }
.rn-viz-anatomy .core { display:grid; place-items:center; width:74px; aspect-ratio:1; border-radius:50%; color:var(--viz-onaccent); background:var(--viz-blue); font:700 12px/1 var(--viz-sans); }
.rn-viz-anatomy span { position:absolute; padding:4px 7px; border:1px solid var(--viz-rule); border-radius:5px; color:var(--viz-soft); background:var(--viz-tint); font:700 10px/1 var(--viz-mono); }
.rn-viz-anatomy .n { top:4px; }.rn-viz-anatomy .e { right:5px; }.rn-viz-anatomy .s { bottom:4px; }.rn-viz-anatomy .w { left:5px; }
.rn-viz-anatomy span::after { content:""; position:absolute; background:var(--viz-rule-strong); }
.rn-viz-anatomy .n::after { left:50%; top:100%; width:1.5px; height:11px; }
.rn-viz-anatomy .s::after { left:50%; bottom:100%; width:1.5px; height:11px; }
.rn-viz-anatomy .e::after { top:50%; right:100%; width:11px; height:1.5px; }
.rn-viz-anatomy .w::after { top:50%; left:100%; width:11px; height:1.5px; }
.rn-viz-cause { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; }
.rn-viz-cause section { position:relative; padding:26px 14px 14px; border-radius:9px; background:var(--viz-red-soft); text-align:center; }
.rn-viz-cause section:last-child { background:var(--viz-green-soft); }
.rn-viz-cause section::before { content:"CAUSE"; position:absolute; left:50%; top:8px; color:var(--viz-red); font:800 8.5px/1 var(--viz-mono); letter-spacing:.16em; transform:translateX(-50%); }
.rn-viz-cause section:last-child::before { content:"EFFECT"; color:var(--viz-green); }
.rn-viz-cause i { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#3a2c05; background:var(--viz-gold); font-style:normal; font-weight:800; }
.rn-viz-cycle { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:46px; max-width:270px; margin:auto; }
.rn-viz-cycle::before { content:""; position:absolute; inset:18px 44px; border:2px dashed var(--viz-rule-strong); border-radius:50%; }
.rn-viz-cycle::after { content:"\21BB"; position:absolute; left:50%; top:-6px; z-index:1; padding:0 5px; color:var(--viz-gold-deep); background:var(--viz-surface); font-size:19px; line-height:1; transform:translateX(-50%); }
.rn-viz-cycle span { position:relative; z-index:1; display:grid; place-items:center; min-height:48px; border:1px solid var(--viz-rule); border-radius:8px; color:var(--viz-soft); background:var(--viz-tint); font:700 10px/1 var(--viz-mono); }
.rn-viz-cycle span:nth-child(3),.rn-viz-cycle span:nth-child(4) { grid-row:2; }

/* 89-100: editorial utility and trust */
.rn-viz-callout { padding:16px 18px; border-left:3px solid var(--viz-blue); border-radius:0 9px 9px 0; color:var(--viz-soft); background:var(--viz-tint); }
.rn-viz-callout b { display:block; margin-bottom:4px; color:var(--viz-blue); font:800 11px/1 var(--viz-mono); text-transform:uppercase; letter-spacing:.08em; }
.rn-viz-callout.warning { border-color:var(--viz-gold-deep); background:var(--viz-gold-soft); }
.rn-viz-callout.warning b { color:var(--viz-gold-deep); }
.rn-viz-callout.success { border-color:var(--viz-green); background:var(--viz-green-soft); }
.rn-viz-callout.success b { color:var(--viz-green); }
.rn-viz-mythfact { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rn-viz-mythfact section { padding:15px; border-radius:9px; background:var(--viz-red-soft); }
.rn-viz-mythfact section:last-child { background:var(--viz-green-soft); }
.rn-viz-mythfact b { display:block; margin-bottom:6px; color:var(--viz-red); font:800 10px/1 var(--viz-mono); text-transform:uppercase; }
.rn-viz-mythfact section:last-child b { color:var(--viz-green); }
.rn-viz-evidence { position:relative; padding:18px; border:1px solid var(--viz-rule); border-top:3px solid var(--viz-blue); border-radius:0 0 10px 10px; }
.rn-viz-evidence::after { content:attr(data-exhibit); position:absolute; right:12px; top:10px; color:var(--viz-faint); font:800 10px/1 var(--viz-mono); letter-spacing:.1em; }
.rn-viz-evidence h3 { margin:0 0 5px; font:600 20px/1.2 var(--viz-serif); }
.rn-viz-source-card { display:grid; grid-template-columns:auto 1fr; gap:12px; padding:15px; border:1px solid var(--viz-rule); border-radius:10px; background:var(--viz-tint); }
.rn-viz-source-icon { display:grid; place-items:center; width:38px; aspect-ratio:1; border-radius:8px; color:#fff; background:var(--viz-navy); font:800 12px/1 var(--viz-mono); }
.rn-viz-source-card b { display:block; font-size:13.5px; }.rn-viz-source-card span { color:var(--viz-faint); font-size:11.5px; }
.rn-viz-citation { display:inline-flex; align-items:center; gap:5px; margin-left:6px; border:1px solid var(--viz-rule); border-radius:5px; padding:4px 7px; color:var(--viz-blue); background:var(--viz-tint); font:800 10px/1 var(--viz-sans); cursor:pointer; }
.rn-viz-citation::before { content:"\2197"; opacity:.75; }
.rn-viz-citation:hover { color:var(--viz-onaccent); border-color:var(--viz-blue); background:var(--viz-blue); }
.rn-viz-faq { border-block:1px solid var(--viz-rule); }
.rn-viz-faq details + details { border-top:1px solid var(--viz-rule); }
.rn-viz-faq summary { position:relative; padding:13px 38px 13px 0; color:var(--viz-ink); font:600 16px/1.4 var(--viz-serif); cursor:pointer; list-style:none; }
.rn-viz-faq summary::-webkit-details-marker { display:none; }
.rn-viz-faq summary::before { content:"Q"; margin-right:9px; color:var(--viz-blue); font:800 11px/1 var(--viz-mono); }
.rn-viz-faq summary::after { content:"+"; position:absolute; right:2px; top:50%; display:grid; place-items:center; width:22px; height:22px; border:1px solid var(--viz-rule-strong); border-radius:50%; color:var(--viz-blue); font:600 14px/1 var(--viz-sans); transform:translateY(-50%); }
.rn-viz-faq details[open] summary::after { content:"\2212"; color:var(--viz-onaccent); border-color:var(--viz-blue); background:var(--viz-blue); }
.rn-viz-faq p { margin:0; padding:0 0 14px 20px; color:var(--viz-soft); font-size:13.5px; }
.rn-viz-figure { margin:0; }
.rn-viz-image-placeholder { display:grid; place-items:center; aspect-ratio:16/9; border:1px solid var(--viz-rule); border-radius:10px; color:var(--viz-blue); background:linear-gradient(135deg,var(--viz-blue-soft),var(--viz-tint)); font:800 11px/1 var(--viz-mono); letter-spacing:.1em; }
.rn-viz-figure figcaption { margin-top:7px; color:var(--viz-faint); font:italic 12px/1.45 var(--viz-serif); }
.rn-viz-glossary { display:grid; grid-template-columns:auto 1fr; gap:9px 14px; margin:0; align-items:baseline; }
.rn-viz-glossary dt { justify-self:start; padding:3px 8px; border-radius:5px; color:var(--viz-blue); background:var(--viz-blue-soft); font:800 10.5px/1.3 var(--viz-mono); letter-spacing:.06em; }
.rn-viz-glossary dd { margin:0; padding-bottom:8px; border-bottom:1px dotted var(--viz-rule-strong); color:var(--viz-soft); font-size:12.5px; }
.rn-viz-glossary dd:last-of-type { border-bottom:0; }
.rn-viz-takeaways { counter-reset:take; display:grid; gap:8px; }
.rn-viz-takeaways div { counter-increment:take; display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:center; padding:11px; border:1px solid var(--viz-rule); border-radius:8px; background:var(--viz-tint); }
.rn-viz-takeaways div::before { content:counter(take); display:grid; place-items:center; width:24px; aspect-ratio:1; border-radius:50%; color:#3a2c05; background:var(--viz-gold); font:800 10px/1 var(--viz-mono); }
.rn-viz-takeaways b { font-size:12.5px; }
.rn-viz-verdict { position:relative; padding:22px; border:2px solid var(--viz-ink); border-radius:2px; color:var(--viz-ink); background:var(--viz-gold-soft); text-align:center; }
.rn-viz-verdict::before { content:"VERDICT"; position:absolute; left:50%; top:-9px; padding:4px 9px; color:var(--viz-surface); background:var(--viz-ink); font:800 9px/1 var(--viz-mono); letter-spacing:.14em; transform:translateX(-50%); }
.rn-viz-verdict b { display:block; font:600 26px/1.18 var(--viz-serif); }
.rn-viz-verdict span { color:var(--viz-soft); font-size:12.5px; }

/* ============================================================
   101-113: the paper trail — documents, filings, and records
   ============================================================ */
.rn-viz-docket { border:1.5px solid var(--viz-ink); border-radius:12px; overflow:hidden; }
.rn-viz-docket .hd { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:9px 15px; color:var(--viz-surface); background:var(--viz-ink); font:700 10px/1.5 var(--viz-mono); letter-spacing:.14em; text-transform:uppercase; }
.rn-viz-docket .hd .r { opacity:.6; }
.rn-viz-docket .row { display:grid; grid-template-columns:auto 1fr; gap:12px; padding:11px 15px; border-bottom:1px solid var(--viz-rule); color:var(--viz-soft); font-size:13.5px; line-height:1.5; }
.rn-viz-docket .row:last-child { border-bottom:0; }
.rn-viz-docket .row b { color:var(--viz-ink); }
.rn-viz-docket .no { color:var(--viz-blue); padding-top:2px; font:800 11px/1.6 var(--viz-mono); }

.rn-viz-gates { display:grid; gap:0; }
.rn-viz-gates .step { padding:11px 14px; border:1px solid var(--viz-rule); border-left:4px solid var(--viz-blue); border-radius:0 9px 9px 0; background:var(--viz-tint); }
.rn-viz-gates .g { display:block; color:var(--viz-faint); font:800 9.5px/1.4 var(--viz-mono); letter-spacing:.1em; text-transform:uppercase; }
.rn-viz-gates .q { margin:3px 0 0; color:var(--viz-ink); font-size:13.5px; font-weight:700; line-height:1.35; }
.rn-viz-gates .arw { margin:6px 0; color:var(--viz-rule-strong); font-size:15px; line-height:1; text-align:center; }
.rn-viz-gates .out { margin-top:6px; padding:11px 14px; border:1px solid var(--viz-green); border-radius:9px; color:var(--viz-ink); background:var(--viz-green-soft); font-size:13px; }
.rn-viz-gates .out b { color:var(--viz-green); }

.rn-viz-stampwrap { padding:14px 0; text-align:center; }
.rn-viz-stamp { display:inline-block; padding:9px 16px; border:3px solid var(--viz-red); border-radius:7px; color:var(--viz-red); font:800 clamp(15px,3vw,20px)/1 var(--viz-mono); letter-spacing:.08em; text-transform:uppercase; transform:rotate(-3.5deg); opacity:.88; }
.rn-viz-stamp.approve { border-color:var(--viz-green); color:var(--viz-green); transform:rotate(2.5deg); }

.rn-viz-redacted { margin:0; color:var(--viz-soft); font:14px/1.9 var(--viz-mono); }
.rn-viz-redacted mark { padding:1px 3px; border-radius:2px; color:transparent; background:var(--viz-ink); user-select:none; }

.rn-viz-memo { padding:16px 18px; border:1px solid var(--viz-rule-strong); background:var(--viz-tint); color:var(--viz-ink); font:13px/1.75 var(--viz-mono); box-shadow:0 4px 0 -2px var(--viz-rule); }
.rn-viz-memo .hd { margin:0 0 10px; padding-bottom:8px; border-bottom:2px solid var(--viz-ink); font-weight:800; letter-spacing:.24em; text-transform:uppercase; }
.rn-viz-memo .meta { margin:0 0 10px; color:var(--viz-soft); font-size:11.5px; }
.rn-viz-memo .meta b { color:var(--viz-ink); }
.rn-viz-memo p { margin:0; }

.rn-viz-folder { position:relative; margin-top:20px; padding:15px 16px; border:1px solid var(--viz-rule-strong); border-radius:0 10px 10px 10px; background:var(--viz-tint); }
.rn-viz-folder::before { content:attr(data-tab); position:absolute; left:-1px; bottom:calc(100% - 1px); padding:5px 15px 4px; border:1px solid var(--viz-rule-strong); border-bottom:0; border-radius:8px 8px 0 0; color:var(--viz-soft); background:var(--viz-tint); font:800 10px/1 var(--viz-mono); letter-spacing:.1em; text-transform:uppercase; }
.rn-viz-folder b { display:block; margin-bottom:3px; color:var(--viz-ink); font-size:14px; }
.rn-viz-folder p { margin:0; color:var(--viz-soft); font-size:12.5px; }

.rn-viz-indexcard { max-width:320px; margin:auto; padding:0 16px 16px; border:1px solid var(--viz-rule); border-top:3px solid var(--viz-red); border-radius:6px; background:var(--viz-surface); background-image:repeating-linear-gradient(var(--viz-surface) 0 27px,var(--viz-rule) 27px 28px); box-shadow:var(--viz-shadow); color:var(--viz-soft); font:14px/28px var(--viz-serif); }
.rn-viz-indexcard b { display:block; color:var(--viz-ink); line-height:28px; }

.rn-viz-sticky-note { position:relative; max-width:230px; margin:auto; padding:16px 15px 24px; color:#4a3b12; background:#ffe9a8; font:600 15px/1.5 var(--viz-hand); transform:rotate(-2deg); box-shadow:0 10px 18px -10px rgba(60,44,10,.45); }
.rn-viz-sticky-note::after { content:""; position:absolute; right:0; bottom:0; border-style:solid; border-width:0 18px 18px 0; border-color:transparent #d9bc63 transparent transparent; }

.rn-viz-clipping { max-width:300px; margin:auto; padding:14px 16px; border:1px solid var(--viz-rule-strong); background:var(--viz-surface); transform:rotate(1.2deg); box-shadow:var(--viz-shadow); }
.rn-viz-clipping .paper { display:flex; align-items:center; gap:8px; color:var(--viz-faint); font:800 9px/1 var(--viz-mono); letter-spacing:.18em; text-transform:uppercase; }
.rn-viz-clipping .paper::before,.rn-viz-clipping .paper::after { content:""; flex:1; height:1px; background:var(--viz-rule-strong); }
.rn-viz-clipping h3 { margin:9px 0 6px; font:700 19px/1.12 var(--viz-serif); }
.rn-viz-clipping p { margin:0; color:var(--viz-soft); font:12px/1.55 var(--viz-serif); text-align:justify; }

.rn-viz-ledger { font:12.5px/1.4 var(--viz-mono); }
.rn-viz-ledger div { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:baseline; padding:8px 0; border-bottom:1px dotted var(--viz-rule-strong); }
.rn-viz-ledger .d { color:var(--viz-faint); font-size:10.5px; }
.rn-viz-ledger .amt { font-weight:700; color:var(--viz-green); font-variant-numeric:tabular-nums; }
.rn-viz-ledger .amt.neg { color:var(--viz-red); }
.rn-viz-ledger .bal { border-bottom:0; margin-top:2px; border-top:2px solid var(--viz-ink); color:var(--viz-ink); font-weight:800; }
.rn-viz-ledger .bal .amt { color:var(--viz-ink); }

.rn-viz-notice { border:2px solid var(--viz-ink); border-radius:3px; overflow:hidden; }
.rn-viz-notice .bar { padding:8px 14px; color:var(--viz-surface); background:var(--viz-ink); font:800 10.5px/1 var(--viz-mono); letter-spacing:.18em; text-transform:uppercase; text-align:center; }
.rn-viz-notice .bd { padding:14px 16px; }
.rn-viz-notice .addr { display:inline-block; margin:0 0 10px; padding:9px 12px; border:1px dashed var(--viz-rule-strong); color:var(--viz-soft); font:11px/1.6 var(--viz-mono); }
.rn-viz-notice p { margin:0; color:var(--viz-soft); font-size:13px; }
.rn-viz-notice p b { color:var(--viz-red); }

.rn-viz-signature { max-width:300px; }
.rn-viz-signature .x { color:var(--viz-red); font:700 17px/1 var(--viz-serif); margin-right:6px; }
.rn-viz-signature .sig { display:inline-block; color:var(--viz-ink); font:italic 600 29px/1 var(--viz-script); transform:rotate(-2deg); }
.rn-viz-signature .line { display:flex; justify-content:space-between; gap:10px; margin-top:7px; padding-top:6px; border-top:1.5px solid var(--viz-ink); color:var(--viz-faint); font:700 9.5px/1.4 var(--viz-mono); letter-spacing:.1em; text-transform:uppercase; }

.rn-viz-casefile { display:grid; gap:9px; padding:15px 17px; border:1px solid var(--viz-rule); border-left:4px solid var(--viz-navy); border-radius:0 10px 10px 0; background:var(--viz-tint); }
.rn-viz-casefile .no { color:var(--viz-faint); font:800 10px/1 var(--viz-mono); letter-spacing:.12em; text-transform:uppercase; }
.rn-viz-casefile .parties { color:var(--viz-ink); font:600 20px/1.25 var(--viz-serif); }
.rn-viz-casefile .parties i { padding:0 7px; color:var(--viz-faint); font:italic 14px/1 var(--viz-serif); }
.rn-viz-casefile .meta { display:flex; flex-wrap:wrap; gap:6px; }

/* ============================================================
   114-124: money on the page
   ============================================================ */
.rn-viz-pricetag { position:relative; display:inline-block; margin:10px 0 0 16px; padding:13px 20px 13px 28px; color:#3a2c05; background:var(--viz-gold); clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%); font:800 24px/1 var(--viz-serif); transform:rotate(-2deg); }
.rn-viz-pricetag::before { content:""; position:absolute; left:11px; top:50%; width:7px; height:7px; border-radius:50%; background:var(--viz-surface); transform:translateY(-50%); }
.rn-viz-pricetag small { display:block; margin-top:4px; font:700 9px/1 var(--viz-mono); letter-spacing:.12em; text-transform:uppercase; opacity:.75; }

.rn-viz-paystub { border:1px solid var(--viz-rule); border-radius:10px; overflow:hidden; font:12.5px/1.4 var(--viz-mono); }
.rn-viz-paystub div { display:flex; justify-content:space-between; gap:10px; padding:9px 14px; border-bottom:1px solid var(--viz-rule); color:var(--viz-soft); font-variant-numeric:tabular-nums; }
.rn-viz-paystub .ttl { background:var(--viz-tint); color:var(--viz-ink); font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:10px; }
.rn-viz-paystub .ded span:last-child { color:var(--viz-red); }
.rn-viz-paystub .net { border-bottom:0; background:var(--viz-green-soft); color:var(--viz-green); font-weight:800; }

.rn-viz-paycard { display:flex; flex-direction:column; justify-content:space-between; max-width:290px; aspect-ratio:1.586; margin:auto; padding:17px 18px; border-radius:14px; color:#f4f1e8; background:linear-gradient(125deg,#16233f 30%,#2b4a8b); box-shadow:var(--viz-shadow); }
.rn-viz-paycard .chip { width:36px; height:26px; border-radius:5px; background:linear-gradient(135deg,#f2c14e,#b8822c); }
.rn-viz-paycard .num { font:600 16px/1 var(--viz-mono); letter-spacing:.16em; }
.rn-viz-paycard .ft { display:flex; justify-content:space-between; gap:10px; font:700 9px/1.4 var(--viz-mono); letter-spacing:.08em; text-transform:uppercase; opacity:.8; }

.rn-viz-amort { display:grid; gap:8px; }
.rn-viz-amort .row { display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:center; color:var(--viz-faint); font:700 10.5px/1 var(--viz-mono); }
.rn-viz-amort .bar { display:flex; height:15px; border-radius:3px; overflow:hidden; }
.rn-viz-amort .int { width:var(--w); background:var(--viz-red); }
.rn-viz-amort .pri { flex:1; background:var(--viz-green); }
.rn-viz-amort .lg { display:flex; gap:16px; margin-top:2px; color:var(--viz-faint); font:700 10px/1 var(--viz-mono); }
.rn-viz-amort .lg i { display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:2px; background:var(--viz-red); }
.rn-viz-amort .lg span:last-child i { background:var(--viz-green); }

.rn-viz-coins { display:flex; align-items:end; justify-content:center; gap:32px; }
.rn-viz-coins .stack { display:grid; justify-items:center; }
.rn-viz-coins .pile { display:flex; flex-direction:column-reverse; gap:2px; }
.rn-viz-coins .pile i { width:46px; height:9px; border:1px solid #a97c22; border-radius:50%; background:linear-gradient(#f6d47c,#c9962f); }
.rn-viz-coins b { margin-top:9px; font:600 17px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-coins span { color:var(--viz-faint); font:700 9.5px/1.6 var(--viz-mono); text-transform:uppercase; letter-spacing:.08em; }

.rn-viz-staircase { display:flex; align-items:flex-end; gap:4px; height:118px; border-bottom:1px solid var(--viz-rule-strong); }
.rn-viz-staircase div { flex:1; display:grid; justify-items:center; align-content:start; height:var(--h); padding-top:6px; border-top:3px solid var(--viz-green); background:var(--viz-green-soft); color:var(--viz-green); font:800 10px/1.4 var(--viz-mono); }
.rn-viz-staircase span { color:var(--viz-faint); font-weight:700; }

.rn-viz-brackets { display:grid; gap:3px; }
.rn-viz-brackets div { display:flex; justify-content:space-between; gap:10px; padding:8px 12px; border-left:4px solid var(--viz-blue); color:var(--viz-soft); background:var(--viz-blue-soft); font:700 11px/1.5 var(--viz-mono); font-variant-numeric:tabular-nums; }
.rn-viz-brackets div:nth-child(2) { border-left-color:var(--viz-purple); background:var(--viz-purple-soft); }
.rn-viz-brackets div:nth-child(3) { border-left-color:var(--viz-gold-deep); background:var(--viz-gold-soft); }
.rn-viz-brackets div:nth-child(4) { border-left-color:var(--viz-red); background:var(--viz-red-soft); }
.rn-viz-brackets .you { position:relative; outline:2px solid var(--viz-ink); outline-offset:1px; color:var(--viz-ink); }
.rn-viz-brackets .you::after { content:"\2190 you"; color:var(--viz-ink); font-weight:800; }

.rn-viz-fx { display:flex; align-items:center; justify-content:center; gap:20px; }
.rn-viz-fx > div { text-align:center; }
.rn-viz-fx b { font:600 34px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-fx .cur { display:block; margin-top:5px; color:var(--viz-faint); font:800 10px/1 var(--viz-mono); letter-spacing:.12em; }
.rn-viz-fx i { color:var(--viz-gold-deep); font-size:22px; font-style:normal; }

.rn-viz-envelopes { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rn-viz-envelope { position:relative; padding:30px 10px 12px; border:1px solid var(--viz-rule-strong); border-radius:6px; background:var(--viz-tint); text-align:center; overflow:hidden; }
.rn-viz-envelope::before { content:""; position:absolute; inset:0 0 auto; height:22px; background:var(--viz-rule); clip-path:polygon(0 0,100% 0,50% 100%); }
.rn-viz-envelope b { display:block; font:600 17px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-envelope span { color:var(--viz-faint); font:700 9.5px/2 var(--viz-mono); text-transform:uppercase; letter-spacing:.06em; }

.rn-viz-seesaw { position:relative; height:130px; max-width:340px; margin:auto; border-bottom:1px solid var(--viz-rule); }
.rn-viz-seesaw .beam { position:absolute; left:6%; right:6%; top:60px; height:6px; border-radius:3px; background:var(--viz-ink); transform:rotate(-7deg); }
.rn-viz-seesaw .beam::before,.rn-viz-seesaw .beam::after { content:""; position:absolute; top:50%; width:10px; height:10px; border-radius:50%; background:var(--viz-ink); transform:translateY(-50%); }
.rn-viz-seesaw .beam::before { left:-4px; }
.rn-viz-seesaw .beam::after { right:-4px; }
.rn-viz-seesaw::after { content:""; position:absolute; left:50%; bottom:0; border-style:solid; border-width:0 22px 44px; border-color:transparent transparent var(--viz-rule-strong); transform:translateX(-50%); }
.rn-viz-seesaw .wt { position:absolute; z-index:1; padding:8px 12px; border-radius:8px; font:800 11px/1.4 var(--viz-mono); text-align:center; }
.rn-viz-seesaw .wt small { display:block; font:700 8.5px/1.4 var(--viz-sans); letter-spacing:.06em; text-transform:uppercase; opacity:.8; }
.rn-viz-seesaw .wa { left:2%; top:2px; color:var(--viz-green); background:var(--viz-green-soft); border:1px solid var(--viz-green); }
.rn-viz-seesaw .wb { right:2%; top:38px; color:var(--viz-red); background:var(--viz-red-soft); border:1px solid var(--viz-red); }

.rn-viz-subs { display:grid; font-size:13px; }
.rn-viz-subs div { display:grid; grid-template-columns:30px 1fr auto; gap:11px; align-items:center; padding:8px 0; border-bottom:1px solid var(--viz-rule); }
.rn-viz-subs .ic { display:grid; place-items:center; width:30px; height:30px; border-radius:7px; color:#fff; background:var(--viz-blue); font:800 10px/1 var(--viz-mono); }
.rn-viz-subs div:nth-child(2) .ic { background:var(--viz-purple); }
.rn-viz-subs div:nth-child(3) .ic { background:var(--viz-red); }
.rn-viz-subs .amt { color:var(--viz-soft); font:700 12.5px/1 var(--viz-mono); font-variant-numeric:tabular-nums; }
.rn-viz-subs .tot { grid-template-columns:1fr auto; border-bottom:0; color:var(--viz-ink); font-weight:800; }
.rn-viz-subs .tot .amt { color:var(--viz-ink); font-weight:800; }

/* ============================================================
   125-136: interaction and state
   ============================================================ */
.rn-viz-segmented { display:inline-flex; padding:3px; border:1px solid var(--viz-rule-strong); border-radius:999px; background:var(--viz-tint); }
.rn-viz-segmented span { padding:7px 15px; border-radius:999px; color:var(--viz-soft); font:700 12px/1 var(--viz-sans); cursor:pointer; white-space:nowrap; }
.rn-viz-segmented .on { color:var(--viz-onaccent); background:var(--viz-blue); }

.rn-viz-wizard { display:flex; align-items:center; }
.rn-viz-wizard span { z-index:1; display:grid; place-items:center; width:28px; height:28px; border:2px solid var(--viz-rule-strong); border-radius:50%; color:var(--viz-faint); background:var(--viz-surface); font:800 11px/1 var(--viz-mono); }
.rn-viz-wizard span.done { border-color:var(--viz-green); color:#fff; background:var(--viz-green); }
.rn-viz-wizard span.cur { border-color:var(--viz-blue); color:var(--viz-blue); box-shadow:0 0 0 4px var(--viz-blue-soft); }
.rn-viz-wizard i { flex:1; height:2px; background:var(--viz-rule-strong); }
.rn-viz-wizard i.done { background:var(--viz-green); }

.rn-viz-poll { display:grid; gap:8px; }
.rn-viz-poll .opt { position:relative; display:flex; justify-content:space-between; gap:10px; padding:9px 12px; border:1px solid var(--viz-rule); border-radius:8px; overflow:hidden; color:var(--viz-ink); font:600 13px/1.5 var(--viz-sans); }
.rn-viz-poll .opt i { position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--viz-blue-soft); }
.rn-viz-poll .opt span { position:relative; }
.rn-viz-poll .pct { position:relative; color:var(--viz-blue); font:800 12px/1.7 var(--viz-mono); font-variant-numeric:tabular-nums; }
.rn-viz-poll .opt.mine { border-color:var(--viz-blue); }
.rn-viz-poll .opt.mine span::after { content:" \2713"; color:var(--viz-blue); font-weight:800; }

.rn-viz-countdown { display:flex; justify-content:center; gap:8px; }
.rn-viz-countdown div { min-width:64px; padding:12px 8px; border:1px solid var(--viz-rule); border-radius:10px; background:var(--viz-tint); text-align:center; }
.rn-viz-countdown b { display:block; color:var(--viz-ink); font:700 26px/1 var(--viz-mono); font-variant-numeric:tabular-nums; }
.rn-viz-countdown span { color:var(--viz-faint); font:800 9px/2.2 var(--viz-mono); letter-spacing:.12em; text-transform:uppercase; }

.rn-viz-flip { max-width:280px; height:124px; margin:auto; perspective:900px; cursor:pointer; }
.rn-viz-flip .inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.rn-viz-flip:hover .inner,.rn-viz-flip:focus-within .inner { transform:rotateY(180deg); }
.rn-viz-flip .face { position:absolute; inset:0; display:grid; place-items:center; padding:14px; border-radius:10px; text-align:center; backface-visibility:hidden; }
.rn-viz-flip .front { color:#f4f1e8; background:var(--viz-navy); font:600 18px/1.35 var(--viz-serif); }
.rn-viz-flip .back { border:1px solid var(--viz-gold); color:var(--viz-ink); background:var(--viz-gold-soft); font-size:13.5px; transform:rotateY(180deg); }

.rn-viz-spoiler { margin:0; font:17px/1.6 var(--viz-serif); }
.rn-viz-spoiler b { filter:blur(7px); cursor:pointer; transition:filter .25s; }
.rn-viz-spoiler:hover b,.rn-viz-spoiler:focus-within b { filter:none; }

.rn-viz-confidence { display:grid; gap:8px; max-width:280px; }
.rn-viz-confidence .lbl { display:flex; justify-content:space-between; color:var(--viz-soft); font:700 11px/1 var(--viz-mono); text-transform:uppercase; letter-spacing:.08em; }
.rn-viz-confidence .lbl b { color:var(--viz-blue); }
.rn-viz-confidence .segs { display:flex; gap:4px; }
.rn-viz-confidence .segs i { flex:1; height:12px; border:1px solid var(--viz-rule-strong); border-radius:3px; background:var(--viz-tint); }
.rn-viz-confidence .segs i.on { border-color:var(--viz-blue); background:var(--viz-blue); }

.rn-viz-quiz { border:1px solid var(--viz-rule); border-radius:10px; overflow:hidden; }
.rn-viz-quiz summary { padding:13px 15px; color:var(--viz-ink); background:var(--viz-tint); font:600 15px/1.4 var(--viz-serif); cursor:pointer; }
.rn-viz-quiz summary::before { content:"Q."; margin-right:8px; color:var(--viz-blue); font:800 12px/1 var(--viz-mono); }
.rn-viz-quiz .ans { padding:12px 15px; border-top:1px solid var(--viz-rule); color:var(--viz-soft); font-size:13.5px; }
.rn-viz-quiz .ans::before { content:"ANSWER"; display:inline-block; margin-right:9px; padding:3px 6px; border-radius:4px; color:var(--viz-green); background:var(--viz-green-soft); font:800 9px/1 var(--viz-mono); letter-spacing:.1em; vertical-align:1px; }

.rn-viz-live { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1.5px solid var(--viz-red); border-radius:999px; color:var(--viz-red); font:800 11px/1 var(--viz-mono); letter-spacing:.12em; text-transform:uppercase; }
.rn-viz-live i { width:8px; height:8px; border-radius:50%; background:var(--viz-red); animation:rnVizPulse 1.5s infinite; }

.rn-viz-toast { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; max-width:340px; margin:auto; padding:12px 14px; border:1px solid var(--viz-rule); border-left:4px solid var(--viz-green); border-radius:10px; background:var(--viz-surface); box-shadow:var(--viz-shadow); }
.rn-viz-toast .ic { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#fff; background:var(--viz-green); font:800 12px/1 var(--viz-sans); }
.rn-viz-toast b { display:block; font-size:13px; }
.rn-viz-toast span { color:var(--viz-faint); font-size:11.5px; }
.rn-viz-toast .x { color:var(--viz-faint); font-size:16px; line-height:1; cursor:pointer; }

.rn-viz-serp { max-width:430px; }
.rn-viz-serp .url { display:flex; align-items:center; gap:7px; color:var(--viz-green); font-size:12px; }
.rn-viz-serp .url i { width:16px; height:16px; border-radius:50%; background:var(--viz-navy); }
.rn-viz-serp h3 { margin:4px 0 2px; color:var(--viz-blue); font:400 18px/1.3 var(--viz-sans); }
.rn-viz-serp p { margin:0; color:var(--viz-soft); font-size:13px; line-height:1.5; }
.rn-viz-serp p b { color:var(--viz-ink); }
.rn-viz-serp .dt { color:var(--viz-faint); }

.rn-viz-social { max-width:340px; margin:auto; padding:14px 15px; border:1px solid var(--viz-rule); border-radius:12px; background:var(--viz-surface); }
.rn-viz-social .who { display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:center; margin-bottom:9px; }
.rn-viz-social .av { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff; background:var(--viz-navy); font:600 13px/1 var(--viz-serif); }
.rn-viz-social .who b { display:block; font-size:13px; }
.rn-viz-social .who span { color:var(--viz-faint); font-size:11.5px; }
.rn-viz-social > p { margin:0 0 10px; font-size:14px; line-height:1.5; }
.rn-viz-social .tag { color:var(--viz-blue); }
.rn-viz-social .acts { display:flex; gap:20px; padding-top:9px; border-top:1px solid var(--viz-rule); color:var(--viz-faint); font:700 11px/1 var(--viz-mono); }

/* ============================================================
   137-150: advanced charts and badges
   ============================================================ */
.rn-viz-radar { display:block; width:180px; height:170px; margin:auto; }
.rn-viz-radar .grid { fill:none; stroke:var(--viz-rule-strong); stroke-width:1; }
.rn-viz-radar .data { fill:var(--viz-blue); fill-opacity:.18; stroke:var(--viz-blue); stroke-width:2; }
.rn-viz-radar text { fill:var(--viz-faint); font:700 8.5px var(--viz-mono); }

.rn-viz-candles { display:flex; align-items:flex-end; justify-content:center; gap:12px; height:120px; border-bottom:1px solid var(--viz-rule-strong); }
.rn-viz-candles i { position:relative; width:16px; height:var(--h,40px); margin-bottom:var(--b,0); border-radius:2px; color:var(--viz-green); background:currentColor; }
.rn-viz-candles i.down { color:var(--viz-red); }
.rn-viz-candles i::before { content:""; position:absolute; left:50%; top:-9px; bottom:-7px; width:2px; background:currentColor; transform:translateX(-50%); }
.rn-viz-candles i:nth-child(1) { --h:30px; --b:8px; }
.rn-viz-candles i:nth-child(2) { --h:40px; --b:22px; }
.rn-viz-candles i:nth-child(3) { --h:26px; --b:38px; }
.rn-viz-candles i:nth-child(4) { --h:34px; --b:26px; }
.rn-viz-candles i:nth-child(5) { --h:44px; --b:40px; }
.rn-viz-candles i:nth-child(6) { --h:24px; --b:64px; }

.rn-viz-heatcal { display:grid; grid-auto-flow:column; grid-template-rows:repeat(5,13px); gap:3px; width:max-content; margin:0 auto 10px; }
.rn-viz-heatcal i { width:13px; height:13px; border-radius:3px; background:var(--viz-tint); border:1px solid var(--viz-rule); }
.rn-viz-heatcal .l1 { background:color-mix(in srgb,var(--viz-green) 25%,var(--viz-tint)); border-color:transparent; }
.rn-viz-heatcal .l2 { background:color-mix(in srgb,var(--viz-green) 55%,var(--viz-tint)); border-color:transparent; }
.rn-viz-heatcal .l3 { background:var(--viz-green); border-color:transparent; }

.rn-viz-flowsplit { display:grid; grid-template-columns:auto 26px 1fr; gap:0 0; align-items:center; }
.rn-viz-flowsplit .src { display:grid; place-items:center; width:78px; align-self:stretch; border-radius:9px; color:var(--viz-onaccent); background:var(--viz-blue); font:800 11px/1.4 var(--viz-mono); text-align:center; }
.rn-viz-flowsplit .pipe { align-self:stretch; border-right:2px solid var(--viz-rule-strong); margin:10px 0; position:relative; }
.rn-viz-flowsplit .outs { display:grid; gap:8px; padding-left:14px; }
.rn-viz-flowsplit .outs div { position:relative; display:flex; align-items:center; gap:10px; }
.rn-viz-flowsplit .outs div::before { content:""; position:absolute; left:-14px; width:14px; height:2px; background:var(--viz-rule-strong); }
.rn-viz-flowsplit .outs i { display:block; height:16px; width:var(--w); border-radius:3px; background:var(--viz-blue-soft); border:1px solid var(--viz-blue); }
.rn-viz-flowsplit .outs span { color:var(--viz-soft); font:700 10.5px/1.3 var(--viz-mono); white-space:nowrap; }

.rn-viz-gantt { display:grid; gap:9px; }
.rn-viz-gantt .row { display:grid; grid-template-columns:66px 1fr; gap:10px; align-items:center; color:var(--viz-soft); font:700 10.5px/1.3 var(--viz-mono); }
.rn-viz-gantt .track { position:relative; height:16px; border-radius:4px; background:var(--viz-tint); }
.rn-viz-gantt .bar { position:absolute; top:0; bottom:0; left:var(--l,0); width:var(--w); border-radius:4px; background:var(--viz-blue); }
.rn-viz-gantt .row:nth-child(2) .bar { background:var(--viz-purple); }
.rn-viz-gantt .row:nth-child(3) .bar { background:var(--viz-gold); }
.rn-viz-gantt .row:nth-child(4) .bar { background:var(--viz-green); }
.rn-viz-l0 { --l:0; }.rn-viz-l15 { --l:15%; }.rn-viz-l25 { --l:25%; }.rn-viz-l35 { --l:35%; }.rn-viz-l45 { --l:45%; }.rn-viz-l55 { --l:55%; }.rn-viz-l65 { --l:65%; }

.rn-viz-bullet { display:grid; gap:7px; }
.rn-viz-bullet .lbl { display:flex; justify-content:space-between; color:var(--viz-soft); font:700 11px/1 var(--viz-mono); text-transform:uppercase; letter-spacing:.06em; }
.rn-viz-bullet .track { position:relative; height:22px; border-radius:4px; background:var(--viz-tint); }
.rn-viz-bullet .band { position:absolute; inset:0; width:75%; border-radius:4px; background:var(--viz-rule); }
.rn-viz-bullet .measure { position:absolute; left:0; top:6px; bottom:6px; width:58%; border-radius:2px; background:var(--viz-ink); }
.rn-viz-bullet .tgt { position:absolute; left:70%; top:-3px; bottom:-3px; width:3px; background:var(--viz-red); }

.rn-viz-dumbbell { display:grid; gap:15px; }
.rn-viz-dumbbell .row { display:grid; grid-template-columns:62px 1fr; gap:12px; align-items:center; color:var(--viz-soft); font-size:11.5px; }
.rn-viz-dumbbell .line { position:relative; height:3px; border-radius:2px; background:var(--viz-rule); }
.rn-viz-dumbbell .line::before,.rn-viz-dumbbell .line::after { content:""; position:absolute; top:50%; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); }
.rn-viz-dumbbell .line::before { left:var(--a); border:2.5px solid var(--viz-faint); background:var(--viz-surface); }
.rn-viz-dumbbell .line::after { left:var(--b); background:var(--viz-blue); }
.rn-viz-dumbbell .line i { position:absolute; top:0; bottom:0; left:var(--a); width:calc(var(--b) - var(--a)); background:var(--viz-blue-soft); }
.rn-viz-dumbbell .row:nth-child(1) .line { --a:22%; --b:64%; }
.rn-viz-dumbbell .row:nth-child(2) .line { --a:38%; --b:82%; }
.rn-viz-dumbbell .row:nth-child(3) .line { --a:15%; --b:41%; }

.rn-viz-multiples { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center; }
.rn-viz-multiples .mini { display:grid; place-items:center; width:66px; aspect-ratio:1; margin:0 auto 7px; border-radius:50%; background:conic-gradient(var(--viz-blue) 0 var(--p),var(--viz-tint) var(--p)); }
.rn-viz-multiples .mini::after { content:attr(data-v); display:grid; place-items:center; width:42px; aspect-ratio:1; border-radius:50%; color:var(--viz-ink); background:var(--viz-surface); font:800 11px/1 var(--viz-mono); }
.rn-viz-multiples .p72 { --p:72%; }.rn-viz-multiples .p45 { --p:45%; }.rn-viz-multiples .p23 { --p:23%; }
.rn-viz-multiples span { color:var(--viz-faint); font:700 10px/1.4 var(--viz-mono); text-transform:uppercase; letter-spacing:.06em; }

.rn-viz-treemap { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:46px; gap:4px; }
.rn-viz-treemap div { overflow:hidden; padding:8px 9px; border-radius:6px; color:#f4f1e8; background:var(--viz-blue); font:700 10px/1.3 var(--viz-sans); }
.rn-viz-treemap div b { display:block; font:600 13px/1.2 var(--viz-serif); }
.rn-viz-treemap .a { grid-column:span 2; grid-row:span 2; background:var(--viz-navy); }
.rn-viz-treemap .b { grid-column:span 2; }
.rn-viz-treemap .c { background:var(--viz-purple); }
.rn-viz-treemap .d { color:var(--viz-soft); background:var(--viz-tint); border:1px solid var(--viz-rule); }

.rn-viz-stock { max-width:300px; margin:auto; padding:14px 16px; border:1px solid var(--viz-rule); border-radius:12px; background:var(--viz-surface); }
.rn-viz-stock .tk { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.rn-viz-stock .tk b { font:800 13px/1 var(--viz-mono); letter-spacing:.06em; }
.rn-viz-stock .tk span { color:var(--viz-faint); font-size:11px; }
.rn-viz-stock .px { display:flex; align-items:baseline; gap:10px; margin:7px 0 4px; }
.rn-viz-stock .px b { font:600 30px/1 var(--viz-serif); font-variant-numeric:tabular-nums; }
.rn-viz-stock .px span { padding:3px 7px; border-radius:5px; color:var(--viz-green); background:var(--viz-green-soft); font:800 11px/1 var(--viz-mono); }
.rn-viz-stock svg { width:100%; height:44px; color:var(--viz-green); }
.rn-viz-stock svg polyline { fill:none; stroke:currentColor; stroke-width:2.5; vector-effect:non-scaling-stroke; }

.rn-viz-unitgrid { display:grid; grid-template-columns:repeat(10,1fr); gap:3px; max-width:236px; margin:0 auto 10px; }
.rn-viz-unitgrid i { aspect-ratio:1; border:1px solid var(--viz-rule); border-radius:2px; background:var(--viz-tint); }
.rn-viz-unitgrid i:nth-child(-n+37) { border-color:var(--viz-blue); background:var(--viz-blue); }

.rn-viz-pyramid { display:grid; grid-template-columns:1fr 44px 1fr; gap:7px 8px; align-items:center; color:var(--viz-faint); font:700 9.5px/1 var(--viz-mono); }
.rn-viz-pyramid .age { text-align:center; }
.rn-viz-pyramid .l { position:relative; justify-self:end; width:var(--w); height:13px; border-radius:3px 0 0 3px; background:var(--viz-blue); }
.rn-viz-pyramid .r { position:relative; width:var(--w); height:13px; border-radius:0 3px 3px 0; background:var(--viz-gold); }
.rn-viz-pyramid .l::after { content:attr(data-v); position:absolute; right:calc(100% + 6px); top:50%; color:var(--viz-faint); transform:translateY(-50%); }
.rn-viz-pyramid .r::after { content:attr(data-v); position:absolute; left:calc(100% + 6px); top:50%; color:var(--viz-faint); transform:translateY(-50%); }
.rn-viz-pyramid-legend { display:flex; justify-content:center; gap:18px; margin-top:10px; color:var(--viz-faint); font:700 10px/1 var(--viz-mono); }
.rn-viz-pyramid-legend i { display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:2px; background:var(--viz-blue); }
.rn-viz-pyramid-legend span:last-child i { background:var(--viz-gold); }

.rn-viz-award { position:relative; width:120px; margin:4px auto 0; padding-bottom:38px; text-align:center; }
.rn-viz-award::before,.rn-viz-award::after { content:""; position:absolute; top:58px; width:26px; height:58px; background:linear-gradient(var(--viz-blue) 55%, color-mix(in srgb,var(--viz-blue) 72%,#000)); clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%); }
.rn-viz-award::before { left:24px; transform:rotate(18deg); }
.rn-viz-award::after { right:24px; transform:rotate(-18deg); }
.rn-viz-award .medal { position:relative; z-index:1; display:grid; place-items:center; width:94px; aspect-ratio:1; margin:auto; border:6px double var(--viz-gold-deep); border-radius:50%; color:#3a2c05; background:radial-gradient(circle at 35% 30%, #f8d97e, var(--viz-gold) 65%); box-shadow:0 0 0 3px var(--viz-gold-soft); font:800 15px/1.15 var(--viz-serif); }
.rn-viz-award .medal small { font:800 8px/1.6 var(--viz-mono); letter-spacing:.1em; text-transform:uppercase; opacity:.7; }

.rn-viz-grade { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; }
.rn-viz-grade .mark { display:grid; place-items:center; width:86px; aspect-ratio:1; border:2.5px solid var(--viz-green); border-radius:14px; color:var(--viz-green); background:var(--viz-green-soft); font:800 40px/1 var(--viz-serif); }
.rn-viz-grade ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.rn-viz-grade li { display:flex; justify-content:space-between; gap:10px; color:var(--viz-soft); font-size:12.5px; border-bottom:1px dotted var(--viz-rule-strong); padding-bottom:5px; }
.rn-viz-grade li b { font:800 11px/1.5 var(--viz-mono); color:var(--viz-blue); }

/* ============================================================
   House rules — editorial doctrine cards (section 00)
   ============================================================ */
.rn-viz-rules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.rn-viz-rule { overflow:hidden; border:1px solid var(--viz-rule); border-radius:12px; background:var(--viz-surface); box-shadow:var(--viz-shadow); }
.rn-viz-rule .hd { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--viz-rule); background:var(--viz-tint); }
.rn-viz-rule .hd i { display:grid; place-items:center; width:26px; height:26px; border-radius:7px; color:var(--viz-onaccent); background:var(--viz-blue); font:800 12px/1 var(--viz-mono); font-style:normal; }
.rn-viz-rule .hd b { color:var(--viz-ink); font-size:14px; }
.rn-viz-rule .hd span { margin-left:auto; color:var(--viz-faint); font:10px/1 var(--viz-mono); text-transform:uppercase; letter-spacing:.08em; }
.rn-viz-rule .bd { display:grid; gap:12px; padding:16px; }
.rn-viz-rule .bd p { margin:0; color:var(--viz-soft); font-size:13.5px; line-height:1.55; }
.rn-viz-rule .bd p b { color:var(--viz-ink); }
.rn-viz-dodont { display:grid; gap:8px; }
.rn-viz-dodont p { margin:0; padding:9px 12px; border-radius:8px; font-size:13.5px; line-height:1.5; color:var(--viz-soft); }
.rn-viz-dodont .no { background:var(--viz-red-soft); text-decoration:line-through 1.5px color-mix(in srgb,var(--viz-red) 55%,transparent); }
.rn-viz-dodont .no::before { content:"\2715"; margin-right:9px; color:var(--viz-red); font-weight:800; text-decoration:none; }
.rn-viz-dodont .yes { color:var(--viz-ink); background:var(--viz-green-soft); }
.rn-viz-dodont .yes::before { content:"\2713"; margin-right:9px; color:var(--viz-green); font-weight:800; }
.rn-viz-map { display:grid; gap:0; font-size:13px; }
.rn-viz-map div { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr); gap:10px; align-items:center; padding:8px 0; border-bottom:1px dotted var(--viz-rule-strong); color:var(--viz-soft); }
.rn-viz-map div:last-child { border-bottom:0; }
.rn-viz-map .to { color:var(--viz-gold-deep); font-weight:800; }
.rn-viz-map b { color:var(--viz-blue); font-size:12.5px; }
.rn-viz-map small { color:var(--viz-faint); font:700 10px/1.4 var(--viz-mono); }

/* motion */
@keyframes rnVizEnter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes rnVizGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes rnVizRise { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes rnVizPop { from { opacity:0; transform:scale(.5); } to { opacity:1; transform:scale(1); } }
@keyframes rnVizPulse { 0% { box-shadow:0 0 0 0 rgba(179,38,30,.45); } 70% { box-shadow:0 0 0 9px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@keyframes rnVizGrowW { from { width:0; } }
@keyframes rnVizTicker { from { transform:translateX(0); } to { transform:translateX(-50%); } }

@media (max-width:760px) {
  .rn-viz-shell { padding-inline:16px; }
  .rn-viz-header { grid-template-columns:1fr; }
  .rn-viz-header h1 { max-width:12ch; }
  .rn-viz-theme { position:absolute; right:0; top:34px; }
  .rn-viz-nav { top:57px; margin-inline:-16px; padding-inline:16px; }
  .rn-viz-grid,.rn-viz-rules { grid-template-columns:1fr; }
  .rn-viz-demo-wide { grid-column:auto; }
  .rn-viz-quote-wall,.rn-viz-price-cards { grid-template-columns:1fr; }
  .rn-viz-steps { grid-template-columns:1fr; }
  .rn-viz-envelopes { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:520px) {
  .rn-viz-stage { padding:17px; }
  .rn-viz-demo-head { align-items:flex-start; flex-wrap:wrap; }
  .rn-viz-demo-use { width:100%; margin-left:31px; }
  .rn-viz-stat-row { grid-template-columns:1fr; }
  .rn-viz-stat-row div { border-left:0; border-top:1px solid var(--viz-rule); }
  .rn-viz-stat-row div:first-child { border-top:0; }
  .rn-viz-procon,.rn-viz-before-after,.rn-viz-compare,.rn-viz-tradeoff,.rn-viz-mythfact,.rn-viz-cause { grid-template-columns:1fr; }
  .rn-viz-before-after .arrow,.rn-viz-tradeoff .vs,.rn-viz-cause i { transform:rotate(90deg); text-align:center; }
  .rn-viz-compare section + section { border-left:0; border-top:1px solid var(--viz-rule); }
  .rn-viz-flow { align-items:stretch; flex-direction:column; }
  .rn-viz-flow i { transform:rotate(90deg); text-align:center; }
  .rn-viz-bar-row { grid-template-columns:68px 1fr 32px; }
  .rn-viz-envelopes { grid-template-columns:1fr 1fr; }
  .rn-viz-multiples { grid-template-columns:repeat(3,1fr); }
  .rn-viz-countdown { flex-wrap:wrap; }
  .rn-viz-fx { flex-wrap:wrap; }
  .rn-viz-coins { gap:18px; }
  .rn-viz-flowsplit .src { width:60px; }
  .rn-viz-grade { grid-template-columns:1fr; justify-items:start; }
}

@media (prefers-reduced-motion:reduce) {
  .rn-viz-demo,.rn-viz-person.on,.rn-viz-progress-fill,.rn-viz-bar-fill,.rn-viz-column,.rn-viz-live i,.rn-viz-ticker .tape { animation:none !important; }
  .rn-viz-flip .inner { transition:none; }
  .rn-viz-page { scroll-behavior:auto; }
}