@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/source-serif-4-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/source-serif-4-latin-600-normal.woff2) format('woff2')}
:root{--bg:#F6F7F8;--ink:#1C2430;--mut:#3F4A5A;--panel:#DCE0E3;--pad:#2E4BD6;--padd:#1B2F9E;--amb:#F2A81D;--line:#C5CBD1;--card:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#10141B;--ink:#E8ECF1;--mut:#A9B3C1;--panel:#1B222D;--pad:#4C67F0;--padd:#2B3FB5;--line:#2C3643;--card:#161C26}}
:root[data-theme=dark]{--bg:#10141B;--ink:#E8ECF1;--mut:#A9B3C1;--panel:#1B222D;--pad:#4C67F0;--padd:#2B3FB5;--line:#2C3643;--card:#161C26}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:18px/1.65 'Source Serif 4',Georgia,serif}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--amb);color:#000;padding:8px;z-index:9}
.top,main,.foot{max-width:960px;margin:0 auto}.top{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:18px 24px}
.logo,h1,h2,h3,.top nav a,.unit,.hist,.pad,.ctl button,.ghost,#theme,.read{font-family:'Barlow Condensed','Arial Narrow',sans-serif}
.logo{font-weight:700;font-size:30px;color:var(--ink);text-decoration:none;margin-right:auto}
.top nav,.foot nav{display:flex;flex-wrap:wrap;gap:20px}.top nav a{font-weight:600;font-size:20px;color:var(--ink);text-decoration:none}
main{padding:8px 24px 56px;flex:1 0 auto;width:100%}.top,.foot{width:100%}.panel{background:var(--panel);border-radius:18px;padding:18px 24px;margin:8px 0 20px;font-size:20px}main li{margin:6px 0}h1{font-size:44px;line-height:1.1;margin:0 0 8px}h2{font-size:30px;line-height:1.1;margin:36px 0 8px}h3{font-size:22px;margin:20px 0 2px}
.lead,.hint{color:var(--mut)}.lead{max-width:60ch;margin:0 0 20px}.hint{margin:0;font-size:16px}
article p,article li{max-width:68ch}article a,main>p a{color:var(--pad)}
.rig{background:var(--panel);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:18px;margin:20px 0}
.read{display:flex;align-items:baseline;justify-content:center;gap:12px;font-weight:700}
#bpm,#mbpm{font-size:clamp(88px,18vw,168px);line-height:1;letter-spacing:-.02em}
#mbpm{width:3.4ch;background:transparent;border:0;color:inherit;text-align:center;font-family:inherit;font-weight:700;padding:0}.unit{font-size:28px;color:var(--mut);font-weight:600}
.pad{width:100%;height:220px;border:0;border-radius:18px;background:var(--pad);color:#fff;font-weight:700;font-size:56px;cursor:pointer;touch-action:manipulation;box-shadow:0 8px 0 var(--padd);transition:transform .06s}
.pad:active,.pad.hit{transform:translateY(6px);box-shadow:0 2px 0 var(--padd),0 0 0 6px var(--amb)}
.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.hist{display:flex;gap:10px;min-height:40px;font-weight:600;font-size:22px}.hist span{background:var(--bg);border-radius:10px;padding:6px 14px}
.ctl{display:flex;flex-wrap:wrap;gap:10px}.ctl button,.ghost,#theme{min-width:48px;height:48px;padding:0 16px;border:2px solid var(--ink);border-radius:12px;background:transparent;color:var(--ink);font-weight:700;font-size:20px;cursor:pointer}
:focus-visible{outline:3px solid var(--amb);outline-offset:3px}
.dots{display:flex;justify-content:center;gap:12px;min-height:18px}.dots i{width:18px;height:18px;border-radius:50%;background:var(--bg)}.dots i.on{background:var(--amb)}
.wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px}th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
label{display:flex;flex-direction:column;gap:6px;font-size:16px}input,select{font:inherit;padding:8px 10px;border-radius:10px;border:2px solid var(--line);background:var(--card);color:var(--ink)}.big input{font-size:28px;max-width:220px}
.foot{border-top:1px solid var(--line);padding:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:16px;color:var(--mut)}.foot a{color:var(--mut)}.foot p{margin:0}
@media(prefers-reduced-motion:reduce){.pad{transition:none}}
a{text-decoration:none}
article a,main>p a,.hint a{color:var(--pad);font-weight:600;border-radius:4px;transition:color .15s,background-color .15s}
.foot a,.logo{transition:color .15s}
.top nav{gap:6px}.top nav a{padding:4px 10px;border-radius:8px;transition:background-color .15s,color .15s}
.ctl button,.ghost,#theme{transition:background-color .15s,color .15s,transform .06s}
.ctl button:active,.ghost:active,#theme:active{transform:translateY(1px)}
.pad{transition:transform .06s,box-shadow .06s,filter .15s}
@media(hover:hover){article a:hover,main>p a:hover{background:var(--panel);color:var(--ink)}.hint a:hover{background:var(--bg);color:var(--ink)}.foot a:hover{color:var(--ink)}.logo:hover{color:var(--pad)}.top nav a:hover{background:var(--panel)}.ctl button:hover,.ghost:hover,#theme:hover{background:var(--ink);color:var(--bg)}.pad:hover{filter:brightness(1.08)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
article a,main>p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.setbpm{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px}.setbpm input{width:6.5rem;min-width:6.5rem}
.stab::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:var(--line)}
.stab[data-s=good]::before{background:#1F9D55}.stab[data-s=ok]::before{background:var(--amb)}.stab[data-s=bad]::before{background:#D64545}
[hidden]{display:none!important}
.chk{flex-direction:row;align-items:center;gap:8px}.chk input{width:20px;height:20px;padding:0}
.mbeat{display:none;text-align:center;font:700 clamp(120px,28vw,320px)/1 'Barlow Condensed','Arial Narrow',sans-serif}
.rig.stage{position:fixed;inset:0;z-index:50;margin:0;border-radius:0;justify-content:center;overflow:auto;background:var(--bg)}
.stage .mset{display:none}.stage .mbeat{display:block}.stage #mbpm{font-size:clamp(72px,16vw,180px)}.stage .pad{height:110px;max-width:520px;align-self:center;width:100%}
.stage .dots{gap:clamp(10px,2vw,20px)}.stage .dots i{width:clamp(20px,5vw,44px);height:clamp(20px,5vw,44px)}.stage .read{margin-top:48px}
.exit{position:fixed;top:16px;right:16px;z-index:60;background:var(--bg)}
body.stage-open{overflow:hidden}
#mbpm{-moz-appearance:textfield;appearance:textfield}#mbpm::-webkit-outer-spin-button,#mbpm::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.step{display:flex;justify-content:center;gap:12px}.step .ghost{min-width:84px;font-size:28px;line-height:1;touch-action:manipulation}