:root{--bg:#fff5de;--panel:#fffdf7;--ink:#2a2233;--muted:#5b4a52;--accent:#1f7f97;--coral:#e0765f;--ok:#2c6c3e;--warn:#c99a2e;--line:#e3cfa9}
body.townline{--bg:#f2f8fa;--panel:#fff;--ink:#122f36;--muted:#47616a;--accent:#1f7f97;--line:#c7dfe6}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
.qp-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px max(16px,calc((100vw - 1000px)/2));border-bottom:1px solid var(--line);background:var(--panel)}
.qp-bar a{color:var(--accent);font-weight:700;text-decoration:none}.qp-bar .brand{font:700 20px Georgia,serif;color:var(--ink)}
main{max-width:1000px;margin:0 auto;padding:18px 16px 40px}
.qp-hero{display:grid;grid-template-columns:1fr 200px;gap:18px;align-items:center}.qp-hero img{width:100%;border-radius:16px;background:#e9f6fb}
h1{font:700 clamp(32px,6vw,52px)/1 Georgia,serif;margin:6px 0 10px}.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);font-weight:900;margin:0}
.hud{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.hud div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 14px;min-width:90px}.hud span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase}.hud strong{font-size:20px}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px}
button{font:inherit;cursor:pointer;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);min-height:44px;padding:8px 14px}button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.msg{min-height:1.5em;font-weight:700;margin:10px 0}.how{color:var(--muted);font-size:14px}
footer{max-width:1000px;margin:0 auto;padding:16px;color:var(--muted);font-size:13px;display:flex;gap:10px;align-items:center}footer img{height:26px}
@media(max-width:600px){.qp-hero{grid-template-columns:1fr}.qp-hero img{max-height:140px;object-fit:contain}}