:root{--met-primary:#6366f1;--met-primary-rgb:99, 102, 241;--met-accent:#f59e0b;--met-accent-rgb:245, 158, 11;--met-success:#10b981;--met-text:#1e293b;--met-text-secondary:#475569;--met-text-muted:#64748b;--met-bg:#fff;--met-bg-secondary:#f8fafc;--met-bg-hover:#f1f5f9;--met-border:#e2e8f0;--met-shadow-sm:0 1px 3px #00000014;--met-shadow-md:0 4px 12px #0000001a;--met-shadow-lg:0 8px 24px #0000001f;--met-beat-size:2.5rem;--met-beat-active:#6366f1;--met-beat-accent:#f59e0b;--met-beat-muted:#cbd5e1;--met-beat-normal:#94a3b8;--met-danger:#ef4444;--met-danger-rgb:239, 68, 68}._met-container{align-items:center;gap:var(--main-space-5);flex-direction:column;max-width:540px;margin:0 auto;display:flex}@media (max-width:768px){._met-container{padding-left:1rem;padding-right:1rem}}._met-tempo-marking{font-size:var(--main-text-sm);color:var(--met-text-muted);letter-spacing:.05em;text-transform:uppercase;font-weight:500}._met-bpm-display{align-items:center;gap:var(--main-space-3);display:flex}._met-bpm-controls{gap:var(--main-space-2);display:flex}._met-bpm-btn{border-radius:var(--main-radius);border-style:solid;border-width:1px;border-color:var(--met-border);background:var(--met-bg);width:2.5rem;height:2.5rem;color:var(--met-text-secondary);font-size:var(--main-text-sm);cursor:pointer;box-shadow:var(--met-shadow-sm);justify-content:center;align-items:center;font-weight:600;display:flex}._met-bpm-btn:hover{background:var(--met-bg-hover)}._met-bpm-btn:active{background:var(--met-bg-secondary)}._met-bpm-value-wrap{text-align:center;min-width:8rem}._met-bpm-input{font-family:var(--main-font-mono);color:var(--met-text);text-align:center;-moz-appearance:textfield;background:0 0;border-width:0;width:100%;font-size:3.5rem;font-weight:700;line-height:1}._met-bpm-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}._met-bpm-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._met-bpm-input:focus{outline:none}._met-bpm-label{font-size:var(--main-text-xs);color:var(--met-text-muted);text-transform:uppercase;letter-spacing:.1em;margin-top:-.25rem;display:block}._met-slider-wrap{width:100%;padding:0 var(--main-space-2)}._met-slider{-webkit-appearance:none;appearance:none;background:var(--met-border);cursor:pointer;border-radius:3px;outline:none;width:100%;height:6px}._met-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--met-primary);cursor:pointer;width:20px;height:20px;box-shadow:0 2px 6px rgba(var(--met-primary-rgb), .4);border-radius:50%}._met-slider::-moz-range-thumb{background:var(--met-primary);cursor:pointer;width:20px;height:20px;box-shadow:0 2px 6px rgba(var(--met-primary-rgb), .4);border-width:0;border-radius:50%}._met-play-btn{background:var(--met-primary);color:#fff;cursor:pointer;width:4.5rem;height:4.5rem;box-shadow:0 4px 16px rgba(var(--met-primary-rgb), .4);border-width:0;border-radius:50%;justify-content:center;align-items:center;display:flex}._met-play-btn:hover{opacity:.9}._met-play-btn._met-play-btn--active{background:var(--met-danger);box-shadow:0 4px 16px rgba(var(--met-danger-rgb), .4)}._met-play-btn svg{fill:currentColor;width:24px;height:24px}@media (max-width:480px){._met-bpm-input{font-size:2.75rem}._met-bpm-value-wrap{min-width:6rem}._met-bpm-btn{width:2.25rem;height:2.25rem}._met-play-btn{width:4rem;height:4rem}}._met-beats{gap:var(--main-space-3);justify-content:center;align-items:center;min-height:3rem;display:flex}._met-beat{width:var(--met-beat-size);height:var(--met-beat-size);background:var(--met-bg-secondary);border-style:solid;border-width:2px;border-color:var(--met-beat-normal);cursor:pointer;border-radius:50%;position:relative}._met-beat--accent{border-color:var(--met-beat-accent);background:rgba(var(--met-accent-rgb), .1)}._met-beat--muted{border-color:var(--met-beat-muted);opacity:.5;background:0 0;border-style:dashed}._met-beat--active{background:var(--met-beat-active);border-color:var(--met-beat-active);box-shadow:0 0 16px rgba(var(--met-primary-rgb), .5)}._met-beat--accent._met-beat--active{background:var(--met-beat-accent);border-color:var(--met-beat-accent);box-shadow:0 0 16px rgba(var(--met-accent-rgb), .5)}@keyframes _met-pulse{0%{box-shadow:0 0 0 0 rgba(var(--met-primary-rgb), .4)}70%{box-shadow:0 0 0 10px rgba(var(--met-primary-rgb), 0)}to{box-shadow:0 0 0 0 rgba(var(--met-primary-rgb), 0)}}@keyframes _met-pulse-accent{0%{box-shadow:0 0 0 0 rgba(var(--met-accent-rgb), .4)}70%{box-shadow:0 0 0 10px rgba(var(--met-accent-rgb), 0)}to{box-shadow:0 0 0 0 rgba(var(--met-accent-rgb), 0)}}._met-beat--pulse{animation:.3s ease-out _met-pulse}._met-beat--accent._met-beat--pulse{animation:.3s ease-out _met-pulse-accent}@media (max-width:480px){._met-beats{gap:var(--main-space-2)}._met-beat{--met-beat-size:2rem}}._met-controls{gap:var(--main-space-4);background:var(--met-bg);border-radius:var(--main-radius-lg);width:100%;padding:var(--main-space-5);box-shadow:var(--met-shadow-sm);border-style:solid;border-width:1px;border-color:var(--met-border);grid-template-columns:1fr 1fr;display:grid}._met-control-group{gap:var(--main-space-2);flex-direction:column;display:flex}._met-control-label{font-size:var(--main-text-xs);color:var(--met-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}._met-btn-group{gap:var(--main-space-1);flex-wrap:wrap;display:flex}._met-btn-option{font-size:var(--main-text-xs);border-radius:var(--main-radius);border-style:solid;border-width:1px;border-color:var(--met-border);background:var(--met-bg-secondary);color:var(--met-text-secondary);cursor:pointer;font-weight:500;font-family:var(--main-font-mono);padding:.375rem .625rem}._met-btn-option:hover{background:var(--met-bg-hover)}._met-btn-option--active{background:var(--met-primary);color:#fff;border-color:var(--met-primary)}._met-btn-option--active:hover{opacity:.9;background:var(--met-primary)}._met-select{font-size:var(--main-text-sm);border-radius:var(--main-radius);border-style:solid;border-width:1px;border-color:var(--met-border);background:var(--met-bg);color:var(--met-text);cursor:pointer;width:100%;padding:.5rem .75rem}._met-select:focus{border-color:var(--met-primary);box-shadow:0 0 0 3px rgba(var(--met-primary-rgb), .15);outline:none}._met-volume-slider{-webkit-appearance:none;appearance:none;background:var(--met-border);cursor:pointer;width:100%;height:4px;margin-top:var(--main-space-2);border-radius:2px;outline:none}._met-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--met-primary);cursor:pointer;border-radius:50%;width:16px;height:16px}._met-volume-slider::-moz-range-thumb{background:var(--met-primary);cursor:pointer;border-width:0;border-radius:50%;width:16px;height:16px}._met-bottom-row{align-items:center;gap:var(--main-space-4);flex-direction:column;width:100%;display:flex}._met-tap-btn{font-size:var(--main-text-sm);border-radius:var(--main-radius-lg);border-style:solid;border-width:2px;border-color:var(--met-primary);color:var(--met-primary);cursor:pointer;letter-spacing:.025em;background:0 0;padding:.75rem 2rem;font-weight:600}._met-tap-btn:hover{background:rgba(var(--met-primary-rgb), .05)}._met-tap-btn:active{background:rgba(var(--met-primary-rgb), .1)}._met-presets{gap:var(--main-space-2);flex-wrap:wrap;justify-content:center;display:flex}._met-preset-btn{font-size:var(--main-text-xs);border-radius:var(--main-radius-full);border-style:solid;border-width:1px;border-color:var(--met-border);background:var(--met-bg);color:var(--met-text-secondary);cursor:pointer;padding:.375rem .75rem;font-weight:500}._met-preset-btn:hover{background:var(--met-bg-hover);border-color:var(--met-primary);color:var(--met-primary)}._met-preset-btn--active{background:rgba(var(--met-primary-rgb), .1);border-color:var(--met-primary);color:var(--met-primary)}._met-shortcuts{gap:var(--main-space-4);font-size:var(--main-text-xs);color:var(--met-text-muted);display:flex}._met-shortcuts span{opacity:.7}@media (max-width:768px){._met-controls{padding:var(--main-space-4);grid-template-columns:1fr}}@media (max-width:480px){._met-shortcuts{align-items:center;gap:var(--main-space-1);flex-direction:column}._met-tap-btn{width:100%}}