:root{color:#e8eeea;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;--lime:#c1ed86;--muted:#8a9798;--border:#30383a;--pad-height:clamp(64px, 12svh, 112px);--guide-height:34px;--page-top:max(12px, env(safe-area-inset-top));--page-bottom:max(12px, env(safe-area-inset-bottom));background:#111416;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button{color:inherit;touch-action:manipulation}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}button:disabled{opacity:.45;cursor:wait}button:hover{filter:brightness(1.12)}[hidden]{display:none!important}kbd{font-family:inherit}.shell{max-width:880px;padding:var(--page-top) 12px var(--page-bottom);margin:auto}.instrument{height:calc(100svh - var(--page-top) - var(--page-bottom));flex-direction:column;min-width:0;display:flex}.stage-top{border:1px solid var(--border);background:#1e2527;border-bottom:0;border-radius:10px 10px 0 0;flex:0 0 50px;justify-content:space-between;align-items:center;gap:8px;padding:0 6px 0 16px;display:flex}#stage-label{color:var(--lime);letter-spacing:1px;font-size:10px;line-height:1.5}#stage-label.watching{color:#a6e4eb;letter-spacing:0;font-size:14px;font-weight:700}#stage-label.watching:before{content:"◉";margin-right:8px}#stage-label.lesson-direction{letter-spacing:.5px;white-space:nowrap;font-size:30px;font-weight:800;line-height:1}#stage-label.lesson-direction:before{content:none}.stage-actions{flex-shrink:0;align-items:center;gap:9px;display:flex}#clock{white-space:nowrap;font-family:ui-monospace,monospace;font-size:11px}#clock b{color:#7b898c;font-weight:400}#pause,#menu-toggle,#menu-close{background:#29342e;border:1px solid #45514b;border-radius:6px;height:38px}#pause{width:38px;color:var(--lime);font-size:20px}#menu-toggle{padding:0 12px;font-size:11px}#menu-toggle span{color:var(--lime);margin-left:5px;display:inline-block}#menu-toggle[aria-expanded=true] span{transform:rotate(180deg)}.runway{border-inline:1px solid var(--border);flex:auto;min-height:160px;position:relative;overflow:hidden}.lane-labels{z-index:2;background:#171d20;border-bottom:1px solid #2c3537;grid-template-columns:repeat(5,1fr);width:100%;height:48px;display:grid;position:absolute}.lane-labels>div{color:var(--pad);border-right:1px solid #283033;border-top:2px solid color-mix(in srgb, var(--pad) 45%, transparent);flex-direction:column;justify-content:center;align-items:center;gap:1px;display:flex}.lane-labels kbd{font-size:21px;font-weight:700;line-height:1}.lane-labels .lit{background:color-mix(in srgb, var(--pad) 20%, #171d20)}canvas{width:100%;height:calc(100% - 48px);display:block;position:absolute;top:48px}.hit-targets{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stage-overlay{z-index:3;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#151c1eef;border:1px solid #3d494677;border-radius:10px;padding:22px 14px;position:absolute;top:70px;left:9%;right:9%}.stage-overlay>span{letter-spacing:1.5px;color:var(--lime);font-size:9px}.stage-overlay strong{letter-spacing:-.8px;margin:9px 0;font-size:30px;font-weight:500;display:block}.stage-overlay p{color:#a7b5b1;margin:0;font-size:12px;line-height:1.5}.stage-transport{flex-direction:column;align-items:center;gap:7px;margin-top:18px;display:flex}.primary{background:var(--lime);color:#192615;border:1px solid var(--lime);border-radius:6px;min-height:44px;padding:10px 22px;font-size:13px;font-weight:700}.primary span{margin-right:7px;font-size:11px}.stage-transport .primary{min-width:160px}.stage-transport .text-button{margin:0}.stage-overlay.countdown{pointer-events:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:5px;min-width:76px;padding:7px 10px;top:56px;left:auto;right:8px}.stage-overlay.countdown strong{margin:3px 0 0;font-size:24px}.stage-overlay.countdown p{display:none}.stage-overlay.countdown>span{letter-spacing:.8px;font-size:7px}.feedback{text-align:center;letter-spacing:1px;pointer-events:none;text-shadow:0 1px 4px #000;width:100%;font-size:11px;font-weight:700;position:absolute;bottom:53px;left:0}.progress{background:#30393a;flex:0 0 3px}.progress i{background:#526466;width:0;height:100%;display:block}.audio-timing{border-top:1px solid var(--border);margin-top:14px;padding-top:12px}.audio-timing strong{font-size:12px}.keyboard{flex:none;position:relative}.pad-guide{height:var(--guide-height);color:#8a9999;pointer-events:none;justify-content:space-between;align-items:center;font-size:9px;display:flex;position:relative}.pads{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:var(--pad-height);touch-action:none;-webkit-user-select:none;user-select:none;row-gap:14px;padding-inline:1px;display:grid;position:relative}.pad{border:1px solid #3d4746;border-top:2px solid var(--pad);width:min(144px,100% - 12px);color:var(--pad);touch-action:none;-webkit-tap-highlight-color:transparent;background:#1c2325;border-radius:9px;justify-content:center;justify-self:center;align-items:center;margin:0;padding:5px;transition:background 60ms,transform 60ms;display:flex;position:relative;box-shadow:inset 0 -4px #0003}.pad kbd{font-size:30px;font-weight:700;line-height:1}.pad-3{grid-area:1/1}.pad-4{grid-area:1/3}.pad-5{grid-area:1/5}.pad-1{grid-area:2/2}.pad-2{grid-area:2/4}.pad.held,.pad.flash{background:color-mix(in srgb, var(--pad) 28%, #1c2325);border-color:var(--pad);transform:translateY(2px)}.pad.lit{background:color-mix(in srgb, var(--pad) 28%, #1c2325);border-color:var(--pad);box-shadow:inset 0 0 0 1px var(--pad)}.controls{inset:calc(var(--page-top) + 58px) max(12px, calc((100vw - 856px) / 2)) auto auto;width:min(340px,100vw - 24px);max-height:calc(100svh - var(--page-top) - var(--page-bottom) - 68px);color:#e8eeea;overscroll-behavior:contain;background:#191e20;border:1px solid #46564e;border-radius:10px;margin:0;padding:0;position:fixed;overflow-y:auto;box-shadow:0 16px 60px #0008}.controls::backdrop{background:#070b0b55}.menu-heading{z-index:1;border-bottom:1px solid var(--border);background:#20282a;justify-content:space-between;align-items:center;padding:16px 18px;display:flex;position:sticky;top:0}.menu-heading>div>span{letter-spacing:1.5px;color:var(--lime);font-size:8px}.menu-heading h2{margin:5px 0 0;font-size:17px;font-weight:500}#menu-close{width:36px;font-size:23px}.control-section{padding:18px}.input-control{border-bottom:1px solid var(--border)}.section-label{color:#667b73;letter-spacing:1px;align-items:center;gap:12px;font-size:9px;font-weight:600;display:flex}.section-label>span{color:#bac8c1}select{color:#e6eeea;background:#252d2f;border:1px solid #3a4545;border-radius:5px;width:100%;min-height:43px;margin-top:12px;padding:10px;font-size:12px}.muted{color:var(--muted);margin:9px 0 0;font-size:10px;line-height:1.5}.mode-tabs{background:#111719;border:1px solid #303b3b;border-radius:5px;gap:3px;margin-top:18px;padding:3px;display:flex}.mode-tabs button{color:#8e9f9a;background:0 0;border:0;border-radius:3px;flex:1;padding:10px 2px;font-size:10px}.mode-tabs button[aria-pressed=true]{color:#deefdd;background:#354139}.mode-description{color:#9daaab;margin:9px 0 17px;font-size:10px}.transport{gap:8px;min-height:44px;display:flex}.transport button{background:#222c2c;border:1px solid #3b4846;border-radius:5px;width:42px;font-size:22px}.transport .primary{background:var(--lime);color:#192615;border-color:var(--lime);flex:1;width:auto;padding:9px;font-size:12px}#exit{width:45px;font-size:10px}.status{color:#9babaa;margin:12px 0 0;font-size:10px;line-height:1.5}.scoreboard{border-block:1px solid var(--border);padding:18px 9px;display:flex}.scoreboard>div{text-align:center;border-right:1px solid var(--border);flex:1}.scoreboard>div:last-child{border:0}.scoreboard strong{font-size:22px;font-weight:400;line-height:1;display:block}.scoreboard strong span{color:#798984;font-size:10px}.scoreboard small{letter-spacing:1px;color:#8a9994;margin-top:8px;font-size:8px;display:block}.mixer-icon{margin-left:auto;font-size:17px}.mixer label{justify-content:space-between;align-items:center;margin:18px 0 9px;font-size:11px;display:flex}.mixer label>span{align-items:center;gap:8px;display:flex}.mixer label i{border-radius:50%;width:5px;height:5px}.kit-dot{background:var(--lime)}.source-dot{background:#90adbb}output{color:#bccbc3;font-family:ui-monospace,monospace;font-size:11px}input[type=range]{width:100%;accent-color:var(--lime);cursor:pointer;height:22px;margin:0}#source-volume{accent-color:#8aabb9}.source-note{margin:11px 0 0;font-size:9px}.help{border-top:1px solid var(--border);color:#9dadab;padding:0 18px;font-size:10px}.help summary{cursor:pointer;color:#b3c3bc;justify-content:space-between;padding:16px 0;list-style:none;display:flex}.help summary::-webkit-details-marker{display:none}.help p{font-size:11px;line-height:1.7}.help p:last-child{padding-bottom:9px}.menu-foot{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:14px 18px;display:flex}.menu-foot>span{color:var(--muted);font-size:8px}html[data-screen=lesson] .song-only,html[data-screen=song] .lesson-only{display:none!important}.lesson-steps{color:#657773;justify-content:space-between;align-items:center;gap:5px;font-size:10px;display:flex}.lesson-steps i{color:#42544e;font-style:normal}.lesson-steps .current{color:var(--lime);font-weight:700}#lesson-instruction{color:#b9c8c1;margin:18px 0 12px;font-size:12px;line-height:1.6}#pattern-steps{gap:5px;margin:12px 0;display:flex}#pattern-steps span{text-align:center;border:1px solid color-mix(in srgb, var(--pad) 30%, transparent);color:var(--pad);background:#13191b;border-radius:4px;flex:1;padding:8px 0;font-size:17px}#pattern-steps kbd{font-weight:700;display:block}#pattern-steps span[data-result=hit],#pattern-steps span[data-result=demo]{background:color-mix(in srgb, var(--pad) 15%, #13191b)}#pattern-steps span[data-result=miss]{opacity:.35}#pattern-steps .now{color:#101818;background:var(--pad)!important}.lesson-goal{color:var(--lime);margin:10px 0 20px;font-size:10px;line-height:1.5}.lesson-actions{flex-wrap:wrap;gap:10px;margin-top:8px;display:flex}.lesson-actions button,.text-button{color:#bacdc3;text-underline-offset:4px;background:0 0;border:0;padding:7px 0;font-size:11px;text-decoration:underline}.text-button{margin-top:10px}.menu-foot .text-button{margin:0}@media (width<=600px){.shell{padding-inline:8px}.stage-top{padding-left:10px}#stage-label{letter-spacing:.3px;font-size:8px}#stage-label.watching{font-size:11px}#stage-label.watching:before{margin-right:4px}#stage-label.lesson-direction{font-size:22px}.stage-actions{gap:5px}#clock{font-size:9px}#pause{width:32px}#menu-toggle{padding:0 8px;font-size:10px}.pad-guide{font-size:8px}.pad kbd{font-size:26px}.stage-overlay{padding:16px 10px;top:60px;left:6%;right:6%}.stage-overlay strong{font-size:24px}.stage-overlay p{font-size:11px}.stage-overlay.countdown{padding:7px 10px;top:56px;left:auto;right:8px}}@media (height<=600px){:root{--pad-height:58px;--guide-height:26px}.stage-overlay{padding:10px;top:56px}.stage-overlay strong{margin:6px 0;font-size:23px}.stage-overlay p{font-size:10px}.stage-transport{gap:2px;margin-top:9px}.stage-transport .primary{min-height:38px;padding:8px 16px;font-size:12px}.pad kbd{font-size:24px}}@media (height<=440px){:root{--pad-height:48px;--guide-height:22px;--page-top:max(6px, env(safe-area-inset-top));--page-bottom:max(6px, env(safe-area-inset-bottom))}.stage-top{flex-basis:44px}.runway{min-height:120px}.stage-overlay{text-align:left;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:8px;display:grid;top:51px;left:6%;right:6%}.stage-overlay>span,.stage-overlay strong,.stage-overlay p{grid-column:1}.stage-overlay strong{margin:3px 0;font-size:20px}.stage-overlay>span{font-size:7px}.stage-transport{grid-area:1/2/4;justify-content:center;gap:0;margin-top:0}.stage-transport .primary{min-height:32px;padding:6px 12px;font-size:11px}.stage-transport .text-button{font-size:10px}.pad kbd{font-size:21px}.stage-overlay.countdown{text-align:center;display:block;left:auto}}@media (prefers-reduced-motion:reduce){.pad{transition:none}}