/* ── Shared with agenticdatasets.org ───────────────────────────────────────
     This is the sibling site's stylesheet, reproduced. That site is built with
     Tailwind and this one is a static file, so the rules cannot be imported —
     they are transcribed, with the Tailwind utility each one stands in for
     named beside it. When the two drift, this is the file that is wrong.

     Divergence found 2026-09-07 and corrected here: body was 17px/300 against
     16px/400, h1 2.9rem/700 against 2.25rem/600, section padding was flat
     rather than responsive, links carried no underline treatment, and the font
     came from the Google CDN rather than the same self-hosted files. The two
     sites shared their colour tokens and nothing else. */

  /* Roboto Slab, variable 300–700, self-hosted from the same woff2 files the
     sibling site serves. See fonts/README.md for provenance and licence. */
  @font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/roboto-slab-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/roboto-slab-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
      U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
      U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  /* One ink, one ground, one rule. Three theme states, and the order matters:
     the bare :root is light; the media query supplies dark for anyone who has
     NOT explicitly chosen light; the attribute rules then override both, so an
     explicit choice wins in either direction. */
  :root{
    color-scheme:light;
    --ink:#111111; --ink-muted:#5b5b5b; --ink-faint:#8a8a8a;
    --ground:#ffffff; --ground-alt:#f6f6f4; --rule:#e2e2de;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      color-scheme:dark;
      --ink:#eceae5; --ink-muted:#a5a29b; --ink-faint:#7d7a74;
      --ground:#111110; --ground-alt:#191917; --rule:#2e2e2b;
    }
  }
  :root[data-theme="dark"]{
    color-scheme:dark;
    --ink:#eceae5; --ink-muted:#a5a29b; --ink-faint:#7d7a74;
    --ground:#111110; --ground-alt:#191917; --rule:#2e2e2b;
  }
  :root[data-theme="light"]{
    color-scheme:light;
    --ink:#111111; --ink-muted:#5b5b5b; --ink-faint:#8a8a8a;
    --ground:#ffffff; --ground-alt:#f6f6f4; --rule:#e2e2de;
  }

  /* Tailwind preflight, in the part that shows. */
  *,::before,::after{box-sizing:border-box;border:0 solid var(--rule)}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;line-height:1.5}
  body{margin:0;background:var(--ground);color:var(--ink);
       font-family:'Roboto Slab',Charter,Georgia,ui-serif,serif;
       font-feature-settings:'kern' 1;text-rendering:optimizeLegibility;
       -webkit-font-smoothing:antialiased}
  h1,h2,h3,p,dl,dd,figure{margin:0}
  b,strong{font-weight:bolder}
  ul{margin:0;padding:0;list-style:none}
  img,svg,video{display:block;vertical-align:middle}
  video{max-width:100%;height:auto}
  button{font-family:inherit;font-feature-settings:inherit;font-size:100%;
         font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;
         margin:0;padding:0;background:none;text-transform:none;cursor:pointer}
  a{color:inherit;text-decoration:underline;text-underline-offset:.18em;
    text-decoration-thickness:1px;text-decoration-color:var(--ink-faint)}
  a:hover{text-decoration-color:var(--ink)}
  :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  ::selection{background:var(--ink);color:var(--ground)}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto} *{transition:none !important}
  }

  /* Layout. max-w-prose is 46rem here, as in the sibling's tailwind.config.js. */
  .wrap{margin:0 auto;width:100%;max-width:46rem;padding:0 1.5rem}   /* px-6 */
  section{border-top:1px solid var(--rule)}
  section.alt{background:var(--ground-alt)}
  section .wrap{padding-top:3.5rem;padding-bottom:3.5rem}            /* py-14 */
  @media (min-width:640px){
    section .wrap{padding-top:5rem;padding-bottom:5rem}              /* sm:py-20 */
  }

  /* Masthead: pb-14 pt-16 sm:pb-20 sm:pt-24 */
  header .wrap{padding-top:4rem;padding-bottom:3.5rem}
  @media (min-width:640px){ header .wrap{padding-top:6rem;padding-bottom:5rem} }
  .top{display:flex;align-items:flex-start;justify-content:space-between;
       gap:1.5rem;margin-bottom:2rem}                                /* mb-8 gap-6 */
  .mark{width:72px;height:72px;color:var(--ink);flex-shrink:0}
  h1{font-size:2.25rem;line-height:2.5rem;font-weight:600;letter-spacing:-.025em}
  @media (min-width:640px){ h1{font-size:3rem;line-height:1} }       /* sm:text-5xl */
  .tagline{margin-top:1.25rem;font-size:1.125rem;line-height:1.625;font-weight:500}
  .links{margin-top:2rem;display:flex;flex-wrap:wrap;
         column-gap:1.5rem;row-gap:.5rem;font-size:.875rem;line-height:1.25rem}

  /* Theme control: text-[10px] uppercase tracking-[0.14em], rounded-sm */
  .themer{display:flex;overflow:hidden;border-radius:.125rem;
          border:1px solid var(--rule);font-size:10px;
          text-transform:uppercase;letter-spacing:.14em;flex-shrink:0}
  .themer button{padding:.375rem .625rem;color:var(--ink-faint);
                 transition:color .15s,background-color .15s}
  .themer button + button{border-left:1px solid var(--rule)}
  .themer button:hover{color:var(--ink)}
  .themer button[aria-checked="true"]{background:var(--ink);color:var(--ground)}

  /* Type scale */
  h2{margin-bottom:1.5rem;font-size:1.5rem;line-height:2rem;
     font-weight:600;letter-spacing:-.025em}
  h3{margin-top:2rem;font-size:1rem;line-height:1.5rem;font-weight:500}
  p{line-height:1.625}                                               /* leading-relaxed */
  .lead{font-size:1.25rem;line-height:1.625;font-weight:500}         /* text-xl font-medium leading-relaxed */
  section p + p,section p + figure,section p + table,section p + dl{margin-top:1rem}
  .muted{color:var(--ink-muted)}
  em{font-style:italic}

  /* A rule above a closing passage: mt-10 border-t pt-6 */
  .after{margin-top:2.5rem;border-top:1px solid var(--rule);padding-top:1.5rem}

  /* Tables. The sibling has none, so these follow its dl treatment: mono for
     anything numeric, ink-faint uppercase for the header row. */
  table{width:100%;border-collapse:collapse;margin-top:1.5rem;
        font-size:.875rem;line-height:1.25rem}
  th,td{text-align:left;padding:.6875rem .75rem;vertical-align:top;
        border-bottom:1px solid var(--rule)}
  th{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;
     font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
     color:var(--ink-faint)}
  td.n,th.n{text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
            font-variant-numeric:tabular-nums}
  tr.hi td{font-weight:600}

  figure{margin-top:1.5rem}
  video,figure img{width:100%;border:1px solid var(--rule)}
  figcaption{margin-top:.75rem;font-size:.875rem;line-height:1.25rem;color:var(--ink-faint)}

  dl{margin-top:1.5rem;display:grid;grid-template-columns:auto 1fr;
     gap:.75rem 1.5rem;font-size:.875rem;line-height:1.25rem}
  dt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
  dd{color:var(--ink-muted)}

  .cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
  .cta a{border:1px solid var(--rule);border-radius:.125rem;padding:.625rem 1rem;
         font-size:.875rem;line-height:1.25rem;text-decoration:none}
  .cta a:hover{border-color:var(--ink)}

  /* The sibling's Disclaimer component: mt-6 border-t pt-6, two text-xs
     leading-relaxed paragraphs in ink-faint, mt-4 between them, and strong
     left bold and lifted to ink-muted. It sits in the footer there, so it
     sits in the footer here. */
  /* Terms page, following the sibling's Legal component: space-y-8 between
     entries, each a font-medium h3 with an mt-2 muted paragraph. */
  .terms > div + div{margin-top:2rem}
  .terms h3{margin-top:0;font-size:1rem;line-height:1.5;font-weight:500}
  .terms h3 + p{margin-top:.5rem}
  .meta{margin-top:2.5rem;border-top:1px solid var(--rule);padding-top:1.5rem;
        font-size:.875rem;line-height:1.25rem;color:var(--ink-muted)}

  .disclaimer{margin-top:1.5rem;border-top:1px solid var(--rule);padding-top:1.5rem}
  .disclaimer p{font-size:.75rem;line-height:1.625;color:var(--ink-faint)}
  .disclaimer p + p{margin-top:1rem}
  .disclaimer strong{color:var(--ink-muted)}
  footer{border-top:1px solid var(--rule)}
  footer .wrap{padding-top:2.5rem;padding-bottom:2.5rem;
               font-size:.875rem;line-height:1.625;color:var(--ink-faint)}
  footer p + p{margin-top:1rem}