:root{
  --bg:#f7f4ef; --paper:#fff; --ink:#191814; --muted:#6b675f; --line:#e4ded3;
  --accent:#1f5c4a; --accent-ink:#fff; --warn:#8f4412; --warn-bg:#fbeadb; --ok-bg:#e7f0ec; --chip:#efe9df;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#151410; --paper:#1f1e19; --ink:#f2eee5; --muted:#a49f94; --line:#36332c;
  --accent:#86cbb1; --accent-ink:#0f241d; --warn:#f0a56a; --warn-bg:#3a2515; --ok-bg:#1d2f28; --chip:#2a2822;}}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* .working and .ask set display:flex, which beats the attribute */
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 Inter,system-ui,sans-serif}
.wrap{max-width:700px;margin:0 auto;padding:0 18px}
a{color:var(--accent)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:22px 18px}
.logo{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:21px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.logo span{color:var(--accent)}
.navlink{font-size:14px;color:var(--muted);text-decoration:none}
.hero{padding:56px 18px 30px}
h1{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:clamp(36px,7.5vw,64px);line-height:1.03;letter-spacing:-.02em;margin:0 0 18px}
.lede{font-size:19px;color:var(--muted);max-width:560px;margin:0 0 28px}
.box{display:flex;gap:8px;background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:8px}
.box input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:17px;padding:11px 12px;color:var(--ink);outline:none}
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:12px 20px;font:600 16px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.small{font-size:13.5px;color:var(--muted)}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;padding:40px 18px 10px}
.three div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px}
.three h3{margin:0 0 6px;font-size:15px}
.three p{margin:0;color:var(--muted);font-size:14.5px}
/* report */
.first{background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:22px;margin:8px 0 18px}
.first h2{font-family:Fraunces,serif;margin:0 0 3px;font-size:25px;letter-spacing:-.01em}
.first .sub{color:var(--muted);font-size:15px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.facts span{background:var(--chip);border-radius:999px;padding:5px 12px;font-size:14px}
.step{margin:0 0 12px}
.ask{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;
  background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:17px 19px;
  font:600 17px Inter,sans-serif;color:var(--ink);cursor:pointer}
.ask:hover{border-color:var(--accent)}
.ask .chev{color:var(--accent);font-size:15px;white-space:nowrap}
.working{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:15px;
  background:var(--paper);border:1.5px dashed var(--line);border-radius:14px;padding:17px 19px}
.spin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.answer{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:20px}
.answer h3{margin:0 0 10px;font-family:Fraunces,serif;font-size:20px}
.finding{background:var(--ok-bg);border-radius:10px;padding:12px 14px;margin:0 0 12px;font-size:16px}
.finding.warn{background:var(--warn-bg)}
.rows{display:grid;grid-template-columns:1fr auto;gap:5px 16px;font-size:15px}
.rows div:nth-child(even){color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.rows .flag{font-weight:600}
table{width:100%;border-collapse:collapse;font-size:14.5px;margin:6px 0}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.grade{display:inline-block;min-width:26px;text-align:center;font-weight:700;border-radius:6px;padding:1px 7px;font-size:14px;background:var(--chip)}
.gA{background:#d8efe4;color:#14573f}.gB{background:#e3ecf7;color:#23466e}.gC{background:#fbefd5;color:#7a5410}.gD,.gF{background:#f8dfd8;color:#8a2f1c}
@media (prefers-color-scheme:dark){.gA{background:#1d3a2f;color:#8fd4b4}.gB{background:#1f2c3d;color:#9dbde6}.gC{background:#3a2e17;color:#f0c67a}.gD,.gF{background:#3d211a;color:#f0a08c}}
img.aerial{width:100%;height:auto;border-radius:10px;display:block;margin:10px 0 4px}
.src{font-size:12px;color:var(--muted);margin-top:10px}
.gate{background:var(--ink);color:var(--bg);border-radius:16px;padding:26px;margin:24px 0}
.gate h2{font-family:Fraunces,serif;margin:0 0 8px;font-size:24px}
.gate .box{border-color:var(--bg);background:var(--paper);margin-top:14px}
.gate .small{color:var(--bg);opacity:.75}
footer{border-top:1px solid var(--line);margin-top:44px;padding:22px 18px 44px;font-size:12.5px;color:var(--muted)}
footer a{color:var(--muted)}
@media (max-width:560px){.box{flex-direction:column}.btn{width:100%}}