@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700;750;800&display=swap');
:root { color-scheme: light dark; --bg: #f6f7f9; --surface: #fff; --soft: #f5f6f8; --ink: #20272e; --muted: #68737e; --line: #e2e6eb; --accent: #315cdd; --tint: #edf2ff; --danger: #b12e35; --warn: #805000; --warn-bg: #fff5de; font: 14px/1.6 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600; transition: background .15s, border-color .15s; }
button:hover { background: var(--tint); border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.topbar { max-width: 1440px; margin: auto; height: 88px; padding: 0 44px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 16px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 750; letter-spacing: -.6px; }
.brand-light { font-weight: 400; color: var(--muted); }
.logo { display: inline-flex; width: 33px; height: 33px; background: var(--ink); color: var(--surface); align-items: center; justify-content: center; font-weight: 700; border-radius: 9px; letter-spacing: -3px; padding-right: 3px; margin-right: 6px; }
.logo span { color: #a7c0ff; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.badge { font-size: 11px; font-weight: 600; color: var(--muted); }
main { max-width: 1352px; margin: auto; padding: 0 32px 48px; }
.hero { padding: 58px 0 42px; }
.eyebrow { font-size: 10px; font-weight: 750; letter-spacing: 2px; color: var(--accent); margin-bottom: 16px; }
h1 { font-size: clamp(34px, 4vw, 51px); font-weight: 750; line-height: 1.13; letter-spacing: -2.4px; margin: 0; white-space: pre-line; }
.hero > p { font-size: 15px; color: var(--muted); max-width: 540px; margin: 19px 0 16px; }
.hero-meta { display: flex; gap: 13px; color: var(--muted); font-size: 11px; }
.hero-meta span:nth-child(2) { color: var(--accent); }
.workspace { display: grid; grid-template-columns: minmax(330px, 430px) minmax(0, 1fr); gap: 24px; align-items: start; }
.input-panel, .output-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 3px 8px #172e5010; }
.panel-heading { padding: 23px 24px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.step { display: grid; place-items: center; background: var(--tint); color: var(--accent); width: 26px; height: 26px; border-radius: 7px; font-size: 10px; font-weight: 700; }
h2 { font-size: 14px; font-weight: 650; margin: 0; letter-spacing: -.3px; }
form { padding: 22px 24px 18px; }
fieldset { border: 0; padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid var(--line); min-width: 0; }
legend { font-size: 11px; font-weight: 750; margin-bottom: 14px; color: var(--ink); }
label { display: block; margin-bottom: 13px; min-width: 0; }
label > span { display: block; margin-bottom: 6px; font-size: 11px; color: var(--muted); font-weight: 500; }
input, select, textarea { width: 100%; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 9px 10px; font-size: 12px; }
textarea { resize: vertical; min-height: 138px; line-height: 1.8; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
small { display: block; color: var(--muted); font-size: 10px; line-height: 1.7; margin: 5px 0 10px; }
.grid { display: grid; gap: 12px; }.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.key-row { display: flex; gap: 7px; }.key-row button { flex-shrink: 0; padding: 7px; font-size: 10px; }
.form-actions { display: flex; gap: 10px; }.form-actions button { flex: 1; padding: 12px 8px; font-size: 11px; }
button.primary { background: var(--accent); color: white; border-color: var(--accent); }.primary:hover { filter: brightness(1.12); }
.fine-print { color: var(--muted); font-size: 10px; text-align: center; margin: 13px 0 0; }
.output-panel { min-height: 660px; position: sticky; top: 20px; }
.export-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 16px 20px; gap: 12px; }.export-bar > div { display: flex; gap: 6px; }.export-bar button { font-size: 10px; padding: 7px 9px; }
.tabs { display: flex; overflow-x: auto; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 20px; }
.tabs button { border: 0; border-radius: 0; border-bottom: 2px solid transparent; background: transparent; padding: 13px 9px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.tabs [aria-selected=true] { border-bottom-color: var(--accent); color: var(--accent); }
#status { margin: 0 20px; font-size: 12px; color: var(--accent); }#status:not(:empty) { padding: 0 0 13px; }
#error { margin: 0 20px 16px; padding: 14px; color: var(--danger); border: 1px solid currentColor; background: var(--surface); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.empty-state { padding: 75px 20px 95px; text-align: center; }.empty-state h3 { font-size: 19px; letter-spacing: -.6px; margin: 28px 0 8px; }.empty-state p { color: var(--muted); font-size: 12px; white-space: pre-line; }
.empty-art { width: 160px; height: 120px; margin: auto; position: relative; }.empty-art div { width: 94px; height: 110px; background: var(--tint); color: var(--accent); border: 1px solid var(--line); border-radius: 15px; position: absolute; left: 32px; top: 5px; font-size: 42px; display: grid; place-items: center; transform: rotate(-7deg); }.empty-art span { position: absolute; display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--line); background: var(--surface); border-radius: 11px; box-shadow: 0 6px 15px #23415c0d; color: var(--muted); }.empty-art span:nth-child(2) { left: 5px; top: 25px; font-weight: 650; }.empty-art span:nth-child(3) { right: 2px; top: 3px; font-size: 14px; color: var(--accent); }.empty-art span:nth-child(4) { right: 6px; bottom: 0; font-size: 22px; }
.empty-tags { display: flex; justify-content: center; gap: 7px; margin-top: 22px; }.empty-tags span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 8px; letter-spacing: 1px; }
#results { padding: 18px; }#results:empty { padding: 0; }.content-card { border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-bottom: 14px; overflow-wrap: anywhere; }.content-card:last-child { margin-bottom: 0; }.card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }.card-top h3 { font-size: 11px; color: var(--muted); font-weight: 600; margin: 0; }.card-top button { font-size: 10px; padding: 4px 9px; }
.content-card p, .content-card li { font-size: 13px; line-height: 1.9; }.content-card p { white-space: pre-line; }.content-card ul { padding-left: 20px; }.content-card h4 { font-size: 13px; margin: 18px 0 7px; }.content-card .big-headline { font-size: 23px; line-height: 1.5; margin: 8px 0; letter-spacing: -.8px; }.scene-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; margin: 10px 0; }.scene-row > span { color: var(--muted); font-size: 10px; padding-top: 4px; }.scene-row p { margin: 0; }
.thumbnail-preview { border-radius: 8px; padding: 42px 18px; text-align: center; color: var(--accent); background: var(--tint); font-weight: 800; font-size: 28px; letter-spacing: -1px; }.priority { font-size: 10px; font-weight: 650; padding: 4px 7px; border-radius: 4px; background: var(--soft); }.priority.high { color: var(--danger); }.priority.medium { color: var(--warn); }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.metrics > div { padding: 14px; border-radius: 8px; background: var(--soft); }.metrics span { display: block; font-size: 10px; color: var(--muted); }.metrics strong { display: block; font-size: 20px; margin-top: 4px; letter-spacing: -.6px; }.metrics > div:first-child { background: var(--tint); color: var(--accent); }.content-card .warning { background: var(--warn-bg); color: var(--warn); padding: 10px; border-radius: 6px; font-size: 12px; }
footer { max-width: 1352px; margin: 0 auto; padding: 24px 32px 36px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); }.muted { opacity: .7; margin-left: 7px; }
@media (prefers-color-scheme: dark) { :root { --bg: #11161d; --surface: #19212b; --soft: #202b38; --ink: #e7edf4; --muted: #a1afbf; --line: #303d4d; --accent: #96b4ff; --tint: #263653; --danger: #ffa6a6; --warn: #f5cf87; --warn-bg: #3d321f; } button.primary { background: #416be2; border-color: #416be2; }.logo { color: #142030; } }
@media (max-width: 900px) { .workspace { grid-template-columns: minmax(300px, 370px) minmax(0, 1fr); gap: 16px; } main { padding: 0 22px 32px; }.topbar { padding: 0 22px; }.hero { padding-top: 40px; }.export-bar > div { flex-wrap: wrap; }.output-panel { position: static; }.brand-light { display: none; } }
@media (max-width: 700px) { .workspace { grid-template-columns: minmax(0, 1fr); }.topbar { height: 68px; padding: 0 18px; }.top-actions .badge { display: none; } main { padding: 0 16px 28px; }.hero { padding: 34px 4px; }h1 { letter-spacing: -1.4px; }.hero > p { font-size: 13px; }.panel-heading { padding: 20px; }form { padding: 20px; }.output-panel { min-height: 500px; }.empty-state { padding: 45px 16px; }.tabs { padding: 0 10px; }footer { margin: 0 16px; padding: 22px 0; flex-direction: column; gap: 5px; }.metrics { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Fact Guard extends the existing workspace without a UI framework. */
.guard-config { border: 1px solid var(--line); background: var(--tint); padding: 16px; border-radius: 10px; }
.guard-config legend { padding: 0 6px; }.guard-new { color: var(--accent); font-size: 9px; letter-spacing: 1px; margin-left: 8px; }
.guard-toggle { display: flex; flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }.guard-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.guard-route { font-size: 11px; font-weight: 600; }.guard-route span { margin: 0 5px; color: var(--accent); }
.fact-guard-mode .hero { padding-top: 36px; padding-bottom: 34px; }.fact-guard-mode .hero h1 { font-size: clamp(34px, 4vw, 52px); }
#guard-progress { margin: 0 18px 18px; padding: 14px; border: 1px solid var(--accent); border-radius: 8px; color: var(--accent); background: var(--tint); font-size: 12px; }
.guard-verdict { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 22px; background: var(--tint); border: 1px solid var(--line); border-radius: 12px; }
.guard-verdict > div:first-child > span { font-size: 11px; color: var(--muted); }.guard-verdict strong { display: block; font-size: 48px; line-height: 1.2; color: var(--accent); letter-spacing: -2px; }.guard-verdict strong small { font-size: 15px; letter-spacing: 0; }.guard-verdict h3 { margin: 10px 0 6px; font-size: 15px; }.guard-verdict p { margin: 0; font-size: 11px; color: var(--muted); }
.mode-pill { font-size: 9px; color: var(--accent); font-weight: 700; letter-spacing: .8px; }
.guard-notice { border-left: 3px solid var(--accent); padding: 8px 12px; font-size: 11px; color: var(--muted); }
.guard-section-title { font-size: 13px; margin: 25px 0 12px; }.guard-section-title > span { font-weight: 400; font-size: 11px; color: var(--muted); }
.pipeline-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.pipeline-steps article { display: flex; flex-direction: column; padding: 13px 10px; border: 1px solid var(--line); border-radius: 8px; gap: 6px; }.pipeline-step { text-transform: uppercase; color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .6px; }.pipeline-step small { float: right; color: var(--muted); }.pipeline-steps strong { font-size: 12px; }.actual-model { font-size: 8px; overflow-wrap: anywhere; color: var(--muted); }.pipeline-steps article > span:last-child { font-size: 9px; color: var(--muted); }.routing-total { font-size: 10px; color: var(--muted); }
.claim-diff { margin: 10px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }.claim-diff > * { display: block; padding: 9px 13px; font-size: 12px; }.claim-diff small { background: var(--soft); color: var(--muted); font-size: 10px; }.claim-diff del { background: #fef0ef; color: #9e282c; }.claim-diff ins { background: #ecf8ef; color: #225e3b; text-decoration: none; }
.trace-scroll { overflow-x: auto; }.trace-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }.trace-table th { font-size: 10px; color: var(--muted); padding: 10px; background: var(--soft); }.trace-table td { vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--line); min-width: 115px; max-width: 300px; overflow-wrap: anywhere; }.trace-table td:first-child { width: 35%; }.trace-table small { display: block; margin-top: 6px; font-size: 9px; color: var(--muted); }.claim-status { border-radius: 4px; padding: 3px 6px; font-weight: 600; font-size: 9px; }.claim-status.supported { color: #225e3b; background: #ecf8ef; }.claim-status.unsupported, .claim-status.risky { color: #9e282c; background: #fef0ef; }.fact-id { color: var(--accent); font-family: monospace; }.guard-initial { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 14px 0; }.guard-initial summary { cursor: pointer; font-size: 11px; font-weight: 600; }.guard-initial p { font-size: 11px; }
@media (max-width: 900px) { .pipeline-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }.guard-verdict { grid-template-columns: 85px 1fr; gap: 12px; padding: 15px; }.guard-verdict strong { font-size: 38px; } }
@media (prefers-color-scheme: dark) { .claim-diff del, .claim-status.risky, .claim-status.unsupported { color: #ffc1bd; background: #492e32; }.claim-diff ins, .claim-status.supported { color: #c2f0cc; background: #233f34; } }

/* Variant Tournament: a separate arena, sharing the original product pipeline. */
.tournament-link { color: var(--accent); font-size: 12px; text-decoration: none; font-weight: 700; }
.tournament-page { background: #0b1212; color: #eaf1ee; color-scheme: dark; }
.tournament-page .topbar { max-width: 1824px; height: 68px; border-color: #263232; }
.tournament-page .brand, .tournament-page .top-actions a { color: #eaf1ee; }
.tournament-page .brand-light, .tournament-page .badge { color: #91a39b; }
.tournament-page .hero, .tournament-page .workspace, .tournament-page footer { display: none; }
.tournament-page main { max-width: 1824px; padding: 0 44px 48px; }
.tournament-page .top-actions > button { display: none; }
.arena-heading { display: flex; justify-content: space-between; align-items: end; padding: 32px 0 24px; gap: 20px; }
.arena-eyebrow, .arena-section-label { color: #9aad9f; font: 10px/1.5 ui-monospace, monospace; letter-spacing: 1.5px; }
.arena-eyebrow { color: #c5f978; margin-bottom: 10px; }
.arena-heading h1 { font-size: clamp(32px, 3.3vw, 58px); letter-spacing: -2.6px; }
.arena-heading h1 em { color: #c5f978; font-style: normal; }
.arena-heading p { color: #9eafa7; margin: 12px 0 0; }
.arena-heading a { color: #c5f978; font-size: 12px; white-space: nowrap; }
.arena-toolbar { display: flex; gap: 26px; align-items: center; padding: 14px 0; border-top: 1px solid #2b3633; border-bottom: 1px solid #2b3633; font: 10px/1.4 ui-monospace, monospace; letter-spacing: .7px; }
.arena-mode { color: #c5f978; border: 1px solid #4b6438; padding: 6px 9px; border-radius: 4px; }
.arena-toolbar b { color: #c5f978; margin: 0 5px; }
#arena-phase { margin-left: auto; color: #aabcaf; }
.arena-layout { display: grid; grid-template-columns: 258px minmax(0, 1fr) 246px; gap: 26px; margin: 25px 0; align-items: start; }
.arena-input { border-right: 1px solid #2b3633; padding-right: 22px; }
.arena-input h2, .arena-bracket h2 { font-size: 27px; line-height: 1.14; letter-spacing: -.9px; margin: 12px 0 22px; }
.arena-input label { display: block; font-size: 10px; color: #aabcaf; margin: 14px 0; }
.arena-input input, .arena-input textarea, .arena-input select { display: block; width: 100%; background: #121d1b; border: 1px solid #33413b; color: #eff6ef; border-radius: 5px; padding: 9px 10px; font-size: 11px; margin-top: 6px; line-height: 1.55; }
.arena-input textarea { resize: vertical; }
.arena-input small { color: #8b9d93; font-size: 10px; display: block; margin-top: 12px; line-height: 1.6; }
#arena-run { background: #c5f978; border: 0; color: #152111; width: 100%; text-align: left; padding: 13px; border-radius: 5px; }
#arena-run span { float: right; }
#arena-replay { width: 100%; margin-top: 9px; background: transparent; border-color: #3b4b42; color: #b4c3b9; font-size: 11px; }
#arena-error { color: #ffb4a8; font-size: 12px; }
.arena-grid-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
#arena-survivors { font: 10px ui-monospace, monospace; color: #c5f978; }
.arena-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.variant-tile { min-width: 0; height: 142px; text-align: left; display: flex; flex-direction: column; background: #141f1d; border: 1px solid #344039; border-radius: 6px; padding: 12px; color: #cbd6ce; overflow: hidden; transition: opacity .4s, border-color .4s, box-shadow .4s, background .4s; }
.variant-tile:hover { background: #233126; border-color: #7a9469; }
.tile-top { display: flex; justify-content: space-between; gap: 4px; font: 9px ui-monospace, monospace; color: #84968b; margin-bottom: 10px; }
.tile-top b { color: #abbcaf; font-weight: 400; }
.variant-tile > strong { font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.variant-tile p { font-size: 10px; color: #8ca194; margin: 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-bottom { margin-top: auto; color: #84968b; font: 8px ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.variant-tile.generating { border-color: #c5f978; box-shadow: inset 0 0 20px #c5f97820; animation: arena-pulse 1s infinite alternate; }
.variant-tile.drafted { border-color: #6f8f76; }
.variant-tile.verified, .variant-tile.advancing { border-color: #a4ce65; background: #253322; }
.variant-tile.verified .tile-top span, .variant-tile.advancing .tile-top span { color: #c5f978; }
.variant-tile.eliminated { border-color: #8b514b; background: #281b1b; }
.variant-tile.eliminated .tile-top span { color: #f4a193; }
.variant-tile.out { opacity: .42; }
.variant-tile.winner { border: 2px solid #c5f978; background: #c5f978; color: #14200e; box-shadow: 0 0 30px #b6f86c25; }
.variant-tile.winner .tile-top, .variant-tile.winner .tile-top b, .variant-tile.winner p, .variant-tile.winner .tile-bottom { color: #304b22; }
.arena-grid.double-field .variant-tile { height: 112px; }
.arena-grid.double-field .tile-bottom { display: none; }
.arena-legend { display: flex; gap: 18px; font-size: 9px; color: #8c9f92; margin-bottom: 0; }
.arena-legend span:nth-child(2), .arena-legend span:last-child { color: #c5f978; }
.arena-legend span:nth-child(3) { color: #ef9f91; }
.arena-bracket { border-left: 1px solid #2b3633; padding-left: 22px; }
.arena-bracket h2 { margin-bottom: 13px; }
.arena-bracket > p { font-size: 11px; color: #99aa9e; }
.bracket-empty { padding: 48px 0; font: 17px ui-monospace, monospace; color: #c5f978; }
.bracket-empty span { display: block; font-size: 11px; line-height: 1.8; color: #83998b; margin-top: 16px; }
#arena-rounds { max-height: 430px; overflow-y: auto; scrollbar-width: thin; }
.bracket-round { border-top: 1px solid #364436; padding: 11px 0; }
.bracket-round summary { color: #c5f978; font: 11px ui-monospace, monospace; cursor: pointer; }
.bracket-round summary > span { float: right; color: #93a28e; }
.bracket-match { margin: 12px 0; padding: 10px; background: #17221b; border-radius: 4px; font: 10px ui-monospace, monospace; }
.bracket-match > b { float: right; color: #c5f978; }
.bracket-match small { display: block; color: #bfccbc; margin-top: 10px; }
.bracket-match p { color: #8ea28f; line-height: 1.7; font: 10px/1.6 Inter, sans-serif; }
.arena-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #334136; border-radius: 6px; }
.arena-metrics > div { padding: 17px 21px; border-right: 1px solid #334136; }
.arena-metrics > div:last-child { border: 0; background: #1b281c; }
.arena-metrics span, .arena-metrics small { display: block; overflow-wrap: anywhere; color: #98ab99; font: 9px/1.6 ui-monospace, monospace; }
.arena-metrics strong { display: block; font-size: 24px; font-weight: 500; margin-top: 8px; color: #eaf1e5; letter-spacing: -.8px; }
.arena-metrics p { margin: 5px 0; font-size: 10px; color: #b8c6b5; }
.arena-metrics .efficiency strong { color: #c5f978; }
.arena-notice { color: #98ac9d; font-size: 10px; line-height: 1.8; margin-top: 13px; }
.arena-winner { margin-top: 38px; padding: 30px; background: #142017; border: 1px solid #748d50; border-radius: 10px; }
.winner-banner { display: flex; justify-content: space-between; gap: 30px; border-bottom: 1px solid #3b5039; margin-bottom: 25px; padding-bottom: 25px; }
.winner-banner h2 { font-size: 34px; letter-spacing: -1px; margin: 12px 0; color: #c5f978; }
.winner-banner p { color: #acbea9; max-width: 900px; font-size: 13px; }
.winner-id { color: #c5f978; font: 78px ui-monospace, monospace; }
.winner-beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 20px 0; }
.winner-beats article { padding: 18px; background: #1c2b1e; border: 1px solid #384a32; border-radius: 6px; }
.winner-beats b { color: #c5f978; }
.winner-beats p, .winner-beats small { color: #a5b89e; font-size: 12px; }
.winner-beats small { display: block; margin-top: 12px; }
.arena-trace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.arena-trace > div { border: 1px solid #354634; border-radius: 5px; padding: 14px; overflow-wrap: anywhere; }
.trace-status { font: 9px ui-monospace, monospace; text-transform: uppercase; color: #c5f978; display: block; margin-bottom: 7px; }
.trace-status.unsupported, .trace-status.risky { color: #ffad97; }
.arena-trace strong { font-size: 12px; }
.arena-trace p { font-size: 11px; color: #a1b49a; }
.arena-trace small { font: 10px ui-monospace, monospace; color: #b5d39f; }
.arena-detail { margin-top: 24px; border: 1px solid #4b6140; border-radius: 6px; padding: 24px; }
.arena-detail summary { color: #c5f978; cursor: pointer; }
@keyframes arena-pulse { to { background: #33442a; } }
@media(min-width:1600px) { .arena-layout { grid-template-columns: 270px minmax(0, 1fr) 270px; } }
@media(max-width:1100px) { .arena-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 18px; } .arena-bracket { grid-column: 1/-1; border: 0; padding: 10px 0; } #arena-rounds { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; max-height: 400px; } .arena-bracket h2 br { display: none; } .arena-heading { align-items: start; } .arena-toolbar { flex-wrap: wrap; gap: 12px; } #arena-phase { margin-left: 0; } }
@media(max-width:700px) { .tournament-page main { padding: 0 16px 30px; } .tournament-page .topbar { padding: 0 16px; } .tournament-page .brand-light, .tournament-page .badge { display: none; } .arena-heading { flex-direction: column; } .arena-heading h1 { letter-spacing: -1.5px; } .arena-layout { grid-template-columns: minmax(0,1fr); } .arena-input { border: 0; padding: 0; } .arena-input h2 br { display: none; } .arena-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .arena-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .arena-metrics > div { padding: 13px; border-bottom: 1px solid #334136; } #arena-rounds { grid-template-columns: repeat(2,minmax(0,1fr)); } .winner-beats, .arena-trace { grid-template-columns: minmax(0,1fr); } .arena-winner { padding: 18px; } .winner-id { font-size: 38px; } .winner-banner h2 { font-size: 25px; } .arena-legend { gap: 9px; flex-wrap: wrap; } .arena-grid-heading { align-items: start; } }
@media(prefers-reduced-motion:reduce) { .variant-tile { animation: none !important; transition: none !important; } }
@media(min-width:1101px) {
  .arena-heading { padding: 22px 0 18px; }
  .arena-heading h1 { font-size: 48px; }
  .arena-heading p { margin-top: 9px; font-size: 13px; }
  .arena-toolbar { padding: 10px 0; }
  .arena-layout { margin: 20px 0; }
  .variant-tile { height: 126px; }
  .arena-input h2 { font-size: 24px; margin: 8px 0 14px; }
  .arena-input label { margin: 8px 0; }
  .arena-input input, .arena-input textarea, .arena-input select { padding: 7px 9px; }
  #arena-facts { height: 116px; min-height: 0; }
  #arena-forbidden { height: 64px; min-height: 0; }
  #arena-run { padding: 11px; }
  #arena-replay { padding: 6px; }
  .arena-input small { font-size: 9px; margin-top: 8px; }
  .arena-metrics > div { padding: 13px 18px; }
  .arena-metrics strong { font-size: 22px; }
}