.metro-workspace{max-width:540px;margin:24px auto 40px;padding:0 16px}.metro-heading h1{font-size:clamp(30px,7vw,44px);margin:4px 0 20px}.metro-panel{padding:22px}.metro-beats{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.metro-beat{flex:1 0 32px;max-width:60px;min-height:48px;border:1px solid #4b4d52;border-radius:10px;background:#27292e;color:#d0d0d5;font-family:inherit;font-size:17px;font-weight:600;cursor:pointer}.metro-beat.level-2{border-color:#fa8050;color:#ff986e;box-shadow:inset 0 -5px #fa80504a}.metro-beat.level-0{border-style:dashed;opacity:.48}.metro-beat.active{background:#ff814e;color:#151515;border-color:#ff814e;opacity:1}.metro-hint{font-size:11px;color:#95959e;text-align:center;margin:10px 0}.metro-tempo{display:flex;align-items:center;justify-content:center;gap:18px}.metro-tempo>button{width:44px;height:44px;border:1px solid #444;border-radius:50%;background:#252629;color:#ddd;font-size:24px;cursor:pointer}.metro-tempo>div{text-align:center;min-width:0}.metro-tempo input{display:block;width:180px;max-width:100%;padding:0!important;background:transparent!important;border:0!important;color:#f5f1ea;text-align:center;font-size:72px;line-height:1.1;font-weight:500;font-variant-numeric:tabular-nums;appearance:textfield}.metro-tempo input::-webkit-inner-spin-button,.metro-tempo input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.metro-tempo span{color:#a7a7ae;font-size:12px}.metro-slider{width:100%;margin:18px 0;accent-color:#ff814e;min-height:28px}.metro-play-row{display:grid;grid-template-columns:1fr 100px 1fr;align-items:center;gap:16px;justify-items:center}.metro-play-row #metro-play{width:96px;height:96px;border:1px solid #ffaf8a;border-radius:50%;background:#ff814e;color:#161718;font-size:32px;cursor:pointer;box-shadow:0 0 0 7px #ff814e16}.metro-play-row #metro-play[aria-pressed=true]{background:#ffc3a8}.metro-play-row #metro-pulse{font-size:35px;color:#ff986e;font-variant-numeric:tabular-nums}.metro-play-row #metro-pulse.sub-pulse{opacity:.5}.metro-play-row #metro-tap{min-height:48px;padding:10px 14px;font-weight:700}.metro-status{color:#a7a7ae;text-align:center;min-height:32px;font-size:12px;margin:18px 0 8px}.metro-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.metro-fields .field{min-width:0;margin:0}.metro-fields label{font-size:12px}.metro-fields select{width:100%;min-width:0}.metro-volume input{width:100%;accent-color:#ff814e;height:46px}.metro-guide{font-size:13px;color:#a7a7ae;line-height:1.6;margin:22px 4px}.metro-guide summary{cursor:pointer;color:#ddd}.metro-panel button:focus-visible,.metro-panel input:focus-visible,.metro-panel select:focus-visible{outline:2px solid #ffb18e;outline-offset:3px}@media(max-width:380px){.metro-panel{padding:16px}.metro-tempo{gap:8px}.metro-tempo input{width:160px;font-size:62px}.metro-play-row{gap:10px}.metro-fields{gap:10px}.metro-fields select{font-size:13px}}