:root{font-family:system-ui,sans-serif;color:#f5f7fb;background:#101827}body{margin:0}main{max-width:520px;margin:auto;padding:24px 18px}header{display:flex;justify-content:space-between;align-items:center;gap:12px}h1{font-size:23px}#status,.hint,#progress,#next{color:#a9b7cd}.panel{background:#1c293e;border-radius:22px;padding:26px 20px;text-align:center;margin:20px 0}h2{font-size:26px;min-height:64px}#clock{font-size:74px;font-weight:750;font-variant-numeric:tabular-nums;margin:18px 0}#detail{font-size:20px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}button{border:0;border-radius:12px;background:#334865;color:white;font-size:17px;padding:17px 12px;cursor:pointer}#primary{background:#34a67c;grid-column:span 2;color:#071c14;font-weight:700}#done{background:#3467b4}#reset{background:#653b4b}label{display:block;margin:22px 0}.hint{font-size:13px;line-height:1.5}#mic{width:100%}
.panel{transition:background-color .2s ease}.panel[data-phase="work"]{background:#8f2630}.panel[data-phase="rest"]{background:#176b47}.panel[data-phase="work"] #progress,.panel[data-phase="work"] #next,.panel[data-phase="rest"] #progress,.panel[data-phase="rest"] #next{color:#e8f0ed}