.timer{display:grid;gap:14px;justify-items:center;text-align:center;padding:28px 20px}
.mode{margin:0;font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--accent)}
.mode.rest{color:var(--sub)}
.clock{margin:0;font-family:var(--mono);font-size:clamp(64px,18vw,104px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.bar{width:100%;max-width:420px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width 1s linear}
.center{justify-content:center}
.between{justify-content:space-between}
.lens button{font:inherit;font-size:13px;border:1px solid var(--line);background:transparent;color:var(--sub);border-radius:999px;padding:4px 12px;cursor:pointer}
.lens button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.ask{display:grid;gap:12px}
.ask[hidden]{display:none}
h2{margin:0;font-size:17px}
.log{margin:10px 0 12px;padding:0;list-style:none;display:grid}
.log li{display:grid;grid-template-columns:4.2em minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.log li:first-child{border-top:0}
.log time{font-family:var(--mono);font-size:13px;color:var(--sub);padding-top:2px}