.fretboard-wrapper[data-v-50a94d7a]{overflow-x:auto;border:1px solid #d6c7ac;border-radius:12px;padding:10px;background:linear-gradient(180deg,#f6ecd9,#f0e3cd)}.playboard[data-v-50a94d7a]{position:relative}.legend-row[data-v-50a94d7a],.string-row[data-v-50a94d7a],.gap-row[data-v-50a94d7a]{display:grid;grid-template-columns:56px 70px 14px var(--fret-template);min-width:980px;column-gap:0}.legend-row[data-v-50a94d7a]{margin-bottom:0}.legend-cell[data-v-50a94d7a],.string-label[data-v-50a94d7a]{height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#f8fafc;color:#334155;font-size:12px;font-weight:600}.fret-legend[data-v-50a94d7a]{background:transparent;border-radius:0;color:#64748b;font-weight:700;border-right:2px solid rgba(125,136,154,.55)}.legend-row .open-legend[data-v-50a94d7a]{background:transparent;border-radius:0;color:#64748b}.legend-row .legend-empty[data-v-50a94d7a]{background:transparent;border-radius:0}.string-row .string-label[data-v-50a94d7a]{background:transparent;border-radius:0;color:#64748b}.string-row .string-label.unavailable-label[data-v-50a94d7a]{color:#94a3b8}.string-row[data-v-50a94d7a]{height:38px}.gap-row[data-v-50a94d7a]{height:14px}.gap-cell[data-v-50a94d7a]{background:transparent}.nut-divider[data-v-50a94d7a]{position:relative;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.nut-divider[data-v-50a94d7a]:before{content:"";position:absolute;left:50%;top:0;bottom:0;transform:translate(-50%);width:5px;border-radius:999px;background:#f5f1e6}.open-zone[data-v-50a94d7a],.fret-zone[data-v-50a94d7a]{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;transition:background-color .12s ease,box-shadow .12s ease}.open-zone[data-v-50a94d7a]:before,.fret-zone[data-v-50a94d7a]:before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:var(--string-thickness);background:linear-gradient(180deg,#f8fafc,#94a3b8);box-shadow:0 0 .5px #0006;z-index:2}.open-zone[data-v-50a94d7a]{border-left:1px solid rgba(160,140,108,.35)}.fret-zone[data-v-50a94d7a]{border-right:2px solid rgba(125,136,154,.55)}.hit-zone[data-v-50a94d7a]:hover:not(.disabled){background-color:#2563eb21;box-shadow:inset 0 0 0 1.5px #2563eb47;border-radius:6px}.hit-zone.history-recent[data-v-50a94d7a]{background-color:#6b728047;box-shadow:inset 0 0 0 1.5px #4b55636b;border-radius:6px}.hit-zone.history-older[data-v-50a94d7a]{background-color:#94a3b833;box-shadow:inset 0 0 0 1px #64748b47;border-radius:6px}.hit-zone.feedback-correct[data-v-50a94d7a]{background-color:#10b98157;box-shadow:inset 0 0 0 2px #0596697a;border-radius:6px;animation:feedback-pulse-correct-50a94d7a .68s ease-out 1}.hit-zone.feedback-wrong[data-v-50a94d7a]{background-color:#ef444452;box-shadow:inset 0 0 0 2px #dc262673;border-radius:6px;animation:feedback-pulse-wrong-50a94d7a .68s ease-out 1}.hit-zone.click-pulse-cell[data-v-50a94d7a]{animation:click-note-pulse-50a94d7a 1s ease-out 1}.click-pulse-label[data-v-50a94d7a]{position:relative;z-index:5;font-size:17px;font-weight:700;color:#0f172a;text-shadow:0 1px 0 rgba(255,255,255,.55);pointer-events:none;animation:click-note-label-pulse-50a94d7a 1s ease-out 1}.click-pulse-label.click-pulse-correct[data-v-50a94d7a]{color:#047857;text-shadow:0 1px 0 rgba(236,253,245,.8)}.click-pulse-label.click-pulse-wrong[data-v-50a94d7a]{color:#b91c1c;text-shadow:0 1px 0 rgba(254,242,242,.8)}.hit-zone.click-pulse-correct[data-v-50a94d7a]{animation-name:click-note-pulse-correct-50a94d7a}.hit-zone.click-pulse-wrong[data-v-50a94d7a]{animation-name:click-note-pulse-wrong-50a94d7a}.hit-zone.reference-position[data-v-50a94d7a]{background-color:#f59e0b2e;box-shadow:inset 0 0 0 2px #d9770685;border-radius:6px}.reference-note-label[data-v-50a94d7a]{position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 6px;border-radius:999px;background:#fff7edeb;border:1px solid rgba(217,119,6,.58);color:#92400e;font-size:11px;font-weight:700;line-height:1;pointer-events:none}.constraint-frame[data-v-50a94d7a]{position:absolute;box-sizing:border-box;border:2px solid rgba(37,99,235,.75);border-radius:10px;background:#3b82f60f;pointer-events:none;z-index:4;box-shadow:inset 0 0 0 1px #ffffff47}@keyframes feedback-pulse-correct-50a94d7a{0%{background-color:#10b9812e;box-shadow:inset 0 0 0 1px #05966947}45%{background-color:#10b9816b;box-shadow:inset 0 0 0 2.5px #05966994}to{background-color:#10b98157;box-shadow:inset 0 0 0 2px #0596697a}}@keyframes feedback-pulse-wrong-50a94d7a{0%{background-color:#ef444433;box-shadow:inset 0 0 0 1px #dc262640}45%{background-color:#ef444466;box-shadow:inset 0 0 0 2.5px #dc26268c}to{background-color:#ef444452;box-shadow:inset 0 0 0 2px #dc262673}}@keyframes click-note-pulse-50a94d7a{0%{background-color:#0ea5e90f;box-shadow:inset 0 0 0 1px #0ea5e91f}45%{background-color:#0ea5e933;box-shadow:inset 0 0 0 1.5px #0ea5e94d}to{background-color:transparent;box-shadow:none}}@keyframes click-note-pulse-correct-50a94d7a{0%{background-color:#10b98114;box-shadow:inset 0 0 0 1px #0596692e}45%{background-color:#10b9813d;box-shadow:inset 0 0 0 1.5px #05966957}to{background-color:transparent;box-shadow:none}}@keyframes click-note-pulse-wrong-50a94d7a{0%{background-color:#ef444414;box-shadow:inset 0 0 0 1px #dc26262e}45%{background-color:#ef44443d;box-shadow:inset 0 0 0 1.5px #dc262657}to{background-color:transparent;box-shadow:none}}@keyframes click-note-label-pulse-50a94d7a{0%{opacity:0;transform:scale(.88)}30%{opacity:1;transform:scale(1.04)}to{opacity:0;transform:scale(1.08)}}@media(prefers-reduced-motion:reduce){.hit-zone.feedback-correct[data-v-50a94d7a],.hit-zone.feedback-wrong[data-v-50a94d7a]{animation:none}}.hit-zone:hover.unavailable[data-v-50a94d7a]{background-color:#94a3b833;box-shadow:none}.hit-zone.unavailable[data-v-50a94d7a]{background-color:#94a3b82e;background-image:repeating-linear-gradient(-45deg,#64748b1f 0,#64748b1f 4px,#94a3b80f 4px,#94a3b80f 8px);cursor:not-allowed}.hit-zone.out-of-constraint[data-v-50a94d7a]{cursor:not-allowed;background-color:transparent}.hit-zone.out-of-constraint[data-v-50a94d7a]:hover{background-color:#0f172a14;box-shadow:inset 0 0 0 1px #0f172a2e}.hit-zone.unavailable[data-v-50a94d7a]:before{opacity:.35}.hit-zone.disabled[data-v-50a94d7a]{cursor:not-allowed;opacity:1}.marker-slot[data-v-50a94d7a]{display:flex;align-items:center;justify-content:center;border-right:2px solid rgba(125,136,154,.55)}.inlay-dot[data-v-50a94d7a]{width:14px;height:14px;border-radius:999px;background:#f8fafc;border:1px solid rgba(148,163,184,.42)}.inlay-dot.double[data-v-50a94d7a]{width:12px;height:12px}:root{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0f172a;background-color:#f1f5f9}*{box-sizing:border-box}body{margin:0;background:#f1f5f9}.page{width:min(1680px,98vw);margin:24px auto;display:grid;gap:16px}.card{background:#fff;border-radius:12px;border:1px solid #e2e8f0;padding:16px}h1,h2,h3{margin:0 0 10px}h1{font-size:26px}h2{font-size:20px}h3{font-size:16px}.subtitle{margin:0 0 12px;color:#64748b}.header-hint{margin:0 0 12px;color:#475569;font-size:13px;font-weight:600}.controls-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin-bottom:14px}.config-section{border:1px solid #e2e8f0;border-radius:10px;padding:10px;background:#f8fafc}.section-title{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#475569}.strings-section{display:flex;flex-direction:column;gap:8px}.config-grid{display:grid;gap:10px}.session-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.coverage-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.block-config-grid{grid-template-columns:repeat(3,max-content);justify-content:start;align-items:end;column-gap:12px}.coverage-section .strings-section{margin-bottom:8px}.toggle-row{display:flex;flex-wrap:wrap;gap:10px}.actions-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}.block-section{grid-column:1 / -1}.control-group{display:flex;flex-direction:column;gap:6px;min-width:0}label{font-weight:600;font-size:13px}input[type=number]{width:96px;border:1px solid #cbd5e1;border-radius:8px;height:34px;padding:0 10px}select{border:1px solid #cbd5e1;border-radius:8px;height:34px;padding:0 10px;min-width:96px;background:#fff}.fret-scale-group{min-width:220px}.slider-row{display:flex;align-items:center;gap:8px}input[type=range]{width:160px}.slider-value{min-width:46px;font-size:12px;color:#475569;font-weight:600}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip,.primary{height:34px;border-radius:8px;border:1px solid #cbd5e1;background:#f8fafc;padding:0 12px;cursor:pointer}.chip.active{background:#e0e7ff;border-color:#6366f1;color:#3730a3}.primary{background:#2563eb;border-color:#2563eb;color:#fff;font-weight:600}.secondary{height:34px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;color:#334155;font-weight:600;padding:0 12px;cursor:pointer}.primary:disabled,.chip:disabled,.secondary:disabled{opacity:.6;cursor:not-allowed}.question-box{display:flex;align-items:center;gap:18px;margin-bottom:8px;flex-wrap:wrap}.ear-reference-row{margin-bottom:10px}.question-item{display:flex;align-items:baseline;gap:10px}.played-item{padding-left:14px;border-left:1px solid #e2e8f0}.question-box .label{color:#64748b}.question-box .note{font-size:34px;font-weight:700;color:#1d4ed8}.question-box .note.playing-target-note{color:#15803d;text-shadow:0 0 10px rgba(34,197,94,.28)}.question-box .played-note{font-size:28px;font-weight:700;color:#0f766e}.replay-btn{border-color:#94a3b8;background:#f8fafc;color:#0f172a;font-weight:600}.replay-btn.playing-target,.replay-btn.playing-reference{border-color:#22c55e;box-shadow:0 0 0 2px #22c55e33}.reference-control{display:inline-flex;align-items:stretch;border-radius:8px}.reference-control.playing-reference{box-shadow:0 0 0 2px #22c55e33;border-radius:10px}.reference-control:not(.relative-reference-control) .reference-btn{border-radius:8px 0 0 8px;border-right:none}.reference-control select{min-width:78px;border-radius:0 8px 8px 0;border-left:1px solid #cbd5e1}.relative-reference-control{gap:10px;align-items:center}.relative-reference-control .reference-btn{border-radius:8px;border-right:1px solid #94a3b8}.fixed-reference-tag{display:inline-flex;align-items:center;padding:0 10px;min-height:34px;border:1px solid #cbd5e1;border-radius:0 8px 8px 0;border-left:none;background:#fff;color:#475569;font-size:13px;font-weight:600}.relative-reference-control .fixed-reference-tag{border-radius:8px;border-left:1px solid #cbd5e1}.toggle-control{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font-size:13px;color:#334155;font-weight:600}.toggle-control input[type=checkbox]{margin:0;-moz-appearance:none;appearance:none;-webkit-appearance:none;width:34px;height:20px;border-radius:999px;border:1px solid #94a3b8;background:#cbd5e1;position:relative;cursor:pointer;transition:background-color .16s ease,border-color .16s ease}.toggle-control input[type=checkbox]:before{content:"";position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0f172a40;transition:transform .16s ease}.toggle-control input[type=checkbox]:checked{background:#22c55e;border-color:#16a34a}.toggle-control input[type=checkbox]:checked:before{transform:translate(14px)}.toggle-control input[type=checkbox]:focus-visible{outline:2px solid rgba(34,197,94,.35);outline-offset:2px}.countdown-wrap{margin:0 0 10px}.countdown-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:#475569;font-size:13px}.countdown-meta strong{color:#166534;font-variant-numeric:tabular-nums}.countdown-meta strong.danger{color:#b91c1c}.countdown-track{height:10px;border-radius:999px;background:#e2e8f0;overflow:hidden}.countdown-bar{height:100%;width:100%;border-radius:999px;transition:width .1s linear,background-color .1s linear}.client-id{margin:0 0 8px;font-size:12px;color:#64748b}.target-hint{margin:0 0 8px;font-size:13px;color:#334155;font-weight:600}.client-id code{background:#f1f5f9;padding:2px 6px;border-radius:6px;color:#334155}.message{margin:0;min-height:24px;color:#059669;font-weight:600}.message.error{color:#dc2626}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:14px}.user-summary-card{display:grid;gap:12px}.summary-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.summary-visual-row{display:grid;grid-template-columns:minmax(120px,140px) minmax(0,1fr);gap:10px;align-items:stretch}.summary-kpi-item{border:1px solid #dbe7ff;background:linear-gradient(180deg,#f8fbff,#f1f6ff);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}.summary-kpi-item span{color:#5b6b85;font-size:12px}.summary-kpi-item strong{font-size:20px;line-height:1.1;color:#1e293b}.summary-accuracy-panel{border:1px solid #e2e8f0;border-radius:12px;padding:10px;background:#fff;display:grid;grid-template-rows:auto 1fr;justify-items:center}.summary-accuracy-head{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:8px;font-size:13px;color:#64748b;text-align:center}.summary-accuracy-head strong{color:#1e293b;font-size:16px}.summary-accuracy-track{width:14px;height:92px;border-radius:999px;background:#e2e8f0;overflow:hidden;display:flex;align-items:flex-end}.summary-accuracy-fill{width:100%;border-radius:inherit;background:linear-gradient(0deg,#ef4444,#f59e0b 45%,#22c55e)}.summary-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.summary-meta-item{border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;background:#f8fafc}.summary-meta-item span{color:#64748b;font-size:12px}.summary-meta-item strong{color:#0f172a;font-size:14px}.summary-trend-panel{border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;background:#fff}.summary-trend-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;color:#64748b}.summary-trend-direction{font-size:12px;color:#94a3b8}.summary-trend-bars{height:58px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:6px}.summary-trend-bar{width:100%;border-radius:6px 6px 3px 3px;background:#cbd5e1;transition:height .2s ease,background-color .2s ease}.summary-trend-bar.is-ok{background:#22c55e}.summary-trend-bar.is-bad{background:#ef4444}.summary-trend-bar.is-empty{background:#e2e8f0}.summary-trend-legend{margin-top:8px;display:flex;gap:12px;flex-wrap:wrap}.legend-item{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#64748b}.legend-dot{width:9px;height:9px;border-radius:999px;background:#cbd5e1}.legend-dot.is-ok{background:#22c55e}.legend-dot.is-bad{background:#ef4444}.legend-dot.is-empty{background:#e2e8f0;border:1px solid #cbd5e1}.stat-item{border:1px solid #e2e8f0;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:4px}.stat-item span{color:#64748b;font-size:13px}.stat-item strong{font-size:18px}.attempts{display:grid;gap:6px}.attempt-row{display:grid;grid-template-columns:1.1fr 1fr .7fr;gap:8px;border:1px solid #e2e8f0;border-radius:8px;padding:8px;font-size:14px}@media(max-width:720px){.controls-panel,.session-grid,.coverage-grid,.block-config-grid{grid-template-columns:1fr}.toggle-row{flex-direction:column;align-items:stretch}.toggle-control{justify-content:space-between}.summary-visual-row,.attempt-row{grid-template-columns:1fr}}