/* loopmath.ai: page styles. The figures' own styles are in figs.css and read the colour names defined here. */
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-latin-var.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;
  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:"IBM Plex Mono";src:url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  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:"IBM Plex Mono";src:url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;
  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}

:root{--bg:#fff;--soft:#f6f6f4;--ink:#0e0e10;--ink-2:#3b3b40;--muted:#707076;--faint:#c9c9d3;--rule:#e6e6e3;--hue:79,70,229;--accent:rgb(var(--hue));
  --sans:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--max:1200px;--pad:clamp(20px,4vw,40px);
  /* the names the figures use: white cards, grey for de-emphasised marks (3.4:1 on white), two series colours for Fig. 5's new models */
  --surface:#fff;--card:var(--soft);--dot:#8a8a92;--wf-new:#8b85f0;--wf-other:#b8480f;--display:var(--sans);--display-weight:500;--radius:0;--text:36em;
  --code-bg:var(--soft);--code-ink:var(--ink-2);--code-dim:var(--muted)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16.5px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:inherit}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
code,pre,kbd{font-family:var(--mono);font-size:.9em}
:not(pre)>code{background:var(--soft);padding:.1em .35em;border-radius:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* a phrase that never breaks inside: a model name, a flag with its value, a heading's last clause (10-16) */
.nw{white-space:nowrap}
/* harness² (10-26): a superscript that does not open up the line */
sup{font-size:.68em;line-height:0;vertical-align:.5em}

/* top bar: wordmark, centred nav, one action */
.top{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:60px}
.logo{display:inline-flex;align-items:baseline;text-decoration:none;font:500 21px/1 var(--mono);letter-spacing:-.02em;justify-self:start;color:var(--ink)}
.nav{display:flex;gap:28px;font:14px/1 var(--mono)}
.nav a{text-decoration:none;color:var(--muted)}.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.top .btn{justify-self:end}
@media(max-width:640px){.top .wrap{grid-template-columns:auto 1fr}.top .btn{display:none}.nav{justify-self:end;gap:14px;font-size:13px}.logo{font-size:19px}}
/* phones (10-26): with use cases and blog in the nav, ocp and github stay in the footer only, and no link wraps */
@media(max-width:520px){.nav a{white-space:nowrap}.nav a[href^="https:"]{display:none}}

.btn{display:inline-block;padding:9px 16px;border:1px solid var(--ink);text-decoration:none;font:500 14px/1.2 var(--mono);white-space:nowrap}
.btn:hover{background:var(--soft)}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:#000}
.btn-sm{padding:7px 12px;font-size:13px}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* hero: the wordmark, the install line and the facts left; the line, the lede and the actions right */
.hero{padding:clamp(56px,10vh,112px) 0 clamp(72px,12vh,120px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(40px,5vw,64px);align-items:center}
h1{font-weight:500;font-size:clamp(44px,5.4vw,78px);line-height:1.03;letter-spacing:-.035em;margin:0 0 30px}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:44px}}
.hero p{font-size:19px;color:var(--ink-2);max-width:35em;margin:0 0 30px}
.hero .cmdline{margin:0 0 22px}
.hero .hero-facts{font:13px/1.5 var(--mono);color:var(--muted);margin:22px 0 0}




/* the CLI box in the why section's side column (cli-boxes-1012/make_boxes.py writes it): a title bar, the command, a
   summary of what it printed with the pick's ranges, a note in the body sans, and both outputs on demand. The tables and
   the list read the same without CSS; the range bars and their scale ends (data-from, data-to) are drawn here only */
