body:has(.metronome-page){padding:0!important;overflow:hidden!important;height:100dvh}.metronome-page{display:flex;flex-direction:column;height:100dvh;overflow:hidden;overscroll-behavior:none;background:var(--color-bg);color:var(--color-text);font-family:inherit}.metronome-header{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;padding-top:calc(.625rem + var(--safe-top));background:var(--color-surface);border-bottom:1px solid var(--color-border);position:relative;min-height:52px;flex-shrink:0;flex-wrap:wrap}.app-header-left{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.metronome-header .app-logo{font-size:1.25rem;font-weight:700;white-space:nowrap}.metronome-title{flex:1;min-width:0;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;margin:0}.metronome-header-actions{display:flex;gap:.375rem;align-items:center;flex-shrink:0}.metro-bpm-card{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;flex-shrink:0}.metro-bpm-content{max-width:600px;margin:0 auto;width:100%}.metro-bpm-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);margin-bottom:.5rem}.metronome-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:.75rem 1rem 1rem;display:flex;flex-direction:column;gap:1rem;max-width:600px;margin:0 auto;width:100%;box-sizing:border-box}.metro-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;flex-shrink:0}.metro-card-title{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);margin-bottom:0}.metro-card-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}.pendulum-wrap{width:100%;display:flex;justify-content:center;margin-bottom:.75rem}.pendulum-canvas{width:100%;max-width:380px;height:130px;display:block}.bpm-section{display:flex;flex-direction:column;align-items:center;gap:.75rem}.bpm-display-label{display:flex;align-items:center;justify-content:center;gap:.1rem;font-weight:700;line-height:1;max-width:100%}.bpm-subdiv-sym{font-size:2rem;color:var(--color-primary);min-width:1.6rem;text-align:center;line-height:1;flex-shrink:0}.bpm-eq{font-size:1.4rem;color:var(--color-text-secondary);font-weight:400;margin:0 .15rem;flex-shrink:0}.bpm-value-input{font-size:2.8rem;font-weight:800;color:var(--color-text);letter-spacing:-.02em;width:7.5rem;min-width:0;text-align:center;padding:.05rem .2rem;border-radius:var(--radius-sm);border:2px solid transparent;transition:border-color .15s;background:transparent;font-family:inherit;line-height:1;outline:none;flex-shrink:1;-moz-appearance:textfield}.bpm-value-input::-webkit-outer-spin-button,.bpm-value-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bpm-value-input:focus{border-color:var(--color-primary)}.bpm-unit{font-size:1.1rem;color:var(--color-text-secondary);font-weight:500;margin-left:.2rem;flex-shrink:0}@media(max-width:359px){.bpm-value-input{font-size:2.2rem;width:6rem}.bpm-subdiv-sym{font-size:1.6rem;min-width:1.3rem}.bpm-eq{font-size:1.1rem}}.bpm-adj-row{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap;justify-content:center}.bpm-adj-btn{height:2.4rem;padding:0 .7rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface-hover);color:var(--color-text);font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none;white-space:nowrap;min-width:2.6rem}.bpm-adj-btn:active{background:var(--color-border)}.bpm-adj-sm{font-size:.75rem;min-width:2.8rem}.bpm-half-double{display:flex;gap:.375rem}.bpm-half-double .btn{font-size:.75rem;padding:.25rem .8rem}.metro-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--color-border)}.metro-row:last-child{border-bottom:none;padding-bottom:0}.metro-row-label{font-size:.8rem;color:var(--color-text-secondary);font-weight:500;width:3.2rem;flex-shrink:0}.metro-row-value{flex:1;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.cv-settings-mgmt{display:contents}.cv-settings-mgmt .voice-sub-select,.cv-settings-mgmt .btn{height:1.625rem;box-sizing:border-box;border:1px solid var(--color-border);vertical-align:middle;padding:0 .4rem;line-height:1.625rem}.picker-trigger-metro{padding:.375rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-hover);color:var(--color-text);font-size:1rem;cursor:pointer;min-width:4.5rem;text-align:center;transition:border-color .15s,background .15s;font-weight:600}.picker-trigger-metro:hover{border-color:var(--color-primary);background:var(--color-surface)}.sound-select{flex:0 1 auto;width:auto;padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-hover);color:var(--color-text);font-size:.85rem;cursor:pointer}.voice-sub-select{flex:0 0 auto;min-width:5rem;padding:.25rem .35rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-hover);color:var(--color-text);font-size:.8rem;cursor:pointer}.voice-sub-select.hidden{display:none}.custom-voice-btn{padding:.25rem .625rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:.8rem;cursor:pointer}.custom-voice-btn.danger{color:var(--color-danger, #ef4444);border-color:var(--color-danger, #ef4444)}.sound-select-group{display:flex;gap:.25rem;flex-wrap:wrap;align-items:center}.custom-voice-create-pack-btn{font-weight:700}.custom-voice-row{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}.custom-voice-row-label{font-size:.7rem;font-weight:700;color:var(--color-text-secondary);min-width:1.2rem;text-align:center}.sound-preview-btn{width:1.625rem;height:1.625rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;flex-shrink:0;padding:0;box-sizing:border-box}.sound-preview-btn:hover{color:var(--color-primary);background:var(--color-surface)}.cv-sync-icon-btn{display:inline-flex!important;align-items:center;justify-content:center}.cv-sync-icon-btn svg{display:block}.accent-info-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:.55rem;font-weight:700;font-style:italic;color:var(--color-text-secondary);border:1px solid var(--color-border);cursor:pointer;position:relative;flex-shrink:0}.accent-info-icon:hover{background:var(--color-surface-hover);color:var(--color-text)}.accent-tooltip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.375rem .625rem;font-size:.65rem;font-weight:400;font-style:normal;color:var(--color-text-secondary);white-space:nowrap;z-index:1000;box-shadow:0 2px 8px #0000004d}.accent-tooltip.visible{display:block}.accent-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--color-border)}.metro-card-pattern{min-height:0}.pattern-hint{margin-bottom:.75rem}.beat-group{display:flex;gap:.35rem;flex-shrink:0}.beat-group+.beat-group{margin-left:.15rem}.accent-grid{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.metro-accent-cell{width:calc(3.2rem * var(--metro-pattern-scale, 1));height:calc(3.2rem * var(--metro-pattern-scale, 1));border-radius:var(--radius-sm);border:2px solid var(--color-border);background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:calc(1rem * var(--metro-pattern-scale, 1));font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .1s,border-color .1s,color .1s,transform .1s,box-shadow .1s;-webkit-user-select:none;user-select:none;position:relative}.metro-accent-cell[data-level="2"]{background:#6366f140;border-color:var(--color-primary);color:var(--color-primary)}.metro-accent-cell[data-level="1"]{background:#22d3ee26;border-color:var(--color-accent);color:var(--color-accent)}.metro-accent-cell[data-level="0"]{opacity:.4}.metro-accent-cell.active{transform:scale(1.18);box-shadow:0 0 12px currentColor}.metro-accent-cell[data-level="2"].active{background:#6366f199;box-shadow:0 0 14px var(--color-primary)}.metro-accent-cell[data-level="1"].active{background:#22d3ee80;box-shadow:0 0 12px var(--color-accent)}.metro-accent-cell[data-level="0"].active{opacity:.7;box-shadow:0 0 8px var(--color-text-secondary)}.drum-pattern-grid{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}.drum-pattern-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}.drum-row-label{width:2rem;font-size:.7rem;font-weight:700;color:var(--color-text-secondary);flex-shrink:0;text-align:center}.drum-cell{width:calc(2.8rem * var(--metro-pattern-scale, 1));height:calc(2.8rem * var(--metro-pattern-scale, 1));border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface-hover);cursor:pointer;transition:background .1s,border-color .1s,transform .1s;display:flex;align-items:center;justify-content:center;font-size:calc(.75rem * var(--metro-pattern-scale, 1));font-weight:700;color:var(--color-text-secondary)}.drum-cell.active-step{transform:scale(1.15);box-shadow:0 0 10px var(--color-primary)}.drum-cell.on{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.drum-cell.hihat.on{background:#22c55e33;border-color:#22c55e99;color:var(--color-success, #22c55e)}.drum-cell.kick.on{background:#f9731640;border-color:#f97316b3;color:#f97316}.drum-cell.snare.on{background:#6366f140;border-color:#6366f1b3;color:var(--color-primary, #6366f1)}.voice-pattern-grid{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.voice-cell{width:calc(3rem * var(--metro-pattern-scale, 1));min-width:calc(3rem * var(--metro-pattern-scale, 1));max-width:calc(3rem * var(--metro-pattern-scale, 1));height:calc(3rem * var(--metro-pattern-scale, 1));padding:0 calc(.2rem * var(--metro-pattern-scale, 1));border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface-hover);color:var(--color-text);font-size:calc(.9rem * var(--metro-pattern-scale, 1));font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .1s,transform .1s;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.voice-cell.muted{opacity:.4}.voice-cell.ghost,.picker-cell.ghost{font-style:italic;opacity:.7}.voice-cell.active{transform:scale(1.18);box-shadow:0 0 12px var(--color-primary);background:#6366f159;border-color:var(--color-primary)}.metronome-bottom{flex-shrink:0;background:var(--color-surface);border-top:1px solid var(--color-border);padding-bottom:var(--safe-bottom)}.metro-bottom-inner{max-width:480px;margin:0 auto;width:100%;display:flex;flex-direction:column;padding:.375rem 1rem 0;box-sizing:border-box}.metro-vol-group{display:flex;align-items:center;gap:.25rem;flex:1;min-width:0}.metro-vol-label{font-size:.65rem;color:var(--color-text-secondary);white-space:nowrap;flex-shrink:0}.metro-vol-value{font-weight:600;color:var(--color-text);margin-left:.25rem}.vol-step-btn-sm{width:1.6rem;height:1.6rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface-hover);color:var(--color-text);font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;line-height:1;-webkit-user-select:none;user-select:none}.vol-step-btn-sm:active{background:var(--color-border)}.metro-volume-slider{flex:1;height:4px;min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.metro-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-primary);cursor:pointer;margin-top:-5px}.metro-volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:none;background:var(--color-primary);cursor:pointer}.metro-volume-slider.boosted-yellow::-webkit-slider-thumb{background:var(--color-warning, #eab308)}.metro-volume-slider.boosted-yellow::-moz-range-thumb{background:var(--color-warning, #eab308)}.metro-volume-slider.boosted-red::-webkit-slider-thumb{background:var(--color-danger, #ef4444)}.metro-volume-slider.boosted-red::-moz-range-thumb{background:var(--color-danger, #ef4444)}.metro-volume-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--color-border) 0%,var(--color-border) 66.7%,var(--color-warning, #eab308) 66.7%,var(--color-warning, #eab308) 80%,var(--color-danger, #ef4444) 80%,var(--color-danger, #ef4444) 100%);height:4px;border-radius:2px}.metro-controls-row{position:relative;background:#0000001a;border-top:1px solid var(--color-border);border-radius:0 0 var(--radius-sm) var(--radius-sm);margin:0 -1rem}.metro-player-content{display:flex;align-items:center;gap:.5rem;min-height:3.5rem;padding:0 2.25rem 0 1rem;flex-wrap:wrap}@media(max-width:579px){.metro-vol-group{flex:1 1 100%}.metro-player-content{gap:.375rem .5rem;padding:.375rem 2.25rem .375rem 1rem}.metro-play-btn{margin-left:calc(50% - 3rem)}}.tap-compact-section{display:flex;flex-direction:row;align-items:center;gap:.375rem;flex-shrink:0;margin-left:auto}.tap-pedal-btn-sm{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#3e3e52,#18182a);border:2px solid #5a5a7a;box-shadow:0 3px 7px #00000080,0 0 0 1px #28283c,inset 0 2px 3px #ffffff14,inset 0 -2px 5px #0006;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .07s ease,box-shadow .07s ease;flex-shrink:0}.tap-pedal-btn-sm:active{transform:scale(.92);box-shadow:0 1px 4px #0009,0 0 0 1px #28283c,inset 0 3px 8px #0009,inset 0 -1px 2px #ffffff0d}.tap-pedal-btn-sm .tap-pedal-label{font-size:.72rem}.tap-pedal-btn-sm .tap-pedal-sub{font-size:.45rem}.tap-pedal-label{font-size:.72rem;font-weight:900;letter-spacing:.06em;color:#c8c8e0;line-height:1}.tap-pedal-sub{font-size:.45rem;color:#6366f1;letter-spacing:.12em;line-height:1;margin-top:2px;font-weight:600}.tap-info-compact{display:flex;flex-direction:column;align-items:center;gap:.15rem}.tap-info-compact .tap-led-ring{width:10px;height:10px}.tap-led-ring{width:10px;height:10px;border-radius:50%;background:#1a1a2e;border:2px solid #3a3a50;box-shadow:inset 0 1px 3px #00000080;transition:background .05s ease,box-shadow .05s ease,border-color .05s ease}.tap-led-ring.led-on{background:var(--tap-led-color, var(--color-primary));border-color:var(--tap-led-color, var(--color-primary));box-shadow:0 0 10px var(--tap-led-color, var(--color-primary)),0 0 20px #6366f14d,inset 0 0 4px #ffffff4d}.tap-bpm-display{font-size:.8rem;font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums;min-width:3.5rem;text-align:center;background:#0003;border:1px solid var(--color-border);border-radius:4px;padding:.125rem .375rem;white-space:nowrap}.metro-play-btn{width:2.5rem;height:2.5rem;border-radius:50%;border:none;background:var(--color-primary);color:#fff;font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .1s}.metro-play-btn:active{transform:scale(.95)}.metro-play-btn.playing{background:var(--color-accent)}.metro-stop-btn{width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface-hover);color:var(--color-text);font-size:.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}.metro-stop-btn:active{background:var(--color-border)}.metro-footer{text-align:center;padding:.25rem 0;font-size:.6rem;color:var(--color-text-secondary);border-top:1px solid var(--color-border);background:#00000026}.sec-toggle-btn{width:28px;height:20px;display:flex;align-items:center;justify-content:center;background:var(--color-surface-hover);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font-size:.6rem;line-height:1;cursor:pointer;padding:0;opacity:.7;flex-shrink:0;transition:opacity .15s,background .15s;-webkit-user-select:none;user-select:none}.sec-toggle-btn:hover{opacity:1;background:var(--color-border)}.settings-sec-toggle:before{content:"▼"}.pattern-sec-toggle:before{content:"▼"}.header-sec-toggle{margin-left:.25rem}.header-sec-toggle:before{content:"▼"}.bpm-sec-toggle,.metro-player-sec-toggle{position:absolute;top:2px;right:2px;z-index:5}.bpm-sec-toggle:before{content:"▼"}.metro-player-sec-toggle:before{content:"▼"}[data-header-collapsed=true] .metronome-header>:not(.header-sec-toggle){display:none!important}[data-header-collapsed=true] .metronome-header{padding:3px .5rem;min-height:24px;justify-content:flex-end}[data-header-collapsed=true] .header-sec-toggle:before{content:"▶"}[data-bpm-collapsed=true] .metro-bpm-content{display:none}[data-bpm-collapsed=true] .metro-bpm-card{min-height:22px;padding:0}[data-bpm-collapsed=true] .bpm-sec-toggle:before{content:"▶"}[data-settings-collapsed=true] .metro-card-settings .metro-card-body{display:none}[data-settings-collapsed=true] .metro-card-settings{padding-bottom:.5rem}[data-settings-collapsed=true] .metro-card-settings .metro-card-header{margin-bottom:0}[data-settings-collapsed=true] .settings-sec-toggle:before{content:"▶"}[data-pattern-collapsed=true] .metro-card-pattern .metro-card-body{display:none}[data-pattern-collapsed=true] .metro-card-pattern{padding-bottom:.5rem}[data-pattern-collapsed=true] .metro-card-pattern .metro-card-header{margin-bottom:0}[data-pattern-collapsed=true] .pattern-sec-toggle:before{content:"▶"}[data-metro-player-collapsed=true] .metro-player-content{display:none}[data-metro-player-collapsed=true] .metro-controls-row{min-height:22px}[data-metro-player-collapsed=true] .metro-player-sec-toggle:before{content:"▶"}:root[data-theme=light] .metro-controls-row{background:#e8f0fc;border-top-color:#4f52d833}:root[data-theme=light] .metro-footer{background:#4f52d814;border-top-color:#4f52d833}:root[data-theme=light] .tap-pedal-btn-sm{background:radial-gradient(circle at 38% 35%,#7678ed,#4f52d8);border-color:#4048c4;box-shadow:0 3px 7px #4f52d859,0 0 0 1px #3840b8,inset 0 2px 3px #ffffff4d,inset 0 -2px 5px #00000026}:root[data-theme=light] .tap-pedal-btn-sm:active{box-shadow:0 1px 4px #4f52d866,0 0 0 1px #3840b8,inset 0 3px 8px #00000040,inset 0 -1px 2px #ffffff26}:root[data-theme=light] .tap-pedal-label{color:#fff}:root[data-theme=light] .tap-pedal-sub{color:#c7c9f8}:root[data-theme=light] .tap-bpm-display{background:#e8f0fc;border:1px solid rgba(79,82,216,.3);color:#2a2d6e}@media(prefers-color-scheme:light){:root:not([data-theme]) .metro-controls-row{background:#e8f0fc;border-top-color:#4f52d833}:root:not([data-theme]) .metro-footer{background:#4f52d814;border-top-color:#4f52d833}:root:not([data-theme]) .tap-pedal-btn-sm{background:radial-gradient(circle at 38% 35%,#7678ed,#4f52d8);border-color:#4048c4;box-shadow:0 3px 7px #4f52d859,0 0 0 1px #3840b8,inset 0 2px 3px #ffffff4d,inset 0 -2px 5px #00000026}:root:not([data-theme]) .tap-pedal-btn-sm:active{box-shadow:0 1px 4px #4f52d866,0 0 0 1px #3840b8,inset 0 3px 8px #00000040,inset 0 -1px 2px #ffffff26}:root:not([data-theme]) .tap-pedal-label{color:#fff}:root:not([data-theme]) .tap-pedal-sub{color:#c7c9f8}:root:not([data-theme]) .tap-bpm-display{background:#e8f0fc;border:1px solid rgba(79,82,216,.3);color:#2a2d6e}}.picker-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10001;background:#000000b8;display:flex;align-items:center;justify-content:center;padding:1rem}.picker-sheet{background:var(--color-surface);border-radius:var(--radius-md);padding:1.25rem 1rem 1rem;width:100%;max-width:400px;max-height:80vh;overflow-y:auto}.picker-sheet-title,.picker-dialog-title{font-size:1rem;font-weight:700;color:var(--color-text);margin-bottom:1rem;text-align:center}.picker-timesig-preview{font-size:2.5rem;font-weight:700;text-align:center;color:var(--color-primary);padding:.5rem 0 1rem;font-variant-numeric:tabular-nums}.picker-section-label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:.75rem 0 .5rem}.picker-denom-row{display:flex;gap:.5rem;justify-content:center;margin-bottom:.5rem}.picker-denom-btn{flex:1;max-width:5rem;padding:.5rem;border-radius:var(--radius-sm);border:2px solid var(--color-border);background:var(--color-bg);color:var(--color-text);font-size:1rem;font-weight:700;cursor:pointer;transition:all .15s;text-align:center}.picker-denom-btn.selected{border-color:var(--color-primary);background:#6366f126;color:var(--color-primary)}.picker-numer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.2rem,1fr));gap:.4rem;margin-bottom:1rem}.picker-numer-btn{padding:.5rem;border-radius:var(--radius-sm);border:2px solid var(--color-border);background:var(--color-bg);color:var(--color-text);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .15s;text-align:center}.picker-numer-btn.selected{border-color:var(--color-primary);background:#6366f126;color:var(--color-primary)}.picker-dialog-footer{display:flex;gap:.5rem;justify-content:flex-end;padding-top:.5rem;border-top:1px solid var(--color-border);margin-top:.5rem}.picker-grid{display:grid;gap:.5rem;margin-bottom:.5rem}.picker-grid-3{grid-template-columns:repeat(3,1fr)}.picker-cell{padding:.625rem .25rem;text-align:center;border-radius:8px;border:1px solid var(--color-border);cursor:pointer;font-weight:600;font-size:.8rem;background:var(--color-bg);color:var(--color-text);transition:background .1s,border-color .1s;-webkit-user-select:none;user-select:none}.picker-cell.selected{border-color:var(--color-primary);color:var(--color-primary);background:#6366f11a}.picker-cell-sym{font-size:1.3rem;display:block;line-height:1.4}.picker-cell-label{display:block;margin-top:.15rem}.picker-label-ko{display:block;font-size:.6rem;color:var(--color-text-secondary)}.picker-label-en{display:block;font-size:.55rem;color:var(--color-text-secondary);opacity:.75}.picker-cell:hover{background:var(--color-surface-hover)}.picker-cell.selected:hover{background:#6366f12e}.voice-syl-grid{gap:.4rem}.voice-syl-grid.cols-3{grid-template-columns:repeat(3,1fr)}.voice-syl-grid.cols-5{grid-template-columns:repeat(5,1fr)}.mute-cell{opacity:.6;font-style:italic}.source-badge-popup{position:fixed;z-index:1000;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 4px 16px #0000004d;overflow:hidden;min-width:160px}.source-badge-popup-item{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;cursor:pointer;font-size:.85rem;transition:background .12s}.source-badge-popup-item:hover{background:var(--color-surface-hover)}.hidden{display:none!important}.text-sm{font-size:.85rem}.text-secondary{color:var(--color-text-secondary)}.accent-grid.sub-dense .beat-group,.voice-pattern-grid.sub-dense .beat-group{gap:.15rem}.accent-grid.sub-dense .beat-group+.beat-group,.voice-pattern-grid.sub-dense .beat-group+.beat-group{margin-left:.08rem}.drum-pattern-grid.sub-dense .beat-group{gap:.12rem}.drum-pattern-grid.sub-dense .beat-group+.beat-group{margin-left:.06rem}.accent-grid.sub-dense .metro-accent-cell{width:calc(1.6rem * var(--metro-pattern-scale, 1));height:calc(1.6rem * var(--metro-pattern-scale, 1));font-size:calc(.6rem * var(--metro-pattern-scale, 1));border-width:1px}.drum-pattern-grid.sub-dense .drum-cell{width:calc(1.4rem * var(--metro-pattern-scale, 1));height:calc(1.4rem * var(--metro-pattern-scale, 1));font-size:calc(.55rem * var(--metro-pattern-scale, 1))}.voice-pattern-grid.sub-dense .voice-cell{width:calc(1.5rem * var(--metro-pattern-scale, 1));min-width:calc(1.5rem * var(--metro-pattern-scale, 1));max-width:calc(1.5rem * var(--metro-pattern-scale, 1));height:calc(1.6rem * var(--metro-pattern-scale, 1));padding:0 calc(.1rem * var(--metro-pattern-scale, 1));font-size:calc(.6rem * var(--metro-pattern-scale, 1))}@media(min-width:540px){.metronome-body{padding:1rem 1.5rem 1.5rem}.metro-accent-cell{width:calc(3.8rem * var(--metro-pattern-scale, 1));height:calc(3.8rem * var(--metro-pattern-scale, 1));font-size:calc(1.1rem * var(--metro-pattern-scale, 1))}.drum-cell{width:calc(3.2rem * var(--metro-pattern-scale, 1));height:calc(3.2rem * var(--metro-pattern-scale, 1));font-size:calc(.85rem * var(--metro-pattern-scale, 1))}.voice-cell{width:calc(3.5rem * var(--metro-pattern-scale, 1));min-width:calc(3.5rem * var(--metro-pattern-scale, 1));max-width:calc(3.5rem * var(--metro-pattern-scale, 1));height:calc(3.5rem * var(--metro-pattern-scale, 1));font-size:calc(1rem * var(--metro-pattern-scale, 1))}.accent-grid.sub-dense .metro-accent-cell{width:calc(1.9rem * var(--metro-pattern-scale, 1));height:calc(1.9rem * var(--metro-pattern-scale, 1));font-size:calc(.65rem * var(--metro-pattern-scale, 1))}.drum-pattern-grid.sub-dense .drum-cell{width:calc(1.6rem * var(--metro-pattern-scale, 1));height:calc(1.6rem * var(--metro-pattern-scale, 1));font-size:calc(.6rem * var(--metro-pattern-scale, 1))}.voice-pattern-grid.sub-dense .voice-cell{width:calc(1.7rem * var(--metro-pattern-scale, 1));min-width:calc(1.7rem * var(--metro-pattern-scale, 1));max-width:calc(1.7rem * var(--metro-pattern-scale, 1));height:calc(1.9rem * var(--metro-pattern-scale, 1));padding:0 calc(.1rem * var(--metro-pattern-scale, 1));font-size:calc(.65rem * var(--metro-pattern-scale, 1))}.pendulum-canvas{height:160px}}@media(min-width:768px){.metro-bpm-content,.metronome-body{max-width:720px}.metro-bottom-inner{max-width:560px}}@media(min-width:1024px){.metro-bpm-content,.metronome-body{max-width:860px}.metro-bottom-inner{max-width:680px}}@media(min-width:1440px){.metro-bpm-content,.metronome-body{max-width:1000px}.metro-bottom-inner{max-width:780px}}.syllable-pack-editor-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10002;background:#000000b3;display:flex;align-items:center;justify-content:center;padding:1rem}.syllable-pack-editor{background:var(--color-surface);border-radius:var(--radius-md);padding:1rem;width:100%;max-width:380px;max-height:90vh;overflow-y:auto;overflow-x:hidden;position:relative;box-sizing:border-box}.cv-syl-editor{max-width:320px}.spe-header{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem}.spe-name-warn{width:100%;font-size:.75rem;color:var(--color-danger, #ef4444);margin-top:-.25rem}.spe-name-input{flex:1;font-size:1rem;font-weight:700;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.375rem .5rem;background:var(--color-bg);color:var(--color-text)}.spe-name-label{flex:1;font-size:1rem;font-weight:700;color:var(--color-text);padding:.375rem .5rem}.spe-close-btn{font-size:1.25rem;line-height:1}.spe-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.3rem;margin-bottom:.75rem}.spe-slot{aspect-ratio:1;min-height:2.25rem;border-radius:var(--radius-sm);border:2px solid var(--color-border);background:#ffffff0a;color:var(--color-text-secondary);font-size:.65rem;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px}.spe-slot.empty{opacity:.45}.spe-slot.recorded{background:#6366f126;border-color:#6366f166;color:var(--color-primary);opacity:1}.spe-slot.selected{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary);transform:scale(1.05);opacity:1}.spe-slot-mute{background:#ffffff0a;border-color:var(--color-border);color:var(--color-text-secondary);font-style:italic;opacity:.5}.spe-tail-row{display:flex;align-items:center;gap:.375rem;margin-bottom:.5rem;font-size:.75rem;color:var(--color-text-secondary)}.spe-tail-input{width:4rem;padding:.2rem .3rem;font-size:.75rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);text-align:center}.spe-tail-unit{font-size:.7rem;opacity:.7}.spe-info-icon{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:50%;background:var(--color-border);color:var(--color-text-secondary);font-size:.6rem;font-weight:700;font-style:italic;cursor:pointer;margin-left:.25rem;position:relative;flex-shrink:0;vertical-align:middle}.spe-info-tooltip{display:none;position:absolute;bottom:calc(100% + 6px);left:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.4rem .6rem;font-size:.7rem;font-style:normal;font-weight:400;color:var(--color-text);white-space:normal;width:max-content;max-width:min(16rem,calc(100vw - 2rem));z-index:100;box-shadow:0 2px 8px #0003;line-height:1.4}.spe-info-tooltip.show{display:block}.spe-controls{display:flex;gap:.375rem;justify-content:center;flex-wrap:wrap}.spe-delete-pack-row{display:flex;justify-content:center;margin-top:.25rem}.spe-delete-pack-btn{opacity:.6;font-size:.75rem}.spe-save-btn.spe-saving{opacity:.7;pointer-events:none}.spe-save-btn.spe-saving:before{content:"";display:inline-block;width:.75em;height:.75em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spe-spin .6s linear infinite;margin-right:.35em;vertical-align:middle}@keyframes spe-spin{to{transform:rotate(360deg)}}.spe-recording-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--radius-md);z-index:10;gap:.5rem}.spe-countdown{font-size:4rem;font-weight:900;color:#ef4444;animation:spe-pulse .5s ease-in-out}.spe-recording-label{font-size:1rem;font-weight:700;color:#ef4444;animation:spe-blink .5s infinite}@keyframes spe-pulse{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes spe-blink{50%{opacity:.3}}.spe-input-choice-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10003}.spe-input-choice-dialog{background:var(--color-surface);border-radius:var(--radius-md);padding:1.25rem;min-width:240px;max-width:320px;box-shadow:0 8px 32px #0006}.spe-input-choice-title{font-weight:700;font-size:.9375rem;margin-bottom:1rem;text-align:center;color:var(--color-text)}.spe-input-choice-btns{display:flex;gap:.5rem}.spe-input-choice-btns .btn{flex:1}.custom-voice-pattern-grid{display:flex;flex-direction:column;gap:.25rem;justify-content:center}.voice-pattern-editor{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;padding-bottom:2px}.pattern-scale-btns{display:inline-flex;gap:.25rem;align-items:center;margin-left:auto;margin-right:.375rem}.pattern-scale-btn{font-size:.7rem;padding:.15rem .4rem;line-height:1}.cv-sync-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10001;background:#000000b3;display:flex;align-items:center;justify-content:center;padding:1rem}.cv-sync-dialog{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md, .75rem);width:auto;min-width:16rem;max-width:min(25rem,calc(100vw - 2rem));max-height:80vh;overflow-y:auto;padding:1rem;box-sizing:border-box}.cv-sync-title{font-size:1.05rem;font-weight:600;margin-bottom:.35rem}.cv-sync-desc{font-size:.8rem;color:var(--color-text-secondary);margin-bottom:1rem}.cv-sync-pack{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm, .5rem);padding:.75rem;margin-bottom:.5rem}.cv-sync-pack-name{font-weight:600;font-size:.9rem;margin-bottom:.2rem}.cv-sync-pack-info{font-size:.75rem;color:var(--color-text-secondary);margin-bottom:.5rem}.cv-sync-actions{display:flex;gap:.5rem}.cv-sync-actions .btn{flex:1;font-size:.8rem}.cv-sync-footer{margin-top:.75rem;display:flex;justify-content:flex-end}.cv-sync-checking{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 0}.cv-sync-check-msg{font-size:.85rem;color:var(--color-text-secondary)}.cv-sync-progress{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--color-text-secondary)}