:root{--font-body: "Open Sans", Roboto, Helvetica, Arial, sans-serif;--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--label-color: var(--button-primary-bg);--logo-color: var(--body-text);--heading-accent: #cccccc;--accent-emphasis: #d0021b;--accent-emphasis-bright: #fd223c;--fretboard-string-color: #000;--fretboard-fret-color: #aaa;--fretboard-nut-color: #000;--fretboard-marker-color: #666;--fretboard-board-fill: #1a1a1a;--note-target-fill: #ff6b6b;--note-target-text: #ffffff;--note-correct-fill: #216e2f;--note-correct-text: #ffffff;--chart-text-color: #e5e5e5;--chart-barline-color: #ccc;--chart-guide-color: #999;--chart-repeat-color: #fff;--chart-measure-number-color: #bbb;--space-xs: 4px;--space-sm: 6px;--space-md: 10px;--space-lg: 12px;--space-xl: 20px;--font-sm: .9em;--font-base: 1em;--font-lg: 1.1em;--radius-sm: 4px;--radius-md: 6px;--anim-ease: ease-in-out}pre,code{font-family:var(--font-mono)}html{color-scheme:dark}html,body{height:100%}body{margin:0;min-height:100vh;font-family:var(--font-body, sans-serif);display:flex;flex-direction:column;color:var(--body-text);background-color:var(--body-bg);padding:0 var(--space-xl);overflow-x:hidden;animation:flamePan 60s linear infinite alternate}main.wrap>.card:first-child{margin-top:var(--space-xl)}.card--first{margin-top:var(--space-xl)!important}main{flex:1}.site-header{background:linear-gradient(to bottom,var(--header-bg-top),var(--header-bg-bottom));color:var(--header-text);border-bottom:1px solid var(--dropdown-border);padding:var(--space-md) var(--space-xl);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.site-header-inner{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between}.site-logo{font-weight:700;font-size:1.25rem;color:var(--logo-color);letter-spacing:1px}.heading-accent{color:var(--heading-accent);font-style:italic;font-weight:700}.hero{background:var(--hero-bg)}.card{background:var(--card-bg);border:1px solid var(--dropdown-border);border-radius:12px;color:var(--card-text);padding:24px;margin:0 auto 24px;box-shadow:var(--card-shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-width:980px}.card--fullwidth{max-width:100%;width:auto;margin-left:0;margin-right:0}a{color:var(--link-color);transition:color .2s ease}a:hover{color:var(--link-hover)}select,input,textarea{background:transparent;border:1px solid var(--control-border);color:var(--body-text);padding:8px 12px;border-radius:4px;transition:all .2s ease}select:hover,input:hover,textarea:hover,select:focus,input:focus,textarea:focus{border-color:var(--link-color);background-color:var(--control-hover-bg);outline:none}.select--themed{background-color:var(--dropdown-bg);color:var(--dropdown-text);border:1px solid var(--dropdown-border);border-radius:var(--radius-sm);padding:var(--space-sm)}.controls{margin:0 auto;max-width:980px}.controls label{color:var(--label-color);font-weight:700}.controls--fullwidth-left{max-width:none;width:100%;margin:0;text-align:left}.buttons-group{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-md)}.buttons-group--space-between{justify-content:space-between;width:100%;box-sizing:border-box}.left-buttons{display:flex;align-items:center;gap:var(--space-md)}.output{max-width:980px;margin:0 auto;padding:0 1rem 1.25rem;box-sizing:border-box;text-align:center}.output--fullwidth-left{max-width:none;width:100%;margin:0;text-align:left}.btn{display:inline-block;padding:var(--space-md) var(--space-xl);font-size:var(--font-base);font-weight:600;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s var(--anim-ease)}.btn.primary{background-color:var(--button-primary-bg);color:var(--button-primary-text);box-shadow:0 0 8px var(--button-primary-glow)}.btn.primary:hover{background-color:var(--button-primary-hover);box-shadow:0 0 12px var(--button-primary-glow)}.btn.secondary{background-color:var(--button-bg);color:var(--button-text)}.btn.secondary:hover{background-color:var(--button-hover)}.btn.secondary:active{background-color:var(--button-flash-secondary);box-shadow:0 0 6px var(--button-glow-secondary);transform:translateY(1px)}.btn.primary-strong{background-color:var(--button-primary-bg);color:var(--button-primary-text);font-weight:700}.btn.primary-strong:hover{background-color:var(--button-primary-hover)}.common-container{background:var(--panel-bg);border:1px solid var(--dropdown-border);border-radius:8px;padding:.5rem;overflow:hidden}.tuning-wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--space-sm);max-width:980px;margin:0 auto}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.spacer{flex:1}.group{margin:var(--space-lg) 0;font-size:var(--font-lg);width:100%;box-sizing:border-box}footer>[class$=-footer-inner]{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-sm);text-align:left}footer>[class$=-footer-inner] p{margin:0}footer>[class$=-footer-inner] nav{display:flex;align-items:center;gap:var(--space-md)}.site-footer{background:linear-gradient(to top,var(--footer-bg-top),var(--footer-bg-bottom));border-top:1px solid var(--dropdown-border);padding:20px 0;margin-top:40px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.site-footer-inner{color:var(--body-text);font-size:var(--font-sm)}.site-footer nav a{color:var(--link-color);text-decoration:none;transition:color .2s ease}.site-footer nav a:hover{color:var(--link-hover)}.about-modal{display:none;position:fixed;z-index:1000;inset:0;width:100%;height:100%;overflow:auto;background-color:#0009}.about-modal.open{display:block}.about-modal-content{background-color:var(--card-bg, #fff);margin:10% auto;padding:20px;border-radius:6px;width:90%;max-width:600px;box-shadow:0 4px 12px #0000004d}@media(max-width:600px){body{font-size:.95em;padding:10px}main,.panel,.container{max-width:100%;padding:.5em;box-sizing:border-box}button,select,input{font-size:1em;padding:.6em 1em;min-width:44px;min-height:44px}svg{max-width:100%;height:auto}.buttons-group--stack{flex-direction:column;align-items:stretch}.buttons-group--stack .btn{width:100%;font-size:var(--font-lg);padding:var(--space-lg)}.buttons-group--stack .btn+.btn{margin-top:var(--space-sm)}.tuning-wrapper--mobile-space{margin-top:var(--space-md);width:100%;justify-content:space-between}.tuning-wrapper--mobile-space select{flex:1}}@keyframes flamePan{0%{background-position:50% 50%}to{background-position:52% 48%}}.fretboard{display:block;background:var(--fretboard-board-fill)}.fb-string{stroke:var(--fretboard-string-color);stroke-width:1.5}.fb-string-thick{stroke-width:2.5}.fb-string-active{stroke:var(--accent-emphasis-bright);stroke-width:3}.fb-fret{stroke:var(--fretboard-fret-color);stroke-width:1.2}.fb-nut{stroke:var(--fretboard-nut-color);stroke-width:5}.fb-marker{fill:var(--fretboard-marker-color)}.fb-fret-num{font-family:var(--font-mono, monospace);font-size:11px;fill:var(--body-text);opacity:.55;text-anchor:middle}.fb-note{fill:var(--note-fill);stroke:var(--note-stroke);stroke-width:1.5}.fb-note-text{font-family:var(--font-display, sans-serif);font-weight:700;font-size:12px;fill:var(--note-text);text-anchor:middle;dominant-baseline:central}.fb-note-target{fill:var(--note-target-fill);stroke:var(--note-target-fill)}.fb-note-target-text{fill:var(--note-target-text)}.fb-note-correct{fill:var(--note-correct-fill);stroke:var(--note-correct-fill)}.fb-note-correct-text{fill:var(--note-correct-text)}.fb-note-missed{fill:var(--note-target-fill);stroke:var(--note-target-fill)}.fb-note-missed-text{fill:var(--note-target-text)}:root{--font-display: "Montserrat", "Inter", system-ui, sans-serif;--font-mono-rn: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;--space-2xl: 28px;--radius-lg: 12px;--radius-pill: 999px;--control-border: var(--dropdown-border, rgba(255, 255, 255, .12));--button-hover: rgba(255, 255, 255, .06);--card-bg: rgba(20, 20, 20, .55);--card-shadow: 0 6px 24px rgba(0, 0, 0, .35)}body.reading-notation{margin:0;padding:0;min-height:100svh;font-family:var(--font-body, system-ui, sans-serif)}body.reading-notation.has-play-view header.site-header,body.reading-notation.has-play-view footer.site-footer{display:none}body.reading-notation #app-main{max-width:none;margin:0;padding:0;width:100%}body.reading-notation.has-play-view{min-height:100svh;overscroll-behavior-x:none}body.reading-notation.has-play-view #app-main{min-height:100svh;display:flex}.play-shell.rn-app{flex:1;display:flex;flex-direction:column;min-height:100svh;width:100%;color:var(--body-text);touch-action:pan-y;overflow-x:hidden}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:var(--radius-md);border:1px solid transparent;font:inherit;font-weight:600;cursor:pointer;color:var(--body-text-bright, var(--body-text));background:transparent;min-height:40px;transition:background .12s ease,border-color .12s ease}.btn:hover{background:var(--button-hover)}.btn-primary{background:var(--button-primary-bg, #0288d1);color:var(--button-primary-text, #fff);box-shadow:0 0 0 1px var(--button-primary-bg, #0288d1) inset,0 4px 12px #00000040}.btn-primary:hover{filter:brightness(1.08);background:var(--button-primary-bg, #0288d1)}.btn-secondary{background:#ffffff0a;color:var(--body-text-bright, var(--body-text));border:1px solid var(--control-border)}.btn-judge-good{background:var(--note-correct-fill, #216e2f);color:var(--note-correct-text, #fff)}.btn-judge-good:hover{filter:brightness(1.08)}.btn-judge-miss{background:#d0021b2e;color:var(--accent-emphasis-bright, #fd223c);border:1px solid var(--accent-emphasis, #d0021b)}.btn-judge-miss:hover{background:#d0021b47}.kbd{display:inline-block;padding:1px 6px;border-radius:var(--radius-sm);border:1px solid var(--control-border);background:#00000059;font-family:var(--font-mono-rn);font-size:.72rem;color:var(--body-text-bright, var(--body-text));margin-right:4px}.card{background:var(--card-bg);border:1px solid var(--dropdown-border);border-radius:var(--radius-lg);padding:var(--space-lg);color:var(--card-text, var(--body-text));box-shadow:var(--card-shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.rn-topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:linear-gradient(to bottom,var(--header-bg-top),var(--header-bg-bottom));border-bottom:1px solid var(--dropdown-border);gap:var(--space-md)}.rn-topbar .left{display:flex;align-items:center;gap:var(--space-sm);min-width:0}.rn-topbar .right{display:flex;align-items:center;gap:var(--space-sm)}.topbar-icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0;border-radius:var(--radius-sm);color:var(--link-color, var(--body-text-bright, var(--body-text)));font-size:1.1rem;line-height:1;cursor:pointer}.topbar-icon:hover{background:var(--button-hover)}.rn-brand{font-family:var(--font-display);font-weight:700;color:var(--heading-accent);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rn-tool{font-family:var(--font-display);font-weight:600;color:var(--body-text-bright);font-size:.95rem;white-space:nowrap}.rn-join-cta{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--radius-sm);background:var(--button-bg);color:var(--button-text);border:1px solid var(--control-border);font-size:.75rem;font-weight:600;text-decoration:none;white-space:nowrap}.rn-join-cta:hover{background:var(--button-hover)}.rn-kbd-hints{display:inline-flex;align-items:center;gap:var(--space-md);font-size:.78rem;color:var(--body-text);opacity:.7;margin-right:var(--space-sm)}.rn-kbd-hints>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.rn-timer-strip{height:3px;width:100%;background:#ffffff0f;position:relative}.rn-timer-strip>span{display:block;height:100%;background:var(--accent-emphasis-bright);width:100%;transition:width .1s linear}.rn-canvas{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:var(--space-xl) var(--space-lg) var(--space-lg);gap:var(--space-xl);position:relative}.rn-canvas[hidden],.rn-stats[hidden],.rn-stats-inline[hidden],.rn-timer-strip[hidden]{display:none!important}.rn-canvas-idle{justify-content:center}.rn-idle-card{text-align:center;padding:var(--space-xl);max-width:320px}.rn-idle-card .lede{font-family:var(--font-display);font-style:italic;color:var(--heading-accent);font-size:1rem;margin-bottom:var(--space-md)}.rn-idle-card .start-cta{width:100%}.rn-idle-card .config-summary{margin-top:var(--space-lg);font-size:.82rem;color:var(--body-text);opacity:.7;line-height:1.5}.rn-idle-card .config-hint{margin-top:var(--space-md);font-size:.72rem;color:var(--body-text);opacity:.5}.rn-idle-card .config-hint kbd{font-family:var(--font-mono-rn);padding:1px 5px;border:1px solid var(--control-border);border-radius:var(--radius-sm)}.rn-staff-host{width:100%;max-width:560px;height:180px;display:flex;align-items:center;justify-content:center}.rn-staff-host>svg{height:100%;width:auto;max-width:100%;display:block}.rn-stats-inline{display:none;font-family:var(--font-mono-rn);font-size:.72rem;letter-spacing:.04em;color:var(--body-text);opacity:.7;gap:var(--space-xl)}.rn-stats-inline b{color:var(--heading-accent);font-weight:700}[data-staff-host] line{stroke:var(--body-text);opacity:.85}[data-staff-host] [data-glyph]{fill:var(--body-text)}[data-staff-host][data-state=prompted] [data-glyph=noteheadBlack]{fill:var(--notehead-prompt)}[data-staff-host][data-state=revealed] [data-glyph=noteheadBlack]{fill:var(--notehead-prompt);animation:rn-prompt-pulse 1.2s ease-in-out infinite}[data-staff-host][data-state=correct] [data-glyph=noteheadBlack]{fill:var(--notehead-correct);animation:rn-correct-flash .7s ease-out forwards}[data-staff-host][data-state=wrong] [data-glyph=noteheadBlack]{fill:var(--notehead-prompt)}[data-staff-host][data-state=wrong] [data-ghost=true][data-glyph=noteheadBlack]{fill:var(--notehead-wrong);opacity:.85}@keyframes rn-prompt-pulse{0%,to{opacity:1}50%{opacity:.2}}@keyframes rn-correct-flash{0%{opacity:.15}80%{opacity:1}to{opacity:1}}.rn-stats{display:flex;justify-content:center;gap:var(--space-xl);padding:var(--space-sm) var(--space-lg);font-family:var(--font-mono-rn);font-size:.75rem;color:var(--body-text);opacity:.7;letter-spacing:.04em}.rn-stats b{color:var(--heading-accent);font-weight:700}.rn-answer-bank{width:100%;max-width:560px;padding:0 var(--space-lg);display:grid;gap:6px;grid-template-columns:repeat(7,1fr)}.rn-answer-bank[data-mode=naturals]{grid-template-columns:repeat(7,1fr)}.rn-answer-bank[data-mode=chromatic]{grid-template-columns:repeat(6,1fr)}@media(max-width:480px){.rn-answer-bank[data-mode=naturals],.rn-answer-bank[data-mode=chromatic]{grid-template-columns:repeat(4,1fr)}}.rn-answer-btn{min-height:44px;font-size:1.25rem;font-family:var(--font-body, system-ui, sans-serif);font-weight:600;border:1px solid var(--control-border);border-radius:var(--radius-md);background:var(--button-bg, rgba(255, 255, 255, .06));color:var(--body-text-bright, var(--body-text));cursor:pointer;padding:0;transition:background .1s ease,transform 80ms ease}.rn-answer-btn:hover{background:var(--button-hover)}.rn-answer-btn:active{transform:scale(.96)}.rn-transport{display:flex;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border-top:1px solid var(--dropdown-border);background:linear-gradient(to top,var(--footer-bg-top),transparent)}.rn-transport .btn{flex:1}.rn-funnel{padding:var(--space-md) var(--space-lg) max(calc(var(--space-md) + env(safe-area-inset-bottom,0px)),calc(var(--space-md) + 100lvh - 100svh));text-align:center;font-size:.78rem;color:var(--body-text);opacity:.65;border-top:1px solid var(--dropdown-border);background:linear-gradient(to top,var(--footer-bg-top),transparent)}.rn-funnel a{color:var(--link-color);text-decoration:none}.rn-funnel a:hover{text-decoration:underline}.drawer-overlay,.modal-overlay{position:fixed;inset:0;z-index:200;display:flex;opacity:0;pointer-events:none;transition:opacity .16s ease}.drawer-overlay.is-open,.modal-overlay.is-open{opacity:1;pointer-events:auto}.drawer-scrim,.modal-scrim{position:absolute;inset:0;background:#0000008c}.drawer{position:relative;z-index:1;width:88%;max-width:320px;height:100%;background:var(--body-bg);border-right:1px solid var(--dropdown-border);box-shadow:8px 0 24px #00000080;display:flex;flex-direction:column;background-image:linear-gradient(#000000b3,#000000b3),var(--bg-image);background-size:cover;transform:translate(-100%);transition:transform .2s ease}.drawer-overlay.is-open .drawer{transform:translate(0)}.drawer-left{margin-right:auto}.drawer-h{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--dropdown-border);display:flex;align-items:center;justify-content:space-between}.drawer-title{margin:0;font-family:var(--font-display);font-size:1rem;color:var(--body-text-bright)}.drawer-close,.modal-close{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0;border-radius:var(--radius-sm);color:var(--link-color, var(--body-text-bright));font-size:1.2rem;line-height:1;cursor:pointer}.drawer-close:hover,.modal-close:hover{background:var(--button-hover)}.drawer-body{flex:1;overflow-y:auto;padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-lg)}.drawer-section{display:flex;flex-direction:column;gap:var(--space-sm)}.drawer-link{display:block;width:100%;text-align:left;padding:var(--space-sm) var(--space-md);border:1px solid var(--control-border);background:transparent;color:var(--body-text-bright, var(--body-text));border-radius:var(--radius-sm);font:inherit;font-size:.9rem;text-decoration:none;cursor:pointer}.drawer-link:hover{background:var(--button-hover)}.modal-overlay{align-items:center;justify-content:center;padding:var(--space-lg)}.modal{position:relative;z-index:1;width:100%;max-width:480px;background:var(--body-bg);border:1px solid var(--dropdown-border);border-radius:var(--radius-lg);box-shadow:0 16px 48px #0009;display:flex;flex-direction:column;max-height:80vh;background-image:linear-gradient(#000000b3,#000000b3),var(--bg-image);background-size:cover}.modal-h{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--dropdown-border);display:flex;align-items:center;justify-content:space-between}.modal-title{margin:0;font-family:var(--font-display);font-size:1rem;color:var(--body-text-bright)}.modal-body{padding:var(--space-lg);overflow-y:auto;color:var(--body-text);font-size:.9rem;line-height:1.5}.modal-body p{margin:0 0 var(--space-md) 0}.modal-body p:last-child{margin-bottom:0}.modal-fine{font-size:.78rem;opacity:.7}.modal-foot{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--dropdown-border);display:flex;justify-content:flex-end;gap:var(--space-sm)}.rn-drawer-scrim{position:fixed;inset:0;background:#0000008c;z-index:100}.rn-drawer{position:fixed;top:0;right:0;bottom:0;width:88%;max-width:360px;background:var(--body-bg);border-left:1px solid var(--dropdown-border);box-shadow:-8px 0 24px #00000080;z-index:101;display:flex;flex-direction:column;background-image:linear-gradient(#000000b3,#000000b3),var(--bg-image);background-size:cover}.rn-drawer-head{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--dropdown-border);display:flex;align-items:center;justify-content:space-between}.rn-drawer-head h3{margin:0;font-family:var(--font-display);font-size:1rem;color:var(--body-text-bright)}.rn-drawer-body{flex:1;overflow-y:auto;padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xl)}.rn-drawer-section h4{margin:0 0 var(--space-sm) 0;font-family:var(--font-display);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--heading-accent)}.rn-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) 0;border-bottom:1px dashed rgba(255,255,255,.06);gap:var(--space-md)}.rn-row:last-child{border-bottom:0}.rn-row label{font-size:.85rem;color:var(--body-text)}.rn-row .value{color:var(--body-text-bright);font-family:var(--font-mono-rn);font-size:.78rem}.rn-chips{display:flex;flex-wrap:wrap;gap:6px}.rn-chip{padding:4px 10px;border-radius:var(--radius-pill);border:1px solid var(--control-border);background:transparent;color:var(--body-text);font-size:.75rem;cursor:pointer}.rn-chip.active{background:var(--button-primary-bg);color:var(--button-primary-text);border-color:var(--button-primary-bg)}.rn-toggle{display:inline-flex;align-items:center;gap:6px}.rn-toggle .switch{width:30px;height:16px;border-radius:999px;background:var(--button-bg);position:relative;border:1px solid var(--control-border)}.rn-toggle .switch:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--body-text);top:1px;left:1px}.rn-toggle.on .switch{background:var(--button-primary-bg)}.rn-toggle.on .switch:after{background:var(--button-primary-text);left:16px}.rn-drawer-foot{padding:var(--space-md) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--dropdown-border);display:flex;gap:var(--space-sm)}.rn-drawer-foot .btn{flex:1}.rn-coming-soon{padding:2rem;text-align:center;opacity:.7}@media(hover:none),(pointer:coarse),(max-height:500px){.rn-kbd-hints{display:none!important}}@media(min-width:768px){.rn-canvas{padding:var(--space-2xl);max-width:1100px;margin:0 auto;width:100%}.rn-staff-host{height:220px}.rn-transport{max-width:760px;margin:0 auto;width:100%}.rn-answer-bank{max-width:560px;margin:0 auto}}@media(orientation:landscape)and (max-height:500px){.play-shell.rn-app{min-height:0;overflow:hidden}.rn-funnel{display:none}.rn-topbar{padding:.25rem var(--space-md);min-height:36px}.rn-canvas{padding:var(--space-sm) var(--space-md);gap:var(--space-sm);flex:1;min-height:0;max-width:none;margin:0}.rn-staff-host{height:140px}.rn-stats{display:none}.rn-stats-inline{display:flex}}