@font-face{font-family:Barlow Condensed;src:url(/fonts/display.ttf)format("truetype");font-weight:700;font-display:swap}@font-face{font-family:Barlow;src:url(/fonts/body.ttf)format("truetype");font-weight:600;font-display:swap}:root{color:#fff4dd;font-synthesis:none;--ivory:#fff4dd;--muted:#a7a4bf;--cyan:#6ce9ef;--stage:#101125;--line:#ffffff18;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#080913;font-family:Barlow,Arial,sans-serif;font-weight:600}*{box-sizing:border-box}body{background:radial-gradient(at 15% 35%,#1a263a 0,#0000 45%),radial-gradient(at 85% 65%,#2a1938 0,#0000 45%),#080913;min-width:320px;min-height:100svh;margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.7}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}button svg{flex-shrink:0;width:22px;height:22px}button{border:0}a{color:#a7e9f1}p{line-height:1.5}h1,h2,p{margin:0}h1,h2{font-family:Barlow Condensed,sans-serif;font-weight:700}#app{width:100%;min-height:100svh;padding:24px 0 12px}.cabinet{background:var(--stage);width:min(100%,460px);margin:auto;position:relative;overflow:hidden}.menu{border:1px solid #ffffff13;border-radius:24px;padding:18px 26px 15px;box-shadow:0 25px 100px #0006}.menu-top,.result-top{z-index:2;justify-content:space-between;align-items:center;display:flex;position:relative}.mini-brand{color:#bcb8d4;font-size:13px}.icon-button{background:#ffffff09;border:1px solid #ffffff16;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;display:flex}.icon-button:hover{background:#ffffff15}.masthead{z-index:1;margin:8px 0 0;position:relative}.masthead h1{letter-spacing:-2.6px;transform-origin:20%;text-shadow:3px 4px #6ce9ef33;font-size:84px;line-height:.79;display:inline-block;transform:rotate(-5deg)}.logo-spark{color:#6ce9ef;font-size:56px;position:absolute;top:37px;right:-61px;transform:rotate(12deg)}.masthead p{color:#d8cff3;width:92px;font-family:Barlow Condensed;font-size:27px;line-height:1.05;position:absolute;bottom:5px;right:0;transform:rotate(-5deg)}.feature{isolation:isolate;height:164px;margin:5px -10px;position:relative;overflow:hidden}.keyboard-art{filter:drop-shadow(0 16px 11px #0006);width:330px;max-width:95%;height:auto;position:absolute;top:-17px;left:50%;transform:translate(-50%)}.orbit{z-index:-1;border:1px solid #8baaff2b;border-radius:50%;width:270px;height:90px;position:absolute;top:39px;left:40px;transform:rotate(-15deg)}.orbit-two{border-color:#b6a0ff17;transform:rotate(-15deg)scale(1.2)}.feature-caption{color:var(--muted);justify-content:space-between;align-items:center;font-size:12px;display:flex;position:absolute;bottom:2px;left:10px;right:10px}.listen{color:#e1def0;background:#ffffff09;border-radius:20px;align-items:center;gap:5px;padding:7px 10px;font-size:12px;display:flex}.listen svg{width:15px;height:15px}.song-heading{justify-content:space-between;align-items:baseline;margin:13px 0 9px;display:flex}.song-heading h2{font-size:25px}.song-heading>span{color:var(--muted);font-size:11px}.song-list{border-top:1px solid var(--line)}.song-row{text-align:left;border-bottom:1px solid var(--line);background:0 0;align-items:center;gap:12px;width:100%;min-height:70px;padding:9px 7px;transition:background .15s;display:flex}.song-row:hover{background:#ffffff05}.song-row.selected{background:linear-gradient(90deg,color-mix(in srgb,var(--song-color) 10%,transparent),transparent)}.song-mark{background:color-mix(in srgb,var(--song-color) 10%,transparent);width:34px;height:38px;color:var(--song-color);border-radius:8px;justify-content:center;align-items:center;font-size:28px;display:flex}.song-text{flex:1}.song-text strong,.song-text small,.song-meta strong,.song-meta small{display:block}.song-text strong{font-size:16px;line-height:1.25}.song-text small{color:#a7a4bf;font-size:11px;line-height:1.6}.song-meta{text-align:right;white-space:nowrap}.song-meta strong{color:var(--song-color);margin-bottom:3px;font-size:12px}.song-meta small{color:#a7a4bf;font-size:10px}.song-radio{border:1px solid #5e5b76;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;display:flex}.selected .song-radio{border-color:var(--song-color);background:var(--song-color);color:#101125}.song-radio svg{stroke-width:3px;width:13px;height:13px}.mode-control{background:#080913;border:1px solid #ffffff16;border-radius:10px;gap:4px;margin:17px 0 7px;padding:4px;display:flex}.mode-control button{width:50%;color:var(--muted);background:0 0;border-radius:6px;padding:9px;font-size:13px}.mode-control .active{color:#fff4dd;background:#38334f;box-shadow:0 2px 8px #0004}.mode-hint{color:var(--muted);text-align:center;min-height:17px;margin-bottom:13px;font-size:11px}.primary{background:var(--ivory);color:#17172a;border-radius:11px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:54px;padding:13px 16px;font-size:16px;transition:transform .12s,box-shadow .12s;display:flex;box-shadow:0 5px #b6ab99}.primary:hover{background:#fffaf0}.primary:active{transform:translateY(3px);box-shadow:0 2px #b6ab99}.play-button svg{fill:#17172a;stroke:none;width:20px}.record-line{color:#bcb8d4;justify-content:center;align-items:center;gap:5px;margin:15px 0 14px;font-size:11px;display:flex}.record-line svg{width:14px;height:14px}footer{color:#69647f;justify-content:center;align-items:center;gap:13px;font-size:10px;display:flex}.text-button{color:#aaa5c1;background:0 0;padding:4px 0;font-size:12px}.text-button:hover{color:#fff4dd}.desktop-note{text-align:center;color:#8d88a4;margin:18px 0 4px;font-size:12px}kbd{color:#d6cfe8;border:1px solid #ffffff20;border-bottom:2px solid #ffffff30;border-radius:4px;margin:0 1px;padding:2px 5px;font:600 11px Barlow;display:inline-block}.secondary{color:#e2dcee;background:#ffffff08;border:1px solid #ffffff25;border-radius:9px;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:10px 14px;font-size:14px;display:flex}.secondary:hover{background:#ffffff12}.block{margin:18px auto 0;display:block}.subtle{color:#b6b0cb;font-size:13px;line-height:1.6}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#050610d9;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.sheet{background:#1a192f;border:1px solid #fff2;border-radius:20px;width:min(100%,400px);max-height:calc(100dvh - 40px);padding:23px;overflow:auto;box-shadow:0 20px 100px #0008}.sheet-top{justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px;display:flex}.sheet h2{font-size:31px;line-height:1}.sheet p{color:#c9c2db;margin-bottom:17px;font-size:13px}.sheet .primary{margin-top:22px}.sheet .secondary{width:100%;margin-top:15px}.sheet-top .icon-button{width:34px;height:34px}.sheet-top svg{width:18px;height:18px}.tutorial-lanes{background:#0d0e21;border-radius:10px;max-width:245px;height:145px;margin:2px auto 20px;display:flex;position:relative;overflow:hidden}.tutorial-lanes i{background:linear-gradient(#0000,#6ce9ef0a);border-right:1px solid #ffffff0f;width:25%}.tutorial-note{background:#8baaff;border-radius:5px;width:19%;height:22px;position:absolute;bottom:32px;left:28%;box-shadow:0 0 16px #8baaff55}.tutorial-line{background:var(--ivory);height:2px;position:absolute;bottom:31px;left:0;right:0}.tutorial-lanes b{text-align:center;color:#c5bdd7;width:100%;font-size:12px;position:absolute;bottom:7px}.instructions{margin:0 0 16px;padding-left:23px;font-size:14px;line-height:1.6}.instructions li{margin:9px 0;padding-left:3px}.setting-label{justify-content:space-between;margin-bottom:12px;font-size:14px;display:flex}.setting-label output{color:#6ce9ef}.sheet input[type=range]{accent-color:#6ce9ef;width:100%;min-height:28px;margin:2px 0 25px}.sheet input[type=checkbox]{accent-color:#6ce9ef;width:22px;height:22px}.switch-row{justify-content:space-between;align-items:center;margin:20px 0;font-size:14px;display:flex}.tapped{color:#101125;background:#6ce9ef!important}.toast{z-index:40;left:50%;bottom:max(25px,env(safe-area-inset-bottom));color:#101125;background:#fff4dd;border-radius:10px;width:max-content;max-width:calc(100% - 36px);padding:13px 19px;font-size:13px;position:fixed;transform:translate(-50%);box-shadow:0 10px 40px #0008}.spinner{border:2px solid #17172a44;border-top-color:#17172a;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.in-game #app{min-height:100dvh;padding:0}.game{touch-action:none;-webkit-user-select:none;user-select:none;width:min(100%,480px);height:100dvh;min-height:350px;max-height:1000px}.game canvas{width:100%;height:100%;display:block}.game-header{top:calc(14px + env(safe-area-inset-top));justify-content:space-between;align-items:center;gap:13px;display:flex;position:absolute;left:16px;right:16px}.game-header>div{flex:1}.game-header strong{font-size:18px;display:block}.game-header span{color:#a9a3be;margin-top:3px;font-size:11px;display:block}.game-header .icon-button{background:#17172caa;width:38px;height:38px}.game-stats{top:calc(80px + env(safe-area-inset-top));pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;left:27px;right:27px}.game-stats>div{min-width:85px}.game-stats small{color:#aaa5c1;font-size:10px;display:block}.game-stats strong{font-variant-numeric:tabular-nums;font-family:Barlow Condensed;font-size:35px;line-height:1.1;display:block}.game-stats .combo-stat{text-align:center;min-width:50px}.combo-stat strong{color:#fff4dd;font-size:42px}.combo-stat small{font-size:10px}.energy-stat{text-align:right}.energy-track{background:#ffffff15;border-radius:3px;width:82px;height:5px;margin:7px 0 5px auto;overflow:hidden}.energy-track i{background:#6ce9ef;border-radius:3px;width:100%;height:100%;transition:width .15s;display:block}.energy-track i.low{background:#ff9199}#progress-label{color:#aaa5c1;font-variant-numeric:tabular-nums;font-size:10px}.track-progress{top:calc(143px + env(safe-area-inset-top));background:#ffffff09;height:2px;position:absolute;left:18px;right:18px}.track-progress i{background:linear-gradient(90deg,#6ce9ef,#b6a0ff);width:0;height:100%;display:block}.touch-keys{grid-template-columns:repeat(4,1fr);gap:0;display:grid;position:absolute;inset:79% 18px 24px}.touch-keys button{touch-action:none;outline-offset:-4px;background:0 0;border-radius:5px}.landscape-hint{display:none}.result{text-align:center;border:1px solid #ffffff17;border-radius:24px;min-height:750px;padding:22px 28px 25px}.result-song{color:#bbb4cf;margin:22px 0 5px;font-size:13px}.result-grade{color:#fff4dd;text-shadow:5px 5px #6ce9ef44;font-family:Barlow Condensed;font-size:148px;line-height:1.1;display:inline-block;position:relative;transform:rotate(-7deg)}.result-grade>span{color:#6ce9ef;font-size:42px;position:absolute;top:12px;right:-37px}.result-grade.retry{font-size:135px}.result h1{margin-top:0;font-size:38px;line-height:1.05}.result-badge{color:#6ce9ef;margin:12px 0 20px;font-size:12px}.result-score{font-variant-numeric:tabular-nums;font-family:Barlow Condensed;font-size:67px;line-height:1}.result-score>span{color:#a7a1bd;margin:6px 0 22px;font:600 12px Barlow;display:block}.result-metrics{justify-content:center;gap:0;margin-bottom:22px;display:flex}.result-metrics>div{width:50%}.result-metrics>div+div{border-left:1px solid var(--line)}.result-metrics strong{font-family:Barlow Condensed;font-size:35px;line-height:1;display:block}.result-metrics strong small{font-size:19px}.result-metrics span{color:#aaa5c1;margin-top:7px;font-size:11px;display:block}.judgement-counts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;grid-template-columns:1fr 1fr;gap:10px 20px;margin-bottom:25px;padding:13px 0;font-size:12px;display:grid}.judgement-counts>span{color:#bcb6d1;align-items:center;gap:7px;display:flex}.judgement-counts b{color:#fff4dd;margin-left:auto}.dot{border-radius:50%;width:6px;height:6px;display:inline-block}.dot.perfect{background:#6ce9ef}.dot.great{background:#b6a0ff}.dot.good{background:#ffc86a}.dot.miss{background:#ff9199}.result-actions{gap:10px;margin:15px 0;display:flex}.result-actions .secondary:first-child{flex:1}.share-button{font-size:12px}.share-button svg{width:17px;height:17px}.result>.subtle{margin-top:16px;font-size:11px}@media (width>=700px){.game{border-left:1px solid #ffffff15;border-right:1px solid #ffffff15;box-shadow:0 0 120px #0008}.in-game{overflow:hidden}.in-game #app{justify-content:center;align-items:center;height:100dvh;display:flex}}@media (width<=520px){#app{padding:0}.menu,.result{min-height:100svh;box-shadow:none;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));border:0;border-radius:0}.desktop-note{display:none}.menu,.cabinet.result{max-width:none}.modal-backdrop{padding:14px}.sheet{max-height:calc(100dvh - 28px)}.game{max-height:none}.touch-keys{bottom:max(24px,env(safe-area-inset-bottom))}}@media (width<=370px){.menu{padding-left:19px;padding-right:19px}.masthead h1{font-size:75px}.masthead p{font-size:24px;right:0}.song-text strong{font-size:14px}.song-row{gap:9px}.song-meta small{font-size:9px}.song-meta strong{font-size:11px}.song-heading>span{font-size:10px}.feature{height:145px}.keyboard-art{width:300px}.song-row{min-height:66px}.mode-control{margin-top:14px}.result{padding-left:22px;padding-right:22px}.result h1{font-size:33px}}@media (height<=780px) and (width<=520px){.masthead h1{font-size:70px}.masthead .logo-spark{font-size:46px}.masthead p{font-size:25px}.masthead{margin-top:5px}.feature{height:132px}.keyboard-art{width:290px;top:-20px}.song-heading{margin-top:9px}.song-row{min-height:62px}.song-text small{font-size:10px}.mode-control{margin-top:13px}.record-line{margin:13px 0 9px}.menu-top .icon-button{width:36px;height:36px}.result-grade{font-size:120px}.result-song{margin-top:14px}.result-score{font-size:58px}.result-badge{margin-bottom:15px}.result{min-height:100svh}.result h1{font-size:34px}}@media (orientation:landscape) and (height<=550px){.game{width:min(100%,700px)}.game-header{top:8px;left:20px;right:20px}.game-header .icon-button{width:30px;height:30px}.game-header strong{font-size:14px}.game-header span{font-size:9px}.game-stats{top:50px}.game-stats strong{font-size:26px}.game-stats .combo-stat strong{font-size:30px}.track-progress{top:104px}.landscape-hint{color:#aaa5c1;pointer-events:none;font-size:9px;display:block;position:absolute;top:112px;left:50%;transform:translate(-50%)}.result{min-height:0}.modal-backdrop{align-items:center}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}.android-vote{border-top:1px solid var(--line);text-align:center;margin-top:22px;padding-top:18px}.android-vote p{color:#c9c2db;font-size:13px}.android-vote>div{gap:9px;margin-top:12px;display:flex}.android-vote button{flex:1;min-height:42px;font-size:12px}.android-vote #vote-yes{color:#6ce9ef;border-color:#6ce9ef66}.android-vote>span{color:#ffb0b4;margin-top:8px;font-size:12px;display:block}
