*{box-sizing:border-box}:root{color:#151515;background:#f5f5f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Helvetica Neue,Arial,sans-serif;font-synthesis:none;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}.step-row{position:relative;margin:30px auto 40px;max-width:800px;width:100%}.vl-pill{position:absolute;top:-30px;left:50%;transform:translate(-50%);background:#fffffff2;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;box-shadow:0 4px 12px #0000001a;animation:vl-fade-in-out 1.5s forwards;white-space:nowrap;z-index:100}.vl-pill.grade-minimal{color:#28a745;border:1px solid rgba(40,167,69,.2)}.vl-pill.grade-close{color:#007aff;border:1px solid rgba(0,122,255,.2)}.vl-pill.grade-wide{color:#8e8e93;border:1px solid rgba(142,142,147,.2)}.vl-pill.grade-incorrect{color:#ff3b30;border:1px solid rgba(255,59,48,.2)}@keyframes vl-fade-in-out{0%{opacity:0;transform:translate(-50%,10px)}15%{opacity:1;transform:translate(-50%)}85%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-10px)}}body{margin:0;min-width:1120px;min-height:100vh}button,input,select{font:inherit}button{border:0}.app-shell{min-height:100vh;padding:16px;display:flex;justify-content:center;align-items:flex-start;background:radial-gradient(circle at 15% 10%,rgba(255,255,255,.9),transparent 30%),linear-gradient(180deg,#f8f8fa,#eeeef2)}.panel{width:min(1180px,100%);padding:12px;position:relative}.eyebrow{margin:0 0 6px;color:#8b8b93;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700}.github-link{position:absolute;top:14px;right:14px;display:flex;align-items:center;color:#888;padding:4px;border-radius:6px;transition:color .15s;text-decoration:none}.github-link:hover{color:#1b1b1f}.github-link-label{margin-left:6px;font-size:12px;font-weight:600;color:#aaa}.github-link:hover .github-link-label{color:#555}.brand{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:7px;font-size:17px;font-weight:800;letter-spacing:-.04em;color:#1b1b1f}.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:#1b1b1f;color:#fff;font-size:10px;font-weight:900;letter-spacing:-.03em;flex-shrink:0}h2{margin:0 0 7px;font-size:34px;letter-spacing:-.05em}.controls{display:grid;grid-template-columns:190px 1fr 150px;gap:18px;margin:12px 0}label{color:#74747c;font-size:12px;font-weight:650}select,input{width:100%;margin-top:7px;height:42px;border-radius:14px;padding:0 13px;border:1px solid rgba(0,0,0,.09);background:#f7f7f8e6;color:#1b1b1f;outline:none}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2374747c' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.flow-strip{display:flex;gap:12px}.flow-step{width:8px;height:8px;border-radius:50%;border:1.5px solid #c7c7cc;background:transparent;transition:all .15s ease}.flow-step.active{border-color:#111;background:transparent}.flow-step.done{border-color:#111;background:#111}.fade-in{animation:fadeInStep .25s ease-in-out forwards}@keyframes fadeInStep{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.current-card{display:flex;justify-content:space-between;gap:26px;align-items:end;min-height:138px;padding:22px;margin-bottom:18px;border-radius:25px;background:linear-gradient(135deg,#141414,#343434);color:#fff;overflow:hidden}.current-card p{margin:0;color:#ffffffad}.current-card .eyebrow{color:#ffffff94}.chord-tones{white-space:nowrap;font-size:20px;font-weight:750;letter-spacing:-.04em;color:#ffffffd1}.grid-outer{display:flex;justify-content:center;overflow-x:auto}.grid{display:grid;grid-template-columns:repeat(8,42px);gap:7px;width:max-content}.cell{width:42px;height:42px;border-radius:13px;color:#34343a;background:#fffffff0;box-shadow:0 1px 2px #00000014,inset 0 0 0 1px #0000000a;font-size:12px;font-weight:760;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.cell:hover{transform:translateY(-1px);box-shadow:0 7px 18px #0000001a,inset 0 0 0 1px #0000000a}.cell.target{box-shadow:0 1px 2px #00000014,inset 0 0 0 2px #0003}.cell.can-stay{box-shadow:0 1px 2px #00000014,inset 0 0 0 3px #e67e22e6}.cell.selected,.cell.midi-held:not(.success-tone){background:#f28c28;color:#fff;box-shadow:0 7px 18px #f28c2847,inset 0 0 0 1px #ffffff38}.cell.voicing-hint{box-shadow:0 1px 2px #00000014,inset 0 0 0 2px #f28c28a6}.cell.source-guide,.cell.moved-guide,.cell.final-guide{background:#f28c28;color:#fff;box-shadow:0 10px 24px #f28c2847,inset 0 0 0 1px #ffffff38}.cell.source-guide.selected,.cell.moved-guide.selected,.cell.final-guide.selected{background:#f28c28;color:#fff}.cell.locked{cursor:default}button:disabled{opacity:.36;cursor:not-allowed}.step-row{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:0;margin-bottom:8px;overflow-x:auto}.step-line{display:flex;align-items:center;gap:12px}.step-text{font-size:14px;font-weight:650;color:#1b1b1f;white-space:nowrap}.step-row.step-good .step-text{color:#14532d}.step-row.step-okay .step-text{color:#713f00}.step-row.step-bad .step-text{color:#7f1d1d}.chord-line{display:flex;align-items:baseline;gap:14px}.chord-unit{display:flex;align-items:baseline;gap:6px}.chord-unit strong{font-size:16px;font-weight:800;letter-spacing:-.04em;color:#1b1b1f}.chord-unit-name{font-size:12px;color:#74747c}.chord-unit-notes{font-size:13px;font-weight:700;color:#1b1b1f;letter-spacing:-.01em}.chord-sep{font-size:14px;color:#74747c;font-weight:600}.hint{margin-top:16px;display:flex;gap:8px;align-items:center;color:#7b7b82;font-size:13px}@media (max-width: 900px){body{min-width:unset}.app-shell{padding:16px 10px}.panel{padding:18px 9px}.controls{grid-template-columns:1fr}.current-card{display:block}.chord-tones{margin-top:18px;white-space:normal}}.controls.key-controls{grid-template-columns:150px 1fr 42px;align-items:end;gap:12px;margin-top:46px}.prog-group{display:flex;align-items:stretch;margin-top:7px;height:42px;border-radius:14px;border:1px solid rgba(0,0,0,.09);background:#f7f7f8e6;overflow:hidden}.prog-group input{flex:1;min-width:0;height:100%;margin-top:0;border:none;border-radius:0;background:transparent}.prog-dice-btn{width:42px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-left:1px solid rgba(0,0,0,.06);color:#74747c;cursor:pointer;transition:background .12s ease,color .12s ease}.prog-dice-btn:hover{background:#0000000a;color:#1b1b1f}.mode-row{display:flex;justify-content:center;padding:0 40px;margin-top:6px;margin-bottom:12px}.ctrl-mode{width:160px}.step-row.mode-play .flow-step,.step-row.mode-play .step-line{transition:none!important;animation:none!important}.icon-button{width:42px;height:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(0,0,0,.09);border-radius:12px;color:#74747c;cursor:pointer;transition:background .12s ease,color .12s ease}.icon-button:hover{background:#0000000a;color:#1b1b1f}.current-card{display:none}@media (max-width: 900px){.github-link-label{display:none}.grid{grid-template-columns:repeat(8,36px)}.controls.key-controls{grid-template-columns:1fr 1.4fr 42px;grid-template-areas:"key prog sett";gap:10px}.ctrl-settings{grid-area:sett}.ctrl-key{grid-area:key}.ctrl-prog{grid-area:prog}.cell{width:36px;height:36px;border-radius:10px}}@keyframes success-flash{0%{background:#4ade80;box-shadow:0 10px 24px #4ade8059,inset 0 0 0 1px #ffffff38}60%{background:#2d7a43;box-shadow:0 10px 24px #2d7a434d,inset 0 0 0 1px #ffffff38}to{background:#2d7a43;box-shadow:0 10px 24px #2d7a434d,inset 0 0 0 1px #ffffff38}}.cell.success-tone,.cell.success-tone.selected,.cell.success-tone.moved-guide,.cell.success-tone.final-guide{color:#fff!important;background:#2d7a43!important;animation:success-flash .6s ease forwards}@keyframes pulse-correct{0%{transform:scale(1)}40%{transform:scale(1.06);box-shadow:0 0 0 4px #2d7a4340,0 6px 20px #0000002e}to{transform:scale(1)}}@keyframes shake-wrong{0%,to{transform:translate(0)}20%{transform:translate(-4px)}60%{transform:translate(4px)}80%{transform:translate(-2px)}}.step-row.step-good~.grid-outer .cell.selected,.step-row.step-good~.grid-outer .cell.midi-held,.step-row.step-okay~.grid-outer .cell.selected,.step-row.step-okay~.grid-outer .cell.midi-held,.step-row.step-good~.piano-outer .piano-key.selected,.step-row.step-good~.piano-outer .piano-key.midi-held,.step-row.step-okay~.piano-outer .piano-key.selected,.step-row.step-okay~.piano-outer .piano-key.midi-held{animation:pulse-correct .5s ease forwards}.step-row.step-bad~.grid-outer .cell.selected,.step-row.step-bad~.grid-outer .cell.midi-held,.step-row.step-bad~.piano-outer .piano-key.selected,.step-row.step-bad~.piano-outer .piano-key.midi-held{animation:shake-wrong .35s ease forwards}.seg-control{position:relative;display:flex;background:#f7f7f8e6;border:1px solid rgba(0,0,0,.09);border-radius:14px;padding:3px;gap:3px;height:42px;margin-top:7px;box-sizing:border-box;width:100%}.seg-control:before{content:"";position:absolute;top:3px;left:3px;width:calc((100% - 9px)/2);height:calc(100% - 6px);background:#111;border-radius:10px;transition:transform .18s cubic-bezier(.4,0,.2,1);transform:translate(calc(var(--seg-x, 0) * (100% + 3px)));pointer-events:none}.seg-option{position:relative;z-index:1;flex:1;height:100%;border:none;border-radius:10px;background:transparent;color:#74747c;font-size:12px;font-weight:750;cursor:pointer;transition:color .18s}.seg-option.active{color:#fff}.piano-outer{overflow-x:auto;margin-bottom:14px}.piano-range-label{text-align:center;font-size:11px;color:#8b8b93;margin:6px 0 0;letter-spacing:.06em;font-weight:600}.piano-keyboard{position:relative;display:flex;height:130px;width:max-content;margin:0 auto;-webkit-user-select:none;user-select:none}.piano-key.white{width:38px;height:130px;background:#fffffff0;border:1px solid rgba(0,0,0,.09);border-radius:0 0 10px 10px;box-shadow:0 1px 3px #00000014;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;cursor:pointer;z-index:1;position:relative;font-size:9px;color:#74747c;font-weight:700}.piano-key.black{width:24px;height:80px;background:#1b1b1f;border-radius:0 0 6px 6px;position:absolute;left:calc((var(--white-idx) + 1) * 38px - 12px);top:0;z-index:2;cursor:pointer}.piano-key.white.selected,.piano-key.white.midi-held{background:#f28c28;color:#fff;box-shadow:0 4px 12px #f28c2859}.piano-key.black.selected,.piano-key.black.midi-held{background:#c06a10}.piano-key.white.voicing-hint:not(.selected):not(.midi-held):not(.moved-guide):not(.success-tone){box-shadow:0 1px 3px #00000014,inset 0 0 0 2px #f28c28bf}.piano-key.black.voicing-hint:not(.selected):not(.midi-held):not(.moved-guide):not(.success-tone){box-shadow:inset 0 0 0 2px #f28c28d9}.piano-key.white.moved-guide,.piano-key.white.final-guide{background:#f28c28;color:#fff}.piano-key.black.moved-guide,.piano-key.black.final-guide{background:#c06a10}.piano-key.success-tone,.piano-key.success-tone.selected,.piano-key.success-tone.midi-held,.piano-key.success-tone.moved-guide,.piano-key.success-tone.final-guide{background:#2d7a43!important;color:#fff!important;animation:success-flash .5s ease forwards}.drawer-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;pointer-events:none}.drawer-root.open{pointer-events:auto}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#14141852;opacity:0;transition:opacity .2s ease}.drawer-root.open .drawer-overlay{opacity:1}.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(380px,92vw);background:#fff;box-shadow:-12px 0 40px #0000002e;display:flex;flex-direction:column;transform:translate(100%);transition:transform .24s cubic-bezier(.32,.72,.24,1)}.drawer-root.open .drawer-panel{transform:translate(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid rgba(0,0,0,.06)}.drawer-title{margin:0;font-size:16px;font-weight:750;letter-spacing:-.02em;color:#1b1b1f}.drawer-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:transparent;color:#74747c;border-radius:8px;cursor:pointer}.drawer-close:hover{color:#1b1b1f;background:#0000000a}.drawer-body{flex:1;overflow-y:auto;padding:18px 20px 28px;display:flex;flex-direction:column;gap:22px}.drawer-section{display:flex;flex-direction:column;gap:10px}.drawer-section-title{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8b8b93;margin-bottom:2px}.drawer-field{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:12px;font-size:12px;font-weight:650;color:#74747c}.drawer-field>span{font-size:13px;font-weight:600;color:#1b1b1f}.drawer-field select{margin-top:0;height:38px;font-size:13px}.drawer-row{display:flex;align-items:flex-end;gap:10px}.drawer-row-device{flex:1;min-width:0}.drawer-row-channel{width:64px;flex-shrink:0}.learn-button{flex-shrink:0;width:56px;height:42px;border-radius:14px;background:#f7f7f8e6;border:1px solid rgba(0,0,0,.09);color:#1b1b1f;font-size:12px;font-weight:600;cursor:pointer;transition:background .1s,color .1s,transform 60ms;-webkit-user-select:none;user-select:none}.learn-button:hover:not(:disabled){background:#e8e8ea}.learn-button:active:not(:disabled){transform:scale(.97)}.learn-button:disabled{opacity:.4;cursor:not-allowed}.learn-button.active{background:#1b1b1f;color:#fff;animation:learn-pulse 1s ease-in-out infinite}@keyframes learn-pulse{0%,to{opacity:1}50%{opacity:.55}}@media (max-width: 900px){.drawer-panel{top:auto;right:0;bottom:0;left:0;width:100%;height:auto;max-height:88vh;border-radius:18px 18px 0 0;transform:translateY(100%);box-shadow:0 -12px 40px #0000002e;padding-bottom:env(safe-area-inset-bottom,0px)}.drawer-root.open .drawer-panel{transform:translateY(0)}.drawer-panel:before{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:36px;height:4px;border-radius:2px;background:#0000002e}.drawer-header{padding:18px 20px 10px}.drawer-body{padding:12px 20px 18px;gap:16px;flex:0 1 auto}.drawer-section{gap:8px}}