.stopwatch-workspace{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);min-width:0}
.stopwatch-main{background:var(--cobalt);color:var(--white);padding:25px 28px 22px}
.stopwatch-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.stopwatch-toolbar h2{font-size:16px;font-weight:600;line-height:1.5}
.stopwatch-status{font-size:13px;color:var(--cobalt-light);display:inline-flex;align-items:center;gap:7px}
.stopwatch-status:before{content:"";width:6px;height:6px;background:currentColor;border-radius:50%}
[data-status="running"] .stopwatch-status{color:var(--lemon)}
[data-status="paused"] .stopwatch-status:before{border-radius:1px}
.stopwatch-stage{text-align:center;padding:31px 0 33px;min-width:0}
.stopwatch-display{display:flex;align-items:baseline;justify-content:center;white-space:nowrap;font-family:var(--timer-font);font-weight:500;font-variant-numeric:tabular-nums;font-size:clamp(140px,17vw,184px);line-height:1.14;letter-spacing:-.025em;user-select:none}
.stopwatch-fraction{font-size:.52em;color:var(--lemon);letter-spacing:0;margin-left:5px;min-width:1.05em;text-align:left}
.stopwatch-display[data-hours="true"]{font-size:clamp(108px,14vw,146px)}
.stopwatch-display[data-long="true"]{font-size:clamp(82px,11vw,118px)}
.stopwatch-measure{font-size:13px;color:var(--cobalt-light);margin-top:8px}
.stopwatch-actions{display:flex;align-items:center;gap:10px;max-width:650px;margin:auto}
.stopwatch-actions .button{min-height:52px}
.stopwatch-toggle{flex:1;background:var(--lemon);color:var(--cobalt-hover);font-size:16px}
.stopwatch-toggle:hover{background:color-mix(in srgb,var(--lemon) 70%,white)}
.stopwatch-secondary{background:transparent;border:1px solid var(--cobalt-light);color:var(--white);padding-inline:18px}
.stopwatch-secondary:hover:not(:disabled){background:color-mix(in srgb,var(--cobalt) 90%,white)}
.stopwatch-main button:focus-visible{outline-color:var(--lemon)}
.stopwatch-key-hint{font-size:12px;color:var(--cobalt-light);text-align:center;margin-top:17px}
.stopwatch-key-hint kbd{font-family:var(--font);border-bottom:1px solid currentColor;margin-right:5px}
.stopwatch-records{padding:25px 28px 28px}
.stopwatch-record-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.stopwatch-record-heading h3{font-size:16px;line-height:1.5}
.stopwatch-record-heading>span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.stopwatch-record-hint{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.8;word-break:keep-all}
.stopwatch-empty{padding:30px 8px 17px;text-align:center;color:var(--muted)}
.stopwatch-empty p{font-size:14px;font-weight:600;color:var(--ink)}
.stopwatch-empty span{font-size:13px;display:block;margin-top:5px}
.stopwatch-stats{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:22px;padding-bottom:18px}
.stopwatch-stats p{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.stopwatch-stats span{font-size:12px;color:var(--muted)}
.stopwatch-stats strong{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.stopwatch-table-wrap{max-height:370px;overflow:auto;overscroll-behavior:contain;margin-top:16px;border-top:1px solid var(--line)}
.stopwatch-stats:not([hidden])+.stopwatch-empty+.stopwatch-table-wrap{margin-top:0}
.stopwatch-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.stopwatch-table thead{position:sticky;top:0;z-index:1;background:var(--white)}
.stopwatch-table th,.stopwatch-table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.stopwatch-table th:first-child{text-align:left;padding-left:0;width:24%}
.stopwatch-table td:last-child,.stopwatch-table th:last-child{padding-right:0}
.stopwatch-table thead th{font-size:12px;font-weight:500;color:var(--muted)}
.stopwatch-table tbody th{font-weight:500}
.stopwatch-table tr[data-record="fastest"]{color:var(--cobalt)}
.stopwatch-table tr[data-record="slowest"] .stopwatch-lap-tag{color:var(--muted)}
.stopwatch-lap-tag{font-size:11px;margin-left:9px}
.stopwatch-persistence{font-size:12px;color:var(--muted);margin-top:15px;line-height:1.9;word-break:keep-all}
@media(max-width:640px){
  .stopwatch-main{padding:22px 20px 20px}.stopwatch-stage{padding:28px 0}.stopwatch-display{font-size:clamp(100px,24vw,152px)}
  .stopwatch-display[data-hours="true"]{font-size:clamp(70px,17vw,108px)}.stopwatch-display[data-long="true"]{font-size:clamp(53px,13vw,82px)}
  .stopwatch-fraction{margin-left:3px}.stopwatch-measure{font-size:12px}.stopwatch-actions{gap:8px;flex-wrap:wrap}
  .stopwatch-toggle{flex-basis:100%}.stopwatch-secondary{flex:1}.stopwatch-actions .button{min-height:48px}
  .stopwatch-records{padding:23px 20px}.stopwatch-stats{gap:9px;margin-top:18px}.stopwatch-stats p{flex-basis:100%;justify-content:space-between}
  .stopwatch-table th,.stopwatch-table td{padding-inline:6px;font-size:13px}.stopwatch-lap-tag{font-size:11px;margin-left:5px}.stopwatch-persistence{margin-top:12px}
}
@media(max-width:350px){.stopwatch-main,.stopwatch-records{padding-inline:16px}.stopwatch-display{font-size:92px}.stopwatch-table th,.stopwatch-table td{font-size:12px}.stopwatch-lap-tag{display:block;margin:1px 0 0}.stopwatch-toolbar h2{font-size:15px}}
