:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-app-bg:#10141b;--color-panel-bg:#1e222b;--color-active:#3b82f6;--color-primary:#4f46e5;--color-text:#e8edf5;--color-text-muted:color-mix(in srgb, color-mix(in srgb, var(--color-text) 42%, var(--color-panel-bg) 58%) 76%, #949494 24%);--color-text-subtle:color-mix(in srgb, var(--color-text-muted) 58%, var(--color-app-bg) 42%);--color-on-primary:#f4f6fc;--color-on-active:#f8fafc;--color-key-white:#ecebe9;--color-key-border:#bcb9b4;--color-key-black:#141414;--color-key-black-border:#2c2c2c;--color-key-active:color-mix(in srgb, var(--color-active) 38%, var(--color-key-white) 62%);--color-chrome-neutral:color-mix(in srgb, var(--color-panel-bg) 58%, #b2b2b3 42%);--color-chrome-neutral-2:color-mix(in srgb, var(--color-panel-bg) 42%, #808082 58%);--color-active-bg:color-mix(in srgb, var(--color-active) 56%, black);--color-active-glow:color-mix(in srgb, var(--color-active) 35%, transparent);--color-primary-border:color-mix(in srgb, var(--color-primary) 68%, var(--color-chrome-neutral) 32%);--color-panel-border:color-mix(in srgb, var(--color-panel-bg) 72%, var(--color-chrome-neutral) 28%);--color-surface-inset:color-mix(in srgb, var(--color-panel-bg) 55%, var(--color-app-bg) 45%);--color-inset-border:color-mix(in srgb, var(--color-surface-inset) 70%, var(--color-chrome-neutral-2) 30%);--color-button-fill:color-mix(in srgb, var(--color-panel-bg) 62%, var(--color-app-bg) 38%);--color-button-edge:color-mix(in srgb, var(--color-button-fill) 72%, var(--color-chrome-neutral-2) 28%);--color-secondary-outline:color-mix(in srgb, var(--color-panel-border) 58%, var(--color-chrome-neutral-2) 42%);--color-link-border:color-mix(in srgb, var(--color-panel-border) 52%, var(--color-chrome-neutral) 48%);--color-editor-border:color-mix(in srgb, var(--color-panel-bg) 52%, var(--color-app-bg) 48%);--color-editor-fill:color-mix(in srgb, var(--color-app-bg) 48%, var(--color-panel-bg) 52%);--color-action-success-bg:#3d9a56;--color-action-success-bg-hover:#449d5e;--color-action-success-border:#2d7340;--color-action-success-border-hover:#326648;--color-action-success-text:#f4fcf6;--color-action-success-text-hover:#fff;--color-action-success-focus:#5cb878bf;--color-action-danger-bg:color-mix(in srgb, #c94c4c 88%, var(--color-button-fill) 12%);--color-action-danger-bg-hover:#d86969;--color-action-danger-border:color-mix(in srgb, #e07070 55%, var(--color-button-edge) 45%);--color-action-danger-border-hover:color-mix(in srgb, #f09090 50%, var(--color-button-edge) 50%);--color-action-danger-text:#fdf5f5;--color-action-danger-focus:#f0a0a0b3;--color-action-warning-bg:#e4b82a;--color-action-warning-bg-hover:#ebb835;--color-action-warning-border:#b88912;--color-action-warning-border-hover:#a67a0f;--color-action-warning-focus:#f5d060d9;--color-on-warning:#1a1406;--color-action-info-bg:#3a7ab8;--color-action-info-bg-hover:#4186c7;--color-action-info-border:#2d5f92;--color-action-info-border-hover:#285985;--color-action-info-text:#f0f7fc;--color-action-info-text-hover:#fff;--color-action-info-split-border:color-mix(in srgb, var(--color-action-info-border) 72%, transparent 28%);--color-action-info-focus:#6aa8e8bf;--color-action-info-choice-bg:color-mix(in srgb, var(--color-action-info-bg) 22%, var(--color-surface-inset) 78%);--color-action-info-choice-text:#e8f2fc;--color-focus-ring:color-mix(in srgb, var(--color-chrome-neutral-2) 78%, transparent 22%);--color-accent-focus-soft:color-mix(in srgb, var(--color-active) 70%, transparent 30%);--color-playback-ring:#e6c369;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.4}:root[data-theme-text=dark-glyphs]{--color-text:#181b22;--color-text-muted:color-mix(in srgb, color-mix(in srgb, var(--color-text) 50%, var(--color-panel-bg) 50%) 72%, #686766 28%);--color-text-subtle:color-mix(in srgb, var(--color-text-muted) 56%, var(--color-panel-bg) 44%);--color-on-warning:#1a1406;--color-chrome-neutral:color-mix(in srgb, var(--color-panel-bg) 54%, #3a3a3c 46%);--color-chrome-neutral-2:color-mix(in srgb, var(--color-panel-bg) 38%, #28282a 62%);--color-playback-ring:#ac7f18;--color-action-info-choice-text:color-mix(in srgb, var(--color-text) 88%, var(--color-action-info-bg) 12%)}*,:before,:after{box-sizing:border-box}body{min-height:100vh;color:var(--color-text);background-color:var(--color-app-bg);margin:0}#root{min-height:100dvh;color:var(--color-text);background-color:var(--color-app-bg);flex-direction:column;display:flex}.srOnly{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.appShell{text-align:left;gap:12px;max-width:1100px;margin:0 auto;padding:20px;display:grid}@media (width>=881px){.appShell{box-sizing:border-box;flex-direction:column;flex:auto;width:100%;min-height:0;display:flex}}.appHeader{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 14px;margin:0;display:flex}.appHeaderActions{flex-wrap:wrap;justify-content:flex-end;align-self:flex-start;align-items:center;gap:8px;display:flex}.appHeaderText{min-width:0}.appHeaderTitle{margin:0 0 6px;line-height:0}.appHeaderWordmark{width:auto;max-width:min(100%,300px);height:clamp(28px,5.5vw,40px);display:block}.appHeaderText p{color:var(--color-text-muted);margin:0}.appHeaderTagline{max-width:36rem;font-size:.86rem;line-height:1.45}.appHeaderTaglineShort{display:none}@media (width<=680px){.appHeaderTaglineFull{display:none}.appHeaderTaglineShort{display:inline}}.themeSettingsOpenButton{box-sizing:border-box;border-radius:10px;flex:none;min-width:44px;min-height:44px;margin:0;padding:8px 11px;line-height:1}.themeSettingsOpenButtonIcon{font-size:1.25rem;display:block}.themeSettingsDialog{border:1px solid var(--color-panel-border);background:var(--color-panel-bg);width:min(400px,100%);max-width:calc(100vw - 32px);color:var(--color-text);border-radius:12px;padding:0}.themeSettingsDialog::backdrop{background:#0000008c}.themeSettingsDialogPanel{gap:12px;padding:16px 18px;display:grid}.themeSettingsTitle{margin:0;font-size:1.15rem}.themeSettingsIntro{color:var(--color-text-muted);margin:0;font-size:.86rem}.themeSettingsControlBlock{gap:6px;display:grid}.themeSettingsControlLabel{color:var(--color-text);font-size:.82rem;font-weight:600}.themeSettingsControlHint{margin:0}.themeSettingsSelect{box-sizing:border-box;appearance:none;width:100%;font:inherit;border:1px solid var(--color-inset-border);background-color:var(--color-surface-inset);color:var(--color-text);cursor:pointer;accent-color:var(--color-active);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238896a8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 8 9 4.5'/%3E%3C/svg%3E");background-position:right .62rem center;background-repeat:no-repeat;background-size:.68rem .68rem;border-radius:8px;margin:0;padding:9px 2.35rem 9px 11px;font-size:.9rem;font-weight:500;line-height:1.35}:root[data-theme-text=dark-glyphs] .themeSettingsSelect{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23505866' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 8 9 4.5'/%3E%3C/svg%3E")}.themeSettingsSegmented{grid-template-columns:1fr 1fr;gap:6px;display:grid}.themeSettingsSegmentedThree{grid-template-columns:1fr 1fr 1fr}.themeSettingsSegment{border:1px solid var(--color-secondary-outline);color:var(--color-text-muted);font:inherit;cursor:pointer;background:0 0;border-radius:8px;margin:0;padding:8px 10px;font-size:.82rem;font-weight:600}.themeSettingsSegment:hover{background:color-mix(in srgb, var(--color-surface-inset) 70%, var(--color-panel-bg) 30%);color:var(--color-text)}.themeSettingsSegment:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.themeSettingsSegmentActive{border-color:var(--color-primary-border);background:color-mix(in srgb, var(--color-primary) 26%, var(--color-surface-inset) 74%);color:var(--color-on-primary)}.themeSettingsRows{gap:12px;margin:0;padding:0;list-style:none;display:grid}.themeSettingsRow{background:var(--color-surface-inset);border:1px solid var(--color-inset-border);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:10px;display:flex}.themeSettingsRowText label{font-size:.9rem;font-weight:600;display:block}.themeSettingsHint{color:var(--color-text-subtle);margin:4px 0 0;font-size:.76rem}.themeSettingsColorInput{border:1px solid var(--color-inset-border);cursor:pointer;background:0 0;border-radius:8px;flex:none;width:48px;height:36px;padding:0}.themeSettingsFooter{flex-wrap:wrap;justify-content:flex-end;gap:8px;padding-top:4px;display:flex}.chordBuilderLayout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;gap:16px;display:grid}.chordBuilderControls{gap:10px;min-width:0;display:grid}.chordBuilderPanel.panel{gap:10px}.chordBuilderPanelHeader{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.chordBuilderPanelHeading{margin:0;font-size:1.1rem}.chordBuilderPanelCollapsed.panel{gap:10px;padding-top:14px;padding-bottom:14px}.chordBuilderPanel.chordBuilderPanelCollapsed .chordBuilderPanelHeader{margin-top:2px;padding-top:2px}.chordBuilderToggleButton{flex-shrink:0}.keyAssistPanel.panel{gap:10px;padding:12px 14px}.keyAssistPanel .chordBuilderKeyAssistStripe{border-bottom:none;gap:14px;margin-bottom:0;padding-block:2px 4px}.chordBuilderKeyAssistStripe{border-bottom:1px solid color-mix(in srgb, var(--color-panel-border) 72%, transparent);gap:16px;min-width:0;margin-bottom:8px;padding-block:6px 14px;display:grid}.keyAssistStripeTop{gap:14px;min-width:0;display:grid}.keyAssistStripeHeaderBar{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:14px 18px;min-width:0;display:flex}.keyAssistStripeTitleRow{align-items:center;gap:8px;min-width:0;display:flex}.keyAssistStripeTitleBlock{flex:200px;gap:6px;min-width:0;display:grid}.keyAssistStripeTitleBlockCollapsed{gap:unset;align-self:center;display:block}.keyAssistStripeCollapsedOneLine{flex-wrap:wrap;flex:auto;align-items:center;gap:0;min-width:0;margin:0;font-size:.86rem;line-height:1.35;display:flex}.keyAssistStripeTitleBlockCollapsed .keyAssistStripeTitle{letter-spacing:.01em;flex:none;font-size:.94rem}.keyAssistStripeCollapsedSep{color:var(--color-text-muted);opacity:.8;-webkit-user-select:none;user-select:none;flex:none;padding:0 .42em;font-size:.65em;font-weight:500;line-height:1;transform:translateY(.04em)}.keyAssistStripeCollapsedKey{min-width:0;color:var(--color-text);flex:0 auto;font-weight:600}.keyAssistStripeCollapsedAssistState{color:var(--color-text-muted);white-space:nowrap;flex:none;font-weight:600}.keyAssistStripeHeaderActions{flex-wrap:wrap;flex:none;justify-content:flex-end;align-self:center;align-items:center;gap:8px 10px;display:inline-flex}.keyAssistStripeCollapseButton{box-sizing:border-box;border:1px solid color-mix(in srgb, var(--color-inset-border) 84%, var(--color-chrome-neutral-2) 16%);background:color-mix(in srgb, var(--color-surface-inset) 88%, var(--color-panel-bg) 12%);width:36px;min-width:36px;height:36px;min-height:36px;color:var(--color-text-muted);font:inherit;cursor:pointer;border-radius:8px;justify-content:center;align-items:center;margin:0;padding:0;line-height:0;display:inline-flex}.keyAssistStripeCollapseButton:hover{border-color:color-mix(in srgb, var(--color-active) 18%, var(--color-inset-border) 82%);color:var(--color-text)}.keyAssistStripeCollapseButton:focus-visible{outline:2px solid var(--color-accent-focus-soft);outline-offset:3px}.keyAssistStripeCollapseCaret{pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.keyAssistStripeCollapseCaretSvg{flex-shrink:0;display:block}.keyAssistAssistSwitchWrap{flex:none;align-self:center}.chordBuilderKeyAssistStripeCollapsedPanel{gap:10px;margin-bottom:6px;padding-block:2px 6px}.chordBuilderKeyAssistStripeCollapsedPanel .keyAssistStripeHeaderBar{align-items:center}.keyAssistPanel .chordBuilderKeyAssistStripeCollapsedPanel{margin-bottom:0}.chordBuilderKeyAssistStripeCollapsedPanel.keyAssistStripeCollapsedAssistOn{border-inline-start:4px solid var(--color-active);padding-inline-start:12px}.keyAssistStripeGuidanceShell{box-sizing:border-box;background:0 0;border:1px solid #0000;border-radius:10px;gap:14px;min-width:0;padding:10px 12px;transition:background .12s,border-color .12s,box-shadow .12s;display:grid}.keyAssistStripeGuidanceShellAssistOn{background:color-mix(in srgb, var(--color-active) 10%, var(--color-surface-inset) 90%);border-color:color-mix(in srgb, var(--color-active) 32%, var(--color-panel-border) 68%);box-shadow:0 0 0 1px color-mix(in srgb, var(--color-active) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-active) 7%, transparent)}.keyAssistAssistSwitch{box-sizing:border-box;border:1px solid color-mix(in srgb, var(--color-inset-border) 84%, var(--color-chrome-neutral-2) 16%);background:color-mix(in srgb, var(--color-surface-inset) 85%, var(--color-panel-bg) 15%);cursor:pointer;font:inherit;color:var(--color-text);border-radius:999px;align-items:center;gap:10px;margin:0;padding:5px 10px 5px 6px;display:inline-flex}.keyAssistAssistSwitch:focus-visible{outline:2px solid var(--color-accent-focus-soft);outline-offset:3px}.keyAssistAssistSwitch:hover{border-color:color-mix(in srgb, var(--color-active) 22%, var(--color-inset-border) 78%)}.keyAssistAssistSwitch.isAssistOn{border-color:color-mix(in srgb, var(--color-active) 48%, var(--color-inset-border) 52%);background:color-mix(in srgb, var(--color-active-bg) 28%, var(--color-surface-inset) 72%)}.keyAssistAssistSwitchTrack{box-sizing:border-box;background:color-mix(in srgb, var(--color-chrome-neutral) 42%, var(--color-surface-inset) 58%);border-radius:999px;width:38px;height:22px;position:relative}.keyAssistAssistSwitch.isAssistOn .keyAssistAssistSwitchTrack{background:var(--color-active-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-active) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-panel-bg) 35%, transparent)}.keyAssistAssistSwitchThumb{background:color-mix(in srgb, var(--color-panel-bg) 94%, var(--color-text-muted) 6%);width:16px;height:16px;box-shadow:0 1px 2px #00000029, 0 0 0 1px color-mix(in srgb, var(--color-inset-border) 65%, transparent);border-radius:50%;transition:transform 90ms;position:absolute;top:3px;left:3px}.keyAssistAssistSwitch.isAssistOn .keyAssistAssistSwitchThumb{transform:translate(16px)}.keyAssistAssistSwitchLabel{font-size:.785rem;font-weight:650}.keyAssistStripeTitle{letter-spacing:.02em;color:var(--color-text);font-size:1rem;font-weight:700}.keyAssistStripeHint{color:var(--color-text-muted);max-width:44rem;margin:0;font-size:.8rem;line-height:1.43}.keyAssistStripeControlsGrid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:12px 14px;display:grid}.chordBuilderKeyAssistStripe .keyAssistTransportField{min-width:0}.chordBuilderKeyAssistStripe .keyAssistTransportField .appSelect{width:100%}@media (width<=620px){.keyAssistStripeControlsGrid{grid-template-columns:1fr}}.keyAssistSuggestions{gap:10px;min-width:0;display:grid}.keyAssistSuggestionsLabel{color:var(--color-text-muted);font-size:.78rem;font-weight:600}.keyAssistChipRow{flex-wrap:wrap;align-items:stretch;gap:9px;display:flex}.keyAssistChip{vertical-align:top;border:1px solid color-mix(in srgb, var(--color-inset-border) 86%, var(--color-chrome-neutral-2) 14%);background:color-mix(in srgb, var(--color-surface-inset) 92%, var(--color-panel-bg) 8%);border-radius:8px;align-items:stretch;min-height:34px;display:inline-flex;overflow:hidden}.keyAssistChipPlay,.keyAssistChipAdd{box-sizing:border-box;min-width:34px;color:color-mix(in srgb, var(--color-text-muted) 94%, var(--color-active) 6%);cursor:pointer;background:0 0;border:none;flex:none;place-items:center;margin:0;padding:0 8px;font-family:inherit;font-size:.74rem;line-height:1;display:grid}.keyAssistChipPlay:hover:not(:disabled),.keyAssistChipAdd:hover:not(:disabled){color:var(--color-text);background:color-mix(in srgb, var(--color-active) 11%, transparent)}.keyAssistChipPlay:focus-visible,.keyAssistChipAdd:focus-visible{outline:2px solid var(--color-accent-focus-soft);outline-offset:-4px;z-index:1}.keyAssistChipBody{border:none;border-inline:1px solid color-mix(in srgb, var(--color-inset-border) 76%, transparent);cursor:pointer;min-width:0;color:var(--color-text);letter-spacing:.015em;white-space:nowrap;background:0 0;flex:auto;margin:0;padding:5px 10px;font-family:inherit;font-size:.78rem;font-weight:600}.keyAssistChipBody:hover{background:color-mix(in srgb, var(--color-active) 9%, transparent)}.keyAssistChipBody:focus-visible{outline:2px solid var(--color-accent-focus-soft);outline-offset:-6px;z-index:1}.keyAssistDraftHint{margin:4px 0 0;font-size:.805rem;font-weight:600;line-height:1.35}.keyAssistDraftHint.isInKey{color:var(--color-active)}.keyAssistDraftHint.isOutsideKey{color:var(--color-text-muted);font-weight:500}.chordBuilderPanel .chordBuilderControls>.field>span{font-size:.8125rem}.chordBuilderPreviewColumn{flex-direction:column;align-self:stretch;gap:12px;min-width:0;min-height:0;display:flex}.chordBuilderPreviewColumn .preview{flex:0 auto;min-height:0}.previewChordGrow{flex:0;width:100%}@media (width>=881px){.chordBuilderPanel:not(.chordBuilderPanelCollapsed){flex:0 auto;grid-template-rows:auto auto auto;display:grid}.chordBuilderPanel.chordBuilderPanelCollapsed{flex:none}.chordBuilderPreviewColumn{flex:auto}.chordBuilderPreviewColumn .preview{flex:auto;grid-template-rows:auto auto auto minmax(0,1fr) auto;grid-auto-flow:row;align-self:stretch;place-items:stretch stretch;height:auto;min-height:0;display:grid}.chordBuilderPreviewColumn .preview .previewChordGrow{min-height:0}}.chordBuilderPreviewColumn .preview .previewChordButton{flex-shrink:0;align-self:stretch}.chordBuilderPreviewColumn .preview .previewChordButton.secondaryButton{padding:10px 16px;font-size:.9375rem}.chordBuilderPreviewColumn .builderActions{flex-shrink:0;align-self:stretch;width:100%;margin-top:auto}.chordBuilderPreviewColumn .builderActions button{flex:auto;width:100%}.chordBuilderPreviewColumn .miniKeyboard{height:48px}.chordBuilderPreviewColumn .miniKeyboardWrap{align-self:stretch;width:100%}@media (width<=880px){.chordBuilderLayout{grid-template-columns:1fr}}.progressionChordEditor{border:1px solid var(--color-editor-border);background:var(--color-editor-fill);border-radius:8px;gap:6px;margin-top:4px;padding:8px 10px;display:grid}.progressionChordEditor.progressionInspectorMultiRoot{box-sizing:border-box;flex-direction:column;min-height:min(32rem,82vh);display:flex}.progressionInspectorMultiBody{flex-direction:column;flex:none;gap:10px;min-height:0;padding:8px 2px 12px;display:flex}.progressionInspectorMultiLead{color:var(--color-text);margin:0;font-size:.95rem;font-weight:600}.progressionInspectorMultiHint{color:var(--color-text-muted);max-width:40rem;margin:0;font-size:.82rem;line-height:1.45}.progressionChordEditorTitle{border-bottom:1px solid var(--color-inset-border);letter-spacing:.02em;color:color-mix(in srgb, var(--color-text) 92%, var(--color-text-muted) 8%);margin:0;padding-bottom:4px;font-size:.88rem;font-weight:600}.progressionChordEditor .timelineHeader{color:var(--color-text-muted);align-items:center;gap:8px;font-size:.82rem}.progressionChordEditor .timelineHeader strong{color:var(--color-text);font-weight:600}.progressionChordEditor .timelineActions button{border-radius:7px;padding:6px 10px;font-size:.78rem}.progressionChordEditorBody{grid-template-columns:minmax(0,1.12fr) minmax(216px,.92fr);align-items:start;gap:10px;min-width:0;display:grid}.progressionChordEditorControls{gap:6px;min-width:0;display:grid}.progressionChordEditorPreview{min-width:0}.progressionChordEditor .field{gap:4px}.progressionChordEditor .field>span{font-size:.74rem}.chordBuilderPanel .modifierGrid{gap:5px}.chordBuilderPanel .modifier{border-radius:6px;min-width:46px;padding:5px 7px;font-size:.8rem}.progressionChordEditor .optionButtonGroupRoot{gap:5px 6px;width:100%}.progressionChordEditor .progressionInspectorQualityGrid.optionButtonGroup.optionButtonGroupCompact{grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:5px 6px;width:100%;display:grid}.progressionChordEditor .progressionInspectorQualityGrid .optionButtonCompact{box-sizing:border-box;width:100%;min-width:0}.progressionChordEditor .progressionInspectorModifierGrid.modifierGrid{grid-template-columns:repeat(13,minmax(0,1fr));align-items:stretch;gap:4px;width:100%;display:grid}.progressionChordEditor .progressionInspectorModifierGrid .modifier{box-sizing:border-box;border-radius:5px;justify-self:stretch;width:100%;min-width:0;padding:5px 4px;font-size:.73rem}@media (width<=720px){.progressionChordEditor .progressionInspectorModifierGrid.modifierGrid{grid-template-columns:repeat(auto-fill,minmax(2.65rem,1fr))}}@media (width<=520px){.progressionChordEditor .progressionInspectorQualityGrid.optionButtonGroup.optionButtonGroupCompact{grid-template-columns:repeat(3,minmax(0,1fr))}}.progressionChordEditor .optionButtonGroupRoot .optionButton{padding:9px 8px 10px;font-size:.78rem}.progressionChordEditor .optionButtonRootRomanPinned{top:3px;max-width:44%;inset-inline-end:6px}.progressionChordEditor .optionButtonGroupCompact{gap:4px 5px}.progressionChordEditor .optionButtonCompact{border-radius:5px;min-width:32px;padding:4px 6px;font-size:.73rem}.progressionChordEditor .advancedVoicing{gap:8px}.progressionChordEditor .advancedVoicingColumns{gap:5px 6px}.progressionChordEditor .advancedVoicingColumns .field>span{font-size:.71rem}.progressionChordEditor .advancedVoicingColumns .optionButtonGroupCompact{gap:3px 4px}.progressionChordEditor .advancedVoicingColumns .optionButtonCompact{border-radius:4px;min-width:22px;padding:2px 4px;font-size:.69rem}.progressionChordEditor .voicingHeader .linkButton{border-radius:6px;padding:4px 7px;font-size:.71rem}.progressionChordEditor .voicePositionSliderBlock{gap:5px}.progressionChordEditor .voicePositionLabel{font-size:.8rem}.progressionChordEditor .voicePositionSliderRow .voicePositionEndpoint{width:26px;font-size:.67rem}.progressionChordEditor .voicePositionSlider{height:24px}.progressionChordEditor .voicePositionHint{font-size:.72rem}.progressionChordEditorPreview{flex-direction:column;min-height:0;display:flex}.progressionChordEditorPreview .preview{flex:auto;min-height:0}.progressionChordEditor .miniKeyboard{height:42px}.progressionChordEditor .miniKeyboardBlack,.progressionChordEditor .miniKey.black{height:25px}@media (width<=780px){.progressionChordEditorBody{grid-template-columns:1fr}}.panel.progressionPanel{gap:10px}@media (width>=881px){.panel.progressionPanel{flex-direction:column;flex:auto;min-height:0;display:flex}.progressionPanelHeader{flex-shrink:0}.progressionPanelScrollBlock{flex-direction:column;flex:0 auto;gap:10px;min-width:0;display:flex}.progressionPanelScrollBlock .timelineSelectHint,.appHeader{flex-shrink:0}.progressionChordEditor{flex:0 auto;grid-template-rows:auto auto auto;align-self:stretch;margin-top:0;display:grid}.progressionChordEditorBody{align-self:stretch;align-items:stretch}.progressionChordEditorControls{align-self:stretch}.progressionChordEditorPreview{flex-direction:column;align-self:stretch;height:100%;min-height:0;display:flex}.progressionChordEditorPreview .preview{flex:auto;grid-template-rows:auto auto auto minmax(0,1fr);place-items:stretch stretch;height:100%;min-height:0;display:grid}.progressionChordEditorPreview .preview .previewChordGrow{min-height:0}}.progressionPanelHeader{flex-direction:column;align-items:stretch;gap:8px;display:flex}.progressionDocumentHeaderTitleRow{box-sizing:border-box;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;width:100%;min-width:0;display:flex}.progressionDocumentHeaderTitleRow .progressionPanelTitle{flex:0 auto;min-width:0;margin:0}.progressionDocumentHeaderTitleRow>.progressionDocumentHeaderDocActions{box-sizing:border-box;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;min-width:0;margin-left:auto;display:inline-flex}.progressionDocumentHeaderToolbarRow{box-sizing:border-box;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px 16px;width:100%;min-width:0;display:flex}.progressionDocumentHeaderGlobalControls{flex-wrap:nowrap;flex:0 auto;align-items:center;gap:8px 12px;min-width:0;display:flex}.progressionDocumentHeaderTransportControls{flex:none;justify-content:flex-end;align-items:center;min-width:min-content;margin-left:auto;display:flex}.progressionDocumentHeaderTransportControls .progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow{flex-wrap:nowrap;flex:none;gap:7px;min-width:min-content;margin-left:0}label.field.progressionHeaderInlineField{flex-direction:row;align-items:center;gap:6px;min-height:0;margin:0;display:inline-flex}.progressionDocumentHeaderGlobalControls .progressionHeaderVolumeControl,.progressionDocumentHeaderGlobalControls .progressionHeaderTempoControl{min-height:0;padding:0}label.field.progressionHeaderInlineField>span{letter-spacing:.03em;text-transform:none;color:var(--color-text-muted);white-space:nowrap;flex:none;font-size:.72rem;font-weight:650}.progressionDocumentHeaderVolume.progressionHeaderVolumeControl{flex:none;min-width:min-content;min-height:0;padding:0}.progressionDocumentHeaderVolume.progressionHeaderVolumeControl input[type=range]{vertical-align:middle;width:5.25rem;min-width:4rem;max-width:100%;height:1.15rem;accent-color:var(--color-active);margin:0;padding:0}.progressionSequencerTempoField{flex:none;margin:0}.progressionSequencerTempoField>span{font-size:.72rem}.progressionSequencerTempoInput{box-sizing:border-box;width:4.1rem;min-width:4.1rem;max-width:100%;padding:4px 6px;font-size:.85rem}.progressionDocumentHeaderDocActions--compact{gap:6px}.progressionDocumentHeaderDocActions--compact .secondaryButton{min-height:30px;padding:5px 10px;font-size:.78rem;font-weight:650;line-height:1.2}.progressionDocumentHeaderDocActions--headerBar{align-items:center}.progressionDocumentHeaderDocActions--headerBar.progressionDocumentHeaderDocActions--compact .secondaryButton{box-sizing:border-box;justify-content:center;align-items:center;height:34px;min-height:34px;padding:0 11px;font-size:.78rem;font-weight:650;line-height:1.15;display:inline-flex}.progressionDocumentHeaderDocActions{flex-wrap:wrap;align-items:stretch;gap:8px;display:inline-flex}.progressionDocumentHeaderDocActions .secondaryButton{flex:0 auto}.progressionDocumentHeaderVolume.progressionHeaderVolumeControl,.progressionDocumentHeaderTempo.progressionHeaderTempoControl{min-height:0}.progressionPanelTitle{margin:0;font-size:1.1rem;line-height:1.3}html[data-glow=on] .progressionDocumentHeaderTitleRow,html[data-glow=on] .progressionDocumentHeaderToolbarRow{box-shadow:none}.progressionTransportTrackShell{box-sizing:border-box;flex-direction:column;gap:0;width:100%;min-width:0;display:flex}.progressionTransportTrackShellPanel{box-sizing:border-box;width:100%;min-width:0}.progressionTransportMobileSectionHeader{display:none}.progressionTransportMobileSectionTitle{flex:auto;min-width:0}.progressionTransportMobileSectionCaret{flex-shrink:0}.progressionTransportChordRow{box-sizing:border-box;background:var(--color-surface-inset);border:1px solid var(--color-inset-border);border-radius:8px;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;width:100%;min-width:0;padding:7px 10px 8px;display:flex}.progressionTransportChordBody{flex-wrap:wrap;flex:12rem;align-items:flex-end;gap:8px 10px;min-width:0;display:flex}.progressionTransportChordRow .progressionTransportChordToolbar{width:auto;min-width:min(100%,14rem);max-width:100%;box-shadow:none;background:0 0;border:none;border-radius:0;flex:auto;padding:0}.progressionTransportChordRow .progressionTransportSettings{width:auto}.progressionTrackFaderWrap{box-sizing:border-box;flex-direction:column;flex:none;justify-content:center;align-items:center;gap:3px;min-height:0;padding:6px 4px;display:flex}.progressionTrackFaderMark{color:var(--color-text-muted);opacity:.75;-webkit-user-select:none;user-select:none;font-size:.55rem;line-height:1}.progressionTrackFaderSlot{flex:none;justify-content:center;align-items:center;width:1.85rem;min-width:1.65rem;min-height:3.1rem;max-height:3.85rem;display:flex;position:relative}.progressionTrackFaderInput{transform-origin:50%;width:4.15rem;height:1.35rem;accent-color:var(--color-active);cursor:pointer;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-90deg)}.progressionTrackFaderInput:disabled{cursor:not-allowed;opacity:.45}html[data-glow=on] .progressionTransportChordRow{box-shadow:none}.progressionTransportSourceRow{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 10px;width:100%;min-width:0;display:flex}.progressionTransportSourcePrimary{flex-wrap:wrap;flex:auto;align-items:flex-end;gap:6px 10px;min-width:0;display:flex}@media (width<=880px){.progressionTransportSourceRow{flex-wrap:wrap;align-items:stretch;row-gap:10px}.progressionTransportSourcePrimary{flex:100%;width:100%;min-width:0}.progressionTransportChordBody{flex-wrap:wrap}}.progressionTransportBassRow{background:var(--color-surface-inset);border:1px solid var(--color-inset-border);box-sizing:border-box;border-radius:8px;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;width:100%;min-width:0;padding:7px 10px 8px;display:flex}.progressionTransportBassBody{flex-wrap:wrap;flex:12rem;align-items:flex-end;gap:8px 10px;min-width:0;display:flex}.progressionTransportBassRow .progressionTransportBassToolbar{width:auto;min-width:min(100%,12rem);max-width:100%;box-shadow:none;background:0 0;border:none;border-radius:0;flex:auto;padding:0}.progressionTransportBassRow--inactive{border-color:color-mix(in srgb, var(--color-inset-border) 92%, var(--color-text-muted) 8%);isolation:auto}.progressionTransportBassLead{border-right:1px solid color-mix(in srgb, var(--color-inset-border) 88%, var(--color-text-muted) 12%);flex-wrap:wrap;flex:none;align-items:flex-end;gap:6px 8px;min-height:2.35rem;margin:0 2px 0 0;padding:0 12px 0 0;display:inline-flex}.progressionTransportBassLabel{letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);padding-bottom:2px;font-size:.68rem;font-weight:650;line-height:1.2}.progressionTransportBassToggle{box-sizing:border-box;border-radius:8px;min-width:44px;min-height:2.05rem}.progressionTransportBassToggleActive{color:var(--color-on-primary,#fff);background:var(--color-primary);border-color:var(--color-primary-border);box-shadow:0 1px #00000038}.progressionTransportBassToggleOff{color:var(--color-text-muted);background:color-mix(in srgb, var(--color-surface-raised) 55%, transparent);border:1px solid color-mix(in srgb, var(--color-inset-border) 88%, var(--color-text-muted) 12%);box-shadow:none}.progressionTransportBassToggleOff:hover:not(:disabled){border-color:color-mix(in srgb, var(--color-inset-border) 70%, var(--color-text-muted) 30%);color:var(--color-text)}.progressionTransportBassPowerField{flex:none;min-width:0}.progressionTransportBassPowerField>span{letter-spacing:.04em}.progressionTransportBassControls{flex-wrap:wrap;flex:auto;align-items:flex-end;gap:8px 12px;min-width:0;display:flex}.progressionTransportBassToneGroup{flex-wrap:wrap;flex:auto;align-items:flex-end;gap:8px 12px;min-width:0;transition:opacity .15s;display:flex}.progressionTransportBassToneGroup--muted{color:color-mix(in srgb, var(--color-text) 48%, transparent)}.progressionTransportBassToneGroup--muted .appSelectTrigger{opacity:.48}.progressionTransportBassToneGroup--muted .progressionTransportField>span{opacity:.5}.progressionTransportBassField{min-width:0}.progressionTransportBassVolumeField{flex:none;align-self:flex-end}.progressionTransportBassVolumeField input[type=range]{vertical-align:middle;box-sizing:border-box;width:5.75rem;min-width:4.5rem;max-width:100%;height:1.35rem;accent-color:var(--color-active);margin:0;padding:0}.appSelect .appSelectTrigger.progressionTransportBassSelect--sound{min-width:7.5rem;max-width:min(10rem,100%)}.appSelect .appSelectTrigger.progressionTransportBassSelect--pattern{min-width:10.75rem;max-width:min(15rem,100%)}.appSelect .appSelectTrigger.progressionTransportBassSelect--rate{min-width:4.65rem;max-width:5.75rem}.appSelect .appSelectTrigger.progressionTransportBassSelect--octave{min-width:3.65rem;max-width:4.35rem}@media (width<=720px){.progressionTransportChordRow,.progressionTransportBassRow{flex-direction:column;align-items:stretch;gap:10px}.progressionTrackFaderWrap{flex-direction:column;flex:auto;justify-content:flex-start;align-items:stretch;gap:6px;width:100%;min-width:0;max-width:100%;min-height:0;padding:4px 0 2px}.progressionTrackFaderWrap>.progressionTrackFaderMark{display:none}.progressionTrackFaderWrap--chord:before{content:"Chord level";letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);font-size:.68rem;font-weight:650;line-height:1.2}.progressionTrackFaderWrap--bass:before{content:"Bass level";letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);font-size:.68rem;font-weight:650;line-height:1.2}.progressionTrackFaderSlot{box-sizing:border-box;justify-content:stretch;align-items:center;width:100%;min-width:0;max-width:100%;height:auto;min-height:2.75rem;max-height:none;padding:4px 0;display:flex;position:relative}.progressionTrackFaderInput{transform-origin:unset;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:2.75rem;accent-color:var(--color-active);cursor:pointer;touch-action:manipulation;flex:auto;margin:0;position:relative;top:auto;left:auto;transform:none}.progressionTransportChordBody,.progressionTransportBassBody{flex:auto;width:100%;min-width:0}.progressionTransportChordRow .progressionTransportChordToolbar,.progressionTransportBassRow .progressionTransportBassToolbar{width:100%;min-width:0;max-width:100%}.progressionTransportBassBody{align-items:stretch}.progressionTransportBassRow .progressionTransportBassToolbar.progressionTransportToolbar{box-sizing:border-box;flex-direction:column;align-content:flex-start;align-items:stretch;gap:10px;width:100%;min-width:0;max-width:100%}.progressionTransportBassPowerField{flex:none;grid-template-columns:auto minmax(0,max-content);justify-content:start;align-items:center;gap:10px;width:100%;min-width:0;max-width:100%;display:grid}.progressionTransportBassPowerField>span{padding-bottom:0}.progressionTransportBassPowerField .progressionTransportBassToggle{justify-self:start;width:auto;min-width:3.25rem;max-width:100%;min-height:44px;padding:8px 14px}.progressionTransportBassToneGroup{flex:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:8px 10px;width:100%;min-width:0;max-width:100%;display:grid}.progressionTransportBassToneGroup>.progressionTransportField,.progressionTransportBassToneGroup .appSelect{width:100%;min-width:0;max-width:100%}.progressionTransportBassToneGroup .appSelect .appSelectTrigger.progressionTransportBassSelect--sound,.progressionTransportBassToneGroup .appSelect .appSelectTrigger.progressionTransportBassSelect--pattern,.progressionTransportBassToneGroup .appSelect .appSelectTrigger.progressionTransportBassSelect--rate,.progressionTransportBassToneGroup .appSelect .appSelectTrigger.progressionTransportBassSelect--octave{box-sizing:border-box;width:100%;min-width:0;max-width:100%}.appSelect .appSelectTrigger.progressionTransportBassSelect--pattern{max-width:100%}.progressionTransportBassSoundField{grid-column:1/-1}.progressionTransportMobileSectionHeader{box-sizing:border-box;border:1px solid var(--color-inset-border);background:color-mix(in srgb, var(--color-surface-inset) 94%, transparent);width:100%;min-width:0;max-width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;border-radius:8px;justify-content:space-between;align-items:center;gap:10px;min-height:44px;margin:0 0 8px;padding:10px 12px;display:flex}.progressionTransportMobileSectionHeader:focus-visible{outline:2px solid var(--color-active);outline-offset:2px}.progressionTransportMobileSectionTitle{letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);font-size:.72rem;font-weight:650}.progressionTransportMobileSectionCaret{border:solid color-mix(in srgb, var(--color-text-muted) 90%, transparent);opacity:.9;border-width:0 2px 2px 0;width:.45rem;height:.45rem;margin-right:2px;transition:transform .15s;display:inline-block;transform:rotate(-45deg)}.progressionTransportMobileSectionCaret--open{transform:rotate(45deg)}.progressionTransportTrackShellPanel--collapsed{display:none}.progressionTransportTrackShell+.progressionTransportTrackShell{margin-top:10px}}@media (width<=520px){.progressionTransportChordRow .progressionTransportSettings>.progressionTransportField{flex:100%;min-width:0;max-width:100%}.progressionTransportChordRow .progressionTransportSettings,.progressionTransportBassToneGroup{grid-template-columns:minmax(0,1fr)}.progressionTransportBassToneGroup>.progressionTransportField{flex:100%;width:100%;max-width:100%}.appSelect .appSelectTrigger.progressionTransportBassSelect--sound,.appSelect .appSelectTrigger.progressionTransportBassSelect--pattern,.appSelect .appSelectTrigger.progressionTransportBassSelect--rate,.appSelect .appSelectTrigger.progressionTransportBassSelect--octave{min-width:0;max-width:100%}}html[data-glow=on] .progressionTransportBassRow{box-shadow:none}.progressionTransportToolbar{box-sizing:border-box;background:var(--color-surface-inset);border:1px solid var(--color-inset-border);border-radius:8px;flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;gap:6px 10px;width:100%;padding:6px 8px;display:flex}.progressionTransportSettings{flex-wrap:wrap;flex:auto;align-items:flex-end;gap:8px 10px;width:100%;min-width:0;display:flex}.progressionTransportSettingsLocked>.progressionTransportField{opacity:.5}.progressionTransportSettingsLocked>.progressionTransportField input:disabled,.progressionTransportSettingsLocked>.progressionTransportField select:disabled,.progressionTransportSettingsLocked>.progressionTransportField .appSelectTrigger:disabled{cursor:not-allowed}.progressionTransportHeaderActions{flex-flow:row;flex:0 auto;justify-content:flex-end;align-items:stretch;gap:6px 8px;min-width:0;margin-left:auto;display:inline-flex}.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow{flex-wrap:wrap;align-items:center;min-height:0;margin-left:0}.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow>.progressionTransportPlayButton,.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow>.progressionTransportStopButton{min-height:34px;padding:5px 10px}.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow>.progressionClickVolumeControl>.progressionClickSplit{border-radius:8px;min-height:34px}.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionClickSplit .progressionTransportClickToggleMain{flex:0 0 34px;justify-content:center;width:34px;min-width:34px;max-width:34px;padding:0}.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionTransportClickButton,.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionClickVolumeCaret{min-height:34px}.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionClickVolumeCaret{flex:0 0 26px;width:26px;min-width:26px;max-width:26px;padding:0}.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionClickVolumeCaretGlyph{font-size:1.15rem;line-height:1}.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow>.progressionTransportLoopButton{justify-content:center;gap:0;width:34px;min-width:34px;max-width:34px;min-height:34px;padding:0}.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow>.progressionTransportLoopButton .progressionTransportGlyph{margin:0}.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionTransportGlyphClick,.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionTransportGlyphLoop{justify-content:center;align-items:center;display:flex}.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionTransportGlyphClick svg,.progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionTransportGlyphLoop svg{width:1.1rem;height:1.1rem}.progressionTransportHeaderActions>.progressionTransportLoopButton,.progressionTransportHeaderActions>.progressionTransportPlayButton,.progressionTransportHeaderActions>.progressionTransportStopButton{justify-content:center;align-items:center;display:inline-flex}.progressionTransportHeaderActions>.progressionClickVolumeControl{align-items:stretch;display:flex}.progressionTransportHeaderActions>.progressionClickVolumeControl>.progressionClickSplit{align-self:stretch;align-items:stretch}.progressionHeaderVolumeControl{min-height:44px;color:var(--color-text-muted);letter-spacing:.02em;flex:0 auto;align-items:center;gap:6px;padding:0 2px;font-size:.76rem;display:inline-flex}.progressionHeaderVolumeControl input[type=range]{width:5.9rem;min-width:5rem;accent-color:var(--color-active);margin:0;padding:0}.progressionHeaderTempoControl{min-height:44px;color:var(--color-text-muted);letter-spacing:.02em;flex:none;align-items:center;gap:6px;padding:0 2px;font-size:.76rem;display:inline-flex}.progressionHeaderTempoControl input[type=number]{box-sizing:border-box;width:4.35rem;min-width:4.1rem;padding:6px 8px}.progressionHeaderTempoControl input[type=number]:disabled{opacity:.5;cursor:not-allowed}.progressionHeaderTempoControl:has(input:disabled){opacity:.6}.progressionClickVolumeControl{flex:0 auto;position:relative}.progressionClickSplit{box-sizing:border-box;border:1px solid color-mix(in srgb, var(--color-inset-border) 88%, var(--color-chrome-neutral-2) 12%);border-radius:8px;align-items:stretch;display:inline-flex;overflow:hidden}.progressionClickSplitActiveMetronome{border-color:var(--color-action-info-border);background:var(--color-action-info-bg)}.progressionClickSplit .progressionTransportClickButton{min-width:0;box-shadow:none;border:none;border-radius:0;flex:auto}.progressionClickSplitActiveMetronome .progressionTransportClickButton,.progressionClickSplitActiveMetronome .progressionClickVolumeCaret{color:var(--color-action-info-text);background:0 0}.progressionClickSplitActiveMetronome .progressionTransportClickButton:hover:not(:disabled),.progressionClickSplitActiveMetronome .progressionClickVolumeCaret:hover:not(:disabled){background:color-mix(in srgb, var(--color-action-info-bg-hover) 78%, var(--color-action-info-bg) 22%);color:var(--color-action-info-text-hover)}.progressionClickVolumeCaret{box-sizing:border-box;min-width:38px;min-height:44px;font:inherit;cursor:pointer;color:inherit;border:none;border-left:1px solid color-mix(in srgb, var(--color-inset-border) 55%, transparent 45%);background:0 0;border-radius:0;flex:none;justify-content:center;align-items:center;margin:0;padding:0 10px;font-size:.75rem;line-height:1;display:inline-flex}.progressionClickVolumeCaretGlyph{font-size:1.5rem;line-height:1;display:block}.progressionClickSplitActiveMetronome .progressionClickVolumeCaret{border-left-color:var(--color-action-info-split-border)}.progressionTransportOutlineButton:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.progressionClickSplitActiveMetronome .progressionTransportOutlineButton:focus-visible{outline-color:color-mix(in srgb, var(--color-action-info-focus) 90%, transparent 10%)}.progressionClickVolumePopover{z-index:30;border:1px solid color-mix(in srgb, var(--color-inset-border) 85%, var(--color-chrome-neutral-2) 15%);background:var(--color-surface-inset);border-radius:8px;min-width:9rem;padding:8px 6px;position:absolute;top:calc(100% + 5px);right:0;box-shadow:0 6px 18px #00000073}.progressionClickVolumePopoverTitle{letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);padding:2px 6px 6px;font-size:.68rem;font-weight:700}.progressionClickVolumeChoice{text-align:left;width:100%;font:inherit;cursor:pointer;color:var(--color-text);background:0 0;border:none;border-radius:6px;margin:0;padding:7px 8px;font-size:.88rem;font-weight:600;display:block}.progressionClickVolumeChoice:hover{background:color-mix(in srgb, var(--color-active) 12%, var(--color-surface-inset) 88%);color:var(--color-text)}.progressionClickVolumeChoice.isSelected{background:color-mix(in srgb, var(--color-active) 22%, var(--color-surface-inset) 78%);color:var(--color-text)}.progressionClickVolumeChoice:focus-visible{outline:2px solid var(--color-accent-focus-soft);outline-offset:1px}.progressionTransportHeaderTextButton{flex:0 auto}.progressionTransportHeaderActions .progressionTransportPlayButton,.progressionTransportHeaderActions .progressionTransportStopButton{box-sizing:border-box;flex:0 auto;justify-content:center;align-items:center;gap:6px;min-width:min(132px,100%);min-height:44px;padding:8px 16px;display:inline-flex}.progressionTransportPlayButton{background:var(--color-action-success-bg);border-color:var(--color-action-success-border);color:var(--color-action-success-text)}.progressionTransportPlayButton:hover:not(:disabled){background:var(--color-action-success-bg-hover);border-color:var(--color-action-success-border-hover);color:var(--color-action-success-text-hover)}.progressionTransportPlayButton:focus-visible{outline:2px solid var(--color-action-success-focus);outline-offset:2px}.progressionTransportLoopButton{box-sizing:border-box;min-height:44px;font:inherit;cursor:pointer;border:1px solid color-mix(in srgb, var(--color-inset-border) 88%, var(--color-chrome-neutral-2) 12%);color:var(--color-text);background:0 0;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-weight:600;display:inline-flex}.progressionTransportGlyph{opacity:.95;flex-shrink:0;align-items:center;line-height:0;display:inline-flex}.progressionTransportGlyph svg{width:auto;height:clamp(13px,.78em,15px);display:block}.progressionTransportGlyphLoop svg{height:clamp(12px,.71em,13px)}.progressionTransportLoopButton:hover{background:color-mix(in srgb, var(--color-surface-inset) 62%, var(--color-chrome-neutral-2) 38%);border-color:color-mix(in srgb, var(--color-inset-border) 65%, var(--color-chrome-neutral) 35%);color:var(--color-text)}.progressionTransportLoopButton:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.progressionTransportLoopButtonActive{background:var(--color-action-warning-bg);border-color:var(--color-action-warning-border);color:var(--color-on-warning)}.progressionTransportLoopButtonActive .progressionTransportGlyph{opacity:1}.progressionTransportLoopButtonActive:hover{background:var(--color-action-warning-bg-hover);border-color:var(--color-action-warning-border-hover);color:var(--color-on-warning)}.progressionTransportLoopButtonActive:focus-visible{outline:2px solid var(--color-action-warning-focus);outline-offset:2px}.progressionTransportLoopButton:disabled,.progressionTransportClickButton:disabled{cursor:not-allowed;opacity:.36}.progressionTransportLoopButton:disabled:not(.progressionTransportLoopButtonActive){border-color:color-mix(in srgb, var(--color-inset-border) 88%, var(--color-chrome-neutral-2) 12%);color:var(--color-text);background:0 0}.progressionTransportLoopButtonActive:disabled{background:var(--color-action-warning-bg);border-color:var(--color-action-warning-border);color:var(--color-on-warning)}.progressionTransportClickButton:disabled:not(.progressionTransportClickButtonActive){border-color:color-mix(in srgb, var(--color-inset-border) 88%, var(--color-chrome-neutral-2) 12%);color:var(--color-text);background:0 0}.progressionTransportClickButtonActive:disabled{background:var(--color-action-info-bg);border-color:var(--color-action-info-border);color:var(--color-action-info-text)}.progressionTransportClickButton{box-sizing:border-box;min-height:44px;font:inherit;cursor:pointer;border:1px solid color-mix(in srgb, var(--color-inset-border) 88%, var(--color-chrome-neutral-2) 12%);color:var(--color-text);background:0 0;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-weight:600;display:inline-flex}.progressionTransportClickButton:hover{background:color-mix(in srgb, var(--color-surface-inset) 62%, var(--color-chrome-neutral-2) 38%);border-color:color-mix(in srgb, var(--color-inset-border) 65%, var(--color-chrome-neutral) 35%);color:var(--color-text)}.progressionTransportClickButton:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.progressionTransportClickButtonActive{background:var(--color-action-info-bg);border-color:var(--color-action-info-border);color:var(--color-action-info-text)}.progressionTransportClickButtonActive .progressionTransportGlyph{opacity:1}.progressionTransportClickButtonActive:hover{background:var(--color-action-info-bg-hover);border-color:var(--color-action-info-border-hover);color:var(--color-action-info-text-hover)}.progressionTransportClickButtonActive:focus-visible{outline:2px solid var(--color-action-info-focus);outline-offset:2px}.progressionTransportField{gap:4px;min-width:0}.progressionTransportField>span{color:var(--color-text-muted);font-size:.78rem}.progressionTransportField input[type=number]{width:4.25rem;min-width:0;padding:6px 8px}.appSelect{min-width:0;max-width:100%}.appSelect .appSelectTrigger.progressionTransportSelect{box-sizing:border-box;text-align:left;cursor:pointer;width:100%;min-width:0;max-width:100%;min-height:34px;line-height:1.35;font:inherit;color:var(--color-text);background-color:var(--color-surface-inset);border:1px solid color-mix(in srgb, var(--color-inset-border) 88%, var(--color-chrome-neutral-2) 12%);accent-color:var(--color-active);direction:ltr;border-radius:8px;justify-content:space-between;align-items:center;gap:6px;margin:0;padding:6px 10px 6px 8px;display:inline-flex}.appSelect .appSelectTrigger.progressionTransportSelect:focus-visible{outline:2px solid var(--color-accent-focus-soft);outline-offset:2px}.appSelect .appSelectTrigger.progressionTransportSelect:disabled{cursor:not-allowed;opacity:.55}.appSelect .appSelectTrigger.midiExportAppSelectTrigger{box-sizing:border-box;text-align:left;cursor:pointer;width:100%;min-width:0;max-width:100%;min-height:34px;line-height:1.35;font:inherit;color:var(--color-text);background-color:var(--color-surface-inset);border:1px solid color-mix(in srgb, var(--color-inset-border) 88%, var(--color-chrome-neutral-2) 12%);direction:ltr;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;margin:0;padding:6px 14px 6px 10px;display:inline-flex}.appSelect .appSelectTrigger.midiExportAppSelectTrigger:focus-visible{outline:2px solid var(--color-accent-focus-soft);outline-offset:2px}.appSelectTriggerLabel{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.appSelectTriggerChevron{color:var(--color-chrome-neutral-2);flex:none;justify-content:center;align-items:center;display:flex}.appSelectMenu{border:1px solid color-mix(in srgb, var(--color-inset-border) 85%, var(--color-chrome-neutral-2) 15%);background-color:var(--color-panel-bg);isolation:isolate;opacity:1;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:8px;padding:8px 6px;box-shadow:0 6px 18px #00000073}.appSelectMenuInner{background-color:var(--color-panel-bg);-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;border-radius:6px;padding:2px;overflow:hidden auto}.appSelectGroupLabel{letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);background-color:var(--color-panel-bg);margin:0;padding:6px 8px 4px;font-size:.68rem;font-weight:700}.appSelectOption{box-sizing:border-box;font:inherit;cursor:pointer;color:var(--color-text);background-color:var(--color-panel-bg);border-radius:6px;margin:0;padding:7px 8px;font-size:.88rem;font-weight:600}.appSelectOption:hover,.appSelectOption.isKeyboardActive{background-color:color-mix(in srgb, var(--color-active) 14%, var(--color-panel-bg) 86%);color:var(--color-text)}.appSelectOption.isSelected{background-color:color-mix(in srgb, var(--color-active) 26%, var(--color-panel-bg) 74%);color:var(--color-text)}.progressionTransportInstrumentField .appSelect .appSelectTrigger.progressionTransportSelect{min-width:10.75rem;max-width:min(20rem,100%)}.progressionTransportInstrumentSourceField .appSelect .appSelectTrigger.progressionTransportSelect{min-width:min(10.5rem,100%);max-width:min(18rem,100%)}.progressionTransportPlayStyleField .appSelect .appSelectTrigger.progressionTransportSelect{min-width:5.35rem}.progressionTransportRateField .appSelect .appSelectTrigger.progressionTransportSelect{min-width:3.35rem}.progressionTransportDriveField .appSelect .appSelectTrigger.progressionTransportSelect{min-width:4.6rem}.progressionTransportChorusField .appSelect .appSelectTrigger.progressionTransportSelect{min-width:4.65rem}.progressionTransportDelayField .appSelect .appSelectTrigger.progressionTransportSelect{min-width:5.5rem}.progressionTransportDelaySubField .appSelect .appSelectTrigger.progressionTransportSelect{min-width:3.55rem}.progressionTransportReverbField .appSelect .appSelectTrigger.progressionTransportSelect{min-width:4.65rem}.progressionTransportStopButton{background:var(--color-action-danger-bg);border-color:var(--color-action-danger-border);color:var(--color-action-danger-text);font:inherit;cursor:pointer;border-radius:8px;padding:8px 14px}.progressionTransportStopButton:hover:not(:disabled){background:var(--color-action-danger-bg-hover);border-color:var(--color-action-danger-border-hover)}.progressionTransportStopButton:focus-visible{outline:2px solid var(--color-action-danger-focus);outline-offset:2px}@media (width<=720px){.panel.progressionPanel{gap:8px;padding:10px}.progressionPanelHeader{gap:6px}.progressionDocumentHeaderTitleRow{flex-direction:column;align-items:stretch;gap:8px 10px}.progressionDocumentHeaderTitleRow>.progressionDocumentHeaderDocActions{justify-content:flex-end;width:100%;margin-left:0}.progressionDocumentHeaderTitleRow .progressionPanelTitle{white-space:normal;font-size:1.02rem;line-height:1.25}.progressionDocumentHeaderToolbarRow{justify-content:flex-start;gap:8px 10px}.progressionDocumentHeaderTransportControls .progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow{flex-wrap:nowrap;justify-content:flex-end}.progressionDocumentHeaderToolbarRow .progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow>.progressionClickVolumeControl>.progressionClickSplit{min-height:44px}.progressionDocumentHeaderToolbarRow .progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionClickSplit .progressionTransportClickToggleMain{flex:0 0 44px;width:44px;min-width:44px;max-width:44px;min-height:44px}.progressionDocumentHeaderToolbarRow .progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionClickVolumeCaret{flex:0 0 32px;width:32px;min-width:32px;max-width:32px;min-height:44px}.progressionDocumentHeaderToolbarRow .progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow>.progressionTransportLoopButton{width:44px;min-width:44px;max-width:44px;min-height:44px}.progressionDocumentHeaderToolbarRow .progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow>.progressionTransportPlayButton,.progressionDocumentHeaderToolbarRow .progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow>.progressionTransportStopButton{min-height:44px}.progressionDocumentHeaderDocActions .secondaryButton{background:var(--color-primary);border-color:var(--color-primary-border);min-height:44px;color:var(--color-on-primary);padding:8px 12px;font-size:.9rem;font-weight:700;box-shadow:0 1px #00000040}.progressionDocumentHeaderDocActions .secondaryButton:hover:not(:disabled){filter:brightness(1.06)}.progressionDocumentHeaderDocActions .secondaryButton:disabled{opacity:.45;filter:none}.progressionDocumentHeaderVolume.progressionHeaderVolumeControl{flex:auto;min-width:min(12rem,42vw)}.progressionDocumentHeaderVolume.progressionHeaderVolumeControl input[type=range]{flex:auto;min-width:5rem}.progressionTransportSourceRow{align-items:stretch;gap:6px 8px}.progressionTransportToolbar{align-items:stretch;gap:6px 8px;padding:4px 6px}.progressionTransportSettings{align-items:stretch;gap:6px 8px}.progressionTransportSettings>.progressionTransportField{flex:8.25rem;align-self:stretch;min-width:min(100%,7.5rem);max-width:100%}.progressionTransportChordRow .progressionTransportChordToolbar{width:100%;min-width:0;max-width:100%}.progressionTransportChordRow .progressionTransportSettings{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px 10px;width:100%;min-width:0;display:grid}.progressionTransportChordRow .progressionTransportSettings>.progressionTransportField{flex:unset;align-self:stretch;width:100%;min-width:0;max-width:100%}.progressionTransportChordRow .progressionTransportInstrumentField{grid-column:1/-1}.progressionTransportChordRow .progressionTransportSettings .appSelect{width:100%;min-width:0;max-width:100%}.progressionTransportChordRow .progressionTransportSettings .appSelect .appSelectTrigger.progressionTransportSelect{box-sizing:border-box;width:100%;min-width:0;max-width:100%}.appSelect .appSelectTrigger.progressionTransportSelect{width:100%;min-height:44px;padding:7px 10px 7px 8px;font-size:max(16px,.8125rem);line-height:1.25}.appSelectOption{align-items:center;min-height:44px;display:flex}.progressionTransportInstrumentSourceField{flex:100%;width:100%;min-width:0}.progressionTransportInstrumentSourceField .appSelect .appSelectTrigger.progressionTransportSelect{width:100%;min-width:0;max-width:none}.progressionTransportField>span{font-size:.72rem}}@media (width<=560px){.progressionDocumentHeaderTransportControls .progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow{box-sizing:border-box;flex-wrap:wrap;justify-content:flex-end;row-gap:8px;width:100%;max-width:100%}.progressionDocumentHeaderTransportControls .progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionTransportPlayButton,.progressionDocumentHeaderTransportControls .progressionTransportHeaderActions.progressionTransportHeaderActions--headerRow .progressionTransportStopButton{flex:100%;min-width:0;min-height:44px}}.savedProgressionsDialog{z-index:1;border:1px solid var(--color-panel-border);background:var(--color-panel-bg);width:min(640px,100vw - 32px);max-width:calc(100vw - 32px);color:var(--color-text);border-radius:12px;padding:0}.savedProgressionsRenameDialog{z-index:2}.savedProgressionsDialog::backdrop{background:#0000008c}.savedProgressionsDialogPanel{gap:12px;padding:16px 18px;display:grid}.savedProgressionsTitle{margin:0;font-size:1.05rem}.savedProgressionsLocalNote{color:var(--color-text-muted);margin:0;font-size:.76rem;line-height:1.35}.savedProgressionsLibraryTabs{flex-wrap:wrap;gap:6px;display:flex}.savedProgressionsLibraryTab{border:1px solid var(--color-panel-border);background:color-mix(in srgb, var(--color-text) 5%, transparent);color:var(--color-text-muted);font:inherit;cursor:pointer;border-radius:8px;margin:0;padding:7px 12px;font-size:.82rem;font-weight:600}.savedProgressionsLibraryTab:hover{color:var(--color-text)}.savedProgressionsLibraryTab.isActive{border-color:color-mix(in srgb, var(--color-active) 55%, var(--color-panel-border));color:var(--color-text);background:color-mix(in srgb, var(--color-active) 12%, transparent)}.savedProgressionsImportBlock{border-top:1px solid color-mix(in srgb, var(--color-panel-border) 80%, transparent);gap:6px;padding:10px 0 2px;display:grid}.savedProgressionsImportButton{justify-self:start;font-size:.84rem}.savedProgressionsImportHint{color:var(--color-text-muted);margin:0;font-size:.74rem;line-height:1.4}.savedProgressionsBanner{border-radius:8px;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:8px 10px;font-size:.82rem;line-height:1.4;display:flex}.savedProgressionsBannerInfo{background:color-mix(in srgb, var(--color-active) 14%, transparent);color:var(--color-text)}.savedProgressionsBannerError{color:var(--color-text);background:#cc44441f}.savedProgressionsBannerDismiss{border:1px solid color-mix(in srgb, var(--color-text) 18%, transparent);color:inherit;cursor:pointer;font-size:.78rem;font:inherit;background:0 0;border-radius:6px;margin-left:auto;padding:4px 8px}.savedProgressionsLoading{color:var(--color-text-muted);margin:0;font-size:.84rem}.midiExportDialogHint{color:var(--color-text-muted);margin:0;font-size:.76rem;line-height:1.35}.savedProgressionsDialog.midiExportDialog{box-sizing:border-box;width:fit-content;max-width:min(640px,100vw - 32px)}.midiExportDialogPanel{box-sizing:border-box;width:min(560px,100vw - 48px);min-width:min(260px,100vw - 32px);max-width:100%}.midiExportDialogHeader{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.midiExportDialogTitle{margin:0}.midiExportDialogClose{width:32px;height:32px;color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:none;justify-content:center;align-items:center;margin:-4px -6px 0 0;padding:0;font-size:1.45rem;line-height:1;display:inline-flex}.midiExportDialogClose:hover{color:var(--color-text);background:color-mix(in srgb, var(--color-text) 10%, transparent)}.midiExportDialogClose:focus-visible{outline:2px solid var(--color-accent-focus-soft);outline-offset:2px}.midiExportDialogOptions{grid-template-columns:1fr 1fr;align-items:end;gap:10px;display:grid}@media (width<=480px){.midiExportDialogOptions{grid-template-columns:1fr}}.midiExportModeField,.midiExportRateField{min-width:0}.midiExportBassSection{border:1px solid color-mix(in srgb, var(--color-inset-border) 90%, var(--color-text-muted) 10%);background:var(--color-surface-inset);box-sizing:border-box;border-radius:8px;gap:8px;width:100%;margin-top:4px;padding:10px 12px;display:grid}.midiExportBassSectionTitle{letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);font-size:.72rem;font-weight:700}.midiExportBassInclude{color:var(--color-text);cursor:pointer;align-items:center;gap:8px;margin:0;font-size:.85rem;font-weight:600;display:flex}.midiExportBassInclude input{width:1rem;height:1rem;accent-color:var(--color-active);cursor:pointer}.midiExportBassReadonly{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;margin:0;font-size:.8rem;display:grid}.midiExportBassReadonly dt{letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);margin:0;font-size:.68rem;font-weight:650}.midiExportBassReadonly dd{color:var(--color-text);margin:2px 0 0;font-weight:600}@media (width<=480px){.midiExportBassReadonly{grid-template-columns:1fr}}.savedProgressionsSearchField{gap:4px;display:grid}.savedProgressionsSearchLabel{color:var(--color-text-muted);font-size:.78rem;font-weight:600}.savedProgressionsSearchField input{box-sizing:border-box;border:1px solid var(--color-inset-border);background:var(--color-surface-inset);width:100%;color:var(--color-text);font:inherit;border-radius:8px;margin:0;padding:8px 10px;font-size:.88rem}.savedProgressionsNameField input{width:100%}.savedProgressionsList{gap:10px;max-height:min(45vh,420px);margin:0;padding:0;list-style:none;display:grid;overflow:auto}.savedProgressionsRow{box-sizing:border-box;border:1px solid var(--color-inset-border);background:var(--color-surface-inset);border-radius:8px;width:100%;min-width:0;padding:12px 14px}.savedProgressionsRowMain{flex-direction:column;align-items:stretch;gap:10px;width:100%;min-width:0;display:flex}.savedProgressionsMeta{gap:5px;width:100%;min-width:0;display:grid}.savedProgressionsName{color:var(--color-text);letter-spacing:-.01em;word-break:break-word;font-size:1rem;font-weight:600;line-height:1.3}.savedProgressionsSummary{color:var(--color-text-muted);word-break:break-word;font-size:.82rem;line-height:1.35}.savedProgressionsFx{color:var(--color-text-muted);word-break:break-word;font-size:.78rem;line-height:1.35}.savedProgressionsUpdated{color:color-mix(in srgb, var(--color-text-muted) 88%, var(--color-panel-bg));font-size:.72rem;line-height:1.3}.savedProgressionsRowActions{box-sizing:border-box;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:5px 6px;width:100%;min-width:0;display:flex}.savedProgressionsRowAction{box-sizing:border-box;font:inherit;border:1px solid var(--color-secondary-outline);cursor:pointer;white-space:nowrap;border-radius:6px;min-height:30px;margin:0;padding:5px 9px;font-size:.74rem;font-weight:600;line-height:1.2}.savedProgressionsRowActionLoad{border-color:var(--color-primary-border);background:color-mix(in srgb, var(--color-primary) 14%, var(--color-surface-inset) 86%);color:var(--color-text)}.savedProgressionsRowActionLoad:hover:not(:disabled){background:color-mix(in srgb, var(--color-primary) 22%, var(--color-surface-inset) 78%);border-color:var(--color-primary-border)}.savedProgressionsRowActionLoad:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.savedProgressionsRowActionQuiet{border-color:color-mix(in srgb, var(--color-secondary-outline) 55%, var(--color-surface-inset) 45%);color:var(--color-text-muted);background:0 0;font-weight:500}.savedProgressionsRowActionQuiet:hover:not(:disabled){color:var(--color-text);border-color:var(--color-secondary-outline);background:color-mix(in srgb, var(--color-panel-bg) 35%, var(--color-surface-inset) 65%)}.savedProgressionsRowActionQuiet:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.savedProgressionsRowActionDanger{border-color:var(--color-action-danger-border);background:var(--color-action-danger-bg);color:var(--color-action-danger-text);min-height:30px;padding:5px 9px;font-weight:600}.savedProgressionsRowActionDanger:hover:not(:disabled){border-color:var(--color-action-danger-border-hover);background:var(--color-action-danger-bg-hover)}.savedProgressionsRowActionDanger:focus-visible{outline:2px solid var(--color-action-danger-focus);outline-offset:2px}.savedProgressionsEmpty{color:var(--color-text-muted);margin:0}.savedProgressionsEmptyBlock{gap:6px;display:grid}.savedProgressionsEmptyHint{color:var(--color-text-muted);margin:0;font-size:.82rem;line-height:1.4}.savedProgressionsRenameForm{gap:12px;display:grid}.savedProgressionsFooter{justify-content:flex-end;gap:8px;display:flex}.timelineHeader{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.timelineSelectHint{margin-top:8px}.panel{background:var(--color-panel-bg);border:1px solid var(--color-panel-border);border-radius:10px;gap:12px;padding:14px;display:grid}.panel h2{margin:0;font-size:1.1rem}.field{gap:6px;display:grid}.field>span{color:var(--color-text-muted);font-size:.85rem}select,input,button{font:inherit}select,input{background:var(--color-surface-inset);border:1px solid var(--color-inset-border);color:var(--color-text);border-radius:8px;padding:8px}select option,select optgroup{font:inherit;background-color:var(--color-panel-bg);color:var(--color-text)}select optgroup{color:var(--color-text-muted);font-weight:700}select option:checked{background-color:var(--color-active-bg);color:var(--color-on-active)}button{background:var(--color-button-fill);border:1px solid var(--color-button-edge);color:var(--color-text);cursor:pointer;border-radius:8px;padding:8px 10px}button:disabled{cursor:not-allowed;opacity:.65}.primaryButton{background:var(--color-primary);border-color:var(--color-primary-border);color:var(--color-on-primary)}.secondaryButton{border-color:var(--color-secondary-outline);background:0 0}.builderActions{flex-wrap:wrap;gap:8px;display:flex}.builderActions button{flex:180px}.builderActions .primaryButton,.builderActions .secondaryButton{padding:10px 16px;font-size:.9375rem}.modifierGrid,.optionButtonGroup{flex-wrap:wrap;gap:8px;display:flex}.optionButtonGroupRoot{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px 8px;display:grid}.optionButtonGroupRoot .optionButton{box-sizing:border-box;justify-content:center;align-items:center;width:100%;min-width:0;padding:11px 10px 12px;font-size:.9rem;display:flex;position:relative}.optionButtonRootRomanPinned{top:4px;z-index:2;letter-spacing:.03em;text-align:end;pointer-events:none;white-space:nowrap;text-overflow:ellipsis;max-width:42%;color:var(--color-active);font-size:.62rem;font-weight:400;line-height:1.15;position:absolute;inset-inline-end:7px;overflow:hidden}.optionButton.isActive .optionButtonRootRomanPinned{color:var(--color-on-active)}.optionButtonRootLetter{z-index:2;text-align:center;width:100%;font-size:inherit;font-weight:inherit;color:var(--color-text);display:block;position:relative}.optionButton.isActive .optionButtonRootLetter{color:var(--color-on-active)}.optionButtonGroupCompact{flex-wrap:wrap;gap:5px 6px;display:flex}.optionButtonCompact{border-radius:6px;min-width:36px;padding:5px 7px;font-size:.8125rem}.optionButton{min-width:44px}.optionButton.isActive{background:var(--color-active-bg);border-color:var(--color-active);color:var(--color-on-active)}.optionButtonGroupRoot .optionButton.optionButtonScaleRootHint:not(.isActive):before{content:"";z-index:1;background:color-mix(in srgb, var(--color-active) 52%, transparent);pointer-events:none;border-radius:3px;height:4px;position:absolute;bottom:4px;left:8%;right:8%}.optionButtonGroupRoot .optionButton.optionButtonScaleRootHint.isActive:before{content:"";z-index:1;background:color-mix(in srgb, var(--color-on-active) 62%, color-mix(in srgb, var(--color-active) 42%, transparent) 38%);pointer-events:none;border-radius:3px;height:4px;position:absolute;bottom:4px;left:7%;right:7%}.optionButtonGroupCompact .optionButton.optionButtonDiatonicQualityHint{position:relative}.optionButtonGroupCompact .optionButton.optionButtonDiatonicQualityHint:not(.isActive):before{content:"";z-index:1;background:color-mix(in srgb, var(--color-active) 36%, transparent);pointer-events:none;border-radius:2px;height:2.5px;position:absolute;bottom:4px;left:10%;right:10%}.optionButtonGroupCompact .optionButton.optionButtonDiatonicQualityHint.isActive:before{content:"";z-index:1;background:color-mix(in srgb, var(--color-on-active) 48%, color-mix(in srgb, var(--color-active) 32%, transparent) 52%);pointer-events:none;border-radius:2px;height:2.5px;position:absolute;bottom:4px;left:8%;right:8%}.modifier{min-width:54px}.modifier.modifierKeyAssistHint{position:relative}.modifier.modifierKeyAssistHint:not(.isActive):before{content:"";z-index:1;background:color-mix(in srgb, var(--color-active) 30%, transparent);opacity:1;pointer-events:none;border-radius:999px;width:min(70%,2rem);height:1.5px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.modifier.modifierKeyAssistHint.isActive:before{content:"";z-index:1;background:color-mix(in srgb, var(--color-on-active) 46%, color-mix(in srgb, var(--color-active) 28%, transparent) 54%);pointer-events:none;border-radius:999px;width:min(72%,2.05rem);height:1.65px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.modifier.isActive{background:var(--color-active-bg);border-color:var(--color-active);color:var(--color-on-active)}.preview{--preview-stack-gap:13px;box-sizing:border-box;background:var(--color-surface-inset);border:1px solid var(--color-inset-border);padding:10px 10px var(--preview-stack-gap) 10px;align-items:stretch;gap:var(--preview-stack-gap);border-radius:8px;flex-direction:column;min-width:0;display:flex}.previewChordHead,.previewChordLines{flex-direction:column;gap:5px;min-width:0;display:flex}.previewChordHead>p,.previewChordLines>p{margin:0;font-size:.8125rem;line-height:1.28}.previewChordHead>p.previewLabel{font-size:.94rem;font-weight:700;line-height:1.2}.previewChordHead>p.previewVoicingSummary{color:var(--color-text-subtle);font-size:.76rem;font-weight:500;line-height:1.22}.preview .miniKeyboardWrap{gap:3px}.preview .miniKeyboardHint{font-size:.72rem;line-height:1.25}@media (width<=780px){.preview{--preview-stack-gap:11px;padding:8px 8px var(--preview-stack-gap) 8px}.previewChordHead>p.previewLabel{font-size:.88rem}.previewChordHead>p,.previewChordLines>p{font-size:.78rem;line-height:1.26}.previewChordHead>p.previewVoicingSummary{font-size:.71rem}}.previewLabel{margin:0;font-weight:700}.secondaryText{color:var(--color-text-muted);font-size:.84rem}.voicingHeader{justify-content:space-between;align-items:center;gap:8px;display:flex}.linkButton{border:1px solid var(--color-link-border);background:0 0;padding:4px 8px;font-size:.8rem}.voicePositionSliderBlock{gap:8px;display:grid}.voicePositionLabel{text-align:center;color:color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted) 12%);margin:0;font-size:.9rem;font-weight:500}.voicePositionSliderRow{align-items:center;gap:8px;display:flex}.voicePositionEndpoint{color:var(--color-text-subtle);flex:none;width:32px;font-size:.75rem}.voicePositionSliderRow .voicePositionEndpoint:first-child{text-align:left}.voicePositionSliderRow .voicePositionEndpoint:last-child{text-align:right}.voicePositionSlider{min-width:0;height:28px;accent-color:var(--color-primary);flex:1}.voicePositionHint{color:var(--color-text-muted);margin:0;font-size:.82rem}.advancedVoicing{gap:10px;display:grid}.advancedVoicingColumns{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:6px 8px;display:grid}.advancedVoicingColumns .field{min-width:0}.advancedVoicingColumns .optionButtonGroupCompact{gap:3px 5px}.advancedVoicingColumns .optionButtonCompact{border-radius:5px;min-width:24px;padding:3px 5px;font-size:.75rem}.advancedVoicingColumns .field>span{font-size:.76rem}@media (width<=760px){.advancedVoicingColumns{grid-template-columns:1fr}}.miniKeyboardWrap{gap:4px;width:100%;min-width:0;display:grid}.miniKeyboardScroll{width:100%;min-width:0;max-width:100%;padding-bottom:2px;overflow-x:auto}.miniKeyboard{flex-shrink:0;width:100%;min-width:200px;height:44px;position:relative}.miniKeyboardWhite{width:100%;height:100%;display:flex}.miniKeyboardBlack{pointer-events:none;width:100%;height:26px;position:absolute;top:0;left:0}.miniKey.white{box-sizing:border-box;border:1px solid var(--color-key-border);background:var(--color-key-white);border-right-width:0;flex:1 1 0;min-width:0}.miniKey.white:last-child{border-right-width:1px}.miniKey.white.active{background:var(--color-key-active)}.miniKey.black{width:clamp(5px, calc(100% / var(--white-key-count,36) * .62), 14px);background:var(--color-key-black);border:1px solid var(--color-key-black-border);box-sizing:border-box;border-radius:0 0 3px 3px;height:26px;position:absolute;transform:translate(-50%)}.miniKey.black.active{background:var(--color-active)}.miniKeyboardHint{color:var(--color-text-muted);margin:0;font-size:.76rem}.timelineRail{-webkit-user-select:none;user-select:none;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));align-content:start;gap:16px 10px;margin:0;padding:12px 0 26px;list-style:none;display:grid;overflow:visible}.timelineRail.isTimelineDragging{-webkit-user-select:none;user-select:none}.timelineRail li{min-width:0}.timelineRailChordSlot{min-width:0;position:relative}.timelineRailDropIndicatorBefore:before{content:"";background:color-mix(in srgb, var(--color-active) 88%, white 12%);width:3px;box-shadow:0 0 8px color-mix(in srgb, var(--color-active) 45%, transparent);pointer-events:none;z-index:3;border-radius:2px;position:absolute;top:-2px;bottom:-2px;left:-8px}.timelineRailDropIndicatorAfter:after{content:"";background:color-mix(in srgb, var(--color-active) 88%, white 12%);width:3px;box-shadow:0 0 8px color-mix(in srgb, var(--color-active) 45%, transparent);pointer-events:none;z-index:3;border-radius:2px;position:absolute;top:-2px;bottom:-2px;right:-8px}.timelineCard{box-sizing:border-box;-webkit-user-select:none;user-select:none;background:var(--color-surface-inset);border:1px solid var(--color-inset-border);text-align:left;border-radius:8px;flex-direction:column;align-items:stretch;gap:8px;width:100%;min-width:0;max-width:none;min-height:108px;padding:10px 6px 15px;display:flex;position:relative}.timelineDragHandle{box-sizing:border-box;z-index:1;border:1px solid var(--color-inset-border);background-color:color-mix(in srgb, var(--color-surface-inset) 94%, var(--color-chrome-neutral) 6%);width:clamp(62px,72%,96px);min-width:60px;color:inherit;font:inherit;touch-action:none;cursor:grab;border-radius:5px;place-items:center;margin:0;padding:3px 10px;line-height:0;display:grid;position:absolute;bottom:-1px;left:50%;transform:translate(-50%,50%);box-shadow:0 2px 4px #0000002e}.timelineDragHandle:before{content:"";pointer-events:none;box-sizing:border-box;background-color:var(--color-chrome-neutral);width:2px;height:9px;box-shadow:-5px 0 0 0 var(--color-chrome-neutral), 5px 0 0 0 var(--color-chrome-neutral);border-radius:1px;margin:0 auto;display:block}.timelineDragHandle:hover{border-color:color-mix(in srgb, var(--color-active) 35%, var(--color-inset-border) 65%);background-color:color-mix(in srgb, var(--color-surface-inset) 88%, var(--color-chrome-neutral) 12%)}.timelineDragHandle:focus-visible{outline:2px solid color-mix(in srgb, var(--color-active) 65%, transparent);outline-offset:2px}.timelineDragHandle:disabled,.timelineCardDelete:disabled,.timelineCardControls button:disabled{opacity:.48;cursor:not-allowed}.timelineRail.isTimelineDragging .timelineDragHandle:active,.timelineRail.isTimelineDragging .timelineDragHandle{cursor:grabbing}.timelineCard.isDragging{opacity:.92;box-shadow:0 8px 20px #00000042}.timelineCardTopStrip{flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;min-height:30px;padding-right:2px;display:flex}.timelineCardTopStripSpacer{pointer-events:none;flex:auto;min-width:0}.timelineCardControls{z-index:1;flex-wrap:nowrap;flex-shrink:0;align-items:center;gap:4px;display:inline-flex;position:relative;top:auto;right:auto}.timelineCardControls button{min-width:22px;padding:2px 5px;font-size:.7rem}.timelineCard.isSelected{border-color:var(--color-active);box-shadow:0 0 0 1px var(--color-active-glow);padding-right:8px}.timelineCard.isPlaybackPlaying{outline:2px solid var(--color-playback-ring);outline-offset:1px;border-color:color-mix(in srgb, var(--color-playback-ring) 55%, var(--color-inset-border) 45%);background-color:color-mix(in srgb, var(--color-playback-ring) 14%, var(--color-surface-inset) 86%)}.timelineCard.isSelected.isPlaybackPlaying{border-color:var(--color-active);box-shadow:0 0 0 1px var(--color-active-glow);background-color:color-mix(in srgb, var(--color-playback-ring) 12%, color-mix(in srgb, var(--color-active) 10%, var(--color-surface-inset) 90%));outline:2px solid var(--color-playback-ring);outline-offset:1px;border-style:solid}.timelineCard.isSelected.isMultiSelected{border-style:dashed;border-color:color-mix(in srgb, var(--color-active) 50%, var(--color-inset-border) 50%);box-shadow:0 0 0 1px color-mix(in srgb, var(--color-active-glow) 55%, var(--color-chrome-neutral-2) 45%)}.timelineCard.isSelected.isMultiSelected.isPlaybackPlaying{background-color:color-mix(in srgb, var(--color-playback-ring) 13%, color-mix(in srgb, var(--color-active) 7%, var(--color-surface-inset) 93%));outline:2px solid var(--color-playback-ring);outline-offset:1px}.progressionMultiSelectBar{box-sizing:border-box;border:1px solid color-mix(in srgb, var(--color-inset-border) 92%, var(--color-chrome-neutral) 8%);background:color-mix(in srgb, var(--color-panel-bg) 55%, var(--color-surface-inset) 45%);border-radius:8px;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:2px;padding:8px 10px;display:flex}.progressionMultiSelectBarLabel{min-width:0;color:var(--color-text-muted);flex:auto;font-size:.82rem;font-weight:600}.progressionMultiSelectBarDuplicate,.progressionMultiSelectBarDelete,.progressionMultiSelectBarClear{flex:none;padding:6px 12px;font-size:.82rem}.progressionMultiSelectBarDuplicate:disabled{opacity:.48;cursor:not-allowed}.progressionMultiSelectBarDelete{border-color:var(--color-action-danger-border);background:var(--color-action-danger-bg);color:var(--color-action-danger-text)}.progressionMultiSelectBarDelete:hover:not(:disabled){border-color:var(--color-action-danger-border-hover);background:var(--color-action-danger-bg-hover)}.progressionMultiSelectBarDelete:focus-visible{outline:2px solid var(--color-action-danger-focus);outline-offset:2px}.progressionMultiSelectBarDelete:disabled{opacity:.48;cursor:not-allowed}.timelineCard.isSelected .timelineCardTopStrip{padding-right:22px}.timelineCardDelete{z-index:2;border-radius:999px;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:14px;font-weight:700;line-height:1;display:flex;position:absolute;top:-8px;right:-8px}.timelineCardDeleteGlyph{transform:translateY(-1px)}.timelineCardAuditionChip{cursor:pointer;width:fit-content;color:color-mix(in srgb, var(--color-text) 90%, var(--color-active) 10%);background:color-mix(in srgb, var(--color-surface-inset) 88%, var(--color-active) 12%);border:1px solid color-mix(in srgb, var(--color-inset-border) 80%, var(--color-active) 20%);border-radius:999px;justify-content:center;align-items:center;gap:2px;margin:0;padding:3px 8px 3px 6px;font-family:inherit;font-size:.76rem;font-weight:600;line-height:1.15;display:inline-flex}.timelineCardAuditionChip:hover{border-color:color-mix(in srgb, var(--color-active) 45%, var(--color-inset-border) 55%);color:var(--color-text)}.timelineCardAuditionChip:focus-visible{outline:2px solid var(--color-accent-focus-soft);outline-offset:2px}.timelineCardAuditionChipNumber{text-align:center;min-width:.75em}.timelineCardAuditionChipPlayIcon{opacity:.95;margin-top:-1px;font-size:.68rem;line-height:1;display:inline-block}.timelineCardLabelBlock{flex-direction:column;flex:auto;justify-content:center;gap:2px;min-width:0;min-height:2.35rem;display:flex}.timelineCardRomanNumeral{letter-spacing:.04em;color:var(--color-active);white-space:nowrap;text-overflow:ellipsis;font-size:.68rem;font-weight:650;line-height:1.15;overflow:hidden}.timelineCardLabel{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:.81rem;font-weight:700;line-height:1.25;display:block;overflow:hidden}@media (width<=720px){.timelineRail{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 6px;padding:8px 0 16px}.timelineCard{border-radius:6px;gap:5px;min-height:0;padding:6px 4px 11px}.timelineCardTopStrip{gap:4px;min-height:0;padding-right:0}.timelineCardLabelBlock{gap:1px;min-height:0}.timelineCardRomanNumeral{font-size:.62rem}.timelineCardLabel{min-height:0;font-size:.7rem;font-weight:700;line-height:1.2}.timelineCardAuditionChip{gap:1px;padding:2px 5px 2px 4px;font-size:.65rem}.timelineCardAuditionChipPlayIcon{font-size:.6rem}.timelineDragHandle{width:clamp(44px,68%,72px);min-width:44px;padding:2px 6px}.timelineDragHandle:before{height:8px}.timelineCardControls button{min-width:20px;padding:2px 4px;font-size:.65rem}.timelineCard.isSelected .timelineCardTopStrip{padding-right:16px}.timelineCardDelete{width:22px;height:22px;font-size:12px;top:-6px;right:-6px}}@media (width<=359px){.timelineRail{grid-template-columns:repeat(3,minmax(0,1fr))}}.timelineActions{gap:8px;display:flex}.timelineControls{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:10px;display:grid}.transportRow{flex-wrap:wrap;align-items:end;gap:10px;display:flex}.transportHint,.emptyState{color:var(--color-text-muted);margin:0}html[data-glow=on]{--glow-s:1}html[data-glow=on][data-glow-intensity=medium]{--glow-s:1.5}html[data-glow=on][data-glow-intensity=high]{--glow-s:2}html[data-glow=on][data-theme-text=dark-glyphs] .optionButton.isActive,html[data-glow=on][data-theme-text=dark-glyphs] .modifier.isActive{box-shadow:0 0 calc(18px * var(--glow-s)) color-mix(in srgb, var(--color-active) 36%, transparent), 0 0 calc(40px * var(--glow-s)) color-mix(in srgb, var(--color-active) 14%, transparent)}html[data-glow=on][data-theme-text=light-glyphs] .optionButton.isActive,html[data-glow=on][data-theme-text=light-glyphs] .modifier.isActive{box-shadow:0 0 calc(12px * var(--glow-s)) color-mix(in srgb, var(--color-active) 20%, transparent)}html[data-glow=on][data-theme-text=dark-glyphs] .chordBuilderPanel .builderActions .primaryButton{box-shadow:0 0 calc(20px * var(--glow-s)) color-mix(in srgb, var(--color-primary) 30%, transparent), 0 1px 0 #00000038}html[data-glow=on][data-theme-text=light-glyphs] .chordBuilderPanel .builderActions .primaryButton{box-shadow:0 0 calc(14px * var(--glow-s)) color-mix(in srgb, var(--color-primary) 18%, transparent), 0 1px 0 #00000024}html[data-glow=on][data-theme-text=dark-glyphs] .keyAssistStripeGuidanceShellAssistOn{box-shadow:0 0 0 1px color-mix(in srgb, var(--color-active) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-active) 7%, transparent), 0 0 calc(28px * var(--glow-s)) color-mix(in srgb, var(--color-active) 26%, transparent)}html[data-glow=on][data-theme-text=light-glyphs] .keyAssistStripeGuidanceShellAssistOn{box-shadow:0 0 0 1px color-mix(in srgb, var(--color-active) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-active) 7%, transparent), 0 0 calc(16px * var(--glow-s)) color-mix(in srgb, var(--color-active) 14%, transparent)}html[data-glow=on] .keyAssistChip:hover{box-shadow:0 0 calc(14px * var(--glow-s)) color-mix(in srgb, var(--color-active) 18%, transparent)}html[data-glow=on][data-theme-text=dark-glyphs] .timelineCard.isSelected{box-shadow:0 0 0 1px var(--color-active-glow), 0 0 calc(22px * var(--glow-s)) color-mix(in srgb, var(--color-active) 32%, transparent), 0 0 calc(44px * var(--glow-s)) color-mix(in srgb, var(--color-active) 12%, transparent)}html[data-glow=on][data-theme-text=light-glyphs] .timelineCard.isSelected{box-shadow:0 0 0 1px var(--color-active-glow), 0 0 calc(14px * var(--glow-s)) color-mix(in srgb, var(--color-active) 18%, transparent)}html[data-glow=on][data-theme-text=dark-glyphs] .timelineCard.isPlaybackPlaying{box-shadow:0 0 0 1px color-mix(in srgb, var(--color-playback-ring) 42%, transparent), 0 0 calc(22px * var(--glow-s)) color-mix(in srgb, var(--color-playback-ring) 34%, transparent), 0 0 calc(40px * var(--glow-s)) color-mix(in srgb, var(--color-playback-ring) 12%, transparent)}html[data-glow=on][data-theme-text=light-glyphs] .timelineCard.isPlaybackPlaying{box-shadow:0 0 0 1px color-mix(in srgb, var(--color-playback-ring) 32%, transparent), 0 0 calc(12px * var(--glow-s)) color-mix(in srgb, var(--color-playback-ring) 20%, transparent)}html[data-glow=on][data-theme-text=dark-glyphs] .timelineCard.isSelected.isPlaybackPlaying{box-shadow:0 0 0 1px var(--color-active-glow), 0 0 0 1px color-mix(in srgb, var(--color-playback-ring) 36%, transparent), 0 0 calc(20px * var(--glow-s)) color-mix(in srgb, var(--color-playback-ring) 32%, transparent), 0 0 calc(44px * var(--glow-s)) color-mix(in srgb, var(--color-active) 13%, transparent)}html[data-glow=on][data-theme-text=light-glyphs] .timelineCard.isSelected.isPlaybackPlaying{box-shadow:0 0 0 1px var(--color-active-glow), 0 0 0 1px color-mix(in srgb, var(--color-playback-ring) 28%, transparent), 0 0 calc(12px * var(--glow-s)) color-mix(in srgb, var(--color-playback-ring) 20%, transparent)}html[data-glow=on][data-theme-text=dark-glyphs] .progressionTransportLoopButtonActive:not(:disabled){box-shadow:0 0 calc(18px * var(--glow-s)) color-mix(in srgb, var(--color-action-warning-border) 42%, transparent)}html[data-glow=on][data-theme-text=light-glyphs] .progressionTransportLoopButtonActive:not(:disabled){box-shadow:0 0 calc(12px * var(--glow-s)) color-mix(in srgb, var(--color-action-warning-border) 26%, transparent)}html[data-glow=on][data-theme-text=dark-glyphs] .progressionTransportPlayButton:not(:disabled){box-shadow:0 0 calc(18px * var(--glow-s)) color-mix(in srgb, var(--color-action-success-border) 40%, transparent)}html[data-glow=on][data-theme-text=light-glyphs] .progressionTransportPlayButton:not(:disabled){box-shadow:0 0 calc(12px * var(--glow-s)) color-mix(in srgb, var(--color-action-success-border) 24%, transparent)}html[data-glow=on][data-theme-text=dark-glyphs] .progressionTransportStopButton:not(:disabled){box-shadow:0 0 calc(18px * var(--glow-s)) color-mix(in srgb, var(--color-action-danger-border) 44%, transparent)}html[data-glow=on][data-theme-text=light-glyphs] .progressionTransportStopButton:not(:disabled){box-shadow:0 0 calc(12px * var(--glow-s)) color-mix(in srgb, var(--color-action-danger-border) 26%, transparent)}html[data-glow=on] .appSelectTrigger:focus-visible{box-shadow:0 0 calc(12px * var(--glow-s)) color-mix(in srgb, var(--color-active) 26%, transparent)}html[data-glow=on][data-theme-text=dark-glyphs] .miniKey.white.active{box-shadow:0 0 calc(10px * var(--glow-s)) color-mix(in srgb, var(--color-active) 42%, transparent)}html[data-glow=on][data-theme-text=light-glyphs] .miniKey.white.active{box-shadow:0 0 calc(8px * var(--glow-s)) color-mix(in srgb, var(--color-active) 20%, transparent)}html[data-glow=on][data-theme-text=dark-glyphs] .miniKey.black.active{box-shadow:0 0 calc(10px * var(--glow-s)) color-mix(in srgb, var(--color-active) 48%, transparent)}html[data-glow=on][data-theme-text=light-glyphs] .miniKey.black.active{box-shadow:0 0 calc(8px * var(--glow-s)) color-mix(in srgb, var(--color-active) 22%, transparent)}@media (prefers-reduced-motion:reduce){html[data-glow=on] .optionButton.isActive,html[data-glow=on] .modifier.isActive,html[data-glow=on] .chordBuilderPanel .builderActions .primaryButton,html[data-glow=on] .keyAssistStripeGuidanceShellAssistOn,html[data-glow=on] .keyAssistChip:hover,html[data-glow=on] .timelineCard.isSelected,html[data-glow=on] .timelineCard.isPlaybackPlaying,html[data-glow=on] .progressionTransportLoopButtonActive:not(:disabled),html[data-glow=on] .progressionTransportPlayButton:not(:disabled),html[data-glow=on] .progressionTransportStopButton:not(:disabled),html[data-glow=on] .appSelectTrigger:focus-visible,html[data-glow=on] .miniKey.white.active,html[data-glow=on] .miniKey.black.active{box-shadow:none!important}}.accountHeaderBlock{align-items:center;gap:8px;display:flex;position:relative}.accountHeaderSignedIn{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;max-width:min(100vw - 48px,280px);display:flex}.accountHeaderEmail{color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap;max-width:160px;font-size:.82rem;overflow:hidden}.accountHeaderSignOutError{color:var(--color-danger,#e85a5a);flex:100%;margin:0;font-size:.78rem}.accountHeaderButton{box-sizing:border-box;min-height:44px;padding:8px 11px;font-size:.86rem}.accountHeaderStatus{text-align:center;min-width:2rem;font-size:.9rem}.accountHeaderStatusMuted{color:var(--color-text-muted)}.accountAuthDialog{border:1px solid var(--color-panel-border);background:var(--color-panel-bg);width:min(400px,100%);max-width:calc(100vw - 32px);color:var(--color-text);border-radius:12px;padding:0}.accountAuthDialog::backdrop{background:#0000008c}.accountAuthDialogPanel{gap:12px;padding:16px 18px;display:grid}.accountAuthDialogTitle{margin:0;font-size:1.1rem}.accountAuthDialogNote{margin:0;font-size:.86rem;line-height:1.45}.accountAuthDialogMuted{color:var(--color-text-muted)}.accountAuthCode{background:color-mix(in srgb, var(--color-text) 8%, transparent);border-radius:4px;padding:1px 5px;font-size:.78rem}.accountAuthForm{gap:10px;display:grid}.accountAuthField{gap:4px;display:grid}.accountAuthLabel{font-size:.8rem;font-weight:600}.accountAuthInput{box-sizing:border-box;border:1px solid var(--color-panel-border);background:var(--color-app-bg,var(--color-panel-bg));width:100%;color:var(--color-text);font:inherit;border-radius:8px;padding:8px 10px;font-size:.9rem}.accountAuthDialogError{color:var(--color-danger,#e85a5a);margin:0;font-size:.84rem}.accountAuthActions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.accountAuthLinks{flex-wrap:wrap;align-items:center;gap:10px 14px;display:flex}.accountAuthLinkButton{color:var(--color-active);font:inherit;cursor:pointer;text-underline-offset:2px;background:0 0;border:none;margin:0;padding:0;font-size:.82rem;text-decoration:underline}.accountAuthLinkButton:hover:not(:disabled){color:var(--color-primary)}.accountAuthLinkButton:disabled{opacity:.55;cursor:not-allowed}.accountAuthFooterActions{justify-content:flex-end;display:flex}.savedProgressionsSyncHint{color:var(--color-text-muted);margin:-4px 0 0;font-size:.8rem;line-height:1.4}