.compact-root{max-width:400px;margin:0 auto;padding:6px 6px 10px;font-family:system-ui,-apple-system,sans-serif;user-select:none;-webkit-user-select:none;box-sizing:border-box;background:#0a0a0a;color:#e5e7eb;border-radius:8px;display:flex;flex-direction:column;gap:2px}.compact-wheel{display:block;touch-action:pan-y}.compact-spaces{display:flex;gap:3px}.compact-spaces button{flex:1;padding:3px 0;border-radius:4px;cursor:pointer;font-size:10px;font-weight:500;text-align:center;background:transparent;border:1.5px solid #272727;color:#6b7280;transition:color .1s,border-color .1s}.compact-spaces button.active{background:#1a1a1a;font-weight:700}.compact-spaces button.active{border-color:var(--space-color);color:var(--space-color)}.compact-kbd-row{display:flex;gap:4px;align-items:flex-start}.compact-kbd-wrap{flex:1;min-width:0}.compact-kbd-svg{display:block;width:100%;height:auto;border-radius:3px;border:1px solid #374151;background:#0f172a}.compact-guitar-tab{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px}.compact-chord-svg{width:80px;height:96px;background:#111827;border:1px solid #374151;border-radius:6px}.compact-chord-label{font-size:10px;color:#9ca3af;font-weight:600;text-align:center}.compact-prog{display:flex;align-items:flex-start;gap:4px}.compact-prog-chords{display:flex;align-items:center;gap:4px 4px;flex-wrap:wrap;flex:1;min-width:0}.compact-play-btn{width:28px;height:24px;border-radius:3px;color:#fff;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;margin-top:1px}.compact-play-btn.stopped{border:1.5px solid #F08640;background:#2a1e1a}.compact-play-btn.pulse{animation:pulse-orange 1.2s ease-in-out infinite}@keyframes pulse-orange{0%,to{box-shadow:0 0 6px 3px #f08640b3;background:#2a1e1a}50%{box-shadow:0 0 20px 10px #f08640cc;background:#4a2a10}}.compact-play-btn.playing{border:1.5px solid #F08640;background:#3d2510}.compact-chord-pill{padding:2px 5px;border-radius:3px;font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap}.compact-chord-pill .chord-name{display:block;font-size:9px;opacity:.7}.compact-chord-pill .chord-roman{display:none}.compact-sep{color:#4b5563;font-size:8px}.compact-root.ultracompact{max-width:none;background:transparent;padding:2px;border-radius:0;gap:0}.compact-root.chordle{max-width:460px;padding:10px;gap:8px}.compact-root.chordle .chordle-controls{order:1}.compact-root.chordle .chordle-pills{order:2}.compact-root.chordle .compact-kbd-row{order:3}.chordle-pills{display:flex;align-items:stretch;justify-content:center;gap:8px}.chordle-pill{flex:1;max-width:100px;padding:8px 6px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;white-space:nowrap}.chordle-pill .chord-name{display:block;font-size:18px;font-weight:700;opacity:1;line-height:1.2}.chordle-pill .chord-roman{display:block;font-size:10px;opacity:.55;margin-top:2px}.chordle-pills .compact-sep{display:none}.chordle-controls{display:flex;align-items:center;gap:10px;justify-content:flex-start}.chordle-play{height:42px;padding:0 18px;border-radius:6px;font-size:16px}.chordle-key{font-weight:600;font-size:13px;color:#60a5fa}.chordle-roll{background:#1a1a2e;border:1.5px solid #374151;color:#e5e7eb;padding:10px 20px;border-radius:6px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}.chordle-roll:hover{border-color:#60a5fa;background:#1e293b}.compact-root.chordle .compact-chord-svg{width:100px;height:120px}.compact-root.chordle .compact-chord-label{font-size:11px}