:root{color-scheme:light;--bg:#f5f4ef;--surface:#fffefb;--ink:#20332e;--muted:#607069;--line:#dedfd6;--accent:#146c5e;--accent-hover:#0c5549;--tint:#eaf2ec;--track:#e0e9e1;--alert:#934321;--alert-bg:#fff0df;--shadow:0 12px 45px #223d2510}html[data-theme=dark]{color-scheme:dark;--bg:#14221e;--surface:#1b2d26;--ink:#eff5ef;--muted:#b3c4ba;--line:#3b5147;--accent:#8fd7ba;--accent-hover:#a8e8ce;--tint:#233c31;--track:#355044;--alert:#ffca98;--alert-bg:#443427;--shadow:0 12px 45px #0002}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--bg);font:1.125rem/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:var(--accent);text-underline-offset:4px}button,input,select{font:inherit}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:1px solid var(--line);border-radius:9px;padding:9px 18px;background:var(--surface);color:var(--ink);cursor:pointer;font-size:1rem;font-weight:600;text-decoration:none}button:hover,.button:hover{background:var(--tint);border-color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}input,select{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:46px;max-width:100%}input[type=range]{padding:0;accent-color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}h1,h2,p{margin-top:0}h1{font-size:clamp(2.2rem,4.6vw,3.1rem);line-height:1.15;letter-spacing:-.055em;margin-bottom:14px;font-weight:730}h2{font-size:1.55rem;line-height:1.3;letter-spacing:-.03em}p{margin-bottom:18px}.wrap{width:min(1080px,calc(100% - 48px));margin-inline:auto}.header{display:flex;gap:28px;align-items:center;padding-block:24px;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:1.35rem;font-weight:750;letter-spacing:-.055em;white-space:nowrap;text-decoration:none}.brand-dot{color:var(--accent);margin-left:-8px}.brand-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--surface)}.header nav{display:flex;gap:28px;margin-left:auto}.header nav a,footer nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:.94rem;text-decoration:none}.header nav a:hover,footer nav a:hover{color:var(--accent)}.theme-btn{font-size:.8rem;padding-inline:13px;min-height:44px;background:transparent}.intro{text-align:center;padding:35px 0 25px}.eyebrow{display:block;font-size:.66rem;letter-spacing:.17em;font-weight:750;color:var(--muted);margin-bottom:12px}.intro p{color:var(--muted);font-size:1.1rem;margin-bottom:0}.timer-panel{max-width:900px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}.timer-stage{padding:23px 32px 0;text-align:center;position:relative;background:var(--surface);outline:none}.stage-top{display:flex;justify-content:space-between;gap:14px;align-items:center;color:var(--muted);font-size:.76rem;min-height:27px}.stage-top>span:first-child{font-size:.66rem;font-weight:750;letter-spacing:.15em}.clock-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding:15px 0 2px}.clock{font-size:clamp(4.3rem,12vw,8.7rem);font-weight:600;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:-.065em;line-height:1.15;white-space:nowrap}.clock.long-time{font-size:clamp(3.3rem,9vw,6.8rem)}.timer-status{font-size:1rem;color:var(--muted);margin:4px 0 23px;min-height:1.65em}.timer-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.timer-actions button{min-height:52px;min-width:105px;font-size:1.05rem}.timer-actions .primary{min-width:175px}.primary{color:var(--surface);background:var(--accent);border-color:var(--accent)}.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--surface)}.session-note{font-size:.76rem;color:var(--muted);margin:18px 0 23px}.progress{height:5px;background:var(--track);border-radius:5px;overflow:hidden}.progress span{display:block;height:100%;width:100%;background:var(--accent)}.timer-setup{padding:26px 32px 24px}.quick-row{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.quick-row button{display:flex;gap:4px;padding:8px 3px;font-size:1rem;font-weight:650}.quick-row button span{font-size:.72rem;font-weight:400}.quick-row button[aria-pressed=true]{color:var(--accent);background:var(--tint);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}fieldset{border:0;padding:0;margin:0;min-width:0}.custom-title{font-size:.8rem;color:var(--muted);font-weight:600;text-align:center;margin:24px 0 12px}.time-inputs{display:flex;align-items:end;justify-content:center;gap:11px}.time-inputs label{width:94px;text-align:center}.time-inputs label input{width:100%;text-align:center;font-variant-numeric:tabular-nums}.time-inputs>span{margin-bottom:11px;color:var(--muted)}label{font-size:.8rem;font-weight:600;display:block}label input,label select{display:block;width:100%;margin-top:6px}.time-inputs button{margin-left:8px}.settings{border-top:1px solid var(--line);margin:0 32px}.settings>summary{padding:18px 0;font-size:.86rem;font-weight:650;cursor:pointer;min-height:50px}.settings>summary span{float:right;font-size:.76rem;font-weight:400;color:var(--muted)}.settings-body{padding:2px 0 24px}.settings-grid{display:grid;grid-template-columns:1.1fr .9fr 1.1fr 1fr;align-items:end;gap:14px}.settings-grid select,.settings-grid button{font-size:.85rem;white-space:nowrap;padding-inline:12px}.settings-grid output{float:right;color:var(--muted)}#volume{height:46px;margin:6px 0 0}.awake-row{display:flex;align-items:center;gap:15px;margin-top:19px;flex-wrap:wrap}.awake-row button{font-size:.85rem}.awake-row span{font-size:.8rem;color:var(--muted)}.awake-row button[aria-pressed=true]{border-color:var(--accent);background:var(--tint)}.small{font-size:.8rem;line-height:1.6;color:var(--muted)}#sound-status{margin-top:16px;margin-bottom:8px}.important-note{margin:0;max-width:720px}.error{font-size:.9rem;color:var(--alert);margin:12px 0 0}.error:empty{display:none}.center{text-align:center}#edit-note{margin:15px 0 0}.restore{max-width:900px;margin:0 auto 15px;padding:12px 18px;background:var(--tint);border:1px solid var(--line);border-radius:10px;font-size:.9rem}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;padding:45px 0;margin-top:15px;border-bottom:1px solid var(--line)}.steps>div>span{font-size:.76rem;color:var(--accent);font-weight:700}.steps h2{font-size:1.15rem;margin:7px 0 10px}.steps p{font-size:.94rem;color:var(--muted);margin-bottom:0}.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:40px 0}.mode-cards>a{background:var(--tint);border:1px solid var(--line);border-radius:15px;padding:27px 28px;text-decoration:none;color:var(--ink)}.mode-cards>a:hover{border-color:var(--accent)}.mode-cards h2{font-size:1.4rem}.mode-cards h2 span{float:right;color:var(--accent)}.mode-cards p{font-size:.94rem;color:var(--muted)}.card-link{font-size:.85rem;font-weight:650;color:var(--accent)}.preset-links{margin:40px 0}.preset-links h2{font-size:1.3rem}.minute-links{display:flex;flex-wrap:wrap;gap:10px}.minute-links a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:78px;padding:8px 17px;font-size:.9rem;text-decoration:none;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}.minute-links a:hover{border-color:var(--accent)}.faq{max-width:850px;margin:55px 0 60px}.faq h2{font-size:1.8rem}.faq details{border-top:1px solid var(--line)}.faq summary{cursor:pointer;font-weight:600;font-size:1rem;padding:17px 0;min-height:54px}.faq details p{font-size:.96rem;color:var(--muted);margin-bottom:23px}.explain{max-width:800px;margin:45px auto}.explain p{color:var(--muted)}footer{padding:28px 0;border-top:1px solid var(--line)}.footer-row{display:flex;justify-content:space-between;gap:20px;align-items:center}footer nav{display:flex;gap:24px}footer p{font-size:.73rem;color:var(--muted);margin:18px 0 6px}.install{max-width:850px}.install summary{font-size:.8rem;cursor:pointer;min-height:44px;padding-block:10px}.install p{font-size:.8rem;margin:0 0 12px}.prose{max-width:800px;margin:60px 0 75px}.prose h2{margin-top:32px}.prose p{color:var(--muted)}.notice{padding:18px;background:var(--alert-bg);color:var(--alert)}.skip-link{position:fixed;top:-100px;left:15px;background:var(--surface);padding:10px;z-index:2000}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.stop-sound{margin-top:15px;background:var(--alert-bg);border-color:var(--alert);color:var(--alert);min-width:175px}.timer-stage.done{background:var(--alert-bg)}.timer-stage.done .timer-status{color:var(--alert);font-weight:700}.timer-stage.done .clock{color:var(--alert)}.round-status{font-size:.85rem;color:var(--muted);margin:-12px 0 22px}.text-button{border:none;background:transparent;color:var(--accent);font-size:.82rem;padding-block:7px;margin-top:11px}.pomo-guide{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}.pomo-guide b{color:var(--ink);font-size:1.3rem;font-weight:650;margin-right:3px}.pomo-guide+.small{margin:13px 0}.custom-pomo summary{cursor:pointer;text-align:center;min-height:44px;font-size:.85rem;padding:10px}.custom-pomo form{padding-top:15px}.pomo-inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.pomo-inputs input{width:100%}.pomo-inputs+.small{margin-top:10px}.class-options{display:flex;align-items:center;gap:24px;justify-content:space-between;margin-bottom:23px}.class-options>label:first-child{flex:1}.check{display:flex;align-items:center;gap:8px;min-height:44px}.check input{width:19px;height:19px;min-height:19px;accent-color:var(--accent);margin:0}.ring{position:absolute;width:min(100%,320px);height:320px;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:5}.ring-track{stroke:var(--track)}#ring-progress{stroke:var(--accent);stroke-dasharray:100;stroke-dashoffset:0;stroke-linecap:round}body[data-mode=classroom] .clock-wrap{min-height:330px}body[data-mode=classroom] .clock{font-size:5.5rem}body[data-mode=classroom] .clock.long-time{font-size:3.9rem}body[data-mode=classroom] .progress{display:none}#activity-display{font-size:1.65rem;font-weight:600;margin:17px 0 0;overflow-wrap:anywhere}#timer-stage.no-ring .ring{display:none}#timer-stage.no-ring .clock-wrap{min-height:210px}#timer-stage.no-ring .clock{font-size:clamp(4.3rem,12vw,8.7rem)}#timer-stage.no-ring .clock.long-time{font-size:clamp(3.3rem,9vw,6.8rem)}.full-open{overflow:hidden}.timer-stage.is-full{position:fixed;inset:0;z-index:1000;width:100%;height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px max(22px,env(safe-area-inset-right)) 22px max(22px,env(safe-area-inset-left));background:var(--surface)}.timer-stage.is-full.done{background:var(--alert-bg)}.timer-stage.is-full .stage-top{width:100%;max-width:1200px}.timer-stage.is-full .clock-wrap{flex:1;min-height:100px;max-height:65vh;width:100%}.timer-stage.is-full .clock{font-size:clamp(5rem,24vw,18rem)}.timer-stage.is-full .clock.long-time{font-size:clamp(3.2rem,16vw,13rem)}.timer-stage.is-full .ring{height:min(60vh,600px);width:min(60vh,600px)}body[data-mode=classroom] .timer-stage.is-full:not(.no-ring) .clock{font-size:clamp(3.6rem,12vw,8rem)}body[data-mode=classroom] .timer-stage.is-full:not(.no-ring) .clock.long-time{font-size:clamp(2.7rem,8vw,5.5rem)}.timer-stage.is-full #activity-display{font-size:clamp(1.4rem,4vw,2.8rem)}.timer-stage.is-full .progress{width:90%;max-width:1000px}.timer-stage.is-full .session-note{margin:14px 0}.timer-stage.is-full .timer-status{margin:8px 0 15px}#full-message{margin:8px 0 0}.timer-stage.is-full .round-status{margin:0 0 12px}[hidden]{display:none!important}
@media(max-width:760px){.wrap{width:calc(100% - 32px)}.header{gap:12px;flex-wrap:wrap;padding-block:16px}.brand{font-size:1.1rem}.brand-icon{width:30px;height:30px}.header nav{gap:15px}.header nav a{font-size:.78rem}.theme-btn{font-size:.73rem;min-height:44px;padding-inline:9px}.intro{padding:28px 0 22px}.intro p{font-size:1rem}.eyebrow{font-size:.6rem}h1{font-size:2.25rem}.timer-stage{padding:18px 18px 0}.stage-top{font-size:.66rem;gap:6px}.stage-top>span:first-child{font-size:.6rem}.clock-wrap{padding:25px 0 8px}.clock{font-size:clamp(4.4rem,17vw,7rem)}.clock.long-time{font-size:clamp(2.9rem,12vw,5.5rem)}.timer-status{font-size:.92rem;margin-bottom:20px}.timer-actions{gap:8px}.timer-actions button{min-width:70px;padding-inline:13px;font-size:.9rem}.timer-actions .primary{min-width:130px}.timer-setup{padding:21px 18px}.quick-row{grid-template-columns:repeat(4,1fr);gap:8px}.time-inputs{gap:7px;flex-wrap:wrap}.time-inputs label{width:72px}.time-inputs button{margin:12px 0 0;width:100%}.time-inputs>span{margin-bottom:12px}.settings{margin-inline:18px}.settings>summary span{display:none}.settings-grid{grid-template-columns:1.2fr 1fr}.settings-grid label{min-width:0}.steps{grid-template-columns:1fr;gap:23px;padding:33px 0}.steps>div{padding-left:35px;position:relative}.steps>div>span{position:absolute;left:0;top:5px}.steps h2{margin-top:0}.mode-cards{grid-template-columns:1fr}.mode-cards>a{padding:23px}.faq{margin-top:40px}.faq h2{font-size:1.6rem}.footer-row{flex-wrap:wrap}.prose{margin-top:35px}.pomo-inputs{grid-template-columns:1fr 1fr}.pomo-guide{gap:9px 18px;font-size:.8rem}.class-options{flex-direction:column;align-items:stretch;gap:10px}.ring{width:270px;height:270px}body[data-mode=classroom] .clock-wrap{min-height:285px}body[data-mode=classroom] .clock{font-size:4.5rem}body[data-mode=classroom] .clock.long-time{font-size:3rem}.timer-stage.is-full .stage-top{flex-wrap:wrap}.timer-stage.is-full #ready-label{display:none}}
@media(max-width:420px){.header nav{order:3;justify-content:center;width:100%;margin-top:-6px;gap:28px}.theme-btn{margin-left:auto}.header{row-gap:6px;padding-bottom:8px}.intro{padding-top:23px}.intro .eyebrow{display:none}.timer-actions .primary{min-width:112px}.timer-actions button{padding-inline:11px}#phase-label{max-width:55%;text-align:left}.timer-stage.is-full #phase-label{max-width:none}.pomo-guide{gap:8px}.time-inputs label{width:68px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.skip-link:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(100%)}