:root{color:#e8ebe5;font-synthesis:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#111715;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}*{box-sizing:border-box}body{background:radial-gradient(at 50% 38%,#1c292220,#0000 60%);min-width:0;margin:0}button,input{font:inherit}button{cursor:pointer}button,input{outline:none}button:focus-visible,input:focus-visible{outline-offset:4px;outline:2px solid #c3ddad}button:disabled{cursor:default}.app-shell{flex-direction:column;max-width:1440px;min-height:100svh;margin:auto;padding:32px 56px 24px;display:flex}.brand{letter-spacing:-.8px;align-items:center;gap:11px;font-size:22px;font-weight:600;display:flex}.brand-mark{color:#a8c79d;width:33px;height:33px}.brand-mark svg{width:100%;height:100%}.brand-light{color:#a5b1a6;font-weight:350}.brand-divider{background:#354037;width:1px;height:18px;margin:0 9px}.brand-caption{letter-spacing:1.8px;color:#8c9b91;font-size:9px;font-weight:500}main{width:100%;max-width:510px;margin:49px auto 44px}.intro{text-align:center;margin-bottom:29px}.eyebrow{letter-spacing:2.3px;color:#a8bca5;justify-content:center;align-items:center;gap:8px;font-size:9px;display:flex}.eyebrow>span{background:#a9c09b;border-radius:50%;width:4px;height:4px}h1{letter-spacing:-1.3px;margin:13px 0 10px;font-size:36px;font-weight:450;line-height:1.3}.intro p{color:#99a39b;margin:0;font-size:13px}.timer-card{background:linear-gradient(140deg,#202923,#1b231e 60%,#1c2420);border:1px solid #344036;border-radius:23px;padding:24px 30px 28px;box-shadow:0 22px 65px #0002,inset 0 1px #ffffff03}.card-top{justify-content:space-between;align-items:center;gap:8px;display:flex}.card-label{letter-spacing:1.8px;color:#b0bbb1;font-size:9px}.state-badge{color:#b9c7b6;background:#2a352c;border:1px solid #364338;border-radius:20px;align-items:center;gap:6px;padding:6px 9px;font-size:10px;display:flex}.state-badge i,.footer-right i{background:#a9c298;border-radius:50%;width:4px;height:4px;display:inline-block}.dial{width:300px;height:300px;margin:24px auto 0;position:relative}.dial-ring{width:100%;height:100%;position:absolute;inset:0;overflow:visible;transform:rotate(0)}.ring-track,.ring-progress{fill:none;stroke-width:1.2px;stroke:#3d4c40}.ring-progress{stroke:#bfd2ac;stroke-width:2px;transform-origin:50%;transition:stroke-dashoffset .15s linear;transform:rotate(-90deg)}.ring-dot{fill:#b7cba3}.dial-content{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.dial-caption{color:#a2b49c;letter-spacing:2px;margin:9px 0 21px;font-size:8px}.digits{letter-spacing:-2px;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:49px;font-weight:300;line-height:1.15}.digits b{color:#778776;margin:0 3px;font-weight:200}.digits.long{letter-spacing:-1px;font-size:26px}.dial-bottom{color:#8fa087;align-items:center;gap:12px;margin-top:23px;display:flex}.small-line{background:#3b483c;width:23px;height:1px}.little-leaf{font-size:21px;line-height:18px}.moment-text{text-align:center;color:#aebbaa;min-height:18px;margin:12px 0 29px;font-size:12px}.duration-heading{border-top:1px solid #354035;justify-content:space-between;gap:8px;margin-bottom:14px;padding-top:24px;display:flex}.duration-heading>span:first-child{letter-spacing:1.5px;color:#b0bdad;font-size:9px}.duration-heading>span:last-child{color:#8f9c91;font-size:10px}.duration-inputs{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.input-group label{color:#a5b0a5;margin:0 0 8px 1px;font-size:10px;display:block}.input-box{align-items:center;display:flex;position:relative}.input-box input{color:#e4eadf;font-variant-numeric:tabular-nums;background:#151e18;border:1px solid #3b483c;border-radius:9px;width:100%;height:54px;padding:0 35px 0 15px;font-size:21px;font-weight:350}.input-box input::placeholder{color:#879581}.input-box>span{color:#90a08c;pointer-events:none;font-size:10px;position:absolute;right:13px}.input-box input:disabled{opacity:.55}.input-box input[aria-invalid=true]{border-color:#d9a491}.presets{align-items:center;gap:7px;margin-top:14px;display:flex}.presets>span{color:#8f9c91;margin-right:auto;font-size:10px}.presets button{color:#b7c3af;background:#27322a;border:1px solid #3c493d;border-radius:6px;min-height:30px;padding:6px 9px;font-size:10px}.presets button:disabled{opacity:.4}.actions{gap:10px;margin-top:25px;display:flex}.actions button{border-radius:9px;justify-content:center;align-items:center;gap:10px;min-height:48px;font-size:12px;font-weight:550;transition:background .15s,transform .15s;display:flex}.primary{color:#263224;background:#bfd2ab;border:1px solid #c5d7b2;flex:1;box-shadow:0 2px 6px #0002}.secondary{color:#b8c2b3;background:0 0;border:1px solid #465143;padding:0 23px}.primary:hover{background:#cfe1bc}.secondary:hover,.presets button:not(:disabled):hover{background:#334035}.actions button:active{transform:translateY(1px)}.quiet-note{color:#8a978b;justify-content:center;align-items:center;gap:8px;margin-top:23px;font-size:10px;display:flex}.quiet-note svg{color:#9caa94}.error{color:#efbca9;margin:12px 0;font-size:12px;line-height:1.5}.completed .ring-progress{stroke:#bbd8b2}.completed .moment-text{color:#d0e3c5}footer{color:#879489;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;font-size:10px;display:flex}.footer-right{letter-spacing:1.5px;align-items:center;gap:8px;font-size:8px;display:flex}@media (height>=1000px){main{margin-top:65px;margin-bottom:65px}.dial{width:320px;height:320px}.timer-card{padding-top:28px;padding-bottom:32px}}@media (width<=600px){.app-shell{padding:22px 20px}.brand-caption{letter-spacing:1.1px;font-size:7px}.brand-divider{margin:0 3px}.brand{gap:8px;font-size:20px}main{margin:36px auto 32px}h1{font-size:31px}.timer-card{padding:20px}.dial{width:270px;max-width:100%;height:270px;margin-top:22px}.digits{font-size:45px}.duration-inputs{gap:9px}.input-box input{padding-left:12px}.duration-heading>span:last-child{font-size:9px}.secondary{padding:0 16px}.quiet-note,footer{font-size:9px}.footer-right{letter-spacing:1px;font-size:7px}}@media (width<=370px){.app-shell{padding:20px 12px}.brand-caption,.brand-divider{display:none}.timer-card{padding:17px}.presets{gap:5px}.presets button{padding:6px 7px}.digits{font-size:42px}.state-badge{font-size:9px}.duration-heading>span:last-child{display:none}.actions{gap:7px}.secondary{padding:0 12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}@media (pointer:coarse){.presets button{min-width:48px;min-height:44px}}