.cli{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.tb{margin:0;border:1px solid var(--rule);background:#fff;--padx:16px}
.tb figcaption{display:flex;align-items:baseline;gap:10px;padding:10px var(--padx);border-bottom:1px solid var(--rule);background:var(--soft);font:14.5px/1.4 var(--sans);color:var(--ink-2)}
.tb figcaption b{font:500 13.5px/1 var(--mono);color:var(--ink)}
.tb .term{padding:14px var(--padx) 12px;font:13px/1.5 var(--mono);color:var(--ink-2);overflow-wrap:break-word}
.tb .cmd{margin:0 0 10px;padding-left:2ch;text-indent:-2ch;font:500 13px/1.5 var(--mono);color:var(--ink);white-space:pre-wrap}
.tb .p{color:var(--accent);user-select:none}
.tb .ctx{margin:0 0 8px;max-width:none;font:inherit}
.tb table{width:100%;border-collapse:collapse;font:inherit}
.tb th,.tb td{padding:1px 0 1px 1.5ch;text-align:left;font-weight:400;white-space:nowrap;vertical-align:baseline}
.tb th:first-child,.tb td:first-child{padding-left:0}
.tb thead th{color:var(--muted)}
.tb .n{text-align:right}
.tb .nt{color:var(--muted)}
.tb tr.k td{background:rgba(var(--hue),.08);color:var(--ink);font-weight:500}
.tb tr.k .nt{color:var(--accent)}
.tb .rg{margin-top:9px}
.tb .rg th[scope=row]{white-space:normal;color:var(--ink)}
.tb .rg td{color:var(--ink)}
.tb .bar td{padding:0 0 7px}
.tb .scale{display:flex;align-items:center;gap:1ch;font:11.5px/1 var(--mono);color:var(--muted)}
.tb .scale::before{content:attr(data-from)}
.tb .scale::after{content:attr(data-to)}
.tb .axis{position:relative;flex:1;height:12px}
.tb .axis::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:var(--rule)}
.tb .rng{position:absolute;top:2px;height:8px;background:rgba(var(--hue),.32)}
.tb .est{position:absolute;top:1px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #fff}
.tb dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 1.5ch;margin:12px 0 0}
.tb dt{color:var(--accent);font-weight:500}
.tb dd{margin:0;color:var(--ink)}
.tb .fn{margin:0;max-width:none;padding:11px var(--padx) 13px;border-top:1px solid var(--rule);font:14.5px/1.55 var(--sans);color:var(--ink-2)}
.tb .fn b{font-weight:500;color:var(--ink)}
.tb .full{border-top:1px solid var(--rule)}
.tb .full summary{padding:9px var(--padx);font:13px/1.4 var(--mono);color:var(--ink-2);cursor:pointer}
.tb .full summary:hover{color:var(--ink)}
.tb .full[open] summary{border-bottom:1px solid var(--rule)}
.tb .full pre{margin:0;max-height:24em;overflow:auto;padding:12px var(--padx);background:var(--soft);font:11.5px/1.55 var(--mono);color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.tb .full .fn{font-size:13.5px}
.tb .full pre+pre,.tb .full .fn+pre{border-top:1px solid var(--rule)}
.cli-note{margin:14px 0 0;max-width:none;font:14px/1.55 var(--sans);color:var(--ink-2)}
@media(max-width:480px){.tb{--padx:12px}.tb .term,.tb .cmd{font-size:12px}.tb .wf{font-size:11.5px}.tb .wf th,.tb .wf td{padding-left:1.2ch}.tb .fn{font-size:14px}}

/* sections */
.section{padding:clamp(72px,12vh,124px) 0;border-top:1px solid var(--rule)}
.label{font:500 13px/1 var(--mono);color:var(--accent);margin:0 0 18px;letter-spacing:.02em}
h2{font-weight:500;font-size:clamp(34px,4.2vw,54px);line-height:1.06;letter-spacing:-.028em;margin:0 0 22px}
.lead{font-size:18.5px;color:var(--ink-2);max-width:36em;margin:0 0 28px}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,88px);align-items:start}
.split .side{position:sticky;top:96px}
@media(max-width:900px){.split{grid-template-columns:1fr}.split .side{position:static}}
.more{font:500 14.5px/1.4 var(--mono);color:var(--accent);text-decoration:none}.more:hover{text-decoration:underline}
.links-row{display:flex;flex-wrap:wrap;gap:8px 22px}

/* the install line */
.cmdline{display:flex;align-items:center;gap:14px;border:1px solid var(--rule);background:var(--soft);padding:10px 10px 10px 14px;font:14px/1.3 var(--mono);color:var(--ink-2);max-width:28em}
.cmdline span{flex:1;white-space:nowrap;overflow-x:auto}
.cmdline b{color:var(--accent);font-weight:500}
.cmdline button{font:500 12.5px/1 var(--mono);border:1px solid var(--rule);background:#fff;padding:6px 9px;cursor:pointer;color:var(--ink-2)}
.cmdline button:hover{border-color:var(--ink)}

/* the loop, step by step: text on the left (it stays in view), its figure on the right */
.steps{display:grid;gap:clamp(56px,9vh,96px);margin-top:clamp(36px,6vh,56px)}
.step{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,5vw,72px);align-items:start}
.step .side{position:sticky;top:96px}
.step h3{font-weight:500;font-size:clamp(23px,2.3vw,28px);line-height:1.22;letter-spacing:-.018em;margin:0 0 16px}
.step h3 .no{font:500 .62em/1 var(--mono);color:var(--accent);vertical-align:.28em;margin-right:.5em;letter-spacing:0}
.step .body,.body{color:var(--ink-2);margin:0 0 16px;max-width:36em}
.def{font-size:14.5px;color:var(--muted);margin:0;max-width:36em}
.step .visual{margin:0}
@media(max-width:900px){.step{grid-template-columns:1fr;gap:24px}.step .side{position:static}}
.figcap{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:12px 0 0}
.figcap b{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-right:.5em}


