/* GENERATED, do not edit. Regenerate with:
     WRITE_WEB_TOKENS=1 flutter test test/tools/generate_web_ds_home_test.dart
   (run from client/brilliant).

   Source of truth: brilliant-platform "Web/Styles/default.ds"
   (the marketing DS), resolved through the real DSL pipeline. SCOPED to
   the v2 home: HomeV3Page sets data-web-ds="home" on <html> while
   mounted. Every other page keeps tokens.css (the app seed). */
:root[data-web-ds="home"] {
  --color-surface: #FEFEFE;
  --color-surface-container: #F2F2F3;
  --color-surface-container-high: #E9E9EB;
  --color-on-surface: #1C1C1E;
  --color-surface-hover: #EEEEF0;
  --color-surface-pressed: #E3E3E6;
  --color-surface-selected: #E5E5EA;
  --color-on-surface-selected: #1C1C1E;
  --color-outline: #D1D1D6;
  --color-outline-variant: #E5E5EA;
  --color-text-primary: #191C20;
  --color-text-secondary: #757679;
  --color-text-disabled: #A2A4A5;
  --color-text-display: #005FC0;
  --color-text-display-alt: #C50054;
  --color-primary: #0080FF;
  --color-on-primary: #F8F8F8;
  --color-primary-container: #F2F5FA;
  --color-secondary: #FF3377;
  --color-on-secondary: #F8F8F8;
  --color-secondary-container: #FBF3F4;
  --color-tertiary: #FF9900;
  --color-on-tertiary: #F8F8F8;
  --color-tertiary-container: #F9F4EF;
  --color-quaternary: #FFDD00;
  --color-on-quaternary: #292929;
  --color-quaternary-container: #F8F5E9;
  --color-success: #00C950;
  --color-on-success: #F8F8F8;
  --color-success-container: #F1F7F2;
  --color-error: #FB2C36;
  --color-on-error: #F8F8F8;
  --color-error-container: #FBF3F2;
  --color-warning: #FF6900;
  --color-on-warning: #292929;
  --color-warning-container: #FAF3F1;
  --color-info: #2B7FFF;
  --color-on-info: #F8F8F8;
  --color-info-container: #F2F5FA;
  --color-shadow: #1D1D1D;
  --color-glow: #F8F8F8;
  --brand-primary: #0080FF;
  --brand-secondary: #FF3377;
  --brand-tertiary: #FF9900;
  --brand-quaternary: #FFDD00;
  --neutral-intense: #292929;
  --neutral-hint: #F8F8F8;
}

:root[data-web-ds="home"].dark {
  --color-surface: #171717;
  --color-surface-container: #222223;
  --color-surface-container-high: #2C2C2E;
  --color-on-surface: #EDEDED;
  --color-surface-hover: #262628;
  --color-surface-pressed: #313133;
  --color-surface-selected: #2C2C2E;
  --color-on-surface-selected: #FFFFFF;
  --color-outline: #3A3A3C;
  --color-outline-variant: #2A2A2B;
  --color-text-primary: #E1E2E9;
  --color-text-secondary: #909195;
  --color-text-disabled: #68686B;
  --color-text-display: #98C0F5;
  --color-text-display-alt: #FAAAB8;
  --color-primary: #0080FF;
  --color-on-primary: #F8F8F8;
  --color-primary-container: #00295B;
  --color-secondary: #FF3377;
  --color-on-secondary: #F8F8F8;
  --color-secondary-container: #590022;
  --color-tertiary: #FF9900;
  --color-on-tertiary: #F8F8F8;
  --color-tertiary-container: #492800;
  --color-quaternary: #FFDD00;
  --color-on-quaternary: #292929;
  --color-quaternary-container: #403600;
  --color-success: #00C950;
  --color-on-success: #F8F8F8;
  --color-success-container: #003B12;
  --color-error: #FB2C36;
  --color-on-error: #F8F8F8;
  --color-error-container: #590007;
  --color-warning: #FF6900;
  --color-on-warning: #292929;
  --color-warning-container: #501C00;
  --color-info: #2B7FFF;
  --color-on-info: #F8F8F8;
  --color-info-container: #032760;
  --color-shadow: #1D1D1D;
  --color-glow: #F8F8F8;
  --brand-primary: #0080FF;
  --brand-secondary: #FF3377;
  --brand-tertiary: #FF9900;
  --brand-quaternary: #FFDD00;
  --neutral-intense: #F8F8F8;
  --neutral-hint: #292929;
}

