main,body>header,footer{max-width:1120px}main{padding-top:36px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font:12px 'IBM Plex Mono',monospace;color:var(--accent);margin-bottom:10px}
.lede{max-width:760px;font-size:18px}h1{font-size:clamp(32px,5vw,48px)}.spoilers{font-size:13px;color:var(--muted);max-width:760px}
.panel{margin:30px 0;padding-top:8px;border-top:1px solid var(--line)}.panel h2{margin:12px 0 8px}.help{color:var(--muted);font-size:15px;max-width:760px}
.muted{color:var(--muted)}.small{font-size:13px}
button,select,input[type=text]{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:8px 12px}
button{cursor:pointer}button:hover{border-color:var(--accent)}#ask{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.scope{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 4px}
.chip{border-radius:999px;padding:6px 12px;font-size:14px}.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.questions{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.questions button{text-align:left;padding:12px 14px;font-size:16px;line-height:1.3;border-radius:10px;background:var(--surface)}
.questions button.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.answer h2{font-size:22px}.big{font:600 24px/1.3 Spectral,Georgia,serif;margin:6px 0 12px;max-width:820px}
.result{overflow:auto;max-height:420px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.result:empty{display:none}
.result table{border-collapse:collapse;font-size:14px;min-width:100%}.result th{position:sticky;top:0;background:var(--surface2);text-align:left;padding:7px 10px;font:600 12px 'IBM Plex Mono',monospace}
.result td{padding:6px 10px;border-top:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}.result td.num{text-align:right}
.how{margin-top:10px;font-size:14px}.how summary{cursor:pointer;color:var(--accent)}.how pre{font:12px/1.45 'IBM Plex Mono',monospace;background:var(--surface2);padding:10px;border-radius:8px;overflow:auto;white-space:pre}
.askrow{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.askrow input{flex:1 1 320px;font-size:18px;padding:12px 14px}.ask h2{font-size:26px}#ask{font-size:17px;padding:12px 18px}
.ready{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}.ready button{font-size:14px;border-radius:999px}
.busy{opacity:.7}#ask-status.working{color:var(--ink);font-size:15px;display:flex;align-items:center;gap:8px}
.spin{width:16px;height:16px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:640px){.big{font-size:20px}.questions{grid-template-columns:1fr}.questions.folded button:nth-child(n+8){display:none}}
#more-q{display:none;margin-top:10px;font-size:14px;border-radius:999px}@media (max-width:640px){.questions.folded+#more-q{display:inline-block}}
.assumption{margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--accent2);background:var(--surface);font-size:15px;max-width:820px}.assumption strong{color:var(--accent2)}
@media (max-width:640px){.result td:first-child,.result th:first-child{position:sticky;left:0;background:var(--surface);box-shadow:1px 0 0 var(--line)}.result th:first-child{z-index:2;background:var(--surface2)}.result td{max-width:180px;overflow:hidden;text-overflow:ellipsis}}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--accent);border-style:dotted}html{scroll-behavior:auto}}
@media (max-width:640px){.chip,.ready button,#ask,.questions button{min-height:44px}.askrow input{min-height:44px}}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.art{margin:12px 0 0}.art img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block}
.art figcaption{font-size:13px;color:var(--muted);margin-top:8px}
@media (max-width:820px){.hero{grid-template-columns:1fr}.art{max-width:360px}}
.lookup{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0}.slot{position:relative}.slot input{width:100%;box-sizing:border-box;font-size:17px;padding:10px 12px}
.hits{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.08);max-height:260px;overflow:auto}.hits:empty{display:none}
.hits button{display:block;width:100%;text-align:left;border:0;border-radius:0;background:none;padding:8px 12px}.hits button:hover{background:var(--surface2)}.hits .muted{font-size:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:12px}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}.ccard h3{margin:0 0 2px;font-size:22px}.ccard .sub{color:var(--muted);font-size:14px;margin:0 0 10px}
.ccard .tot{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px 12px;margin:0 0 12px}.ccard .tot strong{font:600 22px Spectral,Georgia,serif;display:block}.ccard .tot span{font-size:12px;color:var(--muted)}
.ccard table{border-collapse:collapse;width:100%;font-size:13px}.ccard th{text-align:left;font:600 11px 'IBM Plex Mono',monospace;color:var(--muted);padding:4px 6px 4px 0}.ccard td{padding:4px 6px 4px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}.ccard td.num,.ccard th.num{text-align:right}
#h2h{margin-top:12px}#h2h td:first-child{color:var(--muted)}
@media (max-width:640px){.lookup{grid-template-columns:1fr}}
.more{font-size:13px;padding:4px 10px;margin-left:6px}
.ask-q{font:600 22px/1.3 Spectral,Georgia,serif;margin:18px 0 4px;scroll-margin-top:16px}
.how-out{display:block;font-size:11px;color:var(--muted)}
/* on a phone the question box comes into the first screen: the art steps aside and the lede is smaller */
@media (max-width:640px){.art{display:none}.lede{font-size:16px}}