/* blog cards */
.posts{display:grid;gap:18px}
.post{position:relative;border:1px solid var(--rule);padding:26px 28px;transition:border-color .2s}
.post:hover{border-color:var(--ink)}
.post .meta{display:flex;align-items:center;gap:12px;font:13px/1 var(--mono);color:var(--muted);margin-bottom:12px}
.tag{display:inline-block;font:12px/1 var(--mono);padding:4px 7px;border-radius:3px;background:rgba(var(--hue),.09);color:var(--accent)}
.tag.grey{background:var(--soft);color:var(--muted)}
.post h3{font-size:clamp(21px,2.3vw,25px);font-weight:500;letter-spacing:-.015em;line-height:1.25;margin:0 0 8px}
.post h3 a{text-decoration:none}.post h3 a::after{content:"";position:absolute;inset:0}
.post p{color:var(--ink-2);margin:0 0 14px}
.post .by-line{font:13px/1.4 var(--mono);color:var(--accent)}
.empty{color:var(--muted)}

/* contact */
.mail{font:500 clamp(22px,2.8vw,32px)/1.2 var(--mono);text-decoration:none;border-bottom:2px solid rgba(var(--hue),.25)}
.mail:hover{border-color:var(--accent)}

/* footer: name and line, then two columns */
.foot{border-top:1px solid var(--rule);padding:48px 0 56px;font:13.5px/1.5 var(--mono);color:var(--muted)}
.foot .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
.foot .logo{font-size:18px;margin-bottom:10px}
.foot h4{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:4px 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none;color:var(--ink-2)}.foot a:hover{color:var(--ink)}
.foot .fine{margin-top:22px;font-size:12.5px}
@media(max-width:700px){.foot .wrap{grid-template-columns:1fr 1fr}.foot .wrap>div:first-child{grid-column:1/-1}}

/* inner pages: a heading block, then the content */
.page-head{padding:clamp(56px,10vh,104px) 0 clamp(28px,5vh,48px)}
.page-head h1{font-size:clamp(38px,5vw,64px);line-height:1.04;letter-spacing:-.03em;margin:0 0 20px}
.page-head .lead a{color:var(--accent);text-underline-offset:3px}
.listing{padding:0 0 clamp(72px,12vh,124px)}
.listing .posts{max-width:820px}
/* a text page under a heading block (privacy, 10-16): the post's text styles, set from the page edge like the other inner pages */
.article.page-text{margin:0;padding:0 0 clamp(72px,12vh,124px)}

/* How it works: contents on the left, the sections on the right */
.doc{display:grid;gap:40px;grid-template-columns:minmax(0,1fr);padding-bottom:clamp(72px,12vh,124px)}
@media(min-width:960px){.doc{grid-template-columns:14rem minmax(0,1fr);gap:clamp(40px,6vw,88px)}.toc{position:sticky;top:96px;align-self:start}}
.toc .label{margin-bottom:14px}
.toc ol{margin:0;padding-left:2.1em;font:13.5px/1.5 var(--mono);display:grid;gap:6px;color:var(--muted)}
.toc a{color:var(--ink-2);text-decoration:none}.toc a:hover{color:var(--accent)}
.doc article section{padding:40px 0;border-top:1px solid var(--rule)}
.doc article section:first-child{border-top:0;padding-top:0}
.doc article h2{font-size:clamp(26px,2.8vw,34px);line-height:1.15;letter-spacing:-.022em;margin:0 0 18px;max-width:24em}
.doc article h2 code{font-size:.85em;background:none;padding:0}
.doc article p,.doc article li{color:var(--ink-2);max-width:42rem}
.doc article p.label{color:var(--accent)}
.doc article li{margin:0 0 8px}
.doc article strong{color:var(--ink);font-weight:500}
.doc article a{color:var(--accent);text-underline-offset:3px}
.small{font-size:14.5px}.muted{color:var(--muted)}

