/* ============================================================================
   Model Chief -- the whole site, in the /studio/ homepage's design language.

   Apple's proportions in the channel's two colours, the cornflower blue and the cream
   of the Model Chief logo. Every page is made of the same few parts, so the resources
   and the blog read as one site:

     nav            64px (56 on phones), sticky, frosted; a hairline once the page scrolls
     hero           the home page's first screen: exactly one window tall, the claim over
                    the newest video
     hsec           a home page section: centred head, then the videos' files or the posts
     unit           full-width band (navy or cream); the home page's video
     tile           two-up, 580 tall; the home page's blog posts
     page head      the centred title at the top of every other page
     res            one file from a video: head, picture, how to use it
     prose          the blog's reading column, 692px

   DIMENSIONS started as Apple's, measured off apple.com at 1440 wide: nav 44, units 692 with
   12px seams, headline 56/60 weight 600 at 56px from the top, subhead 28, 44px buttons;
   two-up tiles 580 tall with 12px gutters, headline 40, subhead 21, 36px buttons; reading
   width 980; everything steps down at 1068 and 734. The nav and the home page have since
   grown past them: a 44px bar with 12px links read as thin, and a hero that stopped short of
   the fold left a strip of the next section showing, so both now fit the window instead.

   Type follows Inter's own Dynamic Metrics curve, which settles at about -0.022em for
   headlines. Motion is arrival only, plus reveal-on-scroll done in CSS where the browser
   runs it off the main thread, and nothing at all under reduced motion.
   ========================================================================= */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-opsz-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-opsz-latin-italic.woff2") format("woff2");
}

/* ---------------------------------------------------------------- palette
   Two logo colours. The logo blue (#79A9EE) is too light to carry text on cream (2.3:1),
   so it stays an accent and a deeper step of the same hue does the work of links and
   buttons. Ink is a navy, not a black, so the page stays in the blue family end to end. */
:root {
  --cream-25:  #FDFBF6;
  --cream-50:  #FBF8F2;   /* canvas, and the 12px seams between units */
  --cream-100: #F4EEE2;   /* light units, alternate sections */
  --cream-200: #EAE1CF;
  --cream-ink: #F4EEDB;   /* the logo cream: type on navy (14.8:1) and on blue (5.0:1) */

  --blue-50:  #EEF3FC;
  --blue-100: #DCE7FA;
  --blue-300: #A9C6F4;
  --blue-400: #79A9EE;    /* the logo blue: accents; on navy 7.1:1 */
  --blue-600: #2E66C8;    /* actions on cream, 5.1:1 */
  --blue-700: #2554A8;    /* hover */
  --navy:     #101B30;
  --navy-2:   #18263F;

  --ink:   #14203A;       /* 15.3:1 */
  --ink-2: #5B6474;       /* 5.6:1 */
  --ink-3: #7A8190;       /* 3.7:1, display sizes only */
  --line:  rgba(20, 32, 58, 0.10);
  --line-dark: rgba(244, 238, 219, 0.14);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Cascadia Code", Consolas, monospace;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(20px, 4vw, 44px);

  --nav: 64px;
  --unit-h: 692px;
  --unit-head: 56px;  --unit-head-lh: 60px;  --unit-sub: 28px;  --unit-top: 56px;
  --tile-h: 580px;
  --tile-head: 40px;  --tile-sub: 21px;  --tile-top: 54px;
  --section-pad: 128px;
  --seam: 12px;
  --track-head: -0.022em;
  --shadow-card: 0 0 0 1px var(--line), 0 24px 50px -30px rgba(20, 32, 58, 0.35);
}
@media (max-width: 1068px) {
  :root {
    --unit-h: 580px; --unit-head: 48px; --unit-head-lh: 52px; --unit-sub: 24px; --unit-top: 48px;
    --tile-h: 490px; --tile-head: 32px; --tile-sub: 19px; --tile-top: 44px;
    --section-pad: 104px;
  }
}
@media (max-width: 734px) {
  :root {
    --nav: 56px;
    --unit-h: 520px; --unit-head: 32px; --unit-head-lh: 36px; --unit-sub: 19px; --unit-top: 44px;
    --tile-h: 500px; --tile-head: 28px; --tile-sub: 17px; --tile-top: 44px;
    --section-pad: 80px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 16px); }
body {
  background: var(--cream-50); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.47; letter-spacing: -0.013em;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* short pages still end on the footer, not on a strip of canvas under it */
  min-height: 100svh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
a { color: inherit; text-decoration: none; }
img, svg, canvas, video { display: block; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; border-radius: 8px; }
.on-dark :focus-visible, .on-blue :focus-visible { outline-color: var(--cream-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), 980px); margin-inline: auto; }
.wrap--text { width: min(100% - 2 * var(--gutter), 692px); }
.wrap--wide { width: min(100% - 2 * var(--gutter), 1180px); }
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 60; padding: 10px 16px; border-radius: 980px;
  background: var(--ink); color: #fff; font-size: 14px;
}
.skip:focus { top: 8px; }

/* ---------------------------------------------------------------- nav: 64px, frosted
   The logo mark and the name on the left; the two places on the site, then Subscribe, on the
   right. Links are 15px with a pill behind the one you're on. The hairline under the bar only
   appears once the page has scrolled, so the first screen reads as one piece. */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav);
  background: rgba(251, 248, 242, 0.82);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 transparent; transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); background: rgba(251, 248, 242, 0.9); }
/* Over a full-width navy band (the home page's resources) the bar turns navy too: frosted
   cream over navy came out as a flat grey strip. site.js sets .is-dark while the band sits
   under the bar. The logo tile inverts, so the navy tile doesn't vanish into the navy bar. */
