.pm-mini-piano-wrapper{background:linear-gradient(135deg,#0B0B0B,#1A1A1A);border:1px solid #2A2A2A;border-radius:16px;padding:clamp(12px, 2vw, 24px);margin:28px 0;text-align:center;box-sizing:border-box;width:100%;max-width:100%;overflow:hidden}.pm-mini-piano-wrapper *{box-sizing:border-box;max-width:100%}@media (max-width:600px){.pm-mini-piano-wrapper{padding:10px;margin:18px 0;border-radius:12px}}.pm-mini-piano-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}.pm-mini-piano-title{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700;color:#D7BF81}.pm-mini-piano-title svg{width:20px;height:20px;stroke:#D7BF81;fill:none}.pm-mini-piano-controls{display:flex;align-items:center;gap:8px}.pm-mp-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#2A2A2A;border:1px solid #3A3A3A;border-radius:8px;color:#CCC;font-size:.8rem;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:inherit}.pm-mp-btn:hover{border-color:#D7BF81;color:#D7BF81}.pm-mp-btn.active{background:rgb(215 191 129 / .15);border-color:#D7BF81;color:#D7BF81}.pm-mp-btn svg{width:14px;height:14px;stroke:currentColor;fill:none}.pm-mini-piano{position:relative;display:block;width:100%;height:clamp(110px, 22vw, 160px);user-select:none;-webkit-user-select:none;touch-action:none;overflow:hidden;border-radius:6px}.pm-mp-white,.pm-mp-black{margin:0;padding:0;font:inherit;color:inherit;-webkit-appearance:none;appearance:none;outline:none}.pm-mp-white:focus-visible,.pm-mp-black:focus-visible{outline:3px solid #6C63FF;outline-offset:-3px;z-index:5}.pm-mp-white{position:absolute;top:0;bottom:0;height:100%;background:linear-gradient(180deg,#FEFCF6 0%,#F0EBD8 40%,#E5DFC8 70%,#DDD6BE 100%);border-right:1px solid #B0A888;border-bottom:4px solid #C8C0A0;border-radius:0 0 5px 5px;cursor:pointer;transition:background 0.08s,box-shadow 0.08s,transform 0.05s;box-shadow:0 6px 6px rgb(0 0 0 / .2),inset 0 -6px 10px rgb(0 0 0 / .03);z-index:1;box-sizing:border-box}.pm-mp-white:first-child{border-left:1px solid #B0A888;border-radius:0 0 5px 5px}.pm-mp-white:last-child{border-right-width:1px}.pm-mp-white:hover{background:linear-gradient(180deg,#FFF 0%,#F5F0E0 50%,#EDE7D0 100%)}.pm-mp-white:active,.pm-mp-white.pressed{background:linear-gradient(180deg,#F0EBD8 0%,#E5DFC8 100%);box-shadow:0 2px 0 0 #C8C0A0,0 3px 4px rgb(0 0 0 / .15);transform:translateY(2px)}.pm-mp-white.highlight,.pm-mp-white.listen-active{background:linear-gradient(180deg,#FFE082 0%,#D7BF81 60%,#BEA86E 100%)!important;box-shadow:0 4px 0 0 #A89558,0 0 0 3px rgb(215 191 129 / .55),0 6px 18px rgb(215 191 129 / .55);transform:translateY(1px)}.pm-mp-white.listen-active{animation:pm-mp-listen-pulse 0.42s ease-out}@keyframes pm-mp-listen-pulse{0%{box-shadow:0 4px 0 0 #A89558,0 0 0 0 rgb(215 191 129 / .7)}60%{box-shadow:0 4px 0 0 #A89558,0 0 0 8px rgb(215 191 129 / .3)}100%{box-shadow:0 4px 0 0 #A89558,0 0 0 3px rgb(215 191 129 / .55)}}.pm-mp-white.correct{background:linear-gradient(180deg,#4CAF50 0%,#388E3C 100%)!important;box-shadow:0 4px 0 0 #2E7D32,0 6px 12px rgb(76 175 80 / .4)}.pm-mp-white.wrong{background:linear-gradient(180deg,#F44336 0%,#D32F2F 100%)!important;box-shadow:0 4px 0 0 #C62828,0 6px 12px rgb(244 67 54 / .4)}.pm-mp-white .pm-mp-note-label{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:.7rem;font-weight:700;color:#888;pointer-events:none;opacity:0;transition:opacity 0.2s}.pm-mini-piano.show-labels .pm-mp-note-label{opacity:1}.pm-mp-white.highlight .pm-mp-note-label,.pm-mp-white.correct .pm-mp-note-label,.pm-mp-white.wrong .pm-mp-note-label{opacity:1;color:#FFF}.pm-mp-black{position:absolute;top:0;height:64%;background:linear-gradient(180deg,#2A2A2A 0%,#1A1A1A 60%,#111 100%);border:1px solid #000;border-radius:0 0 3px 3px;cursor:pointer;transition:background 0.08s,box-shadow 0.08s,transform 0.05s;box-shadow:0 3px 0 0 #000,0 4px 5px rgb(0 0 0 / .4),inset 0 -4px 8px rgb(255 255 255 / .03);z-index:2;box-sizing:border-box}@media (max-width:480px){.pm-mp-white .pm-mp-note-label{font-size:.55rem;bottom:4px}}.pm-mp-black:hover{background:linear-gradient(180deg,#3A3A3A 0%,#2A2A2A 100%)}.pm-mp-black:active,.pm-mp-black.pressed{background:linear-gradient(180deg,#222 0%,#111 100%);box-shadow:0 1px 0 0 #000,0 2px 3px rgb(0 0 0 / .3);transform:translateY(2px)}.pm-mp-black.highlight,.pm-mp-black.listen-active{background:linear-gradient(180deg,#FFE082 0%,#D7BF81 50%,#A89558 100%)!important;box-shadow:0 3px 0 0 #8B7A45,0 0 0 3px rgb(215 191 129 / .6),0 4px 14px rgb(215 191 129 / .6)}.pm-mp-black.listen-active{animation:pm-mp-listen-pulse 0.42s ease-out}.pm-mp-black.correct{background:linear-gradient(180deg,#4CAF50 0%,#2E7D32 100%)!important}.pm-mp-black.wrong{background:linear-gradient(180deg,#F44336 0%,#C62828 100%)!important}.pm-mp-feedback{margin-top:16px;padding:12px 20px;border-radius:10px;font-size:.9rem;font-weight:600;opacity:0;transition:opacity 0.3s,transform 0.3s;transform:translateY(4px)}.pm-mp-feedback.visible{opacity:1;transform:translateY(0)}.pm-mp-feedback.success{background:rgb(76 175 80 / .12);border:1px solid rgb(76 175 80 / .3);color:#4CAF50}.pm-mp-feedback.error{background:rgb(244 67 54 / .12);border:1px solid rgb(244 67 54 / .3);color:#F44336}.pm-mp-feedback.info{background:rgb(215 191 129 / .12);border:1px solid rgb(215 191 129 / .3);color:#D7BF81}.pm-mp-exercise{margin-top:12px;padding:12px 20px;background:rgb(215 191 129 / .08);border:1px solid rgb(215 191 129 / .2);border-radius:10px;font-size:.9rem;color:#CCC}.pm-mp-exercise strong{color:#D7BF81}.pm-mp-score{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:12px;font-size:.85rem;color:gray}.pm-mp-score-item{display:flex;align-items:center;gap:6px}.pm-mp-score-item .val{color:#D7BF81;font-weight:700}.pm-mp-midi-status{display:flex;align-items:center;gap:6px;font-size:.72rem;color:#D7BF81;margin-bottom:10px;opacity:.6}.pm-mp-start-btn{margin-top:12px;padding:10px 20px!important;background:linear-gradient(135deg,#D7BF81,#C4A94F)!important;color:#0B0B0B!important;font-weight:700!important;border-radius:10px!important;border:none!important}.pm-mp-start-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgb(215 191 129 / .3)}.pm-mp-demo-btn{margin-top:12px;padding:10px 20px!important;background:rgb(156 39 176 / .12)!important;color:#CE93D8!important;font-weight:700!important;border-radius:10px!important;border:1px solid rgb(156 39 176 / .25)!important;display:inline-flex;align-items:center;gap:6px}.pm-mp-demo-btn:hover{transform:translateY(-2px);background:rgb(156 39 176 / .2)!important;box-shadow:0 4px 16px rgb(156 39 176 / .2)}.pm-mp-demo-btn svg{fill:none;stroke:currentColor}.pm-article-link{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:rgb(215 191 129 / .08);border:1px solid rgb(215 191 129 / .2);border-radius:10px;color:#D7BF81;font-size:.85rem;font-weight:600;cursor:pointer;transition:all 0.2s;text-decoration:none;margin:8px 4px}.pm-article-link:hover{background:rgb(215 191 129 / .15);border-color:#D7BF81;transform:translateY(-1px)}.pm-article-link svg{width:16px;height:16px;stroke:#D7BF81;fill:none;flex-shrink:0}.pm-lesson-articles{background:linear-gradient(135deg,#0B0B0B,#1A1A1A);border:1px solid #2A2A2A;border-radius:16px;padding:24px;margin:28px 0}.pm-lesson-articles-title{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700;color:#D7BF81;margin-bottom:16px}.pm-lesson-articles-title svg{width:20px;height:20px;stroke:#D7BF81;fill:none}.pm-lesson-articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pm-article-card{display:flex;flex-direction:column;padding:16px;background:#1A1A1A;border:1px solid #2A2A2A;border-radius:10px;cursor:pointer;transition:all 0.2s;text-decoration:none}.pm-article-card:hover{border-color:#D7BF81;transform:translateY(-2px);box-shadow:0 6px 20px rgb(0 0 0 / .3)}.pm-article-card-title{font-size:.85rem;font-weight:600;color:#E0E0E0;margin-bottom:6px;line-height:1.4}.pm-article-card-type{font-size:.7rem;color:gray;text-transform:uppercase;letter-spacing:.5px}.pm-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .85);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s}.pm-modal-overlay.visible{opacity:1;visibility:visible}.pm-modal{background:#1A1A1A;border:1px solid #2A2A2A;border-radius:16px;width:100%;max-width:700px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;transform:translateY(20px) scale(.98);transition:transform 0.3s}.pm-modal-overlay.visible .pm-modal{transform:translateY(0) scale(1)}.pm-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #2A2A2A;flex-shrink:0}.pm-modal-title{font-size:1.1rem;font-weight:700;color:#D7BF81;flex:1;margin-right:16px}.pm-modal-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#2A2A2A;border:1px solid #3A3A3A;border-radius:8px;cursor:pointer;transition:all 0.2s;color:gray;font-size:1.2rem;flex-shrink:0}.pm-modal-close:hover{background:#3A3A3A;color:#FFF}.pm-modal-body{padding:24px;overflow-y:auto;color:#E0E0E0;line-height:1.8;font-size:.95rem}.pm-modal-body h2,.pm-modal-body h3{color:#D7BF81;margin:20px 0 10px}.pm-modal-body h2{font-size:1.3rem}.pm-modal-body h3{font-size:1.1rem}.pm-modal-body p{margin-bottom:14px}.pm-modal-body ul,.pm-modal-body ol{margin:10px 0;padding-left:22px}.pm-modal-body li{margin-bottom:6px}.pm-modal-body img{max-width:100%;border-radius:8px;margin:12px 0}.pm-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid #2A2A2A;flex-shrink:0;gap:12px}.pm-modal-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all 0.2s;text-decoration:none;border:none;font-family:inherit}.pm-modal-btn-primary{background:linear-gradient(135deg,#D7BF81,#BEA86E);color:#0B0B0B}.pm-modal-btn-primary:hover{background:linear-gradient(135deg,#E6D4A8,#D7BF81);transform:translateY(-1px)}.pm-modal-btn-secondary{background:#2A2A2A;border:1px solid #3A3A3A;color:#CCC}.pm-modal-btn-secondary:hover{border-color:#D7BF81;color:#D7BF81}.pm-modal-loading{display:flex;align-items:center;justify-content:center;padding:60px 20px;color:gray}.pm-modal-loading::after{content:'';width:24px;height:24px;border:2px solid #2A2A2A;border-top-color:#D7BF81;border-radius:50%;animation:pm-spin 0.6s linear infinite;margin-left:12px}@keyframes pm-spin{to{transform:rotate(360deg)}}.pm-exercise-block{background:linear-gradient(135deg,#0B0B0B,#1A1A1A);border:1px solid #2A2A2A;border-radius:16px;padding:24px;margin:28px 0}.pm-exercise-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.pm-exercise-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:rgb(215 191 129 / .1);border:1px solid rgb(215 191 129 / .2);border-radius:20px;font-size:.75rem;font-weight:700;color:#D7BF81;text-transform:uppercase;letter-spacing:.5px}.pm-exercise-instructions{font-size:.95rem;color:#CCC;margin-bottom:16px;line-height:1.6}.pm-exercise-instructions strong{color:#D7BF81}@media (max-width:768px){.pm-mini-piano-wrapper{padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}.pm-mp-white{width:28px;height:110px}.pm-mp-black{width:18px;height:70px}.pm-mini-piano{height:110px}.pm-mini-piano-header{flex-direction:column;align-items:flex-start;gap:8px}.pm-mini-piano-controls{flex-wrap:wrap}.pm-mp-btn{padding:6px 12px;font-size:.75rem}.pm-modal{max-height:90vh}.pm-modal-header{padding:16px}.pm-modal-body{padding:16px}.pm-modal-footer{padding:12px 16px;flex-direction:column}.pm-lesson-articles-grid{grid-template-columns:1fr}.pm-mp-feedback{font-size:.82rem;padding:10px 14px}.pm-mp-exercise{font-size:.82rem;padding:10px 14px}.pm-mp-score{font-size:.78rem;gap:12px}}@media (max-width:480px){.pm-mini-piano-wrapper{padding:12px;border-radius:12px}.pm-mp-white{width:20px;height:80px}.pm-mp-black{width:13px;height:50px}.pm-mini-piano{height:80px}.pm-mp-white .pm-mp-note-label{font-size:.55rem;bottom:4px}.pm-mini-piano-title{font-size:.88rem}.pm-mp-btn{padding:5px 10px;font-size:.7rem;border-radius:6px}.pm-mp-start-btn{padding:8px 16px!important;font-size:.82rem;border-radius:8px!important}.pm-mp-demo-btn{padding:8px 14px!important;font-size:.78rem;border-radius:8px!important}.pm-mp-feedback{font-size:.78rem;padding:8px 12px;margin-top:10px;border-radius:8px}.pm-mp-exercise{font-size:.78rem;padding:8px 12px;margin-top:8px;border-radius:8px}.pm-mp-score{font-size:.72rem;gap:8px;margin-top:8px}.pm-modal{border-radius:12px}.pm-modal-header{padding:12px 16px}.pm-modal-body{padding:12px 16px;font-size:.88rem}.pm-modal-body h2{font-size:1.1rem}.pm-modal-body h3{font-size:.95rem}}@media (max-width:768px) and (orientation:landscape){.pm-mini-piano-wrapper{padding:10px 14px}.pm-mp-white{width:24px;height:90px}.pm-mp-black{width:16px;height:56px}.pm-mini-piano{height:90px}.pm-mini-piano-header{flex-direction:row;align-items:center}}@media (prefers-color-scheme:light){.pm-mini-piano-wrapper{background:linear-gradient(135deg,#FFF,#F8F8F8);border-color:#E0E0E0}.pm-mini-piano-title{color:#B8860B}.pm-mini-piano-title svg{stroke:#B8860B}.pm-mp-btn{background:#F0F0F0;border-color:#DDD;color:#555}.pm-mp-btn:hover{border-color:#B8860B;color:#B8860B}.pm-mp-btn.active{background:rgb(215 191 129 / .12);border-color:#B8860B;color:#B8860B}.pm-mp-feedback.info{background:rgb(215 191 129 / .1);border-color:rgb(215 191 129 / .25);color:#8B7A45}.pm-mp-feedback.success{background:rgb(76 175 80 / .1);border-color:rgb(76 175 80 / .25);color:#2E7D32}.pm-mp-feedback.error{background:rgb(244 67 54 / .1);border-color:rgb(244 67 54 / .25);color:#C62828}.pm-mp-exercise{background:rgb(215 191 129 / .06);border-color:rgb(215 191 129 / .15);color:#555}.pm-mp-exercise strong{color:#B8860B}.pm-mp-score{color:#666}.pm-mp-score-item .val{color:#B8860B}.pm-mp-midi-status{color:#B8860B}.pm-lesson-articles{background:linear-gradient(135deg,#FFF,#F8F8F8);border-color:#E0E0E0}.pm-lesson-articles-title{color:#B8860B}.pm-lesson-articles-title svg{stroke:#B8860B}.pm-article-card{background:#F8F8F8;border-color:#E0E0E0}.pm-article-card:hover{border-color:#B8860B}.pm-article-card-title{color:#333}.pm-article-card-type{color:#888}.pm-exercise-block{background:linear-gradient(135deg,#FFF,#F8F8F8);border-color:#E0E0E0}.pm-exercise-badge{background:rgb(215 191 129 / .08);border-color:rgb(215 191 129 / .15);color:#B8860B}.pm-exercise-instructions{color:#555}.pm-exercise-instructions strong{color:#B8860B}.pm-modal{background:#FFF;border-color:#E0E0E0}.pm-modal-header{border-bottom-color:#E0E0E0}.pm-modal-title{color:#B8860B}.pm-modal-close{background:#F0F0F0;border-color:#DDD;color:#666}.pm-modal-close:hover{background:#E0E0E0;color:#333}.pm-modal-body{color:#333}.pm-modal-body h2,.pm-modal-body h3{color:#B8860B}.pm-modal-footer{border-top-color:#E0E0E0}.pm-modal-btn-secondary{background:#F0F0F0;border-color:#DDD;color:#555}.pm-modal-btn-secondary:hover{border-color:#B8860B;color:#B8860B}.pm-article-card-img{background-color:#E0E0E0}}@media (prefers-reduced-motion:reduce){.pm-mini-piano-wrapper *,.pm-modal,.pm-modal-overlay,.pm-lcard,.pm-mp-white,.pm-mp-black{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important;scroll-behavior:auto!important}}