@media (max-width: 64rem) {
  .page-shell--with-sidebar {
    grid-template-columns: 1fr;
  }

  .page-sidebar__inner {
    position: static;
  }

  .transformer-architecture__frame {
    grid-template-columns: 1fr;
  }

  .transformer-architecture__arrow {
    justify-self: center;
    transform: rotate(90deg);
  }

  .masking-demo__layout {
    grid-template-columns: 1fr;
  }

  .kv-cache-demo__stage-grid,
  .kv-cache-demo__summary,
  .step-demo__detail-grid {
    grid-template-columns: 1fr;
  }

  .kv-cache-demo__arrow {
    transform: rotate(90deg);
  }

  .projection-modal-demo__layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  .page-main p,
  .page-main li {
    font-size: 1rem;
  }

  h2 {
    font-size: clamp(1.75rem, 6vw, 2.15rem);
  }

  h3 {
    font-size: clamp(1.28rem, 4.5vw, 1.55rem);
  }

  h4 {
    font-size: 0.96rem;
  }

  .page--annotated-scaffold .page-shell--with-sidebar {
    grid-template-columns: 1fr;
  }

  .page--annotated-scaffold .page-sidebar {
    order: -1;
  }

  .site-header {
    flex-wrap: wrap;
  }

  .site-header__toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    padding-top: 0.4rem;
  }

  .site-nav.is-open {
    display: flex;
  }

  .hero h1 {
    max-width: none;
  }

  .hero__dek {
    font-size: 1.04rem;
  }

  .page-shell {
    width: min(calc(100% - 1.2rem), var(--max-width));
    padding-top: 1.2rem;
  }

  .projection-visual {
    grid-template-columns: 1fr;
  }

  .one-hot-figure__header,
  .one-hot-figure__labels,
  .one-hot-figure__row {
    grid-template-columns: 1fr;
  }

  .one-hot-figure__header {
    align-items: start;
  }

  .one-hot-figure__note {
    text-align: left;
    max-width: none;
  }

  .one-hot-figure__vector {
    grid-template-columns: repeat(4, minmax(2.1rem, 1fr));
  }

  .projection-operator {
    justify-self: center;
  }

  .softmax-process {
    grid-template-columns: 1fr;
  }

  .softmax-roadmap {
    grid-template-columns: 1fr;
  }

  .softmax-roadmap__step::after,
  .softmax-step--flow::after {
    content: none;
  }

  .softmax-chips {
    grid-template-columns: 1fr;
  }

  .function-signature-hover__popover {
    left: 0;
    width: min(94vw, 30rem);
  }

  .masking-demo {
    padding: 1rem;
  }

  .masking-demo__header {
    flex-direction: column;
  }

  .masking-demo__step-controls {
    width: 100%;
    justify-content: space-between;
  }

  .masking-demo__toolbar {
    flex-direction: column;
  }

  .masking-demo__row-button {
    width: 100%;
  }

  .masking-demo__matrix-shell {
    overflow-x: auto;
  }

  .masking-demo__matrix {
    min-width: 22rem;
  }

  .kv-cache-demo {
    padding: 1rem;
  }

  .kv-cache-demo__header {
    flex-direction: column;
  }

  .assignment-flow-preview__header,
  .step-demo__header,
  .projection-modal-demo__header {
    flex-direction: column;
  }

  .kv-cache-demo__step-controls {
    width: 100%;
    justify-content: space-between;
  }

  .kv-cache-demo__roadmap {
    grid-template-columns: 1fr;
  }

  .kv-cache-demo__roadmap-step:not(:last-child)::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -0.58rem;
    transform: translateX(-50%) rotate(90deg);
  }

  .step-demo__step-controls {
    width: 100%;
    justify-content: space-between;
  }

  .step-demo[data-home-flow-stepper] .step-demo__pipeline {
    grid-template-columns: 1fr;
  }

  .step-demo[data-home-flow-stepper] .step-demo__panel {
    display: none;
  }

  .step-demo[data-home-flow-stepper] .step-demo__panel.is-active {
    display: block;
  }

  .kv-cache-demo__math {
    grid-template-columns: 1fr;
  }

  .site-modal {
    width: calc(100vw - 1rem);
  }

  .site-modal__surface {
    max-height: calc(100vh - 1rem);
    padding: 1rem;
  }

  .language-bash pre,
  .language-sh pre,
  .language-shell pre {
    font-size: 0.84rem;
  }

  .language-bash pre code,
  .language-sh pre code,
  .language-shell pre code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .page--annotated-scaffold .highlight pre,
  .page--annotated-scaffold .highlighter-rouge pre,
  .page--qsort-function-pointers .highlight pre,
  .page--qsort-function-pointers .highlighter-rouge pre,
  .page--strings-in-c .highlight pre,
  .page--strings-in-c .highlighter-rouge pre {
    font-size: 0.84rem;
  }

  .page--annotated-scaffold .highlight pre code,
  .page--annotated-scaffold .highlighter-rouge pre code,
  .page--qsort-function-pointers .highlight pre code,
  .page--qsort-function-pointers .highlighter-rouge pre code,
  .page--strings-in-c .highlight pre code,
  .page--strings-in-c .highlighter-rouge pre code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .worked-example .highlighter-rouge pre,
  .worked-example .highlight pre {
    padding: 0.8rem 0.9rem;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .worked-example .highlighter-rouge pre code,
  .worked-example .highlight pre code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  mjx-container[display="true"] {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.15rem;
    font-size: 0.92em;
    -webkit-overflow-scrolling: touch;
  }

  mjx-container[display="true"] > mjx-math {
    min-width: min-content;
  }

  .worked-example mjx-container[display="true"] {
    font-size: 0.78em;
  }

  .assignment-flow-preview,
  .projection-demo {
    padding: 1rem;
  }

  .assignment-flow-preview__open,
  .projection-demo__open {
    width: 100%;
  }

  .action-list--getting-started {
    grid-template-columns: 1fr;
  }

  .action-list--marking {
    grid-template-columns: 1fr;
  }

  .action-list--marking .action-card:last-child {
    grid-column: auto;
  }

  .page--tokens-embeddings .token-journey__lane {
    grid-template-columns: 1fr;
  }

  .page--tokens-embeddings .token-journey__arrow {
    transform: rotate(90deg);
  }

  .page--tokens-embeddings .embedding-matrix-figure__header {
    flex-direction: column;
    align-items: start;
  }

  .page--tokens-embeddings .embedding-matrix-figure__labels,
  .page--tokens-embeddings .embedding-matrix-figure__grid {
    grid-template-columns: minmax(4.8rem, auto) repeat(4, minmax(2.6rem, 1fr));
  }

  .page--strings-in-c .cstring-figure__header {
    flex-direction: column;
    align-items: start;
  }

  .page--strings-in-c .cstring-figure__labels,
  .page--strings-in-c .cstring-figure__grid {
    grid-template-columns: minmax(4.4rem, auto) repeat(4, minmax(2.4rem, 1fr));
  }

  .bounds-table {
    min-width: 0;
    table-layout: fixed;
  }

  .bounds-table th,
  .bounds-table td {
    padding: 0.7rem 0.75rem;
    font-size: 0.92rem;
  }

  .bounds-table th {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
  }

  .bounds-table td:first-child {
    white-space: nowrap;
  }

  .bounds-table td:last-child {
    white-space: normal;
  }

  .bounds-table code {
    font-size: 0.82rem;
    word-break: break-word;
  }

  .worked-example {
    margin-left: 0;
    padding: 0.95rem 0.95rem 0.95rem 1rem;
  }

  .worked-example__title {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    line-height: 1.35;
    max-inline-size: 30ch;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-wrap: balance;
  }

  .site-footer p {
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .token-journey.has-figure-motion .token-journey__stage,
  .token-journey.has-figure-motion .token-journey__arrow,
  .token-journey.has-figure-motion .token-journey__row,
  .softmax-visual.has-figure-motion .softmax-card,
  .softmax-visual.has-figure-motion .softmax-step,
  .softmax-visual.has-figure-motion .softmax-curve__point,
  .softmax-visual.has-figure-motion .softmax-curve__label,
  .transformer-architecture.has-figure-motion .transformer-architecture__frame > section,
  .transformer-architecture.has-figure-motion .transformer-architecture__arrow,
  .transformer-architecture.has-figure-motion .transformer-architecture__tokens span,
  .transformer-architecture.has-figure-motion .transformer-architecture__stack > .transformer-architecture__box,
  .vector-figure.has-figure-motion .vector-figure__point,
  .vector-figure.has-figure-motion .vector-figure__label {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .masking-demo__matrix td,
  .masking-demo__step-button,
  .masking-demo__row-button,
  .masking-demo__mask-chip,
  .kv-cache-demo__step-button,
  .kv-cache-demo__panel,
  .kv-cache-demo__math-card,
  .kv-cache-demo__summary-card {
    transition: none;
  }

  .kv-cache-demo__flight-chip {
    transition: none;
  }

  .softmax-visual.has-figure-motion .softmax-bars__fill {
    transform: scaleX(1);
    transition: none;
  }

  .softmax-visual.has-figure-motion .softmax-curve__line,
  .vector-figure.has-figure-motion .vector-figure__vector {
    stroke-dashoffset: 0;
    transition: none;
  }
}