:root{color:#3d3d3d;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--text-main:#3d3d3d;--text-muted:#8b9a8e;--border:#c0e1d2;--border-muted:#e5eee4;--panel:#e5eee4;--surface:#eaf0ea;--accent:#dc9b9b;--accent-strong:#c87e7e;--accent-light:#f5e6e6;--success:#6baf92;--success-light:#e5eee4;--error:#dc9b9b;--error-light:#f5e6e6;--shadow-soft:0 1px 2px #3d3d3d0f;--shadow-md:0 4px 12px #3d3d3d14;--shadow-lg:0 8px 24px #3d3d3d1a;background:#fff;font-family:Gill Sans,Gill Sans MT,Trebuchet MS,-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:#fff;min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}a{color:inherit}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.03em;color:var(--text-main);margin-bottom:8px;font-size:clamp(1.5rem,3.5vw,2.4rem);font-weight:700;line-height:1.1}h2{color:var(--text-main);margin-bottom:6px;font-size:1rem;font-weight:600}#root{min-height:100vh}@keyframes pulse{0%,to{box-shadow:0 0 0 4px #dc9b9b40}50%{box-shadow:0 0 0 12px #dc9b9b00}}@keyframes pulseGreen{0%,to{box-shadow:0 0 0 4px #6baf9240}50%{box-shadow:0 0 0 10px #6baf9200}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes dotAppear{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popOut{0%{opacity:0;transform:scale(.9)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes lakeWave{0%,to{transform:scale(.85)}50%{transform:scale(1.08)}}.app-shell{width:min(1080px,100% - 32px);margin:0 auto;padding:28px 0 130px;position:relative}.top-controls-fixed{z-index:10;align-items:center;gap:10px;display:flex;position:fixed;top:16px;left:16px;right:16px}.top-controls-spacer{flex:1}.brand-link{cursor:pointer;color:inherit;font:inherit;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;padding:4px;transition:transform .25s,opacity .25s;display:flex}.brand-link:hover{opacity:.85;transform:translateY(-2px)}.brand-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app-logo{flex-shrink:0;width:28px;height:28px}.brand-name{letter-spacing:.02em;color:var(--text-main);-webkit-user-select:none;user-select:none;font-family:Gill Sans,Gill Sans MT,Trebuchet MS,sans-serif;font-size:1.1rem;font-weight:600}.app-header{text-align:center;margin-bottom:28px;animation:.5s ease-out slideUp}.app-header .subtitle{color:var(--text-muted);max-width:520px;margin:0 auto;font-size:1rem}.app-body{flex-direction:column;align-items:center;gap:20px;display:flex}.board-stack{flex-direction:column;align-items:center;gap:14px;width:min(100%,860px);display:flex}.mode-toggle{border:1px solid var(--border);box-shadow:var(--shadow-soft);background:#e5eee4e6;border-radius:999px;padding:4px;display:inline-flex}.mode-button{min-width:92px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:8px 14px;font-size:.82rem;font-weight:600;transition:all .2s}.mode-button.active{background:var(--accent);color:#fff}.control-bar{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow-soft);border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;padding:12px 20px;animation:.4s ease-out fadeIn;display:flex}.stats-row{align-items:center;gap:8px;display:flex}.stat-chip{background:var(--surface);border-radius:10px;flex-direction:column;align-items:center;gap:1px;padding:4px 14px;display:flex}.stat-chip .stat-value{color:var(--text-main);font-size:.95rem;font-weight:700;line-height:1.3}.stat-chip .stat-label{color:var(--text-muted);letter-spacing:.02em;font-size:.68rem}.stat-chip.target-chip{background:var(--accent-light)}.stat-chip.target-chip .stat-value{color:var(--accent-strong)}.progress-panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(#e5eee4f5,#e5eee4d9),#e5eee4d1;border:1px solid #c0e1d266;border-radius:22px;width:min(100%,820px);padding:16px 18px;animation:.45s cubic-bezier(.34,1.56,.64,1) popOut;box-shadow:0 18px 40px #3d3d3d0f,inset 0 1px #fff9}.progress-panel-head{justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:12px;display:flex}.progress-kicker{letter-spacing:.08em;text-transform:uppercase;color:#3d3d3d73;margin:0 0 4px;font-size:.68rem;font-weight:700}.progress-copy{color:var(--text-main);margin:0;font-size:1rem;font-weight:650}.progress-percent{text-align:right;min-width:64px;color:var(--text-main);letter-spacing:-.03em;font-size:1.55rem;font-weight:700;line-height:1}.progress-track{background:linear-gradient(#c0e1d2b3,#c0e1d280);border-radius:999px;height:16px;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px #3d3d3d0f}.progress-fill{border-radius:inherit;background:linear-gradient(90deg,#dc9b9b 0%,#c87e7e 45%,#8b9a8e 100%);height:100%;transition:width .35s;box-shadow:inset 0 1px #ffffff59,0 6px 18px #dc9b9b33}.stage-complete-banner{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:radial-gradient(circle at 0%,#6baf921f,#0000 50%),#e5eee499;border:1px solid #6baf9233;border-radius:16px;align-items:center;gap:12px;padding:12px 16px;animation:.35s cubic-bezier(.34,1.56,.64,1) slideUp;display:flex;box-shadow:0 2px 8px #6baf9214,inset 0 1px #ffffff80}.stage-complete-note-pill{background:var(--success);color:#fff;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1rem;font-weight:700;display:flex;box-shadow:0 3px 10px #6baf9240}.stage-complete-metrics{flex:1;gap:8px;min-width:0;display:flex}.stage-metric-pill{background:#e5eee4bf;border:1px solid #c0e1d266;border-radius:12px;flex-direction:column;align-items:center;gap:1px;padding:6px 12px;display:flex}.stage-metric-value{color:var(--text-main);font-size:.92rem;font-weight:700;line-height:1.2}.stage-metric-label{color:var(--text-muted);letter-spacing:.02em;font-size:.65rem}.stage-continue-btn{background:var(--success);color:#fff;cursor:pointer;border:none;border-radius:12px;flex-shrink:0;min-height:38px;padding:0 20px;font-size:.84rem;font-weight:600;transition:all .2s;box-shadow:0 2px 8px #6baf9233}.stage-continue-btn:hover{background:#5a9a7e;transform:translateY(-1px);box-shadow:0 4px 14px #6baf9240}.stage-continue-btn:active{transform:translateY(0)}.stage-continue-btn:focus-visible{outline:2px solid var(--success);outline-offset:2px}.fretboard-panel{box-shadow:var(--shadow-md);background:#f9f6f1;border:1px solid #a98b76;border-radius:18px;width:fit-content;max-width:100%;padding:22px 18px 14px;animation:.6s ease-out fadeIn}.fretboard-scroll{padding-bottom:6px;overflow-x:auto}.fretboard-scroll::-webkit-scrollbar{height:4px}.fretboard-scroll::-webkit-scrollbar-thumb{background:#bfa28c;border-radius:2px}.fretboard{min-width:700px}.fret-label-row,.string-row{grid-template-columns:40px repeat(13,minmax(48px,1fr));display:grid}.fret-label-row{margin-bottom:0}.fret-label{text-align:center;color:var(--text-muted);font-size:.7rem;font-weight:500;line-height:1.4}.string-label{color:var(--text-muted);justify-content:flex-end;align-items:center;padding-right:8px;font-size:.82rem;font-weight:600;display:flex;position:relative;left:37px}.fret-cell{height:48px;transition:background-color .2s;position:relative}.fret-cell:not(.open-string):hover{background:radial-gradient(circle,#dc9b9b80 28%,#0000 58%)}.fret-cell.is-clickable{cursor:pointer}.fret-cell.is-clickable:hover{background:radial-gradient(circle,#dc9b9b80 28%,#0000 58%)}.fret-cell.is-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.fret-cell.open-string{background:0 0}.fret-cell.open-string:before{content:none}.fret-cell:after{content:"";z-index:0;pointer-events:none;background:#bfa28c;width:1px;position:absolute;top:0;bottom:0;right:0}.fret-cell.first-string:after{top:50%}.fret-cell.last-string:after{bottom:50%}.fret-cell.open-string:after{background:#bfa28c;width:3px}.fret-cell.last-fret:after{content:none}.fret-cell:before{content:"";height:var(--string-weight,1.5px);z-index:1;pointer-events:none;background:#bfa28c;border-radius:1px;position:absolute;top:50%;left:0;right:-1px;transform:translateY(-50%)}.fret-cell.last-fret:before{right:0}.fret-cell.is-target .fret-marker,.fret-cell.is-correct .fret-marker,.fret-cell.is-incorrect .fret-marker,.fret-cell.is-found .fret-marker,.fret-cell.has-mistake .fret-marker{z-index:2;border-radius:50%;width:24px;height:24px;margin:auto;transition:background-color .35s,box-shadow .35s;position:absolute;inset:0}.fret-cell.is-target .fret-marker{background:var(--accent);animation:.35s ease-out dotAppear,2s ease-in-out .35s infinite pulse;box-shadow:0 0 0 4px #dc9b9b33}.fret-cell.is-correct .fret-marker{background:var(--success);animation:1.5s ease-in-out pulseGreen;box-shadow:0 0 0 4px #6baf9233}.fret-cell.is-incorrect .fret-marker{background:var(--error);animation:.4s ease-out shake;box-shadow:0 0 0 4px #dc9b9b33}.fret-cell.is-found .fret-marker{background:#6baf92f2;animation:.35s ease-out dotAppear;box-shadow:0 0 0 4px #6baf922e}.fret-cell.has-mistake .fret-marker{background:#dc9b9beb;animation:.35s ease-out shake;box-shadow:0 0 0 4px #dc9b9b2e}.fret-found-label{z-index:3;color:#fff;pointer-events:none;font-size:.72rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.inlay-marker{z-index:0;pointer-events:none;position:absolute;bottom:-5px;left:50%;transform:translate(-50%)}.inlay-marker.single:before{content:"";background:#3d3d3d1f;border-radius:50%;width:7px;height:7px;display:block}.welcome-dot{background:var(--dot-color);z-index:2;width:28px;height:28px;animation:lakeWave var(--wave-duration) ease-in-out var(--wave-delay) infinite;box-shadow:0 2px 8px color-mix(in srgb, var(--dot-color) 35%, transparent);border-radius:50%;justify-content:center;align-items:center;margin:auto;transition:opacity .4s;display:flex;position:absolute;inset:0}.fretboard-panel:not(.welcome-active) .welcome-dot{opacity:0;animation:none;transform:scale(0)}.welcome-dot-label{color:#fff;text-shadow:0 1px 2px #00000026;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:.62rem;font-weight:700;line-height:1}.feedback-banner{border-radius:14px;align-items:center;gap:14px;width:fit-content;padding:14px 20px;animation:.35s ease-out slideUp;display:flex}.feedback-banner.correct{background:var(--success-light);border:1px solid #6baf9233}.feedback-banner.incorrect{background:var(--error-light);border:1px solid #dc9b9b33}.feedback-icon{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:.95rem;font-weight:700;display:flex}.correct .feedback-icon{background:var(--success)}.incorrect .feedback-icon{background:var(--error)}.feedback-text strong{color:var(--text-main);font-size:.88rem;display:block}.feedback-text span{color:var(--text-muted);font-size:.8rem}.find-all-prompt{width:min(100%,820px);box-shadow:var(--shadow-soft);background:#e5eee4d1;border:1px solid #c0e1d24d;border-radius:18px;padding:12px 18px}.find-all-prompt p{text-align:center;color:var(--text-main);margin:0;font-size:.95rem;font-weight:600}.circle-of-fifths-panel{width:min(100%,340px);animation:.5s ease-out fadeIn}.circle-of-fifths-svg{width:100%;height:auto;display:block}.cof-segment{outline:none;transition:fill .25s,filter .25s}.cof-segment.cof-idle{fill:#e5eee4eb;stroke:#c0e1d299;stroke-width:.8px}.cof-segment.cof-idle:hover{fill:#dc9b9b26;stroke:var(--accent);cursor:pointer;filter:drop-shadow(0 0 4px #dc9b9b26)}.cof-segment.cof-current{fill:var(--accent);stroke:#c87e7e99;stroke-width:1px;animation:2s ease-in-out infinite pulse}.cof-segment.cof-completed{fill:#6baf922e;stroke:#6baf9259;stroke-width:.8px}.cof-label{fill:#5a6b5e;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:13px;font-weight:700}.cof-label.cof-label-current{fill:#fff}.summary-card{background:radial-gradient(circle at 0 0,#dc9b9b1f,#0000 32%),linear-gradient(#e5eee4fa,#e5eee4e0);border:1px solid #c0e1d24d;border-radius:24px;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:16px;width:min(100%,820px);padding:20px;animation:.35s ease-out slideUp;display:grid;box-shadow:0 24px 50px #3d3d3d0f,inset 0 1px #fff9}.summary-copy h2{color:#0f172a;margin:0 0 8px;font-size:1.35rem;line-height:1.1}.summary-copy p{color:var(--text-muted);margin:0;font-size:.92rem}.summary-kicker{letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong);margin:0 0 8px;font-size:.72rem;font-weight:700}.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.summary-metric{background:#e5eee4c7;border:1px solid #c0e1d280;border-radius:18px;flex-direction:column;justify-content:center;gap:4px;min-height:110px;padding:16px;display:flex;box-shadow:inset 0 1px #ffffff80}.summary-value{color:var(--text-main);letter-spacing:-.03em;font-size:1.8rem;font-weight:700;line-height:1}.summary-label{color:var(--text-muted);font-size:.78rem}.stage-summary-card{background:radial-gradient(circle at 0 0,#6baf921f,#0000 32%),linear-gradient(#e5eee4fa,#e5eee4e0);border:1px solid #c0e1d24d;border-radius:24px;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);gap:16px;width:min(100%,820px);padding:20px;animation:.35s ease-out slideUp;display:grid;box-shadow:0 24px 50px #3d3d3d0f,inset 0 1px #fff9}.stage-continue-button{grid-column:1/-1;justify-self:flex-start}.answer-panel{width:100%;max-width:580px;animation:.45s cubic-bezier(.34,1.56,.64,1) popOut}.answer-label{text-align:center;color:var(--text-muted);margin-bottom:12px;font-size:.78rem;font-weight:500}.answer-grid{grid-template-columns:repeat(4,auto);justify-content:center;gap:6px 4px;display:grid}.note-button{width:60px;height:40px;color:var(--text-main);cursor:pointer;background:#fff8ec;border:none;border-radius:20px;justify-self:center;font-size:.92rem;font-weight:600;transition:all .3s}.note-button-label{position:static}.note-button:hover:not(:disabled){color:var(--accent-strong);background:#fff8ec;box-shadow:0 0 0 5px #99ad7a}.note-button:active:not(:disabled){transform:scale(.98)}.note-button:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}.note-button:disabled{cursor:default}.note-button:disabled:not(.is-correct):not(.is-incorrect):not(.is-reveal){opacity:.4}.note-button.is-correct{background:var(--success);color:#fff;transform:scale(1.06);box-shadow:0 2px 8px #6baf924d}.note-button.is-incorrect{background:var(--error);color:#fff;animation:.35s ease-out shake}.note-button.is-reveal{background:var(--success-light);color:var(--success);box-shadow:inset 0 0 0 1px var(--success)}.primary-button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:10px;min-height:38px;padding:0 20px;font-size:.88rem;font-weight:600;transition:all .2s}.primary-button:hover:not(:disabled){background:var(--accent-strong);box-shadow:var(--shadow-md);transform:translateY(-1px)}.primary-button:active:not(:disabled){transform:translateY(0)}.primary-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.primary-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.language-toggle{background:#eae0cf;border:1px solid #94b4c1;border-radius:999px;padding:3px;display:inline-flex}.sound-toggle{min-height:38px;box-shadow:var(--shadow-soft);cursor:pointer;color:var(--text-main);background:#eae0cf;border:1px solid #94b4c1;border-radius:999px;align-items:center;gap:8px;padding:0 14px;transition:all .2s;display:inline-flex}.sound-toggle:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.sound-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sound-toggle-icon{color:#6a8fa0;background:#94b4c140;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:.85rem;font-weight:700;line-height:1;display:inline-flex}.sound-toggle-text{font-size:.8rem;font-weight:600}.sound-toggle.muted{color:var(--text-muted);background:#eae0cfb3}.sound-toggle.muted .sound-toggle-icon{color:var(--text-muted);background:#8b9a8e24}.lang-button{cursor:pointer;min-width:50px;color:var(--text-muted);background:0 0;border:none;border-radius:999px;padding:7px 12px;font-size:.82rem;font-weight:600;transition:all .2s}.lang-button:hover{color:var(--text-main)}.lang-button.active{color:#fff;background:#94b4c1}.lang-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (width<=768px){.app-shell{width:calc(100% - 20px);padding-top:16px}.app-header{margin-bottom:20px}.control-bar{gap:10px;padding:10px 14px}.stat-chip{padding:3px 10px}.fretboard{min-width:540px}.fret-label-row,.string-row{grid-template-columns:32px repeat(13,minmax(36px,1fr))}.string-label{padding-right:6px;font-size:.76rem;left:29px}.fret-label{font-size:.62rem}.fret-cell{height:40px}.fret-cell.is-target .fret-marker,.fret-cell.is-correct .fret-marker,.fret-cell.is-incorrect .fret-marker,.fret-cell.is-found .fret-marker,.fret-cell.has-mistake .fret-marker{width:20px;height:20px}.welcome-dot{width:24px;height:24px}.fret-found-label{font-size:.64rem}.fretboard-panel{border-radius:14px;padding:16px 12px 10px}.progress-panel{border-radius:18px;padding:14px 16px}.summary-card,.stage-summary-card{border-radius:20px;grid-template-columns:1fr;width:100%;padding:18px}.answer-grid{gap:5px}.note-button{border-radius:18px;width:52px;height:36px;font-size:.85rem}.top-controls-fixed{top:10px;right:10px}}@media (width<=600px){.fretboard{min-width:460px}.fret-label-row,.string-row{grid-template-columns:28px repeat(13,minmax(32px,1fr))}.string-label{padding-right:4px;font-size:.72rem;left:25px}.fret-label{font-size:.58rem}.fret-cell{height:38px}.fret-cell.is-target .fret-marker,.fret-cell.is-correct .fret-marker,.fret-cell.is-incorrect .fret-marker,.fret-cell.is-found .fret-marker,.fret-cell.has-mistake .fret-marker{width:18px;height:18px}.welcome-dot{width:22px;height:22px}.fret-found-label{font-size:.58rem}.fretboard-panel{border-radius:12px;padding:12px 8px 8px}.note-button{border-radius:18px;width:calc(25% - 3px);height:36px}}@media (width<=480px){.mode-button{min-width:84px;padding:7px 12px;font-size:.76rem}.top-controls-fixed{gap:8px}.sound-toggle{padding:0 12px}.sound-toggle-text{font-size:.74rem}.control-bar{flex-direction:column;gap:8px}.fretboard{min-width:370px}.fret-label-row,.string-row{grid-template-columns:24px repeat(13,minmax(24px,1fr))}.string-label{padding-right:2px;font-size:.68rem;left:21px}.fret-label{font-size:.54rem}.fret-cell{height:34px}.fret-cell.is-target .fret-marker,.fret-cell.is-correct .fret-marker,.fret-cell.is-incorrect .fret-marker,.fret-cell.is-found .fret-marker,.fret-cell.has-mistake .fret-marker{width:16px;height:16px}.welcome-dot{width:20px;height:20px}.fret-found-label{font-size:.52rem}.fretboard-panel{border-radius:10px;padding:10px 6px 6px}.progress-panel-head{flex-direction:column;align-items:flex-start;margin-bottom:10px}.progress-percent{text-align:left;min-width:0;font-size:1.35rem}.summary-grid{grid-template-columns:1fr}.summary-metric{min-height:86px}.answer-grid{gap:4px}.note-button{border-radius:17px;width:calc(25% - 3px);height:34px}.stats-row{gap:1px}.stat-chip .stat-value{font-size:.85rem}}.app-footer{border-top:1px solid var(--border-muted);text-align:center;z-index:5;background:#fff;flex-direction:column;align-items:center;gap:14px;padding:16px 0;display:flex;position:fixed;bottom:0;left:0;right:0}.footer-link{color:var(--text-muted);align-items:center;gap:6px;font-size:.82rem;text-decoration:none;transition:color .2s;display:inline-flex}.footer-link:hover{color:var(--text-main);text-decoration:underline}.footer-icon{flex-shrink:0}.footer-copy{color:var(--text-muted);opacity:.7;margin:0;font-size:.72rem}