.loop-main {
  overflow: visible;
}

.loop-main h2,
.loop-main h3,
.loop-main p {
  overflow-wrap: break-word;
}

.loop-hero {
  min-height: calc(100vh - 88px);
  display: grid;
  grid-template-columns: 2fr 1fr;
  border-bottom: var(--line);
}

.loop-hero-main {
  min-width: 0;
  padding: clamp(36px, 4vw, 60px) 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 4vw, 58px);
}

.loop-hero h1 {
  margin: 0.38em 0 0;
  max-width: 100%;
  font-size: clamp(92px, 17vw, 245px);
  line-height: 0.78;
  letter-spacing: -0.085em;
  text-transform: uppercase;
}

.loop-hero h1 span {
  display: inline-block;
  transform: translateX(clamp(16px, 7vw, 110px));
  -webkit-text-stroke: 1px var(--ink);
  color: transparent;
}

.loop-hero-copy {
  max-width: 820px;
}

.loop-promise {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.055em;
  font-weight: 800;
}

.loop-availability {
  max-width: 690px;
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 6px solid var(--signal);
  font-size: 15px;
}

.loop-hero-rail {
  min-width: 0;
  border-left: var(--line);
  display: flex;
  flex-direction: column;
}

.loop-rail-cell {
  min-height: 33.333%;
  padding: 24px;
  border-bottom: var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

.loop-rail-cell:last-child {
  border-bottom: 0;
}

.loop-rail-cell b {
  font-size: clamp(28px, 3.25vw, 50px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.loop-is-acid {
  background: var(--acid);
}

.loop-proof {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: var(--line);
}

.loop-proof > div {
  min-width: 0;
  padding: 22px 24px 24px;
  border-right: var(--line);
}

.loop-proof > div:last-child {
  border-right: 0;
}

.loop-proof strong {
  display: block;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.loop-section {
  border-bottom: var(--line);
}

.loop-section-head {
  display: grid;
  grid-template-columns: 2fr 1fr;
  border-bottom: var(--line);
}

.loop-section-head > div,
.loop-section-head > p {
  min-width: 0;
  margin: 0;
  padding: clamp(32px, 5vw, 72px) 24px;
}

.loop-section-head > p {
  border-left: var(--line);
  display: flex;
  align-items: flex-end;
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.loop-section-head h2,
.loop-final-cta h2 {
  max-width: 980px;
  margin: 0.35em 0 0;
  font-size: clamp(42px, 7.5vw, 108px);
  line-height: 0.88;
  letter-spacing: -0.075em;
  text-transform: uppercase;
}

.loop-stages {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-bottom: var(--line);
}

.loop-stages li {
  min-width: 0;
  min-height: 310px;
  padding: 24px 18px;
  border-right: var(--line);
  display: flex;
  flex-direction: column;
}

.loop-stages li:last-child {
  border-right: 0;
}

.loop-stages li > span,
.loop-status {
  margin: 0;
  font: 700 10px/1.3 ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.loop-stages h3 {
  margin: auto 0 14px;
  font-size: clamp(24px, 2.25vw, 36px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.loop-stages p {
  margin: 0;
  min-height: 4.05em;
  font-size: 15px;
  line-height: 1.35;
}

.loop-stage-test {
  background: var(--acid);
}

.loop-stage-resolve {
  background: var(--panel);
}

.loop-definition {
  margin: 0;
  padding: 24px;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.loop-definition strong {
  font: 800 0.65em/1 ui-monospace, monospace;
  letter-spacing: 0.08em;
}

.loop-quickstart-grid,
.loop-routing,
.loop-authority-grid,
.loop-example-grid,
.loop-final-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.loop-code-wrap {
  min-width: 0;
  max-width: 100%;
  padding: 24px;
  background: var(--ink);
  color: var(--paper);
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.loop-code-wrap:focus-visible,
.loop-table-wrap:focus-visible {
  outline: 4px solid var(--blue);
  outline-offset: -4px;
}

.loop-code-wrap pre {
  min-width: 720px;
  margin: 36px 0 0;
  font: 600 15px/1.8 ui-monospace, monospace;
  white-space: pre;
}

.loop-note {
  min-width: 0;
  padding: clamp(32px, 5vw, 72px) 24px;
  border-left: var(--line);
  background: var(--acid);
}

.loop-note h3,
.loop-routing h3,
.loop-authority-warning h3,
.loop-example-grid h3,
.loop-trust-grid h3 {
  margin: 0.45em 0;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.loop-note a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 20px;
  font: 700 12px/1 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.loop-recovery {
  border-top: var(--line);
}

.loop-recovery details {
  border-bottom: var(--line);
}

.loop-recovery details:last-child {
  border-bottom: 0;
}

.loop-recovery summary {
  min-height: 58px;
  padding: 16px 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
}

.loop-recovery summary:focus-visible {
  outline: 4px solid var(--blue);
  outline-offset: -4px;
}

.loop-recovery summary span {
  flex: 0 0 auto;
  padding: 7px 9px;
  background: var(--signal);
  font: 800 10px/1 ui-monospace, monospace;
  letter-spacing: 0.08em;
}

.loop-recovery details p {
  max-width: 900px;
  margin: 0;
  padding: 0 24px 24px 56px;
}

.loop-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.loop-mode-grid article {
  min-width: 0;
  min-height: 330px;
  padding: 24px;
  border-right: var(--line);
  border-bottom: var(--line);
  display: flex;
  flex-direction: column;
}

.loop-mode-grid article:nth-child(3n) {
  border-right: 0;
}

.loop-mode-grid article:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.loop-mode-grid h3 {
  margin: auto 0 18px;
  font-size: clamp(36px, 5vw, 70px);
  line-height: 0.88;
  letter-spacing: -0.07em;
}

.loop-mode-grid article > p:last-child {
  margin: 0;
}

.loop-skills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.loop-skills article {
  min-width: 0;
  padding: 28px 24px 36px;
  border-right: var(--line);
}

.loop-skills article:last-child {
  border-right: 0;
}

.loop-skills article:nth-child(even) {
  background: var(--panel);
}

.loop-skills h3 {
  margin: 0;
}

.loop-skills ul {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.loop-skills li {
  min-width: 0;
  padding: 10px 0;
  border-top: var(--line);
}

.loop-skills code {
  overflow-wrap: anywhere;
  font: 700 13px/1.35 ui-monospace, monospace;
}

.loop-route-input,
.loop-route-branch article {
  min-width: 0;
  padding: clamp(32px, 5vw, 72px) 24px;
}

.loop-route-input {
  background: var(--ink);
  color: var(--paper);
}

.loop-route-input h3 {
  overflow-wrap: anywhere;
}

.loop-route-input ul {
  margin: 28px 0 0;
  padding-left: 1.15em;
}

.loop-route-input li {
  margin-top: 10px;
}

.loop-route-branch {
  min-width: 0;
  border-left: var(--line);
}

.loop-route-branch article + article {
  border-top: var(--line);
}

.loop-authority-warning {
  margin: 0;
  padding: clamp(32px, 5vw, 72px) 24px;
  border-bottom: var(--line);
  background: var(--signal);
}

.loop-authority-warning h3 {
  max-width: 1100px;
}

.loop-authority-warning p:last-child {
  max-width: 800px;
}

.loop-authority-grid > div {
  min-width: 0;
  padding: clamp(32px, 5vw, 72px) 24px;
}

.loop-authority-grid > div + div {
  border-left: var(--line);
}

.loop-authority-grid ol {
  margin: 32px 0 0;
  padding-left: 1.35em;
}

.loop-authority-grid ol li {
  margin-top: 14px;
}

.loop-invariants {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 32px 0 0;
  padding: 0;
  border-top: var(--line);
  border-left: var(--line);
}

.loop-invariants li {
  min-width: 0;
  padding: 15px 12px;
  border-right: var(--line);
  border-bottom: var(--line);
}

.loop-invariants code,
.loop-stop code {
  overflow-wrap: anywhere;
  font: 700 13px/1.3 ui-monospace, monospace;
}

.loop-stop {
  display: grid;
  grid-template-columns: 180px minmax(220px, 1fr) 2fr;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border-top: var(--line);
  background: var(--acid);
}

.loop-stop p {
  margin: 0;
}

.loop-stop code {
  font-size: clamp(20px, 3vw, 42px);
}

.loop-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.loop-table-wrap table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.loop-table-wrap caption {
  padding: 16px 24px;
  text-align: left;
  border-bottom: var(--line);
  font: 700 11px/1.3 ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.loop-table-wrap th,
.loop-table-wrap td {
  width: auto;
  padding: 18px 16px;
  border-right: var(--line);
  border-bottom: var(--line);
  text-align: left;
  vertical-align: top;
}

.loop-table-wrap th:last-child,
.loop-table-wrap td:last-child {
  border-right: 0;
}

.loop-table-wrap tbody tr:last-child th,
.loop-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.loop-table-wrap thead th {
  background: var(--ink);
  color: var(--paper);
  font: 700 11px/1.3 ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.loop-table-wrap tbody th {
  font-size: 24px;
  letter-spacing: -0.04em;
}

.loop-table-wrap code {
  overflow-wrap: anywhere;
}

.loop-example-grid article {
  min-width: 0;
  padding: clamp(32px, 5vw, 72px) 24px;
}

.loop-example-grid article + article {
  border-left: var(--line);
  background: var(--panel);
}

.loop-example-grid dl {
  margin: 36px 0 0;
  border-top: var(--line);
}

.loop-example-grid dl div {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: var(--line);
}

.loop-example-grid dt {
  font: 700 10px/1.4 ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.loop-example-grid dd {
  min-width: 0;
  margin: 0;
}

.loop-example-grid code {
  overflow-wrap: anywhere;
}

.loop-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.loop-trust-grid article {
  min-width: 0;
  min-height: 430px;
  padding: clamp(32px, 4vw, 56px) 24px;
  border-right: var(--line);
}

.loop-trust-grid article:last-child {
  border-right: 0;
}

.loop-final-cta {
  border-bottom: var(--line);
}

.loop-final-cta > div,
.loop-final-cta > aside {
  min-width: 0;
  padding: clamp(48px, 7vw, 92px) 24px;
}

.loop-final-cta > aside {
  margin: 0;
  border-left: var(--line);
  background: var(--acid);
}

.loop-final-cta h2 {
  font-size: clamp(42px, 6vw, 82px);
}

.loop-final-cta .button {
  margin-top: 24px;
}

@media (max-width: 1100px) {
  .loop-stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .loop-stages li:nth-child(3n) {
    border-right: 0;
  }

  .loop-stages li:nth-child(-n + 3) {
    border-bottom: var(--line);
  }
}

@media (max-width: 850px) {
  .loop-page .links a {
    min-height: 44px;
  }

  .loop-hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .loop-hero-main {
    min-height: 720px;
  }

  .loop-hero-rail {
    border-top: var(--line);
    border-left: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .loop-rail-cell {
    min-height: 230px;
    border-right: var(--line);
    border-bottom: 0;
  }

  .loop-rail-cell:last-child {
    border-right: 0;
  }

  .loop-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .loop-proof > div:nth-child(3) {
    border-right: 0;
  }

  .loop-proof > div:nth-child(-n + 3) {
    border-bottom: var(--line);
  }

  .loop-section-head,
  .loop-quickstart-grid,
  .loop-routing,
  .loop-authority-grid,
  .loop-example-grid,
  .loop-final-cta {
    grid-template-columns: 1fr;
  }

  .loop-section-head > p,
  .loop-note,
  .loop-route-branch,
  .loop-authority-grid > div + div,
  .loop-example-grid article + article,
  .loop-final-cta > aside {
    border-top: var(--line);
    border-left: 0;
  }

  .loop-mode-grid,
  .loop-skills,
  .loop-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loop-skills article {
    border-bottom: var(--line);
  }

  .loop-skills article:nth-child(2n) {
    border-right: 0;
  }

  .loop-skills article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .loop-mode-grid article:nth-child(3n),
  .loop-mode-grid article:nth-last-child(-n + 3) {
    border-right: var(--line);
    border-bottom: var(--line);
  }

  .loop-mode-grid article:nth-child(2n),
  .loop-trust-grid article:nth-child(2n) {
    border-right: 0;
  }

  .loop-mode-grid article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .loop-trust-grid article {
    border-bottom: var(--line);
  }

  .loop-trust-grid article:last-child {
    grid-column: 1 / -1;
    min-height: 320px;
    border-bottom: 0;
  }

  .loop-stop {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .loop-hero-main {
    min-height: auto;
    padding: 36px 20px 48px;
    gap: 48px;
  }

  .loop-hero h1 {
    font-size: clamp(62px, 27vw, 124px);
    letter-spacing: -0.075em;
  }

  .loop-hero h1 span {
    transform: none;
  }

  .loop-hero-rail,
  .loop-proof,
  .loop-stages,
  .loop-mode-grid,
  .loop-skills,
  .loop-trust-grid {
    grid-template-columns: 1fr;
  }

  .loop-rail-cell,
  .loop-proof > div,
  .loop-stages li,
  .loop-mode-grid article,
  .loop-skills article,
  .loop-trust-grid article,
  .loop-trust-grid article:nth-child(2n) {
    min-height: auto;
    border-right: 0;
    border-bottom: var(--line);
  }

  .loop-rail-cell {
    gap: 32px;
  }

  .loop-proof > div:last-child,
  .loop-stages li:last-child,
  .loop-mode-grid article:last-child,
  .loop-skills article:last-child,
  .loop-trust-grid article:last-child {
    border-bottom: 0;
  }

  .loop-stages h3,
  .loop-mode-grid h3 {
    margin-top: 48px;
  }

  .loop-stages p {
    min-height: auto;
  }

  .loop-section-head > div,
  .loop-section-head > p,
  .loop-route-input,
  .loop-route-branch article,
  .loop-authority-warning,
  .loop-authority-grid > div,
  .loop-example-grid article,
  .loop-trust-grid article,
  .loop-final-cta > div,
  .loop-final-cta > aside {
    padding: 36px 20px;
  }

  .loop-section-head h2,
  .loop-final-cta h2 {
    font-size: clamp(40px, 15vw, 68px);
  }

  .loop-code-wrap,
  .loop-note,
  .loop-definition,
  .loop-stop {
    padding: 20px;
  }

  .loop-code-wrap pre {
    min-width: 660px;
    font-size: 14px;
  }

  .loop-recovery summary {
    min-height: 64px;
    padding: 14px 20px;
    align-items: flex-start;
    flex-direction: column;
  }

  .loop-recovery details p {
    padding: 0 20px 24px;
  }

  .loop-invariants {
    grid-template-columns: 1fr;
  }

  .loop-example-grid dl div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .loop-trust-grid article:last-child {
    grid-column: auto;
  }
}

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

  .loop-hero h1 span {
    transform: none;
  }

  .loop-main *,
  .loop-main *::before,
  .loop-main *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .loop-hero h1 span {
    color: CanvasText;
    -webkit-text-stroke: 0;
  }

  .loop-authority-warning,
  .loop-recovery summary span,
  .loop-is-acid {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .loop-stage-test,
  .loop-stage-resolve,
  .loop-final-cta > aside {
    background: Canvas;
    color: CanvasText;
  }

  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  .loop-code-wrap:focus-visible,
  .loop-table-wrap:focus-visible {
    outline: 4px solid Highlight;
  }
}

@supports not (display: grid) {
  .loop-hero,
  .loop-proof,
  .loop-section-head,
  .loop-stages,
  .loop-mode-grid,
  .loop-skills,
  .loop-routing,
  .loop-authority-grid,
  .loop-example-grid,
  .loop-trust-grid,
  .loop-final-cta {
    display: block;
  }

  .loop-hero-rail,
  .loop-section-head > p,
  .loop-note,
  .loop-route-branch,
  .loop-authority-grid > div + div,
  .loop-example-grid article + article,
  .loop-final-cta > aside {
    border-left: 0;
    border-top: var(--line);
  }
}