/* The long-form editorial template (canvas 'Web/Editorial', brilliant-platform;
   approved by Ami 11-06, row 6aee06a2). One home for every value the
   template draws with: tune here, never in the pages.

   Inks are the board's (the Web/Styles/default.ds ink ramp the home v2 kit
   also renders). Sizes are fluid from the 390 board to the 1440 board:
   --ed-fluid(min, max) is spelled out per property because CSS has no
   functions; the shape is clamp(min, min + (max - min) * (100vw - 390) / 1050, max). */

.ed {
  /* Inks */
  --ed-bg: #fafafb;
  --ed-ink: #0e1015; /* titles, pull lines, section heads */
  --ed-lede: #101218; /* the lede, list titles, card titles, the rule */
  --ed-body: #3b4150; /* reading copy */
  --ed-sub: #4a5160; /* blog subtitle, list excerpts */
  --ed-meta: #5a6070; /* dates, read times, card labels */
  --ed-link: #0091ff; /* back links */
  --ed-hair: #e3e5ea; /* list rules, card strokes */
  --ed-card: #ffffff;
  --ed-feature-bg: #101218; /* the black feature card */
  --ed-feature-meta: #a9afbc;
  --ed-feature-body: #c9cdd6;
  --ed-feature-ink: #ffffff;

  /* Geometry */
  --ed-column: 680px; /* the reading column */
  --ed-wide: 1080px; /* the blog index column */
  --ed-side: 24px; /* phone side inset */
  --ed-rule: 3px; /* pull-line rule weight */
  --ed-gap: clamp(22px, calc(22px + 6 * (100vw - 390px) / 1050), 28px); /* block rhythm */

  /* Type */
  --ed-font: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --ed-title: clamp(48px, calc(48px + 32 * (100vw - 390px) / 1050), 80px);
  --ed-post-title: clamp(34px, calc(34px + 22 * (100vw - 390px) / 1050), 56px);
  --ed-lede-size: clamp(19px, calc(19px + 3 * (100vw - 390px) / 1050), 22px);
  --ed-body-size: clamp(17px, calc(17px + 2 * (100vw - 390px) / 1050), 19px);
  --ed-pull-size: clamp(24px, calc(24px + 8 * (100vw - 390px) / 1050), 32px);
  --ed-quote-size: clamp(20px, calc(20px + 6 * (100vw - 390px) / 1050), 26px);
  --ed-h2-size: clamp(24px, calc(24px + 6 * (100vw - 390px) / 1050), 30px);

  background: var(--ed-bg);
  font-family: var(--ed-font);
  color: var(--ed-body);
  width: 100%;
  flex: 1 0 auto;
}

/* The reading column: 680 at 1440, the phone's 342 inside 24 insets. */
.ed-col {
  box-sizing: content-box;
  max-width: var(--ed-column);
  margin: 0 auto;
  padding: clamp(64px, calc(64px + 80 * (100vw - 390px) / 1050), 144px) var(--ed-side)
    clamp(80px, calc(80px + 64 * (100vw - 390px) / 1050), 144px);
  display: flex;
  flex-direction: column;
  gap: var(--ed-gap);
}
.ed-col--post {
  padding-top: clamp(40px, calc(40px + 72 * (100vw - 390px) / 1050), 112px);
}
.ed-col--wide {
  max-width: var(--ed-wide);
}

.ed-title {
  font-size: var(--ed-title);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ed-ink);
  margin: 0;
}
.ed-title--post {
  font-size: var(--ed-post-title);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
/* The board's 16 px spacer under the title. */
.ed-title + * {
  margin-top: 16px;
}
/* A section head opens a new movement: a little more air above it. */
.ed-col > .ed-h2:not(:first-child) {
  margin-top: 16px;
}
/* The back link sits a 16 px spacer below the last block. */
.ed-col > .ed-back:last-child {
  margin-top: 16px;
}

.ed-lede {
  font-size: var(--ed-lede-size);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ed-lede);
  margin: 0;
}
.ed-p {
  font-size: var(--ed-body-size);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ed-body);
  margin: 0;
}
.ed-h2 {
  font-size: var(--ed-h2-size);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ed-ink);
  margin: 0;
}

