html { background:#f3efe6; color:#1c2421; }
body { margin:0; font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; line-height:1.5; }
a { color:#c45c26; }
h1,h2,.brand,.name { font-family:Fraunces, Georgia, serif; font-weight:520; letter-spacing:-0.03em; }
h1 { font-size:clamp(2.2rem, 5vw, 3.2rem); line-height:1.1; margin:4px 0 0; color:#14201c; }
h2 { margin:0; color:#14201c; font-size:1.6rem; }
.inner { max-width:72rem; margin:0 auto; padding:0 1rem; }
.bar { background:#fffdf8; border-bottom:1px solid #e3dacb; }
.bar-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; }
.brand { color:#14201c; text-decoration:none; font-size:1.6rem; }
.brand span { font-family:"IBM Plex Sans", sans-serif; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:#5e675f; margin-left:8px; }
nav { display:flex; gap:16px; }
nav a { color:#1c2421; text-decoration:none; }
main.inner, main { max-width:72rem; }
main { margin:0 auto; padding:32px 16px 48px; }
.eyebrow { color:#c45c26; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; margin:0; }
.lede, .muted, .note, footer, .filters label, .head p { color:#5e675f; }
.lede { max-width:36rem; }
#q { width:100%; box-sizing:border-box; margin-top:20px; background:#fffdf8; border:1px solid #e3dacb; padding:12px 16px; font:inherit; font-size:1.1rem; }
#q:focus, select:focus, .pair input:focus { outline:none; border-color:#c45c26; }
.presets { display:flex; gap:8px; overflow:auto; margin-top:16px; }
.presets button, select, .pair input { font:inherit; background:#fffdf8; border:1px solid #e3dacb; }
.presets button { text-align:left; padding:8px 12px; cursor:pointer; }
.presets span { display:block; color:#5e675f; font-size:.75rem; }
.layout { display:grid; grid-template-columns:220px 1fr; gap:32px; margin-top:32px; }
.filters { display:flex; flex-direction:column; gap:14px; font-size:.9rem; }
.filters label { display:block; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
select, .pair input { width:100%; box-sizing:border-box; min-height:44px; margin-top:4px; padding:8px; text-transform:none; letter-spacing:0; font-size:.95rem; color:#1c2421; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.check { display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:.9rem; color:#1c2421; }
#reset { background:none; border:0; color:#c45c26; text-align:left; padding:0; cursor:pointer; font:inherit; text-transform:none; letter-spacing:0; }
.head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.sheet { background:#fffdf8; border:1px solid #e3dacb; overflow:auto; }
table.grid { width:100%; border-collapse:collapse; font-size:.9rem; }
table.grid th, table.grid td { text-align:left; padding:10px 12px; border-bottom:1px solid #e3dacb; vertical-align:top; }
table.grid thead th { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:#5e675f; font-weight:500; font-family:"IBM Plex Sans", sans-serif; }
table.grid tr:hover td { background:#efe7d9; }
table.grid a { color:#14201c; text-decoration:none; }
.muted { display:block; color:#5e675f; font-family:"IBM Plex Sans", sans-serif; font-size:.75rem; }
.name { display:block; color:#14201c; }
.run { color:#c45c26; font-weight:600; }
.empty { border:1px solid #e3dacb; background:#fffdf8; padding:40px 16px; text-align:center; }
.dock { position:sticky; bottom:0; background:#14201c; color:#fffaf6; }
.dock-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; }
.dock button { background:none; border:0; color:#efe7d9; font:inherit; cursor:pointer; }
.dock a { background:#c45c26; color:#fffaf6; text-decoration:none; padding:10px 16px; margin-left:8px; }
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#e3dacb; border:1px solid #e3dacb; margin:18px 0; }
.tiles div { background:#fffdf8; padding:12px; }
.tiles dt { color:#5e675f; font-size:.8rem; }
.tiles dd { margin:4px 0 0; font-size:1.15rem; }
main table:not(.grid) { width:100%; border-collapse:collapse; }
main table:not(.grid) th, main table:not(.grid) td { text-align:left; vertical-align:top; padding:8px 0; border-bottom:1px solid #e3dacb; }
main table:not(.grid) th { width:38%; color:#5e675f; font-weight:500; }
.docs { padding-left:18px; }
.brands { list-style:none; padding:0; }
.brands a { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #e3dacb; color:#14201c; text-decoration:none; }
footer { padding-bottom:40px; font-size:.9rem; }
@media (max-width:800px) { .layout { grid-template-columns:1fr; } .tiles { grid-template-columns:1fr 1fr; } .brand span { display:none; } }