/* Shared by the index and by every generated per-post page.
   One stylesheet on purpose: a per-post page that carried its own copy
   would drift from the index the first time either was touched. */
  :root {
    color-scheme: dark light;
    --ink:#0e1316; --panel:#141c21; --raised:#1b252b;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05);
    --line-table:rgba(255,255,255,.2);
    --fg:#dae2e4; --fg-dim:#8a989e; --fg-faint:#5e6c72;
    --amber-ink:#f2a53c; --amber-soft:rgba(242,165,60,.13); --amber-line:rgba(242,165,60,.34);
    --teal:#48c1ac; --teal-soft:rgba(72,193,172,.12);
    --red:#f87171; --red-soft:rgba(248,113,113,.12);
    --violet:#a78bfa; --violet-soft:rgba(167,139,250,.12);
    --maxw:880px;
    --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  /* System default. Guarded so an explicit data-theme="dark" wins over a
     light OS, which the unguarded version on index.html does not do. */
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --ink:#e9edee; --panel:#f4f6f6; --raised:#ffffff;
      --line:rgba(12,26,32,.12); --line-2:rgba(12,26,32,.07);
      --line-table:rgba(12,26,32,.26);
      --fg:#131c20; --fg-dim:#4d5a60; --fg-faint:#7c888d;
      --amber-ink:#b7761a; --amber-soft:rgba(200,128,26,.12); --amber-line:rgba(200,128,26,.4);
      --teal:#1c8f7d; --teal-soft:rgba(28,143,125,.1);
      --red:#b3261e; --red-soft:rgba(179,38,30,.1);
      --violet:#6d3fb8; --violet-soft:rgba(109,63,184,.1);
    }
  }
  :root[data-theme="light"]{
      --ink:#e9edee; --panel:#f4f6f6; --raised:#ffffff;
      --line:rgba(12,26,32,.12); --line-2:rgba(12,26,32,.07);
      --line-table:rgba(12,26,32,.26);
      --fg:#131c20; --fg-dim:#4d5a60; --fg-faint:#7c888d;
      --amber-ink:#b7761a; --amber-soft:rgba(200,128,26,.12); --amber-line:rgba(200,128,26,.4);
      --teal:#1c8f7d; --teal-soft:rgba(28,143,125,.1);
      --red:#b3261e; --red-soft:rgba(179,38,30,.1);
      --violet:#6d3fb8; --violet-soft:rgba(109,63,184,.1);
  }
  :root[data-theme="dark"]{
    --ink:#0e1316; --panel:#141c21; --raised:#1b252b;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05);
    --line-table:rgba(255,255,255,.2);
    --fg:#dae2e4; --fg-dim:#8a989e; --fg-faint:#5e6c72;
    --amber-ink:#f2a53c; --amber-soft:rgba(242,165,60,.13); --amber-line:rgba(242,165,60,.34);
    --teal:#48c1ac; --teal-soft:rgba(72,193,172,.12);
    --red:#f87171; --red-soft:rgba(248,113,113,.12);
    --violet:#a78bfa; --violet-soft:rgba(167,139,250,.12);
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--ink); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased; padding:0 20px 80px;
    background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
    background-size:34px 34px}
  .col{max-width:var(--maxw); margin:0 auto}
  a{color:var(--amber-ink); text-decoration:none}
  a:hover{text-decoration:underline}
  code{font-family:var(--mono); color:var(--amber-ink); font-size:.92em}
  header{padding:76px 0 30px}
  .label{font-family:var(--mono); font-size:19px; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; color:var(--amber-ink)}
  .label .tick{color:var(--fg-faint)}
  h1{font-family:var(--mono); font-weight:600; font-size:clamp(28px,5.4vw,46px); line-height:1.06;
    margin:14px 0 16px; letter-spacing:-.02em; text-wrap:balance; color:var(--fg)}
  .lede{color:var(--fg-dim); max-width:64ch; margin:0}
  p{max-width:64ch}
  strong{color:var(--fg); font-weight:600}
  a:focus-visible{outline:2px solid var(--amber-ink); outline-offset:3px; border-radius:3px}
  .rule{height:1px; background:var(--line); margin:34px 0}

  .card{display:block; border:1px solid var(--line); border-left:3px solid var(--amber-line);
    background:var(--panel); border-radius:3px; padding:18px 20px; margin-bottom:14px; color:inherit}
  .card:hover{background:var(--raised); text-decoration:none}
  .card h2{font-family:var(--mono); font-size:16px; margin:0 0 8px; line-height:1.3; letter-spacing:-.01em}
  .card p{margin:0; color:var(--fg-dim); font-size:14.5px}
  .meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase}
  .date{color:var(--fg-faint)}
  .tag{padding:2px 8px; border-radius:2px; border:1px solid var(--line)}
  .tag.models{color:var(--amber-ink); background:var(--amber-soft); border-color:var(--amber-line)}
  .tag.harness{color:var(--violet); background:var(--violet-soft)}
  .tag.infrastructure{color:var(--teal); background:var(--teal-soft)}

  .sub{border:1px solid var(--line); border-left:3px solid var(--teal); background:var(--panel);
    border-radius:3px; padding:16px 20px; margin-top:26px}
  .sub strong{display:block; margin-bottom:6px; font-family:var(--mono); font-size:13.5px}
  .sub p{margin:0; color:var(--fg-dim); font-size:14.5px; max-width:64ch}
  .empty{border:1px solid var(--line); border-left:3px solid var(--teal); background:var(--panel);
    border-radius:3px; padding:22px}
  .empty strong{display:block; margin-bottom:8px}
  .empty p{margin:0 0 10px; color:var(--fg-dim); font-size:14.5px}
  .empty p:last-child{margin:0}

  article{display:none}
  article.on{display:block}
  #list.off{display:none}
  article h1{font-size:clamp(26px,4.4vw,34px)}
  article h2{font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; color:var(--amber-ink); margin:38px 0 14px}
  article h2::before{content:"// "; color:var(--fg-faint)}
  article p{max-width:68ch}
  /* The scroll lives on a wrapper, not on the table. `display:block` on a
     <table> makes it a block box and border-collapse stops collapsing, which
     leaves a visible gap between every row. */
  .twrap{overflow-x:auto; margin:16px 0}
  article table{width:100%; border-collapse:collapse; font-size:14px}
  article th,article td{border:1px solid var(--line-table); padding:9px 12px; text-align:left; vertical-align:top}
  article th{background:var(--raised); font-family:var(--mono); font-size:12px;
    text-transform:uppercase; letter-spacing:.07em; color:var(--fg-dim); font-weight:600}
  article blockquote{margin:16px 0; padding:12px 18px; border-left:3px solid var(--amber-line);
    background:var(--panel); border-radius:0 3px 3px 0; color:var(--fg); font-family:var(--mono);
    font-size:14px}
  article blockquote p{margin:0; max-width:none}
  article hr{border:0; height:1px; background:var(--line); margin:34px 0}
  .back{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px;
    padding:9px 14px; border-radius:2px; border:1px solid var(--amber-line); color:var(--amber-ink);
    background:var(--amber-soft); margin-bottom:20px; transition:background .15s}
  @media (hover:hover){.back:hover{background:var(--amber-ink); color:var(--ink); text-decoration:none}}
  .note{font-size:13.5px; color:var(--fg-faint); font-style:italic}
  footer{margin-top:54px; padding-top:22px; border-top:1px solid var(--line);
    font-size:13.5px; color:var(--fg-faint)}