/* The black-ruled pull line: a 3 px left rule, 28 in (20 on a phone). */
.ed-pull {
  border-left: var(--ed-rule) solid var(--ed-lede);
  padding: clamp(12px, calc(12px + 4 * (100vw - 390px) / 1050), 16px) 0
    clamp(12px, calc(12px + 4 * (100vw - 390px) / 1050), 16px)
    clamp(20px, calc(20px + 8 * (100vw - 390px) / 1050), 28px);
  margin: 0;
  font-size: var(--ed-pull-size);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.019em;
  color: var(--ed-ink);
}

.ed-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: clamp(15px, calc(15px + 1 * (100vw - 390px) / 1050), 16px);
  font-weight: 600;
  line-height: 1.38;
  color: var(--ed-link);
  text-decoration: none;
}
.ed-back:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ed-back svg {
  transition: transform 200ms ease-out;
}
.ed-back:hover svg {
  transform: translateX(-3px);
}

/* Byline: a 36 avatar (32 on a phone), the author, then date and read time. */
.ed-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  align-self: flex-start;
}
.ed-byline img {
  width: clamp(32px, calc(32px + 4 * (100vw - 390px) / 1050), 36px);
  height: clamp(32px, calc(32px + 4 * (100vw - 390px) / 1050), 36px);
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--ed-feature-bg);
  flex-shrink: 0;
}
/* Byline name, meta line and pager ride the typography.web.ui.* role classes
   in the markup (t-ui-title, t-ui-label, t-ui-caption), docs alignment 11-10. */
.ed-byline-name {
  display: block;
  color: var(--ed-lede);
}
.ed-byline:hover .ed-byline-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ed-meta {
  color: var(--ed-meta);
}

/* The MDX body of a post, in the template's type. MDXContent is shared with
   the docs, so the template restyles it from outside (two classes beat its
   one-class utilities). */
.ed-prose .prose {
  max-width: none;
  color: var(--ed-body);
}
.ed-prose .prose p,
.ed-prose .prose li {
  font-size: var(--ed-body-size);
  line-height: 1.7;
  color: var(--ed-body);
}
.ed-prose .prose p {
  margin: 0 0 var(--ed-gap);
}
.ed-prose .prose ul,
.ed-prose .prose ol {
  margin: 0 0 var(--ed-gap);
  color: var(--ed-body);
}
.ed-prose .prose strong {
  color: var(--ed-ink);
}
.ed-prose .prose h2 {
  font-size: var(--ed-h2-size);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ed-ink);
  margin: calc(var(--ed-gap) + 12px) 0 var(--ed-gap);
}
.ed-prose .prose h3 {
  font-size: clamp(20px, calc(20px + 2 * (100vw - 390px) / 1050), 22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ed-ink);
  margin: var(--ed-gap) 0 12px;
}
.ed-prose .prose a {
  color: var(--ed-link);
}
/* A DocFigure in a post takes the post's own rhythm: the gap below it that
   every paragraph has (docs.css gives it only a top margin, since docs
   paragraphs carry theirs on top), so the next paragraph never sits flush. */
.ed-prose .doc-figure {
  margin: 0 0 var(--ed-gap);
}
/* A markdown blockquote is the post's pull line. */
.ed-prose .prose blockquote {
  border-left: var(--ed-rule) solid var(--ed-lede);
  padding: clamp(12px, calc(12px + 4 * (100vw - 390px) / 1050), 16px) 0
    clamp(12px, calc(12px + 4 * (100vw - 390px) / 1050), 16px)
    clamp(20px, calc(20px + 8 * (100vw - 390px) / 1050), 28px);
  margin: 0 0 var(--ed-gap);
  font-style: normal;
  quotes: none;
}
.ed-prose .prose blockquote p {
  font-size: var(--ed-quote-size);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ed-ink);
  margin: 0;
}
.ed-prose .prose blockquote p::before,
.ed-prose .prose blockquote p::after {
  content: none;
}

