:root{
  --ink:#14181f;
  --ink-2:#495662;
  --ink-3:#7d8b96;
  --paper:#eceff0;
  --card:#fff;
  --rule:#d2d9da;
  --rule-hard:#b3bec1;

  /* Sequential tier ramp: cheap and easy -> expensive and hard. */
  --t1:#1f5f4e;
  --t2:#2c7385;
  --t3:#7a7420;
  --t4:#a3651c;
  --t5:#98401f;
  --t6:#7a2320;

  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --cond:"IBM Plex Sans Condensed",var(--sans);
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer}

/* ---------- masthead ---------- */
.masthead{border-bottom:2px solid var(--ink);background:var(--card)}
.masthead-in{max-width:1400px;margin:0 auto;padding:26px 28px 20px;
  display:flex;align-items:baseline;gap:28px;flex-wrap:wrap}
.wordmark{font-family:var(--cond);font-weight:700;font-size:29px;
  letter-spacing:-.015em;line-height:1;white-space:nowrap}
.wordmark-1{color:var(--ink)}
.wordmark-2{color:var(--ink-3);margin-left:.14em}
.standfirst{margin:0;max-width:52ch;color:var(--ink-2);font-size:14px}

/* ---------- layout ---------- */
.shell{max-width:1400px;margin:0 auto;display:grid;
  grid-template-columns:236px minmax(0,1fr);gap:0;align-items:start}

/* ---------- task rail ---------- */
.rail{border-right:1px solid var(--rule);padding:22px 0 60px;
  position:sticky;top:0;max-height:100vh;overflow-y:auto}
.rail-group{margin-bottom:22px}
.rail-head{font-family:var(--cond);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 7px;padding:0 20px}
.rail ul{list-style:none;margin:0;padding:0}
.rail-item{display:block;width:100%;text-align:left;background:none;
  border:0;border-left:3px solid transparent;padding:6px 20px 6px 17px}
.rail-item:hover{background:#e2e7e8}
.rail-item.is-on{border-left-color:var(--ink);background:var(--card)}
.rail-label{display:block;font-size:14px;font-weight:500}
.rail-tag{display:block;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-3);letter-spacing:-.02em}
.rail-item.is-on .rail-tag{color:var(--ink-2)}
.rail-item:focus-visible,.sort:focus-visible{outline:2px solid var(--t2);outline-offset:-2px}

/* ---------- stage ---------- */
.stage{padding:24px 28px 80px;min-width:0}
.stage-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:18px}
.stage-head h1{font-family:var(--cond);font-size:34px;font-weight:700;
  letter-spacing:-.02em;margin:0;line-height:1.05}
.purpose{margin:5px 0 0;color:var(--ink-2);font-size:14px;max-width:62ch}

.controls{display:flex;border:1px solid var(--rule-hard);background:var(--card)}
.sort{background:none;border:0;padding:7px 13px;font-size:12.5px;
  font-weight:500;color:var(--ink-2);border-right:1px solid var(--rule)}
.sort:last-child{border-right:0}
.sort:hover{background:#e9eeee}
.sort.is-on{background:var(--ink);color:#fff}

/* ---------- the ruler (signature element) ---------- */
.ruler{margin-bottom:2px;position:sticky;top:0;z-index:5;
  background:var(--paper);padding-top:4px}
.ruler-zones{display:flex;height:19px;border:1px solid var(--rule-hard);
  border-bottom:0}
.zone{position:relative;display:flex;align-items:center;
  border-right:1px solid rgba(255,255,255,.5)}
.zone:last-child{border-right:0}
.zone span{font-family:var(--cond);font-size:9.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;
  padding-left:6px;white-space:nowrap;overflow:hidden}
/* widths mirror the log positions of 150M / 1B / 7B / 25B / 80B / 100B+ */
.z1{background:var(--t1);width:44.3%}
.z2{background:var(--t2);width:15.7%}
.z3{background:var(--t3);width:16.9%}
.z4{background:var(--t4);width:11.1%}
.z5{background:var(--t5);width:10.1%}
.z6{background:var(--t6);width:1.9%}
.z6 span,.z5 span{padding-left:3px}

.ruler-ticks{display:flex;border:1px solid var(--rule-hard);border-top:0;
  background:var(--card)}
.ruler-ticks span{flex:1;font-family:var(--mono);font-size:10px;
  color:var(--ink-3);padding:2px 0 3px 5px;
  border-right:1px solid var(--rule)}
.ruler-ticks span:last-child{border-right:0}

/* legend: published vs inferred */
.legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--rule-hard);border-top:0;background:var(--card);
  padding:5px 10px}
