/* Compose the compatibility reference with Ariel layouts and shared identity tokens. */
.compat-page {
  --cp-bg: var(--page-bg);
  --cp-panel: var(--page-surface);
  --cp-soft: var(--page-surface-soft);
  --cp-ink: var(--page-text);
  --cp-copy: var(--page-copy);
  --cp-muted: var(--page-muted);
  --cp-line: var(--page-border);
  --cp-accent: var(--page-accent);
  --cp-ready: #a8deca;
  --cp-terminal: #eac5aa;
  --cp-terminal-ink: #22394c;
  --cp-terminal-muted: #78523f;
  --cp-ubuntu: #e7a98f;
  --cp-debian: #e7b7c3;
  --cp-alma: #b8d2aa;
  --cp-rocky: #b0cde1;
  background: var(--cp-bg);
  color: var(--cp-ink);
  font-family: var(--font-interface);
  line-height: 1.65;
  isolation: isolate;
}
html[data-ariel-theme="light"] .compat-page {
  --cp-ready: #267d67;
}
.compat-page :where(h1, h2, h3, p, ol, ul) {
  margin: 0;
}
.compat-page :where(h1, h2, h3) {
  font-family: var(--font-interface);
  line-height: 1.16;
  letter-spacing: -0.052em;
}
.compat-page :where(h1, h2) em {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-style: italic;
  color: var(--cp-accent);
}
.compat-page :focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 4px;
}
.compat-page a {
  text-decoration: none;
}
.compat-page button {
  font: inherit;
}
.compat-page [hidden] {
  display: none;
}
.compat-container {
  inline-size: min(100% - 2.25rem, 80rem);
}
.compat-intro {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--header-height) + 2rem) 1.4rem;
  border-block-end: 1px solid var(--cp-line);
  background:
    radial-gradient(
      ellipse at 85% 35%,
      color-mix(in srgb, var(--cp-accent) 8%, transparent),
      transparent 48%
    ),
    var(--cp-bg);
}
.compat-intro::after {
  content: "";
  position: absolute;
  inset-inline-end: -9rem;
  inset-block-start: 3rem;
  inline-size: 30rem;
  block-size: 30rem;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 9%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.compat-crumb {
  --ariel-gap: 0.9rem;
  position: relative;
  z-index: 1;
  color: var(--cp-muted);
  font-size: 0.72rem;
  font-weight: 750;
}
.compat-crumb a:hover,
.compat-crumb > span:nth-child(2) {
  color: var(--cp-accent);
}
.compat-intro__layout {
  --ariel-gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-block: 4.5rem 3rem;
}
.compat-intro__content {
  position: relative;
  z-index: 1;
}
.compat-kicker,
.compat-number {
  --ariel-gap: 0.78rem;
  flex-wrap: nowrap;
  color: var(--cp-muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.15em;
}
.compat-kicker__star {
  flex-shrink: 0;
  color: var(--cp-accent);
  font-size: 1.1rem;
}
.compat-intro h1 {
  max-inline-size: 15ch;
  margin-block: 1.75rem;
  font-size: clamp(2.7rem, 8vi, 5.5rem);
  font-weight: 800;
}
.compat-intro__lead {
  max-inline-size: 56ch;
  color: var(--cp-copy);
  font-size: clamp(1rem, 1.8vi, 1.19rem);
  line-height: 1.83;
}
.compat-inline-link {
  display: inline-flex;
  max-inline-size: 100%;
  align-items: center;
  gap: 1.5rem;
  margin-block-start: 1.3rem;
  padding-block: 1rem;
  border-block-end: 1px solid var(--cp-accent);
  color: var(--cp-ink);
  font-size: 0.86rem;
  font-weight: 750;
}
.compat-inline-link:hover {
  color: var(--cp-accent);
}
.compat-inline-link > span:last-child {
  flex-shrink: 0;
}
.compat-intro__foot {
  --ariel-gap: 1rem 2rem;
  position: relative;
  z-index: 1;
  justify-content: space-between;
  padding-block: 1.25rem 0.1rem;
  border-block-start: 1px solid var(--cp-line);
  color: var(--cp-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.compat-intro__art {
  position: relative;
  display: grid;
  inline-size: min(100%, 26rem);
  aspect-ratio: 1;
  place-self: center;
  place-items: center;
}
.compat-art__ring {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 22%, transparent);
  border-radius: 50%;
}
.compat-art__ring--inner {
  inset: 15%;
  border-style: dashed;
}
.compat-art__sat {
  position: absolute;
  inset-block-start: 13%;
  inset-inline-end: 17%;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--cp-accent);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--cp-accent) 13%, transparent);
}
.compat-art__sat--two {
  inset-block-start: auto;
  inset-inline-end: auto;
  inset-block-end: 19%;
  inset-inline-start: 11%;
  inline-size: 5px;
  block-size: 5px;
}
.compat-art__stack {
  --ariel-gap: 0.4rem;
  position: relative;
  z-index: 1;
  inline-size: 95%;
  transform: rotate(-5deg);
  filter: drop-shadow(0 28px 38px rgb(0 0 0 / 15%));
}
.compat-art__terminal {
  --ariel-gap: 0.4rem;
  flex-wrap: nowrap;
  padding: 0.6rem 0.65rem;
  border-radius: 0.65rem 0.65rem 0.25rem 0.25rem;
  background: var(--cp-terminal);
  color: var(--cp-terminal-ink);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.compat-art__terminal-line {
  white-space: nowrap;
}
.compat-art__terminal-line > span {
  color: var(--cp-terminal-muted);
}
.compat-art__terminal-dots {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.compat-art__terminal-dots i {
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--cp-terminal-muted);
}
.compat-art__terminal-meta {
  margin-inline-start: auto;
  font-size: 0.5rem;
  letter-spacing: 0.03em;
  opacity: 0.7;
}
.compat-art__os {
  --ariel-gap: 0.6rem;
  flex-wrap: nowrap;
  min-block-size: 2.8rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--cp-line);
  border-radius: 0.35rem;
  background: var(--cp-panel);
  box-shadow: 0 8px 25px rgb(0 0 0 / 8%);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.compat-art__symbol {
  display: grid;
  flex-shrink: 0;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  place-items: center;
  border-radius: 0.5rem;
  color: var(--cp-terminal-ink);
  font-family: var(--font-editorial);
  font-size: 1rem;
  font-weight: 800;
}
.compat-art__os--ubuntu .compat-art__symbol,
.compat-family__emblem--ubuntu {
  background: var(--cp-ubuntu);
}
.compat-art__os--debian .compat-art__symbol,
.compat-family__emblem--debian {
  background: var(--cp-debian);
}
.compat-art__os--alma .compat-art__symbol,
.compat-family__emblem--alma {
  background: var(--cp-alma);
}
.compat-art__os--rocky .compat-art__symbol,
.compat-family__emblem--rocky {
  background: var(--cp-rocky);
}
.compat-art__os b {
  margin-inline-start: auto;
  color: var(--cp-muted);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.compat-art__caption {
  position: absolute;
  inset-inline-end: -0.3rem;
  inset-block-end: -2rem;
  color: var(--cp-accent);
  font-size: 0.93rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.compat-art__caption > span {
  padding-inline: 0.3rem;
  opacity: 0.4;
}
.compat-art__caption small {
  display: block;
  margin-block-start: 0.2rem;
  color: var(--cp-muted);
  font-size: 0.58rem;
}
.compat-section {
  padding-block: clamp(4.8rem, 9vi, 8.6rem);
}
.compat-number > span:first-child,
.compat-stage__idx,
.compat-rail b,
.compat-matrix__columns b,
.compat-matrix__version {
  flex-shrink: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.compat-number > span:first-child {
  color: var(--cp-accent);
  font-size: 0.75rem;
  font-weight: 900;
}
.compat-number i {
  flex: 0 0 1.8rem;
  block-size: 1px;
  background: var(--cp-accent);
}
.compat-heading {
  --ariel-gap: 1.3rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  margin-block-end: 2.5rem;
}
.compat-heading h2 {
  margin-block-start: 1.2rem;
  font-size: clamp(2.2rem, 5vi, 3.85rem);
  font-weight: 800;
}
.compat-heading > p {
  max-inline-size: 38ch;
  color: var(--cp-copy);
  font-size: 0.98rem;
  line-height: 1.85;
}
.compat-family-grid {
  --ariel-gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.compat-family {
  --ariel-gap: 1rem;
  appearance: none;
  min-block-size: 10rem;
  align-items: start;
  justify-content: space-between;
  padding: clamp(0.75rem, 2vi, 1.3rem);
  border: 1px solid var(--cp-line);
  border-radius: 1rem;
  background: var(--cp-panel);
  color: var(--cp-ink);
  text-align: start;
  cursor: pointer;
}
.compat-family:hover {
  border-color: var(--cp-accent);
}
.compat-family[aria-pressed="true"] {
  border-color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-panel) 86%, var(--cp-accent));
  box-shadow:
    inset 0 0 0 1px var(--cp-accent),
    0 14px 26px rgb(0 0 0 / 6%);
}
.compat-family__head {
  --ariel-gap: 0.5rem;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: start;
  inline-size: 100%;
}
.compat-family__emblem {
  display: grid;
  flex-shrink: 0;
  inline-size: 2.45rem;
  block-size: 2.45rem;
  place-items: center;
  border-radius: 0.77rem;
  color: var(--cp-terminal-ink);
  font-family: var(--font-editorial);
  font-size: 1.75rem;
  font-weight: 800;
}
.compat-family__mark {
  color: var(--cp-muted);
  font-size: 1.1rem;
}
.compat-family[aria-pressed="true"] .compat-family__mark {
  color: var(--cp-accent);
}
.compat-family strong {
  font-size: clamp(1rem, 2.5vi, 1.55rem);
  font-weight: 850;
  letter-spacing: -0.05em;
}
.compat-family__foot {
  min-block-size: 2.925rem;
  color: var(--cp-muted);
  font-size: clamp(0.65rem, 1.1vi, 0.72rem);
  line-height: 1.5;
}
.compat-chooser {
  --ariel-gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: 1.1rem;
  padding: clamp(1.25rem, 3vi, 2rem);
  border: 1px solid var(--cp-line);
  border-radius: 1rem;
  background: var(--cp-soft);
}
.compat-chooser__field {
  min-inline-size: 0;
}
.compat-chooser__label {
  display: block;
  margin-block-end: 0.85rem;
  color: var(--cp-copy);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.compat-segment {
  --ariel-gap: 0.47rem;
}
.compat-segment button {
  appearance: none;
  min-block-size: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--cp-line);
  border-radius: 0.65rem;
  background: var(--cp-bg);
  color: var(--cp-copy);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.compat-segment button:hover {
  border-color: var(--cp-accent);
}
.compat-segment button[aria-pressed="true"] {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--brand-surface);
}
.compat-current {
  --ariel-gap: 0.15rem;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  padding-block-start: 1.35rem;
  border-block-start: 1px solid var(--cp-line);
}
.compat-current > span:first-child {
  color: var(--cp-muted);
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}
.compat-current strong {
  font-size: 1.33rem;
  letter-spacing: -0.04em;
}
.compat-current > span:last-child {
  color: var(--cp-accent);
  font-size: 0.78rem;
  font-weight: 800;
}
.compat-context {
  --ariel-gap: 0.8rem;
  flex-wrap: nowrap;
  align-items: start;
  max-inline-size: 72ch;
  padding-block-start: 1.5rem;
  color: var(--cp-muted);
  font-size: 0.81rem;
}
.compat-context__dot {
  flex: 0 0 0.46rem;
  block-size: 0.46rem;
  margin-block-start: 0.4rem;
  border-radius: 50%;
  background: var(--cp-accent);
}
.compat-matrix {
  margin-block-start: 2rem;
  overflow: clip;
  border: 1px solid var(--cp-line);
  border-radius: 1rem;
  background: var(--cp-panel);
}
.compat-matrix > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
}
.compat-page summary {
  list-style: none;
  cursor: pointer;
}
.compat-page summary::-webkit-details-marker {
  display: none;
}
.compat-matrix > summary > span:first-child {
  display: grid;
  gap: 0.2rem;
  min-inline-size: 0;
}
.compat-matrix > summary strong {
  font-size: 1.05rem;
  letter-spacing: -0.025em;
}
.compat-matrix > summary small {
  color: var(--cp-muted);
  font-size: 0.76rem;
}
.compat-matrix__expand,
.compat-stage__plus {
  display: grid;
  flex-shrink: 0;
  inline-size: 2rem;
  block-size: 2rem;
  place-items: center;
  border: 1px solid var(--cp-line);
  border-radius: 50%;
  color: var(--cp-accent);
  font-size: 1.1rem;
}
.compat-matrix[open] .compat-matrix__expand,
.compat-stage[open] .compat-stage__plus {
  transform: rotate(45deg);
}
.compat-matrix__content {
  padding: 1.35rem;
  border-block-start: 1px solid var(--cp-line);
}
.compat-matrix__intro,
.compat-matrix__note {
  color: var(--cp-copy);
  font-size: 0.79rem;
  line-height: 1.8;
}
.compat-matrix__key {
  --ariel-gap: 0.7rem 1.4rem;
  margin-block: 1.2rem;
  color: var(--cp-copy);
  font-size: 0.72rem;
}
.compat-matrix__key > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.compat-matrix__key b {
  color: var(--cp-accent);
  font-size: 0.95rem;
}
.compat-matrix__grid {
  --ariel-gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
.compat-matrix__group {
  min-inline-size: 0;
  padding: 1.1rem;
  border: 1px solid var(--cp-line);
  border-radius: 0.75rem;
  background: var(--cp-soft);
}
.compat-matrix__group h3 {
  margin-block-end: 0.7rem;
  font-size: 0.9rem;
  font-weight: 850;
  letter-spacing: -0.035em;
}
.compat-matrix__group ul {
  padding: 0;
  list-style: none;
}
.compat-matrix__group li,
.compat-matrix__header {
  display: grid;
  grid-template-columns: minmax(4rem, 1fr) 4.8rem;
  align-items: center;
  gap: 0.5rem;
  min-inline-size: 0;
}
.compat-matrix__group li {
  padding-block: 0.55rem;
  border-block-start: 1px solid var(--cp-line);
  font-size: 0.72rem;
}
.compat-matrix__group li[aria-current="true"] {
  color: var(--cp-accent);
}
.compat-matrix__version {
  font-weight: 750;
}
.compat-matrix__header {
  margin-block: 0.3rem 0.45rem;
  color: var(--cp-muted);
  font-size: 0.53rem;
  font-weight: 850;
  letter-spacing: 0.02em;
}
.compat-matrix__columns,
.compat-matrix__statuses {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  gap: 0.1rem;
}
.compat-matrix__status {
  color: var(--cp-ready);
  font-size: 0.8rem;
  font-weight: 850;
}
.compat-matrix__status--role {
  color: var(--cp-accent);
}
.compat-matrix__note {
  margin-block-start: 1.3rem;
}
.compat-path {
  border-block: 1px solid var(--cp-line);
  background: color-mix(in srgb, var(--cp-panel) 48%, var(--cp-bg));
}
.compat-rail {
  --ariel-gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr);
  margin-block: 2.8rem;
  padding: 0;
  list-style: none;
}
.compat-rail > li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-inline-size: 0;
  min-block-size: 4rem;
  padding: 1rem 0.75rem;
  border: 1px solid var(--cp-line);
  border-radius: 0.68rem;
  background: var(--cp-bg);
}
.compat-rail > li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 1.7rem;
  inset-block-end: calc(-0.5rem - 1px);
  inline-size: 1px;
  block-size: 0.5rem;
  background: var(--cp-accent);
}
.compat-rail b {
  color: var(--cp-accent);
  font-size: 0.9rem;
}
.compat-rail > li > span {
  font-size: 0.85rem;
  font-weight: 850;
}
.compat-rail small {
  color: var(--cp-muted);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.075em;
}
.compat-rail > .compat-rail__optional {
  border-style: dashed;
}
.compat-stage-list {
  --ariel-gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
.compat-stage {
  min-inline-size: 0;
  overflow: clip;
  border: 1px solid var(--cp-line);
  border-radius: 1rem;
  background: var(--cp-panel);
}
.compat-stage[open] {
  border-color: color-mix(in srgb, var(--cp-accent) 43%, var(--cp-line));
}
.compat-stage > summary {
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr) 1.5rem;
  align-items: start;
  gap: 0.6rem;
  padding: 1rem 0.8rem;
}
.compat-stage__idx {
  display: grid;
  grid-row: span 2;
  gap: 0.1rem;
  color: var(--cp-accent);
  font-size: 1.07rem;
  font-weight: 850;
  line-height: 1.1;
}
.compat-stage__idx small {
  color: var(--cp-muted);
  font-size: 0.68rem;
}
.compat-stage__headline {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  gap: 0.4rem;
  min-inline-size: 0;
}
.compat-stage__headline strong {
  font-size: clamp(1.03rem, 1.85vi, 1.45rem);
  line-height: 1.33;
  letter-spacing: -0.04em;
}
.compat-stage__headline > span {
  max-inline-size: 64ch;
  color: var(--cp-copy);
  font-size: 0.79rem;
  line-height: 1.7;
}
.compat-stage__badge {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  padding: 0.32rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--cp-ready) 28%, transparent);
  border-radius: 1rem;
  color: var(--cp-ready);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.06em;
}
.compat-stage__badge--optional {
  border-color: color-mix(in srgb, var(--cp-accent) 35%, transparent);
  color: var(--cp-accent);
}
.compat-stage__plus {
  grid-column: 3;
  grid-row: 1;
  inline-size: 1.5rem;
  block-size: 1.5rem;
}
.compat-stage__inside {
  padding: 0 0.85rem 1.4rem;
  border-block-start: 1px solid var(--cp-line);
}
.compat-stage__notice {
  padding-block: 1.15rem 0.5rem;
  color: var(--cp-muted);
  font-size: 0.79rem;
}
.compat-operation {
  --ariel-gap: 0.7rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 1.25rem;
  border-block-end: 1px solid var(--cp-line);
}
.compat-operation:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}
.compat-operation h3 {
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: -0.03em;
}
.compat-operation p {
  padding-block-start: 0.26rem;
  color: var(--cp-copy);
  font-size: 0.8rem;
  line-height: 1.8;
}
.compat-operation details {
  min-inline-size: 0;
}
.compat-operation summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
  padding-block: 0.4rem;
  color: var(--cp-accent);
  font-size: 0.7rem;
  font-weight: 850;
}
.compat-operation summary::after {
  content: "↗";
  font-size: 0.9rem;
}
.compat-operation details[open] summary::after {
  content: "↘";
}
.compat-operation details p {
  margin-block: 0.4rem 0;
  padding: 0.9rem 1rem;
  border-inline-start: 2px solid var(--cp-accent);
  border-radius: 0.3rem;
  background: var(--cp-soft);
  font-size: 0.77rem;
}
.compat-notes-grid {
  --ariel-gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
.compat-notes-grid article {
  min-inline-size: 0;
  padding: 2rem;
  border: 1px solid var(--cp-line);
  border-radius: 1rem;
  background: var(--cp-panel);
}
.compat-notes__icon {
  display: grid;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  place-items: center;
  margin-block-end: 2rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--cp-accent) 14%, transparent);
  color: var(--cp-accent);
  font-size: 1.1rem;
}
.compat-notes-grid h3 {
  margin-block-end: 0.8rem;
  font-size: 1.4rem;
  font-weight: 800;
}
.compat-notes-grid p {
  min-block-size: 4.5rem;
  color: var(--cp-copy);
  font-size: 0.9rem;
  line-height: 1.83;
}
.compat-notes-grid small {
  display: block;
  margin-block-start: 1.4rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--cp-line);
  color: var(--cp-accent);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.compat-outro {
  padding-block: 1rem 7rem;
}
.compat-outro__panel {
  --ariel-gap: 2.2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: clamp(2rem, 5vi, 4rem);
  border: 1px solid var(--cp-line);
  border-radius: 1.15rem;
  background: linear-gradient(
    115deg,
    color-mix(in srgb, var(--cp-accent) 8%, var(--cp-panel)),
    var(--cp-panel)
  );
}
.compat-outro h2 {
  margin-block: 1rem;
  font-size: clamp(2.15rem, 4.5vi, 3.45rem);
}
.compat-outro p:not(.compat-number) {
  max-inline-size: 45ch;
  color: var(--cp-copy);
  font-size: 0.95rem;
}
.compat-outro__links {
  --ariel-gap: 0.7rem;
}
.compat-outro__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--cp-line);
  border-radius: 0.65rem;
  background: var(--cp-bg);
  color: var(--cp-ink);
  font-size: 0.82rem;
  font-weight: 800;
}
.compat-outro__links a:hover {
  border-color: var(--cp-accent);
}
.compat-outro__links a > span:last-child {
  flex-shrink: 0;
  color: var(--cp-accent);
  font-size: 1.1rem;
}
/* Use the same single layout transition as the shared template. */
@media (min-width: 64rem) {
  .compat-intro__layout {
    grid-template-columns: 1.12fr 0.88fr;
    min-block-size: 35rem;
    padding-block: 5.5rem;
  }
  .compat-intro h1 {
    font-size: clamp(4.1rem, 5vi, 6rem);
  }
  .compat-intro__art {
    inline-size: min(100%, 27rem);
  }
  .compat-art__stack {
    inline-size: 79%;
  }
  .compat-art__terminal {
    --ariel-gap: 0.7rem;
    padding: 0.95rem 1.05rem;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }
  .compat-art__terminal-meta {
    font-size: 0.56rem;
  }
  .compat-art__os {
    --ariel-gap: 1rem;
    min-block-size: 3.3rem;
    padding: 0.6rem 1.05rem;
    font-size: 0.69rem;
    letter-spacing: 0.13em;
  }
  .compat-art__symbol {
    inline-size: 1.95rem;
    block-size: 1.95rem;
  }
  .compat-art__os b {
    font-size: 0.6rem;
  }
  .compat-art__caption {
    inset-block-end: -0.7rem;
  }
  .compat-heading {
    grid-template-columns: 1.5fr 0.8fr;
  }
  .compat-family-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .compat-family {
    min-block-size: 13.5rem;
    padding: 1.7rem;
  }
  .compat-family__emblem {
    inline-size: 2.8rem;
    block-size: 2.8rem;
  }
  .compat-family__foot {
    min-block-size: 0;
  }
  .compat-chooser {
    grid-template-columns: 1.25fr 1fr 1.1fr;
    align-items: center;
  }
  .compat-current {
    padding-block: 0;
    padding-inline-start: 1.4rem;
    border-block-start: 0;
    border-inline-start: 1px solid var(--cp-line);
  }
  .compat-matrix__content {
    padding: 1.7rem;
  }
  .compat-matrix__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .compat-matrix__group {
    padding: 0.95rem;
  }
  .compat-matrix__group li,
  .compat-matrix__header {
    grid-template-columns: minmax(4.2rem, 1fr) 5.2rem;
  }
  .compat-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .compat-rail > li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.4rem;
    min-block-size: 7.25rem;
    padding: 1.3rem 1.1rem;
  }
  .compat-rail > li:not(:last-child)::after {
    inset-inline-start: auto;
    inset-inline-end: calc(-0.5rem - 1px);
    inset-block-start: 2.35rem;
    inset-block-end: auto;
    inline-size: 0.5rem;
    block-size: 1px;
  }
  .compat-rail small {
    font-size: 0.53rem;
  }
  .compat-stage > summary {
    grid-template-columns: 2.7rem minmax(0, 1fr) auto 2rem;
    align-items: center;
    gap: 1.1rem;
    padding: 1.8rem 2rem;
  }
  .compat-stage__idx {
    grid-row: 1;
    font-size: 1.5rem;
  }
  .compat-stage__badge {
    grid-column: 3;
    grid-row: 1;
    white-space: nowrap;
  }
  .compat-stage__plus {
    grid-column: 4;
    inline-size: 2rem;
    block-size: 2rem;
  }
  .compat-stage__inside {
    padding-inline: 2rem;
  }
  .compat-operation {
    --ariel-gap: 2.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.55fr);
    align-items: start;
  }
  .compat-notes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .compat-outro__panel {
    grid-template-columns: 1.2fr 0.85fr;
  }
}