:root{--bg:#f9f7fd;--bg-card:#fff;--ink:#3d3a56;--ink-soft:#8d87ac;--ink-faint:#b7b2d1;--lavender:#b7aeec;--lavender-deep:#8f83db;--lavender-wash:#ece8fb;--pink:#f6b9cc;--pink-wash:#fdedf2;--peach:#ffc9a0;--peach-wash:#fff2e6;--border:#e6e1f7;--shadow-sm:0 2px 10px #6b60b314;--shadow-md:0 12px 30px #6b60b324;--font-display:"LXGW WenKai", "Noto Serif SC", serif;--font-ui:"Zen Maru Gothic", "PingFang SC", "Microsoft YaHei", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{font-family:var(--font-ui);background:var(--bg);min-height:100svh;margin:0}#root{min-height:100svh}h1,h2,h3{font-family:var(--font-display);color:var(--ink);margin:0}p{margin:0}button{font-family:inherit}::selection{background:var(--pink-wash);color:var(--ink)}:focus-visible{outline:2px solid var(--lavender-deep);outline-offset:2px;border-radius:6px}.page{flex-direction:column;min-height:100svh;display:flex}.hero{text-align:center;background:radial-gradient(120% 140% at 50% -10%, #efe9ff 0%, var(--bg) 65%);padding:56px 24px 40px;position:relative;overflow:hidden}.hero-particles{pointer-events:none;position:absolute;inset:0}.hero-particles span{color:var(--lavender);opacity:.5;font-size:20px;position:absolute}.hero-particles span:first-child{color:var(--pink);top:18%;left:8%}.hero-particles span:nth-child(2){font-size:14px;top:60%;left:15%}.hero-particles span:nth-child(3){color:var(--peach);top:24%;right:10%}.hero-particles span:nth-child(4){color:var(--pink);font-size:16px;top:66%;right:16%}.hero-particles span:nth-child(5){font-size:14px;top:8%;left:46%}@media (prefers-reduced-motion:no-preference){.hero-particles span{animation:7s ease-in-out infinite drift}.hero-particles span:nth-child(2){animation-duration:9s;animation-delay:.6s}.hero-particles span:nth-child(3){animation-duration:8s;animation-delay:1.2s}.hero-particles span:nth-child(4){animation-duration:6.5s;animation-delay:.3s}.hero-particles span:nth-child(5){animation-duration:10s;animation-delay:1.6s}}@keyframes drift{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-14px)rotate(8deg)}}.hero-eyebrow{font-family:var(--font-ui);letter-spacing:.3em;color:var(--lavender-deep);text-transform:uppercase;font-size:12px;font-weight:700}.hero-title{color:var(--ink);justify-content:center;align-items:center;gap:12px;margin-top:10px;font-size:44px;display:flex}.hero-kaomoji{font-family:var(--font-ui);color:var(--lavender-deep);background:var(--lavender-wash);border-radius:999px;padding:4px 12px;font-size:18px;font-weight:500;transform:rotate(-4deg)}.hero-subtitle{max-width:440px;color:var(--ink-soft);margin:14px auto 0;font-size:15px;line-height:1.7}.hero-meta{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px;display:flex}.hero-pill{color:var(--ink-soft);box-shadow:var(--shadow-sm);border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 16px;font-size:13px}.hero-pill--link{color:var(--lavender-deep);font-weight:500;text-decoration:none;transition:transform .15s,box-shadow .15s}.hero-pill--link:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.main{flex:1;width:100%;max-width:880px;margin:0 auto;padding:0 20px 60px}.controls{z-index:10;background:linear-gradient(var(--bg) 82%, transparent);flex-direction:column;gap:12px;padding:16px 0;display:flex;position:sticky;top:0}.search-bar{background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:999px;align-items:center;gap:8px;padding:10px 16px;display:flex}.search-bar input{color:var(--ink);font-size:15px;font-family:var(--font-ui);background:0 0;border:none;outline:none;flex:1}.search-bar input::placeholder{color:var(--ink-faint)}.search-icon{opacity:.6;font-size:14px}.search-clear{background:var(--lavender-wash);color:var(--lavender-deep);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;line-height:1;display:flex}.tabs{gap:8px;display:flex}.tab{border:1px solid var(--border);background:var(--bg-card);color:var(--ink-soft);cursor:pointer;border-radius:999px;flex:1;justify-content:center;align-items:center;gap:6px;padding:9px 14px;font-size:14px;font-weight:500;transition:transform .15s,box-shadow .15s,background .2s,color .2s;display:flex}.tab:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}.tab-count{background:#0000000d;border-radius:999px;padding:1px 7px;font-size:11px}.tab--all.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}.tab--pop.is-active{background:linear-gradient(120deg, var(--lavender), var(--pink));color:#fff;border-color:#0000}.tab--rap.is-active{background:linear-gradient(120deg, var(--peach), var(--pink));color:#fff;border-color:#0000}.tab.is-active .tab-count{color:#fff;background:#ffffff4d}.result-count{color:var(--ink-faint);margin:4px 2px 14px;font-size:13px}.song-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:10px;display:grid}.song-card{text-align:left;border:1px solid var(--border);border-left:3px solid var(--lavender);background:var(--bg-card);cursor:pointer;min-height:52px;font-family:var(--font-ui);border-radius:14px;align-items:flex-start;gap:8px;padding:12px 14px;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;position:relative}.song-card--rap{border-left-color:var(--peach)}.song-card:hover,.song-card:focus-visible{box-shadow:var(--shadow-md);transform:translateY(-3px)}.song-card:active{transform:translateY(-1px)scale(.98)}.song-note{flex-shrink:0;margin-top:1px;font-size:14px}.song-title{color:var(--ink);-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;flex:1;font-size:14.5px;line-height:1.4;display:-webkit-box;overflow:hidden}.song-copy{color:var(--ink-faint);opacity:0;flex-shrink:0;align-self:flex-start;font-size:11px;transition:opacity .15s}.song-card:hover .song-copy,.song-card:focus-visible .song-copy{opacity:1}.empty-state{text-align:center;color:var(--ink-faint);padding:60px 20px;font-size:15px}.footer{text-align:center;color:var(--ink-faint);padding:28px 20px 40px;font-size:12.5px;line-height:1.8}.footer a{color:var(--lavender-deep);font-weight:500;text-decoration:none}.footer a:hover{text-decoration:underline}.toast{background:var(--ink);color:#fff;box-shadow:var(--shadow-md);text-align:center;z-index:50;border-radius:16px;max-width:min(90vw,360px);padding:12px 20px;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}@media (prefers-reduced-motion:no-preference){.toast{animation:.25s toast-in}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.toast-title{color:var(--pink);font-size:13px;font-weight:700}.toast-body{color:#fff;margin-top:2px;font-size:13px}@media (width<=520px){.hero{padding:44px 18px 32px}.hero-title{font-size:32px}.song-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}