*{box-sizing:border-box}
body{margin:0;background:#0B0B0F;color:#F5F5F5;font-family:Inter,system-ui,sans-serif;line-height:1.55}
a{color:#D5FF71}
.wrap{max-width:560px;margin:0 auto;padding:28px 20px 48px}
header{margin-bottom:24px}
.logo{font-size:30px;font-weight:800;letter-spacing:-.02em}
.logo span{color:#FE2C55}
.tag{color:#9AA1AB;margin:4px 0 0}
.timer-card{background:#14141B;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:22px;text-align:center}
.mode-row{display:flex;gap:6px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.mode{border:1px solid rgba(255,255,255,.18);background:transparent;color:#C2C5CA;border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer}
.mode.on{background:#D5FF71;color:#111;border-color:#D5FF71;font-weight:700}
.ring-wrap{position:relative;width:220px;height:220px;margin:0 auto}
.ring{width:220px;height:220px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:10}
.ring-fg{fill:none;stroke:#FE2C55;stroke-width:10;stroke-linecap:round;stroke-dasharray:603;stroke-dashoffset:0;transition:stroke-dashoffset .5s linear}
.time{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.time span{font-size:52px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.time small{color:#9AA1AB;font-size:13px}
.controls{display:flex;gap:10px;justify-content:center;margin-top:18px}
.btn{border:0;border-radius:999px;padding:12px 22px;font-size:14px;font-weight:700;cursor:pointer}
.btn.primary{background:#FE2C55;color:#fff}
.btn.primary:hover{background:#E01E48}
.btn.ghost{background:transparent;color:#F5F5F5;border:1px solid rgba(255,255,255,.3)}
.hint{color:#9AA1AB;font-size:13px;margin:16px 0 0}
.panel{background:#14141B;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:22px;margin-top:16px}
.panel h2{margin:0 0 14px;font-size:19px}
.stats{display:flex;gap:14px;text-align:center}
.stats div{flex:1;background:#0B0B0F;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 6px}
.stats b{display:block;font-size:26px}
.stats span{font-size:11px;color:#9AA1AB}
.dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.dots i{width:12px;height:12px;border-radius:50%;border:2px solid #FE2C55;display:block}
.dots i.done{background:#FE2C55}
.note{color:#9AA1AB;font-size:12px;margin:14px 0 0}
.steps{margin:0;padding-left:20px;color:#C2C5CA}
.steps li{margin-bottom:8px}
.steps b{color:#F5F5F5}
.field{display:block;margin-top:16px;font-size:13px;color:#9AA1AB}
.field input{width:100%;margin-top:6px;background:#0B0B0F;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:11px 13px;color:#F5F5F5;font-size:14px;outline:none}
.field input:focus{border-color:#D5FF71}
footer{margin-top:24px;font-size:13px;color:#9AA1AB;text-align:center}
@media(max-width:480px){.time span{font-size:44px}.stats{flex-direction:column}}