:root {
  --bg:#050816;
  --panel:#0c1228;
  --panel-2:#080d1e;
  --border:rgba(255,255,255,.1);
  --text:#94A3B8;
  --text-bright:#fff;
  --mid:#CBD5E1;
  --blue:#2563EB;
  --cyan:#06B6D4;
  --green:#10B981;
  --font-serif:'DM Serif Display',Georgia,serif;
  --font-sans:'DM Sans',system-ui,sans-serif;
  --font-mono:'DM Mono',monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.65}
.blog-container{width:100%;max-width:1160px;margin:0 auto;padding:0 1.5rem}
.blog-hero{padding:8.5rem 0 3rem;background:var(--panel-2);border-bottom:1px solid var(--border)}
.blog-eyebrow{margin:0 0 .65rem;color:var(--cyan);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.blog-hero h1{max-width:920px;margin:0;color:#fff;font-family:var(--font-serif);font-size:clamp(2.4rem,6vw,5.5rem);line-height:.98;font-weight:400}
.blog-sub{max-width:720px;margin:1.15rem 0 0;color:var(--mid);font-size:1.05rem}
.blog-status{display:inline-flex;margin-top:1rem;border:1px solid var(--border);border-radius:999px;padding:.25rem .7rem;color:#fbbf24;background:rgba(245,158,11,.12);font-size:.78rem}
.blog-graph-section{padding:2rem 0;background:#050816}
.blog-graph-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.blog-graph-head h2{margin:0;color:#fff;font-size:1.35rem}
.blog-link-btn{border:1px solid var(--border);border-radius:8px;padding:.7rem .9rem;color:#fff;text-decoration:none;background:rgba(255,255,255,.04)}
.blog-graph-wrap{position:relative;height:min(68vh,620px);min-height:430px;border:1px solid var(--border);background:#070b18;overflow:hidden}
#blogGraphCanvas{width:100%;height:100%;display:block}
.blog-graph-tooltip{position:absolute;pointer-events:none;display:none;background:rgba(5,8,22,.94);border:1px solid var(--border);border-radius:8px;padding:.55rem .7rem;color:#fff;font-size:.82rem}
.blog-body-section{padding:3rem 0 4rem;background:var(--bg)}
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2rem;align-items:start}
.blog-copy{color:var(--mid);font-size:1.04rem}
.blog-copy p{margin:0 0 1rem}
.blog-summary{border:1px solid var(--border);background:var(--panel);border-radius:8px;padding:1.2rem;position:sticky;top:84px}
.blog-summary h3{margin:0 0 1rem;color:#fff;font-size:1rem}
.blog-stat{border-bottom:1px solid var(--border);padding:.85rem 0}
.blog-stat span{display:block;color:#fff;font-size:2rem;font-weight:700;line-height:1}
.blog-stat p{margin:.2rem 0 0;color:var(--text);font-size:.86rem}
.blog-relation-list{margin-top:1rem;display:grid;gap:.55rem}
.blog-relation-list div{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:8px;padding:.55rem .7rem}
.blog-relation-list span{color:var(--mid)}
.blog-relation-list strong{color:#fff}
.blog-list-section{padding:3rem 0 4rem}
.blog-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.blog-card{display:block;border:1px solid var(--border);background:var(--panel);border-radius:8px;padding:1.2rem;color:inherit;text-decoration:none;min-height:220px}
.blog-card:hover{border-color:rgba(6,182,212,.35);background:#0e1530}
.blog-card__meta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.blog-card h2{margin:.7rem 0;color:#fff;line-height:1.15}
.blog-card p{margin:0;color:var(--text)}
@media (max-width:900px){
  .blog-layout,.blog-list{grid-template-columns:1fr}
  .blog-graph-head{align-items:start;flex-direction:column}
  .blog-graph-wrap{height:520px;min-height:360px}
  .blog-summary{position:static}
}

/* ── Graph canvas ── */
#graphCanvas { width:100%; height:100%; display:block; cursor:grab; }

/* ── Zoom controls ── */
.graph-zoom { position:absolute; bottom:1rem; right:1rem; display:flex; align-items:center; gap:.35rem; z-index:10; }
.graph-zoom button { border:1px solid rgba(255,255,255,.15); background:rgba(5,8,22,.85); color:#fff; border-radius:6px; padding:.3rem .65rem; font-size:.9rem; cursor:pointer; }
.graph-zoom button:hover { background:rgba(255,255,255,.1); }
#scaleLabel { color:#94A3B8; font-size:.75rem; min-width:38px; text-align:center; }

/* ── Desktop detail panel ── */
.detail-panel { position:absolute; top:1rem; right:1rem; width:260px; background:#0c1228; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:1.1rem; display:none; z-index:20; }
.detail-panel.open { display:block; }
.dp-close { position:absolute; top:.6rem; right:.7rem; background:none; border:none; color:#94A3B8; font-size:1rem; cursor:pointer; }
.dp-top { display:flex; gap:.75rem; align-items:center; margin-bottom:.9rem; }
.dp-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; flex-shrink:0; }
.dp-badge { font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:#06B6D4; font-family:var(--font-mono); }
.dp-name { margin:.2rem 0 0; color:#fff; font-size:.95rem; }
.dp-sub { margin:.1rem 0 0; color:#64748B; font-size:.78rem; }
.dp-meta { border-top:1px solid rgba(255,255,255,.07); padding-top:.7rem; margin-bottom:.7rem; display:grid; gap:.4rem; }
.dp-meta-row { display:flex; justify-content:space-between; font-size:.8rem; }
.dp-meta-row span { color:#64748B; }
.dp-meta-row strong { color:#fff; }
.dp-conn-list { margin-bottom:.8rem; display:grid; gap:.35rem; max-height:120px; overflow-y:auto; }
.dp-conn-item { display:flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.07); border-radius:6px; padding:.4rem .55rem; cursor:pointer; font-size:.8rem; color:#CBD5E1; }
.dp-conn-item:hover { background:rgba(255,255,255,.05); }
.dp-conn-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dp-conn-arrow { margin-left:auto; color:#475569; }
.dp-btn { display:block; text-align:center; border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:.55rem; color:#fff; text-decoration:none; font-size:.82rem; background:rgba(255,255,255,.04); }
.dp-btn:hover { background:rgba(255,255,255,.09); }

/* ── Mobile sheet ── */
.sheet-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; }
.sheet { position:fixed; bottom:0; left:0; right:0; background:#0c1228; border-top:1px solid rgba(255,255,255,.12); border-radius:16px 16px 0 0; padding:1.2rem 1.2rem 2rem; z-index:50; transform:translateY(100%); transition:transform .32s ease; }
.sheet.open { transform:translateY(0); }
.sheet.open ~ .sheet-backdrop, .sheet-backdrop:has(~ .sheet.open) { display:block; }
.sheet-backdrop.open { display:block; }
.sheet-close { position:absolute; top:.7rem; right:.9rem; background:none; border:none; color:#94A3B8; font-size:1.1rem; cursor:pointer; }
.sheet-top { display:flex; gap:.75rem; align-items:center; margin-bottom:.9rem; }
.sheet-avatar { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; flex-shrink:0; }
.sheet-badge { font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:#06B6D4; font-family:var(--font-mono); }
.sheet-name { margin:.2rem 0 0; color:#fff; font-size:1rem; }
.sheet-sub { margin:.1rem 0 0; color:#64748B; font-size:.8rem; }
.sheet-meta { border-top:1px solid rgba(255,255,255,.07); padding-top:.7rem; margin-bottom:.9rem; display:grid; gap:.4rem; }
.sheet-meta-row { display:flex; justify-content:space-between; font-size:.82rem; }
.sheet-meta-row span { color:#64748B; }
.sheet-meta-row strong { color:#fff; }
.sheet-btn { display:block; text-align:center; border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:.6rem; color:#fff; text-decoration:none; font-size:.84rem; background:rgba(255,255,255,.04); }
.sheet-btn:hover { background:rgba(255,255,255,.09); }

/* ── Also fix backdrop open state ── */
#sheetBackdrop.open { display:block; }