@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap";:root{font-family:Inter,sans-serif;line-height:1.6;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--white: #ffffff;--off-white: #fafafa;--light-gray: #f5f5f5;--gray: #e5e5e5;--dark-gray: #737373;--black: #0a0a0a;--accent: #6366f1;--accent-light: #818cf8;--accent-dark: #4338ca;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--yellow: var(--warning);--red: var(--danger);--blue: var(--accent);--darkblue: var(--accent-dark);--radius: 8px;--radius-lg: 16px;--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--mobile-width: 768px;background-color:var(--off-white);color:var(--black)}.fascinate-regular{font-family:Fascinate,system-ui;font-weight:400;font-style:normal}body,body>div{margin:0;padding:0;box-sizing:border-box;min-height:100vh;width:100%;display:flex;flex-direction:column}:is(body,body>div) main{flex:1}header{background-color:var(--white);border-bottom:1px solid var(--gray);box-shadow:var(--shadow);position:sticky;top:0;z-index:100}.header-content{position:relative}.header-content h1{font-family:Inter,sans-serif;font-weight:900;font-size:4rem;margin:0;line-height:1.1;text-align:center;padding:2rem 0 1rem;letter-spacing:-.05em;background:linear-gradient(135deg,var(--accent),var(--accent-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.mobile-menu-toggle{display:none;position:absolute;top:50%;right:1rem;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:.5rem;z-index:101;flex-direction:column;justify-content:space-around;width:2rem;height:2rem}.hamburger-line{width:100%;height:3px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));border-radius:2px;transition:all .3s ease;transform-origin:1px}.main-nav{border-top:1px solid var(--gray);background-color:var(--light-gray)}.main-nav ul{display:flex;justify-content:center;list-style:none;padding:0;margin:0;gap:0;font-size:1rem;font-weight:500}.main-nav ul a{display:inline-block;padding:1rem 2rem;color:var(--dark-gray);text-decoration:none;transition:all .2s ease;border-bottom:3px solid transparent}.main-nav ul a:hover{color:var(--accent);background-color:var(--white);border-bottom-color:var(--accent)}main{background-color:var(--off-white);min-height:calc(100vh - 200px);padding:3rem 1rem;display:flex;justify-content:center;align-items:center}main #intro{padding:3rem;max-width:28rem;border:1px solid var(--gray);border-radius:var(--radius-lg);background-color:var(--white);color:var(--black);box-shadow:var(--shadow-lg);text-align:center}main #intro img{border-radius:50%;border:1px solid var(--gray);max-width:50%;aspect-ratio:1 / 1;margin-bottom:2rem}main #intro h2{font-family:Inter,sans-serif;font-weight:700;font-size:2.5rem;margin-bottom:1.5rem;margin-top:0;color:var(--accent);line-height:1.2}main #intro p{font-size:1.125rem;margin-bottom:0;color:var(--dark-gray);line-height:1.6}main #guitar-head-container{max-width:20rem;display:grid;grid-template-columns:5rem 5rem 5rem}main #guitar-head-container #guitar-body{grid-column:span 3;height:10rem}main #guitar-head-container button{background-color:var(--black);border:5px solid var(--yellow);color:var(--white);width:2rem;height:2rem;border:none;border-radius:40%;cursor:pointer;margin:0 1.5rem}main #guitar-head-container button:hover{border:5px solid var(--red)}main #guitar-head-container button:active{border:5px solid var(--red)}@media (max-width: 830px){.header-content h1{font-size:2.5rem;padding:1.5rem 0 .5rem}.mobile-menu-toggle{display:flex}.main-nav{position:absolute;top:100%;left:0;width:100%;background-color:var(--white);border-top:1px solid var(--gray);box-shadow:var(--shadow-lg);transform:translateY(-100%);opacity:0;visibility:hidden;transition:all .3s ease;z-index:99}.main-nav.mobile-open{transform:translateY(0);opacity:1;visibility:visible}.main-nav ul{flex-direction:column;padding:1rem 0}.main-nav ul li{width:100%;border-bottom:1px solid var(--light-gray)}.main-nav ul li:last-child{border-bottom:none}.main-nav ul a{display:block;padding:1rem 2rem;border-bottom:none;border-left:4px solid transparent;width:100%;box-sizing:border-box}.main-nav ul a:hover{border-left-color:var(--accent);border-bottom:none;background-color:var(--light-gray)}.mobile-open .hamburger-line:first-child{transform:rotate(45deg)}.mobile-open .hamburger-line:nth-child(2){opacity:0}.mobile-open .hamburger-line:last-child{transform:rotate(-45deg)}main{flex-direction:column;align-items:center;padding:2rem 1rem;gap:2rem}main #intro{max-width:100%;padding:2rem}main #intro h2{font-size:2rem;margin:1rem 0}main #intro p{font-size:1rem}main #guitar-head-container{transform:rotate(90deg)}}footer{background-color:var(--light-gray);color:var(--dark-gray);padding:2rem;text-align:center;border-top:1px solid var(--gray);margin-top:auto}footer a{margin:0;font-size:.875rem;color:var(--dark-gray);text-decoration:none;transition:color .2s ease}footer a:hover{color:var(--accent)}#chord-content{padding:3rem 2rem;max-width:100rem;margin:0 auto;background-color:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--gray)}#chord-content h2{font-family:Inter,sans-serif;font-weight:800;font-size:3.5rem;margin-bottom:1rem;margin-top:0;text-align:center;color:var(--accent);letter-spacing:-.02em;line-height:1.1}#chord-content>p{font-size:1.25rem;text-align:center;margin-bottom:4rem;color:var(--dark-gray);max-width:600px;margin-left:auto;margin-right:auto;line-height:1.6}.chord-section{margin-bottom:5rem}.chord-section:last-child{margin-bottom:0}.root-heading{font-family:Inter,sans-serif;font-weight:700;font-size:2.5rem;color:var(--accent);text-align:center;margin:0 0 3rem;padding:1.5rem;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);letter-spacing:-.01em;position:relative}.root-heading:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 100%);border-radius:var(--radius-lg);pointer-events:none}.chord-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:3rem;justify-items:center}.chord-card{background-color:var(--white);color:var(--black);border:1px solid var(--gray);border-radius:var(--radius-lg);padding:2rem;text-align:center;width:100%;max-width:320px;box-shadow:var(--shadow);transition:all .2s ease;position:relative;overflow:hidden}.chord-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--accent-light)}.chord-card h3,.chord-card h4{font-family:JetBrains Mono,monospace;font-weight:700;font-size:2rem;margin:0 0 2rem;color:var(--accent);letter-spacing:-.02em}.chord-diagram{display:flex;flex-direction:column;align-items:center;gap:.5rem}.string-names{display:flex;justify-content:space-between;width:200px;margin-bottom:.5rem}.string-name{font-weight:700;font-size:1rem;color:var(--darkblue);width:30px;text-align:center}.nut{width:200px;height:6px;background-color:var(--black);margin-bottom:2px;border-radius:2px}.start-fret{font-weight:700;font-size:.9rem;color:var(--darkblue);align-self:flex-start;margin-left:-25px;margin-bottom:5px}.fretboard-grid{position:relative;width:220px;height:170px;background:linear-gradient(135deg,#f9f7f4,#f0ede8);border:2px solid var(--gray);border-radius:var(--radius);box-shadow:inset 0 2px 4px #0000000d,var(--shadow)}.guitar-string{position:absolute;background:linear-gradient(to bottom,#4a4a4a,#2a2a2a);width:2px;height:100%;top:0;border-radius:1px;box-shadow:0 0 2px #0000004d}.guitar-string:nth-child(1){left:0%}.guitar-string:nth-child(2){left:20%}.guitar-string:nth-child(3){left:40%}.guitar-string:nth-child(4){left:60%}.guitar-string:nth-child(5){left:80%}.guitar-string:nth-child(6){left:100%}.fret-line{position:absolute;background:linear-gradient(to right,silver,#a0a0a0,silver);width:100%;height:2px;left:0;border-radius:1px;box-shadow:0 1px 2px #0000001a}.fret-line:nth-child(7){top:20%}.fret-line:nth-child(8){top:40%}.fret-line:nth-child(9){top:60%}.fret-line:nth-child(10){top:80%}.mute-marker,.open-marker{position:absolute;top:-28px;transform:translate(-50%);font-size:1.4rem;font-weight:700;font-family:JetBrains Mono,monospace;color:var(--dark-gray);width:24px;height:24px;text-align:center;display:flex;align-items:center;justify-content:center;background-color:var(--light-gray);border:1px solid var(--gray);border-radius:50%}.finger-dot{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));border:2px solid var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}.finger-number{font-size:.875rem;font-weight:600;color:var(--white);font-family:JetBrains Mono,monospace}@media (max-width: 830px){#chord-content{padding:1rem}#chord-content h2{font-size:2.5rem}#chord-content>p{font-size:1.1rem;margin-bottom:2rem}.chord-section{margin-bottom:2rem}.root-heading{font-size:1.8rem;padding:.8rem;margin-bottom:1.5rem}.chord-grid{grid-template-columns:1fr;gap:1.5rem}.chord-card{max-width:none;padding:1rem}.chord-card h3,.chord-card h4{font-size:2rem;margin-bottom:1rem}.string-names{width:180px}.string-name{font-size:.9rem}.fretboard-grid{width:180px;height:144px}.finger-dot{width:20px;height:20px}.finger-number{font-size:.8rem}.mute-marker,.open-marker{font-size:1.3rem;top:-22px}.start-fret{font-size:.8rem;margin-left:-20px}}#tuner-content{padding:3rem 2rem;max-width:50rem;margin:0 auto;background-color:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--gray)}#tuner-content h2{font-family:Inter,sans-serif;font-weight:800;font-size:3.5rem;margin-bottom:1rem;margin-top:0;text-align:center;color:var(--accent);letter-spacing:-.02em;line-height:1.1}#tuner-content>p{font-size:1.25rem;text-align:center;margin-bottom:3rem;color:var(--dark-gray);line-height:1.6}.tuner-controls{display:flex;justify-content:center;margin-bottom:2rem}.tuner-button{font-family:Inter,sans-serif;font-weight:600;font-size:1.2rem;padding:1rem 2rem;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:var(--white);border:none;border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow);transition:all .2s ease;min-width:160px}.tuner-button:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.tuner-button:active{transform:translateY(0)}.tuner-button.listening{background:linear-gradient(135deg,#ef4444,#dc2626);animation:pulse 2s ease-in-out infinite alternate}@keyframes pulse{0%{box-shadow:var(--shadow),0 0 #ef444466}to{box-shadow:var(--shadow-lg),0 0 0 10px #ef444400}}.tuner-display{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem;background-color:var(--off-white);border-radius:var(--radius-lg);border:1px solid var(--gray);margin-bottom:3rem}.tuning-meter{border:1px solid var(--gray);border-radius:var(--radius);box-shadow:var(--shadow);background-color:var(--white)}.note-info{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.current-note{display:flex;align-items:baseline;gap:1rem}.current-note .note-label{font-size:1.2rem;color:var(--dark-gray);font-weight:500}.current-note .note-value{font-family:JetBrains Mono,monospace;font-size:3rem;font-weight:700;color:var(--accent);letter-spacing:-.02em}.string-info .string-label{font-size:1.1rem;color:var(--dark-gray);font-weight:500}.frequency-info{display:flex;align-items:baseline;gap:.5rem}.frequency-info .freq-label{font-size:1rem;color:var(--dark-gray);font-weight:500}.frequency-info .freq-value{font-family:JetBrains Mono,monospace;font-size:1.2rem;font-weight:600;color:var(--accent)}.tuning-status{font-size:1.5rem;font-weight:700;margin-top:1rem}.tuning-status .cents-off{font-size:1rem;font-weight:500;margin-left:.5rem;opacity:.8}.string-reference h3{font-family:Inter,sans-serif;font-weight:700;font-size:2rem;color:var(--accent);text-align:center;margin:0 0 2rem}.string-list{display:grid;grid-template-columns:1fr;gap:1rem}.string-ref-item{display:grid;grid-template-columns:80px 1fr 100px;align-items:center;padding:1rem 1.5rem;background-color:var(--off-white);border:1px solid var(--gray);border-radius:var(--radius);transition:all .2s ease}.string-ref-item:hover{background-color:var(--white);border-color:var(--accent-light)}.string-ref-item .string-note{font-family:JetBrains Mono,monospace;font-weight:700;font-size:1.5rem;color:var(--accent)}.string-ref-item .string-name{font-weight:500;color:var(--dark-gray)}.string-ref-item .string-freq{font-family:JetBrains Mono,monospace;font-size:.9rem;color:var(--dark-gray);text-align:right}@media (max-width: 830px){#tuner-content{padding:1.5rem 1rem}#tuner-content h2{font-size:2.5rem}#tuner-content>p{font-size:1.1rem;margin-bottom:2rem}.tuner-display{padding:1.5rem 1rem}.tuning-meter{width:100%;max-width:350px;height:auto}.current-note{flex-direction:column;gap:.5rem}.current-note .note-value{font-size:2.5rem}.string-ref-item{grid-template-columns:60px 1fr 80px;padding:.75rem 1rem}.string-ref-item .string-note{font-size:1.2rem}.string-ref-item .string-freq{font-size:.8rem}}#metronome-content{padding:3rem 2rem;max-width:50rem;margin:0 auto;background-color:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--gray)}#metronome-content h2{font-family:Inter,sans-serif;font-weight:800;font-size:3.5rem;margin-bottom:1rem;margin-top:0;text-align:center;color:var(--accent);letter-spacing:-.02em;line-height:1.1}#metronome-content>p{font-size:1.25rem;text-align:center;margin-bottom:3rem;color:var(--dark-gray);line-height:1.6}.beat-display{display:flex;justify-content:center;margin-bottom:3rem}.beat-circles{display:flex;gap:1rem;align-items:center}.beat-circle{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;font-weight:700;font-size:1.5rem;background-color:var(--light-gray);border:2px solid var(--gray);color:var(--dark-gray);transition:all .1s ease}.beat-circle.active{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:var(--white);border-color:var(--accent);transform:scale(1.1);box-shadow:var(--shadow-lg)}.beat-circle.accent.active{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#ef4444}.metronome-controls{display:flex;justify-content:center;margin-bottom:3rem}.metronome-button{font-family:Inter,sans-serif;font-weight:600;font-size:1.5rem;padding:1.5rem 3rem;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:var(--white);border:none;border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow);transition:all .2s ease;min-width:140px}.metronome-button:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.metronome-button:active{transform:translateY(0)}.metronome-button.playing{background:linear-gradient(135deg,#ef4444,#dc2626);animation:pulse-metronome 1s ease-in-out infinite alternate}@keyframes pulse-metronome{0%{box-shadow:var(--shadow),0 0 #ef444466}to{box-shadow:var(--shadow-lg),0 0 0 8px #ef444400}}.bpm-control{margin-bottom:2rem;text-align:center}.bpm-label{display:block;font-size:1.2rem;font-weight:600;color:var(--dark-gray);margin-bottom:1rem}.bpm-input-group{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;justify-content:center}.bpm-slider{width:300px;height:8px;background:var(--light-gray);border-radius:4px;outline:none;cursor:pointer}.bpm-slider::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));border-radius:50%;cursor:pointer;box-shadow:var(--shadow)}.bpm-slider::-moz-range-thumb{width:24px;height:24px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));border-radius:50%;cursor:pointer;border:none;box-shadow:var(--shadow)}.bpm-input{width:80px;padding:.5rem;font-family:JetBrains Mono,monospace;font-size:1.2rem;font-weight:600;text-align:center;border:2px solid var(--gray);border-radius:var(--radius);background-color:var(--white);color:var(--accent)}.bpm-input:focus{outline:none;border-color:var(--accent)}.bpm-presets{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.preset-button{padding:.5rem 1rem;font-family:JetBrains Mono,monospace;font-weight:600;background-color:var(--light-gray);border:1px solid var(--gray);border-radius:var(--radius);cursor:pointer;transition:all .2s ease;color:var(--dark-gray)}.preset-button:hover{background-color:var(--accent-light);border-color:var(--accent);color:var(--accent)}.time-signature-control{margin-bottom:2rem;text-align:center}.time-sig-label{display:block;font-size:1.2rem;font-weight:600;color:var(--dark-gray);margin-bottom:1rem}.time-sig-buttons{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.time-sig-button{padding:.75rem 1.5rem;font-family:JetBrains Mono,monospace;font-weight:700;font-size:1.1rem;background-color:var(--light-gray);border:2px solid var(--gray);border-radius:var(--radius);cursor:pointer;transition:all .2s ease;color:var(--dark-gray)}.time-sig-button:hover{background-color:var(--accent-light);border-color:var(--accent);color:var(--accent)}.time-sig-button.active{background:linear-gradient(135deg,var(--accent),var(--accent-dark));border-color:var(--accent);color:var(--white)}.tempo-reference{text-align:center}.tempo-reference h3{font-family:Inter,sans-serif;font-weight:700;font-size:2rem;color:var(--accent);margin:0 0 1.5rem}.tempo-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.tempo-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:var(--off-white);border:1px solid var(--gray);border-radius:var(--radius);transition:all .2s ease;cursor:pointer;font-family:inherit;font-size:inherit;width:100%}.tempo-item:hover{background-color:var(--white);border-color:var(--accent-light);transform:translateY(-1px);box-shadow:var(--shadow)}.tempo-item:active{transform:translateY(0);box-shadow:inset var(--shadow)}.tempo-item .tempo-name{font-weight:600;color:var(--accent)}.tempo-item .tempo-range{font-family:JetBrains Mono,monospace;font-size:.9rem;color:var(--dark-gray)}@media (max-width: 830px){#metronome-content{padding:1.5rem 1rem}#metronome-content h2{font-size:2.5rem}#metronome-content>p{font-size:1.1rem;margin-bottom:2rem}.beat-circles{gap:.5rem}.beat-circle{width:50px;height:50px;font-size:1.2rem}.metronome-button{font-size:1.2rem;padding:1.2rem 2rem}.bpm-slider{width:250px}.tempo-list{grid-template-columns:1fr}}.popular-songs{text-align:center;margin-top:3rem}.popular-songs h3{font-family:Inter,sans-serif;font-weight:700;font-size:2rem;color:var(--accent);margin:0 0 1.5rem}.songs-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.song-item{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;background-color:var(--off-white);border:1px solid var(--gray);border-radius:var(--radius);transition:all .2s ease;cursor:pointer;font-family:inherit;font-size:inherit;width:100%;text-align:left}.song-item:hover{background-color:var(--white);border-color:var(--accent-light);transform:translateY(-2px);box-shadow:var(--shadow-md)}.song-item:active{transform:translateY(0);box-shadow:inset var(--shadow)}.song-info{display:flex;flex-direction:column;gap:.3rem;flex:1}.song-name{font-weight:700;font-size:1.1rem;color:var(--accent);line-height:1.2}.song-artist{font-size:.95rem;color:var(--dark-gray);font-style:italic}.song-settings{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem}.song-tempo{font-family:JetBrains Mono,monospace;font-weight:700;font-size:1rem;color:var(--accent)}.song-time{font-family:JetBrains Mono,monospace;font-weight:600;font-size:.9rem;color:var(--dark-gray);background-color:var(--light-gray);padding:.2rem .5rem;border-radius:var(--radius)}@media (max-width: 830px){#metronome-content{padding:1.5rem 1rem}#metronome-content h2{font-size:2.5rem}#metronome-content>p{font-size:1.1rem;margin-bottom:2rem}.beat-circles{gap:.5rem}.beat-circle{width:50px;height:50px;font-size:1.2rem}.metronome-button{font-size:1.2rem;padding:1.2rem 2rem}.bpm-slider{width:250px}.tempo-list,.songs-list{grid-template-columns:1fr}.song-item{padding:1rem}.song-name{font-size:1rem}.song-artist{font-size:.85rem}}#circle-content{padding:3rem 2rem;max-width:70rem;margin:0 auto;background-color:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--gray)}#circle-content h2{font-family:Inter,sans-serif;font-weight:800;font-size:3.5rem;margin-bottom:1rem;margin-top:0;text-align:center;color:var(--accent);letter-spacing:-.02em;line-height:1.1}#circle-content>p{font-size:1.25rem;text-align:center;margin-bottom:3rem;color:var(--dark-gray);line-height:1.6}.circle-container{display:flex;justify-content:center;margin-bottom:3rem}.circle-container svg{max-width:100%;height:auto}.key-circle{transition:all .2s ease}.key-circle:hover{transform:scale(1.1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.key-text{font-family:Inter,sans-serif;-webkit-user-select:none;user-select:none;pointer-events:none}.key-text.minor{font-style:italic}.key-info{background-color:var(--off-white);border:1px solid var(--gray);border-radius:var(--radius-lg);padding:2rem;margin-bottom:3rem}.key-header{text-align:center;margin-bottom:2rem}.key-header h3{font-family:Inter,sans-serif;font-weight:700;font-size:2.5rem;color:var(--accent);margin:0 0 .5rem}.key-meta .accidentals{font-family:JetBrains Mono,monospace;font-size:1rem;color:var(--dark-gray);background-color:var(--light-gray);padding:.3rem .8rem;border-radius:var(--radius)}.scale-notes{margin-bottom:2rem}.scale-notes h4{font-family:Inter,sans-serif;font-weight:600;font-size:1.3rem;color:var(--accent);margin:0 0 1rem}.notes-list{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}.note-item{font-family:JetBrains Mono,monospace;font-weight:700;font-size:1.2rem;padding:.8rem 1rem;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:var(--white);border-radius:var(--radius);min-width:2.5rem;text-align:center;box-shadow:var(--shadow)}.diatonic-chords h4{font-family:Inter,sans-serif;font-weight:600;font-size:1.3rem;color:var(--accent);margin:0 0 1rem}.chords-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem}.chord-item{display:flex;flex-direction:column;align-items:center;padding:1rem;border-radius:var(--radius);border:2px solid;transition:all .2s ease}.chord-item.major{background-color:var(--white);border-color:var(--accent)}.chord-item.minor{background-color:var(--light-gray);border-color:var(--dark-gray)}.chord-item.diminished{background-color:#fef2f2;border-color:#ef4444}.chord-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.chord-item .numeral{font-family:JetBrains Mono,monospace;font-weight:700;font-size:.9rem;margin-bottom:.3rem;color:var(--dark-gray)}.chord-item .chord{font-family:Inter,sans-serif;font-weight:700;font-size:1.3rem;color:var(--accent)}.progressions-section h3{font-family:Inter,sans-serif;font-weight:700;font-size:2rem;color:var(--accent);text-align:center;margin:0 0 2rem}.progressions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.progression-item{background-color:var(--off-white);border:1px solid var(--gray);border-radius:var(--radius-lg);padding:1.5rem;transition:all .2s ease}.progression-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.progression-header{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}.progression-header .progression-name{font-family:JetBrains Mono,monospace;font-weight:700;font-size:1.1rem;color:var(--accent)}.progression-header .progression-desc{font-size:.9rem;color:var(--dark-gray);font-style:italic}.progression-chords{font-family:Inter,sans-serif;font-weight:600;font-size:1.2rem;color:var(--dark-gray);padding:1rem;background-color:var(--white);border-radius:var(--radius);text-align:center;border-left:4px solid var(--accent)}@media (max-width: 830px){#circle-content{padding:1.5rem 1rem}#circle-content h2{font-size:2.5rem}#circle-content>p{font-size:1.1rem;margin-bottom:2rem}.circle-container svg{width:350px;height:350px}.key-info{padding:1.5rem}.key-header h3{font-size:2rem}.notes-list{gap:.3rem}.note-item{font-size:1rem;padding:.6rem .8rem;min-width:2rem}.chords-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.8rem}.chord-item{padding:.8rem}.chord-item .chord{font-size:1.1rem}.progressions-grid{grid-template-columns:1fr;gap:1rem}.progression-item{padding:1rem}.progression-chords{font-size:1rem}}