:root{--bg0:#0b0d12;--bg1:#141922;--wood0:#5a3a22;--wood1:#7a4e2c;--wood2:#3d2716;--gold:#e8c66a;--gold-dim:#a9873c;--jade:#4dd9a3;--ink:#e9e4d6;--muted:#9aa0ad;--red:#ff5d5d;--org:#ff9f43;--yel:#ffd93d;--grn:#4dd07a;--blu:#4db8ff;--panel:#141922d1;--line:#e8c66a2e}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0}body{color:var(--ink);background:radial-gradient(1200px 600px at 20% -10%, #1b2230 0%, transparent 60%), radial-gradient(900px 500px at 110% 10%, #22160f 0%, transparent 55%), linear-gradient(180deg,var(--bg0),#070a0f 70%);-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-touch-callout:none;min-height:100%;font-family:system-ui,-apple-system,Noto Sans,Roboto,sans-serif;overflow-x:hidden}.app-root:focus{outline:none}input[type=text]{-webkit-user-select:text;user-select:text}.wrap{max-width:1320px;margin:0 auto;padding:14px 18px 40px}header.top{flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:12px;display:flex}.brand{align-items:baseline;gap:12px;display:flex}.brand h1{background:linear-gradient(#fbe6ac,#e8c66a 55%,#b6862f);color:#0000;text-shadow:0 2px 20px #e8c66a26;letter-spacing:2px;-webkit-background-clip:text;background-clip:text;margin:0;font-family:Ma Shan Zheng,Noto Serif SC,serif;font-size:40px;line-height:1}.brand-title{font-size:16px;font-weight:700}.brand .en{color:var(--muted);letter-spacing:3px;text-transform:uppercase;font-size:13px}.tabs{background:var(--panel);border:1px solid var(--line);border-radius:12px;gap:4px;padding:4px;display:flex}.tabs button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:9px;padding:8px 16px;font-size:14px;font-weight:600;transition:all .15s}.tabs button.active{color:var(--gold);box-shadow:0 1px 0 #ffffff0d inset,0 0 0 1px var(--line);background:linear-gradient(#2a3242,#1a212c)}.spacer{flex:1}.ctrls{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.ctrl{color:var(--muted);align-items:center;gap:7px;font-size:12.5px;display:flex}.ctrl input[type=range]{width:96px;accent-color:var(--gold)}.speed-val{color:var(--ink);width:30px}.switch{cursor:pointer;align-items:center;gap:6px;display:inline-flex}.switch input{display:none}.pill{border:1px solid var(--line);background:#2a2f3a;border-radius:20px;width:36px;height:20px;transition:all .15s;position:relative}.pill:after{content:"";background:#8b93a2;border-radius:50%;width:14px;height:14px;transition:all .15s;position:absolute;top:2px;left:2px}.switch input:checked+.pill{background:linear-gradient(90deg,var(--gold-dim),var(--gold))}.switch input:checked+.pill:after{background:#1a1200;left:18px}.tuning{gap:5px}.tune-btn{border:1px solid var(--line);background:var(--panel);width:23px;height:23px;color:var(--gold);cursor:pointer;border-radius:7px;justify-content:center;align-items:center;padding:0;font-size:15px;font-weight:800;line-height:1;transition:all .12s;display:inline-flex}.tune-btn:hover{border-color:var(--gold);background:#232a36}.tune-btn:active{transform:scale(.9)}.tune-read{cursor:pointer;flex-direction:column;justify-content:center;align-items:center;min-width:32px;line-height:1;display:inline-flex}.tune-read b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:14px}.tune-read i{color:var(--muted);margin-top:1px;font-size:9px;font-style:normal}.tune-read.active b{color:var(--gold)}.sheetbar{flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 12px;display:flex}.sheetbar .btn{padding:8px 14px;font-size:13px}.sheet-error{color:var(--red);font-size:12.5px}.sheet-warn{color:var(--org);font-size:12px}.sheet-empty{background:var(--panel);border:1px dashed var(--line);color:var(--muted);border-radius:14px;margin:0 0 12px;padding:16px 20px;font-size:13px;line-height:1.7}.sheet-empty b{color:var(--ink)}.sheet-empty ol{margin:8px 0;padding-left:20px}.sheet-empty code{color:var(--gold);background:#20262f;border-radius:5px;padding:1px 6px;font-size:12px}.jianpu-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:0 0 12px;overflow:hidden}.jianpu-head{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:baseline;gap:12px;padding:9px 14px 7px;font-size:13px;display:flex}.jianpu-head b{font-size:14.5px}.jp-meta{color:var(--muted);font-size:12px}.jp-tip{color:var(--muted);margin-left:auto;font-size:11px}.jp-toggle{border:1px solid var(--line);color:var(--muted);cursor:pointer;background:0 0;border-radius:8px;padding:3px 9px;font-size:11px;transition:all .12s}.jp-toggle:hover{border-color:var(--gold);color:var(--gold)}.jianpu-head .jp-toggle{margin-left:auto}.jianpu-head .jp-tip+.jp-toggle{margin-left:12px}.jianpu-body{resize:vertical;font-variant-numeric:tabular-nums;height:150px;min-height:70px;max-height:60vh;padding:10px 14px 14px;line-height:1;overflow:auto}.jp-measure{white-space:nowrap;align-items:center;margin:5px 0;display:inline-flex}.jp-bar{color:var(--gold-dim);margin:0 7px;font-size:16px}.jp-note{cursor:pointer;color:var(--ink);font:inherit;background:0 0;border:0;border-radius:7px;align-items:center;gap:1px;margin:0 1px;padding:2px 4px;display:inline-flex;position:relative}.jp-note:hover{background:#e8c66a1f}.jp-note.inloop{background:#4dd9a31a}.jp-note.inloop:hover{background:#4dd9a333}.jp-note.active{box-shadow:0 0 0 1px var(--gold);background:#e8c66a52}.jp-note.rest .jp-digit{color:var(--muted)}.jp-note.bad .jp-digit{color:var(--red);text-decoration:line-through}.jp-note.bendnote .jp-digit{color:var(--jade)}.jp-col{flex-direction:column;align-items:center;min-width:12px;display:inline-flex}.jp-dots{letter-spacing:1px;height:7px;color:var(--gold);white-space:pre;font-size:8px;line-height:7px}.jp-digit{font-size:17px;font-weight:700;line-height:18px}.jp-lines{flex-direction:column;justify-content:flex-start;align-self:stretch;gap:1px;height:7px;padding-top:1px;display:flex}.jp-lines i{background:var(--ink);border-radius:1px;height:1.5px;display:block}.jp-aug{margin-left:2px;font-weight:800}.jp-dash{color:var(--ink);margin-left:4px;font-size:13px}.jp-tech{color:var(--jade);font-size:9px;font-style:normal;position:absolute;top:-2px;right:-2px}.timedisp{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}.timedisp b{color:var(--ink);font-weight:600}.loopctl{color:var(--muted);align-items:center;gap:6px;font-size:12.5px;display:flex}.loopctl .mini{border:1px solid var(--line);background:var(--panel);width:30px;height:27px;color:var(--gold);cursor:pointer;border-radius:8px;font-weight:800;transition:all .12s}.loopctl .mini:hover{border-color:var(--gold)}.loopctl .mini:disabled{opacity:.4;cursor:not-allowed}.loopctl input{border:1px solid var(--line);width:58px;color:var(--ink);text-align:center;font-size:12.5px;font:inherit;background:#12161d;border-radius:8px;padding:5px 7px}.loopctl input:focus{border-color:var(--gold);outline:none}.yt-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:0 0 12px;padding:10px 14px}.yt-controls{flex-wrap:wrap;align-items:center;gap:9px;display:flex}.yt-label{font-size:13.5px;font-weight:700}.yt-controls label{color:var(--muted);align-items:center;gap:5px;font-size:12.5px;display:inline-flex}.yt-url{border:1px solid var(--line);min-width:180px;color:var(--ink);font-size:12.5px;font:inherit;background:#12161d;border-radius:8px;flex:1;padding:7px 10px}.yt-time{border:1px solid var(--line);width:58px;color:var(--ink);text-align:center;font-size:12.5px;font:inherit;background:#12161d;border-radius:8px;padding:6px 7px}.yt-url:focus,.yt-time:focus{border-color:var(--gold);outline:none}.yt-frame{aspect-ratio:16/9;border:0;border-radius:10px;width:min(420px,100%);margin-top:10px;display:block}.yt-note{color:var(--muted);margin:8px 0 0;font-size:11.5px}.playbar{flex-wrap:wrap;align-items:center;gap:12px;min-height:44px;margin:2px 0 12px;display:flex}.btn{cursor:pointer;border:0;border-radius:11px;align-items:center;gap:8px;padding:10px 18px;font-size:14px;font-weight:700;transition:all .15s;display:inline-flex}.btn.primary{color:#241800;background:linear-gradient(#f2d27f,#d9ad4c);box-shadow:0 6px 18px #d9ad4c47}.btn.primary:hover{filter:brightness(1.06)}.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line)}.btn.ghost:hover{border-color:#e8c66a66}.btn:disabled{opacity:.4;cursor:not-allowed}.now{font-size:15px;font-weight:700}.now small{color:var(--muted);font-size:12px;font-weight:500}.hud{align-items:baseline;gap:18px;margin-left:auto;display:flex}.hud .stat{text-align:right}.hud .stat b{color:var(--gold);font-variant-numeric:tabular-nums;font-size:20px}.hud .stat span{color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:10px;display:block}.hud .combo b{color:var(--jade)}.stage{background:linear-gradient(180deg, #00000026, #00000059), repeating-linear-gradient(0deg,#6b4326 0 3px,#5c3820 3px 7px), linear-gradient(180deg,var(--wood1),var(--wood0) 40%,var(--wood2));border:1px solid #00000080;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 20px 60px #00000080,inset 0 1px #ffffff0f}.stage .frame{pointer-events:none;border:10px solid #0000;border-image:linear-gradient(135deg,#8a5a30,#3a2312) 1;border-radius:18px;position:absolute;inset:0;box-shadow:inset 0 0 40px #0006}#cv{z-index:1;touch-action:none;width:100%;height:74vh;min-height:460px;display:block;position:relative}.stage.fs{z-index:40;border-radius:0;position:fixed;inset:0}.stage.fs .frame{border-radius:0}.stage.fs #cv{height:100dvh;min-height:0}.fsbtn{z-index:7;border:1px solid var(--line);width:38px;height:38px;color:var(--gold);cursor:pointer;letter-spacing:-2px;background:#141922bf;border-radius:10px;justify-content:center;align-items:center;font-size:17px;transition:all .12s;display:flex;position:absolute;top:12px;left:12px}.fsbtn:hover{border-color:var(--gold);background:#141922f2}.bendbtn{z-index:6;width:208px;height:100%;color:var(--jade);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;background:#141922b8;border:1px solid #4dd9a380;border-left:0;border-radius:0 16px 16px 0;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:22px;font-weight:700;transition:all .12s;display:flex;position:absolute;top:0;left:0}.bendbtn span{letter-spacing:2px;text-transform:uppercase;font-size:9.5px}.bendbtn.active{border-color:var(--jade);background:#4dd9a347;box-shadow:0 0 18px #4dd9a359}@media (hover:hover) and (pointer:fine){.bendbtn{display:none}}.labels{z-index:0;pointer-events:none;position:absolute;inset:0}.lab{text-align:left;pointer-events:auto;cursor:pointer;font:inherit;color:inherit;background:0 0;border:0;border-radius:6px;align-items:baseline;gap:6px;padding:2px 5px;display:flex;position:absolute;top:0;left:calc(100% - 116px);transform:translateY(-50%)}.lab:focus-visible{outline:1px solid var(--gold);outline-offset:2px}.lab .k{color:#f4ead0;text-shadow:0 1px 2px #0009;font-size:16px;font-weight:800;line-height:1}.lab .num{min-width:12px;color:var(--gold);font-variant-numeric:tabular-nums;grid-template-rows:4px 13px 4px;place-items:center;display:inline-grid}.lab .num.bendable{color:var(--jade)}.lab .num-core{font-size:13px;font-weight:800;line-height:13px}.lab .num-dots{letter-spacing:1px;height:4px;font-size:7px;line-height:4px}.lab .n{color:#c8b48a;letter-spacing:.3px;font-size:10px}.lab.on{background:#e8c66a24}.lab.on .k{color:var(--gold)}.lab.lane-0{top:calc(2.38095% + 15.2381px)}.lab.lane-1{top:calc(7.14286% + 13.7143px)}.lab.lane-2{top:calc(11.9048% + 12.1905px)}.lab.lane-3{top:calc(16.6667% + 10.6667px)}.lab.lane-4{top:calc(21.4286% + 9.14286px)}.lab.lane-5{top:calc(26.1905% + 7.61905px)}.lab.lane-6{top:calc(30.9524% + 6.09524px)}.lab.lane-7{top:calc(35.7143% + 4.57143px)}.lab.lane-8{top:calc(40.4762% + 3.04762px)}.lab.lane-9{top:calc(45.2381% + 1.52381px)}.lab.lane-10{top:50%}.lab.lane-11{top:calc(54.7619% - 1.52381px)}.lab.lane-12{top:calc(59.5238% - 3.04762px)}.lab.lane-13{top:calc(64.2857% - 4.57143px)}.lab.lane-14{top:calc(69.0476% - 6.09524px)}.lab.lane-15{top:calc(73.8095% - 7.61905px)}.lab.lane-16{top:calc(78.5714% - 9.14286px)}.lab.lane-17{top:calc(83.3333% - 10.6667px)}.lab.lane-18{top:calc(88.0952% - 12.1905px)}.lab.lane-19{top:calc(92.8571% - 13.7143px)}.lab.lane-20{top:calc(97.6191% - 15.2381px)}.hint{color:var(--muted);text-align:center;margin-top:12px;font-size:12.5px;line-height:1.6}.hint kbd{border:1px solid var(--line);color:var(--ink);background:#20262f;border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-family:inherit;font-size:11px}.modal{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#04060ab8;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal.show{display:flex}.sheet{border:1px solid var(--line);text-align:center;background:linear-gradient(#1a2029,#11151c);border-radius:20px;width:min(440px,92vw);padding:28px 34px;box-shadow:0 30px 80px #0009}.sheet h2{color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin:0 0 2px;font-size:15px;font-weight:600}.sheet .title{margin-bottom:10px;font-size:24px;font-weight:800}.stars{letter-spacing:6px;margin:6px 0 14px;font-size:38px}.grades{grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;display:grid}.grades div{border:1px solid var(--line);background:#ffffff08;border-radius:12px;padding:10px}.grades b{font-variant-numeric:tabular-nums;font-size:22px;display:block}.grades span{color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-size:10.5px}.g-p b{color:var(--yel)}.g-g b{color:var(--jade)}.g-m b{color:var(--red)}.bigscore{color:var(--gold);font-variant-numeric:tabular-nums;margin:2px 0 4px;font-size:34px;font-weight:800}.acc{color:var(--muted);margin-bottom:16px;font-size:13px}.sheet .btn{justify-content:center;width:100%;margin-top:6px}.countdown{z-index:5;color:var(--gold);text-shadow:0 0 40px #e8c66a80;pointer-events:none;justify-content:center;align-items:center;font-size:120px;font-weight:800;display:none;position:absolute;inset:0}.countdown.show{display:flex}.bendind{z-index:4;pointer-events:none;border:1px solid var(--gold);color:var(--gold);white-space:nowrap;opacity:0;background:#141922d9;border-radius:20px;max-width:90%;padding:6px 14px;font-size:12.5px;transition:all .12s;position:absolute;top:12px;left:50%;transform:translate(-50%,-5px);box-shadow:0 4px 16px #00000059}.bendind.show{opacity:1;transform:translate(-50%)}.bendind b{color:#fff}@media (max-width:720px){.brand h1{font-size:30px}#cv{height:48vh}.hud{margin-left:0}.bendbtn{width:104px}}