html, body { margin: 0; min-height: 100%; background: var(--night); color: var(--text); font: 500 16px/1.45 var(--body); }
main { width: min(100%, 760px); margin: 0 auto; padding: 32px 16px 64px; }
.kicker { margin: 0; color: var(--glow); font: 700 13px var(--body); letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 6px 0 24px; font: 800 clamp(30px, 8vw, 52px)/1.02 var(--head); }
.now-box { display: grid; gap: 2px; margin-bottom: 20px; padding: 16px 18px; border: 2px solid var(--tone); border-radius: 16px; background: var(--plate); }
.now-box small { color: var(--tone); font: 800 12px var(--head); letter-spacing: .12em; }
.now-box b { font: 800 22px/1.15 var(--head); }
.now-box time { color: var(--muted); font-variant-numeric: tabular-nums; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filters button { min-height: 44px; padding: 0 16px; border: 2px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: 700 15px var(--body); cursor: pointer; }
.filters button[aria-pressed="true"] { border-color: var(--tone, var(--text)); background: var(--plate-2); }
.filters i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--tone); }
.tasks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tasks li { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; background: var(--plate); }
.tasks .chip { height: 34px; padding: 0 10px; font-size: 14px; }
.tasks b { font-weight: 700; overflow-wrap: anywhere; }
.tasks small { display: block; color: var(--muted); }
.empty { color: var(--muted); }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
@media (max-width: 420px) { .tasks li { grid-template-columns: 96px 1fr; gap: 10px; } .tasks .chip { font-size: 12px; } }