:root { --bg:#f8fafc; --bg-surface:#f1f5f9; --bg-card:#fff; --text:#0f172a; --text-muted:#64748b; --border:#e2e8f0; --blue:#0f52a0; --blue-mid:#1d6fd4; --blue-pale:#dbeafe; --purple:#7c3aed; --purple-mid:#8b5cf6; --purple-pale:#ede9fe; --accent:#38bdf8; --black:#080c10; --nav-bg:#f8fafc; }
    [data-theme="dark"] { --bg:#18181b; --bg-surface:#222226; --bg-card:#27272a; --text:#f4f4f5; --text-muted:#a1a1aa; --border:#3f3f46; --blue:#60a5fa; --blue-mid:#93c5fd; --blue-pale:#1e3a5f; --purple:#a78bfa; --purple-mid:#c4b5fd; --purple-pale:#2e1a4a; --accent:#38bdf8; --black:#09090b; --nav-bg:#18181b; }
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:var(--font-ui); background:var(--bg); color:var(--text); line-height:1.6; transition:background .25s,color .25s; }
    .ticker-bar { background:var(--black); padding:9px 0; overflow:hidden; white-space:nowrap; }
    .ticker-inner { display:inline-block; animation:tick 35s linear infinite; font-size:.72rem; font-family:var(--font-ui); color:rgba(255,255,255,.5); letter-spacing:.05em; }
    .ticker-inner span { margin:0 2rem; color:var(--accent); }
    @keyframes tick { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
    nav { position:sticky; top:0; z-index:100; background:var(--nav-bg); border-bottom:1px solid var(--border); padding:0 2.5rem; height:60px; display:flex; align-items:center; justify-content:space-between; transition:background .25s; }
    .nav-logo { --font-wordmark:'Source Serif 4',serif; font-family:var(--font-wordmark); font-size:1.15rem; font-weight:800; color:var(--text); text-decoration:none; }
    .nav-logo span { color:var(--blue-mid); }
    .nav-right { display:flex; align-items:center; gap:2rem; }
    .nav-links { display:flex; gap:1.35rem; list-style:none; align-items:center; }
    .nav-links a { text-decoration:none; font-size:.82rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); transition:color .2s; }
    .nav-links a:hover, .nav-links a.active { color:var(--blue-mid); }
    .nav-cta { background:var(--blue) !important; color:#fff !important; padding:7px 16px !important; border-radius:6px; }
    .theme-toggle { background:var(--bg-surface); border:1px solid var(--border); border-radius:20px; padding:5px 10px; cursor:pointer; display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--text-muted); font-family:var(--font-ui); white-space:nowrap; transition:background .2s; }
    .article-hero { width:100%; height:420px; background-size:cover; background-position:center; background-color:#0c1a3a; position:relative; overflow:hidden; }
    .hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.55)); }
    .article-wrap { max-width:760px; margin:0 auto; padding:0 2rem; }
    .article-header { padding:2.5rem 0 2rem; border-bottom:1px solid var(--border); }
    .back-link { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--text-muted); text-decoration:none; margin-bottom:1.5rem; transition:color .2s; }
    .back-link:hover { color:var(--blue-mid); }
    .article-tag-ai, .article-tag-tech { font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.75rem; }
    .article-tag-ai { color:var(--blue-mid); }
    .article-tag-tech { color:var(--purple-mid); }
    .article-title { font-family:var(--font-display); font-size:clamp(1.7rem,4vw,2.6rem); font-weight:800; line-height:1.12; letter-spacing:-.03em; color:var(--text); margin-bottom:1rem; }
    .article-meta { font-family:var(--font-ui); font-size:.78rem; color:var(--text-muted); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .article-body { padding:2.5rem 0 4rem; }
    .article-body p { font-size:1.05rem; line-height:1.9; color:var(--text); margin-bottom:1.6rem; }
    .article-body h2 { font-family:var(--font-display); font-size:1.35rem; font-weight:700; letter-spacing:-.01em; color:var(--text); margin:2.5rem 0 1rem; }
    .quick-takeaways { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:1.25rem 1.4rem; margin:0 0 2rem; }
    .quick-takeaways h2 { margin:0 0 .75rem; font-size:1rem; }
    .quick-takeaways ul { padding-left:1.2rem; display:flex; flex-direction:column; gap:.55rem; }
    .quick-takeaways li { color:var(--text); line-height:1.65; }
    .article-body a { color:var(--blue-mid); text-decoration:none; }
    .article-body a:hover { text-decoration:underline; }
    .share-section { border-top:1px solid var(--border); padding:1.75rem 0 2rem; }
    .share-label { font-family:var(--font-ui); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.85rem; }
    .share-buttons { display:flex; gap:10px; flex-wrap:wrap; }
    .share-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 18px; border-radius:6px; font-size:.82rem; font-weight:500; text-decoration:none; cursor:pointer; border:1px solid var(--border); background:var(--bg-card); color:var(--text); transition:background .18s,border-color .18s; font-family:var(--font-ui); }
    .share-btn:hover { background:var(--bg-surface); border-color:var(--blue-mid); color:var(--blue-mid); }
    #copy-confirm { font-size:.75rem; color:var(--blue-mid); display:none; margin-left:4px; }
    .citations-section { border-top:1px solid var(--border); padding:2rem 0 2.5rem; }
    .citations-title { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--text); margin-bottom:1rem; letter-spacing:-.01em; }
    .citations-list { padding-left:1.4rem; display:flex; flex-direction:column; gap:.6rem; }
    .citations-list li { font-size:.82rem; color:var(--text-muted); line-height:1.6; }
    .citations-list a { color:var(--blue-mid); text-decoration:none; }
    .citations-list a:hover { text-decoration:underline; }
    .whos-writing { border-top:1px solid var(--border); padding:2.5rem 0 3rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
    .whos-left { display:flex; align-items:center; gap:1.25rem; }
    .whos-avatar { width:52px; height:52px; border-radius:50%; background:var(--blue-pale); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
    .whos-text h3 { font-family:var(--font-display); font-size:1rem; font-weight:700; margin-bottom:.25rem; color:var(--text); }
    .whos-text p { font-size:.83rem; color:var(--text-muted); line-height:1.6; max-width:460px; }
    .bio-btn { display:inline-flex; align-items:center; gap:8px; background:var(--blue); color:#fff; text-decoration:none; padding:10px 22px; border-radius:6px; font-size:.85rem; font-weight:500; white-space:nowrap; transition:opacity .2s; flex-shrink:0; }
    footer { background:var(--black); border-top:1px solid rgba(255,255,255,.07); padding:1.75rem 2.5rem; display:flex; align-items:center; justify-content:space-between; }
    footer p { font-size:.75rem; color:rgba(255,255,255,.3); font-family:var(--font-ui); }
    footer a { color:rgba(255,255,255,.4); text-decoration:none; }
    #back-top { position:fixed; bottom:28px; right:28px; width:42px; height:42px; border-radius:50%; background:var(--blue); color:#fff; border:none; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; z-index:900; box-shadow:0 4px 14px rgba(0,0,0,.18); }
    #back-top.visible { opacity:1; pointer-events:auto; }
    @media (max-width:768px) { .nav-links{display:none;} .whos-writing{flex-direction:column;align-items:flex-start;} footer{flex-direction:column;gap:8px;text-align:center;} .article-hero{height:220px;} }