.key{display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;color:var(--ink-2)}
.key b{font-family:var(--mono);color:var(--ink-3);margin-left:1px}
.sw{width:22px;height:11px;border:1px solid var(--rule-hard);display:inline-block}
.sw-solid{background:var(--ink-2)}
.sw-hatch{background:repeating-linear-gradient(135deg,
  var(--ink-2) 0 2px,#fff 2px 5px)}
.sw-void{background:#f0f3f3}
.key-note{font-size:11px;color:var(--ink-3);margin-left:auto}

/* ---------- table ---------- */
.table-wrap{background:var(--card);border:1px solid var(--rule-hard);border-top:0}
table{width:100%;border-collapse:collapse}
thead th{font-family:var(--cond);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule-hard);
  white-space:nowrap}
.c-rank{width:38px}
.c-size{width:37%}
.c-num,.c-meta{width:104px}
.c-num{text-align:right}
tbody tr{border-bottom:1px solid var(--rule)}
tbody tr:last-child{border-bottom:0}
tbody tr:hover{background:#f4f7f7}
td{padding:9px 12px;vertical-align:middle}

.rank{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.owner{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  display:block;letter-spacing:-.02em}
.mname{font-weight:600;font-size:14px;letter-spacing:-.005em;
  text-decoration:none;color:var(--ink);display:block;
  overflow-wrap:anywhere}
.mname:hover{text-decoration:underline}
.langs{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:1px}

/* size bar aligned to the ruler above */
.bar{position:relative;height:17px;background:#f0f3f3;
  border:1px solid var(--rule)}
.bar-fill{position:absolute;left:0;top:0;bottom:0;opacity:.9}
.bar-fill.n1{background:var(--t1)} .bar-fill.n2{background:var(--t2)}
.bar-fill.n3{background:var(--t3)} .bar-fill.n4{background:var(--t4)}
.bar-fill.n5{background:var(--t5)} .bar-fill.n6{background:var(--t6)}
/* Inferred sizes get a hatch so they read as provisional at a glance,
   while keeping the tier colour underneath. */
.bar-fill.inferred{
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,0) 0 3px, rgba(255,255,255,.72) 3px 6px);
  opacity:.78;
}
.bar-none{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  padding-left:5px;line-height:17px}
.size-meta{display:flex;gap:8px;align-items:baseline;margin-top:3px}
.psize{font-family:var(--mono);font-size:12px;font-weight:500}
.psize.inferred{color:var(--ink-2);font-weight:400}
.star{font-family:var(--mono);color:var(--ink-3);font-weight:600}
.hw{font-size:11.5px;color:var(--ink-2)}
.aws{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}

.num{font-family:var(--mono);font-size:12.5px;text-align:right;
  font-variant-numeric:tabular-nums}
.lic{font-family:var(--mono);font-size:11px;color:var(--ink-2);
  overflow-wrap:anywhere}
.lic.none{color:var(--ink-3);font-style:italic}

/* ---------- status + footnote ---------- */
.status{border:1px solid var(--rule-hard);background:var(--card);
  padding:14px 16px;margin-bottom:2px;font-size:13.5px}
.status.err{border-left:3px solid var(--t6)}
.footnote{font-size:12px;color:var(--ink-3);margin:12px 0 0;max-width:78ch}
.is-loading{opacity:.4}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;max-height:none;border-right:0;
    border-bottom:1px solid var(--rule);display:flex;gap:20px;
    overflow-x:auto;padding:14px 20px}
  .rail-group{margin:0;min-width:190px}
  .c-size{width:auto}
  .c-num,.c-meta{width:auto}
  .stage{padding:20px 16px 60px}
  .stage-head h1{font-size:26px}
  .ruler{position:static}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==========================================================================
   Section nav in the masthead
   ========================================================================== */
.masthead-in{align-items:center}
a.wordmark{text-decoration:none}
.sections{display:flex;flex-wrap:wrap;gap:2px;margin-left:4px;min-width:0}
.sections a{font-family:var(--cond);font-size:13px;font-weight:600;
  letter-spacing:.02em;text-decoration:none;color:var(--ink-2);
  padding:5px 12px;border:1px solid var(--rule-hard)}
.sections a:hover{background:#e9eeee}
.sections a.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.standfirst{margin-left:auto;text-align:right}

/* rail items are links on the guide pages */
a.rail-item{text-decoration:none;color:inherit}
.rail-item{position:relative}
.rail-dot{position:absolute;right:12px;top:12px;width:5px;height:5px;
  border-radius:50%;background:var(--t2)}

.guide-link{display:inline-block;margin-top:7px;font-size:13px;
  font-weight:500;color:var(--t2);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}
.guide-link:hover{color:var(--ink)}

/* ==========================================================================
   Guide index cards
   ========================================================================== */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:1px;background:var(--rule-hard);border:1px solid var(--rule-hard)}
.card{background:var(--card);padding:16px 17px 14px;text-decoration:none;
  color:inherit;display:flex;flex-direction:column;gap:5px}
.card:hover{background:#f4f7f7}
.card-group{font-family:var(--cond);font-size:10px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.card h3{font-family:var(--cond);font-size:21px;font-weight:700;margin:0;
  letter-spacing:-.015em;line-height:1.1}
.card-line{margin:0;font-size:13px;color:var(--ink-2);flex:1}
.card-meta{display:flex;gap:11px;flex-wrap:wrap;margin-top:6px;
  padding-top:8px;border-top:1px solid var(--rule)}
.card-meta span{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}

/* ==========================================================================
   Guide detail
   ========================================================================== */
.jump{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--rule-hard);
  background:var(--card);margin-bottom:22px;position:sticky;top:0;z-index:5}
.jump a{font-family:var(--cond);font-size:12px;font-weight:600;
  letter-spacing:.03em;text-decoration:none;color:var(--ink-2);
  padding:7px 13px;border-right:1px solid var(--rule)}
.jump a:last-child{border-right:0}
.jump a:hover{background:var(--ink);color:#fff}

.sec{margin-bottom:38px;scroll-margin-top:44px}
.sec-head{font-family:var(--cond);font-size:12px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink);
  margin:0 0 3px;padding-bottom:6px;border-bottom:2px solid var(--ink);
  display:flex;align-items:baseline;gap:8px}
.sec-n{font-family:var(--mono);font-size:11px;font-weight:400;
  color:var(--ink-3);letter-spacing:0}
.sec-lede{font-size:13px;color:var(--ink-2);margin:9px 0 15px;max-width:70ch}

.prose{max-width:68ch;margin-top:14px}
.prose p{margin:0 0 12px;font-size:15px;line-height:1.62}

/* model families */
.fam{background:var(--card);border:1px solid var(--rule-hard);
  margin-bottom:10px}
.fam-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;padding:11px 15px;border-bottom:1px solid var(--rule);
  background:#f7f9f9;flex-wrap:wrap}
.fam-head h3{font-family:var(--cond);font-size:19px;font-weight:700;margin:0;
  letter-spacing:-.01em}
.fam-size{font-family:var(--mono);font-size:11px;color:var(--ink-3);
  white-space:nowrap}
.fam-body{display:grid;grid-template-columns:88px 1fr;gap:0;margin:0;
  padding:0}
.fam-body dt{font-family:var(--cond);font-size:11px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:10px 0 10px 15px;
  border-bottom:1px solid var(--rule)}
.fam-body dd{margin:0;padding:10px 15px;font-size:13.5px;line-height:1.55;
  border-bottom:1px solid var(--rule)}
.fam-body dt:last-of-type,.fam-body dd:last-of-type{border-bottom:0}
.fam-body dt.yes{color:var(--t1)}
.fam-body dt.no{color:var(--t5)}
.fam-body dt.ex{color:var(--ink-3)}
.fam-models{display:flex;flex-wrap:wrap;gap:5px}
.fam-models code{font-family:var(--mono);font-size:11px;background:#eef2f2;
  border:1px solid var(--rule);padding:1px 5px;overflow-wrap:anywhere}

/* banking use cases */
.use{background:var(--card);border:1px solid var(--rule-hard);
  border-left:3px solid var(--t2);padding:13px 16px;margin-bottom:9px}
.use h3{font-family:var(--cond);font-size:18px;font-weight:700;margin:0 0 5px;
  letter-spacing:-.01em}
.use-detail{margin:0 0 8px;font-size:13.5px;color:var(--ink-2);max-width:74ch}
.use-wrinkle{margin:0;font-size:13.5px;line-height:1.55;max-width:74ch;
  padding-top:8px;border-top:1px dotted var(--rule-hard)}
.wr-tag{font-family:var(--cond);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--t4);
  margin-right:9px}

/* code snippets */
.snip{margin-bottom:16px}
.snip-head{display:flex;justify-content:space-between;align-items:center;
  gap:12px;background:var(--ink);padding:8px 14px}
.snip-head h3{font-family:var(--cond);font-size:16px;font-weight:600;
  color:#fff;margin:0;letter-spacing:.005em}
.copy{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;
  font-family:var(--mono);font-size:10.5px;padding:3px 9px}
.copy:hover{background:rgba(255,255,255,.14)}
.snip-note{margin:0;background:#f7f9f9;border:1px solid var(--rule-hard);
  border-top:0;border-bottom:0;padding:9px 14px;font-size:12.5px;
  color:var(--ink-2);max-width:none}
pre.code{margin:0;background:#171c24;color:#dfe6ea;overflow-x:auto;
  padding:14px;font-family:var(--mono);font-size:12.5px;line-height:1.62;
  border:1px solid var(--ink)}
pre.code code{font:inherit}
.c-kw{color:#c5a3e8}
.c-str{color:#9fd39a}
.c-com{color:#7b8894;font-style:italic}
.c-fn{color:#8fc7e8}
.c-num2{color:#e2b478}

/* nuances */
.nuances{list-style:none;counter-reset:n;margin:14px 0 0;padding:0}
.nuances li{counter-increment:n;position:relative;padding:0 0 14px 40px;
  margin-bottom:14px;border-bottom:1px solid var(--rule)}
.nuances li:last-child{border-bottom:0}
.nuances li::before{content:counter(n,decimal-leading-zero);
  position:absolute;left:0;top:1px;font-family:var(--mono);font-size:13px;
  font-weight:600;color:var(--t4)}
.nuances h3{font-family:var(--cond);font-size:17px;font-weight:700;
  margin:0 0 4px;letter-spacing:-.01em}
.nuances p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);
  max-width:76ch}

/* pager */
.pager{display:flex;justify-content:space-between;gap:12px;
  border-top:2px solid var(--ink);padding-top:14px;margin-top:34px}
.pg{text-decoration:none;color:inherit;font-family:var(--cond);
  font-size:17px;font-weight:700;letter-spacing:-.01em;max-width:46%}
.pg span{display:block;font-family:var(--sans);font-size:10.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:2px}
.pg-next{text-align:right}
.pg:hover{color:var(--t2)}

@media (max-width:900px){
  .standfirst{margin-left:0;text-align:left}
  .jump{position:static;overflow-x:auto}
  .fam-body{grid-template-columns:1fr}
  .fam-body dt{padding:9px 15px 0;border-bottom:0}
  .fam-body dd{padding-top:3px}
}

/* ==========================================================================
   Library section
   ========================================================================== */
.modpath{font-family:var(--mono);font-size:12px;color:var(--ink-3);
  display:block;margin-bottom:2px}

/* stage number chips */
.stage-n{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:2px;font-family:var(--mono);
  font-size:10px;font-weight:600;color:#fff;letter-spacing:0;
  margin-right:5px;flex:none}
.s1{background:#1f5f4e} .s2{background:#26707a} .s3{background:#2c7385}
.s4{background:#4a6a86} .s5{background:#7a7420} .s6{background:#8a6a2a}
.s7{background:#a3651c} .s8{background:#6d6a63}
.rail-head{display:flex;align-items:center}

/* workflow spine - the signature element for this section */
.spine{display:flex;border:1px solid var(--rule-hard);background:var(--card);
  margin-bottom:24px;overflow-x:auto}
.sp{flex:1;min-width:104px;padding:8px 10px;border-right:1px solid var(--rule);
  display:flex;flex-direction:column;gap:1px}
.sp:last-child{border-right:0}
.sp-n{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.sp-name{font-family:var(--cond);font-size:13px;font-weight:600;
  letter-spacing:-.005em;line-height:1.15}
.sp-q{font-size:10.5px;color:var(--ink-3);line-height:1.3}
.sp.is-here{background:var(--ink)}
.sp.is-here .sp-name{color:#fff}
.sp.is-here .sp-n,.sp.is-here .sp-q{color:rgba(255,255,255,.72)}

/* reference tables */
table.ref{width:100%;border-collapse:collapse}
table.ref td{padding:8px 12px;vertical-align:top;
  border-bottom:1px solid var(--rule)}
table.ref tr:last-child td{border-bottom:0}
table.ref tr:hover{background:#f4f7f7}
.r-name{width:40%;white-space:normal}
.r-name code{font-family:var(--mono);font-size:12px;
  overflow-wrap:anywhere;font-weight:500}
.r-use{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
tr.r-trap .r-name code{color:var(--t5)}
tr.r-bank{background:#f6f9f8}
.rtag{display:inline-block;font-family:var(--cond);font-size:9px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:1px 4px;margin-left:6px;border-radius:2px;vertical-align:1px}
.rtag-common{background:#e3ecea;color:var(--t1)}
.rtag-bank{background:#e6eef2;color:#2c5f85}
.rtag-trap{background:#f3e4e0;color:var(--t5)}

.card-group.mono{font-family:var(--mono);letter-spacing:-.01em;
  text-transform:none;font-size:10.5px}
.prose.wide{max-width:76ch}
pre.code.plain{background:#f2f5f5;color:var(--ink);border:1px solid var(--rule);
  font-size:12px;margin:0 0 12px}
.nuances.tight li{padding-left:26px;padding-bottom:10px;margin-bottom:10px}
.nuances.tight li::before{font-size:11px}

@media (max-width:900px){
  .spine{display:none}
}

/* example count badge in the library rail */
.ex-badge{position:absolute;right:11px;top:11px;font-family:var(--mono);
  font-size:9.5px;font-weight:500;color:var(--ink-3);
  background:#e4eaea;border:1px solid var(--rule);border-radius:2px;
  padding:0 4px;line-height:14px}
.rail-item.is-on .ex-badge{background:#dde5e4;color:var(--ink-2)}