.nav__brand { transition: color 0.3s var(--ease); }
.nav__mark rect, .nav__mark path { transition: fill 0.3s var(--ease); }
.nav.is-dark { background: rgba(16, 27, 48, 0.8); box-shadow: 0 1px 0 rgba(244, 238, 219, 0.08); }
.nav.is-dark .nav__brand { color: var(--cream-ink); }
.nav.is-dark .nav__mark { box-shadow: none; }
.nav.is-dark .nav__mark rect { fill: #F4EEDB; }
.nav.is-dark .nav__mark path { fill: #101B30; }
.nav.is-dark .nav__links a:not(.btn) { color: rgba(244, 238, 219, 0.74); }
.nav.is-dark .nav__links a:not(.btn):hover { color: var(--cream-ink); background: rgba(244, 238, 219, 0.08); }
.nav.is-dark .nav__links a[aria-current="page"] { color: var(--cream-ink); background: rgba(244, 238, 219, 0.12); }
.nav.is-dark .btn--fill { background: var(--blue-400); border-color: var(--blue-400); color: var(--navy); }
.nav.is-dark .btn--fill:hover { background: var(--blue-300); border-color: var(--blue-300); }
.nav.is-dark :focus-visible { outline-color: var(--cream-ink); }

/* small things that make it feel made: selected text in the brand's blue, no grey tap box
   on phones (links and buttons have their own pressed states), and the rubber-band area
   past either end of the page in the colour of the end it's next to */
::selection { background: rgba(46, 102, 200, 0.18); }
.on-dark ::selection { background: rgba(121, 169, 238, 0.36); color: #fff; }
html { -webkit-tap-highlight-color: transparent; background: linear-gradient(var(--cream-50) 50%, var(--cream-100) 50%); }
@media (hover: none) {
  .rtile, .bcard__link, .pcard__link, .poster, .hero__eyebrow { transition: opacity 0.15s var(--ease); }
  .rtile:active, .bcard__link:active, .pcard__link:active, .poster:active, .hero__eyebrow:active { opacity: 0.82; }
}
.nav__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav__brand { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 650; letter-spacing: -0.024em; color: var(--ink); }
.nav__mark { width: 32px; height: 32px; flex: none; border-radius: 9px; box-shadow: 0 6px 14px -8px rgba(16, 27, 48, 0.55); }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a:not(.btn) {
  display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 980px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink-2);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav__links a:not(.btn):hover { color: var(--ink); background: rgba(20, 32, 58, 0.05); }
.nav__links a[aria-current="page"] { color: var(--ink); background: rgba(20, 32, 58, 0.07); }
.btn--nav { height: 38px; margin-left: 10px; padding: 0 17px 0 14px; gap: 8px; font-size: 15px; font-weight: 500; }
.btn--nav svg { width: 20px; height: 20px; flex: none; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 980px; border: 1px solid var(--blue-600); cursor: pointer;
  font-family: inherit; font-weight: 400; white-space: nowrap; letter-spacing: -0.01em;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn .i { width: 17px; height: 17px; margin-left: -3px; flex: none; }
.btn--fill { background: var(--blue-600); color: #fff; }
.btn--fill:hover { background: var(--blue-700); border-color: var(--blue-700); }
.btn--line { background: transparent; color: var(--blue-600); }
.btn--line:hover { background: var(--blue-600); color: #fff; }
.btn--lg { height: 44px; padding: 0 21px; font-size: 17px; }
.btn--md { height: 36px; padding: 0 17px; font-size: 14px; }
.btn--md .i { width: 15px; height: 15px; }
.btn--xs { height: 26px; padding: 0 12px; font-size: 12px; }
.btn.is-done { background: var(--ink); border-color: var(--ink); color: #fff; }
.on-dark .btn--fill { background: var(--blue-400); border-color: var(--blue-400); color: var(--navy); }
.on-dark .btn--fill:hover { background: var(--blue-300); border-color: var(--blue-300); }
.on-dark .btn--line { border-color: var(--blue-400); color: var(--blue-400); }
.on-dark .btn--line:hover { background: var(--blue-400); color: var(--navy); }

.more {
  display: inline-flex; align-items: center; gap: 4px; color: var(--blue-600); font-size: 17px;
}
.more::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s var(--ease);
}
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.more:hover::after { transform: translateX(2px) rotate(45deg); }
.on-dark .more { color: var(--blue-400); }

.copy-btn {
  flex: none; height: 28px; padding: 0 13px; border-radius: 980px; cursor: pointer;
  border: 1px solid var(--line); background: var(--cream-25); color: var(--ink);
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.copy-btn:hover { background: var(--cream-100); }
.copy-btn.is-done { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

/* ---------------------------------------------------------------- hero: the first screen
   The claim, alone, exactly one window tall under the nav at every size: the section ends
   where the screen does. No picture of any one video, since a new one comes out every week;
   the type is the picture, scaled by the window's width and height together so it fills a
   tall screen and still fits a short one. A light glow sits behind it, and a small arrow at
   the bottom says there's more below, now nothing peeks up over the fold to say it. */
.hero {
  --hero-fs: clamp(44px, min(7.4vw, 10.6vh), 118px);
  position: relative; isolation: isolate; overflow: clip;
  min-height: calc(100svh - var(--nav));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(40px, 7vh, 88px) 0 clamp(88px, 13vh, 132px); text-align: center;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 46% at 50% 46%, rgba(121, 169, 238, 0.17), rgba(121, 169, 238, 0.05) 60%, transparent 80%),
    linear-gradient(to bottom, var(--cream-50), var(--cream-25) 70%, var(--cream-50));
}
.hero__text { width: min(100% - 2 * var(--gutter), 1180px); }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 16px 0 14px;
  border-radius: 980px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 22px -14px rgba(20, 32, 58, 0.35);
  font-size: 14px; font-weight: 600; letter-spacing: -0.008em; color: var(--ink);
  transition: box-shadow 0.25s var(--ease);
}
.hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 4px var(--blue-100); }
.hero__eyebrow .soft { color: var(--ink-2); font-weight: 500; }
.hero__eyebrow:hover { box-shadow: 0 0 0 1px rgba(46, 102, 200, 0.4), 0 8px 22px -14px rgba(20, 32, 58, 0.35); }
.hero__title {
  margin: clamp(20px, 3.4vh, 32px) auto 0;
  font-size: var(--hero-fs); font-weight: 650; line-height: 1.01; letter-spacing: -0.038em;
  text-wrap: balance;
}
/* one sentence per line wherever there's room, so the grey never starts mid-line */
.hero__title .soft { display: block; color: var(--ink-3); }
.hero__sub {
  margin: clamp(18px, 3vh, 30px) auto 0; max-width: 32em;
  font-size: clamp(19px, min(1.8vw, 2.9vh), 26px); line-height: 1.36; letter-spacing: -0.02em; color: var(--ink-2);
  text-wrap: balance;
}
.hero__cta { margin-top: clamp(28px, 4.6vh, 44px); display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero__cta .btn--lg { height: 50px; padding: 0 26px; font-size: 18px; }
.hero__cta .more { font-size: 18px; }
.hero__next {
  position: absolute; left: 50%; bottom: clamp(24px, 4vh, 40px); transform: translateX(-50%);
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); background: rgba(255, 255, 255, 0.5);
  transition: color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.hero__next:hover { color: var(--blue-600); box-shadow: inset 0 0 0 1px rgba(46, 102, 200, 0.4); background: #fff; }
.hero__next svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .hero__next svg { animation: nudge 2.4s var(--ease) 1.6s infinite; }
}
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(4px); } }

/* ---------------------------------------------------------------- units: full width */
.units { display: grid; gap: var(--seam); }
.unit {
  /* clip, not hidden: hidden makes a scroll container, and every view() timeline inside
     it then measures against a box that never scrolls and freezes */
  position: relative; overflow: hidden; overflow: clip; height: var(--unit-h);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--unit-top) 24px 0;
}
.unit__eyebrow { margin-bottom: 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--blue-600); }
.unit__head { font-size: var(--unit-head); line-height: var(--unit-head-lh); font-weight: 600; letter-spacing: var(--track-head); text-wrap: balance; }
.unit__sub { margin-top: 6px; font-size: var(--unit-sub); line-height: 1.2; letter-spacing: -0.016em; max-width: 30ch; text-wrap: balance; }
.unit__cta { margin-top: 20px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }
.unit--navy { background: var(--navy); color: var(--cream-ink); }
.unit--navy .unit__sub { color: rgba(244, 238, 219, 0.74); }
.unit--navy .unit__eyebrow { color: var(--blue-400); }
.unit--cream { background: var(--cream-100); }

/* The home page's video: a unit that grows to hold its poster and its files */
.unit--feature { height: auto; padding-bottom: 64px; }
.feature__art { position: relative; margin-top: 46px; width: min(760px, 100%); }
/* a faint atmosphere, so the poster sits in light rather than on flat navy */
.feature__art::before {
  content: ""; position: absolute; inset: -14% -10% 8%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(121, 169, 238, 0.22), rgba(121, 169, 238, 0.06) 62%, transparent);
}
.feature__files { position: relative; list-style: none; padding: 0; margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.feature__files a {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 17px 0 14px;
  border-radius: 980px; font-size: 15px; color: var(--cream-ink);
  background: rgba(244, 238, 219, 0.06); box-shadow: inset 0 0 0 1px var(--line-dark);
  transition: background-color 0.2s var(--ease);
}
.feature__files a:hover { background: rgba(244, 238, 219, 0.14); }
.feature__files .i { width: 18px; height: 18px; color: var(--blue-400); }

/* ---------------------------------------------------------------- the video poster */
.poster {
  position: relative; display: block; isolation: isolate; overflow: hidden;
  border-radius: 18px; background: var(--navy-2);
  box-shadow: 0 0 0 1px rgba(20, 32, 58, 0.08), 0 30px 70px -38px rgba(10, 18, 36, 0.6);
}
.on-dark .poster { box-shadow: 0 0 0 1px rgba(244, 238, 219, 0.10), 0 40px 80px -36px rgba(0, 0, 0, 0.7); }
.poster img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.7s var(--ease-out); }
/* The play control sits in the corner, where streaming posters put it. Centred, it
   landed on the thumbnail's own title and covered half of "ComfyUI". */
.poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 14, 28, 0.32), transparent 34%);
}
.poster__play {
  position: absolute; right: 16px; bottom: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 17px 0 13px;
  border-radius: 980px; background: rgba(244, 238, 219, 0.95); color: var(--navy);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  box-shadow: 0 10px 28px -8px rgba(8, 14, 28, 0.6);
  transition: transform 0.35s var(--ease-out), background-color 0.35s var(--ease);
}
.poster__play svg { width: 17px; height: 17px; }
.poster:hover img { transform: scale(1.025); }
.poster:hover .poster__play { transform: scale(1.05); background: #fff; }
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------- home sections
   After the hero, the home page has two jobs and one section for each: the files from every
   video (a navy band), then the blog (cream). Each opens with the same centred head. */
.hsec { padding: clamp(84px, 10vw, 140px) 0; }
.hsec--navy { background: var(--navy); color: var(--cream-ink); }
.hsec__head { max-width: 860px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.hsec__eyebrow { margin-bottom: 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--blue-600); }
.hsec--navy .hsec__eyebrow { color: var(--blue-400); }
.hsec__title { font-size: clamp(34px, 4.8vw, 64px); line-height: 1.05; font-weight: 640; letter-spacing: -0.033em; text-wrap: balance; }
.hsec__title .soft { display: block; color: var(--ink-3); }
.hsec--navy .hsec__title .soft { color: rgba(244, 238, 219, 0.56); }
.hsec__more { margin-top: clamp(36px, 4vw, 52px); text-align: center; }

/* One video: what it is on the left, its four files on the right. The poster is already the
   hero's picture, so here the files are the picture. */
.rcard {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 60px); align-items: center;
  padding: clamp(24px, 4vw, 56px); border-radius: clamp(24px, 2.6vw, 34px);
  background: var(--navy-2); box-shadow: inset 0 0 0 1px var(--line-dark);
}
.rcard + .rcard { margin-top: 20px; }
.rcard__num { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--blue-400); }
.rcard__title { margin-top: 10px; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.06; font-weight: 640; letter-spacing: -0.03em; }
.rcard__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.rcard__title .soft { display: block; margin-top: 8px; font-size: 0.56em; line-height: 1.2; font-weight: 500; letter-spacing: -0.018em; color: rgba(244, 238, 219, 0.64); }
.rcard__sum { margin-top: 18px; max-width: 34ch; font-size: 17px; line-height: 1.5; color: rgba(244, 238, 219, 0.74); }
.rcard__cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.rcard__files { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rcard__files a {
  height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: clamp(18px, 2vw, 24px); border-radius: 20px;
  background: rgba(244, 238, 219, 0.045); box-shadow: inset 0 0 0 1px var(--line-dark);
  transition: background-color 0.25s var(--ease), transform 0.4s var(--ease-out);
}
.rcard__files a:hover { background: rgba(244, 238, 219, 0.09); transform: translateY(-2px); }
.rcard__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 13px; background: rgba(121, 169, 238, 0.14); color: var(--blue-400); }
.rcard__icon .i { width: 22px; height: 22px; }
.rcard__kind { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.016em; color: var(--cream-ink); }
.rcard__meta { display: block; margin-top: 3px; font-size: 14px; color: rgba(244, 238, 219, 0.6); }

