:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#1d1d1f;background:#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible{outline-offset:5px;outline:2px solid}a{color:inherit}::selection{background:#8885}.app{--base:#f5f5f7;--ink:#1d1d1f;--soft-ink:#63636b;--surface:#ffffff50;--line:#00000016;--top-gap:clamp(28px,6svh,64px);min-height:100svh;padding:calc(var(--top-gap) + 104px) 24px 94px;color:var(--ink);background:var(--base);transition:background-color 1.2s,color .6s;position:relative;overflow:clip}.app[data-artwork-tone=dark]{--ink:#fff;--soft-ink:#ffffffae;--surface:#00000015;--line:#fff2;background:var(--cover-color);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.app[data-artwork-tone=light]{--ink:#171719;--soft-ink:#000000a0;--surface:#ffffff28;--line:#0000001c;background:var(--cover-color);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{color:#fff;background:#151517}.app{--base:#151517;--ink:#fff;--soft-ink:#ffffff9e;--surface:#ffffff0c;--line:#fff2}}.search{left:50%;top:var(--top-gap);width:min(560px,100% - 48px);transform:translate(-50%,calc(50svh - var(--top-gap) - 35px));z-index:2;margin:0;transition:transform .75s cubic-bezier(.22,1,.36,1);position:absolute}.has-result .search{transform:translate(-50%)}.input-line{border-bottom:1px solid color-mix(in srgb,var(--ink) 23%,transparent);align-items:center;gap:13px;min-height:60px;display:flex;position:relative}.input-line:focus-within{border-color:color-mix(in srgb,var(--ink) 50%,transparent)}.search-icon{color:var(--soft-ink);flex:none}.input-line input{width:100%;min-width:0;height:60px;color:var(--ink);letter-spacing:-.3px;background:0 0;border:0;outline:0;flex:1;padding:0;font-size:16px}.input-line input::placeholder{color:var(--soft-ink)}.icon-button{width:40px;height:44px;color:var(--soft-ink);background:0 0;border:0;flex:none;place-items:center;padding:0;display:grid}.icon-button:hover{color:var(--ink)}.clear{width:28px;margin-right:-8px}.search-hint,.message{text-align:center;color:var(--soft-ink);margin:16px 0 0;font-size:12px;line-height:1.65}.message{color:var(--ink)}.input-line:after{content:"";pointer-events:none;opacity:0;background:linear-gradient(90deg,#ff647c,#f5ae55,#c1d66a,#4bc9bb,#5999ff,#bc7dff,#ff647c) 0 0/300% 100%;height:1px;transition:opacity .25s;animation:5s linear infinite paused rainbow-flow;position:absolute;bottom:-1px;left:0;right:0}.input-line.is-loading:after{opacity:1;animation-duration:.85s;animation-play-state:running}@media (hover:hover){.input-line:hover:after{opacity:1;animation-play-state:running}}.track{flex-direction:column;align-items:center;width:min(100%,620px);margin:0 auto;animation:.55s both appear;display:flex}.artwork{isolation:isolate;aspect-ratio:1;width:min(288px,65vw);position:relative}.cover{background:var(--surface);width:100%;height:100%;color:var(--soft-ink);border-radius:14px;place-items:center;display:grid;overflow:hidden;box-shadow:0 24px 55px -15px #00000045,0 2px 8px #00000012}.cover img{object-fit:cover;width:100%;height:100%;display:block}.cover-glow{filter:blur(34px);opacity:.36;z-index:-1;pointer-events:none;position:absolute;inset:12% -8% -12%}.cover-glow span{border-radius:50%;width:70%;height:70%;animation:13s ease-in-out infinite alternate glow-drift;position:absolute}.cover-glow span:first-child{background:var(--glow-1);bottom:0;left:-4%}.cover-glow span:nth-child(2){background:var(--glow-2);animation-duration:17s;animation-delay:-6s;bottom:5%;right:-4%}.cover-glow span:nth-child(3){background:var(--glow-3);animation-duration:19s;animation-delay:-11s;top:0;left:15%}.track-title{text-align:center;max-width:100%;margin:27px 0 26px}.track-title h2{letter-spacing:-.55px;overflow-wrap:anywhere;margin:0;font-size:19px;font-weight:550;line-height:1.35}.track-title p{color:var(--soft-ink);margin:6px 0 0;font-size:13px;line-height:1.5}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;width:100%;margin-bottom:25px;display:flex}.instrument-switch{border:1px solid var(--line);background:var(--surface);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:30px;gap:2px;padding:3px;display:flex}.instrument-switch button{height:36px;color:var(--soft-ink);background:0 0;border:0;border-radius:24px;justify-content:center;align-items:center;gap:7px;padding:0 14px;font-size:12px;transition:background .2s,color .2s;display:flex}.instrument-switch button[aria-pressed=true]{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink)}.transpose{align-items:center;gap:1px;display:flex}.transpose button{background:0 0;border:0;border-radius:50%;place-items:center;width:38px;height:44px;display:grid}.transpose button:hover:not(:disabled){background:var(--surface)}.transpose output{text-align:center;font-variant-numeric:tabular-nums;min-width:96px;font-size:12px}.transpose small{opacity:.7;font-size:11px}.chords{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.chord{--accent:hsl(var(--chord-hue) 65% 57%);text-align:center;border:1px solid var(--line);background:var(--surface);border-radius:17px;flex:0 0 calc(25% - 7.5px);min-width:120px;max-width:160px;padding:17px 9px 13px;transition:background .25s,transform .25s}.chord:hover{background:color-mix(in srgb,var(--surface) 90%,var(--ink) 3%);transform:translateY(-2px)}.chord h3{letter-spacing:-.7px;margin:0 0 8px;font-size:20px;font-weight:550}.guitar-diagram{width:112px;max-width:100%;height:116px;margin:0 auto;display:block;overflow:visible}.piano-diagram{width:100%;height:116px;display:block;overflow:visible}.fret,.string{stroke:var(--ink);opacity:.27;stroke-width:.8px}.nut{stroke:var(--ink);stroke-width:3px;opacity:.6}.muted-string{stroke:var(--ink);stroke-width:1px;opacity:.45}.open-string{stroke:var(--accent);stroke-width:1.8px;fill:none}.note-dot{fill:var(--accent);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 45%,transparent))}.fret-number{fill:var(--soft-ink);font-size:10px}.chord-notes{min-height:14px;color:var(--soft-ink);letter-spacing:.25px;margin:8px 0 0;font-size:10px;line-height:1.4}.white-key{fill:#fff;stroke:#0002;stroke-width:.5px}.black-key{fill:#25252a;stroke:#0002;stroke-width:.5px}.active-key{fill:var(--accent)}.key-marker{fill:#fffd}.no-diagram{height:116px;color:var(--soft-ink);align-content:center;font-size:11px;line-height:1.6;display:grid}.capo{color:var(--soft-ink);margin:-13px 0 20px;font-size:11px}.source{color:var(--soft-ink);margin-top:23px;font-size:10px;line-height:2;text-decoration:none}.source:hover{text-decoration:underline}.results{flex-direction:column;gap:3px;width:min(100%,560px);margin:12px auto 0;animation:.4s both appear;display:flex}.result{text-align:left;background:0 0;border:0;border-radius:14px;align-items:center;gap:14px;width:100%;padding:11px 12px;display:flex}.result:hover{background:var(--surface)}.result-art{background:var(--line);width:48px;height:48px;color:var(--soft-ink);border-radius:7px;flex:none;place-items:center;display:grid;position:relative;overflow:hidden}.result-art img{object-fit:cover;width:100%;height:100%;position:absolute}.result-name{flex-direction:column;flex:1;gap:5px;min-width:0;display:flex}.result-name strong{text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;overflow:hidden}.result-name>span{color:var(--soft-ink);font-size:12px}.result>svg{color:var(--soft-ink)}footer{bottom:22px;left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));color:var(--soft-ink);letter-spacing:.02em;justify-content:space-between;align-items:center;font-size:11px;display:flex;position:absolute}.wordmark{color:var(--ink);letter-spacing:-.5px;font-size:14px;font-weight:550}.brand-dot{color:#bc7dff;margin-left:1px}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.spin{animation:1s linear infinite rotate}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes rainbow-flow{to{background-position:150%}}@keyframes appear{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes glow-drift{0%{opacity:.65;transform:translate(-10px,5px)scale(.94)}50%{opacity:1;transform:translate(12px,-8px)scale(1.08)}to{opacity:.8;transform:translate(-3px,12px)scale(1.02)}}@media (max-width:600px){.app{padding:calc(var(--top-gap) + 110px) 20px 86px}.search{width:calc(100% - 40px)}.input-line{gap:9px}.artwork{width:min(256px,65vw)}.controls{gap:9px}.instrument-switch button{padding:0 11px}.chords{gap:9px;max-width:420px}.chord{flex-basis:calc(50% - 4.5px);max-width:calc(50% - 4.5px);padding:15px 12px 12px}.track-title{margin:25px 0 23px}.transpose output{min-width:90px}footer{left:20px;right:20px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.chord:hover{transform:none}}.chords{flex-wrap:nowrap;justify-content:flex-start;max-width:100%;padding:4px 0 12px;overflow-x:auto}.chord{min-width:145px;max-width:145px;color:inherit;font:inherit;cursor:pointer;flex:0 0 145px}.chord:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.chord:active{transform:translateY(1px)}.section-switch{gap:6px;width:100%;padding:3px 0 16px;display:flex;overflow-x:auto}.section-switch button:first-child{margin-left:auto}.section-switch button:last-child{margin-right:auto}.section-switch button{border:1px solid var(--line);background:var(--surface);color:var(--soft-ink);border-radius:24px;flex:none;padding:8px 13px}.section-switch button[aria-pressed=true]{background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}