.focus{min-height:100dvh;padding:clamp(14px,2vw,24px);padding-top:calc(clamp(14px,2vw,24px) + env(safe-area-inset-top,0px));padding-bottom:calc(clamp(14px,2vw,24px) + env(safe-area-inset-bottom,0px));color:var(--phase-ink);background:linear-gradient(150deg, var(--from) 0%, var(--to) 100%);grid-template-rows:auto 1fr;gap:clamp(10px,1.6vh,24px);transition:background 1.6s,color 1.2s;display:grid}.focus--motion{background-size:180% 180%;animation:46s ease-in-out infinite drift}@keyframes drift{0%,to{background-position:0%}50%{background-position:100%}}.focus__bar{justify-content:space-between;align-items:center;gap:16px;transition:opacity .6s;display:flex}.focus .wordmark{color:inherit;margin:0}.focus .wordmark:hover{color:var(--phase-accent)}.focus__nav{align-items:center;gap:8px;display:flex}.focus__nav a{color:inherit;opacity:.72;border-radius:8px;padding:9px 12px;font-size:14.5px;font-weight:500;text-decoration:none}.focus__nav a:hover{opacity:1;background:color-mix(in srgb, var(--phase-ink) 9%, transparent)}.focus__iconbtn{border:1px solid color-mix(in srgb, var(--phase-ink) 22%, transparent);color:inherit;cursor:pointer;background:0 0;border-radius:8px;padding:9px 14px;font-size:14.5px;font-weight:500}.focus__iconbtn:hover{background:color-mix(in srgb, var(--phase-ink) 9%, transparent)}.focus__middle{flex-direction:column;justify-content:center;align-items:center;gap:clamp(14px,2.4vh,30px);min-height:0;display:flex}.focus__stage{flex-direction:column;justify-content:center;align-items:center;gap:clamp(12px,2vh,24px);min-height:0;display:flex}.dial{--dial:min(54vh, 66vw, 540px);width:var(--dial);aspect-ratio:1;position:relative}.dial svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}.dial__track{fill:none;stroke:color-mix(in srgb, var(--phase-ink) 14%, transparent);stroke-width:2.6px}.dial__progress{fill:none;stroke:var(--phase-accent);stroke-width:2.6px;stroke-linecap:round;transition:stroke-dashoffset .28s linear,stroke 1.2s}.dial__face{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:9%;display:flex;position:absolute;inset:0}.dial__phase{letter-spacing:.08em;text-transform:uppercase;color:var(--phase-accent);margin:0;font-size:clamp(13px,1.5vh,16px);font-weight:600}.dial__time{letter-spacing:-.03em;font-weight:500;line-height:1;font-size:min(calc(var(--dial) * .7 / var(--cells,2.76)), calc(var(--dial) * .28));justify-content:center;align-items:baseline;margin:0;display:flex}.dial__digit{text-align:center;width:.62em;display:inline-block}.dial__colon{text-align:center;width:.28em;display:inline-block}.dial__dots{gap:7px;margin:8px 0 0;padding:0;display:flex}.dial__dots span{background:color-mix(in srgb, var(--phase-ink) 22%, transparent);border-radius:50%;width:7px;height:7px}.dial__dots span.on{background:var(--phase-accent)}.dial__dots span.now{background:var(--phase-accent);transform:scale(1.4)}.focus__task{text-align:center;width:min(440px,90vw);color:inherit;border:0;border-bottom:1px solid color-mix(in srgb, var(--phase-ink) 18%, transparent);background:0 0;padding:9px 6px;font-family:inherit;font-size:16.5px}.focus__task::placeholder{color:color-mix(in srgb, var(--phase-ink) 45%, transparent)}.focus__task:focus{border-bottom-color:var(--phase-accent);outline:none}.focus__done{text-align:center;flex-direction:column;align-items:center;gap:14px;display:flex}.focus__done p{opacity:.85;margin:0;font-size:18px}.focus__controls{flex-direction:column;align-items:center;gap:11px;transition:opacity .6s;display:flex}.focus__transport{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.focus .btn{cursor:pointer;min-height:46px;color:inherit;border:1px solid color-mix(in srgb, var(--phase-ink) 22%, transparent);background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:0 20px;font-size:15px;font-weight:500;transition:background .15s,border-color .15s;display:inline-flex}.focus .btn:hover{background:color-mix(in srgb, var(--phase-ink) 10%, transparent)}.focus .btn.primary{background:var(--phase-ink);color:var(--from);border-color:var(--phase-ink);min-width:132px;font-weight:600}.focus .btn.primary:hover{background:var(--phase-accent);border-color:var(--phase-accent)}.focus__presets{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.chip{color:inherit;cursor:pointer;font:inherit;border:1px solid color-mix(in srgb, var(--phase-ink) 20%, transparent);opacity:.75;background:0 0;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500}.chip:hover{opacity:1}.chip--on{opacity:1;background:color-mix(in srgb, var(--phase-ink) 12%, transparent);border-color:color-mix(in srgb, var(--phase-ink) 42%, transparent);font-weight:600}.sound{align-items:center;display:flex;position:relative}.sound>.chip{border-radius:8px;min-height:46px;padding:0 16px;font-size:15px}.sound__pop{z-index:20;background:var(--panel);width:min(280px,88vw);color:var(--ink);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap;gap:6px;padding:12px;display:flex;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);box-shadow:0 14px 34px #0000002e}.sound__opt{background:var(--field);color:var(--ink);cursor:pointer;border:1px solid var(--line);font:inherit;border-radius:8px;flex:calc(50% - 3px);padding:9px 8px;font-size:13.5px;font-weight:500}.sound__opt:hover{border-color:var(--ink)}.sound__opt--on{background:var(--solid);color:var(--on-solid);border-color:var(--solid);font-weight:600}.sound__vol{width:100%;color:var(--muted);align-items:center;gap:10px;margin-top:4px;font-size:13px;display:flex}.sound__vol input{accent-color:var(--tomato);flex:1}.sound__hint{color:var(--muted);width:100%;margin:2px 0 0;font-size:12.5px;line-height:1.45}.focus .tip{color:inherit;opacity:.62;border-bottom:1px solid #0000;font-size:14px;text-decoration:none}.focus .tip:hover{opacity:1;border-bottom-color:currentColor}.focus .tip--moment{opacity:.85;color:var(--phase-accent);font-weight:600}.focus .tip--moment:hover{opacity:1}.sheet .tip{color:var(--muted)}.sheet .tip:hover{color:var(--tomato);border-bottom-color:var(--tomato)}.focus__keys{opacity:.5;text-align:center;margin:0;font-size:12.5px}.focus__keys kbd{font:inherit;border:1px solid color-mix(in srgb, var(--phase-ink) 22%, transparent);border-radius:4px;padding:1px 5px;font-weight:600}.focus__idletip{left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:5;opacity:.34;transition:opacity .8s;position:fixed;transform:translate(-50%)}.focus__idletip:hover,.focus__idletip--nudge{opacity:1}.nudge{width:22px;height:13px;color:var(--phase-accent);margin:0 auto 2px;animation:.32s ease-out both nudge-in,1.1s ease-in-out .32s 2 nudge-bob,.5s ease-in 2.7s both nudge-out;display:block}@keyframes nudge-in{0%{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}@keyframes nudge-bob{0%,to{transform:none}50%{transform:translateY(4px)}}@keyframes nudge-out{to{opacity:0}}.focus--idle .focus__idletip{opacity:.6}.focus .focus__idletip .tip{opacity:1;font-size:13px}@media (max-height:620px){.focus__idletip{display:none}}.focus--idle .focus__bar,.focus--idle .focus__controls{opacity:0;pointer-events:none}.focus--idle .focus__task{opacity:.25}.sheet{z-index:40;background:var(--panel);width:min(400px,92vw);color:var(--ink);border-left:1px solid var(--line);padding:20px 22px calc(28px + env(safe-area-inset-bottom,0px));transition:transform .28s;position:fixed;top:0;bottom:0;right:0;overflow:auto;transform:translate(100%);box-shadow:-18px 0 44px #00000024}.sheet--open{transform:translate(0)}.sheet__head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;display:flex}.sheet__head h2{font:500 22px/1.2 var(--ui);letter-spacing:-.012em;margin:0}.sheet__head .focus__iconbtn{border-color:var(--line);color:var(--ink)}.sheet__head .focus__iconbtn:hover{background:var(--field)}.sheet section{border-bottom:1px solid var(--line);padding:18px 0}.sheet section:last-child{border-bottom:0}.sheet h3{font:600 14px/1.2 var(--ui);letter-spacing:.01em;margin:0 0 12px}.sheet select{border:1px solid var(--line);background:var(--field);width:100%;height:42px;color:var(--ink);font:inherit;border-radius:8px;padding:0 11px}.sheet .hint{color:var(--muted);margin:10px 0 0;font-size:13px;line-height:1.5}.sheet .btn{border:1px solid var(--line);background:var(--field);min-height:44px;color:var(--ink);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:0 18px;font-weight:500;text-decoration:none;display:inline-flex}.sheet .btn:hover{border-color:var(--ink)}.slider-row{color:var(--muted);align-items:center;gap:12px;margin-top:12px;font-size:14px;display:flex}.slider-row input[type=range]{accent-color:var(--tomato);flex:1}.swatches{grid-template-columns:1fr 1fr;gap:8px;display:grid}.swatch{border:1px solid var(--line);cursor:pointer;background:var(--panel);text-align:left;border-radius:10px;flex-direction:column;gap:7px;padding:7px;display:flex}.swatch i{border:1px solid var(--line);border-radius:6px;height:46px;display:block}.swatch span{color:var(--ink);padding:0 2px 2px;font-size:12.5px;font-weight:600}.swatch:hover{border-color:var(--ink)}.swatch--on{border-color:var(--tomato);box-shadow:0 0 0 2px var(--tomato)}.sheet__scrim{z-index:39;cursor:default;background:#0a0e0c47;border:0;padding:0;position:fixed;inset:0}.focus__nav .narrow{display:none}@media (max-width:640px){.focus__nav .wide{display:none}.focus__nav .narrow{display:inline}.focus__nav a{padding:9px 10px;font-size:14px}.focus__iconbtn{padding:9px 11px;font-size:14px}.dial{width:min(52vh,86vw)}}@media (prefers-reduced-motion:reduce){.focus,.focus--motion{transition:none!important;animation:none!important}.nudge{opacity:1;animation:none!important}.dial__progress,.sheet{transition:none!important}}