/* Previous / next, in blogPosts.js order. */
.ed-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.ed-pager a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--ed-hair);
  border-radius: var(--radius-xl);
  background: var(--ed-card);
  text-decoration: none;
  transition: border-color 150ms ease-out;
}
.ed-pager a:hover {
  border-color: var(--ed-meta);
}
.ed-pager .ed-pager-next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}
.ed-pager-label {
  color: var(--ed-meta);
}
.ed-pager-title {
  color: var(--ed-lede);
}
@media (max-width: 639px) {
  .ed-pager {
    grid-template-columns: 1fr;
  }
  .ed-pager .ed-pager-next {
    grid-column: 1;
    align-items: flex-start;
    text-align: left;
  }
}

/* The blog index: head, the black feature card, the dated list. */
.ed-blog-head {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, calc(12px + 4 * (100vw - 390px) / 1050), 16px);
  padding-bottom: clamp(16px, calc(16px + 12 * (100vw - 390px) / 1050), 28px);
}
.ed-blog-sub {
  max-width: 640px;
  font-size: clamp(16px, calc(16px + 4 * (100vw - 390px) / 1050), 20px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ed-sub);
  margin: 0;
}
.ed-feature {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, calc(12px + 4 * (100vw - 390px) / 1050), 16px);
  padding: clamp(24px, calc(24px + 16 * (100vw - 390px) / 1050), 40px);
  border-radius: clamp(20px, calc(20px + 8 * (100vw - 390px) / 1050), 28px);
  background: var(--ed-feature-bg);
  text-decoration: none;
}
.ed-feature .ed-meta {
  color: var(--ed-feature-meta);
}
.ed-feature-title {
  max-width: 840px;
  font-size: clamp(24px, calc(24px + 16 * (100vw - 390px) / 1050), 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ed-feature-ink);
  margin: 0;
}
.ed-feature-body {
  max-width: 760px;
  font-size: clamp(15px, calc(15px + 3 * (100vw - 390px) / 1050), 18px);
  line-height: 1.6;
  color: var(--ed-feature-body);
  margin: 0;
}
.ed-feature-cta {
  font-size: clamp(15px, calc(15px + 1 * (100vw - 390px) / 1050), 16px);
  font-weight: 600;
  line-height: 1.38;
  color: var(--ed-feature-ink);
}
.ed-feature:hover .ed-feature-cta {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ed-list {
  list-style: none;
  margin: clamp(16px, calc(16px + 16 * (100vw - 390px) / 1050), 32px) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--ed-hair);
}
.ed-list li {
  border-top: 1px solid var(--ed-hair);
}
.ed-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 64px;
  -moz-column-gap: 48px;
       column-gap: 48px;
  padding: 28px 0;
  text-decoration: none;
}
.ed-row-date,
.ed-row-time {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.36;
  color: var(--ed-meta);
  padding-top: 4px;
}
.ed-row-meta {
  display: none;
}
.ed-row-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ed-row-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ed-lede);
  margin: 0;
}
.ed-row:hover .ed-row-title {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.ed-row-excerpt {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ed-sub);
  margin: 0;
}
/* The phone list: the date and read time on one line over the title. */
@media (max-width: 767px) {
  .ed-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 0;
  }
  .ed-row-date,
  .ed-row-time,
  .ed-row-excerpt {
    display: none;
  }
  .ed-row-meta {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.38;
    color: var(--ed-meta);
  }
  .ed-row-title {
    font-size: 17px;
  }
}

/* Dark (the theme toggle; these routes are dark-eligible, App.jsx). The board
   is light only, so dark follows the marketing DS dark ramp
   (web-ds-home.css: surface #171717, container #222223, outline #2A2A2B,
   text.primary #E1E2E9, text.secondary #909195). */
:root.dark .ed {
  --ed-bg: #171717;
  --ed-ink: #f4f4f6;
  --ed-lede: #e1e2e9;
  --ed-body: #b6b9c2;
  --ed-sub: #a2a5ad;
  --ed-meta: #909195;
  --ed-link: #4da3ff;
  --ed-hair: #2a2a2b;
  --ed-card: #222223;
  --ed-feature-bg: #222223;
  --ed-feature-meta: #909195;
  --ed-feature-body: #b6b9c2;
  --ed-feature-ink: #ffffff;
}


