.guitar-app{background:var(--gt-card);border:1px solid var(--gt-border);border-radius:20px;width:100%;max-width:1200px;margin:0 auto;padding:1rem 1.5rem;position:relative;overflow:hidden;box-shadow:0 12px 35px #43331f1a}.guitar-app[data-instrument=nylon]{background:linear-gradient(#fdfcfa 0%,#faf8f4 100%)}.guitar-app[data-instrument=electric]{border-color:var(--gt-border);background:linear-gradient(#fdfcfa 0%,#faf7f2 100%);box-shadow:0 1px 3px #2c24180a,0 8px 24px #2c24180f}.guitar-app[data-instrument=electric] .gtr-btn{background:var(--gt-card);border-color:var(--gt-border);color:var(--gt-ink-soft)}.guitar-app[data-instrument=electric] .gtr-btn:hover{border-color:var(--gt-sage);color:var(--gt-sage)}.guitar-app[data-instrument=electric] .gtr-btn.active{background:var(--gt-sage);color:#fff}.guitar-app[data-instrument=electric] .gtr-type-group{background:var(--gt-surface);border-color:var(--gt-border-soft)}.guitar-app[data-instrument=electric] .gtr-type-btn{color:var(--gt-ink-muted)}.guitar-app[data-instrument=electric] .gtr-type-btn.active{color:var(--gt-ink);background:var(--gt-card)}.gtr-top-row{grid-template-columns:180px 1fr auto;align-items:start;gap:.75rem;margin-bottom:1rem;display:grid}.gtr-earn-card{background:var(--gt-card);border:1px solid var(--gt-border);text-align:center;border-radius:14px;flex-direction:column;align-items:center;gap:.6rem;padding:1.25rem 1rem;transition:box-shadow .25s;display:flex}.gtr-earn-card:hover{box-shadow:0 4px 16px #2c241812}.earn-icon{font-size:1.5rem}.earn-text{flex-direction:column;gap:.2rem;display:flex}.earn-text strong{color:var(--gt-ink);letter-spacing:.01em;font-size:.75rem;font-weight:700}.earn-text span{color:var(--gt-ink-muted);font-size:.65rem;line-height:1.35}.earn-cta{background:var(--gt-terracotta);color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;border:none;border-radius:8px;padding:.45rem 1.1rem;font-family:DM Sans,Inter,sans-serif;font-size:.6rem;font-weight:800;transition:background .2s}.earn-cta:hover{background:var(--gt-terracotta-hover)}.gtr-controls-center{flex-direction:column;flex:1;align-items:center;gap:.5rem;min-width:0;display:flex}.gtr-btn-group{grid-template-columns:repeat(6,1fr);gap:.35rem;width:100%;display:grid}.gtr-btn{background:var(--gt-card);border:1px solid var(--gt-border);color:var(--gt-ink-soft);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;white-space:nowrap;text-align:center;border-radius:9px;justify-content:center;align-items:center;gap:5px;padding:.55rem .75rem;font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:700;text-decoration:none;transition:all .15s;display:flex}.gtr-btn:hover{border-color:var(--gt-terracotta);transform:translateY(-1px)}.gtr-btn.active{background:var(--gt-terracotta);color:#fff;border-color:var(--gt-terracotta);box-shadow:0 2px 8px #d8891740}.gtr-sub-controls{grid-template-columns:repeat(3,1fr) 1.3fr 1.3fr 1fr repeat(2,auto);align-items:center;gap:.35rem;width:100%;display:grid}.gtr-sub-btn{border:1px solid var(--gt-border);color:var(--gt-ink-soft);cursor:pointer;text-transform:uppercase;text-align:center;background:0 0;border-radius:8px;min-height:38px;padding:.4rem .6rem;font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:700;transition:all .15s}.gtr-sub-btn:hover{border-color:var(--gt-terracotta);color:var(--gt-terracotta)}.gtr-sub-btn.active{background:var(--gt-sage);color:#fff;border-color:var(--gt-sage)}#gtr-kb-status{opacity:.7;margin-left:.2rem;font-size:9px}.gtr-type-rec-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-top:.5rem;display:flex}.gtr-type-group{border:1px solid var(--gt-border-soft);background:var(--gt-surface);border-radius:8px;gap:.3rem;padding:.2rem;display:flex}.gtr-type-btn{text-transform:uppercase;cursor:pointer;color:var(--gt-ink-muted);background:0 0;border:none;border-radius:8px;padding:.45rem 1rem;font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:700;transition:all .15s}.gtr-type-btn.active{background:var(--gt-sage);color:#fff}.gtr-type-btn:hover:not(.active){color:var(--gt-ink-soft)}.gtr-rec-group{justify-content:center;align-items:center;gap:.3rem;margin-top:.5rem;display:flex}.gtr-rec-btn{background:var(--gt-card);border:1px solid var(--gt-border);color:var(--gt-ink-soft);text-transform:uppercase;cursor:pointer;white-space:nowrap;border-radius:8px;align-items:center;gap:.4rem;padding:.45rem 1rem;font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:700;transition:all .15s;display:inline-flex}.gtr-rec-btn:hover{border-color:var(--gt-red);color:var(--gt-red)}.gtr-rec-btn.recording{background:var(--gt-red);color:#fff;border-color:var(--gt-red);animation:1s infinite rec-pulse}.gtr-rec-btn.hidden{display:none!important}.rec-dot{background:var(--gt-red);border-radius:50%;width:7px;height:7px}.gtr-rec-btn.recording .rec-dot{background:#fff}@keyframes rec-pulse{0%,to{box-shadow:0 0 #b54a4a59}50%{box-shadow:0 0 0 6px #b54a4a00}}.gtr-rec-timer{background:var(--gt-red-bg);color:var(--gt-red);border:1px solid #f0d0d0;border-radius:9999px;align-items:center;gap:.4rem;width:fit-content;margin:0 auto;padding:.35rem 1rem;font-size:10px;font-weight:700;display:flex}.gtr-rec-timer.hidden{display:none!important}.rec-pulse{background:var(--gt-red);border-radius:50%;width:7px;height:7px;animation:1s infinite rec-dot-pulse}@keyframes rec-dot-pulse{0%,to{opacity:1}50%{opacity:.4}}.earn-share{margin-top:.25rem;background:#8b5cf6!important}.gtr-mark-controls{background:var(--gt-card);border:1px solid var(--gt-border);border-radius:12px;margin-bottom:1rem;padding:.75rem 1rem}.gtr-mark-header{margin-bottom:.5rem}.gtr-mark-label{font-family:var(--app-font-ui,"DM Sans", sans-serif);color:var(--gt-ink-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.65rem;font-weight:700}.gtr-mark-notes{flex-wrap:wrap;align-items:center;gap:.35rem;min-height:24px;margin-bottom:.5rem;display:flex}.gtr-mark-empty{font-family:var(--app-font-body,"Inter", sans-serif);color:var(--gt-ink-muted);font-size:.75rem}.gtr-mark-chip{background:var(--gt-amber-bg);border:1px solid var(--gt-border);font-family:var(--app-font-body,"Inter", sans-serif);color:var(--gt-ink-soft);border-radius:6px;align-items:center;gap:4px;padding:3px 8px;font-size:.7rem;display:inline-flex}.gtr-mark-chip strong{color:var(--gt-ink);font-weight:600}.gtr-mark-actions{gap:.3rem;display:flex}.gtr-mark-btn{font-family:var(--app-font-ui,"DM Sans", sans-serif);cursor:pointer;text-transform:uppercase;border:none;border-radius:6px;padding:.3rem .65rem;font-size:.65rem;font-weight:700;transition:all .15s}.gtr-mark-play{background:var(--gt-sage);color:#fff}.gtr-mark-play:hover{background:#6a7b5f}.gtr-mark-stop{background:var(--gt-red);color:#fff}.gtr-mark-stop:hover{background:#a04040}.gtr-mark-clear{background:var(--gt-card);color:var(--gt-ink-soft);border:1px solid var(--gt-border)}.gtr-mark-clear:hover{background:var(--gt-surface)}.gtr-hint-controls{background:var(--gt-sage-bg);border:1px solid #c0d8b8;border-radius:10px;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.5rem 1rem;display:flex}.gtr-hint-controls.hidden{display:none!important}.gtr-hint-notes{flex-wrap:wrap;gap:.2rem;display:flex}.gtr-hint-note-btn{color:#3d5a35;cursor:pointer;text-transform:uppercase;background:#d4e4cc;border:1px solid #a8c8a0;border-radius:5px;padding:.2rem .45rem;font-size:8px;font-weight:700}.gtr-hint-note-btn:hover{background:#a8c8a0}.gtr-hint-note-btn.active-hint{background:var(--gt-sage);color:#fff;border-color:var(--gt-sage)}.gtr-body-visual{display:none!important}.gtr-neck-frame{-webkit-overflow-scrolling:touch;background:linear-gradient(90deg, #b37a2d 0%, #704617 3%, var(--guitar,#40291c) 5%, var(--guitar-dark,#281910) 100%);border:1px solid #6c4624;border-radius:13px;width:100%;height:340px;transition:background .4s,border-color .4s;display:flex;position:relative;overflow:auto hidden;box-shadow:inset 0 0 40px #00000040,0 8px 18px #00000026}.guitar-app[data-instrument=nylon] .gtr-neck-frame{background:#2c1810 repeating-linear-gradient(0deg,#0000,#0000 8px,#ffffff03 8px 9px);border-color:#1e100a}.guitar-app[data-instrument=electric] .gtr-neck-frame{background:linear-gradient(#3d2b1f 0%,#2c1e14 50%,#3d2b1f 100%);border-color:#1a0f08;box-shadow:inset 0 2px 12px #0000001a,inset 0 0 20px #00000014,0 4px 12px #2c24181a}.gtr-neck-frame::-webkit-scrollbar{height:0;display:none}.gtr-headstock{z-index:50;border-right:10px solid;border-radius:0 0 0 1rem;flex-shrink:0;align-items:stretch;width:60px;transition:background .4s,border-color .4s;display:flex;position:sticky;left:0;box-shadow:inset -4px 0 12px #00000026}.gtr-headstock-inner{flex-direction:column;justify-content:space-around;align-items:center;width:100%;display:flex}.gtr-head-note{color:#fff;text-shadow:0 1px 3px #0009;opacity:.85;letter-spacing:.05em;font-size:12px;font-weight:900}.guitar-app[data-instrument=nylon] .gtr-headstock{background-image:repeating-linear-gradient(0deg,#0000,#0000 6px,#0000000d 6px 7px)!important}.guitar-app[data-instrument=electric] .gtr-headstock{background:#3d2b1f!important;border-right-color:#2c1e14!important}.guitar-app[data-instrument=nylon] .gtr-headstock{background:#4a2518!important;border-right-color:#3a1e10!important}.gtr-fretboard{flex:1;min-width:900px;display:flex;position:relative}.guitar-app[data-instrument=acoustic] .gtr-fretboard{background-image:repeating-linear-gradient(0deg,#0000,#0000 12px,#00000005 12px 13px),repeating-linear-gradient(90deg,#0000,#0000 60px,#00000003 60px 61px)}.guitar-app[data-instrument=nylon] .gtr-fretboard{background-image:repeating-linear-gradient(0deg,#0000,#0000 10px,#ffffff04 10px 11px)}.guitar-app[data-instrument=electric] .gtr-fretboard{background:linear-gradient(#2c1e1414 0%,#0000 20% 80%,#2c1e1414 100%)}.gtr-fret-col{border-right:1.5px solid;flex-direction:column;flex:1;transition:border-color .4s;display:flex;position:relative}.gtr-fret-col.fret-unit-0{background:#00000014;border-right-width:6px;flex:0 0 48px!important}.guitar-app[data-instrument=nylon] .gtr-fret-col.fret-unit-0{background:#ffffff08}.guitar-app[data-instrument=electric] .gtr-fret-col.fret-unit-0{background:#0000000f;box-shadow:inset -2px 0 6px #0000001a}.gtr-string-line{z-index:10;pointer-events:none;transition:opacity .3s,filter .3s;position:absolute;left:0;right:0;box-shadow:0 1px 2px #0003}.guitar-app[data-instrument=acoustic] .gtr-string-line{box-shadow:0 .5px #ffffff4d,0 1px 2px #00000040}.guitar-app[data-instrument=nylon] .gtr-string-line{box-shadow:none;opacity:.85}.guitar-app[data-instrument=electric] .gtr-string-line{box-shadow:0 0 1px #c8b49666,0 .5px #fff0dc80,0 1px 2px #0000004d}.gtr-string-line.flash{opacity:.6;filter:brightness(2)}@keyframes gtr-vibrate{0%,to{transform:translateY(0)}25%{transform:translateY(-2px)}50%{transform:translateY(1px)}75%{transform:translateY(-1px)}}.gtr-string-line.vibrate{animation:60ms linear 4 gtr-vibrate}.gtr-hitbox{cursor:pointer;z-index:40;justify-content:center;align-items:center;width:100%;height:16.66%;display:flex;position:relative}.gtr-dot-visual{color:#0000;border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:8px;font-weight:900;line-height:1;transition:all .12s ease-out;display:flex}.gtr-note-label{pointer-events:none;user-select:none;opacity:0;font-size:9px;font-weight:800;transition:opacity .12s}.gtr-fretboard.labels-on .gtr-note-label{opacity:.85;color:#ffffffe6;text-shadow:0 1px 2px #00000080;font-size:10px;position:relative;top:-8px}.gtr-fretboard.labels-on .gtr-hitbox.active .gtr-note-label,.gtr-fretboard.labels-on .gtr-hitbox.marked .gtr-note-label,.gtr-fretboard.labels-on .gtr-hitbox.hinted .gtr-note-label{opacity:1;font-size:11px}.gtr-fretboard .gtr-string-key-label{color:#ffffffe6;z-index:55;pointer-events:none;user-select:none;letter-spacing:.03em;white-space:nowrap;background:#0000008c;border-radius:3px;padding:1px 3px;font-size:8px;font-weight:900;line-height:1;display:none;position:absolute;top:50%;left:2px;transform:translateY(-50%)}.gtr-fretboard .gtr-fret-key-label{color:#ffffffd9;z-index:55;pointer-events:none;user-select:none;letter-spacing:.03em;background:#00000080;border-radius:3px;padding:1px 3px;font-size:8px;font-weight:900;line-height:1;display:none;position:absolute;top:2px;left:50%;transform:translate(-50%)}.gtr-fretboard.kb-mode .gtr-string-key-label,.gtr-fretboard.kb-mode .gtr-fret-key-label{display:flex}.gtr-fretboard.kb-mode .gtr-string-key-label.string-held{background:var(--gt-terracotta);color:#fff;box-shadow:0 0 8px #d8891780}.gtr-kb-guide{margin-bottom:0}.gtr-kb-guide.hidden{display:none!important}.gtr-kb-guide-inner{background:var(--gt-card);border:1px solid var(--gt-border);border-bottom:none;border-radius:10px 10px 0 0;flex-direction:column;gap:4px;padding:6px 12px 6px 72px;display:flex}.gtr-kb-fret-row{flex-wrap:nowrap;gap:3px;display:flex;overflow-x:auto}.gtr-kb-fret-chip{background:var(--gt-surface);border:1px solid var(--gt-border);min-width:22px;height:20px;color:var(--gt-ink-soft);letter-spacing:0;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:0 4px;font-family:DM Sans,Inter,monospace;font-size:9px;font-weight:800;display:inline-flex}.gtr-kb-string-row{align-items:center;gap:6px;display:flex}.gtr-kb-string-chip{background:var(--gt-surface);border:1px solid var(--gt-border);color:var(--gt-ink-soft);white-space:nowrap;border-radius:4px;align-items:center;gap:3px;padding:2px 6px;font-family:DM Sans,Inter,sans-serif;font-size:9px;font-weight:700;display:inline-flex}.gtr-kb-key{color:var(--gt-terracotta);font-weight:900}.gtr-kb-arrow{color:var(--gt-ink-muted);font-size:8px}.gtr-kb-note{font-size:8px;font-weight:600}body.dark .guitar-app .gtr-kb-guide-inner,body:not(.light-mode) .guitar-app .gtr-kb-guide-inner{background:#ffffff0d;border-color:#ffffff1a}body.dark .guitar-app .gtr-kb-fret-chip,body:not(.light-mode) .guitar-app .gtr-kb-fret-chip,body.dark .guitar-app .gtr-kb-string-chip,body:not(.light-mode) .guitar-app .gtr-kb-string-chip{color:#fffc;background:#ffffff14;border-color:#ffffff1f}body.dark .guitar-app .gtr-kb-key,body:not(.light-mode) .guitar-app .gtr-kb-key{color:#d88917}body.dark .guitar-app .gtr-kb-arrow,body:not(.light-mode) .guitar-app .gtr-kb-arrow{color:#fff6}@media (width<=800px){.gtr-kb-guide-inner{gap:3px;padding:4px 8px 4px 50px}.gtr-kb-fret-chip{min-width:18px;height:17px;font-size:8px}.gtr-kb-string-chip{padding:1px 4px;font-size:8px}}@media (width<=430px){.gtr-kb-guide-inner{gap:2px;padding:3px 6px 3px 46px}.gtr-kb-fret-chip{min-width:16px;height:16px;font-size:7px}.gtr-kb-string-chip{gap:2px;padding:1px 3px;font-size:7px}.gtr-kb-string-row{gap:3px}}.gtr-vol-control{cursor:default}.gtr-vol-slider{cursor:pointer;-webkit-appearance:none;appearance:none;background:var(--gt-border);border-radius:2px;outline:none;width:60px;height:4px}.gtr-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--gt-terracotta);cursor:pointer;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px #0003}.gtr-vol-slider::-moz-range-thumb{background:var(--gt-terracotta);cursor:pointer;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px #0003}body.dark .gtr-vol-slider::-webkit-slider-thumb,body:not(.light-mode) .gtr-vol-slider::-webkit-slider-thumb{border-color:var(--gt-card)}.gtr-btn.labels-active{background:var(--gt-terracotta)!important;color:#fff!important;border-color:var(--gt-terracotta)!important}.gtr-hitbox.active .gtr-dot-visual{transform:scale(1.2);box-shadow:0 0 14px #3b82f680;color:#fff!important;background:#3b82f6!important}.gtr-hitbox.active .gtr-note-label{opacity:1}.gtr-hitbox.marked .gtr-dot-visual{border-color:#d97706;transform:scale(.9);box-shadow:0 2px 6px #f59e0b4d;color:#fff!important;background:#f59e0b!important}.gtr-hitbox.marked .gtr-note-label{opacity:1}.gtr-hitbox.marked:after{content:"";opacity:.4;border:2px solid #f59e0b;border-radius:50%;position:absolute;inset:-2px}.gtr-hitbox.hinted .gtr-dot-visual{background:#10b9811a;border-color:#10b981;animation:1.5s infinite hint-pulse;color:#10b981!important}.gtr-hitbox.hinted .gtr-note-label{opacity:1}.gtr-hitbox.hint-correct .gtr-dot-visual{animation:none;transform:scale(1.2);box-shadow:0 0 14px #10b98180;color:#fff!important;background:#10b981!important}@keyframes hint-pulse{0%,to{box-shadow:0 0 #10b98166}50%{box-shadow:0 0 0 7px #10b98100}}.gtr-dots-row{z-index:5;pointer-events:none;width:100%;height:18px;display:flex;position:absolute;top:0;left:0;right:0}.gtr-dot-cell{flex:1;justify-content:center;align-items:center;display:flex}.fret-indicator-dot{opacity:.45;background:#d1d5db;border-radius:50%;width:10px;height:10px;box-shadow:inset 0 1px 2px #00000026}.guitar-app[data-instrument=nylon] .fret-indicator-dot{background:#d4b896}.guitar-app[data-instrument=electric] .fret-indicator-dot{opacity:.45;background:#c4a882;box-shadow:inset 0 1px 2px #00000026}.gtr-double-dot{flex-direction:column;align-items:center;gap:6px;display:flex}.gtr-double-dot .fret-indicator-dot{width:8px;height:8px}.gtr-scroll-track-wrap{width:100%;max-width:320px;margin:.5rem auto .3rem;padding:0 1rem}.gtr-scroll-track{background:linear-gradient(to right, #3b82f6 0%, #3b82f6 var(--scroll-pct,22%), #e2e8f0 var(--scroll-pct,22%));cursor:pointer;border-radius:9999px;width:100%;height:6px;position:relative}.gtr-scroll-thumb{cursor:grab;touch-action:none;background:0 0;border-radius:9999px;width:22%;height:100%;position:absolute;top:0;left:0}.gtr-lcd{background:#171817;border:none;border-radius:8px;justify-content:center;width:100%;margin-top:.75rem;padding:.5rem 2rem;display:flex;box-shadow:0 2px 6px #0000001f}.gtr-lcd-text{color:#9fc58d;letter-spacing:1px;text-transform:uppercase;font-family:Geist Mono,SF Mono,monospace;font-size:11px;font-weight:700}.quiz-overlay{backdrop-filter:blur(6px);z-index:9999;background:#2c241866;justify-content:center;align-items:center;padding:1rem;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.quiz-overlay.hidden{display:none!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.quiz-modal{background:var(--gt-card);border:1px solid var(--gt-border-soft);border-radius:20px;width:100%;max-width:480px;max-height:90vh;animation:.25s ease-out slideUp;overflow-y:auto;box-shadow:0 25px 50px #2c241833}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.quiz-header{border-bottom:1px solid var(--gt-border-soft);justify-content:space-between;align-items:center;padding:1.25rem 1.5rem .75rem;display:flex}.quiz-title{color:var(--gt-ink);margin:0;font-size:1.1rem;font-weight:700}.quiz-close{border:1px solid var(--gt-border);background:var(--gt-card);cursor:pointer;width:32px;height:32px;color:var(--gt-ink-muted);border-radius:50%;justify-content:center;align-items:center;font-size:14px;transition:all .15s;display:flex}.quiz-close:hover{background:var(--gt-red-bg);color:var(--gt-red);border-color:#f0d0d0}.quiz-body{padding:1.25rem 1.5rem 1.5rem}.q-progress{color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem;font-size:11px;font-weight:700}.q-question{color:#1e293b;margin-bottom:1.25rem;font-size:1rem;font-weight:800;line-height:1.4}.q-options{flex-direction:column;gap:.5rem;display:flex}.q-option{cursor:pointer;color:#334155;background:#f8fafc;border:2px solid #e2e8f0;border-radius:.75rem;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.9rem;font-weight:600;transition:all .15s;display:flex}.q-option:hover{background:#eff6ff;border-color:#3b82f6}body.dark .quiz-modal,body:not(.light-mode) .quiz-modal{background:var(--gt-card);border-color:var(--gt-border)}body.dark .q-progress,body:not(.light-mode) .q-progress{color:var(--gt-ink-muted)}body.dark .q-question,body:not(.light-mode) .q-question{color:#f3efe7}body.dark .q-option,body:not(.light-mode) .q-option{background:var(--gt-surface);border-color:var(--gt-border);color:var(--gt-ink-soft)}body.dark .q-option:hover,body:not(.light-mode) .q-option:hover{background:#3b82f61a;border-color:#3b82f6}body.dark .q-option.correct,body:not(.light-mode) .q-option.correct{border-color:var(--gt-sage);color:#78a56d;background:#78a56d1f}body.dark .q-option.wrong,body:not(.light-mode) .q-option.wrong{border-color:var(--gt-red);background:var(--gt-red-bg);color:var(--gt-red)}body.dark .q-next-btn,body:not(.light-mode) .q-next-btn{background:var(--gt-terracotta);color:#1a1a1a}body.dark .q-btn-secondary,body:not(.light-mode) .q-btn-secondary{background:var(--gt-surface);color:var(--gt-ink-soft);border-color:var(--gt-border)!important}.q-option.selected{color:#1d4ed8;background:#eff6ff;border-color:#3b82f6}.q-option.correct{color:#065f46;background:#ecfdf5;border-color:#10b981}.q-option.incorrect{color:#991b1b;background:#fef2f2;border-color:#ef4444}.q-option-letter{color:#475569;background:#e2e8f0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:800;transition:all .15s;display:flex}.q-option.selected .q-option-letter{color:#fff;background:#3b82f6}.q-option.correct .q-option-letter{color:#fff;background:#10b981}.q-option.incorrect .q-option-letter{color:#fff;background:#ef4444}.q-feedback{border-radius:.65rem;align-items:center;gap:.5rem;margin-top:1rem;padding:.75rem 1rem;font-size:.85rem;font-weight:700;display:flex}.q-feedback.correct{color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0}.q-feedback.incorrect{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.q-next-btn{color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;background:#3b82f6;border:none;border-radius:.65rem;width:100%;margin-top:1rem;padding:.75rem;font-size:.85rem;font-weight:800;transition:background .15s}.q-next-btn:hover{background:#2563eb}.q-next-btn:disabled{cursor:not-allowed;background:#cbd5e1}.q-result-icon{text-align:center;margin-bottom:.75rem;font-size:3rem}.q-result-title{color:#0f172a;text-align:center;margin-bottom:.5rem;font-size:1.3rem;font-weight:900}.q-result-score{color:#3b82f6;text-align:center;margin-bottom:.25rem;font-size:2rem;font-weight:900}.q-result-sub{color:#64748b;text-align:center;margin-bottom:1rem;font-size:.8rem}.q-result-stats{justify-content:center;gap:.75rem;margin-bottom:1.25rem;display:flex}.q-stat{text-align:center}.q-stat-value{color:#1e293b;font-size:1.25rem;font-weight:900}.q-stat-label{color:#94a3b8;text-transform:uppercase;font-size:.65rem;font-weight:700}.q-result-actions{gap:.5rem;display:flex}.q-result-actions button{cursor:pointer;text-transform:uppercase;border:none;border-radius:.6rem;flex:1;padding:.65rem;font-size:.8rem;font-weight:800;transition:all .15s}.q-btn-primary{color:#fff;background:#3b82f6}.q-btn-primary:hover{background:#2563eb}.q-btn-secondary{color:#475569;background:#f1f5f9;border:1px solid #e2e8f0!important}.q-btn-secondary:hover{background:#e2e8f0}body.dark .guitar-app,body:not(.light-mode) .guitar-app{--gt-bg:#0c0d0f;--gt-card:#131519;--gt-card-hover:#1a1d24;--gt-surface:#191b20;--gt-border:#ffffff14;--gt-border-soft:#ffffff0f;--gt-ink:#f3efe7;--gt-ink-soft:#9b9b98;--gt-ink-muted:#77736c;--gt-terracotta:#e3a33b;--gt-terracotta-hover:#c78319;--gt-sage:#78a56d;--gt-sage-bg:#78a56d1f;--gt-amber:#e3a33b;--gt-amber-bg:#e3a33b1f;--gt-red:#e07070;--gt-red-bg:#e070701f;background:var(--gt-card);border-color:var(--gt-border);color:var(--gt-ink)}body.dark .guitar-app .gtr-btn,body:not(.light-mode) .guitar-app .gtr-btn{background:var(--gt-card);border-color:var(--gt-border);color:var(--gt-ink-soft)}body.dark .guitar-app .gtr-btn:hover,body:not(.light-mode) .guitar-app .gtr-btn:hover{border-color:var(--gt-terracotta);color:var(--gt-terracotta)}body.dark .guitar-app .gtr-btn.active,body:not(.light-mode) .guitar-app .gtr-btn.active{background:var(--gt-terracotta);color:#1a1a1a;border-color:var(--gt-terracotta)}body.dark .guitar-app .gtr-sub-btn,body:not(.light-mode) .guitar-app .gtr-sub-btn{border-color:var(--gt-border);color:var(--gt-ink-soft);background:0 0}body.dark .guitar-app .gtr-sub-btn:hover,body:not(.light-mode) .guitar-app .gtr-sub-btn:hover{border-color:var(--gt-terracotta);color:var(--gt-terracotta)}body.dark .guitar-app .gtr-sub-btn.active,body:not(.light-mode) .guitar-app .gtr-sub-btn.active{background:var(--gt-sage);color:#fff;border-color:var(--gt-sage)}body.dark .guitar-app .gtr-type-group,body:not(.light-mode) .guitar-app .gtr-type-group{background:var(--gt-surface);border-color:var(--gt-border-soft)}body.dark .guitar-app .gtr-type-btn,body:not(.light-mode) .guitar-app .gtr-type-btn{color:var(--gt-ink-muted);background:0 0}body.dark .guitar-app .gtr-type-btn.active,body:not(.light-mode) .guitar-app .gtr-type-btn.active{background:var(--gt-card);color:var(--gt-ink)}body.dark .guitar-app .gtr-rec-btn,body:not(.light-mode) .guitar-app .gtr-rec-btn{background:var(--gt-card);border-color:var(--gt-border);color:var(--gt-ink-soft)}body.dark .guitar-app .gtr-rec-btn:hover,body:not(.light-mode) .guitar-app .gtr-rec-btn:hover{border-color:var(--gt-red);color:var(--gt-red)}body.dark .guitar-app .gtr-earn-card,body:not(.light-mode) .guitar-app .gtr-earn-card{background:var(--gt-card);border-color:var(--gt-border)}body.dark .guitar-app .earn-text strong,body:not(.light-mode) .guitar-app .earn-text strong{color:var(--gt-ink)}body.dark .guitar-app .earn-text span,body:not(.light-mode) .guitar-app .earn-text span{color:var(--gt-ink-muted)}body.dark .guitar-app .gtr-string-key-label,body:not(.light-mode) .guitar-app .gtr-string-key-label{color:#ffffffe6;background:#ffffff26}body.dark .guitar-app .gtr-fret-key-label,body:not(.light-mode) .guitar-app .gtr-fret-key-label{color:#ffffffd9;background:#ffffff1f}body.dark .guitar-app .gtr-lcd,body:not(.light-mode) .guitar-app .gtr-lcd{background:#171817;border-color:#0000;box-shadow:0 2px 6px #0000004d}body.dark .guitar-app .gtr-lcd-text,body:not(.light-mode) .guitar-app .gtr-lcd-text{color:#91a85b}body.dark .guitar-app .gtr-mark-controls,body:not(.light-mode) .guitar-app .gtr-mark-controls{background:var(--gt-card);border-color:var(--gt-border)}body.dark .guitar-app .gtr-mark-label,body:not(.light-mode) .guitar-app .gtr-mark-label,body.dark .guitar-app .gtr-mark-empty,body:not(.light-mode) .guitar-app .gtr-mark-empty{color:var(--gt-ink-muted)}body.dark .guitar-app .gtr-mark-chip,body:not(.light-mode) .guitar-app .gtr-mark-chip{background:var(--gt-amber-bg);border-color:var(--gt-border);color:var(--gt-ink-soft)}body.dark .guitar-app .gtr-mark-chip strong,body:not(.light-mode) .guitar-app .gtr-mark-chip strong{color:var(--gt-ink)}body.dark .guitar-app .gtr-mark-clear,body:not(.light-mode) .guitar-app .gtr-mark-clear{background:var(--gt-card);color:var(--gt-ink-soft);border-color:var(--gt-border)}body.dark .guitar-app .gtr-hint-controls,body:not(.light-mode) .guitar-app .gtr-hint-controls{background:var(--gt-sage-bg);border-color:#78a56d40}body.dark .guitar-app .gtr-hint-note-btn,body:not(.light-mode) .guitar-app .gtr-hint-note-btn{color:#78a56d;background:#78a56d26;border-color:#78a56d4d}body.dark .guitar-app .gtr-hint-note-btn:hover,body:not(.light-mode) .guitar-app .gtr-hint-note-btn:hover{background:#78a56d4d}body.dark .guitar-app .guitar-page-bg,body:not(.light-mode) .guitar-app .guitar-page-bg{background:var(--gt-bg)}.guitar-page-bg{background:var(--gt-bg);z-index:0;pointer-events:none;position:fixed;inset:0}.gtr-streak-badge,.gtr-points-badge{white-space:nowrap;border:1px solid var(--gt-border-soft);border-radius:8px;align-items:center;gap:4px;min-height:38px;padding:.4rem .7rem;font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:800;display:inline-flex}.gtr-streak-badge{background:var(--gt-amber-bg);color:var(--gt-amber);border-color:#d8891733}.gtr-points-badge{background:var(--gt-sage-bg);color:var(--gt-sage);border-color:#547c4d33}.sp-icon{font-size:12px}.keyboard-toggle,.chords-toggle{cursor:pointer;overflow:hidden}.switch{width:36px;height:20px;display:inline-block;position:relative}.switch input{display:none}.switch .slider{cursor:pointer;background:#aaa;border-radius:20px;transition:all .2s;position:absolute;inset:0}.switch .slider:before{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:all .2s;position:absolute;top:3px;left:3px}.switch input:checked+.slider{background:var(--gt-sage)}.switch input:checked+.slider:before{transform:translate(16px)}.gtr-chord-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:.5rem;display:flex}.gtr-chord-row.hidden{display:none!important}.gtr-chord-btn{background:var(--gt-surface);border:1px solid var(--gt-border);min-width:40px;height:34px;color:var(--gt-ink);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:0 10px;font-family:DM Sans,Inter,sans-serif;font-size:13px;font-weight:800;transition:all .15s;display:inline-flex}.gtr-chord-btn:hover{border-color:var(--gt-terracotta);color:var(--gt-terracotta);background:var(--gt-card-hover)}.gtr-chord-btn.playing{background:var(--gt-terracotta);color:#fff;border-color:var(--gt-terracotta);transform:scale(1.12);box-shadow:0 0 12px #d8891780}@keyframes gtr-chord-flash{0%{transform:scale(1.12)}50%{transform:scale(.95)}to{transform:scale(1)}}.gtr-chord-btn.flash-anim{animation:.35s ease-out gtr-chord-flash}.gtr-chord-name{font-size:14px;font-weight:900}.gtr-chord-key-hint{background:var(--gt-border);width:16px;height:16px;color:var(--gt-ink-soft);border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;margin-left:3px;font-size:9px;font-weight:800;line-height:1;display:inline-flex}body.dark .guitar-app .gtr-chord-btn,body:not(.light-mode) .guitar-app .gtr-chord-btn{color:#ffffffd9;background:#ffffff0f;border-color:#ffffff1f}body.dark .guitar-app .gtr-chord-btn:hover,body:not(.light-mode) .guitar-app .gtr-chord-btn:hover{border-color:var(--gt-terracotta);color:var(--gt-terracotta);background:#d889171a}body.dark .guitar-app .gtr-chord-btn.playing,body:not(.light-mode) .guitar-app .gtr-chord-btn.playing{background:var(--gt-terracotta);color:#fff;border-color:var(--gt-terracotta)}body.dark .guitar-app .gtr-chord-key-hint,body:not(.light-mode) .guitar-app .gtr-chord-key-hint{color:#fff9;background:#ffffff1f}.gtr-chord-diagram{background:var(--gt-card);border:1px solid var(--gt-border);border-radius:12px;flex-direction:column;align-items:center;gap:.5rem;margin-top:.75rem;padding:1rem;animation:.2s ease-out fadeIn;display:flex}.gtr-chord-diagram.hidden{display:none!important}.gtr-cd-header{text-align:center}.gtr-cd-name{color:var(--gt-ink);font-size:1.1rem;font-weight:800}.gtr-cd-subtitle{color:var(--gt-ink-muted);margin-left:6px;font-size:.7rem}.gtr-cd-fretboard{flex-direction:column;align-items:center;gap:0;padding:0 12px;display:flex;position:relative}.gtr-cd-indicators{justify-content:space-around;gap:0;width:100%;margin-bottom:2px;padding:0 4px;display:flex}.gtr-cd-ind{text-align:center;width:30px;font-size:11px;font-weight:800;line-height:1}.gtr-cd-ind.muted{color:var(--gt-red)}.gtr-cd-ind.open{color:var(--gt-sage)}.gtr-cd-strings-area{flex-direction:column;width:150px;display:flex;position:relative}.gtr-cd-string-row{align-items:center;height:20px;display:flex;position:relative}.gtr-cd-string-row:after{content:"";background:var(--gt-ink-muted);opacity:.4;height:1.5px;position:absolute;top:50%;left:0;right:0}.gtr-cd-string-row:first-child:after{opacity:.3;height:1px}.gtr-cd-string-row:nth-child(6):after{opacity:.5;height:2.5px}.gtr-cd-fret{z-index:1;justify-content:center;align-items:center;width:30px;height:100%;display:flex;position:relative}.gtr-cd-fret:before{content:"";background:var(--gt-ink-muted);opacity:.2;width:1px;position:absolute;top:0;bottom:0;left:0}.gtr-cd-fret:first-child:before{opacity:.6;background:var(--gt-ink-muted);width:3px}.gtr-cd-dot{background:var(--gt-terracotta);color:#fff;z-index:2;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:10px;font-weight:800;display:flex;box-shadow:0 2px 6px #d8891759}.gtr-cd-string-labels{justify-content:space-around;width:180px;margin-top:4px;display:flex}.gtr-cd-str-label{text-align:center;width:30px;color:var(--gt-ink-muted);letter-spacing:.02em;font-size:9px;font-weight:700}.gtr-cd-fret-num{color:var(--gt-ink-muted);font-size:9px;font-weight:700;position:absolute;top:50%;left:-16px;transform:translateY(-50%)}.gtr-cd-nut{background:var(--gt-ink-muted);opacity:.5;border-radius:2px;width:150px;height:4px;margin-bottom:1px}.gtr-cd-nut.hidden{display:none}body.dark .gtr-chord-diagram,body:not(.light-mode) .gtr-chord-diagram{background:var(--gt-card);border-color:var(--gt-border)}body.dark .gtr-cd-name,body:not(.light-mode) .gtr-cd-name{color:var(--gt-ink)}body.dark .gtr-cd-dot,body:not(.light-mode) .gtr-cd-dot{background:var(--gt-terracotta);box-shadow:0 2px 8px #e3a33b66}.gtr-hitbox.chord-active{transition:background .1s;background:#d8891759!important}.gtr-hitbox.chord-active .gtr-dot-visual{border-color:var(--gt-terracotta);box-shadow:0 0 8px #d8891780}@media (width<=800px){.gtr-chord-row{gap:4px}.gtr-chord-btn{min-width:36px;height:30px;padding:0 8px;font-size:12px}}@media (width<=430px){.gtr-chord-btn{min-width:32px;height:28px;padding:0 6px;font-size:11px}}@media (width<=800px){.guitar-app{border-radius:15px;padding:.75rem}.gtr-top-row{grid-template-columns:1fr;gap:.5rem}.gtr-earn-card{text-align:left;flex-direction:row;min-width:0}.earn-text{flex:1}.gtr-btn-group{grid-template-columns:repeat(2,1fr)}.gtr-btn-group .gtr-btn:last-child{grid-column:span 2}.gtr-sub-controls{grid-template-columns:repeat(4,1fr);gap:.25rem}.gtr-type-rec-row{gap:.5rem}.gtr-neck-frame{border-radius:.8rem;height:260px}.gtr-headstock{border-right-width:7px;border-radius:.8rem 0 0 .8rem;width:42px}.gtr-head-note{font-size:10px}.gtr-dot-visual{width:26px;height:26px}.gtr-btn{padding:.35rem .65rem;font-size:10px}.gtr-type-btn{padding:.4rem .6rem;font-size:9px}.gtr-rec-btn,.sp-badge{padding:.35rem .6rem;font-size:9px}.gtr-sub-controls{gap:.2rem}.gtr-sub-btn{min-height:32px;padding:.25rem .4rem;font-size:9px}.quiz-modal{border-radius:1rem}}@media (width<=900px) and (orientation:landscape){.guitar-app{padding:.5rem}.gtr-top-row{grid-template-columns:160px 1fr auto;gap:.5rem}.gtr-btn-group{grid-template-columns:repeat(6,1fr)}.gtr-sub-controls{grid-template-columns:repeat(8,1fr)}.gtr-neck-frame{height:320px}.string-row{height:40px}.quiz-card{flex-direction:row;align-items:center}.quiz-btn{width:auto}}@media (width<=430px){.gtr-btn{padding:.3rem .5rem;font-size:9px}.gtr-sub-btn{min-height:28px;font-size:8px}.gtr-type-btn{flex:1;padding:.35rem .4rem;font-size:8px}.gtr-neck-frame{border-radius:9px}.guitar-app{border-radius:12px;padding:.6rem}.gtr-btn-group{gap:.25rem}.gtr-sub-controls{gap:.15rem}}.gtr-landscape-tip{z-index:998;background:var(--gt-card,#fdfcfa);border:1px solid var(--gt-border,#e2ddd4);border-radius:10px;max-width:240px;padding:.6rem .75rem;animation:.3s ease-out tipSlideIn;display:none;position:fixed;bottom:56px;right:12px;box-shadow:0 4px 16px #2c24181f}.gtr-landscape-tip.visible{display:block}@keyframes tipSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.gtr-tip-content{align-items:center;gap:.5rem;display:flex}.gtr-tip-icon{flex-shrink:0;font-size:1.2rem}.gtr-tip-text{color:var(--gt-ink-soft,#6b5f50);flex:1;font-size:.7rem;line-height:1.4}.gtr-tip-text strong{color:var(--gt-ink,#2c2418);font-weight:700}.gtr-tip-text em{color:var(--gt-terracotta,#c4704b);font-style:normal;font-weight:800}.gtr-tip-close{border:1px solid var(--gt-border,#e2ddd4);background:var(--gt-surface,#f0ede6);width:20px;height:20px;color:var(--gt-ink-muted,#a09484);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:9px;transition:all .15s;display:flex}.gtr-tip-close:hover{background:var(--gt-card,#fdfcfa);color:var(--gt-ink,#2c2418)}@media (width>=769px){.gtr-landscape-tip{display:none!important}}:root{--gt-bg:#f7f3eb;--gt-card:#fffdf9;--gt-card-hover:#faf7f2;--gt-surface:#f5f0e8;--gt-border:#e5ddd0;--gt-border-soft:#eae5dc;--gt-ink:#24221f;--gt-ink-soft:#777168;--gt-ink-muted:#a09484;--gt-terracotta:#d88917;--gt-terracotta-hover:#c47a10;--gt-sage:#547c4d;--gt-sage-bg:#e5eee1;--gt-amber:#d88917;--gt-amber-bg:#fdf6e3;--gt-red:#d94b4b;--gt-red-bg:#fdf0f0;--gt-walnut:#40291c;--gt-walnut-light:#5a3d2a}body.dark .guitar-page-bg,body:not(.light-mode) .guitar-page-bg{background:#0c0d0f}body.dark,body:not(.light-mode){--gt-bg:#0c0d0f;--gt-card:#131519;--gt-card-hover:#1a1d24;--gt-surface:#191b20;--gt-border:#ffffff14;--gt-border-soft:#ffffff0f;--gt-ink:#f3efe7;--gt-ink-soft:#9b9b98;--gt-ink-muted:#77736c;--gt-terracotta:#e3a33b;--gt-terracotta-hover:#c78319;--gt-sage:#78a56d;--gt-sage-bg:#78a56d1f;--gt-amber:#e3a33b;--gt-amber-bg:#e3a33b1f;--gt-red:#e07070;--gt-red-bg:#e070701f;--gt-walnut:#e3a33b;--gt-walnut-light:#c78319}.guitar-page-bg{z-index:0;pointer-events:none;background:var(--gt-bg);transition:background .3s;position:fixed;inset:0}.how-to-play{max-width:1100px;margin:0 auto}.how-to-play-title{color:var(--gt-ink);text-align:center;letter-spacing:-.01em;margin-bottom:.5rem;font-family:Georgia,Times New Roman,serif;font-size:1.75rem;font-weight:400}.how-to-play-sub{color:var(--gt-ink-muted);text-align:center;max-width:650px;margin-bottom:2rem;margin-left:auto;margin-right:auto;font-family:Arial,Helvetica,sans-serif;font-size:.82rem;line-height:1.6}.htp-grid{grid-template-columns:2fr 1fr;gap:1rem;display:grid}.htp-card{background:var(--gt-card);border:1px solid var(--gt-border);border-radius:14px;padding:1.5rem;transition:box-shadow .25s;box-shadow:0 6px 18px #0000000a}.htp-card:hover{box-shadow:0 8px 24px #00000014}.htp-card-wide{grid-column:span 2}.htp-card-title{color:var(--gt-ink);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.75rem;font-family:Arial,Helvetica,sans-serif;font-size:.85rem;font-weight:700}.htp-card-text{color:var(--gt-ink-soft);font-family:Arial,Helvetica,sans-serif;font-size:.8rem;line-height:1.55}.htp-kb-visual{flex-direction:column;gap:.5rem;display:flex}.htp-kb-group{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.htp-kb-string-label{color:var(--gt-ink-muted);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;min-width:100px;font-family:Arial,Helvetica,sans-serif;font-size:.65rem;font-weight:700}.htp-kb-keys{flex-wrap:wrap;gap:4px;display:flex}.htp-kb-key{background:var(--gt-surface);border:1px solid var(--gt-border);border-radius:5px;flex-direction:column;align-items:center;gap:1px;min-width:28px;padding:4px 6px;display:flex}.htp-kb-key kbd{color:var(--gt-ink);font-family:monospace;font-size:.72rem;font-weight:700;line-height:1.2}.htp-kb-key small{color:var(--gt-ink-muted);font-size:8px;line-height:1}.htp-mode-list{margin:0;padding:0;list-style:none}.htp-mode-list li{color:var(--gt-ink-soft);border-bottom:1px solid var(--gt-border-soft);padding:.35rem 0;font-size:.8rem;line-height:1.45}.htp-mode-list li:last-child{border-bottom:none}.htp-mode-list li strong{color:var(--gt-ink);font-weight:600}@media (width<=800px){.htp-grid{grid-template-columns:1fr}.htp-card-wide{grid-column:span 1}.how-to-play-title{font-size:1.25rem}}