/* Quiet surfaces, one accent, and a clear hierarchy around the time. */
:root{font-family:"Segoe UI",Arial,sans-serif;color:#262923;background:#fafaf8}
header{max-width:1440px;margin:auto;padding:22px 40px;border:0;gap:11px}
.brand{position:relative;width:32px;height:32px;border-radius:50%;background:#303d32;font-size:21px}
.brand span{font-size:13px;margin:13px 0 0 19px;color:#d9e2cd}
header strong{font-size:14px;font-weight:550;letter-spacing:-.3px}
header small,.stage-top,.card-heading,.cues>.eyebrow,.timing{display:none}
.header-right{font-size:12px;color:#666c62;gap:24px}
button{border-color:#e3e5df;border-radius:9px;font-weight:500;transition:background .15s,color .15s}
button:hover{background:#efefeb}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #648064;outline-offset:4px}
#fullscreen{border:0;font-size:12px;padding:9px 0 9px 14px}
main{max-width:1440px;padding:36px 40px 24px;grid-template-columns:minmax(0,1fr) 290px;gap:64px;align-items:start}
.stage{border:0;background:transparent;border-radius:0;min-height:680px;padding:12px 0 20px;overflow:visible}
nav{margin:0 auto;background:#eeefe9;border-radius:30px;padding:4px;gap:2px}
nav button{min-width:98px;border-radius:25px;padding:10px 18px;font-size:13px;color:#6a7065}
nav .active{background:#fff;color:#29362a;box-shadow:0 1px 4px #1824160d}
.dial{padding:76px 0 49px}
.dial>p:first-child{font-size:11px;letter-spacing:1.5px;color:#6f776a;margin:0 0 8px}
#display{font-family:"Segoe UI Variable Display","Segoe UI",sans-serif;font-size:clamp(76px,10vw,152px);font-weight:300;letter-spacing:-7px;line-height:1.25;color:#29352b}
#display span{font-size:.28em;letter-spacing:-1px;color:#8c9487;margin-left:5px}
#timerStatus{font-size:12px;color:#73796d;margin-top:16px}
#timerControls{max-width:420px;margin:auto}
.slider-label{font-size:12px;color:#606858}
label{font-size:11px;color:#67705f}
output{font-weight:500;color:#454f3f}
input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;height:24px;margin:10px 0 0;accent-color:#536c4a}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:#dfe3d9}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:#536c4a;box-shadow:0 0 0 4px #fafaf8}
input[type=range]::-moz-range-track{height:3px;border-radius:4px;background:#dfe3d9}
input[type=range]::-moz-range-thumb{border:0;width:14px;height:14px;background:#536c4a}
.hint{font-size:11px;color:#737a6b;line-height:1.6}
#timerControls>.hint{font-size:10px;text-align:center;margin:5px 0 0}
.presets{gap:8px;margin:23px 0 0}
.presets button{font-size:12px;border:0;background:#f0f1ec;min-width:61px;padding:9px 12px;border-radius:7px;color:#66705d}
.presets button:hover{background:#e2e7da}
.transport{margin:28px 0 0;gap:10px}
.transport button{min-height:44px}
.primary{background:#3e573a;border-color:#3e573a;min-width:155px;border-radius:25px;color:white}
.primary:hover{background:#30462d}
#reset,#lap{border:0;min-width:65px;color:#6b7363}
aside{gap:29px;padding:8px 0 0}
.card{background:transparent;border:0;border-radius:0;padding:0}
h2{font-size:17px;font-weight:550;letter-spacing:-.4px;margin:0 0 22px}
input[type=date],select{background:#fff;border-color:#e4e6de;border-radius:8px;padding:10px 11px;font-size:12px;color:#424b3b;margin:7px 0 15px;height:39px}
.break-info{border:0;border-radius:10px;background:#eef1e8;padding:15px 17px;font-size:11px;line-height:1.8;color:#68765d;margin:1px 0 12px}
.break-info strong{font-size:21px;letter-spacing:-.6px;color:#3a4d31;font-weight:450}
.schedule-actions{gap:8px}
.schedule-actions button{flex:1;background:#fff;font-size:11px;padding:10px 7px;border-color:#e3e6dc}
details{margin-top:17px;font-size:11px;color:#66735b}
details summary{width:max-content}
details a{color:#415c37}
.cues{border-top:1px solid #e4e7df;padding-top:24px}
.cues h2{margin-bottom:10px}
.cue{border:0;gap:11px;border-radius:8px;padding:9px 2px;font-size:12px}
.cue small{font-size:10px;color:#747c6c}
.cue>span:last-child{display:none}
kbd{height:29px;width:29px;background:#f0f2eb;border:0;border-radius:7px;font-size:12px;color:#536447}
.cues .slider-label{margin-top:19px;font-size:11px}
#enableAudio{margin-top:8px;font-size:11px;padding:9px 12px;background:#fff}
#audioStatus{font-size:10px;margin-bottom:0}
footer{max-width:1440px;margin:0 auto;padding:8px 40px 24px;border:0;font-size:9px;color:#727b68;letter-spacing:.5px;gap:22px}
footer span:last-child{display:none}
#laps{max-width:360px;margin:24px auto 0;font-size:12px;color:#606d55;line-height:2}
@media(min-width:1100px){.stage{position:sticky;top:30px}}
@media(max-width:1100px){main{gap:32px;grid-template-columns:minmax(0,1fr) 270px}#display{font-size:clamp(76px,10vw,120px)}.stage{min-height:640px}aside{display:flex}.dial{padding-top:75px}}
@media(max-width:800px){header{padding:20px 24px}main{grid-template-columns:1fr;padding:24px;gap:30px}.stage{min-height:560px;padding-top:0}.dial{padding:48px 0 35px}#display{font-size:112px}aside{display:grid;grid-template-columns:1fr 1fr;gap:32px;border-top:1px solid #e4e7df;padding-top:25px}.cues{border:0;padding:0}footer{padding:20px 24px}.header-right{gap:12px}}
@media(max-width:520px){header{padding:18px 20px}.header-right button{font-size:11px}main{padding:20px;gap:24px}.stage{min-height:510px}nav button{min-width:85px;padding:9px 15px}.dial{padding:47px 0 33px}#display{font-size:94px;letter-spacing:-5px}#display span{margin-left:3px}.dial>p:first-child{font-size:10px}#timerStatus{font-size:11px}.presets{gap:6px}.presets button{min-width:52px;padding:9px 10px}aside{grid-template-columns:1fr;gap:26px}.cues{border-top:1px solid #e4e7df;padding-top:24px}footer{padding:20px;font-size:9px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
#overlay.spiral{background:#263c34;color:#bdcdb8}
#overlay.spiral #spiral{opacity:.85;top:7vh;width:min(65vh,78vw);height:min(65vh,78vw)}
#overlay.spiral .cue-content{position:absolute;bottom:6vh;padding:16px}
#overlay.spiral .cue-content h1{font-size:clamp(32px,4vw,54px);letter-spacing:-1px}
#overlay.spiral .cue-content>p:first-child{display:none}
#overlay.spiral .cue-content>p:last-child{font-size:15px}