/* The Learn templates (canvas 'Web/Rethink · Posts': T1 How-to A, T3 Made
   with Brilliant, T4 Hub). They sit inside the editorial template (.ed,
   components/editorial/editorial.css) and draw with its inks and fluid shape:
   clamp(min, min + (max - min) * (100vw - 390) / 1050, max). Spacing from the
   design leg's report, section 6: article column 680 with 24 between blocks;
   hub and showcase container 1200 with 64 between sections, grid gap 24/32.
   One home for every value the Learn pages draw with. */

.ln {
  --ln-wide: 1200px;
  --ln-gap: 24px;
  --ln-section: clamp(40px, calc(40px + 24 * (100vw - 390px) / 1050), 64px);
  --ln-fill: #f2f3f5; /* image ground, control well */
  --ln-note: #f4f6f9; /* the answer box */
  --ln-radius: 16px;
}

/* T1: the 680 reading column, 24 between blocks. */
.ln .ed-col {
  gap: var(--ln-gap);
}
/* T3 and T4: the 1200 container, 64 between sections. */
.ln-wide .ed-col {
  max-width: var(--ln-wide);
  gap: var(--ln-section);
}
.ln-block {
  display: flex;
  flex-direction: column;
  gap: var(--ln-gap);
  min-width: 0;
}
.ln .ed-title + * {
  margin-top: 0;
}
.ln-cta {
  align-self: flex-start;
}

/* Breadcrumb: one line at every width; the post's own crumb ellipsizes. */
.ln-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ed-meta);
}
.ln-crumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  white-space: nowrap;
}
.ln-crumbs li:last-child {
  flex: 0 1 auto;
  min-width: 0;
}
.ln-crumbs li:last-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ed-body);
}
.ln-crumbs a {
  color: inherit;
  text-decoration: none;
}
.ln-crumbs a:hover {
  color: var(--ed-ink);
}
.ln-crumbs svg {
  flex: none;
  opacity: 0.6;
}

/* Byline: the 36 mark (32 on a phone), the author, the dated line. */
.ln-byline {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ln-byline img {
  width: clamp(32px, calc(32px + 4 * (100vw - 390px) / 1050), 36px);
  height: clamp(32px, calc(32px + 4 * (100vw - 390px) / 1050), 36px);
  border-radius: 999px;
  flex-shrink: 0;
}
.ln-byline-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ed-lede);
}
.ln-meta {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ed-meta);
}

/* The answer box (DocCallout, tone note). */
.ln-answer {
  padding: clamp(16px, calc(16px + 4 * (100vw - 390px) / 1050), 20px) clamp(16px, calc(16px + 8 * (100vw - 390px) / 1050), 24px);
  border-radius: var(--ln-radius);
  background: var(--ln-note);
  border: 1px solid var(--ed-hair);
}
.ln-answer-label {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ed-meta);
}
.ln-answer-text {
  margin: 0;
  font-size: clamp(17px, calc(17px + 2 * (100vw - 390px) / 1050), 19px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ed-lede);
}

/* Figure: a hairline frame, radius 12, the image's own ratio reserved by its
   width and height attributes. panel: the image floats on the ground. */
.ln-figure {
  margin: 0;
}
.ln-figure-frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ed-hair);
  background: var(--ed-card);
}
.ln-figure-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.ln-figure--panel .ln-figure-frame {
  background: var(--ln-fill);
  padding: clamp(16px, calc(16px + 16 * (100vw - 390px) / 1050), 32px);
}
.ln-figure--panel .ln-figure-frame img {
  max-height: 320px;
  -o-object-fit: contain;
     object-fit: contain;
}
.ln-figure--window .ln-figure-frame {
  border-radius: clamp(14px, calc(14px + 6 * (100vw - 390px) / 1050), 20px);
}
.ln-caption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ed-meta);
}

/* Steps: the 28 number on a rail to the next step (desktop); on a phone the
   number and title share a row and the body runs full width. */
