@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@500;600;700&display=swap');
:root{--bg:#080808;--panel:#1b1b1b;--panel2:#292929;--line:#555;--gold:#fff;--white:#fff;--muted:#c6c6c6;--green:#fff;--red:#fff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--white)}body{font-family:'DM Sans',Arial,sans-serif}.app{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto auto minmax(250px,1fr) auto auto;max-width:2300px;margin:auto;padding:0 clamp(18px,2.6vw,54px) clamp(16px,2vh,28px)}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:4px solid var(--gold);outline-offset:4px}.topbar{height:clamp(66px,9vh,96px);display:flex;align-items:center;gap:20px;border-bottom:2px solid var(--line)}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:48px;height:48px;border:3px solid var(--gold);display:grid;place-items:center;font:900 37px/.8 'Barlow Condensed',sans-serif;color:var(--gold);letter-spacing:-4px;padding-right:5px}.brand-mark-slash{color:var(--white);font-size:23px;margin-left:1px}.brand-name{font:900 clamp(24px,2vw,34px)/.76 'Barlow Condensed',sans-serif;letter-spacing:.07em}.brand-name small{display:block;color:var(--gold);font:700 12px/1.6 'DM Sans',sans-serif;letter-spacing:.35em;margin-top:7px}.topbar-label{margin-left:auto;color:var(--muted);font:700 clamp(14px,1.3vw,20px) 'Barlow Condensed',sans-serif;letter-spacing:.25em}.icon-button{display:flex;align-items:center;gap:10px;background:transparent;color:var(--white);border:2px solid var(--line);padding:11px 16px;font:700 18px 'Barlow Condensed';letter-spacing:.06em}.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.3}.icon-button:hover{border-color:var(--gold)}.mode-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,18px);padding:clamp(12px,2vh,22px) 0}.mode{background:var(--panel);border:2px solid var(--line);color:var(--white);min-height:clamp(58px,8vh,86px);display:flex;align-items:center;justify-content:center;gap:clamp(6px,1vw,17px);font:800 clamp(20px,2.3vw,37px) 'Barlow Condensed',sans-serif;letter-spacing:.025em;white-space:nowrap}.mode-number{font:700 clamp(11px,1vw,16px) 'DM Sans',sans-serif;color:var(--muted)}.mode:hover{border-color:var(--gold)}.mode.active{background:var(--gold);border-color:var(--gold);color:#080808}.mode.active .mode-number{color:#333}.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;background:radial-gradient(ellipse at 50% 50%,#181818 0%,var(--bg) 68%);padding:1vh 0 2vh}.stage-heading{display:flex;align-items:center;gap:clamp(14px,2vw,35px);width:min(75%,950px);font:800 clamp(23px,2.9vw,48px) 'Barlow Condensed',sans-serif;letter-spacing:.15em}.stage-heading span:last-child{color:var(--gold)}.stage-line{height:2px;flex:1;background:var(--line)}.clock-wrap{width:100%;text-align:center}.clock{font:900 clamp(170px,min(22vw,37vh),470px)/.87 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 5px 65px #0008}.stage.prep .clock{color:var(--gold)}.stage.work .clock{color:var(--white)}.stage.rest .clock{color:var(--green)}.stage.complete .clock{color:var(--gold)}.stage-meta{font:800 clamp(25px,3.1vw,52px) 'Barlow Condensed',sans-serif;letter-spacing:.11em;text-align:center;min-height:1.25em}.progress-track{width:min(77%,1000px);height:clamp(6px,1vh,11px);background:var(--line);margin-top:clamp(12px,2vh,24px);overflow:hidden}.progress-fill{height:100%;width:0;background:var(--gold);transition:width .13s linear}.stage.rest .progress-fill{background:var(--green)}.control-strip{display:flex;gap:clamp(10px,1vw,18px);align-items:center;padding:clamp(10px,1.8vh,20px) 0;border-bottom:2px solid var(--line)}.control{height:clamp(74px,9.5vh,108px);display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.2vw,24px);font:900 clamp(30px,3vw,51px) 'Barlow Condensed',sans-serif;letter-spacing:.04em;border:2px solid}.control svg{width:clamp(29px,2.9vw,48px);height:clamp(29px,2.9vw,48px)}.primary{flex:1.2;background:var(--gold);border-color:var(--gold);color:#080808}.primary:hover{background:#e4e4e4}.primary svg{fill:currentColor}.primary.paused svg{fill:none;stroke:currentColor;stroke-width:4}.secondary{flex:.55;background:var(--panel);border-color:var(--line);color:var(--white)}.secondary:hover{border-color:var(--white)}.secondary svg{fill:none;stroke:currentColor;stroke-width:2.1}.control-help{flex:.45;text-align:right;color:var(--gold);font:700 clamp(14px,1.2vw,20px) 'Barlow Condensed';letter-spacing:.08em;white-space:nowrap}.control-help span{color:var(--muted)}.control-help b{padding:0 8px;color:var(--line)}.setup{padding-top:clamp(12px,1.7vh,20px)}.setup-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:clamp(10px,1.2vh,15px)}.setup h1{margin:0;font:800 clamp(24px,2.4vw,40px) 'Barlow Condensed';letter-spacing:.07em}.setup-head>span{color:var(--muted);font:700 clamp(14px,1.3vw,22px) 'Barlow Condensed';letter-spacing:.08em}.settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(9px,1vw,18px)}.setting{background:var(--panel);border:2px solid var(--line);padding:clamp(9px,1.1vw,20px);min-height:clamp(118px,14vh,160px);display:flex;flex-direction:column;justify-content:space-between}.setting.wide{grid-column:span 2}.setting-label{font:800 clamp(16px,1.65vw,27px) 'Barlow Condensed';letter-spacing:.07em;color:var(--muted)}.stepper{display:flex;align-items:center;gap:8px}.stepper button{width:clamp(40px,3.6vw,64px);height:clamp(48px,5vh,67px);background:var(--panel2);color:var(--white);border:2px solid var(--line);font:800 clamp(28px,2.7vw,43px) 'Barlow Condensed'}.stepper button:hover{border-color:var(--gold)}.stepper output{flex:1;text-align:center;font:800 clamp(36px,4vw,68px)/1 'Barlow Condensed';font-variant-numeric:tabular-nums;white-space:nowrap}.setting-unit{font:700 clamp(14px,1.3vw,20px) 'Barlow Condensed';color:var(--muted);letter-spacing:.05em}.setting-hint{font:600 clamp(13px,1.1vw,18px) 'DM Sans';color:var(--muted)}.flash{position:fixed;inset:0;background:var(--gold);opacity:0;pointer-events:none;z-index:20}.flash.pulse{animation:pulse .36s ease-out}@keyframes pulse{0%{opacity:.36}100%{opacity:0}}
@media(max-width:1000px){.app{grid-template-rows:auto auto minmax(210px,1fr) auto auto}.mode-number,.control-help{display:none}.clock{font-size:clamp(132px,26vw,260px)}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.setting.wide{grid-column:span 1}.topbar-label{display:none}}@media(max-width:610px){.app{padding:0 12px 16px;grid-template-rows:auto auto minmax(240px,1fr) auto auto}.topbar{height:65px}.brand-mark{width:38px;height:38px;font-size:30px}.brand-name{font-size:23px}.brand-name small{font-size:9px}.icon-button span{display:none}.mode-nav{gap:6px}.mode{font-size:19px;min-height:58px;padding:5px}.stage-heading{width:90%;font-size:20px}.clock{font-size:clamp(100px,28vw,190px)}.stage-meta{font-size:25px}.control{height:67px;font-size:29px}.control svg{width:27px}.setup-head{display:block}.setup-head>span{display:block;margin-top:3px}.setting{min-height:110px}.setting-label{font-size:17px}.stepper output{font-size:40px}.stepper button{width:40px;height:45px}.setting-hint{font-size:12px}}@media(max-height:700px) and (min-width:1001px){.app{grid-template-rows:auto auto minmax(180px,1fr) auto auto}.clock{font-size:min(21vw,35vh)}.setting{min-height:100px}.control{height:70px}}
.setting.wide{display:none}
.brand img{display:block;width:clamp(180px,17vw,270px);height:auto}@media(max-width:610px){.brand img{width:175px}}
.brand .brand-icon{width:clamp(48px,4vw,68px);height:clamp(48px,4vw,68px);object-fit:contain}.brand .brand-name{font-size:clamp(25px,2vw,36px)}@media(max-width:610px){.brand .brand-icon{width:44px;height:44px}.brand .brand-name{font-size:23px}}
.brand .brand-full{display:block;width:clamp(190px,16vw,300px);height:auto;object-fit:contain}@media(max-width:610px){.brand .brand-full{width:190px}}
.app{grid-template-rows:auto auto minmax(250px,1fr) auto}
.clock{font-size:clamp(180px,min(26vw,48vh),560px)}
.settings-trigger{padding:9px 13px;min-height:46px}
.settings-dialog{width:min(1000px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:clamp(20px,2.5vw,42px);background:#111;color:var(--white);border:2px solid #777;box-shadow:0 20px 80px #000;overflow:auto}
.settings-dialog::backdrop{background:rgba(0,0,0,.84)}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;border-bottom:2px solid var(--line);padding-bottom:22px;margin-bottom:24px}
.dialog-head h1{font:900 clamp(32px,3vw,52px)/1 'Barlow Condensed',sans-serif;letter-spacing:.05em;margin:0}
.dialog-head p{color:var(--muted);font:700 clamp(18px,1.5vw,26px) 'Barlow Condensed',sans-serif;letter-spacing:.06em;margin:12px 0 0}
.modal-close{background:var(--white);color:#080808;border:2px solid var(--white);padding:12px 21px;min-height:58px;font:900 clamp(21px,1.8vw,30px) 'Barlow Condensed',sans-serif;white-space:nowrap}
.modal-close:hover{background:#ddd}
.settings-dialog .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.settings-dialog .setting{min-height:170px}
.settings-dialog .setting-label{font-size:clamp(23px,2vw,32px)}
.settings-dialog .stepper output{font-size:clamp(50px,4vw,76px)}
.settings-dialog .stepper button{min-width:64px;min-height:64px}
.settings-dialog .setting-unit{font-size:clamp(16px,1.3vw,22px)}
@media(max-width:1000px){.clock{font-size:clamp(132px,min(26vw,48vh),360px)}}
@media(max-width:610px){.topbar{gap:8px}.topbar-label{display:none}.settings-trigger{min-height:42px;padding:7px 9px}.settings-trigger span{display:none}.settings-trigger svg{width:25px;height:25px}.clock{font-size:clamp(90px,27vw,180px)}.settings-dialog .settings-grid{grid-template-columns:1fr}.settings-dialog .setting{min-height:125px}.settings-dialog .setting-label{font-size:22px}.settings-dialog .stepper output{font-size:49px}.settings-dialog .stepper button{min-width:48px;min-height:48px}.dialog-head{gap:10px}.dialog-head h1{font-size:28px}.dialog-head p{font-size:16px}.modal-close{font-size:19px;min-height:46px;padding:7px 10px}}

.stage.complete .clock{color:#ff4040;text-shadow:0 0 48px #ff404066}
.stage.go .clock{color:#fff;letter-spacing:.01em}