/* Shared by every article under /learn/.
 *
 * It used to be inlined in each one, byte-identical apart from the table rules
 * two of them had and two did not. Pulling it out does two things: a reader
 * moving between articles downloads it once, and a machine reading the page
 * gets a document that is mostly the document. Measured before the change: an
 * article was ~4,800 tokens of which ~1,590 were this stylesheet and ~1,700
 * were the actual text — a third of the payload was formatting instructions
 * nobody reading for content will ever use.
 */
:root{
    --bg:#0A0C0B; --bg-raised:#111614; --bg-sunken:#070908;
    --ink:#EDEFEC; --ink-soft:#96A39B; --ink-faint:#5C6A62;
    --purple:#B833E0; --purple-soft:rgba(184,51,224,0.14); --purple-ink:#DA8EF2;
    --green:#22C55E; --green-soft:rgba(34,197,94,0.14); --green-ink:#6EDE9A;
    --line:#1C2320; --line-strong:#2A332E;
    --font-mono: "SF Mono","JetBrains Mono","IBM Plex Mono","Cascadia Code",ui-monospace,Menlo,Consolas,monospace;
    --font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html{background:var(--bg);}
  body{
    margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
    font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    background-position:center -1px;
  }
  .wrap{max-width:700px; margin:0 auto; padding:0 24px;}
  a{color:var(--green-ink);}
  code{font-family:var(--font-mono); background:var(--bg-sunken); padding:1px 6px; border-radius:3px; font-size:0.9em;}

  .topbar{max-width:700px; margin:0 auto; padding:28px 24px; display:flex; align-items:center; justify-content:space-between;}
  .wordmark{
    font-family:var(--font-mono); font-weight:700; font-size:15px; letter-spacing:.02em;
    display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none;
  }
  .wordmark .chip{width:16px; height:16px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px;}
  .wordmark .chip span{display:block;}
  .wordmark .chip span:nth-child(1){background:var(--purple);}
  .wordmark .chip span:nth-child(2){background:var(--line-strong);}
  .wordmark .chip span:nth-child(3){background:var(--line-strong);}
  .wordmark .chip span:nth-child(4){background:var(--green);}
  .topbar .gh{
    font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--ink);
    border:1px solid var(--line-strong); padding:6px 12px; border-radius:100px; text-decoration:none;
  }
  .topbar .gh:hover{border-color:var(--green); color:var(--green-ink);}

  article{padding:20px 0 60px;}
  .kicker.back{display:inline-block; text-decoration:none;}
  .kicker.back:hover{color:var(--green);}
  .kicker{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-faint); margin:0 0 16px;
  }
  h1{
    font-family:var(--font-mono); font-weight:700; letter-spacing:-.01em; font-size:clamp(30px,5vw,42px);
    line-height:1.15; margin:0 0 20px; text-wrap:balance;
  }
  .dek{font-size:19px; color:var(--ink-soft); margin:0 0 36px;}
  .byline{
    font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); margin:0 0 44px;
    padding-bottom:24px; border-bottom:1px solid var(--line);
  }

  h2{
    font-family:var(--font-mono); font-weight:700; font-size:23px; color:var(--ink);
    margin:52px 0 18px; letter-spacing:-.005em;
  }
  h3{font-size:18px; font-weight:650; margin:32px 0 12px;}
  p{margin:0 0 20px; color:var(--ink-soft);}
  p strong, li strong{color:var(--ink); font-weight:650;}
  ul, ol{color:var(--ink-soft); padding-left:22px; margin:0 0 20px;}
  li{margin-bottom:8px;}
  em{color:var(--ink); font-style:italic;}

  blockquote{
    margin:32px 0; padding:4px 0 4px 20px; border-left:3px solid var(--purple);
    color:var(--ink); font-size:17.5px;
  }

  .callout{
    background:var(--bg-raised); border:1px solid var(--line-strong); border-radius:10px;
    padding:22px 24px; margin:32px 0; font-size:15.5px;
  }
  .callout p:last-child{margin-bottom:0;}
  .callout .label{
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--green-ink); margin-bottom:10px; display:block;
  }

  .end-cta{
    margin-top:56px; padding:32px; border:1px solid var(--line-strong); border-radius:10px; text-align:center;
    background:radial-gradient(ellipse at top, var(--purple-soft), transparent 60%), var(--bg-raised);
  }
  .end-cta h3{margin-top:0; font-family:var(--font-mono);}
  .end-cta p{max-width:48ch; margin-left:auto; margin-right:auto;}
  .end-cta .cta-alt{font-size:14px; color:var(--ink-faint); margin:16px auto 0;}
  .end-cta .cta-alt a{color:var(--ink-soft);}
  .more{margin:34px auto 0; font-family:var(--font-mono); font-size:14px;}
  .more a{color:var(--ink-soft); text-decoration:none;}
  .more a:hover{color:var(--green-ink);}
  table.data{width:100%; border-collapse:collapse; margin:26px 0; font-size:15.5px;}
  table.data th{
    text-align:left; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-faint); font-weight:400;
    border-bottom:1px solid var(--line-strong); padding:0 12px 10px 0;
  }
  table.data th:last-child, table.data td:last-child{text-align:right; padding-right:0;}
  table.data td{padding:11px 12px 11px 0; border-bottom:1px solid var(--line); color:var(--ink-soft);}
  table.data td b{color:var(--ink); font-family:var(--font-mono); font-weight:700;}
  .btn-primary{
    display:inline-flex; align-items:center; gap:8px; margin-top:8px;
    font-family:var(--font-mono); font-weight:700; font-size:14.5px;
    background:var(--green); color:#06140C; border:none; border-radius:4px; padding:13px 24px;
    text-decoration:none;
  }
  .btn-primary:hover{filter:brightness(1.12);}

  .read-next{
    margin-top:44px; padding:20px 24px; border:1px solid var(--line); border-radius:10px;
    background:var(--bg-raised); font-size:15.5px;
  }
  .read-next .label{
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:8px; display:block;
  }
  .read-next p{margin:0;}

  footer{border-top:1px solid var(--line); padding:36px 0 60px;}
  footer .wrap{max-width:700px;}
  footer .disclaimer{font-size:13px; color:var(--ink-faint); max-width:70ch; margin:0 0 18px;}
  footer .fmeta{
    display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center;
    font-family:var(--font-mono); font-size:12px; color:var(--ink-faint);
  }

  @media (max-width:640px){
    h1{font-size:28px;}
    h2{font-size:20px;}
    .dek{font-size:17px;}
  }

/* --- legal pages (/privacy/, /terms/) ---------------------------------
 * Six rules the articles do not need. They live here rather than inline on
 * two pages so that the pages themselves are text: the rest of what those
 * pages were carrying is already in this file, verbatim — 117 of 123 lines
 * were identical to the article stylesheet. */
.tblwrap{overflow-x:auto; margin:22px 0;}
.tblwrap table{width:100%; border-collapse:collapse; font-size:15px;}
.tblwrap th, .tblwrap td{text-align:left; padding:10px 13px; border-bottom:1px solid var(--line); vertical-align:top;}
.tblwrap th{font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); font-weight:400;}
article h1{margin-bottom:6px;}
.updated{font-family:var(--font-mono); font-size:13px; color:var(--ink-faint); margin:0 0 30px;}