/* Tokens: same as the v5 article template */
  :root { color-scheme:light; --bg:#f4f7fc; --surface:#ffffff; --soft:#eaf0f8; --text:#334155; --heading:#14243b; --muted:#52647c; --border:#dce4ef; --accent:#175cd3; --tint:#eaf2ff; --mono:"JetBrains Mono",monospace; --sans:"Inter",system-ui,sans-serif; }
  :root[data-theme="dark"] { color-scheme:dark; --bg:#0a1628; --surface:#131f35; --soft:#1b2b43; --text:#d5deec; --heading:#fefefe; --muted:#a5b4cb; --border:#293a53; --accent:#4ea1ff; --tint:#142e50; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:84px; }
  body { margin:0; background:var(--bg); color:var(--text); }
  .pic-home { font:16px/1.7 var(--sans); -webkit-font-smoothing:antialiased; }
  .pic-home a { color:inherit; text-decoration:none; }
  .pic-home button,.pic-home input { font:inherit; }
  .pic-home :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
  .pic-home h1,.pic-home h2,.pic-home h3 { color:var(--heading); line-height:1.25; margin:0; }
  .skip-link { position:fixed; left:20px; top:-100px; z-index:100; padding:10px 20px; background:var(--surface); }
  .skip-link:focus { top:16px; }
  .wrap { max-width:1240px; margin:0 auto; padding:0 40px; }
  .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  /* Shared bits */
  .kicker { display:block; font:500 11px/1.4 var(--mono); text-transform:uppercase; letter-spacing:1px; color:var(--accent); margin-bottom:8px; }
  .meta { font-size:13px; color:var(--muted); }
  .meta .chip { font:500 12px var(--mono); color:var(--heading); }
  .title-link { background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .25s; }
  a:hover .title-link, .title-link:hover { background-size:100% 1px; }
  .thumb { display:block; overflow:hidden; background:var(--soft); border:1px solid var(--border); }
  .thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
  a:hover > .thumb img, a:hover .thumb img { transform:scale(1.03); }

  /* Header */
  .site-header { position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--border); transition:box-shadow .2s; }
  .site-header.scrolled { box-shadow:0 4px 16px -8px rgba(20,36,59,.25); }
  .header-inner { display:flex; align-items:center; gap:32px; height:68px; }
  .brand { font-size:20px; font-weight:750; letter-spacing:-.7px; color:var(--heading)!important; white-space:nowrap; }
  .brand span { color:var(--accent); font-weight:400; padding:0 3px; }
  .main-nav { display:flex; gap:24px; }
  .main-nav a { font-size:14px; font-weight:500; color:var(--muted)!important; }
  .main-nav a:hover { color:var(--heading)!important; }
  .header-search { margin-left:auto; display:flex; align-items:center; border:1px solid var(--border); background:var(--bg); height:38px; width:260px; }
  .header-search:focus-within { border-color:var(--accent); }
  .header-search svg { width:16px; height:16px; margin:0 8px 0 12px; color:var(--muted); flex-shrink:0; }
  .header-search input { border:0; background:transparent; color:var(--heading); font-size:14px; width:100%; outline:none; padding-right:10px; }
  .header-search input::placeholder { color:var(--muted); }
  .theme-btn { width:38px; height:38px; border:1px solid var(--border); background:var(--surface); color:var(--heading); cursor:pointer; display:grid; place-items:center; flex-shrink:0; }
  .theme-btn:hover { border-color:var(--heading); }
  .theme-btn svg { width:17px; height:17px; }
  .theme-btn .moon { display:none; }
  [data-theme="dark"] .theme-btn .sun { display:none; }
  [data-theme="dark"] .theme-btn .moon { display:block; }

  /* Topic bar */
  .topic-bar { background:var(--surface); border-bottom:1px solid var(--border); }
  .topic-bar ul { list-style:none; margin:0; padding:0; display:flex; gap:28px; overflow-x:auto; scrollbar-width:none; }
  .topic-bar ul::-webkit-scrollbar { display:none; }
  .topic-bar a { display:block; padding:12px 0; font-size:13px; font-weight:500; color:var(--muted)!important; white-space:nowrap; border-bottom:2px solid transparent; }
  .topic-bar a:hover { color:var(--heading)!important; border-bottom-color:var(--accent); }

  /* Intro */
  .intro { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; padding:44px 0 28px; }
  .intro h1 { font-size:34px; font-weight:750; letter-spacing:-1.2px; max-width:720px; }
  .intro p { margin:10px 0 0; color:var(--muted); font-size:16px; max-width:640px; }

  /* Section heading: newspaper rule */
  .sec { margin-top:64px; }
  .sec-head { display:flex; justify-content:space-between; align-items:baseline; gap:20px; border-top:2px solid var(--heading); padding-top:14px; margin-bottom:26px; }
  .sec-head h2 { font-size:20px; font-weight:700; letter-spacing:-.3px; }
  .sec-head a { font-size:13px; font-weight:600; color:var(--accent)!important; white-space:nowrap; }
  .sec-head a:hover { text-decoration:underline; }

  /* Lead: featured + latest list */
  .lead { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:44px; border-top:2px solid var(--heading); padding-top:26px; }
  .featured .thumb { aspect-ratio:16/10; }
  .featured-text { padding-top:20px; }
  .featured h2 { font-size:30px; font-weight:750; letter-spacing:-.9px; margin-bottom:12px; }
  .featured p { margin:0 0 14px; color:var(--text); font-size:16px; max-width:680px; }
  .latest h2 { font:600 12px var(--mono); text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:6px; }
  .latest ol { list-style:none; margin:0; padding:0; }
  .latest li { border-bottom:1px solid var(--border); }
  .latest li:last-child { border-bottom:0; }
  .latest a { display:grid; grid-template-columns:92px minmax(0,1fr); gap:16px; padding:16px 0; align-items:start; }
  .latest .thumb { aspect-ratio:1; }
  .latest h3 { font-size:15px; font-weight:600; line-height:1.4; margin-bottom:6px; }

  /* Card grid */
  .grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px 28px; }
  .card .thumb { aspect-ratio:4/3; margin-bottom:14px; }
  .card h3 { font-size:16px; font-weight:650; line-height:1.4; margin-bottom:8px; letter-spacing:-.1px; }

  /* Archive band */
  .band { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:72px; padding:8px 0 56px; }
  .band .sec { margin-top:48px; }
  .band .grid { grid-template-columns:repeat(4,minmax(0,1fr)); }

  /* Topics list */
  .topics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:44px; }
  .topics a { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--border); }
  .topics svg { width:22px; height:22px; color:var(--accent); margin-top:2px; }
  .topics h3 { font-size:15px; font-weight:650; }
  .topics p { margin:2px 0 0; font-size:13px; color:var(--muted); line-height:1.5; }
  .topics .count { font:500 12px var(--mono); color:var(--muted); padding-top:2px; }
  .topics a:hover h3 { color:var(--accent); }

  /* Getting started */
  .levels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; }
  .levels h3 { font:600 12px var(--mono); text-transform:uppercase; letter-spacing:1px; color:var(--muted); padding-bottom:10px; border-bottom:1px solid var(--border); }
  .levels ol { list-style:none; margin:0; padding:0; counter-reset:n; }
  .levels li { counter-increment:n; border-bottom:1px solid var(--border); }
  .levels li a { display:grid; grid-template-columns:30px minmax(0,1fr); padding:13px 0; font-size:15px; font-weight:500; color:var(--heading)!important; line-height:1.45; }
  .levels li a::before { content:counter(n); font:500 13px/1.7 var(--mono); color:var(--accent); }
  .levels li a:hover { color:var(--accent)!important; }

  /* Two-column bottom: chips + software */
  .split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; }
  .chip-list { display:flex; flex-wrap:wrap; gap:10px; }
  .chip-list a { font:500 13px var(--mono); padding:7px 12px; border:1px solid var(--border); background:var(--surface); color:var(--heading)!important; }
  .chip-list a:hover { border-color:var(--accent); color:var(--accent)!important; }
  .soft-list { list-style:none; margin:0; padding:0; }
  .soft-list li { border-bottom:1px solid var(--border); }
  .soft-list li:first-child { border-top:1px solid var(--border); }
  .soft-list a { display:flex; justify-content:space-between; gap:16px; padding:13px 0; font-size:15px; font-weight:500; color:var(--heading)!important; }
  .soft-list a span { font-size:13px; font-weight:400; color:var(--muted); }
  .soft-list a:hover { color:var(--accent)!important; }

  /* Footer */
  .site-footer { margin-top:88px; background:var(--surface); border-top:1px solid var(--border); }
  .footer-grid { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; padding:48px 0 36px; }
  .footer-grid p { font-size:14px; color:var(--muted); margin:12px 0 0; max-width:340px; }
  .footer-grid h2 { font:600 11px var(--mono); text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); margin-bottom:12px; }
  .footer-grid ul { list-style:none; margin:0; padding:0; }
  .footer-grid li { margin:7px 0; font-size:14px; }
  .footer-grid li a:hover { color:var(--accent); }
  .footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--border); padding:20px 0; font:12px var(--mono); color:var(--muted); }

  /* Responsive */
  @media(max-width:1100px) { .grid,.band .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .grid .card:nth-child(n+7) { display:none; } .band .grid .card:nth-child(4) { display:none; } .topics { grid-template-columns:repeat(2,minmax(0,1fr)); } .header-search { width:200px; } .main-nav { gap:18px; } }
  @media(max-width:900px) { .lead { grid-template-columns:1fr; gap:24px; } .levels { grid-template-columns:1fr; gap:32px; } .split { grid-template-columns:1fr; gap:48px; } .footer-grid { grid-template-columns:1fr 1fr; } .main-nav { display:none; } .header-search { width:auto; flex:1; max-width:340px; } .intro { display:block; } }
  @media(max-width:700px) { .wrap { padding:0 16px; } .grid,.band .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 16px; } .grid .card:nth-child(n+7) { display:block; } .band .grid .card:nth-child(4) { display:block; } .topics { grid-template-columns:1fr; } .intro h1 { font-size:27px; letter-spacing:-.8px; } .featured h2 { font-size:23px; } .card h3 { font-size:14.5px; } .header-inner { gap:12px; height:60px; } .brand { font-size:17px; } .footer-bottom { flex-direction:column; } }
  @media(max-width:460px) { .header-search { display:none; } .theme-btn { margin-left:auto; } .footer-grid { grid-template-columns:1fr; } .latest a { grid-template-columns:76px minmax(0,1fr); } }
  @media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } html { scroll-behavior:auto; } }