:root{--white-key-width:80px;--black-key-width:46px;--white-key-height:260px;--black-key-height:160px}*{box-sizing:border-box;margin:0;padding:0}.container{margin:0 auto;max-width:1000px}h1{font-size:22px}.subtitle{color:#666;margin-top:8px}.piano{background:#fff;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:flex-end;margin:0 20px 30px;min-height:calc(var(--white-key-height) + 120px);padding:30px;position:relative}.piano-keys{height:var(--white-key-height)}.key,.piano-keys{display:flex;justify-content:center}.key{align-items:flex-end;cursor:pointer;font-size:18px;font-weight:700;padding-bottom:20px;transition:all .1s ease;user-select:none}.key:before{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.02));bottom:0;content:"";height:30%;position:absolute;width:100%}.white{background:linear-gradient(180deg,#fff 0,#f5f5f5 20%,#fff 35%,#f9f9f9 55%,#fcfcfc);border:1px solid #ccc;border-radius:0 0 6px 6px;box-shadow:2px 2px 2px rgba(0,0,0,.1),inset -1px -1px 2px rgba(0,0,0,.1),inset 1px 0 2px hsla(0,0%,100%,.8);height:var(--white-key-height);width:var(--white-key-width);z-index:1}.white.active,.white:active{background:linear-gradient(180deg,#3498db 0,#2980b9);border-color:#2472a4;box-shadow:inset 0 2px 3px rgba(0,0,0,.2),inset 0 8px 12px rgba(0,0,0,.1);transform:translateY(0);transition:transform .1s}.black{background:linear-gradient(180deg,#444 0,#222 20%,#111);border:1.5px solid #000;border-radius:0 0 4px 4px;box-shadow:inset -1px -1px 2px hsla(0,0%,100%,.2),inset 0 -5px 2px 3px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.5);color:#fff;height:var(--black-key-height);margin-left:calc(var(--black-key-width)/-2);margin-right:calc(var(--black-key-width)/-2);width:var(--black-key-width);z-index:2}.black.active,.black:active{background:linear-gradient(180deg,#3498db 0,#2980b9);box-shadow:inset -1px -1px 2px hsla(0,0%,100%,.2),inset 0 -2px 2px 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5);transform:translateY(0);transition:transform .1s}.white:hover{background:linear-gradient(180deg,#fff 0,#f0f0f0 20%,#f8f8f8 35%,#f4f4f4 55%,#f8f8f8)}.black:hover{background:linear-gradient(180deg,#4c4c4c 0,#2a2a2a 20%,#191919)}.chord-name-container{justify-content:center;margin-bottom:20px}.chord-name-container h2{color:#333;font-size:24px;margin:0}.chord-info{background:#fff;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);margin-top:20px;padding:20px;text-align:center}.chord-details{display:grid;gap:10px;margin-top:15px}.chord-types{align-items:center;display:inline-block;flex-direction:column;gap:10px;margin-bottom:30px;padding:0 20px;vertical-align:text-top}.chord-types-row{display:flex;flex-direction:column;gap:8px;max-width:60vw;width:100%}.common-types,.extended-types{display:block;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}.chord-type{background:#fff;border:2px solid #3498db;border-radius:20px;color:#3498db;cursor:pointer;font-size:14px;font-weight:700;min-width:fit-content;padding:6px 12px;transition:all .2s ease}.chord-type:hover{background:#f0f7ff}.chord-type.active{background:#3498db;color:#fff}@media (max-width:768px){.chord-types-row{justify-content:center}.common-types,.extended-types{margin-left:0}.chord-type{font-size:12px;padding:4px 8px}}.desktop-chord-type{background:#fff;border:2px solid #3498db;border-radius:20px;color:#3498db;cursor:pointer;font-size:14px;font-weight:700;padding:6px 12px;transition:all .2s ease}.desktop-chord-type:hover{background:#f0f7ff}.desktop-chord-type.active{background:#3498db;color:#fff}@media (max-width:768px){:root{--white-key-width:30px;--black-key-width:18px;--white-key-height:150px;--black-key-height:90px}.container{padding:5px}.piano{border-radius:4px;margin:0;min-height:calc(var(--white-key-height) + 60px);padding:10px 2px}.piano-keys{display:flex;justify-content:center;margin:0 auto;max-width:100%;padding:0}.key{font-size:11px;padding-bottom:8px}.key:after{font-size:9px;padding:0 2px;top:120px}.key.active:after{top:105px}.key.black.active:after{font-size:8px;min-width:16px;padding:1px 3px;top:65px}.black{margin-left:calc(var(--black-key-width)/-2);margin-right:calc(var(--black-key-width)/-2)}.chord-name-container{margin-bottom:10px}.chord-info{margin-top:10px;padding:15px}}.sound-controls{align-items:center;display:flex;gap:20px;justify-content:center;margin-bottom:30px;margin-top:20px}.play-button{margin:5px 0}.play-button:hover{background:#b3ffd3;transform:scale(1.05)}.play-button:active{transform:scale(.95)}.white:after{background:linear-gradient(180deg,hsla(0,0%,100%,.8) 0,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0));border-radius:0 0 6px 6px;height:60%}.black:after,.white:after{content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.black:after{background:linear-gradient(180deg,hsla(0,0%,100%,.1) 0,hsla(0,0%,100%,0));border-radius:0 0 4px 4px;height:40%}.white.active{color:#fff}.black.active,.white.active{background:#3498db}.white:active{color:#fff}.black:active,.white:active{background:#2ecc71}.key{transition:background-color .1s ease}.current-chord-container{background:#fff;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);display:flex;justify-content:center;margin:0 auto 20px;max-width:200px;padding:10px 15px}.current-chord{flex-direction:column;gap:15px}.chord-controls{display:flex;justify-content:center}@media (max-width:768px){.current-chord-container{flex-direction:column;gap:15px;padding:15px}.current-chord h2{font-size:20px}}.chord-name-container{gap:10px}.chord-name-container,.current-chord,.play-button{align-items:center;display:flex}.play-button{background:#00e676;border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:14px;height:32px;justify-content:center;padding:0;transition:all .2s ease;width:32px}.first-row-container{align-items:center;display:flex;gap:15px;justify-content:flex-start;width:100%}.base-chord-selector{display:inline-block;margin-bottom:15px;position:relative}.base-chord-button{align-items:center;background:#00e676;border:2px solid #00c853;border-radius:20px;color:#fff;cursor:pointer;font-size:16px;font-weight:700;height:68px;justify-content:center;line-height:1;padding:10px 20px;transition:all .2s ease;vertical-align:text-top;white-space:nowrap}.base-chord-button:after{content:" ▼";display:inline-block;line-height:1;margin-left:4px}.base-chord-button:hover{background:#00c853;border-color:#00a844}.base-chord-menu{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);display:none;left:0;margin-top:5px;max-height:300px;min-width:120px;overflow-y:auto;padding:8px;position:absolute;top:100%;z-index:1000}.base-chord,.base-chord-menu.show{display:block}.base-chord{background:none;border:none;cursor:pointer;font-size:14px;padding:8px 12px;text-align:left;transition:background-color .2s ease;width:100%}.base-chord:hover{background:#f0f7ff}.base-chord[data-note=C]{background-color:#e8f5e9;border-bottom:1px solid #ddd}.base-chord[data-note=Cs],.base-chord[data-note=Db]{background-color:#e3f2fd}.base-chord[data-note=Cs]{border:1px solid #3498db;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;margin-bottom:0}.base-chord[data-note=Db]{border:1px solid #3498db;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:none;margin-bottom:4px}.base-chord[data-note=D]{background-color:#e8f5e9;border-bottom:1px solid #ddd}.base-chord[data-note=Ds]{background-color:#fff0f7;border:1px solid #e91e63;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;margin-bottom:0}.base-chord[data-note=Eb]{background-color:#fff0f7;border:1px solid #e91e63;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:none;margin-bottom:4px}.base-chord[data-note=E]{background-color:#fff3e0;border-bottom:1px solid #ddd}.base-chord[data-note=F]{background-color:#f3e5f5;border-bottom:1px solid #ddd}.base-chord[data-note=Fs]{background-color:#f7fff0;border:1px solid #4caf50;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;margin-bottom:0}.base-chord[data-note=Gb]{background-color:#f7fff0;border:1px solid #4caf50;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:none;margin-bottom:4px}.base-chord[data-note=G]{background-color:#e0f7fa;border-bottom:1px solid #ddd}.base-chord[data-note=Gs]{background-color:#f0fff7;border:1px solid #009688;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;margin-bottom:0}.base-chord[data-note=Ab]{background-color:#f0fff7;border:1px solid #009688;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:none;margin-bottom:4px}.base-chord[data-note=A]{background-color:#fce4ec;border-bottom:1px solid #ddd}.base-chord[data-note=As]{background-color:#fff7f0;border:1px solid #ff9800;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;margin-bottom:0}.base-chord[data-note=Bb]{background-color:#fff7f0;border:1px solid #ff9800;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:none;margin-bottom:4px}.base-chord[data-note=B]{background-color:#f1f8e9;border-bottom:1px solid #ddd}.base-chord[data-note=C]:hover{background-color:#c8e6c9}.base-chord[data-note=Cs]:hover,.base-chord[data-note=Db]:hover{background-color:#e0eeff}.base-chord[data-note=D]:hover{background-color:#c8e6c9}.base-chord[data-note=Ds]:hover,.base-chord[data-note=Eb]:hover{background-color:#ffe0ef}.base-chord[data-note=E]:hover{background-color:#ffe0b2}.base-chord[data-note=F]:hover{background-color:#e1bee7}.base-chord[data-note=Fs]:hover,.base-chord[data-note=Gb]:hover{background-color:#efffe0}.base-chord[data-note=G]:hover{background-color:#b2ebf2}.base-chord[data-note=Ab]:hover,.base-chord[data-note=Gs]:hover{background-color:#e0fff0}.base-chord[data-note=A]:hover{background-color:#f8bbd0}.base-chord[data-note=As]:hover,.base-chord[data-note=Bb]:hover{background-color:#ffeee0}.base-chord[data-note=B]:hover{background-color:#dcedc8}@media (max-width:768px){.first-row-container{align-items:center;display:flex;flex-direction:row;gap:15px;justify-content:center;margin-bottom:15px;width:100%}.base-chord-selector{flex:0 0 auto;margin:0}.base-chord-menu{left:50%;transform:translateX(-50%)}.base-chord-button{font-size:17px;padding:12px 24px}}@media (min-width:769px){.chord-types-mobile{display:none}.desktop-chord-type{display:inline-block}}@media (max-width:768px){:root{--white-key-width:30px;--black-key-width:18px;--white-key-height:150px;--black-key-height:90px}.container{padding:5px}.base-chord-selector{justify-content:center;left:12%;margin:0 0 10px}.base-chord-button{align-items:center;background:#00e676;border:2px solid #00c853;border-radius:20px;color:#fff;cursor:pointer;font-size:17px;font-weight:700;height:48px;justify-content:center;min-width:120px;padding:12px 24px}.chord-types{display:inline-block;left:10%;margin:0 0 15px;position:relative;text-align:center}.chord-menu-button{align-items:center;background:#fff;border:2px solid #3498db;border-radius:20px;color:#3498db;cursor:pointer;display:flex;font-size:17px;font-weight:700;height:48px;justify-content:center;min-width:120px;padding:12px 24px}.chord-type:not(.chord-menu-content .chord-type),.chord-types-row,.desktop-chord-type{display:none!important}.piano{border-radius:4px;margin:0;min-height:calc(var(--white-key-height) + 60px);padding:10px 2px}.piano-keys{display:flex;justify-content:center;margin:0 auto;max-width:100%;padding:0}.chord-menu-content{background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.1);display:none;left:50%;margin-top:5px;max-height:300px;overflow-y:auto;padding:8px;position:absolute;top:100%;transform:translateX(-50%);width:160px;z-index:1000}.chord-menu-content.show{display:block}.chord-menu-content .chord-type{background:none;border:2px solid #3498db;border-radius:20px;color:#3498db;display:block;font-size:14px;margin:4px 0;padding:8px 12px;text-align:center;width:100%}.chord-menu-content .chord-type:hover{background:#f0f7ff}.chord-menu-content .chord-type.active{background:#3498db;color:#fff}.chord-types-mobile{display:inline-block;position:relative}}.invert-button{align-items:center;background:#3498db;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:18px;height:32px;justify-content:center;margin:5px 0;padding:0;transition:all .2s ease;width:32px}.invert-button:hover{background:#2980b9;transform:scale(1.05)}.invert-button:active{transform:scale(.95)}.key.active{background:#3498db;color:#fff}.key.active.octave-changed{background-color:#d4e6f9;border:none;color:#444}.key.active.octave-changed:after{background:rgba(0,0,0,.7)!important;color:#fff!important}.key.black.active.octave-changed:after{background:hsla(0,0%,100%,.95)!important;color:#000!important}.key.black.active.octave-changed{border:2px solid #c0392b;box-shadow:0 0 5px rgba(192,57,43,.5)}.key{position:relative}.key.active.octave-changed:before{background:rgba(0,0,0,.65);border-radius:2px;bottom:calc(100% + 6px);color:#fff;content:"This note should be played one octave higher";font-size:9px;height:20px;left:50%;line-height:18px;opacity:0;padding:8px;pointer-events:none;position:absolute;text-align:center;transform:translateX(-50%);transition:opacity .2s ease;width:max-content;z-index:1000}.key.active.octave-changed:hover:before{opacity:1}@media (hover:none){.key.active.octave-changed:active:before{opacity:1}}.key.active:after{background:rgba(0,0,0,.7);border-radius:4px;color:#fff;content:attr(data-interval);font-size:12px;height:auto;left:50%;line-height:1.2;min-width:min-content;padding:1px 4px;position:absolute;text-align:center;top:180px;transform:translateX(-50%);white-space:nowrap;z-index:10}.key.black.active:after{background:hsla(0,0%,100%,.95);border:1px solid rgba(0,0,0,.2);color:#000;top:80px}@media (max-width:768px){.key:after{font-size:11px}.piano-keys .key.active.octave-changed:after,.piano-keys .key.active:after{background:rgba(0,0,0,.85);font-size:11px;min-width:18px;padding:1px 4px;top:107px}.piano-keys .key.black.active.octave-changed:after,.piano-keys .key.black.active:after{background:hsla(0,0%,100%,.95);border:1px solid rgba(0,0,0,.2);font-size:10px;min-width:18px;padding:1px 4px;top:50px}.first-row-container{flex-direction:row;gap:15px;margin-bottom:15px;width:100%}.chord-menu-button,.first-row-container{align-items:center;display:flex;justify-content:center}.chord-menu-button{background:#fff;cursor:pointer;font-size:17px;font-weight:700;height:48px;min-width:120px;padding:12px 24px}.chord-menu-button,.chord-menu-content .chord-type{border:2px solid #3498db;border-radius:20px;color:#3498db}.chord-menu-content .chord-type{background:none;display:block;font-size:14px;margin:4px 0;padding:8px 12px;text-align:center;width:100%}.chord-menu-content .chord-type:hover{background:#f0f7ff}.chord-menu-content .chord-type.active{background:#3498db;color:#fff}.chord-type:not(.chord-menu-content .chord-type),.chord-types-row,.desktop-chord-type{display:none!important}}.search-container{display:flex;gap:10px;justify-content:center;margin:40px 0 20px;position:relative}.search-container input{border:2px solid #3498db;border-radius:20px;font-size:16px;outline:none;padding:8px 12px;transition:border-color .2s ease;width:250px}.search-container input:focus{border-color:#2980b9}.search-container button{background:#3498db;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:16px;padding:8px 20px;transition:background .2s ease}.search-container button:hover{background:#2980b9}@media (max-width:768px){.search-container{padding:0 10px}.search-container input{font-size:14px;width:200px}.search-container button{font-size:14px;padding:8px 16px}}.search-suggestions{background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);display:none;left:50%;margin-top:5px;max-height:200px;overflow-y:auto;position:absolute;top:100%;transform:translateX(-50%);width:250px;z-index:1000}.suggestion-item{cursor:pointer;padding:8px 12px;transition:background-color .2s}.suggestion-item.selected,.suggestion-item:hover{background-color:#f0f7ff}@media (max-width:768px){.search-suggestions{width:200px}}.chord-description{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);margin:2rem auto 3rem;max-width:800px;padding:1.5rem;transition:all .3s ease}.chord-description p{color:#495057;font-size:1.1rem;letter-spacing:.2px;line-height:1.8;margin:0;text-align:justify}.chord-description:hover{background-color:#fff;box-shadow:0 6px 12px rgba(0,0,0,.1)}@media (max-width:768px){.chord-description{margin:1.5rem 1rem;padding:1.25rem}.chord-description p{font-size:1rem;line-height:1.6;text-align:left}}