*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #000000;--bg-secondary: #0a0a0a;--bg-elevated: #111111;--bg-hover: #1a1a1a;--text-primary: #fafafa;--text-secondary: #888888;--text-tertiary: #666666;--border-default: #222222;--border-hover: #333333;--border-active: #444444;--accent: #0070f3;--accent-light: #3291ff;--accent-glow: rgba(0, 112, 243, .15);--code-bg: #0d0d0d;--code-border: #1a1a1a;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow-md: 0 4px 14px rgba(0, 0, 0, .5);--shadow-glow: 0 0 0 1px rgba(255, 255, 255, .05);--transition-fast: .15s ease;--transition-default: .2s ease;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px}html{background:var(--bg-primary)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{max-width:800px;margin:0 auto;padding:var(--space-3xl) var(--space-lg);min-height:100vh}.header{margin-bottom:var(--space-3xl);text-align:center}.header h1{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#a0a0a0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header a{color:var(--accent-light);text-decoration:none;transition:color var(--transition-fast)}.header a:hover{color:var(--text-primary)}.search-bar{position:relative;margin-bottom:var(--space-xl)}.search-bar input{width:100%;padding:var(--space-md) var(--space-lg);font-size:1rem;font-weight:400;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--bg-secondary);color:var(--text-primary);outline:none;transition:all var(--transition-default);box-shadow:var(--shadow-glow)}.search-bar input:hover{border-color:var(--border-hover)}.search-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.search-bar input::placeholder{color:var(--text-tertiary)}.tab-count{color:var(--text-secondary);font-size:.875rem;margin-bottom:var(--space-lg);padding-left:var(--space-xs)}.tab-list{display:flex;flex-direction:column;gap:var(--space-sm)}.tab-card{display:block;padding:var(--space-lg) var(--space-xl);background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-md);text-decoration:none;color:inherit;transition:all var(--transition-default)}.tab-card:hover{background:var(--bg-hover);border-color:var(--border-hover);transform:translateY(-1px)}.tab-card:active{transform:translateY(0)}.tab-card-title{font-size:1rem;font-weight:500;color:var(--text-primary);margin-bottom:var(--space-xs);display:flex;align-items:center;gap:var(--space-sm)}.tab-card-artist{font-size:.875rem;color:var(--text-secondary)}.tab-card-instrument{display:inline-flex;font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .5rem;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-tertiary)}.tab-detail{padding-bottom:var(--space-3xl)}.back-link{display:inline-flex;align-items:center;gap:var(--space-xs);color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;margin-bottom:var(--space-xl);padding:var(--space-xs) 0;transition:color var(--transition-fast)}.back-link:hover{color:var(--text-primary)}.tab-header{margin-bottom:var(--space-xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--border-default)}.tab-header h1{font-size:2rem;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:var(--space-xs)}.tab-header .artist{color:var(--text-secondary);font-size:1.125rem}.tab-source{margin-bottom:var(--space-xl)}.tab-source a{display:inline-flex;align-items:center;gap:var(--space-xs);color:var(--accent-light);font-size:.875rem;font-weight:500;text-decoration:none;padding:var(--space-sm) var(--space-md);background:var(--accent-glow);border:1px solid rgba(0,112,243,.3);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.tab-source a:hover{background:#0070f340;border-color:var(--accent)}.tab-content{background:var(--code-bg);border:1px solid var(--code-border);border-radius:var(--radius-lg);padding:var(--space-xl);overflow-x:auto}.tab-content pre{font-family:SF Mono,Fira Code,Consolas,Monaco,monospace;font-size:.875rem;line-height:1.6;white-space:pre;margin:0;color:var(--text-primary)}.empty-state{text-align:center;padding:var(--space-3xl) var(--space-lg);color:var(--text-tertiary);font-size:1rem}.loading{text-align:center;padding:var(--space-3xl) var(--space-lg);color:var(--text-secondary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-active)}::selection{background:var(--accent);color:#fff}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.header{animation:fadeIn .5s cubic-bezier(.4,0,.2,1)}.header h1{transition:all var(--transition-default)}.header h1:hover{transform:scale(1.02)}.search-bar{animation:fadeIn .5s cubic-bezier(.4,0,.2,1) .08s both}.search-bar input{transition:all .25s cubic-bezier(.4,0,.2,1)}.search-bar input:focus{transform:scale(1.01)}.tab-count{animation:fadeIn .5s cubic-bezier(.4,0,.2,1) .12s both;transition:all var(--transition-fast)}.tab-list{animation:fadeIn .4s cubic-bezier(.4,0,.2,1) .16s both}.tab-card{animation:fadeInUp .4s cubic-bezier(.4,0,.2,1) both;transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform,box-shadow}.tab-card:hover{background:var(--bg-hover);border-color:var(--border-hover);transform:translateY(-2px) scale(1.005);box-shadow:0 8px 24px #0006,0 0 0 1px #ffffff0f}.tab-card:active{transform:translateY(0) scale(.995);transition:all .1s ease}.tab-card-title{transition:color var(--transition-fast)}.tab-card:hover .tab-card-title{color:var(--accent-light)}.tab-card-instrument{transition:all var(--transition-fast)}.tab-card:hover .tab-card-instrument{background:var(--accent-glow);border-color:#0070f34d;color:var(--accent-light)}.tab-detail{animation:fadeIn .4s cubic-bezier(.4,0,.2,1)}.back-link{animation:slideIn .4s cubic-bezier(.4,0,.2,1) both;transition:all .2s ease}.back-link:hover{transform:translate(-4px);color:var(--accent-light)}.tab-header{animation:fadeInUp .5s cubic-bezier(.4,0,.2,1) .1s both}.tab-header h1{transition:color var(--transition-default)}.tab-source{animation:fadeIn .4s cubic-bezier(.4,0,.2,1) .15s both}.tab-source a{transition:all .25s cubic-bezier(.4,0,.2,1)}.tab-source a:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0070f340}.tab-source a:active{transform:translateY(0)}.tab-content{animation:slideUp .5s cubic-bezier(.4,0,.2,1) .2s both;transition:box-shadow var(--transition-default)}.tab-content:hover{box-shadow:0 0 0 1px var(--border-hover),0 8px 32px #00000080}button,.filter-select{position:relative;overflow:hidden}button:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff1a;border-radius:50%;transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease}button:active:after{width:200px;height:200px}.filter-clear:active{transform:scale(.95)}.filter-select{transition:all .25s cubic-bezier(.4,0,.2,1)}.filter-select:focus{transform:scale(1.01)}.favorites-toggle{transition:all .25s cubic-bezier(.4,0,.2,1)}.favorites-toggle:hover{transform:translateY(-1px)}.favorites-toggle:active{transform:translateY(0) scale(.98)}.favorites-toggle svg{transition:transform .3s cubic-bezier(.4,0,.2,1)}.favorites-toggle:hover svg{transform:scale(1.15)}.favorites-toggle.active svg{animation:bounceIn .4s ease}.favorites-count{transition:all .25s cubic-bezier(.4,0,.2,1)}.transpose-btn{transition:all .2s cubic-bezier(.4,0,.2,1)}.transpose-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 4px 12px #0000004d}.transpose-value{transition:all .3s cubic-bezier(.4,0,.2,1)}.capo-indicator{animation:scaleIn .3s cubic-bezier(.4,0,.2,1)}.skeleton{background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-hover) 50%,var(--bg-secondary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}.skeleton-card{height:72px;margin-bottom:var(--space-sm)}.skeleton-text{height:1em;margin-bottom:var(--space-xs)}.skeleton-text-sm{height:.8em;width:60%}*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}html{scroll-behavior:smooth}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}@supports (view-transition-name: none){::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}.tab-card{view-transition-name:tab-card}.tab-header h1{view-transition-name:tab-title}}.tab-card:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:var(--radius-md);background:linear-gradient(135deg,#0070f300,#0070f31a,#0070f300);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:-1}.tab-card:hover:before{opacity:1}.loading{animation:pulse 1.5s ease-in-out infinite}.empty-state{animation:fadeIn .5s cubic-bezier(.4,0,.2,1)}.filter-bar{margin-bottom:var(--space-lg);animation:fadeIn .4s ease-out .15s both}.filter-row{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:flex-end}.filter-group{display:flex;flex-direction:column;gap:var(--space-xs);flex:1;min-width:140px;max-width:220px}.filter-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);padding-left:2px}.filter-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;padding:var(--space-sm) var(--space-md);padding-right:2.5rem;font-size:.875rem;font-weight:400;border:1px solid var(--border-default);border-radius:var(--radius-md);background-color:var(--bg-secondary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;color:var(--text-primary);cursor:pointer;outline:none;transition:all var(--transition-default);box-shadow:var(--shadow-glow)}.filter-select:hover{border-color:var(--border-hover)}.filter-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.filter-select option{background:var(--bg-secondary);color:var(--text-primary);padding:var(--space-sm)}.filter-select optgroup{background:var(--bg-elevated);color:var(--accent-light);font-weight:600;font-size:.8rem;letter-spacing:.05em;padding:var(--space-sm) var(--space-md)}.filter-select optgroup option{font-weight:400;color:var(--text-primary);padding-left:var(--space-md)}.filter-clear{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);font-size:.8rem;font-weight:500;color:var(--text-secondary);background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);height:fit-content}.filter-clear:hover{color:var(--text-primary);border-color:var(--border-hover);background:var(--bg-hover)}.filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;font-size:.7rem;font-weight:600;background:var(--accent);color:#fff;border-radius:999px;padding:0 .35rem}.filter-indicator{color:var(--accent-light)}.favorite-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.favorite-btn svg{width:18px;height:18px}.favorite-btn:hover{color:#ff4757;background:#ff47571a;border-color:#ff475733}.favorite-btn.favorited{color:#ff4757}.favorite-btn.favorited:hover{color:#ff6b7a;background:#ff475726}.favorite-btn-lg{width:44px;height:44px}.favorite-btn-lg svg{width:24px;height:24px}.tab-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);position:relative}.tab-card-content{flex:1;min-width:0}.tab-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-lg)}.tab-header-content{flex:1;min-width:0}.filter-actions{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:flex-start;margin-bottom:var(--space-lg);animation:fadeIn .4s ease-out .15s both}.filter-actions .filter-bar{margin-bottom:0;flex:1;animation:none}.favorites-toggle{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);font-size:.875rem;font-weight:500;color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;height:fit-content;margin-top:auto}.favorites-toggle svg{width:16px;height:16px}.favorites-toggle:hover{color:var(--text-primary);border-color:var(--border-hover);background:var(--bg-hover)}.favorites-toggle.active{color:#ff4757;border-color:#ff475766;background:#ff47571a}.favorites-toggle.active:hover{border-color:#ff475799;background:#ff475726}.favorites-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;font-size:.7rem;font-weight:600;background:var(--border-hover);color:var(--text-primary);border-radius:999px;padding:0 .35rem;transition:background var(--transition-fast)}.favorites-toggle.active .favorites-count{background:#ff4757;color:#fff}@keyframes heartPop{0%{transform:scale(1)}25%{transform:scale(1.3)}50%{transform:scale(.95)}75%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes burstRing{0%{transform:scale(0);opacity:1;border-width:3px}to{transform:scale(2.5);opacity:0;border-width:1px}}.favorite-btn.favorited svg{animation:heartPop .4s cubic-bezier(.175,.885,.32,1.275)}.favorite-btn{position:relative}.burst-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:3px solid #ff4757;pointer-events:none;opacity:0}.favorite-btn.burst .burst-ring{animation:burstRing .5s ease-out forwards}.favorite-btn svg{transition:transform .2s ease}.favorite-btn:hover svg{transform:scale(1.15)}.favorite-btn:active svg{transform:scale(.9)}.transpose-controls{margin-bottom:var(--space-xl);padding:var(--space-lg);background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);animation:fadeIn .4s ease-out .15s both}.transpose-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:var(--space-sm)}.transpose-buttons{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.transpose-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:1.25rem;font-weight:500;color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.transpose-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-hover);color:var(--accent-light)}.transpose-btn:active:not(:disabled){transform:scale(.95)}.transpose-btn:disabled{opacity:.3;cursor:not-allowed}.transpose-value{min-width:120px;text-align:center;font-size:.9rem;font-weight:500;color:var(--text-primary);padding:0 var(--space-sm)}.transpose-reset{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-md);font-size:.8rem;font-weight:500;color:var(--text-secondary);background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);margin-left:var(--space-sm)}.transpose-reset:hover{color:var(--text-primary);border-color:var(--border-hover);background:var(--bg-hover)}.capo-indicator{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--accent-glow);border:1px solid rgba(0,112,243,.3);border-radius:var(--radius-md);font-size:.875rem;color:var(--accent-light)}.capo-icon{font-size:1rem}.capo-text{font-weight:500}.transpose-hint{margin-top:var(--space-sm);font-size:.8rem;color:var(--text-tertiary);font-style:italic}@media (max-width: 768px){.app{padding:var(--space-xl) var(--space-md)}.header{margin-bottom:var(--space-xl)}.header h1{font-size:2rem}.tab-header{flex-direction:column;gap:var(--space-md)}.tab-header-content{width:100%}.tab-header h1{font-size:1.75rem}.filter-group{min-width:120px;max-width:180px}}@media (max-width: 640px){:root{--touch-target: 44px}.app{padding:var(--space-lg) var(--space-md);padding-bottom:calc(var(--space-3xl) + env(safe-area-inset-bottom,0px))}.header{margin-bottom:var(--space-xl)}.header h1{font-size:1.75rem}.search-bar{margin-bottom:var(--space-lg)}.search-bar input{font-size:16px;padding:var(--space-md);border-radius:var(--radius-md)}.filter-bar{margin-bottom:var(--space-md)}.filter-row{flex-direction:column;gap:var(--space-sm)}.filter-group{max-width:100%;width:100%;min-width:unset}.filter-select{font-size:16px;padding:var(--space-md);min-height:var(--touch-target)}.filter-clear{width:100%;justify-content:center;min-height:var(--touch-target)}.filter-actions{flex-direction:column;gap:var(--space-sm)}.favorites-toggle{width:100%;justify-content:center;min-height:var(--touch-target)}.tab-count{padding-left:0;text-align:center;font-size:.8rem}.tab-list{gap:var(--space-xs)}.tab-card{padding:var(--space-md);gap:var(--space-sm)}.tab-card-title{font-size:.9rem;flex-wrap:wrap;gap:var(--space-xs)}.tab-card-artist{font-size:.8rem}.tab-card-instrument{font-size:.65rem}.favorite-btn{min-width:var(--touch-target);min-height:var(--touch-target)}.tab-detail{padding-bottom:var(--space-xl)}.back-link{font-size:.8rem;min-height:var(--touch-target);display:inline-flex;align-items:center}.tab-header{flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-lg);padding-bottom:var(--space-lg)}.tab-header-content{width:100%}.tab-header h1{font-size:1.5rem;line-height:1.3}.tab-header .artist{font-size:1rem}.favorite-btn-lg{width:48px;height:48px}.tab-source{margin-bottom:var(--space-lg)}.tab-source a{width:100%;justify-content:center;min-height:var(--touch-target);text-align:center}.tab-content{padding:var(--space-md);border-radius:var(--radius-md);margin-left:calc(-1 * var(--space-md));margin-right:calc(-1 * var(--space-md));border-radius:0;border-left:none;border-right:none;position:relative}.tab-content pre{font-size:.8rem;line-height:1.5;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-sm)}.tab-content:after{content:"";position:absolute;right:0;top:0;bottom:0;width:24px;background:linear-gradient(to right,transparent,var(--code-bg));pointer-events:none;opacity:.8}.transpose-controls{padding:var(--space-md);margin-left:calc(-1 * var(--space-md));margin-right:calc(-1 * var(--space-md));border-radius:0;border-left:none;border-right:none}.transpose-buttons{justify-content:space-between;width:100%}.transpose-btn{width:var(--touch-target);height:var(--touch-target);font-size:1.5rem}.transpose-value{min-width:80px;flex:1;font-size:.85rem}.transpose-reset{margin-left:0;margin-top:var(--space-md);width:100%;justify-content:center;min-height:var(--touch-target)}.capo-indicator{font-size:.8rem;flex-wrap:wrap;justify-content:center;text-align:center}.transpose-hint{text-align:center;font-size:.75rem}.empty-state{padding:var(--space-2xl) var(--space-md);font-size:.9rem}}@media (max-width: 375px){.app{padding:var(--space-md) var(--space-sm);padding-bottom:calc(var(--space-2xl) + env(safe-area-inset-bottom,0px))}.header h1{font-size:1.5rem}.tab-header h1{font-size:1.25rem}.tab-content pre{font-size:.7rem}.transpose-value{min-width:60px;font-size:.75rem}.tab-card{padding:var(--space-sm) var(--space-md)}}@media (max-height: 500px) and (orientation: landscape){.app{padding:var(--space-md) var(--space-lg)}.header{margin-bottom:var(--space-md)}.header h1{font-size:1.5rem}.filter-row{flex-direction:row;flex-wrap:wrap}.filter-group{max-width:180px;width:auto;flex:none}}@media (prefers-color-scheme: dark){:root{--bg-primary: #000000}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}