:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f7fbff;font-synthesis:none;text-rendering:optimizelegibility;--bg:#050609;--panel:#11151fc2;--panel-strong:#181d2aeb;--line:#ffffff1c;--muted:#8f9bad;--cyan:#00e5ff;--pink:#ff2ead;--green:#13f2a7;--warning:#ffd34d;background:#050609;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(120deg, #00e5ff14, transparent 35%), linear-gradient(240deg, #ff2ead14, transparent 42%), var(--bg);min-width:320px;min-height:100vh;margin:0}button,select,textarea{font:inherit}button{color:inherit}.app-shell{grid-template-columns:88px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{border-right:1px solid var(--line);background:#050609e6;flex-direction:column;align-items:center;gap:30px;height:100vh;padding:22px 14px;display:flex;position:sticky;top:0}.brand-mark{width:52px;height:52px;color:var(--cyan);background:linear-gradient(135deg,#00e5ff29,#ff2ead1f);border:1px solid #00e5ff4d;border-radius:8px;place-items:center;display:grid}.sidebar nav{gap:12px;width:100%;display:grid}.nav-button{height:58px;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;place-items:center;gap:2px;display:grid}.nav-button span{font-size:10px;font-weight:700}.nav-button.active,.nav-button:hover{color:#fff;background:#00e5ff1a;border-color:#00e5ff47}.side-meter{border:1px solid var(--line);width:60px;color:var(--green);border-radius:8px;justify-items:center;gap:5px;margin-top:auto;padding:10px 4px;font-size:11px;font-weight:800;display:grid}.workspace{min-width:0;padding:24px}.workspace-play{padding:16px}.topbar{justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;display:flex}h1,h2,h3,p{margin:0}.topbar h1{letter-spacing:0;font-size:30px;line-height:1}.topbar p{color:var(--muted);margin-top:8px;font-size:14px}.top-actions{gap:10px;display:flex}.status-chip,.plan-chip{border:1px solid var(--line);background:#ffffff0a;border-radius:8px;align-items:center;gap:8px;min-height:38px;padding:0 14px;font-size:13px;font-weight:800;text-decoration:none;display:inline-flex}.status-chip{color:var(--cyan)}.status-chip.gate{color:var(--green)}.page-view,.stage-panel,.split-view{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:8px}.page-view{min-height:calc(100vh - 126px);padding:18px}.page-heading{justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:16px;display:flex}.page-heading h2{font-size:26px;line-height:1.1}.page-heading p{color:var(--muted);margin-top:8px;font-size:14px}.split-view{gap:14px;width:min(760px,100%);margin:0 auto;display:grid}.track-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.section-title{color:#dcefff;align-items:center;gap:8px;margin-bottom:14px;font-size:13px;font-weight:900;display:flex}.track-card{border:1px solid var(--line);text-align:left;cursor:pointer;background:#ffffff09;border-radius:8px;grid-template-columns:58px minmax(0,1fr) 18px;align-items:center;gap:12px;width:100%;min-height:112px;margin-bottom:10px;padding:10px;display:grid}.track-card.selected{background:#00e5ff17;border-color:#00e5ff8c}.cover{border:1px solid #ffffff24;border-radius:6px;width:58px;height:58px;box-shadow:0 12px 34px #0000003d}.cover.large{width:72px;height:72px}.track-meta{gap:4px;min-width:0;display:grid}.track-meta strong{font-size:14px}.track-meta small,.track-meta em{color:var(--muted);font-size:11px;font-style:normal}.type-badge{color:#effcff;background:#ffffff0e;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:5px;width:max-content;max-width:100%;min-height:24px;padding:0 8px;font-size:11px;font-weight:900;display:inline-flex}.type-badge.vocal-style{background:#ff2ead1f;border-color:#ff2ead52}.type-badge.instrumental{background:#00e5ff17;border-color:#00e5ff42}.momentum-panel{border:1px solid var(--line);background:#ffffff09;border-radius:8px;margin-top:24px;padding:14px}.chart-row{grid-template-columns:20px minmax(0,1fr);align-items:center;gap:8px;margin-bottom:13px;font-size:12px;display:grid}.chart-row div{background:#ffffff12;border-radius:999px;grid-column:1/-1;height:5px;overflow:hidden}.chart-row i{border-radius:inherit;height:100%;display:block}.stage-panel{background:linear-gradient(180deg, #ffffff0e, transparent 42%), var(--panel);flex-direction:column;gap:14px;padding:18px;display:flex}.play-screen{height:calc(100vh - 32px);min-height:640px;display:grid;overflow:hidden}.play-screen .stage-panel{height:100%;min-height:0}.stage-header{justify-content:space-between;align-items:center;gap:14px;display:flex}.stage-actions{align-items:center;gap:10px;display:flex}.current-track{align-items:center;gap:14px;min-width:0;display:flex}.current-track h2{font-size:26px;line-height:1.05}.current-track p{color:var(--muted);margin-top:7px;font-size:13px}.primary-button{background:linear-gradient(135deg, var(--cyan), var(--pink));color:#020307;cursor:pointer;border:0;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:0 18px;font-weight:950;display:inline-flex;box-shadow:0 14px 36px #00e5ff29}.primary-button.small{min-height:36px;padding:0 12px;font-size:12px}.score-strip{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.play-settings{grid-template-columns:minmax(220px,.9fr) minmax(240px,1.1fr);align-items:center;gap:10px;display:grid}.mode-toggle{border:1px solid var(--line);background:#ffffff09;border-radius:8px;grid-template-columns:repeat(3,1fr);gap:6px;min-height:38px;padding:4px;display:grid}.mode-toggle button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;font-size:12px;font-weight:900}.mode-toggle button.selected{color:#061018;background:linear-gradient(135deg, var(--cyan), var(--pink))}.offset-control{border:1px solid var(--line);background:#ffffff09;border-radius:8px;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:10px;min-height:46px;padding:0 12px;display:grid}.offset-control span{color:var(--muted);font-size:12px;font-weight:900}.offset-control input{width:100%;accent-color:var(--cyan)}.metric{border:1px solid var(--line);background:#ffffff09;border-radius:8px;padding:10px 12px}.metric span{color:var(--muted);font-size:11px;font-weight:800;display:block}.metric strong{margin-top:5px;font-size:18px;display:block}.canvas-board{background:linear-gradient(#03050a2e,#03050ad1),url(/assets/stage-backdrop.png) 50%/cover,linear-gradient(90deg,#ffffff08 1px,#0000 1px),radial-gradient(circle at 50% 20%,#00e5ff2e,#0000 42%),linear-gradient(#ffffff0d,#00000038);border:1px solid #ffffff1f;border-radius:8px;flex:1 1 0;min-height:0;position:relative;overflow:hidden}.canvas-board.focus{background:linear-gradient(#03050a7a,#03050ae6),url(/assets/stage-backdrop.png) 50%/cover,linear-gradient(#ffffff0d,#00000038)}.canvas-board.focus:before,.canvas-board.focus:after{opacity:.34}.canvas-board.standard:before,.canvas-board.standard:after{opacity:.72}.canvas-board.live{background:linear-gradient(#03050a0a,#03050aa8),url(/assets/stage-backdrop.png) 50%/cover,radial-gradient(circle at 50% 20%,#00e5ff38,#0000 42%),linear-gradient(#ffffff0d,#00000038)}.canvas-board:before{content:"";pointer-events:none;filter:blur(.2px);opacity:.9;background:linear-gradient(100deg,#0000 9%,#00e5ff7a 10%,#0000 11%),linear-gradient(85deg,#0000 34%,#00e5ff3d 35%,#0000 36%),linear-gradient(95deg,#0000 63%,#ff2ead47 64%,#0000 65%),linear-gradient(82deg,#0000 88%,#ff2ead7a 89%,#0000 90%);position:absolute;inset:12px 18px 70px}.canvas-board:after{content:"";pointer-events:none;background:linear-gradient(#0000,#00e5ff0f 52%,#ff2ead14);height:110px;position:absolute;bottom:70px;left:0;right:0}.rhythm-canvas{z-index:1;width:100%;height:100%;min-height:0;display:block;position:relative}.judge-pop{pointer-events:none;color:#fff;text-shadow:0 0 28px #00e5ffb8;font-size:28px;font-weight:950;animation:.54s ease-out forwards judge-pop;position:absolute;top:28%;left:50%;transform:translate(-50%)}.judge-pop.good{color:var(--warning)}.judge-pop.miss{color:#ff5656;text-shadow:0 0 24px #ff5656ad}@keyframes judge-pop{0%{opacity:0;transform:translate(-50%,20px)scale(.84)}18%{opacity:1;transform:translate(-50%)scale(1.08)}to{opacity:0;transform:translate(-50%,-44px)scale(1)}}.tap-pad{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.tap-button{background:linear-gradient(180deg, #ffffff14, #ffffff06), linear-gradient(135deg, color-mix(in srgb, var(--track-a) 35%, #06070c), color-mix(in srgb, var(--track-b) 32%, #06070c));color:#fff;cursor:pointer;touch-action:manipulation;border:1px solid #ffffff29;border-radius:8px;min-height:58px;box-shadow:inset 0 1px #ffffff29,0 8px #00000057}.tap-button:active{transform:translateY(5px);box-shadow:inset 0 1px #ffffff1f,0 3px #00000057}.tap-button span{background:#00000057;border-radius:7px;place-items:center;width:42px;height:36px;font-size:15px;font-weight:950;display:inline-grid}.calibration-panel{flex-wrap:wrap;align-items:center;gap:10px;min-height:38px;display:flex}.max-combo{color:var(--muted);margin-left:auto;font-size:13px;font-weight:800}.result-dock{align-items:center;gap:10px;display:flex}.dock{border:1px solid var(--line);cursor:pointer;background:#ffffff0a;border-radius:8px;align-items:center;gap:8px;min-height:38px;padding:0 12px;font-size:13px;font-weight:850;display:inline-flex}.dock.active,.dock:hover{color:#fff;border-color:#ff2ead80}.result-dock span{color:var(--muted);margin-left:auto;font-size:13px;font-weight:800}.result-page{place-items:center;min-height:calc(100vh - 126px);padding:18px;display:grid}.result-card{background:linear-gradient(135deg,#00e5ff24,#ff2ead1a),#0a0d16f5;border:1px solid #00e5ff47;border-radius:8px;width:min(520px,100%);padding:22px;animation:.36s ease-out both result-rise;position:relative;overflow:hidden;box-shadow:0 22px 70px #00000075}.result-card:before{content:"";pointer-events:none;background:radial-gradient(circle,#ffd34d33,#0000 62%);height:220px;position:absolute;inset:-40% -30% auto}.result-card>span{color:var(--green);font-size:12px;font-weight:950;position:relative}.result-rank{width:62px;height:62px;color:var(--warning);background:#ffd34d17;border:1px solid #ffd34d5c;border-radius:8px;place-items:center;font-size:30px;font-weight:950;display:grid;position:absolute;top:16px;right:18px;box-shadow:0 0 32px #ffd34d21}.result-card h3{margin-top:6px;font-size:46px;line-height:1;position:relative}.result-card h2{margin-top:12px;font-size:22px;position:relative}.result-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0;display:grid;position:relative}.result-comment{color:#dcefff;margin:-4px 0 16px;font-size:13px;font-weight:900;position:relative}.result-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}@keyframes result-rise{0%{opacity:0;transform:translateY(18px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.feature-block,.locked-block,.production-card,.ranking-card{border:1px solid var(--line);background:#ffffff0a;border-radius:8px;padding:14px}.feature-block h3,.production-card h3{font-size:20px}.feature-block p,.locked-block p,.production-card p{color:var(--muted);margin-top:8px;font-size:13px;line-height:1.55}.vote-list{gap:10px;display:grid}.vote-button{border:1px solid var(--line);text-align:left;cursor:pointer;background:#ffffff09;border-radius:8px;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;padding:0 13px;display:grid}.vote-button:hover{border-color:#00e5ff75}.vote-button strong{color:var(--cyan)}.plan-selector{gap:8px;display:grid}.plan-selector.compact{grid-template-columns:repeat(2,1fr);margin-bottom:12px}.plan-selector button{text-align:left;border:1px solid var(--line);cursor:pointer;background:#ffffff09;border-radius:8px;min-height:50px;padding:9px 10px}.plan-selector button.selected{background:#13f2a71a;border-color:#13f2a78c}.plan-selector strong,.plan-selector span{display:block}.plan-selector strong{font-size:13px}.plan-selector span{color:var(--muted);margin-top:4px;font-size:11px}.wizard-options{gap:10px;display:grid}.wizard-options label,.idea-box{color:var(--muted);gap:7px;font-size:12px;font-weight:850;display:grid}select,textarea{border:1px solid var(--line);color:#f7fbff;background:#020307b8;border-radius:8px;outline:none;width:100%}select{height:38px;padding:0 10px}textarea{resize:none;min-height:76px;padding:10px;line-height:1.5}.idea-box{margin-top:12px}.production-card{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:12px;display:grid}.production-card span{color:var(--green);font-size:11px;font-weight:950}.locked-block{justify-items:start;gap:8px;display:grid}.locked-block.slim{grid-template-columns:18px minmax(0,1fr);align-items:start;margin-top:10px;padding:10px 12px}.locked-block.slim p{margin:0}.locked-block svg{color:var(--green)}.ticket-note{color:#cffff0;background:#13f2a713;border:1px solid #13f2a738;border-radius:8px;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px;min-height:42px;margin-bottom:12px;padding:9px 11px;font-size:12px;font-weight:850;line-height:1.35;display:grid}.ticket-note svg{color:var(--green)}.ranking-card{grid-template-columns:34px minmax(0,1fr) 20px;align-items:center;gap:10px;margin-bottom:10px;display:grid}.ranking-card>span{color:var(--cyan);font-weight:950}.ranking-card strong,.ranking-card small{display:block}.ranking-card small{color:var(--muted);margin-top:4px;font-size:11px}@media (width<=1100px){.app-shell{grid-template-columns:72px minmax(0,1fr)}.track-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=720px){.app-shell{flex-direction:column;display:flex}.sidebar{z-index:10;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;height:68px;padding:8px 12px;position:static}.brand-mark,.side-meter{display:none}.sidebar nav{grid-template-columns:repeat(5,1fr);gap:4px}.nav-button{height:52px}.nav-button span{font-size:9px}.workspace{padding:16px}.workspace-play{padding:8px}.topbar,.stage-header,.result-dock{flex-direction:column;align-items:stretch}.top-actions,.score-strip,.play-settings{grid-template-columns:repeat(2,1fr);display:grid}.offset-control{grid-template-columns:1fr;padding:8px 12px}.topbar h1{font-size:25px}.track-grid{grid-template-columns:1fr}.page-view{min-height:calc(100vh - 116px);padding:14px}.play-screen,.play-screen .stage-panel{height:auto;min-height:calc(100vh - 84px);overflow:visible}.stage-panel{gap:10px;padding:12px}.stage-actions{grid-template-columns:1fr 1fr;display:grid}.canvas-board,.rhythm-canvas{min-height:300px}.current-track h2{font-size:22px}.result-dock span,.max-combo{margin-left:0}.result-actions{grid-template-columns:1fr;display:grid}}