:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#18212f;background:#f4f6fa;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1600px;margin:auto;padding:24px}
header{padding-top:38px;padding-bottom:12px}.eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-weight:750;color:#3159a5;margin:0 0 8px}
h1{font-size:clamp(1.8rem,4vw,3rem);margin:0 0 8px;letter-spacing:-.04em}.intro{margin:0;color:#536174}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.toolbar{display:flex;gap:14px;align-items:end;flex-wrap:wrap;background:white;border:1px solid #dce2eb;border-radius:14px;padding:16px;margin:12px 0 18px;box-shadow:0 2px 8px #18212f08}
label{display:grid;gap:6px;font-size:.82rem;font-weight:700;color:#4b596c}input,select{font:inherit;font-weight:450;min-width:180px;padding:10px 11px;border:1px solid #cbd3df;border-radius:8px;background:#fff;color:#18212f}
button{font:inherit;font-weight:700;border:1px solid #bdc9dc;border-radius:8px;padding:10px 14px;background:#edf2fb;color:#193b79;cursor:pointer}button:hover{background:#dfe9fb}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #82aaff;outline-offset:2px}
#load{background:#214d9a;color:white;border-color:#214d9a}#load:hover{background:#173b78}.filter{margin-left:auto}#status{font-size:.85rem;color:#58677b;flex:1 1 100%;min-height:1em}
.workspace{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:18px;align-items:start}
.file-panel,.compare-panel{background:white;border:1px solid #dce2eb;border-radius:14px;min-width:0;overflow:hidden}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border-bottom:1px solid #e6eaf0}.panel-heading h2,.compare-heading h2{font-size:1rem;margin:0}.panel-heading span{font-size:.8rem;background:#edf2fb;border-radius:20px;padding:3px 8px}
#file-list{list-style:none;padding:6px;margin:0;max-height:68vh;overflow:auto}#file-list button{display:block;width:100%;text-align:left;border:0;background:transparent;color:#26364c;font-weight:500;overflow-wrap:anywhere;padding:10px;border-radius:8px;font-size:.88rem}#file-list button:hover{background:#f0f4fb}#file-list button[aria-current=true]{background:#e5edfc;color:#163f8c;font-weight:750}
.compare-panel{padding:18px}.empty{padding:55px 20px;text-align:center;color:#657286}.empty h2{color:#25344a}.compare-heading{display:flex;gap:16px;justify-content:space-between;align-items:start;margin-bottom:15px}.compare-heading p{font-size:.82rem;color:#66758a;overflow-wrap:anywhere;margin:5px 0 0}.compare-heading a{font-size:.85rem;white-space:nowrap;color:#2452a0}
.columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.code-column{border:1px solid #dce2eb;border-radius:10px;overflow:hidden;min-width:0}.code-heading{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#f7f9fc;border-bottom:1px solid #dce2eb}.code-heading h3{font-size:.9rem;margin:0}.code-heading button{padding:6px 10px;font-size:.8rem}
pre{margin:0;padding:16px;overflow:auto;max-height:70vh;min-height:240px;background:#fff;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;font-size:.84rem;line-height:1.55}pre code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.file-meta{font-size:.75rem;color:#69778a;margin:0;padding:8px 12px;border-top:1px solid #e6eaf0}
footer{font-size:.8rem;color:#66758a;padding-top:18px;padding-bottom:36px}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.file-panel #file-list{max-height:260px}.filter{margin-left:0}.columns{grid-template-columns:1fr}.compare-heading{flex-wrap:wrap}}