body{margin:0;padding:0}:root{--primary: #3a86ff;--bg-dark: #121212;--card-bg: #1e1e1e;--text-main: #ffffff;--text-dim: #b0b0b0;--accent: #a2d2ff}body{margin:0;padding:0;background-color:var(--bg-dark);color:var(--text-main);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-image:radial-gradient(circle at 20% 30%,rgba(58,134,255,.05) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(162,210,255,.05) 0%,transparent 40%);min-height:100vh}.app-container{max-width:1000px;margin:0 auto;padding:40px 20px;display:flex;flex-direction:column;gap:30px}header{text-align:center}header h1{font-size:2.5rem;margin-bottom:8px;background:linear-gradient(135deg,#fff,#a2d2ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-1px}header p{color:var(--text-dim);font-weight:300;letter-spacing:2px;text-transform:uppercase;font-size:.9rem}.display-panel{display:flex;justify-content:center;gap:40px;background:var(--card-bg);padding:20px;border-radius:12px;box-shadow:0 4px 20px #0000004d;border:1px solid rgba(255,255,255,.05)}.status-item{display:flex;flex-direction:column;align-items:center}.status-item .label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;margin-bottom:4px}.status-item .value{font-size:1.5rem;font-weight:600}.status-item .value.highlight{color:var(--primary);text-shadow:0 0 10px rgba(58,134,255,.5)}.controls{display:flex;justify-content:center;margin:20px 0}.play-button{background:linear-gradient(135deg,#3a86ff,#2a6fdf);color:#fff;border:none;padding:16px 60px;font-size:1.2rem;font-weight:700;border-radius:50px;cursor:pointer;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 20px #3a86ff4d;letter-spacing:2px}.play-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 15px 25px #3a86ff66}.play-button:active:not(:disabled){transform:translateY(1px)}.play-button.playing{background:linear-gradient(135deg,#ff4d4d,#d93636);box-shadow:0 10px 20px #ff4d4d4d}.play-button:disabled{background:#444;cursor:not-allowed;box-shadow:none;color:#888}.progression-guide{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:15px;margin-top:20px}.section-guide{background:#ffffff08;padding:15px;border-radius:8px;border:1px solid rgba(255,255,255,.05);transition:all .3s}.section-guide.active{background:#3a86ff1a;border-color:#3a86ff4d;transform:scale(1.02)}.section-guide h3{margin:0 0 10px;font-size:.9rem;color:var(--text-dim)}.chords-list{display:flex;flex-wrap:wrap;gap:8px}.chord-tag{background:#0003;padding:4px 10px;border-radius:4px;font-size:.85rem;color:var(--text-dim);border:1px solid rgba(255,255,255,.05)}.chord-tag.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 0 8px #3a86ff80}footer{text-align:center;color:var(--text-dim);font-size:.8rem;margin-top:40px;opacity:.5}@media(max-width:600px){header h1{font-size:1.8rem}.display-panel{gap:20px}}