main { max-width:680px; margin:0 auto; padding:20px 16px 56px; }
h1 { margin:0 0 10px; font:800 clamp(2.4rem, 8vw, 3.4rem)/.95 var(--font-display); text-transform:uppercase; overflow-wrap:anywhere; }
h2 { margin:28px 0 8px; font:800 1.5rem/1.05 var(--font-display); text-transform:uppercase; }
p { margin:0 0 16px; color:var(--dim); }
.label { font:500 .8125rem/1.4 var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
:focus-visible { outline:3px solid var(--signal); outline-offset:2px; }
.notice { padding:14px 16px; background:var(--panel); border:1px solid var(--signal); border-radius:10px; color:var(--chalk); margin:0 0 20px; }
fieldset { border:0; margin:0 0 12px; padding:0; }
legend { padding:0; margin:0 0 8px; }
.pills { display:flex; flex-wrap:wrap; gap:8px; }
.pill { position:relative; }
.pill input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.pill span { display:flex; align-items:center; min-height:44px; box-sizing:border-box; padding:0 16px; border:1px solid var(--rule); border-radius:999px; background:var(--panel); font:500 .8125rem/1 var(--font-mono); text-transform:uppercase; letter-spacing:.06em; }
.pill input:checked + span { border-color:var(--signal); color:var(--signal); }
.pill input:focus-visible + span { outline:3px solid var(--signal); outline-offset:2px; }
.how { padding:12px 16px; background:var(--panel); border:1px solid var(--rule); border-radius:10px; margin:0 0 16px; color:var(--dim); }
textarea { width:100%; min-height:220px; padding:12px; background:var(--panel); color:var(--chalk); border:1px solid var(--rule); border-radius:10px; font:14px/1.4 var(--font-mono); resize:vertical; }
textarea:focus-visible { border-color:var(--signal); }
.count { margin:6px 0 16px; }
button { font:800 1.1rem/1 var(--font-display); text-transform:uppercase; letter-spacing:.03em; padding:14px 22px; border-radius:10px; border:1px solid var(--signal); background:var(--signal); color:var(--night); cursor:pointer; }
button.quiet { background:transparent; color:var(--chalk); border-color:var(--rule); }
button:disabled { background:transparent; border-color:var(--rule); color:var(--dim); cursor:default; }
.status { margin:16px 0 0; min-height:1.4em; color:var(--chalk); }
.status.bad { color:var(--warn); }
ul.rows { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px; }
.row { padding:12px 14px; background:var(--panel); border:1px solid var(--rule); border-radius:10px; }
.row.ambiguous { border-color:var(--signal); }
.row.unmatched { border-color:var(--warn); }
.raw { font:14px/1.4 var(--font-mono); color:var(--dim); overflow-wrap:anywhere; margin:0 0 8px; }
.choice { display:flex; gap:10px; align-items:center; padding:6px 0; }
.choice input { margin:0; width:20px; height:20px; accent-color:var(--signal); }
.pick { font-weight:700; }
.warn { color:var(--warn); font-size:14px; }
details { background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:10px 14px; margin:0 0 12px; }
summary { cursor:pointer; font:500 .8125rem/1.6 var(--font-mono); text-transform:uppercase; letter-spacing:.06em; }
details ul { list-style:none; margin:8px 0 0; padding:0; }
details li { padding:4px 0; border-top:1px solid var(--rule); overflow-wrap:anywhere; }
a { color:var(--signal); }
.picked { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.picked button { padding:8px 14px; font-size:1rem; min-height:44px; }
select, input[type="number"] { display:block; width:100%; max-width:320px; min-height:44px; margin:2px 0 12px; padding:8px 12px; background:var(--panel); color:var(--chalk); border:1px solid var(--rule); border-radius:10px; font:14px/1.4 var(--font-mono); }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.step { margin:8px 0 6px; color:var(--signal); }
.help { margin:-6px 0 14px; font-size:.8125rem; line-height:1.45; color:var(--dim); max-width:520px; }
.alt a, .status a, .notice a { display:inline-flex; align-items:center; min-height:44px; }
.notice a { min-height:0; display:inline; }
.tally { list-style:none; margin:0 0 16px; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.tally li { padding:10px 12px; background:var(--panel); border:1px solid var(--rule); border-radius:10px; }
.tally .n { display:block; font:800 1.9rem/1 var(--font-display); }
.tally .good .n { color:var(--signal); } .tally .warn .n { color:var(--warn); }
[hidden] { display:none !important; }