:root{--bg:#f6f4ef;--fg:#222;--muted:#888;--card:#fff;--line:#e4e0d6;--accent:#3b6ea5}
@media (prefers-color-scheme:dark){:root{--bg:#18181a;--fg:#e8e6e1;--muted:#8a8a8a;--card:#232326;--line:#333;--accent:#7aa7d9}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 system-ui,"PingFang SC","Hiragino Sans","Noto Sans CJK SC",sans-serif}
main{max-width:520px;margin:0 auto;padding:24px 16px 80px}
h1{font-size:22px;margin:8px 0}h2{font-size:18px;margin:0 0 6px}.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font-size:13px}
.stat b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden}.bar i{display:block;height:100%;background:var(--accent)}
button.choice{display:block;width:100%;text-align:left;margin:8px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;font:inherit;cursor:pointer}
button.choice:hover,button.choice:focus-visible{border-color:var(--accent);outline:none}
kbd{display:inline-block;min-width:1.4em;margin-right:6px;padding:0 4px;border:1px solid var(--line);border-radius:4px;font:12px/1.5 ui-monospace,monospace;text-align:center;color:var(--muted)}
@media (hover:none){kbd{display:none}}
.result{border-left:3px solid var(--accent);padding-left:10px}.delta{font-size:13px;color:var(--muted)}
.primary{padding:10px 18px;border-radius:10px;border:0;background:var(--accent);color:#fff;font:inherit;cursor:pointer}
footer{position:fixed;bottom:0;left:0;right:0;text-align:center;padding:10px;font-size:13px;color:var(--muted);background:var(--bg)}
footer a{color:inherit}footer button{background:none;border:1px solid var(--line);color:inherit;border-radius:6px;cursor:pointer}
.log summary{cursor:pointer;font-weight:600}.log ol{margin:10px 0 0;padding-left:20px}.log li{margin:6px 0;font-size:14px}