:root{color-scheme:light;--coral:#ff6b45;--ink:#0b0908;--paper:#fff7ef;--line:rgba(11,9,8,.24)}*{box-sizing:border-box}html,body{min-height:100%;overscroll-behavior:none}body{margin:0;min-height:100dvh;background:var(--coral);color:var(--ink);font-family:Arial,Helvetica,sans-serif;display:grid;grid-template-rows:auto 1fr auto;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));user-select:none}button,input,select,a{font:inherit;color:inherit}button,select,input[type=range]{touch-action:manipulation}header,footer{width:min(780px,100%);margin:auto;display:flex;align-items:center;justify-content:space-between;min-height:48px;gap:12px;font-size:12px;font-weight:900;letter-spacing:.08em}.back,footer a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:8px}.back span{font-size:25px;line-height:0}.install{border:1.5px solid var(--ink);background:transparent;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.08em;padding:10px 14px;cursor:pointer}.install[hidden]{display:none!important}main{width:min(780px,100%);margin:auto;display:grid;align-content:center;gap:14px;padding:12px 0}.tempo-panel{border:2px solid var(--ink);border-radius:28px;padding:clamp(18px,4vw,34px);display:grid;gap:clamp(20px,4vh,34px);background:rgba(255,255,255,.08);box-shadow:8px 8px 0 var(--ink)}.beat-dots{height:20px;display:flex;align-items:center;justify-content:center;gap:11px}.beat-dot{display:block;width:10px;height:10px;border:2px solid var(--ink);border-radius:50%;transition:transform .06s ease,background .06s ease}.beat-dot:first-child{width:14px;height:14px}.beat-dot.active{background:var(--ink);transform:scale(1.35)}.tempo-editor{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:12px}.step-button{width:52px;height:52px;border:2px solid var(--ink);border-radius:50%;background:transparent;font-size:30px;font-weight:700;line-height:1;cursor:pointer}.step-button:active{background:var(--ink);color:var(--coral)}.bpm-display{min-width:0;display:flex;flex-direction:column;align-items:center}.bpm-display input{width:100%;border:0;outline:0;background:transparent;text-align:center;font-size:clamp(94px,24vw,188px);font-weight:950;line-height:.75;letter-spacing:-.085em;padding:0;margin-left:-.05em;-moz-appearance:textfield}.bpm-display input::-webkit-inner-spin-button,.bpm-display input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bpm-display span{margin-top:24px;font-size:15px;font-weight:950;letter-spacing:.3em;padding-left:.3em}.tempo-slider,.setting input[type=range]{width:100%;height:26px;margin:0;accent-color:var(--ink);cursor:pointer}.tempo-slider{height:32px}.start-button{min-height:70px;border:2px solid var(--ink);border-radius:18px;background:var(--ink);color:var(--coral);display:flex;align-items:center;justify-content:center;gap:14px;font-size:24px;font-weight:950;letter-spacing:.08em;cursor:pointer}.start-button kbd{border:1px solid currentColor;border-radius:5px;padding:4px 7px;font:900 9px Arial,Helvetica,sans-serif;letter-spacing:.08em;opacity:.72}.start-button.playing{background:transparent;color:var(--ink)}.tempo-panel.pulse{background:rgba(255,247,239,.55)}.settings{display:grid;grid-template-columns:1fr 1fr;gap:10px}.setting{min-height:82px;border:1.5px solid var(--ink);border-radius:16px;padding:13px 15px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;font-size:11px;font-weight:900;letter-spacing:.1em}.setting>span{display:flex;justify-content:space-between;gap:10px}.setting select{width:100%;border:0;border-bottom:2px solid var(--ink);background:transparent;border-radius:0;font-size:15px;font-weight:900;padding:4px 0;cursor:pointer}.setting output{font:inherit}footer{padding-top:8px}.offline{opacity:.58}dialog{width:min(420px,calc(100% - 32px));border:2px solid var(--ink);border-radius:18px;background:var(--paper);color:var(--ink);padding:28px;box-shadow:8px 8px 0 var(--ink)}dialog::backdrop{background:rgba(11,9,8,.62)}dialog strong{font-size:20px}dialog p{line-height:1.5;margin-bottom:0}.dialog-close{position:absolute;right:12px;top:9px;border:0;background:none;font-size:26px;cursor:pointer}.sr-only{position:fixed;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.step-button:focus-visible,.start-button:focus-visible,.install:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--paper);outline-offset:3px}@media(max-width:560px){main{padding:5px 0}.tempo-panel{border-radius:22px;box-shadow:5px 5px 0 var(--ink);gap:20px;padding:18px}.tempo-editor{grid-template-columns:46px minmax(0,1fr) 46px;gap:6px}.step-button{width:44px;height:44px;font-size:27px}.bpm-display input{font-size:clamp(82px,27vw,132px)}.bpm-display span{margin-top:18px}.settings{grid-template-columns:1fr}.setting{min-height:70px}.start-button{min-height:62px;font-size:20px}}@media(max-height:680px) and (min-width:561px){.tempo-panel{gap:16px;padding:18px}.bpm-display input{font-size:108px}.bpm-display span{margin-top:14px}.start-button{min-height:56px}.setting{min-height:68px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}