.progression-room{margin-top:26px}.progression-intro h2{margin:8px 0}.progression-intro p,.progression-draft-note{color:#5c6e60;line-height:1.7;font-size:14px}.progression-generator,.progression-transport{display:flex;flex-wrap:wrap;align-items:end;gap:14px;padding:18px;border:1px solid #d9dfd0;border-radius:14px;background:#eff2e7}.progression-generator label,.progression-card-fields label{display:flex;flex-direction:column;gap:7px;color:#526655;font-size:12px;font-weight:650}.progression-generator select{min-width:145px}.progression-generator label:nth-child(2){flex:1}.progression-generator .button{min-height:43px}.progression-draft-note{font-size:12px}.progression-transport{background:#faf9f2;align-items:center}.progression-transport label{font-size:13px;display:flex;align-items:center;gap:7px}.progression-transport input[type=number]{width:75px;padding:10px;border:1px solid #d6ddce;border-radius:7px;background:#fffef8;color:#183d36}.progression-transport select,.progression-generator select,.progression-card-fields select{max-width:100%;padding:10px;border:1px solid #cdd6c6;border-radius:7px;background:#fffef8;color:#183d36;min-height:43px}.progression-loop{white-space:nowrap}.progression-now{display:flex;align-items:center;gap:22px;margin:20px 0;padding:18px 24px;border-radius:14px;background:#193f36;color:#f5f5e9}.progression-now strong{font-size:30px;min-width:145px}.progression-now span{font-size:14px;line-height:1.7}.progression-list-head{display:flex;justify-content:space-between;gap:20px;align-items:center}.progression-list-head h3{margin:8px 0}.progression-list-head p{font-size:13px;color:#596e5c;line-height:1.7}.progression-list-head>span{font-size:12px;white-space:nowrap}.progression-timeline{display:flex;gap:8px;overflow:auto;padding:7px 2px 15px}.progression-chip{display:flex;flex-direction:column;gap:6px;min-width:95px;padding:13px;border:1px solid #ced8c6;border-radius:9px;background:#f8f8ef;flex-shrink:0}.progression-chip strong{font-size:20px}.progression-chip small{font-size:11px;color:#5f7060}.progression-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.progression-card{border:1px solid #d5ddcc;border-radius:12px;background:#fffef7;padding:17px;min-width:0}.progression-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:15px}.progression-index{background:#e3eadb;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:12px}.progression-card-head>strong{font-size:22px}.progression-roman{font-size:12px;color:#647b66}.progression-bars{font-size:11px;margin-left:auto;color:#647366}.progression-card-fields{display:flex;gap:9px}.progression-card-fields label{min-width:0}.progression-card-fields .progression-type{flex:1}.progression-voicing{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:15px;font-size:12px;line-height:1.7}.progression-voicing strong{font-family:monospace;font-size:15px;letter-spacing:1px}.progression-voicing small{flex-basis:100%;color:#61735f}.progression-chord-notes{font-size:12px;line-height:1.7;color:#4e6858}.progression-card-actions{display:flex;gap:7px;justify-content:flex-end;border-top:1px solid #e7eadf;padding-top:10px}.progression-card-actions .button{font-size:12px;padding:9px 12px;min-height:40px}.progression-active{outline:3px solid #d8914e;outline-offset:-2px;background:#fff5e4}.progression-add{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:18px 0}.progression-add>span{font-size:12px;color:#63745e}.progression-practice-note{padding:18px 22px;border-left:4px solid #9caf91;background:#edf2e6;font-size:13px;line-height:1.8}.progression-practice-note p{margin:6px 0;color:#536953}@media(max-width:900px){.progression-list{grid-template-columns:1fr}.progression-generator{gap:10px}.progression-now{gap:13px}.progression-now strong{min-width:110px;font-size:26px}}@media(max-width:520px){.progression-generator>label,.progression-generator>button{flex:1 1 100%}.progression-generator select{width:100%}.progression-card{padding:13px}.progression-card-fields{flex-wrap:wrap}.progression-card-fields label{flex:1}.progression-card-fields .progression-type{flex:1 1 65%}.progression-card-fields label:last-child{flex:0 1 100px}.progression-now{align-items:start;flex-direction:column;padding:16px}.progression-list-head{display:block}.progression-transport{padding:14px}.progression-transport>label:nth-child(2){flex-basis:100%;flex-wrap:wrap}.progression-transport .button{flex:1}}