*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{--navy-900: #070d20;--navy-800: #0b1530;--navy-700: #0f1a3e;--navy-600: #142150;--off-white: #eef2ee;--off-white-dim: rgba(238, 242, 238, .66);--off-white-quiet: rgba(238, 242, 238, .42);--rule: rgba(238, 242, 238, .08);--mint: #78e6c2;--mint-soft: rgba(120, 230, 194, .18);--mint-glow: rgba(120, 230, 194, .45);--shadow-soft: 0 30px 80px rgba(0, 0, 0, .45);--radius-lg: 18px;--radius-md: 12px;--radius-sm: 8px;--ease-soft: cubic-bezier(.22, 1, .36, 1);font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,SF Pro Text,Roboto,Helvetica Neue,system-ui,sans-serif;font-weight:500;color-scheme:dark;letter-spacing:.01em}body{min-height:100dvh;background:var(--navy-800);color:var(--off-white);font-feature-settings:"tnum" 1,"cv11" 1}#app{min-height:100dvh;display:flex;flex-direction:column}main.home{flex:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:560px;margin-inline:auto;padding:clamp(20px,4vw,36px) clamp(20px,5vw,40px) 40px;gap:clamp(28px,5vw,44px);position:relative;transition:background-color .6s var(--ease-soft)}main.home:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at top,#78e6c20d,#78e6c200 55%);transition:opacity .8s var(--ease-soft);opacity:1;z-index:-1}main.home--break:before{background:radial-gradient(ellipse at top,#8cafff0f,#8cafff00 55%)}main.home.is-latching{animation:latch-blink .9s var(--ease-soft)}main.home.is-celebrating:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,#78e6c238,#78e6c200 60%);animation:celebrate-glow 1.8s var(--ease-soft) forwards;z-index:0}@keyframes latch-blink{0%{background-color:var(--navy-800)}18%{background-color:#182a55}32%{background-color:var(--navy-800)}46%{background-color:#1f3470}to{background-color:var(--navy-800)}}@keyframes celebrate-glow{0%{opacity:0}35%{opacity:1}to{opacity:0}}.topbar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-size:1rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--off-white-dim);display:inline-flex;align-items:center;gap:12px}.brand__dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint-glow)}.icon-button{appearance:none;background:transparent;border:1px solid var(--rule);color:var(--off-white-dim);width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s var(--ease-soft),border-color .2s var(--ease-soft),background-color .2s var(--ease-soft),transform .2s var(--ease-soft)}.icon-button:hover{color:var(--off-white);border-color:#eef2ee38}.icon-button:active{transform:scale(.96)}.icon-button:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.timer-section{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,5vw,40px);width:100%}.timer-ring{position:relative;width:min(80vw,340px);aspect-ratio:1 / 1;display:grid;place-items:center}.timer-ring__svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 30px rgba(120,230,194,0));transition:filter .5s var(--ease-soft)}.timer-ring[data-mode=focus] .timer-ring__svg{filter:drop-shadow(0 0 20px rgba(120,230,194,.18))}.timer-ring__track{stroke:#eef2ee14}.timer-ring__progress{stroke:var(--mint);transition:stroke-dashoffset .6s var(--ease-soft),stroke .4s var(--ease-soft)}.timer-ring[data-mode=shortBreak] .timer-ring__progress,.timer-ring[data-mode=longBreak] .timer-ring__progress{stroke:#a0beffe6}.timer-ring.is-pulsing .timer-ring__progress{animation:ring-pulse 1.8s var(--ease-soft) 2}.timer-ring.is-celebrating .timer-ring__svg{animation:ring-celebrate 1.6s var(--ease-soft)}@keyframes ring-pulse{0%,to{opacity:1;filter:drop-shadow(0 0 0px var(--mint-glow))}50%{opacity:.55}}@keyframes ring-celebrate{0%{filter:drop-shadow(0 0 0px var(--mint-glow))}40%{filter:drop-shadow(0 0 36px var(--mint-glow))}to{filter:drop-shadow(0 0 0px var(--mint-glow))}}.timer-ring__inner{display:flex;flex-direction:column;align-items:center;gap:10px;z-index:1}.timer-ring__phase{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--off-white-quiet)}.timer-ring__time{font-size:clamp(3.4rem,12vw,5.2rem);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--off-white);line-height:1}.controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.btn{appearance:none;border:none;cursor:pointer;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:14px 28px;font-size:.85rem;min-width:120px;min-height:48px;transition:background-color .22s var(--ease-soft),color .22s var(--ease-soft),transform .2s var(--ease-soft),box-shadow .22s var(--ease-soft),border-color .22s var(--ease-soft)}.btn:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.btn:active:not(:disabled){transform:scale(.97)}.btn--primary{background:var(--mint);color:var(--navy-900);box-shadow:0 8px 30px #78e6c238}.btn--primary:hover:not(:disabled){box-shadow:0 12px 40px #78e6c252}.btn--primary.is-running{background:transparent;color:var(--mint);border:1px solid var(--mint);box-shadow:none}.btn--ghost{background:transparent;color:var(--off-white-dim);border:1px solid var(--rule);min-width:96px}.btn--ghost:hover:not(:disabled){color:var(--off-white);border-color:#eef2ee38}.btn:disabled{opacity:.4;cursor:not-allowed}.presets{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.preset{appearance:none;background:transparent;color:var(--off-white-dim);border:1px solid var(--rule);border-radius:var(--radius-md);padding:10px 18px;font-size:.9rem;font-weight:500;min-width:64px;min-height:40px;cursor:pointer;transition:color .22s var(--ease-soft),border-color .22s var(--ease-soft),background-color .22s var(--ease-soft),transform .2s var(--ease-soft)}.preset__unit{font-size:.72rem;margin-left:2px;color:var(--off-white-quiet)}.preset:hover:not(:disabled){color:var(--off-white);border-color:#eef2ee38}.preset.is-active{color:var(--mint);border-color:var(--mint);background:var(--mint-soft)}.preset:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.preset:disabled{opacity:.45;cursor:not-allowed}.stats{width:100%;display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--rule);padding-top:24px}.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}.stats__cell{display:flex;flex-direction:column;gap:6px;padding:12px 4px}.stats__cell dt{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--off-white-quiet)}.stats__cell dd{margin:0;font-size:1.4rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--off-white)}.stats__unit{font-size:.85rem;color:var(--off-white-quiet);margin-left:4px}.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.history__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-md);background:#eef2ee06;font-size:.88rem}.history__dot{width:8px;height:8px;border-radius:50%;background:#eef2ee4d;flex-shrink:0}.history__item[data-mode=focus] .history__dot{background:var(--mint)}.history__item[data-mode=longBreak] .history__dot{background:#a0beffe6}.history__label{color:var(--off-white);flex:1}.history__meta{color:var(--off-white-quiet);font-variant-numeric:tabular-nums;font-size:.82rem}.drawer-backdrop{position:fixed;inset:0;background:#070d208c;opacity:0;pointer-events:none;transition:opacity .28s var(--ease-soft);z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.drawer-backdrop.is-open{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);background:var(--navy-700);box-shadow:var(--shadow-soft);transform:translate(100%);transition:transform .34s var(--ease-soft);z-index:11;display:flex;flex-direction:column;border-left:1px solid var(--rule)}.drawer.is-open{transform:translate(0)}.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px;border-bottom:1px solid var(--rule)}.drawer__title{font-size:.92rem;letter-spacing:.22em;text-transform:uppercase;color:var(--off-white-dim);font-weight:500}.drawer__close{appearance:none;background:transparent;border:none;color:var(--off-white-dim);font-size:1.8rem;width:44px;height:44px;cursor:pointer;border-radius:50%;line-height:1;transition:color .2s var(--ease-soft),background-color .2s var(--ease-soft)}.drawer__close:hover{color:var(--off-white);background:#eef2ee0a}.drawer__close:focus-visible{outline:2px solid var(--mint);outline-offset:2px}.drawer__body{padding:24px;display:flex;flex-direction:column;gap:20px;overflow-y:auto}.field{display:flex;flex-direction:column;gap:8px}.field label{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--off-white-quiet)}.field__row{display:flex;align-items:center;gap:10px}.field input[type=number]{appearance:none;background:#eef2ee0a;border:1px solid var(--rule);color:var(--off-white);border-radius:var(--radius-md);padding:12px 14px;font-size:1rem;width:96px;font-variant-numeric:tabular-nums;transition:border-color .2s var(--ease-soft),background-color .2s var(--ease-soft)}.field input[type=number]:focus{outline:none;border-color:var(--mint);background:#78e6c20a}.field__suffix{color:var(--off-white-quiet);font-size:.85rem;letter-spacing:.06em}.field--toggle{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}.toggle{appearance:none;border:1px solid var(--rule);background:#eef2ee0a;border-radius:999px;width:64px;height:34px;position:relative;cursor:pointer;display:inline-flex;align-items:center;padding:0 4px;transition:background-color .22s var(--ease-soft),border-color .22s var(--ease-soft)}.toggle__thumb{width:24px;height:24px;border-radius:50%;background:var(--off-white-dim);transition:transform .24s var(--ease-soft),background-color .24s var(--ease-soft)}.toggle.is-on{background:var(--mint-soft);border-color:var(--mint)}.toggle.is-on .toggle__thumb{background:var(--mint);transform:translate(30px)}.toggle:focus-visible{outline:2px solid var(--mint);outline-offset:3px}main.notfound{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px;text-align:center}main.notfound h1{font-size:4rem;font-weight:500;color:var(--mint)}.notfound__link{color:var(--off-white-dim);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;transition:color .2s var(--ease-soft),border-color .2s var(--ease-soft)}.notfound__link:hover{color:var(--off-white);border-color:var(--mint)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}