*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#333;background:#fafafa}#app{display:flex;flex-direction:column;height:100vh}#app-header{padding:.75rem 1.5rem;border-bottom:1px solid #e0e0e0;background:#fff}#app-header h1{font-size:1.25rem;font-weight:600;color:#222}#content{display:grid;grid-template-columns:1fr 320px;flex:1;min-height:0}#wheel-container{position:relative;background:#fff;overflow:hidden}#wheel-canvas{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#sidebar{border-left:1px solid #e0e0e0;background:#fff;overflow-y:auto;padding:1.5rem}#sidebar-key-label{font-size:1.1rem;font-weight:600;color:#555;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid #e0e0e0}.genre-section{margin-bottom:.25rem}.genre-section+.genre-section{margin-top:.75rem}.genre-heading{display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#888;padding:.25rem 0;margin-bottom:.5rem}.genre-heading:hover{color:#555}.genre-chevron{font-size:.75rem;color:#bbb;transition:transform .15s ease;transform:rotate(180deg)}.genre-section.collapsed .genre-chevron{transform:rotate(0)}.genre-section.collapsed .genre-cards{display:none}.progression-card{background:#f8f8f8;border-radius:6px;padding:.6rem .75rem;margin-bottom:.5rem}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.2rem}.progression-name{font-size:.85rem;font-weight:600;color:#333}.fav-btn{background:none;border:none;cursor:pointer;font-size:1rem;color:#ddd;padding:0;line-height:1;flex-shrink:0;transition:color .1s}.fav-btn:hover,.fav-btn.active{color:#f5a623}.favorites-empty{font-size:.8rem;color:#bbb;font-style:italic;padding:.25rem 0 .5rem}.progression-numerals{font-size:.8rem;font-family:SF Mono,Cascadia Code,Consolas,monospace;color:#666}.progression-chords{font-size:.8rem;color:#4a7bbd;margin-top:.15rem}@media(max-width:768px){#content{grid-template-columns:1fr;grid-template-rows:1fr auto}#sidebar{border-left:none;border-top:1px solid #e0e0e0;max-height:40vh}}