/* The blog: the newest guide across the full width, the rest four across under it */
.bgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(40px, 4.4vw, 60px) clamp(18px, 2vw, 26px); }
.bcard__link { display: block; height: 100%; }
.bcard__img { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy); box-shadow: 0 0 0 1px var(--line); }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.bcard__link:hover .bcard__img img { transform: scale(1.035); }
.bcard__eyebrow { margin-top: 18px; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--blue-600); }
.bcard__title { margin-top: 7px; font-size: 21px; line-height: 1.2; font-weight: 620; letter-spacing: -0.02em; text-wrap: balance; transition: color 0.2s var(--ease); }
.bcard__link:hover .bcard__title { color: var(--blue-700); }
.bcard__sum {
  margin-top: 9px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.bgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bcard--feature { grid-column: 1 / -1; }
.bcard--feature .bcard__link { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 64px); align-items: center; }
.bcard--feature .bcard__img { border-radius: clamp(18px, 2vw, 26px); }
.bcard--feature .bcard__eyebrow { margin-top: 0; font-size: 15px; }
.bcard--feature .bcard__title { margin-top: 10px; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; font-weight: 640; letter-spacing: -0.03em; }
.bcard--feature .bcard__sum { margin-top: 14px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; -webkit-line-clamp: 4; }
.bcard--feature .more { margin-top: 22px; }
@media (max-width: 1068px) {
  .bgrid, .bgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rcard { grid-template-columns: 1fr; }
  .rcard__sum { max-width: 46ch; }
}
@media (max-width: 734px) {
  .nav__in { gap: 8px; }
  .nav__brand { gap: 9px; font-size: 17px; }
  .nav__mark { width: 28px; height: 28px; border-radius: 8px; }
  .nav__links { gap: 0; }
  .nav__links a:not(.btn) { height: 36px; padding: 0 10px; }
  /* Subscribe keeps its icon and loses its word, so the bar fits a 360px phone */
  .btn--nav { width: 38px; margin-left: 6px; padding: 0; }
  .btn--nav .nav__cta-text { display: none; }
  .hero__cta { gap: 14px 24px; }
  .bgrid, .bgrid--3 { grid-template-columns: 1fr; }
  .bcard--feature .bcard__link { grid-template-columns: 1fr; gap: 0; }
  .bcard--feature .bcard__eyebrow { margin-top: 18px; font-size: 14px; }
  .bcard--feature .bcard__title { font-size: 26px; }
}
@media (max-width: 480px) {
  .rcard__files { grid-template-columns: 1fr; }
  .rcard__files a { flex-direction: row; align-items: center; gap: 14px; }
}
@media (max-width: 380px) {
  .nav__brand { gap: 8px; font-size: 16px; }
  .nav__links a:not(.btn) { padding: 0 7px; font-size: 14px; }
  .btn--nav { width: 36px; height: 36px; margin-left: 4px; }
}
@media (max-width: 340px) {
  :root { --gutter: 14px; }
  .nav__brand { gap: 7px; font-size: 15px; }
  .nav__mark { width: 26px; height: 26px; }
  .nav__links a:not(.btn) { padding: 0 5px; }
}

/* ---------------------------------------------------------------- tiles: two up */
.grid {
  margin-top: var(--seam); padding: 0 var(--seam);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--seam);
}
.page-home .grid { margin-bottom: var(--seam); }
.tile {
  position: relative; overflow: hidden; overflow: clip; height: var(--tile-h);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--tile-top) 32px 0;
}
.tile__eyebrow { margin-bottom: 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--blue-600); }
.tile__head { font-size: var(--tile-head); line-height: 1.1; font-weight: 600; letter-spacing: var(--track-head); max-width: 16em; text-wrap: balance; }
.tile__sub { margin-top: 10px; font-size: var(--tile-sub); line-height: 1.3; letter-spacing: -0.015em; max-width: 26ch; text-wrap: balance; }
.tile__cta { margin-top: 20px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }
.tile--cream { background: var(--cream-100); }
.tile--cream .tile__sub { color: var(--ink-2); }
.tile--navy { background: var(--navy); color: var(--cream-ink); }
.tile--navy .tile__sub { color: rgba(244, 238, 219, 0.74); }
.tile--navy .tile__eyebrow { color: var(--blue-400); }

/* A blog post as a tile: the whole tile opens the post, and its picture rises from the
   bottom edge the way a product does on Apple's tiles. The art is in the flow, not pinned,
   so a two-line headline pushes it down instead of running into it. */
