#exercise-label{opacity:.4;letter-spacing:-.03em;margin-bottom:.1rem;font-size:.85rem}#exercise-select{color:var(--color-text);border:1px solid var(--color-border);cursor:pointer;background:0 0;border-radius:4px;width:8rem;margin-top:0;padding:.4rem .8rem;font-size:1rem}#exercise-select option{background:var(--color-bg)}@media (width<=600px){#site-header,#exercise-label,#exercise-select{display:none}}#start-screen{flex:1;justify-content:center;align-items:center;display:flex}#start{letter-spacing:.1em;cursor:pointer;background:0 0;border:none;padding:0;font-family:Poppins,sans-serif;font-size:3rem;font-weight:300;animation:5s linear infinite rainbow-colors,3.5s ease-in-out infinite breathe-text}#start:active{opacity:.4;animation:none}@keyframes rainbow-colors{0%{color:#ff4500;filter:drop-shadow(0 0 2px #ff4500);border-color:#ff450099}16.6%{color:#fc0;filter:drop-shadow(0 0 2px #fc0);border-color:#fc09}33.3%{color:#00e676;filter:drop-shadow(0 0 2px #00e676);border-color:#00e67699}50%{color:#00bcd4;filter:drop-shadow(0 0 2px #00bcd4);border-color:#00bcd499}66.6%{color:#2979ff;filter:drop-shadow(0 0 2px #2979ff);border-color:#2979ff99}83.3%{color:#d500f9;filter:drop-shadow(0 0 2px #d500f9);border-color:#d500f999}to{color:#ff4500;filter:drop-shadow(0 0 2px #ff4500);border-color:#ff450099}}@keyframes breathe-text{0%,to{opacity:.6}50%{opacity:1}}@media (width<=600px){#start{letter-spacing:.25em;background:radial-gradient(circle at 38% 32%,#1c1c28,#080810);border:1px solid;border-radius:50%;width:10rem;height:10rem;font-size:.95rem;font-weight:400;transition:transform .12s;animation:5s linear infinite rainbow-colors,3.5s ease-in-out infinite breathe-circle}#start:active{animation:none;transform:scale(.94)}@keyframes breathe-circle{50%{transform:scale(1.04)}}}.spinner{border:3px solid var(--color-spinner-track);border-top-color:var(--color-text);border-radius:50%;width:2rem;height:2rem;margin:auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#scale-label{opacity:.4;letter-spacing:-.03em;margin-bottom:.1rem;font-size:.85rem}#scale-input{color:var(--color-text);border:1px solid var(--color-border);text-align:center;background:0 0;border-radius:4px;width:8rem;padding:.4rem .8rem;font-size:1rem}@media (width<=600px){#scale-input{width:12rem;padding:.65rem 1rem;font-size:1rem}}#note{-webkit-user-select:none;user-select:none;font-size:8rem;font-weight:700;line-height:1;transition:color 80ms,transform 80ms}#note.correct{color:var(--color-correct);transform:scale(1.1)}.detected-row{align-items:flex-end;gap:.25rem;margin-top:1.5rem;display:inline-flex}#detected-wrapper{cursor:default;position:relative}#detected-tooltip{background:var(--color-surface);border:1px solid var(--color-border);text-align:left;width:13rem;color:var(--color-text-muted);pointer-events:none;z-index:10;border-radius:6px;padding:.6rem .75rem;font-size:.7rem;line-height:1.5;display:none;position:absolute;bottom:calc(100% + .5rem + 4px);left:0}#detected-tooltip p{opacity:.6;margin-bottom:.35rem}#detected-tooltip ul{padding-left:1rem}#detected-wrapper:hover #detected-tooltip,#detected-wrapper.tips-open #detected-tooltip{display:block}#detected{text-align:center;opacity:.5;width:5rem;font-size:2.5rem;transition:color 10ms,opacity 80ms}#detected.match{color:var(--color-correct);opacity:1}.volume-bar-spacer{width:4px}#volume-bar{border:1px solid var(--color-border);opacity:.5;border-radius:3px;flex-direction:column;justify-content:flex-end;width:4px;height:2.5rem;display:flex;overflow:hidden}#volume-fill{background:var(--color-text);width:100%;transition:height 50ms}.config{text-align:center;margin-top:.5rem;margin-bottom:.5rem}.config-content{flex-direction:column;align-items:center;display:flex}.config summary{opacity:.4;letter-spacing:-.03em;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.3rem;margin-bottom:.75rem;font-size:.75rem;list-style:none;display:inline-flex}.config summary svg{transition:transform .15s}.config[open] summary svg{transform:rotate(180deg)}.config .input-group{margin-top:0;margin-bottom:.75rem}.mobile-pill svg{flex-shrink:0;display:block}.mobile-pill{bottom:calc(1.5rem + env(safe-area-inset-bottom));background:var(--color-surface);border:1px solid var(--color-border-active);color:var(--color-text);letter-spacing:.02em;cursor:pointer;z-index:9;border-radius:9999px;justify-content:center;align-items:center;gap:.4rem;min-height:2.75rem;padding:.6rem 1.1rem;font-family:inherit;font-size:.75rem;display:flex;position:fixed;right:1.5rem}.config-overlay{z-index:10;background:#0009;position:fixed;inset:0}.config-sheet{background:var(--color-surface);padding:1.25rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));z-index:11;border-radius:16px 16px 0 0;flex-direction:column;align-items:center;max-height:80vh;animation:.22s ease-out sheet-up;display:flex;position:fixed;bottom:0;left:0;right:0;overflow-y:auto}.config-sheet.no-animate{animation:none}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.config-sheet-handle{background:var(--color-border-active);border-radius:2px;width:2.5rem;height:4px;margin-bottom:1rem}.config-sheet-close{color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;padding:.5rem;font-size:1rem;line-height:1;position:absolute;top:1rem;right:1rem}.config-sheet-label{opacity:.4;letter-spacing:-.03em;margin-bottom:.1rem;font-size:.85rem}.config-sheet select{color:var(--color-text);border:1px solid var(--color-border);cursor:pointer;background:0 0;border-radius:4px;width:8rem;padding:.65rem .8rem;font-family:inherit;font-size:1rem}.config-sheet select option{background:var(--color-bg)}.config-sheet .input-group{margin-top:0;margin-bottom:.75rem}.config-sheet .exercise-mode-group>select{width:min(16rem,100vw - 3rem)}.debug-freq{color:#0f0;margin-top:.5rem;font-family:monospace;font-size:.75rem}.debug-spectrum{background:#0006;border-radius:3px;margin-top:1rem;margin-left:auto;margin-right:auto;display:block}#string-label{opacity:.5;margin-bottom:.5rem;font-size:1.2rem}#strings-label,#fret-label,#order-label{opacity:.4;letter-spacing:-.03em;margin-bottom:.1rem;font-size:.85rem}#fret-min-input,#fret-max-input{color:var(--color-text);border:1px solid var(--color-border);text-align:center;background:0 0;border-radius:4px;width:3.5rem;padding:.4rem .8rem;font-size:1rem}.fret-range{align-items:center;gap:.3rem;display:flex}#order-select{color:var(--color-text);border:1px solid var(--color-border);cursor:pointer;background:0 0;border-radius:4px;width:8rem;padding:.4rem .8rem;font-size:1rem}#order-select option{background:var(--color-bg)}@media (width<=600px){#fret-min-input,#fret-max-input{width:5rem;padding:.65rem .8rem;font-size:1rem}#order-select{width:12rem;padding:.65rem .8rem;font-size:1rem}}.string-chips{justify-content:center;gap:.4rem;display:flex}.string-chip{border:1px solid var(--color-border);min-width:2.8rem;height:2.8rem;color:var(--color-text);cursor:pointer;opacity:.25;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;background:0 0;border-radius:1.4rem;justify-content:center;align-items:center;padding:0 .7rem;font-size:.75rem;transition:opacity .15s,border-color .15s;display:flex}.string-chip.active{opacity:1;border-color:var(--color-border-active)}.string-chip.no-toggle{cursor:default}.string-chip-label{cursor:text}.string-chip-input{width:2rem;color:inherit;text-align:center;background:0 0;border:none;outline:none;padding:0;font-family:inherit;font-size:1rem}@media (width<=600px){.string-chip{min-width:3rem;height:3rem;font-size:.8rem}}.fretboard-diagram{max-width:calc(100vw - 2rem);height:auto;margin-top:1rem;display:block}.fbd-label{fill:var(--color-fbd-label);text-anchor:middle;font-family:inherit;font-size:10px}.fbd-dot{fill:var(--color-fbd-dot)}.fbd-dot-text{fill:var(--color-fbd-dot-text);text-anchor:middle;pointer-events:none;font-family:inherit;font-size:7.5px}.prompt-label{opacity:.4;letter-spacing:-.03em;margin-bottom:.1rem;font-size:.85rem}.prompt-textarea{resize:vertical;width:16rem;min-height:4.5rem;color:var(--color-text);border:1px solid var(--color-border);background:0 0;border-radius:4px;padding:.4rem .6rem;font-family:inherit;font-size:.9rem}.generate-btn{color:var(--color-text);border:1px solid var(--color-border);cursor:pointer;letter-spacing:.05em;background:0 0;border-radius:4px;margin-top:.8rem;padding:.4rem 1.2rem;font-family:inherit;font-size:.9rem}.generate-btn:disabled{opacity:.3;cursor:default}.generate-progress{opacity:.5;text-align:left;max-width:16rem;margin-top:.4rem;font-size:.75rem}.exercise-description{opacity:.5;text-align:left;max-width:16rem;margin-top:.6rem;font-size:.8rem;font-style:italic}.current-scale{opacity:.6;margin-top:.3rem;font-size:.8rem}.config-debug{opacity:.5;text-align:left;white-space:pre-wrap;word-break:break-all;max-width:min(32rem,100vw - 2rem);margin-top:.8rem;font-size:.7rem}@media (width<=600px){.generate-btn{width:100%;padding:.65rem 1.5rem;font-size:1rem}.prompt-textarea{width:min(16rem,100vw - 3rem);font-size:1rem}}.debug-overlay{color:#0f0;pointer-events:none;background:#000000b3;border-radius:4px;padding:6px 10px;font-family:monospace;font-size:.75rem;position:fixed;bottom:12px;right:12px}.debug-overlay ul{margin:4px 0 0;padding-left:1.2em;display:inline-block}html{background:var(--color-bg);overflow-x:hidden}:root{--color-bg:#000;--color-surface:#111;--color-text:#e8e8f0;--color-text-muted:#888;--color-border:#2a2a2a;--color-border-active:#555;--color-correct:#00c853;--color-error:#f44;--color-spinner-track:#222;--color-fbd-label:#666;--color-fbd-dot:#bbb;--color-fbd-dot-text:#000}*{box-sizing:border-box;margin:0}body{background:var(--color-bg);color:var(--color-text);min-height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);flex-direction:column;font-family:Inter,system-ui,sans-serif;display:flex;overflow-x:hidden}#app{display:contents}#site-header{align-items:center;padding:.25rem .5rem;display:flex}#logo{width:auto;height:3.5rem}#title{color:"white";letter-spacing:-.08em;font-family:Poppins,sans-serif;font-size:1.5rem;font-weight:300}#exercise-main{text-align:center;flex-direction:column;flex:1;justify-content:safe center;align-items:center;padding:2rem 0;display:flex}.input-group{flex-direction:column;align-items:flex-start;margin-top:2rem;display:inline-flex}.input-error{color:var(--color-error);margin-top:.2rem;font-size:.65rem;font-style:italic}@media (width<=600px){#site-header{padding:.15rem .5rem}#logo{height:2.5rem}#title{font-size:1.1rem}#exercise-main{padding:1rem 0}#note{font-size:10rem}#detected{font-size:3rem}.input-group{margin-top:1rem}}