:root{--yellow:#f3b600;--yellow2:#ffca20;--ink:#171717;--cream:#fffaf0;--line:#ded7c7;--green:#13a06f;--green-dark:#087951;--red:#e44336;--blue:#0b83c5;--shadow:0 14px 34px rgba(64,48,9,.15)}
*{box-sizing:border-box}
html{background:#f7f4ed}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fff 0,#f7f4ed 100%);min-height:100vh}
button,input,select{font:inherit}
button{touch-action:manipulation}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid #e7e1d5;padding:max(10px,env(safe-area-inset-top)) 18px 10px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-weight:900;white-space:nowrap}.tabs{display:flex;gap:8px}.tab{border:0;border-radius:999px;padding:10px 16px;background:#ece8df;font-weight:800;cursor:pointer}.tab.active{background:var(--ink);color:#fff}
main{width:min(1420px,96vw);margin:0 auto;padding:22px 0 32px}.page{display:none}.page.active{display:block}h1{text-align:center;margin:8px 0 18px;font-size:clamp(28px,4vw,54px);letter-spacing:.02em}
.workspace{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(380px,1.5fr) minmax(270px,1fr);gap:18px;background:linear-gradient(145deg,var(--yellow2),var(--yellow));border-radius:36px;padding:26px;box-shadow:var(--shadow);min-height:640px}
.settings-panel,.results-panel,.display-panel{border-radius:22px}.settings-panel{background:rgba(255,255,255,.4);padding:20px;align-self:start}.settings-panel label,.range-label{display:block;font-size:18px;font-weight:900;margin:0 0 16px}.settings-panel label input,.settings-panel select{display:block;width:100%;margin-top:7px;border:2px solid rgba(23,23,23,.28);border-radius:10px;background:#fff;padding:11px 12px;font-weight:800;font-size:22px}.range-inputs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:-8px}.range-inputs input{width:100%;min-width:0;border:2px solid rgba(23,23,23,.28);border-radius:10px;background:#fff;padding:11px;text-align:center;font-size:22px;font-weight:900}.range-inputs span{font-size:24px;font-weight:900}.time-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:-8px 0 18px}.time-inputs label{display:flex;align-items:center;gap:7px;margin:0}.time-inputs label input{margin:0;text-align:center}.time-inputs span{font-size:18px;white-space:nowrap}.secondary{border:0;border-radius:11px;padding:12px 16px;background:#fff;color:#222;font-weight:900;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.15)}.wide{width:100%}.error{min-height:1.3em;margin:7px 0;color:#9b1710;font-weight:800}
.display-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px}.counter-display{display:flex;align-items:flex-end;justify-content:center;font-variant-numeric:tabular-nums}.counter-display span{font-size:clamp(150px,21vw,300px);font-weight:950;line-height:.82;letter-spacing:-.075em}.counter-display small{font-size:clamp(32px,5vw,72px);font-weight:900;margin:0 0 18px 16px}.status{margin:24px 0 18px;padding:8px 17px;border-radius:999px;background:rgba(255,255,255,.52);font-weight:900}.main-controls{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:12px;width:min(680px,100%)}.main-controls button{border:0;border-radius:13px;padding:18px 10px;font-size:clamp(18px,2.2vw,32px);font-weight:950;color:#fff;cursor:pointer;box-shadow:inset 0 -4px rgba(0,0,0,.12),0 5px 10px rgba(0,0,0,.14)}.start{background:var(--green)}.pause{background:var(--green-dark)}.reset{background:var(--red)}
.results-panel{background:var(--cream);padding:18px;align-self:stretch;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.results-panel h2{margin:0;text-align:center;font-size:30px}.result-help{margin:7px 0 14px;color:#625b4d;font-size:13px;text-align:center}.results-list{display:flex;flex-direction:column;gap:9px}.result-row{display:grid;grid-template-columns:minmax(100px,.8fr) minmax(110px,1fr);gap:10px}.candidate-btn,.result-value{border:1px solid #c8c0b0;border-radius:9px;min-height:48px;font-size:22px;font-weight:900}.candidate-btn{background:#fff;cursor:pointer;color:#111}.candidate-btn.recorded{background:#173d67;color:#fff;border-color:#173d67}.candidate-btn:active{transform:translateY(1px)}.result-value{display:flex;align-items:center;justify-content:center;background:#eeeae2;font-variant-numeric:tabular-nums}.result-value.filled{background:#e5f4ed;color:#0d6847}
.stopwatch-display-panel{gap:10px}.timer-block{text-align:center;width:100%}.timer-label{display:block;font-size:20px;font-weight:900;margin-bottom:2px}.timer-value{font-size:clamp(66px,9.2vw,142px);font-weight:950;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.06em}.timer-block.elapsed{background:rgba(255,255,255,.26);border-radius:18px;padding:12px}.timer-block.elapsed .timer-value{font-size:clamp(48px,6vw,92px)}
footer{text-align:center;color:#786f60;padding:0 20px calc(24px + env(safe-area-inset-bottom));font-size:13px}
@media(max-width:980px){.workspace{grid-template-columns:1fr 1.35fr}.results-panel{grid-column:1/-1}.results-list{display:grid;grid-template-columns:1fr 1fr}.counter-display span{font-size:clamp(140px,28vw,270px)}}
@media(max-width:650px){.topbar{position:static;display:block}.brand{text-align:center;margin-bottom:9px}.tabs{display:grid;grid-template-columns:1fr 1fr}.tab{padding:9px 8px;font-size:12px}main{width:min(96vw,600px);padding-top:12px}h1{font-size:29px}.workspace{display:flex;flex-direction:column;padding:14px;border-radius:24px;min-height:0}.settings-panel{order:2}.display-panel{order:1;padding:10px 4px}.results-panel{order:3}.counter-display span{font-size:42vw;max-font-size:230px}.main-controls{gap:7px}.main-controls button{font-size:17px;padding:15px 5px}.results-list{display:flex}.result-row{grid-template-columns:1fr 1.15fr}.timer-value{font-size:20vw}.timer-block.elapsed .timer-value{font-size:15vw}}
@media(orientation:landscape) and (max-height:600px){.topbar{position:static}main{padding-top:8px}h1{font-size:26px;margin:2px 0 8px}.workspace{min-height:0;padding:14px}.counter-display span{font-size:30vh}.settings-panel{padding:13px}.settings-panel label,.range-label{font-size:14px;margin-bottom:9px}.settings-panel label input,.settings-panel select,.range-inputs input{padding:7px;font-size:17px}.results-panel{padding:12px}.result-row{gap:6px}.candidate-btn,.result-value{min-height:36px;font-size:17px}}


/* 8-beat push-up metronome */
.pushup-display-panel{gap:16px}
.pushup-summary{display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:22px;width:100%}
.pushup-count{display:flex;align-items:flex-end;justify-content:center;font-variant-numeric:tabular-nums}
.pushup-count span{font-size:clamp(100px,14vw,210px);font-weight:950;line-height:.82;letter-spacing:-.075em}
.pushup-count small{font-size:clamp(28px,4vw,56px);font-weight:900;margin:0 0 12px 12px}
.beat-readout{text-align:center;background:rgba(255,255,255,.3);border-radius:18px;padding:14px 10px;font-variant-numeric:tabular-nums}
.beat-label{display:block;font-weight:900;font-size:17px}
.beat-readout strong{font-size:clamp(72px,9vw,130px);line-height:1;font-weight:950}
.beat-readout small{font-size:30px;font-weight:900}
.beat-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;width:100%}
.beat-grid>div{display:flex;align-items:center;justify-content:center;min-height:86px;border-radius:14px;background:rgba(255,255,255,.42);border:3px solid rgba(23,23,23,.12);font-size:clamp(28px,3vw,48px);font-weight:950;transition:transform .08s ease,background .08s ease,color .08s ease}
.beat-grid>div.active{background:#171717;color:#fff;transform:translateY(-6px) scale(1.03);box-shadow:0 10px 18px rgba(0,0,0,.2)}
.beat-grid>div.accent-beat{border-color:#d52f25}
.beat-grid>div.accent-beat.active{background:#e44336;color:#fff}
@media(max-width:980px){.pushup-summary{grid-template-columns:1fr 1fr}.beat-grid>div{min-height:68px}}
@media(max-width:650px){.tabs{grid-template-columns:1fr 1fr 1fr}.pushup-summary{grid-template-columns:1.25fr .9fr;gap:8px}.pushup-count span{font-size:28vw}.beat-readout strong{font-size:20vw}.beat-grid{gap:4px}.beat-grid>div{min-height:48px;border-radius:9px;border-width:2px;font-size:22px}.pushup-display-panel{gap:10px}}
@media(orientation:landscape) and (max-height:600px){.pushup-count span{font-size:24vh}.beat-readout strong{font-size:18vh}.beat-grid>div{min-height:42px}}

/* Configurable rhythm grid */
#beatGrid {
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
}