:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffe6;background-color:#181820;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html,body,#root{width:100vw;height:100svh;overflow-x:hidden;overflow-y:auto}body{margin:0;display:block;min-width:320px;min-height:100svh;background:#181820;-webkit-tap-highlight-color:transparent}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}#root{width:100%;height:100%}.app-root{width:100%;height:100%;display:grid;place-items:center}.controls{display:flex;gap:12px;align-items:center}.control{display:flex;gap:8px;align-items:center;padding:6px 10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px}.control select{padding:6px 8px;border-radius:6px}.control input[type=checkbox]{transform:translateY(1px)}.status{display:flex;gap:16px;align-items:center;font-size:1rem}.target .label{opacity:.8;margin-right:6px}.target .value{font-weight:700;font-size:1.2rem}.board-label text{paint-order:stroke;stroke:#0003;stroke-width:2px}.hover-tip text{paint-order:stroke;stroke:#0000004d;stroke-width:2px}.stage{position:relative;display:grid;place-items:center;width:100%;overflow-x:auto}.problem-banner{position:fixed;top:calc(env(safe-area-inset-top,0px) + 80px);left:50%;transform:translate(-50%);padding:0;border:none;background:none;font-size:clamp(28px,12vmin,96px);font-weight:900;letter-spacing:.5px;color:#fff;text-shadow:none;z-index:30;pointer-events:none}.staff-problem{background:transparent;display:inline-block;padding:0}.staff-problem svg{height:clamp(200px,36vmin,380px)!important;width:auto!important;display:block}.problem-banner .staff-problem{line-height:0;display:inline-block}.staff-problem svg line,.staff-problem svg path,.staff-problem svg rect{stroke:#fff!important}.staff-problem svg text,.staff-problem svg ellipse,.staff-problem svg circle,.staff-problem svg path{fill:#fff!important}.problem-banner.enter{animation:bannerEnter .45s ease-out}.problem-banner.exit{animation:bannerExit .45s ease-in forwards}@keyframes bannerEnter{0%{opacity:0;transform:translate(-50%,-24px) rotate(-2deg)}60%{opacity:1;transform:translate(-50%) rotate(0)}to{opacity:1;transform:translate(-50%) rotate(0)}}@keyframes bannerExit{0%{opacity:1;transform:translate(-50%) rotate(0)}to{opacity:0;transform:translate(-50%,60px) rotate(6deg)}}.floating-controls{position:fixed;right:calc(env(safe-area-inset-right,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:25;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;touch-action:pan-y}.floating-controls .controls-toggle{display:none}.floating-controls .controls-body{display:flex;align-items:center;gap:8px}.floating-controls .control.small{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:12px}.floating-controls .control.small span{font-size:16px;line-height:1}.floating-controls .control.small select{font-size:16px;height:32px;line-height:32px;padding:0 10px}.floating-controls .control.small input[type=checkbox]{width:20px;height:20px;margin:0}@media (max-width: 600px){.floating-controls{right:16px;left:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);background:none;border:none;padding:0;gap:0;z-index:40}.floating-controls .controls-toggle{width:56px;height:56px;border-radius:50%;background:#14141ce6;color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 18px #00000073;display:flex;align-items:center;justify-content:center}.floating-controls .controls-body{position:fixed;right:calc(env(safe-area-inset-right,0px) + 8px);left:calc(env(safe-area-inset-left,0px) + 8px);bottom:calc(env(safe-area-inset-bottom,0px) + 84px);display:none;width:auto;max-width:none;max-height:calc(100svh - (108px + env(safe-area-inset-top,0px)));overflow:auto;-webkit-overflow-scrolling:touch;background:#101018f2;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:8px;gap:8px;z-index:60}.floating-controls.open .controls-body{display:flex;flex-wrap:wrap}.floating-controls .control.small{height:36px;padding:0 8px;flex:0 0 auto;margin:4px}.floating-controls .control.small span{font-size:13px;white-space:nowrap}.floating-controls .control.small select{font-size:13px;height:28px;width:auto;max-width:60vw}.floating-controls .control.small input[type=checkbox]{width:18px;height:18px}}@media (orientation: portrait) and (max-width: 900px){.viewport .floating-controls{position:fixed;right:16px;left:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:50}.viewport .floating-controls .controls-body{right:calc(env(safe-area-inset-right,0px) + 8px);left:calc(env(safe-area-inset-left,0px) + 8px);max-width:none;width:auto;max-height:calc(100svh - (108px + env(safe-area-inset-top,0px)))}}.fretboard-wrap{display:contents}.fretboard{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;display:block;margin:0 auto;animation:subtleFloat 6s ease-in-out infinite;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}@keyframes subtleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-.6px)}}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.app-root.damage:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,#f000 40%,#ff00002e 65%,#ff000052 80%,#ff00007a);animation:damagePulse .35s ease-out forwards}@keyframes damagePulse{0%{opacity:0}30%{opacity:1}to{opacity:0}}.stage.shake{animation:shake .35s cubic-bezier(.36,.07,.19,.97) both}@media (max-width: 1700px){.fretboard{width:96vw;height:auto}}@media (max-width: 600px){.fretboard{width:100vw;height:auto}}@media (orientation: portrait){.viewport{position:fixed;top:50%;left:50%;width:100svh;height:100svw;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center;overflow:hidden;display:flex;align-items:center;justify-content:center}.viewport .stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden}.viewport .problem-banner{font-size:clamp(28px,12vmin,96px)}.viewport .fretboard-wrap{width:100%;height:auto;display:flex;justify-content:center;align-items:center;margin:6vmin 0}.viewport .fretboard{width:min(100vh - 10vmin,100%);max-height:calc(100vw - 12vmin);height:auto;max-width:100%}.viewport .problem-banner{position:absolute;top:calc(env(safe-area-inset-top,0px) + 24px);left:50%;transform:translate(-50%);pointer-events:none}.viewport .floating-controls{position:absolute;right:12px;bottom:12px}}@media (max-width: 900px) and (orientation: landscape){.fretboard{width:98vw;height:auto}}