:root{--blue: #1E5FBF;--navy: #0E2A4D;--sky: #EAF1FB;--amber-btn: #C2410C;--amber-btn-hover: #9A3412;--charcoal: #1A2230;--slate: #5A6675;--border: #DDE3EC;--offwhite: #F7F9FC;--shadow-lg: 0 12px 40px rgba(14, 42, 77, .12)}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--charcoal);background:var(--offwhite);line-height:1.5;font-size:16px;-webkit-font-smoothing:antialiased;min-height:100dvh;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}.shell{width:100%;max-width:460px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.brandbar{display:flex;justify-content:center;padding:6px 0 14px}.brand{font-family:Poppins,sans-serif;font-weight:700;font-size:22px;color:var(--navy);letter-spacing:-.01em}.brand:after{content:".";color:#ff7a1a}.pomo{--p-work: #1E5FBF;--p-rest: #2FA36B;--p-prep: #C2410C;--accent: var(--p-work);--num: "Manrope", "Inter", system-ui, sans-serif}.pomo-app{width:100%;max-width:460px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px 22px 24px;box-shadow:var(--shadow-lg)}.pomo button{font-family:inherit}.pomo button:focus-visible,.pomo input:focus-visible,.pomo select:focus-visible{outline:3px solid rgba(30,95,191,.55);outline-offset:2px}.pomo .view{padding:0}.pomo .view[hidden]{display:none}.pomo .tabs{display:flex;gap:4px;background:var(--offwhite);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:22px}.pomo .tab{flex:1;border:0;background:transparent;color:var(--slate);font:500 15px Inter,sans-serif;padding:10px 12px;border-radius:8px;cursor:pointer}.pomo .tab[aria-selected=true]{background:#fff;color:var(--navy);box-shadow:0 1px 3px #0e2a4d24}.pomo .phase{display:flex;justify-content:center;margin:0 0 14px}.pomo .pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent);padding:6px 14px;border-radius:999px}.pomo .pill:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}.pomo .ring-wrap{position:relative;width:min(300px,100%);aspect-ratio:1;margin:0 auto}.pomo .ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}.pomo .ring-bg{fill:none;stroke:var(--border);stroke-width:7}.pomo .ring-fg{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .4s linear,stroke .3s}.pomo .readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.pomo .time{font:700 clamp(54px,18vw,72px) var(--num);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:-.02em;line-height:1;color:var(--navy)}.pomo .sub{font-size:15px;color:var(--slate)}.pomo .next{font-size:13px;color:var(--slate)}.pomo .next b{color:var(--navy);font-weight:600}.pomo .session{margin:22px 0 0}.pomo .bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden}.pomo .bar>i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .4s linear,background .3s}.pomo .session-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--slate);margin-top:8px;font-variant-numeric:tabular-nums}.pomo .dots{display:flex;justify-content:center;gap:7px;margin:14px 0 0;flex-wrap:wrap;min-height:12px}.pomo .dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--border)}.pomo .dot.done{background:var(--p-work);border-color:var(--p-work)}.pomo .dot.now{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 25%,transparent)}.pomo .controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:22px}.pomo .ico{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:var(--slate);font-size:12px;cursor:pointer;padding:4px;border-radius:12px;min-width:56px}.pomo .ico span.c{width:52px;height:52px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:var(--navy);background:#fff;transition:background .15s}.pomo .ico:hover span.c{background:var(--sky)}.pomo .play{width:84px;height:84px;border-radius:50%;border:0;background:var(--amber-btn);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px #c2410c4d;transition:transform .1s,background .15s}.pomo .play:hover{background:var(--amber-btn-hover)}.pomo .play:active,.pomo .ico:active span.c{transform:scale(.95)}.pomo .play svg{width:34px;height:34px}.pomo .note{text-align:center;font-size:14px;color:var(--slate);margin:18px 0 0;min-height:1.4em}.pomo .group{border-top:1px solid var(--border);padding:18px 0}.pomo .group:first-of-type{border-top:0;padding-top:0}.pomo h2{font:600 12px Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);margin:0 0 12px}.pomo .presets{display:flex;gap:8px;flex-wrap:wrap}.pomo .chip{border:1px solid var(--border);background:#fff;color:var(--navy);font:500 13px Inter,sans-serif;padding:8px 12px;border-radius:999px;cursor:pointer}.pomo .chip:hover{background:var(--sky)}.pomo .chip small{color:var(--slate);font-weight:400;margin-left:4px}.pomo .chip[aria-pressed=true]{border-color:var(--blue);background:var(--sky)}.pomo .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;min-height:52px}.pomo .row label{display:block;margin:0;font-size:15px;font-weight:600;color:var(--navy)}.pomo .row small{display:block;color:var(--slate);font-size:12px;margin-top:2px;font-weight:400;max-width:24ch}.pomo .dotc{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}.pomo .stepper{display:flex;align-items:center;gap:6px;flex:none}.pomo .stepper button{width:40px;height:40px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--navy);font-size:20px;line-height:1;cursor:pointer}.pomo .stepper button:active{background:var(--sky)}.pomo .stepper input{width:78px;height:40px;padding:0 4px;text-align:center;font:700 17px var(--num);font-variant-numeric:tabular-nums;border-radius:8px;border:1px solid var(--border);background:var(--offwhite);color:var(--navy)}.pomo .stepper input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1e5fbf26;outline:none}.pomo .stepper input.bad{border-color:var(--amber-btn)}.pomo select{width:auto;font:400 15px Inter,sans-serif;height:40px;padding:0 10px;border-radius:8px;border:1px solid var(--border);background:var(--offwhite);color:var(--charcoal)}.pomo input[type=range]{width:150px;padding:0;border:0;background:none;accent-color:var(--blue)}.pomo .switch{position:relative;width:48px;height:28px;flex:none}.pomo .switch input{position:absolute;inset:0;opacity:0;margin:0;padding:0;cursor:pointer;width:100%;height:100%;z-index:1}.pomo .switch span{position:absolute;inset:0;background:#c3cddb;border-radius:14px;transition:background .2s}.pomo .switch span:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px #00000040}.pomo .switch input:checked+span{background:var(--p-rest)}.pomo .switch input:checked+span:after{transform:translate(20px)}.pomo .switch input:focus-visible+span{outline:3px solid rgba(30,95,191,.55);outline-offset:2px}.pomo .hint{font-size:12px;color:var(--slate);margin:2px 0 0}.pomo .summary{font-size:14px;color:var(--navy);background:var(--sky);border-radius:8px;padding:12px 14px;margin-top:10px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.pomo .summary b{font-variant-numeric:tabular-nums}.pomo .link{background:none;border:0;color:var(--blue);font:500 14px Inter,sans-serif;text-decoration:underline;cursor:pointer;padding:6px 0;margin-right:18px}.pomo .status{font-size:12px;color:var(--slate);margin-top:2px}@media (max-width: 380px){.pomo .row small{max-width:18ch}.pomo .controls{gap:12px}.pomo-app{padding:16px 16px 22px}}@media (prefers-reduced-motion: reduce){.pomo *{transition:none!important}}@media (max-width: 520px),(pointer: coarse){html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0;min-height:0;background:#fff}.pomo{height:100%}.shell{height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:max(12px,env(safe-area-inset-bottom))}.brandbar{flex:none;padding:2px 0 8px}.pomo .pomo-app{flex:1;min-height:0;max-width:none;display:flex;flex-direction:column;border:0;box-shadow:none;border-radius:0;padding:0;background:transparent}.pomo .tabs{flex:none;margin-bottom:10px}.pomo #view-timer:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column}.pomo .phase{flex:none;margin-bottom:6px}.pomo .ring-area{flex:1;min-height:0;display:grid;place-items:center;container-type:size}.pomo .ring-wrap{width:min(100cqw,100cqh,340px);margin:0;container-type:inline-size}.pomo .time{font-size:clamp(36px,22cqw,76px)}.pomo .session{flex:none;margin-top:10px}.pomo .dots{margin-top:10px}.pomo .controls{flex:none;margin-top:12px}.pomo .note{flex:none;margin-top:8px;min-height:1.2em}.pomo #view-settings:not([hidden]){flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:12px}}@media (max-width: 520px) and (max-height: 640px){.pomo .ico span.c{width:44px;height:44px}.pomo .play{width:72px;height:72px}}