.ln-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ln-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  -moz-column-gap: 16px;
       column-gap: 16px;
  padding-bottom: 28px;
}
.ln-step::before {
  content: "";
  position: absolute;
  left: 13.5px;
  top: 36px;
  bottom: 0;
  width: 1px;
  background: var(--ed-hair);
}
.ln-step--last {
  padding-bottom: 0;
}
.ln-step--last::before {
  display: none;
}
.ln-step-n {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ed-lede);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.ln-step-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.375;
  color: var(--ed-ink);
}
.ln-step-body {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ln-step-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.625;
  color: var(--ed-body);
}
@media (max-width: 640px) {
  .ln-step {
    -moz-column-gap: 12px;
         column-gap: 12px;
    align-items: center;
  }
  .ln-step::before {
    display: none;
  }
  .ln-step-body {
    grid-column: 1 / -1;
  }
}

/* A line to paste. */
.ln-code {
  border-radius: 12px;
  border: 1px solid var(--ed-hair);
  background: var(--ed-card);
  overflow: hidden;
}
.ln-code-title {
  margin: 0;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ed-hair);
  font-size: 13px;
  font-weight: 600;
  color: var(--ed-meta);
}
.ln-code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font: 500 14px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ed-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The prompt card: card surface, hairline, radius 16. */
.ln-prompt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(16px, calc(16px + 8 * (100vw - 390px) / 1050), 24px);
  border-radius: var(--ln-radius);
  border: 1px solid var(--ed-hair);
  background: var(--ed-card);
}
.ln-prompt-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ed-meta);
}
.ln-prompt-text {
  margin: 0;
  font-size: clamp(16px, calc(16px + 2 * (100vw - 390px) / 1050), 18px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ed-ink);
}

/* Table rows in a hairline card. */
.ln-table-card {
  border-radius: var(--ln-radius);
  border: 1px solid var(--ed-hair);
  background: var(--ed-card);
  overflow: hidden;
}
.ln-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 15px;
  line-height: 1.5;
}
.ln-table th,
.ln-table td {
  padding: 14px clamp(14px, calc(14px + 6 * (100vw - 390px) / 1050), 20px);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  color: var(--ed-body);
}
.ln-table thead th {
  font-size: 13px;
  font-weight: 600;
  color: var(--ed-meta);
  background: var(--ln-note);
}
.ln-table tbody tr {
  border-top: 1px solid var(--ed-hair);
}
.ln-table tbody th {
  font-weight: 600;
  color: var(--ed-lede);
}
.ln-table--facts tbody th {
  width: 34%;
}

/* FAQ: hairline rows, a plus that turns to a minus. */
.ln-faq {
  border-bottom: 1px solid var(--ed-hair);
}
.ln-faq details {
  border-top: 1px solid var(--ed-hair);
  padding: 20px 0;
}
.ln-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.ln-faq summary::-webkit-details-marker {
  display: none;
}
.ln-faq summary h3 {
  margin: 0;
  font-size: clamp(17px, calc(17px + 1 * (100vw - 390px) / 1050), 18px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ed-ink);
}
.ln-faq p {
  margin: 10px 0 0;
  max-width: 600px;
  font-size: 16px;
  line-height: 1.625;
  color: var(--ed-body);
}
.ln-faq-sign {
  position: relative;
  flex: 0 0 14px;
  height: 14px;
}
.ln-faq-sign::before,
.ln-faq-sign::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 1.6px;
  border-radius: 1px;
  background: var(--ed-lede);
}
.ln-faq-sign::after {
  transform: rotate(90deg);
  transition: transform 160ms ease;
}
.ln-faq details[open] .ln-faq-sign::after {
  transform: rotate(0deg);
}

/* Related: one link per hairline row. */
.ln-links {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ed-hair);
}
.ln-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--ed-hair);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ed-lede);
  text-decoration: none;
}
.ln-link svg {
  color: var(--ed-meta);
  transition: transform 200ms ease-out;
}
.ln-link:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ln-link:hover svg {
  transform: translateX(3px);
}

.ln-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ln-fill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--ed-body);
  white-space: nowrap;
}

