:root{--bg:#000;--surface:#141414;--surface-2:#262626;--border:#2a2a2a;--text:#f5f5f5;--muted:#8a8a8a;--green:#22c55e;--amber:#fbbf24;--red:#ff3b30}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;border:none;outline:none}.display{height:100dvh;padding:max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));flex-direction:column;align-items:center;gap:2vh;display:flex}.timer-area{--timer-size:min(32cqw, 64cqh);--clock-ratio:.2;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1vh;width:100%;min-height:0;display:flex;container-type:size}.timer{font-size:var(--timer-size);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:700;line-height:1;transition:color .3s}.timer.len-6,.timer.len-7{font-size:min(25cqw,64cqh)}.timer.len-8{font-size:min(21cqw,64cqh)}.timer.paused{opacity:.55}.timer.tone-warn{color:var(--amber)}.timer.tone-over{color:var(--red)}.clock{flex-direction:column;align-items:center;gap:4px;margin-top:1vh;display:flex}.clock-time{font-size:max(28px, calc(var(--timer-size) * var(--clock-ratio)));font-variant-numeric:tabular-nums;font-weight:600;line-height:1.1}.clock-date{font-size:max(14px, calc(var(--timer-size) * var(--clock-ratio) * .36));color:var(--muted)}.controls{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:100%;padding-top:2vh;display:flex}.group{align-items:center;gap:8px;display:flex}.controls button{background:var(--surface);border:1px solid var(--border);min-width:64px;height:64px;color:var(--text);border-radius:16px;justify-content:center;align-items:center;padding:0 14px;font-size:18px;font-weight:600;transition:transform 80ms,background .15s,color .15s,border-color .15s;display:flex}.controls button:active{background:var(--surface-2);transform:scale(.95)}.controls button svg{width:28px;height:28px}.controls button.icon{width:64px;padding:0}.controls button.wide{width:120px}.controls button[role=tab]{color:var(--muted)}.controls button.active{background:var(--surface-2);color:var(--text);border-color:#3a3a3a}.controls button.armed{color:var(--red);border-color:var(--red)}.duration-label{color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;min-width:72px;font-size:20px}@media (orientation:portrait){.timer-area{--clock-ratio:.29}.controls{justify-content:center;gap:10px}.controls button.wide{width:84px}}@media (max-width:600px){.display{padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right))}}