body{background:#07111f;margin:0;overflow:hidden}#app{width:100vw;height:100vh}canvas{display:block}#loading-screen{z-index:80;box-sizing:border-box;color:#fff;text-align:center;opacity:1;pointer-events:auto;background:radial-gradient(circle at 50% 38%,#3dabec3d,#78d2ff29 30%,#0000 58%),linear-gradient(#6fc9ff 0%,#8bd7ff 50%,#6ac5f5 100%);flex-direction:column;justify-content:center;align-items:center;gap:24px;padding:6vh 24px;transition:opacity .65s,visibility .65s;display:flex;position:fixed;inset:0}#loading-screen.loading-hidden{opacity:0;visibility:hidden;pointer-events:none}#loading-particles{filter:drop-shadow(0 0 10px #ffffffeb)drop-shadow(0 0 34px #ffffffc7);flex:none;width:min(520px,80vw);height:min(420px,48vh)}.loading-title{color:#fff;text-shadow:0 2px 8px #2d8ecd6b,0 0 28px #ffffff6b;max-width:min(900px,92vw);margin:0;font-size:clamp(24px,3.6vw,44px);font-weight:700;line-height:1.2}.loading-progress{box-sizing:border-box;background:#ffffffd1;border:5px solid #fffffff2;border-radius:999px;width:min(900px,78vw);height:28px;padding:5px;box-shadow:0 0 20px #ffffff57,inset 0 1px 3px #56aade33}.loading-progress-bar{background:linear-gradient(90deg,#18a7f4,#35c7ff);border-radius:999px;width:0%;height:100%;transition:width .24s;box-shadow:0 0 18px #2ebeff94}.loading-progress-text{color:#fff;text-shadow:0 2px 8px #2d8ecd61;min-height:1.2em;margin:0;font-size:clamp(24px,3vw,38px);font-weight:600;line-height:1}@media (width<=640px){#loading-screen{gap:18px;padding-inline:18px}#loading-particles{width:min(360px,88vw);height:min(300px,42vh)}.loading-progress{border-width:4px;width:min(520px,84vw);height:24px;padding:4px}}#home-screen{z-index:30;color:#f4fdff;text-align:center;pointer-events:auto;flex-direction:column;justify-content:center;align-items:center;gap:40px;transition:transform 1.3s;display:flex;position:fixed;inset:0}#home-screen[hidden]{display:none!important}#home-screen:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 28%,#ffffff9e,#b4eeff33 28%,#0000 56%);transition:opacity 1.6s .3s;position:fixed;inset:0}#home-screen:after{content:"";z-index:-1;pointer-events:none;background:radial-gradient(#0000 45%,#ffffff47 100%);transition:opacity 1.6s .3s;position:fixed;inset:0}#home-screen.home-leaving{pointer-events:none;transform:translateY(-40px)scale(1.03)}#home-screen.home-leaving:before,#home-screen.home-leaving:after{opacity:0}#home-screen.home-leaving .home-title{animation:1.3s forwards floatAwayTitle}#home-screen.home-leaving .home-menu button:first-child{animation:1.25s 50ms forwards floatAwayBtn}#home-screen.home-leaving .home-menu button:nth-child(2){animation:1.18s .12s forwards floatAwayBtn}#home-screen.home-leaving .home-menu button:nth-child(3){animation:1.11s .19s forwards floatAwayBtn}#home-screen.home-leaving .home-contest-link{animation:1.2s .1s forwards floatAwayBtn}@keyframes floatAwayTitle{0%{opacity:1;filter:blur();transform:translateY(0)scale(1)}to{opacity:0;filter:blur(8px);transform:translateY(-60px)scale(1.1)}}@keyframes floatAwayBtn{0%{opacity:1;filter:blur();transform:translateY(0)scale(1)}to{opacity:0;filter:blur(6px);transform:translateY(30px)scale(.92)}}.home-title{filter:drop-shadow(0 12px 100px #00f7ff45);animation:3s ease-in-out infinite titleFloat;position:relative}.home-title:before{content:"";filter:blur(3px);pointer-events:none;z-index:-1;background:radial-gradient(circle at 50% 45%,#ffffff6b 0%,#96ebff42 42%,#d2b4ff29 62%,#0000 76%);border-radius:50%;width:520px;height:280px;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%)}@keyframes titleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.home-title h1{color:#f8feff;text-shadow:0 0 2px #fffffff2,0 2px #41b9e6e6,0 0 10px #64e1fff2,0 0 24px #5cbeffcc,0 0 42px #d2aaff94;margin:0;font-size:80px;font-weight:700}.home-title p{color:#d9f7ff;text-shadow:0 1px 2px #145370d9,0 0 6px #50cdf5a6,0 0 16px #aa91ff59;margin:4px 0 0;font-size:24px;font-weight:600}.home-menu{flex-direction:column;gap:16px;width:min(320px,72vw);display:flex}.home-menu button{color:#5f7891;cursor:pointer;-webkit-backdrop-filter:blur(18px)saturate(1.45);backdrop-filter:blur(18px)saturate(1.45);text-shadow:0 1px #fffc,0 1px 3px #305e7a6b;background:linear-gradient(#ffffff6b,#e1faff47 48%,#91e1f02e);border:1px solid #ffffffc7;border-radius:999px;width:100%;padding:14px 24px;font-size:24px;font-weight:700;position:relative;overflow:hidden;box-shadow:inset 0 2px 1px #ffffffe6,inset 0 -10px 20px #69d2e624,0 8px 22px #ffffff3d,0 8px 24px #48b2d424}.home-menu button:first-child{color:#58728d;background:linear-gradient(#ffffffad,#ecfdff6b 48%,#9beaf842);border-color:#ffffffe6;box-shadow:inset 0 2px 1px #fffffff5,inset 0 -10px 20px #69d2e62e,0 10px 28px #ffffff57,0 10px 28px #48b2d433}.home-menu button:before{content:"";top:var(--y,50%);left:var(--x,50%);opacity:0;pointer-events:none;background:radial-gradient(circle closest-side,#78dcff8c 0%,#a0f0ff4d 40%,#0000 100%);border-radius:50%;width:0;height:0;transition:width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1),opacity .35s;position:absolute;transform:translate(-50%,-50%)}.home-menu button:after{content:"";top:var(--y,50%);left:var(--x,50%);opacity:0;pointer-events:none;background:0 0;border:1.5px solid #a0f0ff40;border-radius:50%;width:0;height:0;transition:width .65s cubic-bezier(.2,.8,.2,1),height .65s cubic-bezier(.2,.8,.2,1),opacity .4s;position:absolute;transform:translate(-50%,-50%)}.home-menu button:disabled{cursor:wait;opacity:.6}.home-menu button:hover{border-color:#a0f0fff2;transform:scale(1.03)translateY(-1px);box-shadow:inset 0 1px #fffffff2,inset 0 -10px 24px #91e8f76b,0 14px 32px #4bc8f059,0 0 0 1px #a0f0ff26}.home-menu button:hover:before{opacity:1;width:280px;height:280px}.home-menu button:hover:after{opacity:1;width:340px;height:340px}.home-menu button:active{transition-duration:80ms;transform:scale(.97)}.home-volume{z-index:35;pointer-events:auto;color:#f4fdff;filter:drop-shadow(0 8px 18px #ffffff4d);align-items:center;gap:12px;font-size:18px;font-weight:700;transition:opacity .4s;display:flex;position:fixed;bottom:32px;left:32px}.home-volume input{accent-color:#9beeff;width:220px}.home-contest-link{color:#405e78;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ebfcff8c;border:1px solid #dcfaffcc;border-radius:999px;padding:10px 20px;font-size:18px;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s,opacity .4s;position:fixed;bottom:32px;right:32px;box-shadow:0 8px 24px #ffffff38}.home-contest-link:hover{transform:translateY(-2px);box-shadow:0 12px 28px #ffffff4d}.home-modal{z-index:40;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#06182480;place-items:center;animation:.3s modalFadeIn;display:grid;position:fixed;inset:0}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.home-modal[hidden]{display:none}.home-modal-panel{color:#2f5368;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ebfcffc7;border:1px solid #dcfaffcc;border-radius:24px;width:min(720px,86vw);max-height:78vh;padding:32px;animation:.35s modalSlideUp;position:relative;overflow:auto;box-shadow:0 18px 46px #ffffff47}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.home-modal-close{color:#2f5368;cursor:pointer;background:0 0;border:0;font-size:28px;transition:transform .2s,color .2s;position:absolute;top:16px;right:16px}.home-modal-close:hover{color:#e05050;transform:scale(1.2)rotate(90deg)}.home-modal-panel h2{margin:0 40px 20px 0}.home-modal-body{font-size:16px;line-height:1.8}.howto-guide{text-align:left;gap:20px;display:grid}.howto-lead{color:#24465a;background:#ffffff6b;border-left:3px solid #36b9d2d9;margin:0;padding:16px 18px;font-weight:600}.howto-section{gap:10px;display:grid}.howto-section h3{color:#24526a;margin:0;font-size:18px}.howto-control-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.howto-control{background:#ffffff75;border:1px solid #74cde08c;border-radius:8px;min-height:118px;padding:14px}.howto-key{color:#20546f;background:#1f81a21f;border-radius:999px;align-items:center;min-height:28px;padding:2px 10px;font-size:14px;font-weight:700;display:inline-flex}.howto-control p,.howto-scene-list p,.howto-tip{margin:0}.howto-steps{margin:0;padding-left:1.4em}.howto-steps li{margin:4px 0;padding-left:2px}.howto-scene-list{gap:8px;display:grid}.howto-scene-list p{border-bottom:1px solid #74cde066;grid-template-columns:86px 1fr;gap:12px;padding:10px 12px;display:grid}.howto-scene-list strong{color:#1f6578}.howto-scene-list span{color:#31566a}.howto-tip{color:#24495d;background:#f6ffffa8;border-radius:8px;padding:14px 16px}@media (width<=720px){.home-modal-panel{width:min(520px,92vw);padding:24px 20px}.howto-control-grid{grid-template-columns:1fr}.howto-control{min-height:auto}.howto-scene-list p{grid-template-columns:1fr;gap:2px}}#play{z-index:10;width:auto;height:auto;padding:8px 16px;font-size:16px;display:none;position:fixed;top:16px;left:16px;transform:none}#lyric-panel{z-index:12;pointer-events:none;opacity:1;visibility:visible;background:linear-gradient(90deg,#02111c80,#02111c2e 52%,#02111c00);border-left:1px solid #9ae8ff61;width:min(460px,100vw - 32px);height:246px;padding:10px 0 10px 18px;transition:opacity .35s,visibility linear;position:fixed;top:16px;left:16px;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 13% 87%,#0000);mask-image:linear-gradient(#0000,#000 13% 87%,#0000)}#app.home-active #lyric-panel{opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}#lyric-lines{--lyric-line-height:32px;flex-direction:column;gap:0;margin:0;padding:0;list-style:none;transition:transform .42s cubic-bezier(.22,1,.36,1);display:flex;transform:translateY(0)}.lyric-line{min-height:var(--lyric-line-height);color:#def2f857;text-shadow:0 1px 10px #000810bf;white-space:nowrap;align-items:center;max-width:100%;padding-left:18px;font-family:Kosugi Maru,Yu Gothic,Meiryo,sans-serif;font-size:15px;font-weight:600;line-height:1.25;transition:color .3s,font-size .3s,opacity .3s,text-shadow .3s,transform .3s;display:flex;position:relative;overflow:hidden}.lyric-line.is-empty{opacity:0}.lyric-line.is-current{color:#f4fdff;opacity:1;text-shadow:0 0 10px #94e9ffd1,0 0 24px #2ac4ff80,0 2px 18px #000812cc;font-size:21px;transform:translate(4px)}.lyric-line.is-current:before{content:"";background:#dffaff;border-radius:999px;width:8px;height:8px;position:absolute;left:0;box-shadow:0 0 10px #7de0fff2,0 0 22px #2ac4ffa6}.lyric-line.is-near{color:#e1f6fb94}@media (width<=560px){#lyric-panel{width:calc(100vw - 24px);height:218px;padding-left:14px;top:12px;left:12px}#lyric-lines{--lyric-line-height:29px}.lyric-line{padding-left:14px;font-size:13px}.lyric-line.is-current{font-size:17px;transform:translate(3px)}}#debug-timeline{z-index:20;color:#e8fbff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:1;visibility:visible;background:#031824d1;border:1px solid #aaebff73;border-radius:12px;align-items:center;gap:12px;padding:12px 16px;font-family:monospace;font-size:14px;transition:opacity .35s,transform .35s,visibility linear;display:flex;position:fixed;bottom:20px;left:20px;right:20px;transform:translateY(0)}#debug-timeline[hidden]{display:none}#app.home-active #debug-timeline{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,transform .35s,visibility 0s linear .35s;transform:translateY(8px)}#timeline{cursor:pointer;accent-color:#52d4ee;flex:1;min-width:0}#timeline:disabled{cursor:wait;opacity:.5}#timeline-current,#timeline-duration{text-align:center;min-width:48px}#spawn-player-bubble,#spawn-bubble{z-index:10;width:auto;height:auto;padding:8px 16px;font-size:16px;position:fixed;left:16px;transform:none}#spawn-player-bubble{top:56px}#spawn-bubble{top:96px}
