.metro-main{max-width:850px;margin:auto}.mode-nav{display:flex;gap:8px;margin:20px 0 28px}.mode-nav a{flex:1;padding:15px 8px;text-align:center;color:#bec5b6;border:1px solid #414738;text-decoration:none;border-radius:6px}.mode-nav a.selected{background:#d6fd65;color:#171a13;font-weight:800}.metro-panel .tempo input{font-size:clamp(80px,20vw,150px);width:100%;max-width:330px}.metro-panel .tempo{margin:24px 0 10px}.metro-quick{display:grid;grid-template-columns:1fr 3fr 1fr;gap:10px;margin:20px 0}.metro-quick button{min-height:58px}.metro-beats{display:grid;grid-template-columns:repeat(var(--beats,4),minmax(0,1fr));gap:10px;margin:30px 0 12px}.metro-beats button{height:clamp(85px,16vw,135px);font-size:clamp(30px,7vw,58px);padding:0;border:2px solid #515b41;background:#22271e;color:#cad1c1;border-radius:8px;position:relative}.metro-beats button.accent{border-color:#d6fd65;color:#d6fd65}.metro-beats button.muted{border-style:dashed;opacity:.5}.metro-beats button.active{background:#d6fd65;color:#141811;box-shadow:0 0 25px #d6fd6544;opacity:1}.metro-beats button.accent:after{content:'●';display:block;font-size:12px;position:absolute;bottom:6px;left:0;right:0}.metro-parts{display:flex;justify-content:center;gap:12px;min-height:24px;margin:12px 0 25px}.metro-parts i{width:14px;height:14px;border-radius:50%;background:#414738}.metro-parts i.active{background:#d6fd65;box-shadow:0 0 12px #d6fd65}#metroStart{width:100%;min-height:76px;font-size:24px}.metro-panel label{margin-top:18px}.metro-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.metro-foot{color:#929a89}.metro-panel .row>*{min-width:0}.metro-panel select{width:100%}@media(max-width:600px){.metro-main{padding:0 14px}.metro-panel{padding:20px 16px}.metro-panel .row{display:grid;grid-template-columns:1fr}.metro-beats{gap:6px}.mode-nav a{font-size:14px}.metro-beats.many{grid-template-columns:repeat(4,minmax(0,1fr))}.metro-beats.many button{height:75px}}

.metro-top-sound{margin-top:14px}.metro-top-sound label{margin:0}.tap-hint{font-size:14px;line-height:1.55;min-height:44px;color:#bec5b6;margin:8px 0 18px}#metroTap{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#metroTap:active{background:#d6fd65;color:#151716}