@import "https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{font-feature-settings:"cv02", "cv03", "cv04", "cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,sans-serif}body{color:#f1f5f9;background:#09090f;min-height:100svh}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}ul{list-style:none}#root{flex-direction:column;min-height:100svh;display:flex}:root{--bg:#09090f;--surface:#111118;--surface-2:#18181f;--surface-3:#21212c;--border:#ffffff12;--border-hi:#ffffff21;--accent:#f59e0b;--accent-dim:#f59e0b1f;--accent-glow:#f59e0b47;--accent-ring:#f59e0b2e;--text:#f1f5f9;--text-2:#94a3b8;--muted:#4b5675;--white-key:#f8f8f8;--black-key:#111119;--radius:12px;--radius-sm:8px;--radius-lg:18px}@keyframes skeleton-pulse{0%,to{opacity:.35}50%{opacity:.65}}@keyframes ring-pulse{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.45)}}@keyframes note-in{0%{opacity:0;transform:translateY(6px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}.song-list{width:100%;max-width:580px;margin:0 auto;padding:56px 20px 100px}.list-header{text-align:center;margin-bottom:44px}.list-icon{filter:drop-shadow(0 0 12px var(--accent-glow));margin-bottom:14px;font-size:40px;display:block}.list-header h1{letter-spacing:-.8px;color:var(--text);margin-bottom:6px;font-size:32px;font-weight:700}.list-subtitle{color:var(--text-2);letter-spacing:.1px;font-size:14px}.build-stamp{color:var(--muted);opacity:.5;letter-spacing:.3px;margin-top:8px;font-size:11px}.find-score-btn{background:var(--surface-2);border:1px solid var(--border-hi);color:var(--text-2);cursor:pointer;border-radius:100px;align-items:center;gap:7px;margin-top:18px;padding:10px 20px;font-size:14px;font-weight:500;transition:background .15s,color .15s,border-color .15s,box-shadow .15s;display:inline-flex}.find-score-btn:hover{background:var(--accent-dim);color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);border-color:#f59e0b59}.audio-test{flex-direction:column;align-items:center;gap:8px;margin-bottom:28px;display:flex}.audio-test-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);border-radius:100px;padding:9px 22px;font-size:14px;font-weight:500;transition:background .15s,border-color .15s,color .15s}.audio-test-btn:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-hi)}.audio-test-status{font-size:13px}.audio-test-hint{color:var(--text-2)}.audio-test-ok{color:#4ade80}.audio-test-err{color:#f87171}.audio-test-tip{color:var(--muted);text-align:center;max-width:300px;font-size:12px;line-height:1.55}.songs{flex-direction:column;gap:10px;display:flex}.song-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-items:stretch;transition:border-color .15s,box-shadow .15s,transform .12s;display:flex;position:relative;overflow:hidden}.song-card:not(.playing):hover{border-color:var(--border-hi);transform:translateY(-1px);box-shadow:0 4px 20px #00000059}.song-card:not(.playing):active{transform:translateY(0)}.song-card.playing{box-shadow:0 0 0 3px var(--accent-ring);border-color:#f59e0b59}.song-card-body{text-align:left;flex:1;justify-content:space-between;align-items:center;padding:18px 14px 18px 20px;transition:background .12s;display:flex}.song-card-body:hover{background:var(--surface-2)}.song-info{flex-direction:column;gap:3px;display:flex}.song-title{color:var(--text);letter-spacing:-.2px;font-size:16px;font-weight:500}.song-composer{color:var(--text-2);font-size:13px}.song-meta{color:var(--muted);align-items:center;gap:10px;font-size:13px;display:flex}.playing-label{color:var(--accent);font-size:13px;font-weight:500}.note-count{color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:100px;padding:2px 8px;font-size:12px}.arrow{color:var(--muted);opacity:.5;font-size:16px;transition:opacity .15s,transform .15s,color .15s}.song-card-body:hover .arrow{opacity:1;color:var(--text-2);transform:translate(3px)}.play-btn{border-left:1px solid var(--border);width:52px;color:var(--muted);flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}.play-btn:hover{background:var(--surface-2);color:var(--text-2)}.play-btn.stop{color:var(--accent)}.play-btn.stop:hover{background:var(--accent-dim)}.song-progress-bar{background:linear-gradient(to right, var(--accent), #fbbf24);height:2px;transition:width .2s linear;position:absolute;bottom:0;left:0}.song-player{flex-direction:column;min-height:100svh;display:flex;overflow:hidden}.player-header{border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;display:flex}.back-btn{color:var(--text-2);border-radius:var(--radius-sm);white-space:nowrap;flex-shrink:0;padding:7px 12px;font-size:13px;font-weight:500;transition:color .12s,background .12s}.back-btn:hover{color:var(--text);background:var(--surface-2)}.player-title{text-align:center;flex-direction:column;align-items:center;gap:2px;min-width:0;display:flex}.player-title>span:first-child{color:var(--text);letter-spacing:-.3px;white-space:nowrap;text-overflow:ellipsis;max-width:200px;font-size:15px;font-weight:600;overflow:hidden}.player-composer{color:var(--text-2);font-size:12px;font-weight:400}.player-progress-text{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;flex-shrink:0;min-width:52px;font-size:12px;font-weight:500}.strip-area{border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;padding:10px 0 0}.sheet-music-osmd{border-radius:var(--radius-sm) var(--radius-sm) 0 0;-webkit-overflow-scrolling:touch;background:#fdfcf8;max-height:270px;margin:0 12px;padding:6px 4px 0;overflow:auto hidden}.sheet-music-osmd::-webkit-scrollbar{height:5px}.sheet-music-osmd::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}.sheet-music-fallback{background:var(--surface-2);border:1px dashed var(--border-hi);border-radius:var(--radius-sm);text-align:center;color:var(--muted);margin:0 12px 10px;padding:20px;font-size:13px}.note-display-area{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;min-height:160px;padding:12px 16px;display:flex}.note-display-area.loading-state{gap:14px}.skeleton-note{border-radius:var(--radius-sm);background:var(--surface-2);width:120px;height:80px;animation:1.6s ease-in-out infinite skeleton-pulse}.skeleton-label{background:var(--surface-2);border-radius:100px;width:80px;height:14px;animation:1.6s ease-in-out .2s infinite skeleton-pulse}.big-note{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:8px;line-height:1;animation:.15s ease-out note-in;display:flex}.note-item{align-items:flex-end;gap:3px;display:flex}.note-sep{color:var(--muted);padding:0 1px 10px;font-size:28px;font-weight:300;line-height:1}.note-name{color:var(--accent);letter-spacing:-4px;text-shadow:0 0 40px var(--accent-glow);font-size:clamp(52px,18vw,88px);font-weight:700;line-height:1}.big-note.chord .note-name{letter-spacing:-2px;font-size:clamp(38px,12vw,64px)}.note-octave{color:var(--text-2);letter-spacing:0;padding-bottom:6px;font-size:clamp(26px,8vw,42px);font-weight:400}.big-note.chord .note-octave{padding-bottom:4px;font-size:clamp(20px,6vw,30px)}.duration-label{color:var(--muted);letter-spacing:.5px;text-transform:lowercase;font-size:12px;font-weight:500}.finger-hint{color:var(--text-2);background:var(--surface-2);border:1px solid var(--border-hi);letter-spacing:.3px;border-radius:100px;align-items:center;gap:5px;padding:3px 10px;font-size:12px;font-weight:600;display:inline-flex}.keyboard-area{border-top:1px solid var(--border);flex-shrink:0;padding:0 0 4px}.keyboard-lane{align-items:center;display:flex}.keyboard-lane+.keyboard-lane{border-top:1px solid var(--border)}.hand-label{width:26px;color:var(--muted);text-align:center;letter-spacing:.8px;text-transform:uppercase;flex-shrink:0;font-size:10px;font-weight:700}.keyboard-scroll{-webkit-overflow-scrolling:touch;flex:1;min-width:0;padding:12px 20px;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 28px calc(100% - 28px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 28px calc(100% - 28px),#0000 100%)}.keyboard-scroll::-webkit-scrollbar{display:none}.keyboard-inner{margin:0 auto;position:relative}.white-key{background:var(--white-key);border:1px solid #ccc;border-radius:0 0 6px 6px;justify-content:center;align-items:flex-end;height:130px;padding-bottom:5px;transition:background 80ms,box-shadow 80ms;display:flex;position:absolute;top:0;box-shadow:inset 0 -3px 5px #0000000f,0 2px 4px #00000026}.white-key.active{background:var(--accent);box-shadow:0 0 18px var(--accent-glow), 0 2px 4px #0003;z-index:1;border-color:#c47d00}.key-label{color:#aaa;-webkit-user-select:none;user-select:none;letter-spacing:.3px;font-size:8px;font-weight:500}.white-key.active .key-label{color:#00000073;font-weight:700}.black-key{background:var(--black-key);z-index:2;border-radius:0 0 4px 4px;height:84px;transition:background 80ms,box-shadow 80ms;position:absolute;top:0;box-shadow:2px 3px 6px #0009,inset 0 1px #ffffff0f}.black-key.active{background:var(--accent);box-shadow:0 0 14px var(--accent-glow), 2px 3px 6px #00000080}.nav-buttons{flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px 12px;display:flex}.nav-btn{border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border);height:48px;color:var(--text-2);flex:1;justify-content:center;align-items:center;font-size:14px;font-weight:500;transition:background .12s,color .12s,border-color .12s,box-shadow .12s;display:flex}.nav-btn:hover:not(:disabled){background:var(--surface-3);border-color:var(--border-hi);color:var(--text)}.nav-btn:disabled{opacity:.25;cursor:default}.nav-btn.accent{background:var(--accent-dim);color:var(--accent);border-color:#f59e0b40}.nav-btn.accent:hover:not(:disabled){box-shadow:0 0 0 3px var(--accent-ring);background:#f59e0b2e;border-color:#f59e0b73}.player-play-btn{background:var(--surface-2);border:1px solid var(--border-hi);width:60px;height:60px;color:var(--text);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:background .12s,transform .1s,border-color .12s;display:flex;position:relative}.player-play-btn:hover:not(:disabled){background:var(--surface-3);transform:scale(1.06)}.player-play-btn:disabled{opacity:.3;cursor:default}.player-play-btn.playing{background:var(--accent);border-color:var(--accent);color:#000}.player-play-btn.playing:hover:not(:disabled){background:#e8950a;transform:scale(1.05)}.player-play-btn.playing:after{content:"";border:2px solid var(--accent);pointer-events:none;border-radius:50%;animation:2s ease-out infinite ring-pulse;position:absolute;inset:-3px}.keyboard-hint{color:var(--muted);letter-spacing:.3px;opacity:.7;font-size:11px}.search-screen{flex-direction:column;width:100%;max-width:580px;margin:0 auto;padding:0 20px 80px;display:flex}.search-screen .list-header{margin-bottom:20px;padding-top:56px;position:relative}.search-screen .back-btn{position:absolute;top:56px;left:0}.search-box-wrap{margin-bottom:8px}.search-input{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);width:100%;color:var(--text);box-sizing:border-box;outline:none;padding:12px 16px;font-family:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s}.search-input::placeholder{color:var(--muted)}.search-input:focus{box-shadow:0 0 0 3px var(--accent-ring);border-color:#f59e0b80}.search-input::-webkit-search-cancel-button{display:none}.search-results{flex-direction:column;gap:5px;max-height:50vh;margin:0 0 24px;padding:0;list-style:none;display:flex;overflow-y:auto}.search-result-btn{text-align:left;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);cursor:pointer;flex-direction:column;gap:3px;width:100%;padding:13px 16px;font-family:inherit;transition:background .1s,border-color .1s,box-shadow .1s;display:flex;position:relative}.search-result-btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--border-hi)}.search-result-btn:disabled{opacity:.45}.result-title{color:var(--text);letter-spacing:-.2px;padding-right:24px;font-size:15px;font-weight:500}.result-composer{color:var(--text-2);font-size:13px}.result-arrow{color:var(--muted);font-size:13px;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.result-status.loading{color:var(--accent);font-size:11px;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.search-empty{color:var(--text-2);text-align:center;padding:20px;font-size:14px}.search-count{color:var(--muted);text-align:center;padding:6px 16px;font-size:12px}.url-loader{border-top:1px solid var(--border);flex-direction:column;gap:8px;padding-top:20px;display:flex}.url-loader-label{color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-size:11px;font-weight:600}.url-loader-row{gap:8px;display:flex}.url-input{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text);outline:none;flex:1;min-width:0;padding:10px 13px;font-family:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}.url-input::placeholder{color:var(--muted)}.url-input:focus{box-shadow:0 0 0 3px var(--accent-ring);border-color:#f59e0b80}.url-load-btn{border-radius:var(--radius);border:1px solid var(--border-hi);background:var(--surface-2);color:var(--text-2);cursor:pointer;white-space:nowrap;padding:10px 16px;font-family:inherit;font-size:14px;font-weight:500;transition:background .12s,border-color .12s,color .12s}.url-load-btn:hover:not(:disabled){color:var(--accent);background:var(--accent-dim);border-color:#f59e0b73}.url-load-btn:disabled{opacity:.35;cursor:default}.url-error{color:#f87171;margin:0;font-size:13px}.url-hint{color:var(--muted);margin:0;font-size:12px;line-height:1.5}.loading-screen{min-height:60vh;color:var(--text-2);flex-direction:column;justify-content:center;align-items:center;gap:14px;font-size:15px;display:flex}.loading-screen p{color:var(--text-2)}.loading-screen .back-btn{margin-top:6px}.loading-spinner{border:2.5px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.7s linear infinite spin}.loading-score{color:var(--muted);font-size:14px;animation:1.6s ease-in-out infinite skeleton-pulse}.note-strip-scroll{-webkit-overflow-scrolling:touch;padding:8px 0;overflow:auto hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 44px calc(100% - 44px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 44px calc(100% - 44px),#0000 100%)}.note-strip-scroll::-webkit-scrollbar{display:none}