/* blog post */
.article{max-width:720px;margin:0 auto;padding:clamp(48px,9vh,96px) var(--pad) clamp(64px,10vh,112px)}
.article .meta{display:flex;align-items:center;gap:12px;font:13px/1 var(--mono);color:var(--muted);margin:0 0 22px}
.article h1{font-size:clamp(34px,4.4vw,52px);line-height:1.08;letter-spacing:-.03em;margin:0 0 20px}
.article .summary{font-size:19px;color:var(--ink-2);margin:0 0 36px;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.article .body-md{font-size:17.5px;line-height:1.7}
.article .body-md>*{margin:0 0 22px}
.article .body-md h2{font-size:clamp(25px,2.6vw,31px);line-height:1.2;letter-spacing:-.02em;margin:44px 0 16px}
.article .body-md h3{font-size:21px;font-weight:500;letter-spacing:-.01em;margin:34px 0 12px}
.article .body-md a{color:var(--accent);text-underline-offset:3px}
.article .body-md strong{font-weight:600}
.article .body-md ul,.article .body-md ol{padding-left:1.3em}
.article .body-md li{margin:0 0 8px}
.article .body-md blockquote{margin-left:0;padding:2px 0 2px 20px;border-left:2px solid var(--accent);color:var(--ink-2)}
.article .body-md pre{background:var(--soft);border:1px solid var(--rule);padding:14px 16px;overflow-x:auto;font-size:14px;line-height:1.55}
.article .body-md hr{border:0;border-top:1px solid var(--rule);margin:40px 0}
.article .body-md img{max-width:100%;height:auto}
.article .body-md figure{margin:30px 0}
.article .body-md figcaption{font-size:14.5px;color:var(--muted);margin-top:10px}
.article .post-end{margin-top:48px;padding-top:24px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:13.5px/1.4 var(--mono)}
.article .post-end a{color:var(--accent);text-decoration:none}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}


/* the home page (P4, 10-14), round 5's content in this design: the hero is the wordmark with round 5's line beside it.
   "look": "column" (build.py wraps the sections in .col) sets every section in one reading column, each figure under its
   text, as round 5 read */
.hero-mark .wrap{align-items:center}
.hero .mark{font:500 clamp(58px,8.6vw,124px)/.92 var(--mono);letter-spacing:-.045em;color:var(--accent);margin:0}
.hero .tagline{font:500 clamp(28px,2.9vw,40px)/1.14 var(--sans);letter-spacing:-.025em;color:var(--ink);margin:0 0 22px}
@media(max-width:900px){.hero .mark{font-size:clamp(58px,18vw,124px)}}
/* the hero's two groups (10-16), each centred against the other: the wordmark with the install line and the facts
   centred under it, and the line, the lede and the actions. On phones the groups open into one column read as
   wordmark, line, lede, install line, actions, facts, with the same spacing as before */
@media(min-width:901px){
  .hero-mark .wrap{grid-template-columns:auto minmax(0,1fr)}
  .hero-mark .brand{display:grid;justify-items:center;row-gap:30px;text-align:center}
  .hero-mark .cmdline{width:28em;max-width:100%;margin:0 auto 22px;text-align:left}
  .hero-mark .hero-facts{margin:22px auto 0}
}
@media(max-width:900px){
  .hero-mark .wrap{row-gap:0}
  .hero-mark .brand,.hero-mark .get,.hero-mark .pitch{display:contents}
  .hero-mark .mark{margin-bottom:44px}
  .hero-mark .tagline{order:1}.hero-mark .tagline+p{order:2}.hero-mark .cmdline{order:3}.hero-mark .actions{order:4}.hero-mark .hero-facts{order:5}
}
.col{--col:760px}
.col .section>.wrap{max-width:calc(var(--col) + 2*var(--pad))}
.col .split,.col .step{grid-template-columns:minmax(0,1fr);gap:28px}
.col .split .side,.col .step .side{position:static}
.col .what-cli{margin-top:8px}
/* centred (10-19, replaces 10-16's one left edge): every home section sits in one 760 px column on the page's centre
   line, the hero's centre line; the text inside it stays left-aligned for reading */
/* (d) the hero in the same column (10-19): from tablet width up, the hero's two groups open into one centred column the
   sections' width, in the phone's order (wordmark, line, lede, install line, actions, facts); phones keep their layout */
.hero-mark{--col:760px}
@media(min-width:641px){
  .hero-mark .wrap{grid-template-columns:minmax(0,1fr);row-gap:0;justify-items:center;text-align:center;max-width:calc(var(--col) + 2*var(--pad))}
  .hero-mark .brand,.hero-mark .get,.hero-mark .pitch{display:contents}
  .hero-mark .mark{margin-bottom:44px}
  .hero-mark .tagline{order:1}.hero-mark .tagline+p{order:2;margin-left:auto;margin-right:auto}
  .hero-mark .cmdline{order:3;width:28em;max-width:100%;margin:0 auto 22px;text-align:left}
  .hero-mark .actions{order:4;justify-content:center}.hero-mark .hero-facts{order:5;margin:22px auto 0}
}