:root{--green: #58cc02;--green-d: #46a302;--green-bg: #d7ffb8;--green-t: #58a700;--blue: #1cb0f6;--blue-d: #1899d6;--red: #ff4b4b;--red-d: #ea2b2b;--red-bg: #ffdfe0;--gold: #ffc800;--gold-d: #e6a700;--text: #3c3c3c;--muted: #8a8a8a;--line: #e5e5e5;--soft: #f7f7f7;--bg: #ffffff;--night: #15112a;--radius: 16px}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:Nunito,system-ui,-apple-system,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}h1,h2,h3{font-weight:900;margin:0 0 8px}.hidden{display:none!important}.muted{color:var(--muted);font-size:15px}.center{display:flex;justify-content:center}kbd{display:inline-block;min-width:26px;padding:2px 6px;border-radius:7px;background:#fff;border:2px solid var(--line);border-bottom-width:4px;font:800 12px Nunito,system-ui;text-align:center;color:var(--text)}.btn{border:2px solid transparent;border-radius:14px;padding:12px 22px;font-weight:900;font-size:15px;letter-spacing:.6px;text-transform:uppercase;border-bottom-width:5px;transition:transform .05s,filter .15s}.btn:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px;margin-bottom:3px}.btn:hover:not(:disabled){filter:brightness(1.06)}.btn:disabled{background:var(--line)!important;border-color:var(--line)!important;color:#afafaf!important;cursor:default}.btn.primary{background:var(--green);border-color:var(--green);border-bottom-color:var(--green-d);color:#fff}.btn.secondary{background:var(--blue);border-color:var(--blue);border-bottom-color:var(--blue-d);color:#fff}.btn.danger{background:var(--red);border-color:var(--red);border-bottom-color:var(--red-d);color:#fff}.btn.ghost{background:#fff;border-color:var(--line);color:var(--muted)}.btn.white{background:#fff;border-color:#fff;border-bottom-color:#0002;color:var(--uc)}.btn.wide{width:100%}.icon-btn{background:none;border:none;font-size:24px;color:#afafaf;padding:6px 10px}#app{display:grid;grid-template-columns:240px minmax(0,1fr) 360px;height:100vh}.sidenav{border-right:2px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;gap:6px}.logo{display:flex;align-items:center;gap:8px;padding:0 12px 24px}.logo-mark{font-size:30px}.logo-text{font-size:30px;font-weight:900;color:var(--green);letter-spacing:-1px}.nav-btn{display:flex;align-items:center;gap:16px;padding:10px 14px;border-radius:12px;background:none;border:2px solid transparent;text-transform:uppercase;font-size:15px;letter-spacing:.6px;color:#777;text-align:left}.nav-btn span{font-size:26px}.nav-btn:hover{background:var(--soft)}.nav-btn.active{background:#ddf4ff;border-color:#84d8ff;color:var(--blue-d)}main{display:flex;flex-direction:column;min-width:0;height:100vh}.topbar{display:flex;justify-content:flex-end;gap:22px;padding:14px 28px}.stat{font-size:18px;font-weight:900;color:#afafaf}.stat-streak.lit{color:#ff9600}.stat-xp{color:var(--blue)}.stat-hearts{color:var(--red)}.screen{flex:1;overflow-y:auto;min-height:0}.sidebar{padding:24px;display:flex;flex-direction:column;gap:18px;overflow-y:auto}body[data-screen=studio] .sidebar{display:none}body[data-screen=studio] #app{grid-template-columns:240px minmax(0,1fr)}body[data-screen=studio] .topbar{display:none}.card{border:2px solid var(--line);border-radius:var(--radius);padding:18px}.card h3{font-size:19px}.goal-row{display:flex;align-items:center;gap:12px}.goal-icon{font-size:34px}.goal-bar{flex:1;height:20px;background:var(--line);border-radius:10px;position:relative;overflow:hidden}.goal-bar div{height:100%;background:var(--gold);border-radius:10px;transition:width .6s}.goal-bar span{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;font-size:12px;line-height:20px;color:#6d5a00}.hearts-row{font-size:26px;letter-spacing:2px}.hearts-row .empty{filter:grayscale(1);opacity:.3}.studio-card{background:linear-gradient(135deg,#2b2450,#15112a);color:#fff;border:none}.studio-card .muted{color:#c9c2ee}.keymap{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:14px}.keymap span{display:flex;align-items:center;gap:8px}.keymap kbd{border-color:var(--c);color:var(--c)}.path{max-width:600px;margin:0 auto;padding:8px 20px 120px}.unit-banner{background:var(--uc);color:#fff;border-radius:var(--radius);padding:18px 22px;margin-top:28px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 5px color-mix(in srgb,var(--uc) 72%,black)}.unit-label{font-size:13px;letter-spacing:1.5px;opacity:.85}.unit-banner h2{font-size:24px;margin:2px 0}.unit-banner p{margin:0;opacity:.92}.unit-progress{background:#fff3;border-radius:12px;padding:8px 12px;font-size:18px;font-weight:900}.unit-nodes{display:flex;flex-direction:column;align-items:center;gap:26px;padding:36px 0 12px;position:relative}.node-wrap{position:relative;display:flex;flex-direction:column;align-items:center}.node{width:76px;height:70px;border-radius:50%;border:none;background:var(--uc);box-shadow:0 8px color-mix(in srgb,var(--uc) 70%,black);display:grid;place-items:center;transition:transform .1s}.node:active{transform:translateY(6px);box-shadow:0 2px color-mix(in srgb,var(--uc) 70%,black)}.node-icon{font-size:32px;filter:drop-shadow(0 2px 0 #0002)}.node.locked{background:var(--line);box-shadow:0 8px #c7c7c7}.node.locked .node-icon{filter:grayscale(1) opacity(.6);font-size:26px}.node.checkpoint{width:92px;height:84px;border-radius:28px}.node.done{background:var(--gold);box-shadow:0 8px 0 var(--gold-d)}.node.current{outline:6px solid color-mix(in srgb,var(--uc) 30%,white);outline-offset:6px;animation:nodePulse 1.6s infinite}@keyframes nodePulse{50%{outline-color:color-mix(in srgb,var(--uc) 12%,white)}}.node-stars{margin-top:10px;font-size:16px;letter-spacing:1px}.node-stars i{font-style:normal;color:var(--line)}.node-stars i.on{color:var(--gold)}.start-bubble{position:absolute;top:-46px;background:#fff;color:var(--uc);border:2px solid var(--line);padding:7px 14px;border-radius:12px;font-weight:900;letter-spacing:1px;animation:bob 1.2s ease-in-out infinite;z-index:2}.start-bubble:after{content:"";position:absolute;left:50%;bottom:-8px;width:12px;height:12px;background:#fff;border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:translate(-50%) rotate(45deg)}@keyframes bob{50%{transform:translateY(-6px)}}.path-mascot{position:absolute;top:90px}.path-mascot.left{left:0}.path-mascot.right{right:0}.path-mascot .mascot{animation:bob 2.4s ease-in-out infinite}.path-end{text-align:center;padding:40px 0}.popover{position:absolute;top:calc(100% + 14px);width:290px;background:var(--uc);color:#fff;border-radius:var(--radius);padding:18px;z-index:20;animation:popIn .18s ease-out}.popover:before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;background:var(--uc);transform:translate(-50%) rotate(45deg)}.popover.locked{background:var(--soft);color:var(--muted);border:2px solid var(--line)}.popover.locked:before{background:var(--soft);border-left:2px solid var(--line);border-top:2px solid var(--line)}.popover h3{font-size:20px}.popover p{margin:0 0 14px;opacity:.95}@keyframes popIn{0%{transform:scale(.85);opacity:0}}body.in-lesson{overflow:hidden}body.in-lesson #app{visibility:hidden}#lesson{position:fixed;top:0;right:0;bottom:0;left:0;background:#fff;z-index:90;display:grid;grid-template-rows:auto 1fr auto}.lesson-top{display:flex;align-items:center;gap:16px;padding:22px max(20px,calc(50% - 500px))}.progress{flex:1;height:18px;background:var(--line);border-radius:9px;overflow:hidden}.progress-fill{height:100%;width:0;background:var(--green);border-radius:9px;transition:width .45s cubic-bezier(.3,1.4,.6,1);box-shadow:inset 0 -5px #0001,inset 0 4px #fff4}.hearts-pill{color:var(--red);font-size:19px;font-weight:900}.lesson-body{overflow-y:auto;padding:10px 20px 30px;max-width:760px;width:100%;margin:0 auto}.lesson-body.slide-in{animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translate(40px);opacity:0}}.lesson-foot{border-top:2px solid var(--line);padding:22px 20px;transition:background .2s}.foot-inner{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}.foot-inner .check{min-width:170px;margin-left:auto}.feedback{flex:1}.fb-title{font-size:24px;font-weight:900}.fb-text{font-size:16px;margin-top:4px}.lesson-foot.good{background:var(--green-bg);border-color:transparent;color:var(--green-t)}.lesson-foot.bad{background:var(--red-bg);border-color:transparent;color:var(--red-d)}.lesson-foot.bad .check{background:var(--red);border-color:var(--red);border-bottom-color:var(--red-d)}.lesson-foot.good .fb-title,.lesson-foot.bad .fb-title{animation:popIn .25s}.ex-title{font-size:28px;margin:16px 0 6px}.ex-sub{color:var(--muted);margin:0 0 16px}.speech{display:flex;align-items:flex-end;gap:14px;margin:18px 0 22px}.speech .bubble{position:relative;border:2px solid var(--line);border-radius:16px;padding:16px 18px;font-size:19px;line-height:1.45}.speech .bubble:before{content:"";position:absolute;left:-9px;bottom:22px;width:14px;height:14px;background:#fff;border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}.speech.small .bubble{font-size:21px;font-weight:800}.new-badge{display:inline-block;background:#f3e8ff;color:#9b51e0;border-radius:8px;padding:4px 10px;font-size:13px;letter-spacing:1px;font-weight:900}.intro-row{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);margin-top:10px}.keycap{display:inline-block;padding:6px 12px;border:2px solid var(--line);border-bottom-width:5px;border-radius:10px;font-weight:900;color:var(--text)}.options{display:grid;gap:12px;margin-top:18px}.options.row{grid-template-columns:repeat(3,1fr)}.option{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;font-size:18px;background:#fff;border:2px solid var(--line);border-bottom-width:5px;border-radius:14px;transition:background .1s}.option:hover:not(:disabled){background:var(--soft)}.option.selected{background:#ddf4ff;border-color:#84d8ff;color:var(--blue-d)}.option.right{background:var(--green-bg);border-color:#a5ed6e;color:var(--green-t)}.option.wrong{background:var(--red-bg);border-color:#ffb2b2;color:var(--red-d)}.option-num{width:28px;height:28px;flex:none;display:grid;place-items:center;border:2px solid var(--line);border-radius:8px;font-size:13px;color:#afafaf}.piece-dot{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 20%,white);border:3px solid var(--c);font-size:18px}.grid-options .option{flex-direction:row;align-items:center}.grid-options .grid{flex:1}.sound-choice{width:100%;text-align:center;font-weight:900}.options.row .option{justify-content:center;padding:22px 10px}.options.row .option-num{display:none}.speaker{width:120px;height:120px;border-radius:28px;border:none;background:var(--blue);color:#fff;box-shadow:0 7px 0 var(--blue-d);display:grid;place-items:center;margin:14px 0}.speaker:active{transform:translateY(5px);box-shadow:0 2px 0 var(--blue-d)}.speaker.pulse{animation:speakerPulse .35s}@keyframes speakerPulse{50%{transform:scale(1.08)}}.kit-wrap{display:flex;justify-content:center}.kit2d{width:100%;max-width:480px;touch-action:manipulation;-webkit-user-select:none;user-select:none}.kit-piece{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:opacity .2s}.kit-piece.dim{opacity:.18;pointer-events:none}.kit-piece .glow{opacity:0}.kit-piece.highlight .glow{animation:glow 1.2s ease-in-out infinite}.kit-piece.right .glow{opacity:1;stroke:var(--green);stroke-width:7}.kit-piece.wrong .glow{opacity:1;stroke:var(--red);stroke-width:7}@keyframes glow{0%,to{opacity:.25}50%{opacity:1}}.kit-piece.hit{animation:kitHit .25s ease-out}@keyframes kitHit{30%{transform:scale(calc(1 - .09 * var(--v, .8)));filter:brightness(calc(1 + .35 * var(--v, .8)))}}.kit-piece:hover:not(.dim){filter:brightness(1.05)}.kit2d text{text-anchor:middle;font-family:Nunito,system-ui;pointer-events:none}.kit2d text.key{font-size:15px;font-weight:900;fill:#2a2540}.kit-piece[data-piece=kick] text.key{fill:#fff;font-size:13px}.kit2d text.name{font-size:13px;font-weight:800;fill:#777}.perform-controls{display:flex;gap:12px;justify-content:center;margin:14px 0;flex-wrap:wrap}.highway-wrap{height:360px;border-radius:var(--radius);overflow:hidden;box-shadow:0 6px #0d0b1a}.highway{width:100%;height:100%;display:block;touch-action:none}.grid-wrap{overflow-x:auto;padding-bottom:4px}.grid{display:grid;grid-template-columns:92px repeat(var(--cols),minmax(14px,40px));gap:4px;align-items:center;justify-content:center;min-width:0}.grid.small{grid-template-columns:30px repeat(var(--cols),minmax(10px,26px));gap:3px}.grid-label{font-size:13px;font-weight:900;color:var(--c, var(--muted));white-space:nowrap}.grid.small .grid-label{font-size:16px;text-align:center}.grid-count{font-size:12px;text-align:center;color:#bbb}.grid-count.beat{color:var(--text);font-weight:900}.grid.small .grid-count{font-size:10px}.cell{aspect-ratio:1;border-radius:7px;background:#f0eff4;border:2px solid transparent}.cell.beat{background:#e6e4ee}.cell.bar{margin-left:6px}.cell.on{background:var(--c);box-shadow:inset 0 -3px #0002}.grid.small .cell{border-radius:4px;border-width:1px}.grid.editable .cell{cursor:pointer;border-color:#dcd9e6}.grid.editable .cell:hover{border-color:var(--c)}.complete{text-align:center;padding-top:30px}.complete h1{font-size:34px;color:var(--gold-d);margin-top:12px}.stars{font-size:56px;letter-spacing:6px}.stars span{color:var(--line);display:inline-block}.stars span.on{color:var(--gold);animation:starIn .5s backwards cubic-bezier(.3,1.7,.6,1)}@keyframes starIn{0%{transform:scale(0) rotate(-90deg)}}.stat-cards{display:flex;gap:14px;justify-content:center;margin:24px 0;flex-wrap:wrap}.stat-card{width:150px;border-radius:16px;border:2px solid var(--sc);overflow:hidden;animation:popIn .4s .4s backwards}.stat-head{background:var(--sc);color:#fff;font-size:12px;letter-spacing:1px;padding:6px;font-weight:900}.stat-val{padding:14px 6px;font-size:22px;font-weight:900;color:var(--sc)}.stat-card.xp{--sc: var(--gold-d)}.stat-card.acc{--sc: var(--green)}.stat-card.time{--sc: var(--blue)}.mascot{flex:none;overflow:visible}.mascot.cheer{animation:cheer .6s ease-in-out infinite alternate}@keyframes cheer{to{transform:translateY(-8px) rotate(3deg)}}.mascot .stick{transform-box:fill-box}.mascot.cheer .stick.l{animation:stickL .3s ease-in-out infinite alternate;transform-origin:bottom right}.mascot.cheer .stick.r{animation:stickR .3s ease-in-out infinite alternate;transform-origin:bottom left}@keyframes stickL{to{transform:rotate(-18deg)}}@keyframes stickR{to{transform:rotate(18deg)}}.mascot .eyes{animation:blink 4s infinite;transform-origin:60px 66px}@keyframes blink{0%,95%,to{transform:scaleY(1)}97%{transform:scaleY(.1)}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0008;display:grid;place-items:center;z-index:100;animation:fade .2s;padding:16px}@keyframes fade{0%{opacity:0}}.modal{background:#fff;border-radius:22px;padding:28px;max-width:400px;text-align:center;animation:popIn .25s}.modal p{color:var(--muted);font-size:17px}.modal-buttons{display:flex;flex-direction:column;gap:10px;margin-top:18px}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:120;background:#fff;border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;padding:12px 18px;display:flex;gap:12px;align-items:center;animation:toastIn .35s cubic-bezier(.3,1.5,.6,1);transition:opacity .4s,transform .4s}.toast.out{opacity:0;transform:translate(-50%,-20px)}.toast-icon{font-size:34px}@keyframes toastIn{0%{transform:translate(-50%,-60px)}}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:110;overflow:hidden}.confetti i{position:absolute;top:-20px;width:10px;height:14px;border-radius:2px;animation:fall linear forwards}@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(var(--spin))}}.profile{max-width:720px;margin:0 auto;padding:10px 24px 120px}.profile h2{margin-top:32px}.profile-head{display:flex;gap:20px;align-items:center}.profile-head>div{flex:1}.level-bar{height:14px;background:var(--line);border-radius:7px;overflow:hidden;margin-top:8px}.level-bar div{height:100%;background:var(--blue)}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}.pstat{border:2px solid var(--line);border-radius:14px;padding:14px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.pstat span{font-size:28px;grid-row:span 2}.pstat b{font-size:22px;font-weight:900}.pstat small{color:var(--muted)}.week-chart{position:relative;display:flex;gap:10px;height:200px;border:2px solid var(--line);border-radius:14px;padding:16px 16px 10px}.week-chart .day{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}.bar-area{flex:1;width:100%;display:flex;align-items:flex-end}.bar{width:100%;background:var(--blue);border-radius:8px 8px 4px 4px;min-height:4px;position:relative;transition:height .5s}.bar.goal{background:var(--gold)}.bar span{position:absolute;top:-20px;width:100%;text-align:center;font-size:12px;color:var(--muted)}.week-chart small{color:var(--muted);font-size:12px}.achievements{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.ach{border:2px solid var(--line);border-radius:14px;padding:14px;text-align:center;display:flex;flex-direction:column;gap:4px;filter:grayscale(1);opacity:.5}.ach.got{filter:none;opacity:1;border-color:var(--gold);background:#fff9e0}.ach span{font-size:36px}.ach small{color:var(--muted);font-size:12px}.settings{display:flex;flex-direction:column;gap:16px;align-items:flex-start}.settings label{display:flex;gap:12px;align-items:center}.settings select{font:inherit;padding:6px 10px;border-radius:10px;border:2px solid var(--line)}#screen-studio{position:relative;overflow:hidden;background:var(--night);color:#fff}.studio-canvas{position:absolute;top:0;right:0;bottom:0;left:0}.studio-canvas canvas{width:100%!important;height:100%!important;display:block}.studio-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;font-size:20px;color:#c9c2ee;background:var(--night)}.glass{background:#15112ac7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff1a;border-radius:18px}.studio-panel{position:absolute;top:16px;left:16px;width:270px;padding:16px;display:flex;flex-direction:column;gap:10px;background:#15112acc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff1a;border-radius:18px;max-height:calc(100% - 100px);overflow-y:auto}.studio-panel h3{font-size:20px;margin:0}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#c9c2ee}.field b{color:#fff}.studio-panel select{font:inherit;font-size:15px;padding:8px 10px;border-radius:10px;border:none;background:#2b2450;color:#fff}.studio-panel input[type=range]{width:100%;accent-color:var(--green)}.toggles{display:flex;gap:14px;font-size:14px;color:#c9c2ee}.toggles input{accent-color:var(--green)}.panel-buttons{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}.panel-buttons .btn{padding:10px 8px;font-size:13px}.studio-panel .btn.ghost{background:#2b2450;border-color:#2b2450;border-bottom-color:#1a1533;color:#fff}.groove-preview{background:#ffffff0d;border-radius:10px;padding:8px}.groove-preview .cell{background:#ffffff14}.groove-preview .cell.beat{background:#fff2}.groove-preview .cell.on{background:var(--c)}.groove-preview .grid-count{color:#fff5}.groove-preview .grid-count.beat{color:#fff}.cams{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:#c9c2ee}.cams span{width:100%}.cams button{background:#2b2450;border:none;border-radius:8px;padding:6px 10px;font-size:13px;color:#fff}.cams button:hover{background:#3a3170}.studio-hud{position:absolute;top:16px;right:16px;text-align:right;padding:14px 18px;background:#15112ab3;border-radius:16px;border:1px solid #ffffff1a}.hud-free small{color:#c9c2ee;font-weight:600}.hud-score{font-size:34px;font-weight:900}.hud-meta{color:#c9c2ee}.hud-combo{color:var(--gold);font-size:20px;font-weight:900;min-height:26px}.judgement{position:absolute;top:22%;left:50%;transform:translate(-50%);font-size:40px;font-weight:900;pointer-events:none;opacity:0;text-shadow:0 4px 0 #0006}.judgement.pop{animation:judge .6s ease-out}@keyframes judge{0%{opacity:1;transform:translate(-50%) scale(1.3)}70%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-20px) scale(1)}}.countdown{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:110px;font-weight:900;pointer-events:none;text-shadow:0 6px 0 #0007}.studio-strip{position:absolute;left:302px;width:calc(100% - 318px);bottom:116px;height:96px;border-radius:14px;background:#15112abf;display:none}#screen-studio.session .studio-strip{display:block}.studio-legend{position:absolute;bottom:16px;left:302px;right:16px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.legend-item{display:flex;align-items:center;gap:6px;background:#15112abf;border:1px solid #ffffff1a;border-radius:10px;padding:5px 10px 5px 6px;font-size:13px}.legend-item kbd{background:var(--c);border-color:color-mix(in srgb,var(--c) 70%,black);color:#fff}.studio-result{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(360px,calc(100% - 32px));text-align:center;padding:26px;background:#fff;color:var(--text);border-radius:22px;animation:popIn .3s;z-index:5}.result-grade{font-size:84px;font-weight:900;color:var(--gold-d);line-height:1}.result-stats{display:flex;justify-content:space-around;margin:16px 0}.result-stats b{display:block;font-size:24px}.result-stats div{color:var(--muted);font-size:13px}.earned{color:var(--red);font-size:18px}.result-buttons{display:flex;gap:10px;justify-content:center}@media (max-width: 1150px){#app{grid-template-columns:90px minmax(0,1fr)}.sidebar,.logo-text,.nav-btn b{display:none}.logo{justify-content:center;padding:0 0 20px}.nav-btn{justify-content:center}body[data-screen=studio] #app{grid-template-columns:90px minmax(0,1fr)}}@media (max-width: 700px){#app{grid-template-columns:1fr;grid-template-rows:1fr auto}body[data-screen=studio] #app{grid-template-columns:1fr}main{height:calc(100vh - 70px)}.sidenav{flex-direction:row;justify-content:space-around;border-right:none;border-top:2px solid var(--line);padding:6px;order:2}.logo{display:none}.topbar{justify-content:space-around;padding:10px 16px}.path{padding:0 16px 60px}.path-mascot{display:none}.ex-title{font-size:22px}.options.row{grid-template-columns:1fr}.profile-stats{grid-template-columns:1fr 1fr}.studio-panel{top:auto;bottom:0;left:0;right:0;width:auto;max-height:42%;border-radius:18px 18px 0 0}.studio-legend{display:none}.studio-strip{left:12px;width:calc(100% - 24px);bottom:calc(42% + 10px);height:70px}.studio-hud{top:10px;right:10px;padding:8px 12px}.hud-free small{display:none}.lesson-top,.lesson-foot{padding-left:16px;padding-right:16px}.foot-inner{flex-direction:column;align-items:stretch}.foot-inner .check{margin-left:0}.highway-wrap{height:300px}}button.stat{background:none;border:none;padding:4px 8px;border-radius:10px;font:inherit;font-size:18px;font-weight:900}button.stat:hover{background:var(--soft)}.stat-gems{color:#1cb0f6}.stat-boost{color:#ff9600;animation:bob 1.2s ease-in-out infinite}.stat-streak .flame-ico{display:inline-block;filter:grayscale(1) opacity(.5)}.stat-streak.lit .flame-ico{filter:none;animation:flicker 1.4s ease-in-out infinite}@keyframes flicker{0%,to{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.15) rotate(4deg)}}.btn.small{padding:7px 12px;font-size:12px;border-bottom-width:4px}.page{max-width:760px;margin:0 auto;padding:10px 24px 120px}.page h2{margin-top:28px}.center-text{text-align:center}.pill-new{background:var(--gold);color:#fff;font-size:11px;border-radius:8px;padding:2px 7px;vertical-align:middle;animation:bob 1s infinite}.credits{margin-top:30px;font-size:13px}.card[data-goto]{cursor:pointer;transition:transform .1s}.card[data-goto]:hover{transform:translateY(-2px)}.view3d{position:relative;flex:none}.view3d canvas{display:block;width:100%!important;height:100%!important}.view3d.clickable{cursor:pointer}.view3d-fallback{display:grid;place-items:center;height:100%}.hero{display:flex;align-items:center;gap:18px;margin-top:16px;padding:14px 20px;border:2px solid var(--line);border-radius:22px;background:radial-gradient(circle at 15% 50%,#fff3f6 0,#fff 60%)}.hero h2{font-size:24px;margin:0}.hero p{margin:6px 0 12px}.hero-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}.league-card{background:linear-gradient(135deg,#fff9e0,#fff);border-color:#ffe08a}.quest{display:flex;gap:12px;align-items:center;padding:10px 0}.quest+.quest{border-top:2px solid var(--soft)}.q-icon{font-size:26px;width:34px;text-align:center}.q-body{flex:1}.q-text{font-size:15px;margin-bottom:6px}.quest.compact .q-text{font-size:14px}.q-bar{height:16px;background:var(--line);border-radius:8px;position:relative;overflow:hidden}.q-bar div{height:100%;background:var(--gold);border-radius:8px;transition:width .5s}.q-bar span{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;font-size:11px;line-height:16px;color:#6d5a00}.quest.done .q-bar div{background:var(--green)}.quest.done .q-bar span{color:#fff}.progress{position:relative}.progress.hot .progress-fill{background:linear-gradient(90deg,#ff9600,#ff4b4b);box-shadow:0 0 12px #ff960099,inset 0 4px #fff4}.combo-pill{color:#ff9600;font-size:19px;font-weight:900}.combo-pill.bump{animation:bump .35s}@keyframes bump{40%{transform:scale(1.35)}}.fb-streak{background:#ff9600;color:#fff;border-radius:10px;padding:2px 8px;font-size:16px;margin-left:8px}.streak-banner{position:fixed;left:50%;top:90px;transform:translate(-50%);z-index:60;display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#ff9600,#ff4b4b);color:#fff;padding:12px 24px;border-radius:20px;font-size:24px;box-shadow:0 6px #c23a00;pointer-events:none}.streak-banner.show{animation:streakIn 1.6s ease-out forwards}.sb-fire{font-size:34px;animation:flicker .6s infinite;display:inline-block}@keyframes streakIn{0%{opacity:0;transform:translate(-50%,-30px) scale(.6)}15%{opacity:1;transform:translate(-50%) scale(1.1)}25%{transform:translate(-50%) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-20px)}}.stat-card.streak{--sc: #ff9600}.complete-mascot{display:flex;justify-content:center}.streak-screen,.chest-screen{text-align:center;padding-top:20px}.flame-view,.chest-view{display:flex;justify-content:center}.chest-view{cursor:pointer}.streak-number{font-size:110px;font-weight:900;color:#ff9600;line-height:1;text-shadow:0 6px 0 #ffd8a8}.streak-number.bump{animation:bump .5s}.streak-screen h1{color:#ff9600;font-size:34px}.week-row{display:flex;gap:10px;justify-content:center;margin:20px 0}.wday{display:flex;flex-direction:column;align-items:center;gap:4px}.wday small{color:var(--muted)}.wday span{width:42px;height:42px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-size:20px}.wday.on span{background:#ffe1b8;box-shadow:0 0 0 3px #ff9600}.wday.ice span{background:#d6f2ff;box-shadow:0 0 0 3px #1cb0f6}.wday.today small{color:#ff9600;font-weight:900}.milestone{display:inline-block;background:#fff4d1;border:2px solid var(--gold);border-radius:14px;padding:10px 18px;font-size:18px;animation:popIn .4s .8s backwards}.chest-reward{font-size:26px;color:var(--blue-d);animation:popIn .4s}.streak-modal{max-width:420px}.streak-flame{display:flex;justify-content:center;margin-top:-10px}.big-streak{color:#ff9600;font-size:40px}.calendar{text-align:center}.cal-head{font-weight:900;margin-bottom:8px}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.cal-grid b{font-size:12px;color:var(--muted)}.cal-day{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font-size:13px;color:#aaa}.cal-day.on{background:#ff9600;color:#fff}.cal-day.ice{background:#1cb0f6;color:#fff}.cal-day.today{box-shadow:0 0 0 2px #ff9600;color:var(--text)}.cal-day.today.on{color:#fff}.streak-facts{display:flex;justify-content:space-around;margin-top:16px}.streak-facts b{display:block;font-size:20px}.streak-facts small{color:var(--muted)}.league-head{text-align:center;padding:10px 0 18px;border-bottom:2px solid var(--line)}.tiers{display:flex;justify-content:center;gap:10px;font-size:34px;margin-bottom:8px}.tier{filter:grayscale(1) opacity(.35);transition:transform .2s}.tier.past{filter:none;opacity:.6}.tier.cur{filter:none;transform:scale(1.4)}.league-list{margin-top:10px}.lrow{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:14px}.lrow.me{background:#ddf4ff;border:2px solid #84d8ff}.lrank{width:30px;text-align:center;font-weight:900;color:var(--muted)}.lrank.top1{color:#ffc800}.lrank.top2{color:#a8b2bd}.lrank.top3{color:#cd7f32}.lav{font-size:28px;width:46px;height:46px;border-radius:50%;background:var(--soft);display:grid;place-items:center}.lname{flex:1}.lxp{color:var(--muted)}.zone{text-align:center;font-size:12px;letter-spacing:1px;padding:6px;margin:4px 0;border-radius:8px}.zone.up{color:var(--green-t);background:var(--green-bg)}.zone.down{color:var(--red-d);background:var(--red-bg)}.quest-list{border:2px solid var(--line);border-radius:18px;padding:6px 18px}.chest-card{display:flex;align-items:center;gap:16px;margin-top:20px;border:2px solid var(--line);border-radius:18px;padding:10px 20px}.chest-card.ready{border-color:var(--gold);background:#fff9e0;cursor:pointer;animation:glowPulse 1.4s infinite}@keyframes glowPulse{50%{box-shadow:0 0 0 6px #ffc80044}}.power-list{display:flex;flex-direction:column;gap:10px}.power{display:flex;align-items:center;gap:14px;border:2px solid var(--line);border-radius:16px;padding:12px 16px}.power>div{flex:1;display:flex;flex-direction:column}.power small{color:var(--muted)}.p-icon{font-size:34px}.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.shop-item{border:2px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}.shop-item.equipped{border-color:var(--blue);background:#f0faff}.swatch{width:70px;height:70px;border-radius:50%;box-shadow:inset 0 -6px #0003,0 3px #0001}.profile-stats{grid-template-columns:repeat(5,1fr)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}.profile-head .view3d{margin:-10px 0}.mode-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#0003;padding:4px;border-radius:12px}.mode-tabs button{background:none;border:none;color:#c9c2ee;font-size:12px;padding:6px 2px;border-radius:9px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:2px}.mode-tabs button span{font-size:18px}.mode-tabs button.active{background:#ffffff1f;color:#fff}.mode-pane{display:flex;flex-direction:column;gap:10px}.pane-text{font-size:14px;color:#c9c2ee;margin:0;line-height:1.4}.pane-text kbd{background:#2b2450;color:#fff;border-color:#463c80}.panel-foot{border-top:1px solid #ffffff1a;padding-top:10px;display:flex;flex-direction:column;gap:10px}.toggles{flex-wrap:wrap}.rec-btn.recording{animation:recPulse 1s infinite}@keyframes recPulse{50%{filter:brightness(1.4)}}.rec-info{color:#c9c2ee}.song-list{display:flex;flex-direction:column;gap:8px}.song-card{display:flex;align-items:center;gap:10px;background:#2b2450;border:2px solid transparent;border-radius:12px;padding:8px 10px;text-align:left;color:#fff}.song-card:hover{border-color:var(--sc)}.song-icon{font-size:26px;width:40px;height:40px;display:grid;place-items:center;background:color-mix(in srgb,var(--sc) 35%,transparent);border-radius:10px}.song-info{flex:1;display:flex;flex-direction:column}.song-info small{color:#c9c2ee;font-size:12px}.song-score{text-align:right;font-size:13px;display:flex;flex-direction:column}.song-stars i{font-style:normal;color:#ffffff30}.song-stars i.on{color:var(--gold)}.skip-intro{position:absolute;bottom:20px;right:20px;z-index:4}.stop-btn{margin-top:8px}.hud-title{color:#c9c2ee;font-size:13px}.legend-item.tip{opacity:.8}.section-banner{position:absolute;top:14%;left:50%;transform:translate(-50%);font-size:30px;font-weight:900;color:#fff;background:linear-gradient(135deg,#7b61ffcc,#ff4b6ecc);padding:8px 24px;border-radius:16px;pointer-events:none;opacity:0;white-space:nowrap}.section-banner.show{animation:secIn 1.8s ease-out forwards}@keyframes secIn{0%{opacity:0;transform:translate(-50%,-20px) scale(.8)}12%{opacity:1;transform:translate(-50%) scale(1.05)}20%{transform:translate(-50%) scale(1)}80%{opacity:1}to{opacity:0}}.song-progress{position:absolute;top:0;left:0;right:0;height:5px;background:#ffffff14;display:none}.song-progress div{height:100%;width:0;background:linear-gradient(90deg,#58cc02,#ffc800)}#screen-studio.session .song-progress{display:block}.fire-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(ellipse at 50% 120%,#ff7a1a66,transparent 60%)}#screen-studio.on-fire .fire-overlay{opacity:1;animation:firePulse .5s infinite alternate}@keyframes firePulse{to{filter:brightness(1.4)}}#screen-studio.on-fire .hud-combo{color:#ff7a1a;text-shadow:0 0 12px #ff7a1a}.echo-banner{position:absolute;top:18%;left:50%;transform:translate(-50%);text-align:center;pointer-events:none;background:#15112acc;border:1px solid #ffffff22;border-radius:20px;padding:14px 30px}.echo-big{font-size:34px;font-weight:900}.echo-small{color:#c9c2ee}.echo-meta{margin-top:6px;font-size:14px;color:var(--gold)}.result-stars{font-size:40px;letter-spacing:4px}.result-stars span{color:var(--line)}.result-stars span.on{color:var(--gold)}@media (max-width: 1150px){.profile-stats{grid-template-columns:repeat(3,1fr)}}@media (max-width: 700px){.sidenav{overflow-x:auto;justify-content:flex-start;gap:2px}.nav-btn{padding:8px 10px}.nav-btn span{font-size:22px}.topbar{gap:4px}button.stat,.stat{font-size:15px}.hero{flex-direction:column;text-align:center}.hero-buttons{justify-content:center}.two-col{grid-template-columns:1fr}.profile-stats{grid-template-columns:1fr 1fr}.streak-number{font-size:80px}.wday span{width:34px;height:34px}.section-banner{font-size:20px}.echo-big{font-size:24px}}.celebrate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;overflow:hidden;opacity:0;transition:opacity .35s;color:#fff;-webkit-user-select:none;user-select:none}.celebrate.in{opacity:1}.celebrate.out{opacity:0}.cel-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 42%,#6a4be0 0,#2d1878 45%,#120a33)}.theme-gold .cel-bg{background:radial-gradient(circle at 50% 42%,#ffd35c 0,#c47d12 45%,#3d1f05)}.theme-blue .cel-bg{background:radial-gradient(circle at 50% 42%,#4cc9f0 0,#1b4fa8 45%,#071633)}.theme-fire .cel-bg{background:radial-gradient(circle at 50% 60%,#ff9a1f 0,#a8250a 45%,#1a0502)}.theme-dark .cel-bg{background:radial-gradient(circle at 50% 50%,#3a2a7a 0,#170f3d,#07041a)}.theme-rainbow .cel-bg{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--uc) 80%,white) 0,var(--uc) 35%,#120a33 100%)}.cel-rays{position:absolute;left:50%;top:45%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;opacity:var(--ray-op, .55);background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.13) 0deg 9deg,transparent 9deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 45%);mask-image:radial-gradient(circle,#000 0,transparent 45%);animation:raySpin 40s linear infinite;transition:opacity .4s}.celebrate.burst .cel-rays{opacity:1;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rar, #fff) 45%,transparent) 0deg 9deg,transparent 9deg 18deg);animation-duration:12s}@keyframes raySpin{to{transform:rotate(360deg)}}.cel-glow{position:absolute;left:50%;top:45%;width:70vmin;height:70vmin;margin:-35vmin 0 0 -35vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 65%);animation:glowPulse2 2.4s ease-in-out infinite}@keyframes glowPulse2{50%{transform:scale(1.15);opacity:.7}}.cel-3d,.cel-3d canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important}.cel-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;pointer-events:none}.cel-flash.go{animation:celFlash .55s ease-out}@keyframes celFlash{0%{opacity:.95}to{opacity:0}}.celebrate.shake .cel-ui{animation:uiShake .35s}@keyframes uiShake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}.cel-ui{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding:5vh 16px 4vh;pointer-events:none;text-align:center}.cel-ui button,.cel-ui .tap-hint{pointer-events:auto}.cel-top{opacity:0;transform:translateY(-20px);transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}.cel-top.show{opacity:1;transform:none}.cel-title{font-size:clamp(34px,7vw,76px);font-weight:900;margin:0;letter-spacing:2px;line-height:1.05}.cel-title .w{display:inline-block;white-space:nowrap;background:none;filter:none}.cel-title .w span{display:inline-block;background:linear-gradient(180deg,#fff 30%,#ffe08a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 rgba(0,0,0,.25)) drop-shadow(0 0 18px rgba(255,255,255,.35))}.cel-top.show .cel-title .w span{animation:letterIn .7s cubic-bezier(.3,1.7,.5,1) both,letterWave 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * 45ms),calc(1s + var(--i) * 90ms)}.cel-top:not(.show) .cel-title .w span{opacity:0}.cel-title.gold .w span{background:linear-gradient(180deg,#fffbe6 20%,#ffc800 70%,#ff9600);-webkit-background-clip:text;background-clip:text}.cel-title.fire .w span{background:linear-gradient(180deg,#fff3b0 10%,#ffb020 55%,#ff4b1f);-webkit-background-clip:text;background-clip:text}@keyframes letterIn{0%{opacity:0;transform:translateY(-80px) scale(.3) rotate(-25deg)}to{opacity:1;transform:none}}@keyframes letterWave{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.cel-title-plain{font-size:clamp(28px,5vw,46px);font-weight:900;margin:0;text-shadow:0 4px 0 rgba(0,0,0,.3)}.cel-ribbon{display:inline-block;margin-top:10px;background:linear-gradient(135deg,#ffc800,#ff9600);color:#fff;padding:8px 26px;border-radius:30px;font-weight:900;box-shadow:0 5px #00000040;animation:ribbonIn .6s .6s cubic-bezier(.3,1.6,.5,1) both}@keyframes ribbonIn{0%{transform:scale(0) rotate(-10deg)}}.cel-bottom{margin-top:auto;opacity:0;transform:translateY(40px);transition:opacity .4s,transform .6s cubic-bezier(.3,1.5,.5,1);display:flex;flex-direction:column;align-items:center;gap:14px}.cel-bottom.show{opacity:1;transform:none}.cel-stars{display:flex;gap:14px}.cel-star{font-size:clamp(54px,9vw,84px);line-height:1;color:#ffffff2e;transform:scale(0);display:inline-block}.cel-star.in{animation:starSlam .55s cubic-bezier(.2,1.6,.4,1) forwards}.cel-star.earned.in{color:#ffc800;text-shadow:0 0 25px #ffd166,0 6px 0 #c98a00}.cel-star:nth-child(2){transform-origin:50% 70%;margin-top:-18px}@keyframes starSlam{0%{transform:scale(3.2) rotate(-60deg);opacity:0}60%{transform:scale(.85) rotate(8deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.cel-stats{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.cel-stat{background:#ffffff24;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:2px solid rgba(255,255,255,.3);border-radius:18px;padding:10px 18px;min-width:120px;opacity:0;transform:translateY(30px) scale(.8)}.cel-stats.show .cel-stat{animation:statIn .5s cubic-bezier(.3,1.6,.5,1) forwards}.cel-stats.show .cel-stat:nth-child(2){animation-delay:.1s}.cel-stats.show .cel-stat:nth-child(3){animation-delay:.2s}.cel-stats.show .cel-stat:nth-child(4){animation-delay:.3s}@keyframes statIn{to{opacity:1;transform:none}}.cel-stat small{display:block;font-size:11px;letter-spacing:1.5px;opacity:.85}.cel-stat b{font-size:26px;font-weight:900}.cel-stat i{font-style:normal}.cel-stat.xp b{color:#ffd166}.cel-stat.acc b{color:#9dff6e}.cel-stat.streak b{color:#ffb36b}.cel-stat.time b{color:#9fe3ff}.cel-kind{display:inline-block;margin-top:8px;font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;opacity:.85}.cel-ribbon.fail{background:linear-gradient(135deg,#ff6b6b,#c2410c)}.cel-stat i{display:inline-block;min-width:1.2em}.cel-stat i.bump{animation:countBump .12s ease-out}.cel-stat i.done{animation:countDone .45s cubic-bezier(.3,1.8,.5,1)}.cel-stat.counting{border-color:#ffffffbf;box-shadow:0 0 22px #ffd16659}@keyframes countBump{50%{transform:scale(1.25)}}@keyframes countDone{40%{transform:scale(1.6);text-shadow:0 0 18px currentColor}}.cel-note{font-size:17px;opacity:.95;text-shadow:0 2px 0 rgba(0,0,0,.3)}.cel-note.big{font-size:24px;font-weight:900}.cel-note.small{font-size:14px;opacity:.8}.cel-continue{opacity:0;transform:scale(.5);pointer-events:none!important;min-width:240px;font-size:18px;padding:14px 30px}.cel-continue.show{opacity:1;transform:none;pointer-events:auto!important;transition:transform .4s cubic-bezier(.3,1.8,.5,1),opacity .3s;animation:btnGlow 1.6s .5s infinite}@keyframes btnGlow{50%{box-shadow:0 0 0 8px #58cc0259}}.cel-level{display:flex;flex-direction:column;align-items:center}.cel-level b{font-size:120px;line-height:1;font-weight:900;color:#fff;text-shadow:0 8px 0 #1b4fa8,0 0 40px #7fd4ff;display:inline-block}.cel-level b.flip{animation:numFlip .8s cubic-bezier(.3,1.5,.5,1)}@keyframes numFlip{0%{transform:rotateX(90deg) scale(.5)}to{transform:none}}.streak-flip{position:relative;height:150px;overflow:hidden;font-size:140px;font-weight:900;line-height:150px;width:320px;margin:0 auto}.streak-flip span{position:absolute;left:0;right:0;text-shadow:0 8px 0 #a8250a,0 0 40px #ffb020}.streak-flip .new{transform:translateY(110%)}.streak-flip.go .old{transition:transform .5s,opacity .5s;transform:translateY(-110%);opacity:0}.streak-flip.go .new{animation:newNum .7s .15s cubic-bezier(.3,1.6,.5,1) forwards}@keyframes newNum{to{transform:none}}.cel-week{display:flex;gap:10px}.cw-day{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;transform:translateY(20px);animation:statIn .4s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(var(--i) * 70ms)}.cel-bottom:not(.show) .cw-day{animation:none}.cw-day small{font-size:13px;opacity:.8}.cw-day span{width:46px;height:46px;border-radius:50%;background:#ffffff26;display:grid;place-items:center;font-size:22px}.cw-day.on span{background:#ffe1b8;box-shadow:0 0 0 3px #ff9600}.cw-day.ice span{background:#d6f2ff;box-shadow:0 0 0 3px #1cb0f6}.cw-day.today small{color:#ffd166;font-weight:900}.cw-day.stamp span{background:#ffe1b8;box-shadow:0 0 0 4px #ff9600,0 0 30px #ffb020;animation:stamp .5s cubic-bezier(.3,1.8,.5,1)}@keyframes stamp{0%{transform:scale(2.4) rotate(-20deg)}to{transform:none}}.cel-milestone{background:#fffffff2;color:#b8741a;border-radius:16px;padding:10px 20px;font-size:18px;animation:ribbonIn .6s 1.2s cubic-bezier(.3,1.6,.5,1) both}.tap-hint{margin-top:14px;display:inline-block;background:#fffffff2;color:#3c3c3c;font-size:22px;font-weight:900;padding:10px 26px;border-radius:30px;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);cursor:pointer}.tap-hint.show{opacity:1;transform:none;animation:hintBob 1s ease-in-out infinite}.tap-hint.pulse{animation:bump .3s}.tap-hint.gone{opacity:0;transform:scale(.4);pointer-events:none}.tap-hint b{color:#ff4b6e}@keyframes hintBob{50%{transform:translateY(-6px)}}.reward-card{background:#fff;color:#3c3c3c;border-radius:22px;padding:16px 40px 20px;border:4px solid var(--rar, #ffc800);box-shadow:0 0 40px color-mix(in srgb,var(--rar, #ffc800) 70%,transparent),0 8px #00000040;transform:perspective(600px) rotateY(90deg) scale(.6)}.reward-card.flip{animation:cardFlip .8s cubic-bezier(.3,1.5,.5,1) forwards}@keyframes cardFlip{0%{transform:perspective(600px) rotateY(-540deg) scale(.3)}to{transform:perspective(600px) rotateY(0) scale(1)}}.rc-rarity{display:inline-block;background:var(--rar, #ffc800);color:#fff;font-weight:900;letter-spacing:3px;padding:4px 16px;border-radius:12px;font-size:14px;margin-bottom:6px}.rc-row{font-size:44px;font-weight:900;color:#1899d6;display:flex;align-items:center;justify-content:center;gap:8px}.rc-row.small{font-size:18px;color:#3c3c3c}.fly-gem{position:fixed;left:0;top:0;font-size:28px;z-index:300;pointer-events:none;filter:drop-shadow(0 0 8px #4cc9f0)}.stat-gems.bump,.stat.bump{animation:bump .25s}.dom-burst{position:fixed;z-index:320;pointer-events:none}.dom-burst i{position:absolute;width:10px;height:10px;border-radius:50%;left:-5px;top:-5px;animation:domBurst .85s cubic-bezier(.1,.8,.3,1) forwards}@keyframes domBurst{0%{transform:translate(0) scale(1.3);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}.ach-card-wrap{flex:1;width:100%;display:grid;place-items:center;perspective:900px}.ach-card{position:relative;overflow:hidden;background:linear-gradient(160deg,#fff,#fff6d6);color:#3c3c3c;border-radius:26px;padding:30px 40px;width:min(360px,90vw);border:4px solid #ffc800;box-shadow:0 0 60px #ffc80099,0 10px #00000040;transform:rotateY(-720deg) scale(.2);opacity:0}.ach-card.in{transition:transform 1s cubic-bezier(.2,1.2,.4,1),opacity .3s;transform:none;opacity:1}.ach-card small{letter-spacing:2px;color:#b8741a;font-weight:900}.ach-card h2{font-size:30px;margin:6px 0}.ach-card p{color:#777;margin:0 0 12px}.ach-badge{font-size:80px;width:130px;height:130px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#fff3b0,#ffc800 60%,#c98a00);box-shadow:0 6px #a87000,inset 0 -6px #00000026}.ach-reward{display:inline-block;background:#1cb0f6;color:#fff;padding:6px 16px;border-radius:12px;font-weight:900}.ach-shine{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);transform:translate(-120%);animation:shine 2.4s 1s infinite}@keyframes shine{0%{transform:translate(-120%)}40%,to{transform:translate(120%)}}.node-wrap.just-done .node{animation:nodeDone 1s .4s cubic-bezier(.3,1.6,.5,1) both}.node-wrap.just-done .node:before{content:"";position:absolute;top:-14px;right:-14px;bottom:-14px;left:-14px;border-radius:50%;border:5px solid #ffc800;opacity:0;animation:ringOut 1s .6s ease-out}.node-wrap.just-done .node-stars i{display:inline-block;animation:starPop .5s cubic-bezier(.3,1.8,.5,1) both}.node-wrap.just-done .node-stars i:nth-child(1){animation-delay:.9s}.node-wrap.just-done .node-stars i:nth-child(2){animation-delay:1.05s}.node-wrap.just-done .node-stars i:nth-child(3){animation-delay:1.2s}.node{position:relative}@keyframes nodeDone{0%{transform:scale(1);filter:grayscale(1)}40%{transform:scale(1.35) rotate(-10deg);filter:none}to{transform:scale(1)}}@keyframes ringOut{0%{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.8)}}@keyframes starPop{0%{transform:scale(0) rotate(-90deg)}to{transform:none}}.node-wrap.just-unlocked .node .node-icon{animation:iconReveal .6s 2s cubic-bezier(.3,1.8,.5,1) both}.node-wrap.just-unlocked .node:after{content:"🔒";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:30px;border-radius:inherit;background:#e5e5e5;animation:lockBreak 2.2s ease-in forwards}.node-wrap.just-unlocked .start-bubble{animation:bubbleIn .5s 2.3s cubic-bezier(.3,1.8,.5,1) both,bob 1.2s 2.8s ease-in-out infinite}@keyframes lockBreak{0%,55%{transform:none;opacity:1}60%{transform:rotate(-12deg)}65%{transform:rotate(12deg)}70%{transform:rotate(-10deg)}75%{transform:rotate(8deg)}85%{transform:scale(1.3);opacity:1}to{transform:scale(2.2);opacity:0}}@keyframes iconReveal{0%{transform:scale(0)}to{transform:none}}@keyframes bubbleIn{0%{transform:scale(0);opacity:0}to{transform:none;opacity:1}}@media (max-width: 700px){.cel-stat{min-width:0;padding:8px 12px}.cel-stat b{font-size:20px}.streak-flip{font-size:100px;height:110px;line-height:110px}.cw-day span{width:36px;height:36px;font-size:18px}.cel-level b{font-size:90px}}.panel-head{display:flex;align-items:center;gap:6px}.panel-head h3{flex:1}.icon-mini{width:30px;height:30px;border-radius:9px;border:none;background:#2b2450;color:#fff;font-weight:900;font-size:15px}.icon-mini:hover{background:#3a3170}.studio-panel{transition:transform .35s cubic-bezier(.3,1.2,.5,1),opacity .3s}#screen-studio.panel-collapsed .studio-panel,#screen-studio.panel-auto-hidden .studio-panel{transform:translate(-115%);opacity:0;pointer-events:none}.panel-tab{position:absolute;top:16px;left:16px;z-index:3;display:none;background:#15112ad9;color:#fff;border:1px solid #ffffff22;border-radius:12px;padding:8px 14px;font-weight:900}#screen-studio.panel-collapsed .panel-tab,#screen-studio.panel-auto-hidden .panel-tab{display:block}#screen-studio:not([data-mode=groove]):not([data-mode=song]) .play-settings{display:none}.play-settings{display:flex;flex-direction:column;gap:8px;background:#ffffff0d;border-radius:12px;padding:10px}.ps-label{font-size:12px;color:#c9c2ee;letter-spacing:1px;text-transform:uppercase}.seg{display:grid;grid-template-columns:repeat(3,1fr);background:#0004;border-radius:10px;padding:3px;gap:3px}.seg button{border:none;background:none;color:#c9c2ee;font-size:12px;font-weight:800;padding:7px 2px;border-radius:8px}.seg button.active{background:var(--green);color:#fff;box-shadow:0 3px 0 var(--green-d)}.judgement small{display:block;font-size:16px;text-align:center;opacity:.9}.wait-hint{position:absolute;top:30%;left:50%;transform:translate(-50%);background:#15112ad9;border:2px solid #ffd166;border-radius:16px;padding:10px 22px;font-size:22px;font-weight:900;pointer-events:none;animation:hintBob .9s ease-in-out infinite}.wait-hint kbd{background:var(--c);border-color:color-mix(in srgb,var(--c) 70%,black);color:#fff;font-size:18px;padding:3px 10px}.studio-strip{left:50%!important;transform:translate(-50%);width:min(560px,calc(100% - 32px))!important;height:250px!important;bottom:16px!important;background:linear-gradient(180deg,#15112a33,#15112ad9)!important;border:1px solid #ffffff1a;border-radius:18px!important}#screen-studio.session .studio-legend{display:none}#screen-studio.session .judgement{top:18%}.result-breakdown{display:flex;gap:10px;justify-content:center;font-size:14px;margin-bottom:6px}.result-breakdown span{padding:3px 10px;border-radius:10px}.result-breakdown .p{background:#fff4d1;color:#b8741a}.result-breakdown .g{background:#d7fbf6;color:#1b8f84}.result-breakdown .m{background:var(--red-bg);color:var(--red-d)}.result-tip{background:#f0faff;color:#1899d6;border-radius:12px;padding:8px 12px;font-size:14px}.studio-tutorial{position:absolute;left:50%;bottom:96px;transform:translate(-50%);z-index:4;display:flex;align-items:center;gap:14px;width:min(620px,calc(100% - 32px));background:#fff;color:var(--text);border-radius:22px;padding:12px 18px;box-shadow:0 8px #00000040,0 0 0 4px #ffd166}.studio-tutorial.pop{animation:popIn .35s cubic-bezier(.3,1.6,.5,1)}.tut-mascot{flex:none}.tut-body{flex:1}.tut-text{font-size:18px;line-height:1.4}.tut-text kbd{font-size:15px;border-color:#ffd166}.tut-dots{display:flex;gap:6px;margin-top:8px}.tut-dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}.tut-dots i.done{background:var(--green)}.tut-dots i.cur{background:#ffb703;transform:scale(1.3)}.tut-buttons{display:flex;flex-direction:column;gap:6px}@media (max-width: 700px){.studio-strip{height:180px!important;bottom:calc(42% + 8px)!important}#screen-studio.panel-auto-hidden .studio-strip{bottom:12px!important}.studio-tutorial{bottom:calc(42% + 10px)}.tut-text{font-size:15px}}:root{--bg: #0d0a18;--surface: #161229;--surface-2: #1f1938;--surface-3: #2a2249;--line: #322a57;--text: #f4f1ff;--muted: #a49ecb;--soft: #1c1733;--primary: #ff4f8b;--primary-2: #ff8a3d;--violet: #8b6cff;--mint: #2ad5a4;--rose: #ff5577;--amber: #ffbe3d;--green: var(--mint);--green-d: #1aa27c;--green-bg: rgba(42, 213, 164, .14);--green-t: #58f0c2;--blue: var(--violet);--blue-d: #6a4fe0;--red: var(--rose);--red-d: #d63a5c;--red-bg: rgba(255, 85, 119, .14);--gold: var(--amber);--gold-d: #e09a10;--night: #0d0a18;--radius: 20px;--font: "Outfit", system-ui, -apple-system, sans-serif;--display: "Bungee", "Outfit", system-ui, sans-serif}html{color-scheme:dark}body{background:var(--bg);background-image:radial-gradient(1200px 600px at 80% -10%,rgba(139,108,255,.16),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(255,79,139,.12),transparent 60%);background-attachment:fixed;color:var(--text);font-family:var(--font);font-weight:500}h1,h2,h3{font-weight:800;letter-spacing:-.2px}h1{font-size:30px}.muted{color:var(--muted)}kbd{background:var(--surface-3);border:1px solid var(--line);border-bottom-width:1px;color:var(--text);border-radius:6px;font-family:var(--font);font-weight:700}::selection{background:var(--primary);color:#fff}input[type=range],input[type=checkbox]{accent-color:var(--primary)}select{background:var(--surface-3);color:var(--text);border:1px solid var(--line)}.btn{border:none;border-radius:999px;padding:12px 22px;font-weight:700;font-size:15px;letter-spacing:0;text-transform:none;border-bottom-width:0;transition:transform .12s,box-shadow .2s,filter .2s}.btn:active:not(:disabled){transform:scale(.96);border-bottom-width:0;margin-bottom:0}.btn:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}.btn:disabled{background:var(--surface-3)!important;color:#6c6690!important;box-shadow:none!important}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 6px 20px #ff4f8b59;border:none}.btn.secondary{background:linear-gradient(135deg,var(--violet),#5a8bff);color:#fff;box-shadow:0 6px 20px #8b6cff4d;border:none}.btn.danger{background:linear-gradient(135deg,var(--rose),#ff7a59);color:#fff;border:none}.btn.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}.btn.white{background:#fff;color:var(--uc, var(--primary))}.btn.small{padding:7px 14px;font-size:13px;border-bottom-width:0}.icon-btn{color:var(--muted)}#app{display:flex!important;flex-direction:column;height:100vh;grid-template-columns:none!important}.topnav{display:flex;align-items:center;gap:18px;padding:10px 22px;flex:none;position:relative;z-index:30;background:#0d0a18bf;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.logo{padding:0;gap:10px}.logo-mark{font-size:28px;filter:drop-shadow(0 0 10px rgba(255,79,139,.6))}.logo-text{font-family:var(--display);font-size:22px;letter-spacing:1px;color:transparent;background:linear-gradient(90deg,var(--primary),var(--amber));-webkit-background-clip:text;background-clip:text;display:inline!important}.sidenav{flex-direction:row!important;border:none!important;padding:0!important;gap:4px;flex:1;justify-content:center}.nav-btn{flex-direction:row;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid transparent;text-transform:none;letter-spacing:0;font-size:14px;color:var(--muted);font-weight:600}.nav-btn span{font-size:18px}.nav-btn b{display:inline!important;font-weight:600}.nav-btn:hover{background:var(--surface-2);color:var(--text)}.nav-btn.active{background:linear-gradient(135deg,#ff4f8b2e,#8b6cff2e);border-color:#ff4f8b73;color:#fff}.topbar{padding:0;gap:6px;justify-content:flex-end;flex:none}.stat,button.stat{font-size:15px;font-weight:700;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px}button.stat:hover{background:var(--surface-3)}.stat-streak.lit{color:var(--amber);border-color:#ffbe3d80}.stat-gems{color:var(--amber)}.stat-xp{color:#c7b8ff}.stat-hearts{color:var(--mint)}.battery{display:inline-flex;gap:2px;padding:2px;border:1.5px solid currentColor;border-radius:4px;position:relative;margin-right:4px}.battery:after{content:"";position:absolute;right:-4px;top:30%;width:2px;height:40%;background:currentColor;border-radius:1px}.battery i{width:4px;height:9px;border-radius:1px;background:#ffffff1f}.battery i.full{background:currentColor}.energy-big .battery{color:var(--mint);padding:3px;border-width:2px;border-radius:6px}.energy-big .battery i{width:14px;height:22px;border-radius:3px}.energy-big .battery:after{right:-6px;width:4px}.app-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px}body:not([data-screen=learn]) .app-body{grid-template-columns:minmax(0,1fr)}body:not([data-screen=learn]) .sidebar{display:none}main{height:auto!important;min-height:0}.screen{height:100%}.sidebar{padding:22px 22px 40px 4px;gap:14px}#lesson~*,.modal-backdrop{color:var(--text)}.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}.widget h3{font-size:16px;margin-bottom:6px}.widget[data-goto]{cursor:pointer;transition:border-color .2s,transform .15s}.widget[data-goto]:hover{border-color:var(--violet);transform:translateY(-2px)}.goal-widget{display:flex;align-items:center;gap:14px}.ring{--p: 0;width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--primary) calc(var(--p) * 1%),var(--surface-3) 0)}.ring span{width:50px;height:50px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-weight:800;font-size:14px}.stage-widget{background:linear-gradient(145deg,#2a1d5e,#120d26);border-color:#3d2f7a}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.pill-new{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}.quest+.quest{border-top-color:var(--line)}.q-bar{background:var(--surface-3)}.q-bar div{background:linear-gradient(90deg,var(--amber),var(--primary-2))}.q-bar span{color:#fff}.path{max-width:760px;padding:22px 22px 120px}.hero{background:linear-gradient(135deg,#ff4f8b29,#8b6cff29),var(--surface);border:1px solid var(--line);border-radius:26px;padding:18px 26px;margin-top:0;gap:22px}.hero h2{font-size:26px}.hero-kicker{font-family:var(--display);font-size:11px;letter-spacing:2px;color:var(--amber)}.album{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:border-color .2s}.album.current{border-color:color-mix(in srgb,var(--uc) 70%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--uc) 40%,transparent),0 12px 40px color-mix(in srgb,var(--uc) 18%,transparent)}.album.locked{opacity:.55}.album-head{width:100%;display:flex;align-items:center;gap:18px;padding:16px 20px;background:none;border:none;text-align:left;color:inherit}.vinyl{width:82px;height:82px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;background:repeating-radial-gradient(circle,#111 0,#111 2px,#1c1c1c 2px,#1c1c1c 4px);box-shadow:0 6px 18px #00000080,inset 0 0 0 2px #000}.vinyl:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 40%,transparent 60%,rgba(255,255,255,.08))}.vinyl-label{width:36px;height:36px;border-radius:50%;background:var(--uc);display:grid;place-items:center;font-size:17px;box-shadow:0 0 0 3px #0000004d}.album.current .vinyl{animation:spin 6s linear infinite}.album.complete .vinyl-label{background:radial-gradient(circle at 35% 35%,#fff3b0,var(--amber))}@keyframes spin{to{transform:rotate(360deg)}}.album-info{flex:1;min-width:0}.album-info small{font-family:var(--display);font-size:11px;letter-spacing:2px;color:var(--uc)}.album-info h2{font-size:22px;margin:2px 0}.album-info p{margin:0 0 8px;color:var(--muted);font-size:14px}.album-progress{height:6px;background:var(--surface-3);border-radius:3px;overflow:hidden}.album-progress div{height:100%;background:var(--uc);border-radius:3px}.album-count{font-weight:800;color:var(--muted);font-size:15px}.tracklist{list-style:none;margin:0;padding:0 12px 12px;display:none}.album.open .tracklist{display:block;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}}.track{display:grid;grid-template-columns:34px 34px 1fr auto 44px;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;cursor:pointer;transition:background .15s}.track:hover{background:var(--surface-2)}.track+.track{margin-top:2px}.t-num{color:var(--muted);font-weight:700;text-align:center}.t-icon{font-size:22px}.t-title b{display:block;font-weight:700}.t-title small{color:var(--muted);font-size:13px}.t-records{display:flex;gap:4px}.t-records i{width:16px;height:16px;border-radius:50%;background:repeating-radial-gradient(circle,#222 0,#222 1px,#333 1px,#333 2px);box-shadow:inset 0 0 0 1px #000}.t-records i.on{background:radial-gradient(circle,var(--amber) 0 3px,#b3790c 3px 4px,#ffd36b 4px);box-shadow:0 0 8px #ffbe3d99}.t-play{width:40px;height:40px;border-radius:50%;border:none;background:var(--surface-3);color:var(--text);font-size:15px}.track.current{background:linear-gradient(90deg,color-mix(in srgb,var(--uc) 22%,transparent),transparent)}.track.current .t-play{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 4px 16px #ff4f8b73;animation:playPulse 1.6s infinite}@keyframes playPulse{50%{box-shadow:0 0 0 8px #ff4f8b26}}.track.locked{opacity:.45;cursor:not-allowed}.track.encore .t-title b:after{content:" 🎤"}.track.nope{animation:nope .35s}@keyframes nope{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.eq{display:inline-flex;gap:2px;align-items:flex-end;height:16px}.eq i{width:3px;background:var(--primary);border-radius:1px;animation:eq .9s ease-in-out infinite}.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}@keyframes eq{0%,to{height:4px}50%{height:16px}}.track.just-done{animation:trackDone 1.4s .3s ease-out both}.track.just-done .t-records i{animation:starPop .5s cubic-bezier(.3,1.8,.5,1) both}.track.just-done .t-records i:nth-child(1){animation-delay:.8s}.track.just-done .t-records i:nth-child(2){animation-delay:.95s}.track.just-done .t-records i:nth-child(3){animation-delay:1.1s}@keyframes trackDone{0%{background:#ffbe3d73}to{background:transparent}}.track.just-unlocked .t-play{position:relative;animation:iconReveal .6s 1.9s cubic-bezier(.3,1.8,.5,1) both}.track.just-unlocked .t-play:after{content:"🔒";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);animation:lockBreak 2s ease-in forwards}#lesson{background:var(--bg);background-image:radial-gradient(900px 500px at 50% -20%,rgba(139,108,255,.2),transparent 70%);color:var(--text)}.progress{background:var(--surface-3);height:10px;border-radius:5px}.progress-fill{background:linear-gradient(90deg,var(--violet),var(--primary));box-shadow:0 0 12px #ff4f8b99;border-radius:5px}.progress.hot .progress-fill{background:linear-gradient(90deg,var(--amber),var(--primary))}.hearts-pill{color:var(--mint)}.combo-pill{color:var(--amber)}.lesson-foot{border-top:1px solid var(--line);background:#161229e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.lesson-foot.good,.lesson-foot.bad{background:#161229f2;color:var(--text);border-top-color:var(--line)}.lesson-foot .feedback:not(:empty){display:flex;flex-direction:column;padding:10px 16px 10px 58px;border-radius:16px;position:relative}.lesson-foot.good .feedback:not(:empty){background:var(--green-bg);border:1px solid rgba(42,213,164,.4)}.lesson-foot.bad .feedback:not(:empty){background:var(--red-bg);border:1px solid rgba(255,85,119,.4)}.lesson-foot .feedback:not(:empty):before{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:18px}.lesson-foot.good .feedback:before{content:"🥁";background:var(--mint)}.lesson-foot.bad .feedback:before{content:"🎯";background:var(--rose)}.lesson-foot.good .fb-title{color:var(--green-t)}.lesson-foot.bad .fb-title{color:#ff8aa2}.fb-title{font-size:20px}.lesson-foot.bad .check{background:linear-gradient(135deg,var(--rose),#ff7a59);border:none}.fb-streak{background:var(--amber);color:#2a1a00}.ex-title{font-size:26px}.speech .bubble{background:var(--surface);border:1px solid var(--line)}.speech .bubble:before{background:var(--surface);border-color:var(--line)}.new-badge{background:#8b6cff33;color:#c7b8ff}.keycap{border:1px solid var(--line);border-bottom-width:3px;color:var(--text);background:var(--surface-2)}.option{background:var(--surface);border:1px solid var(--line);border-bottom-width:1px;border-radius:16px;color:var(--text)}.option:hover:not(:disabled){background:var(--surface-2);border-color:var(--violet)}.option.selected{background:#8b6cff2e;border-color:var(--violet);color:#fff;box-shadow:0 0 0 2px #8b6cff59}.option.right{background:var(--green-bg);border-color:var(--mint);color:var(--green-t)}.option.wrong{background:var(--red-bg);border-color:var(--rose);color:#ff8aa2}.option-num{border:1px solid var(--line);color:var(--muted);border-radius:50%}.piece-dot{background:color-mix(in srgb,var(--c) 22%,var(--surface))}.speaker{background:linear-gradient(135deg,var(--violet),#5a8bff);box-shadow:0 10px 30px #8b6cff66;border-radius:50%}.speaker:active{transform:scale(.95);box-shadow:0 4px 14px #8b6cff66}.kit2d text.name{fill:var(--muted)}.cell{background:var(--surface-3)}.cell.beat{background:#3a3166}.grid-count{color:#6c6690}.grid-count.beat{color:var(--text)}.grid.editable .cell{border-color:var(--line)}.highway-wrap{box-shadow:0 10px 30px #0006;border:1px solid var(--line)}.modal{background:var(--surface);border:1px solid var(--line);color:var(--text)}.modal p{color:var(--muted)}.toast{background:var(--surface-2);border:1px solid var(--line);border-bottom-width:1px;color:var(--text);box-shadow:0 10px 30px #00000080;border-radius:18px}.studio-result{background:var(--surface);color:var(--text);border:1px solid var(--line)}.result-tip{background:#8b6cff26;color:#c7b8ff}.result-breakdown .p{background:#ffbe3d26;color:var(--amber)}.result-breakdown .g{background:var(--green-bg);color:var(--green-t)}.result-breakdown .m{background:var(--red-bg);color:#ff8aa2}.studio-tutorial{background:var(--surface);color:var(--text);box-shadow:0 10px 30px #00000080,0 0 0 2px var(--primary)}.page{padding-top:24px}.league-head{border-bottom-color:var(--line)}.league-list{list-style:none;padding:0}.lrow.me{background:#ff4f8b24;border:1px solid rgba(255,79,139,.5)}.lav{background:var(--surface-2)}.zone.up{background:var(--green-bg);color:var(--green-t)}.zone.down{background:var(--red-bg);color:#ff8aa2}.quest-list,.chest-card{background:var(--surface);border:1px solid var(--line)}.chest-card.ready{background:linear-gradient(135deg,rgba(255,190,61,.18),var(--surface));border-color:var(--amber)}.power,.shop-item{background:var(--surface);border:1px solid var(--line)}.shop-item.equipped{border-color:var(--primary);background:#ff4f8b1a}.swatch.emoji{display:grid;place-items:center;font-size:38px;background:var(--surface-3)}.swatch.emoji img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 3px 4px #0006)}.p-icon img{width:56px;height:56px;object-fit:contain;display:block;filter:drop-shadow(0 3px 4px #0006)}.shop-item:hover .swatch.emoji img{transform:scale(1.08) rotate(-4deg);transition:transform .2s}.wardrobe{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:center}.wardrobe-preview{background:radial-gradient(circle at 50% 60%,rgba(255,79,139,.25),transparent 70%),var(--surface);border:1px solid var(--line);border-radius:24px;display:grid;place-items:center;height:240px}.pstat,.ach,.week-chart{background:var(--surface);border:1px solid var(--line)}.ach.got{background:#ffbe3d1a;border-color:var(--amber)}.level-bar{background:var(--surface-3)}.level-bar div{background:linear-gradient(90deg,var(--violet),var(--primary))}.bar{background:var(--violet)}.bar.goal{background:var(--amber)}.cal-day{color:#6c6690}.settings select{background:var(--surface-3);color:var(--text);border-color:var(--line)}.wday span{background:var(--surface-3)}.beatlab{max-width:1100px}.bl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}.bl-title{font:inherit;font-size:20px;font-weight:700;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:10px 14px;min-width:240px}.bl-transport{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:14px 0;padding:14px}.bl-slider{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted);min-width:150px}.bl-slider b{color:var(--text)}.bl-check{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--muted)}.bl-preset{font:inherit;padding:9px 12px;border-radius:999px}.bl-rec.recording{background:linear-gradient(135deg,var(--rose),#ff7a59);color:#fff;animation:recPulse 1s infinite}.bl-grid-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px}.bl-grid{display:grid;grid-template-columns:170px repeat(16,minmax(28px,1fr));gap:5px;min-width:720px}.bl-step{text-align:center;font-size:12px;color:#6c6690}.bl-step.beat{color:var(--text);font-weight:800}.bl-row-head{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:4px 8px;color:var(--text);font-size:13px;font-weight:600;text-align:left}.bl-row-head .bl-dot{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);flex:none}.bl-row-head .bl-name{flex:1}.bl-row-head kbd{font-size:10px;min-width:20px;padding:1px 4px}.bl-row-head .bl-mute{font-size:13px;opacity:.7}.bl-row-head.muted{opacity:.45}.bl-row-head.hit{animation:rowHit .25s}@keyframes rowHit{30%{background:var(--c);transform:scale(1.04)}}.bl-cell{aspect-ratio:1;border-radius:8px;background:var(--surface-3);cursor:pointer;transition:background .1s,transform .08s;touch-action:none}.bl-cell.alt{background:#241e44}.bl-cell:hover{outline:1px solid var(--c)}.bl-cell.on{background:color-mix(in srgb,var(--c) 70%,#000);box-shadow:inset 0 0 0 2px var(--c)}.bl-cell.accent{background:var(--c);box-shadow:0 0 12px var(--c)}.bl-cell.head{outline:2px solid rgba(255,255,255,.5)}.bl-cell.fire{animation:cellFire .25s}@keyframes cellFire{40%{transform:scale(1.18);filter:brightness(1.6)}}.bl-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.bl-tip{font-size:14px}.bl-saved{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}.bl-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}.bl-card.editing{border-color:var(--primary)}.bl-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.bl-card-head small{color:var(--muted)}.bl-mini .grid.small{grid-template-columns:22px repeat(var(--cols),minmax(6px,12px));gap:2px;justify-content:start}.bl-mini .grid-count,.bl-mini .grid>.grid-label:first-child{display:none}.bl-mini .grid.small .grid-label{font-size:13px;line-height:1}.bl-card-btns .btn[data-act=dl]{margin-left:auto}.bl-card-btns{display:flex;gap:6px}.arcade-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:18px}.arcade-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}.arcade-card.speed{background:linear-gradient(160deg,rgba(255,79,139,.22),var(--surface) 60%)}.arcade-card.tempo{background:linear-gradient(160deg,rgba(139,108,255,.25),var(--surface) 60%)}.arcade-card p{color:var(--muted);margin:0;flex:1}.ac-art{font-size:46px}.ac-best{color:var(--amber)}.arcade-game{max-width:760px}.arcade-game.shake{animation:nope .3s}.ag-top{display:flex;align-items:center;gap:14px}.ag-timer{flex:1;height:12px;background:var(--surface-3);border-radius:6px;overflow:hidden}.ag-timer div{height:100%;background:linear-gradient(90deg,var(--mint),var(--violet));transition:width .1s linear}.ag-timer div.low{background:linear-gradient(90deg,var(--rose),var(--amber));animation:recPulse .5s infinite}.ag-score{text-align:right}.ag-score b{font-size:28px;font-weight:800;display:block}.ag-score small{color:var(--amber)}.ag-center{text-align:center;margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:12px}.ag-speaker{width:120px;height:120px;border-radius:50%;border:none;font-size:48px;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 10px 40px #ff4f8b73}.ag-speaker.pulse{animation:speakerPulse .4s}.ag-options{display:grid;grid-template-columns:repeat(2,minmax(160px,260px));gap:12px;margin-top:10px}.ag-opt{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:17px;text-align:left}.ag-opt span{font-size:24px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 25%,var(--surface));border:2px solid var(--c)}.ag-opt b{flex:1}.ag-opt:hover{border-color:var(--c)}.ag-opt.right{background:var(--green-bg);border-color:var(--mint)}.ag-opt.wrong{background:var(--red-bg);border-color:var(--rose)}.ag-new{color:var(--amber);font-weight:700}.ag-new.pop{animation:popIn .4s cubic-bezier(.3,1.6,.5,1)}.tg-cases{display:flex;gap:8px;flex:1;justify-content:center}.tg-cases i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--muted);font-weight:700}.tg-cases i.done{background:var(--mint);color:#062}.tg-cases i.cur{background:var(--primary);color:#fff}.tg-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.tg-dial{display:flex;align-items:baseline;gap:8px;margin-top:10px}.tg-dial b{font-family:var(--display);font-size:72px;line-height:1;background:linear-gradient(180deg,#fff,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}.tg-dial small{color:var(--muted);font-size:20px}.tg-slider{width:min(520px,90%)}.tg-hints{width:min(520px,90%);display:flex;justify-content:space-between;color:var(--muted);font-size:14px}.tg-reveal{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;animation:popIn .3s}.tg-pts{color:var(--amber);font-weight:800;font-size:20px}.arcade-results{display:grid;place-items:center;min-height:70%}.ar-card{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:30px 40px;text-align:center;min-width:min(380px,90vw)}.ar-big{font-family:var(--display);font-size:80px;line-height:1;background:linear-gradient(180deg,#fff,var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}.ar-big small{font-size:28px}.studio-panel h3,.panel-head h3{font-family:var(--display);font-size:16px;letter-spacing:1px}.seg button.active{background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:none}.mode-tabs button.active{background:#ff4f8b40}optgroup{background:var(--surface-2);color:var(--muted)}@media (max-width: 1150px){.app-body{grid-template-columns:minmax(0,1fr)!important}.sidebar,.nav-btn b{display:none!important}.nav-btn{padding:8px 10px}}@media (max-width: 700px){#app{height:100vh}.topnav{padding:8px 12px;gap:8px;flex-wrap:wrap;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}.logo-text{font-size:16px}.topbar{flex:1;justify-content:flex-end;gap:4px}.stat,button.stat{font-size:12px;padding:4px 8px}.battery{display:none}.sidenav{position:fixed!important;left:0;right:0;bottom:0;background:#0d0a18f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line)!important;padding:6px!important;justify-content:space-around;z-index:40;order:0!important;overflow-x:auto}.nav-btn span{font-size:22px}.app-body{padding-bottom:62px}main{height:auto!important}.hero{flex-direction:column;text-align:center}.track{grid-template-columns:26px 28px 1fr auto 38px;gap:6px;padding:8px}.t-records i{width:12px;height:12px}.vinyl{width:60px;height:60px}.wardrobe{grid-template-columns:1fr}.ag-options{grid-template-columns:1fr 1fr}.ag-opt{font-size:14px;padding:10px}.tg-dial b{font-size:56px}}.shop-grid.outfits{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.bl-transport .bl-clear{margin-left:auto}:root{--ink: #0b0908;--bg: #1c1815;--surface: #28221d;--surface-2: #322a23;--surface-3: #3e342b;--line: var(--ink);--text: #f3ead8;--muted: #b8ab95;--cream: #f6efdf;--primary: #ff5a36;--primary-2: #ff5a36;--violet: #6aa8ff;--mint: #3cc6b4;--rose: #ff4f6d;--amber: #ffc23d;--pink: #ff86b8;--green: var(--mint);--green-bg: rgba(60, 198, 180, .16);--green-t: #74e3d3;--red-bg: rgba(255, 79, 109, .16);--font: "Archivo", system-ui, sans-serif;--hand: "Permanent Marker", "Comic Sans MS", cursive;--shadow: 4px 4px 0 var(--ink);--radius: 14px}body{font-family:var(--font);background-color:var(--bg);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(1000px 520px at 85% -10%,rgba(255,194,61,.08),transparent 60%)}h1{font-family:"Bungee",var(--font);font-weight:400;letter-spacing:.5px;font-size:30px}h2{font-weight:800}.hand-title{font-family:var(--hand);font-size:44px;letter-spacing:0;transform:rotate(-1.5deg);display:inline-block;color:var(--amber)}.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}.ico .f{fill:currentColor}.btn{border:2px solid var(--ink)!important;border-radius:12px;box-shadow:3px 3px 0 var(--ink)!important;font-weight:800;letter-spacing:.2px;filter:none!important}.btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)!important}.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)!important}.btn.primary{background:var(--primary);color:var(--cream)}.btn.secondary{background:var(--mint);color:var(--ink)}.btn.danger{background:var(--rose);color:var(--cream)}.btn.ghost{background:var(--surface-2);color:var(--text)}.btn:disabled{box-shadow:none!important;border-color:#4a4038!important}.topnav{background:#120f0d;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:2px solid var(--ink);box-shadow:0 2px #2c241e}.logo-text{background:none;color:var(--cream);-webkit-text-fill-color:var(--cream);text-shadow:2px 2px 0 var(--primary)}.logo-mark{filter:none;transform:rotate(-8deg)}.nav-btn{border-radius:10px;color:var(--muted);border:2px solid transparent;position:relative}.nav-btn:hover{background:var(--surface);color:var(--text)}.nav-btn.active{background:var(--amber);border-color:var(--ink);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}.stat,button.stat{background:var(--surface);border:2px solid var(--ink);border-radius:10px;box-shadow:2px 2px 0 var(--ink)}.stat-streak.lit{background:#3a2410}.widget,.card,.album,.hero,.bl-grid-wrap,.bl-card,.arcade-card,.ar-card,.power,.shop-item,.pstat,.ach,.week-chart,.quest-list,.chest-card,.lrow,.wardrobe-preview,.tg-reveal,.ag-opt,.option,.modal,.toast,.studio-result{border:2px solid var(--ink)!important;box-shadow:var(--shadow);border-radius:var(--radius)}.widget{background:var(--surface)}.sidebar .widget:nth-child(odd){transform:rotate(-.6deg)}.sidebar .widget:nth-child(2n){transform:rotate(.5deg)}.widget[data-goto]:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);border-color:var(--ink)}.stage-widget{background:#23324a}.ring{background:conic-gradient(var(--primary) calc(var(--p) * 1%),var(--surface-3) 0);border:2px solid var(--ink)}.ring span{background:var(--surface)}.q-bar{border:1.5px solid var(--ink);background:var(--surface-3)}.q-bar div{background:var(--amber)}.q-bar span{color:var(--ink);font-weight:800}.quest.done .q-bar div{background:var(--mint)}.hero,.thump-note,.sb-song:nth-child(3n+1){position:relative}.hero:before,.thump-note:before{content:"";position:absolute;top:-11px;left:50%;width:90px;height:22px;transform:translate(-50%) rotate(-3deg);background:#f3ead88c;border-left:2px dashed rgba(0,0,0,.12);border-right:2px dashed rgba(0,0,0,.12);z-index:2}.hero{background:var(--surface);transform:rotate(-.4deg)}.hero-kicker{font-family:var(--hand);font-size:18px;letter-spacing:0;color:var(--amber)}.album{background:var(--surface)}.album.current{box-shadow:6px 6px 0 var(--uc);border-color:var(--ink)!important}.album-info small{font-family:"Bungee",var(--font);color:var(--uc)}.album-progress{border:1.5px solid var(--ink);height:9px}.track{border:2px solid transparent}.track.current{background:color-mix(in srgb,var(--uc) 18%,var(--surface));border-color:var(--ink)}.track.current .t-play{background:var(--primary);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);animation:none}.t-play{border:2px solid var(--ink)!important}.eq i{background:var(--amber)}.thump-note{background:#fff3a8;color:#2a2116;border:2px solid var(--ink);box-shadow:var(--shadow);border-radius:4px 4px 14px;padding:16px 16px 12px;transform:rotate(1.2deg);font-family:var(--hand);font-size:17px;line-height:1.35;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.thump-note small{display:block;font-family:var(--font);font-size:11px;color:#6a5a3c;margin-top:8px;letter-spacing:1px}#lesson{background-color:var(--bg);background-image:none}.progress{border:2px solid var(--ink);height:14px;background:var(--surface-3);border-radius:8px}.progress-fill{background:var(--amber);box-shadow:none;border-radius:6px}.progress.hot .progress-fill{background:var(--primary)}.option{background:var(--surface)}.option:hover:not(:disabled){border-color:var(--ink)!important;background:var(--surface-2);transform:translate(-1px,-1px)}.option.selected{background:#263852;color:var(--text);box-shadow:4px 4px 0 var(--violet)}.option.right{background:#1f3b37;box-shadow:4px 4px 0 var(--mint)}.option.wrong{background:#432029;box-shadow:4px 4px 0 var(--rose)}.speaker{background:var(--violet);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}.speech .bubble{background:var(--cream);color:#2a2116;border:2px solid var(--ink);box-shadow:var(--shadow)}.speech .bubble:before{background:var(--cream);border-color:var(--ink)}.lesson-foot{background:#120f0d;border-top:2px solid var(--ink)}.lesson-foot.good .feedback:not(:empty),.lesson-foot.bad .feedback:not(:empty){border:2px solid var(--ink);box-shadow:var(--shadow)}.lesson-foot.good .feedback:not(:empty){background:#1f3b37}.lesson-foot.bad .feedback:not(:empty){background:#432029}.bl-cell{border:1.5px solid #15110e;border-radius:6px}.bl-cell.on{background:color-mix(in srgb,var(--c) 55%,var(--surface));box-shadow:none;border-color:var(--ink)}.bl-cell.accent{background:var(--c);box-shadow:2px 2px 0 var(--ink)}.bl-row-head{border:2px solid var(--ink)}.bl-title{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--cream);color:#2a2116;font-family:var(--hand);font-size:22px}.arcade-card.speed{background:#3a1f19}.arcade-card.tempo{background:#1f2a3a}.ag-speaker{background:var(--primary);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}.ag-timer{border:2px solid var(--ink);height:16px}.ag-timer div{background:var(--mint)}.ar-big,.tg-dial b{background:none;-webkit-text-fill-color:var(--amber);color:var(--amber);text-shadow:3px 3px 0 var(--ink)}.cel-continue{box-shadow:4px 4px 0 var(--ink)!important}.songbook{max-width:1060px}.sb-head{margin-bottom:18px}.sb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}.sb-song{display:grid;grid-template-columns:14px 1fr auto;grid-template-rows:auto auto;gap:2px 12px;align-items:center;text-align:left;background:var(--cream);color:#2a2116;border:2px solid var(--ink);border-radius:8px 14px 14px 8px;box-shadow:var(--shadow);padding:12px 14px 12px 0;overflow:hidden}.sb-song:nth-child(odd){transform:rotate(-.5deg)}.sb-song:nth-child(2n){transform:rotate(.4deg)}.sb-song:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}.sb-spine{grid-row:span 2;align-self:stretch;background:var(--sc);border-right:2px solid var(--ink);margin:-12px 0}.sb-info b{display:block;font-size:18px;font-weight:800}.sb-info small{color:#6a5a3c}.sb-meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}.sb-meta small{color:#6a5a3c}.sb-level{font-size:11px;font-weight:800;letter-spacing:1px;padding:2px 8px;border-radius:6px;border:1.5px solid var(--ink);text-transform:uppercase}.sb-level.l1{background:#9fe3b7}.sb-level.l2{background:#ffd36b}.sb-level.l3{background:#ff9a7a}.sb-stars{grid-column:2 / 4;display:flex;align-items:center;gap:3px}.sb-stars i{font-style:normal;color:#cfc3a8;font-size:16px}.sb-stars i.on{color:#e09a10}.sb-stars small{margin-left:6px;color:#6a5a3c}.sb-legal{margin-top:22px;font-size:13px}.sbp-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.sbp-title{flex:1;min-width:200px}.sbp-title h1{margin:0;font-size:26px}.sbp-title p{margin:2px 0 0}.sbp-hud{display:flex;gap:10px}.sbp-hud div{background:var(--surface);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:10px;padding:6px 12px;text-align:center;min-width:74px}.sbp-hud b{display:block;font-size:20px}.sbp-hud small{color:var(--muted);font-size:11px}.sbp-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 10px}.sb-field{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}.sb-field select{font:inherit;padding:6px 10px;border-radius:10px;border:2px solid var(--ink);background:var(--surface-2);color:var(--text)}.sb-check{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}.sb-own{background:var(--surface);border:2px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);padding:10px 14px;margin-bottom:14px}.sb-own summary{cursor:pointer;font-weight:700}.sb-own-body{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:10px}.sb-own-body .small{width:100%;font-size:13px;margin:0}.sb-file-btn{cursor:pointer}.sheet-wrap{position:relative;max-height:58vh;overflow:auto;border-radius:6px;padding:16px;scroll-behavior:smooth;background:var(--cream);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.25  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);color:#1d1915}.sheet-paper{display:flex;justify-content:center}.sheet{max-width:100%;height:auto}.sheet .st{stroke:#2a241d;stroke-width:1.1}.sheet .bar{stroke:#2a241d;stroke-width:1.4}.sheet .final-bar,.sheet .clef{fill:#2a241d}.sheet .tsig{font:900 21px Georgia,Times New Roman,serif;fill:#1d1915;text-anchor:middle}.sheet .mnum{font:600 10px var(--font);fill:#8a7a5c}.sheet .rehearsal rect{fill:#1d1915}.sheet .rehearsal text{font:700 12px var(--font);fill:var(--cream)}.sheet .stem{stroke:#1d1915;stroke-width:1.4}.sheet .beam,.sheet .flag,.sheet .dot,.sheet .head{fill:#1d1915}.sheet .xhead{stroke:#1d1915;stroke-width:1.9;fill:none;stroke-linecap:round}.sheet .open{fill:none;stroke:#1d1915;stroke-width:1.4}.sheet .ledger{stroke:#1d1915;stroke-width:1.2}.sheet .rest,.sheet .rest circle{fill:#1d1915}.sheet .rest path{stroke:#1d1915;stroke-width:1.6}.sheet .halo{fill:transparent}.sheet .sys-bg{fill:transparent;transition:fill .3s}.sheet .system.current .sys-bg{fill:#ffc23d29}.sheet .playhead{stroke:var(--primary);stroke-width:3;stroke-linecap:round;opacity:.85}.sheet .note.played .head,.sheet .note.played .beam{fill:#2e7dd6}.sheet .note.played .xhead{stroke:#2e7dd6}.sheet .note.played .halo{fill:#2e7dd62e}.sheet .note.perfect .head{fill:#c88400}.sheet .note.perfect .xhead{stroke:#c88400}.sheet .note.perfect .halo{fill:#ffc23d73}.sheet .note.good .head{fill:#1e9483}.sheet .note.good .xhead{stroke:#1e9483}.sheet .note.good .halo{fill:#3cc6b459}.sheet .note.miss .head{fill:#d62f4c}.sheet .note.miss .xhead{stroke:#d62f4c}.sheet .note.miss .halo{fill:#ff4f6d40}.sb-judge{position:sticky;bottom:8px;left:0;float:right;font-family:var(--hand);font-size:30px;opacity:0;pointer-events:none;text-shadow:2px 2px 0 rgba(0,0,0,.15)}.sb-judge.show{animation:sbJudge .6s ease-out}.sb-judge.perfect{color:#c88400}.sb-judge.good{color:#1e9483}.sb-judge.miss{color:#d62f4c}@keyframes sbJudge{0%{opacity:1;transform:scale(1.3) rotate(-4deg)}70%{opacity:1}to{opacity:0;transform:translateY(-14px)}}.sb-count{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-family:"Bungee",var(--font);font-size:90px;color:var(--primary);text-shadow:4px 4px 0 var(--ink);pointer-events:none}.sheet-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.sheet-key{display:flex;align-items:center;gap:6px;background:var(--cream);color:#2a2116;border:2px solid var(--ink);border-radius:10px;padding:2px 10px 2px 2px;box-shadow:2px 2px 0 var(--ink);font-size:13px}.sheet-key svg .st{stroke:#2a241d;stroke-width:1}.sheet-key svg .head{fill:#1d1915}.sheet-key svg .xhead{stroke:#1d1915;stroke-width:1.8}.sheet-key svg .open{fill:none;stroke:#1d1915}.sheet-key svg .ledger{stroke:#1d1915}.sheet-key svg .halo{fill:transparent}.sheet-key svg .note .head,.sheet-key svg .note .xhead{fill:var(--c);stroke:var(--c)}.sheet-key svg .note .xhead{fill:none}.sheet-key kbd{font-size:11px}.sb-tip{margin-top:14px;font-size:15px}.sb-result-stars{font-size:46px;letter-spacing:6px}.sb-result-stars span{color:#4a4038}.sb-result-stars span.on{color:var(--amber);text-shadow:2px 2px 0 var(--ink)}@media (max-width: 700px){.nav-btn.active{box-shadow:2px 2px 0 var(--ink)}.sheet-wrap{padding:8px;max-height:54vh}.sbp-hud div{min-width:60px;padding:4px 8px}.hand-title{font-size:36px}}.nav-btn b{white-space:nowrap}@media (max-width: 1300px){.nav-btn{padding:8px 10px}.nav-btn b{font-size:13px}}.lesson-foot,.lesson-foot.good,.lesson-foot.bad{background:#120f0d;-webkit-backdrop-filter:none;backdrop-filter:none}html{-webkit-text-size-adjust:100%}button,a,.track,.kit2d,.kit-piece,.studio-canvas,.studio-canvas canvas,.bl-cell,.option{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.kit2d,.studio-canvas,.highway{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}@media (max-width: 700px){#app{height:100dvh}.app-body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}.topnav{padding-top:max(8px,env(safe-area-inset-top))}.sidenav{overflow:visible!important;gap:2px!important;padding:6px 4px calc(6px + env(safe-area-inset-bottom))!important}.sidenav .nav-btn{flex:1 1 0;min-width:0;padding:8px 0!important;justify-content:center}.nav-btn .ico{width:22px;height:22px}.lesson-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}.lesson-top{padding-top:max(14px,env(safe-area-inset-top))}.kit2d{width:100%;max-width:440px}.studio-panel{max-height:55%!important;overflow-y:auto;-webkit-overflow-scrolling:touch}.panel-tab{top:10px;left:10px}.studio-result{width:calc(100% - 24px)!important;max-height:80%;overflow-y:auto}.bl-grid{grid-template-columns:96px repeat(16,minmax(26px,1fr));min-width:560px;gap:4px}.bl-row-head{padding:4px 6px;font-size:12px}.bl-row-head kbd{display:none}}@media (max-width: 700px),(hover: none){.sidenav,.studio-panel,.glass,.cel-stat,.lesson-foot{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.sidenav{background:#0d0a18fa!important}.studio-panel,.glass{background:#15112af0!important}}.t-icon{display:grid;place-items:center}.kind-ico{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 2px #0005);display:block}.lesson-chart{background:var(--cream);border:2px solid var(--ink);border-radius:6px;box-shadow:2px 2px 0 var(--ink);padding:2px 8px;overflow:hidden}.lesson-chart .sheet{width:100%;height:auto;display:block}.lesson-chart .sys-bg{fill:transparent}.track .track-chart{grid-column:1 / -1;max-width:340px;margin:4px 0 2px 44px;transform:rotate(-.6deg)}.hero .hero-chart{max-width:300px;margin:0 0 12px;transform:rotate(.8deg)}.track.current .t-num{color:var(--primary);font-weight:900}.track.done{position:relative}.track.done .t-icon{border-radius:50%;outline:3px solid var(--mint);outline-offset:2px;background:color-mix(in srgb,var(--mint) 18%,transparent)}.track.done .t-icon,.track.done .t-title{filter:blur(.6px) saturate(.55);opacity:.62;transition:filter .2s,opacity .2s}.track.done:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 3%,transparent) 55%,transparent);transition:opacity .2s}.track.done:hover .t-icon,.track.done:hover .t-title{filter:none;opacity:1}.track.done:hover:after{opacity:0}.t-check{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--mint);color:var(--mint);font-size:13px;font-weight:900}.track.kind-master .t-title b{color:var(--amber)}@media (max-width: 640px){.track .track-chart{margin-left:0}.hero .hero-chart{margin:0 auto 12px}}.screen-enter{animation:.38s cubic-bezier(.2,.9,.3,1.1) both tabIn}html[data-nav-dir=back] .screen-enter{animation-name:tabInBack}@keyframes tabIn{0%{opacity:0;transform:translate(56px) rotate(.6deg) scale(.98)}}@keyframes tabInBack{0%{opacity:0;transform:translate(-56px) rotate(-.6deg) scale(.98)}}.nav-btn{transition:background .2s,color .2s,box-shadow .2s,transform .2s}.nav-btn.active{animation:navPop .3s cubic-bezier(.3,1.8,.5,1)}@keyframes navPop{40%{transform:scale(1.08) rotate(-2deg)}}main{overflow-x:clip}#screen-studio.screen-enter,html[data-nav-dir=back] #screen-studio.screen-enter{animation:.4s ease-out both tabFade}@keyframes tabFade{0%{opacity:0}}@media (prefers-reduced-motion: reduce){.screen-enter,.nav-btn.active{animation:none!important}}.mode-tabs button span{display:grid;place-items:center;height:30px;line-height:1}.mode-tabs button span img{width:30px;height:30px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));transition:transform .2s cubic-bezier(.3,1.6,.5,1)}.mode-tabs button:hover span img{transform:scale(1.1) rotate(-4deg)}.mode-tabs button.active span img{transform:scale(1.14)}#screen-studio .s-ic{width:1.35em;height:1.35em;object-fit:contain;vertical-align:-.32em;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}#screen-studio .seg button .s-ic{width:1.5em;height:1.5em;vertical-align:-.42em;margin-right:1px}#screen-studio .echo-banner .s-ic,#screen-studio .studio-result .s-ic{width:1.2em;height:1.2em;vertical-align:-.25em}@media (max-width: 700px){.mode-tabs button span,.mode-tabs button span img{width:26px;height:26px}}.acct-btn{cursor:pointer;font:inherit;font-weight:800;color:var(--text);max-width:190px;flex:none}.acct-btn .acct-av{font-size:18px;line-height:1}.acct-btn .acct-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}.acct-btn:not(.in){background:var(--amber);color:var(--ink)}.acct-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}body[data-screen=studio] .acct-btn{display:none}@media (max-width: 1500px){.acct-btn .acct-name{display:none}.topnav{gap:12px}}@media (min-width: 1151px) and (max-width: 1400px){.nav-btn{padding-left:8px;padding-right:8px}}@media (max-width: 700px){.acct-btn{padding:4px 8px}.acct-btn .acct-name{display:none}}.acct-modal{position:relative;width:min(420px,100%);max-height:calc(100vh - 32px);overflow-y:auto;text-align:center;padding:22px 22px 20px}.acct-modal h2{margin:6px 0 4px}.acct-modal p{margin:4px 0 10px}.acct-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:10px;border:2px solid var(--ink);background:var(--surface-2);color:var(--text);font-weight:900;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}.acct-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:10px 0 14px;border:2px solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:3px 3px 0 var(--ink)}.acct-tabs button{padding:9px;border:none;background:var(--surface-2);color:var(--muted);font:inherit;font-weight:800;cursor:pointer}.acct-tabs button+button{border-left:2px solid var(--ink)}.acct-tabs button.on{background:var(--amber);color:var(--ink)}.acct-form{display:flex;flex-direction:column;gap:10px;text-align:left}.acct-form label,.acct-label{display:flex;flex-direction:column;gap:4px;font-weight:800;font-size:14px;color:var(--text)}.acct-label{margin-top:2px}.acct-form small,.acct-label small{font-weight:500;color:var(--muted);font-size:12px}.acct-form input{font:inherit;font-size:16px;padding:10px 12px;border-radius:10px;border:2px solid var(--ink);background:var(--surface-2);color:var(--text);box-shadow:inset 2px 2px #0000001f}.acct-form input:focus{outline:3px solid var(--amber);outline-offset:1px}.acct-msg{min-height:0;font-size:14px;font-weight:700;border-radius:10px}.acct-msg:empty{display:none}.acct-msg.err{color:var(--text);background:var(--red-bg);border:2px solid var(--rose);padding:8px 10px}.acct-msg.ok{color:var(--text);background:var(--green-bg);border:2px solid var(--mint);padding:8px 10px}.acct-link,.rk-link{background:none;border:none;color:var(--primary);font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:2px}.acct-form .btn.wide{width:100%;padding:12px}.acct-fine{font-size:12px;color:var(--muted);text-align:center;margin:0}.acct-avatars{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:4px 0 6px}.acct-avatars button{aspect-ratio:1;font-size:20px;border-radius:10px;border:2px solid transparent;background:var(--surface-2);cursor:pointer;padding:0}.acct-avatars button:hover{border-color:var(--ink)}.acct-avatars button.on{border-color:var(--ink);background:var(--amber);box-shadow:2px 2px 0 var(--ink)}.acct-me{display:flex;align-items:center;gap:14px;text-align:left;margin:6px 0 8px}.acct-big-av{font-size:40px;width:64px;height:64px;display:grid;place-items:center;border-radius:16px;background:var(--amber);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);flex:none}.acct-me h2{margin:0;word-break:break-all}.acct-me p{margin:0;font-size:14px;word-break:break-all}.acct-sync{font-size:14px}.acct-row{flex-direction:row!important}.acct-row .btn{flex:1}.rk-badge{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}.rk-svg{display:block;filter:drop-shadow(2px 2px 0 var(--ink))}.rk-name b{font-weight:900}.rk-name small{color:var(--muted);font-weight:800}.rk-page{max-width:820px}.rk-hero{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;transform:rotate(-.3deg);position:relative}.rk-hero:before{content:"";position:absolute;top:-11px;left:50%;width:90px;height:22px;transform:translate(-50%) rotate(-3deg);background:#f3ead88c;border-left:2px dashed rgba(0,0,0,.12);border-right:2px dashed rgba(0,0,0,.12)}.rk-hero-badge .rk-svg{animation:rkFloat 3s ease-in-out infinite}@keyframes rkFloat{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}.rk-title{margin:0;font-size:30px;line-height:1.1;color:var(--text);text-shadow:2px 2px 0 var(--rk)}.rk-hero-stats{display:flex;gap:8px}.rk-stat{display:flex;flex-direction:column;align-items:center;min-width:78px;padding:6px 8px;background:var(--surface-2);border:2px solid var(--ink);border-radius:12px;box-shadow:2px 2px 0 var(--ink);text-align:center}.rk-stat small{font-size:11px;font-weight:900;letter-spacing:1px;color:var(--muted)}.rk-stat b{font-size:22px;font-weight:900;line-height:1.2}.rk-stat span{font-size:11px;color:var(--muted)}.rk-prize-stat.held{background:var(--amber)}.rk-prize-stat.held small,.rk-prize-stat.held span{color:var(--ink)}.rk-rp{margin-top:8px}.rk-rp-top{display:flex;justify-content:space-between;gap:8px;font-size:13px;flex-wrap:wrap}.rk-rp-top small{color:var(--muted)}.rk-rp-bar{height:14px;margin-top:4px;border:2px solid var(--ink);border-radius:8px;background:var(--surface-3);overflow:hidden}.rk-rp-bar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--amber) 0 8px,var(--primary) 8px 16px);border-right:2px solid var(--ink);transition:width .6s}.rk-note{margin:16px 0 0;padding:8px 12px;border:2px dashed var(--muted);border-radius:12px;font-size:14px;color:var(--muted);text-align:center}.rk-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0 14px}.rk-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border:2px solid var(--ink);border-radius:12px;background:var(--surface-2);color:var(--text);font:inherit;font-weight:800;font-size:14px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}.rk-tabs button:hover{transform:translate(-1px,-1px)}.rk-tabs button.on{background:var(--amber);color:var(--ink);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.rk-tabs span{font-size:18px}.rk-board-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 0 10px}.rk-board-head h2{margin:0}.rk-days{font-family:var(--hand);color:var(--amber);font-size:18px}.rk-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.rk-legend div{border:2px solid var(--ink);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;font-size:13px;box-shadow:2px 2px 0 var(--ink)}.rk-legend span{color:var(--muted)}.rk-legend b{color:var(--text)}.lg-up{background:var(--green-bg)}.lg-safe{background:var(--surface-2)}.lg-down{background:var(--red-bg)}.rk-list{display:flex;flex-direction:column;gap:6px;margin:0}.rk-row{background:var(--surface)}.rk-row .lname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.rk-row .lxp{text-align:right;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;color:var(--text);white-space:nowrap}.rk-row .lxp b{font-weight:900}.rk-row.me{background:var(--surface-2);outline:3px solid var(--amber);outline-offset:-1px}.rk-row.z-up{border-left:8px solid var(--mint)!important}.rk-row.z-safe{border-left:8px solid var(--muted)!important}.rk-row.z-down{border-left:8px solid var(--rose)!important}.rk-zone{font-weight:900;margin:8px 0 2px!important;border:2px solid var(--ink)}.zone.safe{background:var(--surface-2);color:var(--text)}.rk-reward,.rk-sub{font-size:11px;color:var(--muted);font-weight:700}.z-up .rk-reward{color:var(--green-t)}.rk-you{font-style:normal;font-size:10px;font-weight:900;background:var(--amber);color:var(--ink);border:1.5px solid var(--ink);border-radius:6px;padding:1px 5px;vertical-align:middle}.rk-mini{flex:none}.rk-prize-chip{display:inline-grid;vertical-align:middle}.rk-prize-chip .bp-img{display:block}.rk-gap{text-align:center;color:var(--muted);font-weight:900;letter-spacing:4px;list-style:none}.rk-loading{text-align:center;padding:40px 0;color:var(--muted)}.rk-explain{font-size:14px;color:var(--muted);margin:0 0 12px}.rk-foot{margin-top:14px;font-size:13px}.rk-seg{display:flex;border:2px solid var(--ink);border-radius:10px;overflow:hidden;box-shadow:2px 2px 0 var(--ink)}.rk-seg button{border:none;background:var(--surface-2);color:var(--muted);font:inherit;font-weight:800;font-size:13px;padding:6px 12px;cursor:pointer}.rk-seg button+button{border-left:2px solid var(--ink)}.rk-seg button.on{background:var(--amber);color:var(--ink)}.rk-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px}.rk-step{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:2px solid var(--ink);border-radius:12px;background:var(--surface);opacity:.55;filter:grayscale(.7);font-size:13px}.rk-step.past{opacity:.85;filter:none}.rk-step.cur{opacity:1;filter:none;background:var(--surface-2);box-shadow:3px 3px 0 var(--ink);transform:translateY(-3px)}.rk-step span{display:flex;gap:3px}.rk-step i{font-style:normal;font-size:10px;font-weight:900;padding:1px 4px;border-radius:5px;border:1.5px solid var(--muted);color:var(--muted)}.rk-step i.done{border-color:var(--ink);background:var(--surface-3);color:var(--text)}.rk-step i.on{border-color:var(--ink);background:var(--amber);color:var(--ink)}.bp-img{object-fit:contain;vertical-align:middle}.bp-banner{display:flex;align-items:center;gap:16px;padding:14px 16px;margin-bottom:12px;border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(135deg,var(--surface-2),var(--surface));position:relative;overflow:hidden}.bp-banner.mine{background:linear-gradient(135deg,var(--amber),var(--primary))}.bp-banner.mine h2,.bp-banner.mine p,.bp-banner.mine .hero-kicker{color:var(--ink)}.bp-banner h2{margin:2px 0;overflow-wrap:anywhere}.bp-banner p{margin:0;font-size:14px;color:var(--muted)}.bp-trophy{flex:none;width:84px;height:84px;display:grid;place-items:center;font-size:60px;animation:rkFloat 3s ease-in-out infinite;filter:drop-shadow(3px 3px 0 var(--ink))}.bp-modal{width:min(440px,100%)}.bp-shine{width:170px;height:170px;margin:-10px auto 0;display:grid;place-items:center;font-size:110px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,194,61,.35) 0 12deg,transparent 12deg 24deg);animation:bpSpin 12s linear infinite}.bp-shine>*{animation:bpSpin 12s linear infinite reverse}@keyframes bpSpin{to{transform:rotate(360deg)}}.bp-earned{display:flex;gap:10px;align-items:center;text-align:left;margin:10px 0 0;padding:8px 12px;border:2px dashed var(--amber);border-radius:12px;font-size:26px}.bp-earned div{display:flex;flex-direction:column;font-size:14px}.bp-earned small{color:var(--muted)}.rk-modal{width:min(420px,100%)}.rk-modal-badge{display:grid;place-items:center;margin:-4px 0 6px}.rk-modal .rk-rp{text-align:left}@media (max-width: 700px){.rk-hero{grid-template-columns:auto 1fr;padding:14px;gap:12px}.rk-hero-badge .rk-svg{width:52px;height:57px}.rk-hero-stats{grid-column:1 / -1}.rk-stat{flex:1;min-width:0}.rk-title{font-size:22px}.rk-tabs{grid-template-columns:repeat(2,1fr)}.rk-legend{grid-template-columns:1fr}.rk-legend div{flex-direction:row;gap:8px;align-items:baseline}.rk-row{gap:8px;padding:8px 10px}.rk-row .lav{width:36px;height:36px;font-size:22px;flex:none}.rk-row .lrank{width:26px;flex:none}.rk-row .lname{flex:1}.rk-ladder{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.rk-step{font-size:10px;padding:8px 2px}.rk-step i{font-size:8px;padding:0 2px}.bp-banner{gap:10px;padding:12px}.bp-trophy{width:60px;height:60px;font-size:44px}.bp-trophy .bp-img{width:60px;height:60px}.acct-avatars{grid-template-columns:repeat(6,1fr)}}@media (prefers-color-scheme: light){:root{--bg: #f3ead8;--surface: #fffaf0;--surface-2: #f4ead6;--surface-3: #e9dcc2;--soft: #f7efe0;--text: #1f1a14;--muted: #6f6250;--cream: #fff8ea;--primary: #f04a24;--primary-2: #f04a24;--violet: #3d7fe6;--mint: #179e8c;--rose: #e63a5a;--amber: #f2a900;--green: var(--mint);--green-bg: rgba(23, 158, 140, .14);--green-t: #0d7a6c;--red-bg: rgba(230, 58, 90, .12)}html{color-scheme:light}body{background-color:var(--bg);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.28  0 0 0 0 0.18  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(1000px 520px at 85% -10%,rgba(242,169,0,.14),transparent 60%)}.hand-title{color:var(--primary)}.topnav{background:#fff6e4;box-shadow:0 2px #d9c9a8}.logo-text{color:var(--ink);-webkit-text-fill-color:var(--ink);text-shadow:2px 2px 0 var(--amber)}.nav-btn{color:#5e5242}.nav-btn:hover{background:var(--surface-2);color:var(--text)}.stat-streak.lit{background:#ffe2b8}.btn.ghost{background:var(--surface)}.btn:disabled{border-color:#b9aa8f!important}.stage-widget{background:#dbe8ff}.stage-widget h3,.stage-widget p{color:var(--text)}.option.selected{background:#dbe7fb}.option.right{background:#d4f1ec}.cell.beat{background:#e3d6f5}.bl-cell.alt{background:#ece2cf}.lesson-foot{background:#fffaf0f0}.t-check{background:#fff}.track.done:after{background:linear-gradient(100deg,rgba(255,255,255,.55),rgba(255,255,255,.25) 55%,transparent)}.kind-ico{filter:drop-shadow(0 2px 2px #0003)}.vinyl{box-shadow:0 4px 10px #00000040,inset 0 0 0 2px #000}@media (max-width: 700px),(hover: none){.sidenav{background:#fff8eafa!important}}}#root{display:contents}