:root{--primary-color:#4a6fa5;--secondary-color:#3d5a80;--accent-color:#2c3e50;--background-color:#f8fafc;--card-color:#fff;--text-primary:#2c3e50;--text-secondary:#3d5a80;--text-light:#98a8b9;--border-color:#e9ecef;--hover-color:#e3f2fd;--shadow-sm:0 2px 4px rgba(0,0,0,.05);--shadow-md:0 4px 8px rgba(0,0,0,.08);--shadow-lg:0 10px 15px rgba(0,0,0,.1);--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--transition:all .3s ease}*,:after,:before{box-sizing:border-box}::selection{background-color:#f9c781;color:inherit}::-moz-selection{background-color:#f9c781;color:inherit}.highlight-text{background-color:#f9c781;padding:0 .05em;border-radius:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}html{height:100%;overflow-x:hidden;overflow-y:auto}body{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;color:var(--text-primary);margin:0;padding:0}body:has(.page-shell--hidden){overflow:hidden}body:before{background:url(/data/pm1I7pd0.webp) no-repeat top;background-size:cover;background-position:center var(--bg-pos-y,0)}body:after,body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1}body:after{background-color:#f8fafcb8}.container{max-width:1200px;margin:0 auto;padding:2rem 1rem 0;min-height:100vh;display:flex;flex-direction:column}.page-shell{transition:opacity .18s ease}main{flex:1}.page-shell--hidden{opacity:0;pointer-events:none}.page-shell--ready{opacity:1}.page-preloader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center;gap:.9rem;flex-direction:column;background:#f8fafceb;color:var(--text-secondary);font-size:1rem;letter-spacing:.02em}.page-preloader:before{content:"";width:2.5rem;height:2.5rem;border-radius:50%;border:3px solid rgba(61,90,128,.18);border-top-color:var(--primary-color);animation:spin 1s linear infinite}header{margin-bottom:2.5rem;position:relative}.title-section{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;margin-bottom:0;padding:1rem 0}.avatar{width:70px;height:70px;border-radius:50%;border:1px solid var(--primary-color);box-shadow:var(--shadow-md),0 0 20px #4a6fa533;-o-object-fit:cover;object-fit:cover;transition:var(--transition);position:relative;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));padding:2px}.avatar:hover{transform:scale(1.1) rotate(5deg);box-shadow:var(--shadow-lg),0 0 30px #4a6fa566;border-color:var(--secondary-color)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.bilibili-nav{position:fixed;top:1rem;left:1rem;right:1rem;z-index:1000;margin:0;width:auto;transition:opacity .18s ease;will-change:opacity}.nav-links{justify-content:space-between;width:100%;flex-wrap:nowrap}.nav-group,.nav-links{display:flex;align-items:center;gap:.75rem}.nav-group-left{justify-content:flex-start}.nav-group-right{justify-content:flex-end;margin-left:auto}.nav-link{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background-color:var(--card-color);color:var(--primary-color);text-decoration:none;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.9rem;font-weight:500;transition:var(--transition);box-shadow:var(--shadow-sm)}.nav-link:hover{background-color:var(--primary-color);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}.header-copy{max-width:780px;margin:0 auto 1.5rem;padding:.75rem 1rem;text-align:center;color:var(--text-secondary);background:#0000000a;border-radius:16px}.header-copy p{margin:0}.header-copy p+p{margin-top:.35rem}.birthday-line{margin-top:.5rem!important;letter-spacing:.02em}.birthday-line,h1{font-weight:600;color:var(--primary-color)}h1{text-align:center;margin:0;font-size:2.2rem}.search-container{display:flex;flex-direction:column;gap:1rem;margin:0 auto;max-width:800px}.search-box{display:flex;width:100%;box-shadow:var(--shadow-sm);border-radius:var(--radius-md);overflow:hidden}.search-actions{display:flex;flex-shrink:0}#searchInput{flex:1;padding:.875rem 1rem;border:1px solid var(--border-color);border-right:none;border-radius:var(--radius-md) 0 0 var(--radius-md);font-size:1rem;outline:none;transition:var(--transition)}#searchInput:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px #4a6fa540}#clearButton,#randomButton,#searchButton{padding:0 1.5rem;border:none;color:#fff;cursor:pointer;font-size:.9rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:var(--transition)}#clearButton{width:2.8rem;padding:0;background-color:#7b8794;border-radius:0}#clearButton,#randomButton,#searchButton{min-height:3.2rem}#randomButton{background-color:var(--secondary-color);border-radius:0}#searchButton{background-color:var(--primary-color);border-radius:0 var(--radius-md) var(--radius-md) 0}#randomButton:hover{background-color:var(--accent-color)}#clearButton:hover{background-color:#5f6975}#searchButton:hover{background-color:var(--secondary-color)}@media (max-width:640px){.search-box{flex-wrap:wrap}#searchInput{order:2;flex:1 1 auto;min-width:0;border-right:none;border-radius:var(--radius-md) 0 0 var(--radius-md)}#clearButton{order:1;flex:0 0 3rem;padding:0;border-radius:0 var(--radius-md) var(--radius-md) 0}.search-actions{width:100%;order:3}#randomButton,#searchButton{flex:1;padding:.9rem 1rem;border-radius:0}#randomButton{border-radius:0 0 0 var(--radius-md)}#searchButton{border-radius:0 0 var(--radius-md) 0}}.filter-dropdowns{display:flex;flex-wrap:wrap;gap:1rem;width:100%}.filter-group{flex:1;min-width:200px;display:flex;align-items:center;gap:.75rem}.filter-group label{display:block;margin-bottom:0;color:var(--text-secondary);font-size:.9rem;white-space:nowrap;flex-shrink:0}.filter-select{flex:1;min-width:0;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:#fff;font-size:.9rem;color:var(--text-primary);cursor:pointer;transition:var(--transition);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M7.247%2011.14%202.451%205.658C1.885%205.013%202.345%204%203.204%204h9.592a1%201%200%200%201%20.753%201.659l-4.796%205.48a1%201%200%200%201-1.506%200z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 1rem center;background-size:.875rem}.filter-select:focus,.filter-select:hover{border-color:var(--primary-color);box-shadow:0 0 0 2px #4a6fa51a;outline:none}.song-count{text-align:center;margin-bottom:1.5rem;font-size:.9rem;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.favorite-filter-btn,.song-count{color:var(--text-secondary);align-items:center}.favorite-filter-btn{display:inline-flex;gap:.35rem;padding:.35rem 1rem;border:1px solid var(--border-color);border-radius:20px;background:var(--card-color);font-size:.85rem;font-family:inherit;cursor:pointer;transition:var(--transition)}.favorite-filter-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.favorite-filter-btn:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.favorite-filter-btn--active{background-color:#4a6fa51a;border-color:var(--primary-color);color:var(--primary-color)}.song-list{position:relative;width:100%}.song-item{background-color:var(--card-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.25rem;transition:var(--transition);border:1px solid var(--border-color);position:relative;overflow:hidden}.song-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.song-favorite-btn{position:absolute;top:.5rem;right:.5rem;z-index:2;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:#ccc;font-size:1.1rem;cursor:pointer;border-radius:50%;transition:var(--transition);padding:0}.song-favorite-btn:hover{color:#f5a623;background-color:#f5a6231a}.song-favorite-btn:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.song-favorite-btn--active{color:#f5a623}.song-title{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;color:var(--text-primary);line-height:1.4}.song-artist{color:var(--primary-color);margin-bottom:.875rem;font-size:.95rem;font-weight:500;display:flex;align-items:center;gap:.4rem}.song-artist:before{content:"";font-family:bootstrap-icons,sans-serif;font-size:1rem;flex-shrink:0}.song-pitch{margin:0;padding:.35rem .75rem;border-radius:20px;display:inline-flex;align-items:center;font-size:.85rem;font-weight:500}.song-meta-row{display:flex;align-items:flex-start;gap:.75rem;margin-top:.2rem}.song-tags{display:flex;flex:1;flex-wrap:wrap;gap:.5rem;min-width:0}.song-bilibili-link{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background-color:#00aeef1f;color:#00aeef;text-decoration:none;transition:var(--transition)}.song-bilibili-link:hover{background-color:#00aeef33;transform:translateY(-1px);box-shadow:var(--shadow-sm)}.song-bilibili-link i{font-size:1rem}.pitch-up{background-color:#2e7d321a;color:#2e7d32}.pitch-down{background-color:#c628281a;color:#c62828}.pitch-original{background-color:#1565c01a;color:#1565c0}.pitch-unknown{background-color:#7575751a;color:#757575}.song-tag{background-color:#4a6fa514;padding:.25rem .75rem;border-radius:20px;font-size:.8rem;white-space:nowrap;color:var(--primary-color);font-weight:500;border:none;font-family:inherit;line-height:inherit}.song-tag.clickable{cursor:pointer;transition:var(--transition)}.song-tag.clickable:hover{background-color:#4a6fa526}.song-tag.clickable:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.genre-tag{background-color:#2e7d3214;color:#2e7d32}.genre-tag.clickable:hover{background-color:#2e7d322e}.loading{text-align:center;padding:3rem 0;color:var(--text-light);grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:1rem}.loading:before{content:"";display:block;width:2.5rem;height:2.5rem;border-radius:50%;border:3px solid var(--border-color);border-top-color:var(--primary-color);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.error-message{color:#d32f2f;grid-column:1/-1;background-color:#d32f2f0d;border-radius:var(--radius-md);border:1px solid rgba(211,47,47,.1)}.error-message,.no-results{text-align:center;padding:3rem 2rem}.no-results{color:var(--text-secondary);font-style:italic;display:flex;flex-direction:column;align-items:center;gap:1rem}.no-results i{font-size:2.5rem;opacity:.5}footer{margin-top:0;text-align:center;padding:2rem 0 1rem}.copyright{color:#284046b5;font-size:.9rem}@media (max-width:768px){header{display:flex;flex-direction:column}.bilibili-nav{position:static;top:auto;left:auto;right:auto;margin:0 0 1rem;opacity:1!important;pointer-events:auto!important;order:-1}.song-meta-row{flex-direction:row;gap:.6rem;align-items:center}.song-tags{flex:1;flex-wrap:wrap;min-width:0}.filter-buttons{flex-direction:row;overflow-x:auto;padding-bottom:.5rem}.filter-btn{flex-shrink:0}.filter-dropdowns{flex-direction:column}.filter-group{width:100%}.search-container{gap:1.5rem}.nav-links{flex-direction:row;justify-content:space-between;align-items:stretch;gap:.45rem;width:100%;overflow-x:auto;-ms-overflow-style:none}.nav-links::-webkit-scrollbar{display:none}.nav-group{gap:.45rem;flex-shrink:0}.nav-group-right{margin-left:0}.nav-link{width:auto;justify-content:center;max-width:none;padding:.55rem .8rem;font-size:.78rem;white-space:nowrap}.title-section{flex-direction:column;gap:.75rem;padding:.75rem 0}.avatar{width:60px;height:60px;border-width:3px}h1{font-size:1.8rem}}@media (max-width:480px){.nav-link{width:100%;justify-content:center;max-width:250px}.avatar{width:50px;height:50px;border-width:2px}h1{font-size:1.6rem}}.scroll-to-top{position:fixed;right:24px;bottom:24px;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px #2c3e502e;border:none;cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;z-index:1200}.scroll-to-top.visible{opacity:1;transform:translateY(0)}.scroll-to-top:focus{outline:2px solid hsla(0,0%,100%,.2)}.scroll-to-top i{font-size:1.6rem}@media (max-width:600px){.scroll-to-top{right:16px;bottom:18px;width:48px;height:48px}}@media (max-width:420px){.scroll-to-top{right:12px;bottom:14px;width:44px;height:44px}}