:root{color-scheme:dark;--cinematic-accent:#c3a98a;--edge:#415056;--panel:#10171d}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}
main{width:min(1320px,100%);margin:auto;padding:clamp(16px,4vw,52px)}
.heading{border-bottom:1px solid var(--edge);padding-bottom:1rem}
h1,h2,h3,legend,.eyebrow,.demo{font-family:Georgia,serif;letter-spacing:.09em}
h1{font-size:clamp(3rem,10vw,7rem);line-height:1;margin:.2em 0}
.eyebrow,.demo,legend,a{color:var(--cinematic-accent)}
.demo{border-left:3px solid;padding:.65rem 1rem;background:var(--panel)}
.settings,.side,.record{border:1px solid var(--edge);background:var(--panel);padding:clamp(12px,2vw,24px);min-width:0;margin:0}
.settings,.mode{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.sides,.cards,.records{display:grid;gap:1rem}.sides{grid-template-columns:repeat(2,minmax(0,1fr));margin:1rem 0}
.cards,.records{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.slot,.portrait{min-width:0}.portrait{margin:0}.portrait .art,.record .art{display:grid;place-items:center;aspect-ratio:1;overflow:hidden;background:#080c12;border:1px solid var(--edge)}
.portrait img,.record img{width:100%;height:100%;object-fit:contain}.art span{font-size:.8rem;text-align:center;text-transform:uppercase;padding:.75rem}
figcaption{padding:.65rem 0;font-weight:700;overflow-wrap:anywhere}
select,button{font:inherit;color:inherit;background:#0b1117;border:1px solid var(--edge);border-radius:0;padding:.65rem;max-width:100%}
.slot select{width:100%;margin:.3rem 0 .65rem}button{cursor:pointer}button:disabled{opacity:.55;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--cinematic-accent);outline-offset:2px}
#run{border-color:var(--cinematic-accent);font-weight:700}.side>button{margin-top:1rem}
#dossier{border-top:1px solid var(--edge);margin-top:2rem;padding-top:1rem}
@media(max-width:700px){.sides{grid-template-columns:1fr}.settings label{max-width:100%}}

body[data-cinematic-section=versus] .cinematic-masthead{width:100%;margin-inline:0}
@font-face{font-family:"Compare Technical";src:url("/_cached/exo-2.7525c51a41ad3e47.woff") format("woff");font-display:swap}
h1,h2,h3,legend{font-family:"Compare Technical",Georgia,serif}
/* Keep artwork secondary to the fighter and evidence records. */
.portrait .art{width:min(100%,150px)}
.record .art{width:min(100%,110px);aspect-ratio:4/3}
.records{grid-template-columns:repeat(auto-fit,minmax(min(100%,275px),1fr))}