: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; --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; --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; }
    .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; } .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; margin-bottom:1rem; } .article-meta { font-family:var(--font-ui); font-size:.78rem; color:var(--text-muted); display:flex; gap:10px; flex-wrap:wrap; } .article-body { padding:2.5rem 0 4rem; } .article-body p { font-size:1.05rem; line-height:1.9; margin-bottom:1.6rem; } .article-body h2 { font-family:var(--font-display); font-size:1.35rem; font-weight:700; letter-spacing:-.01em; 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 { line-height:1.65; } .share-section,.citations-section,.whos-writing { border-top:1px solid var(--border); } .share-section { 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,.bio-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); font-family:var(--font-ui); } .share-btn:hover { 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 { padding:2rem 0 2.5rem; } .citations-title { font-family:var(--font-display); font-size:1rem; margin-bottom:1rem; } .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; } .whos-writing { 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; } .whos-text h3 { font-family:var(--font-display); font-size:1rem; margin-bottom:.25rem; } .whos-text p { font-size:.83rem; color:var(--text-muted); line-height:1.6; max-width:460px; } .bio-btn { background:var(--blue); color:#fff; border:0; padding:10px 22px; } 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); } .hamburger { display:none; } .mobile-nav { display:none; } @media(max-width:768px){.nav-links{display:none}footer{flex-direction:column;gap:8px}.article-hero{height:220px}}