/* ---------- Self-hosted type: one family, Newsreader (OFL). A classic news serif. ---------- */
  @font-face{font-family:'Newsreader';src:url('assets/fonts/news-400.woff2') format('woff2');
    font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'Newsreader';src:url('assets/fonts/news-400i.woff2') format('woff2');
    font-weight:400;font-style:italic;font-display:swap}
  @font-face{font-family:'Newsreader';src:url('assets/fonts/news-500.woff2') format('woff2');
    font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:'Newsreader';src:url('assets/fonts/news-600.woff2') format('woff2');
    font-weight:600;font-style:normal;font-display:swap}

  :root{
    --bg:#faf9f6; --panel:#ffffff; --panel-2:#f6f4ef; --ink:#191917; --muted:#6a6760;
    --line:#e5e1d9; --line-strong:#d3cec3;
    --accent:#12513a; --accent-soft:#e9f1ec;
    --formal:#1a6b4a; --independent:#2d6ba3; --peer:#5a4a9e;
    --author:#8a6d1f; --claimed:#8a6d1f; --disputed:#a8501f; --known:#8f2f2f; --refuted:#8f2f2f;
    --serif:'Newsreader',Georgia,'Iowan Old Style',Palatino,serif;
    --shadow:0 1px 2px rgba(30,28,24,.04),0 8px 24px rgba(30,28,24,.06);
    --shadow-card:0 1px 1px rgba(30,28,24,.04),0 2px 6px rgba(30,28,24,.05),
      0 12px 28px rgba(30,28,24,.07),0 28px 60px rgba(30,28,24,.05);
    --edge-hi:rgba(255,255,255,.9);
    --ease:cubic-bezier(.22,.7,.24,1);
  }
  /* Dark palette. Applies for system-dark (no manual choice) and for an explicit dark choice.
     Two blocks because a media query and an attribute selector cannot share one rule; keep in sync. */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme]){ --bg:#111310; --panel:#181a15; --panel-2:#1e211a; --ink:#ecebe0; --muted:#9c998d;
      --line:#2a2d24; --line-strong:#3a3e32;
      --accent:#7ec6a3; --accent-soft:#1a251f;
      --formal:#4fae86; --independent:#5c9dd6; --peer:#9b8ae0;
      --author:#c9a94e; --claimed:#c9a94e; --disputed:#d47a45; --known:#d06666; --refuted:#d06666;
      --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
      --shadow-card:0 1px 1px rgba(0,0,0,.34),0 3px 8px rgba(0,0,0,.3),
      0 14px 32px rgba(0,0,0,.38),0 30px 64px rgba(0,0,0,.3);
      --edge-hi:rgba(255,255,255,.07);}
  }
  :root[data-theme="dark"]{ --bg:#111310; --panel:#181a15; --panel-2:#1e211a; --ink:#ecebe0; --muted:#9c998d;
    --line:#2a2d24; --line-strong:#3a3e32;
    --accent:#7ec6a3; --accent-soft:#1a251f;
    --formal:#4fae86; --independent:#5c9dd6; --peer:#9b8ae0;
    --author:#c9a94e; --claimed:#c9a94e; --disputed:#d47a45; --known:#d06666; --refuted:#d06666;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
    --shadow-card:0 1px 1px rgba(0,0,0,.34),0 3px 8px rgba(0,0,0,.3),
      0 14px 32px rgba(0,0,0,.38),0 30px 64px rgba(0,0,0,.3);
    --edge-hi:rgba(255,255,255,.07);}

  *{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{margin:0;background:var(--bg);color:var(--ink);
    font:17.5px/1.62 var(--serif);font-variant-numeric:oldstyle-nums;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-wrap:break-word;-webkit-tap-highlight-color:rgba(18,81,58,.14);position:relative;}
  /* Plotting-paper background: '+' coordinate marks, tinted with the theme line colour so it
     recolours in light/dark (including the manual toggle). Absolute (scrolls with the page)
     rather than fixed: fixed layers misrender in scrolled iframes and on mobile Safari. */
  body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-color:var(--line-strong);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M17 13v8M13 17h8' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M17 13v8M13 17h8' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
    -webkit-mask-size:34px 34px;mask-size:34px 34px;-webkit-mask-repeat:repeat;mask-repeat:repeat}
  main{scroll-margin-top:74px}
  .entry{scroll-margin-top:80px}
  #top,#sources,#about{scroll-margin-top:16px}
  ::selection{background:var(--accent);color:var(--bg)}
  a{color:var(--accent)}
  .wrap{max-width:1120px;margin:0 auto;padding-bottom:72px;
    padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right))}

  /* ---------- Accessibility ---------- */
  .skip{position:absolute;left:8px;top:-64px;z-index:100;background:var(--accent);color:var(--bg);
    padding:9px 15px;border-radius:11px;font-family:var(--serif);font-size:.82rem;text-decoration:none;
    transition:top .16s var(--ease)}
  .skip:focus{top:8px}
  a:focus-visible,button:focus-visible,summary:focus-visible,.labcard:focus-visible,
  input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
    outline:2.5px solid var(--accent);outline-offset:2px;border-radius:7px}
  .eyebrow-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
  .theme-seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:12px;overflow:hidden}
  .theme-seg .th{width:31px;height:26px;display:grid;place-items:center;background:transparent;border:0;
    border-right:1px solid var(--line);cursor:pointer;color:var(--muted);transition:color .15s,background .15s}
  .theme-seg .th:last-child{border-right:0}
  .theme-seg .th:hover{color:var(--ink)}
  .theme-seg .th[aria-pressed="true"]{background:var(--accent);color:var(--bg)}
  .theme-seg .th svg{width:15px;height:15px;display:block}
  /* Theme reveal via the View Transitions API: the incoming theme wipes down from the top. */
  ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
  ::view-transition-old(root){z-index:1}
  ::view-transition-new(root){z-index:9999}
  @media (prefers-contrast: more){
    :root{--muted:#565349;--line:#cdc7ba;--line-strong:#b6afa0}
    .pill{outline:1px solid rgba(0,0,0,.28)}
    .entry,.stat,.labcard,.controls input,.controls select,.qv-grid{border-color:var(--line-strong)}
  }
  @media (prefers-contrast: more) and (prefers-color-scheme: dark){
    :root:not([data-theme]){--muted:#b8b5a9;--line:#414436;--line-strong:#535747}
    :root:not([data-theme]) .pill{outline-color:rgba(255,255,255,.32)}
  }
  @media (prefers-contrast: more){
    :root[data-theme="dark"]{--muted:#b8b5a9;--line:#414436;--line-strong:#535747}
    :root[data-theme="dark"] .pill{outline-color:rgba(255,255,255,.32)}
  }

  /* ---------- Masthead ----------
     The accent bar is inset from the viewport edges and fully rounded, so its top
     edge matches the rounded-corner language of the cards and panels below rather
     than butting square into the browser corners. */
  .spectrum{position:fixed;top:8px;left:max(16px,env(safe-area-inset-left));
    right:max(16px,env(safe-area-inset-right));height:3px;z-index:60;border-radius:3px;
    background:linear-gradient(90deg,var(--formal),var(--independent),var(--peer),var(--independent),var(--formal));
    background-size:220% 100%;animation:spectrumShift 18s linear infinite}
  @keyframes spectrumShift{from{background-position:0% 0}to{background-position:220% 0}}

  /* ---------- Scroll-spy sitemap rail ----------
     A single cohesive element: short tick marks hung off a continuous vertical
     hairline, each growing into a labelled row on hover. The active tick is a
     solid accent bar, so the whole thing reads as one navigation control rather
     than as scattered dots. */
  .sitenav{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:50}
  .sitenav ol{list-style:none;margin:0;padding:0 26px 0 0;display:flex;flex-direction:column;
    align-items:flex-end;gap:4px;border-right:1px solid var(--line-strong)}
  /* each row is a fixed-width lane; the tick hangs at the right edge on the hairline,
     the label floats to its left without shifting the tick. */
  .sitenav a{position:relative;display:block;width:22px;height:24px;text-decoration:none}
  .sitenav-dot{position:absolute;top:50%;right:0;transform:translateY(-50%);
    width:14px;height:2px;border-radius:2px;background:var(--line-strong);
    transition:width .2s var(--ease),background .2s var(--ease)}
  .sitenav-label{position:absolute;top:50%;right:24px;transform:translate(6px,-50%);
    font-family:var(--serif);font-size:.66rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
    color:var(--muted);white-space:nowrap;opacity:0;pointer-events:none;
    transition:opacity .18s var(--ease),transform .18s var(--ease),color .2s}
  .sitenav a:hover .sitenav-label,.sitenav a:focus-visible .sitenav-label{opacity:1;transform:translate(0,-50%)}
  .sitenav a:hover .sitenav-dot,.sitenav a:focus-visible .sitenav-dot{width:22px;background:var(--ink)}
  .sitenav a:focus-visible{outline:none}
  .sitenav a:focus-visible .sitenav-dot{outline:2px solid var(--accent);outline-offset:3px}
  .sitenav a.active .sitenav-dot{width:22px;background:var(--accent)}
  .sitenav a.active .sitenav-label{color:var(--ink);opacity:1;transform:translate(0,-50%)}
  @media(max-width:1280px),(pointer:coarse){.sitenav{display:none}}

  /* The masthead is a raised surface, not a bare region: the plotting-paper background reads
     *behind* it rather than through it, so the type always sits on its own panel. Negative
     side margins let the panel bleed past the .wrap text column, keeping the optical left
     edge of the type aligned with the content below it while the card breathes outward. */
  header{padding:38px 40px 34px;margin:18px -24px 30px;position:relative;
    background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
    border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-card)}
  /* Hairline top highlight: catches the "edge" of the card the way paper stock does. */
  header:after{content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:20px 20px 0 0;
    background:linear-gradient(90deg,transparent,var(--edge-hi) 22%,var(--edge-hi) 78%,transparent);
    pointer-events:none}
  .eyebrow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    font-family:var(--serif);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--muted);padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
  .gh-icon{display:inline-grid;place-items:center;width:26px;height:26px;color:var(--muted);
    transition:color .2s var(--ease)}
  .gh-icon:hover,.gh-icon:focus-visible{color:var(--ink)}
  .gh-icon svg{display:block}
  .gh-link{display:inline-flex;align-items:center;gap:6px}
  .gh-link svg{flex:none}
  .eyebrow .brand{color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:9px}
  .mark{overflow:visible;transition:transform .55s var(--ease)}
  .brand:hover .mark{transform:rotate(90deg)}
  .mark .m1{stroke-dasharray:57;stroke-dashoffset:57;animation:draw 1s var(--ease) .15s forwards}
  .mark .m2{stroke-dasharray:29;stroke-dashoffset:29;animation:draw .8s var(--ease) .55s forwards}
  .mark .m3{opacity:0;transform-origin:center;transform-box:fill-box;
    animation:dotIn .45s var(--ease) 1.15s forwards,breathe 4.5s ease-in-out 2s infinite}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes dotIn{to{opacity:1}}
  @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
  .grad{background:linear-gradient(100deg,var(--ink) 0%,var(--formal) 30%,var(--independent) 55%,var(--peer) 80%,var(--ink) 100%);
    background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:gradShift 16s ease-in-out infinite}
  @keyframes gradShift{0%{background-position:0% 0}50%{background-position:100% 0}100%{background-position:0% 0}}
  .eyebrow .updated b{color:var(--ink);font-weight:600}
  .pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--formal);
    margin-right:7px;vertical-align:middle;box-shadow:0 0 0 0 var(--formal);animation:pulse 2.4s var(--ease) infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(26,107,74,.5)}70%{box-shadow:0 0 0 7px rgba(26,107,74,0)}100%{box-shadow:0 0 0 0 rgba(26,107,74,0)}}

  h1{font-size:clamp(1.9rem,8vw,3.35rem);margin:0 0 14px;letter-spacing:-.021em;font-weight:600;line-height:1.05;max-width:19ch}
  .lede{color:var(--muted);font-size:1.14rem;line-height:1.55;max-width:64ch;margin:0 0 26px}
  .lede strong{color:var(--ink);font-weight:600}

  .actions{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--serif)}
  .btn{display:inline-flex;align-items:center;gap:7px;padding:10px 17px;border-radius:11px;
    border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);text-decoration:none;
    font-size:.8rem;font-weight:500;letter-spacing:.01em;transition:transform .16s var(--ease),border-color .16s,background .16s,box-shadow .16s}
  .btn:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow)}
  .btn:active{transform:translateY(0)}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}
  .btn.primary:hover{filter:brightness(1.06)}
  .btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}

  /* ---------- Instrument stats ---------- */
  /* Discrete raised tiles: each stat is its own card so the numbers read as objects sitting on
     the masthead, rather than cells of one flat table. */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0 0}
  .stat{background:var(--panel);padding:19px 20px 17px;position:relative;overflow:hidden;
    border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
    transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
  .stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);border-color:var(--line-strong)}
  .stat:before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--accent);
    transform:scaleX(0);transform-origin:left;animation:barIn .7s var(--ease) .2s forwards}
  .stat b{display:block;font-family:var(--serif);font-size:2rem;font-weight:600;line-height:1;
    letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
  .stat span{display:block;margin-top:8px;font-family:var(--serif);font-size:.66rem;color:var(--muted);
    text-transform:uppercase;letter-spacing:.13em;line-height:1.4}
  @keyframes barIn{to{transform:scaleX(1)}}
  @media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}

  /* ---------- Controls (sticky toolbar) ---------- */
  .controls{position:sticky;top:0;z-index:20;display:flex;gap:9px;flex-wrap:wrap;
    margin:0 0 26px;padding:13px 0;font-family:var(--serif);
    background:var(--bg);border-bottom:1px solid var(--line)}
  .controls input,.controls select{padding:10px 13px;border:1px solid var(--line-strong);border-radius:11px;
    background:var(--panel);color:var(--ink);font:inherit;font-size:.82rem;transition:border-color .15s,box-shadow .15s}
  .controls input{flex:1;min-width:200px}
  .controls input::placeholder{color:var(--muted)}
  .controls input:focus,.controls select:focus{outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft)}
  .controls select{cursor:pointer}
  .count{margin-left:auto;align-self:center;font-family:var(--serif);font-size:.72rem;color:var(--muted);
    letter-spacing:.04em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}

  /* ---------- Visuals disclosure panel ---------- */
  /* ---------- Quick view charts ---------- */
  .qv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
  .qv-card{background:var(--panel);padding:18px 20px}
  .qv-title{font-family:var(--serif);font-size:.63rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
    color:var(--muted);margin:0 0 15px}
  .hbars{display:flex;flex-direction:column;gap:9px}
  .hbar{display:grid;grid-template-columns:122px 1fr 26px;align-items:center;gap:10px}
  .hbar-label{font-family:var(--serif);font-size:.7rem;color:var(--ink);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
  .hbar-label .sw{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
  .hbar-track{height:14px;background:var(--panel-2);border-radius:4px;overflow:hidden}
  .hbar-fill{display:block;height:100%;background:var(--accent);border-radius:4px;
    transform-origin:left;animation:growx .7s var(--ease) both}
  @keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .hbar-val{font-family:var(--serif);font-size:.72rem;color:var(--muted);text-align:right;font-variant-numeric:lining-nums tabular-nums}
  .vbars{display:flex;align-items:flex-end;gap:8px;height:136px}
  .vbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
  .vbar-fill{width:100%;max-width:34px;background:var(--accent);border-radius:4px 4px 0 0;
    transform-origin:bottom;animation:growy .7s var(--ease) both}
  @keyframes growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .vbar-val{font-family:var(--serif);font-size:.68rem;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;font-weight:600}
  .vbar-x{font-family:var(--serif);font-size:.6rem;color:var(--muted)}
  /* Scatter: years open vs notability, colored by autonomy. Spans both columns. */
  .qv-wide{grid-column:1 / -1}
  .sc-wrap{position:relative}
  .sc{width:100%;height:auto;display:block;overflow:visible}
  .sc-grid{stroke:var(--line);stroke-width:1}
  .sc-tick{fill:var(--muted);font-family:var(--serif);font-size:10px;font-variant-numeric:lining-nums tabular-nums}
  .sc-axis{fill:var(--muted);font-family:var(--serif);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
  .sc-dot{stroke:var(--panel);stroke-width:1.5;opacity:.9;cursor:pointer;transition:opacity .15s}
  .sc-dot:hover,.sc-dot:focus-visible{opacity:1;stroke:var(--ink);stroke-width:2;outline:none}
  .sc-dot:focus-visible{stroke:var(--accent)}
  /* Interactive tooltip: positioned by JS within .sc-wrap. */
  .sc-tip{position:absolute;z-index:5;pointer-events:none;max-width:260px;
    background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;
    box-shadow:var(--shadow);padding:9px 11px;display:flex;flex-direction:column;gap:3px}
  .sc-tip[hidden]{display:none}
  .sc-tip-t{font-family:var(--serif);font-size:.78rem;font-weight:600;line-height:1.3;color:var(--ink)}
  .sc-tip-r{display:inline-flex;align-items:center;gap:6px;font-family:var(--serif);font-size:.72rem;color:var(--ink)}
  .sc-tip-r .sw{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
  .sc-tip-m{font-family:var(--serif);font-size:.7rem;color:var(--muted);font-variant-numeric:lining-nums tabular-nums}
  .sc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
  .sc-key{display:inline-flex;align-items:center;gap:6px;font-family:var(--serif);font-size:.68rem;color:var(--muted)}
  .sc-key .sw{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
  .qv-empty,.qv-foot{font-family:var(--serif);color:var(--muted);margin:8px 0 0}
  .qv-empty{font-size:.8rem}
  .qv-foot{font-size:.66rem;letter-spacing:.02em}
  @media(max-width:640px){.qv-grid{grid-template-columns:1fr}.hbar{grid-template-columns:100px 1fr 24px}}
  @media(prefers-reduced-motion:reduce){.hbar-fill,.vbar-fill{animation:none}}

  /* ---------- Entry cards ---------- */
  .entry{display:grid;grid-template-columns:216px 1fr;gap:30px;
    background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--vc,var(--line-strong));
    border-radius:16px;padding:24px 28px;margin-bottom:16px;box-shadow:var(--shadow);
    transition:transform .18s var(--ease),border-color .18s,box-shadow .18s,background .18s}
  .entry:hover{transform:translateY(-2px);
    box-shadow:0 2px 4px rgba(30,28,24,.05),0 16px 40px rgba(30,28,24,.10);
    border-color:var(--vc,var(--line-strong));
    background:color-mix(in srgb,var(--vc,var(--line-strong)) 7%,var(--panel))}
  .entry[data-ver="formal"]{--vc:var(--formal)} .entry[data-ver="independent"]{--vc:var(--independent)}
  .entry[data-ver="peer-reviewed"]{--vc:var(--peer)} .entry[data-ver="author-verified"]{--vc:var(--author)}
  .entry[data-ver="claimed"]{--vc:var(--claimed)} .entry[data-ver="disputed"]{--vc:var(--disputed)}
  .entry[data-ver="known"]{--vc:var(--known)} .entry[data-ver="refuted"]{--vc:var(--refuted)}

  .rail{border-right:1px solid var(--line);padding-right:22px;display:flex;flex-direction:column;gap:13px}
  .lab{display:flex;align-items:center;gap:9px}
  .labchip{width:27px;height:27px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;
    background:var(--lc,#7c7a72);color:#fff;font-family:var(--serif);font-size:.72rem;font-weight:600;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 1px 2px rgba(0,0,0,.14)}
  .labchip.img{background:#fff;padding:4px;box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.1)}
  .labchip.img img{width:100%;height:100%;object-fit:contain;display:block}
  .lab-name{font-family:var(--serif);font-size:.82rem;font-weight:600;line-height:1.15;color:var(--ink)}
  .rdate{font-family:var(--serif);font-size:.8rem;font-weight:500;letter-spacing:.02em;
    font-variant-numeric:lining-nums tabular-nums;color:var(--muted)}
  .rpills{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
  .rmeta{margin:2px 0 0;display:flex;flex-direction:column;gap:10px}
  .rmeta div{display:flex;flex-direction:column;gap:2px}
  .rmeta dt{font-family:var(--serif);font-size:.6rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
  .rmeta dd{margin:0;font-family:var(--serif);font-size:.78rem;line-height:1.35;color:var(--ink)}

  .pill{display:inline-block;font-family:var(--serif);font-size:.66rem;letter-spacing:.04em;
    padding:5px 10px;border-radius:9px;border:1px solid var(--line);color:var(--muted);width:fit-content}
  .pill.v{color:#fff;border:none;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:.62rem}
  .v-formal{background:var(--formal)} .v-independent{background:var(--independent)}
  .v-peer-reviewed{background:var(--peer)} .v-author-verified{background:var(--author)}
  .v-claimed{background:var(--claimed)} .v-disputed{background:var(--disputed)}
  .v-known{background:var(--known)} .v-refuted{background:var(--refuted)}
  .pill.a{background:var(--accent-soft);color:var(--accent);border-color:transparent;font-weight:600}

  .body h2{font-size:1.28rem;margin:0 0 9px;font-weight:600;line-height:1.32;letter-spacing:-.01em}
  .permalink{margin-left:8px;color:var(--muted);font-weight:400;text-decoration:none;
    opacity:0;font-size:.9em;vertical-align:baseline;transition:opacity .15s,color .15s;
    position:relative;top:-.02em}
  .entry:hover .permalink,.permalink:focus-visible{opacity:.55}
  .permalink:hover{opacity:1;color:var(--accent)}
  .permalink.copied{opacity:1;color:var(--accent)}
  .permalink.copied::after{content:"Link copied";position:absolute;left:50%;top:-1.9em;
    transform:translateX(-50%);white-space:nowrap;font-family:var(--serif);font-size:.62rem;
    letter-spacing:.03em;color:var(--accent);background:var(--accent-soft);
    border-radius:7px;padding:3px 8px;pointer-events:none}
  @media (pointer:coarse){ .permalink{opacity:.4} }
  .entry-focus{border-color:var(--accent)!important;
    box-shadow:0 0 0 1px var(--accent),0 16px 40px rgba(30,28,24,.12)!important}
  .claim{margin:0;color:var(--ink);max-width:66ch;line-height:1.55;font-weight:500}
  .detail{margin:13px 0 0;color:var(--muted);font-size:1rem;line-height:1.58;max-width:72ch}
  .withppl{margin:12px 0 0;font-family:var(--serif);font-size:.76rem;color:var(--muted);line-height:1.4}
  .withppl b{color:var(--ink);font-weight:500}
  .withppl span{text-transform:uppercase;letter-spacing:.11em;font-size:.6rem;margin-right:7px}
  .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
  .tag-chip{font-family:var(--serif);font-size:.66rem;color:var(--muted);background:var(--panel-2);
    border:1px solid var(--line);border-radius:9px;padding:3px 9px}

  details{margin-top:15px;border-top:1px solid var(--line);padding-top:4px}
  summary{cursor:pointer;color:var(--accent);font-family:var(--serif);font-size:.74rem;font-weight:500;
    letter-spacing:.03em;list-style:none;padding:9px 0 5px;display:flex;align-items:center;gap:8px;user-select:none}
  summary::-webkit-details-marker{display:none}
  summary:before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:rotate(-45deg);transition:transform .2s var(--ease);margin-left:2px}
  details[open] summary:before{transform:rotate(45deg)}
  details[open] .reveal{animation:reveal .32s var(--ease) both}
  @keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .field{margin:14px 0;padding-left:14px;border-left:2px solid var(--line)}
  .field b{display:block;font-family:var(--serif);font-size:.62rem;text-transform:uppercase;letter-spacing:.11em;
    color:var(--muted);margin-bottom:5px}
  .field p{margin:0;line-height:1.58;max-width:70ch}
  .field.checks p{margin:0 0 6px;font-size:.94rem}
  .refs{display:flex;flex-direction:column;gap:1px;margin-top:3px}
  .ref{display:flex;align-items:baseline;gap:12px;padding:8px 9px;border-radius:11px;text-decoration:none;
    color:var(--ink);transition:background .14s var(--ease)}
  .ref:hover{background:var(--panel-2)}
  .ref-dom{flex:0 0 104px;font-family:var(--serif);font-size:.68rem;font-weight:600;color:var(--accent);
    letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ref-t{flex:1;font-family:var(--serif);font-size:.77rem;line-height:1.42;color:var(--ink)}
  .ref-a{flex:0 0 auto;color:var(--muted);font-size:.78rem}

  /* ---------- Video facades (nothing loads from YouTube until pressed) ---------- */
  .vid{display:flex;align-items:center;gap:13px;padding:10px 11px;border:1px solid var(--line);
    border-radius:12px;margin:6px 0;background:var(--panel-2);transition:border-color .15s}
  .vid:hover{border-color:var(--accent)}
  .vid-play{flex:0 0 auto;width:38px;height:27px;border:none;border-radius:9px;background:var(--accent);
    color:var(--bg);cursor:pointer;display:grid;place-items:center;font-size:.7rem;
    transition:transform .15s var(--ease),filter .15s}
  .vid-play:hover{transform:scale(1.08);filter:brightness(1.1)}
  .vid-meta{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
  .vid-t{font-family:var(--serif);font-size:.77rem;line-height:1.4;color:var(--ink)}
  .vid-ch{font-family:var(--serif);font-size:.66rem;color:var(--muted)}
  .vid-ext{flex:0 0 auto;font-family:var(--serif);font-size:.68rem;color:var(--accent);text-decoration:none}
  .vid-ext:hover{text-decoration:underline}
  .vid-frame{position:relative;aspect-ratio:16/9;margin:6px 0;border-radius:12px;overflow:hidden;
    border:1px solid var(--line);animation:reveal .3s var(--ease) both}
  .vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .vid-note{font-family:var(--serif);font-size:.64rem;color:var(--muted);margin:5px 0 0}

  /* ---------- Entrance animation (initial load only) ---------- */
  #list.animate .entry{animation:cardIn .5s var(--ease) both;animation-delay:var(--d,0ms)}
  @keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .intro{opacity:0;animation:cardIn .55s var(--ease) both}
  .i1{animation-delay:.03s} .i2{animation-delay:.09s} .i3{animation-delay:.15s} .i4{animation-delay:.21s}

  /* ---------- Lab hub links ---------- */
  .labs-hub{margin-top:52px;padding:30px 32px;border:1px solid var(--line-strong);
    border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
  .labs-hub .lbl{font-family:var(--serif);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
    color:var(--muted);display:block;margin:0 0 16px}
  .labs-hub .lbl.subhead{margin-top:30px}
  /* minmax(0,1fr): a bare 1fr track floors at its content's min-content width, which let the
     longest lab label ('GitHub (e.g: Deepmind)') push the grid wider than the viewport. */
  .labgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .labcard{display:flex;align-items:center;gap:14px;padding:18px 20px;min-width:0;border:1px solid var(--line-strong);
    border-radius:15px;background:var(--panel-2);text-decoration:none;box-shadow:var(--shadow);
    transition:transform .16s var(--ease),border-color .16s,box-shadow .16s}
  .labcard:hover{transform:translateY(-2px);border-color:var(--accent);
    box-shadow:0 2px 4px rgba(30,28,24,.05),0 14px 34px rgba(30,28,24,.10)}
  .labcard-logo{width:34px;height:34px;flex:0 0 auto;border-radius:11px;background:#fff;
    display:grid;place-items:center;padding:6px;box-shadow:inset 0 0 0 1px var(--line)}
  .labcard-logo img{width:100%;height:100%;object-fit:contain;display:block}
  .labcard-meta{flex:1;display:flex;flex-direction:column;line-height:1.2;min-width:0}
  .labcard-meta b{color:var(--ink);font-family:var(--serif);font-size:1rem;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .labcard-meta span{font-family:var(--serif);font-size:.78rem;color:var(--muted);letter-spacing:.04em}
  .labcard-go{flex:0 0 auto;color:var(--accent);font-family:var(--serif);font-size:1.05rem}
  .labs-note{font-family:var(--serif);font-size:.78rem;color:var(--muted);margin:16px 0 0;max-width:64ch}
  @media(max-width:640px){.labgrid{grid-template-columns:1fr}}

  footer{border:1px solid var(--line-strong);margin-top:56px;padding:32px 40px 34px;
    color:var(--muted);font-size:.94rem;background:var(--panel);border-radius:16px;box-shadow:var(--shadow)}
  footer p{max-width:70ch}
  footer a{color:var(--accent)}
  footer .lbl{font-weight: bold;font-family:var(--serif);font-size:.62rem;text-transform:uppercase;letter-spacing:.13em;
    color:var(--muted);display:block;margin:22px 0 6px}
  footer .lbl:first-child{margin-top:0}
  .cite{font-family:var(--serif);font-size:.8rem;line-height:1.6;color:var(--ink);
    background:var(--panel-2);border:1px solid var(--line);border-radius:11px;
    padding:12px 15px;word-break:break-word}
  .colophon{font-family:var(--serif);font-size:.7rem;letter-spacing:.04em;margin-top:26px;
    padding-top:18px;border-top:1px solid var(--line)}
  .empty{text-align:center;color:var(--muted);padding:56px;font-family:var(--serif);font-size:.86rem;
    background:var(--panel);border:1px solid var(--line);border-radius:16px}
  .empty code{background:var(--panel-2);padding:2px 7px;border-radius:7px}

  .body h2,.claim,.detail,.ref-t,.vid-t,.lab-name,.rmeta dd{overflow-wrap:break-word}

  /* ---------- Responsive: tablet & phone ---------- */
  @media(max-width:720px){
    .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
    /* Narrower gutters: stop the masthead bleeding past them, and tighten its inner padding. */
    header{margin:12px -8px 24px;padding:30px 22px 26px;border-radius:16px}
    header:after{border-radius:16px 16px 0 0}
    .entry{grid-template-columns:1fr;gap:16px;padding:20px}
    .rail{border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:16px;
      flex-flow:row wrap;gap:10px 18px;align-items:center}
    .lab{flex:1 0 100%}
    .rpills{flex-direction:row;flex-wrap:wrap}
    .rmeta{flex-flow:row wrap;gap:8px 18px}
    .ref-dom{flex-basis:84px}
  }
  @media(max-width:560px){
    header{margin:8px 0 20px;padding:24px 18px 22px;border-radius:14px}
    header:after{border-radius:14px 14px 0 0}
    .stats{gap:9px}
    .eyebrow{gap:12px 14px}
    .eyebrow-right{width:100%;justify-content:flex-start;gap:10px 12px}
    .lede{font-size:1.06rem}
    .actions .btn{flex:1 1 auto;justify-content:center}
    .stat{padding:16px 16px 14px} .stat b{font-size:1.7rem}
    .controls{position:static;gap:8px;padding:10px 0 16px}
    .controls input{flex:1 1 100%}
    .controls select{flex:1 1 30%;min-width:0}
    .count{margin-left:0;flex:1 1 100%;text-align:right}
    .ref{gap:9px} .ref-dom{flex-basis:74px}
    .hbar{grid-template-columns:94px 1fr 22px;gap:8px}
    .labcard{padding:15px 16px}
    .labs-hub{padding:24px 18px}
    footer{padding:26px 20px 30px}
  }
  @media(pointer:coarse){
    .controls input,.controls select{font-size:16px}   /* stop iOS/iPadOS zoom-on-focus */
    .theme-seg .th{width:40px;height:34px}
    .btn{padding:12px 18px}
    summary{padding-top:13px;padding-bottom:11px}
    .vid-play{width:46px;height:32px}
    .labcard{padding:18px}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .stat:before{transform:scaleX(1)} .intro{opacity:1}
    .mark .m1,.mark .m2{stroke-dashoffset:0} .mark .m3{opacity:1}
  }