*,:after,:before{box-sizing:border-box}body,html{background:#0000;font-family:Noto Sans JP,sans-serif;margin:0;overflow-x:hidden;padding:0;width:100%}#root,body,html{min-height:100%}.App{margin:0 auto;max-width:1400px;padding:16px;position:relative;width:100%;z-index:20}body:before{animation:hugLightMove 22s ease-in-out infinite alternate;background:linear-gradient(-45deg,#f9fcff,#eaf6ff,#e8f0ff,#f6ecf5,#fdeff4,#eef6ff);background-size:700% 700%;content:"";inset:0;position:fixed;z-index:-10}body.dark:before{animation:hugDarkMove 28s ease-in-out infinite alternate;background:linear-gradient(-45deg,#0f1633,#1b2450,#24306b,#2a2f5f,#1a2348,#121a3a);background-size:800% 800%}@keyframes hugLightMove{0%{background-position:0 50%}25%{background-position:35% 80%}50%{background-position:100% 50%}75%{background-position:65% 20%}to{background-position:0 50%}}@keyframes hugDarkMove{0%{background-position:10% 60%}25%{background-position:40% 30%}50%{background-position:90% 50%}75%{background-position:60% 80%}to{background-position:10% 60%}}#night-sky{inset:0;overflow:visible;pointer-events:none;position:absolute;z-index:5}.twinkle-star{animation:twinkle 4.5s ease-in-out infinite;background:radial-gradient(circle,#fff 0,#fffc 40%,#fff0 70%);border-radius:50%;height:2px;opacity:.6;position:absolute;width:2px}@keyframes twinkle{0%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.8)}to{opacity:.3;transform:scale(.8)}}.shooting-star{animation:shooting 13s linear infinite;background:linear-gradient(90deg,#ffecb4f2,#ffecb48c,#ffecb400);border-radius:999px;box-shadow:0 0 8px #ffecb499,0 0 16px #ffecb459;height:2px;opacity:0;position:absolute;transform:rotate(-45deg);width:180px}@keyframes shooting{0%{opacity:0;transform:translate(0) rotate(-45deg)}15%{opacity:1}to{opacity:0;transform:translate(-900px,900px) rotate(-45deg)}}.moon{animation:moonBreath 6.5s ease-in-out infinite;background:radial-gradient(circle at 30% 30%,#fff6d8 0,#ffe6a8 45%,#f3d38a 65%,#d9b86c 100%);border-radius:50%;box-shadow:0 0 18px #ffe6aa73,0 0 36px #ffdc9640;height:52px;overflow:hidden;pointer-events:none;position:absolute;right:160px;top:64px;width:52px;z-index:5}@media (max-width:768px){.moon{display:none}}.moon-shadow{background:#0f1633;border-radius:50%;inset:0;position:absolute;transform:translateX(-55%);transition:transform 1.4s cubic-bezier(.4,0,.2,1)}body.dark .moon-shadow{transform:translateX(110%)}@keyframes moonBreath{0%{transform:scale(.96)}50%{transform:scale(1.03)}to{transform:scale(.96)}}body{color:#111;transition:color .4s ease}body.dark{color:#e8e9f6}a{color:inherit;text-decoration:none}::selection{background:#a0b4ff73;color:#fff}@media (max-width:768px){.App{padding:12px}.moon{height:44px;right:120px;top:56px;width:44px}}.song-card-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(5,1fr);list-style:none;margin-top:12px;padding:0}@media (max-width:1200px){.song-card-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:900px){.song-card-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:600px){.song-card-grid{grid-template-columns:repeat(2,1fr)}}.song-card{animation:cardEnter .45s ease-in-out both;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:#ffffffd1;border-radius:20px;box-shadow:0 2px 14px #7864c817,0 0 0 1px #c8b9ff38;display:flex;flex-direction:column;overflow:hidden;transition:transform .32s ease-in-out,box-shadow .32s ease-in-out,filter .32s ease-in-out}.song-card:hover{box-shadow:0 16px 44px #7864dc38,0 5px 16px #00000014,0 0 0 1px #c8b4ff66,0 0 24px #a082ff2e;filter:drop-shadow(0 0 6px rgba(160,130,255,.12));transform:translateY(-7px)}body.dark .song-card{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:#191e41c7;box-shadow:0 2px 14px #0006,0 0 0 1px #ffffff12}body.dark .song-card:hover{box-shadow:0 16px 44px #8c78ff59,0 5px 16px #0006,0 0 0 1px #c8b4ff33,0 0 32px #b496ff47;filter:drop-shadow(0 0 10px rgba(180,150,255,.22));transform:translateY(-7px)}.song-card-thumbnail-wrap{aspect-ratio:16/9;background:#e8e8e8;display:block;flex-shrink:0;overflow:hidden;width:100%}body.dark .song-card-thumbnail-wrap{background:#141937b3}.song-card-thumbnail{display:block;height:100%;object-fit:cover;transition:transform .3s ease;width:100%}.song-card:hover .song-card-thumbnail{transform:scale(1.04)}.song-card-no-image{align-items:center;color:#bbb;display:flex;font-size:12px;height:100%;justify-content:center;width:100%}.song-card-body{display:flex;flex:1 1;flex-direction:column;gap:5px;padding:12px 14px 14px}.song-card-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#1a73e8;display:-webkit-box;font-size:14px;font-weight:700;line-height:1.45;overflow:hidden;text-decoration:none}body.dark .song-card-title{color:#9ab4ff}.song-card-title:hover{text-decoration:underline}.song-card-vocal{color:#666;font-size:12px;line-height:1.4}body.dark .song-card-vocal{color:#c3bee1d1}.song-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.song-card-badge{border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 7px;white-space:nowrap}.badge-miku{background:#d8f5f5;color:#066}.badge-kafu{background:#ede4ff;color:#5c28a8}.badge-teto{background:#fde8e8;color:#b82222}.badge-una{background:#fff1cc;color:#9e5a00}.badge-other{background:#eee;color:#555}.badge-provided{background:#dce8ff;color:#1e3c9e}.badge-joysound{background:#fff0d0;color:#a05800}.badge-dam{background:#daf4da;color:#1a6e1a}body.dark .badge-miku{background:#008c8c38;color:#5cdada}body.dark .badge-kafu{background:#823cd238;color:#c090ff}body.dark .badge-teto{background:#d2323238;color:#f99}body.dark .badge-una{background:#be820038;color:#fc5}body.dark .badge-other{background:#8c8c8c33;color:#ccc}body.dark .badge-provided{background:#325adc38;color:#8aabff}body.dark .badge-joysound{background:#be6e0038;color:#fb5}body.dark .badge-dam{background:#148c1438;color:#7ddd7d}.song-card-footer{align-items:center;display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}.song-card-lyrics-btn{background:#f5f0ff;border:1px solid #0000001f;border-radius:10px;color:#555;cursor:pointer;font-size:11px;padding:5px 10px;transition:all .3s ease-in-out,transform .3s ease-in-out,box-shadow .3s ease-in-out;white-space:nowrap}.song-card-lyrics-btn:hover{background:#ede5ff;box-shadow:0 4px 12px #9678dc38,0 0 10px #a082ff2e;transform:translateY(-1px)}.song-card-lyrics-btn:active{animation:btnBounce .32s ease-in-out}body.dark .song-card-lyrics-btn{background:#ffffff14;border-color:#c8beff47;color:#e6dcffeb}body.dark .song-card-lyrics-btn:hover{background:#ffffff21;box-shadow:0 4px 14px #0000004d,0 0 14px #b496ff47}.song-card-lyrics{border-top:1px solid #0000000f;color:#444;font-size:13px;line-height:1.85;margin-top:2px;padding:0 14px 14px;white-space:pre-wrap}body.dark .song-card-lyrics{border-top-color:#ffffff14;color:#d7d2f0e6}.site-header{align-items:center;border-bottom:1px solid #00000012;display:flex;justify-content:space-between;margin-bottom:10px;padding:28px 0 18px;transition:border-color .3s}body.dark .site-header{border-bottom-color:#ffffff14}.site-header-brand{align-items:center;display:flex;gap:10px}.site-header-logo{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#b97cff,#7cb3ff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 8px rgba(180,160,255,.45));font-size:30px;line-height:1}.site-header-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#7b5ea7,#4b8bf5);-webkit-background-clip:text;background-clip:text;font-size:28px;font-weight:800;letter-spacing:.04em;margin:0}body.dark .site-header-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#d4b0ff,#89c4ff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px rgba(190,170,255,.4))}.site-header-right{position:relative}.settings-gear-btn{align-items:center;background:#ffffffe0;border:1px solid #0000001f;border-radius:50%;box-shadow:0 2px 10px #00000014;color:#555;cursor:pointer;display:flex;font-size:20px;height:42px;justify-content:center;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;width:42px}.settings-gear-btn:hover{box-shadow:0 4px 18px #7864dc38;transform:rotate(60deg) scale(1.08)}body.dark .settings-gear-btn{background:#262c52eb;border-color:#ffffff2e;box-shadow:0 2px 12px #00000073;color:#d2cdfff2}body.dark .settings-gear-btn:hover{box-shadow:0 4px 18px #a08cff59}.settings-panel{animation:panelFadeIn .18s ease;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:#fffffff7;border:1px solid #c8b9ff4d;border-radius:18px;box-shadow:0 8px 36px #00000024;max-height:calc(100vh - 90px);overflow-y:auto;padding:18px;position:absolute;right:0;top:calc(100% + 10px);width:280px;z-index:1000}body.dark .settings-panel{background:#1a1e41f7;border-color:#ffffff1c;box-shadow:0 8px 36px #0009}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.settings-row{align-items:center;display:flex;gap:12px;justify-content:space-between}.settings-label{color:#444;font-size:13px;font-weight:600;white-space:nowrap}body.dark .settings-label{color:#d7d2f5eb}.settings-divider{background:#00000012;height:1px;margin:14px 0}body.dark .settings-divider{background:#ffffff17}.settings-auth{display:flex;flex-direction:column;gap:8px}.settings-email{color:#666;font-size:12px;line-height:1.4;word-break:break-all}body.dark .settings-email{color:#beb9e1d1}.settings-logout-btn{background:#0000;border:1px solid #00000024;border-radius:9px;color:#555;cursor:pointer;font-size:13px;padding:7px 14px;text-align:center;transition:all .2s ease}.settings-logout-btn:hover{background:#f5f0ff;border-color:#7864c84d;color:#4b3f72}body.dark .settings-logout-btn{border-color:#fff3;color:#dcd7ffe6}body.dark .settings-logout-btn:hover{background:#ffffff14}.settings-login-btn{background:linear-gradient(135deg,#8264dc1a,#5082ff1a);border:1px solid #7864c852;border-radius:11px;color:#5a3fa0;cursor:pointer;font-size:13px;font-weight:600;letter-spacing:.02em;padding:10px 16px;transition:all .25s ease;width:100%}.settings-login-btn:hover{background:linear-gradient(135deg,#8264dc33,#5082ff33);box-shadow:0 4px 12px #6450c82e;transform:translateY(-1px)}body.dark .settings-login-btn{background:linear-gradient(135deg,#8264dc33,#5082ff2e);border-color:#a08cff59;color:#c8b9fff2}body.dark .settings-login-btn:hover{box-shadow:0 4px 14px #9682ff4d}.yoru-toggle{background:#b4b4be73;border:none;border-radius:14px;cursor:pointer;flex-shrink:0;height:28px;outline:none;position:relative;transition:background .45s ease,box-shadow .45s ease;width:54px}.yoru-toggle.on{background:linear-gradient(135deg,#7b5abf,#3a5abf);box-shadow:0 0 14px #7864dc8c,0 0 28px #5078dc40}.yoru-toggle-knob{background:linear-gradient(135deg,#fff,#f0eeff);border-radius:50%;box-shadow:0 2px 6px #00000040;height:20px;left:4px;position:absolute;top:4px;transition:transform .42s cubic-bezier(.34,1.56,.64,1);width:20px;z-index:1}.yoru-toggle.on .yoru-toggle-knob{transform:translateX(26px)}@media (max-width:768px){.settings-panel{right:-4px;width:230px}}@keyframes cardEnter{0%{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes btnBounce{0%{transform:scale(1)}30%{transform:scale(.88)}60%{transform:scale(1.1)}80%{transform:scale(.97)}to{transform:scale(1)}}.filter-btn{transition:all .3s ease-in-out!important}.filter-btn:hover{box-shadow:0 0 10px #a082ff40,0 2px 8px #00000012!important;transform:translateY(-1px)}body.dark .filter-btn:hover{box-shadow:0 0 18px #beaaffa6,0 0 38px #a08cff52,0 2px 10px #00000059!important}.filter-btn:active{animation:btnBounce .32s ease-in-out;transform:scale(1)!important}.tab-btn{transition:all .3s ease-in-out!important}.tab-btn:hover{box-shadow:0 0 8px #9682dc2e!important;filter:brightness(1.06)}body.dark .tab-btn:hover{box-shadow:0 0 12px #b4a0ff47!important}.tab-btn:active{animation:btnBounce .3s ease-in-out}.settings-login-btn{transition:all .3s ease-in-out!important}.settings-login-btn:hover{box-shadow:0 4px 12px #6450c833,0 0 14px #8c6ef02e!important}body.dark .settings-login-btn:hover{box-shadow:0 4px 16px #9682ff52,0 0 20px #a08cff38!important}.settings-login-btn:active{animation:btnBounce .32s ease-in-out}.lyrics-highlight{background:#ffe066;border-radius:3px;color:#222;font-weight:700;padding:1px 3px}body.dark .lyrics-highlight{background:#f5c518;color:#111}
/*# sourceMappingURL=main.ae4e329b.css.map*/