/* XSERIES Docs — layout and tokens modelled on docs.github.com */
:root {
  --fg: #1f2328;
  --fg-muted: #59636e;
  --fg-subtle: #818b98;
  --bg: #ffffff;
  --bg-muted: #f6f8fa;
  --bg-neutral: rgba(0, 0, 0, 0.06);
  --bg-hover: rgba(129, 139, 152, 0.15);
  --border: #d1d9e0;
  --border-muted: #e4ebe6;
  --link: #0055d5;
  /* XSERIES accents (measured from IG assets; see Visual Direction > Palet warna) */
  --xs-cyan: #22d3e6;
  --xs-teal: #0e9aa7;
  --xs-red: #e5383b;
  --xs-purple: #7b3fe4;
  --xs-ink: #0b0f14;
  --accent: #0e9aa7;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --header-h: 64px;
  --sidebar-w: 326px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 16px; }
body { margin: 0; font-family: var(--font); color: var(--fg); background: var(--bg); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
button { font-family: inherit; }
kbd { font-family: var(--font); font-size: 12px; line-height: 18px; min-width: 22px; text-align: center; padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--fg); box-shadow: inset 0 -1px 0 var(--border); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; height: var(--header-h); display: flex; align-items: stretch; background: #fff; border-bottom: 1px solid var(--border-muted); }
.hdr-seg { display: flex; align-items: center; padding: 0 16px; border-right: 1px solid var(--border-muted); }
.hdr-seg:last-child { border-right: 0; }
.hdr-logo { padding: 0 16px 0 16px; }
.logo { display: flex; align-items: center; gap: 8px; color: var(--fg); text-decoration: none; }
.logo .xs-mark { display: block; width: 28px; height: 28px; }
.logo-text { font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.logo-text b { font-weight: 800; letter-spacing: 0.02em; }
.logo-text span { color: var(--fg-muted); font-weight: 500; }
.hdr-plan { padding: 0 16px; }
.plan-picker { display: flex; align-items: center; gap: 10px; }
.plan-label { font-size: 14px; color: var(--fg-muted); white-space: nowrap; }
.hdr-search { flex: 1; min-width: 0; justify-content: center; }
.hdr-lang { color: var(--fg-muted); }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--fg-muted); font-size: 14px; white-space: nowrap; cursor: pointer; }
.lang-btn:hover, .lang-picker.open .lang-btn { background: var(--bg-hover); color: var(--fg); }
.menu-end { left: auto; right: 0; }
.lang-picker .menu { min-width: 200px; }
.lang-picker .menu-item { align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-muted); color: var(--fg); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { background: #eff2f5; }
.btn-primary { background: var(--xs-ink); color: #fff; border-color: var(--xs-ink); }
.btn-primary:hover { background: #1c2430; }
.btn-outline { background: #fff; }

.pill-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 9999px; background: var(--bg-neutral); color: var(--fg); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pill-btn:hover { background: rgba(0, 0, 0, 0.1); }
.dropdown, .split-btn { position: relative; }
.menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 280px; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(66, 74, 83, 0.12), 0 1px 3px rgba(31, 35, 40, 0.12); }
.open > .menu { display: block; }
.menu-item { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 8px; border: 0; border-radius: 6px; background: none; color: var(--fg); text-align: left; text-decoration: none; font-size: 14px; cursor: pointer; }
.menu-item:hover { background: var(--bg-hover); }
.menu-check { width: 16px; flex: none; padding-top: 2px; }
.menu-label { display: block; font-weight: 600; }
.menu-desc { display: block; color: var(--fg-muted); font-size: 12px; line-height: 1.4; margin-top: 2px; }

/* search */
.search { position: relative; display: flex; align-items: center; width: 100%; max-width: 280px; height: 32px; padding: 0 6px 0 10px; border-radius: 6px; background: var(--bg-muted); border: 1px solid transparent; }
.search:focus-within { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(14, 154, 167, 0.15); max-width: 480px; }
.search-icon { color: var(--fg-muted); display: flex; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 14px var(--font); color: var(--fg); padding: 0 8px; }
.search input::-webkit-search-cancel-button { display: none; }
.search-results { position: absolute; top: 40px; left: 0; right: 0; min-width: 420px; max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(66, 74, 83, 0.16); padding: 8px; z-index: 50; }
.search-results a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--fg); text-decoration: none; }
.search-results a:hover, .search-results a.sel { background: var(--bg-hover); }
.sr-path { display: block; font-size: 12px; color: var(--fg-muted); }
.sr-title { display: block; font-weight: 600; font-size: 14px; }
.sr-snip { display: block; font-size: 13px; color: var(--fg-muted); margin-top: 2px; }
.sr-snip mark { background: rgba(34, 211, 230, 0.28); color: inherit; border-radius: 2px; }
.sr-empty { padding: 12px; color: var(--fg-muted); font-size: 14px; }

.accent-line { height: 2px; background: linear-gradient(90deg, var(--xs-teal) 0 72%, var(--xs-red) 72% 100%); position: sticky; top: var(--header-h); z-index: 29; margin-top: -1px; }

/* ---------- breadcrumbs ---------- */
.crumb-bar { display: flex; align-items: stretch; height: 44px; border-bottom: 1px solid var(--border-muted); background: #fff; }
.sidebar-toggle { width: 52px; flex: none; border: 0; border-right: 1px solid var(--border-muted); background: none; color: var(--fg-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sidebar-toggle:hover { color: var(--fg); background: var(--bg-muted); }
.crumbs { display: flex; align-items: center; gap: 8px; padding: 0 16px; min-width: 0; font-size: 14px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.crumb { color: var(--fg-muted); text-decoration: none; }
.crumb:hover { text-decoration: underline; }
.crumb.current { color: var(--fg); }
.crumb-sep { color: var(--fg-subtle); }

/* ---------- layout ---------- */
.page { display: flex; align-items: flex-start; }
.sidebar { position: sticky; top: calc(var(--header-h) + 1px); width: var(--sidebar-w); flex: none; height: calc(100vh - var(--header-h) - 1px); overflow-y: auto; border-right: 1px solid var(--border-muted); padding: 20px 16px 40px; background: #fff; }
body.sidebar-hidden .sidebar { display: none; }
.sidebar-title { display: block; padding: 0 12px 24px; font-size: 20px; font-weight: 600; color: var(--fg); text-decoration: none; }
.nav-tree, .nav-links { list-style: none; margin: 0; padding: 0; }
.nav-group { border-bottom: 1px dashed var(--border-muted); padding: 6px 0; }
.nav-group-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 16px; border: 0; border-radius: 6px; background: none; color: var(--fg); font-size: 16px; text-align: left; cursor: pointer; }
.nav-group-btn:hover { background: var(--bg-muted); }
.nav-caret { display: flex; color: var(--fg); transition: transform .15s; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-links { display: none; padding: 4px 0 8px; }
.nav-group.open .nav-links { display: block; }
.nav-links a { position: relative; display: block; margin: 0 0 0 16px; padding: 5px 16px 5px 22px; border-radius: 6px; font-size: 14px; line-height: 22px; color: var(--fg-muted); text-decoration: none; }
.nav-links a:hover { background: var(--bg-muted); color: var(--fg); }
.nav-links a.active { background: var(--bg-hover); color: var(--fg); font-weight: 500; }
.nav-links a.active::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 4px; border-radius: 6px; background: var(--accent); }

.main-col { flex: 1; min-width: 0; }

/* ---------- article ---------- */
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1100px; margin: 0 auto; }
.toc-bar { border-bottom: 1px solid var(--border-muted); font-size: 14px; }
.toc-bar summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 12px 12px; font-weight: 600; cursor: pointer; }
.toc-bar summary::-webkit-details-marker { display: none; }
.toc-bar[open] summary span { transform: rotate(180deg); }
.toc-bar summary span { display: flex; }
.toc-bar ul { margin: 0; padding: 0 12px 12px 28px; }
.toc-bar li { padding: 3px 0; }
.toc-bar a { color: var(--fg-muted); text-decoration: none; }
.toc-bar a:hover { color: var(--link); text-decoration: underline; }
.toc-side { display: none; }

.article { max-width: 1000px; width: 100%; margin: 0 auto; padding: 32px 40px 48px; }
.article h1, .landing h1, .home h1 { font-size: 40px; line-height: 48px; font-weight: 460; letter-spacing: -0.02em; margin: 0 0 12px; }
.lead { font-size: 16px; line-height: 25.6px; color: var(--fg-muted); margin: 0 0 24px; max-width: 690px; }
.landing .lead, .home .lead { font-size: 18px; line-height: 28px; }
.article-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.split-btn { display: inline-flex; }
.split-btn .copy-md { border-radius: 9999px 0 0 9999px; padding-right: 10px; font-weight: 500; }
.split-btn .pill-caret { border-radius: 0 9999px 9999px 0; padding: 0 12px 0 6px; margin-left: 1px; }
.split-btn .menu { min-width: 200px; }
.article-meta { font-size: 13px; color: var(--fg-muted); }
.status { display: inline-block; padding: 1px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; background: var(--bg-neutral); }
.status-draft { background: #fff8c5; color: #7d4e00; }
.status-terverifikasi { background: #dafbe1; color: #116329; }
.status-hipotesis { background: #ddf4ff; color: #0550ae; }
.article-hr { border: 0; border-top: 1px solid var(--border-muted); margin: 24px 0 32px; }

.markdown-body { font-size: 16px; line-height: 25.6px; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body h2 { font-size: 24px; line-height: 1.5; font-weight: 600; margin: 48px 0 16px; }
.markdown-body h3 { font-size: 20px; line-height: 1.5; font-weight: 600; margin: 32px 0 12px; }
.markdown-body h4 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
.heading-link { color: inherit; text-decoration: none; }
.heading-link-icon { display: inline-flex; margin-left: 8px; color: var(--fg-muted); vertical-align: middle; opacity: .8; }
.heading-link:hover .heading-link-icon { color: var(--link); }
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body .table-wrap, .markdown-body blockquote { margin: 0 0 16px; }
.markdown-body ul, .markdown-body ol { padding-left: 2em; }
.markdown-body li { margin: 6px 0; }
.markdown-body li > p { margin: 0; }
.markdown-body a { color: var(--link); text-decoration: underline; text-underline-offset: 25%; }
.markdown-body a[target="_blank"]:not(.lightbox)::after { content: "↗"; font-size: .75em; margin-left: 2px; text-decoration: none; display: inline-block; color: var(--fg-subtle); }
.markdown-body strong { font-weight: 600; }
.markdown-body code { font-family: var(--font); font-size: 85%; padding: .2em .4em; border-radius: 6px; background: rgba(129, 139, 152, 0.12); }
.markdown-body pre { background: var(--bg-muted); border-radius: 6px; padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; }
.markdown-body pre code { font-family: var(--mono); background: none; padding: 0; font-size: 100%; }
.markdown-body hr { border: 0; border-top: 1px solid var(--border-muted); margin: 32px 0; }
.code.swatch, code.swatch { display: inline-flex; align-items: center; gap: 6px; }
code.swatch span { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); display: inline-block; }

.table-wrap { overflow-x: auto; }
.markdown-body table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.5; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 8px 12px; vertical-align: top; text-align: left; }
.markdown-body th { background: var(--bg-muted); font-weight: 600; }
.markdown-body tr:nth-child(2n) td { background: #fbfcfd; }

/* alerts */
.markdown-body blockquote { padding: 0 1em; color: var(--fg-muted); border-left: .25em solid var(--border); }
.markdown-body blockquote.alert { padding: 8px 16px; color: inherit; border-left-width: .25em; }
.alert-title { font-weight: 600; margin-bottom: 4px !important; display: flex; align-items: center; gap: 8px; }
.alert-note { border-color: #0969da !important; } .alert-note .alert-title { color: #0969da; }
.alert-tip { border-color: #1a7f37 !important; } .alert-tip .alert-title { color: #1a7f37; }
.alert-important { border-color: #8250df !important; } .alert-important .alert-title { color: #8250df; }
.alert-warning { border-color: #9a6700 !important; } .alert-warning .alert-title { color: #9a6700; }
.alert-caution { border-color: #cf222e !important; } .alert-caution .alert-title { color: #cf222e; }
.alert-evidence { border-color: var(--xs-teal) !important; background: rgba(34, 211, 230, 0.06); border-radius: 0 6px 6px 0; } .alert-evidence .alert-title { color: var(--xs-teal); }
.markdown-body blockquote.alert > p:last-child { margin-bottom: 0; }

/* evidence media */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0 0 20px; }
.gallery-single { grid-template-columns: 1fr; }
.evidence { margin: 0; border: 1px solid var(--border-muted); border-radius: 8px; overflow: hidden; background: var(--bg-muted); }
.evidence a { display: block; background: #0b0f14; }
.evidence img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; cursor: zoom-in; }
.gallery:not(.gallery-single) .evidence img { height: 190px; object-fit: cover; object-position: center top; }
.evidence figcaption { padding: 8px 10px; font-size: 12.5px; line-height: 1.45; color: var(--fg-muted); }
.lightbox-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(11, 15, 20, 0.92); display: flex; align-items: center; justify-content: center; padding: 32px; }
.lightbox-overlay[hidden] { display: none; }
.lightbox-overlay figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lightbox-overlay img { max-width: 92vw; max-height: 82vh; border-radius: 6px; }
.lightbox-overlay figcaption { color: #d1d9e0; font-size: 14px; margin-top: 12px; text-align: center; max-width: 720px; }
.lightbox-overlay button { position: absolute; top: 16px; right: 20px; font-size: 32px; color: #fff; background: none; border: 0; cursor: pointer; }

/* prev / next */
.prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.pn { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--link); font-weight: 600; font-size: 15px; }
.pn span { display: block; color: var(--fg-muted); font-size: 12px; font-weight: 400; }
.pn.next { text-align: right; grid-column: 2; }
.pn:hover { border-color: var(--fg-subtle); }

/* ---------- landing + home ---------- */
.landing, .home { padding: 40px 40px 48px; max-width: 1100px; margin: 0 auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--accent); margin: 0 0 8px; }
.muted { color: var(--fg-muted); }
.landing-group h2 { font-size: 24px; font-weight: 600; margin: 40px 0 6px; }
.card-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card { display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--fg); transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(14, 154, 167, 0.12); }
.card-title { display: block; font-weight: 600; color: var(--link); margin-bottom: 4px; }
.card-desc { display: block; font-size: 14px; color: var(--fg-muted); line-height: 1.5; }
.home-hero { padding: 24px 0 8px; max-width: 760px; }
.home h1 { font-size: 48px; line-height: 56px; }
.home-search-hint { font-size: 14px; color: var(--fg-muted); }
.home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0 48px; }
.home-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 16px; text-decoration: none; color: #e6edf3; background: var(--xs-ink); overflow: hidden; min-height: 250px; }
.home-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; background: conic-gradient(from 45deg, transparent 0 25%, rgba(34, 211, 230, .22) 25% 50%, transparent 50% 75%, rgba(229, 56, 59, .2) 75%); transform: rotate(45deg); }
.home-card:hover { outline: 2px solid var(--xs-cyan); }
.home-card-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--xs-cyan); }
.home-card-title { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.home-card-desc { font-size: 14px; line-height: 1.55; color: #b6c2cf; }
.home-card-count { margin-top: auto; font-size: 14px; font-weight: 600; color: #fff; }
.home-facts h2 { font-size: 24px; font-weight: 600; margin: 0 0 16px; }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fact { display: flex; flex-direction: column; gap: 2px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.fact-v { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.fact-k { font-size: 14px; color: var(--fg); }
.fact a { font-size: 12px; color: var(--fg-muted); margin-top: 6px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border-muted); background: var(--bg-muted); margin-top: 32px; }
.footer-inner { padding: 32px 40px; max-width: 1100px; margin: 0 auto; }
.back-to-top { display: inline-block; font-size: 14px; margin-bottom: 24px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-cols h3 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.footer-cols p { font-size: 14px; color: var(--fg-muted); margin: 0 0 12px; }
.caps { text-transform: uppercase; letter-spacing: .04em; font-size: 12px !important; color: var(--fg-muted); }
.helpful-q { color: var(--fg) !important; }
.helpful-btns { display: flex; gap: 8px; }
.helpful-btns button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 14px; cursor: pointer; color: var(--fg-muted); }
.helpful-btns button:hover { color: var(--fg); }
.helpful-btns button.on { border-color: var(--accent); color: var(--accent); }
.plain { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.plain li { margin: 6px 0; }
.footer-bottom { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border-muted); font-size: 12px; }
.footer-bottom a { color: var(--fg-muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--link); text-decoration: underline; }

/* ---------- responsive ---------- */
@media (min-width: 1600px) {
  .article-grid { grid-template-columns: minmax(0, 1000px) 240px; gap: 24px; justify-content: center; max-width: none; }
  .article-grid .article { margin: 0; }
  .footer-inner { max-width: 1264px; }
  .toc-bar { display: none; }
  .toc-side { display: block; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; padding: 40px 16px 0 0; font-size: 14px; max-height: calc(100vh - 100px); overflow: auto; }
  .toc-side h2 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
  .toc-side ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-muted); }
  .toc-side li a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--fg-muted); text-decoration: none; line-height: 1.4; }
  .toc-side li a:hover { color: var(--fg); }
  .toc-side li a.active { color: var(--fg); border-left-color: var(--accent); font-weight: 500; }
}
@media (max-width: 1100px) {
  .lang-name { display: none; }
  .home-cards { grid-template-columns: 1fr; }
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 280px; }
  .plan-label { display: none; }
  .sidebar { position: fixed; left: 0; top: calc(var(--header-h) + 45px); z-index: 25; height: calc(100vh - var(--header-h) - 45px); box-shadow: 8px 0 24px rgba(0,0,0,.08); display: none; }
  body.sidebar-open .sidebar { display: block; }
  body.sidebar-hidden .sidebar { display: none; }
  .article, .landing, .home { padding: 24px 20px 40px; }
  .footer-inner { padding: 24px 20px; }
  .footer-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hdr-cta, .logo-text span { display: none; }
  .hdr-seg { padding: 0 10px; }
  .search-results { min-width: 0; position: fixed; left: 8px; right: 8px; top: 60px; }
  .search kbd { display: none; }
  .plan-picker .btn, .plan-picker button { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .article h1, .landing h1 { font-size: 32px; line-height: 40px; }
  .home h1 { font-size: 36px; line-height: 44px; }
  .facts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .logo-text { display: none; }
  .hdr-seg { padding: 0 8px; }
}

/* ======================================================================
   Visual blocks (viz.mjs) — written in markdown as ```viz-<type>
   ====================================================================== */
:root {
  --sec-research: #0e8a96; --sec-strategy: #6f3bd6; --sec-visual: #d42f32;
  --t-s: #1a7f37; --t-s-bg: #ecfdf0; --t-w: #9a6700; --t-w-bg: #fff8e1;
  --t-o: #0969da; --t-o-bg: #eef6ff; --t-t: #cf222e; --t-t-bg: #fff0ee;
}
.markdown-body .viz { margin: 24px 0 28px; }
.markdown-body .viz ul, .markdown-body .viz ol { list-style: none; padding: 0; margin: 0; }
.markdown-body .viz li { margin: 0; }
.viz small { display: block; font-size: 12px; line-height: 1.45; color: var(--fg-muted); margin-top: 2px; }
.viz-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; }
.viz-caption { font-size: 13px !important; color: var(--fg-muted); margin: 10px 0 0 !important; }

/* quad: SWOT / TOWS */
.vq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vq-grid.has-heads { grid-template-columns: 28px 1fr 1fr; }
.vq-colhead { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); text-align: center; padding-bottom: 2px; }
.vq-rowhead { display: flex; align-items: center; justify-content: center; }
.vq-rowhead span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.vq-cell { --c: var(--fg-muted); --cb: var(--bg-muted); border: 1px solid var(--border); border-top: 4px solid var(--c); border-radius: 10px; background: linear-gradient(var(--cb), #fff 120px); padding: 14px 16px 10px; }
.vq-cell header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vq-letter { flex: none; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 800; font-size: 14px; }
.vq-title { font-weight: 700; font-size: 16px; }
.vq-sub { margin-left: auto; font-size: 12px; color: var(--fg-muted); }
.vq-cell li { padding: 8px 0; border-top: 1px solid var(--border-muted); font-size: 14px; line-height: 1.45; }
.vq-cell li:first-child { border-top: 0; }
.tone-s { --c: var(--t-s); --cb: var(--t-s-bg); } .tone-w { --c: var(--t-w); --cb: var(--t-w-bg); }
.tone-o { --c: var(--t-o); --cb: var(--t-o-bg); } .tone-t { --c: var(--t-t); --cb: var(--t-t-bg); }

/* flow */
.vf-row { display: flex; align-items: stretch; gap: 0; }
.vf-step { --c: var(--fg-subtle); flex: 1 1 0; min-width: 0; border: 1px solid var(--border); border-top: 4px solid var(--c); border-radius: 10px; padding: 12px 14px; background: #fff; }
.vf-arrow { flex: none; width: 28px; display: grid; place-items: center; color: var(--fg-subtle); }
.vf-kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.vf-title { font-weight: 700; font-size: 15px; margin: 2px 0 6px; line-height: 1.3; }
.vf-step li { font-size: 13.5px; line-height: 1.45; padding: 5px 0; border-top: 1px dashed var(--border-muted); }
.vf-step li:first-child { border-top: 0; }
.vf-band { margin-top: 10px; padding: 8px 14px; border-radius: 8px; background: var(--xs-ink); color: #e6edf3; font-size: 13.5px; text-align: center; }
.vf-band strong { color: var(--xs-cyan); }
.vf-step.tone-x { --c: var(--xs-teal); } .vf-step.tone-pres { --c: var(--xs-red); }
.vf-step.tone-day { --c: var(--xs-ink); } .vf-step.tone-research { --c: var(--sec-research); }
.vf-step.tone-strategy { --c: var(--sec-strategy); } .vf-step.tone-visual { --c: var(--sec-visual); }
.vf-step.tone-product { --c: var(--xs-ink); background: var(--bg-muted); }
.vf-step.tone-muted { --c: var(--border); background: var(--bg-muted); color: var(--fg-muted); }

/* cards: playing-card look */
.vc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.vc-card { position: relative; aspect-ratio: 5 / 7; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 0 rgba(31,35,40,.04), 0 6px 16px -10px rgba(31,35,40,.35); overflow: hidden; }
.vc-card::before { content: ""; position: absolute; inset: 6px; border-radius: 10px; border: 1.5px solid var(--c, var(--xs-teal)); opacity: .55; pointer-events: none; }
.vc-corner { display: flex; flex-direction: column; line-height: 1; color: var(--c, var(--xs-teal)); }
.vc-corner b { font-size: 22px; font-weight: 800; }
.vc-corner span { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.vc-end { position: absolute; right: 14px; bottom: 12px; transform: rotate(180deg); }
.vc-name { margin-top: auto; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.markdown-body .vc-effect { margin: 6px 0 auto !important; padding-right: 18px; font-size: 13px; line-height: 1.45; color: var(--fg-muted); }
.vc-card.tone-x { --c: var(--xs-teal); background: linear-gradient(160deg, #e9fbfd 0%, #fff 45%); }
.vc-card.tone-pres { --c: #ff6b6e; background: radial-gradient(120% 80% at 100% 0%, rgba(229,56,59,.35), transparent 60%), var(--xs-ink); border-color: var(--xs-ink); color: #fff; }
.vc-card.tone-pres .vc-effect { color: #c9d3dd; }
.vc-card.tone-gold { --c: #c7a440; background: radial-gradient(120% 80% at 100% 0%, rgba(199,164,64,.34), transparent 60%), var(--xs-ink); border-color: #5a4a1c; color: #fff; }
.vc-card.tone-gold .vc-effect { color: #d9d2bd; }

/* timeline */
.vt-list { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 16px; position: relative; padding-top: 6px !important; }
.vt-list::before { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: linear-gradient(90deg, var(--xs-ink), var(--xs-ink) 66%, var(--xs-red)); }
.vt-item { position: relative; padding-top: 26px; }
.vt-dot { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--xs-ink); box-shadow: 0 0 0 4px #fff; }
.vt-item.state-next .vt-dot { background: var(--xs-red); box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(229,56,59,.25); }
.vt-date { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.vt-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin: 2px 0 6px; }
.vt-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-neutral); margin-bottom: 8px; }
.state-next .vt-tag { background: #ffe3e3; color: #a4161a; }
.vt-item dl { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.vt-item dl > div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 7px 10px; border-top: 1px solid var(--border-muted); font-size: 13.5px; line-height: 1.4; }
.vt-item dl > div:first-child { border-top: 0; }
.vt-item dl > div.full { grid-template-columns: 1fr; }
.vt-item dt { color: var(--fg-muted); font-size: 12px; font-weight: 600; padding-top: 1px; }
.vt-item dd { margin: 0; }

/* gantt */
.vg { --label: 220px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.vg-row { display: grid; grid-template-columns: var(--label) 1fr; border-top: 1px solid var(--border-muted); }
.vg-row:first-child { border-top: 0; }
.vg-label { padding: 8px 12px; font-size: 13.5px; line-height: 1.35; border-right: 1px solid var(--border-muted); }
.vg-label b { font-weight: 600; }
.vg-track { position: relative; min-height: 40px; background-image: linear-gradient(to right, var(--border-muted) 1px, transparent 1px); background-size: calc(100% / var(--n)) 100%; }
.vg-head { background: var(--bg-muted); }
.vg-head .vg-track { display: grid; grid-template-columns: repeat(var(--n), 1fr); min-height: 0; background-image: none; }
.vg-head .vg-track span { padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--fg-muted); border-left: 1px solid var(--border-muted); }
.vg-head .vg-track span:first-child { border-left: 0; }
.vg-bar { position: absolute; top: 50%; height: 16px; margin-top: -8px; border-radius: 999px; background: var(--c, var(--fg-subtle)); }
.vg-bar.tone-discovery { --c: #8c959f; } .vg-bar.tone-design { --c: var(--sec-strategy); } .vg-bar.tone-build { --c: var(--xs-teal); }
.vg-bar.tone-launch { --c: var(--xs-ink); } .vg-bar.tone-event { --c: var(--xs-red); height: 22px; margin-top: -11px; border-radius: 6px; }
.vg-bar.tone-eval { --c: #0969da; } .vg-bar.tone-later { background: linear-gradient(90deg, var(--xs-teal), rgba(14,154,167,.08)); }
.vg-diamond { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; transform: rotate(45deg); background: #fff; border: 2px solid var(--xs-ink); border-radius: 3px; display: grid; place-items: center; }
.vg-diamond b { transform: rotate(-45deg); font-size: 10px; }

/* bars */
.vb-list { display: grid; gap: 8px; }
.vb-row { display: grid; grid-template-columns: minmax(140px, 34%) 1fr 64px; gap: 12px; align-items: center; font-size: 14px; }
.vb-track { height: 14px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.vb-fill { display: block; height: 100%; border-radius: 999px; background: var(--xs-teal); }
.vb-fill.tone-strong { background: var(--xs-ink); } .vb-fill.tone-red { background: var(--xs-red); } .vb-fill.tone-muted { background: #afb8c1; }
.vb-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* heat table */
.markdown-body .vh-table td.vh-cell { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; border-color: #fff; border-width: 2px; }
.markdown-body .vh-table td.vh-cell.dark { color: #fff; }
.markdown-body .vh-table thead th { text-align: center; }
.markdown-body .vh-table th[scope=row] { white-space: nowrap; }

/* stats */
.vs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.vs-tile { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: #fff; }
.vs-tile.tone-ink { background: var(--xs-ink); border-color: var(--xs-ink); color: #fff; }
.vs-tile.tone-ink .vs-label, .vs-tile.tone-ink .vs-note { color: #b6c2cf; }
.vs-tile.tone-ink a { color: var(--xs-cyan); }
.vs-val { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vs-label { font-size: 14px; font-weight: 600; margin-top: 4px; }
.vs-note { font-size: 12.5px; color: var(--fg-muted); margin-top: 6px; }

/* scatter */
.vsc { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; gap: 6px; }
.vsc-y { display: flex; align-items: center; justify-content: center; }
.vsc-y span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.vsc-x { grid-column: 2; text-align: right; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.vsc-plot { position: relative; aspect-ratio: 16 / 10; min-height: 300px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: linear-gradient(var(--border), var(--border)) center / 1px 100% no-repeat, linear-gradient(var(--border), var(--border)) center / 100% 1px no-repeat, #fff; }
.vsc-q { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-subtle); padding: 10px 12px; }
.vsc-q.q0 { left: 0; top: 0; color: var(--t-s); } .vsc-q.q1 { right: 0; top: 0; } .vsc-q.q2 { left: 0; bottom: 18px; } .vsc-q.q3 { right: 0; bottom: 18px; }
.vsc-plot::before { content: ""; position: absolute; left: 0; top: 0; width: 50%; height: 50%; background: rgba(26,127,55,.05); }
.vsc-tick { position: absolute; font-size: 11px; color: var(--fg-subtle); }
.vsc-tick.y-lo { left: 6px; bottom: 2px; } .vsc-tick.y-hi { left: 6px; top: 28px; display: none; }
.vsc-tick.x-lo { left: 50%; bottom: 2px; transform: translateX(-110%); display: none; } .vsc-tick.x-hi { right: 6px; bottom: 2px; }
.vsc-pt { position: absolute; transform: translate(-50%, 50%); display: flex; align-items: center; gap: 6px; z-index: 1; }
.vsc-pt b { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--xs-teal)); box-shadow: 0 0 0 3px #fff; font-size: 12px; display: grid; place-items: center; color: #fff; }
.vsc-pt.numbered b { width: 26px; height: 26px; }
.vsc-lab { position: absolute; left: calc(100% + 4px); white-space: nowrap; font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.88); padding: 0 4px; border-radius: 4px; }
.vsc-pt.lab-left .vsc-lab { left: auto; right: calc(100% + 4px); }
.vsc-pt { --c: var(--xs-teal); } .vsc-pt.tone-hi { --c: var(--xs-red); } .vsc-pt.tone-hi .vsc-lab { color: #a4161a; font-weight: 800; }
.vsc-pt.tone-global { --c: #6e7781; } .vsc-pt.tone-local { --c: var(--xs-teal); } .vsc-pt.tone-ink { --c: var(--xs-ink); }
.vsc-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 20px; margin-top: 14px !important; }
.vsc-legend li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; }
.vsc-legend b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c, var(--xs-teal)); color: #fff; font-size: 12px; display: grid; place-items: center; }
.vsc-legend li.tone-hi { --c: var(--xs-red); } .vsc-legend li.tone-ink { --c: var(--xs-ink); } .vsc-legend li.tone-global { --c: #6e7781; } .vsc-legend li.tone-local { --c: var(--xs-teal); }

/* journey */
.vj-scroll { overflow-x: auto; padding-bottom: 4px; }
.vj { display: grid; grid-template-columns: 128px repeat(var(--cols), minmax(150px, 1fr)); gap: 6px; min-width: 860px; }
.vj-stage { display: flex; align-items: center; gap: 8px; padding: 10px 18px 10px 12px; background: var(--xs-ink); color: #fff; font-weight: 700; font-size: 14px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 10px 50%); }
.vj-stage:nth-child(2) { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 8px 0 0 8px; }
.vj-stage span { width: 20px; height: 20px; border-radius: 50%; background: var(--xs-cyan); color: var(--xs-ink); font-size: 11px; display: grid; place-items: center; flex: none; }
.vj-rowhead { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); padding: 10px 4px; }
.vj-cell { font-size: 13.5px; line-height: 1.45; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-muted); background: #fff; }
.vj-cell.row-1 { background: var(--t-t-bg); border-color: #ffd1cc; }
.vj-cell.row-2 { background: #e8fafb; border-color: #b9ecf0; font-weight: 600; }

/* board (MoSCoW) */
.vbd { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; align-items: start; }
.vbd.many { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.vbd-col { --c: var(--fg-subtle); border-radius: 12px; background: var(--bg-muted); padding: 10px; border: 1px solid var(--border-muted); }
.vbd-col header { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; font-weight: 800; font-size: 14px; color: var(--c); text-transform: uppercase; letter-spacing: .06em; }
.vbd-col header b { font-size: 12px; min-width: 22px; height: 22px; border-radius: 999px; background: var(--c); color: #fff; display: grid; place-items: center; }
.markdown-body .vbd-sub { font-size: 12.5px; color: var(--fg-muted); margin: -4px 4px 8px; }
.vbd-col li { background: #fff; border: 1px solid var(--border-muted); border-left: 3px solid var(--c); border-radius: 8px; padding: 8px 10px; margin-top: 6px !important; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.vbd-col li small { font-weight: 400; }
.vbd-col.tone-must { --c: var(--xs-red); } .vbd-col.tone-should { --c: #0969da; } .vbd-col.tone-could { --c: #6e7781; } .vbd-col.tone-wont { --c: #afb8c1; }

/* profiles */
.vp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.vp-card { --c: var(--xs-teal); border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: #fff; }
.vp-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.vp-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 800; font-size: 17px; display: grid; place-items: center; }
.vp-name { font-weight: 800; font-size: 16px; line-height: 1.2; }
.vp-name a { color: inherit; text-decoration: none; } .vp-name a:hover { text-decoration: underline; }
.vp-meta { font-size: 12.5px; color: var(--fg-muted); }
.vp-tag { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); }
.markdown-body .vp-card p { font-size: 13.5px; line-height: 1.45; margin: 6px 0 0; }
.vp-card.tone-primary { --c: var(--xs-red); } .vp-card.tone-secondary { --c: var(--xs-teal); } .vp-card.tone-tertiary { --c: #6e7781; }

/* goals */
.vgo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
.vgo-col { --c: var(--fg-muted); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.vgo-col header { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: color-mix(in srgb, var(--c) 9%, #fff); border-bottom: 1px solid var(--border-muted); }
.vgo-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--c); color: #fff; display: grid; place-items: center; }
.vgo-title { font-weight: 800; font-size: 16px; }
.vgo-sub { font-size: 12.5px; color: var(--fg-muted); line-height: 1.35; }
.vgo-col li { padding: 12px 14px; border-top: 1px solid var(--border-muted); scroll-margin-top: 20px; }
.vgo-col li:first-child { border-top: 0; }
.vgo-col li:target { background: #fff8c5; }
.vgo-goal { display: flex; gap: 8px; font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.vgo-code { flex: none; font-size: 11.5px; font-weight: 800; height: 20px; padding: 0 6px; border-radius: 5px; background: var(--c); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.vgo-kv { display: grid; grid-template-columns: 58px 1fr; gap: 6px; font-size: 13px; line-height: 1.4; margin-top: 6px; }
.vgo-kv > span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-subtle); padding-top: 2px; }
.vgo-phase { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--bg-neutral); color: var(--fg-muted); }
.vgo-col.tone-business { --c: #0969da; } .vgo-col.tone-user { --c: var(--xs-teal); } .vgo-col.tone-tech { --c: var(--sec-strategy); }

/* dot matrix */
.markdown-body .vm-table td.vm-cell { text-align: center; vertical-align: middle; }
.markdown-body .vm-table thead th { text-align: center; }
.vm-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); vertical-align: middle; }
.vm-dot.v2 { background: var(--xs-ink); border-color: var(--xs-ink); }
.vm-dot.v1 { background: linear-gradient(90deg, var(--xs-ink) 50%, #fff 50%); border-color: var(--xs-ink); }
.markdown-body .vm-legend { font-size: 13px; color: var(--fg-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.vm-legend .vm-dot:last-of-type { margin-left: 12px; }

/* thread: connecting the dots */
.vth { --research: var(--sec-research); --strategy: var(--sec-strategy); --visual: var(--sec-visual); }
.vth-head, .vth-nodes { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 22px; }
.vth-head { position: sticky; top: 0; z-index: 2; background: #fff; padding: 6px 0 8px; border-bottom: 1px solid var(--border); }
.vth-col { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c); }
.vth-col::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 1px; }
.vth-thread { padding: 14px 0 16px; border-bottom: 1px solid var(--border-muted); }
.vth-name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.vth-name span { width: 22px; height: 22px; border-radius: 50%; background: var(--xs-ink); color: #fff; font-size: 12px; display: grid; place-items: center; flex: none; }
.vth-node { position: relative; font-size: 13px; line-height: 1.45; padding: 9px 10px; border-radius: 8px; background: color-mix(in srgb, var(--c) 6%, #fff); border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); }
.vth-node:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -22px; width: 22px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 50%, #fff), var(--border)); }
.vth-node:not(:last-child)::before { content: ""; position: absolute; top: 50%; right: -26px; width: 8px; height: 8px; margin-top: -3px; border-radius: 50%; background: #fff; border: 2px solid var(--fg-subtle); z-index: 1; }
.vth-tag { display: none; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c); margin-bottom: 2px; }
.vth .tone-research { --c: var(--research); } .vth .tone-strategy { --c: var(--strategy); } .vth .tone-visual { --c: var(--visual); }

/* phase rail (top of every page) */
.phase-rail { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 14px; font-size: 13px; }
.rail-step { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; color: var(--fg-muted); text-decoration: none; border: 1px solid transparent; }
.rail-step:hover { background: var(--bg-hover); color: var(--fg); }
.rail-step b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--bg-neutral); color: var(--fg-muted); }
.rail-step.current { color: var(--fg); border-color: var(--border); background: #fff; font-weight: 600; }
.rail-step.current b { background: var(--xs-ink); color: #fff; }
.rail-q { color: var(--fg-subtle); font-weight: 400; }
.rail-step:not(.current) .rail-q { display: none; }
.rail-end { padding-left: 10px; color: var(--link); }
.rail-sep { color: var(--fg-subtle); display: inline-flex; }

/* connections box (bottom of every page) */
.connections { margin: 40px 0 8px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-muted); }
.conn-title { font-size: 18px; margin: 0 0 2px; border: 0; padding: 0; }
.conn-desc { font-size: 13.5px; color: var(--fg-muted); margin: 0 0 12px; }
.conn-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.conn-col h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 8px; }
.conn-col h3 b { font-weight: 700; color: var(--fg-subtle); }
.conn-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.conn-chip { --c: var(--fg-subtle); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 13px; color: var(--fg); text-decoration: none; }
.conn-chip:hover { border-color: var(--c); }
.conn-chip span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--c); padding: 1px 7px; border-radius: 999px; }
.conn-chip.sec-research { --c: var(--sec-research); } .conn-chip.sec-strategy { --c: var(--sec-strategy); } .conn-chip.sec-visual-direction { --c: var(--sec-visual); }

/* home: link to the thread page */
.home-thread { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -32px 0 48px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--fg); font-weight: 600; background: linear-gradient(90deg, rgba(14,138,150,.07), rgba(111,59,214,.07), rgba(212,47,50,.07)); }
.home-thread:hover { border-color: var(--fg-subtle); }

@media (max-width: 900px) {
  .vgo { grid-template-columns: 1fr; }
  .vth-head { display: none; }
  .vth-nodes { grid-template-columns: 1fr; gap: 10px; }
  .vth-node:not(:last-child)::after { top: auto; bottom: -10px; right: auto; left: 20px; width: 2px; height: 10px; }
  .vth-node:not(:last-child)::before { display: none; }
  .vth-tag { display: block; }
}
@media (max-width: 720px) {
  .vq-grid, .vq-grid.has-heads { grid-template-columns: 1fr; }
  .vq-colhead, .vq-rowhead, .vq-grid > div:empty { display: none; }
  .vf-row { flex-direction: column; }
  .vf-arrow { width: auto; height: 22px; transform: rotate(90deg); }
  .vt-list { grid-template-columns: 1fr; padding-left: 26px !important; }
  .vt-list::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .vt-item { padding-top: 0; }
  .vt-dot { left: -26px; top: 2px; }
  .vg { --label: 120px; }
  .vg-label small { display: none; }
  .vb-row { grid-template-columns: 1fr 56px; }
  .vb-label { grid-column: 1 / -1; font-size: 13px; }
  .vsc-plot { aspect-ratio: auto; height: 340px; }
  .vsc-pt.numbered .vsc-lab { display: none; }
  .vsc-lab { font-size: 11px; }
  .vbd { grid-template-columns: 1fr; }
  .conn-cols { grid-template-columns: 1fr; }
  .rail-q { display: none !important; }
}

/* ---------- viz: sticky notes ---------- */
.vn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 22px 16px; align-items: start; }
.vn-col { min-width: 0; }
.vn-colhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 0 2px 8px; border-bottom: 2px solid var(--pin); margin-bottom: 10px; }
.vn-colhead b { font-size: 12px; background: var(--note); border-radius: 99px; padding: 0 8px; }
.vn-sub { font-size: 13px !important; color: var(--fg-muted); margin: -2px 0 12px !important; }
.vn-notes { display: grid; gap: 14px; }
.vn-col.tone-yellow { --note: #fff3a8; --pin: #e0b400; }
.vn-col.tone-pink { --note: #ffd6e3; --pin: #e0457b; }
.vn-col.tone-mint { --note: #c9f4ec; --pin: #18a389; }
.vn-col.tone-blue { --note: #d4e7ff; --pin: #3b7ddd; }
.vn-col.tone-orange { --note: #ffe0bf; --pin: #e57a12; }
.vn-col.tone-lilac { --note: #e6dcff; --pin: #7b55d6; }
.vn-note { position: relative; min-width: 0; overflow-wrap: anywhere; background: var(--note); padding: 14px 14px 12px; border-radius: 2px 2px 14px 2px; box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 6px 14px -6px rgba(0,0,0,.22); font-size: 14px; line-height: 1.45; color: #2a2a2a; transform: rotate(-.6deg); transition: transform .15s ease, box-shadow .15s ease; }
.vn-note:nth-child(2n) { transform: rotate(.7deg); }
.vn-note:nth-child(3n) { transform: rotate(-.2deg); }
.vn-note::before { content: ""; position: absolute; top: -7px; left: 50%; width: 46px; height: 14px; margin-left: -23px; background: rgba(255,255,255,.55); box-shadow: 0 1px 2px rgba(0,0,0,.08); transform: rotate(-2deg); }
.vn-note:hover, .vn-note:focus-within { transform: rotate(0) translateY(-2px); box-shadow: 0 2px 2px rgba(0,0,0,.06), 0 12px 22px -8px rgba(0,0,0,.3); z-index: 2; }
.vn-note:target { outline: 3px solid var(--pin); outline-offset: 3px; }
.vn-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; min-height: 4px; }
.vn-id { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--pin); filter: brightness(.75); }
.vn-tag { font-size: 11px; font-weight: 600; background: rgba(0,0,0,.08); border-radius: 99px; padding: 1px 8px; }
.vn-q { overflow-wrap: anywhere; font-weight: 600; font-size: 15px; line-height: 1.4; }
.vn-q a, .vn-meta a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.markdown-body .vn-meta { font-size: 12.5px; line-height: 1.45; margin: 8px 0 0; color: #4a4a4a; }
.vn-meta b { font-weight: 700; color: #333; }
.vn-note.is-answered { opacity: .92; }
.vn-note.is-answered .vn-q { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); }
.vn-note.is-new::after { content: ""; }
/* interactive parts (added by docs.js) */
.vn-ans { margin-top: 10px; border-top: 1px dashed rgba(0,0,0,.2); padding-top: 8px; }
.vn-ans label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #555; margin-bottom: 4px; }
.vn-ans textarea, .vn-edit { width: 100%; min-height: 52px; resize: vertical; font: inherit; font-size: 13.5px; line-height: 1.45; color: #222; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.12); border-radius: 6px; padding: 6px 8px; }
.vn-ans textarea:focus, .vn-edit:focus { outline: 2px solid var(--pin); background: rgba(255,255,255,.85); }
.vn-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vn-actions button, .vn-add, .vn-bar button, .vn-bar label.vn-btn { font: inherit; font-size: 12px; font-weight: 600; border: 1px solid rgba(0,0,0,.18); background: rgba(255,255,255,.6); color: #222; border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.vn-actions button:hover, .vn-add:hover, .vn-bar button:hover, .vn-bar label.vn-btn:hover { background: #fff; }
.vn-actions .vn-done[aria-pressed="true"] { background: #1f883d; border-color: #1f883d; color: #fff; }
.vn-add { width: 100%; border-style: dashed; background: transparent; padding: 10px; color: var(--fg-muted); }
.vn-edited { font-size: 11px; color: #666; margin-left: auto; align-self: center; }
.vn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; margin: 0 0 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-muted); }
.vn-bar button, .vn-bar label.vn-btn { background: #fff; border-color: var(--border); }
.vn-filter { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.vn-bar .vn-filter button { border: 0; border-radius: 0; border-right: 1px solid var(--border); }
.vn-bar .vn-filter button:last-child { border-right: 0; }
.vn-bar .vn-filter button[aria-pressed="true"] { background: var(--fg); color: #fff; }
.vn-progress { flex: 1 1 160px; min-width: 140px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); }
.vn-progress span.track { flex: 1; height: 6px; border-radius: 99px; background: var(--border-muted); overflow: hidden; }
.vn-progress span.track i { display: block; height: 100%; background: #1f883d; width: 0; transition: width .3s ease; }
.vn-bar .vn-sep { flex-basis: 100%; height: 0; }
.vn-hint { font-size: 12px; color: var(--fg-muted); }
.vn.f-open .vn-note.is-answered, .vn.f-answered .vn-note:not(.is-answered) { display: none; }

/* ---------- viz: swatches, contrast, gradients, ratio ---------- */
.vsw-head { display: flex; align-items: baseline; gap: 10px; font-size: 14px; margin: 18px 0 8px; }
.vsw-head:first-child { margin-top: 0; }
.vsw-head span { font-size: 13px; color: var(--fg-muted); }
.vsw-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.vsw-row.lg { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.vsw-chip { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.vsw-color { height: 84px; background: var(--c); display: flex; align-items: flex-end; padding: 8px 10px; }
.vsw-row.lg .vsw-color { height: 120px; }
.vsw-hex { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.on-dark .vsw-hex { color: rgba(255,255,255,.92); }
.on-light .vsw-hex { color: rgba(0,0,0,.75); }
.vsw-chip figcaption { padding: 8px 10px 10px; font-size: 13px; line-height: 1.35; }
.vsw-chip figcaption b { display: block; font-family: var(--mono); font-size: 12.5px; }
.vco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.vco-tile { border-radius: 10px; padding: 14px; border: 1px solid rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.vco-sample { font-size: 22px; font-weight: 700; line-height: 1.2; }
.vco-pair { font-size: 12px; opacity: .85; }
.vco-pair code { background: none !important; padding: 0 !important; color: inherit; font-size: 12px !important; }
.vco-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vco-ratio { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.vco-badge { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; color: #fff; }
.vco-badge.v-pass { background: #1f883d; }
.vco-badge.v-large { background: #9a6700; }
.vco-badge.v-fail { background: #cf222e; }
.vco-note { font-size: 12px; opacity: .85; line-height: 1.4; }
.vgr-list { display: grid; gap: 14px; }
.vgr { margin: 0; }
.vgr-bar { height: 72px; border-radius: 10px; border: 1px solid rgba(0,0,0,.08); }
.vgr figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 8px; font-size: 14px; }
.vgr figcaption code { font-size: 12px !important; }
.vgr figcaption small { flex-basis: 100%; }
.vra-bar { display: flex; height: 44px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.vra-bar span { min-width: 4px; }
.vra-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; margin-top: 12px !important; font-size: 14px; }
.vra-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; border: 1px solid rgba(0,0,0,.15); }
.vra-pct { font-family: var(--mono); font-size: 13px; color: var(--fg-muted); }

/* ---------- viz: type ---------- */
.fam-display { font-family: "Barlow Condensed", var(--font); text-transform: uppercase; font-style: italic; }
.vfo-sample.is-display { text-transform: uppercase; }
.vfo-sample:not(.is-display) { font-size: 26px; font-weight: 700; line-height: 1.15; }
.fam-text { font-family: var(--font); }
.vty { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--xs-ink); color: #f6f4f2; }
.vty-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.vty-row:first-child { border-top: 0; }
.vty-meta { display: flex; flex-direction: column; font-size: 12px; color: rgba(246,244,242,.6); font-family: var(--mono); }
.vty-meta b { color: #71ded7; font-size: 12.5px; }
.vty-sample { overflow-wrap: anywhere; }
.vfo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.vfo-card { border: 1px solid var(--border); border-radius: 12px; padding: 18px; background: #fff; }
.vfo-role { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.vfo-aa { font-size: 88px; line-height: 1; font-weight: 800; margin: 8px 0 4px; }
.vfo-name { font-size: 18px; font-weight: 700; }
.vfo-sample { font-size: 34px; font-weight: 800; line-height: 1.05; margin: 10px 0; padding: 12px 14px; border-radius: 8px; background: var(--xs-ink); color: #f6f4f2; }
.vfo-glyphs { font-size: 14px; line-height: 1.5; color: var(--fg-muted); letter-spacing: .02em; margin-bottom: 10px; overflow-wrap: anywhere; }
.vfo-card li { font-size: 13.5px; padding: 3px 0 3px 14px; position: relative; }
.vfo-card li::before { content: "–"; position: absolute; left: 0; color: var(--fg-subtle); }

/* ---------- viz: player card ---------- */
.vpc-wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.vpc-row { display: flex; flex-wrap: wrap; gap: 16px; }
.vpc { --acc: #e5383b; --acc2: #71ded7; position: relative; width: 200px; aspect-ratio: 5 / 7; border-radius: 12px; overflow: hidden; background: #0b0f14; color: #f6f4f2; box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 14px 30px -14px rgba(0,0,0,.6); }
.vpc.tone-teal { --acc: #0e9aa7; }
.vpc.tone-gold { --acc: #c7a440; --acc2: #f2dc8e; }
.vpc.tone-mint { --acc: #71ded7; --acc2: #e5383b; }
.vpc::after { content: ""; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--acc) 70%, transparent); border-radius: 8px; pointer-events: none; }
.vpc-photo { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--acc) 55%, transparent), transparent 60%), radial-gradient(90% 60% at 50% 110%, rgba(14,154,167,.5), transparent 60%), #0b0f14; }
.vpc-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .9; mix-blend-mode: normal; }
.vpc-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(11,15,20,.92) 75%); }
.vpc-rank { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; align-items: center; line-height: 1; z-index: 2; }
.vpc-rank b { font-family: "Barlow Condensed", var(--font); font-style: italic; font-weight: 800; font-size: 30px; color: var(--acc); }
.vpc-rank span { font-size: 12px; color: var(--acc2); }
.vpc-end { top: auto; left: auto; bottom: 14px; right: 14px; transform: rotate(180deg); }
.vpc-body { position: absolute; left: 16px; right: 16px; bottom: 34px; z-index: 2; }
.vpc-team { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acc2); }
.vpc-name { font-family: "Barlow Condensed", var(--font); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: .95; margin: 2px 0 6px; }
.vpc-stats { display: flex; gap: 10px; margin: 0; }
.vpc-stats div { display: flex; flex-direction: column; }
.vpc-stats dt { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(246,244,242,.6); }
.vpc-stats dd { margin: 0; font-family: "Barlow Condensed", var(--font); font-weight: 700; font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.vpc-sponsor { margin-top: 8px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(246,244,242,.65); border-top: 1px solid rgba(255,255,255,.14); padding-top: 5px; }
.vpc-mk { position: absolute; display: none; width: 18px; height: 18px; border-radius: 50%; background: #ffd400; color: #111; font: 800 11px/18px var(--font); text-align: center; font-style: normal; box-shadow: 0 0 0 2px #0b0f14; z-index: 3; }
.anatomy .vpc-mk { display: block; }
.vpc-rank .vpc-mk { position: absolute; left: 26px; top: -4px; }
.vpc-team .vpc-mk, .vpc-name .vpc-mk, .vpc-sponsor .vpc-mk { position: relative; display: inline-block; margin-right: 5px; vertical-align: 1px; }
.vpc-name, .vpc-team, .vpc-sponsor { position: relative; }
.vpc-mk.m2 { top: -110px; right: 0; }
.vpc-stats { position: relative; }
.vpc-mk.m5 { right: 0; top: 2px; }
.anatomy .vpc { width: 260px; }
.anatomy .vpc-name { font-size: 32px; }
.vpc-legend { counter-reset: pc; flex: 1 1 240px; display: grid; gap: 8px; font-size: 14px; }
.vpc-legend li { counter-increment: pc; position: relative; padding-left: 28px; }
.vpc-legend li::before { content: counter(pc); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #ffd400; color: #111; font-size: 11px; font-weight: 800; text-align: center; line-height: 20px; }

/* ---------- viz: compare (do / don't) ---------- */
.vcm { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; }
.vcm-col { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: #fff; border-top: 4px solid var(--fg-subtle); }
.vcm-col header { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.vcm-ic { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 12px; }
.vcm-col.tone-do { border-top-color: #1f883d; background: #f3fbf5; }
.vcm-col.tone-do .vcm-ic { background: #1f883d; }
.vcm-col.tone-dont { border-top-color: #cf222e; background: #fff6f6; }
.vcm-col.tone-dont .vcm-ic { background: #cf222e; }
.vcm-col.tone-stage { border-top-color: #e5383b; background: #0b0f14; color: #f6f4f2; border-color: #1a1f26; }
.vcm-col.tone-stage small, .vcm-col.tone-stage .vcm-sub { color: rgba(246,244,242,.65) !important; }
.vcm-col.tone-locker { border-top-color: #c7a440; background: #fbf6ea; }
.vcm-sub { font-size: 13px !important; color: var(--fg-muted); margin: -4px 0 8px !important; }
.vcm-col li { display: flex; flex-direction: column; font-size: 14px; padding: 6px 0; border-top: 1px solid rgba(0,0,0,.06); }
.vcm-col.tone-stage li { border-top-color: rgba(255,255,255,.1); }
.vcm-col li:first-child { border-top: 0; }
.vcm-col li b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }

/* ---------- viz: motion ---------- */
.vmo { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.vmo-row { display: grid; grid-template-columns: 52px minmax(0, 1.1fr) minmax(120px, 1fr); gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border-muted); cursor: pointer; outline: none; }
.vmo-row:first-child { border-top: 0; }
.vmo-row:hover, .vmo-row:focus-visible, .vmo-row.play { background: var(--bg-muted); }
.vmo-curve { width: 44px; height: 44px; overflow: visible; }
.vmo-curve path { fill: none; stroke: #d42f32; stroke-width: 2.5; stroke-linecap: round; }
.vmo-curve path.g { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 2; }
.vmo-info { display: flex; flex-direction: column; font-size: 14px; }
.vmo-info span { font-size: 12.5px; color: var(--fg-muted); }
.vmo-info code { font-size: 11.5px !important; }
.vmo-track { position: relative; height: 24px; border-radius: 99px; background: var(--bg-muted); border: 1px solid var(--border-muted); }
.vmo-dot { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #d42f32; transition: left var(--ms) var(--ease); }
.vmo-row:hover .vmo-dot, .vmo-row:focus-visible .vmo-dot, .vmo-row.play .vmo-dot { left: calc(100% - 19px); }
@media (prefers-reduced-motion: reduce) { .vmo-dot { transition: none; } }

/* ---------- viz: moodboard ---------- */
.vmb { margin-bottom: 22px; }
.vmb header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; font-size: 15px; }
.vmb header span { font-size: 13px; color: var(--fg-muted); }
.vmb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 120px; grid-auto-flow: dense; gap: 8px; }
.vmb-item { position: relative; display: block; border-radius: 8px; overflow: hidden; background: var(--xs-ink); }
.vmb-item.wide { grid-column: span 2; }
.vmb-item.tall { grid-row: span 2; }
.vmb-item.big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 720px) { .vmb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 104px; } }
.vmb-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.vmb-item:hover img { transform: scale(1.04); }
.vmb-item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 11.5px; line-height: 1.3; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); }

/* ---------- viz: phone wireframes + live companion ---------- */
.vw-row { display: flex; flex-wrap: wrap; gap: 24px; }
.vw { margin: 0; width: 240px; }
.vw figcaption { font-size: 13px; margin-top: 8px; display: flex; flex-direction: column; }
.vw figcaption span { color: var(--fg-muted); font-size: 12px; }
.vphone { border: 8px solid #1a1f26; border-radius: 30px; background: #fff; overflow: hidden; box-shadow: 0 16px 30px -18px rgba(0,0,0,.5); }
.vphone-screen { padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 300px; }
.vphone.dark { background: #0b0f14; color: #f6f4f2; }
.vw-b { position: relative; border: 1.5px dashed #c9d1d9; border-radius: 6px; padding: 6px 8px; font-size: 11px; line-height: 1.3; background: #f6f8fa; }
.vw-l { font-weight: 700; }
.vw-b small { font-size: 10px; margin: 0; }
.vw-shape { display: flex; gap: 4px; margin-top: 4px; }
.vw-shape:empty { display: none; }
.vw-shape i { flex: 1; height: 26px; border-radius: 4px; background: #d0d7de; }
.vw-b.k-nav { border-style: solid; background: #0b0f14; color: #f6f4f2; border-color: #0b0f14; }
.vw-b.k-hero { min-height: 110px; background: radial-gradient(100% 70% at 50% 0%, rgba(229,56,59,.55), transparent 60%), radial-gradient(80% 60% at 50% 110%, rgba(14,154,167,.6), transparent 60%), #0b0f14; color: #fff; border: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.vw-b.k-hero small, .vw-b.k-nav small, .vw-b.k-score small { color: rgba(255,255,255,.7); }
.vw-b.k-strip .vw-shape i { height: 52px; flex: 0 0 34px; background: #1a1f26; }
.vw-b.k-strip .vw-shape { overflow: hidden; }
.vw-b.k-cards3 .vw-shape i, .vw-b.k-cards4 .vw-shape i { aspect-ratio: 5/7; height: auto; }
.vw-b.k-cta { border: 0; background: #cf2a2e; color: #fff; text-align: center; font-weight: 700; }
.vw-b.k-cta small { color: rgba(255,255,255,.8); }
.vw-b.k-score { border: 0; background: #1a1f26; color: #fff; position: sticky; top: 0; }
.vw-b.k-timeline .vw-shape { flex-direction: column; }
.vw-b.k-timeline .vw-shape i { height: 14px; background: #c9f4ec; border-left: 3px solid #0e9aa7; }
.vw-b.k-tabs .vw-shape i { height: 10px; }
.vw-b.k-bottom { margin-top: auto; border-style: solid; background: #fff; }
.vw-b.k-bottom .vw-shape i { height: 14px; border-radius: 3px; }
.vcp-wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.vcp-wrap .vphone { width: 280px; }
.vcp-side { flex: 1 1 240px; font-size: 14px; }
.vcp-score { position: sticky; top: 0; background: #1a1f26; border-radius: 10px; padding: 10px 12px; text-align: center; }
.vcp-live { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #e5383b; }
.vcp-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 4px 0; }
.vcp-teams b { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.vcp-num { font-family: "Barlow Condensed", var(--font); font-style: italic; font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.vcp-clock { font-size: 11px; color: rgba(246,244,242,.65); font-variant-numeric: tabular-nums; }
.vcp-tl { position: relative; margin: 6px 0 0 !important; padding: 0 0 0 4px !important; display: grid; gap: 8px; }
.vcp-tl li { display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: start; }
.vcp-min { font-size: 11px; font-weight: 700; color: rgba(246,244,242,.6); padding-top: 6px; font-variant-numeric: tabular-nums; }
.vcp-card { border-radius: 8px; padding: 7px 9px; background: rgba(113,222,215,.1); border: 1px solid rgba(113,222,215,.45); display: flex; flex-direction: column; font-size: 12px; }
.vcp-tl li.tone-pres .vcp-card { background: rgba(199,164,64,.12); border-color: rgba(199,164,64,.6); }
.vcp-card b { font-size: 13px; color: #71ded7; }
.vcp-tl li.tone-pres .vcp-card b { color: #e6c766; }
.vcp-tl li.tone-goal .vcp-card { background: rgba(229,56,59,.12); border-color: rgba(229,56,59,.55); }
.vcp-tl li.tone-goal .vcp-card b { color: #ff7b7d; }
.vcp-card span { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(246,244,242,.6); }
.vcp-card small { color: rgba(246,244,242,.8) !important; font-size: 11.5px; }
.vcp-cta { margin-top: auto; background: #cf2a2e; color: #fff; text-align: center; font-weight: 700; font-size: 13px; border-radius: 8px; padding: 10px; }

/* header question-board button */
.btn-qboard { display: inline-flex; align-items: center; gap: 6px; }
.btn-qboard .qb-count { font-size: 11px; font-weight: 800; line-height: 18px; min-width: 18px; padding: 0 6px; border-radius: 99px; background: #ffd400; color: #111; text-align: center; }
.btn-qboard svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .vcm { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .vty-row { grid-template-columns: 1fr; gap: 4px; }
  .vmo-row { grid-template-columns: 44px 1fr; }
  .vmo-track { grid-column: 1 / -1; }
  .vpc, .anatomy .vpc { width: calc(50% - 8px); min-width: 150px; }
  .anatomy .vpc { width: 100%; max-width: 280px; }
  .vw { width: 100%; max-width: 260px; }
}
.vth .tone-product { --c: #0b0f14; }

/* Question board: keep reachable on phones (icon + count), and swipe columns instead of one very long stack */
@media (max-width: 640px) {
  .hdr-cta { display: flex; }
  .btn-qboard { padding: 0 8px; }
  .btn-qboard .qb-label { display: none; }
}
@media (max-width: 720px) {
  .vn:has(> .vn-col + .vn-col) { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 2px 16px; margin: 0 -2px; overscroll-behavior-x: contain; }
  .vn:has(> .vn-col + .vn-col) > .vn-col { flex: 0 0 86%; scroll-snap-align: start; }
}

/* A notes block with a single column: let the notes themselves flow into a grid */
.vn:not(:has(> .vn-col + .vn-col)) .vn-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 22px 16px; align-items: start; }

/* QA fixes: stagger close milestones on small screens, keep player card labels legible over photos */
@media (max-width: 720px) {
  .vg-diamond:nth-child(odd) { top: 32%; }
  .vg-diamond:nth-child(even) { top: 70%; }
}
.vpc-name { text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.6); }
.vpc-team { display: inline; background: rgba(11,15,20,.82); padding: 2px 5px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; line-height: 1.9; }
.vpc-photo::after { background: linear-gradient(180deg, transparent 30%, rgba(11,15,20,.6) 52%, rgba(11,15,20,.94) 74%); }

/* Card icons (Lucide) for quick scanning */
.card { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto 1fr; align-content: start; column-gap: 12px; align-items: start; }
.card-icon { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 11%, transparent); transition: background .15s, color .15s; }
.card-icon .lc { width: 20px; height: 20px; }
.card-title, .card-desc { grid-column: 2; }
.card-title { margin-top: 7px; margin-bottom: 4px; }
.card:hover .card-icon { background: var(--c, var(--accent)); color: #fff; }
.sec-research { --c: var(--sec-research); } .sec-strategy { --c: var(--sec-strategy); } .sec-visual-direction { --c: var(--sec-visual); }
.home-card-icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: var(--xs-cyan); background: rgba(34, 211, 230, .12); border: 1px solid rgba(34, 211, 230, .28); position: relative; z-index: 1; margin-bottom: 4px; }
.home-card-icon .lc { width: 24px; height: 24px; }
.vm-table tbody th[scope="row"] { min-width: 190px; }
@media (max-width: 720px) { .vm-table tbody th[scope="row"] { min-width: 140px; } }

/* viz-refs: product references with screenshots */
.vrf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 16px 0 8px; }
.vrf-card { --k: var(--sec-visual); display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg, #fff); }
.vrf-card.kind-ext { --k: var(--sec-research); }
.vrf-shot { display: block; background: #0b0f14; text-decoration: none; border-bottom: 1px solid var(--border); }
.vrf-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #1b2128; }
.vrf-bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a434d; }
.vrf-bar span { margin-left: 6px; flex: 1; min-width: 0; font: 500 11px/1.4 var(--font-mono, ui-monospace, monospace); color: #9aa7b4; background: #0f1419; padding: 2px 8px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrf-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.vrf-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .3s ease-out; }
.vrf-shot:hover .vrf-img img { transform: scale(1.03); }
.vrf-shot.is-mobile .vrf-img { display: grid; place-items: start center; padding-top: 14px; background: radial-gradient(circle at 50% 0%, #26313c, #0b0f14 70%); }
.vrf-shot.is-mobile .vrf-img img { width: 46%; height: auto; border-radius: 16px 16px 0 0; border: 3px solid #2c3640; border-bottom: 0; }
.vrf-shot.is-mobile:hover .vrf-img img { transform: translateY(-4px); }
.vrf-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.vrf-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vrf-kind, .vrf-stage, .vrf-date { font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 7px; border-radius: 999px; }
.vrf-kind { color: #fff; background: var(--k); letter-spacing: .02em; }
.vrf-stage { color: var(--sec-strategy); background: color-mix(in srgb, var(--sec-strategy) 11%, transparent); }
.vrf-date { color: var(--fg-muted); background: var(--bg-subtle, #f6f8fa); }
.markdown-body .vrf-title { margin: 0; font-size: 16px; line-height: 1.3; }
.markdown-body .vrf-title a { color: var(--fg); text-decoration: none; }
.markdown-body .vrf-title a:hover { color: var(--link); text-decoration: underline; }
.markdown-body .vrf dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.vrf-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 13.5px; line-height: 1.5; padding: 6px 8px; border-radius: 6px; }
.markdown-body .vrf-row dt { margin: 0; padding: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-style: normal; color: var(--fg-muted); line-height: 1.9; }
.markdown-body .vrf-row dd { margin: 0; padding: 0; }
.vrf-row.tone-take { background: color-mix(in srgb, var(--sec-research) 8%, transparent); }
.vrf-row.tone-take dt { color: var(--sec-research); }
.vrf-row.tone-xs { background: color-mix(in srgb, var(--sec-strategy) 7%, transparent); }
.vrf-row.tone-xs dt { color: var(--sec-strategy); }
.vrf-row.tone-avoid { background: color-mix(in srgb, var(--sec-visual) 7%, transparent); }
.vrf-row.tone-avoid dt { color: var(--sec-visual); }
.vrf-row.tone-link { padding-top: 8px; border-top: 1px dashed var(--border); border-radius: 0; }
@media (max-width: 420px) { .vrf-row { grid-template-columns: 1fr; gap: 2px; } }

/* viz-predict: prediction moment phone */
.vpd { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.vpd-phone { width: 290px; flex: none; }
.vpd-phone .vphone-screen { gap: 8px; padding: 12px; }
.vpd-n { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: #ffd23f; color: #111; font: 800 11px/20px var(--font); text-align: center; box-shadow: 0 0 0 2px #0b0f14; z-index: 2; }
.vpd-card, .vpd-q, .vpd-opts, .vpd-conf, .vpd-stake, .vpd-rank, .vpd-spon { position: relative; }
.vpd-card { border-radius: 10px; padding: 9px 11px; background: linear-gradient(120deg, rgba(113,222,215,.22), rgba(113,222,215,.06)); border: 1px solid rgba(113,222,215,.55); display: flex; flex-direction: column; gap: 1px; }
.vpd-kick { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(246,244,242,.6); }
.vpd-card b { font-family: "Barlow Condensed", var(--font); font-style: italic; font-weight: 800; font-size: 20px; text-transform: uppercase; color: #71ded7; letter-spacing: .02em; }
.vpd-q { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; padding: 4px 2px; }
.vpd-timer { width: 48px; height: 48px; border-radius: 50%; background: conic-gradient(#e5383b calc(var(--p) * 360deg), rgba(246,244,242,.12) 0); display: grid; place-items: center; }
.vpd-timer span { width: 38px; height: 38px; border-radius: 50%; background: #0b0f14; display: grid; place-items: center; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vpd-qt { font-size: 17px; font-weight: 800; line-height: 1.2; }
.vpd-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vpd-opt { text-align: center; padding: 11px 6px; border-radius: 9px; border: 1px solid rgba(246,244,242,.22); font-weight: 700; font-size: 14px; }
.vpd-opt.is-pick { background: #e5383b; border-color: #e5383b; color: #fff; }
.vpd-conf { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(246,244,242,.75); padding: 2px 2px; }
.vpd-stars { display: flex; gap: 3px; }
.vpd-stars svg { width: 20px; height: 20px; fill: rgba(246,244,242,.15); }
.vpd-stars svg.on { fill: #ffd23f; }
.vpd-stake { font-size: 12.5px; text-align: center; padding: 7px; border-radius: 8px; background: rgba(246,244,242,.06); }
.vpd-rank { font-size: 11.5px; color: rgba(246,244,242,.65); text-align: center; }
.vpd-spon { margin-top: 2px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: rgba(246,244,242,.55); border-top: 1px solid rgba(246,244,242,.1); padding-top: 8px; }
.vpd-legend { flex: 1 1 280px; list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 12px; }
.vpd-legend li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; margin: 0 !important; }
.vpd-legend .vpd-n { position: static; box-shadow: none; width: 22px; height: 22px; line-height: 22px; margin-top: 1px; }
.vpd-legend b { font-size: 14.5px; }
.vpd-legend p { margin: 2px 0 0 !important; font-size: 14px; color: var(--fg-muted); line-height: 1.5; }

/* viz-ladder: level stairs */
.vld { list-style: none; margin: 16px 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 10px; align-items: end; }
.vld-step { --c: #6e7781; margin: 0 !important; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--border)); background: color-mix(in srgb, var(--c) 6%, var(--bg, #fff)); padding: 14px; min-height: calc(170px + var(--i) * 36px); display: flex; flex-direction: column; gap: 8px; border-top: 5px solid var(--c); }
.vld-step.tone-1 { --c: #6e7781; } .vld-step.tone-2 { --c: #0e8a96; } .vld-step.tone-3 { --c: #cf2a2e; } .vld-step.tone-4 { --c: #b8901c; }
.vld-step.tone-4 { background: linear-gradient(160deg, #1a1f26, #0b0f14); color: #f6f4f2; border-color: #b8901c; }
.vld-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vld-lv { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--c); color: #fff; display: grid; place-items: center; font: italic 800 18px/1 "Barlow Condensed", var(--font); }
.vld-name { font-weight: 800; font-size: 15.5px; line-height: 1.2; }
.vld-pts { font-size: 12px; font-weight: 600; color: var(--c); font-variant-numeric: tabular-nums; }
.vld-step.tone-4 .vld-pts { color: #e6c766; }
.vld-sub { margin: 0 !important; font-size: 13px; color: var(--fg-muted); }
.vld-step.tone-4 .vld-sub { color: rgba(246,244,242,.7); }
.vld-step ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; }
.vld-step ul li { margin: 0 !important; font-size: 13.5px; line-height: 1.4; padding-left: 18px; position: relative; display: flex; flex-direction: column; }
.vld-step ul li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 8px; height: 8px; border-radius: 2px; background: var(--c); transform: rotate(45deg); }
.vld-step ul li small { color: var(--fg-muted); font-size: 12px; }
.vld-step.tone-4 ul li small { color: rgba(246,244,242,.6); }
.vld-axis { margin-top: 8px; text-align: right; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
@media (max-width: 760px) {
  .vld { grid-template-columns: 1fr; }
  .vld-step { min-height: 0; margin-left: calc(var(--i) * 10px) !important; }
  .vpd-phone { margin: 0 auto; }
}

/* Priority chips (refs + ideas) */
.vrf-card { scroll-margin-top: calc(var(--header-h) + 16px); }
.vrf-prio { --c: #6e7781; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 7px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); white-space: nowrap; }
.vrf-prio.prio-must { --c: var(--xs-red); color: #fff; background: var(--xs-red); box-shadow: none; }
.vrf-prio.prio-should { --c: #0969da; }
.vrf-prio.prio-could { --c: #6e7781; }
.vrf-card:target { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

/* viz-ideas */
.markdown-body ol.vid { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.vid-card { --c: #6e7781; margin: 0 !important; min-width: 0; border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 10px; padding: 14px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.vid-card.prio-must { --c: var(--xs-red); } .vid-card.prio-should { --c: #0969da; }
.vid-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
.vid-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: var(--xs-ink, #1f2328); }
.markdown-body .vid-title { margin: 2px 0 4px; font-size: 15px; line-height: 1.3; }
.vid-from { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--fg-muted); }
.vid-thumb { display: block; width: 76px; height: 54px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-muted); }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.markdown-body .vid-card dl { margin: 0; display: grid; gap: 6px; }
.vid-card dl > div { padding: 7px 9px; border-radius: 6px; background: var(--bg-muted); font-size: 13.5px; line-height: 1.5; }
.vid-card dl > div.is-xs { background: color-mix(in srgb, var(--sec-strategy) 8%, transparent); }
.markdown-body .vid-card dt { margin: 0 0 2px; padding: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-style: normal; color: var(--fg-muted); }
.vid-card dl > div.is-xs dt { color: var(--sec-strategy); }
.markdown-body .vid-card dd { margin: 0; padding: 0; }
.markdown-body .vid-links { margin: auto 0 0; font-size: 12px; color: var(--fg-muted); }

/* ---------- Calm pass: one quiet card language across viz blocks ---------- */
/* Notes: flat cards instead of rotated sticky paper */
.vn-note, .vn-note:nth-child(2n), .vn-note:nth-child(3n) { transform: none; }
.vn-note { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--pin); border-radius: 8px; padding: 14px 16px; box-shadow: none; color: var(--fg); transition: box-shadow .15s ease; }
.vn-note::before { content: none; }
.vn-note:hover, .vn-note:focus-within { transform: none; box-shadow: 0 1px 2px rgba(31,35,40,.06), 0 4px 12px -6px rgba(31,35,40,.18); }
.vn-top { margin-bottom: 8px; }
.vn-tag { background: var(--bg-muted); color: var(--fg-muted); border: 1px solid var(--border-muted); }
.vn-q { font-size: 15px; line-height: 1.45; color: var(--fg); }
.markdown-body .vn-meta { font-size: 13px; color: var(--fg-muted); margin-top: 10px; }
.vn-meta b { color: var(--fg); font-weight: 600; }
.vn-colhead { font-size: 12px; letter-spacing: .06em; border-bottom-width: 2px; }
.vn-colhead b { background: var(--bg-muted); color: var(--fg-muted); border: 1px solid var(--border-muted); font-size: 11px; }
.vn:has(> .vn-col + .vn-col) .vn-sub { min-height: 2.9em; }
/* Team-idea field stays small; its buttons show only when the note is in use */
.vn-ans { border-top: 1px solid var(--border-muted); margin-top: 12px; padding-top: 10px; }
.vn-ans label { font-size: 11px; color: var(--fg-muted); letter-spacing: .04em; }
.vn-ans textarea { field-sizing: content; min-height: 36px; max-height: 220px; background: var(--bg-muted); border-color: var(--border-muted); }
.vn-ans textarea:focus { background: #fff; outline: 2px solid var(--pin); outline-offset: -1px; }
.vn-actions { display: none; }
.vn-note:hover .vn-actions, .vn-note:focus-within .vn-actions, .vn-note.is-answered .vn-actions, .vn-note.is-new .vn-actions,
.vn-note:has(.vn-ans textarea:not(:placeholder-shown)) .vn-actions, .vn-note:has(.vn-edited:not([hidden])) .vn-actions { display: flex; }
.vn-actions button { background: #fff; border-color: var(--border); }
.vn-note.is-answered { opacity: 1; background: var(--bg-muted); }
@media (hover: none) { .vn-actions { display: flex; } }

/* Cards: plain variant for strategy summaries (the playing-card look stays for real X Cards) */
.vc-grid.is-plain { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.vc-grid.is-plain .vc-card { aspect-ratio: auto; background: #fff; color: var(--fg); border: 1px solid var(--border); border-top: 3px solid var(--c, var(--fg-subtle)); border-radius: 8px; box-shadow: none; padding: 16px; gap: 8px; }
.vc-grid.is-plain .vc-card::before { content: none; }
.vc-grid.is-plain .vc-corner { flex-direction: row; align-items: baseline; gap: 8px; color: var(--fg-muted); }
.vc-grid.is-plain .vc-corner b { font-size: 13px; font-weight: 700; color: var(--c, var(--fg)); }
.vc-grid.is-plain .vc-corner span { margin: 0; font-size: 11px; letter-spacing: .04em; }
.vc-grid.is-plain .vc-name { margin-top: 0; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.markdown-body .vc-grid.is-plain .vc-effect { margin: 0 !important; padding: 0; font-size: 13.5px; color: var(--fg-muted); }
.vc-grid.is-plain .vc-card.tone-x { --c: var(--xs-teal); }
.vc-grid.is-plain .vc-card.tone-pres { --c: var(--xs-red); }
.vc-grid.is-plain .vc-card.tone-gold { --c: #b8912a; }

/* Flow: thinner accent, no tinted fills, quieter kicker */
.vf-step { border-top-width: 3px; padding: 14px 16px; }
.vf-step.tone-product { background: #fff; }
.vf-kicker { font-size: 11px; letter-spacing: .05em; }
.vf-title { font-size: 15px; font-weight: 600; }
.vf-step li { color: var(--fg-muted); }

/* Wide column for diagrams and tables, comfortable measure for running text */
.markdown-body > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, hr, .alert) { max-width: 720px; }