: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-label:#4f4a43;--color-key-label-on-black:#ded7ca;--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;--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-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:#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-label:#4a443b;--color-key-label-on-black:#ded7ca;--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}@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}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)}.empty-icon{margin:0 auto var(--spacing-sm);font-size:var(--font-size-xl);color:var(--color-text-muted);opacity:.5;display:block}@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{--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-header{z-index:100;flex-shrink:0}.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-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-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)}}.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);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: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-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}.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}.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:168px;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:92px}.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 .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{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-direction:row}.action-bar .chord-main{font-size:var(--font-size-2xl)}.action-bar .display{height:auto;padding-left:var(--spacing-sm);flex:1;justify-content:flex-start}.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:min(70vh,480px);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{max-height:min(70vh, 480px, var(--dd-max-h,100vh));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);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border);margin-bottom:4px}.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)}.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:var(--font-size-2xs);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{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-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:none;height:132px}.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-height:330px){.piano-row{flex:0 0 64px;height:64px}}@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}}.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 .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}.saved-tray .suggestions{min-width:0;padding:var(--spacing-xs) var(--spacing-md);flex:none}.suggestion-list{flex-wrap:nowrap;min-width:0;margin-right:auto;overflow-x:auto}.panel-card{position:relative}.saved-tray .panel-card{width:auto;min-width:168px;height:var(--chord-card-h,56px);flex:none}.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.is-focused .panel-card-menu,.saved-tray .panel-card:focus-visible .panel-card-menu{opacity:1;pointer-events:auto}.saved-tray .panel-card-menu:has([aria-expanded=true]){opacity:1;pointer-events:auto}.saved-tray .panel-card .inline-edit-display{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.saved-tray .panel-card-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);white-space:nowrap}.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 .panel-grabber{box-sizing:content-box;cursor:grab;touch-action:none;flex:none;justify-content:center;align-items:center;height:16px;margin-top:-14px;padding:14px 0;display:flex}.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-sm);align-items:stretch}.saved-tray .panel-card{flex-direction:column;flex:none;align-items:stretch;gap:0;width:148px;padding:0;overflow:hidden}.saved-tray .panel-card .mini-piano{border-radius:0;flex:none;width:100%;height:34px}.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 .empty-state{padding:var(--spacing-sm) var(--spacing-md)}.saved-tray .empty-state-message{font-size:var(--font-size-xs)}}.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 .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:0 0 var(--spacing-md);gap:var(--spacing-sm)}.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%}.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-end{gap:var(--spacing-xs);flex-wrap:wrap}.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)}}.practice-sheet .demo-note{padding:var(--spacing-sm) var(--spacing-md);border:1px dashed var(--color-border-highlight);border-radius:var(--radius-sm);background:var(--color-surface-inset);flex-shrink:0}.practice-sheet .demo-note strong{color:var(--color-text);font-weight:var(--font-weight-bold)}.practice-sheet .demo-note .btn{flex-shrink:0}@media (min-width:769px) and (max-width:1320px){.controls .controls-end .btn-label{display:none}.controls .sheet-selector{min-width:0}}@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 (max-width:768px),(max-height:500px){.controls .app-utility-actions>.btn{display:none}}.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);max-height:calc(100vh - var(--spacing-xl) * 2);overflow-y:auto}.modal .help-dialog-footer{margin-top:var(--spacing-xs)}.modal .help-dialog-key{padding:2px var(--spacing-xs);border-radius:var(--radius-sm);background:var(--color-surface-raised);font-family:inherit;font-size:var(--font-size-xs);text-align:center;border:none;flex-shrink:0}.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}.help-cards{gap:var(--spacing-xs)}.help-card{padding:var(--spacing-sm);border-radius:var(--radius-md);background:var(--color-surface-raised)}.help-card-icon{border-radius:var(--radius-sm);background:var(--color-accent-subtle);height:28px;color:var(--color-accent);flex:0 0 28px;justify-content:center;align-items:center;display:flex}.help-dialog-key{padding:3px var(--spacing-xs);border-radius:var(--radius-sm);background:var(--color-surface-raised);font-family:var(--font-family);font-size:var(--font-size-xs);color:var(--color-text);white-space:nowrap}.help-keys{gap:var(--spacing-xs) var(--spacing-sm);grid-template-columns:max-content 1fr;align-items:center;display:grid}.help-keys .help-dialog-key{text-align:center;justify-self:stretch}.help-dialog .modal-content>.stack>h2,.help-dialog h2{font-size:var(--font-size-xl)}.help-section-title{font-size:var(--font-size-base);color:var(--color-text);letter-spacing:.01em;margin-top:var(--spacing-xs)}.help-names{gap:var(--spacing-xs) var(--spacing-sm);grid-template-columns:max-content 1fr;align-items:baseline;display:grid}.help-name-term{color:var(--color-accent);font-size:var(--font-size-sm);justify-self:end}.sheet-selector{position:relative}.sheet-selector .truncate{text-overflow:ellipsis;white-space:nowrap;max-width:200px;overflow:hidden}.sheet-selector .chevron{font-size:var(--font-size-2xs);color:var(--color-text-secondary);transition:transform var(--transition-fast)}.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{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;padding:5px 2px;text-decoration:underline;display:inline-block}.privacy-notice .btn{flex-shrink:0}@media (max-width:768px),(max-height:500px){.privacy-notice .btn{align-self:flex-start}}