:root {
  --ink: #09090b;
  --paper: #fffef5;
  --yellow: #fde047;
  --yellow-soft: #fef9c3;
  --cyan: #67e8f9;
  --lime: #a3e635;
  --pink: #e879f9;
  --fuchsia: #d946ef;
  --orange: #fb923c;
  --green: #34d399;
  --red: #fb7185;
  --blue: #60a5fa;
  --muted: #52525b;
  --shadow: 7px 7px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --border: 3px solid var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background-color: var(--yellow);
  background-image:
    linear-gradient(rgba(9,9,11,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9,9,11,.055) 1px, transparent 1px);
  background-size: 36px 36px;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 10% 10%, rgba(232,121,249,.33), transparent 22%),
              radial-gradient(circle at 88% 12%, rgba(103,232,249,.38), transparent 23%),
              radial-gradient(circle at 76% 86%, rgba(163,230,53,.32), transparent 25%);
}
a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }
button, input, select { font: inherit; }
button { cursor: pointer; }
::selection { background: var(--fuchsia); color: white; }
:focus-visible { outline: 4px solid white; box-shadow: 0 0 0 7px var(--ink); outline-offset: 2px; }
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 999; padding: 12px 16px; background: white; border: var(--border); box-shadow: var(--shadow-sm); font-weight: 900; }
.skip-link:focus { top: 12px; }
.container-shell { width: min(1240px, calc(100% - 32px)); margin-inline: auto; }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.site-header { position: relative; z-index: 50; border-bottom: 4px solid var(--ink); background: rgba(253,224,71,.96); }
.status-bar { background: var(--ink); color: var(--green); border-bottom: 2px solid var(--ink); font: 700 11px/1.3 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .08em; padding: 8px 16px; }
.status-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; white-space:nowrap; overflow:hidden; }
.status-group { display:flex; align-items:center; gap:13px; }
.status-dot { width:9px; height:9px; border:1px solid white; display:inline-block; border-radius:999px; background:var(--green); box-shadow:0 0 0 0 rgba(52,211,153,.7); animation:pulseDot 2s infinite; }
@keyframes pulseDot { 70% { box-shadow:0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow:0 0 0 0 rgba(52,211,153,0); } }
.primary-nav { padding: 15px 0; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:22px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; background:white; border:var(--border); box-shadow:var(--shadow-sm); padding:9px 13px; font:900 clamp(1.15rem,2.2vw,1.75rem)/1 "JetBrains Mono", monospace; letter-spacing:-.05em; position:relative; }
.brand::before { content:"ETF RESEARCH OS"; position:absolute; left:-8px; top:-13px; padding:1px 5px; background:var(--pink); border:2px solid var(--ink); font:900 8px/1.5 "JetBrains Mono", monospace; letter-spacing:.1em; transform:rotate(-2deg); }
.brand-cursor { width:10px; height:22px; background:var(--fuchsia); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.nav-links { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.nav-link { text-decoration:none; border:2px solid transparent; padding:7px 8px; font:800 11px/1.1 "JetBrains Mono", monospace; text-transform:uppercase; letter-spacing:.025em; }
.nav-link:hover, .nav-link[aria-current="page"] { background:white; border-color:var(--ink); box-shadow:2px 2px 0 var(--ink); transform:translate(-1px,-1px); }
.nav-contact { background:var(--lime); border-color:var(--ink); box-shadow:3px 3px 0 var(--ink); }
.menu-toggle { display:none; background:var(--cyan); border:var(--border); box-shadow:var(--shadow-sm); padding:8px 10px; font:900 12px/1 "JetBrains Mono", monospace; text-transform:uppercase; }
.keyword-ticker { overflow:hidden; border-top:3px solid var(--ink); background:var(--cyan); }
.ticker-track { display:flex; width:max-content; animation:tickerMove 42s linear infinite; }
.ticker-track span { display:inline-block; padding:7px 18px; font:900 11px/1 "JetBrains Mono", monospace; text-transform:uppercase; white-space:nowrap; }
.ticker-track span::after { content:"◆"; margin-left:36px; }
@keyframes tickerMove { to { transform:translateX(-50%); } }
.page-hero { position:relative; padding:70px 0 54px; overflow:hidden; border-bottom:4px solid var(--ink); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(350px,.88fr); gap:34px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; background:var(--lime); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:5px 9px; font:900 11px/1.2 "JetBrains Mono", monospace; text-transform:uppercase; letter-spacing:.08em; }
.hero-title, .page-title { margin:18px 0 18px; font-family:"JetBrains Mono", monospace; font-weight:900; line-height:.92; letter-spacing:-.07em; text-transform:uppercase; }
.hero-title { font-size:clamp(3rem,7vw,6.9rem); }
.page-title { font-size:clamp(2.7rem,6vw,5.7rem); }
.highlight-block { display:inline-block; background:white; color:var(--fuchsia); border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:0 .12em .08em; transform:rotate(-.8deg); }
.hero-copy { max-width:760px; background:var(--yellow-soft); border:var(--border); box-shadow:var(--shadow-sm); padding:18px; font-size:clamp(1rem,1.5vw,1.22rem); font-weight:650; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.brutal-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; min-height:48px; padding:12px 15px; border:var(--border); box-shadow:var(--shadow-sm); background:white; font:900 12px/1.15 "JetBrains Mono", monospace; text-transform:uppercase; letter-spacing:.035em; transition:transform .14s, box-shadow .14s, background .14s; }
.brutal-button:hover { text-decoration:none; transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.button-lime { background:var(--lime); }
.button-pink { background:var(--pink); }
.button-cyan { background:var(--cyan); }
.button-dark { background:var(--ink); color:white; }
.hero-visual { position:relative; min-height:510px; background:white; border:4px solid var(--ink); box-shadow:11px 11px 0 var(--ink); overflow:hidden; }
.hero-visual::before { content:"WEBGL // ETF FLOW MAP"; position:absolute; z-index:3; left:12px; top:12px; background:var(--ink); color:var(--yellow); border:2px solid var(--ink); padding:5px 8px; font:900 10px/1 "JetBrains Mono",monospace; letter-spacing:.08em; }
#etf-webgl { position:absolute; inset:0; width:100%; height:100%; }
.webgl-fallback { position:absolute; inset:0; background-image:linear-gradient(var(--cyan) 2px,transparent 2px),linear-gradient(90deg,var(--pink) 2px,transparent 2px); background-size:50px 50px; opacity:.35; }
.hero-image-overlay { position:absolute; inset:auto 20px 20px 20px; z-index:2; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:rgba(255,255,255,.92); padding:12px; }
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.metric { border:2px solid var(--ink); padding:9px; background:var(--yellow-soft); }
.metric strong { display:block; font:900 1.25rem/1 "JetBrains Mono",monospace; }
.metric span { display:block; margin-top:4px; font:800 9px/1.2 "JetBrains Mono",monospace; text-transform:uppercase; }
.section { padding:72px 0; border-bottom:4px solid var(--ink); }
.section-white { background:rgba(255,255,255,.93); }
.section-cyan { background:var(--cyan); }
.section-pink { background:var(--pink); }
.section-lime { background:var(--lime); }
.section-dark { background:var(--ink); color:white; }
.section-heading { margin:0 0 15px; font:900 clamp(2rem,4vw,4.3rem)/.98 "JetBrains Mono",monospace; letter-spacing:-.055em; text-transform:uppercase; }
.section-lede { max-width:820px; margin:0 0 30px; font-size:1.1rem; font-weight:620; }
.section-label { display:inline-block; margin-bottom:12px; padding:4px 8px; border:2px solid currentColor; font:900 10px/1 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.12em; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.card-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.brutal-card { background:white; border:var(--border); box-shadow:var(--shadow); padding:20px; position:relative; transition:transform .18s, box-shadow .18s; }
.brutal-card:hover { transform:translate(-2px,-2px); box-shadow:10px 10px 0 var(--ink); }
.brutal-card h3 { margin:10px 0 9px; font:900 1.25rem/1.08 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:-.035em; }
.brutal-card p { margin:0; color:#27272a; }
.card-link { display:inline-block; margin-top:15px; font:900 11px/1.2 "JetBrains Mono",monospace; text-transform:uppercase; }
.card-number { position:absolute; right:10px; top:8px; font:900 2.2rem/1 "JetBrains Mono",monospace; color:rgba(9,9,11,.16); }
.card-cyan { background:#cffafe; }
.card-lime { background:#ecfccb; }
.card-pink { background:#fae8ff; }
.card-orange { background:#ffedd5; }
.card-yellow { background:#fef9c3; }
.data-panel { background:#fff; color:var(--ink); border:4px solid var(--ink); box-shadow:10px 10px 0 var(--ink); }
.panel-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 13px; background:var(--ink); color:var(--yellow); border-bottom:3px solid var(--ink); font:900 11px/1.2 "JetBrains Mono",monospace; text-transform:uppercase; }
.panel-lights { display:flex; gap:6px; }
.panel-light { width:11px; height:11px; border-radius:50%; border:1px solid white; }
.chart-wrap { padding:14px; background:#fff; }
.chart-canvas { width:100%; min-height:360px; display:block; background:#fffef5; border:2px solid var(--ink); }
.chart-note { margin:9px 0 0; color:#52525b; font:700 10px/1.4 "JetBrains Mono",monospace; text-transform:uppercase; }
.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.image-frame { background:white; border:4px solid var(--ink); box-shadow:10px 10px 0 var(--ink); padding:10px; }
.image-frame img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border:2px solid var(--ink); }
.check-list { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.check-list li { position:relative; padding:11px 12px 11px 42px; background:white; border:2px solid var(--ink); font-weight:700; }
.check-list li::before { content:"✓"; position:absolute; left:10px; top:8px; width:23px; height:23px; display:grid; place-items:center; background:var(--lime); border:2px solid var(--ink); font:900 14px/1 "JetBrains Mono",monospace; }
.table-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px; background:var(--yellow-soft); border-bottom:3px solid var(--ink); }
.table-search { min-width:min(100%,340px); flex:1; border:3px solid var(--ink); background:white; padding:10px 12px; font:800 12px/1.2 "JetBrains Mono",monospace; }
.filter-buttons { display:flex; gap:7px; flex-wrap:wrap; }
.filter-button { border:2px solid var(--ink); background:white; box-shadow:2px 2px 0 var(--ink); padding:7px 9px; font:900 10px/1 "JetBrains Mono",monospace; text-transform:uppercase; }
.filter-button.active { background:var(--lime); transform:translate(2px,2px); box-shadow:none; }
.table-scroll { overflow:auto; max-height:900px; }
.etf-table { border-collapse:separate; border-spacing:0; width:100%; min-width:840px; background:white; font-size:.93rem; }
.etf-table caption { text-align:left; padding:12px; font-weight:700; }
.etf-table th, .etf-table td { padding:11px 12px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); text-align:left; vertical-align:middle; }
.etf-table th:last-child, .etf-table td:last-child { border-right:0; }
.etf-table th button { all:unset; cursor:pointer; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit; }
.etf-table th button:hover { color:var(--yellow); text-decoration:underline; }
.etf-table thead th { position:sticky; top:0; z-index:2; background:var(--ink); color:white; font:900 10px/1.3 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.07em; }
.etf-table tbody tr:nth-child(even) { background:#fef9c3; }
.etf-table tbody tr:hover { background:#cffafe; }
.rank-cell { font:900 12px/1 "JetBrains Mono",monospace; }
.symbol-chip { display:inline-block; min-width:78px; padding:5px 7px; background:var(--pink); border:2px solid var(--ink); font:900 12px/1 "JetBrains Mono",monospace; }
.aum-cell { white-space:nowrap; font:900 12px/1 "JetBrains Mono",monospace; }
.source-note { margin-top:14px; padding:13px; background:white; border:2px dashed var(--ink); font-size:.88rem; }
.blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.post-card { display:grid; grid-template-columns:190px 1fr; gap:18px; background:white; border:var(--border); box-shadow:var(--shadow); padding:12px; }
.post-card img { width:190px; aspect-ratio:1; object-fit:cover; border:2px solid var(--ink); }
.post-card h2, .post-card h3 { margin:8px 0; font:900 1.25rem/1.08 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:-.035em; }
.post-card p { margin:0; }
.post-meta { display:flex; flex-wrap:wrap; gap:6px 14px; font:800 10px/1.2 "JetBrains Mono",monospace; text-transform:uppercase; color:#52525b; }
.article-shell { display:grid; grid-template-columns:minmax(0,820px) 280px; gap:36px; align-items:start; }
.article-body { background:rgba(255,255,255,.95); border:4px solid var(--ink); box-shadow:10px 10px 0 var(--ink); padding:clamp(20px,4vw,48px); }
.article-body h2 { margin:2.2em 0 .6em; font:900 clamp(1.65rem,3vw,2.45rem)/1.02 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:-.04em; }
.article-body h3 { margin:1.7em 0 .5em; font:900 1.3rem/1.1 "JetBrains Mono",monospace; text-transform:uppercase; }
.article-body p { margin:0 0 1.25em; font-size:1.05rem; }
.article-body ul, .article-body ol { margin:0 0 1.4em 1.25em; padding-left:1em; }
.article-body li { margin:.5em 0; }
.article-body blockquote { margin:1.5em 0; padding:16px 18px; background:var(--cyan); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font-weight:750; }
.article-body .key-takeaway { margin:1.5em 0; padding:18px; background:var(--lime); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); }
.article-body .article-chart { margin:2em 0; }
.article-sidebar { position:sticky; top:20px; display:grid; gap:16px; }
.sidebar-box { background:white; border:var(--border); box-shadow:var(--shadow-sm); padding:15px; }
.sidebar-box h2, .sidebar-box h3 { margin:0 0 10px; font:900 1rem/1.15 "JetBrains Mono",monospace; text-transform:uppercase; }
.toc { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.toc a { font:800 11px/1.35 "JetBrains Mono",monospace; text-decoration:none; }
.toc a:hover { text-decoration:underline; }
.disclosure { background:#fee2e2; border:3px solid var(--ink); padding:14px; font-size:.9rem; }
.faq-list { display:grid; gap:14px; }
.faq-item { background:white; border:var(--border); box-shadow:var(--shadow-sm); }
.faq-question { width:100%; display:flex; justify-content:space-between; gap:14px; text-align:left; background:transparent; border:0; padding:16px; font:900 1rem/1.25 "JetBrains Mono",monospace; text-transform:uppercase; }
.faq-answer { padding:0 16px 17px; }
.faq-item[data-open="false"] .faq-answer { display:none; }
.faq-plus { flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; background:var(--cyan); border:2px solid var(--ink); }
.breadcrumbs { padding:13px 0 0; font:800 10px/1.4 "JetBrains Mono",monospace; text-transform:uppercase; }
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; }
.breadcrumbs li:not(:last-child)::after { content:"/"; margin-left:7px; }
.contact-email { display:inline-block; font:900 clamp(1.1rem,4vw,3.3rem)/1.1 "JetBrains Mono",monospace; word-break:break-word; background:white; border:4px solid var(--ink); box-shadow:10px 10px 0 var(--ink); padding:18px; text-decoration:none; }
.contact-email:hover { background:var(--lime); text-decoration:none; }
.site-footer { background:var(--ink); color:white; border-top:4px solid var(--ink); }
.footer-inner { padding:54px 0 26px; }
.footer-grid { display:grid; grid-template-columns:1.25fr repeat(3,1fr); gap:28px; }
.footer-brand { display:inline-block; background:var(--yellow); color:var(--ink); border:3px solid white; box-shadow:6px 6px 0 var(--pink); padding:10px 12px; font:900 1.45rem/1 "JetBrains Mono",monospace; text-decoration:none; }
.footer-heading { margin:0 0 11px; color:var(--cyan); font:900 11px/1 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.footer-links a { font-size:.92rem; text-decoration:none; color:#f4f4f5; }
.footer-links a:hover { color:var(--yellow); text-decoration:underline; }
.keyword-cloud { display:flex; flex-wrap:wrap; gap:7px; margin-top:30px; padding-top:24px; border-top:1px solid #3f3f46; }
.keyword-cloud a { padding:5px 8px; border:1px solid #71717a; color:#d4d4d8; text-decoration:none; font:700 9px/1 "JetBrains Mono",monospace; text-transform:uppercase; }
.keyword-cloud a:hover { color:var(--ink); background:var(--lime); border-color:var(--lime); }
.footer-bottom { display:flex; justify-content:space-between; gap:18px; padding-top:26px; margin-top:26px; border-top:1px solid #3f3f46; color:#a1a1aa; font:700 10px/1.5 "JetBrains Mono",monospace; text-transform:uppercase; }
.reveal { opacity:0; transform:translateY(24px); }
.reveal.is-visible { opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease; }
.no-results { display:none; padding:30px; text-align:center; font:900 14px/1.4 "JetBrains Mono",monospace; text-transform:uppercase; }
.share-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.share-row a { display:inline-block; padding:7px 9px; background:white; border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink); font:900 10px/1 "JetBrains Mono",monospace; text-decoration:none; text-transform:uppercase; }
.prose-panel { background:white; border:var(--border); box-shadow:var(--shadow); padding:clamp(20px,4vw,44px); }
.prose-panel h2 { margin:1.7em 0 .55em; font:900 clamp(1.6rem,3vw,2.5rem)/1 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:-.04em; }
.prose-panel h2:first-child { margin-top:0; }
.prose-panel h3 { margin:1.4em 0 .4em; font:900 1.25rem/1.1 "JetBrains Mono",monospace; text-transform:uppercase; }
.prose-panel p { margin:0 0 1.2em; font-size:1.05rem; }
.prose-panel ul { margin:0 0 1.4em 1.1em; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat-tile { background:white; border:var(--border); box-shadow:var(--shadow-sm); padding:15px; }
.stat-tile strong { display:block; font:900 clamp(1.5rem,3vw,2.8rem)/1 "JetBrains Mono",monospace; }
.stat-tile span { display:block; margin-top:7px; font:800 10px/1.3 "JetBrains Mono",monospace; text-transform:uppercase; }
.callout { padding:18px; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--cyan); }
.callout strong { font-family:"JetBrains Mono",monospace; text-transform:uppercase; }
@media (max-width: 1100px) {
  .nav-links { display:none; position:absolute; left:16px; right:16px; top:76px; z-index:60; background:white; border:var(--border); box-shadow:var(--shadow); padding:12px; justify-content:flex-start; }
  .nav-links.open { display:flex; }
  .menu-toggle { display:inline-flex; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-visual { min-height:430px; }
  .card-grid-4 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .article-shell { grid-template-columns:1fr; }
  .article-sidebar { position:static; grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 780px) {
  .container-shell { width:min(100% - 22px, 1240px); }
  .status-group.secondary { display:none; }
  .brand { font-size:1.08rem; padding:9px 10px; }
  .page-hero { padding:50px 0 40px; }
  .hero-title { font-size:clamp(2.8rem,14vw,4.5rem); }
  .hero-copy { font-size:1rem; }
  .section { padding:50px 0; }
  .card-grid, .card-grid-4, .split-grid, .stat-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .post-card { grid-template-columns:110px 1fr; }
  .post-card img { width:110px; }
  .metric-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
  .article-sidebar { grid-template-columns:1fr; }
  .article-body { padding:20px; }
  .contact-email { box-shadow:6px 6px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
}
@media print {
  .site-header, .site-footer, .article-sidebar, .hero-actions, .share-row { display:none !important; }
  body { background:white; }
  .article-body, .prose-panel, .data-panel { box-shadow:none; border:1px solid #000; }
}