.home-page{display:flex;flex-direction:column;gap:var(--space-2xl);padding:var(--space-2xl) var(--space-lg);min-height:100vh;background:var(--color-bg)}.home-hero{text-align:center;margin-top:var(--space-2)}.home-title{font-size:var(--font-size-2xl);font-weight:700;margin:0 0 var(--space-2) 0;color:var(--color-text-primary)}.home-subtitle{font-size:var(--font-size-md);color:var(--color-text-secondary);margin:0}.mode-buttons{display:flex;flex-direction:column;gap:var(--space-4)}.mode-button{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-4);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--motion-duration);text-align:center;min-height:200px;justify-content:center;box-shadow:var(--shadow-md)}.mode-button:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.mode-button:active{transform:scale(.98)}.mode-routine{background:var(--color-accent);color:#fff}.mode-flashcard{background:var(--color-success);color:#fff}.mode-icon{font-size:3em;opacity:.9}.mode-button h3{font-size:var(--font-size-lg);font-weight:600;margin:0}.mode-button p{margin:0;font-size:var(--font-size-sm);opacity:.9}.mode-desc{font-size:var(--font-size-xs);opacity:.8;line-height:1.4}.home-info{display:flex;justify-content:center;padding:var(--space-lg);background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border)}.info-text{margin:0;font-size:var(--font-size-sm);color:var(--color-text-secondary);display:flex;align-items:center;gap:var(--space-2)}.info-text i{font-size:1.2em;color:var(--color-primary)}@media (max-width: 480px){.home-page{gap:var(--space-4);padding:var(--space-4) var(--space-3)}.home-title{font-size:var(--font-size-xl)}.mode-button{padding:var(--space-4) var(--space-3);min-height:160px;gap:var(--space-2)}.mode-icon{font-size:2.5em}.mode-button h3{font-size:var(--font-size-md)}.mode-desc{font-size:var(--font-size-xs)}}.navigation{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:var(--color-surface);border-bottom:1px solid var(--color-border);gap:var(--space-3);height:56px;position:sticky;top:0;z-index:100}.nav-back-button{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:var(--color-surface-muted);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--motion-base);white-space:nowrap;min-height:var(--layout-button-min-height)}.nav-back-button:hover{background:var(--color-surface-hover);border-color:var(--color-accent)}.nav-back-button:active{transform:scale(.98)}.nav-back-button i{font-size:1.2em}.nav-title{flex:1;text-align:center;font-size:var(--font-size-lg);font-weight:600;margin:0;color:var(--color-text-primary)}.nav-spacer{width:44px}@media (max-width: 480px){.navigation{padding:var(--space-2) var(--space-3);height:48px}.nav-title{font-size:var(--font-size-md)}.nav-back-button{font-size:var(--font-size-xs);padding:var(--space-2) var(--space-2)}}.metronome{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);margin-bottom:var(--space-lg);box-shadow:var(--shadow-md)}.metronome-header{margin-bottom:var(--space-3)}.metronome-header h3{margin:0;display:flex;align-items:center;gap:var(--space-md);font-size:var(--font-size-md);color:var(--color-text);font-weight:var(--font-weight-bold)}.metronome-header i{font-size:var(--icon-size-lg);color:var(--color-accent)}.metronome-display{display:flex;justify-content:space-around;align-items:center;margin-bottom:var(--space-lg);padding:var(--space-lg);background:var(--color-surface-muted);border-radius:var(--radius-md);border:1px solid var(--color-border)}.bpm-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.bpm-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-extrabold);font-family:var(--font-family-code);color:var(--color-accent)}.bpm-label{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:1px;font-weight:var(--font-weight-medium)}.time-signature-display{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);font-family:var(--font-family-code);color:var(--color-text);background:var(--color-surface);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm)}.metronome-controls{display:flex;gap:var(--space-2);margin-bottom:var(--space-3)}.bpm-button{flex:0 0 50px;padding:var(--space-sm);background:var(--color-surface-muted);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:all var(--motion-base);display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);min-height:var(--layout-button-min-height)}.bpm-button:hover{background:var(--color-surface-hover);border-color:var(--color-accent)}.bpm-button:active{transform:scale(.95)}.play-button{flex:1;padding:var(--space-lg);background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-md);font-weight:var(--font-weight-bold);transition:all var(--motion-base);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);min-height:var(--layout-button-min-height)}.play-button:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.play-button:active{transform:scale(.98)}.play-button.playing{background:var(--color-success)}.time-signature-selector{display:flex;gap:var(--space-2);margin-bottom:var(--space-3)}.ts-button{flex:1;padding:var(--space-sm);background:var(--color-surface-muted);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:all var(--motion-base);min-height:var(--layout-button-min-height)}.ts-button:hover{border-color:var(--color-accent)}.ts-button.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.ts-button:active{transform:scale(.95)}.visual-flash-toggle{display:flex;align-items:center;justify-content:center}.toggle-label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-label input{width:18px;height:18px;cursor:pointer}.toggle-text{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--font-size-sm);color:var(--color-text)}.toggle-text i{color:var(--color-accent)}@media (max-width: 480px){.metronome,.metronome-display{padding:var(--space-3)}.bpm-value{font-size:var(--font-size-xl)}.bpm-button,.ts-button{font-size:var(--font-size-xs)}.play-button{font-size:var(--font-size-sm)}}.visual-flash{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:999;border:4px solid;animation-duration:.2s;animation-fill-mode:forwards}.visual-flash.beat-1{border-color:#f00c;animation-name:flash-red}.visual-flash.beat-other{border-color:#3f72afbf;animation-name:flash-white}@keyframes flash-red{0%{border-color:#f00c;opacity:1}to{border-color:#ff00001a;opacity:0}}@keyframes flash-white{0%{border-color:#3f72afbf;opacity:1}to{border-color:#3f72af1a;opacity:0}}.screen-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:2px solid var(--color-border)}.screen-header h2{margin:0;font-size:var(--font-size-lg);color:var(--color-text);display:flex;align-items:center;gap:var(--space-md);font-weight:var(--font-weight-bold)}.screen-header i{font-size:var(--icon-size-lg);color:var(--color-accent)}.timer-badge{background:var(--color-accent);color:#fff;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-family:var(--font-family-code);font-size:var(--font-size-md);font-weight:var(--font-weight-bold);min-width:80px;text-align:center}.content-area{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-6);padding:var(--space-2) 0;overflow-y:auto;max-height:calc(100vh - 400px)}.instruction-card{background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--color-accent);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-md)}.instruction-card h3{margin:0 0 var(--space-md) 0;font-size:var(--font-size-md);color:var(--color-text);display:flex;align-items:center;gap:var(--space-md);font-weight:var(--font-weight-bold)}.instruction-card i{color:var(--color-accent);font-size:var(--icon-size-lg)}.instruction-text{margin:0 0 var(--space-md) 0;font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-body)}.instruction-text strong{color:var(--color-text);display:block;margin-bottom:var(--space-xs)}.steps{margin:0;padding:0 0 0 var(--space-lg);list-style:disc;color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:1.6}.steps li{margin:var(--space-1) 0}.button-group{display:flex;gap:var(--space-sm);position:fixed;bottom:0;left:0;right:0;padding:var(--space-md);background:var(--color-surface);border-top:1px solid var(--color-border);z-index:10}.button-primary,.button-secondary{flex:1;padding:var(--space-lg);border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-md);font-weight:var(--font-weight-bold);transition:all var(--motion-base);display:flex;align-items:center;justify-content:center;gap:var(--space-md);min-height:var(--layout-button-min-height)}.button-primary{background:var(--color-accent);color:#fff}.button-primary:hover{opacity:.9;box-shadow:var(--shadow-lg)}.button-primary:active{transform:scale(.98)}.button-secondary{background:var(--color-surface-muted);color:var(--color-text);border:1px solid var(--color-border)}.button-secondary:hover{border-color:var(--color-accent);background:var(--color-surface-hover)}.button-secondary:active{transform:scale(.98)}@media (max-width: 480px){.content-area{margin-bottom:var(--space-4);max-height:calc(100vh - 320px)}.instruction-card{padding:var(--space-2)}.instruction-card h3{font-size:var(--font-size-sm)}.button-group{padding:var(--space-2)}.button-primary,.button-secondary{font-size:var(--font-size-sm);padding:var(--space-2)}}.exercise-card{background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--color-accent);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-md);box-shadow:var(--shadow-md)}.exercise-card h3{margin:0 0 var(--space-md) 0;font-size:var(--font-size-md);color:var(--color-text);display:flex;align-items:center;gap:var(--space-md);font-weight:var(--font-weight-bold)}.exercise-card i{color:var(--color-accent);font-size:var(--icon-size-lg)}.instruction-text{margin:0 0 var(--space-2) 0;font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.5}.instruction-text strong{color:var(--color-text-primary)}.highlight{color:var(--color-accent);font-weight:var(--font-weight-bold);background:var(--color-accent-soft);padding:2px 6px;border-radius:4px}.practice-steps{background:var(--color-surface-muted);border-radius:var(--radius-md);padding:var(--space-md);margin:var(--space-md) 0}.practice-steps p{margin:var(--space-sm) 0;font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.5}.scales-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin:var(--space-2) 0}.scale-item{background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-xs)}.scale-name{font-size:var(--font-size-md);font-weight:var(--font-weight-bold);color:var(--color-text);font-family:var(--font-family-code)}.scale-type{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.accidentals{font-size:var(--font-size-sm);color:var(--color-accent);font-weight:var(--font-weight-bold);font-family:var(--font-family-code)}.button-secondary-small{padding:var(--space-sm) var(--space-md);background:var(--color-surface-muted);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);transition:all var(--motion-base);display:inline-flex;align-items:center;gap:var(--space-xs);min-height:40px;font-weight:var(--font-weight-medium)}.button-secondary-small:hover{border-color:var(--color-accent);background:var(--color-surface-hover)}.button-secondary-small:active{transform:scale(.95)}.practice-hint{font-size:var(--font-size-xs);color:var(--color-text-secondary);font-style:italic;margin:var(--space-2) 0 0 0}.fingering-details{background:var(--color-surface-muted);border-radius:var(--radius-md);padding:var(--space-md);margin:var(--space-md) 0}.fingering-details p{margin:0;font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.5}@media (max-width: 480px){.scales-list{grid-template-columns:1fr}.exercise-card{padding:var(--space-2)}.exercise-card h3{font-size:var(--font-size-sm)}}.etudes-list{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.etude-card{background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--color-accent);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-md)}.etude-header{margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border)}.etude-number{display:flex;flex-direction:column;gap:4px}.number{font-size:var(--font-size-lg);font-weight:var(--font-weight-extrabold);color:var(--color-accent);font-family:var(--font-family-code)}.title{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.theme-section{background:var(--color-surface-muted);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md)}.theme-label{margin:0 0 var(--space-sm) 0;font-size:var(--font-size-xs);color:var(--color-text-secondary);display:flex;align-items:center;gap:var(--space-xs);text-transform:uppercase;letter-spacing:.5px;font-weight:var(--font-weight-medium)}.theme-label i{color:var(--color-accent)}.theme-content{margin:0;font-size:var(--font-size-md);font-weight:var(--font-weight-bold);color:var(--color-text);display:flex;align-items:center;gap:var(--space-md)}.theme-content i{color:var(--color-accent);font-size:1.1em}.etude-instructions{background:var(--color-surface-muted);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md)}.etude-instructions p{margin:0;font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.5}.button-mark-done{width:100%;padding:var(--space-sm);background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);transition:all var(--motion-base);display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}} .button-mark-done:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.button-mark-done:active{transform:scale(.98)}.button-add-etude{width:100%;padding:var(--space-lg);background:var(--color-surface-muted);color:var(--color-text);border:2px dashed var(--color-border);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-md);font-weight:var(--font-weight-bold);transition:all var(--motion-base);display:flex;align-items:center;justify-content:center;gap:var(--space-md);min-height:var(--layout-button-min-height)}.button-add-etude:hover{border-color:var(--color-accent);background:var(--color-surface-hover)}.button-add-etude:active{transform:scale(.98)}@media (max-width: 480px){.etude-card{padding:var(--space-2)}.number{font-size:var(--font-size-md)}.theme-content{font-size:var(--font-size-sm)}}.note-input-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}.note-input-section h3{margin:0 0 var(--space-md) 0;font-size:var(--font-size-md);color:var(--color-text);display:flex;align-items:center;gap:var(--space-md);font-weight:var(--font-weight-bold)}.note-input-section i{color:var(--color-accent);font-size:var(--icon-size-lg)}.note-textarea{width:100%;padding:var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-family:inherit;color:var(--color-text);background:var(--color-surface-muted);resize:vertical;margin-bottom:var(--space-md);line-height:var(--line-height-body)}.note-textarea::placeholder{color:var(--color-text-secondary)}.note-textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-soft)}.button-save-note{width:100%;padding:var(--space-sm);background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);transition:all var(--motion-base);display:flex;align-items:center;justify-content:center;gap:var(--space-sm);min-height:var(--layout-button-min-height)}.button-save-note:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.button-save-note:active{transform:scale(.98)}.notes-history-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg)}.notes-history-section h3{margin:0 0 var(--space-md) 0;font-size:var(--font-size-md);color:var(--color-text);display:flex;align-items:center;gap:var(--space-md);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-md);font-weight:var(--font-weight-bold)}.notes-history-section i{color:var(--color-accent);font-size:var(--icon-size-lg)}.empty-state{text-align:center;padding:var(--space-4);color:var(--color-text-secondary)}.empty-state p:first-child{font-size:2em;margin-bottom:var(--space-2)}.empty-state p:last-child{margin:0;font-size:var(--font-size-sm)}.notes-list{display:flex;flex-direction:column;gap:var(--space-2);max-height:300px;overflow-y:auto}.note-item{background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-md)}.note-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border)}.note-date{font-size:var(--font-size-xs);color:var(--color-text-secondary);display:flex;align-items:center;gap:4px}.note-date i{color:var(--color-accent)}.button-delete-note{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;font-size:var(--font-size-sm);transition:all var(--motion-base);padding:var(--space-xs)}.button-delete-note:hover{color:#f44;transform:scale(1.2)}.note-content{margin:0;font-size:var(--font-size-sm);color:var(--color-text);line-height:var(--line-height-body);word-break:break-word}@media (max-width: 480px){.note-input-section,.notes-history-section{padding:var(--space-2)}.notes-list{max-height:250px}}.cool-down-tip{background:var(--color-accent-soft);border:1px solid rgba(63,114,175,.2);border-radius:var(--radius-md);padding:var(--space-lg);margin-top:var(--space-2xl);margin-bottom:var(--space-3xl);display:flex;gap:var(--space-md)}.cool-down-tip i{color:var(--color-accent);font-size:1.5em;flex-shrink:0}.cool-down-tip p{margin:0;font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.5}.button-finish{flex:1;padding:var(--space-lg);background:var(--color-success);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-md);font-weight:var(--font-weight-bold);transition:all var(--motion-base);display:flex;align-items:center;justify-content:center;gap:var(--space-md);min-height:var(--layout-button-min-height)}.button-finish:hover{opacity:.9;box-shadow:var(--shadow-lg)}.button-finish:active{transform:scale(.98)}@media (max-width: 480px){.cool-down-tip{padding:var(--space-2)}.button-finish{font-size:var(--font-size-sm);padding:var(--space-2)}}.routine-screen-container{display:flex;flex-direction:column;min-height:100vh;background:var(--color-bg)}.routine-main-content{flex:1;overflow-y:auto;padding-bottom:var(--space-3xl)}.routine-screen{padding:var(--space-lg);max-width:var(--layout-container-max);margin:0 auto}.time-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);padding:var(--space-3xl) var(--space-lg);min-height:calc(100vh - 200px)}.time-selection h2{margin:0;font-size:var(--font-size-2xl);color:var(--color-text);display:flex;align-items:center;gap:var(--space-md);font-weight:var(--font-weight-bold)}.time-selection i{color:var(--color-accent)}.level-badge{margin:0;padding:var(--space-sm) var(--space-md);background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.time-buttons{display:flex;gap:var(--space-md);flex-wrap:wrap;justify-content:center}.time-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);width:120px;height:120px;border:none;border-radius:var(--radius-lg);background:var(--color-accent);color:#fff;cursor:pointer;font-size:var(--font-size-md);font-weight:var(--font-weight-bold);transition:all var(--motion-base);box-shadow:var(--shadow-md)}.time-button:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.time-button:active{transform:scale(.98)}.time-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-extrabold)}.time-unit{font-size:var(--font-size-sm);opacity:.9}.metronome-section{padding:var(--space-lg);max-width:var(--layout-container-max);margin:0 auto;position:sticky;top:56px;background:var(--color-bg);z-index:50;border-bottom:1px solid var(--color-border)}@media (max-width: 480px){.routine-screen{padding:var(--space-md)}.time-selection{padding:var(--space-lg) var(--space-sm)}.time-selection h2{font-size:var(--font-size-xl)}.time-buttons{gap:var(--space-sm)}.time-button{width:100px;height:100px;font-size:var(--font-size-sm)}.metronome-section{padding:var(--space-sm);top:48px}}.chord-flashcard{max-width:480px;margin:0 auto;padding:var(--space-2xl);animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.flashcard-header{text-align:center;margin-bottom:var(--space-3xl)}.flashcard-header h2{margin:0 0 var(--space-md) 0;font-size:var(--font-size-2xl);color:var(--color-text);display:flex;align-items:center;justify-content:center;gap:var(--space-md);font-weight:var(--font-weight-extrabold)}.flashcard-header i{color:var(--color-accent);font-size:var(--icon-size-lg)}.subtitle{margin:0;font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:var(--line-height-body)}.mode-toggles{display:flex;gap:var(--space-sm);margin-bottom:var(--space-xl);flex-wrap:wrap}.score-toggles{display:flex;gap:var(--space-sm);margin-bottom:var(--space-2xl)}.score-toggle{flex:1;padding:var(--space-sm) var(--space-md);background:var(--color-surface-muted);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);transition:all var(--motion-base);line-height:var(--line-height-heading)}.score-toggle:hover{border-color:var(--color-accent);background:var(--color-surface-hover)}.score-toggle.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent);box-shadow:var(--shadow-md)}.mode-toggle{flex:1;min-width:120px;padding:var(--space-sm) var(--space-md);background:var(--color-surface-muted);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);transition:all var(--motion-base);display:flex;align-items:center;justify-content:center;gap:var(--space-xs);line-height:var(--line-height-heading)}.mode-toggle:hover{border-color:var(--color-accent);background:var(--color-surface-hover)}.mode-toggle.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent);box-shadow:var(--shadow-md)}.chord-card-container{background:var(--color-surface);border:2px solid var(--color-accent);border-radius:var(--radius-xl);padding:var(--space-3xl);margin-bottom:var(--space-2xl);box-shadow:var(--shadow-lg);animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.chord-display{text-align:center;margin-bottom:var(--space-2xl)}.chord-display h3{margin:0 0 var(--space-md) 0;font-size:var(--font-size-lg);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:1px;font-weight:var(--font-weight-bold);line-height:var(--line-height-heading)}.accidentals-display{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-lg);margin-bottom:var(--space-lg);min-height:100px;align-items:center}.key-signature-image{width:min(100%,320px);height:auto;display:block;object-fit:contain}.hint{margin:0;font-size:var(--font-size-sm);color:var(--color-text-secondary);font-style:italic;line-height:1.6}.button-reveal{width:100%;padding:var(--space-lg);background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-md);font-weight:var(--font-weight-bold);transition:all var(--motion-base);display:flex;align-items:center;justify-content:center;gap:var(--space-md);min-height:var(--layout-button-min-height);margin-bottom:var(--space-3xl)}.button-reveal:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.button-reveal:active{transform:scale(.98)}.button-reveal.next{background:var(--color-success)}.answer-display{background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-xl);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);animation:slideDown .3s ease-out}@keyframes slideDown{0%{max-height:0;opacity:0}to{max-height:200px;opacity:1}}.answer-section{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);background:var(--color-surface);display:flex;flex-direction:column;gap:var(--space-xs)}.answer-section h4{margin:0 0 var(--space-sm) 0;font-size:var(--font-size-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;font-weight:var(--font-weight-medium)}.answer-key{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-extrabold);color:var(--color-text);font-family:Georgia,serif;line-height:var(--line-height-heading)}.answer-notes{margin:0;font-size:var(--font-size-sm);color:var(--color-accent);font-family:var(--font-family-code);line-height:var(--line-height-body)}.button-next-card{width:100%;padding:var(--space-lg);background:var(--color-success);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-md);font-weight:var(--font-weight-bold);transition:all var(--motion-base);display:flex;align-items:center;justify-content:center;gap:var(--space-md);min-height:var(--layout-button-min-height);margin-bottom:var(--space-2xl)}.button-next-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.button-next-card:active{transform:scale(.98)}.flashcard-tips{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl)}.flashcard-tips h3{margin:0 0 var(--space-md) 0;font-size:var(--font-size-md);color:var(--color-text);display:flex;align-items:center;gap:var(--space-md);font-weight:var(--font-weight-bold)}.flashcard-tips i{color:var(--color-accent)}.flashcard-tips ul{margin:0;padding:0 0 0 var(--space-lg);list-style:disc;color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:1.6}.flashcard-tips li{margin:var(--space-md) 0}@media (max-width: 480px){.chord-flashcard{padding:var(--space-lg)}.flashcard-header h2{font-size:var(--font-size-xl)}.mode-toggles{margin-bottom:var(--space-lg)}.score-toggles{margin-bottom:var(--space-xl)}.mode-toggle{min-width:auto;font-size:var(--font-size-xs);padding:var(--space-xs) var(--space-sm)}.score-toggle{font-size:var(--font-size-xs);padding:var(--space-xs) var(--space-sm)}.chord-card-container{padding:var(--space-lg)}.accidentals-display{gap:var(--space-2)}.key-signature-image{width:min(100%,260px)}.answer-display{grid-template-columns:1fr;gap:var(--space-md)}.button-reveal,.button-next-card{font-size:var(--font-size-sm);padding:var(--space-sm)}.flashcard-tips ul{font-size:var(--font-size-xs)}}.theme-toggle{min-height:var(--layout-button-min-height);padding:0 12px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-muted);color:var(--color-text);display:inline-flex;align-items:center;gap:var(--icon-gap);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.theme-toggle:hover{background:var(--color-surface-hover)}.theme-toggle i{font-size:var(--icon-size-md)}.app{display:flex;flex-direction:column;min-height:100vh;background:var(--color-bg);color:var(--color-text)}.app-header{padding:var(--space-lg) 0 var(--space-md);margin-bottom:var(--space-lg);background:var(--color-bg);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.app-routine .app-header{display:none}.header-container{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);width:100%;max-width:var(--layout-container-max);margin-left:auto;margin-right:auto;padding:0 var(--layout-page-padding-x)}.header-container h1{margin:0;flex:1;display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-lg);line-height:var(--line-height-heading)}.header-container i{color:var(--color-accent);font-size:1.3em}.header-home-button{padding:var(--space-sm) var(--space-md);background:var(--color-surface-muted);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);transition:all var(--motion-base);display:flex;align-items:center;gap:var(--space-xs);min-height:var(--layout-button-min-height)}.header-home-button:hover{border-color:var(--color-accent);background:var(--color-surface-hover)}.header-home-button:active{transform:scale(.98)}.app-main{flex:1;overflow:hidden}.app-home .app-main{padding:var(--space-lg)}.app-flashcard .app-main{overflow-y:auto;padding-bottom:var(--space-lg)}@media (max-width: 480px){.header-container{padding:0 var(--space-md)}.header-container h1{font-size:var(--font-size-md)}.app-header{padding:var(--space-md) 0 var(--space-sm);margin-bottom:var(--space-md)}.header-home-button{font-size:var(--font-size-xs);padding:var(--space-sm) var(--space-sm)}}:root{--color-bg: #f9f7f7;--color-surface: #ffffff;--color-surface-muted: #dbe2ef;--color-surface-hover: #cdd6e8;--color-accent: #3f72af;--color-accent-soft: rgba(63, 114, 175, .08);--color-success: #22c55e;--color-warning: #f59e0b;--color-danger: #ef4444;--color-text: #112d4e;--color-text-secondary: #3a5070;--color-border: rgba(17, 45, 78, .1);--color-shadow: rgba(17, 45, 78, .1);--font-family-base: "Noto Sans JP", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-family-code: "Inter", monospace;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-bold: 700;--font-weight-extrabold: 800;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 15px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 32px;--line-height-body: 1.7;--line-height-heading: 1.3;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 20px;--space-2xl: 24px;--space-3xl: 32px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--shadow-sm: 0 1px 3px rgba(17, 45, 78, .05);--shadow-md: 0 2px 10px rgba(17, 45, 78, .07);--shadow-lg: 0 4px 24px rgba(17, 45, 78, .1);--motion-fast: .15s;--motion-base: .2s;--motion-slow: .3s;--motion-easing: ease;--motion-easing-out: cubic-bezier(.2, 0, 0, 1);--layout-container-max: 480px;--layout-header-height: 52px;--layout-button-min-height: 44px;--layout-input-height: 44px;--layout-card-padding: 20px;--layout-page-padding-x: 16px;--layout-page-padding-desktop-x: 20px;--icon-size-sm: 14px;--icon-size-md: 16px;--icon-size-lg: 18px;--icon-gap: 6px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-body);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--motion-base) var(--motion-easing),color var(--motion-base) var(--motion-easing)}body.light-mode{--color-bg: #f9f7f7;--color-surface: #ffffff;--color-surface-muted: #dbe2ef;--color-surface-hover: #cdd6e8;--color-accent: #3f72af;--color-accent-soft: rgba(63, 114, 175, .08);--color-success: #22c55e;--color-warning: #f59e0b;--color-danger: #ef4444;--color-text: #112d4e;--color-text-secondary: #3a5070;--color-border: rgba(17, 45, 78, .1);--color-shadow: rgba(17, 45, 78, .1)}body.dark-mode{--color-bg: #222831;--color-surface: #2c3340;--color-surface-muted: #393e46;--color-surface-hover: #434a55;--color-accent: #00adb5;--color-accent-soft: rgba(0, 173, 181, .1);--color-success: #4ade80;--color-warning: #fbbf24;--color-danger: #f87171;--color-text: #eeeeee;--color-text-secondary: #b8bcc4;--color-border: rgba(238, 238, 238, .08);--color-shadow: rgba(0, 0, 0, .25)}#root{min-height:100%;display:flex;flex-direction:column}a{color:var(--color-accent);text-decoration:none}a:hover{text-decoration:underline}button{font-family:var(--font-family-base);cursor:pointer;border:none;border-radius:var(--radius-md);min-height:var(--layout-button-min-height);padding:10px 18px;font-size:var(--font-size-md);font-weight:var(--font-weight-bold);transition:background-color var(--motion-base) var(--motion-easing),color var(--motion-base) var(--motion-easing),border-color var(--motion-base) var(--motion-easing),transform var(--motion-fast) var(--motion-easing-out)}button i{font-size:var(--icon-size-md);margin-right:var(--icon-gap)}button:disabled{opacity:.5;cursor:not-allowed}button:active{transform:translateY(1px)}input,textarea,select{font-family:var(--font-family-base);font-size:inherit;border:1px solid;border-radius:var(--radius-md);min-height:var(--layout-input-height);padding:10px 12px;transition:border-color var(--motion-base) var(--motion-easing),background-color var(--motion-base) var(--motion-easing)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-accent)}input,textarea,select{background-color:var(--color-surface-muted);border-color:var(--color-border);color:var(--color-text)}input:focus,textarea:focus,select:focus{background-color:var(--color-surface)}h1{font-size:var(--font-size-xl);font-weight:var(--font-weight-extrabold);margin-bottom:var(--space-md);line-height:var(--line-height-heading)}h2{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin-bottom:var(--space-md);line-height:var(--line-height-heading)}h3{font-size:var(--font-size-md);font-weight:var(--font-weight-bold);margin-bottom:var(--space-sm);line-height:var(--line-height-heading)}p{line-height:var(--line-height-body);margin-bottom:var(--space-md);font-size:var(--font-size-base)}.container{width:100%;max-width:var(--layout-container-max);margin:0 auto;padding:0 var(--layout-page-padding-x)}@media (min-width: 1024px){.container{padding:0 var(--layout-page-padding-desktop-x)}}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--layout-card-padding)}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover{filter:brightness(.95)}.btn-secondary{background:var(--color-surface-muted);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-surface-hover)}.text-code{font-family:var(--font-family-code)}h1 i,h2 i,h3 i,h4 i,p i,button i{margin-right:var(--icon-gap)}h1 i,h2 i,h3 i,h4 i,p i{font-size:var(--icon-size-lg)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background-color:var(--color-surface)}::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background-color:var(--color-surface-hover)}body.dark-mode ::-webkit-scrollbar-thumb{background-color:var(--dark-border);border-radius:4px}:is():hover{background-color:#64748b}