: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:#ffffff6b;--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-label:#9a948a;--color-key-label-active:#3a2c0c;--color-danger:#e5604f;--color-danger-subtle:#e5604f1f;--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;--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:11px;--font-size-xs:10px;--font-size-sm:12px;--font-size-base:14px;--font-size-lg:16px;--font-size-xl:18px;--font-size-2xl:24px;--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:#6b6357;--color-text-muted:#00000085;--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-label:#8a8275;--color-key-label-active:#3a2c0c;--color-danger:#c0392b;--color-danger-subtle:#c0392b1a;--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}@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}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{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)}.empty-icon{margin:0 auto var(--spacing-sm);font-size:var(--font-size-xl);color:var(--color-text-muted);opacity:.5;display:block}.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-header{z-index:100;flex-shrink:0}.app-logo{flex-shrink:0;width:22px;height:22px;display:block}.app-logo-link{min-width:44px;min-height:44px;margin-left:calc(var(--spacing-sm) * -1);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-header{padding:var(--spacing-xs) var(--spacing-sm)}.app-logo{width:20px;height:20px}}@media (max-height:500px){.surface.surface-pad-md.app-header,.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-right{flex-wrap:nowrap;min-width:0}.surface.surface-pad-md.controls .tempo-label{display:none}.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)}}.loading-overlay{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:var(--color-loading-overlay);color:var(--color-text);justify-content:center;align-items:center;font-size:24px;display:flex;position:fixed;inset:0}.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);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: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);color:var(--color-text-muted);opacity:0;pointer-events:none;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.btn-icon:focus-visible{opacity:1;pointer-events:auto}.btn.btn-icon.btn-danger:hover{color:var(--color-danger)}.btn.btn-icon.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)}@media (pointer:coarse){.btn{min-width:44px;min-height:44px}}.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}@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:0}50%{opacity:.35}}@keyframes bounce-y{0%,to{transform:translateY(0)}40%{transform:translateY(-3px)}60%{transform:translateY(1px)}}.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-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 .btn-icon{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}.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{flex-shrink:0}.action-bar .display{min-width:0;padding-left:var(--spacing-md);flex:1;justify-content:flex-start}.action-bar .chord-display{min-width:0}.action-bar .chord-main{color:var(--color-accent);white-space:nowrap;font-size:var(--font-size-2xl);animation:pulse-scale var(--anim-duration-medium) var(--anim-ease-out);line-height:1.1}.action-bar .chord-alternatives{white-space:nowrap;opacity:.75}.action-bar .chord-message{white-space:nowrap;margin:0}.action-bar .controls,.action-bar .bar-actions{flex-shrink:0}.action-bar .panel-toggle{padding:var(--btn-padding-y) var(--spacing-sm);flex-shrink:0}@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 .display{padding-left:var(--spacing-sm)}.action-bar .chord-alternatives,.action-bar .note-badges{display:none}.action-bar .chord-message{font-size:var(--font-size-2xs);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.action-bar .controls .btn,.action-bar .panel-toggle{padding:var(--spacing-sm);gap:0;font-size:0}.action-bar .controls .btn svg,.action-bar .panel-toggle 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)}.action-bar .bindings-toggle,.action-bar .panel-toggle-count{display:none}}.dropdown{left:0;top:calc(100% + var(--spacing-xs));z-index:100;padding:var(--spacing-xs);min-width:120px;max-height:200px;position:absolute;overflow-y:auto}.dropdown.dropdown-xs{width:160px}.dropdown.dropdown-sm{width:220px}.dropdown.dropdown-md{width:280px}.dropdown.dropdown-lg{width:360px}.dropdown.dropdown-right{left:auto;right:0}.dropdown.dropdown-portal{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{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-active{border-left:2px solid var(--color-accent)}.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-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)}.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{opacity:1;pointer-events:auto;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}.overflow-menu>.btn.btn-icon{opacity:1;pointer-events:auto}@media (pointer:coarse){.dropdown .dropdown-item{min-height:44px}}.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;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);display:flex;position:absolute;top:0;left:0;right:0}.piano-row .status-bar.is-error{color:var(--color-danger)}.piano-row .keyboard-scroll{flex:1;min-height:0;display:flex}.piano-row .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}.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{font-size:9px;font-weight:var(--font-weight-bold);color:var(--color-accent);position:absolute;top:6px;left:50%;transform:translate(-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-wrapper:not([data-sharp=true]) .key-button.is-hint{position:relative}.keyboard .key-wrapper:not([data-sharp=true]) .key-button.is-hint:after{content:"";border-radius:inherit;background:var(--color-accent);opacity:0;pointer-events:none;animation:pulse-fade var(--anim-duration-loop) ease-in-out infinite;position:absolute;inset:0}.keyboard .key-binding{font-size:10px;font-weight:var(--font-weight-bold);color:var(--color-accent);-webkit-user-select:none;user-select:none;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.keyboard .key-wrapper[data-sharp=true] .key-binding{color:var(--color-accent);top:50%;bottom:auto}.keyboard .key-label{color:var(--color-key-label);-webkit-user-select:none;user-select:none;font-size:9px}.keyboard .key-wrapper[data-sharp=true] .key-label{font-size:0}.keyboard .key-button.is-active .key-label{color:var(--color-key-label-active)}.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:0 0 120px;height:120px}.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-height:500px){.piano-row{flex:0 0 88px;height:88px}.key-label{display:none}}@media (max-width:768px) and (min-height:501px){.app-wrapper:has(.side-panel.is-open) .piano-row{flex:0 0 88px;height:88px}}@media (max-height:330px){.piano-row{flex:0 0 64px;height:64px}}.number-stepper{align-items:center;gap:2px;display:flex}.number-stepper input{width:42px;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)}.side-panel{width:300px;transition:margin-left var(--transition-normal) ease;flex-shrink:0;margin-left:-300px}.side-panel.is-open{margin-left:0}.side-panel .panel-header{padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--color-border-highlight);flex-shrink:0}.side-panel .panel-header .panel-close,.side-panel .panel-header .panel-header-actions .btn.btn-icon{opacity:1;pointer-events:auto}.side-panel .panel-body{padding:var(--spacing-sm);flex:1;overflow-y:auto}.side-panel .panel-card{border-radius:var(--radius-md);cursor:grab;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex-direction:column;align-items:stretch;gap:0;padding:0;display:flex;overflow:hidden}.side-panel .panel-card .mini-piano{border-radius:0;flex:none;width:100%;height:44px}.side-panel .panel-card:active{cursor:grabbing}.side-panel .panel-card.is-active{background:var(--color-accent-subtle);border-color:var(--color-accent);box-shadow:var(--shadow-glow-accent)}.side-panel .panel-card:hover .btn-icon,.side-panel .panel-card:focus-within .btn-icon,.side-panel .panel-card.is-active .btn-icon{opacity:1;pointer-events:auto}.side-panel .panel-card-body{padding:var(--spacing-sm) var(--spacing-xs) var(--spacing-sm) var(--spacing-md)}.side-panel .panel-card-info{flex:1;min-width:0}.side-panel .panel-card-subtitle{font-size:var(--font-size-2xs);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.side-panel .panel-actions{padding:var(--spacing-sm);flex-shrink:0}.side-panel .panel-actions .btn{flex:1}@media (max-width:768px) and (min-height:501px){.side-panel{--tray-height:min(140px, 26vh);border-right:none;border-top:1px solid var(--color-border-highlight);width:100%;height:0;transition:flex-basis var(--transition-normal) ease, height var(--transition-normal) ease;flex:0 0 0;margin-left:0;overflow:hidden}.side-panel.is-open{flex:0 0 var(--tray-height);height:var(--tray-height)}.side-panel .panel-grabber{box-sizing:content-box;cursor:grab;touch-action:none;flex:none;justify-content:center;align-items:center;height:16px;margin-bottom:-14px;padding:14px 0;display:flex}.side-panel .panel-grabber-bar{border-radius:var(--radius-round,999px);background:var(--color-border-highlight);width:36px;height:4px}.side-panel .panel-header{padding:0 var(--spacing-sm) var(--spacing-xs)}.side-panel .panel-title{font-size:var(--font-size-sm)}.side-panel .panel-tray-row{padding:var(--spacing-sm);align-items:stretch}.side-panel .panel-card{flex-direction:column;flex:none;align-items:stretch;gap:0;width:148px;padding:0;overflow:hidden}.side-panel .panel-card .mini-piano{border-radius:0;flex:none;width:100%;height:34px}.side-panel .panel-card-body{padding:var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm)}.side-panel .panel-card-subtitle,.side-panel .panel-card-info .text{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.side-panel .panel-card .btn.btn-icon{opacity:1;pointer-events:auto}.side-panel .empty-state{padding:var(--spacing-sm) var(--spacing-md)}.side-panel .empty-state-message{font-size:var(--font-size-xs)}}@media (max-height:500px){.side-panel{width:180px;margin-left:-180px}.side-panel.is-open{margin-left:0}.side-panel .panel-header{display:none}.side-panel .panel-card .mini-piano{height:34px}.side-panel .panel-card-body{padding:var(--spacing-xs) var(--spacing-2xs,2px) var(--spacing-xs) var(--spacing-sm)}}.practice-sheet{flex:1;width:100%;min-height:0}.practice-sheet .controls{flex-shrink:0;position:relative}.practice-sheet .bar-label{font-weight:var(--font-weight-bold);font-size:var(--font-size-lg);color:var(--color-text);align-items:center;gap:var(--spacing-xs);cursor:pointer;transition:color var(--transition-fast);display:flex}.practice-sheet .bar-label:hover{color:var(--color-accent)}.practice-sheet .bar-label:hover .edit-icon{opacity:1}.practice-sheet .bar-label .edit-icon{font-size:var(--font-size-2xs);color:var(--color-text-secondary);opacity:0;transition:opacity var(--transition-fast)}.practice-sheet .sheet-name-input{font-weight:var(--font-weight-bold);font-size:var(--font-size-lg);color:var(--color-text);border:1px solid var(--color-accent);border-radius:var(--radius-xs);background:var(--color-surface-inset);box-shadow:var(--shadow-glow-accent), var(--shadow-neu-inset);outline:none;padding:2px 6px}.practice-sheet .tempo-label{font-size:var(--btn-font-size);white-space:nowrap}.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 .section{box-shadow:var(--shadow-neu-sm)}.practice-sheet.is-octaves .chord-card{width:232px}.practice-sheet .add-section{padding:var(--spacing-md);border-radius:var(--radius-lg)}.practice-sheet .add-chord{width:56px;min-height:100px}.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{justify-content:center;min-width:44px;min-height:44px;margin:-11px -8px}}.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 .btn-icon,.practice-sheet .section-controls .btn.btn-icon{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{border-radius:var(--radius-md);width:136px;padding:0 0 var(--spacing-md);cursor:grab;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;flex:none;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-tempo-badge{z-index:2;padding:1px var(--spacing-xs);background:var(--color-bg);border-radius:var(--radius-md) 0 var(--radius-sm) 0;position:absolute;top:0;left:0}.chord-card .chord-name{font-size:var(--font-size-lg);letter-spacing:.01em;text-align:center;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}.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-right{gap:var(--spacing-xs);flex-wrap:wrap;width:100%}.practice-sheet .btn-label{display:none}.practice-sheet .chords{padding:var(--spacing-sm)}.practice-sheet .add-chord{width:44px;min-height:100px}.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)}}.toast-container{bottom:var(--spacing-lg);z-index:200;pointer-events:none;position:fixed;left:50%;transform:translate(-50%)}.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}.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)}.modal .help-dialog-footer{margin-top:var(--spacing-xs)}.modal .help-dialog-link{color:var(--color-text-secondary);font-size:var(--font-size-sm);text-underline-offset:2px;text-decoration:underline}.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}.sheet-selector{position:relative}.sheet-selector .truncate{text-overflow:ellipsis;white-space:nowrap;max-width:200px;overflow:hidden}.sheet-selector .chevron{color:var(--color-text-secondary);transition:transform var(--transition-fast);font-size:10px}.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}}.privacy-notice{animation:slide-up-fade-in var(--anim-duration-medium) ease-out;flex-shrink:0}.privacy-notice .privacy-notice-link{color:var(--color-accent);text-underline-offset:2px;text-decoration:underline}.privacy-notice .privacy-notice-link:hover{color:var(--color-accent-hover)}.privacy-notice .btn{flex-shrink:0}@media (max-width:768px),(max-height:500px){.privacy-notice .btn{align-self:flex-start}}