@font-face{font-family:"DK Cool Crayon";src:url("/assets/fonts/DK%20Cool%20Crayon.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{--pomo-bg:#000;--pomo-fg:#fff;--pomo-muted:rgba(255,255,255,.58);--pomo-faint:rgba(255,255,255,.16);--pomo-mono:"IBM Plex Mono",ui-monospace,monospace;--pomo-serif:"Times New Roman",Times,serif;--pomo-crayon:"DK Cool Crayon","Comic Sans MS",cursive}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.pomo-page{margin:0;min-height:100vh;background:var(--pomo-bg);color:var(--pomo-fg);font-family:var(--pomo-serif);overflow-x:hidden}
.pomo-page [hidden]{display:none!important}
.pomo-page .site-header{display:none}
.pomo-home{position:fixed;z-index:100;top:22px;right:24px;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--pomo-faint);background:#000;transition:transform .35s cubic-bezier(.16,1,.3,1),background .2s}
.pomo-home img{width:22px;height:22px;object-fit:contain;filter:brightness(0) invert(1)}
.pomo-home:hover{opacity:1;transform:rotate(-8deg) scale(1.08);background:#fff}.pomo-home:hover img{filter:none}
.pomo-stage{min-height:100svh;display:grid;place-items:center;padding:46px 20px 24px;border-bottom:1px solid var(--pomo-faint)}
.pomo-stage-inner{width:min(700px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;animation:pomo-enter .9s cubic-bezier(.16,1,.3,1) both}
.pomo-title{margin:0 0 11px;font:400 clamp(22px,3vw,31px)/1 var(--pomo-crayon);letter-spacing:.03em}
.pomo-mode-row{display:flex;align-items:center;gap:9px;color:var(--pomo-muted);font:10px var(--pomo-mono);letter-spacing:.16em;text-transform:uppercase}
.pomo-mode{all:unset;cursor:pointer;padding:5px 0;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}.pomo-mode:hover,.pomo-mode.is-active{color:#fff;border-color:#fff}
.pomo-timer-wrap{width:100%;display:grid;place-items:center;margin:18px 0 8px}
.pomo-progress{--progress:0deg;position:relative;width:min(42vh,390px,76vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#fff var(--progress),rgba(255,255,255,.12) 0);transition:background .25s linear,transform .55s cubic-bezier(.16,1,.3,1)}
.pomo-progress::before{content:"";position:absolute;inset:1px;border-radius:inherit;background:#000}
.pomo-progress::after{content:"";position:absolute;top:-2px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.08)}
.pomo-progress-inner{position:relative;z-index:1}.pomo-progress.is-running{animation:pomo-breathe 4s ease-in-out infinite}
.pomo-eyebrow,.pomo-target,.pomo-label{margin:0;color:var(--pomo-muted);font:9px var(--pomo-mono);letter-spacing:.17em;text-transform:uppercase}
.pomo-time{display:block;font:400 clamp(88px,15vw,142px)/.82 var(--pomo-serif);letter-spacing:-.065em;font-variant-numeric:tabular-nums}
.pomo-target{margin-top:16px}
.pomo-intention{min-height:20px;margin:5px 0 14px;color:var(--pomo-muted);font:italic 17px var(--pomo-serif)}
.pomo-controls{display:flex;align-items:center;justify-content:center;gap:9px}
.pomo-controls button{height:44px;border:1px solid var(--pomo-faint);background:#000;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s,color .2s,border-color .2s}
.pomo-controls button:hover{transform:translateY(-3px);border-color:#fff}.pomo-secondary{width:44px}.pomo-primary{min-width:142px;padding:0 23px!important;gap:9px!important;background:#fff!important;color:#000!important;border-color:#fff!important;font:500 10px var(--pomo-mono);letter-spacing:.14em;text-transform:uppercase}
.pomo-controls svg,.spotify-controls svg{width:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.pomo-primary .pause-icon,.pomo-primary.is-playing .play-icon,.spotify-play .pause-icon,.spotify-play.is-playing .play-icon{display:none}.pomo-primary.is-playing .pause-icon,.spotify-play.is-playing .pause-icon{display:block}
.pomo-spotify{width:min(530px,100%);margin-top:17px;border-top:1px solid var(--pomo-faint);border-bottom:1px solid var(--pomo-faint);min-height:72px;display:grid;align-items:center;animation:pomo-rise 1s .25s cubic-bezier(.16,1,.3,1) both}
.pomo-spotify-empty{display:grid;grid-template-columns:34px 1fr auto;gap:13px;align-items:center;text-align:left;padding:10px 3px}.spotify-logo{width:34px;height:34px;object-fit:contain;filter:grayscale(1) contrast(10) brightness(10)}.spotify-logo-small{width:20px;height:20px}
.pomo-spotify-empty p:not(.pomo-label){margin:4px 0 0;color:var(--pomo-muted);font:italic 13px var(--pomo-serif)}
.spotify-connect{border:1px solid #fff;background:#000;color:#fff;padding:9px 13px;cursor:pointer;font:500 9px var(--pomo-mono);letter-spacing:.13em;text-transform:uppercase;transition:background .2s,color .2s}.spotify-connect:hover{background:#fff;color:#000}
.pomo-spotify-player{position:relative;grid-template-columns:20px 54px minmax(0,1fr) auto;gap:11px;align-items:center;text-align:left;padding:9px 27px 9px 2px}.pomo-spotify-player:not([hidden]){display:grid}.spotify-cover{width:54px;height:54px;object-fit:cover;filter:grayscale(1) contrast(1.35)}
.spotify-meta{min-width:0}.spotify-meta strong,.spotify-meta>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spotify-meta strong{font:500 10px var(--pomo-mono)}.spotify-meta>span{margin-top:4px;color:var(--pomo-muted);font:9px var(--pomo-mono)}
.spotify-progress{height:1px;background:var(--pomo-faint);margin-top:9px}.spotify-progress span{display:block;width:0;height:100%;background:#fff;transition:width 1s linear}.spotify-meta small{display:flex;justify-content:space-between;margin-top:4px;color:var(--pomo-muted);font:7px var(--pomo-mono)}
.spotify-controls{display:flex;align-items:center;gap:2px}.spotify-controls button{border:0;background:#000;color:#fff;cursor:pointer;width:30px;height:30px;display:grid;place-items:center}.spotify-controls .spotify-play{border:1px solid var(--pomo-faint);border-radius:50%}.spotify-disconnect{all:unset;position:absolute;right:3px;top:5px;color:var(--pomo-muted);cursor:pointer;font:17px var(--pomo-mono)}.spotify-note{position:absolute;right:3px;bottom:1px;margin:0;color:var(--pomo-muted);font:7px var(--pomo-mono)}
.pomo-scroll{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--pomo-muted)!important;text-decoration:none;font:8px var(--pomo-mono);letter-spacing:.14em;text-transform:uppercase}.pomo-scroll i{font:16px var(--pomo-serif);animation:pomo-down 1.8s ease-in-out infinite}.pomo-scroll:hover{color:#fff!important;opacity:1}
.pomo-options{min-height:100vh;padding:110px 20px 90px;display:grid;place-items:center}.pomo-options-inner{width:min(760px,100%);opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}.pomo-options-inner.is-visible{opacity:1;transform:none}
.pomo-options-head{text-align:center;margin-bottom:48px}.pomo-options-head h1{margin:8px 0 7px;font:400 clamp(48px,8vw,86px)/.85 var(--pomo-crayon)}.pomo-options-head>p:last-child{margin:16px 0 0;color:var(--pomo-muted);font:italic 18px var(--pomo-serif)}
.pomo-presets{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--pomo-faint);border-bottom:1px solid var(--pomo-faint)}.pomo-presets button{position:relative;padding:22px 12px;border:0;border-right:1px solid var(--pomo-faint);background:#000;color:#fff;cursor:pointer;text-align:center;transition:background .25s,color .25s}.pomo-presets button:last-child{border-right:0}.pomo-presets button:hover,.pomo-presets button.is-active{background:#fff;color:#000}.pomo-presets strong,.pomo-presets span{display:block}.pomo-presets strong{font:400 21px var(--pomo-serif)}.pomo-presets span{margin-top:7px;font:8px var(--pomo-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.58}
.pomo-cycle-row{margin:13px 0 43px;display:flex;justify-content:center;align-items:center;gap:14px;color:var(--pomo-muted);font:8px var(--pomo-mono);letter-spacing:.1em;text-transform:uppercase}.pomo-cycle-dots{display:flex;gap:4px}.pomo-cycle-dots i{width:18px;height:1px;background:var(--pomo-faint)}.pomo-cycle-dots i.is-done,.pomo-cycle-dots i.is-current{background:#fff}
.pomo-settings{width:min(590px,100%);margin:auto;display:grid;gap:15px}.pomo-field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pomo-field-grid .pomo-field:last-child{grid-column:1/-1}.pomo-field{display:grid;gap:7px;color:var(--pomo-muted);font:8px var(--pomo-mono);letter-spacing:.1em;text-transform:uppercase}.pomo-field input{width:100%;height:44px;padding:0 12px;border:1px solid var(--pomo-faint);border-radius:0;background:#000;color:#fff;outline:0;font:11px var(--pomo-mono)}.pomo-field input:focus{border-color:#fff}input[type="range"]{accent-color:#fff;padding:0}
.pomo-switch-field{border:0;padding:0;margin:2px 0}.pomo-switch-field legend{margin-bottom:8px;color:var(--pomo-muted);font:8px var(--pomo-mono);letter-spacing:.1em;text-transform:uppercase}.pomo-switch-field label{display:inline-flex;width:50%;margin:0}.pomo-switch-field input{position:absolute;opacity:0}.pomo-switch-field span{width:100%;display:grid;gap:4px;border:1px solid var(--pomo-faint);padding:11px;cursor:pointer}.pomo-switch-field label+label span{border-left:0}.pomo-switch-field input:checked+span{background:#fff;color:#000}.pomo-switch-field strong{font:500 9px var(--pomo-mono);text-transform:uppercase}.pomo-switch-field small{font:italic 12px var(--pomo-serif);opacity:.58}.pomo-check{display:flex;gap:8px;align-items:center;color:var(--pomo-muted);font:9px var(--pomo-mono)}.pomo-check input{accent-color:#fff}
.pomo-settings-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.pomo-settings-actions button,.pomo-dialog-actions>*{padding:11px 15px;border:1px solid #fff;font:500 9px var(--pomo-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer}.pomo-test{background:#000;color:#fff!important}.pomo-save{background:#fff;color:#000}
.pomo-dialog{width:min(540px,calc(100% - 30px));padding:0;border:0;background:#000;color:#fff}.pomo-dialog::backdrop{background:rgba(0,0,0,.84);backdrop-filter:blur(7px)}.pomo-dialog-card{border:1px solid #fff;padding:27px;background:#000}.pomo-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.pomo-dialog-head h2{margin:6px 0 0;font:400 38px/1 var(--pomo-crayon)}.pomo-dialog-head>button{all:unset;cursor:pointer;color:var(--pomo-muted);font:24px var(--pomo-mono)}.pomo-dialog-card>p{color:var(--pomo-muted);font:11px/1.65 var(--pomo-mono)}.copy-field{display:flex;border:1px solid var(--pomo-faint)}.copy-field code{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;padding:11px;text-transform:none}.copy-field button{border:0;border-left:1px solid var(--pomo-faint);background:#000;color:#fff;font:8px var(--pomo-mono);cursor:pointer}.spotify-privacy{text-align:center;font-size:8px!important}.pomo-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.pomo-toast{position:fixed;z-index:300;left:50%;bottom:22px;transform:translate(-50%,18px);padding:10px 15px;background:#fff;color:#000;font:9px var(--pomo-mono);letter-spacing:.06em;opacity:0;pointer-events:none;transition:.3s cubic-bezier(.16,1,.3,1)}.pomo-toast.is-visible{opacity:1;transform:translate(-50%,0)}
@keyframes pomo-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes pomo-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes pomo-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}@keyframes pomo-down{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(5px);opacity:1}}
@media(max-width:650px){.pomo-home{top:14px;right:14px}.pomo-stage{padding:40px 14px 18px}.pomo-title{font-size:22px}.pomo-progress{width:min(38vh,300px,78vw)}.pomo-time{font-size:clamp(78px,25vw,108px)}.pomo-spotify-player{grid-template-columns:18px 44px minmax(0,1fr);padding-right:22px}.spotify-cover{width:44px;height:44px}.spotify-controls{grid-column:2/-1;justify-self:end;margin-top:-35px}.pomo-presets{grid-template-columns:repeat(2,1fr)}.pomo-presets button:nth-child(2){border-right:0}.pomo-presets button:nth-child(-n+2){border-bottom:1px solid var(--pomo-faint)}.pomo-field-grid{grid-template-columns:1fr 1fr}.pomo-field-grid .pomo-field:nth-child(3){grid-column:1/-1}.pomo-options{padding-top:88px}.pomo-options-head{margin-bottom:34px}.pomo-dialog-actions,.pomo-settings-actions{flex-direction:column}.pomo-dialog-actions>*,.pomo-settings-actions>*{text-align:center}}
@media(max-height:720px) and (min-width:651px){.pomo-stage{padding-top:24px}.pomo-progress{width:min(36vh,300px)}.pomo-title{font-size:21px}.pomo-timer-wrap{margin:10px 0}.pomo-spotify{margin-top:12px}.pomo-scroll{margin-top:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pomo-stage-inner,.pomo-spotify,.pomo-progress,.pomo-scroll i{animation:none!important}.pomo-options-inner{opacity:1;transform:none;transition:none}.pomo-toast{transition:none}}