:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #203247; background: #f5f7f8; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: #116181; }
.wrap { width: min(1460px, calc(100% - 48px)); margin: auto; }
.masthead { color: #fff; background: #112a3d; padding: 50px 0 38px; border-bottom: 6px solid #e6b45e; }
.eyebrow, .label { letter-spacing: .15em; font-size: .72rem; font-weight: 750; }
.eyebrow { color: #bcd2de; }
.eyebrow.ink, .label { color: #9a6627; }
h1 { font-family: Georgia, serif; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -.035em; line-height: 1.05; margin: 12px 0 16px; }
.masthead p { max-width: 660px; color: #d5e0e7; font-size: 1.1rem; line-height: 1.5; }
nav { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
nav a { color: #fff; text-decoration: none; font-weight: 650; border-bottom: 1px solid #88b2c1; padding-bottom: 5px; }
nav a:hover { border-color: #fff; }
.intro { background: #e8f0f3; border-left: 4px solid #32809b; padding: 20px 25px; margin-top: 30px; line-height: 1.55; display: flex; align-items: start; gap: 25px; }
.intro p { margin: 0; max-width: 1100px; }
.intro .label { white-space: nowrap; padding-top: 4px; }
.section { margin-top: 54px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-bottom: 20px; }
h2 { font-family: Georgia, serif; letter-spacing: -.02em; font-size: 2rem; margin: 6px 0 0; }
.counter, .caption, .muted, figcaption, footer { color: #5f7080; font-size: .86rem; }
.table-scroll { overflow-x: auto; border: 1px solid #d9e0e4; background: white; }
table { border-collapse: collapse; width: 100%; min-width: 680px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid #e9edef; }
th { color: #536b7a; font-size: .78rem; background: #f0f4f6; text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(-n+2) { background: #fffcf6; }
td:first-child { font-family: Georgia, serif; font-size: 1.35rem; color: #a87832; }
td strong { display: block; }
td small { display: block; color: #6c8090; margin-top: 3px; }
.caption { line-height: 1.5; max-width: 1100px; }
.controls { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; background: #fff; padding: 19px; border: 1px solid #d9e0e4; }
label { display: grid; gap: 7px; font-weight: 650; font-size: .84rem; }
select { width: 100%; background: #fff; color: #203247; border: 1px solid #adbfc9; border-radius: 4px; padding: 11px; font: inherit; }
select:focus, button:focus-visible, a:focus-visible { outline: 3px solid #e4ae55; outline-offset: 2px; }
.page-navigation { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 16px 0; }
.page-navigation button { border: 1px solid #b2c3cb; border-radius: 4px; background: #fff; padding: 9px 13px; color: #174861; cursor: pointer; font-weight: 650; }
.page-navigation button:disabled { opacity: .45; cursor: default; }
#page-meta { text-align: center; font-size: .9rem; color: #506777; }
.comparison-layout { display: grid; grid-template-columns: minmax(290px, .9fr) minmax(0, 1.5fr); align-items: start; gap: 18px; }
.source { margin: 0; padding: 14px; background: white; border: 1px solid #d9e0e4; text-align: center; }
.source img { display: block; width: 100%; height: auto; }
figcaption { padding-top: 10px; }
.verdict { border-left: 4px solid #ddaa4d; background: #fff; padding: 20px; border-top: 1px solid #d9e0e4; border-right: 1px solid #d9e0e4; border-bottom: 1px solid #d9e0e4; }
.verdict h3 { margin: 8px 0; font-family: Georgia, serif; font-size: 1.5rem; }
.verdict p { margin-bottom: 0; line-height: 1.5; }
.outputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.outputs article { min-width: 0; background: white; border: 1px solid #d9e0e4; }
.outputs h3 { margin: 0; background: #e7eff2; padding: 14px; font-size: .93rem; overflow-wrap: anywhere; }
.outputs pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 16px; max-height: 850px; overflow-y: auto; line-height: 1.6; font: .88rem/1.6 system-ui, sans-serif; }
.trunc { padding: 0 16px; font-size: .8rem; color: #8f4c24; }
.trunc:empty { display: none; }
footer { border-top: 1px solid #d9e0e4; margin: 60px 0 25px; padding-top: 20px; }
@media (max-width: 950px) { .comparison-layout, .outputs { grid-template-columns: 1fr; } .source { max-width: 600px; margin: auto; } }
@media (max-width: 650px) { .wrap { width: min(100% - 28px, 1460px); } .masthead { padding: 35px 0 24px; } .intro { display: block; } .intro p { margin-top: 10px; } .controls { grid-template-columns: 1fr; } .page-navigation { flex-wrap: wrap; } #page-meta { order: -1; width: 100%; } }