@master/internal-site 0.0.0-stage → 0.1.0

package/src/home/home.css

@@ -0,0 +1,1077 @@
+@layer components {
+  .home-page {
+    /* Matches `.app-wrapper`, so the guides land just outside the content edges. */
+    --home-gutter: 1.25rem;
+    --home-column: min(100%, 100rem);
+    --home-rail: calc((100% - var(--home-column)) / 2 + var(--home-gutter) - 1.25rem);
+
+    @media (--sm) {
+      --home-gutter: 2.5rem;
+    }
+  }
+
+  .home-section {
+    position: relative;
+    isolation: isolate;
+    padding-block: var(--home-section-space);
+  }
+
+  /*
+   * Drafting guides: rails 20px outside the content edges, a rule between sections and a cross where
+   * they meet. Outside each rail a ruler ticks every 16px, longer every 128px, starting at the section's
+   * top so its first long tick meets the cross. Tick colors are opaque mixes, so a long tick drawn over
+   * a short one reads as one line.
+   */
+  @media (--md) {
+    :is(.home-hero, .home-section)::after {
+      --home-tick: color-mix(in oklab, var(--home-text) 9%, var(--home-ground));
+      --home-tick-major: color-mix(in oklab, var(--home-text) 20%, var(--home-ground));
+      position: absolute;
+      inset-block: 0;
+      left: calc(var(--home-rail) - 0.75rem);
+      right: calc(var(--home-rail) - 0.75rem);
+      z-index: -1;
+      background:
+        linear-gradient(var(--home-guide), var(--home-guide)) left 0.75rem top 0 / 1px 100% no-repeat,
+        linear-gradient(var(--home-guide), var(--home-guide)) right 0.75rem top 0 / 1px 100% no-repeat;
+      pointer-events: none;
+      content: '';
+    }
+
+    .home-section::after {
+      background:
+        linear-gradient(var(--home-tick-major) 0 1px, transparent 1px) left 0 top 0 / 0.75rem 8rem repeat-y,
+        linear-gradient(var(--home-tick-major) 0 1px, transparent 1px) right 0 top 0 / 0.75rem 8rem repeat-y,
+        linear-gradient(var(--home-tick) 0 1px, transparent 1px) left 0.375rem top 0 / 0.375rem 1rem repeat-y,
+        linear-gradient(var(--home-tick) 0 1px, transparent 1px) right 0.375rem top 0 / 0.375rem 1rem repeat-y,
+        linear-gradient(var(--home-guide), var(--home-guide)) left 0.75rem top 0 / 1px 100% no-repeat,
+        linear-gradient(var(--home-guide), var(--home-guide)) right 0.75rem top 0 / 1px 100% no-repeat;
+    }
+
+    /* The fixed header (60px) sits over the top of the hero; the rails start below it. */
+    .home-hero::after {
+      top: 3.75rem;
+      mask-image: linear-gradient(transparent, black 6rem);
+    }
+
+    .home-section::before {
+      --home-cross: var(--home-rule-strong);
+      position: absolute;
+      top: -5px;
+      left: calc(var(--home-rail) - 5px);
+      right: calc(var(--home-rail) - 5px);
+      height: 11px;
+      background:
+        linear-gradient(var(--home-cross), var(--home-cross)) 0 5px / 11px 1px no-repeat,
+        linear-gradient(var(--home-cross), var(--home-cross)) 5px 0 / 1px 11px no-repeat,
+        linear-gradient(var(--home-cross), var(--home-cross)) 100% 5px / 11px 1px no-repeat,
+        linear-gradient(var(--home-cross), var(--home-cross)) calc(100% - 5px) 0 / 1px 11px no-repeat;
+      pointer-events: none;
+      content: '';
+    }
+
+    .home-section {
+      border-top: 1px solid var(--home-guide);
+    }
+  }
+
+  /* The homepage's header sits on the content column, so the logo and the last icon share the sections' edges. */
+  .home-header > * {
+    /* The sections' 100rem wrapper minus its 2.5rem gutters: where the column is wide enough to matter. */
+    max-width: 95rem;
+  }
+
+  .home-header[data-background="transparent"] :is(.ui-header-nav, .ui-header-end > :not(a[aria-label="GitHub"])) {
+    display: none;
+  }
+
+  /* The compact header keeps the brand centred: GitHub takes the search button's end, as wide as the menu button. */
+  .home-header[data-background="transparent"] .ui-header-end {
+    justify-content: flex-end;
+    width: 2.375rem;
+
+    @media (--md) {
+      width: auto;
+    }
+  }
+
+  .home-header[data-background="transparent"] .ui-header-end > a[aria-label="GitHub"] {
+    display: flex;
+    margin-left: 0;
+
+    @media (--md) {
+      margin-left: auto;
+      margin-right: -0.188rem;
+    }
+  }
+
+  .home-section-wrap {
+    position: relative;
+    max-width: 100rem;
+  }
+
+  /* A hatched fill for reserved or inactive space inside a figure: an empty slot, a margin, a gap. */
+  .home-hatch {
+    background-image: var(--home-hatch);
+    background-size: var(--home-hatch-size) var(--home-hatch-size);
+  }
+
+  /*
+   * Artboard marks: four corner ticks just outside a box, the way a design tool marks a frame. For open
+   * figures that need an edge without a border. The box must be positioned.
+   */
+  .home-marks::before {
+    --home-tick: 0.5rem;
+    position: absolute;
+    inset: -0.375rem;
+    background:
+      linear-gradient(var(--home-mark), var(--home-mark)) 0 0 / var(--home-tick) 1px no-repeat,
+      linear-gradient(var(--home-mark), var(--home-mark)) 0 0 / 1px var(--home-tick) no-repeat,
+      linear-gradient(var(--home-mark), var(--home-mark)) 100% 0 / var(--home-tick) 1px no-repeat,
+      linear-gradient(var(--home-mark), var(--home-mark)) 100% 0 / 1px var(--home-tick) no-repeat,
+      linear-gradient(var(--home-mark), var(--home-mark)) 0 100% / var(--home-tick) 1px no-repeat,
+      linear-gradient(var(--home-mark), var(--home-mark)) 0 100% / 1px var(--home-tick) no-repeat,
+      linear-gradient(var(--home-mark), var(--home-mark)) 100% 100% / var(--home-tick) 1px no-repeat,
+      linear-gradient(var(--home-mark), var(--home-mark)) 100% 100% / 1px var(--home-tick) no-repeat;
+    pointer-events: none;
+    content: '';
+  }
+
+  /* Every section opens the same way, hung on the left rail: eyebrow, title, lead, an optional link. */
+  .home-section-header {
+    display: grid;
+    /* The column never grows past the content edge, even when large text widens the eyebrow row. */
+    grid-template-columns: minmax(0, 1fr);
+    justify-items: start;
+    max-width: 44rem;
+    margin-bottom: var(--home-header-space);
+  }
+
+  .home-illustration {
+    --home-illustration-size: 4rem;
+    position: relative;
+    display: block;
+    flex: none;
+    width: var(--home-illustration-size);
+    height: var(--home-illustration-size);
+    pointer-events: none;
+  }
+
+  .home-illustration img {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  /*
+   * Beside a title or a title and description, the illustration centers on the text and gives back its
+   * height with negative margins, so the text alone sets the row's height and the drawing overhangs it.
+   */
+  .home-illustration-hung {
+    align-self: center;
+    margin-block: calc(var(--home-illustration-size) / -2);
+  }
+
+  .home-illustration .home-illustration-dark { display: none; }
+  .dark .home-illustration .home-illustration-light { display: none; }
+  .dark .home-illustration .home-illustration-dark { display: block; }
+
+  .home-compact-icon {
+    --home-illustration-size: 3rem;
+  }
+
+  .home-section-caption {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-sm);
+    margin-inline-start: -0.4rem;
+
+    @media (--md) {
+      margin-inline-start: -0.5rem;
+
+      .home-illustration { --home-illustration-size: 5rem; }
+    }
+  }
+
+  .home-section-heading {
+    max-width: 22ch;
+    margin: 1.5rem 0 0;
+    font-size: var(--home-title);
+    font-weight: var(--font-weight-regular);
+    line-height: 1.08;
+    letter-spacing: -0.035em;
+    color: var(--home-text);
+    text-wrap: balance;
+    /* Only a word wider than the column breaks, as with very large text on a phone; `anywhere` also lets the grid item shrink. */
+    overflow-wrap: anywhere;
+  }
+
+  .home-section-body {
+    max-width: 40rem;
+    margin: 1.5rem 0 0;
+    font-size: var(--home-lead);
+    line-height: 1.6;
+    color: var(--home-text-quiet);
+    text-wrap: pretty;
+  }
+
+  .home-section-header > .home-section-link {
+    margin-top: 1.75rem;
+  }
+
+  .home-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-xs);
+    height: 2.75rem;
+    padding-inline: 1.125rem;
+    border-radius: var(--home-radius-control);
+    font-size: 0.9375rem;
+    font-weight: var(--font-weight-medium);
+    letter-spacing: -0.005em;
+    transition: background-color var(--home-quick) var(--home-ease), box-shadow var(--home-quick) var(--home-ease);
+  }
+
+  /* The primary action is solid ink: the one dark object in a light composition, and the reverse in dark mode. */
+  .home-action-primary {
+    color: var(--home-text-inverse);
+    background-color: var(--home-ink);
+    box-shadow: inset 0 1px 0 var(--home-highlight-ink), 0 0 0 1px var(--home-ink), var(--home-contact);
+
+    &:hover {
+      background-color: color-mix(in oklab, var(--home-ink) 86%, var(--home-ground));
+    }
+
+    /* Pressing trades the raised edge for an inner shadow; nothing moves. */
+    &:active {
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.35), 0 0 0 1px var(--home-ink);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--home-ink);
+      outline-offset: 2px;
+    }
+  }
+
+  .home-action-secondary {
+    color: var(--home-text);
+    background-color: var(--home-sheet);
+    box-shadow: 0 0 0 1px var(--home-rule), var(--home-elevation-1);
+
+    &:hover {
+      background-color: var(--home-float);
+      box-shadow: 0 0 0 1px var(--home-rule-strong), var(--home-elevation-1);
+    }
+
+    &:active {
+      box-shadow: 0 0 0 1px var(--home-rule), var(--home-pressed);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--home-ink);
+      outline-offset: 2px;
+    }
+  }
+
+  /* A quiet way into the guide: small, faint and plain, so it never competes with the figure it follows. */
+  .home-section-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: var(--home-text-faint);
+    text-decoration: none;
+    transition: color var(--duration-fast) var(--easing-smooth);
+
+    /* Only the arrow moves, so the link never changes size under the pointer. */
+    & > svg {
+      width: 0.875rem;
+      height: 0.875rem;
+      transition: translate var(--duration-normal) var(--easing-crisp);
+    }
+
+    &:hover {
+      color: var(--home-text);
+
+      & > svg {
+        translate: 3px 0;
+      }
+    }
+
+    &:focus-visible {
+      border-radius: var(--radius-sm);
+      outline: 2px solid var(--home-ink);
+      outline-offset: 3px;
+    }
+
+    /* On touch the 20px line gets a 44px target that reaches into the air around it; nothing visible moves. */
+    @media (pointer: coarse) {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        inset: -0.75rem -0.5rem;
+        content: '';
+      }
+    }
+  }
+
+  /*
+   * Motion. The hero arrives in reading order on load; below it, each header and card rises as it
+   * scrolls in on a view timeline, so the stagger comes from position on the page, not from timers.
+   * Browsers without view timelines show everything in place.
+   */
+  @media (--motion-safe) {
+    .home-enter {
+      animation-name: home-rise;
+      animation-duration: 0.9s;
+      animation-timing-function: var(--home-ease);
+      animation-fill-mode: both;
+    }
+
+    .home-hero-pill {
+      animation-delay: 0.05s;
+    }
+
+    .home-display-line:first-child {
+      animation-delay: 0.12s;
+    }
+
+    .home-display-line:last-child {
+      animation-delay: 0.2s;
+    }
+
+    .home-hero-lead {
+      animation-delay: 0.3s;
+    }
+
+    .home-hero-actions {
+      animation-delay: 0.38s;
+    }
+
+    /* One glint crosses a stone title once it reaches the reading area, as on the hero's title. */
+    .home-stone-type[data-glint] {
+      animation-name: home-stone-glint;
+      animation-duration: 1.4s;
+      animation-timing-function: linear;
+      animation-fill-mode: both;
+    }
+
+    @supports (animation-timeline: view()) {
+      /* Longhands: a timeline inside the `animation` shorthand is not yet supported by browsers. */
+      .home-section-header > :not(.home-eyebrow),
+      .home-reveal-item {
+        animation-name: home-reveal-item;
+        animation-timing-function: linear;
+        animation-fill-mode: both;
+        animation-timeline: view();
+        /* Fixed scroll lengths, so a tall window and a one-line lead arrive at the same pace. */
+        animation-range: entry 0px entry 220px;
+      }
+
+      .home-section-header > :not(.home-eyebrow) {
+        animation-range: entry 0px entry 160px;
+      }
+
+      .home-section-header > .home-section-heading {
+        animation-range: entry 24px entry 184px;
+      }
+
+      /* A risen title keeps its scroll reveal while its one glint plays on the clock. */
+      .home-section-header > .home-section-heading.home-stone-type[data-glint] {
+        animation-name: home-reveal-item, home-stone-glint;
+        animation-duration: auto, 1.4s;
+        animation-timing-function: linear, linear;
+        animation-timeline: view(), auto;
+        animation-range: entry 24px entry 184px, normal;
+      }
+
+      .home-section-header > .home-section-body {
+        animation-range: entry 48px entry 208px;
+      }
+
+      .home-section-header > .home-section-link {
+        animation-range: entry 72px entry 232px;
+      }
+    }
+  }
+
+  /*
+   * Cards stand directly on the page ground: no shell around them, so every edge is the card's own 1px
+   * contour. A card may hold its figure in a well, 12px in, and nothing deeper.
+   */
+  .home-bento-frame {
+    position: relative;
+  }
+
+  .home-bento-grid {
+    display: grid;
+    gap: var(--home-gap);
+
+    @media (--md) {
+      gap: 1rem;
+    }
+  }
+
+  .home-bento-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    border-radius: var(--home-radius-sheet);
+    background-color: var(--home-sheet);
+    box-shadow: 0 0 0 1px var(--home-hairline), var(--home-elevation-1);
+    transition: box-shadow var(--home-base) var(--home-ease);
+
+    &:hover {
+      box-shadow: 0 0 0 1px var(--home-rule), var(--home-elevation-1);
+    }
+  }
+
+  /* The title and description stay together, with a separate illustration to their right. */
+  .home-bento-card-header {
+    /* Contain the header only: size containment on the subgrid card collapses auto-height code panes. */
+    container: home-card / inline-size;
+    padding: 1.75rem 1.5rem 2rem;
+
+    @media (--sm) {
+      padding: 2.25rem 2.25rem 2.5rem;
+    }
+
+    @media (--lg) {
+      padding: 2.5rem 2.75rem 2.75rem;
+    }
+  }
+
+  .home-bento-card-caption {
+    display: grid;
+    grid-template-columns: minmax(0, 44ch) 7rem;
+    /* In a wide card the copy keeps its measure and the illustration rides the card's right edge. */
+    justify-content: space-between;
+    align-items: start;
+    align-content: start;
+    column-gap: 1.5rem;
+  }
+
+  .home-bento-card-copy { min-width: 0; }
+
+  .home-bento-card-caption > .home-illustration {
+    --home-illustration-size: 7rem;
+  }
+
+  /*
+   * A narrow card cannot spare a 7rem column beside its copy: the title shares a row with a smaller
+   * illustration and the description takes the full measure below, so neither wraps a word or two per line.
+   */
+  @container home-card (width < 28rem) {
+    .home-bento-card-caption {
+      grid-template-columns: minmax(0, 1fr) 4rem;
+      align-items: center;
+      gap: 0.75rem 1rem;
+    }
+    .home-bento-card-copy { display: contents; }
+    .home-bento-card-title { grid-column: 1; grid-row: 1; }
+    .home-bento-card-body { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-top: 0; }
+    .home-bento-card-hint { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
+    .home-bento-card-caption > .home-illustration {
+      --home-illustration-size: 4rem;
+      grid-column: 2;
+      grid-row: 1;
+      margin-block: 0;
+    }
+  }
+
+  @container home-card (width < 16rem) {
+    .home-bento-card-caption { grid-template-columns: minmax(0, 1fr) 3rem; column-gap: 0.75rem; }
+    .home-bento-card-caption > .home-illustration { --home-illustration-size: 3rem; }
+  }
+
+  @container home-card (width < 12rem) {
+    .home-bento-card-caption { grid-template-columns: minmax(0, 1fr); }
+    .home-bento-card-caption > .home-illustration { display: none; }
+  }
+
+  @container home-card (width >= 28rem) {
+    .home-bento-card-caption { column-gap: 3rem; }
+  }
+
+  .home-bento-card-title {
+    min-width: 0;
+    margin: 0;
+    font-size: var(--home-card-title);
+    font-weight: var(--font-weight-regular);
+    line-height: 1.25;
+    letter-spacing: -0.025em;
+    color: var(--home-text);
+    text-wrap: balance;
+  }
+
+  .home-bento-card-body {
+    min-width: 0;
+    max-width: 44ch;
+    margin: 0.75rem 0 0;
+    font-size: var(--home-body);
+    line-height: 1.6;
+    color: var(--home-text-quiet);
+    text-wrap: pretty;
+  }
+
+  .home-bento-card-hint {
+    margin: 0.75rem 0 0;
+    font-size: var(--home-caption);
+    line-height: 1.5;
+    color: var(--home-text-faint);
+  }
+
+  .home-heading-link {
+    color: inherit;
+    text-decoration: none;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+
+    &:hover { text-decoration-line: underline; }
+
+    &:focus-visible {
+      border-radius: var(--radius-sm);
+      outline: 2px solid var(--home-ink);
+      outline-offset: 4px;
+    }
+  }
+
+  /*
+   * The well's contour is drawn above the figure, so a pane that fills the well never hides it and
+   * a pane's own edge never doubles it: every well reads as one 1px line.
+   */
+  .home-bento-visual {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    margin: auto var(--home-gap) var(--home-gap);
+    border-radius: var(--home-radius-well);
+    background-color: var(--home-well);
+
+    &::after {
+      position: absolute;
+      inset: 0;
+      z-index: 20;
+      border-radius: inherit;
+      box-shadow: var(--home-groove);
+      pointer-events: none;
+      content: '';
+    }
+  }
+
+  .home-bento-visual-top {
+    margin-top: 0;
+  }
+
+  .home-dot-grid {
+    background-image: radial-gradient(var(--home-rule) 1px, transparent 1px);
+    background-size: 16px 16px;
+    background-position: 8px 8px;
+  }
+
+  /* A tag: mono caps inside a hairline, for states such as "Default". */
+  .home-tag {
+    display: inline-flex;
+    align-items: center;
+    height: 1.25rem;
+    padding-inline: 0.4375rem;
+    border-radius: var(--home-radius-chip);
+    font-family: var(--home-mono);
+    font-size: 0.625rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--home-text-quiet);
+    box-shadow: inset 0 0 0 1px var(--home-rule);
+  }
+
+  /* Code sits straight in its well: the docs block border, fill and radius stay out of figures. */
+  .home-code-window {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    tab-size: 2;
+
+    .ui-code {
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .home-code-window-pre {
+      overflow: hidden;
+      padding: var(--spacing-lg) var(--spacing-sm);
+      border-radius: 0;
+      background-color: transparent;
+    }
+  }
+
+  .home-code-window-has-fix {
+    &:where(:hover, :active) .home-code-window-source {
+      opacity: 0;
+    }
+
+    &:where(:hover, :active) .home-code-window-fix {
+      opacity: 1;
+    }
+  }
+
+  .home-code-window-dot {
+    display: block;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--home-rule);
+    opacity: 0.56;
+  }
+
+  .home-code-window-stack {
+    display: grid;
+    flex: auto;
+    min-height: 0;
+  }
+
+  .home-code-window-layer {
+    grid-area: 1 / 1 / 2 / 2;
+    min-width: 0;
+    transition: opacity 0.16s ease-out;
+    will-change: opacity;
+  }
+
+  .home-code-window-fix {
+    opacity: 0;
+  }
+
+  .home-code-window-body {
+    flex: auto;
+    min-height: 0;
+  }
+
+  /* The scrollable code fills a clipped well, so its focus ring sits inside the well's edge. */
+  .home-code-window-body :focus-visible {
+    outline-offset: -2px;
+  }
+
+  .home-code-window-problem {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+    padding-inline: var(--spacing-md);
+  }
+
+  .home-code-window-problem-icon {
+    flex: none;
+    margin-top: 1px;
+  }
+
+  .home-code-window-problem-content {
+    min-width: 0;
+  }
+
+  .home-code-window-problem-meta {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Diagnostics wrap like an editor's problems panel instead of running out of the card. */
+  .home-code-window-problem-message {
+    display: -webkit-box;
+    overflow: hidden;
+    margin: 0;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-wrap: pretty;
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+    color: var(--home-text);
+  }
+
+  .home-code-window-problem-meta {
+    margin: var(--spacing-3xs) 0 0;
+    font-size: var(--text-2xs);
+    line-height: var(--text-2xs--line-height);
+    color: var(--home-text-quiet);
+  }
+
+  /* A recessed gray track holds a white selected segment that sits just above it. */
+  /*
+   * Segmented control: a soft pill track drawn with one 1px line, and a raised thumb that slides to the
+   * chosen option and takes its width. Until the thumb is measured, the chosen option paints its own.
+   */
+  .home-segmented-control {
+    --home-segment-pad: 3px;
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    align-items: center;
+    width: fit-content;
+    padding: var(--home-segment-pad);
+    border-radius: calc(infinity * 1px);
+    background-color: color-mix(in oklab, var(--home-text) 4%, var(--home-ground));
+    box-shadow: inset 0 0 0 1px var(--home-hairline);
+  }
+
+  .home-segmented-control-thumb {
+    position: absolute;
+    top: var(--home-segment-pad);
+    bottom: var(--home-segment-pad);
+    left: 0;
+    z-index: -1;
+    width: var(--home-segment-width, 0);
+    border-radius: calc(infinity * 1px);
+    background-color: light-dark(var(--home-sheet), color-mix(in oklab, var(--home-sheet) 86%, white));
+    /* The thumb is lit by the page lamp, like the hero's glass: its shadow falls away from the lamp. */
+    box-shadow:
+      0 0 0 1px var(--home-hairline),
+      0 1px 2px light-dark(oklch(18% 0 none / 0.06), oklch(0% 0 none / 0.4)),
+      calc(var(--cast-x, 1px) * 0.6) calc(var(--cast-y, 4px) * 0.6) 8px -3px light-dark(oklch(18% 0 none / 0.1), oklch(0% 0 none / 0.5)),
+      inset 0 1px 0 var(--home-highlight);
+    translate: var(--home-segment-x, 0) 0;
+    opacity: 0;
+
+    /* Both rims catch light: the near one from the lamp, the far one turned a little away from it. */
+    &::before {
+      position: absolute;
+      inset: 0;
+      padding: 1px;
+      border-radius: inherit;
+      background: linear-gradient(var(--lit-angle, -20deg), light-dark(oklch(0.2 0 none / 0.06), rgb(255 255 255 / 0.05)), transparent 35%, transparent 62%, light-dark(rgb(255 255 255 / 1), rgb(255 255 255 / 0.22)));
+      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+      pointer-events: none;
+      content: '';
+    }
+
+    .home-segmented-control[data-ready] & {
+      opacity: 1;
+      transition: translate var(--home-base) var(--home-ease), width var(--home-base) var(--home-ease);
+    }
+  }
+
+  .home-segmented-control-option {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.875rem;
+    min-width: 3.75rem;
+    padding-inline: 0.875rem;
+    border: 0;
+    border-radius: calc(infinity * 1px);
+    font-size: 0.8125rem;
+    font-weight: var(--font-weight-medium);
+    line-height: 1;
+    letter-spacing: -0.005em;
+    white-space: nowrap;
+    color: var(--home-text-quiet);
+    background-color: transparent;
+    cursor: pointer;
+    transition: color var(--home-quick) var(--home-ease);
+
+    &:hover,
+    &[aria-pressed='true'] {
+      color: var(--home-text);
+    }
+
+    /* Before the thumb is measured, the chosen option carries the raised look itself. */
+    .home-segmented-control:not([data-ready]) &[aria-pressed='true'] {
+      background-color: var(--home-sheet);
+      box-shadow: 0 0 0 1px var(--home-hairline);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--home-ink);
+      outline-offset: 1px;
+    }
+  }
+
+  @media (--motion-reduce) {
+    .home-segmented-control-thumb {
+      transition: none !important;
+    }
+
+    /* Without motion, hover keeps its color cue but the arrow stays put instead of jumping. */
+    .home-section-link:hover > svg,
+    .home-cta-actions .home-action-primary:is(:hover, :focus-visible) > svg {
+      translate: none;
+    }
+  }
+
+  .home-chip {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    padding: var(--spacing-4xs) var(--spacing-xs);
+    border-radius: var(--home-radius-chip);
+    outline: 1px solid var(--home-hairline);
+    font-family: var(--home-mono);
+    font-size: 0.75rem;
+    line-height: 1.5;
+    white-space: nowrap;
+    color: var(--home-text-body);
+    background-color: var(--home-sheet);
+  }
+
+  .home-terminal-line {
+    display: block;
+    overflow: hidden;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-lg);
+    font-family: var(--home-mono);
+    font-size: 0.75rem;
+    line-height: 1.5;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--home-text);
+    background-color: var(--home-sheet);
+    box-shadow: inset 0 0 0 1px var(--home-hairline), var(--home-edge);
+  }
+
+  /* An endless row: the track holds two copies, so moving it by half its width loops seamlessly. */
+  .home-marquee {
+    overflow: hidden;
+    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
+  }
+
+  .home-marquee-track {
+    display: flex;
+    width: max-content;
+    /* Longhands keep the keyframe name static; a variable inside the shorthand reads as a dynamic name. */
+    animation-name: home-marquee;
+    animation-duration: var(--home-marquee-duration, 32s);
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+
+    & > * {
+      margin-right: var(--spacing-xs);
+    }
+
+    .home-marquee:hover & {
+      animation-play-state: paused;
+    }
+  }
+
+  .home-marquee-reverse .home-marquee-track {
+    animation-direction: reverse;
+  }
+
+  /* Same height and corner as an action beside it; the copy button nests inside with a concentric corner. */
+  .home-command {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    box-sizing: border-box;
+    max-width: 100%;
+    height: 2.75rem;
+    padding: 0 0.25rem 0 var(--spacing-md);
+    border-radius: var(--home-radius-control);
+    font-family: var(--home-mono);
+    font-size: 0.875rem;
+    color: var(--home-text);
+  }
+
+  /* The command fills the field and reads from the left, so the copy button sits at the far edge. */
+  .home-command > code {
+    flex: auto;
+    text-align: left;
+  }
+
+  .home-command-copy {
+    display: grid;
+    flex: none;
+    place-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: calc(var(--home-radius-control) - 0.25rem);
+    color: var(--home-text-quiet);
+    cursor: pointer;
+    transition: color var(--duration-fast) var(--easing-smooth), background-color var(--duration-fast) var(--easing-smooth);
+
+    &:hover {
+      color: var(--home-text);
+      background-color: var(--home-well);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--home-ink);
+    }
+  }
+
+  .home-code-tag {
+    color: var(--home-code-tag);
+  }
+
+  /* Markup brackets and `=` are punctuation, as in the docs' highlighted code. */
+  .home-code-punct {
+    color: var(--home-text-faint);
+  }
+
+  .home-code-attr {
+    color: var(--home-code-attr);
+  }
+
+  .home-code-string {
+    color: var(--home-code-string);
+  }
+
+  .home-spin {
+    animation: home-spin 0.9s linear infinite;
+  }
+
+  @media (--motion-reduce) {
+    .home-marquee-track,
+    .home-spin {
+      animation: none;
+    }
+
+  }
+}
+
+/* Capture only the header, keeping the scrolling page live underneath its transition. */
+:root[data-header-transition] {
+  view-transition-name: none;
+}
+
+[data-header-transition] .home-header {
+  view-transition-name: home-header;
+}
+
+[data-header-transition] .home-header .ui-header-end > a[aria-label="GitHub"] {
+  view-transition-name: home-header-github;
+}
+
+[data-header-transition] .home-header .ui-header-brand {
+  view-transition-name: home-header-logo;
+}
+
+[data-header-transition] .home-header .ui-version {
+  view-transition-name: home-header-version;
+}
+
+[data-header-transition] .home-header .ui-header-menu {
+  view-transition-name: home-header-menu;
+}
+
+[data-header-transition]::view-transition {
+  pointer-events: none;
+}
+
+[data-header-transition]::view-transition-group(*) {
+  animation-duration: var(--duration-slow);
+  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+/* Reaching the top re-forms the bar: the frosted bar fades out quickly, the bare one arrives as the pieces land. */
+[data-header-transition='top']::view-transition-old(home-header) {
+  animation-duration: var(--duration-fastest);
+}
+
+[data-header-transition='top']::view-transition-new(home-header) {
+  animation-duration: var(--duration-faster);
+  animation-delay: var(--duration-normal);
+}
+
+/* Tucking away or coming back only moves the same bar, so it slides as one piece with no cross-fade. */
+[data-header-transition='tuck']::view-transition-group(*) {
+  animation-duration: var(--duration-normal);
+}
+
+[data-header-transition='tuck']::view-transition-old(*) {
+  animation: none;
+  opacity: 0;
+}
+
+[data-header-transition='tuck']::view-transition-new(*) {
+  animation: none;
+}
+
+/* Translation only: figures that measure themselves while they arrive keep their true size. */
+@keyframes home-reveal-item {
+  from {
+    opacity: 0;
+    translate: 0 24px;
+  }
+
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes home-marquee {
+  to {
+    translate: -50% 0;
+  }
+}
+
+@keyframes home-spin {
+  to {
+    rotate: 1turn;
+  }
+}
+
+@keyframes home-rise {
+  from {
+    opacity: 0;
+    translate: 0 20px;
+    filter: blur(6px);
+  }
+
+  to {
+    opacity: 1;
+    translate: 0 0;
+    filter: blur(0);
+  }
+}
+
+/*
+ * Forced colors drop shadows and backgrounds: framed tools keep a system-color contour, the size chart keeps
+ * its measured bars, and the footer's engraved mark (decoration only) steps aside instead of covering the links.
+ */
+@layer components {
+  @media (forced-colors: active) {
+    :is(.home-bento-card, .home-editor-window, .home-agent, .home-code-window, .home-lint-pane) {
+      outline: 1px solid CanvasText;
+    }
+
+    .home-bench-bar {
+      forced-color-adjust: none;
+    }
+
+    .home-footer-mark {
+      display: none;
+    }
+
+    /* The theme split keeps a visible line and handle where the two modes meet. */
+    .home-theme-divider {
+      forced-color-adjust: none;
+      background-color: CanvasText !important;
+    }
+
+    .home-theme-knob {
+      outline: 1px solid CanvasText;
+    }
+
+    /* The agent's steps keep a visible current step and progress without their fills. */
+    .home-agent-step[aria-current] {
+      outline: 1px solid Highlight;
+    }
+
+    .home-agent-step-track {
+      outline: 1px solid CanvasText;
+    }
+
+    .home-agent-step-fill {
+      background-color: Highlight;
+      forced-color-adjust: none;
+    }
+  }
+}