:root{--bg: #11151c;--panel: #1a2029;--panel-2: #222a36;--text: #e8edf4;--dim: #8a96a8;--accent: #5ad1c4;--correct: #5ad16a;--incorrect: #e05d5d;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.shed-app{max-width:640px;margin:0 auto;padding:16px 16px 48px;min-height:100dvh}.shed-header{text-align:center;margin-bottom:24px}.shed-header h1{margin:0;font-size:2rem;letter-spacing:.04em;color:var(--accent)}.shed-header .subtitle{margin:4px 0 0;color:var(--dim)}.menu{display:flex;flex-direction:column;gap:10px}.menu-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--panel);border:1px solid #2a3240;border-radius:10px;padding:14px 16px;color:var(--text);text-align:left;cursor:pointer;font-size:1rem}.menu-item:hover{border-color:var(--accent)}.menu-item-name{font-weight:600}.menu-item-hint{color:var(--dim);font-size:.85rem}.question,.feedback,.summary{background:var(--panel);border-radius:12px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.question-meta{width:100%;display:flex;justify-content:space-between;font-size:.85rem;color:var(--dim)}.hint{color:var(--dim);margin:0}.progress{font-size:1.1rem;font-weight:600;color:var(--accent);margin:0}button{font-family:inherit}.replay{background:var(--accent);color:#0b1016;border:none;border-radius:999px;padding:10px 20px;font-weight:600;cursor:pointer}.next{background:var(--accent);color:#0b1016;border:none;border-radius:999px;padding:10px 28px;font-weight:600;cursor:pointer;font-size:1rem}.link-button{background:none;border:none;color:var(--dim);cursor:pointer;text-decoration:underline;font-size:.85rem}.feedback h2.correct,.correct{color:var(--correct)}.feedback h2.incorrect,.incorrect{color:var(--incorrect)}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;width:100%}.choice-button{background:var(--panel-2);border:1px solid #2a3240;border-radius:8px;padding:10px 6px;color:var(--text);font-size:1rem;cursor:pointer}.choice-button:hover{border-color:var(--accent)}.choice-button:disabled{opacity:.5}.piano{overflow-x:auto;width:100%;padding:4px 0}.piano-white-row{position:relative;display:flex;height:110px;margin:0 auto}.piano-key{-webkit-user-select:none;user-select:none;touch-action:none}.piano-key.white{position:relative;flex-shrink:0;height:110px;background:#f2f3f5;border:1px solid #0b1016;border-radius:0 0 4px 4px;color:#0b1016}.piano-key.black{position:absolute;top:0;height:66px;background:#1c222b;border-radius:0 0 3px 3px;z-index:2}.piano-key.is-answer{outline:3px solid var(--accent);outline-offset:-3px}.piano-key.is-held{background:var(--accent)}.piano-key.black.is-held{background:#2a9d93}.vamp{background:var(--panel);border-radius:12px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.vamp-row{display:flex;align-items:center;gap:10px}.vamp-title{font-size:1.2rem;font-weight:600}.vamp-key strong{min-width:28px}.dim{color:var(--dim)}.step-button{background:var(--panel-2);border:1px solid #2a3240;color:var(--text);border-radius:6px;width:30px;height:30px;cursor:pointer;font-size:1.1rem;line-height:1}.vamp-now{font-size:1.3rem;font-weight:700;color:var(--accent);margin:4px 0 0}.vamp-next{margin:0}.vamp-scale{margin:0;color:var(--text)}.vamp-view{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:6px 0}.view-button{background:var(--panel-2);border:1px solid #2a3240;color:var(--dim);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:.85rem}.view-button.active{color:#0b1016;background:var(--accent);border-color:var(--accent)}.next.stop{background:var(--incorrect)}.ear-overlay{width:100%;background:var(--panel-2);border:1px solid #2a3240;border-radius:10px;padding:14px;margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:8px}.piano-key-label{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:.7rem;color:#556;pointer-events:none}