@layer site{:root{--color-fretboard-wood-light:#f8f4e3;--color-fretboard-wood-dark:#4a3728;--color-fretboard-fret:silver;--color-fretboard-string-light:#d4d4d4;--color-fretboard-string-dark:#aaa;--color-fretboard-marker-light:#e6e6e6;--color-fretboard-marker-dark:#555;--color-notation-position-light:#7f7f7f80;--color-notation-position-dark:#7f7f7fbf;--color-music-dot-normal:#2cdb57;--color-music-dot-highlight:#3737ff;--color-music-dot-border-light:#000;--color-music-dot-border-dark:#fff;--notation-bg-color:var(--bg-color);--notation-text-color:var(--text-color);--notation-border-color:var(--light-border);--notation-highlight-color:var(--focus-color);--notation-position-bg:var(--color-notation-position-light);--notation-position-width:var(--spacing-sm);--notation-chord-thumb-text:var(--text-color);--notation-chord-thumb-highlight-text:var(--focus-color);--notation-chord-thumb-highlight-bg:#007bff33;--notation-hotspot-bg:var(--color-danger);--notation-hotspot-border:var(--color-danger);--notation-hotspot-shadow:#0009;--notation-transition-time:var(--transition-speed);--button-height:clamp(50px, 4vw, 80px);--button-font-size:clamp(14px, 2.5vw, 16px);--container-max-width:800px;--fretboard-bg-color:var(--color-fretboard-wood-light);--fretboard-fretboard-color:var(--color-fretboard-wood-dark);--fretboard-fret-color:var(--color-fretboard-fret);--fretboard-string-color:var(--color-fretboard-string-light);--fretboard-marker-color:var(--color-fretboard-marker-light);--fretboard-text-color:var(--text-color);--fretboard-dot-normal-color:var(--color-music-dot-normal);--fretboard-dot-highlight-color:var(--color-music-dot-highlight);--fretboard-dot-border-color:var(--color-music-dot-border-light);--fretboard-correct-color:var(--color-success);--fretboard-incorrect-color:var(--color-danger);--game-control-height:40px;--game-control-margin:10px;--game-score-font-weight:bold;--game-message-min-height:20px;--hotspot-bg-color:var(--bg-color);--hotspot-text-color:var(--text-color);--hotspot-heading-color:var(--text-color);--hotspot-border-color:var(--light-border);--hotspot-link-color:var(--link-color);--hotspot-link-hover-color:var(--button-primary-hover);--hotspot-image-bg:var(--bg-color);--hotspot-image-border:var(--light-border);--hotspot-container-shadow:0 2px 10px #0000000d;--hotspot-transition-time:var(--transition-speed)}[data-theme=dark] [data-page-type=notation-page]{--notation-bg-color:var(--bg-color);--notation-text-color:var(--text-color);--notation-border-color:var(--light-border);--notation-highlight-color:var(--focus-color);--notation-position-bg:var(--color-notation-position-dark);--notation-chord-thumb-text:var(--text-color);--notation-chord-thumb-highlight-text:var(--focus-color);--notation-chord-thumb-highlight-bg:#ffffff26;--notation-hotspot-bg:var(--color-danger);--notation-hotspot-border:var(--color-danger);--notation-hotspot-shadow:#000c}[data-page-type=notation-page]{color:var(--notation-text-color);background-color:var(--notation-bg-color);transition:color var(--notation-transition-time) ease, background-color var(--notation-transition-time) ease}[data-page-type=notation-page] #main-container{color:var(--notation-text-color);width:100%;max-width:100%;margin:0;padding:0;overflow-x:hidden}[data-page-type=notation-page] #metroAndThumbContainer{margin:var(--spacing-xs) 0;flex-direction:row;align-items:flex-end;width:100%;min-height:clamp(45px,8vw,60px);display:flex;overflow-x:auto}[data-page-type=notation-page] #metronome-container{flex:none;margin-right:0}[data-page-type=notation-page] #chord-thumbs{margin:0 0 0 var(--spacing-sm);flex-direction:column;flex:1;align-self:flex-end;min-height:0;padding:0;display:flex}[data-page-type=notation-page] .chord-thumb-row{margin-bottom:var(--spacing-xs);flex-flow:row;justify-content:flex-start;align-items:center;min-height:clamp(30px,6vw,40px);display:inline-flex;overflow-x:auto}[data-page-type=notation-page] #chord-thumbs>div{min-width:clamp(25px,5vw,35px);margin-right:var(--spacing-xs);text-align:left;transition:background-color var(--notation-transition-time) ease, color var(--notation-transition-time) ease;background-color:#0000;display:inline-block;position:relative}[data-page-type=notation-page] #chord-thumbs>div[data-clickable=true]{cursor:pointer}[data-page-type=notation-page] #chord-thumbs>div:not([data-highlighted]){background-color:#0000}[data-page-type=notation-page] #chord-thumbs>div[data-highlighted]{background-color:var(--notation-chord-thumb-highlight-bg)}.chord-thumb-name{color:var(--notation-chord-thumb-text);white-space:nowrap;text-align:left;padding-left:2px;font-size:clamp(10px,2.5vw,12px);transition:color .3s}.chord-thumb-name.chord-name-active{color:var(--notation-chord-thumb-highlight-text);font-weight:700}.chord-thumb-number{color:var(--color-danger);font-size:var(--font-size-xs);line-height:1;position:absolute;top:2px;left:2px}.notation-main-content{width:90%}@media (width>=960px){.notation-main-content{width:60%}}[data-page-type=notation-page] #chord-thumbs::-webkit-scrollbar,[data-page-type=notation-page] .chord-thumb-row::-webkit-scrollbar{height:4px}[data-page-type=notation-page] #chord-thumbs::-webkit-scrollbar-thumb,[data-page-type=notation-page] .chord-thumb-row::-webkit-scrollbar-thumb{background-color:var(--notation-border-color);border-radius:var(--border-radius-sm)}[data-page-type=notation-page] #notationDiv{margin:var(--spacing-sm) 0;background-color:var(--notation-bg-color);opacity:1;image-rendering:auto;max-width:100%;position:relative;overflow-x:auto}[data-page-type=notation-page] #measureSlotsDiv{background-color:var(--notation-bg-color);opacity:1;max-width:100%;position:relative}[data-page-type=notation-page] [id^=measure-container-]{background-color:var(--notation-bg-color);opacity:1;position:relative}.notation-blank-measure{background-color:var(--notation-bg-color)}.notation-display-image{opacity:.9;background-color:#fff}.fretboard-zoom-controls{margin-top:var(--spacing-sm);text-align:center}[data-page-type=notation-page] #measureSlotsDiv>div>div{opacity:1;image-rendering:auto;position:relative}[data-theme=dark] [data-page-type=notation-page] #notationDiv img:not([data-native-dark=true],[data-no-invert=true]){filter:invert(.9)hue-rotate(180deg)brightness(.9)contrast(1.2);opacity:1;background-color:#fff}[data-theme=dark] [data-page-type=notation-page] #measureSlotsDiv [id^=measure-container-]{background-color:var(--notation-bg-color)}[data-theme=dark] [data-page-type=notation-page] img:not([data-native-dark=true],[data-no-invert=true]){filter:invert(.9)hue-rotate(180deg)brightness(.9)contrast(1.2);background-color:#fff}[data-theme=dark] [data-page-type=notation-page] #metroAndThumbContainer{background-color:var(--notation-bg-color)}[data-page-type=notation-page] #notationPositionDiv{width:var(--notation-position-width);background-color:var(--notation-position-bg);z-index:var(--z-overlay);opacity:1;border-radius:var(--border-radius-sm);pointer-events:none;transition:left .1s,top .1s,height .1s;display:block;position:absolute}[data-page-type=notation-page] button:focus-visible,[data-page-type=notation-page] #chord-thumbs>span:focus-visible{outline:2px solid var(--notation-highlight-color);outline-offset:2px}.notation-error h3{color:var(--color-danger);margin-top:0}@media (width<=400px){[data-page-type=notation-page] #notationDiv,[data-page-type=notation-page] #measureSlotsDiv,[data-page-type=notation-page] [id^=measure-container-]{margin:0;padding:0}[data-page-type=notation-page] #metroAndThumbContainer{min-height:40px}[data-page-type=notation-page] .chord-thumb-row{min-height:25px}}.game-button{height:var(--button-height);font-size:var(--button-font-size)}.game-button--correct{animation:.3s game-button-pulse-correct;background-color:var(--color-success)!important;color:#fff!important}.game-button--incorrect{animation:.3s game-button-pulse-incorrect;background-color:var(--color-danger)!important;color:#fff!important}.game-button--disabled{pointer-events:none;opacity:.7!important}.note-button{letter-spacing:.5px;font-family:monospace}.number-button{font-weight:600}.labeled-button{font-size:calc(var(--button-font-size) * .9);text-align:center}.game-button-container{max-width:var(--container-max-width);width:100%;margin:var(--spacing-lg) auto}.note-buttons-container{max-width:var(--container-max-width);width:auto;min-width:400px;min-height:120px;margin:0}.note-keys{flex-direction:column;align-items:center;width:100%;min-width:400px;display:flex}.note-buttons-accidental-row{height:var(--button-height);margin-bottom:var(--spacing-md);width:100%;min-width:400px;max-width:var(--container-max-width);position:relative}.note-buttons-natural-row{height:var(--button-height);width:100%;min-width:400px;max-width:var(--container-max-width);position:relative}.number-buttons-container,.labeled-buttons-container{max-width:var(--container-max-width);width:auto;margin:var(--spacing-lg) auto;min-width:400px}.number-buttons-row{height:var(--button-height);width:100%;min-width:400px;position:relative}.labeled-buttons-top-row{height:var(--button-height);margin-bottom:var(--spacing-sm);width:100%;min-width:400px;position:relative}.labeled-buttons-bottom-row{height:var(--button-height);width:100%;min-width:400px;margin-bottom:0;position:relative}@media (width<=768px){:root{--button-font-size:14px;--button-height:clamp(40px, 3.5vw, 60px)}.note-buttons-container,.note-keys,.note-buttons-accidental-row,.note-buttons-natural-row{min-width:320px}.note-keys{margin-top:-.5rem}}@media (width<=480px){:root{--button-font-size:12px;--button-height:clamp(35px, 3vw, 50px)}.note-buttons-container,.note-keys,.note-buttons-accidental-row,.note-buttons-natural-row{min-width:280px}}[data-theme=dark]{--color-fretboard-wood-light:#2c2c2c;--color-fretboard-wood-dark:#1a1a1a;--color-fretboard-fret:#888;--fretboard-bg-color:var(--color-fretboard-wood-light);--fretboard-fretboard-color:var(--color-fretboard-wood-dark);--fretboard-fret-color:var(--color-fretboard-fret);--fretboard-string-color:var(--color-fretboard-string-dark);--fretboard-marker-color:var(--color-fretboard-marker-dark);--fretboard-text-color:#333;--fretboard-dot-normal-color:var(--color-music-dot-normal);--fretboard-dot-highlight-color:var(--color-music-dot-highlight);--fretboard-dot-border-color:var(--color-music-dot-border-dark);--fretboard-correct-color:var(--color-success);--fretboard-incorrect-color:var(--color-danger)}[data-page-type=fretboard-page]{color:var(--fretboard-text-color);transition:color .3s}.fretboard-svg{background-color:var(--fretboard-bg-color);transition:background-color .3s,width .3s cubic-bezier(.4,0,.2,1)}#fretboard-container{position:relative}#gameControlDiv{margin-top:var(--game-control-margin);height:var(--game-control-height);position:relative}#remainingDiv{position:absolute;top:0;left:10px}#replayDiv{font-weight:var(--game-score-font-weight);color:var(--fretboard-incorrect-color);cursor:pointer;background-color:#0000;transition:background-color .3s;position:absolute;top:5px;left:150px}.fretboard-error,.skills-page-error{padding:var(--spacing-md);margin:var(--spacing-md);background-color:var(--color-error-bg,#fee);border:1px solid var(--color-error-border,#faa);border-radius:var(--border-radius);color:var(--color-error-text,#c00)}#scoreDiv{font-weight:var(--game-score-font-weight);position:absolute;top:20px;left:35px}#scoreMessageDiv{min-height:var(--game-message-min-height);transition:color .3s;position:relative;top:0;left:10px}@media (width>=800px){#scoreMessageDiv{width:60%}}@media (width<=799px){#scoreMessageDiv{width:90%}}#scoreMessageDiv.score-correct{color:var(--fretboard-correct-color)}#scoreMessageDiv.score-incorrect{color:var(--fretboard-incorrect-color)}[data-page-type=fretboard-page] .note-button.feedback-correct,[data-page-type=fretboard-page] .labeled-button.feedback-correct,[data-page-type=fretboard-page] .number-button.feedback-correct{background-color:var(--fretboard-correct-color)!important}[data-page-type=fretboard-page] .note-button.feedback-incorrect,[data-page-type=fretboard-page] .labeled-button.feedback-incorrect,[data-page-type=fretboard-page] .number-button.feedback-incorrect{background-color:var(--fretboard-incorrect-color)!important}[data-page-type=fretboard-page] .number-buttons-container,[data-page-type=fretboard-page] .labeled-buttons-container{border-radius:var(--border-radius-sm);background-color:var(--fretboard-bg-color);transition:background-color .3s,box-shadow .3s;box-shadow:2px 2px 6px #0009}@keyframes game-button-pulse-correct{0%{transform:scale(1)}50%{transform:scale(1.05);box-shadow:0 0 0 3px #28a74566}to{transform:scale(1)}}@keyframes game-button-pulse-incorrect{0%{transform:scale(1)}25%{transform:scale(1.02)rotate(-1deg)}75%{transform:scale(1.02)rotate(1deg)}to{transform:scale(1)rotate(0)}}@media (width<=400px){.game-button{flex:1 0 auto}}.notation-admin-container{margin:var(--spacing-sm) 0;width:auto;max-width:100%;position:relative}.notation-admin-image{opacity:.9;width:auto;max-width:100%;height:auto}.notation-flex-container{justify-content:left;width:100%;margin:0 auto;display:flex;position:relative}.notation-hotspot-container{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.notation-hotspot{left:var(--hotspot-left,0);top:var(--hotspot-top,0);background-color:var(--notation-hotspot-bg,red);border:2px solid var(--notation-hotspot-border,red);width:max(5px,.625vw);height:max(5px,.625vw);box-shadow:2px 2px 6px var(--notation-hotspot-shadow,#0009);cursor:pointer;pointer-events:auto;z-index:10;border-radius:max(5px,.625vw);transition:transform .2s;position:absolute;transform:translate(-50%,-50%)}.notation-hotspot:hover,.notation-hotspot:focus-visible{transform:translate(-50%,-50%)scale(1.2)}.notation-hotspot:focus-visible{box-shadow:0 0 0 3px var(--notation-highlight-color,#007bff);outline:none}.notation-measure-slot{transition:background-position .2s}.notation-measure-slot--playing{transition:none}.notation-container-positioned{position:relative}.notation-image-responsive{opacity:1;image-rendering:auto;width:auto;max-width:100%;height:auto;display:block}.notation-admin-position-div,.notation-admin-position-bar{background-color:var(--color-neutral);opacity:.4;width:12px;position:absolute}.notation-admin-highlighted-cell{background-color:#90ee90;position:absolute}.metronome{--metronome-text-color:var(--notation-text-color,var(--text-color));--metronome-highlight-color:var(--notation-highlight-color,var(--focus-color));--metronome-bg-color:var(--notation-bg-color,var(--bg-color));--metronome-border-color:var(--notation-border-color,var(--light-border));--metronome-spacing:var(--spacing-sm);--metronome-transition:var(--transition-speed) ease;color:var(--metronome-text-color);background-color:var(--metronome-bg-color);border-radius:var(--border-radius-md);border:1px solid var(--metronome-border-color);cursor:pointer;width:auto;transition:background-color var(--metronome-transition), color var(--metronome-transition), border-color var(--metronome-transition), box-shadow var(--metronome-transition);font-family:system-ui,sans-serif;position:relative;box-shadow:0 2px 4px #0000000d}.metronome-container{align-items:flex-start;gap:var(--spacing-xs);padding:var(--metronome-spacing);transition:transform var(--metronome-transition);flex-direction:column;width:clamp(70px,15vw,90px);min-width:70px;max-width:90px;display:flex}.metronome-container:hover{transform:scale(1.02)}.metronome-shoe-container{justify-content:center;align-items:center;height:40px;display:flex;position:relative}.metronome-shoe{object-fit:contain;width:auto;height:100%;max-height:40px;transition:opacity var(--metronome-transition);opacity:1;position:absolute;top:0;left:0}.metronome-shoe[data-state=hidden]{opacity:0;pointer-events:none}.metronome-text{white-space:nowrap;text-overflow:ellipsis;width:100%;min-width:0;transition:color var(--metronome-transition);overflow:hidden}.metronome-beat{font-size:var(--font-size-md);font-variant-numeric:tabular-nums;font-family:Roboto Mono,monospace;font-weight:700}.metronome-measure{font-size:var(--font-size-sm);font-variant-numeric:tabular-nums;font-family:Roboto Mono,monospace}.metronome-tempo{font-size:var(--font-size-xs);color:var(--metronome-highlight-color);margin-top:var(--spacing-xs)}.metronome-loop{font-size:var(--font-size-xs);opacity:.9}.metronome-small .metronome-container{width:clamp(60px,12vw,70px);min-width:60px;max-width:70px;padding:var(--spacing-xs)}.metronome-small .metronome-shoe-container{height:clamp(25px,6vw,30px)}.metronome-small .metronome-shoe{max-height:clamp(25px,6vw,30px)}.metronome-small .metronome-beat{font-size:var(--font-size-sm)}.metronome-small .metronome-measure,.metronome-small .metronome-loop,.metronome-small .metronome-tempo{font-size:var(--font-size-xs)}.metronome:focus-visible{outline:2px solid var(--metronome-highlight-color);outline-offset:2px}.metronome[data-playing=true] .metronome-beat{animation:none!important}.fretboard-game-container{box-sizing:border-box;width:100%;max-width:100%;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;position:relative}.fretboard-game-breadcrumb{background-color:var(--light-bg);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);color:var(--color-neutral);margin-bottom:1rem;padding:.75rem;line-height:1.4}.fretboard-game-breadcrumb a{color:var(--focus-color);text-decoration:none}.fretboard-game-breadcrumb a:hover{text-decoration:underline}.fretboard-game-header{margin-bottom:1rem}.fretboard-game-title{font-size:var(--font-size-lg);color:var(--text-color);margin:0 0 .5rem;font-weight:600}@media (width<=576px){.fretboard-game-title{font-size:1.1rem}}[data-theme=dark] [data-page-type=hotspot-page]{--hotspot-bg-color:var(--bg-color);--hotspot-text-color:var(--text-color);--hotspot-heading-color:var(--text-color);--hotspot-border-color:var(--light-border);--hotspot-link-color:var(--link-color);--hotspot-link-hover-color:var(--button-primary-hover);--hotspot-image-bg:#fff;--hotspot-image-border:var(--light-border);--hotspot-container-shadow:0 2px 10px #0003}[data-page-type=hotspot-page]{color:var(--hotspot-text-color);background-color:var(--hotspot-bg-color);transition:color var(--hotspot-transition-time) ease, background-color var(--hotspot-transition-time) ease}.hotspot-page-container{margin:var(--spacing-lg) auto;max-width:800px;padding:var(--spacing-lg);background-color:var(--hotspot-bg-color);border-radius:var(--border-radius-md);border:1px solid var(--hotspot-border-color);box-shadow:var(--hotspot-container-shadow);transition:background-color var(--hotspot-transition-time) ease, color var(--hotspot-transition-time) ease, border-color var(--hotspot-transition-time) ease, box-shadow var(--hotspot-transition-time) ease}.hotspot-page-title{color:var(--hotspot-heading-color);margin-top:0;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--hotspot-border-color);transition:color var(--hotspot-transition-time) ease, border-color var(--hotspot-transition-time) ease;font-size:var(--font-size-lg)}.hotspot-page-content{gap:var(--spacing-lg)}.hotspot-page-images{gap:var(--spacing-lg);margin-bottom:var(--spacing-lg);flex-wrap:wrap;justify-content:center;display:flex}.hotspot-page-image-wrapper{background-color:var(--hotspot-image-bg);border:1px solid var(--hotspot-image-border);padding:var(--spacing-sm);border-radius:var(--border-radius-sm);max-width:100%;transition:border-color var(--hotspot-transition-time) ease}.hotspot-page-image{max-width:100%;height:auto;display:block;filter:none!important}.hotspot-page-text{color:var(--hotspot-text-color);transition:color var(--hotspot-transition-time) ease;line-height:1.6}.hotspot-page-text ul,.hotspot-page-text ol{padding-left:var(--spacing-xl);margin-bottom:var(--spacing-lg)}.hotspot-page-text li{margin-bottom:var(--spacing-xs)}.hotspot-page-text a{color:var(--hotspot-link-color);transition:color var(--hotspot-transition-time) ease;text-decoration:none}.hotspot-page-text a:hover{color:var(--hotspot-link-hover-color);text-decoration:underline}.hotspot-page-error{padding:var(--spacing-lg);border-radius:var(--border-radius-md);margin:var(--spacing-lg) auto;max-width:800px}@media (width<=600px){.hotspot-page-container{padding:var(--spacing-md);margin:var(--spacing-sm)}.hotspot-page-images{flex-direction:column;align-items:center}}@media (width<=768px){.number-buttons-container,.labeled-buttons-container{--button-height:2rem;--button-font-size:.8rem}.number-button,.labeled-button{padding:.25rem .5rem}}@media (width<=576px){.number-buttons-container,.labeled-buttons-container{--button-height:1.8rem;--button-font-size:.7rem}.number-button,.labeled-button{padding:.25rem}}.btn-game{min-width:clamp(40px,8vw,80px);min-height:clamp(32px,6vw,44px);padding:var(--spacing-xs);text-overflow:ellipsis;white-space:nowrap;border-radius:var(--border-radius-md);background:var(--button-primary);color:#fff;cursor:pointer;transition:background-color var(--transition-speed) ease, transform var(--transition-speed) ease;border:none;justify-content:center;align-items:center;font-size:clamp(12px,2.5vw,14px);display:flex;position:absolute;overflow:hidden}.btn-game:hover{background:var(--button-primary-hover);transform:translateY(-1px)}.btn-game:active{transform:translateY(1px)}.btn-game:disabled{background:var(--button-disabled);cursor:not-allowed;transform:none}@media (hover:none) and (pointer:coarse){.btn-game{min-width:44px;min-height:44px}.btn-game:active{background:var(--button-primary-hover);transform:scale(.95)}}[data-theme=dark] img[data-fretboard-notation=true]{filter:invert(.9)hue-rotate(180deg)brightness(.9)contrast(1.2)}.skills-page-overall-row{border-radius:var(--border-radius-lg);background-color:var(--light-bg);border:1px solid var(--light-border);gap:var(--spacing-sm);flex-direction:column;max-width:100%;margin:clamp(8px,2vw,10px) clamp(4px,1vw,5px) clamp(12px,3vw,15px);padding:clamp(6px,1.5vw,8px) clamp(12px,3vw,15px) clamp(10px,2.5vw,12px);display:flex}[data-theme=dark] .skills-page-overall-row{background-color:var(--header-bg);border-color:var(--light-border)}.skills-page-overall-title-row{font-weight:700;font-size:clamp(var(--font-size-md), 2.5vw, 1.1rem)}.skills-page-overall-progress-row{--row-gap:var(--spacing-sm)}.skills-page-overall-progress-row .progress-bar{background-color:var(--bg-color);flex:1;max-width:200px;height:20px;margin:0}.skills-page-score-text{min-width:35px;font-size:var(--font-size-sm);margin:0}.skills-page-link{margin-right:calc(var(--spacing-sm) * 1.5)}.skills-table{width:100%}[data-theme=dark] .skills-table th{background-color:var(--header-bg);border-bottom-color:var(--light-border)}.skills-table th:hover{background-color:var(--toggle-bg)}[data-theme=dark] .skills-table th:hover{background-color:var(--hover-bg)}.skills-table td{vertical-align:middle}[data-theme=dark] .skills-table td{border-bottom-color:var(--light-border)}.skill-title,.song-title{cursor:pointer;color:var(--focus-color);text-decoration:underline;transition:color .3s}.skill-title:hover{color:var(--text-color)}.skills-sort-buttons{display:none}@media (width<=600px){.skills-page-overall-title-row{font-size:var(--font-size-md)}.skills-page-overall-progress-row .progress-bar{width:50%}.skills-sort-buttons{display:flex}}.testout-toggle-songlist{margin:var(--spacing-sm) 0;justify-content:flex-start;padding:0}.testout-toggle-songlist .testout-toggle-label{font-size:var(--font-size-sm);opacity:.8}.songlist-table-wrapper{-webkit-overflow-scrolling:touch;border-radius:var(--border-radius);width:100%;overflow-x:auto}.songlist-table{width:100%}.sort-buttons{margin-bottom:var(--spacing-lg);flex-wrap:wrap;align-items:center;display:flex}.sort-buttons label:not(.control-label){margin-right:var(--spacing-md);color:var(--text-color);font-weight:600}.sort-buttons button{background-color:var(--light-bg);border:1px solid var(--light-border);padding:var(--spacing-sm) clamp(10px, 2.5vw, 12px);border-radius:var(--border-radius);cursor:pointer;margin-right:clamp(8px,2vw,10px);margin-bottom:var(--spacing-xs);color:var(--text-color);transition:all .3s}[data-theme=dark] .sort-buttons button{background-color:var(--header-bg);border-color:var(--light-border)}.sort-buttons button:hover{background-color:var(--toggle-bg)}[data-theme=dark] .sort-buttons button:hover{background-color:var(--hover-bg)}.sort-buttons button.active{background-color:var(--focus-color);color:#fff;border-color:var(--focus-color)}.songlist-table th[data-sort=artist]{width:4vw}[data-theme=dark] .songlist-table th{background-color:var(--header-bg);border-bottom-color:var(--light-border)}.songlist-table th:hover{background-color:var(--toggle-bg)}[data-theme=dark] .songlist-table th:hover{background-color:var(--color-neutral-dark)}.songlist-table td{vertical-align:middle}[data-theme=dark] .songlist-table td{border-bottom-color:var(--light-border)}.difficulty-icon{border-radius:var(--border-radius-lg);text-transform:uppercase;justify-content:center;align-items:center;padding:5px clamp(8px,2vw,10px);font-size:clamp(10px,2vw,12px);font-weight:700;display:inline-flex}.difficulty-easy{background-color:var(--color-success);color:#fff}.difficulty-medium{background-color:var(--color-warning);color:#000}.difficulty-hard{background-color:var(--color-danger);color:#fff}.song-title:hover{color:var(--text-color)}.video-links{align-items:center;gap:clamp(8px,2vw,10px);min-height:22px;display:flex}@media (width>=601px) and (width<=768px){.songlist-table{font-size:var(--font-size-sm);table-layout:fixed;width:100%}.songlist-table th,.songlist-table td{padding:var(--spacing-sm) var(--spacing-xs);vertical-align:top;min-width:0}.songlist-table th[data-sort=artist]{width:12vw}.songlist-table th:first-child,.songlist-table td:first-child{width:15vw;min-width:80px}.songlist-table th:nth-child(6),.songlist-table td:nth-child(6){width:15vw;min-width:70px}.video-links{gap:var(--spacing-xs);flex-direction:column;align-items:flex-start}.video-links a{font-size:var(--font-size-xs);line-height:1.2}.songlist-table-wrapper{border:1px solid var(--light-border);border-radius:var(--border-radius);overflow-x:auto}.songlist-table td:nth-child(2),.songlist-table td:nth-child(3){overflow-wrap:break-word;white-space:normal;line-height:1.2;overflow:hidden}}.hotspot-footer{padding:var(--spacing-md) 0 0 0;margin-top:var(--spacing-md);border-top:1px solid var(--light-border);text-align:center;flex-shrink:0}.play-options-body{padding:var(--spacing-xs)}.play-options-section{margin-bottom:var(--spacing-md)}.play-options-section:last-child{margin-bottom:0}.play-options-section label,.play-options-label{margin-bottom:var(--spacing-xs);color:var(--text-color);font-weight:500;display:block}.play-options-radio-group{gap:var(--spacing-xs);margin-top:var(--spacing-xs);flex-direction:column;display:flex}.play-options-radio{align-items:center;gap:var(--spacing-xs);cursor:pointer;margin-bottom:0;display:inline-flex}.play-options-radio input[type=radio]{margin:0;margin-right:var(--spacing-xs);vertical-align:middle;flex-shrink:0}.play-options-radio span,.play-options-checkbox span{vertical-align:middle;font-weight:400;line-height:1.2}.tempo-control{gap:var(--spacing-xs)}.tempo-target-info{font-size:var(--font-size-xs);color:var(--list-marker-color);margin-top:var(--spacing-xs)}.play-options-checkbox{align-items:center;gap:var(--spacing-xs);cursor:pointer;margin:var(--spacing-xxs) 0;font-weight:400;display:inline-flex}.play-options-checkbox input[type=checkbox]{vertical-align:middle;flex-shrink:0;margin:0}.play-options-loop-control{align-items:baseline;gap:var(--spacing-sm);display:flex}.play-options-loop-count{align-items:center;gap:var(--spacing-xs);display:flex}.play-options-loop-count.disabled{opacity:.5;pointer-events:none}.play-options-loop-count input{width:50px;padding:6px var(--spacing-xs);text-align:center;margin:var(--spacing-xxs)}@media (width<=480px){.play-options-section label,.play-options-label,.play-options-checkbox span,.play-options-radio span{font-size:var(--font-size-sm)}}.goals-header{flex-wrap:wrap;align-items:center;gap:.5rem;width:100%;margin:.5rem 0;display:flex}.goals-title{font-size:var(--font-size-lg);color:var(--text-color);margin:0;font-weight:700}.goals-link{color:var(--focus-color);margin-right:.75rem;text-decoration:none}.goals-link:hover{text-decoration:underline}.goals-settings,.goal-progress-overview{border-radius:var(--border-radius-lg);background-color:#00000008;border:1px solid #0000001a;margin-bottom:1rem;padding:1rem}[data-theme=dark] .goals-settings{background-color:#ffffff0d;border-color:#ffffff1a}.goals-settings-title{margin-bottom:.5rem;font-weight:700}.goals-settings-row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.goals-settings-label{margin-right:.5rem}.goals-dropdown{border-radius:var(--border-radius-sm);background-color:var(--bg-color);color:var(--text-color);cursor:pointer;border:1px solid #0003;padding:.375rem .75rem}[data-theme=dark] .goals-dropdown{border-color:#fff3}.goals-checkbox{accent-color:var(--focus-color);margin-right:.5rem}.goals-dashboard{background-color:var(--bg-color);border-radius:var(--border-radius-lg);max-width:800px;margin:0 auto;overflow:hidden;box-shadow:0 4px 6px #0000001a}[data-theme=dark] .goals-dashboard{box-shadow:0 4px 6px #0000004d}[data-theme=dark] .goal-progress-overview{background-color:#ffffff0d;border-color:#ffffff1a}.goal-progress-bar-container{background-color:var(--bg-color);border-radius:var(--border-radius-xl);border:1px solid #0000001a;height:24px;margin:.5rem 0;display:flex;overflow:hidden}[data-theme=dark] .goal-progress-bar-container{border-color:#ffffff1a}.goal-progress-bar-container .goal-progress-segment{color:#fff;justify-content:center;align-items:center;height:100%;font-size:.8rem;font-weight:700;transition:width .3s;display:flex}.goals-segment-green{background-color:var(--color-success)}.goals-segment-yellow{background-color:var(--color-warning);color:#000c}.goals-segment-red{background-color:var(--color-danger)}.goals-table{border-collapse:separate;border-spacing:0;border-radius:var(--border-radius-lg);background-color:var(--bg-color);width:100%;color:var(--text-color);border:1px solid #0000001a;margin:0;overflow:hidden}[data-theme=dark] .goals-table{border-color:#ffffff1a}.goals-table thead th{text-align:left;padding:var(--spacing-md);color:var(--text-color);text-transform:uppercase;background-color:#00000008;border-bottom:2px solid #0000001a;font-size:.85em;font-weight:600}[data-theme=dark] .goals-table thead th{background-color:#ffffff0d;border-color:#ffffff1a}.goals-table tbody tr{border-bottom:1px solid #0000001a}[data-theme=dark] .goals-table tbody tr{border-color:#ffffff1a}.goals-table tbody tr:last-child{border-bottom:none}.goals-table td{padding:12px 15px}.goals-table tr:hover{background-color:#00000008}[data-theme=dark] .goals-table tr:hover{background-color:#ffffff08}.goals-title-link,.goals-action-link{color:var(--focus-color);cursor:pointer;text-decoration:none}.goals-title-link:hover{text-decoration:underline}.goals-status-indicator{align-items:center;gap:.5rem;display:flex}.goals-action-link:hover{text-decoration:underline}.goal-details-panel{background-color:var(--bg-color);border-radius:var(--border-radius-lg);border:1px solid #0000001a;margin-top:1rem;padding:1.5rem;position:relative;box-shadow:0 4px 15px #0000001a}[data-theme=dark] .goal-details-panel{border-color:#ffffff1a;box-shadow:0 4px 15px #0000004d}.goal-details-header{justify-content:space-between;align-items:center;gap:var(--spacing-xs);margin-bottom:1rem;display:flex}.goal-details-title{font-size:var(--font-size-lg);margin:0;padding-right:2rem;font-weight:700}.goal-settings-form{margin-bottom:1.5rem}.goal-settings-row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.goal-numeric-input{border-radius:var(--border-radius-sm);background-color:var(--bg-color);width:80px;color:var(--text-color);border:1px solid #0003;padding:.375rem .75rem}[data-theme=dark] .goal-numeric-input{border-color:#fff3}.chart-container{background-color:var(--chart-container-bg,var(--bg-color));width:100%;max-width:800px;color:var(--chart-container-text,var(--text-color));border-radius:var(--border-radius);padding:var(--spacing-sm);flex-wrap:wrap;gap:1rem;margin-top:1rem;transition:background-color .3s;display:flex;box-shadow:0 2px 8px #0000001a}.chart-wrapper{border-radius:var(--border-radius-lg);background-color:var(--bg-color);border:1px solid #0000001a;flex:300px;min-height:250px;padding:.5rem}[data-theme=dark] .chart-wrapper{border-color:#ffffff1a}.goals-button{background-color:var(--focus-color);color:#fff;border-radius:var(--border-radius-sm);cursor:pointer;border:none;padding:.5rem 1rem;transition:background-color .2s,opacity .2s}.goals-button:hover{opacity:.9}.goals-button-secondary{border:1px solid var(--focus-color);color:var(--focus-color);background-color:#0000}.goals-button-secondary:hover{background-color:#4d90fe1a}[data-theme=dark] .goals-button-secondary:hover{background-color:#5d9fff1a}.goals-button-danger{background-color:var(--color-danger)}.goals-actions{justify-content:flex-end;gap:.5rem;margin-top:1rem;display:flex}.goals-empty-message{text-align:center;color:var(--text-color);padding:2rem;font-style:italic}.goals-notifications{border-radius:var(--border-radius-lg);background-color:#00000008;border:1px solid #0000001a;margin-top:1rem;padding:1rem}[data-theme=dark] .goals-notifications{background-color:#ffffff0d;border-color:#ffffff1a}.goals-notifications-title{margin-bottom:.5rem;font-weight:700}.chart-empty-message{height:100%;font-style:italic;font-size:var(--font-size-md);color:var(--text-color);opacity:.7;text-align:center;padding:var(--spacing-lg);justify-content:center;align-items:center;display:flex}@media (width<=768px){.goals-table th:nth-child(2),.goals-table td:nth-child(2){display:none}.goals-settings-row,.goal-settings-row{flex-direction:column;align-items:flex-start}}@media (width<=576px){.goals-table th:nth-child(2),.goals-table td:nth-child(2),.goals-table th:nth-child(3),.goals-table td:nth-child(3){display:none}.goals-table td{padding:10px}.goal-details-title{font-size:1rem}}}