/* PostCard. stack: the image over the text. row: the image beside it. */
.ln-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: clamp(16px, calc(16px + 4 * (100vw - 390px) / 1050), 20px);
  border: 1px solid var(--ed-hair);
  background: var(--ed-card);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 160ms ease;
}
.ln-card:hover {
  border-color: #c9cdd6;
}
.ln-card-img {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--ln-fill);
  overflow: hidden;
}
.ln-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.ln-card-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, calc(16px + 8 * (100vw - 390px) / 1050), 24px);
}
.ln-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ln-card-title {
  margin: 0;
  font-size: clamp(18px, calc(18px + 2 * (100vw - 390px) / 1050), 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ed-ink);
}
.ln-card:hover .ln-card-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ln-card-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ed-sub);
}
@media (min-width: 880px) {
  .ln-card--row {
    flex-direction: row;
    align-items: stretch;
  }
  .ln-card--row .ln-card-img {
    position: relative;
    flex: 0 0 46%;
    aspect-ratio: auto;
    min-height: 360px;
  }
  .ln-card--row .ln-card-img img {
    position: absolute;
    inset: 0;
    padding: 24px;
  }
  .ln-card--row .ln-card-text {
    justify-content: center;
    gap: 14px;
    padding: 40px;
  }
  .ln-card--row .ln-card-title {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .ln-card--row .ln-card-body {
    font-size: 17px;
  }
}

/* The grid: three across at 1200, two, then one; gap 24 by 32. */
.ln-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}
@media (max-width: 1000px) {
  .ln-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .ln-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* Hub head. */
.ln-hub-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ln-hub-lead {
  max-width: 720px;
  margin: 0;
  font-size: clamp(16px, calc(16px + 4 * (100vw - 390px) / 1050), 20px);
  line-height: 1.5;
  color: var(--ed-sub);
}

/* Topics (DocsSectionCard): the title, the count, one definitional line. */
.ln-topic {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, calc(18px + 6 * (100vw - 390px) / 1050), 24px);
  border-radius: var(--ln-radius);
  border: 1px solid var(--ed-hair);
  background: var(--ed-card);
  transition: border-color 160ms ease;
}
.ln-topic:hover {
  border-color: #c9cdd6;
}
.ln-topic-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ln-topic-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ed-ink);
}
.ln-topic-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--ed-meta);
  white-space: nowrap;
}
.ln-topic-line {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ed-sub);
}

/* Latest: the heading and the filter on one row (stacked on a phone). */
.ln-latest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ln-seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(96px, 1fr);
  padding: 2px;
  border-radius: 10px;
  background: var(--ln-fill);
}
.ln-seg button {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: 600 13px/1 var(--ed-font);
  color: var(--ed-meta);
  cursor: pointer;
}
.ln-seg button[aria-pressed="true"] {
  background: var(--ed-card);
  color: var(--ed-ink);
  box-shadow: 0 1px 2px rgba(16, 18, 24, 0.12);
}
/* Show more: the outline page button. */
.ln-more {
  align-self: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid #d5d8de;
  background: #fff;
  font: 700 15px/1 var(--ed-font);
  color: var(--ed-lede);
  cursor: pointer;
}
@media (max-width: 640px) {
  .ln-seg {
    width: 100%;
    grid-auto-columns: minmax(0, 1fr);
  }
}

/* T3: the design beside what made it; stacked under 880. */
.ln-show-top {
  display: grid;
  grid-template-columns: minmax(0, 640fr) minmax(0, 496fr);
  gap: var(--ln-section);
  align-items: start;
}
.ln-show-design {
  border-radius: clamp(14px, calc(14px + 6 * (100vw - 390px) / 1050), 20px);
  border: 1px solid var(--ed-hair);
  background: var(--ln-fill);
  overflow: hidden;
}
.ln-show-design img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 720px;
  -o-object-fit: contain;
     object-fit: contain;
}
.ln-show-desc {
  margin: 0;
  font-size: clamp(16px, calc(16px + 2 * (100vw - 390px) / 1050), 18px);
  line-height: 1.6;
  color: var(--ed-body);
}
.ln-show-title {
  font-size: clamp(34px, calc(34px + 14 * (100vw - 390px) / 1050), 48px);
}
@media (max-width: 880px) {
  .ln-show-top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ln-gap);
  }
}