:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#dfe0ff;background:#0d112c;font-family:Plus Jakarta Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(circle at 50% 10%,#5de6ff2e,#0000 34rem),radial-gradient(circle at 90% 80%,#eec2001f,#0000 28rem),#0d112c;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.character-singerMan{--trace-color:#5de6ff;--trace-soft:#5de6ff52;--target-color:#eec200;--target-soft:#eec2003d;--accent-color:#5de6ff}.character-singerWoman{--trace-color:#ff78f2;--trace-soft:#ff78f257;--target-color:#bff4ff;--target-soft:#bff4ff3d;--accent-color:#ff78f2}.character-roseQueen{--trace-color:#ff6f91;--trace-soft:#ff6f915c;--target-color:#ffd28a;--target-soft:#ffd28a42;--accent-color:#ff8da8}.character-tealBoy{--trace-color:#20e8ff;--trace-soft:#20e8ff57;--target-color:#7df6d8;--target-soft:#7df6d840;--accent-color:#20e8ff}.character-jadeElder{--trace-color:#58e0bd;--trace-soft:#58e0bd52;--target-color:#f4d37c;--target-soft:#f4d37c47;--accent-color:#58e0bd}.character-aquaPrince{--trace-color:#7de7ff;--trace-soft:#7de7ff57;--target-color:#b9a2ff;--target-soft:#b9a2ff40;--accent-color:#9ef2ff}.topbar{z-index:20;background:linear-gradient(#0d112ce0,#0d112c00);justify-content:space-between;align-items:center;height:72px;padding:12px 24px 12px 96px;display:flex;position:fixed;inset:0 0 auto}.brand{color:#5de6ff;text-shadow:0 0 14px #5de6ffb3;background:0 0;border:0;font:800 28px/1.1 Syne,sans-serif}.brand span{color:#d3bbff}.top-actions{gap:12px;display:flex}.icon-button{color:#5de6ff;background:#ffffff0a;border:1px solid #5de6ff59;border-radius:8px;width:42px;height:42px}.sidenav{z-index:19;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#1a1d396b;border-right:1px solid #5de6ff38;flex-direction:column;align-items:center;gap:20px;width:80px;padding-top:112px;display:flex;position:fixed;inset:0 auto 0 0}.sidenav button{color:#ccc3d7;background:0 0;border:0;border-radius:8px;place-items:center;gap:2px;width:56px;min-height:58px;display:grid}.sidenav button.active{color:#5de6ff;background:#00cbe62e}.sidenav small{letter-spacing:0;font-size:10px}.main-stage{min-height:100vh;padding:110px 28px 40px 108px}.hero-grid{grid-template-columns:minmax(0,1fr) minmax(280px,520px);align-items:center;gap:40px;max-width:1180px;min-height:calc(100vh - 160px);margin:0 auto;display:grid}.hero-copy h1,.page-panel h1{letter-spacing:0;margin:0 0 18px;font:800 56px/1.05 Syne,sans-serif}.hero-copy p{color:#ccc3d7;max-width:620px;font-size:18px;line-height:1.65}.eyebrow{color:#5de6ff;letter-spacing:.1em;margin:0 0 12px;font:700 12px/1 Space Grotesk,sans-serif}.button-row{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.button-row.center{justify-content:center;margin-top:18px}.button-row.vertical{flex-direction:column;align-items:stretch}.primary,.secondary,.ghost{color:#001f25;border:1px solid #0000;border-radius:8px;padding:13px 20px;font-weight:800}.primary{background:linear-gradient(90deg,#5de6ff,#d3bbff)}.secondary{color:#231b00;background:#eec200}.ghost{color:#dfe0ff;background:#ffffff0d;border-color:#5de6ff52}.compact-button{padding:8px 12px}.wide{width:min(420px,100%);margin:26px auto 0;display:block}button:disabled{opacity:.55;cursor:not-allowed}.glass-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0e;border:1px solid #5de6ff4d;border-radius:8px;box-shadow:0 18px 50px #00000038}.page-panel{max-width:1180px;margin:0 auto}.page-panel.compact{text-align:center;max-width:760px}.panel-heading{justify-content:space-between;align-items:start;gap:18px;margin-bottom:22px;display:flex}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;display:grid}.card-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.action-card,.selectable{text-align:left;min-height:220px;padding:24px}.action-card h2,.selectable h2,.level-card h2{margin:0 0 12px;font-size:24px}.action-card p,.selectable p,.level-card p{color:#ccc3d7;line-height:1.55}.selectable.selected{background:#eec2001f;border-color:#eec200}.level-card{background:#ffffff0d;border:1px solid #5de6ff4d;border-radius:8px;justify-content:space-between;align-items:center;gap:24px;margin-bottom:16px;padding:28px;display:flex}.custom-level-card{background:#eec20014;border-color:#eec200b8}.level-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.character-figure{aspect-ratio:1;place-items:center;width:min(42vw,420px);display:grid;position:relative}.character-figure img{object-fit:contain;filter:drop-shadow(0 0 28px #5de6ff99);z-index:1;width:100%;height:100%;position:relative}.character-fallback{color:#5de6ff;border:2px solid #5de6ff73;border-radius:50%;place-items:center;font:800 34px Syne,sans-serif;display:grid;position:absolute;inset:18%}.character-selector{grid-template-columns:56px minmax(260px,520px) 56px;align-items:center;gap:12px;display:grid}.selector-arrow{width:56px;height:56px;color:var(--accent-color,#5de6ff);background:#ffffff0e;border:1px solid #5de6ff61;border-radius:50%;place-items:center;font-size:42px;line-height:1;display:grid}.character-stage{place-items:center;display:grid;position:relative}.character-stage .character-figure{transition:transform .32s,filter .32s}.character-stage:hover .character-figure{transform:rotateY(8deg)scale(1.015)}.selected-character-copy{text-align:center;border:1px solid var(--trace-soft,#5de6ff52);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0d112cad;border-radius:8px;min-width:220px;padding:12px 16px;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.selected-character-copy h2{color:#fff;margin:0 0 4px}.selected-character-copy span{color:var(--accent-color,#5de6ff)}.calibration-grid{grid-template-columns:300px minmax(0,1fr);gap:20px;display:grid}.instructions{padding:22px}.meter-card{align-content:center;gap:24px;min-height:420px;padding:22px;display:grid}.calibration-staff{position:relative;overflow:hidden}.calibration-staff .orb,.calibration-trace{z-index:3;position:relative}.calibration-staff .staff-background{opacity:.85}.orb{border:2px solid #5de6ff99;border-radius:50%;align-content:center;place-items:center;width:210px;height:210px;margin:0 auto;display:grid;box-shadow:0 0 32px #5de6ff47,inset 0 0 36px #6d28d93d}.orb strong{color:#5de6ff;font:800 58px/1 Syne,sans-serif}.orb span{color:#eec200;margin-top:10px}.orb.stable{border-color:#eec200}.stats-grid{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.stat{gap:8px;padding:16px;display:grid}.stat small,.hud-card small,.live-note small,.game-hud small{color:#958da1;font-size:12px}.stat strong,.hud-card strong,.live-note strong,.game-hud strong{color:#dfe0ff;overflow-wrap:anywhere;font:700 20px/1.1 Space Grotesk,sans-serif}.status-pill{color:#dfe0ff;background:#ffffff0f;border:1px solid #5de6ff47;border-radius:8px;padding:10px 12px}.status-pill.permission-denied,.status-pill.device-error,.status-pill.unsupported{color:#ffdad6;border-color:#ffb4ab}.field{color:#ccc3d7;gap:8px;margin:18px 0;display:grid}.field input{width:100%}.pitch-trace{width:100%;height:auto;overflow:visible}.pitch-trace line{stroke:#dfe0ff24;stroke-width:1px}.pitch-trace path{fill:none;stroke:var(--trace-color,#5de6ff);stroke-width:5px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px var(--trace-soft,#5de6ffcc))}.pitch-trace.compact path{stroke-width:4px}.singing-trace{z-index:5;pointer-events:none;opacity:.95;clip-path:inset(0 0 0 25%);align-items:stretch;display:flex;position:absolute;inset:0}.singing-trace .pitch-trace,.singing-trace .singing-trail{width:100%;height:100%}.singing-trace .pitch-trace path,.singing-trace .singing-trail path{stroke:var(--trace-color,#5de6ff);stroke-width:6px;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 12px var(--trace-soft,#5de6ffcc))}.flight-page,.game-screen{gap:14px;min-height:calc(100vh - 140px);display:grid}.hud,.game-hud{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid}.game-hud{grid-template-columns:repeat(4,minmax(0,1fr))}.hud-card,.game-hud>div{padding:14px 16px}.hud-card.right{text-align:right}.live-note{background:#ffffff0d;border:2px solid #5de6ff99;border-radius:50%;align-content:center;place-items:center;width:128px;height:128px;display:grid}.live-note strong{color:#5de6ff;font-size:36px}.game-area{aspect-ratio:16/9;background:linear-gradient(#151935e6,#0d112cf5);border:1px solid #5de6ff3d;border-radius:8px;width:min(100%,1120px);max-height:62vh;margin:0 auto;position:relative;overflow:hidden}.game-tools{color:#dfe0ff;justify-content:center;align-items:center;gap:18px;width:min(100%,1120px);margin:0 auto;padding:10px 14px;display:flex}.game-tools label{align-items:center;gap:8px;display:inline-flex}.game-tools input{accent-color:#5de6ff}.countdown-overlay{z-index:8;color:#5de6ff;text-shadow:0 0 28px #5de6ffe6;background:#0d112c7a;place-items:center;font:800 112px/1 Syne,sans-serif;display:grid;position:absolute;inset:0}.phase-overlay{background:linear-gradient(#0d112c9e,#0d112c14);place-items:start center;padding-top:34px;font-size:40px}.pitch-lanes{background:repeating-linear-gradient(#0000 0 19%,#5de6ff1f 19.2% 19.5%,#0000 20%);position:absolute;inset:0}.track-background{z-index:1;pointer-events:none;position:absolute;inset:0}.track-lane{border-top:1px solid var(--trace-soft,#5de6ff33);height:1px;box-shadow:0 0 12px var(--trace-soft,#5de6ff33);position:absolute;left:0;right:0}.track-lane>span,.track-lane .jianpu-symbol{min-width:32px;color:var(--trace-color,#5de6ff);text-align:center;background:#0d112cb3;border-radius:8px;padding:3px 7px;font-size:12px;font-weight:900;position:absolute;top:-13px;left:10px}.staff-background{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.staff-background line{stroke:url(#staffGlow);stroke-width:3px;vector-effect:non-scaling-stroke}.staff-background .ledger{stroke:var(--trace-soft,#5de6ff1f);stroke-width:1.5px}.staff-background text{fill:#dfe0ff57;text-shadow:0 0 18px #5de6ff38;font-family:Times New Roman,serif;font-size:132px}.player{z-index:7;width:132px;transition:top 80ms ease-out;position:absolute;transform:translate(-50%,-50%)}.player .character-figure{width:132px}.ball-player{width:62px;height:62px}.voice-ball{background:radial-gradient(circle at 34% 28%, #fff 0 12%, transparent 13%), radial-gradient(circle at 42% 38%, var(--trace-color,#5de6ff), #8b5cf6 55%, #0d112ceb 100%);width:58px;height:58px;box-shadow:0 0 22px var(--trace-soft,#5de6ffe6), inset -8px -10px 18px #00000047;border:2px solid #ffffffe6;border-radius:50%}.tuning-fork{width:62px;height:86px;filter:drop-shadow(0 0 18px var(--trace-soft,#5de6ffe6));position:relative}.tuning-fork-head{border:8px solid var(--trace-color,#5de6ff);border-bottom:0;border-radius:18px 18px 6px 6px;width:36px;height:48px;position:absolute;top:4px;left:13px}.tuning-fork-stem{background:linear-gradient(180deg, #fff, var(--trace-color,#5de6ff));border-radius:999px;width:8px;height:30px;position:absolute;top:48px;left:27px}.tuning-fork-foot{background:var(--target-color,#eec200);width:24px;height:10px;box-shadow:0 0 14px var(--target-soft,#eec20099);border-radius:999px;position:absolute;bottom:3px;left:19px}.target-note{color:#ffe083;z-index:2;background:#eec2002e;border:1px solid #eec200b3;border-radius:8px;place-items:center;min-width:74px;min-height:52px;display:grid;position:absolute;transform:translate(-50%,-50%)}.target-note-bar{border-color:var(--target-color,#eec200e6);background:linear-gradient(90deg, var(--target-soft,#eec2003d), var(--trace-soft,#5de6ff29));min-width:0;height:46px;min-height:46px;box-shadow:0 0 18px var(--target-soft,#eec20040);grid-template-columns:auto auto;justify-content:center;gap:8px;padding:0 18px;overflow:hidden;transform:translateY(-50%)}.target-note-bar.is-active{z-index:5;border-width:2px;animation:.42s ease-in-out infinite alternate active-note-pulse}.target-note-bar.grade-perfect{background:linear-gradient(90deg, #ffffff6b, var(--trace-soft,#5de6ff57));box-shadow:0 0 30px var(--trace-color,#5de6ff), inset 0 0 16px #ffffff2e;border-color:#fff}.target-note-bar.grade-good,.target-note-bar.grade-ok{border-color:var(--trace-color,#5de6ff);box-shadow:0 0 24px var(--trace-soft,#5de6ffb3)}.target-note-bar.grade-miss{background:#93000a47;border-color:#ff8a80;box-shadow:0 0 18px #ff8a8073}@keyframes active-note-pulse{0%{filter:brightness()}to{filter:brightness(1.25)}}.target-note-fill{background:linear-gradient(90deg, var(--trace-soft,#5de6ff52), #d3bbff2e);z-index:-1;position:absolute;inset:0 auto 0 0}.target-note span{font-weight:800}.number-notation{color:#fff;text-shadow:0 0 10px var(--trace-soft,#5de6ffb3);font-weight:900;line-height:1}.jianpu-symbol{min-width:1.2em;color:inherit;place-items:center;padding:.18em 0;font-weight:900;line-height:1;display:inline-grid;position:relative}.jianpu-symbol.above:before,.jianpu-symbol.below:after{content:"";background:currentColor;border-radius:50%;width:.22em;height:.22em;position:absolute;left:50%;transform:translate(-50%)}.jianpu-symbol.above:before{top:-.1em}.jianpu-symbol.below:after{bottom:-.1em}.target-note em{color:#dfe0ff;font-size:12px;font-style:normal}.hit-zone{background:var(--trace-color,#5de6ff);width:3px;box-shadow:0 0 18px var(--trace-color,#5de6ff);z-index:6;position:absolute;top:0;bottom:0;left:25%}.hit-zone:after{content:"唱这里";white-space:nowrap;color:var(--trace-color,#5de6ff);background:#0d112cbd;border-radius:8px;padding:5px 8px;font-size:12px;font-weight:800;position:absolute;top:10px;left:10px}.hit-feedback{z-index:7;border:1px solid var(--trace-soft,#5de6ff66);color:#dfe0ff;background:#0d112cd1;border-radius:8px;padding:6px 10px;font-weight:900;position:absolute;left:calc(25% + 16px);transform:translateY(-50%)}.hit-feedback.grade-perfect{color:#fff;box-shadow:0 0 18px var(--trace-color,#5de6ff)}.hit-feedback.grade-good{color:var(--trace-color,#5de6ff)}.hit-feedback.grade-ok{color:#ffe083}.hit-feedback.grade-miss{color:#ffb4ab;border-color:#ffb4ab8c}.flight-footer{grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:14px;display:grid}.readouts{color:#ccc3d7;gap:6px;min-width:180px;display:grid}.result-score{color:#5de6ff;text-shadow:0 0 22px #5de6ff8c;margin:16px 0;font:800 88px/1 Syne,sans-serif}.result-rating{color:#fff;border:2px solid var(--trace-color,#5de6ff);width:120px;height:120px;box-shadow:0 0 28px var(--trace-soft,#5de6ff80);border-radius:50%;place-items:center;margin:0 auto 12px;font:900 58px/1 Syne,sans-serif;display:grid}.result-rating.failed{color:#ffb4ab;border-color:#ff8a80;box-shadow:0 0 22px #ff8a805c}.result-summary{color:#ccc3d7;margin:-8px 0 18px}.rotate-hint{display:none}.settings-page{max-width:1180px}.settings-grid{grid-template-columns:minmax(260px,360px) minmax(0,1fr);align-items:start;gap:18px;display:grid}.settings-card,.level-painter{padding:22px}.level-painter h2{color:#5de6ff;margin:0 0 8px}.level-painter p{color:#ccc3d7;margin:0}.editor-login,.editor-controls{gap:12px;display:grid}.editor-controls{grid-template-columns:minmax(0,1fr) 120px 120px;align-items:end}.editor-heading{justify-content:space-between;align-items:start;gap:16px;margin-bottom:18px;display:flex}.editor-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.file-button{place-items:center;display:inline-grid}.file-button input{display:none}.level-painter input,.level-painter select{color:#dfe0ff;background:#080b27b8;border:1px solid #5de6ff47;border-radius:8px;padding:10px 12px}.note-buttons{flex-wrap:wrap;gap:10px;margin:16px 0;display:flex}.solfege-buttons{grid-template-columns:repeat(7,minmax(58px,1fr));align-items:stretch;display:grid}.note-choice{place-items:center;gap:2px;min-height:64px;padding:8px;display:grid}.note-choice small{color:#958da1;font-size:10px;line-height:1}.note-button-main{color:#dfe0ff;font-size:17px;font-weight:900}.notation-mode{align-items:center}.notation-hint{color:#958da1;font-size:12px}.duration-buttons,.segmented-control{flex-wrap:wrap;gap:8px;margin:12px 0;display:flex}.duration-buttons button,.segmented-control button{color:#dfe0ff;background:#ffffff0b;border:1px solid #5de6ff47;border-radius:8px;padding:9px 12px;font-weight:800}.duration-buttons button.selected,.segmented-control button.selected{background:var(--trace-soft,#5de6ff38);border-color:var(--trace-color,#5de6ff);color:#fff}.drawn-notes{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;max-height:220px;padding-right:4px;display:grid;overflow:auto}.drawn-note{color:#ffe083;text-align:left;background:#eec2001a;border:1px solid #eec2006b;border-radius:8px;gap:4px;padding:10px;display:grid}.drawn-note .number-notation{color:var(--trace-color,#5de6ff);justify-self:start}.drawn-note span,.form-message{color:#ccc3d7;font-size:12px}.form-message{margin-top:12px}.saved-level-panel{gap:14px;display:grid}@media (orientation:portrait) and (width<=780px){.rotate-hint{text-align:center;color:#eec200;font-weight:700;display:block}}@media (width<=860px){.topbar{padding-left:18px}.sidenav{display:none}.main-stage{padding:94px 16px 28px}.hero-grid,.calibration-grid,.flight-footer,.card-grid,.card-grid.three,.stats-grid,.game-hud,.settings-grid,.editor-controls{grid-template-columns:1fr}.level-card,.game-tools,.level-actions,.editor-actions{flex-direction:column;align-items:stretch}.hero-copy h1,.page-panel h1{font-size:38px}.character-figure{width:min(78vw,360px);margin:0 auto}.hud{grid-template-columns:1fr}.live-note{width:104px;height:104px;margin:0 auto}.player,.player .character-figure{width:86px}.character-selector{grid-template-columns:44px minmax(0,1fr) 44px}.selector-arrow{width:44px;height:44px;font-size:34px}.ball-player,.tuning-fork{width:46px;height:66px}.tuning-fork-head{border-width:6px;width:26px;height:37px;left:10px}.tuning-fork-stem{width:7px;height:23px;top:37px;left:20px}.tuning-fork-foot{width:21px;height:8px;left:13px}}