@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600;700;800&display=swap";:root{--chord-string: rgba(48, 42, 34, .78);--chord-fret: rgba(48, 42, 34, .44);--chord-open: #4f4334;--chord-mute: #4f4334;--chord-start-fret: #6c604f;--chord-stroke-width-fret: 1.4px;--chord-finger-stroke: var(--chord-finger-stroke);--primary-color: #9b6934;--primary-hover: #b8813f;--primary-active: #7a5430;--primary-dark: #6a4627;--accent-color: #c98a3d;--text-primary: #25221d;--text-secondary: #3c352d;--text-muted: #6b5d4c;--text-light: #fffaf2;--text-danger: #d93838;--bg-app: #f5efe4;--bg-cream-100: #fffdf9;--bg-cream-200: #fffaf2;--bg-cream-300: #fbf7ef;--bg-cream-400: #f2eadf;--bg-cream-500: #ebe0d0;--bg-cream-600: #f7efe5;--bg-dark: #3c352d;--bg-card: rgba(255, 252, 247, .86);--bg-card-hover: rgba(255, 252, 247, .94);--bg-success: #3d8153;--bg-success-light: rgba(89, 164, 105, .1);--border-success: rgba(61, 129, 83, .55);--border-success-hover: rgba(61, 129, 83, .62);--bg-danger: #c93b3b;--bg-danger-hover: #a82e2e;--bg-danger-light: rgba(217, 56, 56, .1);--border-danger: rgba(140, 46, 46, .35);--border-color-light: rgba(91, 72, 45, .14);--border-color-medium: rgba(91, 72, 45, .18);--border-color-dark: rgba(91, 72, 45, .3);--border-color-accent: rgba(155, 105, 52, .16);--border-color-accent-hover: rgba(155, 105, 52, .4);--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-pill: 999px;--shadow-sm: 0 2px 6px rgba(92, 70, 38, .06);--shadow-md: 0 8px 18px rgba(92, 70, 38, .08);--shadow-lg: 0 12px 24px rgba(92, 70, 38, .12);--shadow-xl: 0 18px 36px rgba(92, 70, 38, .18);--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .78);--transition-fast: .12s ease;--transition-normal: .15s ease;--transition-slow: .3s ease;--ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--chord-font: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;font-family:var(--ui-font);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box;scrollbar-color:rgba(155,105,52,.38) transparent;scrollbar-width:thin;-webkit-tap-highlight-color:transparent}*::-webkit-scrollbar{width:12px;height:12px}*::-webkit-scrollbar-track{background:transparent;transition:background-color .18s ease}*::-webkit-scrollbar-track:hover{background:#5b482d0a;border-radius:999px}*::-webkit-scrollbar-thumb{background-color:#9b693461;border-radius:999px;border:4px solid transparent;background-clip:padding-box;transition:border-width .18s cubic-bezier(.16,1,.3,1),background-color .18s ease}*::-webkit-scrollbar-thumb:hover{background-color:var(--primary-active);border-width:1px}*::-webkit-scrollbar-thumb:active{background-color:var(--primary-active);border-width:0px}*::-webkit-scrollbar-corner{background:transparent}html{overflow:hidden;overscroll-behavior:none}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden;overscroll-behavior:none;background:linear-gradient(90deg,rgba(111,91,64,.035) 1px,transparent 1px),linear-gradient(rgba(111,91,64,.035) 1px,transparent 1px),radial-gradient(circle at 14% 0%,rgba(210,153,75,.22),transparent 30rem),linear-gradient(135deg,var(--bg-cream-300) 0%,var(--bg-cream-400) 55%,var(--bg-cream-500) 100%);background-size:28px 28px,28px 28px,auto,auto}body.is-resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}button,input,select{font:inherit}button{border:0}button,[role=button],.wheel-segment,.tab-btn,.segment-btn,.custom-select,.library-card,.mobile-selection-chip,.close-modal-btn{-webkit-user-select:none;user-select:none;touch-action:manipulation}button:focus,[role=button]:focus,.wheel-segment:focus,.segment-btn:focus{outline:none}.app-shell{display:grid;grid-template-columns:minmax(300px,var(--library-width, 43%)) 6px minmax(360px,1fr);gap:6px;height:100vh;padding:16px;overflow:hidden}.app-shell.is-high-contrast{color:#111;--primary-color: #111;--primary-hover: #000;--primary-active: #111;--primary-dark: #000;--accent-color: #111;--text-primary: #111;--text-secondary: #111;--text-muted: #111;--text-light: #fff;--text-danger: #111;--bg-app: #fff;--bg-cream-100: #fff;--bg-cream-200: #fff;--bg-cream-300: #fff;--bg-cream-400: #fff;--bg-cream-500: #fff;--bg-cream-600: #fff;--bg-dark: #111;--bg-card: #fff;--bg-card-hover: #fff;--bg-success: #111;--bg-success-light: #fff;--border-success: #111;--border-success-hover: #111;--bg-danger: #111;--bg-danger-hover: #000;--bg-danger-light: #fff;--border-danger: #111;--border-color-light: #111;--border-color-medium: #111;--border-color-dark: #111;--border-color-accent: #111;--border-color-accent-hover: #111;--chord-string: #111;--chord-fret: #111;--chord-open: #111;--chord-mute: #111;--chord-start-fret: #111;--chord-stroke-width-fret: 1.8px;--chord-finger-stroke: #fff}.app-shell.is-high-contrast button:focus-visible,.app-shell.is-high-contrast input:focus-visible,.app-shell.is-high-contrast .custom-select:focus-within{outline:3px solid #000;outline-offset:3px}.app-shell.is-high-contrast,.app-shell.is-high-contrast *{scrollbar-color:#111 #fff}.app-shell.is-high-contrast *::-webkit-scrollbar-track{background:#fff}.app-shell.is-high-contrast *::-webkit-scrollbar-thumb{border:1px solid #fff;background-color:#111}.app-shell.is-high-contrast .board-card.is-active,.app-shell.is-high-contrast .library-card:hover,.app-shell.is-high-contrast .popover-menu-button:hover,.app-shell.is-high-contrast .donate-button:hover{border-color:#000;box-shadow:0 0 0 3px #000}.app-shell.is-high-contrast .secondary-action,.app-shell.is-high-contrast .danger-action,.app-shell.is-high-contrast .metronome-inline-icon,.app-shell.is-high-contrast .metronome-inline-start,.app-shell.is-high-contrast .metronome-inline-btn,.app-shell.is-high-contrast .metronome-inline-bpm,.app-shell.is-high-contrast .metronome-inline-follow{border:2px solid #111}.app-shell.is-high-contrast .metronome-inline-start:hover:not(:disabled),.app-shell.is-high-contrast .metronome-inline-start.is-active:hover{color:#111;background:#fff;box-shadow:0 0 0 3px #111}.app-shell.is-high-contrast .nut-line{stroke:#000}.mobile-screen-switcher{display:none}.mobile-only{display:none!important}.panel-resizer{position:relative;align-self:stretch;border-radius:999px;cursor:col-resize;outline:0;z-index:10}.panel-resizer:before{content:"";position:absolute;inset:12px 0;border-radius:999px;background:#fffcf7b8;box-shadow:inset 0 0 0 1px #58462e1f,0 10px 24px #60482514;transition:background .15s ease,box-shadow .15s ease}.panel-resizer:after{content:"";position:absolute;top:50%;left:50%;width:2px;height:34px;border-radius:999px;background:#9a693494;transform:translate(-50%,-50%)}.panel-resizer:hover:before,.panel-resizer:focus-visible:before{background:var(--text-light);box-shadow:inset 0 0 0 1px #9a693457,0 10px 28px #6048251f}.library-panel,.board-panel{min-height:0;border:1px solid var(--border-color-medium);border-radius:8px;background:var(--bg-card);box-shadow:0 18px 48px #5c462621}.library-panel,.board-panel{display:flex;flex-direction:column;padding:18px}.board-panel{position:relative;background:linear-gradient(90deg,rgba(121,93,56,.055) 1px,transparent 1px),linear-gradient(rgba(121,93,56,.055) 1px,transparent 1px),linear-gradient(145deg,var(--bg-card),var(--bg-cream-400));background-size:28px 28px,28px 28px,auto}.panel-heading{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;gap:14px;margin-bottom:14px}.panel-title-group{display:flex;align-items:center;gap:8px}.panel-title-group h2{transform:translateY(2px)}.board-header-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;justify-self:end;width:100%;max-width:100%;gap:8px;min-width:0}.board-header-action-row{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;max-width:100%;min-width:0}.board-header-metronome-row{flex:0 1 auto}.metronome-menu-button{display:none!important}.library-header-actions{display:flex;flex:0 0 auto;align-items:center;gap:8px}.eyebrow{margin:0 0 4px;color:var(--primary-color);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}h1,h2{margin:0;color:var(--text-primary);font-family:var(--ui-font);font-size:clamp(1.4rem,2vw,2rem);line-height:1.05;letter-spacing:0}.count-pill{flex:0 0 auto;border:1px solid rgba(154,105,52,.28);border-radius:999px;padding:7px 10px;color:var(--primary-active);background:#c98a3d1f;font-family:var(--ui-font);font-size:.76rem}.donate-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;border:1px solid transparent;border-radius:999px;padding:0 13px;color:var(--primary-active);background:linear-gradient(#fffcf7e6,#fffcf7e6) padding-box,linear-gradient(120deg,#9a69347a,#fffffff5,#cf8b40b3,#9a69347a) border-box;background-size:auto,300% 100%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--ui-font);font-size:.74rem;font-weight:900;text-decoration:none;box-shadow:0 8px 20px #5c46261f,0 0 0 1px #cf8b401a,inset 0 1px #ffffffd1;transition:transform .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease;white-space:nowrap;overflow:hidden;animation:donate-border-orbit 2.8s linear infinite,donate-glow 2.8s ease-in-out infinite}.donate-text-full{display:inline}.donate-text-short{display:none}.donate-button:hover{transform:translateY(-1px);color:var(--text-light);background:linear-gradient(#89562af0,#89562af0) padding-box,linear-gradient(120deg,#fff8e8b8,#cf8b40e6,#fff8e8b8) border-box;box-shadow:0 12px 24px #5c462633,0 0 0 1px #cf8b402e,inset 0 1px #ffffff47;animation-play-state:paused}.donate-button:focus-visible{color:var(--primary-active);background:linear-gradient(var(--bg-card-hover),var(--bg-card-hover)) padding-box,linear-gradient(120deg,#9a6934a3,#fff,#cf8b40d1,#9a6934a3) border-box;box-shadow:0 12px 24px #5c462629,0 0 0 1px #cf8b4033,inset 0 1px #ffffffdb}.donate-button:focus-visible{outline:3px solid rgba(207,139,64,.34);outline-offset:3px}.popover-menu{position:relative}.popover-menu-button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border-color-light);border-radius:999px;color:var(--text-muted);background:#fffaf2c2;cursor:pointer;box-shadow:0 8px 18px #5c462614;transition:transform .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease}.popover-menu-button:hover,.popover-menu-button:focus-visible{transform:translateY(-1px);color:var(--primary-active);background:var(--bg-card-hover);box-shadow:0 12px 24px #5c46261f}.popover-menu.is-open .popover-menu-button{transform:translateY(-1px);color:var(--text-light);background:var(--primary-color);border-color:var(--primary-dark);box-shadow:0 0 0 3px #9b693438,0 12px 24px #5c462629}.popover-menu-button:disabled{cursor:not-allowed;opacity:.42;transform:none}.popover-menu-button:disabled:hover{color:var(--text-muted);background:#fffaf2c2;box-shadow:0 8px 18px #5c462614}.popover-menu-button:focus-visible{outline:3px solid rgba(207,139,64,.24);outline-offset:3px}.popover-menu-button.is-active{color:var(--primary-color);background:var(--border-color-accent);border-color:var(--border-color-accent-hover);box-shadow:inset 0 2px 4px #5c462614}.popover-menu.is-open .popover-menu-button.is-active{color:var(--text-light);background:var(--primary-dark);border-color:var(--primary-dark)}.popover-menu-content{position:absolute;top:calc(100% + 8px);right:0;z-index:20;min-width:158px;border:1px solid var(--border-color-light);border-radius:8px;padding:5px;background:#fffcf7f5;box-shadow:0 18px 36px #5c462629}.popover-menu-item{display:flex;align-items:center;gap:8px;border-radius:6px;padding:8px 10px;color:var(--text-secondary);font-size:.85rem;font-weight:600;text-decoration:none;white-space:nowrap}.popover-menu-item:hover,.popover-menu-item:focus-visible{color:var(--primary-color);background:#c98a3d1f;outline:0}.mobile-board-menu-container{position:relative}.mobile-board-menu-button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border-color-light);border-radius:999px;color:var(--text-muted);background:#fffaf2c2;cursor:pointer;box-shadow:0 8px 18px #5c462614;transition:transform .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease}.mobile-board-menu-button:hover,.mobile-board-menu-button:focus-visible,.mobile-board-menu-container.is-open .mobile-board-menu-button{transform:translateY(-1px);color:var(--primary-active);background:var(--bg-card-hover);box-shadow:0 12px 24px #5c46261f}.mobile-board-menu-button:focus-visible{outline:3px solid rgba(207,139,64,.24);outline-offset:3px}.mobile-board-menu-popover{position:absolute;top:calc(100% + 8px);right:0;z-index:20;min-width:200px;border:1px solid var(--border-color-light);border-radius:8px;padding:10px;background:#fffcf7f5;box-shadow:0 18px 36px #5c462629;display:flex;flex-direction:column;gap:10px}.mobile-board-menu-item{display:flex;align-items:center;justify-content:space-between}.mobile-board-menu-label{color:var(--text-muted);font-family:var(--ui-font);font-size:.8rem;font-weight:800}.mobile-board-menu-divider{height:1px;background:#5b482d1a}.mobile-board-menu-form{display:flex;flex-direction:column;gap:8px}@keyframes donate-border-orbit{0%{background-position:0 0,0% 0}to{background-position:0 0,300% 0}}@keyframes donate-glow{0%,to{box-shadow:0 8px 20px #5c46261f,0 0 0 1px #cf8b401a,inset 0 1px #ffffffd1}50%{box-shadow:0 10px 24px #9a69343d,0 0 0 1px #cf8b4038,inset 0 1px #ffffffe6}}.filters{display:grid;grid-template-columns:1fr .72fr .82fr;gap:9px;margin-bottom:14px;position:relative;z-index:5}.search-box,.custom-select,.size-control{border:1px solid var(--border-color-medium);border-radius:8px;background:linear-gradient(180deg,var(--bg-cream-100),var(--bg-cream-600));box-shadow:inset 0 1px #ffffffc7,0 8px 20px #5c46260f}.search-box{display:flex;position:relative;align-items:center;gap:8px;min-width:0;height:42px;padding:0 10px;color:var(--text-muted);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}.search-box:focus-within,.custom-select:focus-within{border-color:#9a69348a;box-shadow:0 0 0 3px #c98a3d29,inset 0 1px #ffffffdb}input,select{min-width:0;width:100%;border:0;outline:0;color:var(--text-primary);background:transparent}input::placeholder{color:#5f514099}.custom-select{position:relative;min-width:0;height:42px;color:var(--text-muted);transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}.custom-select:hover,.custom-select.is-open{border-color:#9a69345c;background:linear-gradient(180deg,var(--bg-cream-100),var(--bg-cream-400))}.custom-select-button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;height:100%;border-radius:8px;padding:0 8px 0 10px;color:var(--text-primary);background:transparent;cursor:pointer}.custom-select-button:disabled{cursor:default;opacity:.55}.custom-select-button span{overflow:hidden;font-family:var(--ui-font);font-size:.88rem;font-weight:800;text-align:left;text-overflow:ellipsis;white-space:nowrap}.custom-select-chevron{color:var(--primary-color);transition:transform .15s ease}.custom-select.is-open .custom-select-chevron{transform:rotate(180deg)}.custom-select-menu{position:absolute;z-index:30;top:calc(100% + 7px);left:0;width:100%;max-height:min(320px,55vh);overflow:auto;border:1px solid var(--border-color-medium);border-radius:8px;padding:5px;background:var(--text-light);box-shadow:0 18px 36px #5c46262e,inset 0 1px #ffffffc7}.custom-select-option{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:8px;width:100%;min-height:34px;border-radius:6px;padding:0 8px;color:var(--text-secondary);background:transparent;cursor:pointer}.custom-select-option span{overflow:hidden;font-family:var(--ui-font);font-size:.84rem;font-weight:800;text-align:left;text-overflow:ellipsis;white-space:nowrap}.custom-select-option:hover,.custom-select-option:focus-visible{outline:0;background:#c98a3d1f}.custom-select-option.is-selected{color:var(--text-light);background:var(--primary-color)}.size-control{display:inline-grid;grid-template-columns:30px 46px 30px;align-items:center;gap:5px;width:max-content;height:34px;margin:0;padding:0 5px;color:var(--text-secondary)}.size-control output{font-family:var(--ui-font);font-size:.78rem;font-weight:800}.size-control output{color:var(--primary-active);text-align:center}.size-stepper{display:grid;place-items:center;width:30px;height:24px;border:1px solid var(--border-color-medium);border-radius:8px;color:var(--text-light);background:var(--primary-color);font-family:var(--ui-font);font-size:1.05rem;font-weight:900;line-height:1;cursor:pointer;transition:transform .15s ease,opacity .15s ease,background .15s ease}.size-stepper:hover{transform:translateY(-1px);background:var(--primary-active)}.size-stepper:disabled{cursor:not-allowed;opacity:.42;transform:none}.primary-action,.ghost-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;border-radius:8px;padding:0 12px;font-weight:800;cursor:pointer;transition:transform .15s ease,opacity .15s ease,background .15s ease,border-color .15s ease}.primary-action{color:var(--text-light);background:var(--primary-color)}.ghost-action{border:1px solid var(--border-color-medium);color:var(--text-secondary);background:var(--bg-card)}.primary-action:hover,.ghost-action:hover{transform:translateY(-1px)}.save-set-submit:hover:not(:disabled){transform:none;background:var(--primary-active)}.primary-action:disabled,.ghost-action:disabled{cursor:not-allowed;opacity:.45;transform:none}.library-content-container{position:relative;flex:1 1 auto;min-height:0;width:100%}.library-scroll-wrapper,.theory-workspace-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1),visibility .32s}.library-scroll-wrapper:not(.is-visible){opacity:0;transform:translate(-24px);pointer-events:none;visibility:hidden}.theory-workspace-wrapper:not(.is-visible){opacity:0;transform:translate(24px);pointer-events:none;visibility:hidden}.library-scroll-wrapper.is-visible,.theory-workspace-wrapper.is-visible{opacity:1;transform:translate(0);pointer-events:auto;visibility:visible}.library-scroll{flex:1 1 auto;min-height:0;height:100%;margin-left:0;margin-right:-18px;overflow-y:auto;padding-right:10px;padding-left:0;box-sizing:border-box}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));grid-auto-rows:159px;align-content:start;align-items:stretch;gap:10px;width:100%;min-height:max-content}.library-card{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:0;height:100%;min-height:0;border:1px solid var(--border-color-light);border-radius:8px;padding:6px 6px 5px;color:var(--text-primary);background:var(--bg-card);cursor:pointer;box-shadow:0 8px 18px #5c46260f;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.verify-chip{position:absolute;z-index:2;top:7px;right:7px;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--border-color-medium);border-radius:6px;color:transparent;background:var(--bg-card-hover);box-shadow:0 4px 10px #5c46261a}.verify-chip.is-verified{border-color:var(--border-success);color:var(--text-light);background:var(--bg-success)}.audio-preview-button{position:absolute;z-index:2;top:7px;left:7px;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--border-color-medium);border-radius:6px;color:var(--primary-active);background:var(--bg-card-hover);box-shadow:0 4px 10px #5c46261a}.audio-preview-button:hover,.audio-preview-button:focus-visible{color:var(--text-light);background:var(--primary-color);outline:0}.library-card:hover{border-color:#9b69346b;background:var(--bg-card-hover);box-shadow:0 12px 24px #5c46261c}.library-card:disabled{cursor:not-allowed;opacity:.48;transform:none}.library-card:disabled:hover{border-color:var(--border-color-light);background:var(--bg-card);box-shadow:0 8px 18px #5c46260f}.library-card.is-selected{border-color:var(--border-success-hover);background:var(--bg-success-light)}.library-card-name{display:flex;align-items:center;justify-content:center;max-width:100%;min-height:22px;font-family:var(--chord-font);font-size:.9rem;font-weight:800;line-height:1.12;overflow-wrap:anywhere;text-align:center;white-space:normal}.mobile-selection-preview{display:none}.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));align-content:start;gap:10px;min-height:0;height:100%;overflow:auto;padding:16px 24px 28px;margin:0 -18px -18px}.board-grid.is-empty{display:grid;place-items:center;margin:0;padding:18px}.empty-board{max-width:360px;border:1px dashed rgba(91,72,45,.26);border-radius:8px;padding:24px;color:var(--text-muted);text-align:center;background:var(--bg-card);animation:emptyBoardEntrance .42s cubic-bezier(.16,1,.3,1) both}@keyframes emptyBoardEntrance{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.sortable-ghost{opacity:.28;outline:2px dashed rgba(155,105,52,.48);background:#c98a3d0f!important}.sortable-chosen{border-color:#9b693494!important}.sortable-drag{opacity:.92!important;z-index:9999!important;box-shadow:0 24px 48px #5c462638!important}.sortable-drag .board-card-inner{transform:rotate(1.5deg) scale(1.03)!important}.sortable-fallback{opacity:.92!important;z-index:9999!important;box-shadow:0 24px 48px #5c462638!important}.board-card{position:relative;width:100%;aspect-ratio:1 / 1.42;border:1px solid var(--border-color-medium);border-radius:8px;padding:8px 6px;background:linear-gradient(180deg,var(--bg-cream-100),#f8efe4);box-shadow:0 16px 34px #5c46261f;transition:opacity .16s ease,border-color .16s ease;box-sizing:border-box}.board-card.is-entering{animation:boardCardEntrance .34s cubic-bezier(.34,1.56,.64,1) both}.board-card.is-exiting{animation:boardCardExit .26s cubic-bezier(.25,1,.5,1) both!important;pointer-events:none}@keyframes boardCardEntrance{0%{opacity:0;transform:scale(.8) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes boardCardExit{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.8) translateY(18px)}}.board-card-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%;position:relative;transition:transform .16s ease;box-sizing:border-box}.diagram-wrapper{display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;min-height:0;flex-grow:1;position:relative;overflow:hidden}.diagram-wrapper.slide-animate-right .diagram{animation:slideInRight .22s cubic-bezier(.16,1,.3,1) forwards}.diagram-wrapper.slide-animate-left .diagram{animation:slideInLeft .22s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}.board-card .diagram{display:block;width:auto;height:100%;max-width:100%;max-height:100%;flex-shrink:1;transform:translateY(-5px)}.notation .variant-arrow{position:static;transform:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:none;border:none;border-radius:50%;color:#5c462699;cursor:pointer;transition:all .16s ease;z-index:1;padding:0;box-shadow:none;opacity:.85}.notation .variant-arrow:hover{opacity:1;background:#5c462614;color:var(--accent-color);transform:scale(1.12);box-shadow:none}.notation .variant-arrow:disabled{cursor:not-allowed;opacity:.28;transform:none}.notation .variant-arrow:active{transform:scale(.92)}.is-arranging .board-card{cursor:grab;animation:none!important;box-shadow:0 16px 36px #5c46262e,0 4px 10px #5c462614!important;transition:box-shadow .25s cubic-bezier(.16,1,.3,1)}.is-arranging .board-card.is-exiting{animation:boardCardExit .26s cubic-bezier(.25,1,.5,1) both!important;pointer-events:none}.is-arranging .board-card:active{cursor:grabbing}.is-arranging .board-card-inner{animation:iosWiggle .42s ease-in-out infinite;transform-origin:50% 50%;transition:transform .25s cubic-bezier(.16,1,.3,1)}.is-arranging .board-card:nth-child(2n) .board-card-inner{animation-duration:.38s;animation-delay:-60ms}.is-arranging .board-card:nth-child(3n) .board-card-inner{animation-duration:.46s;animation-delay:-.14s}.is-arranging .board-card:nth-child(5n) .board-card-inner{animation-duration:.41s;animation-delay:-30ms}.is-arranging .board-card.sortable-chosen{box-shadow:0 24px 54px #5c462647,0 8px 20px #5c46261f!important;z-index:100}.is-arranging .board-card.sortable-chosen .board-card-inner{animation:none!important;transform:scale(1.08)!important}.is-arranging .board-card.sortable-drag .board-card-inner{animation:none!important;transform:rotate(1.5deg) scale(1.08)!important}@keyframes iosWiggle{0%{transform:rotate(-.35deg)}50%{transform:rotate(.35deg)}to{transform:rotate(-.35deg)}}.remove-button{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:50%;color:var(--bg-danger);background:var(--bg-cream-100);border:1px solid var(--border-danger);cursor:pointer;opacity:0;box-shadow:0 4px 12px var(--bg-danger-light);transition:opacity .15s ease,background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;z-index:5}.remove-button svg{display:block;flex-shrink:0;margin:0;padding:0}.remove-button:focus-visible,.is-arranging .remove-button{opacity:1!important}.remove-button:hover{background:var(--bg-danger);color:var(--text-light);border-color:var(--bg-danger);transform:scale(1.08);box-shadow:0 6px 16px var(--bg-danger-light)}.remove-button:active{transform:scale(.95)}.notation{display:grid;justify-items:center;gap:4px;color:var(--text-primary);font-family:var(--ui-font);margin-top:-16px;position:relative;z-index:1}.variant-control{display:inline-grid;grid-template-columns:22px 38px 22px;align-items:center;gap:3px;margin:0;border:1px solid var(--border-color-light);border-radius:7px;padding:3px;background:#fffaf2d1;font-family:var(--ui-font);font-size:.68rem;font-weight:900}.variant-control button{display:grid;place-items:center;width:22px;height:20px;border-radius:5px;color:var(--text-light);background:var(--primary-color);cursor:pointer;font-weight:900;line-height:1}.variant-control button:hover{background:var(--primary-active)}.variant-control span{color:var(--primary-active);text-align:center}.notation strong{font-family:var(--chord-font);font-size:1.15rem;font-weight:800;color:var(--text-primary);letter-spacing:0}.chord-name-text,.metronome-chord-name,.metronome-bar-chord-name{font-family:var(--chord-font);letter-spacing:0}.notation span{color:var(--text-muted);font-size:.88rem}.diagram{display:block;overflow:visible}.diagram-title{fill:var(--text-primary);font-family:var(--ui-font);font-size:18px;font-weight:800;text-anchor:middle}.string-line{stroke:var(--chord-string);stroke-width:1.5}.fret-line{stroke:var(--chord-fret);stroke-width:var(--chord-stroke-width-fret)}.nut-line{stroke:var(--text-primary);stroke-linecap:round;stroke-width:5}.finger-dot,.barre{fill:var(--primary-color);stroke:var(--chord-finger-stroke);stroke-width:1}.open-marker{fill:none;stroke:var(--chord-open);stroke-width:1.8}.mute-marker{fill:var(--chord-mute);font-family:var(--ui-font);font-size:15px;font-weight:900;text-anchor:middle;text-transform:uppercase}.finger-label{fill:var(--text-light);font-family:var(--ui-font);font-size:11px;font-weight:900;text-anchor:middle}.start-fret{fill:var(--chord-start-fret);font-family:var(--ui-font);font-size:12px;font-weight:800;text-anchor:middle}.diagram-small .string-line{stroke-width:1.1}.diagram-small .fret-line{stroke-width:1}.diagram-small .nut-line{stroke-width:3.4}.diagram-small .mute-marker{font-size:11px}@media(max-width:980px){.app-shell{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:8px;padding:10px;height:100svh;min-height:0;overflow:hidden}.mobile-screen-switcher{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:4px;border:1px solid var(--border-color-light);border-radius:8px;padding:3px;background:#fffcf7d1;box-shadow:0 10px 24px #5c462614}.mobile-switcher-indicator{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 5px);background:var(--primary-color);border-radius:6px;transition:transform .28s cubic-bezier(.16,1,.3,1);z-index:2;pointer-events:none}.mobile-screen-switcher button{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:6px;color:var(--primary-active);background:transparent!important;font-family:var(--ui-font);font-size:.88rem;font-weight:900;cursor:pointer;transition:color .28s cubic-bezier(.16,1,.3,1)}.mobile-screen-switcher button.is-active{color:var(--text-light)}.mobile-screen-switcher button span{opacity:.78}.mobile-board-menu-button{width:42px;height:42px}.remove-button{width:36px;height:36px;top:6px;right:6px}.notation .variant-arrow{width:28px;height:28px}.donate-text-full{display:none}.donate-text-short{display:inline}.panel-resizer{display:none}.library-panel,.board-panel{position:relative;z-index:5;grid-row:2;grid-column:1;width:100%;height:100%;min-height:0;max-height:none;padding:12px;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .32s cubic-bezier(.4,0,.2,1),visibility .32s ease;will-change:transform,opacity}.app-shell.mobile-choose .library-panel{transform:translate(0);opacity:1;pointer-events:auto;visibility:visible}.app-shell.mobile-view .library-panel{transform:translate(-105%);opacity:0;pointer-events:none;visibility:hidden}.app-shell.mobile-view .board-panel{transform:translate(0);opacity:1;pointer-events:auto;visibility:visible}.app-shell.mobile-choose .board-panel{transform:translate(105%);opacity:0;pointer-events:none;visibility:hidden}.filters{grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}.filters .search-box{grid-column:1 / -1}.mobile-selection-preview{display:flex;flex-direction:column;gap:8px;padding:10px 14px;background:radial-gradient(100% 100% at 50% 0%,#fdfaf3f2,#f3ebdafa);border:1px solid var(--border-color-medium);border-radius:12px;margin-bottom:12px;box-shadow:0 8px 24px #5c46260a}.mobile-selection-preview-heading{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px}.mobile-selection-preview-heading span{font-size:.82rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--primary-active)}.mobile-selection-preview-heading button{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:2px 14px;background:var(--primary-color)!important;color:var(--text-light)!important;border:none;border-radius:6px;font-family:var(--ui-font);font-size:.78rem;font-weight:800;cursor:pointer;box-shadow:0 4px 12px #b57a3238;transition:background .18s ease,transform .15s ease,opacity .18s ease}.mobile-selection-preview-heading button:active{transform:scale(.96)}.mobile-selection-preview-heading button:disabled{background:var(--border-color-medium)!important;color:var(--text-muted)!important;box-shadow:none;cursor:not-allowed;opacity:.65}.mobile-selection-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;margin:0 -2px;scrollbar-width:none}.mobile-selection-chips::-webkit-scrollbar{display:none}.mobile-selection-chip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px 0 12px;background:var(--bg-card);border:1px solid var(--border-color-medium);border-radius:999px;color:var(--primary-active);font-family:var(--ui-font);font-size:.8rem;font-weight:800;white-space:nowrap;cursor:pointer;box-shadow:0 2px 6px #5c462608;transition:background .15s ease,border-color .15s ease,color .15s ease}.mobile-selection-chip:active{background:#c98a3d14;border-color:var(--primary-color)}.mobile-selection-chip svg{color:var(--text-muted);opacity:.78;transition:color .15s ease,opacity .15s ease}.mobile-selection-chip:active svg{color:var(--primary-color);opacity:1}.mobile-selection-empty{font-family:var(--ui-font);font-size:.78rem;color:var(--text-muted);font-weight:600;font-style:italic;opacity:.8}.panel-heading{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;position:relative}.board-header-actions,.library-header-actions{justify-content:flex-end}.board-grid{max-height:none}.desktop-only{display:none!important}.mobile-only{display:flex!important}}@media(max-width:980px){.board-header-metronome-row{position:static!important}.board-header-metronome-row>.metronome-menu-button{display:flex!important;font-size:.92rem;font-weight:900}.board-header-metronome-row>.metronome-inline-card{position:absolute;z-index:25;top:100%;left:0;right:0;width:100%;max-width:100%;display:none!important;background:#fffcf8!important;border:1px solid rgba(155,105,52,.22)!important;border-radius:999px!important;padding:6px 16px!important;box-shadow:0 8px 24px #5c46261f!important;box-sizing:border-box;align-items:center;justify-content:space-between}.board-header-metronome-row.is-open>.metronome-inline-card{display:flex!important}.board-header-metronome-row.is-open>.metronome-inline-card>.metronome-inline-icon{display:flex;align-items:center;justify-content:center}}@media(max-width:520px){.app-shell{gap:7px;padding:7px}.library-panel,.board-panel{padding:9px}.panel-heading{gap:6px;margin-bottom:8px}.library-header-actions{align-items:flex-end;flex-direction:column}.board-header-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;width:100%}.board-header-actions .donate-button{flex:0 0 auto;width:auto;height:34px;padding:0 12px;border-radius:999px}@media(max-width:360px){.donate-text-short,.donate-text-full{display:none!important}.board-header-actions .donate-button{width:34px!important;height:34px!important;padding:0!important;border-radius:50%!important;justify-content:center!important}}.popover-menu-content{right:0}.board-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 14px 18px;margin:0 -9px -9px}.board-grid.is-empty{margin:0;padding:9px}.board-card{padding:6px 4px;box-shadow:0 10px 22px #5c46261a}.board-card .diagram{width:auto;height:100%;max-width:100%;max-height:100%}.notation .variant-arrow{width:20px;height:20px}.notation strong{font-size:1rem;font-weight:800}.notation{margin-top:-12px}}@media(max-width:390px){.app-shell{padding:4px}}.modal-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#28231d73;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .2s ease-out forwards}.modal-box{position:relative;width:90%;max-width:440px;background:var(--text-light);border:1px solid rgba(155,105,52,.22);border-radius:16px;padding:32px 24px;text-align:center;box-shadow:0 24px 64px #5c46263d;animation:slideUp .25s cubic-bezier(.16,1,.3,1) forwards}.modal-close-button{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(91,72,45,.12);border-radius:999px;color:var(--text-muted);background:#fffaf2c2;cursor:pointer;transition:transform .15s ease,background .15s ease}.modal-close-button:hover{background:#c98a3d29;transform:rotate(90deg)}.modal-icon-header{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:999px;background:#9b693414;color:var(--primary-color)}.modal-box h2{color:var(--text-primary);font-size:1.34rem;font-weight:800;margin:0 0 10px}.modal-description{color:var(--text-muted);font-size:.9rem;line-height:1.5;margin:0 0 24px}.experimental-list{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px}.experimental-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;border:1px solid var(--border-color-medium);border-radius:8px;padding:12px;color:var(--text-secondary);background:linear-gradient(180deg,var(--bg-cream-100),var(--bg-cream-600));cursor:pointer;text-align:left;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}.experimental-toggle:hover,.experimental-toggle:focus-visible{border-color:#9a69345c;background:linear-gradient(180deg,var(--bg-cream-100),var(--bg-cream-400));outline:0}.experimental-toggle.is-active{border-color:#9b69347a;box-shadow:0 0 0 3px #c98a3d1f}.experimental-toggle-copy{display:grid;gap:3px;min-width:0}.experimental-toggle-copy strong{font-size:.94rem;font-weight:800}.experimental-toggle-copy span{color:var(--text-muted);font-size:.78rem;font-weight:600}.experimental-switch{display:flex;align-items:center;flex:0 0 auto;width:42px;height:24px;border-radius:999px;padding:3px;background:var(--border-color-medium);transition:background .15s ease}.experimental-switch span{width:18px;height:18px;border-radius:999px;background:var(--text-light);box-shadow:0 2px 6px #5c46262e;transition:transform .15s ease}.experimental-toggle.is-active .experimental-switch{background:var(--primary-color)}.experimental-toggle.is-active .experimental-switch span{transform:translate(18px)}.settings-list{display:grid;gap:10px;width:100%}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;border:1px solid var(--border-color-medium);border-radius:8px;padding:12px;background:linear-gradient(180deg,var(--bg-cream-100),var(--bg-cream-600))}.settings-label{color:var(--text-secondary);font-size:.94rem;font-weight:800}.settings-segmented{display:inline-grid;grid-template-columns:1fr 1fr;gap:3px;border:1px solid var(--border-color-medium);border-radius:999px;padding:3px;background:#fffaf2c7}.settings-segmented button{min-width:38px;height:28px;border-radius:999px;color:var(--text-muted);background:transparent;font-size:.9rem;font-weight:900;cursor:pointer}.settings-segmented-wide button{min-width:70px;font-size:.82rem}.settings-segmented button.is-active{color:var(--text-light);background:var(--primary-color)}.copy-email-container{display:flex;flex-direction:column;gap:12px;width:100%}.email-address-box{display:flex;align-items:center;justify-content:center;padding:12px;background:var(--bg-card);border:1px solid rgba(155,105,52,.22);border-radius:10px;box-shadow:inset 0 2px 4px #5c46260a;width:100%;box-sizing:border-box}.email-address{font-family:var(--ui-font);font-size:.94rem;font-weight:600;color:var(--text-primary);word-break:break-all;text-align:center;-webkit-user-select:all;user-select:all}.copy-email-button{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;width:100%;border:1px solid rgba(155,105,52,.18);border-radius:10px;font-size:.9rem;font-weight:600;color:var(--text-light);background:var(--primary-color);cursor:pointer;box-shadow:0 4px 12px #9b69342e;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;box-sizing:border-box}.copy-email-button:hover{background:var(--primary-active);box-shadow:0 6px 18px #9b69343d}.copy-email-button.is-copied{background:var(--bg-success);border-color:var(--border-success-hover);box-shadow:0 4px 12px #59a4653d}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.share-toast{position:fixed;bottom:24px;right:24px;font-size:.88rem;font-weight:600;z-index:9999;display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:8px;animation:slideInUp .24s cubic-bezier(.16,1,.3,1) forwards;box-shadow:0 8px 24px #2c1f1040;border:1px solid rgba(255,252,248,.12);transition:all .2s ease}.share-toast-copy{background:var(--bg-dark);color:var(--bg-cream-100)}.share-toast-load{background:var(--bg-success);color:var(--text-light);border:1px solid rgba(124,209,151,.2);box-shadow:0 8px 24px #1c2d2040}.add-chord-toast{background:linear-gradient(135deg,var(--primary-color),#7d5228);color:var(--text-light);border-color:#fffcf833;box-shadow:0 12px 28px #5c462647}.add-chord-toast svg{color:#ffe3ad}@keyframes slideInUp{0%{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:520px){.share-toast{bottom:16px;left:16px;right:16px;justify-content:center;font-size:.82rem;padding:10px 14px}}.library-panel{container-type:inline-size;container-name:library-panel}@container (max-width: 480px){.library-panel .filters{grid-template-columns:1fr 1fr!important;gap:8px!important}.library-panel .filters .search-box{grid-column:1 / -1!important}}@container (max-width: 320px){.library-panel .panel-heading{flex-direction:column!important;align-items:flex-start!important;gap:6px!important}.library-panel .filters{grid-template-columns:1fr!important;gap:7px!important}.library-panel .filters .search-box{grid-column:span 1!important}}[data-tooltip]{position:relative}[data-tooltip]:before{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(0);padding:6px 10px;background:var(--text-secondary);color:var(--text-light);font-family:var(--ui-font);font-size:.76rem;font-weight:600;white-space:nowrap;border-radius:6px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s ease;z-index:1000;box-shadow:0 4px 12px #5c462626}[data-tooltip]:after{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(5px);border-width:5px;border-style:solid;border-color:var(--text-secondary) transparent transparent transparent;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s ease;z-index:1000}[data-tooltip]:hover:before,[data-tooltip]:focus-visible:before{opacity:1;visibility:visible;transform:translate(-50%) translateY(-6px)}[data-tooltip]:hover:after,[data-tooltip]:focus-visible:after{opacity:1;visibility:visible;transform:translate(-50%) translateY(4px)}@media(max-width:768px){[data-tooltip]:before,[data-tooltip]:after{display:none!important}}.danger-action{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;background:var(--bg-danger);color:var(--text-light);border:none;border-radius:8px;font-size:.94rem;font-weight:600;cursor:pointer;transition:background .15s ease,transform .15s ease}.danger-action:hover{background:var(--bg-danger-hover)}.danger-action:active{transform:scale(.98)}.secondary-action{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;background:transparent;color:var(--text-secondary);border:1px solid rgba(155,105,52,.25);border-radius:8px;font-size:.94rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.secondary-action:hover{background:#c98a3d14;border-color:var(--primary-color)}.secondary-action:active{transform:scale(.98)}.metronome-panel{flex-shrink:0;border-bottom:1px solid rgba(91,72,45,.1);margin:0 -18px;padding:2px 18px;transition:padding .12s ease}.metronome-panel.is-open{padding:6px 18px 4px}.metronome-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:6px 0;background:transparent;cursor:pointer;color:var(--text-secondary);font-size:.82rem;font-weight:600;border:none;transition:color .12s ease}.metronome-toggle:hover{color:var(--primary-color)}.metronome-toggle-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:5px;background:#9b69341a;font-size:.85rem;color:var(--primary-color);flex-shrink:0}.metronome-toggle-summary{font-size:.78rem;font-weight:500;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metronome-chevron{margin-left:auto;font-size:.55rem;opacity:.5;flex-shrink:0;transition:opacity .12s ease}.metronome-chevron.is-pulse{opacity:.9}.metronome-mini-bar{display:flex;gap:2px;margin-left:6px;flex-shrink:0}.metronome-mini-beat{width:4px;height:14px;border-radius:2px;background:#5b482d1a;transition:background 80ms ease}.metronome-mini-beat.is-accent{background:#9b69342e}.metronome-mini-beat.is-active{background:var(--primary-color)}.metronome-body{padding:8px 0 10px}.metronome-row{display:flex;align-items:flex-end;gap:12px}.metronome-control{flex:1;min-width:0}.metronome-control-action{flex:0 0 auto}.metronome-label{display:block;font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.metronome-bpm-row{display:flex;align-items:center;gap:4px}.metronome-btn{width:28px;height:28px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--border-color-medium);background:var(--bg-cream-100);cursor:pointer;font-size:1rem;font-weight:700;color:var(--text-secondary);transition:background .12s ease,border-color .12s ease;flex-shrink:0}.metronome-btn:hover{background:#c98a3d14;border-color:var(--primary-color)}.metronome-btn:disabled{opacity:.3;cursor:default}.metronome-bpm-input{width:52px;height:28px;text-align:center;border:1px solid var(--border-color-medium);border-radius:6px;background:var(--bg-cream-100);font-size:.85rem;font-weight:700;color:var(--text-secondary);outline:none;-moz-appearance:textfield}.metronome-bpm-input::-webkit-inner-spin-button,.metronome-bpm-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.metronome-bpm-input:focus{border-color:var(--primary-color)}.metronome-tone-select{width:100%;height:28px;border:1px solid var(--border-color-medium);border-radius:6px;background:var(--bg-cream-100);font-size:.82rem;font-weight:600;color:var(--text-secondary);padding:0 6px;outline:none;cursor:pointer}.metronome-tone-select:focus{border-color:var(--primary-color)}.metronome-beats-num{display:grid;place-items:center;width:32px;height:28px;font-size:.9rem;font-weight:800;color:var(--text-secondary)}.metronome-start-btn{display:flex;align-items:center;gap:6px;padding:5px 14px;height:28px;border-radius:6px;border:1px solid rgba(155,105,52,.3);background:var(--bg-cream-100);cursor:pointer;font-size:.8rem;font-weight:700;color:var(--text-secondary);white-space:nowrap;transition:background .12s ease,border-color .12s ease,box-shadow .12s ease}.metronome-start-btn:hover:not(:disabled){background:#c98a3d1a;border-color:var(--primary-color)}.metronome-start-btn.is-active{background:var(--primary-color);color:var(--text-light);border-color:var(--primary-color);box-shadow:0 0 0 2px #9b693433}.metronome-start-btn.is-active:hover{background:var(--primary-hover)}.metronome-start-btn:disabled{opacity:.4;cursor:default}.metronome-progress{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(91,72,45,.08)}.metronome-chord-name{font-size:.9rem;font-weight:800;color:var(--text-secondary);white-space:nowrap;min-width:50px}.metronome-dots{display:flex;align-items:center;gap:6px;flex:1}.metronome-dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:700;color:var(--text-muted);background:#5b482d1f;transition:background 80ms ease,transform 80ms ease,box-shadow 80ms ease,color 80ms ease}.metronome-dot.dot-accent{font-weight:800;width:24px;height:24px;background:#9b69342e;color:var(--primary-active)}.metronome-dot.is-active{background:var(--primary-color);color:var(--text-light);transform:scale(1.15);box-shadow:0 0 6px var(--border-color-accent-hover)}.metronome-dots.is-solo{justify-content:center}.metronome-bar{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(91,72,45,.08);width:100%;box-sizing:border-box}.metronome-bar-info{display:flex;align-items:center;gap:6px}.metronome-bar-chord-label{font-size:.68rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.metronome-bar-chord-name{font-size:.9rem;font-weight:800;color:var(--text-secondary)}.metronome-bar-beats{display:flex;gap:3px;width:100%;padding:2px 0;box-sizing:border-box}.metronome-bar-beat{display:grid;place-items:center;height:28px;border-radius:5px;font-size:.72rem;font-weight:700;color:var(--text-muted);background:#5b482d14;transition:background 80ms ease,color 80ms ease,transform 80ms ease,box-shadow 80ms ease;flex:1 1 0%;min-width:0}.metronome-bar-beat.is-accent{background:#9b693426;color:var(--primary-active);font-weight:800}.metronome-bar-beat.is-active{background:var(--primary-color);color:var(--text-light);transform:translateY(-2px);box-shadow:0 3px 8px #9b693438}.board-card.is-active{border-color:var(--primary-color);box-shadow:0 0 0 2px #9b693440,0 8px 20px #5c46262e}.board-card.is-next{border-color:#9b69344d;box-shadow:0 0 0 1px #9b69341f,0 4px 12px #5c462614;background:linear-gradient(180deg,var(--bg-cream-100),rgba(201,138,61,.04))}.metronome-card{flex-shrink:0;margin:0 -8px 8px;padding:10px 14px;border:1px solid var(--border-color-light);border-radius:8px;background:#fffcf799;box-shadow:0 4px 12px #5c46260f}.metronome-card-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.metronome-card-group{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.metronome-card-icon{font-size:1.15rem;line-height:1;color:var(--primary-color);margin-bottom:2px}.metronome-card-label{font-size:.6rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;line-height:1}.metronome-card-inline{display:flex;align-items:center;gap:2px}.metronome-card-divider{width:1px;align-self:stretch;background:#5b482d1a;flex-shrink:0}.metronome-follow-label{display:flex;align-items:center;gap:5px;font-size:.7rem;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none}.metronome-follow-label input{accent-color:var(--primary-color)}.metronome-inline-card{display:flex;align-items:center;flex-wrap:nowrap;gap:5px;justify-content:flex-end;width:auto;max-width:100%;min-height:34px;padding:2px 6px;border:1px solid rgba(154,105,52,.18);border-radius:999px;color:var(--text-muted);background:linear-gradient(#fffcf7e6,#fffcf7e6) padding-box,linear-gradient(120deg,#9a693438,#ffffffb8,#9a693438) border-box;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 20px #5c46261a,inset 0 1px #ffffffc2;font-family:var(--ui-font)}.metronome-inline-icon{display:grid;place-items:center;width:24px;height:24px;aspect-ratio:1 / 1;border:1px solid transparent;cursor:pointer;border-radius:50%;color:var(--primary-active);background:#c98a3d1f;font-size:.86rem;font-weight:900;line-height:1;transition:background .16s ease,color .16s ease,box-shadow .16s ease,border-color .16s ease}.metronome-inline-icon:hover{background:#c98a3d38;box-shadow:0 0 0 2px #c98a3d26}.metronome-inline-icon:active{background:#c98a3d52}.metronome-inline-icon.is-pulse{border-color:#9b69346b;color:var(--text-light);background:var(--primary-color);animation:metronome-invert-pulse 1.2s ease-in-out infinite}@keyframes metronome-invert-pulse{0%{box-shadow:0 0 #9b693466,0 4px 10px #9b69343d}50%{box-shadow:0 0 0 4px #9b693433,0 4px 10px #9b69343d}to{box-shadow:0 0 #9b693466,0 4px 10px #9b69343d}}.metronome-split-button{display:flex;align-items:center;width:68px;height:34px;border:1px solid var(--border-color-light);border-radius:999px;background:#fffaf2c2;box-shadow:0 8px 18px #5c462614;overflow:hidden;box-sizing:border-box;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}.metronome-split-button:hover{background:var(--bg-card-hover);border-color:#9a693447;box-shadow:0 10px 20px #5c46261a}.metronome-split-button.is-active{border-color:var(--primary-dark);background:var(--primary-color);animation:metronome-split-invert-pulse 1.2s ease-in-out infinite}.metronome-split-button.is-active .metronome-header-play-btn{color:var(--text-light)}.metronome-split-button.is-active .metronome-header-settings-btn{color:var(--text-light);border-left-color:#ffffff29}@keyframes metronome-split-invert-pulse{0%{box-shadow:0 0 #9b693466,0 4px 10px #9b69343d}50%{box-shadow:0 0 0 3px #9b693433,0 4px 10px #9b69343d}to{box-shadow:0 0 #9b693466,0 4px 10px #9b69343d}}.metronome-header-play-btn{display:grid;place-items:center;width:50%;height:100%;background:none;border:none;cursor:pointer;color:var(--text-muted);transition:color .15s ease,background .15s ease}.metronome-header-play-btn:hover{color:var(--primary-active);background:#5b482d0a}.metronome-header-play-btn.is-active{color:var(--primary-active)}.metronome-header-settings-btn{display:grid;place-items:center;width:50%;height:100%;background:none;border:none;border-left:1px solid rgba(91,72,45,.12);cursor:pointer;color:var(--text-muted);transition:color .15s ease,background .15s ease}.metronome-header-settings-btn:hover{color:var(--primary-active);background:#5b482d0a}.metronome-header-settings-btn.is-active{color:var(--primary-active);background:#5b482d14}@keyframes pendulumSwing{0%{transform:rotate(-28deg)}50%{transform:rotate(28deg)}to{transform:rotate(-28deg)}}.metronome-icon.is-active .metronome-pendulum{animation-name:pendulumSwing;animation-iteration-count:infinite;animation-timing-function:ease-in-out}.metronome-inline-group{display:flex;align-items:center;gap:2px;min-height:28px;height:28px;border:none;background:transparent}.metronome-divider{color:#5b482d38;font-family:var(--ui-font);font-size:.86rem;font-weight:300;-webkit-user-select:none;user-select:none;pointer-events:none;margin:0 4px;flex-shrink:0}.metronome-inline-group.is-disabled{opacity:.5}.metronome-inline-btn{display:grid;place-items:center;width:24px;height:22px;border-radius:999px;background:transparent;color:var(--text-muted);font-family:var(--ui-font);font-size:.78rem;font-weight:900;line-height:1;cursor:pointer;padding:0;transition:background .15s ease,color .15s ease,transform .15s ease}.metronome-inline-btn:hover:not(:disabled){background:#c98a3d29;color:var(--primary-active);transform:translateY(-1px)}.metronome-inline-btn:disabled{opacity:.3;cursor:default}.metronome-inline-label{font-size:.62rem;font-weight:800;text-transform:uppercase;color:var(--text-muted);letter-spacing:.06em;-webkit-user-select:none;user-select:none;margin-right:2px;opacity:.85}.metronome-inline-bpm{width:32px;height:22px;text-align:center;border:0;border-radius:999px;background:transparent;font-family:var(--ui-font);font-size:.78rem;font-weight:900;color:var(--text-secondary);padding:0;outline:none;transition:background .15s ease,box-shadow .15s ease;cursor:ew-resize}.metronome-inline-bpm:focus{background:var(--bg-card);box-shadow:0 0 0 2px #c98a3d24}.metronome-inline-bpm::-webkit-inner-spin-button,.metronome-inline-bpm::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.metronome-inline-bpm{-moz-appearance:textfield}.metronome-inline-bpm:disabled{opacity:.5}.metronome-inline-beats{width:18px;height:22px;text-align:center;border:0;border-radius:999px;background:transparent;font-family:var(--ui-font);font-size:.78rem;font-weight:900;color:var(--text-secondary);padding:0;outline:none;transition:background .15s ease,box-shadow .15s ease;cursor:ew-resize}.metronome-inline-beats:focus{background:var(--bg-card);box-shadow:0 0 0 2px #c98a3d24}.metronome-inline-beats::-webkit-inner-spin-button,.metronome-inline-beats::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.metronome-inline-beats{-moz-appearance:textfield}.metronome-inline-beats:disabled{opacity:.5}.metronome-inline-tone-select{height:28px;min-width:82px;width:82px;border:none;background:transparent;box-shadow:none}.metronome-inline-tone-select:hover,.metronome-inline-tone-select.is-open{background:transparent}.metronome-inline-tone-select .custom-select-button{background:transparent;border:none;box-shadow:none;padding:0 4px 0 6px;gap:4px}.metronome-inline-tone-select .custom-select-button span{font-size:.72rem;font-weight:800}.metronome-inline-tone-select .custom-select-chevron{width:14px;height:14px}.metronome-inline-tone-select .custom-select-menu{width:max(100%,128px)}.metronome-inline-tone-select .custom-select-option{min-height:30px}.metronome-inline-tone-select .custom-select-option span{font-size:.78rem}.metronome-inline-start{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(155,105,52,.3);border-radius:999px;background:var(--primary-color);color:var(--text-light);cursor:pointer;padding:0;box-shadow:0 2px 6px #9b693433;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}.metronome-inline-start:hover:not(:disabled){background:var(--primary-hover);box-shadow:0 4px 10px #9b69344d;transform:translateY(-1px)}.metronome-inline-start.is-active{background:var(--primary-active);border-color:var(--primary-dark);box-shadow:inset 0 2px 4px #00000026}.metronome-inline-start.is-active:hover{background:var(--primary-dark)}.metronome-inline-start:disabled{opacity:.3;cursor:default}.metronome-inline-follow{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--border-color-light);border-radius:999px;color:var(--primary-active);background:#fffaf2b8;cursor:pointer;padding:0;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease}.metronome-inline-follow:hover{border-color:#9a693452;background:#c98a3d24;transform:translateY(-1px)}.metronome-inline-follow:disabled{cursor:not-allowed;opacity:.5;transform:none}.metronome-inline-follow.is-active{border-color:#9b69346b;color:var(--text-light);background:var(--primary-color);box-shadow:0 4px 10px #9b69343d}.metronome-inline-card>.metronome-inline-group+.metronome-inline-group{margin-left:1px}.metronome-inline-card.is-playing{border-color:#9b693459;background:linear-gradient(var(--bg-card-hover),var(--bg-card-hover)) padding-box,linear-gradient(120deg,#9a69346b,#ffffffeb,#cf8b4094) border-box;box-shadow:0 10px 24px #9a693429,0 0 0 1px #9b69341f,inset 0 1px #ffffffd1}@media(max-width:1240px){.board-header-actions{position:relative}.board-header-metronome-row{position:static!important}.board-header-metronome-row>.metronome-menu-button{display:flex!important;font-size:.92rem;font-weight:900}.board-header-metronome-row>.metronome-inline-card{position:absolute;z-index:25;top:100%;right:0;left:auto;display:none!important;width:290px;max-width:calc(100vw - 36px)}.board-header-metronome-row.is-open>.metronome-inline-card{display:flex!important}.board-header-metronome-row.is-open>.metronome-inline-card>.metronome-inline-icon{display:none}}.filter-mode-tabs{display:flex;background:var(--bg-cream-300);border:1px solid var(--border-color-light);padding:4px;border-radius:10px;margin-bottom:14px;box-shadow:inset 0 1px 3px #5c46260d}.filter-mode-tabs .tab-btn{flex:1;border:none;background:transparent;padding:8px 12px;font-size:.82rem;font-weight:700;color:var(--text-muted);border-radius:7px;cursor:pointer;transition:all .18s cubic-bezier(.4,0,.2,1);text-align:center;white-space:nowrap}.filter-mode-tabs .tab-btn:hover{color:var(--text-color)}.filter-mode-tabs .tab-btn.is-active{background:#fff;color:var(--primary-color);font-weight:800;box-shadow:0 2px 8px #5c46260f,0 0 1px #5c46261a}.theory-drawer{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s ease,margin .35s ease,padding .35s ease;margin-bottom:0;background:radial-gradient(100% 100% at 50% 0%,#fdfaf3f2,#f3ebdafa);border-radius:12px;border:1px solid transparent;container-type:inline-size;container-name:drawer}.theory-drawer.is-open{max-height:420px;opacity:1;margin-bottom:12px;padding:12px 16px;border-color:var(--border-color-medium);box-shadow:inset 0 1px #ffffffd1,0 12px 32px #5c462614}.theory-drawer-inner{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:24px;width:100%;flex-wrap:wrap}@container drawer (min-width: 500px){.theory-drawer-inner{justify-content:space-between;padding:0 12px;flex-wrap:nowrap}}.theory-wheel-container{display:flex;justify-content:center;align-items:center;width:100%;max-width:290px;aspect-ratio:1 / 1}.circle-of-fifths-svg{width:100%;height:100%;-webkit-user-select:none;user-select:none;overflow:visible}.wheel-segment{cursor:pointer;outline:none}.segment-path{transition:fill .22s ease,stroke .22s ease,filter .22s ease,transform .22s ease}.wheel-segment.is-muted .segment-path{fill:#f6f1e647;stroke:#5c46260d;stroke-width:.6px}.wheel-segment.is-muted:hover .segment-path{fill:#f6f1e68c;stroke:#5c46261f}.wheel-segment.is-muted .segment-text{opacity:.44}.wheel-segment.is-muted:hover .segment-text{opacity:.76}.major-segment.is-diatonic:not(.is-selected) .segment-path{fill:hsla(var(--hue),55%,60%,.13);stroke:hsla(var(--hue),50%,45%,.22);stroke-width:1px}.major-segment.is-diatonic:not(.is-selected):hover .segment-path{fill:hsla(var(--hue),65%,52%,.26);stroke:hsla(var(--hue),60%,40%,.45);filter:drop-shadow(0 2px 6px hsla(var(--hue),60%,45%,.15))}.minor-segment.is-diatonic:not(.is-selected) .segment-path{fill:hsla(var(--hue),45%,55%,.09);stroke:hsla(var(--hue),40%,45%,.16);stroke-width:1px}.minor-segment.is-diatonic:not(.is-selected):hover .segment-path{fill:hsla(var(--hue),55%,50%,.2);stroke:hsla(var(--hue),55%,45%,.35);filter:drop-shadow(0 2px 5px hsla(var(--hue),55%,40%,.12))}.wheel-segment.is-diatonic:not(.is-selected) .segment-text{opacity:.88}.wheel-segment.is-diatonic:not(.is-selected):hover .segment-text{opacity:1}.major-segment.is-selected .segment-path{fill:hsla(var(--hue),85%,52%,.38);stroke:hsl(var(--hue),78%,38%);stroke-width:1.8px;filter:drop-shadow(0 2px 10px hsla(var(--hue),80%,45%,.35))}.major-segment.is-selected .segment-text{fill:hsl(var(--hue),85%,32%)!important;font-weight:900;opacity:1}.minor-segment.is-selected .segment-path{fill:hsla(var(--hue),75%,48%,.32);stroke:hsl(var(--hue),68%,35%);stroke-width:1.8px;filter:drop-shadow(0 2px 8px hsla(var(--hue),68%,40%,.28))}.minor-segment.is-selected .segment-text{fill:hsl(var(--hue),72%,28%)!important;font-weight:900;opacity:1}.segment-text{font-family:Inter,system-ui,-apple-system,sans-serif;text-anchor:middle;dominant-baseline:middle;pointer-events:none;transition:fill .2s ease,font-weight .2s ease,opacity .2s ease}.major-text{fill:var(--text-color);font-weight:800;font-size:14px}.minor-text{fill:var(--text-muted);font-weight:700;font-size:11px}.center-core-bg{fill:#fffefcfa;stroke:#9a693426;stroke-width:1px;filter:drop-shadow(0 4px 10px rgba(92,70,38,.06))}.center-core-text{font-family:Inter,system-ui,-apple-system,sans-serif;text-anchor:middle;pointer-events:none}.center-title-tag{fill:var(--text-muted);font-size:8px;font-weight:800;letter-spacing:1.2px;opacity:.7}.center-key-label{fill:var(--primary-color);font-size:16px;font-weight:900;letter-spacing:-.3px}.center-accidentals-label{fill:var(--text-muted);font-size:9px;font-weight:600;opacity:.8}.theory-controls{display:flex;flex-direction:column;align-items:center;gap:8px;width:auto;min-width:0;z-index:10}.segmented-control{display:flex;background:var(--bg-cream-300);border:1px solid var(--border-color-light);padding:3px;border-radius:20px;width:100%;max-width:220px;box-shadow:inset 0 1px 3px #5c46260d;transition:flex-direction .2s ease,border-radius .2s ease,padding .2s ease}.segment-btn{flex:1;border:none;background:transparent;padding:6px 14px;font-size:.78rem;font-weight:700;color:var(--text-muted);border-radius:17px;cursor:pointer;transition:all .18s ease}.segment-btn:hover{color:var(--text-color)}.segment-btn.is-active{background:#fff;color:var(--primary-color);font-weight:800;box-shadow:0 2px 6px #5c462614,0 0 1px #5c46261a}.library-card{position:relative}.degree-badge{position:relative;z-index:10;background:#f6f1e6f2;border:1px solid rgba(207,139,64,.32);color:var(--primary-color);font-size:.68rem;font-weight:800;padding:1px 6px;border-radius:8px;box-shadow:0 2px 6px #cf8b400f,inset 0 1px #fff;pointer-events:none;font-family:Courier New,Courier,monospace;letter-spacing:-.2px;transition:all .15s ease;margin-bottom:3px;display:inline-flex;align-items:center;justify-content:center}.library-card:hover .degree-badge{background:var(--primary-color);color:#fff;border-color:var(--primary-color);box-shadow:0 3px 8px #cf8b4038}@media(max-width:767px){.theory-drawer.is-open{padding:14px}}.theory-wheel-container{container-type:inline-size;container-name:wheel}@container drawer (min-width: 500px){.theory-wheel-container{max-width:320px}}@container drawer (min-width: 650px){.theory-wheel-container{max-width:350px}}.center-core-html{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;pointer-events:none;font-family:Inter,system-ui,sans-serif;line-height:1.25;box-sizing:border-box;padding:4px}.core-root-label{display:block;color:hsl(var(--active-hue),75%,38%);font-size:1.05rem;font-weight:900;letter-spacing:-.3px}.core-quality-label{display:block;color:var(--text-color);font-size:.72rem;font-weight:700;margin:1px 0 3px}.core-accidentals-label{display:block;color:var(--text-muted);font-size:.58rem;font-weight:600;opacity:.75}@container wheel (min-width: 295px) and (max-width: 335px){.center-core-html{flex-direction:column}.core-root-label{order:1;display:block;font-size:1.25rem;margin-bottom:2px}.core-quality-label{order:2;display:inline;font-size:.62rem;color:var(--text-muted)}.core-quality-label:after{content:" • "}.core-accidentals-label{order:3;display:inline;font-size:.62rem}}@container wheel (min-width: 335px){.center-core-html{flex-direction:row;flex-wrap:wrap;gap:4px;align-content:center}.core-root-label{display:inline;font-size:1.3rem}.core-root-label:after{content:" "}.core-quality-label{display:inline;font-size:1.3rem;color:hsl(var(--active-hue),75%,38%);font-weight:900}.core-accidentals-label{display:inline;font-size:.68rem}.core-accidentals-label:before{content:" ("}.core-accidentals-label:after{content:")"}}.standard-filters-container{container-type:inline-size;container-name:std-filters;width:100%}.standard-filters-grid{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}.standard-filters-grid .search-box,.standard-filters-grid .custom-select{width:100%}@container std-filters (min-width: 280px) and (max-width: 420px){.standard-filters-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.standard-filters-grid .search-box{grid-column:span 2;width:100%}.standard-filters-grid .custom-select{grid-column:span 1;width:100%}}@container std-filters (min-width: 420px){.standard-filters-grid{display:grid;grid-template-columns:1fr .72fr .82fr;gap:9px}.standard-filters-grid .search-box,.standard-filters-grid .custom-select{grid-column:span 1;width:100%}}.theory-workspace-container{display:flex;flex-direction:column;gap:16px;width:100%;flex-grow:1;min-height:0;height:100%;overflow:visible}.theory-left-column{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;background:radial-gradient(100% 100% at 50% 0%,#fdfaf3f2,#f3ebdafa);padding:16px;border-radius:12px;border:1px solid var(--border-color-medium);box-shadow:inset 0 1px #ffffffd1,0 8px 24px #5c46260a;box-sizing:border-box;flex:0 0 auto}.theory-right-column{width:100%;display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;flex:1 1 auto}.theory-results-grid{flex:1 1 auto;min-height:0}@container library-panel (min-width: 500px){.theory-workspace-container{flex-direction:row;align-items:stretch;gap:20px;flex-grow:1;min-height:0;height:100%}.theory-left-column{flex:0 0 340px;padding:24px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;height:100%;box-sizing:border-box;min-width:0}.theory-left-column .theory-wheel-container{max-width:100%}.theory-right-column{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;height:100%}.theory-results-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important;max-height:100%}}@media(max-width:980px){@container library-panel (max-width: 499px){.theory-workspace-container{flex:1 1 auto;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;padding-right:2px}.theory-left-column,.theory-right-column{flex:0 0 auto;min-height:auto}.theory-results-scroll{flex:0 0 auto;height:auto;min-height:0;overflow:visible}.theory-results-grid{min-height:max-content}}}.actions-drawer-backdrop{align-items:flex-end!important;justify-content:center!important}.mobile-actions-drawer{width:100%;max-width:460px;background:#fffcf8;border:1px solid rgba(155,105,52,.18);border-bottom:none;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px)) 16px;box-shadow:0 -12px 36px #5c46262e;animation:drawerSlideUp .26s cubic-bezier(.16,1,.3,1) forwards;display:flex;flex-direction:column;gap:14px;max-height:85vh;box-sizing:border-box}@keyframes drawerSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.drawer-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding-bottom:4px}.drawer-header h3{margin:0;font-family:var(--ui-font);font-size:1.1rem;font-weight:800;color:var(--text-primary)}.drawer-close{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(91,72,45,.12);border-radius:50%;color:var(--text-muted);background:#fffaf2c2;cursor:pointer;transition:transform .15s ease,background .15s ease;padding:0}.drawer-close:hover{background:#c98a3d1f;transform:scale(1.05)}.drawer-content{overflow-y:auto;padding-right:2px;display:flex;flex-direction:column;gap:12px}.drawer-content::-webkit-scrollbar{width:5px}.drawer-content::-webkit-scrollbar-track{background:transparent}.drawer-content::-webkit-scrollbar-thumb{background:#5b482d26;border-radius:99px}.drawer-section{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(91,72,45,.12);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #5c462605}.drawer-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;background:none;border:none;border-bottom:1px solid rgba(91,72,45,.08);text-align:left;cursor:pointer;transition:background .15s ease;box-sizing:border-box;text-decoration:none}.drawer-item:last-child{border-bottom:none}.drawer-item:not(:disabled):hover{background:#c98a3d0d}.drawer-item:disabled{opacity:.42;cursor:not-allowed}.drawer-item-icon-wrapper{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:#c98a3d14;color:#9b6934;flex-shrink:0}.drawer-item-text{display:flex;flex-direction:column;flex-grow:1;min-width:0}.drawer-item-title{font-family:var(--ui-font);font-size:.88rem;font-weight:700;color:#3c352d;line-height:1.25}.drawer-item-desc{font-family:var(--ui-font);font-size:.74rem;font-weight:500;color:#6c604f;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer-chevron{color:#8c7e6c;opacity:.58;flex-shrink:0;transition:transform .15s ease}.drawer-item:not(:disabled):hover .drawer-chevron{opacity:.95;transform:translate(2px)}.kofi-icon-wrapper{background:#c98a3d21!important;color:#c98a3d!important}.destructive-item .drawer-item-title{color:#9b4f3d}.destructive-icon-wrapper{background:#9b4f3d14!important;color:#9b4f3d!important}.board-header-actions-desktop{display:flex;align-items:center;gap:8px}@media(max-width:980px){.board-header-actions-desktop{display:none!important}.board-header-actions{position:static!important}.library-scroll{margin-right:0!important;padding-right:12px!important;scrollbar-width:thin!important;-ms-overflow-style:auto!important}.library-scroll::-webkit-scrollbar{display:block!important;width:8px!important}.library-scroll::-webkit-scrollbar-thumb{background-color:#9b693461!important;border-radius:999px!important;border:2px solid transparent!important;background-clip:padding-box!important}.board-header-metronome-row{position:static!important}.board-header-metronome-row>.metronome-inline-card{position:absolute!important;z-index:25!important;top:100%!important;left:0!important;right:0!important;width:100%!important;max-width:100%!important;background:#fffcf8!important;border:1px solid rgba(155,105,52,.22)!important;border-radius:999px!important;padding:6px 16px!important;box-shadow:0 8px 24px #5c46261f!important;box-sizing:border-box!important;align-items:center!important;justify-content:space-between!important}.board-header-metronome-row.is-open>.metronome-inline-card>.metronome-inline-icon{display:flex!important;align-items:center;justify-content:center}}@media(max-width:980px)and (min-width:680px){.board-header-metronome-row>.metronome-menu-button{display:none!important}.board-header-metronome-row>.metronome-inline-card{display:flex!important;position:static!important;width:auto!important;max-width:none!important;box-sizing:border-box!important}.board-header-metronome-row>.metronome-inline-card>.metronome-inline-icon{display:flex!important;align-items:center;justify-content:center}}.actions-drawer-backdrop.is-closing{animation:fadeOut .24s ease-out forwards!important}.mobile-actions-drawer.is-closing{animation:drawerSlideDown .24s cubic-bezier(.16,1,.3,1) forwards!important}@keyframes drawerSlideDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}