.han-finder-stage{display:grid;gap:18px}.han-finder-stage,.han-finder-stage .han-tools-legacy-content{overflow:visible}.han-finder-stage-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;padding:4px 4px 0}.han-finder-stage-head h2{max-width:680px;margin:0;color:#fff;font-size:24px;line-height:1.24;font-weight:920}.han-finder-stage-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.han-finder-stage-badges span{min-height:34px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#eef7ffc7;background:#03080e47;font-size:12px;font-weight:850}.han-finder-stage .han-tools-legacy-content{border:0;background:none}.han-finder-stage .default__page__content{display:grid;gap:18px}.han-finder{padding:4px 2px 0}.han-finder .App{display:grid;gap:16px}.han-finder .chord-selector,.han-finder .chord-selector.notes-finder{display:block;min-height:0;padding:16px 16px 18px;border:1px solid rgba(179,238,248,.14);border-radius:20px;background:radial-gradient(circle at 50% 0%,rgba(179,238,248,.12),transparent 62%),#03080e4d}.han-finder .selector-wrap{display:grid;justify-items:center;gap:14px;width:100%}.han-finder .selector{order:1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;text-align:center}.han-finder .selector-wrap .selector-chord-name,.han-finder .selector-wrap .selector-chord-name.notes-finder{order:2;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 4px;height:auto;min-height:0;padding:0;color:#ffd3e0;background-image:linear-gradient(104deg,#b3eef8 4%,#e6dcf6 42%,#ffafc5 82%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:clamp(30px,4.4vw,46px);font-weight:900;line-height:1.12;letter-spacing:-.01em;text-align:center}.han-finder .selector-wrap .selector-chord-name>span,.han-finder .selector-wrap .selector-chord-name .selector-minor,.han-finder .selector-wrap .selector-chord-name .selector-interval,.han-finder .selector-wrap .selector-interval-name{height:auto;padding-top:0;font-size:inherit;line-height:inherit}.han-finder .selector-wrap .selector-chord-name p{margin:0}.han-finder .selector-wrap .selector-chord-name .selector-altered{height:auto;padding-top:0;font-size:.62em}.han-finder .selector-wrap .selector-chord-name svg{-webkit-text-fill-color:initial}.han-finder .selector [class*=-container]{font-family:inherit}.han-finder .selector [class*=-container]:before{display:block;margin:0 0 6px 2px;color:#dcebf680;font-size:11px;font-weight:850;letter-spacing:.06em;text-align:left;text-transform:uppercase;white-space:nowrap}.han-finder .selector .select-chord:before{content:"Nốt gốc"}.han-finder .selector .select:before{content:"Dấu hoá"}.han-finder .selector .select-interval:before{content:var(--han-finder-kind, "Loại")}.han-finder .selector .select-chord,.han-finder .selector .select{min-width:96px}.han-finder .selector .select-interval{min-width:168px}.han-finder--chords{--han-finder-kind: "Loại hợp âm"}.han-finder--scale{--han-finder-kind: "Âm giai"}.han-finder--interval{--han-finder-kind: "Quãng"}.han-finder .selector [class*=-control]{min-height:44px;border:1px solid rgba(179,238,248,.24);border-radius:14px;background:#0d1824f0;box-shadow:inset 0 1px #ffffff14,0 12px 24px #00000042;cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}.han-finder .selector [class*=-control]:hover{border-color:#b3eef86b;background:#162a3afa}.han-finder .selector [class*=-placeholder],.han-finder .selector [class*=-singleValue]{top:50%;color:#fff;font-size:15px;font-weight:850}.han-finder .selector [class*=-indicatorSeparator]{background-color:#b3eef833}.han-finder .selector [class*=-indicatorContainer]{padding:8px 6px 8px 2px;color:#b3eef8cc}.han-finder .selector [class*=-menu]{margin-top:6px;padding:4px;border:1px solid rgba(179,238,248,.24);border-radius:14px;background:#0d1824fc;box-shadow:inset 0 1px #ffffff14,0 18px 34px #0000006b;overflow:hidden}.han-finder .selector [class*=-option]{padding:9px 12px;border-radius:10px;color:#eef7ffe0;background-color:transparent;font-size:14px;font-weight:750;cursor:pointer;transition:background-color .16s ease,color .16s ease}.han-finder .selector [class*=-option]:hover{color:#fff;background-color:#162a3afa}.han-finder .selector [class*=-a11yText]{position:absolute}.han-finder .chord-notes{order:3;position:relative;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.han-finder .chord-notes::-webkit-scrollbar{display:none}.han-finder .chord-notes .notes{flex-wrap:wrap;justify-content:center;gap:8px;width:auto;margin:0;padding:0}.han-finder .chord-notes .notes>span{padding-left:0;color:#dcebf69e;font-size:13px;font-weight:800}.han-finder .chord-notes .notes li{width:auto;min-width:38px;height:32px;margin:0;padding:0 11px;border:1px solid rgba(255,175,197,.34);border-radius:11px;color:#fff;background:linear-gradient(135deg,#ff6a8ce6,#ff8fb0b8);box-shadow:0 10px 20px #0000003d;font-family:inherit;font-size:14px;font-weight:850;transition:transform .16s ease,background .16s ease}.han-finder .chord-notes .notes li:hover,.han-finder .chord-notes .notes li.active{transform:translateY(-1px);color:#07111b;background:linear-gradient(135deg,#b3eef8,#ffafc5)}.han-finder .chord-notes .notes li:after{display:none}.han-finder .buttons-module{justify-content:center}.han-finder .buttons{width:100%;max-width:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0}.han-finder .buttons button,.han-finder .buttons .drop-down button{margin:0}.han-finder .buttons .drop-down ul{top:calc(100% + 6px);left:0}.han-finder .piano-wrapper{padding:4px 0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.han-finder .piano-wrapper::-webkit-scrollbar{display:none}.han-finder .piano-wrapper ul{height:auto;margin:0;padding:0}.han-finder .piano{border-radius:4px 4px 14px 14px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.42))}.han-finder .key:first-child .white-key{border-radius:0 0 0 12px}.han-finder .key:last-child .white-key{border-radius:0 0 12px}.han-finder .key .white-key .marked,.han-finder .key .black-key .marked{background:linear-gradient(135deg,#ff6a8c,#ff9db4);box-shadow:0 2px 6px #00000059}.han-finder .notation-wrapper{height:auto;padding:10px 8px 0;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:linear-gradient(180deg,#fdfcf8,#f1efe7);box-shadow:inset 0 1px #ffffffe6,0 20px 38px #00000057;overflow:hidden}.han-finder .notation-wrapper .notation{display:block;height:214px}.han-finder .notation-wrapper .notation.scale-finder{height:250px}.han-finder .notation-wrapper.note-finder{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.han-finder .notation-wrapper.note-finder::-webkit-scrollbar{display:none}.han-finder :is(.Guitar,.ukuleleGuitar){margin:0 auto}@media (max-width: 760px){.han-finder-stage{gap:14px}.han-finder-stage-head{align-items:flex-start;flex-direction:column;gap:12px;padding:2px 2px 0}.han-finder-stage-head h2{font-size:20px}.han-finder-stage-badges{justify-content:flex-start}.han-finder-stage-badges span{min-height:32px;font-size:11px}.han-finder-stage .han-tools-legacy-content{border-radius:18px}.han-finder{padding:2px 0 0}.han-finder .chord-selector,.han-finder .chord-selector.notes-finder{padding:14px 12px 16px;border-radius:18px}.han-finder .selector-wrap{gap:12px}.han-finder .selector{gap:8px;width:100%}.han-finder .selector [class*=-container]{flex:1 1 96px;width:auto}.han-finder .selector .select-interval{flex:2 1 168px}.han-finder .selector [class*=-control]{min-height:42px}.han-finder .chord-notes .notes{gap:6px}.han-finder .chord-notes .notes li{min-width:34px;height:30px;padding:0 9px;font-size:13px}.han-finder .notation-wrapper{border-radius:16px}}