:root{color-scheme:light dark;--bg:light-dark(#fbfaf6,#141a14);--fg:light-dark(#1d2a1d,#e8efe5);--mut:light-dark(#667,#9aa89a);--line:light-dark(#e3e0d4,#2a352a);--on:light-dark(#2f7a3f,#4aa85d);--on-fg:light-dark(#fff,#0b140b);--now:light-dark(#fff3c4,#3a3410);--card:light-dark(#fff,#1b231b)}
:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box}
body{margin:0 auto;max-width:960px;padding:1rem;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,sans-serif}
h1{margin:.2rem 0 0}h2{font-size:1rem}
#tagline{margin:.2rem 0 1rem;color:var(--mut)}
input[type=search]{padding:.5rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);font:inherit}
button{font:inherit;padding:.4rem .7rem;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.seg{display:flex}.seg button:first-child{border-radius:6px 0 0 6px}.seg button:last-child{border-radius:0 6px 6px 0}
button[aria-pressed=true]{background:var(--on);color:var(--on-fg);border-color:var(--on)}
#rot{border-radius:6px}
.chk{display:flex;gap:.3rem;align-items:center}
#count{color:var(--mut);margin:.5rem 0}
.wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:640px}
th,td{padding:.3rem .25rem;text-align:center;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left;padding-left:.6rem;position:sticky;left:0;background:var(--card);white-space:nowrap}
thead th{position:sticky;top:0;background:var(--card);font-size:.8rem;text-transform:capitalize}
th.cur,td.cur{background:var(--now)}
tr.grp th{text-align:left;background:var(--bg);font-size:.8rem;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
td .dot{display:block;height:1.1rem;margin:0 .1rem;border-radius:4px}
td.on .dot{background:var(--on)}
.sec{color:var(--mut);font-size:.75rem}
footer{margin:1.5rem 0;color:var(--mut);font-size:.9rem}
footer a{color:inherit}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:.5rem;top:-3rem;padding:.5rem .8rem;background:var(--card);color:var(--fg);border:2px solid var(--on);border-radius:6px;z-index:10}
.skip:focus{top:.5rem}
:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.bar h1{font-size:1.75rem}
#settingsbtn{border-radius:6px;min-height:44px}
.controls{display:grid;gap:.6rem}
.controls .seg{width:100%}.controls .seg button{flex:1;min-height:44px}
input[type=search]{min-height:44px;width:100%}
.chk{min-height:44px}.chk input{width:1.25rem;height:1.25rem}
@media (min-width:640px){.controls{display:flex;flex-wrap:wrap;align-items:center}.controls .seg{width:auto}.controls .seg button{flex:none;min-height:0}input[type=search]{width:auto;min-height:0;flex:1 1 14rem}.chk{min-height:0}.bar h1{font-size:2rem}}
dialog{box-sizing:border-box;max-height:90dvh;overflow-y:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg);padding:1rem;width:min(92vw,26rem)}
dialog::backdrop{background:rgb(0 0 0/.5)}
@media (max-width:639px){dialog{margin:auto 0 0;width:100%;max-width:none;border-radius:12px 12px 0 0}}
.field{margin:1rem 0}.flbl{display:block;font-weight:600;margin-bottom:.4rem}
dialog .seg button{flex:1 1 0;min-width:0;min-height:44px;overflow-wrap:anywhere}dialog .chk{display:flex;align-items:center;gap:.5rem}dialog #rot{white-space:normal}dialog #rot{min-height:44px;width:100%}
.primary{width:100%;min-height:44px;border-radius:6px;background:var(--on);color:var(--on-fg);border-color:var(--on)}
@media (forced-colors:active){td.on .dot{background:Highlight;forced-color-adjust:none}button[aria-pressed=true]{outline:2px solid Highlight}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
