:root { color-scheme: light dark; --bg:#fff; --ink:#18202e; --muted:#536171; --line:#cbd3df; --accent:#2c5bff; --soft:#edf1ff; }
@media (prefers-color-scheme: dark) { :root { --bg:#11151d; --ink:#edf1ff; --muted:#acb8cd; --line:#536171; --accent:#9bb1ff; --soft:#202e51; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
main { max-width:1000px; padding:24px; margin:auto; }
header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
h1 { font-size:clamp(22px,4vw,32px); line-height:1.25; margin:0; }
h2 { font-size:19px; margin:12px 0; }
p { max-width:75ch; }
button, select { font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:8px; min-height:44px; padding:7px 12px; }
button { cursor:pointer; }
button:hover { border-color:var(--accent); }
button:disabled { opacity:0.4; cursor:default; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
button[aria-pressed="true"] { color:var(--bg); background:var(--ink); }
.controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:20px 0; }
label { display:inline-flex; align-items:center; gap:8px; }
input[type="checkbox"] { width:21px; height:21px; }
.workspace { display:flex; flex-wrap:wrap; gap:28px; align-items:start; }
.grid { display:grid; gap:4px; width:max-content; max-width:100%; margin:16px 0; }
.grid button { padding:0; min-height:0; width:36px; height:36px; border-radius:5px; font:13px/1.2 ui-monospace,monospace; }
.grid button.parity { border:2px solid var(--accent); }
.grid button.suspect { outline:3px solid #d87917; outline-offset:0; }
.binary.grid button { width:clamp(30px,8vw,66px); height:66px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.binary small { font-size:11px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:14px; background:var(--soft); border-radius:10px; font:15px/1.6 ui-monospace,monospace; }
.readout { padding:16px; background:var(--soft); border-radius:12px; }
#result { min-height:4em; padding:16px; background:var(--soft); border-radius:12px; font-weight:600; white-space:pre-line; }
.scope { color:var(--muted); border-left:3px solid var(--line); padding-left:14px; font-size:14px; }
.prompt { color:var(--accent); }
.coins { display:flex; flex-wrap:wrap; gap:8px; max-width:460px; margin:20px 0; }
.coin { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:12px; }
.table-wrap { max-width:100%; overflow:auto; }
table { border-collapse:collapse; width:100%; min-width:520px; font-size:15px; margin:18px 0; }
th,td { padding:10px; border-bottom:1px solid var(--line); text-align:left; }
th { font-size:13px; color:var(--muted); }
a { color:var(--accent); }
html[data-lang="zh"] .en, html[data-lang="en"] .zh { display:none; }
@media(max-width:480px) { main{padding:16px;} .grid button{width:31px;height:31px;} .grid{gap:3px;} }
@media(prefers-reduced-motion:reduce) { *{scroll-behavior:auto;} }