.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#fff;border-bottom:1px solid var(--border-light);position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeSlideDown .8s ease-out}.header-nav{display:flex;gap:1.5rem;align-items:center}.header-link{font-family:DM Sans,sans-serif;font-size:1rem;color:var(--primary);text-decoration:none;font-weight:500;transition:color .2s}.header-link:hover{color:var(--primary-dark)}.header-tool-btn{background:none;color:var(--primary);padding:0;border-radius:0;font-weight:500;box-shadow:none;border:none;transition:color .2s}.header-tool-btn:hover{color:var(--primary-dark);background:none}@keyframes fadeSlideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.logo{display:flex;align-items:center;flex:0 0 auto}.logo-icon{height:40px;width:auto;transition:transform .3s ease}.logo-icon:hover{transform:scale(1.05)}.page-title{font-family:DM Sans,sans-serif;font-size:1.5rem;font-weight:700;color:var(--charcoal);letter-spacing:-.01em;margin:0;line-height:1.2;position:absolute;left:50%;transform:translate(-50%)}.header-spacer{flex:0 0 auto;width:40px}.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;width:38px;height:38px;background:none;border:none;cursor:pointer;z-index:200}.hamburger .bar{width:24px;height:3px;background:var(--primary);margin:3px 0;border-radius:2px;transition:none}.hamburger .bar.open:nth-child(1),.hamburger .bar.open:nth-child(2),.hamburger .bar.open:nth-child(3){transform:none;opacity:1}@media (max-width: 900px){.header-nav{position:absolute;top:100%;right:0;background:#fff;box-shadow:0 8px 24px #6b5b7b1a;border-radius:0 0 12px 12px;flex-direction:column;align-items:flex-end;gap:0;min-width:180px;padding:.5rem 1.2rem .7rem;display:none;z-index:150}.header-nav.open{display:flex}.header-link{padding:.7rem 0;width:100%;text-align:right;border-bottom:1px solid #f0f0f0}.header-link:last-child{border-bottom:none}.hamburger{display:flex}}@media (max-width: 900px){.header{position:relative}}@media (max-width: 768px){.header{padding:.875rem 1rem}.logo-icon{height:36px}.page-title{font-size:1.1rem}.header-spacer{width:36px}}.selector-card{background:#fff;border:2px solid var(--primary);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1rem;box-shadow:0 10px 40px #6b5b7b1a,0 2px 8px #0000000d;transition:all .3s ease}.selector-card:hover{box-shadow:0 15px 50px #6b5b7b26,0 5px 15px #00000014;transform:translateY(-2px)}.selector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:0}.select-group{display:flex;flex-direction:column}label{font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:.5rem}select{font-family:DM Sans,sans-serif;font-size:.95rem;font-weight:500;padding:.65rem 2.5rem .65rem 1rem;border:2px solid var(--primary);border-radius:8px;background:var(--ivory);color:var(--charcoal);cursor:pointer;transition:all .3s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236B5B7B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}select:hover{border-color:var(--primary-dark);background:#fff}select:focus{outline:none;border-color:var(--primary-dark);box-shadow:0 0 0 4px #6b5b7b1a}@media (max-width: 768px){.selector-card{padding:.875rem}.selector-grid{grid-template-columns:1fr;gap:.75rem}}.chord-diagram-popover{position:absolute;bottom:100%;left:50%;top:auto;transform:translate(-50%) translateY(-8px);background:#fff;border-radius:12px;box-shadow:0 8px 32px #6b5b7b2e;padding:.7rem .8rem;min-width:240px;height:220px;z-index:9999;animation:fadeIn .25s ease;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.instrument-tabs{display:flex;gap:.3rem;margin-bottom:.4rem}.instrument-tabs button{background:none;border:none;color:var(--primary);font-weight:600;font-size:.85rem;padding:.2rem .5rem;border-radius:8px;cursor:pointer;transition:background .2s,color .2s}.instrument-tabs button.active,.instrument-tabs button:hover{background:var(--primary);color:#fff}.diagram-area{display:flex;align-items:center;justify-content:center;min-height:80px;min-width:80px;flex:1}.diagram-area img{max-width:120px;max-height:120px;display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(-8px)}}.chord-grid-wrapper{display:flex;flex-direction:column;align-items:center;margin-bottom:.3rem}.chord-grid-title{font-weight:700;margin-bottom:.15rem;font-size:1rem;color:var(--primary-dark)}.chord-grid{display:grid;grid-template-rows:repeat(var(--fret-count, 5),32px);grid-template-columns:repeat(var(--string-count, 6),22px);background:#fff;border-radius:0;box-shadow:none;padding:0;position:relative;margin-bottom:.2rem}.chord-grid:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:22px;pointer-events:none;z-index:2;background:linear-gradient(to top,#fffffff2,#fff0 90%)}.chord-fret-row{display:contents}.chord-note{width:10px;height:10px;border-radius:50%;margin:0;display:flex;align-items:center;justify-content:center;background:none;font-size:.6rem;color:#444;border:none;position:relative;z-index:2}.chord-finger{background:#444;color:#fff;font-weight:700;border:none;font-size:.6rem}.chord-string{position:absolute;top:0;bottom:0;width:2px;background:#444;z-index:1}.chord-fret{position:absolute;left:0;right:0;height:2px;background:#888;z-index:1}.chord-fade-bg,.chord-fade-bg-bottom{display:none!important}.chord-dot,.chord-dot-highlighted{z-index:3}.chord-barre{z-index:4;background:#222;border-radius:7px;height:8px;position:absolute;opacity:1;box-shadow:0 2px 8px #0004;border:none;top:0}.chord-fret-numbers{display:flex;flex-direction:row;justify-content:center;margin-top:2px}.chord-fret-number{width:22px;text-align:center;font-size:.8rem;color:var(--text-muted)}.chord-open,.chord-open-highlighted,.chord-muted{position:absolute;left:50%;transform:translate(-50%);width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem}.chord-open{color:#bbb;transition:color .2s}.chord-open-bass{color:#444;font-weight:700}.chord-muted{color:#bbb;font-weight:700;-webkit-user-select:none;user-select:none;background:none;border:none;box-shadow:none}.chord-dot-highlighted{background:var(--primary)!important;border:2px solid var(--primary-light)!important;box-shadow:0 2px 8px #6b5b7b2e}.chord-open-highlighted{color:var(--primary)!important;background:#f5f2fa!important;font-weight:700!important;border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0;box-shadow:none;border:1.2px solid var(--primary-light);transition:background .2s,color .2s,border .2s;position:absolute;left:50%;transform:translate(-50%)}.chord-basefret-label{position:absolute;left:-28px;top:50%;transform:translateY(-50%);font-size:.95rem;color:var(--primary-dark);font-weight:700;background:#fff;border-radius:6px;padding:2px 7px;box-shadow:0 1px 4px #0001;z-index:20;pointer-events:none;border:1.5px solid var(--primary-light);letter-spacing:.01em}.piano-diagram{position:relative;width:220px;height:60px;margin:0 auto}.piano-key{display:block;position:absolute;background:#fff;border:1px solid #444;border-radius:0 0 3px 3px;z-index:1;box-sizing:border-box;transition:background .2s,border .2s}.piano-key-black{background:#222;border:1px solid #222;border-radius:0 0 2px 2px;height:36px!important;width:12px!important;z-index:2}.piano-key-active{background:#6b5b7b!important;border-color:#6b5b7b!important}.chord-card{background:linear-gradient(135deg,var(--ivory) 0%,white 100%);border:2px solid transparent;border-radius:10px;padding:.875rem;transition:all .3s ease;position:relative;overflow:visible;animation:slideUp .4s ease-out both;z-index:1;width:220px}.chord-card:hover,.chord-card:focus-within{z-index:10}.chord-card:nth-child(1){animation-delay:.05s}.chord-card:nth-child(2){animation-delay:.1s}.chord-card:nth-child(3){animation-delay:.15s}.chord-card:nth-child(4){animation-delay:.2s}.chord-card:nth-child(5){animation-delay:.25s}.chord-card:nth-child(6){animation-delay:.3s}.chord-card:nth-child(7){animation-delay:.35s}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.chord-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--primary);transform:scaleY(0);transition:transform .3s ease}.chord-card:hover{border-color:var(--primary);box-shadow:0 8px 24px #6b5b7b26;transform:translate(4px)}.chord-card:hover:before{transform:scaleY(1)}.chord-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}.degree-badge{font-family:Playfair Display,serif;font-size:.7rem;font-weight:600;color:var(--primary);background:#6b5b7b1a;padding:.2rem .6rem;border-radius:20px;letter-spacing:.05em}.chord-name{font-size:1.3rem;font-weight:700;color:var(--charcoal);line-height:1}.chord-quality{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:.25rem;font-weight:600}.chord-notes{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.65rem;padding-top:.65rem;border-top:1px solid rgba(107,91,123,.2)}.note{background:#fff;color:var(--text-muted);padding:.2rem .4rem;border-radius:5px;font-weight:600;font-size:.75rem;border:1px solid rgba(107,91,123,.3);transition:all .2s ease;cursor:default}.note:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}.function{display:inline-block;margin-top:.35rem;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.2rem .5rem;border-radius:5px}.function.tonica{background:#e3f7e6;color:#176b2c}.function.subdominante{background:#fffbe0;color:#7a6600}.function.dominante{background:#ffe3e0;color:#b80000}.chord-diagram-popover{z-index:9999}@media (max-width: 768px){.chord-card{padding:.75rem}}@media (max-width: 600px){.chord-card{width:100%;min-width:0;min-height:180px}}.harmonic-field-card{background:#fff;border-radius:12px;padding:1.25rem;box-shadow:0 20px 60px #00000014,0 4px 12px #0000000a;animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1)}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.field-title{font-family:Playfair Display,serif;font-size:1.4rem;font-weight:600;color:var(--charcoal);margin-bottom:.125rem;display:flex;align-items:center;gap:.5rem}.field-subtitle{color:var(--text-muted);font-size:.8rem;margin-bottom:1rem;font-weight:500}.chords-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.75rem}@media (min-width: 768px){.chords-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.chords-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1400px){.chords-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width: 768px){.harmonic-field-card{padding:.875rem}}.footer{text-align:center;padding:1.5rem 2rem;margin-top:1rem;background:linear-gradient(0deg,rgba(107,91,123,.05) 0%,transparent 100%);color:var(--text-muted);font-size:.75rem}.footer p{margin:.125rem 0}.footer-link{color:var(--primary-dark);text-decoration:none;font-weight:600;transition:color .3s ease}.footer-link:hover{color:var(--primary)}:root{--ivory: #FAFAFA;--charcoal: #2D2D3D;--primary: #6B5B7B;--primary-light: #8B7A9B;--primary-dark: #4B3B5B;--accent: #9B8BAB;--secondary: #7B6B8B;--text-muted: #6B5B7B;--border-light: rgba(107, 91, 123, .15)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:DM Sans,sans-serif;background:var(--ivory);color:var(--charcoal);line-height:1.6;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column}.main-title{text-align:center;font-size:1.5rem;font-weight:700;color:var(--charcoal);margin-bottom:.5rem;animation:fadeIn 1s ease-out .1s both}.container{max-width:1200px;margin:0 auto;padding:1rem 2rem;animation:fadeIn 1s ease-out .2s both;flex:1}@media (max-width: 1024px){.container{margin:0rem 5rem}}@media (max-width: 768px){.container{margin:0rem}}.sobre-wrapper{min-height:0;flex:1;display:flex;flex-direction:column}.sobre-center{flex:1;display:flex;align-items:center;justify-content:center}.sobre-page{max-width:850px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 2px 16px #0000000f;padding:2rem;text-align:center}.sobre-page h2{margin-bottom:1rem;font-size:2rem}.sobre-page p{font-size:1.1rem;color:var(--charcoal)}.contato-page{max-width:700px;width:100%;margin:auto;background:#fff;border-radius:12px;box-shadow:0 2px 16px #0000000f;padding:2rem}.contato-page h2{text-align:center;margin-bottom:1rem;font-size:2rem}.contato-form{display:flex;flex-direction:column;gap:1rem}.contato-form input,.contato-form textarea{padding:.75rem 1rem;border:1px solid var(--border-light);border-radius:8px;font-size:1rem;font-family:inherit;resize:none}.contato-form textarea{min-height:100px}.contato-form button{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.contato-form button:hover{background:var(--primary-dark)}.form-status{text-align:center;margin-top:1rem;color:var(--primary);font-weight:500}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}