.accordion-container[data-v-e0a2caa5]{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:40px}.controls[data-v-e0a2caa5]{position:absolute;top:0;right:0}.rotate-btn[data-v-e0a2caa5]{background:transparent;border:1px solid rgba(48,54,61,.8);color:#8b949e;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:0}.rotate-btn[data-v-e0a2caa5]:hover{background:#30363d66;color:#58a6ff;border-color:#58a6ff}.rotate-btn[data-v-e0a2caa5]:active{transform:translateY(1px);background:#30363d99}.rotate-btn.active[data-v-e0a2caa5]{background:#58a6ff26;color:#58a6ff;border-color:#58a6ff}.accordion[data-v-e0a2caa5]{display:flex;flex-direction:column;align-items:center}.row[data-v-e0a2caa5]{display:flex;gap:4.7mm}.button[data-v-e0a2caa5]{width:14.3mm;height:14.3mm;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s,box-shadow .1s;box-shadow:0 2mm 4mm #0000004d;font-size:10px;text-align:center}.button.white[data-v-e0a2caa5]{background-color:#fff;border:1px solid #000;color:#000}.button.black[data-v-e0a2caa5]{background-color:#000;border:1px solid #fff;color:#fff}.button[data-v-e0a2caa5]:active,.button.active[data-v-e0a2caa5]{transform:translateY(1mm);box-shadow:0 1mm 2mm #00000080}.button.wrong-active[data-v-e0a2caa5]{outline:4px solid #fc5454;box-shadow:0 0 8px #fc5454,0 0 12px #ff3636cc}.button.highlight-green[data-v-e0a2caa5]{outline:4px solid #a6ef9f;box-shadow:0 0 8px #a6ef9f,0 0 12px #a6ef9fcc}.button.highlight-red[data-v-e0a2caa5]{outline:4px solid #fc5454;box-shadow:0 0 8px #fc5454,0 0 12px #ff3636cc}.button.highlight-orange[data-v-e0a2caa5]{box-shadow:0 0 0 4px #ffc107,0 0 15px #ffc107cc;z-index:10}.note-label[data-v-e0a2caa5]{line-height:1}.fingering[data-v-e0a2caa5]{font-size:22px;font-weight:900;line-height:1}.button.white .fingering[data-v-e0a2caa5]{color:#000;text-shadow:none}.button.black .fingering[data-v-e0a2caa5]{color:#fff;text-shadow:0 0 4px rgba(0,0,0,.8)}.button.white.highlight-orange .fingering[data-v-e0a2caa5]{color:#000;text-shadow:none}.button.black.highlight-orange .fingering[data-v-e0a2caa5]{color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5)}.accordion.rotated[data-v-e0a2caa5]{transform:rotate(-90deg);transform-origin:center center}.accordion-container.mode-3d[data-v-e0a2caa5]{perspective:800px;perspective-origin:center bottom}.accordion.perspective3d[data-v-e0a2caa5]{transform:rotateX(55deg);transform-origin:center bottom;transform-style:preserve-3d}.accordion.perspective3d .row[data-v-e0a2caa5]{gap:3mm}.accordion.perspective3d .button[data-v-e0a2caa5]{width:6.5mm;height:6.5mm;font-size:6px;box-shadow:0 1mm 2mm #0006}.accordion.perspective3d .fingering[data-v-e0a2caa5]{font-size:8px}@media(max-height:900px){.button[data-v-e0a2caa5]{width:12mm;height:12mm;font-size:9px}.row[data-v-e0a2caa5]{gap:4mm}.fingering[data-v-e0a2caa5]{font-size:13px}}@media(max-height:800px){.button[data-v-e0a2caa5]{width:11mm;height:11mm;font-size:8px}.row[data-v-e0a2caa5]{gap:3.5mm}.fingering[data-v-e0a2caa5]{font-size:12px}.accordion-container[data-v-e0a2caa5]{padding-top:32px}}@media(max-height:700px){.button[data-v-e0a2caa5]{width:10mm;height:10mm;font-size:7px;box-shadow:0 1.5mm 3mm #0000004d}.row[data-v-e0a2caa5]{gap:3mm}.fingering[data-v-e0a2caa5]{font-size:10px}.accordion-container[data-v-e0a2caa5]{padding-top:28px}.rotate-btn[data-v-e0a2caa5]{width:28px;height:28px}}@media(max-width:1200px){.button[data-v-e0a2caa5]{width:12mm;height:12mm;font-size:9px}.row[data-v-e0a2caa5]{gap:4mm}}@media(max-width:900px){.button[data-v-e0a2caa5]{width:11mm;height:11mm;font-size:8px}.row[data-v-e0a2caa5]{gap:3.5mm}.accordion-container[data-v-e0a2caa5]{padding-top:30px}}@media(max-width:700px){.button[data-v-e0a2caa5]{width:9mm;height:9mm;font-size:7px;box-shadow:0 1.5mm 2.5mm #0000004d}.row[data-v-e0a2caa5]{gap:2.5mm}.fingering[data-v-e0a2caa5]{font-size:10px}.rotate-btn[data-v-e0a2caa5]{width:26px;height:26px}}@media(max-width:480px){.button[data-v-e0a2caa5]{width:7mm;height:7mm;font-size:6px;box-shadow:0 1mm 2mm #0000004d}.row[data-v-e0a2caa5]{gap:2mm}.fingering[data-v-e0a2caa5]{font-size:8px}}