@layer pages {
  .arena-shell { background: #fbf8f0; height: 100dvh; overflow: hidden; }
  .arena-shell > main { min-height: 0; }
  .arena-shell .site-header { border-color: var(--neutral-300); border-radius: var(--radius-sm); box-shadow: inset 0 1px 0 var(--neutral-0), 0 4px 0 var(--neutral-300), 0 0.8rem 1.5rem #211b1d14; clip-path: polygon(0.65rem 0, calc(100% - 0.65rem) 0, 100% 0.65rem, 100% calc(100% - 0.65rem), calc(100% - 0.65rem) 100%, 0.65rem 100%, 0 calc(100% - 0.65rem), 0 0.65rem); margin: 0.25rem 0.3rem 0; min-height: 5.25rem; padding-inline: 2rem; }
  .arena-shell .brand { font-size: var(--text-h2); gap: var(--space-4); letter-spacing: -0.02em; }
  .arena-shell .brand__mark { background: transparent; border: 0; color: var(--neutral-950); height: 3rem; width: 3rem; }
  .arena-shell .brand__mark .icon { height: 2.6rem; width: 2.6rem; }
  .arena-shell .brand__pixels { display: none; }
  .arena-shell .public-nav { gap: var(--space-3); }
  .arena-shell .public-nav a { font-size: 1.2rem; min-height: 3.25rem; padding-inline: 1.7rem; }
  .arena-shell .season-chip { border-color: var(--neutral-300); box-shadow: var(--shadow-instrument); color: var(--color-text); font-size: var(--text-body); min-height: 2.9rem; padding-inline: var(--space-4); }
  .arena-shell .season-chip .icon { height: 1.35rem; width: 1.35rem; }
  .arena-shell .site-footer { display: none; }

  .arena-page { container-name: arena; container-type: inline-size; display: grid; gap: var(--space-3); grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; margin-inline: auto; max-width: 100rem; overflow: hidden; padding: var(--space-3) var(--space-4) 0.35rem; }
  .arena-page > * { min-width: 0; }

  .prompt-panel { background: var(--color-surface); border: 2px solid var(--neutral-200); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 var(--neutral-0), 0 3px 0 var(--neutral-300), 0 0.7rem 1.3rem #211b1d0f; margin-inline: 0.75rem; overflow: clip; }
  .prompt-panel summary { align-items: center; display: flex; font-weight: var(--weight-bold); gap: var(--space-4); justify-content: space-between; min-height: 3.75rem; padding: var(--space-2) var(--space-4); }
  .prompt-panel summary:hover { background: var(--neutral-50); }
  .prompt-panel__label { align-items: center; display: flex; gap: var(--space-4); min-width: 0; }
  .prompt-panel__label strong { font-size: var(--text-lead); letter-spacing: -0.015em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .prompt-panel__flag { align-items: center; background: var(--neutral-50); border: 1px solid var(--neutral-200); border-radius: var(--radius-md); color: var(--neutral-950); display: flex; flex: 0 0 auto; height: 2.5rem; justify-content: center; width: 2.5rem; }
  .prompt-panel__flag .icon { height: 1.5rem; width: 1.5rem; }
  .prompt-panel__body { border-top: 1px solid var(--color-border); font-size: var(--text-body); font-weight: var(--weight-medium); max-height: 12rem; overflow: auto; overflow-wrap: anywhere; padding: var(--space-4) var(--space-6); white-space: pre-wrap; }
  .review-progress { align-items: center; color: var(--color-text); display: flex; flex: 0 0 auto; font-size: var(--text-sm); font-weight: var(--weight-medium); gap: var(--space-4); }
  .review-progress__steps { align-items: center; display: flex; }
  .review-progress__steps span { align-items: center; background: var(--neutral-50); border: 2px solid var(--neutral-300); border-radius: 50%; display: inline-flex; font-weight: var(--weight-bold); height: 2rem; justify-content: center; width: 2rem; }
  .review-progress__steps span.is-current, .review-progress__steps span.is-complete { background: #f4c550; border-color: #c58c16; }
  .review-progress__steps i { background: var(--neutral-300); height: 2px; width: 2.5rem; }
  .review-progress__steps span.is-complete + i { background: #c58c16; }

  .candidate-tabs { background: var(--neutral-100); border: 1px solid var(--color-border); border-radius: var(--radius-lg); gap: var(--space-1); padding: var(--space-1); }
  html[data-js="enabled"] .candidate-tabs.js-only:not([hidden]) { display: grid !important; grid-template-columns: 1fr 1fr; }
  .candidate-tabs button { background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--color-text-secondary); font-weight: var(--weight-bold); min-height: 2.9rem; min-width: 0; overflow-wrap: anywhere; }
  .candidate-tabs button[aria-selected="true"] { background: var(--neutral-950); color: var(--neutral-0); }
  .candidate-grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .candidate { background: var(--color-surface); border: 2px solid var(--neutral-300); border-radius: 1.2rem; box-shadow: inset 0 1px 0 var(--neutral-0), 0 3px 0 var(--neutral-300); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; overflow: clip; }
  .candidate__header { align-items: center; background: var(--neutral-50); display: flex; gap: var(--space-3); justify-content: space-between; min-height: 3rem; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3); }
  .candidate__identity { align-items: center; display: flex; gap: var(--space-3); min-width: 0; }
  .candidate__identity > div { min-width: 0; }
  .candidate__header h2 { font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
  .candidate__model { display: block; font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .candidate__header .status { min-height: 1.6rem; }
  .candidate__external { flex: 0 0 auto; }
  .candidate__stage { background: var(--neutral-900); border: 0.4rem solid var(--neutral-800); border-radius: 0.9rem; display: grid; margin: 0 0.65rem 0.65rem; min-height: 0; overflow: hidden; place-items: center; position: relative; }
  .candidate__stage iframe { background: var(--neutral-0); border: 0; border-radius: 0.55rem; height: 100%; inset: 0; position: absolute; width: 100%; }
  .candidate__launch { align-items: center; color: var(--neutral-100); display: flex; flex-direction: column; gap: var(--space-3); max-width: 28rem; min-width: 0; padding: var(--space-8); text-align: center; width: 100%; }
  .candidate__launch .text-link { color: var(--neutral-100); max-width: 100%; overflow-wrap: anywhere; }
  .candidate__glyph { align-items: center; background: var(--neutral-800); border: 1px solid var(--neutral-500); border-radius: var(--radius-md); box-shadow: inset 0 1px 0 var(--neutral-700), 0 2px 0 var(--neutral-950); display: flex; font-size: var(--text-h2); height: 4rem; justify-content: center; padding-left: 0.2rem; width: 4rem; }
  .candidate__footer { align-items: center; background: var(--neutral-100); border-top: 1px solid var(--neutral-300); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; min-height: 2.75rem; padding: var(--space-1) var(--space-3); }
  .candidate__footer > * { max-width: 100%; min-width: 0; }
  .candidate__footer .status { overflow-wrap: anywhere; white-space: normal; }
  .candidate__footer > .text-link { font-size: var(--text-sm); }

  .vote-dock { background: var(--neutral-100); border: 2px solid var(--neutral-300); border-radius: 1.2rem; box-shadow: inset 0 1px 0 var(--neutral-0), 0 4px 0 var(--neutral-400), 0 0.8rem 1.4rem #211b1d14; display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .vote-console { border: 2px solid var(--neutral-300); border-radius: var(--radius-lg); display: grid; grid-template-rows: auto auto; padding: 0 var(--space-3) var(--space-2); }
  .vote-dock__copy { align-items: center; display: flex; gap: var(--space-4); justify-content: center; margin-top: -0.8rem; text-align: center; }
  .vote-dock__copy h2 { background: var(--neutral-100); font-size: var(--text-sm); letter-spacing: 0.08em; padding-inline: var(--space-3); text-transform: uppercase; }
  .pixel-spark { background: var(--neutral-400); box-shadow: 0.35rem 0 var(--neutral-400), 0 0.35rem var(--neutral-400), 0.35rem 0.35rem var(--neutral-400); height: 0.25rem; width: 0.25rem; }
  .vote-form { margin-top: var(--space-1); }
  .vote-choices { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); height: 100%; }
  .button--vote { background: var(--color-surface); border: 2px solid var(--neutral-600); border-radius: var(--radius-sm); box-shadow: inset 0 1px 0 var(--neutral-0), 0 3px 0 var(--neutral-500); color: var(--color-text); display: flex; font-size: var(--text-body); min-height: 3.75rem; opacity: 1 !important; padding: var(--space-2) var(--space-3); }
  .button--vote:hover { background: var(--accent-50); border-color: var(--accent-600); }
  .vote-key { align-items: center; background: var(--neutral-950); border: 2px solid var(--neutral-800); border-radius: var(--radius-sm); box-shadow: 0 2px 0 var(--neutral-400); color: var(--neutral-0); display: inline-flex; font-family: var(--font-mono); font-size: var(--text-body); height: 2rem; justify-content: center; width: 2rem; }
  .vote-key--tie { background: transparent; border: 0; box-shadow: none; color: var(--neutral-950); font-size: 2rem; }
  .vote-dock__secondary { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
  .vote-dock__secondary > form:last-child .button { min-width: 12rem; }
  .failure-form { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .failure-form__label { color: var(--color-text-secondary); font-size: var(--text-xs); }
  .failure-choices { align-items: center; display: flex; flex-wrap: wrap; }
  .failure-choices .text-button { font-size: var(--text-xs); min-height: 2rem; padding: var(--space-1); }
  .vote-result { align-items: center; display: flex; gap: var(--space-3); min-width: 0; width: 100%; }
  .vote-result > span { color: var(--color-text-secondary); flex: 1; font-size: var(--text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vote-dock.is-recorded { border-color: var(--success-strong); }
  .button--vote.is-selected { background: var(--success-soft); border-color: var(--success-strong); color: var(--success-strong); }
  .candidate--winner { border-color: var(--success-strong); animation: verdict-reveal 320ms var(--ease-out); }
  .candidate--winner .candidate__header { background: var(--success-soft); }
  .candidate--tie { border-color: var(--info-strong); animation: verdict-reveal 320ms var(--ease-out); }
  .candidate--tie .candidate__header { background: var(--info-soft); }
  .candidate--not-selected .candidate__header { background: var(--neutral-100); color: var(--color-text-secondary); }
  @keyframes verdict-reveal { from { opacity: 0.72; transform: translateY(0.35rem); } to { opacity: 1; transform: translateY(0); } }

  .result-page { display: grid; gap: var(--space-6); max-width: 72rem; }
  .result-header { align-items: start; display: grid; gap: var(--space-4); grid-template-columns: auto 1fr; }
  .result-header > div { display: grid; gap: var(--space-2); }
  .result-header p:last-child { color: var(--color-text-secondary); }
  .result-header__mark { align-items: center; background: var(--success-soft); border: 1px solid var(--success-strong); border-radius: var(--radius-md); color: var(--success-strong); display: flex; font-size: var(--text-h2); height: 3.25rem; justify-content: center; width: 3.25rem; }
  .reveal-grid { display: grid; gap: var(--space-4); }
  .reveal-row { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-instrument); display: grid; gap: var(--space-4); padding: var(--space-6); }
  .reveal-row--selected { border-color: var(--accent-600); }
  .reveal-row--tie { border-color: var(--info-strong); }
  .reveal-row__header { align-items: start; display: flex; gap: var(--space-4); justify-content: space-between; }
  .rating-change { display: grid; grid-template-columns: repeat(3, 1fr); }
  .rating-change > div { border-left: 1px solid var(--color-border); padding-left: var(--space-3); }
  .rating-change dt { color: var(--color-text-secondary); font-size: var(--text-xs); }
  .rating-change dd { font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); }

  @media (min-width: 56rem) {
    html[data-js="enabled"] .candidate-tabs.js-only:not([hidden]) { display: none !important; }
    .candidate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .candidate[hidden] { display: grid !important; }
    .candidate__footer { display: none; }
    .reveal-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 56rem) and (max-width: 70rem) {
    .arena-shell .site-header { min-height: 4.25rem; padding: var(--space-2) var(--space-4); }
    .arena-shell .brand { font-size: var(--text-body); gap: var(--space-2); }
    .arena-shell .brand__mark { height: 2.25rem; width: 2.25rem; }
    .arena-shell .brand__mark .icon { height: 1.9rem; width: 1.9rem; }
    .arena-shell .public-nav { gap: var(--space-1); }
    .arena-shell .public-nav a { font-size: var(--text-sm); min-height: 2.75rem; padding-inline: var(--space-2); }
  }

  @media (max-width: 55.999rem) {
    .arena-shell { height: auto; min-height: 100dvh; overflow: visible; }
    .arena-shell .site-footer { display: flex; }
    .arena-page { height: auto; min-height: calc(100dvh - 5.5rem); overflow: visible; padding-bottom: var(--space-8); }
    .prompt-panel { margin: 0; }
    .prompt-panel summary { align-items: start; flex-direction: column; padding: var(--space-3); }
    .prompt-panel__label strong { white-space: normal; }
    .review-progress { justify-content: space-between; width: 100%; }
    .candidate__stage { aspect-ratio: auto; min-height: clamp(18rem, 55vh, 32rem); }
    .vote-dock__secondary { align-items: stretch; flex-direction: column; }
    .vote-dock__secondary > form:last-child .button { min-width: 0; width: 100%; }
  }

  @media (max-width: 39.999rem) {
    .arena-shell .site-header { min-height: 0; }
    .arena-shell .public-nav a { padding-inline: var(--space-1); }
    .review-progress__steps i { width: 1.25rem; }
    .vote-choices { grid-template-columns: 1fr; }
    .button--vote { min-height: 5rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .candidate--winner, .candidate--tie { animation: none; }
  }

}