:root{--color-primary:#4fc3f7;--color-primary-dark:#0288d1;--color-primary-light:#b3e5fc;--color-bg:#f0f9ff;--color-surface:#fff;--color-text:#1a2a3a;--color-text-muted:#5a7a9a;--color-correct:#4caf50;--color-incorrect:#f44336;--radius:12px;--shadow:0 2px 12px #0288d11f}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--color-bg);color:var(--color-text);min-height:100vh;font-family:Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,sans-serif}#app{flex-direction:column;max-width:480px;min-height:100vh;margin:0 auto;padding:16px;display:flex}button{cursor:pointer;border-radius:var(--radius);border:none;padding:14px 24px;font-family:inherit;font-size:1rem;transition:opacity .15s,transform .1s}button:active{opacity:.85;transform:scale(.97)}.btn-primary{background:var(--color-primary-dark);color:#fff;width:100%;padding:16px;font-size:1.1rem;font-weight:700}.btn-secondary{background:var(--color-surface);color:var(--color-primary-dark);border:2px solid var(--color-primary);width:100%}.result-level{text-align:center;color:var(--color-text-muted);margin:8px 0 4px;font-size:1rem}.result-rating{text-align:center;letter-spacing:.02em;margin:8px 0 12px;font-size:2.6rem;font-weight:700}.rating-marvelous{color:#f59e0b}.rating-excellent{color:var(--color-primary-dark)}.rating-great{color:var(--color-correct)}.rating-good{color:var(--color-text-muted)}.result-score-card .result-row{border-bottom:1px solid var(--color-bg);justify-content:space-between;align-items:center;padding:8px 0;display:flex}.result-score-card .result-row:last-child{border-bottom:none}.result-label{color:var(--color-text-muted);font-size:.9rem}.result-value{color:var(--color-text);font-size:1.15rem;font-weight:700}.new-best{color:var(--color-correct);margin-left:4px;font-size:.85rem}.result-buttons{flex-direction:column;gap:8px;margin:16px 0;display:flex}.history-heading{color:var(--color-text-muted);letter-spacing:.08em;margin:4px 0 8px;font-size:.8rem;font-weight:700}.history-grid{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;display:grid}.history-item{background:var(--color-surface);box-shadow:var(--shadow);border-radius:8px;position:relative;overflow:hidden}.history-mark{pointer-events:none;font-size:1.4rem;font-weight:700;line-height:1;position:absolute;top:4px;left:8px}.history-correct{color:var(--color-correct)}.history-incorrect{color:var(--color-incorrect)}.app-title{text-align:center;color:var(--color-primary-dark);margin:8px 0 20px;font-size:1.5rem;font-weight:700;line-height:1.4}.card{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;padding:16px}.card-heading{color:var(--color-text-muted);letter-spacing:.08em;margin-bottom:10px;font-size:.75rem;font-weight:700}.choice-group{flex-direction:column;gap:8px;display:flex}.choice-btn{border:2px solid var(--color-primary);background:var(--color-surface);width:100%;color:var(--color-primary-dark);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;padding:12px 16px;font-family:inherit;font-size:1rem;font-weight:700;transition:background .15s,color .15s,border-color .15s;display:flex}.choice-btn.selected{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:#fff}.choice-btn:hover:not(.selected){background:var(--color-primary-light)}.time-label{opacity:.85;font-size:1rem;font-weight:700}#app.play-mode{height:100svh;max-height:100svh;padding-top:8px;padding-bottom:8px;overflow:hidden}.play-screen{flex-direction:column;height:100%;display:flex}.play-board-area{flex-direction:column;flex:1;min-height:0;margin-top:8px;display:flex;overflow-y:auto}.play-board-area .fingerboard{flex:1;min-height:0}.play-board-area .string-col{gap:3px;min-height:0}.play-board-area .string-label{flex-shrink:0;padding:2px 0}.play-board-area .fret-btn{flex:1;min-height:34px;max-height:72px}.fret-spacer{pointer-events:none;opacity:0!important}.timer-display{color:var(--color-text);pointer-events:none;z-index:1;font-weight:700;line-height:1;position:absolute;top:6px;right:10px}.timer-int{font-size:1.8rem}.timer-dec{vertical-align:baseline;font-size:1.1rem}.volume-row{align-items:center;gap:12px;display:flex}.mute-btn{width:44px;height:44px;min-height:unset;border:2px solid var(--color-primary);background:var(--color-surface);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:1.3rem;line-height:1;transition:background .15s,border-color .15s;display:flex}.mute-btn:hover{background:var(--color-primary-light)}.volume-slider{accent-color:var(--color-primary-dark);cursor:pointer;flex:1}.volume-slider:disabled{opacity:.35;cursor:default}.btn-start{margin-top:4px}.fingerboard{justify-content:stretch;gap:4px;width:100%;display:flex}.string-col{flex-direction:column;flex:1;gap:4px;display:flex}.string-label{text-align:center;color:var(--color-text-muted);letter-spacing:.05em;padding:4px 0;font-size:.95rem;font-weight:700}.fret-btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;width:100%;min-height:48px;padding:6px 2px;font-size:.9rem;font-weight:700;transition:background .12s,transform 80ms,box-shadow .1s;display:flex}.fret-btn:active{transform:scale(.94)}.fret-natural.fret-open{background:var(--color-primary-dark);color:#fff;box-shadow:0 2px 6px #0288d14d}.fret-natural:not(.fret-open){background:var(--color-primary-light);color:var(--color-text)}.fret-natural:hover:not(:disabled){background:var(--color-primary);color:#fff;box-shadow:0 2px 8px #0288d140}.fret-accidental{color:var(--color-text-muted);background:#e8f4fc;font-size:.75rem}.fret-accidental:hover:not(:disabled){background:var(--color-primary-light);color:var(--color-text)}.fret-result-correct{background:var(--color-correct)!important;color:#fff!important;font-size:1.2rem!important;box-shadow:0 2px 10px #4caf5066!important}.fret-result-incorrect{background:var(--color-incorrect)!important;color:#fff!important;font-size:1.2rem!important;box-shadow:0 2px 10px #f4433666!important}.fret-result-highlight{animation:.6s pulse-highlight;background:var(--color-correct)!important;color:#fff!important;box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--color-correct)!important}@keyframes pulse-highlight{0%{opacity:1}40%{opacity:.5}to{opacity:1}}.fret-btn:disabled{cursor:default;opacity:.7}.fret-btn:disabled:not(.fret-result-correct):not(.fret-result-incorrect):not(.fret-result-highlight){opacity:.45}