.bpm-slider-container{display:flex;align-items:center;width:100%;box-sizing:border-box;--thumb-size: 22px;--thumb-radius: 50%}.bpm-slider-track{position:relative;width:100%;height:8px;background-color:var(--color-bg-secondary);cursor:pointer;touch-action:none;border-radius:16px}.bpm-slider-fill{position:absolute;top:0;left:0;height:100%;max-width:100%;background:linear-gradient(to right,var(--color-primary),var(--color-primary));border-radius:16px;transition:width .1s ease}.bpm-slider-thumb{position:absolute;top:50%;transform:translateY(-50%);width:var(--thumb-size);height:var(--thumb-size);background-color:var(--color-primary);border:none;border-radius:50%;cursor:grab;box-shadow:var(--shadow-md);transition:left .1s ease,transform .1s ease}.bpm-slider-thumb:active{cursor:grabbing;transform:translateY(-50%) scale(1.2)}.bpm-slider-track:hover .bpm-slider-thumb{box-shadow:var(--shadow-lg)}.bpm-slider-disabled{cursor:not-allowed;opacity:.6}.beat-dots{display:flex;align-items:center;gap:6px;flex-shrink:0}.beat-dot{width:10px;height:10px;min-width:10px;min-height:10px;border-radius:50%;background-color:var(--color-text-dim);transition:all .1s ease;flex-shrink:0}.beat-dot.active{background-color:var(--color-secondary);box-shadow:0 0 12px var(--color-secondary);transform:scale(1.2)}.beat-dot:first-child.active{background-color:var(--color-warning);box-shadow:0 0 12px var(--color-warning)}.play-button{width:48px;height:48px;min-width:48px;min-height:48px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:var(--color-text);border-radius:50%;box-shadow:none;flex-shrink:0}.play-button:active{transform:scale(.95)}.play-button svg{width:20px;height:20px}.play-button.paused svg.play-icon{transform:translate(1px)}.play-button-count{font-family:var(--font-family-alt);font-size:var(--font-size-md);line-height:1;color:var(--color-text)}.metronome-bar{position:sticky;top:0;z-index:100;display:flex;flex-direction:column;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:none;border-radius:var(--border-radius-sm);box-shadow:none}.metronome-row{display:flex;align-items:center;width:100%}.metronome-row-top{position:relative;justify-content:space-between;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.beat-indicator-group{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs);padding-left:0;cursor:pointer;border-radius:var(--border-radius-sm);transition:background-color .2s ease}.loop-count-group{display:flex;align-items:center;gap:var(--spacing-xs)}.metronome-row-bottom{width:100%}.bpm-control-group{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--spacing-sm);pointer-events:none}.bpm-control-group>*{pointer-events:auto}.bpm-display{display:flex;flex-direction:column;align-items:center;justify-content:center;width:70px;font-family:var(--font-family-alt)}.bpm-control-button{width:var(--button-size);height:var(--button-size);min-width:var(--button-size);min-height:var(--button-size);padding:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs);color:var(--color-text);background-color:transparent;border:none;border-radius:var(--border-radius-sm);cursor:pointer;flex-shrink:0}.bpm-value{position:relative;font-size:2.5rem;font-weight:600;line-height:1;color:var(--color-primary);text-shadow:0 0 20px var(--accent-glow);display:inline-block;vertical-align:middle}.bpm-value-integer{display:inline-block}.bpm-value-decimal{position:absolute;font-size:var(--font-size-sm);font-weight:600;line-height:1;color:var(--color-primary);text-shadow:0 0 20px var(--accent-glow);bottom:4px;right:-12px}.bpm-value-clickable{position:absolute;width:50%;height:50%;top:50%;transform:translateY(-50%);cursor:pointer;z-index:1}.bpm-value-clickable-left{left:0}.bpm-value-clickable-right{right:0}.bpm-rate-label{font-size:.75rem;line-height:1;color:var(--color-text-secondary);opacity:.7;margin-bottom:2px}.bpm-unit{font-size:var(--font-size-xs);color:var(--color-text-secondary);letter-spacing:.1em}.drum-notation-container{width:max-content;min-width:100%;border:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;flex-shrink:0;position:relative;box-sizing:border-box;margin-top:var(--spacing-sm)}.drum-notation-svg{display:block}.grid-cell{width:var(--grid-cell-size);height:var(--grid-cell-size);min-width:var(--grid-cell-size);min-height:var(--grid-cell-size);padding:var(--spacing-xs);cursor:pointer;position:absolute;border-radius:0!important;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;touch-action:manipulation;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;flex-shrink:0;top:0}.grid-cell:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--grid-cell-real-size);height:var(--grid-cell-real-size);background-color:var(--grid-cell-bg);border-radius:var(--border-radius-sm);z-index:0}.grid-cell.alt-beat:after{background-color:var(--grid-cell-bg-alt)}.grid-cell:last-child{border-right:none}.grid-cell.active{box-shadow:none}.grid-cell.active:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--grid-cell-real-size);height:var(--grid-cell-real-size);background:var(--color-secondary);border-radius:var(--border-radius-sm);z-index:1}.grid-cell.current-beat{background-color:var(--color-active-bg);box-shadow:none}.grid-cell.current-beat:after{display:none}.grid-cell.active.current-beat{background-color:var(--color-active-bg);box-shadow:none}.grid-cell.active.current-beat:before{background:var(--color-secondary)}.grid-cell.ghost:before{opacity:.4}.grid-cell.ghost.current-beat:before{opacity:.4}.grid-cell.grace:before{background:linear-gradient(to right,rgba(80,250,123,.4) 0%,rgba(80,250,123,1) 100%)}.grid-cell.grace.current-beat:before{background:linear-gradient(to right,rgba(80,250,123,.4) 0%,rgba(80,250,123,1) 100%)}.grid-cell.thirty-second:after,.grid-cell.thirty-second:before{background:transparent}.grid-cell .cell-32-dots{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;width:var(--grid-cell-real-size);height:var(--grid-cell-real-size);background:var(--color-bg)}.grid-cell .cell-32-dots.double{justify-content:space-between}.grid-cell .cell-32-dots.first{justify-content:flex-start}.grid-cell .cell-32-dots.second{justify-content:flex-end}.grid-cell .cell-32-dots .dot{width:calc(50% - 2px);height:100%;background:var(--color-secondary);flex-shrink:0;border-radius:var(--border-radius-sm)}.grid-container{width:100%;border:none;border-radius:var(--border-radius-sm);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.grid-wrapper{display:flex;min-width:fit-content}.grid-content{display:flex;flex-direction:column}.grid-beat-labels{display:flex;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;height:24px;position:relative;flex-shrink:0}.grid-beat-label-group{position:relative;border:none}.grid-beat-label{position:absolute;height:100%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs);color:var(--color-text);border:none;background-color:transparent}.grid-rows{display:flex;flex-direction:column}.grid-row{display:flex;position:relative;height:var(--grid-cell-size);min-height:var(--grid-cell-size);max-height:var(--grid-cell-size);box-sizing:border-box}.grid-row:last-child{border-bottom:none}.grid-row:before{content:"";position:absolute;left:0;right:0;height:1px;background-color:transparent}.bar-controls{display:flex;align-items:center;gap:var(--spacing-xs);padding:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:none;border-radius:var(--border-radius-sm)}.bar-count{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-xs);color:var(--color-text)}.bar-control-button{width:var(--button-size);height:var(--button-size);min-width:var(--button-size);min-height:var(--button-size);padding:0;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:var(--color-text);font-size:var(--font-size-xs);border-radius:var(--border-radius-sm);border:none;box-shadow:none;cursor:pointer}.bar-bpm-button{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}.bar-bpm-button.active{background:var(--color-primary);color:var(--color-text);border-color:var(--color-primary)}.loop-range-selector{display:flex;align-items:center;gap:var(--spacing-xs);padding:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:none;border-radius:var(--border-radius-sm);flex-shrink:0}.loop-range-text{font-size:var(--font-size-xs);color:var(--color-text)}.loop-range-controls,.loop-range-item{display:flex;align-items:center;gap:var(--spacing-xs)}.loop-range-button{width:var(--button-size);height:var(--button-size);min-width:var(--button-size);min-height:var(--button-size);padding:0;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:var(--color-text);font-size:var(--font-size-xs);border:none;border-radius:var(--border-radius-sm);cursor:pointer;box-shadow:none}.loop-range-value{font-size:var(--font-size-xs);color:var(--color-text);text-align:center}.loop-range-separator{color:var(--color-text-secondary);margin:0 var(--spacing-xs)}.loop-pattern-select{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;border:none;color:var(--color-text);height:var(--button-size);font-size:var(--font-size-xs);font-family:inherit;font-weight:600;padding:0;cursor:pointer;text-align:center;min-width:10px}.loop-pattern-select:focus{outline:none}.loop-pattern-select option{background:var(--color-bg);color:var(--color-text)}.pattern-tabs{display:flex;align-items:center;gap:var(--spacing-xs);flex-shrink:0;width:100%}.pattern-tabs-content{display:flex;align-items:center;gap:var(--spacing-xs);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.pattern-tabs-content::-webkit-scrollbar{display:none}.pattern-tab{width:var(--button-size);height:var(--button-size);min-width:var(--button-size);min-height:var(--button-size);padding:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-tap-highlight-color:transparent;will-change:border-color,background-color;isolation:isolate}.pattern-tab.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text);-webkit-transform:translateZ(0);transform:translateZ(0)}.pattern-tab.draft-tab{color:var(--color-text)}.pattern-tab.draft-tab.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text);-webkit-transform:translateZ(0);transform:translateZ(0)}.pattern-tab:not(.active){border-color:var(--color-border)}.import-input-container{display:flex;align-items:center;gap:var(--spacing-xs)}.import-input{width:calc(var(--button-size) * 2);height:var(--button-size);padding:0 6px;font-size:var(--font-size-xs);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-primary);border-radius:var(--border-radius-sm);outline:none;-webkit-user-select:text;user-select:text}.import-input::placeholder{color:var(--color-text-secondary);opacity:.6}.import-input:focus{border-color:var(--color-primary);box-shadow:none}.action-button.confirm-button{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text)}.action-button.confirm-button:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.action-button.confirm-button.active{transform:scale(.95);opacity:.8}.action-button.save-button,.action-button.load-button{background:transparent;border:1px solid var(--color-border)}.action-button.save-button.active,.action-button.load-button.active{transform:scale(.95);opacity:.8}.pattern-editor{display:flex;flex-direction:column;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:none;border-radius:var(--border-radius-sm);flex:1;min-height:0;overflow:hidden}.pattern-editor-controls{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--spacing-md);flex-shrink:0;padding:0;flex-wrap:wrap;width:100%;margin-bottom:var(--spacing-sm)}.pattern-bar-tools,.pattern-copy-controls{display:flex;align-items:center;gap:var(--spacing-xs)}.pattern-editor-scrollable{display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden;flex:1;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.pattern-editor.landscape-mode .pattern-editor-scrollable{flex:none}.pattern-editor-scrollable::-webkit-scrollbar{display:none}.pattern-editor-actions{display:flex;align-items:center;gap:var(--spacing-xs);flex-shrink:0;padding:0;width:100%}.pattern-editor-actions-left{display:flex;align-items:center;gap:var(--spacing-xs);flex:1;min-width:0}.pattern-editor-actions-right{display:flex;align-items:center;gap:var(--spacing-xs);flex-shrink:0}.action-button{padding:0;font-size:var(--font-size-xs);border-radius:var(--border-radius-sm);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:var(--button-size);height:var(--button-size);min-width:var(--button-size);min-height:var(--button-size)}.save-button{background:var(--color-primary);color:var(--color-text);box-shadow:none}.save-current-button{background:var(--color-secondary);color:var(--color-text);border:1px solid var(--color-secondary);box-shadow:none}.save-current-button.active{transform:scale(.95);opacity:.8}.load-button{background:var(--color-primary);color:var(--color-text);box-shadow:none}.delete-button{background-color:var(--color-danger);color:var(--color-text);border:none}.clear-button{background-color:var(--color-warning-hover);color:var(--color-text);border:none}.export-input{width:calc(var(--button-size) * 3);height:var(--button-size);padding:0 6px;font-size:var(--font-size-xs);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-secondary);border-radius:var(--border-radius-sm);outline:none;-webkit-user-select:text;user-select:text}.export-input:focus{border-color:var(--color-secondary);box-shadow:none}.bgm-controls-container{margin-top:var(--spacing-sm);max-width:100%;overflow:hidden}.bgm-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm);width:100%;font-size:var(--font-size-xs)}.bgm-controls-left,.bgm-controls-right{display:flex;align-items:center;gap:var(--spacing-xs)}.bgm-controls-left{flex:1;min-width:0}.bgm-file-input{display:none}.bgm-file-name{font-size:var(--font-size-xs);color:var(--color-text);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bgm-control-group{display:flex;align-items:center;gap:2px}.bgm-control-button{width:var(--button-size);height:var(--button-size);min-width:var(--button-size);min-height:var(--button-size);padding:0;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:var(--color-text);font-size:var(--font-size-xs);border:none;border-radius:var(--border-radius-sm);cursor:pointer;box-shadow:none}.bgm-delete-button{width:var(--button-size);height:var(--button-size);min-width:var(--button-size);min-height:var(--button-size);padding:0;display:flex;align-items:center;justify-content:center;background-color:var(--color-danger);color:var(--color-text);border:none;border-radius:var(--border-radius-sm);cursor:pointer;box-shadow:none}.bgm-control-center{display:flex;align-items:center;gap:4px;padding:0 6px;height:calc(var(--button-size) - 2px);background:var(--color-surface);border-radius:var(--border-radius-sm);justify-content:center;border:none}.bgm-offset-display{cursor:pointer;font-size:var(--font-size-xs);color:var(--color-text);padding:0}.bgm-volume-display{cursor:pointer;font-size:var(--font-size-xs);color:var(--color-text);padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.bgm-offset-input{width:calc(var(--button-size) * 2);height:var(--button-size);padding:0 6px;font-size:var(--font-size-xs);font-weight:inherit;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-secondary);border-radius:var(--border-radius-sm);outline:none;-webkit-user-select:text;user-select:text}.bgm-control-icon{color:currentColor;display:block}.bgm-control-value{font-variant-numeric:tabular-nums}.bgm-error{margin-top:2px;padding-bottom:2px;font-size:var(--font-size-xs);color:var(--color-danger);width:100%}.renderer-toggle-button{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}.renderer-toggle-button.active{background:var(--color-primary);color:var(--color-text);border-color:var(--color-primary)}.practice-toggle-button,.count-in-toggle-button{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}.practice-toggle-button.active,.count-in-toggle-button.active{background:var(--color-primary);color:var(--color-text);border-color:var(--color-primary)}.bottom-play-button-container{position:fixed;bottom:calc(var(--spacing-lg) + var(--spacing-xs) + max(env(safe-area-inset-bottom),var(--spacing-xs)));left:0;right:0;display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);padding-left:var(--spacing-md);padding-right:var(--spacing-md);z-index:100;pointer-events:none;margin:0 auto}.bottom-play-button-container.inline{position:static;bottom:auto;left:auto;right:auto;padding:0;pointer-events:auto}.bottom-play-button{width:64px;height:64px;min-width:64px;min-height:64px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:var(--color-text);border-radius:50%;box-shadow:0 4px 12px #0000004d;pointer-events:auto;border:none;cursor:pointer}.bottom-play-button.inline{width:48px;height:48px;min-width:48px;min-height:48px;box-shadow:none}.bottom-play-button.inline svg{width:20px;height:20px}.bottom-play-button:active{transform:scale(.95)}.bottom-play-button.paused svg.play-icon{transform:translate(1px)}.settings{position:fixed;padding-left:inherit;padding-right:inherit;bottom:calc(var(--spacing-xs) + max(env(safe-area-inset-bottom),var(--spacing-xs)));left:0;right:0;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--color-text-tertiary);background-color:var(--bg-color);z-index:99;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease;pointer-events:auto}.settings.hidden{opacity:0;transform:translateY(20px);pointer-events:none}.settings-first-hint{position:fixed;height:var(--button-size);padding-left:inherit;padding-right:inherit;bottom:calc(var(--spacing-xs) + max(env(safe-area-inset-bottom),var(--spacing-xs)));left:0;right:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--color-text-tertiary);z-index:100;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.settings-first-hint.visible{opacity:1;transform:translateY(0)}.settings.visible{opacity:1;transform:translateY(0);pointer-events:auto}.updating{animation:pulse 1.5s ease-in-out infinite}.settings-theme{display:flex;align-items:center}.settings-theme-button{padding:0;font-size:var(--font-size-xs);border-radius:var(--border-radius-sm);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:var(--button-size);height:var(--button-size);min-width:var(--button-size);min-height:var(--button-size);background:transparent;color:var(--color-text-tertiary);transition:color .2s,background-color .2s}.settings-config{display:flex;align-items:center;gap:var(--spacing-xs)}.settings-config-button{padding:0;font-size:var(--font-size-xs);border-radius:var(--border-radius-sm);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:var(--button-size);height:var(--button-size);min-width:var(--button-size);min-height:var(--button-size);background:transparent;color:var(--color-text-tertiary);transition:color .2s,background-color .2s}.settings-config-button:disabled{opacity:.5;cursor:not-allowed}.exporting{pointer-events:none}.settings-modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}.settings-modal{background-color:var(--bg-color);width:90%;max-width:500px;max-height:80vh;border-radius:var(--border-radius-md);box-shadow:0 0 30px 10px #0000004d;display:flex;flex-direction:column;animation:slideIn .3s ease-out;overflow:hidden;font-weight:400}.settings-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md)}.settings-modal-header h2{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text)}.settings-modal-close{padding:0;border:none;background:transparent;cursor:pointer;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--border-radius-sm);transition:color .2s,background-color .2s}.settings-modal-close:hover{color:var(--color-text-primary);background-color:var(--color-bg-hover)}.settings-modal-content{padding:var(--spacing-md);overflow-y:auto;flex:1}.settings-modal-description{margin:0 0 var(--spacing-md) 0;color:var(--color-text-secondary);line-height:1.6;font-weight:600}.settings-modal-subtitle{margin:0 0 var(--spacing-xs) 0;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary)}.settings-modal-section{margin-bottom:var(--spacing-md)}.settings-modal-section h3{margin:0 0 var(--spacing-xs) 0;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary)}.settings-modal-section ul{margin:0;padding-left:0;list-style:none;color:var(--color-text-secondary);line-height:1.8}.settings-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;vertical-align:middle}.settings-icon svg{width:100%;height:100%;display:block}.settings-modal-placeholder{margin:0;color:var(--color-text-secondary);line-height:1.6}.settings-modal-version{padding:var(--spacing-md);text-align:center;color:var(--color-text-tertiary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s,background-color .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.sample-selection-list{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.sample-selection-item{display:flex;align-items:center}.sample-selection-drum{color:var(--color-text-primary);font-weight:600}.sample-selection-variants{display:flex;gap:var(--spacing-xs);flex:1;justify-content:flex-end}.sample-variant-button{width:var(--button-size);height:var(--button-size);min-width:var(--button-size);min-height:var(--button-size);background-color:var(--bg-color);color:var(--color-text);cursor:pointer}.sample-variant-button.active{background-color:var(--color-primary)}:root{--bg-color: #282a36;--card-bg: #44475a;--color-bg: #282a36;--color-bg-secondary: #21222c;--color-text: #f8f8f2;--color-text-secondary: #6272a4;--color-text-dim: #6272a4;--color-border: rgba(139, 233, 253, .3);--color-primary: #bd93f9;--color-primary-hover: #ff79c6;--color-secondary: #50fa7b;--color-active: #50fa7b;--color-active-bg: rgba(80, 250, 123, .2);--accent-glow: rgba(189, 147, 249, .3);--color-danger: #ff5555;--color-danger-hover: #ff6e6e;--color-warning: #f2f28c;--color-warning-hover: #ffb86c;--glass-bg: rgba(68, 71, 90, .5);--glass-bg-hover: rgba(68, 71, 90, .7);--glass-border: rgba(139, 233, 253, .3);--overlay-bg: rgba(40, 42, 54, .9);--grid-border: rgba(139, 233, 253, .2);--grid-cell-bg: #1a3a2a;--grid-cell-bg-alt: #1a3a2a94;--color-text-tertiary: #6272a4;--color-beat-line: #8be9fd;--theme-color: #282a36;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 24px;--spacing-xl: 32px;--font-family: "Consolas", "Monaco", "Courier New", "Menlo", "Fira Code", "Source Code Pro", monospace;--font-family-alt: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-md: 14px;--font-size-lg: 16px;--font-size-xl: 20px;--border-radius-sm: 2px;--border-radius-md: 8px;--border-radius-lg: 12px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 2px 4px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 8px rgba(0, 0, 0, .15);--metronome-bar-height: 70px;--app-max-width: 700px;--grid-cell-size: clamp( 23px, 5.852vw, calc((var(--app-max-width) - var(--spacing-md) * 2) * 23 / 369) );--grid-cell-real-size: clamp( 20px, 5.09vw, calc((var(--app-max-width) - var(--spacing-md) * 2) * 20 / 369) );--button-size: clamp(24px, 6.4vw, 28px);--beat-divider-color: #bd93f9;--subdivision-divider-color: rgba(139, 233, 253, .2)}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}body{font-family:var(--font-family);font-size:var(--font-size-xs);font-weight:600;color:var(--color-text);background-color:var(--bg-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;width:100vw;height:100vh;height:100dvh;-webkit-tap-highlight-color:transparent;margin:0;padding:0;-webkit-text-size-adjust:100%}#root{width:100%;height:100vh;height:100dvh;margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden}.app{position:fixed;left:50%;top:0;transform:translate(-50%);display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;min-width:375px;max-width:var(--app-max-width);margin:0 auto;overflow:hidden;box-sizing:border-box;padding-top:calc(var(--spacing-xs) + max(env(safe-area-inset-top),var(--spacing-xs)));padding-left:var(--spacing-md);padding-right:var(--spacing-md);padding-bottom:calc(var(--spacing-xs) + max(env(safe-area-inset-bottom),var(--spacing-xs)));gap:var(--spacing-md)}.app.loading{justify-content:center;align-items:center;padding-bottom:var(--spacing-md);opacity:1;transition:opacity .3s ease}.app.loading.fade-out{opacity:0}.loading-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.loading-spinner{width:48px;height:48px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.loading-progress{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);width:200px}.loading-progress-bar{width:100%;height:4px;background-color:var(--color-border);border-radius:2px;overflow:hidden}.loading-progress-fill{height:100%;background:var(--color-primary);border-radius:2px;transition:width .3s ease}.loading-progress-text{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:var(--font-size-md);color:var(--color-text-secondary);margin:0}.app-header{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);flex-shrink:0}.app-title{font-size:2rem;letter-spacing:.1rem;background:linear-gradient(to right,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.app-main{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}button{font-family:inherit;font-size:inherit;font-weight:inherit;border:none;background:none;cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);touch-action:manipulation;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}button:not(.grid-cell):active{transform:scale(.95);opacity:.8}button:disabled{opacity:.3;cursor:not-allowed}button:disabled:active{transform:none;opacity:.3}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:var(--border-radius-sm)}.neon-border{border:1px solid var(--color-primary);box-shadow:0 0 15px var(--accent-glow)}input{font-family:inherit;font-size:inherit;border:1px solid var(--color-border);border-radius:var(--border-radius-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--card-bg);color:var(--color-text)}input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--accent-glow)}@media all and (display-mode: standalone){body,#root,.app{height:100vh}}