.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%;min-width:0;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:var(--pm-gold, #D7BF81)}.pm-mini-piano-title svg{width:20px;height:20px;stroke:var(--pm-gold, #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 .2s;font-family:inherit}.pm-mp-btn:hover{border-color:var(--pm-gold, #D7BF81);color:var(--pm-gold, #D7BF81)}.pm-mp-btn.active{background:#d7bf8126;border-color:var(--pm-gold, #D7BF81);color:var(--pm-gold, #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,#f0ebd8 40%,#e5dfc8,#ddd6be);border-right:1px solid #B0A888;border-bottom:4px solid #C8C0A0;border-radius:0 0 5px 5px;cursor:pointer;transition:background .08s,box-shadow .08s,transform .05s;box-shadow:0 6px 6px #0003,inset 0 -6px 10px #00000008;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,#f5f0e0,#ede7d0)}.pm-mp-white:active,.pm-mp-white.pressed{background:linear-gradient(180deg,#f0ebd8,#e5dfc8);box-shadow:0 2px #c8c0a0,0 3px 4px #00000026;transform:translateY(2px)}.pm-mp-white.highlight,.pm-mp-white.listen-active{background:linear-gradient(180deg,#FFE082 0%,var(--pm-gold, #D7BF81) 60%,var(--pm-gold-dark, #BEA86E) 100%)!important;box-shadow:0 4px #a89558,0 0 0 3px #d7bf818c,0 6px 18px #d7bf818c;transform:translateY(1px)}.pm-mp-white.listen-active{animation:pm-mp-listen-pulse .42s ease-out}@keyframes pm-mp-listen-pulse{0%{box-shadow:0 4px #a89558,0 0 #d7bf81b3}60%{box-shadow:0 4px #a89558,0 0 0 8px #d7bf814d}to{box-shadow:0 4px #a89558,0 0 0 3px #d7bf818c}}.pm-mp-white.correct{background:linear-gradient(180deg,#4caf50,#388e3c)!important;box-shadow:0 4px #2e7d32,0 6px 12px #4caf5066}.pm-mp-white.pm-mp-findc{background:linear-gradient(180deg,#F3D98A 0%,var(--pm-gold, #D7BF81) 100%)!important;z-index:3;animation:pm-mp-findc 1.9s ease}@keyframes pm-mp-findc{0%,to{box-shadow:0 4px #b0a888}15%,75%{box-shadow:inset 0 0 0 3px var(--pm-gold, #D7BF81),0 0 18px #d7bf81d9}}.pm-mp-white.wrong{background:linear-gradient(180deg,#f44336,#d32f2f)!important;box-shadow:0 4px #c62828,0 6px 12px #f4433666}.pm-mp-white .pm-mp-note-label{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:.7rem;font-weight:700;color:#888;pointer-events:none;opacity:0;transition:opacity .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 .pm-mp-note-label-black{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-size:.5rem;font-weight:700;line-height:1;color:var(--pm-gold-bright, #E6D4A8);pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}.pm-mini-piano.show-labels .pm-mp-note-label-black{opacity:.9}.pm-mp-black.highlight .pm-mp-note-label-black,.pm-mp-black.correct .pm-mp-note-label-black,.pm-mp-black.wrong .pm-mp-note-label-black{opacity:1;color:#fff}@media(max-width:480px){.pm-mp-black .pm-mp-note-label-black{display:none}}.pm-mp-black{position:absolute;top:0;height:64%;background:linear-gradient(180deg,#2a2a2a,#1a1a1a 60%,#111);border:1px solid #000;border-radius:0 0 3px 3px;cursor:pointer;transition:background .08s,box-shadow .08s,transform .05s;box-shadow:0 3px #000,0 4px 5px #0006,inset 0 -4px 8px #ffffff08;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,#2a2a2a)}.pm-mp-black:active,.pm-mp-black.pressed{background:linear-gradient(180deg,#222,#111);box-shadow:0 1px #000,0 2px 3px #0000004d;transform:translateY(2px)}.pm-mp-black.highlight,.pm-mp-black.listen-active{background:linear-gradient(180deg,#FFE082 0%,var(--pm-gold, #D7BF81) 50%,#A89558 100%)!important;box-shadow:0 3px #8b7a45,0 0 0 3px #d7bf8199,0 4px 14px #d7bf8199}.pm-mp-black.listen-active{animation:pm-mp-listen-pulse .42s ease-out}.pm-mp-black.correct{background:linear-gradient(180deg,#4caf50,#2e7d32)!important}.pm-mp-black.wrong{background:linear-gradient(180deg,#f44336,#c62828)!important}.pm-mp-feedback{margin-top:16px;padding:12px 20px;border-radius:10px;font-size:.9rem;font-weight:600;opacity:0;transition:opacity .3s,transform .3s;transform:translateY(4px)}.pm-mp-feedback.visible{opacity:1;transform:translateY(0)}.pm-mp-feedback.success{background:#4caf501f;border:1px solid rgba(76,175,80,.3);color:#4caf50}.pm-mp-feedback.error{background:#f443361f;border:1px solid rgba(244,67,54,.3);color:#f44336}.pm-mp-feedback.info{background:#d7bf811f;border:1px solid rgba(215,191,129,.3);color:var(--pm-gold, #D7BF81)}.pm-mp-exercise{margin-top:12px;padding:12px 20px;background:#d7bf8114;border:1px solid rgba(215,191,129,.2);border-radius:10px;font-size:.9rem;color:#ccc}.pm-mp-exercise strong{color:var(--pm-gold, #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:var(--pm-gold, #D7BF81);font-weight:700}.pm-mp-midi-status{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--pm-gold, #D7BF81);margin-bottom:10px;opacity:.6}.pm-mp-start-btn{margin-top:12px;padding:10px 20px!important;background:linear-gradient(135deg,var(--pm-gold, #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 #d7bf814d}.pm-mp-demo-btn{margin-top:12px;padding:10px 20px!important;background:#9c27b01f!important;color:#ce93d8!important;font-weight:700!important;border-radius:10px!important;border:1px solid rgba(156,39,176,.25)!important;display:inline-flex;align-items:center;gap:6px}.pm-mp-demo-btn:hover{transform:translateY(-2px);background:#9c27b033!important;box-shadow:0 4px 16px #9c27b033}.pm-mp-demo-btn svg{fill:none;stroke:currentColor}.pm-article-link{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:#d7bf8114;border:1px solid rgba(215,191,129,.2);border-radius:10px;color:var(--pm-gold, #D7BF81);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;margin:8px 4px}.pm-article-link:hover{background:#d7bf8126;border-color:var(--pm-gold, #D7BF81);transform:translateY(-1px)}.pm-article-link svg{width:16px;height:16px;stroke:var(--pm-gold, #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:var(--pm-gold, #D7BF81);margin-bottom:16px}.pm-lesson-articles-title svg{width:20px;height:20px;stroke:var(--pm-gold, #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 .2s;text-decoration:none}.pm-article-card:hover{border-color:var(--pm-gold, #D7BF81);transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.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:#000000d9;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .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 .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:var(--pm-gold, #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 .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:var(--pm-gold, #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 .2s;text-decoration:none;border:none;font-family:inherit}.pm-modal-btn-primary{background:linear-gradient(135deg,var(--pm-gold, #D7BF81),var(--pm-gold-dark, #BEA86E));color:#0b0b0b}.pm-modal-btn-primary:hover{background:linear-gradient(135deg,var(--pm-gold-bright, #E6D4A8),var(--pm-gold, #D7BF81));transform:translateY(-1px)}.pm-modal-btn-secondary{background:#2a2a2a;border:1px solid #3A3A3A;color:#ccc}.pm-modal-btn-secondary:hover{border-color:var(--pm-gold, #D7BF81);color:var(--pm-gold, #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:var(--pm-gold, #D7BF81);border-radius:50%;animation:pm-spin .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:#d7bf811a;border:1px solid rgba(215,191,129,.2);border-radius:20px;font-size:.75rem;font-weight:700;color:var(--pm-gold, #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:var(--pm-gold, #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,.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,.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}}html[data-theme=light] .pm-mini-piano-wrapper{background:linear-gradient(135deg,#fff,#f8f8f8);border-color:#e0e0e0}html[data-theme=light] .pm-mini-piano-title{color:#b8860b}html[data-theme=light] .pm-mini-piano-title svg{stroke:#b8860b}html[data-theme=light] .pm-mp-btn{background:#f0f0f0;border-color:#ddd;color:#555}html[data-theme=light] .pm-mp-btn:hover{border-color:#b8860b;color:#b8860b}html[data-theme=light] .pm-mp-btn.active{background:#d7bf811f;border-color:#b8860b;color:#b8860b}html[data-theme=light] .pm-mp-feedback.info{background:#d7bf811a;border-color:#d7bf8140;color:#8b7a45}html[data-theme=light] .pm-mp-feedback.success{background:#4caf501a;border-color:#4caf5040;color:#2e7d32}html[data-theme=light] .pm-mp-feedback.error{background:#f443361a;border-color:#f4433640;color:#c62828}html[data-theme=light] .pm-mp-exercise{background:#d7bf810f;border-color:#d7bf8126;color:#555}html[data-theme=light] .pm-mp-exercise strong{color:#b8860b}html[data-theme=light] .pm-mp-score{color:#666}html[data-theme=light] .pm-mp-score-item .val,html[data-theme=light] .pm-mp-midi-status{color:#b8860b}html[data-theme=light] .pm-lesson-articles{background:linear-gradient(135deg,#fff,#f8f8f8);border-color:#e0e0e0}html[data-theme=light] .pm-lesson-articles-title{color:#b8860b}html[data-theme=light] .pm-lesson-articles-title svg{stroke:#b8860b}html[data-theme=light] .pm-article-card{background:#f8f8f8;border-color:#e0e0e0}html[data-theme=light] .pm-article-card:hover{border-color:#b8860b}html[data-theme=light] .pm-article-card-title{color:#333}html[data-theme=light] .pm-article-card-type{color:#888}html[data-theme=light] .pm-exercise-block{background:linear-gradient(135deg,#fff,#f8f8f8);border-color:#e0e0e0}html[data-theme=light] .pm-exercise-badge{background:#d7bf8114;border-color:#d7bf8126;color:#b8860b}html[data-theme=light] .pm-exercise-instructions{color:#555}html[data-theme=light] .pm-exercise-instructions strong{color:#b8860b}html[data-theme=light] .pm-modal{background:#fff;border-color:#e0e0e0}html[data-theme=light] .pm-modal-header{border-bottom-color:#e0e0e0}html[data-theme=light] .pm-modal-title{color:#b8860b}html[data-theme=light] .pm-modal-close{background:#f0f0f0;border-color:#ddd;color:#666}html[data-theme=light] .pm-modal-close:hover{background:#e0e0e0;color:#333}html[data-theme=light] .pm-modal-body{color:#333}html[data-theme=light] .pm-modal-body h2,html[data-theme=light] .pm-modal-body h3{color:#b8860b}html[data-theme=light] .pm-modal-footer{border-top-color:#e0e0e0}html[data-theme=light] .pm-modal-btn-secondary{background:#f0f0f0;border-color:#ddd;color:#555}html[data-theme=light] .pm-modal-btn-secondary:hover{border-color:#b8860b;color:#b8860b}html[data-theme=light] .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:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.pm-note-quiz{background:linear-gradient(135deg,#141414,#0e0e0e);border:1.5px solid rgba(215,191,129,.18);border-radius:16px;padding:20px;margin:4px 0}.pm-nq-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.pm-nq-prompt{font-size:1.05rem;color:var(--pm-gold-bright, #E6D4A8)}.pm-nq-prompt strong{color:#fff;font-size:1.4rem}.pm-nq-score{font-size:.85rem;font-weight:700;color:#c9c2ba;background:#d7bf811a;border-radius:999px;padding:4px 12px;white-space:nowrap}.pm-nq-feedback{min-height:22px;margin-top:12px;text-align:center;font-size:.9rem;font-weight:600}.pm-nq-feedback.pm-nq-ok{color:#6fcf7f}.pm-nq-feedback.pm-nq-no{color:#e98a8a}.pm-nq-done{text-align:center;padding:20px 0}.pm-nq-done-icon{font-size:2.4rem}.pm-nq-done-title{font-size:1.2rem;font-weight:700;color:var(--pm-gold-bright, #E6D4A8);margin:6px 0}.pm-nq-done-score{color:#c9c2ba;margin-bottom:14px}html[data-theme=light] .pm-note-quiz{background:linear-gradient(135deg,#fff,#fafafa);border-color:#8b7a4540}html[data-theme=light] .pm-nq-prompt{color:#8b7a45}html[data-theme=light] .pm-nq-prompt strong{color:#1a1a1a}html[data-theme=light] .pm-nq-done-title{color:#8b7a45}