.tile--post { height: auto; min-height: var(--tile-h); }
.tile--post .tile__cta { position: static; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.tile--post .tile__art {
  width: 100%; margin-top: auto; padding-top: 44px; max-height: 330px;
  display: flex; justify-content: center; align-items: flex-start; overflow: clip;
}
.shot {
  width: min(560px, 88%); border-radius: 16px 16px 0 0; overflow: hidden; background: var(--navy-2);
  box-shadow: 0 0 0 1px rgba(20, 32, 58, 0.08), 0 30px 70px -30px rgba(10, 18, 36, 0.5);
  transition: transform 0.7s var(--ease-out);
}
.tile--navy .shot { box-shadow: 0 0 0 1px rgba(244, 238, 219, 0.12), 0 30px 70px -30px rgba(0, 0, 0, 0.6); }
.shot img { width: 100%; }
.tile--post:hover .shot { transform: translateY(-8px); }
.tile--post:hover .btn--fill { background: var(--blue-700); border-color: var(--blue-700); }
.tile--post.on-dark:hover .btn--fill { background: var(--blue-300); border-color: var(--blue-300); }
/* An odd number of posts opens with one tile across both columns, so none is left alone */
.tile--wide { grid-column: 1 / -1; }
.tile--wide .tile__art { max-height: 400px; }
.tile--wide .shot { width: min(780px, 80%); }

/* ---------------------------------------------------------------- page heads */
.page-head { text-align: center; padding: 96px 0 64px; }
.page-head__title {
  font-size: clamp(44px, 6.4vw, 80px); line-height: 1.04; font-weight: 620; letter-spacing: -0.032em;
  text-wrap: balance;
}
.page-head__title .soft { display: block; color: var(--ink-3); }
.page-head--video .page-head__title { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.06; }
.page-head__sub {
  margin: 20px auto 0; max-width: 33em;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.35; letter-spacing: -0.018em; color: var(--ink-2);
  text-wrap: balance;
}
.page-head__cta { margin-top: 32px; display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.page-head__meta { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.crumb {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--blue-600);
}
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumb > span { color: var(--ink-2); font-weight: 500; }
.crumb__chev { width: 7px; height: 11px; color: var(--ink-3); }

.block__title {
  margin-bottom: 40px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; font-weight: 600;
  letter-spacing: var(--track-head); text-wrap: balance;
}
.block__title .soft { color: var(--ink-3); }

/* ---------------------------------------------------------------- resources index */
.vlist { display: grid; gap: 24px; padding-bottom: var(--section-pad); }
.vcard {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: center;
  padding: 28px; border-radius: 30px; background: var(--cream-100);
}
.vcard__num { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--blue-600); }
.vcard__title { margin-top: 8px; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.14; font-weight: 600; letter-spacing: var(--track-head); text-wrap: balance; }
.vcard__title a:hover { color: var(--blue-700); }
.vcard__cta { margin-top: 26px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.flist { list-style: none; padding: 0; margin-top: 22px; border-top: 1px solid var(--line); }
.flist li { border-bottom: 1px solid var(--line); }
.flist a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 2px; }
.flist__icon { color: var(--blue-600); }
.flist__icon .i { width: 22px; height: 22px; }
.flist__kind { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; }
.flist__meta { font-size: 14px; color: var(--ink-2); text-align: right; }
.flist a:hover .flist__kind { color: var(--blue-600); }

/* ---------------------------------------------------------------- a video's page */
/* the top of a video's page: the video, and beside it what is in it */
.vtop { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.inside { padding: 6px 20px 8px; border-radius: 24px; background: var(--cream-100); }
.inside__h { padding: 14px 2px 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.inside__item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 12px; align-items: center; gap: 14px;
  padding: 12px 2px; border-top: 1px solid var(--line);
}
.inside__icon {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: #fff; color: var(--blue-600); box-shadow: 0 0 0 1px var(--line);
}
.inside__icon .i { width: 22px; height: 22px; }
.inside__text { display: flex; flex-direction: column; min-width: 0; }
.inside__kind { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; transition: color 0.2s var(--ease); }
.inside__short { font-size: 14px; color: var(--ink-2); }
.inside__go {
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 1.8px solid var(--blue-600); border-bottom: 1.8px solid var(--blue-600);
  transform: rotate(45deg); transition: transform 0.25s var(--ease);
}
.inside__item:hover .inside__kind { color: var(--blue-600); }
.inside__item:hover .inside__go { transform: translateY(3px) rotate(45deg); }

.res { padding: var(--section-pad) 0; }
.res--alt { background: var(--cream-100); }
.res__head { max-width: 780px; }
.res__kicker { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--blue-600); }
.res__num {
  display: inline-grid; place-items: center; min-width: 32px; height: 24px; padding: 0 8px; border-radius: 980px;
  background: var(--blue-50); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.res--alt .res__num { background: #fff; }
.res__title { margin-top: 12px; font-size: var(--unit-head); line-height: var(--unit-head-lh); font-weight: 600; letter-spacing: var(--track-head); text-wrap: balance; }
.res__lede { margin-top: 16px; font-size: var(--tile-sub); line-height: 1.4; letter-spacing: -0.015em; color: var(--ink-2); text-wrap: pretty; }
.res__actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.res__meta { margin-left: 6px; font-size: 14px; color: var(--ink-2); }
.res__h3 { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.res__shot { margin-top: 52px; }
.res__shot figcaption { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.fig--frame {
  border-radius: 20px; overflow: hidden; background: #0D1117;
  box-shadow: 0 0 0 1px rgba(20, 32, 58, 0.08), 0 36px 80px -44px rgba(10, 18, 36, 0.6);
}
.fig--frame img { width: 100%; }
.res__use, .res__models { margin-top: 72px; }
.res__guide { margin-top: 36px; }

.howto { list-style: none; padding: 0; margin-top: 22px; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.howto li {
  counter-increment: step; position: relative; padding: 62px 24px 24px; border-radius: 20px;
  background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 17px; line-height: 1.47;
}
.howto li::before {
  content: counter(step); position: absolute; left: 24px; top: 22px; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--blue-600); color: #fff; font-size: 14px; font-weight: 600;
}
.howto--list { grid-template-columns: 1fr; gap: 0; margin-top: 16px; border-top: 1px solid var(--line); }
.howto--list li { padding: 14px 0 14px 42px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--line); font-size: 16px; }
.howto--list li::before { left: 0; top: 13px; width: 26px; height: 26px; font-size: 13px; }
.howto code, .ticks code, .res__lede code {
  font-family: var(--mono); font-size: 0.86em; padding: 0.1em 0.36em; border-radius: 6px;
  background: var(--cream-100); box-shadow: inset 0 0 0 1px var(--line);
}
.res--alt .howto--list code, .res--alt .ticks code { background: var(--cream-25); }
kbd {
  display: inline-block; min-width: 1.8em; padding: 0.24em 0.46em; border-radius: 7px; text-align: center;
  font: 600 0.8em/1.1 var(--font); color: var(--ink); background: #fff;
  box-shadow: inset 0 -1px 0 rgba(20, 32, 58, 0.18), 0 0 0 1px var(--line);
}

/* the models a workflow needs */
.table-wrap { overflow-x: auto; }
.res__models .table-wrap { margin-top: 18px; }
.models { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.models th {
  text-align: left; padding: 0 20px 12px 0; border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.models td { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.models td:last-child, .models th:last-child { padding-right: 0; }
.models code { font-family: var(--mono); font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.models td:nth-child(2) code { color: var(--ink-2); }
.models__file { font-weight: 500; }
.models__what { display: block; margin-top: 5px; max-width: 42ch; font-size: 14px; color: var(--ink-2); }
.models .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.models__get { text-align: right; }
.models__get a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--blue-600); white-space: nowrap; }
.models__get a:hover { text-decoration: underline; text-underline-offset: 3px; }
.models__get .i { width: 14px; height: 14px; }

/* the prompt, in the same box as the home page's "Build with it." composer */
.res__split { margin-top: 52px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.promptbox {
  background: #fff; border-radius: 26px; padding: 16px 22px 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 70px -36px rgba(20, 32, 58, 0.42), 0 0 0 1px var(--line);
}
.promptbox__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.promptbox__tool { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.promptbox__tool .i { width: 18px; height: 18px; color: var(--blue-600); }
.promptbox__text { font-family: var(--font); font-size: 19px; line-height: 1.5; letter-spacing: -0.012em; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.promptbox__bar { margin-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.promptbox__bar .grow { flex: 1; }
.promptbox__send { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-600); display: grid; place-items: center; }
.promptbox__send svg { width: 16px; height: 16px; }
.res__side { display: grid; gap: 40px; align-content: start; }
.ticks { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 18px; }
.ticks li { position: relative; padding-left: 36px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.ticks li strong { color: var(--ink); font-weight: 600; }
.ticks li::before, .takeaways li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* the node's code, beside a drawing of the node */
.res__split--code { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; }
.res__split--code .res__side { position: sticky; top: calc(var(--nav) + 24px); }
.nodepic.res__shot { margin-top: 0; }
.nodepic figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.nodepic figcaption strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- code blocks */
.code {
  border-radius: 18px; overflow: hidden; background: var(--navy); color: #DCE4F2;
  box-shadow: 0 30px 60px -38px rgba(9, 18, 40, 0.6);
}
.code__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 10px 9px 18px; background: var(--navy-2); color: rgba(244, 238, 219, 0.72); font-size: 13px;
}
.code__bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code .copy-btn { background: rgba(244, 238, 219, 0.08); border-color: rgba(244, 238, 219, 0.16); color: var(--cream-ink); }
.code .copy-btn:hover { background: rgba(244, 238, 219, 0.16); }
.code .copy-btn.is-done { background: var(--blue-400); border-color: var(--blue-400); color: var(--navy); }
.code pre { margin: 0; padding: 18px 20px 20px; overflow-x: auto; font: 14px/1.65 var(--mono); tab-size: 4; font-variant-ligatures: none; }
.code code { font: inherit; color: inherit; background: none; padding: 0; box-shadow: none; }
.code .k { color: #8FB6F2; }
.code .s { color: #E9C48F; }
.code .c { color: rgba(244, 238, 219, 0.55); }   /* 5.3:1 on navy: dimmer than the code, still readable */
.code .d { color: #C9B6F2; }
.code .f { color: #FFFFFF; font-weight: 600; }
.code .n { color: #F3B184; }
.code .v { color: #B9C6DC; font-style: italic; }
.code .com { color: rgba(244, 238, 219, 0.55); font-style: italic; }
.code--file pre { font-size: 13.5px; }

/* ---------------------------------------------------------------- blog cards */
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 28px; }
.posts--index { padding-bottom: var(--section-pad); }
.pcard__link { display: block; }
.pcard__img { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy); box-shadow: 0 0 0 1px var(--line); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.pcard__link:hover .pcard__img img { transform: scale(1.03); }
.pcard__eyebrow { margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--blue-600); }
.pcard__title { margin-top: 6px; font-size: clamp(24px, 2.4vw, 28px); line-height: 1.16; font-weight: 600; letter-spacing: var(--track-head); text-wrap: balance; transition: color 0.2s var(--ease); }
.pcard__link:hover .pcard__title { color: var(--blue-700); }
.pcard__sum { margin-top: 10px; font-size: 17px; line-height: 1.47; color: var(--ink-2); text-wrap: pretty; }
.pcard__date { margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.posts--one { grid-template-columns: 1fr; }
.pcard--wide .pcard__link { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.pcard--wide .pcard__eyebrow { margin-top: 0; }
.more-sec { padding: var(--section-pad) 0; }
.next { padding: var(--section-pad) 0; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- the article */
.art-head { padding: 88px 0 44px; }
.art-head__title { font-size: clamp(36px, 5vw, 56px); line-height: 1.07; font-weight: 620; letter-spacing: -0.028em; text-wrap: balance; }
.art-head__dek { margin-top: 18px; font-size: clamp(19px, 1.9vw, 22px); line-height: 1.42; letter-spacing: -0.016em; color: var(--ink-2); text-wrap: pretty; }
.art-head__by {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.art-head__by strong { color: var(--ink); font-weight: 600; }
.art-head__author:hover strong { color: var(--blue-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art-head__role::before { content: "· "; }
.avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: var(--cream-ink); font-size: 18px; font-weight: 600;
  box-shadow: 0 0 0 4px var(--cream-50), 0 0 0 5px var(--line);
}

.prose { padding-bottom: 104px; font-size: 18px; line-height: 1.62; letter-spacing: -0.011em; }
.prose p, .prose ul:not([class]), .prose ol:not([class]) { margin: 0 0 1.1em; }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.3em; }
.prose ul:not([class]) { list-style: disc; }
.prose li { margin: 0.45em 0; padding-left: 0.2em; }
.prose li::marker { color: var(--blue-600); font-weight: 600; }
.prose h2 { margin: 2.3em 0 0.55em; font-size: clamp(28px, 3vw, 34px); line-height: 1.15; font-weight: 600; letter-spacing: var(--track-head); text-wrap: balance; }
.prose h3 { margin: 1.9em 0 0.5em; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.018em; text-wrap: balance; }
.prose strong { font-weight: 600; }
.prose a:not([class]) {
  color: var(--blue-600); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgba(46, 102, 200, 0.4);
  transition: text-decoration-color 0.2s var(--ease);
}
.prose a:not([class]):hover { text-decoration-color: currentColor; }
.prose :not(pre) > code {
  font-family: var(--mono); font-size: 0.84em; padding: 0.12em 0.38em; border-radius: 6px;
  background: var(--cream-100); box-shadow: inset 0 0 0 1px var(--line); overflow-wrap: anywhere;
}
.prose blockquote {
  margin: 1.8em 0; padding: 2px 0 2px 24px; border-left: 3px solid var(--blue-400);
  font-size: 22px; line-height: 1.45; font-weight: 500; letter-spacing: -0.016em;
}
.prose .code { margin: 1.6em 0; }

.toc { margin: 0 0 36px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.toc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 15px 20px; font-size: 17px; font-weight: 600; border-radius: 18px;
}
.toc summary::-webkit-details-marker { display: none; }
.toc__n { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.toc summary::after {
  content: ""; width: 8px; height: 8px; margin: -4px 4px 0 0;
  border-right: 1.8px solid var(--blue-600); border-bottom: 1.8px solid var(--blue-600);
  transform: rotate(45deg); transition: transform 0.25s var(--ease);
}
.toc[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.prose .toc ol { margin: 0; padding: 4px 22px 20px 42px; columns: 2; column-gap: 36px; font-size: 15px; line-height: 1.45; }
.toc li { margin: 0 0 9px; padding: 0; break-inside: avoid; }
.toc li::marker { color: var(--ink-3); font-weight: 400; font-size: 13px; }
.prose .toc a { color: var(--ink); text-decoration: none; }
.prose .toc a:hover { color: var(--blue-600); }

/* about: who makes the site, and how the guides are made */
.about__who { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.prose .about__who p { margin: 0; font-size: 17px; line-height: 1.4; }
.about__role { color: var(--ink-2); font-size: 15px; }
.prose .about__how { list-style: none; padding: 0; }
.prose .about__how li { margin: 0 0 14px; padding: 0; }
.prose .about__how strong { display: block; }

.takeaways { margin: 0 0 2.4em; padding: 28px 30px 14px; border-radius: 24px; background: var(--cream-100); }
.prose .takeaways h2 { margin: 0 0 16px; font-size: 21px; letter-spacing: -0.018em; }
.prose .takeaways ul { list-style: none; padding: 0; margin: 0; }
.prose .takeaways li { position: relative; margin: 0 0 14px; padding-left: 36px; font-size: 17px; line-height: 1.5; }

.note {
  margin: 1.8em 0; padding: 20px 24px; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px var(--line); font-size: 17px; line-height: 1.55;
}
.note__t { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--blue-600); }
.note--warn { background: #FCF2E7; box-shadow: 0 0 0 1px rgba(184, 112, 40, 0.18); }
.note--warn .note__t { color: #A1561A; }
.note--key { background: var(--blue-50); box-shadow: 0 0 0 1px rgba(46, 102, 200, 0.16); }
.note--key .note__t { color: var(--blue-700); }

.prose figure { margin: 2.2em 0; }
.prose .fig {
  border-radius: 18px; overflow: hidden; background: #0E1420;
  box-shadow: 0 0 0 1px var(--line), 0 26px 56px -38px rgba(20, 32, 58, 0.5);
}
.prose .fig img { width: 100%; }
.prose .fig--pad { padding: 28px; }
.prose .fig--center img { width: auto; max-width: 100%; margin-inline: auto; }
.prose figcaption, .compare + figcaption { margin-top: 13px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 800px) {
  /* wide figures break out of the 692px column to the 980px one */
  .prose figure.wide, .prose .viewer.wide {
    width: min(980px, 100vw - 2 * var(--gutter) - 20px);
    margin-inline: calc(50% - min(490px, 50vw - var(--gutter) - 10px));
  }
}

.table-wrap { overflow-x: auto; }
.prose .table-wrap { margin: 1.6em 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prose th { text-align: left; padding: 14px 16px; background: var(--cream-25); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.prose td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tbody tr:last-child td { border-bottom: 0; }

.prose ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 1.6em 0 2.2em; }
.prose ol.steps > li { counter-increment: s; position: relative; margin: 0; padding: 0 0 18px 54px; }
.prose ol.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue-600); color: #fff; font-size: 15px; font-weight: 600;
}
.prose ol.steps > li::after { content: ""; position: absolute; left: 15.5px; top: 42px; bottom: 8px; width: 1px; background: var(--line); }
.prose ol.steps > li:last-child::after { display: none; }
.prose ol.steps > li > h3 { margin: 2px 0 0.45em; font-size: 22px; }
.prose ol.steps figure.wide { width: auto; margin-inline: 0; }

.legend { display: flex; flex-wrap: wrap; gap: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 980px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c); }

.glossary { margin: 1.4em 0; border-top: 1px solid var(--line); }
.glossary div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.5; }
.glossary dt { font-weight: 600; }
.glossary dd { margin: 0; color: var(--ink-2); }

/* Several pictures side by side, each labelled under it: the control images, a strength row */
.prose .figrow { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 12px; }
.prose .figrow .fig { border-radius: 14px; }
.prose .figrow__cap { margin: 9px 0 0; font-size: 14px; line-height: 1.35; font-weight: 600; text-align: center; }
.prose .figrow__cap span { display: block; font-weight: 400; color: var(--ink-2); }
/* Drawn diagrams: an inline SVG on the same navy as the screenshots around it */
.prose .fig--svg { background: #101B30; }
.prose .fig--svg svg { display: block; width: 100%; height: auto; }

/* Questions people ask: every answer on show under its question. Search engines only link
   straight to an answer ("Read more") when it's visible as the page opens, not folded away. */
.faq { margin-top: 1.2em; border-top: 1px solid var(--line); }
.faq__item { padding: 22px 0 21px; border-bottom: 1px solid var(--line); }
.prose .faq__q { margin: 0 0 8px; font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; }
.faq__a { color: var(--ink-2); }
.prose .faq__a p { margin: 0; }

/* compare: one picture per setting value, a segmented control to switch */
/* full column width always: a portrait render (2:3, capped in height) sits in the middle
   of a cream plate instead of hugging the left edge with its buttons */
.compare__view { position: relative; width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--cream-100); box-shadow: 0 0 0 1px var(--line); }
.compare__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.25s var(--ease); }
.compare__view img.is-on { opacity: 1; }
.compare__badge {
  position: absolute; left: 14px; top: 14px; z-index: 1; padding: 7px 12px; border-radius: 980px;
  background: rgba(16, 27, 48, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--cream-ink); font: 500 13px/1 var(--mono);
}
.compare__controls { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.compare__label { font: 13px/1 var(--mono); color: var(--ink-2); }
.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 980px; background: var(--cream-100); box-shadow: inset 0 0 0 1px var(--line); }
.seg button {
  height: 30px; padding: 0 14px; border: 0; border-radius: 980px; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(20, 32, 58, 0.16), 0 0 0 1px var(--line); }
.compare__note { flex-basis: 100%; font-size: 14px; color: var(--ink-2); }
.compare__note:empty { display: none; }

/* the workflow viewer: the same JSON the download button gives you, drawn live */
.viewer { margin: 2.2em 0; border-radius: 20px; overflow: hidden; background: var(--navy); box-shadow: 0 30px 70px -40px rgba(10, 18, 36, 0.6); }
.viewer__bar { display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 18px; background: var(--navy-2); color: rgba(244, 238, 219, 0.66); font-size: 13px; }
.viewer__file { font-family: var(--mono); font-size: 12.5px; color: var(--cream-ink); white-space: nowrap; }
.viewer__hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__zoom { display: inline-flex; gap: 6px; }
.viewer__zoom button {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(244, 238, 219, 0.16); background: rgba(244, 238, 219, 0.06); color: var(--cream-ink);
}
.viewer__zoom button:hover { background: rgba(244, 238, 219, 0.16); }
.viewer__zoom svg { width: 15px; height: 15px; }
.viewer__stage { position: relative; height: 580px; touch-action: none; cursor: grab; outline: none; }
.viewer__stage.is-drag { cursor: grabbing; }
.viewer__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-400); }
.viewer__stage canvas { width: 100%; height: 100%; }
.viewer__tip {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); pointer-events: none;
  padding: 8px 14px; border-radius: 980px; background: rgba(244, 238, 219, 0.94); color: var(--navy);
  font-size: 13px; font-weight: 500; white-space: nowrap; transition: opacity 0.3s var(--ease);
}
.viewer__tip.is-gone { opacity: 0; }
.viewer__panel {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(340px, calc(100% - 24px));
  padding: 20px 20px 18px; overflow-y: auto; border-radius: 16px;
  background: var(--cream-25); color: var(--ink); font-size: 14px; line-height: 1.5; letter-spacing: -0.005em;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
  transform: translateX(calc(100% + 24px)); transition: transform 0.4s var(--ease-out);
}
.viewer__panel.is-open { transform: none; }
.viewer__panel h4 { padding: 0 34px 0 11px; border-left: 3px solid var(--vp-accent, var(--blue-400)); font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -0.016em; }
.viewer__panel .kind { margin: 3px 0 0 14px; font: 12px var(--mono); color: var(--ink-2); }
.viewer__panel .body { margin-top: 14px; white-space: pre-wrap; }
.viewer__panel .widgets { margin-top: 16px; border-top: 1px solid var(--line); }
.viewer__panel .widgets div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.viewer__panel .widgets span { font-family: var(--mono); color: var(--ink-2); }
.viewer__panel .widgets b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.viewer__close {
  position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--cream-100); color: var(--ink); cursor: pointer;
}
.viewer__close:hover { background: var(--cream-200); }

/* figures open full size */
.fig--zoom { position: relative; cursor: zoom-in; }
.fig__hint {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 980px; pointer-events: none;
  background: rgba(16, 27, 48, 0.74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--cream-ink); font-size: 12px; font-weight: 500; opacity: 0; transition: opacity 0.2s var(--ease);
}
.fig__hint svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fig--zoom:hover .fig__hint, .fig--zoom:focus-visible .fig__hint { opacity: 1; }
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  background: rgba(11, 18, 34, 0.95); opacity: 0; transition: opacity 0.2s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox__stage { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 24px; }
.lightbox--fit .lightbox__stage img { max-width: 100%; max-height: calc(100vh - 124px); width: auto; height: auto; cursor: zoom-in; border-radius: 10px; }
.lightbox--full .lightbox__stage { place-items: start; }
.lightbox--full .lightbox__stage img { max-width: none; cursor: zoom-out; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px 18px; color: rgba(244, 238, 219, 0.8); font-size: 14px; }
.lightbox__cap { min-width: 0; }
.lightbox__btns { display: flex; gap: 8px; flex: none; }
.lightbox__btn {
  height: 34px; padding: 0 16px; border-radius: 980px; cursor: pointer; font-size: 14px; font-weight: 500;
  border: 1px solid rgba(244, 238, 219, 0.2); background: rgba(244, 238, 219, 0.08); color: var(--cream-ink);
}
.lightbox__btn:hover { background: rgba(244, 238, 219, 0.16); }
body.is-locked { overflow: hidden; }

/* the files that go with a post, at its end */
.filesbox {
  margin-top: 64px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: center;
  padding: 18px; border-radius: 26px; background: var(--navy); color: var(--cream-ink);
}
.filesbox .poster { border-radius: 14px; }
.filesbox .poster__play { right: 10px; bottom: 10px; width: 36px; height: 36px; padding: 0; justify-content: center; }
.filesbox .poster__play span { display: none; }
.filesbox .poster__play svg { width: 15px; height: 15px; margin-left: 2px; }
.prose .filesbox p { margin: 0; }
.filesbox__eyebrow { font-size: 14px; font-weight: 600; color: var(--blue-400); }
.prose .filesbox__title { margin-top: 4px; font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -0.018em; text-wrap: balance; }
.prose .filesbox__text { margin: 6px 0 16px; font-size: 15px; line-height: 1.45; color: rgba(244, 238, 219, 0.74); }
.filesbox .btn--fill { background: var(--blue-400); border-color: var(--blue-400); color: var(--navy); }
.filesbox .btn--fill:hover { background: var(--blue-300); border-color: var(--blue-300); }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--cream-100); color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.foot__in { padding: clamp(40px, 5vw, 56px) 0 28px; }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 56px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.foot__about { max-width: 44ch; }
.foot__brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 17px; font-weight: 650; letter-spacing: -0.022em; color: var(--ink); }
.foot__brand svg { width: 28px; height: 28px; border-radius: 8px; }
.foot__nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.foot__nav a { font-size: 15px; font-weight: 500; color: var(--ink); }
.foot a:hover { color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }
.foot__base { padding-top: 22px; font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- motion
   Arrival on load, reveal on scroll, and one movement that says what its picture is
   about: the node's dropdown steps through its three images. Nothing else moves, and
   all of it is off under reduced motion. The scroll-linked part only exists where the
   browser runs it off the main thread; everywhere else the content is simply there. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .rise { animation: rise 1s var(--ease-out) both; }
  .rise.d1 { animation-delay: 0.08s; } .rise.d2 { animation-delay: 0.16s; } .rise.d3 { animation-delay: 0.24s; }
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal cubic-bezier(0.2, 0.6, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- the home page, refined
   What changed and why, so the next edit keeps it:
   - The chip above the headline carries the newest video's own thumbnail. A dot in a pill is
     the stock "announcement badge"; a real picture makes it that video.
   - Each file in the resources band shows a glimpse of itself (a crop of the graph, the
     prompt's first lines, the code's first lines) instead of an icon in a tinted square.
   - Motion is fewer, calmer things, each played once:
       the headline settles in the way the channel's video titles do (letters closing in from
       wider tracking, a light blur clearing), then the line under it, then the buttons;
       the four files and the blog cards rise in a short stagger the first time they're seen;
       the big blog picture settles from a slight zoom; buttons give under a press.
     Section headings don't move at all: they are there when you arrive. Nothing loops, the
     arrow nudges twice and stops, and all of it is off under reduced motion.
   Timings follow the usual guidance for UI motion: ease-out curves, arrivals under a second,
   staggers of 60-80ms, press feedback at 120ms, and only transform, opacity and filter move. */

/* the light behind the headline is white, not blue: a blue haze on cream read as a grey
   smudge around the type; white on cream reads as the page being lit */
.page-home .hero::before {
  background:
    radial-gradient(50% 44% at 50% 46%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.35) 55%, transparent 80%),
    linear-gradient(to bottom, var(--cream-50), var(--cream-25) 70%, var(--cream-50));
}
/* the chip: thumbnail, what it is, a hairline, which video, and a chevron that says it's a
   link. The gaps either side of the hairline are the same, which a "·" in text never was. */
.hero__eyebrow { height: 40px; padding: 0 15px 0 5px; gap: 10px; }
.hero__eyebrow .soft { display: inline-flex; align-items: center; gap: 10px; }
.hero__eyebrow .soft::before { content: ""; width: 1px; height: 14px; background: rgba(20, 32, 58, 0.14); }
.hero__eyebrow::after {
  content: ""; width: 6px; height: 6px; margin: 0 2px 0 -1px; flex: none;
  border-right: 1.6px solid var(--ink-3); border-top: 1.6px solid var(--ink-3);
  transform: rotate(45deg); transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero__eyebrow:hover::after { transform: translateX(2px) rotate(45deg); border-color: var(--blue-600); }
.hero__eyebrow { white-space: nowrap; }
/* under 375 wide the whole chip doesn't fit on one line: the thumbnail and the title stay,
   "New video" goes (still read out by screen readers) */
@media (max-width: 374px) {
  .hero__eyebrow > span:not(.soft) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hero__eyebrow .soft::before { display: none; }
}
.hero__thumb {
  width: 53px; height: 30px; flex: none; border-radius: 7px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(20, 32, 58, 0.12);
}
/* the home page's two sections end closer to their "see all" link: the full 140px under a
   single centred link left a band of empty navy at the bottom of the resources */
.page-home .hsec { padding-bottom: clamp(72px, 7.2vw, 104px); }
/* short phones (an iPhone SE is 568 tall): the claim still fits one screen */
@media (max-width: 480px) and (max-height: 700px) {
  .page-home .hero { --hero-fs: 38px; padding: 24px 0 72px; }
  .page-home .hero__title { margin-top: 18px; }
  .page-home .hero__sub { margin-top: 14px; font-size: 17px; }
  .page-home .hero__cta { margin-top: 22px; gap: 12px; }
  .page-home .hero__cta .btn--lg { height: 46px; }
  .page-home .hero__next { bottom: 16px; }
}
/* each sentence its own line, centred by flexbox: a line a few pixels wider than its box (the
   first one at 2560 wide, and both while the tracking closes in) spills evenly on both sides
   instead of hanging off to the right */
.hero__title { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 735px) {
  /* one sentence per line at every width where it fits, so the tracking can close in
     without the line re-wrapping halfway */
  .hero__l1, .hero__l2 { white-space: nowrap; }
}

/* the files, each as a glimpse of itself */
.rcard__files > li { display: flex; }
.rcard__files a.rtile {
  width: 100%; height: 100%; padding: 0; gap: 0; align-items: stretch; overflow: hidden;
  background: rgba(244, 238, 219, 0.045);
}
.rtile__art {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: #0E1420; border-bottom: 1px solid var(--line-dark);
}
.rtile__art picture, .rtile__art img { display: block; width: 100%; height: 100%; }
.rtile__art img { object-fit: cover; transition: transform 0.7s var(--ease-out); }
.rtile__art--prompt, .rtile__art--code { padding: 16px 18px 0; }
.rtile__art--prompt > span, .rtile__art--code > code {
  display: block; transition: transform 0.6s var(--ease-out);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
}
.rtile__art--prompt { background: var(--cream-25); }
.rtile__art--prompt > span {
  white-space: pre-wrap; font-size: 13px; line-height: 1.5; letter-spacing: -0.005em; color: var(--ink);
}
.rtile__art--code { background: var(--navy); }
.rtile__art--code > code {
  white-space: pre; font: 12px/1.62 var(--mono); color: #DCE4F2; font-variant-ligatures: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 96%), linear-gradient(to right, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 96%), linear-gradient(to right, #000 82%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.rtile__art--code .k { color: #8FB6F2; }
.rtile__art--code .s { color: #E9C48F; }
.rtile__art--code .d { color: #C9B6F2; }
.rtile__art--code .f { color: #FFFFFF; font-weight: 600; }
.rtile__art--code .n { color: #F3B184; }
.rtile__art--code .v { color: #B9C6DC; font-style: italic; }
.rtile__art--code .com { color: rgba(244, 238, 219, 0.45); font-style: italic; }
.rtile__text { display: block; padding: 16px 18px 18px; }
.rcard__files > li, .rcard__files a.rtile { min-width: 0; }
/* phones keep the two-by-two, just smaller: four tall tiles one under another made the band
   four screens long */
@media (max-width: 480px) {
  .rcard__files { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rcard__files a.rtile { flex-direction: column; align-items: stretch; gap: 0; border-radius: 16px; }
  /* 12px is as small as text goes anywhere on the site, previews included */
  .rtile__art--prompt, .rtile__art--code { padding: 10px 11px 0; }
  .rtile__art--prompt > span { font-size: 12px; line-height: 1.42; }
  .rtile__art--code > code { font-size: 12px; line-height: 1.5; }
  .rtile__text { padding: 11px 12px 13px; }
  .rtile .rcard__kind { font-size: 15px; }
  .rtile .rcard__meta { font-size: 12.5px; }
  /* the two buttons side by side, one a touch smaller, instead of stacked at two widths */
  .rcard__cta { gap: 10px; }
  .rcard__cta .btn--lg { flex: 1 1 auto; height: 42px; padding: 0 16px; font-size: 16px; }
}

@media (hover: hover) and (pointer: fine) {
  .rtile:hover .rtile__art img { transform: scale(1.045); }
  /* the prompt and the code scroll up a little, as if you'd started reading */
  .rtile:hover .rtile__art--prompt > span, .rtile:hover .rtile__art--code > code { transform: translateY(-10px); }
}
@media (hover: none) {
  .page-home .rcard__files a:hover { transform: none; }
  .page-home .bcard__link:hover .bcard__img img { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .btn { transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.12s var(--ease-out); }
  .page-home .btn:active { transform: scale(0.97); }

  /* the headline: letters close in from wider tracking while a light blur clears. It starts
     faint, not invisible: a browser counts a 0-opacity headline as not there yet, so the page's
     main content "appeared" only when the animation was well under way (LCP 2.6 s on a slow
     phone). On phones, where the sentences wrap, the tracking would re-wrap the lines as it
     closes in and shift the block, so there it's the blur and a small rise instead. */
  .page-home .hero__l1, .page-home .hero__l2 { animation: focus-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
  .page-home .hero__l2 { animation-delay: 0.2s; }
  @media (min-width: 735px) {
    .page-home .hero__l1, .page-home .hero__l2 { animation-name: track-in; animation-duration: 1.15s; }
  }
  .page-home .hero__eyebrow.rise { animation-duration: 0.8s; animation-delay: 0s; }
  .page-home .hero__sub.rise { animation-duration: 0.9s; animation-delay: 0.46s; }
  .page-home .hero__cta.rise { animation-duration: 0.9s; animation-delay: 0.58s; }
  .page-home .hero__next { animation: fade-in 0.8s var(--ease) 1.3s both; }
  /* the soft light behind the headline arrives with it, not before it */
  .page-home .hero::before { animation: fade-in 1.4s var(--ease) both; }
  .page-home .hero__next svg { animation: nudge 2.4s var(--ease) 2.2s 2; }

  /* first sight: the files, then the blog cards, rise in a short stagger. site.js marks
     each group once it's on screen (html.fx is its signal that it's running), so with
     scripts off nothing is ever hidden. */
  .page-home .reveal { animation: none; }
  .fx .page-home .rcard__files > li,
  .fx .page-home .bcard {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms + 60ms);
  }
  .fx .page-home .rcard__files > li { transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
  .fx .page-home .rcard.is-in .rcard__files > li,
  .fx .page-home .bcard.is-in { opacity: 1; transform: none; }
  /* the big blog picture settles from a slight zoom as it arrives */
  .fx .page-home .bcard--feature { transform: none; }
  .fx .page-home .bcard--feature .bcard__img picture { display: block; height: 100%; transform: scale(1.06); transition: transform 1.5s var(--ease-out); }
  .fx .page-home .bcard--feature.is-in .bcard__img picture { transform: none; }
}
@keyframes track-in { from { opacity: 0.2; letter-spacing: 0.03em; filter: blur(10px); } 60% { filter: blur(0); } }
@keyframes focus-in { from { opacity: 0.2; transform: translateY(8px); filter: blur(8px); } 60% { filter: blur(0); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------------------------------------------------------------- posts on phones
   Three things that read badly at phone width, and what they do instead:
   - A table becomes one card per row: the first cell is the card's title, the others follow
     with their column's name above them (data-label, added by build.py). Squeezed into
     columns, a four-column table hid its last column, and file names broke mid-word.
   - A drawn diagram keeps a readable size (its labels are 14px at 700 wide, 7px squeezed
     into a phone) and scrolls sideways, and its caption says so.
   - Screenshots can't show "Open full size" on hover without a mouse, so on touch screens
     the button is simply there. */
@media (max-width: 600px) {
  .prose .table-wrap--stack { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .prose table.stack, .prose table.stack tbody { display: block; }
  .prose table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .prose table.stack tr {
    display: block; margin: 0 0 10px; padding: 14px 16px 12px; border-radius: 16px;
    background: #fff; box-shadow: 0 0 0 1px var(--line);
  }
  .prose table.stack td { display: block; padding: 0; border: 0; font-size: 15px; }
  .prose table.stack td + td { margin-top: 8px; color: var(--ink-2); }
  .prose table.stack td:first-child { font-size: 16px; font-weight: 600; color: var(--ink); }
  .prose table.stack td:first-child code { font-weight: 500; }
  .prose table.stack td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--blue-600);
  }
  .prose table.stack td:empty { display: none; }

  .prose .fig--svg { overflow-x: auto; overscroll-behavior-x: contain; }
  .prose .fig--svg svg { width: 640px; max-width: none; }
  .prose figure:has(.fig--svg) figcaption::before { content: "Swipe sideways to see all of it. "; font-weight: 600; color: var(--ink); }
}
@media (hover: none) {
  .prose .fig--zoom:not(.figrow .fig) .fig__hint, .res__shot .fig--zoom .fig__hint { opacity: 0.94; }
}

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 1068px) {
  .feature__art { width: min(640px, 100%); }
  .res__split, .res__split--code { grid-template-columns: 1fr; gap: 44px; }
  .res__split--code .res__side { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 900px) {
  .vcard { grid-template-columns: 1fr; gap: 28px; padding: 20px 20px 28px; }
  .howto { grid-template-columns: 1fr; }
  .howto li { padding: 20px 22px 20px 64px; }
  .howto li::before { top: 18px; left: 22px; }
  .vtop { grid-template-columns: 1fr; }
  .res__split--code .res__side { grid-template-columns: 1fr; }
}
@media (max-width: 734px) {
  .hero__cta, .page-head__cta { flex-direction: column; gap: 22px; }
  .unit__cta { gap: 10px; }
  .unit__cta .btn--lg { height: 40px; padding: 0 16px; font-size: 15px; }
  .unit--feature { padding-inline: 20px; padding-bottom: 48px; }
  .feature__art { margin-top: 36px; }
  .feature__files a { height: 36px; padding: 0 14px 0 12px; font-size: 14px; }
  .grid { grid-template-columns: 1fr; padding: 0; }
  .tile { padding-inline: 22px; }
  .tile--post .tile__art { padding-top: 36px; }
  .poster__play { right: 10px; bottom: 10px; height: 34px; padding: 0 14px 0 11px; font-size: 14px; }
  .poster__play svg { width: 15px; height: 15px; }
  .page-head { padding: 64px 0 44px; }
  .inside { padding-inline: 16px; }
  .res__actions .res__meta { flex-basis: 100%; margin: 2px 0 0; }
  .posts { grid-template-columns: 1fr; gap: 44px; }
  .art-head { padding: 56px 0 36px; }
  .prose { font-size: 17px; }
  .prose .toc ol { columns: 1; }
  .takeaways { padding: 22px 20px 10px; }
  .glossary div { grid-template-columns: 1fr; gap: 2px; }
  .prose .figrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--wide .shot { width: min(560px, 88%); }
  .prose .fig--pad { padding: 16px; }
  .viewer__stage { height: 440px; }
  .code pre, .code--file pre { font-size: 12.5px; padding: 16px 16px 18px; }
  .pcard--wide .pcard__link { grid-template-columns: 1fr; gap: 0; }
  .pcard--wide .pcard__eyebrow { margin-top: 22px; }
  .viewer__hint { display: none; }
  .filesbox { grid-template-columns: 1fr; gap: 18px; padding: 14px 14px 22px; }
  .filesbox__body { padding: 0 6px; }
  /* the models table becomes one card per file */
  .models thead { display: none; }
  .models, .models tbody { display: block; }
  .models tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .models td { display: block; padding: 0; border: 0; }
  .models td:first-child { grid-column: 1 / -1; }
  .models .num { text-align: left; }
  .models td:nth-child(2) { grid-column: 1 / -1; }
  .models__get { text-align: right; }
}

/* ---------------------------------------------------------------- a video of workflows (video 3)
   One card per workflow (its result, what it does, its prompt, the picture it loads and a
   download), then the models in one list. Nothing else. */
.wfs { padding: 72px 0; }
.wfs--models { background: var(--cream-100); }
.wfs--list { padding-top: 24px; }
.wfs--list .wfgrid { margin-top: 36px; }
.wfs--models { padding-bottom: var(--section-pad); }
.wfs__title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: var(--track-head); text-wrap: balance; }
.wfs__title .soft { color: var(--ink-3); }
.wfs__lede { margin-top: 14px; max-width: 46em; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.wfs__lede a { color: var(--blue-600); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.wfs__note { margin-top: 28px; max-width: 46em; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.wfs__note strong { color: var(--ink); font-weight: 600; }

}

.mlist { list-style: none; padding: 0; margin-top: 28px; border-top: 1px solid var(--line); }
.mlist__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) auto; gap: 12px 28px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.mlist__file code { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--ink); overflow-wrap: break-word; }
.mlist__what { display: block; margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.mlist__facts { display: grid; grid-template-columns: 1.45fr 0.55fr 1fr; gap: 4px 18px; font-size: 14px; line-height: 1.4; }
.mlist__facts code { font-family: var(--mono); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.mlist__k { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.mlist__get { background: #fff; }
.mlist__get .i { width: 14px; height: 14px; margin: 0 -2px 0 0; }

.wfgrid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wf { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); scroll-margin-top: calc(var(--nav) + 20px); }
.wf__img { aspect-ratio: 16 / 10; background: var(--navy); }
.wf__img picture, .wf__img img { display: block; width: 100%; height: 100%; }
.wf__img img { object-fit: cover; }
.wf__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.wf__num { font-size: 14px; font-weight: 600; color: var(--blue-600); font-variant-numeric: tabular-nums; }
.wf__title { margin-top: 4px; font-size: 21px; line-height: 1.2; font-weight: 620; letter-spacing: -0.02em; }
.wf__text { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.wfp { margin-top: 14px; padding: 12px 14px 14px; border-radius: 14px; background: var(--cream-50); box-shadow: inset 0 0 0 1px var(--line); }
.wfp + .wfp { margin-top: 10px; }
.wfp__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.wfp__text { margin-top: 8px; max-height: 9.6em; overflow-y: auto; font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.wf__facts { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 6px; font-size: 14px; line-height: 1.4; }
.wf__facts li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; }
.wf__facts code { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.wf__k { padding-top: 1px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 3px 10px 3px 3px;
  border-radius: 10px; background: var(--cream-50); box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--mono); font-size: 12.5px; color: var(--ink); transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.pchip img { width: 28px; height: 28px; flex: none; border-radius: 7px; object-fit: cover; }
.pchip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip .i { width: 13px; height: 13px; flex: none; color: var(--ink-3); transition: color 0.15s var(--ease), transform 0.15s var(--ease); }
.pchip:hover { background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-100); }
.pchip:hover .i { color: var(--blue-600); transform: translateY(1px); }
.wf__facts li:has(.pchips) .wf__k { padding-top: 10px; }
.wf__tip { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.wf__dl { align-self: flex-start; margin-top: auto; }
.wf__facts + .wf__dl, .wf__tip + .wf__dl { margin-top: 20px; }
.wf:target { box-shadow: 0 0 0 2px var(--blue-600); }

@media (max-width: 1068px) {
  .mlist__row { grid-template-columns: minmax(0, 1fr) auto; }
  .mlist__facts { grid-column: 1 / -1; grid-row: 2; }
  .mlist__get { grid-column: 2; grid-row: 1; }
  .wfgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 734px) {
  .wfs { padding: 52px 0; }
  .wfs--list { padding-top: 8px; }
  .wfs--models { padding-bottom: 80px; }
  .mlist__row { grid-template-columns: 1fr; }
  .mlist__facts { grid-row: auto; grid-template-columns: 1fr 1fr; }
  .mlist__facts > span:first-child { grid-column: 1 / -1; }
  .mlist__get { grid-column: 1; grid-row: auto; justify-self: start; }
  .wfgrid { grid-template-columns: 1fr; gap: 18px; }
}