@font-face{font-family:Segment;src:url('assets/fonts/segment.woff2');font-weight:400;font-display:block}@font-face{font-family:Controls;src:url('assets/fonts/controls.woff2');font-weight:500;font-display:swap}@font-face{font-family:Wordmark;src:url('assets/fonts/wordmark.woff2');font-weight:600;font-display:swap}
:root{color-scheme:dark;--ink:#d8cbb7;--muted:#b1a28a;--amber:#ffc05a;--grain:url('assets/charcoal-grain.png');--metal:url('assets/amber-metal.png');scrollbar-width:auto;scrollbar-color:#70695e #242422}*{box-sizing:border-box}body{margin:0;background:#252524;color:var(--ink);font:500 20px/1.4 Controls,'Arial Narrow',Arial,sans-serif}button,input,select{font:inherit}button,a{cursor:pointer}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--amber);outline-offset:4px}button:disabled{cursor:default;opacity:.55}[hidden]{display:none!important}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:#242422}::-webkit-scrollbar-thumb{background:#70695e;border:3px solid #242422;border-radius:8px}
.app-shell{width:min(1420px,calc(100% - 28px));margin:52px auto 36px;background:#282826 var(--grain) repeat;background-size:628px;box-shadow:0 2px 2px #ffffff35 inset,0 0 0 1px #131311,0 0 0 3px #514d46,0 22px 35px #0008;border-radius:14px;overflow:hidden;border:1px solid #696357}header{position:relative;height:116px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:2px solid #090908;box-shadow:0 -1px #746c5c inset}h1{font:600 32px/1 Wordmark,Arial,sans-serif;letter-spacing:.34em;margin:0 0 13px;padding-left:.34em}.brand{font:600 16px/1 Wordmark,Arial,sans-serif;letter-spacing:.6em;padding-left:.6em;text-decoration:none}.brand:hover{color:var(--amber)}.download{position:absolute;right:25px;top:25px;font-size:13px;color:var(--muted);text-decoration:none}.download:hover{color:var(--amber)}
.timer-panel{padding:24px 30px 20px}.modes{display:flex;width:min(760px,70%);margin:0 auto;gap:7px;padding:7px;background:#10100e;border:1px solid #65543b;border-radius:12px;box-shadow:0 2px 3px #000 inset,0 1px #aaa08455}.modes button{flex:1;display:flex;align-items:center;justify-content:center;gap:15px;background:#282825 var(--grain);background-size:628px;border:1px solid #524e45;border-radius:7px;padding:13px 12px;font-size:26px;color:#c8b79d;letter-spacing:1.3px;box-shadow:0 2px 2px #88827740 inset,0 -2px 2px #0009 inset,0 3px 2px #0008;text-shadow:0 1px #000}.modes img{width:20px;height:20px;filter:brightness(.45);border:2px solid #050504;border-radius:50%;box-shadow:0 1px #807b69}.modes button[aria-pressed=true]{color:#30200d;background:#c99042 var(--metal);background-size:300px;border-color:#e9b269;box-shadow:0 2px #ffe1acaa inset,0 -3px #7b491f66 inset,0 0 0 1px #4b3418,0 0 8px #be752e44;text-shadow:0 1px #ffdc9680}.modes button[aria-pressed=true] img{filter:brightness(1.8);border-color:#8a5a20;box-shadow:0 0 5px #ffe299}.modes button:hover:not(:disabled){filter:brightness(1.13)}
.readout-row{display:grid;grid-template-columns:minmax(0,890px) 145px;gap:50px;align-items:center;justify-content:end;margin:26px auto 28px;max-width:1110px}.timer-face{padding:10px;background:#11110e;border:2px solid #48473f;border-radius:13px;box-shadow:0 4px 5px #000b inset,0 1px 1px #c5bd9255,0 0 0 2px #090908}.display{position:relative;min-height:244px;display:flex;align-items:center;justify-content:center;padding:28px 18px 34px;background:#4b3211 var(--grain);background-blend-mode:multiply;background-size:628px;border:1px solid #765328;border-radius:6px;box-shadow:0 12px 24px #000e inset,0 -7px 20px #000a inset,0 0 32px #bd740b12 inset}#clock{font:400 clamp(70px,11.8vw,166px)/1.2 Segment,Consolas,monospace;letter-spacing:-.065em;color:#ffb947;text-shadow:0 0 8px #ffb03470,0 0 35px #ef930c25;padding-right:.065em;white-space:nowrap}.display progress{position:absolute;bottom:12px;left:18px;width:calc(100% - 36px);height:2px;border:0;background:#513911;appearance:none;accent-color:#8d652e}.display progress::-webkit-progress-bar{background:#513911}.display progress::-webkit-progress-value{background:#b68030}.display progress::-moz-progress-bar{background:#b68030}.session-meter{text-align:center;padding:24px 5px;border-top:1px solid #73644c;border-bottom:1px solid #73644c;box-shadow:1px 0 #82725c20,-1px 0 #82725c20}.session-meter>span:first-child{display:block;font:500 43px/1.3 Controls,Arial,sans-serif;letter-spacing:2px;margin:7px 0 9px}.session-meter>span:nth-child(2){font-size:16px;letter-spacing:3px;line-height:1.6}
.timer-actions{display:flex;justify-content:center;gap:34px;align-items:center}.timer-actions button{min-height:86px;border-radius:10px;padding:18px 26px;font-size:27px;letter-spacing:2px;display:flex;align-items:center;justify-content:center;gap:23px;box-shadow:0 3px 3px #f5db9b30 inset,0 -3px 4px #000a inset,0 5px 5px #000a,0 0 0 5px #14130f,0 0 0 7px #574f3f}.timer-actions img{width:30px;height:30px}.primary{min-width:318px;color:#2d1a07;background:#c99042 var(--metal);background-size:300px;border:2px solid #f1c68a;text-shadow:0 1px #ffd68d70}.primary:hover{filter:brightness(1.12)}.reset{min-width:205px;color:#deccb0;background:#252523 var(--grain);background-size:628px;border:2px solid #6d6555}.reset:hover{filter:brightness(1.17)}.timer-actions button:active{box-shadow:0 4px 7px #0009 inset,0 1px 1px #b2a07b40,0 0 0 5px #14130f,0 0 0 7px #574f3f;transform:translateY(2px)}.timer-status{margin:19px 0 0;text-align:center;min-height:18px;font-size:13px;letter-spacing:.4px;color:#baaa90}
.settings{position:relative;padding:34px 48px 36px;border-top:2px solid #080806;box-shadow:0 1px #89827280 inset}.control-strip{display:grid;grid-template-columns:1.4fr 1.1fr 150px;border:1px solid #7b674a;border-radius:10px;padding:23px 26px 26px;box-shadow:0 3px 5px #0009 inset,0 0 0 3px #13120f,0 1px 1px #b3a38160;background:#242422 var(--grain);background-size:628px}.control-strip h2{font:500 15px/1.2 Controls,'Arial Narrow',Arial,sans-serif;letter-spacing:2px;margin:0 0 22px}.duration-section{padding-right:30px;border-right:1px solid #78664a}.duration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}.duration-grid label{font-size:19px;letter-spacing:1px;display:flex;flex-direction:column;gap:16px}.duration-grid input{width:100%;min-width:0;color:#e1d6c2;background:#151513 var(--grain);background-size:628px;border:2px solid #070705;border-radius:5px;padding:9px 10px;font:500 38px/1 Controls,Arial,sans-serif;box-shadow:0 2px 5px #000 inset,0 0 0 2px #524b3e}.duration-grid input::-webkit-inner-spin-button{opacity:1}.duration-grid input[aria-invalid=true]{border-color:#f3a199}.help{margin:12px 0 0;font-size:12px;letter-spacing:.2px;line-height:1.3;color:#b3a38b;min-height:16px}.error{font-size:13px;color:#ffafa6;margin:6px 0 0}.sound-section{padding:0 30px;border-right:1px solid #78664a}.sound-row{display:flex;gap:15px;align-items:center}.sound-row select{width:100%;min-width:0;background:#1b1b18 var(--grain);background-size:628px;color:#eadcc7;border:2px solid #090907;border-radius:5px;padding:9px 12px;font-size:21px;box-shadow:0 1px 2px #ae9e6830 inset,0 1px #81755c80}.sound-row button{border:1px solid #655d4d;background:#2d2c27 var(--grain);background-size:628px;border-radius:5px;color:#eadcc7;display:flex;align-items:center;gap:12px;font-size:18px;letter-spacing:1px;padding:10px 17px;box-shadow:0 2px 1px #9c927833 inset,0 -2px 1px #0008 inset,0 3px 3px #0009}.sound-row button img{width:24px;height:24px}.sound-row button:hover{filter:brightness(1.15)}.volume-label{display:flex;justify-content:space-between;align-items:center;margin:23px 0 9px;font-size:15px;letter-spacing:1.5px}.volume-label output{font-size:12px;color:#b3a38b}.fader{display:flex;align-items:center;gap:12px}.fader img{width:23px;height:23px}.volume{width:100%;min-width:0;appearance:none;background:transparent;height:42px;cursor:pointer}.volume::-webkit-slider-runnable-track{height:7px;border-radius:4px;background:#11110e;border:1px solid #4b4536;box-shadow:0 2px 3px #000 inset,0 1px #84735655}.volume::-webkit-slider-thumb{appearance:none;width:25px;height:43px;margin-top:-19px;border-radius:4px;border:2px solid #e5c289;background:#c99042 var(--metal);background-size:300px;box-shadow:0 0 0 2px #3c2d14,0 2px 2px #ffe5bb inset,0 -3px 2px #91682d inset,3px 3px 4px #0009}.volume::-moz-range-track{height:7px;background:#11110e;border:1px solid #4b4536;border-radius:4px}.volume::-moz-range-thumb{width:23px;height:39px;border-radius:4px;border:2px solid #e5c289;background:#c99042 var(--metal);box-shadow:2px 3px 4px #0009}
.rain-section{padding-left:28px;text-align:center}.rain-section h2{text-align:left}.toggle{width:78px;height:42px;border:2px solid #080806;background:#151511;border-radius:23px;box-shadow:0 3px 5px #000 inset,0 1px #887e6b70;padding:0 4px;display:flex;align-items:center;justify-content:flex-start;margin:5px auto 26px}.toggle img{width:32px;height:32px;filter:brightness(1.15);border-radius:50%;box-shadow:0 2px 3px #0008}.toggle[aria-pressed=true]{justify-content:flex-end;background:#6e471d;border-color:#d09849}.toggle:hover{box-shadow:0 3px 5px #000 inset,0 0 0 1px #aa916e}.rain-icon{width:54px;height:54px}.screw{position:absolute;width:26px;height:26px;background:#11110e;border-radius:50%;box-shadow:0 0 0 1px #74674e,0 2px 3px #000;border:3px solid #353126}.tl{top:15px;left:15px}.tr{top:15px;right:15px}.bl{bottom:15px;left:15px}.br{bottom:15px;right:15px}.download-note{padding:0 48px 15px;text-align:center;font-size:13px;color:#b3a38b}.download-note a:hover{color:var(--amber)}footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11px;letter-spacing:.5px;color:#a69781;padding:16px 35px;border-top:1px solid #11110f}.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}.skip{position:absolute;top:-100px;left:18px;z-index:4;padding:12px 20px;background:#ffc05a;color:#241b0d}.skip:focus{top:12px}
@media(max-width:1100px){.app-shell{margin-top:25px}.modes{width:75%}.modes button{font-size:21px}.readout-row{grid-template-columns:minmax(0,1fr) 100px;gap:28px}.display{min-height:210px}#clock{font-size:clamp(66px,13.4vw,145px)}.control-strip{grid-template-columns:1.25fr 1.2fr 100px;padding:22px 20px}.settings{padding:30px}.duration-section{padding-right:22px}.duration-grid{gap:14px}.duration-grid label{font-size:17px}.duration-grid input{font-size:32px}.sound-section{padding:0 22px}.sound-row{gap:10px}.sound-row button{padding:10px 13px}.rain-section{padding-left:20px}.control-strip h2{font-size:13px;letter-spacing:1.5px}.timer-actions button{min-height:74px}.primary{min-width:270px}.reset{min-width:185px}}
@media(max-width:760px){.app-shell{width:calc(100% - 20px);margin:16px auto}.download{position:static;font-size:11px;margin-top:10px}header{height:115px}h1{font-size:25px;letter-spacing:.2em}.brand{font-size:12px}.timer-panel{padding:20px 16px}.modes{width:100%;gap:4px;padding:5px}.modes button{padding:12px 6px;font-size:18px;letter-spacing:.3px;gap:7px}.modes img{width:15px;height:15px}.readout-row{grid-template-columns:minmax(0,1fr);gap:15px;margin:22px 0}.display{min-height:170px;padding:24px 12px}#clock{font-size:clamp(58px,18vw,110px);letter-spacing:-.06em}.session-meter{border:0;padding:0;display:flex;gap:12px;justify-content:center;align-items:center;box-shadow:none}.session-meter>span:first-child{font-size:23px;margin:0}.session-meter>span:nth-child(2){font-size:12px;letter-spacing:1px}.session-meter br{display:none}.timer-actions{gap:18px}.timer-actions button{min-height:60px;font-size:20px;letter-spacing:1px;padding:12px;gap:12px}.timer-actions img{width:22px;height:22px}.primary{min-width:0;flex:1}.reset{min-width:0;flex:.7}.settings{padding:30px 23px}.control-strip{grid-template-columns:1fr;padding:20px 17px;gap:24px}.duration-section{padding:0 0 22px;border-right:0;border-bottom:1px solid #78664a}.duration-grid label{font-size:18px}.duration-grid input{font-size:32px}.control-strip h2{font-size:13px;margin-bottom:18px}.sound-section{padding:0 0 22px;border-right:0;border-bottom:1px solid #78664a}.rain-section{padding:0;display:flex;align-items:center;justify-content:space-between}.rain-section h2{margin:0}.toggle{margin:0;width:78px}.rain-icon{width:39px;height:39px}.screw{width:20px;height:20px}.tl,.bl{left:8px}.tr,.br{right:8px}.download-note{padding:0 20px 15px}footer{font-size:10px;padding:16px 22px;gap:12px}}
/* Reference alignment: off-center readout and a compact equipment strip. */
.app-shell{margin-bottom:18px}.duration-grid label{text-align:center}.duration-grid input{text-align:left}.toggle img{filter:grayscale(1) brightness(.8)}.screw{transform:rotate(45deg)}footer{width:min(1420px,calc(100% - 28px));margin:0 auto;padding:12px 20px;border:0}.download-note{padding:0 20px 8px}.modes button[aria-pressed=true],.primary{background-color:#904020;background-blend-mode:screen}
.readout-row{max-width:none;margin-left:17%;gap:80px;margin-top:32px}.display{padding:20px 18px;min-height:244px;background-color:#bd7e2a}#clock{line-height:1;font-size:clamp(70px,12.4vw,180px)}.modes button{padding-block:15px}.modes button[aria-pressed=true],.primary,.volume::-webkit-slider-thumb{background-color:#704c20;background-blend-mode:screen;background-size:200px}.modes button{outline:3px solid #13120e;outline-offset:0}.modes button:focus-visible{outline:2px solid var(--amber);outline-offset:4px}.volume-label{margin-top:15px}.control-strip .help{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.sound-row select{min-height:48px}.control-strip{padding-bottom:30px}.timer-panel{padding-bottom:25px}.download-note,footer{font-size:11px}.timer-status{margin-top:15px}
@media(max-width:1100px){.readout-row{margin-left:8%;gap:42px}.display{min-height:220px}#clock{font-size:clamp(66px,12.8vw,145px)}}
.timer-panel{padding-bottom:1px}
#clock{font-size:clamp(70px,11.5vw,166px);transform:scaleY(.84)}
.duration-grid input{width:min(150px,100%);align-self:center;height:82px;font-size:42px}.duration-grid label:not(:last-child){border-right:1px solid #72604966;padding-right:16px}
@media(max-width:760px){.readout-row{margin-left:0;gap:15px;margin-top:22px}.display{min-height:170px}#clock{font-size:clamp(58px,18vw,110px)}.modes button{padding-block:12px}.timer-panel{padding-bottom:20px}}
@media(max-width:760px){.duration-grid input{font-size:29px;height:68px;padding:8px 6px}.duration-grid label{display:grid;grid-template-rows:54px auto;gap:0}.duration-grid label:not(:last-child){padding-right:8px}.session-meter>span:nth-child(2){letter-spacing:1px}}
/* Mechanical number drums: native numeric editing, tactile step keys, split flaps. */
.app-shell{background-color:#e2dfda;background-blend-mode:multiply}.control-strip{background-color:#cecbc5;background-blend-mode:multiply}.modes button{background-color:#d5d0c8;background-blend-mode:multiply}.modes button[aria-pressed=true],.primary{background-color:#91401f;background-blend-mode:screen}
.duration-control{min-width:0;text-align:center}.duration-control>label{display:block!important;min-height:29px;margin:0 0 15px;padding:0!important;border:0!important;letter-spacing:1px}.duration-control:not(:last-child){border-right:1px solid #72604966;padding-right:18px}.mechanical-stepper{display:flex;width:min(150px,100%);height:84px;margin:auto;background:#080807;border:3px solid #090908;border-radius:6px;box-shadow:0 0 0 2px #655b47,0 3px 5px #000a;overflow:hidden}.number-drum{position:relative;flex:1;min-width:0;perspective:450px;background:#22211d var(--grain);background-size:500px;border-right:2px solid #080807}.duration-grid .number-drum input{position:relative;width:100%;height:100%;max-width:none;border:0!important;border-radius:0;padding:0!important;background:transparent;box-shadow:none;font-size:43px;text-align:center;appearance:textfield;color:transparent;caret-color:transparent;z-index:2}.number-drum input::-webkit-inner-spin-button,.number-drum input::-webkit-outer-spin-button{appearance:none;margin:0}.number-drum input:focus{color:#e1d6c2;caret-color:#e1d6c2}.number-drum:focus-within .flap-display{visibility:hidden}.flap-display{position:absolute;inset:0;pointer-events:none;perspective:450px}.flap-top,.flap-bottom{position:absolute;left:0;width:100%;height:50%;overflow:hidden;backface-visibility:hidden;background:#272621 var(--grain);background-size:500px}.flap-top{top:0;border-bottom:1px solid #080807;box-shadow:0 3px 7px #0007 inset;transform-origin:center bottom}.flap-bottom{bottom:0;border-top:1px solid #535045;box-shadow:0 -3px 6px #0009 inset;transform-origin:center top}.flap-top>span,.flap-bottom>span{position:absolute;left:0;width:100%;height:78px;line-height:78px;font-size:43px;text-align:center;color:#e1d6c2;text-shadow:0 1px #000}.flap-top>span{top:0}.flap-bottom>span{bottom:0}.flap-old{z-index:4;animation:flap-away .15s ease-in forwards}.flap-new{z-index:3;transform:rotateX(90deg);animation:flap-in .15s ease-out .15s forwards}.flap-old.reverse{animation-name:flap-away-reverse}.flap-new.reverse{transform:rotateX(-90deg);animation-name:flap-in-reverse}.step-buttons{width:30px;display:flex;flex-direction:column;flex-shrink:0;background:#272621 var(--grain);background-size:500px}.step-buttons button{height:50%;padding:0;border:0;background:transparent;display:grid;place-items:center;box-shadow:0 1px #8c806433 inset,0 -2px #0009 inset}.step-buttons button:first-child{border-bottom:2px solid #080807}.step-buttons button img{width:18px;height:18px}.step-buttons button:hover:not(:disabled){background:#ffffff10}.step-buttons button:active:not(:disabled){box-shadow:0 3px 5px #000c inset;transform:translateY(1px)}.step-buttons button:disabled{opacity:.3}.mechanical-stepper:has(input[aria-invalid=true]){outline:1px solid #f3a199}
@keyframes flap-away{to{transform:rotateX(-90deg)}}@keyframes flap-in{to{transform:rotateX(0)}}@keyframes flap-away-reverse{to{transform:rotateX(90deg)}}@keyframes flap-in-reverse{to{transform:rotateX(0)}}
.flap-top,.flap-bottom,.step-buttons{background-color:#e2dfd8;background-blend-mode:multiply}.number-drum.is-typing .flap-display{visibility:hidden}.number-drum:not(.is-typing):focus-within .flap-display{visibility:visible}.number-drum:not(.is-typing) input:focus{color:transparent;caret-color:transparent}
@media(max-width:760px){.duration-control>label{height:54px;margin-bottom:0}.duration-control:not(:last-child){padding-right:8px}.mechanical-stepper{height:68px}.step-buttons{width:28px}.step-buttons button img{width:14px;height:14px}.duration-grid .number-drum input,.flap-top>span,.flap-bottom>span{font-size:26px}.flap-top>span,.flap-bottom>span{height:62px;line-height:62px}.mechanical-stepper[data-digits="3"] input,.mechanical-stepper[data-digits="3"] .flap-top>span,.mechanical-stepper[data-digits="3"] .flap-bottom>span{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.flap-old,.flap-new{display:none!important}}@media(forced-colors:active){:root{scrollbar-color:auto}.app-shell,.modes button,.display,.primary,.reset,.control-strip,.sound-row select,.sound-row button{background-image:none;box-shadow:none}#clock{color:CanvasText;text-shadow:none}.number-drum input{color:CanvasText!important}.flap-display{display:none}}