:root{--tempo-primary:#900;--tempo-bg:#f8efe2;--tempo-surface:#fff;--tempo-pulse:#bf5858;--tempo-pulse-center:#f5c0bc;--tempo-text:#241c18;--tempo-muted:#6f645d;--tempo-track:#e8ddd0;--tempo-focus:#5a1414;--ring-size:clamp(190px, 72vmin, 640px)}*{box-sizing:border-box}html,body,#app{width:100%;min-width:240px;min-height:220px;margin:0}body{color:var(--tempo-text);background:radial-gradient(circle at 20% 10%, #fff8ef 0, transparent 35%), radial-gradient(circle at 80% 100%, #fff6ea 0, transparent 45%), var(--tempo-bg);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Public Sans,Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif}button,input{font:inherit}.tempo-shell{place-items:center;min-width:240px;min-height:100vh;padding:10px;display:grid}.timer-card{width:min(calc(var(--ring-size) + 64px), 100%);background:color-mix(in srgb, var(--tempo-surface) 92%, var(--tempo-bg));border:1px solid color-mix(in srgb, var(--tempo-track) 65%, var(--tempo-surface));border-radius:16px;align-content:center;justify-items:center;min-width:240px;min-height:220px;padding:12px;display:grid;container-type:inline-size}.ring-wrap{width:var(--ring-size);max-width:100%;position:relative}.ring-svg{width:100%;height:auto;display:block}.ring-track,.ring-progress{fill:none;stroke-width:15px}.ring-track{stroke:var(--tempo-track);transition:stroke .3s}.ring-wrap.is-expired .ring-track{stroke:var(--tempo-track);animation:2.2s ease-in-out infinite expiredRingPulse}.ring-progress{stroke:var(--tempo-primary);stroke-linecap:round;transform-origin:50%;transition:stroke-dashoffset .18s linear;transform:rotate(-90deg)}.ring-center{inset:calc(var(--ring-size) * .13);background:color-mix(in srgb, var(--tempo-surface) 95%, var(--tempo-bg));text-align:center;align-content:center;justify-items:center;gap:max(8px, calc(var(--ring-size) * .03));padding:max(14px, calc(var(--ring-size) * .05));border-radius:50%;display:grid;position:absolute}.ring-center.is-expired{animation:2.2s ease-in-out infinite expiredCenterPulse}.remaining-time{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-family:JetBrains Mono,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;font-size:clamp(2rem, calc(var(--ring-size) * .22), 9rem);color:var(--tempo-text);margin:0}.preview-time{font-size:clamp(1.7rem, calc(var(--ring-size) * .16), 6.5rem)}.remaining-time.is-expired{font-weight:800;animation:2.2s ease-in-out infinite expiredTextPulse}.start-form{width:100%;max-width:clamp(160px, calc(var(--ring-size) * .62), 420px);gap:6px;display:grid}.minutes-label{color:var(--tempo-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.74rem}.input-row{grid-template-columns:auto auto;justify-content:center;gap:8px;display:grid}.minutes-input{font-variant-numeric:tabular-nums;width:8ch;color:var(--tempo-text);background:#fff;border:1px solid #cabaa8;border-radius:10px;padding:8px 10px;font-family:JetBrains Mono,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95rem}.minutes-input:focus-visible,.primary-button:focus-visible,.subtle-button:focus-visible{outline:2px solid var(--tempo-focus);outline-offset:2px}.primary-button{border:1px solid var(--tempo-primary);background:var(--tempo-primary);color:#fff;text-transform:lowercase;border-radius:10px;padding:8px 12px;font-weight:600}.input-help{color:var(--tempo-muted);margin:0;font-size:.72rem}.input-help.error{color:#6f1d1d}.end-time{color:var(--tempo-muted);font-size:clamp(.82rem, calc(var(--ring-size) * .03), 2rem);letter-spacing:.02em;margin:0}.timer-controls{align-items:center;gap:8px;display:flex}.subtle-button{background:color-mix(in srgb, #fff 88%, var(--tempo-bg));color:var(--tempo-muted);font-size:clamp(.78rem, calc(var(--ring-size) * .028), 1.6rem);text-transform:lowercase;border:1px solid #d7c8b8;border-radius:999px;padding:4px 10px}@keyframes expiredRingPulse{0%,to{stroke:var(--tempo-track);stroke-width:15px}50%{stroke:var(--tempo-pulse);stroke-width:24px}}@keyframes expiredCenterPulse{0%,to{background:#fefcf9}50%{background:var(--tempo-pulse-center)}}@keyframes expiredTextPulse{0%,to{color:var(--tempo-text)}50%{color:var(--tempo-primary)}}@container (width<=380px){.timer-controls{display:none}.ring-center{gap:6px;padding:10px}.remaining-time{font-size:clamp(1.5rem, calc(var(--ring-size) * .15), 2.2rem)}}@container (width<=330px){.end-time{display:none}.start-form{max-width:180px}.minutes-label,.input-help{display:none}}@media (prefers-reduced-motion:reduce){.ring-wrap.is-expired .ring-track,.ring-center.is-expired,.remaining-time.is-expired{animation:none}.ring-wrap.is-expired .ring-track{stroke:var(--tempo-pulse);stroke-width:24px}.ring-center.is-expired{background:var(--tempo-pulse-center)}.remaining-time.is-expired{color:var(--tempo-primary)}}
