*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#2a2a2a;color:#f4efe6}:root{--board-w: 1920;--board-h: 3120}body{font-family:Segoe UI,helvetica,arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}#app{position:relative;display:flex;flex-direction:column;width:100%;height:100%}.stage{position:relative;container-type:size;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden;cursor:default}.stage.is-panning,.stage.is-panning .board-frame rect{cursor:grabbing}.board-frame{position:relative;transform-origin:center center;aspect-ratio:var(--board-w) / var(--board-h);width:min(100cqw,calc(100cqh * var(--board-w) / var(--board-h)));height:min(100cqh,calc(100cqw * var(--board-h) / var(--board-w)))}.board-frame svg{display:block;width:100%;height:100%;overflow:visible}.board-hold{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .18s ease}.board-hold.is-on{opacity:1}.board-hold svg{display:block;width:100%;height:100%;overflow:visible}.board-frame .hit-target{cursor:pointer}.kaszebe-hover{opacity:0;transition:opacity .14s ease}@media (hover: hover) and (pointer: fine){.kaszebe-target:hover .kaszebe-hover{opacity:1}}.grade-anchor{position:absolute;z-index:4;width:auto;height:auto;pointer-events:none;transform:translate(var(--align, -50%),-100%) translate(var(--lift-x, 0px),var(--lift-y, -14px))}.grade-float{display:block;padding:3px 8px 4px;border-radius:999px;background:#1a1a1aeb;color:#f7f1e6;font:700 11px/1 Georgia,Palatino Linotype,serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 16px #00000047;transform-origin:var(--origin, center bottom);rotate:var(--tilt, 0deg);animation:grade-rise .95s linear forwards}@keyframes grade-rise{0%{opacity:0;translate:0 8px}14%{opacity:1;translate:calc(var(--slide-x) * .14) calc(var(--slide-y) * .14)}55%{opacity:1;translate:calc(var(--slide-x) * .55) calc(var(--slide-y) * .55)}to{opacity:0;translate:var(--slide-x) var(--slide-y)}}.grade-float.is-perfect{background:#2f7bff}.grade-float.is-good{background:#1fa84a}.grade-float.is-ok{background:#ffd000;color:#1a1a1a}.grade-float.is-early,.grade-float.is-late{background:#8d2a16f0}.grade-float.is-late{rotate:0deg;translate:0 0;animation:grade-still 1.35s ease forwards}@keyframes grade-still{0%{opacity:0}12%{opacity:1}68%{opacity:1}to{opacity:0}}.countdown{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none}.countdown span{font:700 168px/1 Georgia,Palatino Linotype,serif;color:#f7f1e6;text-shadow:0 10px 32px rgba(0,0,0,.55)}.player{flex:none;display:flex;flex-direction:row;align-items:stretch;gap:8px;width:100%;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:#1c1c1c;border-top:1px solid rgba(255,255,255,.08)}.player-actions{flex:none;display:flex;flex-direction:column;align-self:center;background:#f7f1e6;border:3px solid #111;border-radius:16px;overflow:hidden;box-shadow:0 10px 28px #00000047}.lyrics{--lyric-size: 16px;flex:1 1 0;width:auto;min-width:0;padding:8px 12px 7px;border-radius:14px;background:#f7f1e6f0;color:#1a1a1a;text-align:center;box-shadow:0 10px 28px #00000047}.lyrics__count{margin:0 0 4px;min-height:7.8px;font:600 7.8px/1 Georgia,Palatino Linotype,serif;letter-spacing:.08em}.lyrics__block{container-type:inline-size;display:flex;flex-direction:column;justify-content:center;gap:2px;height:calc(2 * var(--lyric-size) * 1.25 + 2px);overflow:hidden}.lyrics__line{margin:0;white-space:nowrap;font:600 min(var(--lyric-size),calc(100cqi / (var(--chars, 24) * .55))) / 1.25 Georgia,"Palatino Linotype",serif}.lyrics__line.is-waiting{color:#1a1a1a61}.lyrics__line.is-audience{color:#ff4b00}.lyrics__repeat{margin-left:.35em;font-size:.62em;letter-spacing:.08em;vertical-align:.35em}.lyrics__idle,.lyrics__error{margin:4px 0 2px;font:500 15px/1.3 Georgia,Palatino Linotype,serif}.lyrics__block .lyrics__idle{margin:0}.lyrics__error{color:#8d2a16}.lyrics__meter{height:4px;margin-top:6px;border-radius:999px;background:#0000001f;overflow:hidden}.lyrics__meter span{display:block;height:100%;background:#1a1a1a}.canvas-tools{position:absolute;z-index:6;top:calc(12px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}.canvas-tools>*{pointer-events:auto}.canvas-tools .zoom-controls,.canvas-tools .volume__button,.canvas-tools .volume__panel{box-shadow:0 8px 18px #00000047}.zoom-controls,.transport{display:flex;background:#f7f1e6;border:3px solid #111;border-radius:16px;overflow:hidden}.zoom-controls button,.transport button{width:48px;height:48px;padding:10px;border:0;border-right:3px solid #111;background:transparent;color:#111;cursor:pointer}.transport{flex:none;border:0;border-radius:0}.transport button{width:52px;height:52px;padding:12px}.zoom-controls{flex-direction:column;width:48px}.zoom-controls button{width:100%;border-right:0;border-bottom:3px solid #111}.zoom-controls button:last-child,.transport button:last-child{border-right:0}.zoom-controls button:last-child{border-bottom:0}.zoom-controls button:hover,.transport button:hover{background:#0000000f}.transport button.is-active{background:#111;color:#f7f1e6}.zoom-controls svg,.transport svg{display:block;width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}.transport svg{fill:currentColor;stroke:none}.zoom-controls svg{fill:none;stroke-width:5}.shuffle{height:40px;padding:0 12px;border:0;border-bottom:3px solid #111;border-radius:0;background:transparent;color:#111;font:700 13px/1 Georgia,Palatino Linotype,serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.shuffle:hover{background:#0000000f}.volume__button:hover,.tool-button:hover{background-color:#e8e2d8}.shuffle:disabled{color:#11111159;cursor:default}.shuffle:disabled:hover{background:transparent}.tool-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:9px;border:3px solid #111;border-radius:16px;background:#f7f1e6;color:#111;cursor:pointer;box-shadow:0 8px 18px #00000047}.tool-button[aria-expanded=true],.tool-button[aria-pressed=true]{background:#111;color:#f7f1e6}.tool-button[aria-expanded=true]:hover,.tool-button[aria-pressed=true]:hover,.volume__button[aria-expanded=true]:hover{background-color:#000}.tool-button svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.tool-button svg.is-solid,.tool-button svg.is-solid path{fill:currentColor;stroke:none}.time-toggle img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.time-toggle[aria-pressed=true] img{mix-blend-mode:normal;filter:invert(1)}.menu-pop{position:relative}.menu-stack{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.settings-menu{position:absolute;right:calc(100% + 10px);top:0}.settings-menu{width:232px;padding:12px;background:#f7f1e6;color:#111;border:3px solid #111;border-radius:16px;box-shadow:0 12px 28px #00000052}.settings-menu__title{margin:2px 8px 8px;font:700 13px/1 Georgia,Palatino Linotype,serif;letter-spacing:.08em;text-transform:uppercase}.mode-option{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:#111;text-align:left;cursor:pointer;font:700 16px/1.2 Georgia,Palatino Linotype,serif}.mode-option small{font:500 13px/1.3 Georgia,Palatino Linotype,serif;opacity:.7}.mode-option.is-selected{background:#111;color:#f7f1e6}.mode-option.is-selected small{opacity:.8}.dev-timing{cursor:pointer}.dev-timing input{margin:3px 8px 0 0}.volume{position:relative}.volume__button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:10px;border:3px solid #111;border-radius:16px;background:#f7f1e6;color:#111;cursor:pointer}.volume__button[aria-expanded=true]{background:#111;color:#f7f1e6}.volume__button svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}.volume__button svg .is-fill{fill:currentColor;stroke:none}.volume__panel{position:absolute;z-index:1;right:calc(100% + 10px);top:50%;transform:translateY(-50%);display:flex;align-items:center;height:48px;padding:0 14px;background:#f7f1e6;border:3px solid #111;border-radius:16px;animation:volume-pop .16s ease}.volume__panel input{width:128px;margin:0;accent-color:#111;cursor:pointer}@keyframes volume-pop{0%{opacity:0;translate:8px 0}}.note-hit{cursor:pointer}.picker{flex:1;min-height:0;display:flex;gap:28px;padding:28px 32px 24px}.picker-card{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit}.picker-card h1{margin:0;text-align:center;font:700 28px/1.1 Georgia,Palatino Linotype,serif}.picker-preview{flex:1;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;border:3px solid transparent;border-radius:12px}.picker-card:hover .picker-preview,.picker-card:focus-visible .picker-preview{border-color:#ff4b00}.swap-option{margin-top:4px}.swap-option span{display:flex;align-items:center;gap:8px}.swap-option img{width:22px;height:22px;object-fit:contain;mix-blend-mode:multiply}.swap-option:hover{background:#0000000f}@media (max-width: 959px){.picker{flex-direction:column;gap:16px;padding:16px}.picker-card h1{font-size:22px}}