:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #172033; background: #f6f7fb; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 72px; }
header { max-width: 720px; margin-bottom: 34px; }
.eyebrow { margin: 0 0 8px; color: #5c46cf; font-size: .78rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
h1, h2 { color: #111a2e; letter-spacing: -.035em; }
h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.03; }
h2 { margin: 0; font-size: 1.35rem; }
.intro { color: #536078; font-size: 1.08rem; line-height: 1.55; }
.editors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
section { min-width: 0; }
label { display: block; margin-bottom: 8px; color: #1b2740; font-weight: 700; }
textarea { display: block; width: 100%; min-height: 270px; resize: vertical; padding: 16px; border: 1px solid #c9d0df; border-radius: 10px; background: #fff; color: #172033; font: .9rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
textarea:focus { outline: 3px solid #bcb1ff; border-color: #6954dd; }
textarea[aria-invalid="true"] { border-color: #c82c47; }
.hint, .disclaimer { margin: 8px 0 0; color: #66728a; font-size: .86rem; }
.error { min-height: 1.3em; margin: 6px 0 0; color: #ad1936; font-size: .86rem; }
button { margin-top: 20px; padding: 12px 18px; border: 0; border-radius: 8px; background: #5c46cf; color: #fff; cursor: pointer; font: inherit; font-weight: 750; }
button:hover { background: #4936af; }
.results-panel { margin-top: 36px; padding: 24px; border: 1px solid #dbe0eb; border-radius: 12px; background: #fff; }
#summary { margin: 14px 0; color: #4c5870; }
.difference-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.difference-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 12px; border-radius: 7px; font-size: .92rem; }
.difference-list .added { background: #eaf8ee; color: #1f6b3b; }
.difference-list .breaking { background: #fff0f1; color: #96243a; }
code { overflow-wrap: anywhere; color: #172033; }
@media (max-width: 700px) { main { width: min(100% - 24px, 1120px); padding-top: 32px; } .editors { grid-template-columns: 1fr; } textarea { min-height: 200px; } .difference-list li { align-items: flex-start; flex-direction: column; gap: 4px; } }