:root{--color-bg:#16151a;--color-surface:#1f1e25;--color-surface-raised:#2a2831;--color-surface-raised-hover:#34323d;--color-surface-inset:#100f13;--color-accent:#d8a84e;--color-accent-hover:#e8bd68;--color-accent-subtle:#d8a84e24;--color-text:#ece9f2;--color-text-secondary:#9d99ac;--color-text-muted:#ffffff8f;--color-text-on-accent:#16151a;--color-border:#ffffff0f;--color-border-light:#ffffff09;--color-border-highlight:#ffffff1c;--color-key-white:#f2ede3;--color-key-white-hover:#e6e0d4;--color-key-white-border:#c5bfb2;--color-key-black:#171519;--color-key-black-hover:#24212a;--color-key-black-border:#08070a;--color-key-active:#e2b45c;--color-key-active-deep:#a97c2c;--color-key-active-glow:#d8a84e80;--color-key-ghost:#86601c;--color-key-ghost-tint:#e2b45c33;--color-key-label:#4f4a43;--color-key-label-on-black:#ded7ca;--color-key-label-active:#3a2c0c;--color-key-binding:#634409;--color-brand-stem:var(--color-key-white);--color-danger:#e5604f;--color-danger-subtle:#e5604f1f;--color-danger-fill:#e5604f3d;--color-success:#2ecc71;--color-loading-overlay:#16151ad9;--color-placeholder:#ffffff06;--color-ambient-warm:#d8a84e12;--color-ambient-cool:#7882be0d;--shadow-neu-raised:0 8px 24px #0000008c, 0 1px 0 #ffffff0d inset;--shadow-neu-sm:0 3px 10px #00000073, 0 1px 0 #ffffff0a inset;--shadow-neu-inset:inset 0 2px 6px #00000080;--shadow-neu-button:0 2px 5px #0006, 0 1px 0 #ffffff0d inset;--shadow-neu-button-active:inset 0 2px 5px #00000073;--shadow-glow-accent:0 0 0 1px #d8a84e8c, 0 0 18px #d8a84e38;--btn-padding-y:6px;--btn-padding-x:14px;--btn-padding-x-icon:8px;--btn-gap:6px;--btn-font-size:13px;--control-min-size:auto;--control-box:calc(var(--btn-padding-y) * 2 + var(--btn-font-size) * 1.4);--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-round:50%;--transition-fast:.12s;--transition-normal:.2s;--anim-duration-short:.2s;--anim-duration-medium:.3s;--anim-duration-loop:1.4s;--anim-ease-out:ease-out;--anim-ease-in:ease-in;--font-family:"Montserrat", sans-serif;--font-size-2xs:12px;--font-size-xs:12px;--font-size-sm:13px;--font-size-base:14px;--font-size-lg:16px;--font-size-xl:18px;--font-size-2xl:24px;--font-size-key-tone:11px;--font-size-key-tone-tight:9px;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700}[data-theme=light]{--color-bg:#eeeae3;--color-surface:#f7f4ee;--color-surface-raised:#fffdf9;--color-surface-raised-hover:#f3efe7;--color-surface-inset:#e2ddd3;--color-accent:#9a6f1c;--color-accent-hover:#855f16;--color-accent-subtle:#9a6f1c1f;--color-text:#241f18;--color-text-secondary:#645c51;--color-text-muted:#0000009e;--color-text-on-accent:#fffdf9;--color-border:#00000017;--color-border-light:#0000000d;--color-border-highlight:#00000024;--color-key-white:#fffdf8;--color-key-white-hover:#f4f0e6;--color-key-white-border:#cec7b8;--color-key-black:#241f26;--color-key-black-hover:#322b35;--color-key-black-border:#17131a;--color-key-active:#e8b53c;--color-key-active-deep:#c08d1e;--color-key-active-glow:#c8911e73;--color-key-ghost-tint:#e8b53c33;--color-key-label:#4a443b;--color-key-label-on-black:#ded7ca;--color-key-label-active:#3a2c0c;--color-key-binding:#634409;--color-brand-stem:var(--color-key-black);--color-danger:#c0392b;--color-danger-subtle:#c0392b1a;--color-danger-fill:#c0392b33;--color-loading-overlay:#eeeae3d9;--color-placeholder:#00000008;--color-ambient-warm:#9a6f1c0f;--color-ambient-cool:#5a64a00a;--shadow-neu-raised:0 6px 20px #3c2d1421, 0 1px 0 #ffffffe6 inset;--shadow-neu-sm:0 2px 8px #3c2d141a, 0 1px 0 #fffc inset;--shadow-neu-inset:inset 0 2px 5px #3c2d141f;--shadow-neu-button:0 1px 3px #3c2d141f, 0 1px 0 #ffffffd9 inset;--shadow-neu-button-active:inset 0 2px 4px #3c2d1426;--shadow-glow-accent:0 0 0 1px #9a6f1c80, 0 0 16px #9a6f1c2e}@media (max-width:768px),(max-height:500px){:root{--font-size-key-tone:var(--font-size-sm)}}@media (pointer:coarse){:root{--control-min-size:44px;--control-box:44px}}@media (pointer:coarse) and (max-width:768px),(pointer:coarse) and (max-height:500px){:root{--control-min-size:36px;--control-box:36px;--btn-padding-y:4px;--btn-padding-x:10px;--btn-padding-x-icon:6px;--btn-font-size:12px;--btn-gap:4px}}@media (pointer:coarse) and (max-height:330px){:root{--control-min-size:32px;--control-box:32px;--btn-padding-y:3px;--btn-padding-x:8px}}@font-face{font-family:Montserrat;src:url(/fonts/montserrat-latin-var.woff2)format("woff2-variations");font-weight:400 700;font-style:normal;font-display:swap}*,:before,:after{box-sizing:border-box;font-family:var(--font-family);margin:0;padding:0}.icon{box-sizing:content-box;vertical-align:-.125em;width:1.25em;height:1em;display:inline-block;overflow:visible}html,body{background-color:var(--color-bg);height:100%;color:var(--color-text);transition:background-color var(--transition-normal), color var(--transition-normal);overflow:hidden}body{display:flex}main,.app-shell{width:100%}#root{width:100%;height:100%;display:flex}a{color:var(--color-accent);text-decoration:none}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-xs)}::selection{background:var(--color-accent-subtle);color:var(--color-text)}*{scrollbar-width:thin;scrollbar-color:var(--color-border-highlight) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border-highlight);background-clip:content-box;border:3px solid #0000;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted);background-clip:content-box}small{font-size:var(--font-size-base);color:var(--color-text-secondary)}@media (pointer:coarse){input,select,textarea{min-height:var(--control-min-size);font-size:max(16px, var(--btn-font-size))}}:root{--chord-card-h:56px}.chords.is-diagrams,.tray-library.is-diagrams,.drag-overlay,.save-flight{--chord-card-h:104px}.skip-link{top:var(--spacing-xs);left:var(--spacing-xs);z-index:100;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-accent);border-radius:var(--radius-sm);background:var(--color-surface-raised);color:var(--color-text);font-size:var(--font-size-sm);position:absolute;transform:translateY(-200%)}.skip-link:focus-visible{transform:none}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-wrapper{height:100vh;isolation:isolate;height:100dvh;position:relative;overflow:hidden}.app-wrapper:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(120% 80% at 50% 100%, var(--color-ambient-warm) 0%, transparent 60%), radial-gradient(90% 60% at 15% 0%, var(--color-ambient-cool) 0%, transparent 55%);position:absolute;inset:0}.app-layout{flex:1;min-width:0;overflow:hidden}.app-logo{flex-shrink:0;width:22px;height:22px;display:block}.app-logo-link{min-width:var(--control-min-size);min-height:var(--control-min-size);border-radius:var(--radius-sm);transition:opacity var(--anim-duration-short) ease;justify-content:center;align-items:center;display:flex}.app-logo-link:hover{opacity:.75}.app-logo-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.main-column{background:var(--color-bg);flex:1;min-height:0;overflow:hidden}@media (max-width:768px),(max-height:500px){.app-logo{width:20px;height:20px}}@media (max-height:500px){.surface.surface-pad-md.controls,.surface.surface-pad-md.action-bar{padding-top:3px;padding-bottom:3px}.surface.surface-pad-md.controls{flex-wrap:nowrap;overflow:visible}.surface.surface-pad-md.controls .controls-end{flex-wrap:nowrap;min-width:0}.practice-sheet .workspace{padding-top:var(--spacing-xs);padding-bottom:var(--spacing-xs);gap:var(--spacing-xs)}.section-header{padding-top:var(--spacing-2xs,2px);padding-bottom:var(--spacing-2xs,2px)}}.error-fallback{justify-content:center;align-items:center;gap:var(--spacing-md);padding:var(--spacing-xl);text-align:center;flex-direction:column;min-height:200px;display:flex}.error-fallback .error-fallback-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-danger)}.error-fallback .error-fallback-message{font-size:var(--font-size-sm);color:var(--color-text-secondary);max-width:400px}.btn{background:var(--color-surface-raised);border:1px solid var(--color-border-highlight);box-shadow:var(--shadow-neu-button);cursor:pointer;transition:background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast)}.btn:hover{background:var(--color-surface-raised-hover)}.btn:active{background:var(--color-surface);box-shadow:var(--shadow-neu-button-active);transform:translateY(1px)}.btn{justify-content:center;align-items:center;gap:var(--btn-gap);padding:var(--btn-padding-y) var(--btn-padding-x);min-height:var(--control-min-size);min-width:var(--control-min-size);font-size:var(--btn-font-size);font-weight:var(--font-weight-semibold);font-family:var(--font-family);color:var(--color-text);border-radius:var(--radius-sm);white-space:nowrap;display:inline-flex}.btn.is-active{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.btn.is-bounce{animation:bounce-y var(--anim-duration-medium) var(--anim-ease-out)}.btn:disabled,.btn.is-disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}.btn:disabled.btn-accent,.btn.is-disabled.btn-accent,.btn[aria-disabled=true].btn-accent{border-color:var(--color-border);color:var(--color-text-muted)}.btn:disabled:active,.btn.is-disabled:active,.btn[aria-disabled=true]:active{box-shadow:var(--shadow-neu-button);transform:none}.btn.btn-icon{padding:var(--btn-padding-y) var(--btn-padding-x-icon)}.btn.btn-danger:hover{color:var(--color-danger)}.btn.btn-accent:hover{color:var(--color-accent)}.btn.btn-danger:hover:not(:disabled),.btn.btn-danger:focus-visible:not(:disabled){color:var(--color-danger)}.btn.btn-accent{border-color:var(--color-accent);color:var(--color-accent)}.btn.btn-accent:hover:not(:disabled){background:var(--color-accent-subtle)}.btn.btn-accent.is-stop{border-color:var(--color-danger);color:var(--color-danger);animation:pulse-scale var(--anim-duration-loop) ease-in-out infinite}.btn.btn-accent.is-stop:hover{background:var(--color-danger-subtle)}.btn-dashed{justify-content:center;align-items:center;gap:var(--spacing-sm);background:linear-gradient(var(--color-placeholder), var(--color-placeholder)), var(--color-surface);border:1px dashed var(--color-border-highlight);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);font-family:var(--font-family);cursor:pointer;transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);display:flex}.btn-dashed:hover{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-subtle);box-shadow:none}@media (max-width:768px),(max-height:500px){.btn-label{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes slide-up-fade-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes pulse-scale{0%{transform:scale(1)}40%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes pulse-breathe{0%,to{transform:scale(1.03)}50%{transform:scale(1.06)}}@keyframes pulse-fade{0%,to{opacity:.7}50%{opacity:1}}@keyframes bounce-y{0%,to{transform:translateY(0)}40%{transform:translateY(-3px)}60%{transform:translateY(1px)}}@keyframes arrive-settle{0%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes arrive-mark{0%{outline-color:var(--color-accent)}to{outline-color:#0000}}@media (prefers-reduced-motion:reduce){@keyframes pulse-scale{0%,to{transform:none}}@keyframes pulse-breathe{0%,to{transform:scale(1.03)}}@keyframes pulse-fade{0%,to{opacity:.85}}@keyframes bounce-y{0%,to{transform:none}}@keyframes arrive-settle{0%,to{transform:none}}@keyframes slide-up-fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-down-fade-out{0%{opacity:1}to{opacity:0}}*,:before,:after{transition-duration:0s!important}}.flex{display:flex}.flex.flex-column{flex-direction:column}.flex.flex-align-start{align-items:flex-start}.flex.flex-align-center{align-items:center}.flex.flex-align-end{align-items:flex-end}.flex.flex-align-stretch{align-items:stretch}.flex.flex-align-baseline{align-items:baseline}.flex.flex-justify-start{justify-content:flex-start}.flex.flex-justify-center{justify-content:center}.flex.flex-justify-end{justify-content:flex-end}.flex.flex-justify-between{justify-content:space-between}.flex.flex-justify-around{justify-content:space-around}.flex.flex-gap-xs{gap:var(--spacing-xs)}.flex.flex-gap-sm{gap:var(--spacing-sm)}.flex.flex-gap-md{gap:var(--spacing-md)}.flex.flex-gap-lg{gap:var(--spacing-lg)}.flex.flex-gap-xl{gap:var(--spacing-xl)}.flex.flex-wrap{flex-wrap:wrap}.divider{background:var(--color-border-highlight);flex-shrink:0}.divider.divider-vertical{align-self:stretch;width:1px}.divider.divider-horizontal{align-self:stretch;height:1px}.text{font-family:var(--font-family);color:var(--color-text)}.text.text-xs{font-size:var(--font-size-xs)}.text.text-sm{font-size:var(--font-size-sm)}.text.text-base{font-size:var(--font-size-base)}.text.text-lg{font-size:var(--font-size-lg)}.text.text-xl{font-size:var(--font-size-xl)}.text.text-normal{font-weight:var(--font-weight-normal)}.text.text-medium{font-weight:var(--font-weight-medium)}.text.text-semibold{font-weight:var(--font-weight-semibold)}.text.text-bold{font-weight:var(--font-weight-bold)}.text.text-secondary{color:var(--color-text-secondary)}.text.text-muted{color:var(--color-text-muted)}.text.text-accent{color:var(--color-accent)}.text.text-danger{color:var(--color-danger)}.text.text-center{text-align:center}.text.text-right{text-align:right}.text.text-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.heading{font-family:var(--font-family);font-weight:var(--font-weight-bold);color:var(--color-text);margin:0}.heading.heading-1{font-size:var(--font-size-xl)}.heading.heading-2{font-size:var(--font-size-lg)}.heading.heading-3,.heading.heading-4{font-size:var(--font-size-base)}.heading.heading-5{font-size:var(--font-size-sm)}.heading.text-secondary{color:var(--color-text-secondary)}.heading.text-muted{color:var(--color-text-muted)}.heading.text-accent{color:var(--color-accent)}.surface{background:var(--color-surface);border:1px solid var(--color-border-highlight);border-radius:var(--radius-lg)}.surface.surface-flush{border-radius:0}.surface.surface-bg{background:var(--color-bg)}.surface.surface-raised{background:var(--color-surface-raised)}.surface.surface-inset{background:var(--color-surface-inset)}.surface.surface-border-top{border:none;border-top:1px solid var(--color-border-highlight)}.surface.surface-border-bottom{border:none;border-bottom:1px solid var(--color-border-highlight)}.surface.surface-border-right{border:none;border-right:1px solid var(--color-border-highlight)}.surface.surface-border-left{border:none;border-left:1px solid var(--color-border-highlight)}.surface.surface-pad-sm{padding:var(--spacing-sm)}.surface.surface-pad-md{padding:var(--spacing-sm) var(--spacing-md)}.surface.surface-pad-lg{padding:var(--spacing-md) var(--spacing-lg)}.card{border-radius:var(--radius-md);background:var(--color-surface-raised);border:1px solid var(--color-border-highlight);box-shadow:var(--shadow-neu-sm);transition:background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast)}.card.is-active{border-color:var(--color-accent);box-shadow:var(--shadow-glow-accent), var(--shadow-neu-sm);background:var(--color-accent-subtle)}.card.is-playing{border-color:var(--color-accent);background:var(--color-accent-subtle)}.card.card-pad-sm{padding:var(--spacing-sm)}.card.card-pad-md{padding:var(--spacing-sm) var(--spacing-md)}.overlay-surface{background:var(--color-surface-raised);border:1px solid var(--color-border-highlight);border-radius:var(--radius-md);box-shadow:var(--shadow-neu-raised)}.inline-edit-display{cursor:pointer;align-items:center;gap:var(--spacing-xs);display:inline-flex}.inline-edit-display:hover .edit-trigger{opacity:1;pointer-events:auto}.inline-edit-heading{font-size:inherit;font-weight:inherit}.edit-trigger{color:var(--color-text-muted);opacity:0;pointer-events:none}.edit-trigger:focus-visible{opacity:1;pointer-events:auto}.inline-edit-input{width:100%;font-family:var(--font-family);color:var(--color-text);background:var(--color-surface-inset);border:1px solid var(--color-accent);border-radius:var(--radius-sm);box-shadow:var(--shadow-glow-accent), var(--shadow-neu-inset);padding:var(--spacing-xs) var(--spacing-sm);outline:none}.field-hint{z-index:200;pointer-events:none;max-width:calc(100vw - 16px);position:fixed;top:0;left:0}.field-hint.overlay-surface{padding:var(--spacing-xs) var(--spacing-sm)}.badge{font-family:var(--font-family);font-weight:var(--font-weight-bold);white-space:nowrap;justify-content:center;align-items:center;line-height:1;display:inline-flex}.badge.badge-sm{font-size:var(--font-size-2xs);border-radius:10px;padding:2px 6px}.badge.badge-md{font-size:var(--font-size-xs);border-radius:var(--radius-xs);padding:2px 8px}.badge.badge-accent{background:var(--color-accent);color:var(--color-bg)}.badge.badge-muted{background:var(--color-border-highlight);color:var(--color-text-secondary)}.badge.badge-danger{background:var(--color-danger);color:var(--color-text-on-accent)}.empty-state{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xl);text-align:center;flex-direction:column;display:flex}.empty-state .empty-state-icon{font-size:var(--font-size-xl);color:var(--color-text-muted)}.empty-state .empty-state-message{font-size:var(--font-size-sm);color:var(--color-text-secondary);max-width:280px}.action-bar{justify-content:center;gap:var(--spacing-sm);padding-top:var(--spacing-lg);padding-bottom:var(--spacing-lg);flex-direction:column;flex-shrink:0;min-height:188px;position:relative}.action-bar:before{content:"";pointer-events:none;background:linear-gradient(to top, var(--color-surface), transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);height:40px;position:absolute;bottom:100%;left:0;right:0;-webkit-mask-image:linear-gradient(#0000,#000 60%);mask-image:linear-gradient(#0000,#000 60%)}.action-bar .display{justify-content:center;align-items:center;min-width:0;height:112px}.action-bar .chord-display{gap:var(--spacing-xs);flex-direction:column;min-width:0}.action-bar .chord-main{color:var(--color-accent);white-space:nowrap;animation:pulse-scale var(--anim-duration-medium) var(--anim-ease-out);font-size:3.25rem;line-height:1}.action-bar .count-in{font-variant-numeric:tabular-nums;animation:none}.action-bar .count-in .text{color:var(--color-text-muted);opacity:.55}.action-bar .count-in .text.is-past{color:var(--color-text-secondary);opacity:1}.action-bar .count-in .text.is-now{color:var(--color-accent);opacity:1;animation:pulse-scale var(--anim-duration-medium) var(--anim-ease-out)}.action-bar .chord-meaning,.action-bar .chord-alternatives{white-space:nowrap}.action-bar .chord-alternatives:empty{display:none}.action-bar .chord-message{white-space:nowrap;margin:0}.action-bar .note-role{line-height:1.25}.action-bar .chord-message.is-welcome{font-size:var(--font-size-base);color:var(--color-text)}.action-bar .controls,.action-bar .bar-actions{flex-shrink:0}.action-bar .bar-actions{z-index:1;position:relative}.btn.key-picker,.btn.chord-next-chord{padding:1px var(--spacing-xs);font-size:inherit;font-weight:var(--font-weight-semibold);line-height:inherit;color:var(--color-text);border-radius:var(--radius-xs);box-shadow:none;vertical-align:baseline;gap:3px}.key-picker-chevron{color:var(--color-text-secondary);font-size:.7em}.chord-next{white-space:nowrap;margin-left:var(--spacing-sm);font-size:var(--font-size-sm);flex-wrap:nowrap;line-height:1.25}.btn.chord-next-chord{gap:var(--spacing-xs)}.btn.chord-next-info{min-width:0;font-size:var(--font-size-xs);color:var(--color-text-muted);box-shadow:none;background:0 0;border:0;padding:1px}.btn.chord-next-info:hover{color:var(--color-text);background:0 0}.btn.chord-alternate{min-width:0;min-height:0;font-size:var(--font-size-xs);color:var(--color-text-secondary);box-shadow:none;text-underline-offset:3px;background:0 0;border:0;border-radius:0;padding:0;line-height:1.25;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.btn.chord-alternate:hover{color:var(--color-text);background:0 0}.btn.chord-alternate:active{box-shadow:none;background:0 0;transform:none}.btn.chord-alternate[aria-pressed=true]{color:var(--color-accent);text-decoration-style:solid}@media (pointer:coarse){.btn.chord-alternate{min-height:var(--control-min-size);margin-block:calc((1.25em - var(--control-min-size)) / 2)}.btn.chord-next-chord,.btn.chord-next-info{min-width:0;min-height:0;position:relative}.btn.chord-next-chord:after,.btn.chord-next-info:after{content:"";width:max(100%, var(--control-min-size));height:var(--control-min-size);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}@media (max-width:768px),(max-height:500px){.action-bar{gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm)}.action-bar .divider{display:none}.action-bar{min-height:0;padding-top:var(--spacing-xs);padding-bottom:var(--spacing-xs);flex-direction:row;justify-content:flex-start}.action-bar:before{display:none}.action-bar .chord-display{flex-flow:wrap;row-gap:0}.action-bar .chord-meaning{font-size:var(--font-size-2xs);text-overflow:ellipsis;flex-basis:100%;order:1;overflow:hidden}.action-bar .chord-main{font-size:var(--font-size-2xl)}.action-bar{flex-wrap:wrap;row-gap:0}.action-bar .display{display:contents}.action-bar .chord-display{padding-left:var(--spacing-sm);flex:1}.action-bar .privacy-notice{padding:0 var(--spacing-sm);flex-basis:100%;order:1}.action-bar .note-badges{display:none}.action-bar .chord-detail{display:contents}.action-bar .chord-alternatives,.action-bar .chord-alternatives:empty{min-height:calc(1.25 * var(--font-size-xs));flex-basis:100%;order:2;display:flex}.action-bar .chord-alternate~.chord-alternate{display:none}.action-bar .chord-message{font-size:var(--font-size-2xs);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.action-bar .chord-message.is-welcome{font-size:var(--font-size-xs);white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box}.action-bar .controls .btn{padding:var(--spacing-sm);gap:0;font-size:0}.action-bar .controls .btn svg{font-size:var(--font-size-base)}.action-bar .controls .btn.btn-save{font-size:var(--btn-font-size);gap:var(--btn-gap);padding:var(--btn-padding-y) var(--spacing-sm)}}@media (max-width:768px) and (min-height:501px){.surface.surface-pad-md.action-bar{padding-top:var(--spacing-xs);padding-bottom:var(--spacing-xs);row-gap:var(--spacing-xs)}.action-bar{column-gap:var(--spacing-sm)}.action-bar .chord-display{min-width:0;min-height:calc(3 * var(--control-box) + 2 * var(--spacing-2xs,2px));align-content:start;column-gap:var(--spacing-sm);flex:1 1 0;grid-template-columns:minmax(0,max-content) minmax(max-content,1fr);row-gap:0;padding-left:0;display:grid}.action-bar .chord-display:has(>.chord-message){align-content:center}.action-bar .chord-meaning,.action-bar .chord-alternatives,.action-bar .chord-next,.action-bar .chord-message{contain:inline-size}.action-bar .chord-main{text-overflow:ellipsis;grid-area:1/1;min-width:0;overflow:hidden}.action-bar .chord-function{white-space:nowrap;grid-area:1/2;justify-self:start}.action-bar .chord-meaning{white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;grid-area:2/1/auto/-1;display:-webkit-box}.action-bar .chord-alternatives,.action-bar .chord-alternatives:empty{grid-area:3/1/auto/-1}.action-bar .chord-display:has(.chord-next){grid-template-rows:auto auto auto 1fr}.action-bar .chord-next{--next-fade:var(--spacing-lg);min-width:0;height:var(--control-box);margin:calc((1.25em - var(--control-box)) / 2) 0 0;scrollbar-width:none;scroll-padding-inline:var(--next-fade);grid-area:4/1/auto/-1;align-self:end;overflow:auto hidden}.action-bar .chord-next>*{flex-shrink:0}.action-bar .chord-next.can-scroll-left{-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--next-fade));mask-image:linear-gradient(to right, transparent, #000 var(--next-fade))}.action-bar .chord-next.can-scroll-right{-webkit-mask-image:linear-gradient(to left, transparent, #000 var(--next-fade));mask-image:linear-gradient(to left, transparent, #000 var(--next-fade))}.action-bar .chord-next.can-scroll-left.can-scroll-right{-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--next-fade), #000 calc(100% - var(--next-fade)), transparent);mask-image:linear-gradient(to right, transparent, #000 var(--next-fade), #000 calc(100% - var(--next-fade)), transparent)}.action-bar .chord-message,.action-bar .chord-message.is-welcome{white-space:normal;-webkit-line-clamp:3;-webkit-box-orient:vertical;grid-column:1/-1;display:-webkit-box}.action-bar .chord-message.is-welcome{font-size:var(--font-size-base)}.action-bar .privacy-notice{padding:0}.action-bar .bar-actions{align-self:flex-start;gap:var(--spacing-2xs,2px);grid-template-columns:repeat(2,auto);display:grid}.action-bar .controls{display:contents}}.octave-arrows{flex-shrink:0}.btn.octave-arrows-btn{width:var(--control-box);height:var(--control-box);color:var(--color-text-secondary);background:0 0;border-color:#0000;padding:0}.btn.octave-arrows-btn,.btn.octave-arrows-btn:active,.btn.octave-arrows-btn.is-disabled:active{box-shadow:none}.btn.octave-arrows-btn:hover{background:0 0}.btn.octave-arrows-btn:active:not(.is-disabled){background:var(--color-surface-raised)}.btn.octave-arrows-btn .icon{font-size:var(--font-size-base)}@media (hover:hover){.btn.octave-arrows-btn:hover:not(.is-disabled){color:var(--color-text)}}@media (max-width:768px) and (min-height:501px){.action-bar .octave-arrows{top:calc(2 * (var(--control-box) + var(--spacing-2xs,2px)));position:absolute;right:0}.action-bar .bar-actions:has(>.controls>:nth-child(4)) .octave-arrows{right:calc(100% + var(--spacing-sm))}.action-bar:has(.octave-arrows):has(.controls>:nth-child(4)) .chord-next{margin-right:calc(2 * var(--control-box) + var(--spacing-sm))}}@media (pointer:coarse) and (max-width:768px) and (min-height:501px){.action-bar .btn.chord-alternate{z-index:1;position:relative}}@media (min-width:769px) and (min-height:501px) and (max-height:820px),(min-width:1200px) and (min-height:821px) and (max-height:960px){.surface.surface-pad-md.action-bar{padding-top:var(--spacing-xs);padding-bottom:var(--spacing-xs)}.action-bar{flex-flow:wrap;justify-content:space-between;row-gap:0;min-height:0}.action-bar .display{display:contents}.action-bar .chord-display{align-content:center;align-items:center;column-gap:var(--spacing-md);min-width:0;height:52px;padding-left:var(--spacing-sm);flex:1;grid-template-columns:auto minmax(0,1fr);row-gap:2px;display:grid}.action-bar .chord-main{font-size:var(--font-size-2xl);grid-row:span 2}.action-bar .chord-meaning,.action-bar .chord-detail{text-overflow:ellipsis;min-width:0;overflow:hidden}.action-bar .chord-message,.action-bar .chord-message.is-welcome{font-size:var(--font-size-sm);white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;grid-column:1/-1;display:-webkit-box;overflow:hidden}.action-bar .chord-alternate~.chord-alternate{display:none}.action-bar .privacy-notice{padding:0 var(--spacing-sm) 2px;flex-basis:100%;order:1}}@media (min-width:1200px) and (min-height:821px) and (max-height:960px){.action-bar .chord-main{font-size:2.5rem}}@media (min-width:1300px) and (min-height:501px) and (max-height:960px){.action-bar .display{min-width:0;height:52px;padding-left:var(--spacing-sm);flex:1;justify-content:center;align-items:flex-start;gap:0;display:flex}.action-bar .chord-display{max-width:100%;height:auto;padding-left:0}.action-bar .privacy-notice{flex-basis:auto;order:0;padding:0}.action-bar .privacy-notice.is-held{display:none}}@media (min-width:769px) and (max-width:1000px) and (min-height:501px) and (max-height:820px){.action-bar .bar-actions .btn-label{display:none}}.action-bar .chord-next.is-squeezed{visibility:hidden;pointer-events:none;position:absolute;top:0;left:0}@media (max-height:330px){.action-bar .chord-alternatives,.action-bar .chord-alternatives:empty{display:none}}.dropdown{left:0;top:calc(100% + var(--spacing-xs));z-index:100;padding:var(--spacing-xs);min-width:120px;max-height:min(85vh,640px);position:absolute;overflow-y:auto}.dropdown.dropdown-xs{width:160px}.dropdown.dropdown-sm{width:max-content;min-width:220px;max-width:calc(100vw - 16px)}.dropdown.dropdown-md{width:280px}.dropdown.dropdown-lg{width:360px}.dropdown.dropdown-right{left:auto;right:0}.dropdown.dropdown-portal{max-height:var(--dd-max-h,min(85vh, 640px));left:var(--dd-left);right:auto;top:calc(var(--dd-top) + var(--spacing-xs));position:fixed;bottom:auto}.dropdown.dropdown-portal.dropdown-up{top:auto;bottom:calc(var(--dd-bottom) + var(--spacing-xs))}.dropdown.dropdown-portal.dropdown-beside{top:var(--dd-top);bottom:auto}.dropdown:after{content:"";bottom:calc(-1 * var(--spacing-xs));height:32px;margin-top:-32px;margin-bottom:calc(-1 * var(--spacing-xs));background:linear-gradient(to bottom, transparent, var(--color-surface-raised));pointer-events:none;opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;position:sticky}.dropdown.can-scroll-down:after{opacity:1}.dropdown{animation:slide-up-fade-in var(--anim-duration-short) var(--anim-ease-out)}.dropdown.is-closing{pointer-events:none;animation:slide-down-fade-out var(--anim-duration-short) var(--anim-ease-in) forwards}.dropdown .dropdown-item{align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--btn-padding-y) var(--spacing-sm);font-size:var(--btn-font-size);font-weight:var(--font-weight-medium);font-family:var(--font-family);color:var(--color-text);cursor:pointer;border-radius:var(--radius-xs);text-align:left;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;display:flex}.dropdown .dropdown-item:hover{background:var(--color-surface)}.dropdown .dropdown-item.is-disabled,.dropdown .dropdown-item:disabled{opacity:.45;cursor:default}.dropdown .dropdown-item.is-disabled:hover,.dropdown .dropdown-item:disabled:hover{background:0 0}.dropdown .dropdown-item.dropdown-item-danger:hover:not(.is-disabled){color:var(--color-danger)}.dropdown .dropdown-item-check{width:16px;color:var(--color-accent);flex-shrink:0;justify-content:center;display:inline-flex}.dropdown .dropdown-item-icon{width:16px;color:var(--color-text-secondary);flex-shrink:0;justify-content:center;display:inline-flex}.dropdown .dropdown-header{padding:var(--btn-padding-y) var(--spacing-sm);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border);margin-bottom:4px}.dropdown .dropdown-heading{padding:var(--spacing-sm) var(--spacing-sm) 0}.dropdown .dropdown-item-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.dropdown .dropdown-item-actions{gap:var(--spacing-xs);flex-shrink:0;display:flex}.dropdown .dropdown-item .btn.btn-icon{color:var(--color-text-secondary)}.dropdown .dropdown-item .btn.btn-icon.is-active{color:var(--color-accent)}.dropdown .dropdown-item .btn.btn-icon[aria-disabled=true]{opacity:.45;cursor:not-allowed}.dropdown .dropdown-item .btn.btn-icon[aria-disabled=true]:hover{color:var(--color-text-secondary)}.overflow-menu{display:inline-flex;position:relative}@media (pointer:coarse){.dropdown .dropdown-item{min-height:var(--control-min-size)}}.dropdown-row{gap:var(--spacing-xs);display:flex}.dropdown-row .dropdown-item{text-align:center;flex:1 1 0;justify-content:center;min-width:0}.dropdown-item.has-divider{border-bottom:1px solid var(--color-border-highlight);padding-bottom:var(--spacing-xs);margin-bottom:4px}.dropdown.dropdown-md{min-width:320px}.dropdown-row .dropdown-item{gap:var(--spacing-xs);padding-left:var(--spacing-sm);padding-right:var(--spacing-sm)}.dropdown-row .dropdown-item.is-active{background:var(--color-accent-subtle);color:var(--color-accent)}.piano-row{background:var(--color-surface-inset);flex-direction:column;flex:0 0 160px;height:160px;display:flex;position:relative;overflow:hidden}.piano-row .status-bar{z-index:3;position:absolute;top:0;left:0;right:0}.piano-row .keyboard-scroll{flex:1;min-height:0;display:flex}.piano-row .keyboard-scroll:focus-visible{outline:none}.piano-row .keyboard-scroll:focus-visible>.keyboard:after{content:"";z-index:3;outline:2px solid var(--color-accent);outline-offset:-2px;pointer-events:none;position:absolute;inset:0}.status-bar{background:var(--color-surface-inset);border-bottom:1px solid var(--color-border);justify-content:center;align-items:center;gap:var(--spacing-xs);height:24px;font-size:var(--font-size-xs);color:var(--color-text-secondary);flex:none;display:flex}.status-bar.is-error{color:var(--color-danger)}.status-bar .status-retry{color:var(--color-accent);cursor:pointer;font-size:var(--font-size-xs);background:0 0;border:none;padding:0;text-decoration:underline}.keyboard{flex:1;width:100%;min-height:0;display:flex;position:relative}.keyboard.is-silent{opacity:.75}.keyboard{background:var(--color-surface);--kbd-black-w:calc(100vw / 34);--kbd-black-offset:calc(100vw / -68)}.keyboard .key-wrapper{position:relative}.keyboard .key-wrapper:not([data-sharp=true]){flex:1;height:100%}.keyboard .key-wrapper[data-sharp=true]{flex:0 0 0;height:100%}.keyboard .key-button{cursor:pointer;transition:transform var(--transition-fast), box-shadow var(--transition-fast);border:none;justify-content:center;align-items:flex-end;padding:0 0 8px;display:flex;position:relative}.keyboard .key-order{top:6px;left:calc(50% + var(--badge-shift,0px));font-size:var(--font-size-key-tone);line-height:1;font-weight:var(--font-weight-bold);color:var(--color-key-label-active);white-space:nowrap;position:absolute;transform:translate(-50%)}.keyboard .key-wrapper:is([data-note^=C],[data-note^=F]):not([data-sharp=true],[data-note=C6]){--badge-shift:calc(var(--kbd-black-w) / -4)}.keyboard .key-wrapper:is([data-note^=E],[data-note^=B]){--badge-shift:calc(var(--kbd-black-w) / 4)}.keyboard .key-wrapper:not([data-sharp=true]) .key-order.is-long{top:calc(60% + 6px);left:50%}.keyboard .key-wrapper:not([data-sharp=true]) .key-button{background:linear-gradient(to bottom, var(--color-key-white) 0%, var(--color-key-white-hover) 88%, var(--color-key-white-border) 100%);border-right:1px solid var(--color-key-white-border);border-radius:0 0 5px 5px;width:100%;height:100%;box-shadow:0 2px 4px #0000004d,inset 0 -2px 2px #00000012,inset 0 1px #ffffffe6}.keyboard .key-wrapper:not([data-sharp=true]) .key-button:hover{background:linear-gradient(to bottom, var(--color-key-white-hover) 0%, var(--color-key-white-border) 100%)}.keyboard .key-wrapper:not([data-sharp=true]) .key-button.is-active{background:linear-gradient(to bottom, var(--color-key-active) 0%, var(--color-key-active) 85%, var(--color-key-active-deep) 100%);box-shadow:0 1px 2px #00000059, 0 0 16px var(--color-key-active-glow), inset 0 -1px 1px #0000001f, inset 0 1px 0 #ffffff73;transform-origin:top;transform:scaleY(.97)}.keyboard .key-wrapper:not([data-sharp=true]) .key-button.is-disabled{opacity:.5;cursor:not-allowed}.keyboard .key-button.is-hint:after{content:"";border-radius:inherit;background:var(--color-key-active);opacity:0;pointer-events:none;animation:pulse-fade var(--anim-duration-loop) ease-in-out infinite;position:absolute;inset:0}.keyboard .key-button.is-ghost:before{content:"";border-radius:inherit;background:var(--color-key-ghost-tint);box-shadow:inset 0 0 0 2px var(--color-key-ghost);pointer-events:none;animation:fade-in var(--transition-fast) ease-out;position:absolute;inset:0}.keyboard .key-wrapper[data-sharp=true] .key-button.is-ghost:before{box-shadow:inset 0 0 0 2px var(--color-key-active)}.keyboard .key-button.is-ghost .key-label{position:relative}.keyboard .key-binding{font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);color:var(--color-key-binding);-webkit-user-select:none;user-select:none;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.keyboard .key-wrapper[data-sharp=true] .key-binding{bottom:auto;top:calc(50% - 4px + 1.15 * var(--font-size-2xs));color:var(--color-key-active)}.keyboard .key-button.is-active .key-binding,.keyboard .key-button.is-hint .key-binding{z-index:1;color:var(--color-key-black)}.keyboard .key-label{line-height:1.15;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--color-key-label);-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;display:flex}.keyboard .key-wrapper[data-sharp=true] .key-label{font-size:var(--font-size-2xs);color:var(--color-key-label-on-black);line-height:1.15}.keyboard .key-button.is-active .key-label{color:var(--color-key-black)}.keyboard .key-button.is-hint .key-label{z-index:1;color:var(--color-key-label-active);position:relative}.keyboard .key-wrapper[data-sharp=true] .key-button{width:var(--kbd-black-w);height:60%;top:0;left:var(--kbd-black-offset);z-index:2;background:linear-gradient(to bottom, var(--color-key-black-hover) 0%, var(--color-key-black) 80%, var(--color-key-black-border) 100%);border:1px solid var(--color-key-black-border);border-top:none;border-radius:0 0 4px 4px;align-items:center;position:absolute;box-shadow:0 4px 6px #0000008c,inset 0 -2px 2px #00000059,inset 0 1px #ffffff12}.keyboard .key-wrapper[data-sharp=true] .key-button:hover{background:linear-gradient(to bottom, var(--color-key-black-hover) 0%, var(--color-key-black-hover) 80%, var(--color-key-black) 100%)}.keyboard .key-wrapper[data-sharp=true] .key-button.is-active{background:linear-gradient(to bottom, var(--color-key-active) 0%, var(--color-key-active-deep) 80%, var(--color-key-active-deep) 100%);box-shadow:0 2px 3px #0006, 0 0 14px var(--color-key-active-glow), inset 0 -1px 1px #00000026, inset 0 1px 0 #ffffff4d;transform:translateY(2px)}.keyboard .key-wrapper[data-sharp=true] .key-button.is-disabled{opacity:.5;cursor:not-allowed}@media (max-width:768px),(max-height:500px){.piano-row{flex:none;height:200px}.piano-row .keyboard-scroll{-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow:auto hidden}.piano-row .note-badges{display:none}.keyboard{--kbd-black-w:28px;--kbd-black-offset:-14px;min-width:968px}}@media (max-width:768px) and (min-height:501px) and (max-height:779px){.piano-row{height:132px}}@media (max-height:500px){:root{--piano-row-h:88px}.piano-row{flex:0 0 var(--piano-row-h);height:var(--piano-row-h)}.keyboard .key-wrapper[data-sharp=true] .key-button:has(.key-order) .key-label{visibility:hidden}.keyboard .key-wrapper:not([data-sharp=true]) .key-order.is-long{top:6px;left:calc(50% + var(--badge-shift,0px));font-size:var(--font-size-key-tone-tight)}}@media (max-height:330px){:root{--piano-row-h:64px}.piano-row{flex:0 0 var(--piano-row-h);height:var(--piano-row-h)}.keyboard .key-wrapper[data-sharp=true] .key-binding{line-height:1;top:auto;bottom:0}.keyboard .key-wrapper[data-sharp=true] .key-button:has(.key-binding) .key-label-flat{display:none}}@media (max-width:768px),(max-height:500px){.piano-row{position:relative}.piano-row:before,.piano-row:after{content:"";pointer-events:none;opacity:0;width:24px;transition:opacity var(--transition-fast);z-index:3;position:absolute;top:0;bottom:0}.piano-row:before{background:linear-gradient(to right, var(--color-bg), transparent);left:0}.piano-row:after{background:linear-gradient(to left, var(--color-bg), transparent);right:0}.piano-row.can-scroll-left:before,.piano-row.can-scroll-right:after{opacity:1}}@media (forced-colors:active){.keyboard .key-wrapper[data-sharp=true] .key-button:not(.is-active){background:canvas}.keyboard .key-wrapper[data-sharp] .key-button.is-active{background:highlight}.keyboard .key-button.is-active :is(.key-label,.key-binding,.key-order){forced-color-adjust:none;color:highlighttext}.keyboard .key-button.is-ghost:before{outline-offset:-4px;outline:2px dashed highlight}}.number-stepper{align-items:center;gap:2px;display:flex}.number-stepper input{width:42px}@media (pointer:coarse){.number-stepper input{width:52px}}.number-stepper input{padding:var(--btn-padding-y) var(--spacing-xs);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--btn-font-size);font-weight:var(--font-weight-semibold);text-align:center;background:var(--color-surface-inset);color:var(--color-text);box-shadow:var(--shadow-neu-inset);appearance:textfield}.number-stepper input::-webkit-inner-spin-button{appearance:none;margin:0}.number-stepper input::-webkit-outer-spin-button{appearance:none;margin:0}.number-stepper input:focus{border-color:var(--color-accent);box-shadow:var(--shadow-glow-accent), var(--shadow-neu-inset);outline:none}.number-stepper-btn{padding:var(--btn-padding-y) var(--btn-padding-x-icon)}.saved-tray{--tray-max:min(264px, 38vh);max-height:0;transition:max-height var(--transition-normal) ease;flex:none;overflow:hidden}.saved-tray.is-open{max-height:var(--tray-max)}.saved-tray .panel-grabber{display:none}.saved-tray .tray-body{gap:var(--spacing-xs);min-height:0;padding:0 var(--spacing-md) var(--spacing-xs);flex-direction:column;display:flex;overflow:hidden auto}.saved-tray .tray-library{flex-direction:column;flex:0 auto;gap:0;min-width:0;display:flex}.saved-tray .panel-tray-row{padding:var(--spacing-sm) var(--spacing-md);align-items:stretch}.panel-card{position:relative}.saved-tray .panel-card{width:auto;min-width:168px;height:var(--chord-card-h,56px);flex-direction:column;flex:none;scroll-margin-inline:8px;display:flex}.saved-tray .panel-card-body{margin-block:auto}.saved-tray .panel-card-menu{z-index:2;opacity:0;pointer-events:none;transition:opacity var(--transition-fast);position:absolute;top:4px;left:auto;right:4px}.saved-tray .panel-card:hover .panel-card-menu,.saved-tray .panel-card:focus-visible .panel-card-menu{opacity:1;pointer-events:auto}.saved-tray .panel-card-menu:has(:focus-visible){opacity:1;pointer-events:auto}.saved-tray .panel-card-menu:has([aria-expanded=true]){opacity:1;pointer-events:auto}.saved-tray .panel-card .panel-card-name{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.saved-tray .panel-card .text.panel-card-name:not(.inline-edit-input){text-overflow:ellipsis;white-space:nowrap;max-width:9.25em;overflow:hidden}.saved-tray .panel-card-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);white-space:nowrap}.saved-tray .panel-card-chord{margin-right:var(--spacing-sm)}.saved-tray .panel-card-info{min-width:0}.saved-tray .panel-card-body{padding:var(--spacing-xs) var(--spacing-sm)}@media (max-width:768px),(max-height:500px){.saved-tray .tray-body{padding-left:0;padding-right:0}}@media (max-width:768px) and (min-height:501px){.saved-tray{border-top:none;border-right:none;border-bottom:1px solid var(--color-border-highlight);width:100%;transition:flex-basis var(--transition-normal) ease, height var(--transition-normal) ease;margin-left:0;overflow:hidden}.saved-tray.is-open{overflow:visible}.saved-tray .tray-body{padding-bottom:0}.saved-tray .panel-grabber{z-index:1;cursor:grab;touch-action:none;flex:none;justify-content:center;align-items:center;height:6px;display:flex;position:relative}.saved-tray .panel-grabber:before{content:"";position:absolute;inset:-14px 0 -24px}.saved-tray .panel-grabber-bar{border-radius:var(--radius-round,999px);background:var(--color-border-highlight);width:36px;height:4px}.saved-tray .section-header{padding:var(--spacing-xs) var(--spacing-sm)}.saved-tray .section-title{font-size:var(--font-size-sm)}.saved-tray .panel-tray-row{padding:var(--spacing-xs) var(--spacing-sm);align-items:stretch}.saved-tray .tray-library.is-diagrams{--chord-card-h:auto}.saved-tray .tray-library.is-diagrams .section-header{padding-top:var(--spacing-xs);padding-bottom:var(--spacing-xs)}.saved-tray .tray-library.is-diagrams .panel-tray-row{padding-top:var(--spacing-2xs,2px)}.saved-tray .tray-library.is-diagrams .panel-card-body{padding-top:var(--spacing-2xs,2px);padding-bottom:var(--spacing-2xs,2px)}.saved-tray .tray-library.is-diagrams .panel-card-name,.saved-tray .tray-library.is-diagrams .panel-card-subtitle{line-height:1.15}.saved-tray .tray-library:not(.is-diagrams) .panel-card{flex-direction:row;flex:none;align-items:center;gap:0;width:auto;min-width:36px;height:auto;padding:0;display:flex}.saved-tray .tray-library:not(.is-diagrams) .panel-card .mini-piano,.saved-tray .tray-library:not(.is-diagrams) .panel-card .panel-card-subtitle{display:none}.saved-tray .tray-library:not(.is-diagrams) .panel-card-menu{order:1;width:0;position:static;overflow:hidden}.saved-tray .tray-library:not(.is-diagrams) .panel-card:hover .panel-card-menu,.saved-tray .tray-library:not(.is-diagrams) .panel-card.is-active .panel-card-menu,.saved-tray .tray-library:not(.is-diagrams) .panel-card:focus-visible .panel-card-menu{opacity:1;pointer-events:auto;width:auto}.saved-tray .tray-library:not(.is-diagrams) .panel-card-menu:has(:focus-visible){opacity:1;pointer-events:auto;width:auto}.saved-tray .tray-library:not(.is-diagrams) .panel-card-menu:has([aria-expanded=true]){opacity:1;pointer-events:auto;width:auto}.saved-tray .tray-library:not(.is-diagrams){--chord-card-h:auto;flex-direction:row;align-items:center}.saved-tray .tray-library:not(.is-diagrams) .section-header{padding-top:var(--spacing-2xs,2px);padding-bottom:var(--spacing-2xs,2px);border-bottom:none;flex:none;padding-right:0}.saved-tray .panel-card-body{padding:var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm)}.saved-tray .panel-card-subtitle,.saved-tray .panel-card-info .text{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.saved-tray .panel-card-info .inline-edit-input{width:9em;max-width:none}.saved-tray .empty-state{padding:var(--spacing-sm) var(--spacing-md)}.saved-tray .empty-state-message{font-size:var(--font-size-xs)}}@media (min-width:769px) and (min-height:501px) and (max-height:820px),(min-width:1200px) and (min-height:821px) and (max-height:960px){.saved-tray .tray-body{align-items:stretch;gap:var(--spacing-sm);padding-top:var(--spacing-xs);flex-direction:row}.saved-tray .tray-library{flex:auto}.saved-tray .tray-library:not(.is-diagrams){--chord-card-h:auto;flex-direction:row;align-items:center}.saved-tray .tray-library:not(.is-diagrams) .section-header{border-bottom:none;flex:none;padding-right:0}.saved-tray .tray-library:not(.is-diagrams) .section-header .btn-label{display:none}.saved-tray .tray-library .section-title{font-size:var(--font-size-sm);white-space:nowrap}.saved-tray .panel-tray-row{padding:var(--spacing-xs) var(--spacing-sm);align-items:center}.saved-tray .tray-library:not(.is-diagrams) .panel-card{flex-direction:row;align-items:center;min-width:36px;display:flex}.saved-tray .tray-library:not(.is-diagrams) .panel-card .mini-piano,.saved-tray .tray-library:not(.is-diagrams) .panel-card .panel-card-subtitle{display:none}.saved-tray .tray-library:not(.is-diagrams) .panel-card .panel-card-name{font-size:var(--font-size-base)}.saved-tray .tray-library:not(.is-diagrams) .panel-card-menu{margin-right:var(--spacing-2xs,2px);order:1;position:static}.saved-tray .empty-state{padding:var(--spacing-xs) var(--spacing-sm)}.saved-tray .empty-state-icon{display:none}}@media (max-height:500px){.saved-tray .tray-body{align-items:stretch;gap:var(--spacing-sm);padding-top:var(--spacing-xs);flex-direction:row}.saved-tray .tray-library{flex:auto}.saved-tray .tray-library:not(.is-diagrams){--chord-card-h:auto;flex-direction:row;align-items:center}.saved-tray .tray-library:not(.is-diagrams) .section-header{border-bottom:none;flex:none;padding-right:0}.saved-tray .tray-library:not(.is-diagrams) .section-header .btn-label{display:none}.saved-tray .tray-library .section-title{font-size:var(--font-size-sm);white-space:nowrap}.saved-tray .panel-tray-row{padding:var(--spacing-xs) var(--spacing-sm);align-items:center}.saved-tray .tray-library:not(.is-diagrams) .panel-card{flex-direction:row;align-items:center;min-width:36px;display:flex}.saved-tray .tray-library:not(.is-diagrams) .panel-card .mini-piano,.saved-tray .tray-library:not(.is-diagrams) .panel-card .panel-card-subtitle{display:none}.saved-tray .tray-library:not(.is-diagrams) .panel-card .panel-card-name{font-size:var(--font-size-base)}.saved-tray .tray-library:not(.is-diagrams) .panel-card-menu{margin-right:var(--spacing-2xs,2px);order:1;position:static}.saved-tray .empty-state{padding:var(--spacing-xs) var(--spacing-sm)}.saved-tray .empty-state-icon{display:none}.saved-tray .tray-library{flex:1 1 0;min-width:0}.saved-tray .tray-library.is-diagrams{--chord-card-h:auto;flex-direction:row;align-items:center}.saved-tray .tray-library.is-diagrams .section-header{border-bottom:none;flex:none;padding-right:0}.saved-tray .tray-library.is-diagrams .panel-tray-row{padding-top:var(--spacing-2xs,2px);padding-bottom:var(--spacing-2xs,2px)}.saved-tray .tray-library.is-diagrams .mini-piano{height:20px}.saved-tray .tray-library.is-diagrams .panel-card-body{padding:1px var(--spacing-xs) 1px var(--spacing-sm)}.saved-tray .tray-library.is-diagrams .panel-card-info{align-items:baseline;gap:var(--spacing-sm);flex-direction:row}.saved-tray .tray-library.is-diagrams .panel-card-name,.saved-tray .tray-library.is-diagrams .panel-card-subtitle{white-space:nowrap;line-height:1.15}}.practice-sheet{flex:1;width:100%;min-height:0}.practice-sheet .controls{flex-shrink:0;position:relative}.practice-sheet .panel-collapse{flex:none}.practice-sheet.controls,.practice-sheet .controls{flex-wrap:nowrap}.practice-sheet.controls .controls-start,.practice-sheet.controls .controls-end,.practice-sheet .controls .controls-start,.practice-sheet .controls .controls-end{flex-wrap:nowrap;min-width:0}.practice-sheet .playback-bar{background:var(--color-border);height:3px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.practice-sheet .playback-bar-fill{background:var(--color-accent);height:100%;width:var(--bar-end);animation:bar-fill var(--bar-duration) linear forwards}@keyframes bar-fill{0%{width:var(--bar-start)}to{width:var(--bar-end)}}.practice-sheet .workspace{min-height:0;padding:var(--spacing-lg) var(--spacing-md);background:var(--color-bg);gap:var(--spacing-md);flex:1;overflow-y:auto}.practice-sheet .workspace.can-scroll-down{-webkit-mask-image:linear-gradient(#000 calc(100% - 32px),#0000);mask-image:linear-gradient(#000 calc(100% - 32px),#0000)}.practice-sheet .section{box-shadow:var(--shadow-neu-sm)}.practice-sheet .add-section{padding:var(--spacing-md);border-radius:var(--radius-md)}.practice-sheet .add-chord{box-sizing:border-box;width:56px;min-height:56px;height:var(--chord-card-h,56px);align-self:flex-start;min-height:0}.practice-sheet .section{position:relative;overflow:visible}.practice-sheet .section-header{padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--color-border);background:var(--color-surface-raised);border-radius:var(--radius-md) var(--radius-md) 0 0;position:relative}.practice-sheet .section-header:before{content:"";left:0;top:var(--spacing-sm);bottom:var(--spacing-sm);background:var(--color-accent);opacity:.55;border-radius:0 2px 2px 0;width:3px;position:absolute}.practice-sheet .section-title{font-size:var(--font-size-lg)}.practice-sheet .drag-handle{color:var(--color-text-secondary);cursor:grab;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-size:var(--font-size-base);transition:color var(--transition-fast);background:0 0;border:none;align-items:center;padding:4px;display:flex}.practice-sheet .drag-handle:hover{color:var(--color-text)}.practice-sheet .drag-handle:active{cursor:grabbing}@media (pointer:coarse){.practice-sheet .drag-handle{min-width:var(--control-min-size);min-height:var(--control-min-size);margin:calc((var(--control-min-size) - 22px) / -2) -8px;justify-content:center}}.practice-sheet .section-title{cursor:pointer}.practice-sheet .section-title:hover{color:var(--color-accent)}.practice-sheet .section-controls{margin-left:auto}.practice-sheet .section-header:hover .edit-trigger{opacity:1;pointer-events:auto}.practice-sheet .section-action{flex-shrink:0}.practice-sheet .chords .empty-state{padding:var(--spacing-md);flex:1}.practice-sheet .chords{padding:var(--spacing-md)}.practice-sheet .add-chord-wrapper{flex:none;align-self:stretch;display:flex;position:relative}.chords-scroll-wrap{flex:1;min-width:0;position:relative}.chords-scroll-wrap:before,.chords-scroll-wrap:after{content:"";pointer-events:none;opacity:0;width:28px;transition:opacity var(--transition-fast);z-index:1;position:absolute;top:0;bottom:0}.chords-scroll-wrap:before{background:linear-gradient(to right, var(--color-surface), transparent);left:0}.chords-scroll-wrap:after{background:linear-gradient(to left, var(--color-surface), transparent);right:0}.chords-scroll-wrap.can-scroll-left:before,.chords-scroll-wrap.can-scroll-right:after{opacity:1}.chords-scroll{align-items:flex-start;gap:var(--spacing-sm);scrollbar-width:thin;padding-bottom:var(--spacing-xs);display:flex;position:relative;overflow-x:auto}.chords-row-spacer{height:var(--row-height)}.chord-card{background:var(--color-surface-raised);border:1px solid var(--color-border-highlight);box-shadow:var(--shadow-neu-button);cursor:pointer;transition:background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast)}.chord-card:hover{background:var(--color-surface-raised-hover)}.chord-card:active{background:var(--color-surface);box-shadow:var(--shadow-neu-button-active);transform:translateY(1px)}.chord-card{height:var(--chord-card-h,auto);flex:none;width:84px;min-height:56px}.chord-card.has-diagram{width:136px}.practice-sheet.is-octaves .chord-card.has-diagram{width:232px}.chord-card.has-diagram{padding:var(--spacing-sm) 0 0;justify-content:flex-start;gap:0}.chord-card.has-diagram .mini-piano{flex:none}.chord-card.has-diagram .chord-name{padding-inline:var(--spacing-xs);margin-block:auto}.chord-card{border-radius:var(--radius-md);padding:var(--spacing-sm);cursor:grab;justify-content:center;align-items:center;gap:var(--spacing-sm);contain:layout;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:background var(--anim-duration-medium) var(--anim-ease-out), box-shadow var(--anim-duration-medium) var(--anim-ease-out), border-color var(--anim-duration-medium) var(--anim-ease-out), transform var(--anim-duration-medium) var(--anim-ease-out), color var(--transition-fast), opacity var(--transition-fast);flex-direction:column;display:flex;position:relative;overflow:hidden}.chord-card:active{cursor:grabbing}.chord-card.is-playing{border-color:var(--color-accent);background:var(--color-accent-subtle);box-shadow:var(--shadow-glow-accent), var(--shadow-neu-sm);animation:pulse-breathe var(--anim-duration-loop) ease-in-out infinite}.chord-card.is-active:not(.is-playing){border-color:var(--color-accent);box-shadow:var(--shadow-glow-accent), var(--shadow-neu-sm);background:var(--color-accent-subtle)}.chord-card .chord-menu{z-index:2;position:absolute;top:0;right:0}.chord-card .chord-menu .overflow-menu>.btn.btn-icon{opacity:0;pointer-events:none;background:var(--color-bg);border-radius:0 var(--radius-md) 0 var(--radius-sm);min-width:28px;min-height:28px;padding:0}.chord-card:hover .chord-menu .overflow-menu>.btn.btn-icon,.chord-card.is-focused .chord-menu .overflow-menu>.btn.btn-icon,.chord-card .chord-menu .overflow-menu>.btn.btn-icon:focus-visible,.chord-card .chord-menu .overflow-menu>.btn.btn-icon[aria-expanded=true]{opacity:1;pointer-events:auto}.chord-card .chord-name{font-size:var(--font-size-lg);letter-spacing:.01em;text-align:center;max-width:100%}.chord-card .chord-name>.text{max-width:100%}.chord-card .chord-name-line{max-width:100%;font-size:var(--font-size-base);height:1lh;overflow:hidden}.chord-card .chord-name-line>.text{max-width:100%}.mini-piano{background:var(--color-surface-inset);border-radius:0;width:100%;height:42px;padding:0;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 3px 5px -2px #0000008c}.mini-piano .key{background:linear-gradient(to bottom, var(--color-key-white) 0%, var(--color-key-white-hover) 100%);border-right:1px solid var(--color-key-white-border);transition:background var(--transition-fast), box-shadow var(--transition-fast);border-radius:0 0 2px 2px;flex:1}.mini-piano .key:last-child{border-right:none}.mini-piano .key.is-black{background:linear-gradient(to bottom, var(--color-key-black-hover), var(--color-key-black));z-index:1;border-right:none;border-radius:0 0 2px 2px;flex:0 0 7%;height:62%;margin:0 -3.5%;box-shadow:0 1px 2px #00000080}.mini-piano .key.is-active{background:linear-gradient(to bottom, var(--color-key-active) 0%, var(--color-key-active-deep) 100%);box-shadow:0 0 8px var(--color-key-active-glow)}.mini-piano .key.is-black.is-active{background:linear-gradient(to bottom, var(--color-key-active-deep) 0%, var(--color-key-active-deep) 100%)}.mini-piano.is-full .key{border-right-color:#0000001a}.mini-piano.is-full .key.is-black{flex:0 0 2.4%;margin:0 -1.2%}.mini-piano.is-full .key.is-octave-start{border-left:2px solid #0000006b}.mini-piano.is-full .key.is-active{box-shadow:0 0 6px var(--color-key-active-glow), inset 0 0 0 1px #00000047}.practice-sheet.is-octaves .mini-piano{height:48px}.drop-placeholder,.chord-card.is-dragging{pointer-events:none;background:var(--color-placeholder);border:1px dashed var(--color-border)}.drop-placeholder>*,.chord-card.is-dragging>*{visibility:hidden}.drop-placeholder{align-self:stretch;min-height:100px}.save-flight{z-index:100;opacity:0;pointer-events:none;transform-origin:0 0;width:-moz-fit-content;width:fit-content;position:fixed;top:0;left:0}.save-flight .chord-card{box-shadow:var(--shadow-neu-raised)}[data-arrival=hidden]{opacity:0;pointer-events:none}[data-arrival=settle]{animation:arrive-settle var(--anim-duration-short) var(--anim-ease-out)}[data-arrival=mark]{outline-offset:-2px;animation:arrive-mark var(--anim-duration-loop) var(--anim-ease-out);outline:2px solid #0000}.drag-overlay{width:-moz-fit-content;width:fit-content;transform:translate(-50%,-50%)}.drag-overlay .chord-card{box-shadow:var(--shadow-neu-raised), var(--shadow-glow-accent);border-color:var(--color-accent);transform:rotate(3deg)scale(1.03)}.drag-overlay .section{box-shadow:var(--shadow-neu-raised);opacity:.9;transform:scale(1.01)}@media (max-width:768px),(max-height:500px){.practice-sheet{padding:0}.practice-sheet .workspace{padding:var(--spacing-sm) 0;gap:var(--spacing-sm)}.practice-sheet .section{border:none;border-radius:0}.practice-sheet .add-section{margin:0 var(--spacing-sm)}.practice-sheet .controls .divider{display:none}.practice-sheet .controls-end{gap:var(--spacing-xs);flex-wrap:wrap}.practice-sheet .chords{padding:var(--spacing-sm)}.practice-sheet .add-chord{width:44px}.chord-card .chord-menu .overflow-menu>.btn.btn-icon{min-width:36px;min-height:36px}.chord-card{width:116px}.practice-sheet.is-octaves .chord-card{width:204px}}@media (max-height:500px){.chord-card{padding-bottom:var(--spacing-xs);gap:var(--spacing-xs)}.chord-card .mini-piano{height:28px}.drop-placeholder,.practice-sheet .add-chord{min-height:68px}.practice-sheet .chords{padding:var(--spacing-xs)}.practice-sheet .section-header{padding:2px var(--spacing-sm)}}@media (min-width:769px) and (max-width:960px){.controls .help-menu .btn-label{display:none}.controls .sheet-selector{min-width:0}}@media (min-width:769px) and (max-width:920px){.controls .controls-end>.overflow-menu .btn-label,.controls .export-menu .btn-label{display:none}}@media (min-width:769px) and (max-width:800px){.controls .controls-end .btn-label{display:none}}@media (max-width:400px){.controls .controls-start{flex:0 auto;min-width:0}.controls .sheet-selector{min-width:0;overflow:hidden}.controls .controls-end{flex:none}}@media (min-width:769px) and (min-height:501px) and (max-height:820px),(min-width:1200px) and (min-height:821px) and (max-height:960px){.practice-sheet .workspace{padding-top:var(--spacing-sm)}}.toast-container{bottom:var(--spacing-lg);z-index:200;pointer-events:none;position:fixed;left:50%;transform:translate(-50%)}.toast-container.is-anchored{transform:translate(-50%, calc(-100% - var(--spacing-sm)));bottom:auto}.toast-container .toast{padding:var(--spacing-sm) var(--spacing-md);white-space:nowrap;animation:slide-up-fade-in var(--anim-duration-short) var(--anim-ease-out)}.toast-container .toast.is-exiting{animation:slide-down-fade-out var(--anim-duration-short) var(--anim-ease-in) forwards}.toast-container .toast.has-action{pointer-events:auto;padding-block:var(--spacing-xs);padding-inline-end:var(--spacing-xs)}.toast-container .toast.is-exiting.has-action{pointer-events:none}.toast-container .toast-action{max-width:min(16rem,50vw)}.toast-container .toast-action .text-truncate{min-width:0;display:block}.modal{width:100vw;height:100vh;max-width:100vw;height:100dvh;max-height:100vh;background:0 0;border:none;max-height:100dvh;padding:0}.modal[open]{justify-content:center;align-items:center;display:flex}.modal::backdrop{background:var(--color-loading-overlay);animation:fade-in var(--anim-duration-short) var(--anim-ease-out)}.modal.is-closing{pointer-events:none}.modal.is-closing .modal-content{animation:slide-down-fade-out var(--anim-duration-short) var(--anim-ease-in) forwards}.modal.is-closing::backdrop{animation:fade-out var(--anim-duration-short) var(--anim-ease-in) forwards}.modal .modal-content{width:min(400px, 100vw - var(--spacing-xl) * 2);padding:var(--spacing-lg);animation:slide-up-fade-in var(--anim-duration-medium) var(--anim-ease-out)}.modal .modal-content.help-dialog{width:min(440px, 100vw - var(--spacing-xl) * 2);max-height:calc(100vh - var(--spacing-xl) * 2);overflow-y:auto}.modal .help-dialog-link{color:var(--color-text-secondary);font-size:var(--font-size-sm);text-underline-offset:2px;padding:4px 2px;text-decoration:underline;display:inline-block}.modal .help-dialog-link:hover{color:var(--color-accent)}.modal .modal-actions{justify-content:flex-end;gap:var(--spacing-sm);margin-top:var(--spacing-xs);display:flex}.help-dialog h2{font-size:var(--font-size-xl)}.modal .modal-content.help-bento{--help-pad:var(--spacing-md);width:calc(100vw - var(--spacing-sm) * 2);max-height:calc(100vh - var(--spacing-md) * 2);max-height:calc(100dvh - var(--spacing-md) * 2);padding:var(--help-pad) var(--help-pad) 0;background:var(--color-bg);scroll-padding-bottom:5rem}@media (min-width:600px){.modal .modal-content.help-bento{--help-pad:var(--spacing-lg);width:min(760px, 100vw - var(--spacing-xl) * 2)}}@media (min-width:1000px){.modal .modal-content.help-bento{width:min(1180px, 100vw - var(--spacing-xl) * 2)}}.modal .modal-content.help-bento>h2{margin-bottom:var(--spacing-md)}.help-grid{gap:var(--spacing-sm);grid-template-columns:minmax(0,1fr);display:grid}@media (min-width:600px){.help-grid{gap:var(--spacing-md);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"intro intro""names sheet""names data"}.help-grid>.help-tile-keys,.help-grid>.help-tile-midi,.help-grid>.help-tile-shortcuts{grid-column:1/-1}}@media (min-width:1000px){.help-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"intro intro names""sheet data names"}.help-grid>.help-tile-keys:has(+.help-tile-midi){grid-column:span 2}.help-grid>.help-tile-keys+.help-tile-midi{grid-column:auto}}.help-tile{min-width:0;padding:var(--spacing-md);border-radius:var(--radius-lg);background:var(--color-surface-raised);box-shadow:var(--shadow-neu-sm)}@media (min-width:600px){.help-tile.help-tile-intro{grid-area:intro}.help-tile.help-tile-names{grid-area:names}.help-tile.help-tile-sheet{grid-area:sheet}.help-tile.help-tile-data{grid-area:data}}.help-tile .help-picture{padding-top:var(--spacing-xs);margin-top:auto}.help-intro-text{flex:280px;min-width:0}.help-intro-text>.text:first-child{font-size:var(--font-size-lg);line-height:1.5}.help-tile .mini-piano{outline:1px solid var(--color-key-white-border);isolation:isolate}.help-tile .help-readout{flex:200px;max-width:280px;margin:0 auto;padding-top:0}.help-tile .help-readout .mini-piano{margin-top:var(--spacing-xs)}.help-chord-name{color:var(--color-accent);font-size:2rem;font-weight:var(--font-weight-bold);line-height:1.1}.help-numerals{flex-wrap:wrap}.help-keys,.help-names{gap:var(--spacing-xs) var(--spacing-sm);grid-template-columns:max-content minmax(0,1fr);align-items:baseline;margin:0;display:grid}.help-keys dt,.help-names dt{text-align:right;justify-self:end}.help-keys dd,.help-names dd{margin:0}.help-key-row{display:contents}.help-tile-shortcuts .help-keys{columns:3 17rem;column-gap:var(--spacing-lg);display:block}.help-tile-shortcuts .help-keys .help-key-row{align-items:baseline;gap:var(--spacing-sm);padding-bottom:var(--spacing-xs);break-inside:avoid;display:flex}.help-tile-shortcuts .help-keys dt{flex:0 0 6.5em}.help-key{font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);white-space:nowrap}.help-name-term{color:var(--color-accent);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);white-space:pre}.help-tile .help-chords-link{align-self:flex-start}.help-letters .help-keys{flex:220px}.mini-piano.help-letter-keys{flex:240px;max-width:360px;height:84px}.mini-piano.help-letter-keys .key{padding-bottom:var(--spacing-xs);justify-content:center;align-items:flex-end;display:flex}.help-letter{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--color-key-black);-webkit-user-select:none;user-select:none}.is-black>.help-letter{color:var(--color-key-white)}.help-dialog-footer{margin:var(--spacing-md) calc(-1 * var(--help-pad)) 0;padding:var(--spacing-sm) var(--help-pad) var(--help-pad);background:var(--color-surface);position:sticky;bottom:0}.sheet-selector{position:relative}.sheet-selector>.btn{max-width:100%}.sheet-selector .truncate{text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:200px;overflow:hidden}.sheet-selector .chevron{font-size:var(--font-size-2xs);color:var(--color-text-secondary);transition:transform var(--transition-fast);flex-shrink:0}.sheet-selector .chevron.is-open{transform:rotate(180deg)}.sheet-selector .input{flex-grow:1}@media (max-width:768px),(max-height:500px){.sheet-selector .truncate{max-width:120px}}@media (min-width:769px) and (min-height:501px){.sheet-selector{min-width:220px}}.privacy-notice{text-align:center;max-width:100%}.privacy-notice.is-held{display:none}.privacy-notice .privacy-notice-link{color:var(--color-accent);text-underline-offset:2px;margin-top:-5px;padding:5px 2px;text-decoration:underline;display:inline-block}.privacy-notice .privacy-notice-dismiss{min-height:24px;padding:2px var(--spacing-sm);font-size:var(--font-size-xs);flex-shrink:0}@media (pointer:coarse){.privacy-notice .privacy-notice-dismiss{min-height:var(--control-min-size)}.privacy-notice .privacy-notice-link{padding-block:calc(var(--control-min-size) / 2 - .5em);margin-top:calc(.5em - var(--control-min-size) / 2);line-height:1}}@media (max-width:768px),(max-height:500px){.privacy-notice,.privacy-notice.is-held{text-align:left;justify-content:flex-start;display:flex}.privacy-notice .text,.privacy-notice.is-held .text{font-size:var(--font-size-2xs);line-height:1.35}}@media (min-width:769px) and (min-height:501px) and (max-height:820px),(min-width:1200px) and (min-height:821px) and (max-height:960px){.privacy-notice,.privacy-notice.is-held{text-align:left;justify-content:flex-start;display:flex}}.app-layout.has-rail{--rail-pad:3px;--rail-inset:env(safe-area-inset-left,0px);--rail-w:calc(var(--control-box) + var(--rail-pad) * 2 + 1px + var(--rail-inset));position:relative}.app-layout.has-rail>.main-column,.app-layout.has-rail>.action-bar,.app-layout.has-rail>.status-bar{margin-left:var(--rail-w)}.app-layout.has-rail>.main-column{width:auto}.practice-sheet .surface.surface-pad-md.controls.is-rail{top:0;left:0;bottom:var(--piano-row-h,88px);width:var(--rail-w);padding:var(--rail-pad);padding-left:calc(var(--rail-pad) + var(--rail-inset));gap:var(--spacing-xs);flex-wrap:nowrap;position:absolute;overflow:visible}.practice-sheet .surface.surface-pad-md.controls.is-rail .controls-start,.practice-sheet .surface.surface-pad-md.controls.is-rail .controls-end{gap:var(--spacing-xs);flex-wrap:nowrap;min-width:0}.practice-sheet .surface.surface-pad-md.controls.is-rail .controls-start{flex:auto;min-height:0}.practice-sheet .surface.surface-pad-md.controls.is-rail .controls-end{flex:none}.practice-sheet .surface.surface-pad-md.controls.is-rail>.controls-end>.btn,.practice-sheet .surface.surface-pad-md.controls.is-rail>.controls-end>.overflow-menu>.btn{width:var(--control-box);padding-inline:0}.practice-sheet .surface.surface-pad-md.controls.is-rail .sheet-selector{flex-direction:column;flex:0 auto;min-height:0;display:flex}.practice-sheet .surface.surface-pad-md.controls.is-rail .sheet-selector>.btn{width:var(--control-box);padding:var(--btn-padding-y) 0;flex-direction:column;flex:0 auto}.practice-sheet .surface.surface-pad-md.controls.is-rail .sheet-selector .truncate{writing-mode:vertical-rl;font-size:var(--font-size-base);flex:0 auto;max-width:none;min-height:0}.practice-sheet .surface.surface-pad-md.controls.is-rail .sheet-selector .chevron{transform:rotate(-90deg)}.practice-sheet .surface.surface-pad-md.controls.is-rail .sheet-selector .chevron.is-open{transform:rotate(90deg)}.practice-sheet .surface.surface-pad-md.controls.is-rail .btn.is-stop{isolation:isolate;position:relative;overflow:hidden}.practice-sheet .surface.surface-pad-md.controls.is-rail .btn.is-stop:hover{background:var(--color-surface-raised)}.practice-sheet .surface.surface-pad-md.controls.is-rail .playback-bar.is-in-button{z-index:-1;background:0 0;height:auto;inset:0}.practice-sheet .surface.surface-pad-md.controls.is-rail .playback-bar.is-in-button .playback-bar-fill{background:var(--color-danger-fill);display:block}.app-layout.has-rail .practice-sheet{gap:0}.app-layout.has-rail .practice-sheet .workspace{padding-top:var(--spacing-xs)}.app-layout.has-rail .practice-sheet .workspace.can-scroll-down{-webkit-mask-image:linear-gradient(#000 calc(100% - 12px),#0000);mask-image:linear-gradient(#000 calc(100% - 12px),#0000)}.app-layout.has-rail .practice-sheet .workspace .chord-card.has-diagram .chord-name.flex{height:1lh;margin-block:var(--spacing-xs) auto;flex-flow:wrap;justify-content:center;align-items:baseline;column-gap:6px;overflow:hidden}.app-layout.has-rail .practice-sheet .workspace .chord-card.has-diagram .chord-name.flex>.text{min-width:0}.app-layout.has-rail .practice-sheet .workspace .chord-card.has-diagram .chord-name-line{display:contents}