:root{color:#edf2f4;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#080b0f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0;overflow:hidden}button{font:inherit}#app{min-height:100svh}.game-shell{background-color:#080b0f;background-image:linear-gradient(90deg,#ffffff09 1px,#0000 1px),linear-gradient(#ffffff07 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:64px 64px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;grid-template-columns:minmax(0,1fr) 330px;min-height:100svh;display:grid}.stage{min-width:0;min-height:100svh;position:relative;overflow:hidden}.stage:after{content:"";pointer-events:none;background:linear-gradient(90deg,#080b0f5c,#0000 22% 78%,#080b0f57),linear-gradient(#ffffff0a,#0000 18%,#0000003d);position:absolute;inset:0}#game,#game canvas{width:100%;height:100%;min-height:100svh;display:block}#game canvas{outline:none}.topbar{z-index:1;pointer-events:none;justify-content:space-between;align-items:flex-start;gap:18px;display:flex;position:absolute;inset:22px 24px auto}.brand{align-items:center;gap:13px;min-width:0;display:flex}.brand-mark{border:2px solid #f2c14e;width:34px;height:34px;position:relative;transform:rotate(45deg);box-shadow:0 0 0 5px #f2c14e1f,0 0 22px #f2c14e61}.brand-mark:after{content:"";border:2px solid #4fb3ff;position:absolute;inset:8px}h1{color:#f9fbff;letter-spacing:0;margin:0;font-size:30px;font-weight:900;line-height:1}.subtitle{color:#edf2f49e;text-transform:uppercase;margin-top:7px;font-size:12px;font-weight:700;display:block}.stats{grid-template-columns:repeat(3,minmax(86px,auto));gap:8px;display:grid}.stats span,.best-panel,.target-panel,.progression-panel,.meter-grid,.panel-header,.chord-pad,.calibration-pad,.segmented-control,.chord-chart,.primary-action,.secondary-action{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#070a0ead;border:1px solid #ffffff24}.stats span{border-radius:7px;gap:4px;min-height:50px;padding:9px 11px;display:grid;box-shadow:inset 0 1px #ffffff14}.stats small{color:#edf2f494;text-transform:uppercase;font-size:11px;line-height:1}.stats strong{color:#fff;font-size:18px;line-height:1}.best-panel{z-index:1;border-color:#4fb3ff47;border-radius:8px;gap:5px;min-width:150px;padding:12px 14px;display:grid;position:absolute;bottom:84px;right:24px;box-shadow:inset 0 1px #ffffff1a}.best-panel span,.best-panel small{color:#edf2f49e;text-transform:uppercase;font-size:11px;font-weight:900}.best-panel strong{color:#4fb3ff;font-size:28px;line-height:1}.best-panel b{color:#edf2f4}.target-panel{z-index:1;border-color:#f2c14e5c;border-radius:8px;grid-template-columns:auto auto auto;align-items:center;gap:6px 14px;min-width:276px;padding:14px 16px;display:grid;position:absolute;bottom:84px;left:24px;box-shadow:inset 0 1px #ffffff1a,0 16px 40px #00000047}.progression-panel{z-index:1;border-radius:8px;width:min(360px,40vw);padding:12px;position:absolute;bottom:84px;left:50%;transform:translate(-50%)}.pause-overlay{z-index:2;color:#edf2f4eb;text-transform:uppercase;pointer-events:none;background:#04070a6b;place-items:center;font-size:42px;font-weight:950;display:none;position:absolute;inset:0}.game-shell[data-paused=true] .pause-overlay{display:grid}.progression-panel>span{color:#edf2f4a8;text-align:center;text-transform:uppercase;margin-bottom:8px;font-size:11px;font-weight:900;display:block}.progression-steps{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.progression-steps span{color:#edf2f4b8;text-align:center;background:#ffffff0f;border-radius:5px;min-width:42px;padding:6px 8px;font-size:13px;font-weight:900}.progression-steps span.is-current{color:#11151b;background:#f2c14e}.rhythm-meter{background:#ffffff14;border-radius:999px;height:5px;margin-top:10px;position:relative;overflow:hidden}.rhythm-meter span{pointer-events:none;position:absolute;top:0;bottom:0}.rhythm-meter .good-zone{background:#4fb3ff42;width:26%;right:0}.rhythm-meter .perfect-zone{background:#f2c14e61;width:11%;right:0}.rhythm-meter i{z-index:1;border-radius:inherit;background:linear-gradient(90deg,#4fb3ff,#f2c14e);width:100%;height:100%;transition:width .12s linear;display:block;position:relative}.rhythm-meter[data-rating=perfect] i{background:#f2c14e;box-shadow:0 0 14px #f2c14eb3}.rhythm-meter[data-rating=good] i{background:#4fb3ff}.rhythm-meter[data-rating=miss] i{background:#ef5d60}.rhythm-rating{color:#edf2f4ad;text-align:center;text-transform:uppercase;margin-top:8px;font-size:11px;display:block}.rhythm-meter[data-rating=perfect]+.rhythm-rating{color:#f2c14e}.rhythm-meter[data-rating=good]+.rhythm-rating{color:#4fb3ff}.rhythm-meter[data-rating=miss]+.rhythm-rating{color:#ef5d60}.target-panel span,.target-panel em{color:#edf2f4a8;text-transform:uppercase;font-size:12px;font-style:normal;font-weight:800}.target-panel strong{color:#f2c14e;text-shadow:0 0 20px #f2c14e6b;font-size:36px;line-height:.92}#defense{color:#4fb3ff;text-shadow:0 0 20px #4fb3ff6b}.control-panel{background:linear-gradient(#4fb3ff21,#0000 30%),linear-gradient(#0000 58%,#f2c14e14),#10151c;border-left:1px solid #ffffff1a;flex-direction:column;justify-content:center;gap:12px;padding:18px;display:flex;overflow-y:auto}.mode-panel{gap:8px;display:grid}.segmented-control{border-radius:8px;grid-template-columns:1fr 1fr;gap:6px;padding:6px;display:grid}.segmented-control button,#difficultySelect{color:#edf2f4;cursor:pointer;background:#ffffff0f;border:0;border-radius:6px;min-height:38px;font-weight:900}.segmented-control button.is-selected{color:#11151b;background:#f2c14e}.run-controls{grid-template-columns:1fr 1fr auto;align-items:center;gap:8px;display:grid}.run-controls button{color:#edf2f4;cursor:pointer;background:#fff1;border:1px solid #ffffff24;border-radius:6px;min-height:38px;font-weight:900}.run-controls button:hover{background:#4fb3ff1f;border-color:#4fb3ff61}.run-controls button.is-paused{color:#11151b;background:#f2c14e}.run-controls strong{color:#58d68d;text-align:right;text-transform:uppercase;min-width:58px;font-size:12px;font-weight:900}.run-controls strong[data-state=paused]{color:#f2c14e}#difficultySelect{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#070a0ead;border:1px solid #ffffff24;width:100%;padding:0 10px}.panel-header{border-radius:8px;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:10px 12px;display:flex}.panel-header span,.panel-header strong{text-transform:uppercase;font-size:12px;font-weight:900;line-height:1}.panel-header span{color:#edf2f4a8}.panel-header strong{color:#edf2f4}.panel-header.compact{margin-bottom:8px}#micState[data-state=ready]{color:#58d68d}#micState[data-state=asking]{color:#f2c14e}#micState[data-state=denied]{color:#ef5d60}#midiState[data-state=ready]{color:#58d68d}#midiState[data-state=asking]{color:#f2c14e}#midiState[data-state=unsupported],#midiState[data-state=denied]{color:#ef5d60}.primary-action,.secondary-action{color:#11151b;cursor:pointer;background:linear-gradient(#ffd76a,#f2c14e);border-color:#0000;border-radius:8px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:54px;font-weight:900;display:inline-flex;box-shadow:inset 0 1px #ffffff6b,0 14px 28px #f2c14e2e}.secondary-action{color:#edf2f4;min-height:46px;box-shadow:none;background:linear-gradient(#4fb3ff3d,#4fb3ff14),#ffffff0a;border-color:#4fb3ff47}.secondary-action .button-icon{background:#4fb3ff;box-shadow:0 0 0 5px #4fb3ff1f}.button-icon{background:#11151b;border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 5px #11151b29}.primary-action:hover{filter:brightness(1.06)}.secondary-action:hover{filter:brightness(1.08);border-color:#4fb3ff7a}.primary-action:focus-visible,.secondary-action:focus-visible,.chord-pad button:focus-visible{outline-offset:3px;outline:2px solid #4fb3ff}.meter-grid{border-radius:8px;grid-template-columns:1fr auto;gap:14px 12px;padding:15px;display:grid}.meter-grid span{color:#edf2f494;text-transform:uppercase;font-size:12px;font-weight:800}.meter-grid strong{color:#fff;text-align:right;min-width:0;font-size:15px}#battleStatus{overflow-wrap:anywhere;max-width:148px}.blade-panel,.calibration-panel{padding-top:2px}.chord-pad,.calibration-pad{border-radius:8px;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px;display:grid}.chord-pad button{color:#edf2f4;cursor:pointer;background:linear-gradient(#ffffff1a,#ffffff09),#ffffff0a;border:1px solid #ffffff1f;border-radius:6px;place-items:center;gap:5px;min-width:0;min-height:58px;transition:background .14s,border-color .14s,color .14s,transform .14s,box-shadow .14s;display:grid}.calibration-pad button{color:#edf2f4;cursor:pointer;background:#ffffff0e;border:1px solid #ffffff1f;border-radius:6px;min-width:0;min-height:42px;font-size:12px;font-weight:900}.calibration-pad button:hover{background:#f2c14e1f;border-color:#f2c14e6b}.chord-pad button span{font-size:21px;font-weight:950;line-height:1}.chord-pad button small{color:#edf2f48c;text-transform:uppercase;font-size:10px;font-weight:800}.chord-chart{border-radius:8px;place-items:center;min-height:174px;padding:8px;display:grid}.chord-chart svg{width:100%;max-width:220px}.chord-chart .string,.chord-chart .fret{stroke:#edf2f470;stroke-width:1.4px}.chord-chart .nut{stroke:#edf2f4;stroke-width:4px}.chord-chart .finger{fill:#f2c14e}.chord-chart .finger-text{fill:#11151b;font-size:11px;font-weight:900}.chord-chart .open,.chord-chart .muted{fill:#edf2f4b8;font-size:13px;font-weight:900}.chord-chart .chart-title{fill:#4fb3ff;font-size:22px;font-weight:900}.chord-pad button:hover{background:linear-gradient(#ffffff29,#ffffff0f),#ffffff0f;transform:translateY(-1px)}.chord-pad button.is-target{color:#11151b;background:linear-gradient(#ffd76a,#f2c14e);box-shadow:0 10px 26px #f2c14e33}.chord-pad button.is-target small{color:#11151bb8}.chord-pad button.is-defense{color:#071019;background:linear-gradient(#7fd0ff,#4fb3ff);box-shadow:0 10px 26px #4fb3ff33}.chord-pad button.is-defense small{color:#071019b8}.chord-pad button.is-detected{border-color:#4fb3ff;box-shadow:0 0 0 3px #4fb3ff29,0 0 24px #4fb3ff2e}.onboarding{z-index:5;background:radial-gradient(circle at 50% 30%,#4fb3ff2e,#0000 34%),#05080cb8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.onboarding.is-hidden{display:none}.onboarding-panel{background:#0d1219f0;border:1px solid #ffffff29;border-radius:8px;width:min(480px,100%);padding:24px;box-shadow:0 24px 80px #0000006b}.eyebrow{color:#4fb3ff;text-transform:uppercase;font-size:12px;font-weight:900}.onboarding h2{color:#fff;margin:10px 0 18px;font-size:34px;line-height:1}.guide-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.guide-grid div{background:#ffffff0f;border:1px solid #ffffff1f;border-radius:6px;place-items:center;gap:8px;min-height:82px;display:grid}.guide-grid strong{color:#f2c14e;font-size:26px;line-height:1}.guide-grid span,.onboarding p{color:#edf2f4ad}.guide-grid span{text-transform:uppercase;font-size:11px;font-weight:900}.onboarding p{margin:18px 0;line-height:1.55}#startGameButton{color:#11151b;cursor:pointer;background:linear-gradient(#ffd76a,#f2c14e);border:0;border-radius:8px;width:100%;min-height:50px;font-weight:900}@media (width<=900px){body{overflow:auto}.game-shell{grid-template-rows:minmax(500px,68svh) auto;grid-template-columns:1fr}.stage,#game,#game canvas{min-height:500px}.control-panel{border-top:1px solid #ffffff1a;border-left:0;justify-content:flex-start}.topbar{inset:16px 16px auto}h1{font-size:24px}.subtitle{display:none}.brand-mark{width:26px;height:26px}.stats{grid-template-columns:repeat(3,minmax(0,1fr));min-width:286px}.target-panel{min-width:252px;bottom:82px;left:16px}.best-panel{min-width:128px;bottom:82px;right:16px}.progression-panel{width:calc(100% - 32px);bottom:16px}}@media (width<=560px){.topbar{flex-direction:column}.stats{width:100%;min-width:0}.stats span{min-height:44px;padding:8px}.stats strong{font-size:16px}.target-panel{min-width:214px;padding:12px;bottom:76px}.target-panel strong{font-size:30px}.best-panel{display:none}.control-panel{gap:10px;padding:14px}.primary-action,.secondary-action{min-height:48px}.meter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.meter-grid span{display:none}.meter-grid strong{text-align:center;background:#ffffff0e;border-radius:6px;min-height:34px;padding:9px}.chord-pad button{min-height:68px}.chord-pad button span{font-size:24px}.calibration-panel{order:4}.onboarding-panel{padding:18px}.onboarding h2{font-size:28px}.guide-grid{grid-template-columns:1fr}.guide-grid div{grid-template-columns:64px 1fr;place-items:center start;min-height:62px;padding:0 14px}.chord-chart-panel{display:none}}