.timer-dial{aspect-ratio:1;background:radial-gradient(circle at center, var(--paper) 0 56%, transparent 57%), conic-gradient(var(--green) calc(var(--progress) * 360deg), #15191d1f 0);border-radius:50%;place-items:center;width:min(420px,90%);display:grid;box-shadow:inset 0 0 0 1px #15191d1f,0 28px 70px #141c202e}.timer-dial span{font-size:4rem;font-weight:950;line-height:1}.timer-scene{border-radius:var(--radius);place-items:center;width:min(100%,720px);min-height:clamp(360px,44vw,520px);display:grid}.timer-scene:fullscreen{background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--product-accent), transparent 76%), transparent 42%), var(--bg);border-radius:0;width:100vw;min-height:100vh;padding:6vw}.timer-dial{border:1px solid color-mix(in srgb, var(--product-accent), transparent 56%);background:radial-gradient(circle at center, color-mix(in srgb, var(--paper), white 16%) 0 53%, transparent 54%), conic-gradient(from 0deg, var(--product-accent) calc(var(--progress) * 360deg), color-mix(in srgb, var(--ink), transparent 88%) 0);width:min(440px,86%);position:relative;box-shadow:inset 0 0 0 14px #ffffff29,0 36px 84px #141c2033}.timer-dial:before{border:1px solid var(--line);content:"";border-radius:50%;position:absolute;inset:12%}.timer-dial span{z-index:1;font-variant-numeric:tabular-nums;letter-spacing:0;font-size:clamp(2.6rem,7vw,5.3rem);position:relative}.timer-dial[data-complete=true]{border-color:color-mix(in srgb, var(--green), transparent 26%);animation:timer-complete .48s var(--ease-interface) both}.timer-presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;display:grid}.timer-presets button{border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb, var(--paper), transparent 4%);min-height:40px;color:var(--ink);font-weight:820}.timer-presets button:hover{border-color:color-mix(in srgb, var(--product-accent), transparent 42%);background:color-mix(in srgb, var(--product-accent), white 90%)}.timer-dial>small{color:var(--muted);text-transform:uppercase;font-size:.72rem;font-weight:800;position:absolute;inset-block-end:22%}.timer-scene[data-phase=break] .timer-dial{--product-accent:#6f78d9}@media (max-width:600px){.timer-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}.timer-scene{border:1px solid color-mix(in srgb, var(--product-accent), transparent 82%);background:radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--product-accent), transparent 88%), transparent 47%), linear-gradient(145deg, color-mix(in srgb, var(--paper), white 3%), color-mix(in srgb, var(--paper), var(--ink) 3%));box-shadow:inset 0 0 44px #141c200d}.timer-dial{border:clamp(8px, 1.4vw, 14px) solid color-mix(in srgb, var(--ink), #afb6b7 64%);background:radial-gradient(circle at center, color-mix(in srgb, var(--paper), white 18%) 0 49%, transparent 49.5%), repeating-conic-gradient(from 0deg, #111a1e94 0deg .7deg, transparent .7deg 6deg), conic-gradient(from 0deg, var(--product-accent) calc(var(--progress) * 360deg), color-mix(in srgb, var(--ink), transparent 89%) 0);box-shadow:inset 0 0 0 4px #ffffff61,inset 0 0 0 17px #141c200e,0 34px 74px #141c2033}.timer-dial:before{border:1px solid color-mix(in srgb, var(--product-accent), transparent 66%);inset:8%;box-shadow:inset 0 0 0 5px #ffffff24}.timer-hand{z-index:2;background:linear-gradient(180deg, var(--product-accent), color-mix(in srgb, var(--product-accent), black 30%));width:2px;height:39%;box-shadow:0 1px 4px color-mix(in srgb, var(--product-accent), transparent 54%);transform:rotate(calc(var(--progress) * 360deg));transform-origin:50% 100%;border-radius:999px;transition:transform .9s linear;display:block;position:absolute;top:11%;left:calc(50% - 1px)}.timer-hand:after{aspect-ratio:1;background:var(--product-accent);content:"";border:2px solid #ffffffad;border-radius:50%;width:14px;position:absolute;bottom:-7px;left:50%;transform:translate(-50%);box-shadow:0 4px 10px #141c2038}.timer-dial span{z-index:3;letter-spacing:-.06em;text-shadow:0 2px #ffffff80;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.timer-dial{container-type:inline-size}.timer-dial>span{inset-block-start:56%;background:color-mix(in srgb, var(--paper), white 18%);box-shadow:inset 0 0 0 1px var(--line), 0 6px 16px #141c201f;white-space:nowrap;direction:ltr;border-radius:12px;padding:.12em .28em;font-size:min(clamp(2rem,7vw,5.3rem),11cqi);position:absolute;left:50%;transform:translate(-50%,-50%)}.timer-dial>small{inset-block-end:17%}html[data-theme=dark] .timer-dial>span{background:color-mix(in srgb, var(--paper), black 12%);text-shadow:none}@media (prefers-reduced-motion:reduce){.timer-hand{transition-duration:.01ms}}html .table-page .timer-scene{min-height:0;box-shadow:none;color:var(--ink);background:0 0;border:0;padding:0}html .table-page .timer-dial{width:clamp(200px,min(30vw,100svh - 480px),400px);box-shadow:inset 0 0 0 4px #ffffff61,inset 0 0 0 17px #141c200e,0 8px #0003,0 30px 60px #0006}@media (max-width:960px){html .table-page .timer-dial{width:clamp(200px,64vw,340px)}}html .table-page .timer-dial{--product-accent:#d0643c;background:radial-gradient(circle at center, #fffaf4 0 49%, transparent 49.5%), repeating-conic-gradient(from 0deg, #4a1a0b52 0deg .7deg, transparent .7deg 6deg), conic-gradient(from 0deg, #f3a679 calc(var(--progress) * 360deg), #fff4e829 0);border-color:#f4e2d3}html .table-page .timer-scene[data-phase=break] .timer-dial{--product-accent:#3f8f87;background:radial-gradient(circle at center, #fffaf4 0 49%, transparent 49.5%), repeating-conic-gradient(from 0deg, #4a1a0b52 0deg .7deg, transparent .7deg 6deg), conic-gradient(from 0deg, #8fd0c6 calc(var(--progress) * 360deg), #fff4e829 0)}html .table-page .timer-dial:before{border-color:#4a1a0b24}html .table-page .timer-dial>span{color:#3a160a;inset-block-start:64%}html .table-page .timer-dial>small{color:#3a160ab3;letter-spacing:0;text-transform:none;font-size:.82rem;font-weight:650;inset-block-end:21%}@keyframes timer-complete{0%{transform:scale(.985)}55%{transform:scale(1.018)}to{transform:scale(1)}}