*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;color:#333;line-height:1.6;background:#000;overflow-x:hidden;overflow-y:auto}html,body{width:100%;height:100%}.user-profile-navbar{background:linear-gradient(to right,#34d399,#08714e);z-index:1001;padding:0 30px;position:relative}.navbar-header{height:60px;display:flex;justify-content:space-between;align-items:center;padding:0 16px}.navbar-hamburger{display:none;font-size:1.8rem;color:#fff;cursor:pointer;padding:6px 10px;line-height:1;margin:0}.navbar-links-group{display:flex;justify-content:space-between;align-items:center;gap:40px}.navbar-links{display:flex;align-items:center}.navbar-profile{display:flex;align-items:center}.navbar-profile-link{color:#fff;font-weight:700;text-decoration:none;padding:8px 12px;border:2px solid #10b981;border-radius:6px;transition:background .3s ease,color .3s ease}.navbar-profile-link:hover{background-color:#10b981;color:#fff}.navbar-feedback-button{background-color:transparent;color:#fff;padding:8px 14px;margin-left:20px;border:2px solid #fbbf24;border-radius:8px;font-weight:700;cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease}.navbar-feedback-button:hover{background-color:#fbbf24;border-color:#f59e0b;color:#065f46}@media (max-width: 768px){.navbar-hamburger{display:block}.navbar-links-group{position:absolute;top:60px;left:0;width:100%;background:#065f46;padding:10px 0;border-top:1px solid #10b981;display:none;flex-direction:column;align-items:stretch;z-index:1000;box-shadow:0 4px 8px #0000004d}.navbar-links-group.open{display:flex}.navbar-links{display:flex;flex-direction:column;width:100%;padding:10px 0}.navbar-links a{padding:12px 20px;margin:0;border-bottom:1px solid rgba(255,255,255,.1)}.navbar-signin-button{margin:10px 20px;padding:10px}.navbar-profile-link{width:100%;text-align:center;padding:12px 20px;margin:0;background-color:#10b981;border:none;border-radius:0;font-weight:700;color:#fff;transition:background .3s ease}.navbar-profile-link:hover{background-color:#059669;color:#fff}.navbar-feedback-button{margin:10px 20px;padding:10px;width:calc(100% - 40px);border-radius:6px;text-align:center;background-color:#fbbf24;border:none;color:#065f46;font-weight:700;transition:background .3s ease,color .3s ease}.navbar-feedback-button:hover{background-color:#f59e0b;color:#fff}}.home-wrapper{height:100vh;display:flex;flex-direction:column;background:linear-gradient(to bottom right,#fff,#9ff587);font-family:Segoe UI,sans-serif}.home-centered{flex:1;display:flex;align-items:center;justify-content:center;text-align:center}.home-welcome-text{font-size:2.8rem;color:#222}@font-face{font-family:revicons;fallback:fallback;src:url(/assets/revicons-DbTteTvA.woff) format("woff"),url(/assets/revicons-CBqxZnew.ttf) format("ttf"),url(/assets/revicons-BNIKeAUC.eot) format("ttf")}.react-multi-carousel-list{display:flex;align-items:center;overflow:hidden;position:relative}.react-multi-carousel-track{list-style:none;padding:0;margin:0;display:flex;flex-direction:row;position:relative;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,transition}.react-multiple-carousel__arrow{position:absolute;outline:0;transition:all .5s;border-radius:35px;z-index:1000;border:0;background:#00000080;min-width:43px;min-height:43px;opacity:1;cursor:pointer}.react-multiple-carousel__arrow:hover{background:#000c}.react-multiple-carousel__arrow:before{font-size:20px;color:#fff;display:block;font-family:revicons;text-align:center;z-index:2;position:relative}.react-multiple-carousel__arrow:disabled{cursor:default;background:#00000080}.react-multiple-carousel__arrow--left{left:calc(4% + 1px)}.react-multiple-carousel__arrow--left:before{content:""}.react-multiple-carousel__arrow--right{right:calc(4% + 1px)}.react-multiple-carousel__arrow--right:before{content:""}.react-multi-carousel-dot-list{position:absolute;bottom:0;display:flex;left:0;right:0;justify-content:center;padding:0;margin:0;list-style:none;text-align:center}.react-multi-carousel-dot button{display:inline-block;width:12px;height:12px;border-radius:50%;opacity:1;box-shadow:none;transition:background .5s;border-width:2px;border-style:solid;border-color:gray;padding:0;margin:0 6px 0 0;outline:0;cursor:pointer}.react-multi-carousel-dot button:hover:active,.react-multi-carousel-dot--active button{background:#080808}.react-multi-carousel-item{transform-style:preserve-3d;backface-visibility:hidden}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.react-multi-carousel-item{flex-shrink:0!important}.react-multi-carousel-track{overflow:visible!important}}[dir=rtl].react-multi-carousel-list{direction:rtl}.rtl.react-multiple-carousel__arrow--right{right:auto;left:calc(4% + 1px)}.rtl.react-multiple-carousel__arrow--right:before{content:""}.rtl.react-multiple-carousel__arrow--left{left:auto;right:calc(4% + 1px)}.rtl.react-multiple-carousel__arrow--left:before{content:""}.nitaipractices-wrapper{min-height:100vh;padding:60px 20px;background:linear-gradient(to bottom right,#80f,#0037ff);display:flex;flex-direction:column;align-items:center}.nitaipractices-heading{font-size:2.7rem;color:#2c3e50;font-weight:800;margin-bottom:40px;text-align:center}.nitaipractices-carousel{width:90%;max-width:1200px;margin:0 auto;position:relative}.nitaipractices-carousel-item{padding:5px;display:flex;justify-content:center}.nitaipractices-card{width:100%;max-width:320px;min-height:400px;background:linear-gradient(to bottom,#fff,#e0f7fa);border-radius:1px;padding:30px 24px;text-align:center;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 12px 30px #00000014;transition:transform .3s ease,box-shadow .3s ease}.nitaipractices-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px #0000001f}.nitaipractices-card h3{font-size:1.5rem;color:#1a2a3a;font-weight:700;margin-bottom:16px}.nitaipractices-card p{font-size:1.1rem;color:#546e7a;line-height:1.5;margin-bottom:24px;flex:1}.nitaipractices-card button{background:linear-gradient(to right,#00bcd4,#2196f3);color:#fff;font-size:1rem;font-weight:600;padding:12px 20px;border:none;border-radius:10px;box-shadow:0 6px 12px #2196f34d;cursor:pointer;transition:background .3s ease,transform .2s ease}.nitaipractices-card button:hover{background:linear-gradient(to right,#2196f3,#1976d2);transform:scale(1.05)}.react-multiple-carousel__arrow{background-color:#1976d2;border:none;width:42px;height:42px;border-radius:50%;top:50%;transform:translateY(-50%);box-shadow:0 4px 10px #00000026;transition:all .3s ease;z-index:10}.react-multiple-carousel__arrow:hover{background-color:#0d47a1;transform:scale(1.1) translateY(-50%)}.react-multi-carousel-dot button{width:10px;height:10px;background:#bbb;border:none;border-radius:50%;margin:0 6px;opacity:.7;transition:all .3s ease}.react-multi-carousel-dot--active button{background:#2196f3;transform:scale(1.3);box-shadow:0 0 6px #2196f380}.react-multi-carousel-item{display:flex!important;justify-content:center}.react-multiple-carousel__arrow--left{left:-0px}.react-multiple-carousel__arrow--right{right:-0px}.nitaipractices-ad-placeholder{width:728px;height:90px;background-color:#fff600;color:#333;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px dashed #c0b800;border-radius:8px;margin-bottom:30px;box-shadow:0 0 8px #0000001a}@media (max-width: 768px){.nitaipractices-ad-placeholder{width:100%;max-width:90%;height:auto;padding:20px;font-size:.9rem;text-align:center}}.mymusic-footer{background-color:#5f5a5a;color:#e2e8f0;padding:20px 40px;font-family:Segoe UI,sans-serif}.footer-content{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}.footer-left h3{margin:0;font-size:1.5rem}.footer-left p{margin:4px 0 0;font-size:.9rem;color:#94a3b8}.footer-links a{margin:0 10px;color:#cbd5e1;text-decoration:none;font-size:.9rem;transition:color .2s}.footer-links a:hover{color:#38bdf8}.footer-right p{font-size:.8rem;color:#64748b;margin:0}@media (max-width: 600px){.footer-content{flex-direction:column;align-items:flex-start}.footer-links{display:flex;flex-wrap:wrap;gap:10px}}.video-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.video-wrapper video{width:80%;height:auto;border-radius:6px;background:#000;display:block;margin:0 auto}.course-page{display:flex;flex-direction:column;min-height:100vh;overflow:hidden}.course-fixed-navbar{position:fixed;top:0;left:0;width:100%;z-index:999}.course-navbar{height:60px;background:#23b000;color:#fff;display:flex;align-items:center;padding:0 24px}.course-content{flex:1;display:grid;height:calc(100vh - 60px);overflow:hidden;grid-template-columns:2.75fr 2.75fr 2.75fr 1.75fr;grid-template-rows:3fr 3fr 1fr 1fr;gap:16px;padding:16px}.video-player{grid-column:1 / 4;grid-row:1 / 3;background:#000}.video-player video,.video-player iframe{width:100%;height:100%;border-radius:6px}.course-details{grid-column:1 / 4;grid-row:3 / 5;background:#fff;padding:24px;overflow-y:auto;border-radius:8px;box-shadow:0 4px 12px #0000001a}.course-details{width:100%;padding:16px;font-size:.95rem;max-height:40vh;overflow-y:auto;border-radius:12px;background:#fff}.course-details h2{margin-bottom:16px;font-size:1.8rem;color:#2a2a2a;border-bottom:2px solid #b0bec5;padding-bottom:8px}.course-details p{line-height:1.7;font-size:1.1rem;color:#4a4a4a;white-space:pre-line}.course-sidebar{grid-column:4 / 5;grid-row:1 / 5;background:#f9f9f9;padding:16px;overflow-y:auto;border-radius:8px;box-shadow:-2px 0 12px #0000000d}.course-section-header{width:100%;text-align:left;padding:14px 16px;font-weight:700;font-size:1.1rem;background:transparent;border:none;border-top:1px solid #d0d0d0;cursor:pointer;color:#2a2a2a;transition:background .3s}.course-section-header:hover{background:#eee}.course-sidebar>.course-section-header:first-of-type{border-top:none}.course-episode-list{list-style:none;margin:0;padding:0}.course-episode-item-wrapper{display:flex;align-items:center;gap:10px;padding:8px 0;flex-wrap:nowrap}.episode-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;border:2px solid #23b000;border-radius:4px;background-color:#fff;cursor:pointer;position:relative;transition:background .2s,border-color .2s;flex-shrink:0;z-index:1;margin-right:4px}.episode-checkbox:checked{background-color:#23b000;border-color:#23b000}.episode-checkbox:checked:before{content:"✓";position:absolute;top:-1px;left:3px;font-size:14px;color:#fff;font-weight:700}.course-episode-item{flex:1;text-align:left;padding:12px 8px;font-size:1rem;color:#37474f;background:transparent;border:none;cursor:pointer;transition:background .3s,color .3s;z-index:0}.course-episode-item:hover{background:#f0f0f0}.course-episode-item.active{background:#c8e2cf;color:#080000;font-weight:700}@media (min-width: 1600px){.course-content{grid-template-columns:2.5fr 2.5fr 2.5fr 2fr}}.course-footer{background:#1f1f1f;color:#ccc;text-align:center;padding:20px 16px;font-size:.95rem;letter-spacing:.5px;border-top:1px solid #333}.episode-duration{font-size:.9rem;color:#666;margin-left:6px}.open-fullview-button{padding:10px 16px;background:#6b8559;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:1rem;transition:background .3s}.open-fullview-button:hover{background:#00ff15}.description-link{color:#b6e692;cursor:pointer;text-decoration:underline;transition:color .3s}.description-link:hover{color:#437049}.course-title-heading{color:#fff;background-color:#050505;text-align:center;margin:0 auto}@media (max-width: 768px){.course-content{display:flex;flex-direction:column;height:auto;padding:12px;gap:24px}.video-player{height:200px;width:100%;border-radius:8px;overflow:hidden}.video-player video{width:100%;height:100%;object-fit:cover}.course-details{width:100%;padding:16px;font-size:.95rem}.course-sidebar{width:100%;padding:16px;border-radius:12px;box-shadow:none;background:#f0fdf4}.course-section-header{font-size:1rem;padding:10px 12px}.course-episode-item-wrapper{flex-wrap:nowrap;gap:6px;align-items:center}.episode-checkbox{width:14px;height:14px;margin-right:4px;flex-shrink:0}.course-episode-item{flex:1;font-size:.9rem;padding:8px 4px;line-height:1.3}.episode-duration{font-size:.75rem}}.fullview-page{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(to bottom right,#f3e5f5,#ede7f6);font-family:Segoe UI,sans-serif;color:#333}.fullview-navbar{background:linear-gradient(to bottom right,#6dca73,#0f3);color:#fff;padding:20px;text-align:center;font-size:2rem;font-weight:700;letter-spacing:1px}.fullview-content{flex:1;display:flex;justify-content:center;align-items:start;padding:40px 20px}.fullview-description{max-width:800px;width:100%;background:#fff;border-radius:12px;padding:32px;box-shadow:0 4px 20px #0000001a}.fullview-description h2{font-size:1.8rem;color:#457043;margin-bottom:20px;text-align:center}.fullview-description p{font-size:1.1rem;line-height:1.8;white-space:pre-line;color:#444;text-align:justify}@media (max-width: 768px){.fullview-description{padding:20px;margin:0 10px}.fullview-navbar{font-size:1.5rem}}.user-profile-container{position:relative;min-height:100vh;background:linear-gradient(to bottom right,#d4fcd7,#a4e7b1);font-family:Segoe UI,sans-serif;overflow-x:hidden}.user-profile-fixed-header{position:fixed;top:0;left:0;width:100%;z-index:1000;background:#fff;box-shadow:0 4px 12px #00000014}.user-profile-navbar{height:60px;background:linear-gradient(to right,#34d399,#08714e);display:flex;justify-content:space-between;align-items:center;padding:0 30px;z-index:1001}.navbar-logo{font-size:1.5rem;font-weight:700;color:#fff}.navbar-links a{margin-left:20px;text-decoration:none;color:#fff;font-weight:500;transition:color .2s ease}.navbar-links a:hover{color:#c7f9cc}.user-profile-banner{height:130px;width:100%;background:linear-gradient(to right,#34d399,#08714e);box-shadow:0 4px 12px #00000026;z-index:1000}.user-profile-subnavbar{background-color:#fff;padding:12px 40px;display:flex;gap:30px;justify-content:center;border-bottom:1px solid #ddd;z-index:999}.user-profile-subnavbar button{background:none;border:none;font-size:1rem;font-weight:500;color:#333;cursor:pointer;transition:color .2s ease}.user-profile-subnavbar button:hover{color:#16a34a}.user-profile-image-wrapper{position:fixed;top:100px;left:40px;width:140px;height:140px;border-radius:50%;overflow:hidden;border:4px solid white;box-shadow:0 4px 8px #0003;background-color:#fff;z-index:1002}.user-profile-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.user-profile-plus-button{position:fixed;top:198px;left:138px;width:32px;height:32px;border-radius:50%;border:none;background-color:#065f46;color:#fff;font-size:20px;font-weight:700;cursor:pointer;box-shadow:0 2px 6px #0000004d;z-index:1002;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.user-profile-plus-button:hover{transform:scale(1.1)}.user-profile-dropdown{position:absolute;top:33px;left:-10px;background:#064e3b;border:1px solid #ccc;border-radius:8px;padding:8px;width:200px;max-height:300px;overflow-y:auto;box-shadow:0 4px 12px #0003;z-index:1003}.user-profile-dropdown::-webkit-scrollbar{width:6px}.user-profile-dropdown::-webkit-scrollbar-thumb{background:#10b981;border-radius:4px}.user-profile-option{display:flex;align-items:center;gap:10px;padding:6px;border-radius:6px;cursor:pointer;transition:background .2s;color:#fff}.user-profile-option img{width:36px;height:36px;border-radius:50%;object-fit:cover}.user-profile-option:hover{background:#065f46}.user-profile-content{margin-top:300px;padding:40px 40px 40px 200px}.user-profile-welcome{font-size:2.5rem;font-weight:600;color:#14532d;margin-bottom:40px}.user-profile-section{margin-bottom:80px}.user-profile-section h3{font-size:2rem;color:#065f46;margin-bottom:30px;border-left:6px solid #10b981;padding-left:14px}.user-profile-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px;padding:16px}.user-profile-card{display:flex;align-items:center;justify-content:center;min-height:120px;background:linear-gradient(to bottom right,#e6f4ea,#fff);padding:20px;border-radius:20px;box-shadow:0 4px 12px #0000001a;text-decoration:none;color:#1e3a2f;font-size:1.15rem;font-weight:600;text-align:center;transition:all .25s ease}.user-profile-card:hover{background:linear-gradient(to bottom right,#bbf7d0,#fff);transform:translateY(-6px) scale(1.02);box-shadow:0 8px 20px #0000001f;color:#14532d}.navbar-signin-button{background-color:#10b981;color:#fff;padding:8px 14px;margin-left:20px;border-radius:8px;text-decoration:none;font-weight:700;transition:background .3s ease}.navbar-signin-button:hover{background-color:#059669}.user-profile-practice-list{display:flex;flex-direction:column;gap:24px}.user-practice-item{display:flex;align-items:center;background:#fff;padding:20px 24px;border-radius:16px;box-shadow:0 2px 10px #00000014;gap:24px;transition:transform .2s ease,box-shadow .2s ease}.user-practice-item:hover{transform:translateY(-2px);box-shadow:0 4px 14px #0000001a}.practice-logo-img{width:80px;height:80px;object-fit:contain;border-radius:8px;background-color:transparent}.practice-info{flex:1}.practice-info h4{margin:0;font-size:1.2rem;color:#065f46}.practice-info p{margin:6px 0 0;font-size:.95rem;color:#334155;max-width:600px}.practice-actions{display:flex;flex-direction:column;gap:8px}.practice-play-btn,.practice-performance-btn{background-color:#10b981;color:#fff;border:none;padding:10px 18px;border-radius:8px;font-size:.9rem;font-weight:500;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s ease}.practice-play-btn:hover,.practice-performance-btn:hover{background-color:#059669}.practice-stats{margin-top:10px;display:flex;gap:24px;font-size:.9rem;font-weight:500;color:#1e3a8a}.practice-logo-wrapper{width:80px;height:80px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 1px 4px #0000000f}@media (max-width: 768px){.user-profile-content{padding:20px;margin-top:400px}.user-profile-image-wrapper{top:120px;left:20px;width:100px;height:100px;z-index:900}.user-profile-plus-button{top:190px;left:90px;width:28px;height:28px;font-size:16px;z-index:900}.user-profile-subnavbar{flex-direction:column;gap:12px;padding:16px}.user-profile-welcome{font-size:1.8rem}.user-practice-item{flex-direction:column;align-items:flex-start;gap:16px;padding:16px}.practice-actions{flex-direction:row;gap:10px;width:100%;justify-content:space-between}.practice-logo-wrapper,.practice-logo-img{width:60px;height:60px}.practice-info h4{font-size:1rem}.practice-info p{font-size:.85rem}.practice-stats{flex-direction:column;gap:6px;font-size:.85rem}.user-profile-cards{grid-template-columns:1fr}.user-profile-card{font-size:1rem}.user-profile-section h3{font-size:1.5rem}}.user-profile-guest-warning{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;padding:.8rem 1rem;margin:0 auto 2rem;max-width:600px;text-align:center;font-size:1.05rem;border-radius:8px}.user-profile-guest-warning a{color:#9a3412;font-weight:600;text-decoration:underline}.user-course-card-link{text-decoration:none;color:inherit;border:1px solid #ccc;border-radius:10px;padding:16px 20px;background:linear-gradient(to bottom right,#f7fef9,#d1fae5);transition:transform .2s,box-shadow .2s;display:block;margin-bottom:16px}.user-course-card-link:hover{transform:scale(1.015);box-shadow:0 6px 12px #0000001a}.user-profile-card-title{font-size:1.3rem;font-weight:700;color:#065f46;margin-bottom:8px}.user-profile-card-separator{border-top:1px solid #cbd5e1;margin:8px 0}.user-profile-card-description{font-size:.9rem;color:#334155;margin-top:8px}.user-profile-course-progress{font-size:1rem;margin-top:12px;color:#065f46;font-weight:600}.user-profile-card.user-article-card{display:flex;justify-content:space-between;align-items:center;padding:12px;margin-bottom:10px;border:1px solid #ddd;border-radius:10px;background:#ffffff80}.user-profile-article-link{flex:1;text-decoration:none;color:#222;font-weight:500}.article-read-toggle{background:none;border:none;font-size:22px;cursor:pointer;padding:0 10px}.article-read-toggle.read{color:green}.practice-showcase-wrapper{min-height:100vh;font-family:Segoe UI,sans-serif;background-color:#fff;display:flex;flex-direction:column}.practice-fixed-navbar{position:fixed;top:0;left:0;width:100%;z-index:999;background-color:#fff;box-shadow:0 2px 6px #00000014}.practice-navbar-spacer{height:90px}.practice-sub-navbar{display:flex;overflow-x:auto;white-space:nowrap;background-color:#f9fafb;padding:4px 12px;border-bottom:1px solid #e5e7eb;box-shadow:inset 0 -1px #e5e7eb;gap:8px;scrollbar-width:thin;margin-bottom:-1px}.practice-sub-button{background-color:#fff;color:#334155;border:1px solid #d1d5db;border-radius:6px;padding:3px 10px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 .5px 1px #00000005}.practice-sub-button:hover{background-color:#f1f5f9;border-color:#cbd5e1;color:#0f172a;box-shadow:0 1px 4px #0000000f}.practice-sub-button:active{background-color:#e2e8f0;transform:scale(.97);box-shadow:inset 0 1px 2px #00000014}.practice-scroll-container{flex:1;overflow-y:auto;padding-top:0}.practice-section{position:relative;height:calc(100vh - 60px);display:flex;flex-direction:column;justify-content:center;padding-left:80px;padding-right:80px;box-sizing:border-box;background:linear-gradient(to bottom right,#bbf7d0,#99f6e4)}.practice-count{position:absolute;bottom:40px;left:50%;transform:translate(-50%);font-size:1.2rem;font-weight:600;color:#065f46;background:#fff9;padding:6px 14px;border-radius:12px;box-shadow:0 2px 6px #0000001a}.practice-content{display:flex;align-items:center;justify-content:space-between;flex-grow:1}.practice-logo{flex:1;text-align:center;cursor:pointer;transition:transform .3s ease}.practice-logo:hover{transform:scale(1.05)}.practice-logo img{max-width:90%;max-height:90%;object-fit:contain;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.1))}.practice-description{flex:1;padding-left:60px;color:#064e3b}.practice-description h2{font-size:2.5rem;margin-bottom:20px;color:#047857}.practice-description p{font-size:1.2rem;line-height:1.6;margin-bottom:30px}.practice-description button{background-color:#10b981;color:#fff;font-size:1rem;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s ease}.practice-description button:hover{background-color:#059669}.practice-footer-wrapper{background-color:#fff}.practice-button-group{display:flex;gap:12px;margin-top:8px}.practice-log-wrapper{min-height:100vh;font-family:Segoe UI,sans-serif;background-color:#97f2c6;display:flex;flex-direction:column}.practice-log-fixed-navbar{position:fixed;top:0;left:0;width:100%;z-index:999}.practice-log-scroll-container{flex:1;display:flex;flex-direction:column;justify-content:flex-start}.practice-log-content{padding:60px 40px 40px;max-width:900px;margin:0 auto;background-color:#97f2c6;box-sizing:border-box;color:#333}.practice-log-title{font-size:2.6rem;font-weight:700;color:#14532d;text-align:center;margin-bottom:30px;text-shadow:0 1px 0 white}.log-actions-top{display:flex;justify-content:center;gap:24px;margin-bottom:36px}.log-button{background:#10b981;color:#fff;border:none;padding:12px 22px;border-radius:10px;font-weight:600;font-size:1rem;cursor:pointer;text-decoration:none;transition:background .25s ease,transform .2s ease}.log-button:hover{background:#0f766e;transform:translateY(-1px)}.log-entry-list{list-style:none;padding:0;margin:0}.log-entry{background:#fff;padding:22px 24px;border-radius:14px;margin-bottom:20px;box-shadow:0 6px 18px #0000000f;transition:transform .2s ease}.log-entry:hover{transform:translateY(-4px)}.log-entry-header{display:flex;justify-content:space-between;align-items:center;font-size:1rem;color:#2563eb;margin-bottom:10px}.entry-number{font-weight:700}.entry-date{font-style:italic;color:#475569}.log-entry-body{font-size:1rem;line-height:1.7;color:#1e293b}.log-entry-row{margin:6px 0}.loading-text,.empty-text{text-align:center;font-size:1.1rem;color:#334155;margin-top:40px}.log-sort-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0;font-size:1rem}.log-sort-select{padding:6px 10px;border-radius:6px;border:1px solid #ccc;font-size:1rem}.log-filter-controls{margin-top:1rem;margin-bottom:1.5rem;display:flex;gap:.5rem;align-items:center;justify-content:flex-start}.practice-log-subtitle{margin-top:-10px;margin-bottom:20px;font-size:1rem;text-align:center;color:#065f46;opacity:.85}.practice-log-subtitle strong{color:#166534}.log-summary-box{background:transparent;border:none;border-radius:10px;padding:0;margin-top:24px;transition:all .3s ease}.log-summary-box.open{background:#f0fdf4;border:1px solid #c6f6d5;padding:16px 20px;box-shadow:0 2px 6px #0000000d}.log-entry-list{margin-top:20px}.log-summary-box h3{font-size:1.4rem;color:#047857;margin-bottom:12px;font-weight:600;display:flex;align-items:center;gap:8px}.log-summary-box h3:before{content:"⏱️";font-size:1.2rem}.log-summary-box ul{list-style:none;padding:0;margin:0}.log-summary-box li{margin-bottom:8px;padding-left:12px;position:relative;font-size:1rem;color:#065f46}.log-summary-box li:before{content:"•";color:#10b981;font-size:1.2rem;position:absolute;left:0;top:0}.log-total-session-time{margin-left:16px;font-size:1.1rem;font-weight:500;align-self:center}footer{background:#0f766e;color:#fff;text-align:center;padding:20px 10px;font-size:.95rem;margin-top:auto;box-shadow:0 -1px 5px #0000001a}.light-page{background-color:#a4e7b1;color:#111827;min-height:100vh;font-family:Segoe UI,sans-serif;display:flex;flex-direction:column}.about-content{flex-grow:1;padding:80px 40px 100px;max-width:800px;margin:0 auto;color:#065f46;line-height:1.8}.about-content h1{font-size:2.8rem;margin-bottom:24px;text-align:center;text-shadow:0 1px 0 white}.instruction-practice-container{min-height:100vh;display:flex;flex-direction:column;background-color:#a4e7b1;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.instruction-practice-content{flex-grow:1;padding:60px 40px;max-width:900px;margin:0 auto;text-align:left;font-size:1.15rem;transition:all .3s ease}.instruction-practice-content h1{font-size:2.2rem;margin-bottom:24px;color:#065f46;border-bottom:2px solid #a7f3d0;padding-bottom:10px}.instruction-practice-content p{line-height:1.7;font-size:1.1rem;color:#1f2937;margin-bottom:16px}.instruction-practice-content ul{list-style:none;padding-left:0;margin-bottom:24px}.instruction-practice-content li{position:relative;padding-left:24px;margin-bottom:10px;color:#047857}.instruction-practice-content li:before{content:"✔";position:absolute;left:0;color:#10b981;font-weight:700}.instruction-practice-content strong{color:#0f766e}@media (max-width: 600px){.instruction-practice-content{padding:40px 20px;font-size:1rem}.instruction-practice-content h1{font-size:1.6rem}}.instruction-start-button{display:inline-block;padding:12px 24px;background-color:#10b981;color:#fff;font-weight:700;font-size:1.1rem;border-radius:8px;text-decoration:none;transition:background .3s ease,transform .2s ease}.instruction-start-button:hover{background-color:#059669;transform:translateY(-2px)}.light-page{background-color:#a4e7b1;color:#111827;min-height:100vh;display:flex;flex-direction:column}.auth-container{max-width:420px;margin:60px auto;padding:2.5rem;background:#f0fdf4;border:2px solid #a7f3d0;border-radius:12px;box-shadow:0 8px 18px #00640014;font-family:Segoe UI,sans-serif}.auth-container h2{text-align:center;color:#166534;margin-bottom:1.5rem;font-size:1.75rem}.auth-form{display:flex;flex-direction:column}.auth-form input{margin-bottom:1.2rem;padding:.8rem;border:1px solid #bbf7d0;border-radius:6px;font-size:1rem;background:#fff;transition:border-color .2s ease}.auth-form input:focus{border-color:#22c55e;outline:none;box-shadow:0 0 0 2px #a7f3d0}.auth-form button{padding:.9rem;background:#22c55e;color:#fff;font-size:1rem;font-weight:600;border:none;border-radius:6px;cursor:pointer;transition:background .3s ease}.auth-form button:hover{background:#16a34a}.auth-link-text{margin-top:1rem;text-align:center;font-size:.95rem}.auth-link{color:#10b981;text-decoration:none;font-weight:700}.auth-link:hover{text-decoration:underline}.articles-wrapper{min-height:100vh;font-family:Segoe UI,sans-serif;background-color:#a4e7b1;display:flex;flex-direction:column}.articles-scroll-container{flex:1;overflow-y:auto}.articles-list-container{padding:80px 40px 100px;background-color:#a4e7b1;box-sizing:border-box}.articles-heading{font-size:2.8rem;font-weight:700;color:#065f46;margin-bottom:48px;text-align:center;text-shadow:0 1px 0 white}.articles-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;max-width:1200px;margin:0 auto;padding:0 10px}.article-card{background:#fff;padding:26px 30px;border-radius:16px;box-shadow:0 6px 18px #0000000d;text-decoration:none;color:#065f46;transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #def7eb}.article-card h3{font-size:1.5rem;margin-bottom:12px;color:#047857}.article-card p{font-size:1.05rem;color:#334155;flex-grow:1;margin-bottom:24px;line-height:1.65}.article-card span.read-more{align-self:flex-start;font-weight:600;font-size:.95rem;color:#10b981;transition:color .2s ease}.article-card:hover{transform:translateY(-6px);box-shadow:0 12px 24px #00000014}.article-card:hover span.read-more{color:#059669;text-decoration:underline}.articles-fixed-navbar{position:fixed;top:0;left:0;width:100%;z-index:999}.article-card-image{width:100%;height:180px;object-fit:cover;border-radius:12px;margin-bottom:18px}.checkmark{cursor:pointer;font-size:1.2rem;margin-left:8px;-webkit-user-select:none;user-select:none;transition:transform .15s ease}.checkmark:hover{transform:scale(1.3)}.article-layout{display:flex;justify-content:center;padding:40px;background-color:#a4e7b1;font-family:Segoe UI,sans-serif;color:#1e3a2f}.article-page{max-width:800px;padding:60px 40px;border-radius:12px}.article-page h1{color:#065f46;margin-bottom:30px;font-size:2.5rem}.article-content p{line-height:1.7;margin-bottom:1.5rem}.article-content h3{color:#047857;margin-top:2rem}.ad-left,.ad-right{width:160px;min-height:400px;margin:0 20px;background-color:#ccc;display:flex;align-items:center;justify-content:center;color:#333;font-weight:700;border-radius:8px;font-size:1rem}@media (max-width: 1024px){.ad-left,.ad-right{display:none}.article-layout{padding:20px}}.playnote-container{text-align:center;padding:2rem;background:linear-gradient(to bottom,#56f6f9,#bdf6f9);min-height:100vh;font-family:Segoe UI,sans-serif}.playnote-title{font-size:2rem;margin-bottom:2rem;color:#333}.note-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.note-button{padding:1rem 2rem;font-size:1.2rem;border:none;border-radius:10px;background-color:#4c8bf5;color:#fff;cursor:pointer;box-shadow:0 4px 12px #00000026;transition:background-color .3s ease,transform .2s ease}.note-button:hover{background-color:#3a6fd9;transform:scale(1.05)}.playnote-title+.note-buttons{margin-top:1rem}.keyboard-container{display:flex;justify-content:center;align-items:flex-end;width:100%;height:30vh;padding:14px;overflow-x:hidden;background:transparent}.keyboard-octave{display:flex;flex:1;position:relative}.keyboard-white-keys{display:flex;flex:1;z-index:1}.keyboard-black-keys{position:absolute;top:0;left:0;width:100%;height:clamp(140px,24vh,242px);z-index:2}.keyboard-white-key{flex:1 1 0;min-width:40px;max-width:90px;height:clamp(200px,32vh,360px);background:linear-gradient(to bottom,#f1efec,#d4c9be);border:1px solid #bbb;border-bottom-width:3px;display:flex;align-items:flex-end;justify-content:center;font:700 1.3rem/1 Segoe UI,sans-serif;color:#18230f;position:relative;cursor:pointer;overflow:hidden;box-shadow:inset 0 -3px 4px #00000014;transition:background .15s ease}.keyboard-white-key:hover{background:linear-gradient(to bottom,#c3f7d5,#aaf4c5);box-shadow:inset 0 -4px 6px #00800040}.keyboard-black-key{position:absolute;transform:translate(-50%);width:clamp(25px,4vw,50px);height:clamp(140px,24vh,242px);background:linear-gradient(to bottom,#181a17,#0f1610);border-radius:4px;cursor:pointer;overflow:hidden;z-index:3;box-shadow:0 4px 12px #0000008c;transition:transform .15s,box-shadow .15s,background .15s}.keyboard-black-key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000b3}.keyboard-black-key:active{background:#1f7d53;transform:translate(-50%) scaleY(.98) translateY(1px)}.keyboard-Cs{left:12.85%}.keyboard-Ds{left:27.1%}.keyboard-Fs{left:56.6%}.keyboard-Gs{left:70.85%}.keyboard-As{left:85.15%}.keyboard-label{padding:6px;pointer-events:none;z-index:10}.flash-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}.keyboard-white-key.keyboard-flash .flash-overlay,.keyboard-black-key.keyboard-flash .flash-overlay{background:#32ff64b3;box-shadow:0 0 18px 6px #32ff6499;animation:keyFlash .6s ease-out;opacity:1;border:2px solid rgba(50,255,100,.8)}.keyboard-white-key.keyboard-blue .flash-overlay,.keyboard-black-key.keyboard-blue .flash-overlay{background:#00a0ffa6;box-shadow:0 0 18px 6px #00a0ff80;animation:keyFlash .65s ease-out;opacity:1;border:2px solid rgba(0,160,255,.8)}@keyframes keyFlash{0%{opacity:1;transform:scale(1.02)}60%{opacity:1;transform:scale(1.04)}to{opacity:0;transform:scale(1)}}@media (max-width: 1600px){.keyboard-black-key{width:clamp(20px,3.5vw,40px);height:clamp(120px,20vh,220px)}}.keyboard-demo-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#c2f86a,#18230f);color:#f1efec}.keyboard-demo-navbar{display:flex;flex-direction:column;align-items:flex-start;padding:20px 24px;gap:16px;border-bottom:2px solid #ffffff30}.keyboard-demo-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background:#27391c;border-radius:12px;border:2px solid #F1EFEC}.keyboard-demo-controls{display:flex;flex-direction:column;gap:14px;width:100%}.keyboard-demo-group{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.keyboard-demo-label{font-weight:700;color:#f1efec}.keyboard-demo-btn{padding:12px 20px;font-size:1.05rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border:none;border-radius:10px;cursor:pointer;transition:transform .2s ease}.keyboard-demo-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.keyboard-demo-dropdown{padding:10px 16px;font-size:1rem;font-weight:700;border:1px solid #ccc;border-radius:8px;background:#f1f1f1;color:#1a1a1a;min-width:120px}.keyboard-demo-keyboard-area{display:flex;justify-content:center;align-items:flex-end;flex-grow:1;padding:20px}.staff-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:#fdfdfd}.selected-note{font-size:1.2rem;color:#333;margin-bottom:20px}.staff-svg{width:100%;max-width:1600px;height:600px}.singnote-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;font-family:Segoe UI,sans-serif;background:linear-gradient(to bottom right,#c3f9c8,#8bd0a1);min-height:100vh;color:#1a3e2f}.singnote-title{font-size:2.5rem;margin-bottom:20px}.singnote-button{background:linear-gradient(135deg,#38b27a,#2b8559);border:none;padding:12px 24px;border-radius:10px;color:#fff;font-size:1.2rem;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.singnote-button:hover{transform:scale(1.05);box-shadow:0 0 12px #0003}.singnote-note{margin-top:30px;font-size:2rem;font-weight:700;color:#0f5132}:root{--white-key-width: 90px;--white-key-height: 360px;--black-key-width: 50px;--black-key-height: 242px}.keyboard-view-container{background-color:transparent!important;display:flex;align-items:flex-end;justify-content:center;width:100%;height:30vh;padding:14px;overflow-x:auto}.octave{position:relative;width:calc(var(--white-key-width) * 7);display:flex;flex-shrink:0}.white-keys{display:flex;z-index:1;width:100%}.white-key{width:var(--white-key-width);height:var(--white-key-height);background:linear-gradient(to bottom,#f1efec,#d4c9be);border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:2px solid #999;margin:0;display:flex;align-items:flex-end;justify-content:center;font-size:1.3rem;font-weight:700;box-shadow:inset 0 -3px 4px #00000014;transition:background .2s ease,box-shadow .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;color:#18230f}.white-key:hover{background:linear-gradient(to bottom,#e6e1dc,#cdbfb3);box-shadow:inset 0 -4px 6px #00000026}.white-key:active{background:#d4c9be}.white-key .label{padding:6px}.black-keys{position:absolute;top:0;left:0;width:100%;height:var(--black-key-height);z-index:2;pointer-events:none}.black-key{position:absolute;width:var(--black-key-width);height:var(--black-key-height);background:linear-gradient(to bottom,#18230f,#0f1610);border-radius:3px;transform:translate(-50%);box-shadow:0 4px 12px #00000080;pointer-events:auto;cursor:pointer;z-index:3;transition:background .2s ease,transform .15s ease,box-shadow .15s ease}.black-key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000a6}.black-key:active{background:#1f7d53;transform:translate(-50%) scaleY(.98) translateY(1px);box-shadow:0 2px 6px #0006}.black-key.Cs{left:12.85%}.black-key.Ds{left:27.1%}.black-key.Fs{left:56.6%}.black-key.Gs{left:70.85%}.black-key.As{left:85.15%}.key-green{background:#1f7d53!important;color:#f1efec;box-shadow:0 0 10px #1f7d5388}.key-turquoise{background:#30d5c8!important;color:#fff;box-shadow:0 0 10px #30d5c888}.key-lightblue{background:#9ad0ec!important;color:#fff;box-shadow:0 0 10px #9ad0ec88}.key-blue{background:#4ab4ff!important;color:#fff;box-shadow:0 0 10px #4ab4ff88}.white-key.correct-flash,.black-key.correct-flash{background-color:#4cff4c!important;background-image:none!important;color:#000!important;box-shadow:0 0 12px #4cff4c!important;z-index:9999}.white-key.wrong-flash,.black-key.wrong-flash{background-color:#ff4c4c!important;background-image:none!important;color:#fff!important;box-shadow:0 0 12px #ff4c4c!important;z-index:9999}.container_game{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec}.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px;background-color:transparent;color:#f1efec;z-index:2;position:relative}.navbar-left{display:flex;align-items:center;gap:10px}.logo-title{font-size:1.5rem;font-weight:700;padding:5px 10px;background-color:#27391c;border-radius:10px;border:2px solid #F1EFEC;color:#f1efec}.c-note-btn,.current-btn,.start-btn{padding:8px 16px;border:none;border-radius:8px;font-size:1rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease}.c-note-btn:hover,.current-btn:hover,.start-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.navbar-stats{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:700;background:#27391c;padding:8px 16px;border-radius:12px;border:2px solid #F1EFEC;box-shadow:2px 4px 10px #0000004d;color:#f1efec}.stat{padding:6px 14px;border-radius:8px;border:2px solid #F1EFEC;min-width:42px;text-align:center;background-color:#27391c;transition:transform .25s ease,background-color .3s ease;animation:pulseFade .35s ease;color:#f1efec}.stat.correct{background-color:#5cff70;border-color:#1f7d53;color:#18230f}.stat.wrong{background-color:#ff4c4c;border-color:#c0392b;color:#f1efec}.stat.current{background-color:#ffe99e;border-color:#f39c12;color:#18230f}.stat.total{background-color:#d4c9be;border-color:#666}.stat.tries{background-color:#b5c2a4;border-color:#255f38;color:#18230f}@keyframes pulseFade{0%{transform:scale(1.15);opacity:.4}to{transform:scale(1);opacity:1}}.summary{padding:10px 20px;font-size:1.1rem;text-align:center;color:#f1efec}.letter-buttons-area{height:30vh;background-color:transparent;padding:10px;display:grid;gap:10px;align-items:stretch;justify-items:stretch}.letter-btn{width:100%;height:100%;font-size:2rem;border:2px solid #F1EFEC;border-radius:8px;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:10}.popup{background:#d4c9be;padding:2rem;border-radius:15px;text-align:center;width:90%;max-width:400px;box-shadow:0 8px 20px #0000004d;color:#18230f}.popup h2{margin-bottom:1rem;color:#18230f}.popup p{font-size:1.1rem;margin:.5rem 0;color:#18230f}.popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}@keyframes flash-green{0%{background-color:#4cff4c!important}to{background-color:inherit}}@keyframes flash-red{0%{background-color:#ff4c4c!important}to{background-color:inherit}}.container_settings{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec}.navbar{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;background-color:transparent;font-size:1.15rem}.dropdown,.octave-dropdown{position:relative;display:inline-block}.dropdown:hover .dropdown-content,.octave-dropdown:hover .dropdown-content{display:flex}.octave-dropdown .dropdown-content{flex-direction:column;left:0;top:100%}.dropbtn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .3s ease}.dropbtn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53);box-shadow:0 6px 14px #00000040}.dropdown-content{display:none;position:absolute;top:110%;left:0;background-color:#f1efec;color:#18230f;padding:12px;box-shadow:0 2px 6px #0000004d;z-index:1;border-radius:12px}.dropdown-content .column{display:flex;flex-direction:column;gap:8px}.dropdown-content label{font-size:1rem;cursor:pointer}.nav-controls{display:flex;align-items:center;gap:24px}.round-control,.octave-control{display:flex;flex-direction:column;font-size:1rem;gap:6px}input.rounds-input{width:80px;font-size:1.1rem;padding:6px 10px;border-radius:10px;border:2px solid #F1EFEC;background-color:#27391c;color:#f1efec;text-align:center}.octave-checkboxes{display:flex;flex-direction:column;gap:6px}.octave-checkboxes label{display:flex;align-items:center;gap:8px;font-size:1rem;cursor:pointer}.start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #00000040}.start-btn:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.07);box-shadow:0 8px 18px #0000004d}.summary{padding:12px 24px;font-size:1.2rem;text-align:center;color:#f1efec}.letter-buttons-area{height:30vh;background-color:transparent;padding:14px;display:grid;gap:12px;align-items:stretch;justify-items:stretch}.letter-btn{width:100%;height:100%;font-size:2.2rem;font-weight:700;border:2px solid #F1EFEC;border-radius:10px;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.letter-btn:hover{background-color:#27391c;transform:scale(1.03)}.letter-btn.correct-flash{background-color:#5cff70!important;color:#18230f!important;transform:scale(1.05)}.letter-btn.wrong-flash{background-color:#ff4c4c!important;color:#f1efec!important;transform:scale(1.05)}.scale-note-wrapper{display:flex;gap:12px;align-items:center}.rounds-container.horizontal{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:600;background:#1f7d53;padding:10px 14px;border-radius:10px;border:2px solid #F1EFEC;color:#f1efec}.rounds-container.horizontal input.rounds-input:focus{border-color:#f1efec;outline:none;box-shadow:0 0 6px #f1efec}.harmonygame-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec;overflow:hidden}.harmonygame-navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;min-height:80px}.harmonygame-navbar-left{display:flex;align-items:center;gap:14px}.harmonygame-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background-color:#27391c;border-radius:12px;border:2px solid #F1EFEC}.harmonygame-btn{padding:14px 20px;font-size:1.1rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border:none;border-radius:10px;cursor:pointer;transition:transform .2s ease}.harmonygame-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.harmonygame-start-btn{padding:14px 24px!important;font-size:1.1rem}.harmonygame-stats{display:flex;gap:8px;align-items:center;font-weight:700;font-size:1.1rem;background:#27391c;padding:6px 12px;border-radius:12px;border:2px solid #F1EFEC}.harmonygame-stat{background-color:#d4c9be;border-radius:6px;padding:6px 10px;color:#18230f;min-width:30px;text-align:center}.harmonygame-stat.correct{background-color:#5cff70}.harmonygame-stat.wrong{background-color:#ff4c4c;color:#fff}.harmonygame-stat.current{background-color:#ffe99e}.harmonygame-stat.tries{background-color:#ccc}.harmonygame-fill-space{flex-grow:1}.harmonygame-bottom{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}.harmonygame-chords{display:grid;gap:12px;padding:14px 16px;align-items:stretch;justify-items:stretch;width:100%;box-sizing:border-box;max-height:22vh;overflow-y:auto;margin-bottom:10px}.harmonygame-chord-btn{width:100%;height:100%;font-size:2.2rem;font-weight:700;border:2px solid #F1EFEC;border-radius:10px;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.harmonygame-chord-btn:hover{background-color:#27391c;transform:scale(1.03)}.harmonygame-keyboard{width:100vw;padding-bottom:12px;overflow-x:hidden}.harmonygame-flash-correct{animation:harmonygameFlashGreen .4s ease}.harmonygame-flash-wrong{animation:harmonygameFlashRed .4s ease}.harmonygame-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.harmonygame-popup{background:#93fc79;color:#18230f;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 20px #0006;max-width:400px;width:90%}.harmonygame-popup h2{margin-bottom:1rem}.harmonygame-popup p{font-size:1.1rem;margin:.5rem 0}.harmonygame-popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.harmonygame-popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.harmonygame-popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}@keyframes harmonygameFlashGreen{0%{background-color:#4cff4c!important}to{background-color:inherit}}@keyframes harmonygameFlashRed{0%{background-color:#ff4c4c!important}to{background-color:inherit}}.harmonygame-btn.bounce-flash{animation:bounceFlash .6s infinite}.harmonygame-start-btn.start-active{font-weight:700;transform:scale(1.1);background:linear-gradient(45deg,#9fff92,#13ff91,#15f50d);background-size:300% 300%;color:#18230f;border:2px solid #fff;border-radius:16px;box-shadow:0 0 18px #ffe600cc;animation:bouncePulse 1.6s infinite ease-in-out,gradientGlow 5s infinite alternate;transition:all .3s ease}.harmonygame-start-btn.start-active:hover{transform:scale(1.15);box-shadow:0 0 26px #ffe600f2;background:linear-gradient(45deg,#f8f8f8,#241e1c,#293332);background-size:300% 300%}@media screen and (max-height: 500px) and (orientation: landscape){.floating-message{top:20px;font-size:.95rem;padding:6px 14px;z-index:10;max-width:90vw;text-align:center}.harmonygame-chords{margin-bottom:2px;padding-bottom:0;max-height:32vh;gap:6px}.harmonygame-keyboard{padding-bottom:2px}}@media only screen and (max-width: 1000px) and (orientation: landscape){.harmonygame-popup{max-width:280px;max-height:80vh;padding:1rem 1.2rem;font-size:.9rem;border-radius:10px;text-align:center;overflow-y:auto;box-shadow:0 6px 16px #0006;background:#93fc79;color:#18230f;border:2px solid #5CFF70;scrollbar-width:thin;scrollbar-color:#4d4d4d #e0e0e0}.harmonygame-popup h2{font-size:1rem;margin-bottom:.6rem;color:#000501}.harmonygame-popup p{font-size:.85rem;margin:.4rem 0;color:#000}.harmonygame-popup-buttons{display:flex;flex-direction:column;gap:8px;margin-top:12px}.harmonygame-popup-buttons button{font-size:.9rem;padding:.6rem .75rem;border-radius:8px;font-weight:700;border:none;cursor:pointer;box-shadow:0 2px 6px #0000004d;background:linear-gradient(to right,#1f7d53,#255f38);color:#f8f8f8;transition:background .3s ease,transform .2s ease}.harmonygame-popup-buttons button:hover{transform:scale(1.04);background:linear-gradient(to right,#255f38,#1f7d53)}.harmonygame-popup::-webkit-scrollbar{width:8px}.harmonygame-popup::-webkit-scrollbar-track{background:#e0e0e0}.harmonygame-popup::-webkit-scrollbar-thumb{background-color:#4d4d4d;border-radius:6px;border:2px solid transparent;background-clip:content-box}}.harmony-keyboard-container{background-color:transparent!important;display:flex;align-items:flex-end;justify-content:center;width:100%;height:30vh;padding:14px;overflow-x:hidden}.harmony-octave{display:flex;flex:1 1 0;position:relative}.harmony-white-keys{display:flex;flex:1;z-index:1}.harmony-white-key{flex:1 1 0;min-width:40px;max-width:90px;height:clamp(200px,32vh,360px);background:linear-gradient(to bottom,#f1efec,#d4c9be);border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:2px solid #999;display:flex;align-items:flex-end;justify-content:center;font-size:1.3rem;font-weight:700;box-shadow:inset 0 -3px 4px #00000014;transition:background .2s ease,box-shadow .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;color:#18230f;position:relative;overflow:hidden}.harmony-white-key:hover{background:linear-gradient(to bottom,#c3f7d5,#aaf4c5);box-shadow:inset 0 -4px 6px #00800033}.harmony-white-key:active{background:#d4c9be}.harmony-label{padding:6px;z-index:10;position:relative;pointer-events:none}.harmony-black-keys{position:absolute;top:0;left:0;width:100%;height:clamp(140px,24vh,242px);z-index:2}.harmony-black-key{position:absolute;width:clamp(25px,4vw,50px);height:clamp(140px,24vh,242px);background:linear-gradient(to bottom,#18230f,#0f1610);border-radius:3px;transform:translate(-50%);box-shadow:0 4px 12px #00000080;cursor:pointer;z-index:3;transition:background .2s ease,transform .15s ease,box-shadow .15s ease;overflow:hidden}.harmony-black-key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000a6}.harmony-black-key:active{background:#1f7d53;transform:translate(-50%) scaleY(.98) translateY(1px);box-shadow:0 2px 6px #0006}.harmony-Cs{left:12.85%}.harmony-Ds{left:27.1%}.harmony-Fs{left:56.6%}.harmony-Gs{left:70.85%}.harmony-As{left:85.15%}.harmony-white-key.harmony-flash-0 .flash-overlay{background-color:#a8ffb3;opacity:1}.harmony-white-key.harmony-flash-1 .flash-overlay{background-color:#5cff88;opacity:1}.harmony-white-key.harmony-flash-2 .flash-overlay{background-color:#00ff5c;opacity:1}.harmony-black-key.harmony-flash-0 .flash-overlay{background-color:#a8ffb3;opacity:1}.harmony-black-key.harmony-flash-1 .flash-overlay{background-color:#5cff88;opacity:1}.harmony-black-key.harmony-flash-2 .flash-overlay{background-color:#00ff5c;opacity:1}.harmony-white-key.flash-correct .flash-overlay,.harmony-black-key.flash-correct .flash-overlay{background-color:#4cff4c;opacity:1}.harmony-white-key.flash-wrong .flash-overlay,.harmony-black-key.flash-wrong .flash-overlay{background-color:#ff4c4c;opacity:1}@media (max-width: 1600px){.harmony-black-key{width:clamp(20px,3.5vw,40px);height:clamp(120px,20vh,220px)}}.harmony-container-settings{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec}.harmony-content-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.harmony-navbar{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;font-size:1.15rem}.harmony-dropdown{position:relative;display:inline-block;margin-right:12px}.harmony-dropbtn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .3s ease}.harmony-dropbtn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53);box-shadow:0 6px 14px #00000040}.harmony-dropdown-content{display:none;position:absolute;top:110%;left:0;background-color:#f1efec;color:#18230f;padding:12px;border-radius:12px;box-shadow:0 2px 6px #0000004d;z-index:10;flex-direction:column}.harmony-dropdown:hover .harmony-dropdown-content{display:flex}.harmony-dropdown-content label{font-size:1rem;margin-bottom:4px;cursor:pointer}.harmony-controls{display:flex;align-items:center;gap:16px}.harmony-rounds-input{width:80px;font-size:1.1rem;padding:6px 10px;border-radius:10px;border:2px solid #F1EFEC;background-color:#27391c;color:#f1efec;text-align:center}.harmony-start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #00000040}.harmony-start-btn:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.07);box-shadow:0 8px 18px #0000004d}.harmony-summary{padding:12px 24px;font-size:1.2rem;text-align:center;color:#f1efec}.harmony-chord-buttons{display:grid;gap:12px;padding:14px;align-items:stretch;justify-items:stretch;grid-auto-rows:1fr;max-height:20vh;overflow-y:auto;margin-bottom:10px}.harmony-chord-btn{width:100%;height:100%;font-size:2.2rem;font-weight:700;border:2px solid #F1EFEC;border-radius:10px;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.harmony-chord-btn:hover{background-color:#27391c;transform:scale(1.03)}.harmony-scale-chord-wrapper{display:flex;gap:12px;align-items:center}.harmony-keyboard-wrapper{width:100%;padding-bottom:12px}.harmony-floating-setup-message{position:absolute;top:90px;left:50%;transform:translate(-50%);background-color:#ffffff1f;color:#fff;font-size:1.4rem;font-weight:700;padding:14px 24px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;z-index:10;animation:messageFadeIn .4s ease}.harmony-start-btn{animation:bouncePulse 2s infinite ease-in-out;background:linear-gradient(45deg,#1f7d53,#38b27a,#255f38);background-size:200% 200%;animation-name:bouncePulse,pulseGradient;animation-duration:2s,4s;animation-timing-function:ease-in-out,ease-in-out;animation-iteration-count:infinite}.harmony-rounds-input{width:80px;font-size:1.2rem;padding:6px 10px;border-radius:8px;border:none;background-color:#1a2714;color:#f1efec;text-align:center;outline:none;transition:box-shadow .2s ease}.harmony-rounds-input:focus{box-shadow:0 0 6px #99e06c}.harmony-special-toggle{display:flex;align-items:center;gap:8px;padding:10px 16px;background-color:#27391c;border:2px solid #F1EFEC;border-radius:12px;font-size:1.2rem;font-weight:600;color:#f1efec;cursor:pointer;transition:background-color .3s ease,transform .2s ease}.harmony-special-toggle input[type=checkbox]{transform:scale(1.4);accent-color:#99e06c;cursor:pointer}.harmony-special-toggle:hover{background-color:#1a2714;transform:scale(1.02)}@media screen and (max-height: 500px) and (orientation: landscape){.harmony-container-settings{padding:4px}.harmony-content-wrapper{overflow-y:auto}.harmony-navbar{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:6px}.harmony-scale-chord-wrapper{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;width:100%}.harmony-dropdown{flex:1 1 auto;min-width:90px}.harmony-dropbtn{width:100%;font-size:.9rem;padding:6px 10px}.harmony-dropdown-content{font-size:.9rem;max-height:200px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.harmony-dropdown-content::-webkit-scrollbar{width:6px}.harmony-dropdown-content::-webkit-scrollbar-thumb{background-color:#999;border-radius:8px}.harmony-controls{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}.rounds-group{flex:1;min-width:120px;justify-content:space-between;padding:6px 8px}.harmony-special-toggle{flex:1;justify-content:space-between;min-width:140px;font-size:.9rem}.harmony-start-btn{font-size:.9rem;padding:8px 16px}.harmony-summary{font-size:.95rem;padding:6px 12px}.harmony-chord-buttons{margin-top:8px;max-height:30vh;padding:6px;gap:8px;grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.harmony-keyboard-wrapper{padding-bottom:4px}.harmony-floating-setup-message{display:none}}.harmony-instruction-link{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:10px 20px;margin-left:14px;border-radius:10px;font-weight:700;font-size:1.1rem;text-decoration:none;box-shadow:0 3px 6px #00000040;transition:all .3s ease;white-space:nowrap}.harmony-instruction-link:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05);box-shadow:0 6px 12px #0000004d}.real-melodygame-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#c2f86a,#18230f);color:#f1efec;overflow:hidden}.real-melodygame-navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;min-height:80px}.real-melodygame-navbar-left{display:flex;align-items:center;gap:14px}.real-melodygame-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background-color:#27391c;border-radius:12px;border:2px solid #F1EFEC}.real-melodygame-btn{padding:14px 20px;font-size:1.1rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border:none;border-radius:10px;cursor:pointer;transition:transform .2s ease}.real-melodygame-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.real-melodygame-start-btn,.tonic-btn{padding:14px 24px!important;font-size:1.1rem}.real-melodygame-stats{display:flex;gap:10px;align-items:center;font-weight:700;font-size:1.15rem;background:#27391c;padding:10px 16px;border-radius:14px;border:2px solid #F1EFEC}.real-melodygame-stat{background-color:#d4c9be;border-radius:8px;padding:10px 12px;color:#18230f;min-width:32px;text-align:center;font-size:1.1rem}.real-melodygame-stat.correct{background-color:#5cff70}.real-melodygame-stat.wrong{background-color:#ff4c4c;color:#fff}.real-melodygame-stat.current{background-color:#ffe99e}.real-melodygame-stat.tries{background-color:#ccc}.real-melodygame-fill-space{flex-grow:1}.real-melodygame-bottom{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}.real-melodygame-keyboard{width:100vw;padding-bottom:12px;overflow-x:hidden}.real-melodygame-flash-correct{animation:realMelodyFlashGreen .4s ease}.real-melodygame-flash-wrong{animation:realMelodyFlashRed .4s ease}.real-melodygame-floating-message{position:absolute;top:150px;left:50%;transform:translate(-50%);background-color:#ffffff2e;color:#fff;font-size:1.8rem;font-weight:700;padding:16px 28px;border-radius:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;z-index:10;animation:messageFadeIn .3s ease}.real-melodygame-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.real-melodygame-popup{background:#93fc79;color:#18230f;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 20px #0006;max-width:400px;width:90%}.real-melodygame-popup h2{margin-bottom:1rem}.real-melodygame-popup p{font-size:1.1rem;margin:.5rem 0}.real-melodygame-popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.real-melodygame-popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.real-melodygame-popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}.real-melodygame-btn.bounce-flash{animation:bounceFlash .6s infinite}.real-melodygame-start-btn.start-active{font-weight:700;transform:scale(1.1);background:linear-gradient(45deg,#9fff92,#13ff91,#15f50d);background-size:300% 300%;color:#18230f;border:2px solid #fff;border-radius:16px;box-shadow:0 0 18px #ffe600cc;animation:bouncePulse 1.6s infinite ease-in-out,gradientGlow 5s infinite alternate;transition:all .3s ease}.real-melodygame-start-btn.start-active:hover{transform:scale(1.15);box-shadow:0 0 26px #ffe600f2;background:linear-gradient(45deg,#f8f8f8,#241e1c,#293332);background-size:300% 300%}@keyframes realMelodyFlashGreen{0%{background-color:#4cff4c!important}to{background-color:inherit}}@keyframes realMelodyFlashRed{0%{background-color:#ff4c4c!important}to{background-color:inherit}}.tonic-btn{background:linear-gradient(to right,#3e7d4d,#295a3a);color:#f1efec;margin-left:10px;font-weight:700;padding:10px 20px;border-radius:10px;transition:.3s ease}.tonic-btn:hover{background:linear-gradient(to right,#295a3a,#3e7d4d);box-shadow:0 0 8px #5cff7066;transform:scale(1.05)}@media only screen and (max-width: 1000px) and (orientation: landscape){.real-melodygame-popup{max-width:280px;max-height:80vh;padding:1rem 1.2rem;font-size:.9rem;border-radius:10px;text-align:center;overflow-y:auto;box-shadow:0 6px 16px #0006;background:#93fc79;color:#18230f;border:2px solid #5CFF70}.real-melodygame-popup h2{font-size:1rem;margin-bottom:.6rem;color:#000501}.real-melodygame-popup p{font-size:.85rem;margin:.4rem 0;color:#000}.real-melodygame-popup-buttons{display:flex;flex-direction:column;gap:8px;margin-top:12px}.real-melodygame-popup-buttons button{font-size:.9rem;padding:.6rem .75rem;border-radius:8px;font-weight:700;border:none;cursor:pointer;box-shadow:0 2px 6px #0000004d;background:linear-gradient(to right,#1f7d53,#255f38);color:#f8f8f8;transition:background .3s ease,transform .2s ease}.real-melodygame-popup-buttons button:hover{transform:scale(1.04);background:linear-gradient(to right,#255f38,#1f7d53)}.real-melodygame-floating-message{font-size:.9rem;top:70px;padding:6px 10px;border-radius:10px;max-width:90vw;text-align:center}.real-melodygame-btn{padding:10px 16px;font-size:.85rem;border-radius:8px}.real-melodygame-stats{font-size:.9rem;padding:5px 8px;gap:6px}.real-melodygame-stat{padding:5px 6px;font-size:.8rem;border-radius:6px}}.real-melody-keyboard-container{background-color:transparent!important;display:flex;align-items:flex-end;justify-content:center;width:100%;height:30vh;padding:14px;overflow-x:hidden}.real-melody-octave{display:flex;flex:1 1 0;position:relative}.real-melody-white-keys{display:flex;flex:1;z-index:1}.real-melody-white-key{flex:1 1 0;min-width:40px;max-width:90px;height:clamp(200px,32vh,360px);background:linear-gradient(to bottom,#f1efec,#d4c9be);border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:2px solid #999;display:flex;align-items:flex-end;justify-content:center;font-size:1.3rem;font-weight:700;box-shadow:inset 0 -3px 4px #00000014;transition:background .2s ease,box-shadow .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;color:#18230f;position:relative;overflow:hidden}.real-melody-white-key:hover{background:linear-gradient(to bottom,#c3f7d5,#aaf4c5);box-shadow:inset 0 -4px 6px #00800033}.real-melody-white-key:active{background:#d4c9be}.real-melody-label{padding:6px;z-index:10;position:relative;pointer-events:none}.real-melody-black-keys{position:absolute;top:0;left:0;width:100%;height:clamp(140px,24vh,242px);z-index:2}.real-melody-black-key{position:absolute;width:clamp(25px,4vw,50px);height:clamp(140px,24vh,242px);background:linear-gradient(to bottom,#18230f,#0f1610);border-radius:3px;transform:translate(-50%);box-shadow:0 4px 12px #00000080;cursor:pointer;z-index:3;transition:background .2s ease,transform .15s ease,box-shadow .15s ease;overflow:hidden}.real-melody-black-key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000a6}.real-melody-black-key:active{background:#1f7d53;transform:translate(-50%) scaleY(.98) translateY(1px);box-shadow:0 2px 6px #0006}.real-melody-Cs{left:12.85%}.real-melody-Ds{left:27.1%}.real-melody-Fs{left:56.6%}.real-melody-Gs{left:70.85%}.real-melody-As{left:85.15%}.real-melody-white-key.real-melody-flash-0 .flash-overlay,.real-melody-black-key.real-melody-flash-0 .flash-overlay{background-color:#a8ffb3;opacity:1}.real-melody-white-key.real-melody-flash-1 .flash-overlay,.real-melody-black-key.real-melody-flash-1 .flash-overlay{background-color:#5cff88;opacity:1}.real-melody-white-key.real-melody-flash-2 .flash-overlay,.real-melody-black-key.real-melody-flash-2 .flash-overlay{background-color:#00ff5c;opacity:1}.real-melody-white-key.flash-correct .flash-overlay,.real-melody-black-key.flash-correct .flash-overlay{background-color:#4cff4c;opacity:1}.real-melody-white-key.flash-wrong .flash-overlay,.real-melody-black-key.flash-wrong .flash-overlay{background-color:#ff4c4c;opacity:1}.real-melody-white-key.flash-blue .flash-overlay,.real-melody-black-key.flash-blue .flash-overlay{background-color:#4ca7ff;opacity:1}@media (max-width: 1600px){.real-melody-black-key{width:clamp(20px,3.5vw,40px);height:clamp(120px,20vh,220px)}}.real-melody-settings-container{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#c2f86a,#18230f);color:#f1efec}.real-melody-content-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.real-melody-navbar{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;font-size:1.15rem}.real-melody-dropdown{position:relative;display:inline-block;margin-right:12px}.real-melody-dropbtn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .3s ease}.real-melody-dropbtn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53);box-shadow:0 6px 14px #00000040}.real-melody-dropdown-content{display:none;position:absolute;top:110%;left:0;background-color:#f1efec;color:#18230f;padding:12px;border-radius:12px;box-shadow:0 2px 6px #0000004d;z-index:10;flex-direction:column}.real-melody-dropdown:hover .real-melody-dropdown-content{display:flex}.real-melody-dropdown-content label{font-size:1rem;margin-bottom:4px;cursor:pointer}.real-melody-controls{display:flex;align-items:center;gap:16px}.real-melody-rounds-group{display:flex;align-items:center;background:#27391c;border:2px solid #F1EFEC;padding:8px 14px;border-radius:12px;box-shadow:0 3px 6px #0003;gap:10px}.real-melody-rounds-label{font-size:1.2rem;font-weight:600;color:#f1efec}.real-melody-rounds-input{width:80px;font-size:1.2rem;padding:6px 10px;border-radius:8px;border:none;background-color:#1a2714;color:#f1efec;text-align:center;outline:none;transition:box-shadow .2s ease}.real-melody-rounds-input:focus{box-shadow:0 0 6px #99e06c}.real-melody-start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #00000040;background-size:200% 200%;animation:bouncePulse 2s infinite ease-in-out,pulseGradient 4s infinite ease-in-out}.real-melody-start-btn:hover{transform:scale(1.07);box-shadow:0 8px 18px #0000004d;background:linear-gradient(to right,#255f38,#1f7d53)}.real-melody-floating-setup-message{position:absolute;top:90px;left:50%;transform:translate(-50%);background-color:#ffffff1f;color:#fff;font-size:1.4rem;font-weight:700;padding:14px 24px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;z-index:10;animation:messageFadeIn .4s ease}.real-melody-summary{padding:12px 24px;font-size:1.2rem;text-align:center;color:#f1efec}.real-melody-keyboard-wrapper{width:100%;padding-bottom:12px}.real-melody-beginner-toggle{padding:12px 24px;font-size:1.15rem;font-weight:600;border-radius:12px;cursor:pointer;border:none;background:linear-gradient(to right,#27391c,#1f3c2b);color:#f1efec;box-shadow:0 4px 8px #0003;transition:all .3s ease;line-height:1.3;height:100%;display:flex;align-items:center;justify-content:center}.real-melody-beginner-toggle.on{background:linear-gradient(to right,#5cff70,#3ac97c);color:#18230f;box-shadow:0 0 10px #5cff7099}.real-melody-beginner-toggle.off:hover{background:linear-gradient(to right,#3c3c3c,#1f3c2b);box-shadow:0 6px 14px #fff3;transform:scale(1.05)}@media screen and (orientation: landscape) and (max-height: 500px){.real-melody-floating-setup-message{display:none}}@media screen and (orientation: landscape) and (max-height: 500px){.real-melody-navbar{padding:8px 10px;font-size:1rem;gap:8px;flex-wrap:wrap;justify-content:space-between}.real-melody-controls{gap:10px;flex-wrap:wrap}.real-melody-rounds-group{padding:6px 10px;gap:6px}.real-melody-rounds-label,.real-melody-rounds-input{font-size:1rem}.real-melody-beginner-toggle{font-size:1rem;padding:10px 18px}.real-melody-start-btn{font-size:1rem;padding:10px 20px}}.degree-notice-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#c2f86a,#18230f);color:#f1efec;overflow:hidden;padding:0;margin:0}.degree-notice-navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;min-height:80px}.degree-notice-navbar-left{display:flex;align-items:center;gap:14px}.degree-notice-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background-color:#27391c;border-radius:12px;border:2px solid #F1EFEC}.degree-notice-stats{display:flex;gap:10px;align-items:center;font-weight:700;font-size:1.15rem;background:#27391c;padding:10px 16px;border-radius:14px;border:2px solid #F1EFEC}.degree-notice-stat{padding:8px 14px;font-size:1.1rem;border-radius:10px;font-weight:700;color:#fff;min-width:60px;text-align:center;background:#ffffff1a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1.5px solid rgba(255,255,255,.3);box-shadow:0 2px 6px #0003;transition:transform .2s ease}.degree-notice-stat.correct{background-color:#4cff4c;color:#18230f}.degree-notice-stat.wrong{background-color:#ff4c4c}.degree-notice-stat.current{background-color:#ffe99e;color:#18230f}.degree-notice-stat.tries{background-color:#888}.degree-notice-question-area{display:flex;flex-direction:column;justify-content:flex-end;height:100%;width:100%;padding-bottom:30vh;position:relative;box-sizing:border-box}.degree-notice-question-center{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto;padding-top:60px;padding-bottom:30px}.degree-notice-box-label{font-size:2.8rem;font-weight:700;color:#f1efec;background-color:#27391c;padding:14px 32px;border:2px solid #F1EFEC;border-radius:16px;margin-bottom:12px;text-align:center}.degree-notice-divider{height:18px;width:100%;max-width:260px;background:#fff3;border-radius:8px;margin-bottom:12px}.degree-notice-box-question{font-size:3rem;font-weight:700;color:#fff;background-color:#ffffff1a;padding:16px 36px;border-radius:16px;text-align:center;border:2px solid #F1EFEC}.degree-notice-options{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;position:absolute;bottom:0;width:100%;height:30vh;background-color:transparent;padding:12px 18px;box-sizing:border-box;gap:12px;border-top:none}.degree-notice-option-btn{flex:1 1 45%;height:45%;margin:4px;font-size:1.8rem;font-weight:700;border-radius:14px;border:2px solid #F1EFEC;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease,background .2s ease;min-width:150px;max-width:45%;box-shadow:0 2px 6px #00000026}.degree-notice-option-btn:hover:not(:disabled){background-color:#27391c;transform:scale(1.03)}.degree-notice-option-btn:disabled{opacity:.5;cursor:not-allowed}@keyframes flashCorrectBtn{0%{background:#4cff4c;transform:scale(1.05)}to{background:linear-gradient(135deg,#1f7d53,#255f38);transform:scale(1)}}@keyframes flashWrongBtn{0%{background:#ff4c4c;transform:scale(1.05)}to{background:linear-gradient(135deg,#1f7d53,#255f38);transform:scale(1)}}.degree-notice-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.degree-notice-popup{background:#93fc79;color:#18230f;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 20px #0006;max-width:400px;width:90%}.degree-notice-popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.degree-notice-popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.degree-notice-popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}.degree-notice-restart-btn{font-size:1.1rem;font-weight:700;padding:10px 14px;background-color:#27391c;color:#f1efec;border:2px solid #F1EFEC;border-radius:12px;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease;height:100%;display:flex;align-items:center;justify-content:center;margin-left:250px}.degree-notice-restart-btn:hover{background-color:#f1efec;color:#18230f;transform:scale(1.03)}@keyframes roundFlash{0%{transform:scale(1.05);opacity:.5}to{transform:scale(1);opacity:1}}.round-flash{animation:roundFlash .4s ease-in-out}.degree-notice-mute-btn{margin-left:12px;font-size:1.3rem;background:transparent;border:2px solid #F1EFEC;color:#f1efec;padding:8px 14px;border-radius:10px;cursor:pointer;transition:all .2s ease}.degree-notice-mute-btn:hover{background:#f1efec;color:#18230f}.degree-notice-feedback-message{text-align:center;margin:12px auto;padding:16px 28px;font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,#3c5b2a,#1f3314);color:#f1efec;border:3px solid #B3D885;border-radius:16px;width:fit-content;max-width:90%;box-shadow:0 0 15px #b3d88599;animation:fadeInSlideUp .6s ease,pulseGlow 1.5s ease-in-out infinite;transition:transform .3s ease}@keyframes fadeInSlideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 15px #b3d88580}50%{box-shadow:0 0 25px #b3d885e6}}@media (max-width: 1200px){.degree-notice-options{height:50vh}.degree-notice-question-area{padding-bottom:50vh}}@media (max-width: 768px){.degree-notice-container{overflow-y:auto;height:auto;min-height:100vh;padding-bottom:60px}.degree-notice-navbar{flex-direction:column;align-items:stretch;padding:16px 12px;gap:10px}.degree-notice-logo{font-size:1.6rem;text-align:center;width:100%;padding:10px 0}.degree-notice-stats{flex-wrap:wrap;justify-content:center;width:100%;gap:10px;font-size:1rem;padding:10px}.degree-notice-stat{flex:1 1 42%;padding:10px;font-size:1rem;min-width:100px}.degree-notice-question-area{padding:20px 12px 12px;box-sizing:border-box}.degree-notice-question-center{padding:20px 0;gap:10px}.degree-notice-box-label{font-size:2rem;padding:12px 20px}.degree-notice-box-question{font-size:2.2rem;padding:12px 20px}.degree-notice-options{flex-direction:column;position:static;height:auto;width:100%;padding:12px;gap:12px}.degree-notice-option-btn{width:100%;font-size:1.4rem;padding:14px;height:auto;max-width:100%}.degree-notice-restart-btn,.degree-notice-mute-btn{width:48%;font-size:1rem;padding:10px;margin:0;align-self:center}.degree-notice-feedback-message{font-size:1.2rem;padding:12px;margin:16px auto;width:90%}.degree-notice-popup{width:90%;padding:1.5rem}.degree-notice-popup-buttons{flex-direction:column;gap:14px;margin-top:1rem}.degree-notice-popup-buttons button{width:100%;font-size:1rem;padding:12px}}:root{--main-bg: linear-gradient(to bottom right, #7eef8b, #0f1c0e);--card-bg: rgba(50, 72, 42, .85);--highlight: #B3D885;--accent: #27391C;--text-light: #F1EFEC;--text-dark: #1a2714;--btn-grad: linear-gradient(135deg, #38b27a, #1F7D53);--font-main: "Segoe UI", sans-serif}body{font-family:var(--font-main)}.degree_notice_settings-container{min-height:100vh;background:var(--main-bg);padding:32px 24px;color:var(--text-light);display:flex;flex-direction:column;align-items:center}.degree_notice_settings-navbar{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-bottom:32px}.degree_notice_settings-dropdown{position:relative}.degree_notice_settings-dropbtn{background:var(--btn-grad);color:var(--text-light);padding:12px 20px;border-radius:14px;font-weight:700;border:none;font-size:1.1rem;cursor:pointer;transition:all .25s ease;box-shadow:0 4px 8px #0000004d}.degree_notice_settings-dropbtn:hover{transform:scale(1.05)}.degree_notice_settings-dropdown-content{position:absolute;top:110%;background:#fdfdfd;color:var(--text-dark);border-radius:10px;padding:14px;box-shadow:0 8px 20px #00000040;display:none;flex-direction:column;z-index:5;min-width:180px}.degree_notice_settings-dropdown:hover .degree_notice_settings-dropdown-content{display:flex}.degree_notice_settings-dropdown-content label{font-size:1rem;margin:6px 0}.degree_notice_settings-rounds-group{background:var(--accent);border:2px solid var(--text-light);padding:10px 16px;border-radius:14px;display:flex;align-items:center;gap:12px}.degree_notice_settings-rounds-input{padding:6px 10px;background:#1a2714;color:var(--text-light);border-radius:8px;font-size:1rem;border:none;width:80px;text-align:center}.degree_notice_settings-start-btn{background:linear-gradient(270deg,#38b27a,#2a9d8f,#3fbc7a,#1f7d53);background-size:800% 800%;color:#fff;padding:14px 28px;font-size:1.2rem;font-weight:700;border:none;border-radius:16px;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 6px 14px #00000059;animation:animateStartButton 6s ease infinite}.degree_notice_settings-start-btn:hover{transform:scale(1.08);box-shadow:0 8px 20px #00000073}@keyframes animateStartButton{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes pulseGradient{0%,to{background-position:left}50%{background-position:right}}.degree_notice_settings-instructions{background:#ffffff1a;border-left:4px solid var(--highlight);padding:16px 20px;border-radius:12px;margin:20px auto;max-width:800px;font-size:1.05rem;color:#e0f0d0;box-shadow:0 4px 12px #0003}.degree_notice_settings-bottom-section{width:100%;padding:24px 0;display:flex;flex-direction:column;align-items:center}.degree_notice_settings-summary{font-size:1.2rem;text-align:center;margin-bottom:30px;color:#d4f7c5}.degree_notice_settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;width:100%;max-width:960px}.degree_notice_settings-scale-box{background:var(--card-bg);padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,.1);transition:all .25s ease;box-shadow:0 2px 10px #0003}.degree_notice_settings-scale-box:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000004d}.degree_notice_settings-degree-badge{background-color:#ffffff26;padding:5px 12px;border-radius:20px;font-size:.95rem;font-weight:700;margin:4px;color:var(--text-light);display:inline-block}.degree_notice_settings-message{background:#f0f8e0;border:2px solid #b1d784;color:#2e4917;font-weight:600;border-radius:12px;padding:12px 18px;text-align:center;margin-top:24px;animation:pulseMessage 4s infinite ease-in-out}@keyframes pulseMessage{0%,to{transform:scale(1);background:#f0f8e0}50%{transform:scale(1.02);background:#e3f5d3}}.degree_notice_settings-instruction-link{background:var(--btn-grad);color:var(--text-light);padding:12px 20px;border-radius:14px;font-weight:700;font-size:1.1rem;text-decoration:none;display:inline-block;box-shadow:0 4px 8px #0000004d;transition:all .25s ease}.degree_notice_settings-instruction-link:hover{transform:scale(1.05);background:linear-gradient(135deg,#45c38b,#1d6c47)}.chord_type_game-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#54d505,#020500);color:#f1efec;overflow:hidden}.chord_type_game-navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;min-height:80px}.chord_type_game-navbar-left{display:flex;align-items:center;gap:14px}.chord_type_game-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background-color:#27391c;border-radius:12px;border:2px solid #F1EFEC}.chord_type_game-btn{padding:14px 20px;font-size:1.1rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border:none;border-radius:10px;cursor:pointer;transition:transform .2s ease}.chord_type_game-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.chord_type_game-stats{display:flex;gap:8px;align-items:center;font-weight:700;font-size:1.1rem;background:#27391c;padding:6px 12px;border-radius:12px;border:2px solid #F1EFEC}.chord_type_game-stat{background-color:#d4c9be;border-radius:6px;padding:6px 10px;color:#18230f;min-width:30px;text-align:center}.chord_type_game-stat.correct{background-color:#5cff70}.chord_type_game-stat.wrong{background-color:#ff4c4c;color:#fff}.chord_type_game-stat.current{background-color:#ffe99e}.chord_type_game-stat.tries{background-color:#ccc}.chord_type_game-fill-space{flex-grow:1}.chord_type_game-bottom{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}.chord_type_game-buttons{display:grid;gap:12px;padding:14px 16px;align-items:stretch;justify-items:stretch;height:10vh;width:100%;box-sizing:border-box}.chord_type_game-chord-btn{width:100%;height:100%;font-size:2.2rem;font-weight:700;border:2px solid #F1EFEC;border-radius:10px;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.chord_type_game-chord-btn:hover{background-color:#27391c;transform:scale(1.03)}.chord_type_game-keyboard{width:100vw;padding-bottom:12px;overflow-x:hidden}.chord_type_game-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.chord_type_game-popup{background:#93fc79;color:#18230f;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 20px #0006;max-width:400px;width:90%}.chord_type_game-popup h2{margin-bottom:1rem}.chord_type_game-popup p{font-size:1.1rem;margin:.5rem 0}.chord_type_game-popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.chord_type_game-popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.chord_type_game-popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}@media only screen and (max-width: 1000px) and (orientation: landscape){.chord_type_game-container{flex-direction:column;justify-content:space-between}.chord_type_game-bottom{flex-direction:column;justify-content:flex-end}.chord_type_game-buttons{grid-template-rows:1fr;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));height:12vh;gap:10px;padding:12px}.chord_type_game-keyboard{height:auto;padding-bottom:12px}.chord_type_game-keyboard-container{height:30vh}.chord_type_game-white-key{min-width:35px;max-width:70px;height:clamp(160px,26vh,300px)}.chord_type_game-black-key{width:clamp(20px,4vw,40px);height:clamp(120px,20vh,220px)}.chord_type_game-popup{width:90%;max-width:400px}.chord_type_game-navbar{flex-direction:row;flex-wrap:wrap;gap:10px;align-items:center;padding:12px;font-size:.95rem}.chord_type_game-logo{font-size:1.2rem;padding:8px 12px;border-radius:10px;white-space:nowrap}.chord_type_game-btn{font-size:1rem;padding:10px 14px;border-radius:10px;flex-shrink:0}.chord_type_game-stats{flex-wrap:wrap;font-size:.95rem;gap:6px;padding:6px 10px;border-radius:10px}.chord_type_game-stat{padding:4px 8px;font-size:.9rem}.chord_type_game-level{font-size:.95rem;margin-left:6px}.chord_type_game-popup{width:85%;max-width:260px;max-height:75vh;padding:.6rem .8rem;border-radius:10px;font-size:.8rem;overflow-y:auto;margin:1rem auto;box-sizing:border-box}.chord_type_game-popup h2{font-size:1rem;margin-bottom:.5rem}.chord_type_game-popup p{font-size:.8rem;margin:.25rem 0}.chord_type_game-popup ul{font-size:.75rem;line-height:1.3;padding-left:0;margin:.3rem 0}.chord_type_game-popup-buttons{flex-direction:column;gap:.4rem;margin-top:.6rem}.chord_type_game-popup-buttons button{padding:.5rem;font-size:.85rem}}@media only screen and (max-width: 700px) and (max-height: 420px) and (orientation: landscape){.chord_type_game-navbar{flex-direction:column;align-items:center;gap:4px;padding:4px;font-size:.65rem}.chord_type_game-navbar-left{flex-wrap:wrap;justify-content:center;gap:4px;width:100%}.chord_type_game-logo{font-size:.75rem;padding:3px 6px;border-radius:6px}.chord_type_game-btn{font-size:.65rem;padding:4px 8px;border-radius:6px}.chord_type_game-stats{flex-wrap:wrap;justify-content:center;font-size:.65rem;padding:3px 5px;gap:3px;border-radius:6px;width:100%}.chord_type_game-stat{padding:2px 5px;font-size:.65rem;min-width:24px}.chord_type_game-level{font-size:.65rem}.chord_type_game-buttons{height:7vh;padding:4px;gap:4px}.chord_type_game-keyboard-container{height:20vh;padding:4px}.chord_type_game-white-key{height:clamp(100px,18vh,180px)}.chord_type_game-black-key{height:clamp(180px,32vh,320px)}.chord_type_game-popup{max-width:180px;padding:.3rem;font-size:.65rem;border-radius:6px}.chord_type_game-popup-buttons button{font-size:.65rem;padding:.25rem;border-radius:6px}.floating-message{font-size:.9rem;top:80px;padding:6px 10px;border-radius:10px}}.chord_type_game-keyboard-container{background-color:transparent!important;display:flex;align-items:flex-end;justify-content:center;width:100%;height:30vh;padding:14px;overflow-x:hidden}.chord_type_game-octave{display:flex;flex:1 1 0;position:relative}.chord_type_game-white-keys{display:flex;flex:1;z-index:1}.chord_type_game-white-key{flex:1 1 0;min-width:40px;max-width:90px;height:clamp(200px,32vh,360px);background:linear-gradient(to bottom,#f1efec,#d4c9be);border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:2px solid #999;display:flex;align-items:flex-end;justify-content:center;font-size:1.3rem;font-weight:700;box-shadow:inset 0 -3px 4px #00000014;transition:background .2s ease,box-shadow .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;color:#18230f;position:relative;overflow:hidden}.chord_type_game-white-key:hover{background:linear-gradient(to bottom,#c3f7d5,#aaf4c5);box-shadow:inset 0 -4px 6px #00800033}.chord_type_game-white-key:active{background:#d4c9be}.chord_type_game-label{padding:6px;z-index:10;position:relative;pointer-events:none}.chord_type_game-black-keys{position:absolute;top:0;left:0;width:100%;height:clamp(140px,24vh,242px);z-index:2}.chord_type_game-black-key{position:absolute;width:clamp(25px,4vw,50px);height:clamp(140px,24vh,242px);background:linear-gradient(to bottom,#18230f,#0f1610);border-radius:3px;transform:translate(-50%);box-shadow:0 4px 12px #00000080;cursor:pointer;z-index:3;transition:background .2s ease,transform .15s ease,box-shadow .15s ease;overflow:hidden}.chord_type_game-black-key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000a6}.chord_type_game-black-key:active{background:#1f7d53;transform:translate(-50%) scaleY(.98) translateY(1px);box-shadow:0 2px 6px #0006}.chord_type_game-Cs{left:12.85%}.chord_type_game-Ds{left:27.1%}.chord_type_game-Fs{left:56.6%}.chord_type_game-Gs{left:70.85%}.chord_type_game-As{left:85.15%}.chord_type_game-white-key.chord_type_game-flash-0 .flash-overlay{background-color:#a8ffb3;opacity:1}.chord_type_game-white-key.chord_type_game-flash-1 .flash-overlay{background-color:#5cff88;opacity:1}.chord_type_game-white-key.chord_type_game-flash-2 .flash-overlay{background-color:#00ff5c;opacity:1}.chord_type_game-black-key.chord_type_game-flash-0 .flash-overlay{background-color:#a8ffb3;opacity:1}.chord_type_game-black-key.chord_type_game-flash-1 .flash-overlay{background-color:#5cff88;opacity:1}.chord_type_game-black-key.chord_type_game-flash-2 .flash-overlay{background-color:#00ff5c;opacity:1}.chord_type_game-white-key.chord_type_game-flash-correct .flash-overlay,.chord_type_game-black-key.chord_type_game-flash-correct .flash-overlay{background-color:#4cff4c;opacity:1}.chord_type_game-white-key.chord_type_game-flash-wrong .flash-overlay,.chord_type_game-black-key.chord_type_game-flash-wrong .flash-overlay{background-color:#ff4c4c;opacity:1}@media (max-width: 1600px){.chord_type_game-black-key{width:clamp(20px,3.5vw,40px);height:clamp(120px,20vh,220px)}}@media only screen and (max-width: 500px){.chord_type_game-black-keys{height:320px!important}.chord_type_game-black-key{width:48px!important;height:320px!important}.chord_type_game-white-key{height:340px!important}}@media only screen and (min-width: 501px) and (max-width: 600px){.chord_type_game-black-key{width:clamp(28px,6.5vw,52px);height:clamp(220px,32vh,360px)}}.chord_type_settings-container{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#54d505,#020500);color:#f1efec}.chord_type_settings-content-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.chord_type_settings-navbar{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;font-size:1.15rem}.chord_type_settings-dropdown-wrapper{display:flex;gap:12px;align-items:center}.chord_type_settings-dropdown{position:relative;display:inline-block;margin-right:12px}.chord_type_settings-dropbtn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .3s ease}.chord_type_settings-dropbtn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53);box-shadow:0 6px 14px #00000040}.chord_type_settings-dropdown-content{display:none;position:absolute;top:110%;left:0;background-color:#f1efec;color:#18230f;padding:12px;border-radius:12px;box-shadow:0 2px 6px #0000004d;z-index:10;flex-direction:column}.chord_type_settings-dropdown:hover .chord_type_settings-dropdown-content{display:flex}.chord_type_settings-dropdown-content label{font-size:1rem;margin-bottom:4px;cursor:pointer}.chord_type_settings-controls{display:flex;align-items:center;gap:16px}.chord_type_settings-start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #00000040;animation:bouncePulse 2s infinite ease-in-out,pulseGradient 4s infinite ease-in-out;background-size:200% 200%}.chord_type_settings-start-btn:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.07);box-shadow:0 8px 18px #0000004d}.chord_type_settings-summary{padding:12px 24px;font-size:1.2rem;text-align:center;color:#f1efec}.chord_type_settings-chord-buttons{display:grid;gap:12px;padding:14px;align-items:stretch;justify-items:stretch;height:10vh;grid-template-rows:1fr;grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.chord_type_settings-chord-btn{width:100%;height:100%;font-size:2.2rem;font-weight:700;border:2px solid #F1EFEC;border-radius:10px;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.chord_type_settings-chord-btn:hover{background-color:#27391c;transform:scale(1.03)}.chord_type_settings-keyboard-wrapper{width:100%;padding-bottom:12px}.chord_type_settings-floating-message{position:absolute;top:90px;left:50%;transform:translate(-50%);background-color:#ffffff1f;color:#fff;font-size:1.4rem;font-weight:700;padding:14px 24px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;z-index:10;animation:messageFadeIn .4s ease}.chord_type_settings-rounds-input{width:80px;font-size:1.2rem;padding:6px 10px;border-radius:8px;border:none;background-color:#1a2714;color:#f1efec;text-align:center;outline:none;transition:box-shadow .2s ease}.chord_type_settings-rounds-input:focus{box-shadow:0 0 6px #99e06c}@media only screen and (max-width: 1000px) and (orientation: landscape){.chord_type_settings-container{padding:0;overflow:hidden}.chord_type_settings-navbar{flex-wrap:wrap;gap:10px;font-size:1rem;padding:10px}.chord_type_settings-dropbtn{font-size:1rem;padding:10px 18px;border-radius:10px}.chord_type_settings-controls{flex-wrap:wrap;gap:10px}.chord_type_settings-start-btn{font-size:1rem;padding:10px 18px;border-radius:10px;animation:none}.chord_type_settings-floating-message{top:70px;font-size:1.1rem;padding:10px 18px;border-radius:12px}.chord_type_settings-summary{font-size:1rem;padding:8px 16px}.chord_type_settings-chord-buttons{height:auto;padding:10px;gap:10px;grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}.chord_type_settings-chord-btn{font-size:1.6rem;border-radius:8px}.chord_type_settings-keyboard-wrapper{height:30vh;padding-bottom:10px}.rounds-group{padding:6px 10px;gap:8px;border-radius:10px}.rounds-label{font-size:1rem}.chord_type_settings-rounds-input{font-size:1rem;padding:4px 8px;width:70px;border-radius:6px}}.chord_type_settings-instruction-link{display:inline-block;margin-left:12px;padding:12px 20px;font-size:1.1rem;font-weight:700;text-decoration:none;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border-radius:12px;transition:all .3s ease;box-shadow:0 4px 8px #0003}.chord_type_settings-instruction-link:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05);box-shadow:0 6px 14px #00000040}.chord_type_settings-instruction-link:active{transform:scale(.98)}.learn_piano-game-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#c2f86a,#18230f);color:#f1efec;position:relative;overflow:hidden}.learn_piano-game-navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;min-height:80px}.learn_piano-game-navbar-left{display:flex;align-items:center;gap:14px}.learn_piano-game-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background-color:#27391c;border-radius:12px;border:2px solid #F1EFEC}.learn_piano-game-btn{padding:14px 20px;font-size:1.1rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border:none;border-radius:10px;cursor:pointer;transition:transform .2s ease}.learn_piano-game-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.learn_piano-game-start-btn,.tonic-btn{padding:14px 24px!important;font-size:1.1rem}.learn_piano-game-stats{display:flex;gap:10px;align-items:center;font-weight:700;font-size:1.15rem;background:#27391c;padding:10px 16px;border-radius:14px;border:2px solid #F1EFEC}.learn_piano-game-stat{background-color:#d4c9be;border-radius:8px;padding:10px 12px;color:#18230f;min-width:32px;text-align:center;font-size:1.1rem}.learn_piano-game-stat.correct{background-color:#5cff70}.learn_piano-game-stat.wrong{background-color:#ff4c4c;color:#fff}.learn_piano-game-stat.current{background-color:#ffe99e}.learn_piano-game-stat.tries{background-color:#ccc}.learn_piano-game-fill-space{flex-grow:1}.learn_piano-game-bottom{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:16px;padding-bottom:12px;flex-shrink:0}.learn_piano-keyboard-wrapper{width:100%;padding-bottom:12px}.learn_piano-sequence-display{display:flex;justify-content:center;gap:24px;font-size:2rem;font-weight:700;padding:24px 0 10px;color:#fff;letter-spacing:2px}.learn_piano-sequence-note{display:inline-block;background:#1a2714;padding:8px 18px;border-radius:12px;font-weight:700;font-size:1.7rem;color:#f1efec;border:2px solid #F1EFEC}.learn_piano-game-floating-message{position:absolute;top:100px;left:50%;transform:translate(-50%);background-color:#ffffff2e;color:#fff;font-size:1.4rem;font-weight:700;padding:12px 22px;border-radius:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;z-index:10;animation:messageFadeIn .3s ease}.learn_piano-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.learn_piano-popup{background:#93fc79;color:#18230f;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 20px #0006;max-width:400px;width:90%}.learn_piano-popup h2{margin-bottom:1rem}.learn_piano-popup p{font-size:1.1rem;margin:.5rem 0}.learn_piano-popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.learn_piano-popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.learn_piano-popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}@keyframes bouncePulse{0%,to{transform:scale(1.1)}50%{transform:scale(1.18)}}@keyframes gradientGlow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.learn_piano-sequence-note.highlighted{background:#fff;color:#18230f;transform:scale(1.3);box-shadow:0 0 12px #fff;z-index:1}@media only screen and (max-width: 1000px) and (orientation: landscape){.learn_piano-popup{max-width:280px;max-height:80vh;padding:1rem 1.2rem;font-size:.9rem;border-radius:10px;text-align:center;overflow-y:auto;box-shadow:0 6px 16px #0006;background:#93fc79;color:#18230f;border:2px solid #5CFF70}.learn_piano-popup h2{font-size:1rem;margin-bottom:.6rem;color:#000501}.learn_piano-popup p{font-size:.85rem;margin:.4rem 0;color:#000}.learn_piano-popup-buttons{display:flex;flex-direction:column;gap:8px;margin-top:12px}.learn_piano-popup-buttons button{font-size:.9rem;padding:.6rem .75rem;border-radius:8px;font-weight:700;border:none;cursor:pointer;box-shadow:0 2px 6px #0000004d;background:linear-gradient(to right,#1f7d53,#255f38);color:#f8f8f8;transition:background .3s ease,transform .2s ease}.learn_piano-popup-buttons button:hover{transform:scale(1.04);background:linear-gradient(to right,#255f38,#1f7d53)}.learn_piano-game-floating-message{font-size:.9rem;top:70px;padding:6px 10px;border-radius:10px}.learn_piano-game-btn{padding:10px 16px;font-size:.85rem;border-radius:8px}.learn_piano-game-stats{font-size:.9rem;padding:5px 8px;gap:6px}.learn_piano-game-stat{padding:5px 6px;font-size:.8rem;border-radius:6px}.learn_piano-sequence-display{font-size:1.4rem;padding:12px 0 8px;gap:14px}.learn_piano-sequence-note{padding:6px 12px;font-size:1.2rem;border-radius:10px}}.learn_piano-keyboard-container{background-color:transparent!important;display:flex;align-items:flex-end;justify-content:center;width:100%;height:30vh;padding:14px;overflow-x:hidden}.learn_piano-octave{display:flex;flex:1 1 0;position:relative}.learn_piano-white-keys{display:flex;flex:1;z-index:1}.learn_piano-white-key{flex:1 1 0;min-width:40px;max-width:90px;height:clamp(200px,32vh,360px);background:linear-gradient(to bottom,#f1efec,#d4c9be);border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:2px solid #999;display:flex;align-items:flex-end;justify-content:center;font-size:1.3rem;font-weight:700;box-shadow:inset 0 -3px 4px #00000014;transition:background .2s ease,box-shadow .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;color:#18230f;position:relative;overflow:hidden}.learn_piano-white-key:hover{background:linear-gradient(to bottom,#c3f7d5,#aaf4c5);box-shadow:inset 0 -4px 6px #00800033}.learn_piano-white-key:active{background:#d4c9be}.learn_piano-label{padding:6px;z-index:10;position:relative;pointer-events:none}.learn_piano-black-keys{position:absolute;top:0;left:0;width:100%;height:clamp(140px,24vh,242px);z-index:2}.learn_piano-black-key{position:absolute;width:clamp(25px,4vw,50px);height:clamp(140px,24vh,242px);background:linear-gradient(to bottom,#18230f,#0f1610);border-radius:3px;transform:translate(-50%);box-shadow:0 4px 12px #00000080;cursor:pointer;z-index:3;transition:background .2s ease,transform .15s ease,box-shadow .15s ease;overflow:hidden}.learn_piano-black-key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000a6}.learn_piano-black-key:active{background:#1f7d53;transform:translate(-50%) scaleY(.98) translateY(1px);box-shadow:0 2px 6px #0006}.learn_piano-Cs{left:12.85%}.learn_piano-Ds{left:27.1%}.learn_piano-Fs{left:56.6%}.learn_piano-Gs{left:70.85%}.learn_piano-As{left:85.15%}.learn_piano-white-key.flash-wrong .flash-overlay,.learn_piano-black-key.flash-wrong .flash-overlay{background-color:#ff4c4c;opacity:1}.learn_piano-white-key.flash-blue .flash-overlay,.learn_piano-black-key.flash-blue .flash-overlay{background-color:#7dcfff;opacity:1}.learn_piano-white-key.learn_piano-tonic,.learn_piano-black-key.learn_piano-tonic{box-shadow:0 0 0 3px #4cfaff inset;border:2px solid #2ce0ff}@media (max-width: 1600px){.learn_piano-black-key{width:clamp(20px,3.5vw,40px);height:clamp(120px,20vh,220px)}}.learn_piano-white-key.flash-correct .flash-overlay,.learn_piano-black-key.flash-correct .flash-overlay{background-color:#4cff4c;opacity:1}.learn_piano_settings-container{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#c2f86a,#18230f);color:#f1efec}.learn_piano_settings-content-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.learn_piano_settings-navbar{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;font-size:1.15rem}.learn_piano_settings-dropdown{position:relative;display:inline-block;margin-right:12px}.learn_piano_settings-dropbtn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .3s ease}.learn_piano_settings-dropbtn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53);box-shadow:0 6px 14px #00000040}.learn_piano_settings-dropdown-content{display:none;position:absolute;top:110%;left:0;background-color:#f1efec;color:#18230f;padding:12px;border-radius:12px;box-shadow:0 2px 6px #0000004d;z-index:10;flex-direction:column}.learn_piano_settings-dropdown:hover .learn_piano_settings-dropdown-content{display:flex}.learn_piano_settings-dropdown-content label{font-size:1rem;margin-bottom:4px;cursor:pointer}.learn_piano_settings-controls{display:flex;align-items:center;gap:16px}.learn_piano_settings-rounds-group{display:flex;align-items:center;background:#27391c;border:2px solid #F1EFEC;padding:8px 14px;border-radius:12px;box-shadow:0 3px 6px #0003;gap:10px}.learn_piano_settings-rounds-label{font-size:1.2rem;font-weight:600;color:#f1efec}.learn_piano_settings-rounds-input,.learn_piano_settings-sequence-input{width:80px;font-size:1.2rem;padding:6px 10px;border-radius:8px;border:none;background-color:#1a2714;color:#f1efec;text-align:center;outline:none;transition:box-shadow .2s ease}.learn_piano_settings-rounds-input:focus,.learn_piano_settings-sequence-input:focus{box-shadow:0 0 6px #99e06c}.learn_piano_settings-start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #00000040;background-size:200% 200%;animation:bouncePulse 2s infinite ease-in-out,pulseGradient 4s infinite ease-in-out}.learn_piano_settings-start-btn:hover{transform:scale(1.07);box-shadow:0 8px 18px #0000004d;background:linear-gradient(to right,#255f38,#1f7d53)}.learn_piano_settings-floating-message{position:absolute;top:120px;left:50%;transform:translate(-50%);background-color:#ffffff1f;color:#fff;font-size:1.4rem;font-weight:700;padding:14px 24px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;z-index:10;animation:messageFadeIn .4s ease}.learn_piano_settings-summary{padding:12px 24px;font-size:1.2rem;text-align:center;color:#f1efec}.learn_piano_settings-keyboard-wrapper{width:100%;padding-bottom:12px}.learn_piano_settings-beginner-toggle{padding:12px 24px;font-size:1.15rem;font-weight:600;border-radius:12px;cursor:pointer;border:none;background:linear-gradient(to right,#27391c,#1f3c2b);color:#f1efec;box-shadow:0 4px 8px #0003;transition:all .3s ease;line-height:1.3;height:100%;display:flex;align-items:center;justify-content:center}.learn_piano_settings-beginner-toggle.on{background:linear-gradient(to right,#5cff70,#3ac97c);color:#18230f;box-shadow:0 0 10px #5cff7099}.learn_piano_settings-beginner-toggle.off:hover{background:linear-gradient(to right,#3c3c3c,#1f3c2b);box-shadow:0 6px 14px #fff3;transform:scale(1.05)}.learn_piano_settings-sequence-group{display:flex;align-items:center;background:#27391c;border:2px solid #F1EFEC;padding:8px 14px;border-radius:12px;box-shadow:0 3px 6px #0003;gap:10px}.learn_piano_settings-sequence-label{font-size:1.2rem;font-weight:600;color:#f1efec}.learn_piano_settings-freestyle-wrapper{display:flex;align-items:center;gap:10px;padding:8px 14px;border:2px solid #F1EFEC;border-radius:12px;background:#27391c;box-shadow:0 3px 6px #0003;font-weight:600;color:#f1efec;transition:all .3s ease}.learn_piano_settings-freestyle-wrapper input[type=checkbox]{width:20px;height:20px;accent-color:#c2f86a;cursor:pointer}.learn_piano_settings-freestyle-wrapper input[type=checkbox]:checked{outline:2px solid #c2f86a}.learn_piano_settings-freestyle-wrapper:hover{transform:scale(1.03);box-shadow:0 6px 12px #c2f86a4d}.learn_piano_settings-freestyle-wrapper.active{border-color:#a6ff4d;animation:freestylePulse 1.5s infinite ease-in-out}@keyframes freestylePulse{0%,to{box-shadow:0 0 #c2f86a66}50%{box-shadow:0 0 10px #c2f86ab3}}.learn_piano_settings-summary.freestyle{background:transparent;border-top:1px solid rgba(255,255,255,.15);padding:16px 24px;color:#c2f86a;font-weight:700;font-size:1.25rem}@media screen and (max-height: 500px) and (orientation: landscape){.learn_piano_settings-navbar{flex-direction:column;align-items:stretch;gap:8px;padding:8px;font-size:1rem}.learn_piano_settings-dropbtn{padding:8px 12px;font-size:.95rem;border-radius:8px}.learn_piano_settings-dropdown-content label{font-size:.9rem}.learn_piano_settings-rounds-group,.learn_piano_settings-sequence-group,.learn_piano_settings-freestyle-wrapper{padding:6px 10px;border-radius:8px;gap:6px}.learn_piano_settings-rounds-label,.learn_piano_settings-sequence-label{font-size:1rem}.learn_piano_settings-rounds-input,.learn_piano_settings-sequence-input{font-size:1rem;width:60px;padding:4px 6px}.learn_piano_settings-start-btn{padding:8px 14px;font-size:1rem;border-radius:10px}.learn_piano_settings-floating-message{top:120px;font-size:.9rem;padding:8px 14px;max-width:92vw}.learn_piano_settings-summary{padding:8px 12px;font-size:1rem}}.learn_piano_chords-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec;overflow:hidden}.learn_piano_chords-navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;min-height:80px}.learn_piano_chords-navbar-left{display:flex;align-items:center;gap:14px}.learn_piano_chords-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background-color:#27391c;border-radius:12px;border:2px solid #F1EFEC}.learn_piano_chords-btn{padding:14px 20px;font-size:1.1rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border:none;border-radius:10px;cursor:pointer;transition:transform .2s ease}.learn_piano_chords-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.learn_piano_chords-start-btn{padding:14px 24px!important;font-size:1.1rem}.learn_piano_chords-stats{display:flex;gap:8px;align-items:center;font-weight:700;font-size:1.1rem;background:#27391c;padding:6px 12px;border-radius:12px;border:2px solid #F1EFEC}.learn_piano_chords-stat{background-color:#d4c9be;border-radius:6px;padding:6px 10px;color:#18230f;min-width:30px;text-align:center}.learn_piano_chords-stat.correct{background-color:#5cff70}.learn_piano_chords-stat.wrong{background-color:#ff4c4c;color:#fff}.learn_piano_chords-stat.current{background-color:#ffe99e}.learn_piano_chords-stat.tries{background-color:#ccc}.learn_piano_chords-fill-space{flex-grow:1}.learn_piano_chords-bottom{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}.learn_piano_chords-chords{display:grid;gap:12px;padding:14px 16px;align-items:stretch;justify-items:stretch;height:10vh;width:100%;box-sizing:border-box}.learn_piano_chords-keyboard{width:100vw;padding-bottom:12px;overflow-x:hidden}.learn_piano_chords-flash-correct{animation:learn_piano_chordsFlashGreen .4s ease}.learn_piano_chords-flash-wrong{animation:learn_piano_chordsFlashRed .4s ease}.learn_piano_chords-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.learn_piano_chords-popup{background:#93fc79;color:#18230f;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 20px #0006;max-width:400px;width:90%}.learn_piano_chords-popup h2{margin-bottom:1rem}.learn_piano_chords-popup p{font-size:1.1rem;margin:.5rem 0}.learn_piano_chords-popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.learn_piano_chords-popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.learn_piano_chords-popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}@keyframes learn_piano_chordsFlashGreen{0%{background-color:#4cff4c!important}to{background-color:inherit}}@keyframes learn_piano_chordsFlashRed{0%{background-color:#ff4c4c!important}to{background-color:inherit}}.learn_piano_chords-btn.bounce-flash{animation:bounceFlash .6s infinite}.floating-message{position:absolute;top:150px;left:50%;transform:translate(-50%);background-color:#ffffff2e;color:#fff;font-size:1.8rem;font-weight:700;padding:16px 28px;border-radius:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;z-index:10;animation:messageFadeIn .3s ease}.disabled-answer{background:linear-gradient(to bottom,#3ff62a,#aae0aa)!important;color:#253025!important;opacity:.7;cursor:default;pointer-events:none;box-shadow:inset 0 -2px 4px #0000001a!important;transform:none!important}@media screen and (orientation: landscape) and (max-height: 500px){.learn_piano_chords-navbar{flex-direction:row;justify-content:space-between;align-items:center;padding:8px 12px;gap:10px}.learn_piano_chords-controls,.learn_piano_chords-scale-chord-wrapper{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}.learn_piano_chords-bottom{display:flex;flex-direction:column;margin-top:0;gap:0;padding:0}.learn_piano_chords-chords{gap:6px;padding:6px;margin-bottom:7px;height:auto;grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}.learn_piano_chords-chord-btn{font-size:1.1rem;padding:6px}.learn_piano_chords-start-btn{padding:8px 14px;font-size:1rem;width:auto}.learn_piano_chords-keyboard,.learn_piano_chords-keyboard-wrapper{margin-top:0;padding-bottom:2px}.learn_piano_chords-floating-setup-message,.learn_piano_chords-floating-message{top:60px;font-size:.95rem;padding:6px 12px;max-width:90vw;z-index:15}.learn_piano_chords-summary{font-size:.9rem;padding:6px 12px}}@media only screen and (max-width: 1000px) and (orientation: landscape){.learn_piano_chords-popup{max-width:280px;max-height:80vh;padding:1rem 1.2rem;font-size:.9rem;border-radius:10px;text-align:center;overflow-y:auto;box-shadow:0 6px 16px #0006;background:#93fc79;color:#18230f;border:2px solid #5CFF70}.learn_piano_chords-popup h2{font-size:1rem;margin-bottom:.6rem;color:#000501}.learn_piano_chords-popup p{font-size:.85rem;margin:.4rem 0;color:#000}.learn_piano_chords-popup-buttons{display:flex;flex-direction:column;gap:8px;margin-top:12px}.learn_piano_chords-popup-buttons button{font-size:.9rem;padding:.6rem .75rem;border-radius:8px;font-weight:700;border:none;cursor:pointer;box-shadow:0 2px 6px #0000004d;background:linear-gradient(to right,#1f7d53,#255f38);color:#f8f8f8;transition:background .3s ease,transform .2s ease}.learn_piano_chords-popup-buttons button:hover{transform:scale(1.04);background:linear-gradient(to right,#255f38,#1f7d53)}.learn_piano_chords-floating-message{font-size:.9rem;top:70px;padding:6px 10px;border-radius:10px;max-width:90vw;text-align:center}.learn_piano_chords-btn{padding:10px 16px;font-size:.85rem;border-radius:8px}.learn_piano_chords-stats{font-size:.9rem;padding:5px 8px;gap:6px}.learn_piano_chords-stat{padding:5px 6px;font-size:.8rem;border-radius:6px}.learn_piano_chords-chords{padding:8px 10px;gap:8px;grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}.learn_piano_chords-chord-btn{font-size:1.2rem;padding:6px;border-radius:8px}}.learn_piano_chords-keyboard-container{background-color:transparent!important;display:flex;align-items:flex-end;justify-content:center;width:100%;height:30vh;padding:14px;overflow-x:hidden}.learn_piano_chords-octave{display:flex;flex:1 1 0;position:relative}.learn_piano_chords-white-keys{display:flex;flex:1;z-index:1}.learn_piano_chords-white-key{flex:1 1 0;min-width:40px;max-width:90px;height:clamp(200px,32vh,360px);background:linear-gradient(to bottom,#f1efec,#d4c9be);border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:2px solid #999;display:flex;align-items:flex-end;justify-content:center;font-size:1.3rem;font-weight:700;box-shadow:inset 0 -3px 4px #00000014;transition:background .2s ease,box-shadow .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;color:#18230f;position:relative;overflow:hidden}.learn_piano_chords-white-key:hover{background:linear-gradient(to bottom,#c3f7d5,#aaf4c5);box-shadow:inset 0 -4px 6px #00800033}.learn_piano_chords-white-key:active{background:#d4c9be}.learn_piano_chords-label{padding:6px;z-index:10;position:relative;pointer-events:none}.learn_piano_chords-black-keys{position:absolute;top:0;left:0;width:100%;height:clamp(140px,24vh,242px);z-index:2}.learn_piano_chords-black-key{position:absolute;width:clamp(25px,4vw,50px);height:clamp(140px,24vh,242px);background:linear-gradient(to bottom,#18230f,#0f1610);border-radius:3px;transform:translate(-50%);box-shadow:0 4px 12px #00000080;cursor:pointer;z-index:3;transition:background .2s ease,transform .15s ease,box-shadow .15s ease;overflow:hidden}.learn_piano_chords-black-key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000a6}.learn_piano_chords-black-key:active{background:#1f7d53;transform:translate(-50%) scaleY(.98) translateY(1px);box-shadow:0 2px 6px #0006}.learn_piano_chords-Cs{left:12.85%}.learn_piano_chords-Ds{left:27.1%}.learn_piano_chords-Fs{left:56.6%}.learn_piano_chords-Gs{left:70.85%}.learn_piano_chords-As{left:85.15%}.learn_piano_chords-white-key.flash-correct .flash-overlay,.learn_piano_chords-black-key.flash-correct .flash-overlay{background-color:#4cff4c;opacity:1}.learn_piano_chords-white-key.flash-wrong .flash-overlay,.learn_piano_chords-black-key.flash-wrong .flash-overlay{background-color:#ff4c4c;opacity:1}.learn_piano_chords-white-key.flash-blue .flash-overlay,.learn_piano_chords-black-key.flash-blue .flash-overlay{background-color:#4ca7ff;opacity:1}.learn_piano_chords-white-key.learn_piano_chords-flash-0 .flash-overlay{background-color:#a8ffb3;opacity:1}.learn_piano_chords-white-key.learn_piano_chords-flash-1 .flash-overlay{background-color:#5cff88;opacity:1}.learn_piano_chords-white-key.learn_piano_chords-flash-2 .flash-overlay{background-color:#00ff5c;opacity:1}.learn_piano_chords-black-key.learn_piano_chords-flash-0 .flash-overlay{background-color:#a8ffb3;opacity:1}.learn_piano_chords-black-key.learn_piano_chords-flash-1 .flash-overlay{background-color:#5cff88;opacity:1}.learn_piano_chords-black-key.learn_piano_chords-flash-2 .flash-overlay{background-color:#00ff5c;opacity:1}@media (max-width: 1600px){.learn_piano_chords-black-key{width:clamp(20px,3.5vw,40px);height:clamp(120px,20vh,220px)}}.learn_piano_chords-container-settings{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec}.learn_piano_chords-content-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.learn_piano_chords-navbar{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;font-size:1.15rem}.learn_piano_chords-dropdown{position:relative;display:inline-block;margin-right:12px}.learn_piano_chords-dropbtn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .3s ease}.learn_piano_chords-dropbtn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53);box-shadow:0 6px 14px #00000040}.learn_piano_chords-dropdown-content{display:none;position:absolute;top:110%;left:0;background-color:#f1efec;color:#18230f;padding:12px;border-radius:12px;box-shadow:0 2px 6px #0000004d;z-index:10;flex-direction:column}.learn_piano_chords-dropdown:hover .learn_piano_chords-dropdown-content{display:flex}.learn_piano_chords-dropdown-content label{font-size:1rem;margin-bottom:4px;cursor:pointer}.learn_piano_chords-controls{display:flex;align-items:center;gap:16px}.learn_piano_chords-rounds-input{width:80px;font-size:1.1rem;padding:6px 10px;border-radius:10px;border:2px solid #F1EFEC;background-color:#27391c;color:#f1efec;text-align:center}.learn_piano_chords-start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #00000040}.learn_piano_chords-start-btn:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.07);box-shadow:0 8px 18px #0000004d}.learn_piano_chords-summary{padding:12px 24px;font-size:1.2rem;text-align:center;color:#f1efec}.learn_piano_chords-chord-buttons{display:grid;gap:12px;padding:14px;align-items:stretch;justify-items:stretch;height:10vh}.learn_piano_chords-chord-btn{width:100%;height:100%;font-size:2.2rem;font-weight:700;border:2px solid #F1EFEC;border-radius:10px;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.learn_piano_chords-chord-btn:hover{background-color:#27391c;transform:scale(1.03)}.learn_piano_chords-scale-chord-wrapper{display:flex;gap:12px;align-items:center}.learn_piano_chords-keyboard-wrapper{width:100%;padding-bottom:12px}.learn_piano_chords-floating-setup-message{position:absolute;top:90px;left:50%;transform:translate(-50%);background-color:#ffffff1f;color:#fff;font-size:1.4rem;font-weight:700;padding:14px 24px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;z-index:10;animation:messageFadeIn .4s ease}.learn_piano_chords-start-btn{animation:bouncePulse 2s infinite ease-in-out;background:linear-gradient(45deg,#1f7d53,#38b27a,#255f38);background-size:200% 200%;animation-name:bouncePulse,pulseGradient;animation-duration:2s,4s;animation-timing-function:ease-in-out,ease-in-out;animation-iteration-count:infinite}.learn_piano_chords-rounds-input{width:80px;font-size:1.2rem;padding:6px 10px;border-radius:8px;border:none;background-color:#1a2714;color:#f1efec;text-align:center;outline:none;transition:box-shadow .2s ease}.learn_piano_chords-rounds-input:focus{box-shadow:0 0 6px #99e06c}.learn_piano_chords-freestyle-toggle{display:flex;align-items:center;gap:.5rem;font-size:1rem;background-color:#000;border:1px solid #ccc;padding:.6rem 1rem;border-radius:1rem;margin-left:1rem;transition:background-color .3s ease;cursor:pointer}.learn_piano_chords-freestyle-toggle:hover{background-color:#028404}.learn_piano_chords-freestyle-toggle input[type=checkbox]{transform:scale(1.4);cursor:pointer}.learn_piano_chords-chord-btn.freestyle-disabled{background-color:#e0e0e0;color:#555;cursor:default;border:1px dashed #bbb;box-shadow:none;transition:background-color .3s,color .3s}.learn_piano_chords-chord-btn.freestyle-disabled:hover{background-color:#e0e0e0;color:#555}@media screen and (orientation: landscape) and (max-height: 500px){.learn_piano_chords-navbar{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px}.learn_piano_chords-controls{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:12px}.learn_piano_chords-scale-chord-wrapper{flex-direction:row;flex-wrap:wrap;gap:10px}.learn_piano_chords-chord-buttons{height:auto;gap:6px;padding:6px;margin-bottom:4px;grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}.learn_piano_chords-chord-btn{font-size:1.2rem;padding:6px 8px}.learn_piano_chords-start-btn{font-size:1rem;padding:10px 14px}.learn_piano_chords-floating-setup-message{top:60px;font-size:1rem;padding:8px 12px;max-width:90vw}.learn_piano_chords-summary{font-size:1rem;padding:8px 12px}.learn_piano_chords-keyboard-wrapper{padding-bottom:2px;margin-top:0}}.learn_piano_chords-dropbtn{text-decoration:none}.learn_piano_chords-dropdown a{text-decoration:none;color:inherit}.interval_practice-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#c2f86a,#18230f);color:#f1efec;overflow:hidden}.interval_practice-navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;min-height:80px}.interval_practice-navbar-left{display:flex;align-items:center;gap:14px}.interval_practice-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background-color:#27391c;border-radius:12px;border:2px solid #F1EFEC}.interval_practice-btn{padding:14px 20px;font-size:1.1rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border:none;border-radius:10px;cursor:pointer;transition:transform .2s ease}.interval_practice-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.interval_practice-start-btn{padding:14px 24px}.interval_practice-stats{display:flex;gap:10px;align-items:center;font-weight:700;font-size:1.15rem;background:#27391c;padding:10px 16px;border-radius:14px;border:2px solid #F1EFEC}.interval_practice-stat{background-color:#d4c9be;border-radius:8px;padding:10px 12px;color:#18230f;min-width:32px;text-align:center;font-size:1.1rem}.interval_practice-stat.correct{background-color:#5cff70}.interval_practice-stat.wrong{background-color:#ff4c4c;color:#fff}.interval_practice-stat.current{background-color:#ffe99e}.interval_practice-stat.tries{background-color:#ccc}.interval_practice-fill-space{flex-grow:1}.interval_practice-bottom{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}.interval_practice-keyboard{width:100vw;padding-bottom:12px;overflow-x:hidden}.interval_practice-floating-message{position:absolute;top:150px;left:50%;transform:translate(-50%);background-color:#ffffff2e;color:#fff;font-size:1.8rem;font-weight:700;padding:16px 28px;border-radius:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;z-index:10;animation:messageFadeIn .3s ease}.interval_practice-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.interval_practice-popup{background:#93fc79;color:#18230f;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 20px #0006;max-width:400px;width:90%}.interval_practice-popup h2{margin-bottom:1rem}.interval_practice-popup p{font-size:1.1rem;margin:.5rem 0}.interval_practice-popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.interval_practice-popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.interval_practice-popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}@keyframes intervalFlashGreen{0%{background-color:#4cff4c!important}to{background-color:inherit}}@keyframes intervalFlashRed{0%{background-color:#ff4c4c!important}to{background-color:inherit}}.interval_practice-flash-correct{animation:intervalFlashGreen .4s ease}.interval_practice-flash-wrong{animation:intervalFlashRed .4s ease}@media screen and (max-width: 768px){.interval_practice-btn{padding:8px 14px;font-size:.95rem;border-radius:8px}.interval_practice-start-btn{padding:8px 16px}.interval_practice-stats{font-size:1rem;padding:6px 10px;gap:6px}.interval_practice-stat{padding:6px 8px;font-size:.95rem;border-radius:6px}}@media only screen and (max-width: 1000px) and (orientation: landscape){.interval_practice-popup{max-width:280px;max-height:80vh;padding:1rem 1.2rem;font-size:.9rem;border-radius:10px;text-align:center;overflow-y:auto;box-shadow:0 6px 16px #0006;background:#93fc79;color:#18230f;border:2px solid #5CFF70}.interval_practice-popup h2{font-size:1rem;margin-bottom:.6rem;color:#000501}.interval_practice-popup p{font-size:.85rem;margin:.4rem 0;color:#000}.interval_practice-popup-buttons{display:flex;flex-direction:column;gap:8px;margin-top:12px}.interval_practice-popup-buttons button{font-size:.9rem;padding:.6rem .75rem;border-radius:8px;font-weight:700;border:none;cursor:pointer;box-shadow:0 2px 6px #0000004d;background:linear-gradient(to right,#1f7d53,#255f38);color:#f8f8f8;transition:background .3s ease,transform .2s ease}.interval_practice-popup-buttons button:hover{transform:scale(1.04);background:linear-gradient(to right,#255f38,#1f7d53)}.interval_practice-floating-message{font-size:.9rem;top:80px;padding:6px 10px;border-radius:10px}.interval_practice-btn{padding:6px 12px;font-size:.8rem;border-radius:6px}.interval_practice-stats{font-size:.9rem;padding:5px 8px;gap:4px}.interval_practice-stat{padding:5px 6px;font-size:.8rem;border-radius:5px}}.interval-practice-keyboard-container{background-color:transparent;display:flex;align-items:flex-end;justify-content:center;width:100%;height:30vh;padding:14px;overflow-x:hidden}.interval-practice-octave{display:flex;flex:1 1 0;position:relative}.interval-practice-white-keys{display:flex;flex:1;z-index:1}.interval-practice-white-key{flex:1 1 0;min-width:40px;max-width:90px;height:clamp(200px,32vh,360px);background:linear-gradient(to bottom,#f1efec,#d4c9be);border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:2px solid #999;display:flex;align-items:flex-end;justify-content:center;font-size:1.3rem;font-weight:700;box-shadow:inset 0 -3px 4px #00000014;transition:background .2s ease,box-shadow .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;color:#18230f;position:relative;overflow:hidden}.interval-practice-white-key:hover{background:linear-gradient(to bottom,#c3f7d5,#aaf4c5);box-shadow:inset 0 -4px 6px #00800033}.interval-practice-white-key:active{background:#d4c9be}.interval-practice-label{padding:6px;z-index:10;position:relative;pointer-events:none}.interval-practice-black-keys{position:absolute;top:0;left:0;width:100%;height:clamp(140px,24vh,242px);z-index:2}.interval-practice-black-key{position:absolute;width:clamp(25px,4vw,50px);height:clamp(140px,24vh,242px);background:linear-gradient(to bottom,#18230f,#0f1610);border-radius:3px;transform:translate(-50%);box-shadow:0 4px 12px #00000080;cursor:pointer;z-index:3;transition:background .2s ease,transform .15s ease,box-shadow .15s ease;overflow:hidden}.interval-practice-black-key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000a6}.interval-practice-black-key:active{background:#1f7d53;transform:translate(-50%) scaleY(.98) translateY(1px);box-shadow:0 2px 6px #0006}.interval-practice-Cs{left:12.85%}.interval-practice-Ds{left:27.1%}.interval-practice-Fs{left:56.6%}.interval-practice-Gs{left:70.85%}.interval-practice-As{left:85.15%}.interval-practice-white-key.flash-blue .flash-overlay,.interval-practice-black-key.flash-blue .flash-overlay{background-color:#9edfff;opacity:1}.interval-practice-white-key.flash-correct .flash-overlay,.interval-practice-black-key.flash-correct .flash-overlay{background-color:#4cff4c;opacity:1}.interval-practice-white-key.flash-wrong .flash-overlay,.interval-practice-black-key.flash-wrong .flash-overlay{background-color:#ff4c4c;opacity:1}@media (max-width: 1600px){.interval-practice-black-key{width:clamp(20px,3.5vw,40px);height:clamp(120px,20vh,220px)}}.interval_training_settings-container{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#c2f86a,#18230f);color:#f1efec;position:relative}.interval_training_settings-content-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.interval_training_settings-navbar{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;font-size:1.15rem;position:relative}.interval_training_settings-dropdown{position:relative;display:inline-block;margin-right:12px}.interval_training_settings-dropbtn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .3s ease}.interval_training_settings-dropbtn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53);box-shadow:0 6px 14px #00000040}.interval_training_settings-dropdown-content{display:none;position:absolute;top:110%;left:0;background-color:#f1efec;color:#18230f;padding:12px;border-radius:12px;box-shadow:0 2px 6px #0000004d;z-index:20;flex-direction:column}.interval_training_settings-dropdown:hover .interval_training_settings-dropdown-content{display:flex}.interval_training_settings-dropdown-content label{font-size:1rem;margin-bottom:4px;cursor:pointer}.interval_training_settings-right-controls{display:flex;align-items:center;gap:16px}.interval_training_settings-rounds-group{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;background:#27391c;border:2px solid #F1EFEC;box-shadow:0 4px 10px #00000040;font-size:1.15rem;font-weight:600}.interval_training_settings-rounds-group label{color:#f1efec;font-weight:700}.interval_training_settings-rounds-group input{width:64px;text-align:center;font-size:1.15rem;padding:6px 10px;border-radius:10px;border:none;background:#1a2714;color:#f1efec;outline:none;transition:box-shadow .2s ease}.interval_training_settings-rounds-group input:focus{box-shadow:0 0 8px #99e06c}.interval_training_settings-start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #00000040;background-size:200% 200%;animation:bouncePulse 2s infinite ease-in-out,pulseGradient 4s infinite ease-in-out}.interval_training_settings-start-btn:hover{transform:scale(1.07);box-shadow:0 8px 18px #0000004d;background:linear-gradient(to right,#255f38,#1f7d53)}.interval_training_settings-floating-message{position:absolute;top:90px;left:50%;transform:translate(-50%);background-color:#ffffff1f;color:#fff;font-size:1.4rem;font-weight:700;padding:14px 24px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;z-index:10;animation:messageFadeIn .4s ease}.interval_training_settings-summary{padding:12px 24px;font-size:1.2rem;text-align:center;color:#f1efec}.interval_training_settings-keyboard-wrapper{width:100%;padding-bottom:12px}.interval_training_settings-toggle{padding:12px 24px;font-size:1.15rem;font-weight:600;border-radius:12px;cursor:pointer;border:none;background:linear-gradient(to right,#27391c,#1f3c2b);color:#f1efec;box-shadow:0 4px 8px #0003;transition:all .3s ease;line-height:1.3;height:100%;display:flex;align-items:center;justify-content:center}.interval_training_settings-toggle.on{background:linear-gradient(to right,#5cff70,#3ac97c);color:#18230f;box-shadow:0 0 10px #5cff7099}.interval_training_settings-toggle.off:hover{background:linear-gradient(to right,#3c3c3c,#1f3c2b);box-shadow:0 6px 14px #fff3;transform:scale(1.05)}@media screen and (max-width: 768px){.interval_training_settings-navbar{flex-direction:column;align-items:center;gap:12px;padding:10px}.interval_training_settings-controls-group{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center}.interval_training_settings-dropdown{width:90%}.interval_training_settings-dropbtn{width:100%;font-size:1rem;padding:10px 16px}.interval_training_settings-dropdown-content{max-height:200px;overflow-y:auto;font-size:.95rem}.interval_training_settings-right-controls{flex-direction:column;gap:12px;width:100%;align-items:center}.interval_training_settings-rounds-group{flex-direction:row;justify-content:center;width:90%;padding:8px 12px}.interval_training_settings-start-btn{font-size:1rem;padding:10px 20px}.interval_training_settings-floating-message{top:60px;font-size:1.1rem;padding:10px 16px;max-width:92vw}.interval_training_settings-summary{font-size:1rem;padding:10px 16px}.interval_training_settings-keyboard-wrapper{padding-bottom:6px}}@media screen and (max-height: 500px) and (orientation: landscape){.interval_training_settings-navbar{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;padding:8px}.interval_training_settings-controls-group{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}.interval_training_settings-dropdown{flex:1 1 120px;min-width:90px}.interval_training_settings-dropbtn{font-size:.9rem;padding:8px 12px}.interval_training_settings-dropdown-content{font-size:.85rem;max-height:160px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.interval_training_settings-dropdown-content::-webkit-scrollbar{width:6px}.interval_training_settings-dropdown-content::-webkit-scrollbar-thumb{background-color:#888;border-radius:6px}.interval_training_settings-right-controls{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}.interval_training_settings-rounds-group{flex:1;min-width:120px;padding:6px 10px}.interval_training_settings-start-btn{font-size:.9rem;padding:8px 14px}.interval_training_settings-floating-message{display:none}.interval_training_settings-summary{font-size:.9rem;padding:8px 12px}.interval_training_settings-keyboard-wrapper{padding-bottom:4px}}a.interval_training_settings-dropbtn{text-decoration:none}.which_higher_settings-container{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#c2f86a,#18230f);color:#f1efec;font-family:Segoe UI,sans-serif;overflow:hidden}.which_higher_settings-navbar{display:flex;justify-content:center;align-items:center;padding:18px 28px;min-height:90px;background:linear-gradient(to right,#1f7d53,#255f38);box-shadow:0 4px 10px #0006;border-bottom:3px solid #5CFF70;font-size:1.8rem;font-weight:700;border-radius:0 0 16px 16px}.which_higher_settings-content-wrapper{display:flex;flex-direction:column;height:100%;justify-content:center;align-items:center;gap:40px;padding-bottom:60px}.which_higher_settings-controls{display:flex;flex-direction:column;align-items:center;gap:28px;background:#27391cd9;padding:30px 40px;border-radius:20px;border:2px solid #F1EFEC;box-shadow:0 8px 20px #0006}.which_higher_settings-rounds-group{display:flex;align-items:center;background:#27391c;border:2px solid #F1EFEC;padding:12px 18px;border-radius:14px;box-shadow:0 3px 6px #0003;gap:14px}.which_higher_settings-rounds-label{font-size:1.4rem;font-weight:700}.which_higher_settings-rounds-input{width:100px;font-size:1.4rem;padding:8px 12px;border-radius:10px;border:none;background-color:#1a2714;color:#f1efec;text-align:center;outline:none;transition:box-shadow .3s ease}.which_higher_settings-rounds-input:focus{box-shadow:0 0 8px #99e06c}.which_higher_settings-octaves-group{display:flex;flex-direction:column;align-items:center}.which_higher_settings-octaves-label{font-size:1.4rem;font-weight:700;margin-bottom:10px}.which_higher_settings-octaves-buttons{display:flex;flex-wrap:wrap;gap:16px}.which_higher_settings-octave-btn{padding:12px 18px;font-size:1.4rem;background:#27391c;color:#f1efec;border:2px solid #F1EFEC;border-radius:14px;cursor:pointer;transition:all .3s ease;box-shadow:0 3px 8px #0000004d}.which_higher_settings-octave-btn.selected{background:#5cff70;color:#18230f;box-shadow:0 0 12px #5cff70cc}.which_higher_settings-octave-btn:hover{background:#1f3c2b;transform:scale(1.07)}.which_higher_settings-start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:16px 32px;border:none;border-radius:18px;font-size:1.5rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 14px #0000004d;margin-top:20px}.which_higher_settings-start-btn:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.08)}.which_higher_settings-floating-setup-message{position:absolute;top:0;left:50%;transform:translate(-50%);background-color:#ffffff26;color:#fff;font-size:1.6rem;font-weight:700;padding:16px 26px;border-radius:18px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;z-index:10}.which_higher_settings-summary{padding:14px 26px;font-size:1.3rem;text-align:center;color:#f1efec;background:#27391cd9;border-radius:14px;margin-bottom:24px}@media (max-width: 768px){.which_higher_settings-container{min-height:100vh;height:auto;padding:16px 8px;overflow-y:auto;display:flex;flex-direction:column;align-items:center}.which_higher_settings-navbar{padding:12px;font-size:1.3rem;text-align:center;border-radius:0 0 12px 12px;width:100%}.which_higher_settings-content-wrapper{width:100%;padding:0;gap:20px;display:flex;flex-direction:column;align-items:center}.which_higher_settings-controls{padding:16px;gap:20px;width:100%;max-width:500px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}.which_higher_settings-rounds-group{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 14px;box-sizing:border-box}.which_higher_settings-rounds-label{font-size:1.2rem}.which_higher_settings-rounds-input{width:100%;font-size:1.2rem;padding:6px 10px}.which_higher_settings-octaves-group{width:100%;display:flex;flex-direction:column;align-items:center}.which_higher_settings-octaves-label{font-size:1.2rem;margin-bottom:8px}.which_higher_settings-octaves-buttons{justify-content:center;gap:8px;flex-wrap:wrap;display:flex}.which_higher_settings-octave-btn{padding:10px 14px;font-size:1.2rem;flex:0 0 30%;max-width:90px}.which_higher_settings-start-btn{font-size:1.2rem;padding:12px 24px;width:100%;max-width:400px}.which_higher_settings-floating-setup-message{position:static;transform:none;background-color:#ffffff1a;font-size:1.1rem;padding:10px 16px;width:90%;text-align:center;border-radius:12px;margin-top:12px}.which_higher_settings-summary{font-size:1.1rem;padding:10px 18px;margin-bottom:12px;width:100%;max-width:400px;text-align:center}}.which_higher_settings-dropdown{margin-top:10px}.which_higher_settings-dropbtn{background-color:#4caf50;color:#fff;padding:12px 24px;font-size:16px;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:background-color .2s ease,transform .2s ease}.which_higher_settings-dropbtn:hover{background-color:#45a049;transform:scale(1.05)}.which_higher_game-container{height:100vh;background:linear-gradient(to bottom,#c2f86a,#18230f);color:#f1efec;font-family:Segoe UI,sans-serif;padding-top:110px;box-sizing:border-box;position:relative}.which_higher-navbar{position:fixed;top:0;left:0;width:100%;min-height:90px;background:linear-gradient(to right,#1f7d53,#255f38);border-bottom:3px solid #5CFF70;box-shadow:0 4px 10px #0006;display:flex;justify-content:space-between;align-items:center;padding:18px 32px;z-index:100;border-radius:0 0 16px 16px}.which_higher-nav-buttons button{padding:12px 20px;font-size:1.4rem;font-weight:700;background:#27391c;color:#f1efec;border:2px solid #F1EFEC;border-radius:14px;cursor:pointer;margin-right:14px;transition:all .2s ease;box-shadow:0 4px 10px #0000004d}.which_higher-nav-buttons button:hover:not(:disabled){background-color:#1f3c2b;transform:scale(1.07)}.which_higher-nav-buttons button:disabled{opacity:.5;cursor:not-allowed}.which_higher-nav-stats{display:flex;flex-direction:column;gap:6px;font-size:1.2rem;text-align:right}.which_higher-nav-controls button{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.3rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #0000004d}.which_higher-nav-controls button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.08)}.which_higher-instructions{position:absolute;top:120px;width:100%;text-align:center;font-size:1.6rem;font-weight:700;padding:18px 28px;background:#ffffff26;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:14px;margin:0 auto;z-index:5;pointer-events:none}.which_higher-popup{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f190ab3;display:flex;justify-content:center;align-items:center;z-index:200}.which_higher-popup-box{background:#27391c;padding:36px;border-radius:20px;text-align:center;box-shadow:0 6px 16px #0006;border:2px solid #5CFF70;max-width:340px;width:90%;animation:fadeIn .3s ease-out}.which_higher-popup-box h2{font-size:1.8rem;margin-bottom:10px;color:#5cff70}.which_higher-popup-box p{font-size:1.2rem;color:#f1efec;margin:8px 0}.which_higher-popup-buttons{margin-top:20px}.which_higher-popup-buttons button{margin:10px;padding:12px 24px;font-size:1.2rem;font-weight:700;border-radius:14px;border:none;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 10px #0000004d}.which_higher-popup-buttons button:first-child{background-color:#5cff70;color:#18230f}.which_higher-popup-buttons button:last-child{background-color:#2196f3;color:#fff}.which_higher-popup-buttons button:hover{transform:scale(1.05)}@keyframes fadeIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@media (max-width: 768px){.which_higher_game-container{height:auto;min-height:100vh;padding-top:100px;padding-bottom:30px;box-sizing:border-box}.which_higher-navbar{flex-direction:column;align-items:center;padding:12px 16px;gap:12px;text-align:center}.which_higher-nav-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}.which_higher-nav-buttons button{flex:1 1 45%;font-size:1.2rem;padding:10px 12px;margin:0;max-width:140px}.which_higher-nav-stats{font-size:1rem;gap:4px;align-items:center}.which_higher-nav-controls{width:100%;display:flex;justify-content:center}.which_higher-nav-controls button{font-size:1.1rem;padding:10px 20px;width:100%;max-width:200px}.which_higher-instructions{position:relative;top:0;font-size:1.2rem;padding:12px 18px;margin:20px auto 10px;width:92%;border-radius:12px}.which_higher-popup-box{width:90%;padding:20px}.which_higher-popup-box h2{font-size:1.5rem}.which_higher-popup-box p{font-size:1rem}.which_higher-popup-buttons{display:flex;flex-direction:column;gap:12px}.which_higher-popup-buttons button{font-size:1rem;padding:10px;width:100%}}.difference_practice_settings-container{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#54d505,#020500);color:#f1efec}.difference_practice_settings-content-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.difference_practice_settings-navbar{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;font-size:1.15rem}.difference_practice_settings-dropdown{position:relative;display:inline-block;margin-right:12px}.difference_practice_settings-dropbtn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .3s ease}.difference_practice_settings-dropbtn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53);box-shadow:0 6px 14px #00000040}.difference_practice_settings-dropdown-content{display:none;position:absolute;top:110%;left:0;background-color:#f1efec;color:#18230f;padding:12px;border-radius:12px;box-shadow:0 2px 6px #0000004d;z-index:10;flex-direction:column}.difference_practice_settings-dropdown:hover .difference_practice_settings-dropdown-content{display:flex}.difference_practice_settings-dropdown-content label{font-size:1rem;margin-bottom:4px;cursor:pointer}.difference_practice_settings-controls{display:flex;align-items:center;gap:16px}.difference_practice_settings-rounds-input{width:80px;font-size:1.2rem;padding:6px 10px;border-radius:8px;border:none;background-color:#1a2714;color:#f1efec;text-align:center;outline:none;transition:box-shadow .2s ease}.difference_practice_settings-rounds-input:focus{box-shadow:0 0 6px #99e06c}.difference_practice_settings-start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #00000040;animation:bouncePulse 2s infinite ease-in-out,pulseGradient 4s infinite ease-in-out;background-size:200% 200%}.difference_practice_settings-start-btn:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.07);box-shadow:0 8px 18px #0000004d}.difference_practice_settings-summary{padding:12px 24px;font-size:1.2rem;text-align:center;color:#f1efec}.difference_practice_settings-sequence-buttons{display:grid;gap:12px;padding:14px;align-items:stretch;justify-items:stretch;height:10vh}.difference_practice_settings-sequence-btn{width:100%;height:100%;font-size:2.2rem;font-weight:700;border:2px solid #F1EFEC;border-radius:10px;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.difference_practice_settings-sequence-btn:hover{background-color:#27391c;transform:scale(1.03)}.difference_practice_settings-dropdown-group{display:flex;gap:12px;align-items:center}.difference_practice_settings-keyboard-wrapper{width:100%;padding-bottom:12px}.difference_practice_settings-floating-message{position:absolute;top:90px;left:50%;transform:translate(-50%);background-color:#ffffff1f;color:#fff;font-size:1.4rem;font-weight:700;padding:14px 24px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;z-index:10;animation:messageFadeIn .4s ease}@media only screen and (max-width: 1000px) and (orientation: landscape){.difference_practice_settings-navbar{flex-wrap:wrap;gap:10px;font-size:1rem;padding:10px}.difference_practice_settings-dropbtn{font-size:1rem;padding:10px 18px;border-radius:10px}.difference_practice_settings-controls{flex-wrap:wrap;gap:10px}.difference_practice_settings-start-btn{font-size:1rem;padding:10px 18px;border-radius:10px;animation:none}.difference_practice_settings-floating-message{top:100px;font-size:1.1rem;padding:10px 18px;border-radius:12px}.difference_practice_settings-summary{display:none}.difference_practice_settings-sequence-buttons{height:auto;padding:10px;gap:10px;grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}.difference_practice_settings-sequence-btn{font-size:1.6rem;border-radius:8px}.difference_practice_settings-keyboard-wrapper{height:30vh;padding-bottom:10px}.rounds-group{padding:6px 10px;gap:8px;border-radius:10px}.rounds-label{font-size:1rem}.difference_practice_settings-rounds-input{font-size:1rem;padding:4px 8px;width:70px;border-radius:6px}}.difference_practice_settings-instruction-link{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 22px;border:none;border-radius:14px;font-size:1.1rem;font-weight:600;text-decoration:none;box-shadow:0 4px 10px #00000040;transition:all .3s ease;display:inline-block;margin-left:12px}.difference_practice_settings-instruction-link:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05);box-shadow:0 6px 14px #0000004d;cursor:pointer}@media only screen and (max-width: 1000px) and (orientation: landscape){.difference_practice_settings-instruction-link{font-size:1rem;padding:10px 18px;border-radius:10px;margin-left:8px}}.difference_practice_keyboard_view-container{background-color:transparent!important;display:flex;align-items:flex-end;justify-content:center;width:100%;height:30vh;padding:14px;overflow-x:hidden}.difference_practice_keyboard_view-octave{display:flex;flex:1 1 0;position:relative}.difference_practice_keyboard_view-white-keys{display:flex;flex:1;z-index:1}.difference_practice_keyboard_view-white-key{flex:1 1 0;min-width:40px;max-width:90px;height:clamp(200px,32vh,360px);background:linear-gradient(to bottom,#f1efec,#d4c9be);border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:2px solid #999;display:flex;align-items:flex-end;justify-content:center;font-size:1.3rem;font-weight:700;box-shadow:inset 0 -3px 4px #00000014;transition:background .2s ease,box-shadow .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;color:#18230f;position:relative;overflow:hidden}.difference_practice_keyboard_view-white-key:hover{background:linear-gradient(to bottom,#c3f7d5,#aaf4c5);box-shadow:inset 0 -4px 6px #00800033}.difference_practice_keyboard_view-white-key:active{background:#d4c9be}.difference_practice_keyboard_view-label{padding:6px;z-index:10;position:relative;pointer-events:none}.difference_practice_keyboard_view-black-keys{position:absolute;top:0;left:0;width:100%;height:clamp(140px,24vh,242px);z-index:2}.difference_practice_keyboard_view-black-key{position:absolute;width:clamp(25px,4vw,50px);height:clamp(140px,24vh,242px);background:linear-gradient(to bottom,#18230f,#0f1610);border-radius:3px;transform:translate(-50%);box-shadow:0 4px 12px #00000080;cursor:pointer;z-index:3;transition:background .2s ease,transform .15s ease,box-shadow .15s ease;overflow:hidden}.difference_practice_keyboard_view-black-key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000a6}.difference_practice_keyboard_view-black-key:active{background:#1f7d53;transform:translate(-50%) scaleY(.98) translateY(1px);box-shadow:0 2px 6px #0006}.difference_practice_keyboard_view-Cs{left:12.85%}.difference_practice_keyboard_view-Ds{left:27.1%}.difference_practice_keyboard_view-Fs{left:56.6%}.difference_practice_keyboard_view-Gs{left:70.85%}.difference_practice_keyboard_view-As{left:85.15%}.difference_practice_keyboard_view-flash-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;pointer-events:none;animation:flashFade .6s ease-out;opacity:0}.difference_practice_keyboard_view-white-key.difference_practice_keyboard_view-flash-0 .difference_practice_keyboard_view-flash-overlay{background-color:#a8ffb3;opacity:1}.difference_practice_keyboard_view-white-key.difference_practice_keyboard_view-flash-1 .difference_practice_keyboard_view-flash-overlay{background-color:#5cff88;opacity:1}.difference_practice_keyboard_view-white-key.difference_practice_keyboard_view-flash-2 .difference_practice_keyboard_view-flash-overlay{background-color:#00ff5c;opacity:1}.difference_practice_keyboard_view-black-key.difference_practice_keyboard_view-flash-0 .difference_practice_keyboard_view-flash-overlay{background-color:#a8ffb3;opacity:1}.difference_practice_keyboard_view-black-key.difference_practice_keyboard_view-flash-1 .difference_practice_keyboard_view-flash-overlay{background-color:#5cff88;opacity:1}.difference_practice_keyboard_view-black-key.difference_practice_keyboard_view-flash-2 .difference_practice_keyboard_view-flash-overlay{background-color:#00ff5c;opacity:1}.difference_practice_keyboard_view-white-key.flash-correct .difference_practice_keyboard_view-flash-overlay,.difference_practice_keyboard_view-black-key.flash-correct .difference_practice_keyboard_view-flash-overlay{background-color:#4cff4c;opacity:1}.difference_practice_keyboard_view-white-key.flash-wrong .difference_practice_keyboard_view-flash-overlay,.difference_practice_keyboard_view-black-key.flash-wrong .difference_practice_keyboard_view-flash-overlay{background-color:#ff4c4c;opacity:1}@media (max-width: 1600px){.difference_practice_keyboard_view-black-key{width:clamp(20px,3.5vw,40px);height:clamp(120px,20vh,220px)}}.differencegame-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#54d505,#020500);color:#f1efec;overflow:hidden}.differencegame-navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;min-height:80px}.differencegame-navbar-left{display:flex;align-items:center;gap:14px}.differencegame-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background-color:#27391c;border-radius:12px;border:2px solid #F1EFEC}.differencegame-btn{padding:14px 20px;font-size:1.1rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border:none;border-radius:10px;cursor:pointer;transition:transform .2s ease}.differencegame-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.differencegame-start-btn{padding:14px 24px!important;font-size:1.1rem}.differencegame-stats{display:flex;gap:8px;align-items:center;font-weight:700;font-size:1.1rem;background:#27391c;padding:6px 12px;border-radius:12px;border:2px solid #F1EFEC}.differencegame-stat{background-color:#d4c9be;border-radius:6px;padding:6px 10px;color:#18230f;min-width:30px;text-align:center}.differencegame-stat.correct{background-color:#5cff70}.differencegame-stat.wrong{background-color:#ff4c4c;color:#fff}.differencegame-stat.current{background-color:#ffe99e}.differencegame-stat.tries{background-color:#ccc}.differencegame-fill-space{flex-grow:1}.differencegame-bottom{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}.differencegame-buttons{display:grid;gap:12px;padding:14px 16px;align-items:stretch;justify-items:stretch;height:10vh;width:100%;box-sizing:border-box}.differencegame-note-btn{width:100%;height:100%;font-size:2.2rem;font-weight:700;border:2px solid #F1EFEC;border-radius:10px;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.differencegame-note-btn:hover{background-color:#27391c;transform:scale(1.03)}.differencegame-keyboard{width:100vw;padding-bottom:12px;overflow-x:hidden}.differencegame-flash-correct{animation:differencegameFlashGreen .4s ease}.differencegame-flash-wrong{animation:differencegameFlashRed .4s ease}.differencegame-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.differencegame-controls-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.differencegame-popup{background:#93fc79;color:#18230f;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 20px #0006;max-width:400px;width:90%}.differencegame-popup h2{margin-bottom:1rem}.differencegame-popup p{font-size:1.1rem;margin:.5rem 0}.differencegame-popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.differencegame-popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.differencegame-popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}@keyframes differencegameFlashGreen{0%{background-color:#4cff4c!important}to{background-color:inherit}}@keyframes differencegameFlashRed{0%{background-color:#ff4c4c!important}to{background-color:inherit}}.differencegame-btn.bounce-flash{animation:bounceFlash .6s infinite}.differencegame-floating-message{position:absolute;top:150px;left:50%;transform:translate(-50%);background-color:#ffffff2e;color:#fff;font-size:1.8rem;font-weight:700;padding:16px 28px;border-radius:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;z-index:10;animation:messageFadeIn .3s ease}.differencegame-floating-message.floating-anim{animation:bounceFade 1s ease}@media only screen and (max-width: 1000px) and (orientation: landscape){.differencegame-navbar{flex-wrap:wrap;padding:12px 16px;gap:10px}.differencegame-logo{font-size:1.3rem;padding:10px 14px;border-radius:10px}.differencegame-btn,.differencegame-start-btn{font-size:1rem;padding:10px 14px!important;border-radius:8px}.differencegame-stats{font-size:1rem;padding:6px 10px;gap:6px}.differencegame-stat{padding:5px 8px;font-size:.95rem}.differencegame-buttons{padding:10px;gap:10px;height:auto;grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}.differencegame-note-btn{font-size:1.6rem;border-radius:8px}.differencegame-keyboard{height:30vh;padding-bottom:8px}.differencegame-popup{max-width:280px;max-height:80vh;padding:1rem 1.2rem;font-size:.9rem;border-radius:10px;text-align:center;overflow-y:auto;box-shadow:0 6px 16px #0006;background:#93fc79;color:#18230f;border:2px solid #5CFF70}.differencegame-popup h2{font-size:1rem;margin-bottom:.6rem;color:#000501}.differencegame-popup p{font-size:.85rem;margin:.4rem 0;color:#000}.differencegame-popup-buttons{display:flex;flex-direction:column;gap:8px;margin-top:12px}.differencegame-popup-buttons button{font-size:.9rem;padding:.6rem .75rem;border-radius:8px;font-weight:700;border:none;cursor:pointer;box-shadow:0 2px 6px #0000004d;background:linear-gradient(to right,#1f7d53,#255f38);color:#f8f8f8;transition:background .3s ease,transform .2s ease}.differencegame-popup-buttons button:hover{transform:scale(1.04);background:linear-gradient(to right,#255f38,#1f7d53)}.differencegame-floating-message{top:120px;font-size:1.3rem;padding:12px 20px;border-radius:14px}}.write_notes_settings-container{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec}.write_notes_settings-content-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.write_notes_settings-navbar{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;font-size:1.15rem}.write_notes_settings-dropdown{position:relative;display:inline-block;margin-right:12px}.write_notes_settings-dropbtn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .3s ease}.write_notes_settings-dropbtn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53);box-shadow:0 6px 14px #00000040}.write_notes_settings-dropdown-content{display:none;position:absolute;top:110%;left:0;background-color:#f1efec;color:#18230f;padding:12px;border-radius:12px;box-shadow:0 2px 6px #0000004d;z-index:10;flex-direction:column}.write_notes_settings-dropdown:hover .write_notes_settings-dropdown-content{display:flex}.write_notes_settings-dropdown-content label{font-size:1rem;margin-bottom:4px;cursor:pointer}.write_notes_settings-controls{display:flex;align-items:center;gap:16px}.write_notes_settings-rounds-input{width:80px;font-size:1.2rem;padding:6px 10px;border-radius:8px;border:none;background-color:#1a2714;color:#f1efec;text-align:center;outline:none;transition:box-shadow .2s ease}.write_notes_settings-rounds-input:focus{box-shadow:0 0 6px #99e06c}.write_notes_settings-start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #00000040;animation:bouncePulse 2s infinite ease-in-out,pulseGradient 4s infinite ease-in-out;background-size:200% 200%}.write_notes_settings-start-btn:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.07);box-shadow:0 8px 18px #0000004d}.write_notes_settings-summary{padding:12px 24px;font-size:1.2rem;text-align:center;color:#f1efec}.write_notes_settings-sequence-buttons{display:grid;gap:12px;padding:14px;align-items:stretch;justify-items:stretch;height:10vh}.write_notes_settings-sequence-btn{width:100%;height:100%;font-size:2.2rem;font-weight:700;border:2px solid #F1EFEC;border-radius:10px;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.write_notes_settings-sequence-btn:hover{background-color:#27391c;transform:scale(1.03)}.write_notes_settings-dropdown-group{display:flex;gap:12px;align-items:center}.write_notes_settings-floating-message{position:absolute;top:90px;left:50%;transform:translate(-50%);background-color:#ffffff1f;color:#fff;font-size:1.4rem;font-weight:700;padding:14px 24px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;z-index:10;animation:messageFadeIn .4s ease}.write_notes_practice-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec;overflow:hidden}.write_notes_practice-navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;min-height:80px}.write_notes_practice-navbar-left{display:flex;align-items:center;gap:14px}.write_notes_practice-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background-color:#27391c;border-radius:12px;border:2px solid #F1EFEC}.write_notes_practice-btn{padding:14px 20px;font-size:1.1rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border:none;border-radius:10px;cursor:pointer;transition:transform .2s ease}.write_notes_practice-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.write_notes_practice-start-btn{padding:14px 24px!important;font-size:1.1rem}.write_notes_practice-stats{display:flex;gap:8px;align-items:center;font-weight:700;font-size:1.1rem;background:#27391c;padding:6px 12px;border-radius:12px;border:2px solid #F1EFEC}.write_notes_practice-stat{background-color:#d4c9be;border-radius:6px;padding:6px 10px;color:#18230f;min-width:30px;text-align:center}.write_notes_practice-stat.correct{background-color:#5cff70}.write_notes_practice-stat.wrong{background-color:#ff4c4c;color:#fff}.write_notes_practice-stat.current{background-color:#ffe99e}.write_notes_practice-stat.tries{background-color:#ccc}.write_notes_practice-sequence{display:flex;justify-content:center;align-items:center;gap:16px;margin:24px auto 12px;flex-wrap:wrap}.write_notes_practice-sequence-card{font-size:2rem;font-weight:700;padding:12px 18px;border:2px solid #F1EFEC;border-radius:10px;background:#27391c;color:#f1efec;min-width:60px;text-align:center;transition:transform .2s ease,background-color .2s ease}.write_notes_practice-sequence-card.active{background:#ffe99e;color:#18230f;transform:scale(1.1);box-shadow:0 0 8px #fff9}.write_notes_practice-staff-wrapper{width:100vw;padding:12px 0;display:flex;justify-content:center;align-items:center}.write_notes_practice-floating-message{position:absolute;top:140px;left:50%;transform:translate(-50%);background-color:#ffffff2e;color:#fff;font-size:1.8rem;font-weight:700;padding:16px 28px;border-radius:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;z-index:10;animation:messageFadeIn .3s ease}.write_notes_practice-floating-message.floating-anim{animation:bounceFade 1s ease}@keyframes bounceFade{0%{transform:scale(.9);opacity:0}40%{transform:scale(1.05);opacity:1}to{transform:scale(1);opacity:1}}.write_notes_practice-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.write_notes_practice-popup{background:#93fc79;color:#18230f;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 20px #0006;max-width:400px;width:90%}.write_notes_practice-popup h2{margin-bottom:1rem}.write_notes_practice-popup p{font-size:1.1rem;margin:.5rem 0}.write_notes_practice-popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.write_notes_practice-popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.write_notes_practice-popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}.write_notes_staff_view-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:#fdfdfd}.write_notes_staff_view-selected-note{font-size:1.2rem;color:#333;margin-bottom:20px}.write_notes_staff_view-staff{width:100%;max-width:1600px;height:600px}.chords_for_melody_settings_container{padding:30px;max-width:700px;margin:40px auto auto;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(to bottom right,#f4f7fa,#e9eff5);border-radius:16px;box-shadow:0 6px 18px #0000001a}.chords_for_melody_settings_title{font-size:30px;margin-bottom:24px;color:#2e7d32;text-align:center}.chords_for_melody_settings_list{display:flex;flex-direction:column;gap:20px}.chords_for_melody_settings_item{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #d0d7de;padding:16px 20px;border-radius:12px;box-shadow:0 2px 6px #0000000d;transition:box-shadow .3s,transform .2s}.chords_for_melody_settings_item:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.chords_for_melody_settings_label,.chords_for_melody_settings_checkbox_label{display:flex;align-items:center;gap:12px}.chords_for_melody_settings_melody_name{font-weight:700;font-size:18px;color:#333}.chords_for_melody_settings_checkbox_text{font-size:14px;color:#666}.chords_for_melody_settings_start_button{margin-top:32px;padding:14px 30px;font-size:20px;background:linear-gradient(to right,#4caf50,#66bb6a);color:#fff;border:none;border-radius:50px;cursor:pointer;transition:background .3s,transform .2s;align-self:center}.chords_for_melody_settings_start_button:hover{background:linear-gradient(to right,#43a047,#4caf50);transform:scale(1.05)}.chords_for_melody_settings_fullscreen{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;width:100vw;min-height:100vh;background:linear-gradient(to bottom,#99e06c,#18230f);position:relative;overflow-x:hidden}.chords_for_melody_settings_container{padding:40px;max-width:800px;flex:1;color:#f1efec}.chords_ads_side{width:300px;min-height:600px;background-color:#007bff;color:#fff;font-weight:700;text-align:center;padding:20px;position:sticky;top:20px;border-radius:16px;margin-top:40px;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 12px #0003}chords_ads_left{margin-right:24px}.chords_ads_right{margin-left:24px}.chords_for_melody_settings_text_column{display:flex;flex-direction:column}.chords_for_melody_settings_melody_description{font-size:14px;color:#555;margin-left:30px;margin-top:4px;max-width:420px}.chords_for_melody_settings_start_button_inline{margin-top:12px;padding:10px 24px;font-size:16px;background:linear-gradient(to right,#4caf50,#66bb6a);color:#fff;border:none;border-radius:30px;cursor:pointer;transition:background .3s,transform .2s;width:fit-content}.chords_for_melody_settings_start_button_inline:hover{background:linear-gradient(to right,#43a047,#4caf50);transform:scale(1.05)}.chords_for_melody_settings_item.random{background:linear-gradient(to right,#6ed3cf,#3fb8af);border-left:6px solid #1d6f6f}.chords_for_melody_settings_item.round{background:linear-gradient(to right,#f9a825,#f57c00);border-left:6px solid #e65100}.chords_for_melody_settings_item{border-radius:12px;padding:18px 24px;margin-bottom:16px;box-shadow:0 4px 10px #0003;transition:transform .2s,box-shadow .2s}.chords_for_melody_settings_item:hover{transform:scale(1.01);box-shadow:0 6px 14px #0000004d}.chords_for_melody_settings_item.peaceful{background:linear-gradient(to right,#b3cde0,#6497b1);border-left:6px solid #005b96}.chords_for_melody_settings_item.solo{background:linear-gradient(to right,#f8bbd0,#f48fb1);border-left:6px solid #c2185b}.chords_for_melody_settings_item.full{background:linear-gradient(to right,#c8e6c9,#81c784);border-left:6px solid #388e3c}.chords_for_melody_settings_instructions_wrapper{display:flex;justify-content:center;margin-bottom:20px}.chords_for_melody_settings_instructions_button{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:10px 20px;font-size:1.1rem;font-weight:600;border:none;border-radius:10px;cursor:pointer;box-shadow:0 4px 8px #0003;transition:transform .2s ease,background .3s ease}.chords_for_melody_settings_instructions_button:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.chords_for_melody_practice_container{padding:30px 20px;margin:auto;display:flex;flex-direction:column;gap:32px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec;min-height:100vh;box-sizing:border-box}.chords_for_melody_practice_controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px}.chords_for_melody_practice_info{font-size:20px;font-weight:700;background:#27391c;padding:12px 20px;border-radius:12px;box-shadow:0 2px 8px #00000040}.chords_for_melody_practice_controls button{font-size:18px;font-weight:700;padding:12px 26px;border:none;border-radius:12px;cursor:pointer;transition:background .3s,transform .2s;box-shadow:0 2px 6px #00000026}.chords_for_melody_practice_controls button:hover{transform:scale(1.05)}.chords_for_melody_practice_play_pause{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec}.chords_for_melody_practice_suggested_button{background:#6a994e;color:#f1efec}.chords_for_melody_practice_suggested{text-align:center;font-size:16px;font-style:italic;color:#d1e9c7;margin-top:-12px;opacity:.85}.chords_for_melody_practice_progress_bar{width:100%;height:14px;background-color:#d0d7de;border-radius:8px;position:relative;cursor:pointer;overflow:hidden}.chords_for_melody_practice_progress_fill{height:100%;background:linear-gradient(to right,#4caf50,#81c784);border-radius:8px;transition:width .1s linear}.chords_for_melody_practice_progress_dot{width:16px;height:16px;background:#4caf50;border:2px solid white;border-radius:50%;position:absolute;right:-8px;top:50%;transform:translateY(-50%)}.chords_for_melody_practice_slots{display:flex;gap:18px;overflow-x:auto;padding:10px 0;scrollbar-width:thin}.chords_for_melody_practice_slot_group{display:flex;align-items:center}.chords_for_melody_practice_slot{flex:none;width:140px;height:70px;background-color:#cbe8b9;border:2px dashed #5d7755;border-radius:12px;display:flex;justify-content:center;align-items:center;font-size:18px;color:#000;transition:background .3s,transform .2s;box-shadow:0 2px 8px #0003}.chords_for_melody_practice_slot.half{width:70px}.chords_for_melody_practice_slot.active{background-color:#00acc1;border-color:#00acc1;color:#fff;animation:glow 1.5s infinite alternate}@keyframes glow{0%{box-shadow:0 0 6px #00acc1}to{box-shadow:0 0 14px #00acc1}}.chords_for_melody_practice_cut_button,.chords_for_melody_practice_merge_button{background:#ffc107;border:none;margin-left:8px;padding:6px 12px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;color:#18230f;transition:background .3s,transform .2s}.chords_for_melody_practice_cut_button:hover,.chords_for_melody_practice_merge_button:hover{background:#ffb300;transform:scale(1.05)}.chords_for_melody_practice_chord_line{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:20px}.chords_for_melody_practice_chord{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 26px;border-radius:12px;font-weight:700;font-size:20px;cursor:grab;-webkit-user-select:none;user-select:none;transition:background .3s,transform .2s}.chords_for_melody_practice_chord:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.1)}.chords_for_melody_practice_bottom{margin-top:30px;display:flex;justify-content:center;align-items:flex-end;height:30vh;background:transparent}.chords_for_melody_practice_keyboard_placeholder{font-size:20px;color:#f1efec;text-align:center;margin-top:30px}@media (max-width: 768px){.chords_for_melody_practice_slot{width:100px;height:60px;font-size:16px}.chords_for_melody_practice_slot.half{width:50px}.chords_for_melody_practice_chord{font-size:16px;padding:10px 20px}.chords_for_melody_practice_controls{flex-direction:column;gap:14px}.chords_for_melody_practice_info{font-size:16px;padding:10px 14px;text-align:center}}.chords_keyboard_container{background-color:transparent;display:flex;align-items:flex-end;justify-content:center;width:100%;height:30vh;padding:14px;overflow-x:hidden}.chords_octave{display:flex;flex:1 1 0;position:relative}.chords_white_keys{display:flex;flex:1;z-index:1}.chords_white_key{flex:1 1 0;min-width:40px;max-width:90px;height:clamp(200px,32vh,360px);background:linear-gradient(to bottom,#f1efec,#d4c9be);border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:2px solid #999;display:flex;align-items:flex-end;justify-content:center;font-size:1.3rem;font-weight:700;box-shadow:inset 0 -3px 4px #00000014;transition:background .2s ease,box-shadow .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;color:#18230f;position:relative;overflow:hidden}.chords_white_key:hover{background:linear-gradient(to bottom,#c3f7d5,#aaf4c5);box-shadow:inset 0 -4px 6px #00800033}.chords_black_keys{position:absolute;top:0;left:0;width:100%;height:clamp(140px,24vh,242px);z-index:2}.chords_black_key{position:absolute;width:clamp(25px,4vw,50px);height:clamp(140px,24vh,242px);background:linear-gradient(to bottom,#18230f,#0f1610);border-radius:3px;transform:translate(-50%);box-shadow:0 4px 12px #00000080;cursor:pointer;z-index:3;transition:background .2s ease,transform .15s ease,box-shadow .15s ease;overflow:hidden}.chords_black_key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000a6}.chords_label{padding:6px;z-index:10;position:relative;pointer-events:none}.chords_Cs{left:12.85%}.chords_Ds{left:27.1%}.chords_Fs{left:56.6%}.chords_Gs{left:70.85%}.chords_As{left:85.15%}.chords_white_key.chords_flash_0 .flash-overlay,.chords_black_key.chords_flash_0 .flash-overlay{background-color:#a8ffb3;opacity:1}.chords_white_key.chords_flash_1 .flash-overlay,.chords_black_key.chords_flash_1 .flash-overlay{background-color:#5cff88;opacity:1}.chords_white_key.chords_flash_2 .flash-overlay,.chords_black_key.chords_flash_2 .flash-overlay{background-color:#00ff5c;opacity:1}.chords_white_key.chords_flash_correct .flash-overlay,.chords_black_key.chords_flash_correct .flash-overlay{background-color:#4cff4c;opacity:1}.chords_white_key.chords_flash_wrong .flash-overlay,.chords_black_key.chords_flash_wrong .flash-overlay{background-color:#ff4c4c;opacity:1}@media (max-width: 1600px){.chords_black_key{width:clamp(20px,3.5vw,40px);height:clamp(120px,20vh,220px)}}.special_chord-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec;overflow:hidden}.special_chord-navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;min-height:80px}.special_chord-left{display:flex;align-items:center;gap:14px}.special_chord-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background-color:#27391c;border-radius:12px;border:2px solid #F1EFEC}.special_chord-btn{padding:14px 20px;font-size:1.1rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border:none;border-radius:10px;cursor:pointer;transition:transform .2s ease}.special_chord-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.special_chord-start-btn{padding:14px 24px!important;font-size:1.1rem}.special_chord-stats{display:flex;gap:8px;align-items:center;font-weight:700;font-size:1.1rem;background:#27391c;padding:6px 12px;border-radius:12px;border:2px solid #F1EFEC}.special_chord-stat{background-color:#d4c9be;border-radius:6px;padding:6px 10px;color:#18230f;min-width:30px;text-align:center}.special_chord-stat.correct{background-color:#5cff70}.special_chord-stat.wrong{background-color:#ff4c4c;color:#fff}.special_chord-stat.current{background-color:#ffe99e}.special_chord-stat.tries{background-color:#ccc}.special_chord-fill{flex-grow:1}.special_chord-floating{position:absolute;top:150px;left:50%;transform:translate(-50%);background-color:#ffffff2e;color:#fff;font-size:1.8rem;font-weight:700;padding:16px 28px;border-radius:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;z-index:10;animation:messageFadeIn .3s ease}.special_chord-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.special_chord-popup{background:#93fc79;color:#18230f;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 20px #0006;max-width:400px;width:90%}.special_chord-popup h2{margin-bottom:1rem}.special_chord-popup p{font-size:1.1rem;margin:.5rem 0}.special_chord-popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.special_chord-popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.special_chord-popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}.special_chord-btn.bounce-flash{animation:bounceFlash .6s infinite}.special_chord_keyboard-container{background-color:transparent!important;display:flex;align-items:flex-end;justify-content:center;width:100%;height:30vh;padding:14px;overflow-x:hidden}.special_chord_octave{display:flex;flex:1 1 0;position:relative}.special_chord_white-keys{display:flex;flex:1;z-index:1}.special_chord_white-key{flex:1 1 0;min-width:40px;max-width:90px;height:clamp(200px,32vh,360px);background:linear-gradient(to bottom,#f1efec,#d4c9be);border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:2px solid #999;display:flex;align-items:flex-end;justify-content:center;font-size:1.3rem;font-weight:700;box-shadow:inset 0 -3px 4px #00000014;transition:background .2s ease,box-shadow .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;color:#18230f;position:relative;overflow:hidden}.special_chord_white-key:hover{background:linear-gradient(to bottom,#c3f7d5,#aaf4c5);box-shadow:inset 0 -4px 6px #00800033}.special_chord_white-key:active{background:#d4c9be}.special_chord_label{padding:6px;z-index:10;position:relative;pointer-events:none}.special_chord_black-keys{position:absolute;top:0;left:0;width:100%;height:clamp(140px,24vh,242px);z-index:2}.special_chord_black-key{position:absolute;width:clamp(25px,4vw,50px);height:clamp(140px,24vh,242px);background:linear-gradient(to bottom,#18230f,#0f1610);border-radius:3px;transform:translate(-50%);box-shadow:0 4px 12px #00000080;cursor:pointer;z-index:3;transition:background .2s ease,transform .15s ease,box-shadow .15s ease;overflow:hidden}.special_chord_black-key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000a6}.special_chord_black-key:active{background:#1f7d53;transform:translate(-50%) scaleY(.98) translateY(1px);box-shadow:0 2px 6px #0006}.special_chord_Cs{left:12.85%}.special_chord_Ds{left:27.1%}.special_chord_Fs{left:56.6%}.special_chord_Gs{left:70.85%}.special_chord_As{left:85.15%}.special_chord_white-key.special_chord_flash-0 .flash-overlay{background-color:#a8ffb3;opacity:1}.special_chord_white-key.special_chord_flash-1 .flash-overlay{background-color:#5cff88;opacity:1}.special_chord_white-key.special_chord_flash-2 .flash-overlay{background-color:#00ff5c;opacity:1}.special_chord_black-key.special_chord_flash-0 .flash-overlay{background-color:#a8ffb3;opacity:1}.special_chord_black-key.special_chord_flash-1 .flash-overlay{background-color:#5cff88;opacity:1}.special_chord_black-key.special_chord_flash-2 .flash-overlay{background-color:#00ff5c;opacity:1}.special_chord_white-key.flash-correct .flash-overlay,.special_chord_black-key.flash-correct .flash-overlay{background-color:#4cff4c;opacity:1}.special_chord_white-key.flash-wrong .flash-overlay,.special_chord_black-key.flash-wrong .flash-overlay{background-color:#ff4c4c;opacity:1}@media (max-width: 1600px){.special_chord_black-key{width:clamp(20px,3.5vw,40px);height:clamp(120px,20vh,220px)}}.special_chord_settings-container{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec}.special_chord_settings-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.special_chord_settings-navbar{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;font-size:1.15rem}.special_chord_settings-dropdown{position:relative;display:inline-block;margin-right:12px}.special_chord_settings-dropbtn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .3s ease}.special_chord_settings-dropbtn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53);box-shadow:0 6px 14px #00000040}.special_chord_settings-dropdown-content{display:none;position:absolute;top:110%;left:0;background-color:#f1efec;color:#18230f;padding:12px;border-radius:12px;box-shadow:0 2px 6px #0000004d;z-index:10;flex-direction:column}.special_chord_settings-dropdown:hover .special_chord_settings-dropdown-content{display:flex}.special_chord_settings-dropdown-content label{font-size:1rem;margin-bottom:4px;cursor:pointer}.special_chord_settings-controls{display:flex;align-items:center;gap:16px}.special_chord_settings-rounds input{width:80px;font-size:1.1rem;padding:6px 10px;border-radius:10px;border:2px solid #F1EFEC;background-color:#27391c;color:#f1efec;text-align:center}.special_chord_settings-start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #00000040;animation:bouncePulse 2s infinite ease-in-out,pulseGradient 4s infinite ease-in-out;background-size:200% 200%}.special_chord_settings-start-btn:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.07);box-shadow:0 8px 18px #0000004d}.special_chord_settings-message{position:absolute;top:90px;left:50%;transform:translate(-50%);background-color:#ffffff1f;color:#fff;font-size:1.4rem;font-weight:700;padding:14px 24px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;z-index:10;animation:messageFadeIn .4s ease}.special_chord_settings-summary{padding:12px 24px;font-size:1.2rem;text-align:center;color:#f1efec}.special_chord_settings-chord-row{display:flex;justify-content:space-around;align-items:flex-start;flex-wrap:wrap;gap:24px;padding:8px 24px 0;margin-bottom:24px}.special_chord_settings-section{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1 1 auto;min-width:280px}.special_chord_settings-section h3{margin:0;font-size:1.2rem;white-space:nowrap;color:#f1efec}.special_chord_settings-chord-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.special_chord_settings-chord-btn{min-width:100px;padding:14px 22px;font-size:1.6rem;font-weight:700;border:2px solid #F1EFEC;background:linear-gradient(135deg,#1f7d53,#255f38);border-radius:12px;color:#f1efec;cursor:pointer;transition:transform .2s ease,background-color .2s ease;text-align:center;white-space:nowrap}.special_chord_settings-chord-btn:hover{background-color:#27391c;transform:scale(1.05)}.special_chord_settings-keyboard{width:100%;padding-bottom:12px}.melodic_dictation-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#c2f86a,#18230f);color:#f1efec;overflow:hidden}.melodic_dictation-navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;min-height:80px}.melodic_dictation-navbar-left{display:flex;align-items:center;gap:14px}.melodic_dictation-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background-color:#27391c;border-radius:12px;border:2px solid #F1EFEC}.melodic_dictation-btn{padding:14px 20px;font-size:1.1rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border:none;border-radius:10px;cursor:pointer;transition:transform .2s ease}.melodic_dictation-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.melodic_dictation-start-btn{padding:14px 24px!important;font-size:1.1rem}.melodic_dictation-stats{display:flex;gap:10px;align-items:center;font-weight:700;font-size:1.15rem;background:#27391c;padding:10px 16px;border-radius:14px;border:2px solid #F1EFEC}.melodic_dictation-stat{background-color:#d4c9be;border-radius:8px;padding:10px 12px;color:#18230f;min-width:32px;text-align:center;font-size:1.1rem}.melodic_dictation-stat.correct{background-color:#5cff70}.melodic_dictation-stat.wrong{background-color:#ff4c4c;color:#fff}.melodic_dictation-stat.current{background-color:#ffe99e}.melodic_dictation-stat.tries{background-color:#ccc}.melodic_dictation-fill-space{flex-grow:1}.melodic_dictation-bottom{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}.melodic_dictation-keyboard{width:100vw;padding-bottom:12px;overflow-x:hidden}.melodic_dictation-floating-message{position:absolute;top:150px;left:50%;transform:translate(-50%);background-color:#ffffff2e;color:#fff;font-size:1.8rem;font-weight:700;padding:16px 28px;border-radius:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;z-index:10;animation:messageFadeIn .3s ease}@keyframes messageFadeIn{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}.melodic_dictation-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.melodic_dictation-popup{background:#93fc79;color:#18230f;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 20px #0006;max-width:400px;width:90%}.melodic_dictation-popup h2{margin-bottom:1rem}.melodic_dictation-popup p{font-size:1.1rem;margin:.5rem 0}.melodic_dictation-popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.melodic_dictation-popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.melodic_dictation-popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}.melodic_dictation-keyboard-wrapper{width:100%;padding:14px;background:transparent;display:flex;justify-content:center;align-items:flex-end}@media screen and (orientation: landscape) and (max-height: 500px){.melodic_dictation-navbar{flex-direction:row;flex-wrap:wrap;gap:10px;padding:10px 14px;justify-content:space-between;align-items:center}.melodic_dictation-navbar-left{flex-wrap:wrap;gap:8px;justify-content:center}.melodic_dictation-btn{padding:10px 12px;font-size:.9rem}.melodic_dictation-logo{font-size:1.2rem;padding:10px 12px}.melodic_dictation-stats{font-size:1rem;padding:8px 12px;gap:6px;flex-wrap:wrap}.melodic_dictation-stat{padding:6px 10px;font-size:1rem}.melodic_dictation-start-btn{font-size:1rem!important;padding:10px 14px!important}.melodic_dictation-floating-message{display:none}.melodic_dictation-keyboard-wrapper{padding:4px}.melodic_dictation-popup{width:95%;padding:1.5rem}.melodic_dictation-popup-buttons{flex-direction:column;gap:10px}.melodic_dictation-popup-buttons button{font-size:.95rem;padding:.7rem}}@media only screen and (max-width: 1000px) and (orientation: landscape){.melodic_dictation-popup{max-width:280px;max-height:80vh;padding:1rem 1.2rem;font-size:.9rem;border-radius:10px;text-align:center;overflow-y:auto;box-shadow:0 6px 16px #0006;background:#93fc79;color:#18230f;border:2px solid #5CFF70}.melodic_dictation-popup h2{font-size:1rem;margin-bottom:.6rem;color:#000501}.melodic_dictation-popup p{font-size:.85rem;margin:.4rem 0;color:#000}.melodic_dictation-popup-buttons{display:flex;flex-direction:column;gap:8px;margin-top:12px}.melodic_dictation-popup-buttons button{font-size:.9rem;padding:.6rem .75rem;border-radius:8px;font-weight:700;border:none;cursor:pointer;box-shadow:0 2px 6px #0000004d;background:linear-gradient(to right,#1f7d53,#255f38);color:#f8f8f8;transition:background .3s ease,transform .2s ease}.melodic_dictation-popup-buttons button:hover{transform:scale(1.04);background:linear-gradient(to right,#255f38,#1f7d53)}}.melodic_dictation_keyboard-container{background-color:transparent!important;display:flex;align-items:flex-end;justify-content:center;width:100%;height:30vh;padding:14px;overflow-x:hidden}.melodic_dictation_keyboard-octave{display:flex;flex:1 1 0;position:relative}.melodic_dictation_keyboard-white-keys{display:flex;flex:1;z-index:1}.melodic_dictation_keyboard-white-key{flex:1 1 0;min-width:40px;max-width:90px;height:clamp(200px,32vh,360px);background:linear-gradient(to bottom,#f1efec,#d4c9be);border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:2px solid #999;display:flex;align-items:flex-end;justify-content:center;font-size:1.3rem;font-weight:700;box-shadow:inset 0 -3px 4px #00000014;transition:background .2s ease,box-shadow .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;color:#18230f;position:relative;overflow:hidden}.melodic_dictation_keyboard-white-key:hover{background:linear-gradient(to bottom,#c3f7d5,#aaf4c5);box-shadow:inset 0 -4px 6px #00800033}.melodic_dictation_keyboard-white-key:active{background:#d4c9be}.melodic_dictation_keyboard-label{padding:6px;z-index:10;position:relative;pointer-events:none}.melodic_dictation_keyboard-black-keys{position:absolute;top:0;left:0;width:100%;height:clamp(140px,24vh,242px);z-index:2}.melodic_dictation_keyboard-black-key{position:absolute;width:clamp(25px,4vw,50px);height:clamp(140px,24vh,242px);background:linear-gradient(to bottom,#18230f,#0f1610);border-radius:3px;transform:translate(-50%);box-shadow:0 4px 12px #00000080;cursor:pointer;z-index:3;transition:background .2s ease,transform .15s ease,box-shadow .15s ease;overflow:hidden}.melodic_dictation_keyboard-black-key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000a6}.melodic_dictation_keyboard-black-key:active{background:#1f7d53;transform:translate(-50%) scaleY(.98) translateY(1px);box-shadow:0 2px 6px #0006}.melodic_dictation_keyboard-Cs{left:12.85%}.melodic_dictation_keyboard-Ds{left:27.1%}.melodic_dictation_keyboard-Fs{left:56.6%}.melodic_dictation_keyboard-Gs{left:70.85%}.melodic_dictation_keyboard-As{left:85.15%}.melodic_dictation_keyboard-white-key.melodic_dictation_keyboard-flash-0 .flash-overlay,.melodic_dictation_keyboard-black-key.melodic_dictation_keyboard-flash-0 .flash-overlay{background-color:#a8ffb3;opacity:1}.melodic_dictation_keyboard-white-key.melodic_dictation_keyboard-flash-1 .flash-overlay,.melodic_dictation_keyboard-black-key.melodic_dictation_keyboard-flash-1 .flash-overlay{background-color:#5cff88;opacity:1}.melodic_dictation_keyboard-white-key.melodic_dictation_keyboard-flash-2 .flash-overlay,.melodic_dictation_keyboard-black-key.melodic_dictation_keyboard-flash-2 .flash-overlay{background-color:#00ff5c;opacity:1}.melodic_dictation_keyboard-white-key.flash-correct .flash-overlay,.melodic_dictation_keyboard-black-key.flash-correct .flash-overlay{background-color:#4cff4c;opacity:1}.melodic_dictation_keyboard-white-key.flash-wrong .flash-overlay,.melodic_dictation_keyboard-black-key.flash-wrong .flash-overlay{background-color:#ff4c4c;opacity:1}.melodic_dictation_keyboard-white-key.flash-blue .flash-overlay,.melodic_dictation_keyboard-black-key.flash-blue .flash-overlay{background-color:#4ca7ff;opacity:1}@media (max-width: 1600px){.melodic_dictation_keyboard-black-key{width:clamp(20px,3.5vw,40px);height:clamp(120px,20vh,220px)}}.melodic_dictation_settings-container{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#c2f86a,#18230f);color:#f1efec}.melodic_dictation_settings-content-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.melodic_dictation_settings-navbar{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;font-size:1.15rem}.melodic_dictation_settings-dropdown{position:relative;display:inline-block;margin-right:12px}.melodic_dictation_settings-dropbtn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .3s ease}.melodic_dictation_settings-dropbtn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53);box-shadow:0 6px 14px #00000040}.melodic_dictation_settings-dropdown-content{display:none;position:absolute;top:110%;left:0;background-color:#f1efec;color:#18230f;padding:12px;border-radius:12px;box-shadow:0 2px 6px #0000004d;z-index:20;flex-direction:column}.melodic_dictation_settings-dropdown:hover .melodic_dictation_settings-dropdown-content{display:flex}.melodic_dictation_settings-dropdown-content label{font-size:1rem;margin-bottom:4px;cursor:pointer}.melodic_dictation_settings-controls{display:flex;align-items:center;gap:16px}.melodic_dictation_settings-rounds-group{display:flex;align-items:center;background:#27391c;border:2px solid #F1EFEC;padding:8px 14px;border-radius:12px;box-shadow:0 3px 6px #0003;gap:10px}.melodic_dictation_settings-rounds-label{font-size:1.2rem;font-weight:600;color:#f1efec}.melodic_dictation_settings-rounds-input{width:80px;font-size:1.2rem;padding:6px 10px;border-radius:8px;border:none;background-color:#1a2714;color:#f1efec;text-align:center;outline:none;transition:box-shadow .2s ease}.melodic_dictation_settings-rounds-input:focus{box-shadow:0 0 6px #99e06c}.melodic_dictation_settings-start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #00000040;background-size:200% 200%;animation:bouncePulse 2s infinite ease-in-out,pulseGradient 4s infinite ease-in-out}.melodic_dictation_settings-start-btn:hover{transform:scale(1.07);box-shadow:0 8px 18px #0000004d;background:linear-gradient(to right,#255f38,#1f7d53)}.melodic_dictation_settings-floating-setup-message{position:absolute;top:90px;left:50%;transform:translate(-50%);background-color:#ffffff1f;color:#fff;font-size:1.4rem;font-weight:700;padding:14px 24px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;z-index:10;animation:messageFadeIn .4s ease}.melodic_dictation_settings-summary{padding:12px 24px;font-size:1.2rem;text-align:center;color:#f1efec}.melodic_dictation_settings-keyboard-wrapper{width:100%;padding-bottom:12px}@media screen and (orientation: landscape) and (max-height: 500px){.melodic_dictation_settings-navbar{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:10px 14px;gap:10px}.melodic_dictation_settings-scale-note-wrapper,.melodic_dictation_settings-controls{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px}.melodic_dictation_settings-dropdown-content{font-size:.9rem;padding:10px}.melodic_dictation_settings-rounds-group{padding:6px 10px;gap:6px}.melodic_dictation_settings-rounds-input{width:60px;font-size:1rem}.melodic_dictation_settings-start-btn{padding:10px 20px;font-size:1rem}.melodic_dictation_settings-floating-setup-message{display:none}.melodic_dictation_settings-summary{font-size:1rem;padding:8px 14px}.melodic_dictation_settings-keyboard-wrapper{padding-bottom:4px}}.melodic_dictation_settings-instructions-button{display:flex;justify-content:center;margin-top:16px}.harmony_dictation-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec;overflow:hidden}.harmony_dictation-fill-space{flex-grow:1}.harmony_dictation-bottom{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}.harmony_dictation-navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;min-height:80px}.harmony_dictation-navbar-left{display:flex;align-items:center;gap:14px}.harmony_dictation-logo{font-size:1.6rem;font-weight:700;padding:12px 16px;background-color:#27391c;border-radius:12px;border:2px solid #F1EFEC}.harmony_dictation-btn{padding:14px 20px;font-size:1.1rem;font-weight:700;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;border:none;border-radius:10px;cursor:pointer;transition:transform .2s ease}.harmony_dictation-btn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53)}.harmony_dictation-start-btn{padding:14px 24px!important}.harmony_dictation-btn.bounce-flash{animation:bounceFlash .6s infinite}@keyframes bounceFlash{0%,to{transform:scale(1);box-shadow:0 0 0 transparent}50%{transform:scale(1.15);box-shadow:0 0 12px #fff}}.harmony_dictation-stats{display:flex;gap:8px;align-items:center;font-weight:700;font-size:1.1rem;background:#27391c;padding:6px 12px;border-radius:12px;border:2px solid #F1EFEC}.harmony_dictation-stat{background-color:#d4c9be;border-radius:6px;padding:6px 10px;color:#18230f;min-width:30px;text-align:center}.harmony_dictation-stat.correct{background-color:#5cff70}.harmony_dictation-stat.wrong{background-color:#ff4c4c;color:#fff}.harmony_dictation-stat.current{background-color:#ffe99e}.harmony_dictation-stat.tries{background-color:#ccc}.stat-flash{animation:statFlash .4s ease-out}@keyframes statFlash{0%{transform:scale(1);box-shadow:0 0 0 transparent}50%{transform:scale(1.15);box-shadow:0 0 8px #fff9}to{transform:scale(1);box-shadow:0 0 0 transparent}}.harmony_dictation-message-wrapper{position:relative;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:10px}.instruction-message,.floating-status-message{margin:6px 0;background-color:#ffffff2e;color:#fff;font-size:1.8rem;font-weight:700;padding:16px 28px;border-radius:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;animation:messageFadeIn .3s ease;white-space:nowrap}@keyframes messageFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.harmony_dictation-chords{display:grid;gap:12px;padding:14px 16px;align-items:stretch;justify-items:stretch;width:100%;box-sizing:border-box;max-height:22vh;overflow-y:auto;margin-bottom:10px}.harmony_dictation-chord-btn{width:100%;height:100%;font-size:2.2rem;font-weight:700;border:2px solid #F1EFEC;border-radius:10px;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.harmony_dictation-chord-btn:hover{background-color:#27391c;transform:scale(1.03)}.btn-flash-correct{animation:flashCorrectBtn .4s ease;background:#4cff4c!important;border-color:#3bcf3b!important;color:#18230f!important;box-shadow:0 0 12px #4cff4c;transform:scale(1.03);animation-fill-mode:forwards}.btn-flash-wrong{animation:flashWrongBtn .4s ease;background:#ff4c4c!important;border-color:#cc3939!important;color:#fff!important;box-shadow:0 0 12px #ff4c4c;transform:scale(1.03);animation-fill-mode:forwards}@keyframes flashCorrectBtn{0%{background:#4cff4c;color:#18230f;transform:scale(1.05)}to{background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;transform:scale(1)}}@keyframes flashWrongBtn{0%{background:#ff4c4c;color:#fff;transform:scale(1.05)}to{background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;transform:scale(1)}}.harmony_dictation-keyboard{width:100vw;padding-bottom:12px;overflow-x:hidden}.harmony_dictation-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.harmony_dictation-popup{background:#93fc79;color:#18230f;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 8px 20px #0006;max-width:400px;width:90%}.harmony_dictation-popup h2{margin-bottom:1rem}.harmony_dictation-popup p{font-size:1.1rem;margin:.5rem 0}.harmony_dictation-popup-buttons{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.harmony_dictation-popup-buttons button{flex:1;padding:.75rem;font-size:1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;transition:background .3s ease,transform .2s ease}.harmony_dictation-popup-buttons button:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.05)}.harmony_dictation-message-wrapper{position:absolute;top:150px;width:100%;text-align:center;z-index:10;pointer-events:none}.harmony_dictation-status-message{display:inline-block;background-color:#ffffff2e;color:#fff;font-size:1.8rem;font-weight:700;padding:16px 28px;border-radius:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:messageFadeIn .3s ease;white-space:nowrap}@media only screen and (max-width: 1000px) and (orientation: landscape){.harmony_dictation-message-wrapper{top:60px}.harmony_dictation-status-message{font-size:1.3rem;padding:10px 18px;border-radius:12px}.harmony_dictation-chords{margin-top:100px;padding:10px 14px;gap:10px;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));max-height:25vh}.harmony_dictation-chord-btn{font-size:1.6rem;border-radius:8px}.harmony_dictation-keyboard{height:30vh;padding-bottom:10px}}@media only screen and (max-width: 1000px) and (orientation: landscape){.harmony_dictation-popup{max-width:280px;max-height:80vh;padding:1rem 1.2rem;font-size:.9rem;border-radius:10px;text-align:center;overflow-y:auto;box-shadow:0 6px 16px #0006;background:#93fc79;color:#18230f;border:2px solid #5CFF70;scrollbar-width:thin;scrollbar-color:#4d4d4d #e0e0e0}.harmony_dictation-popup h2{font-size:1rem;margin-bottom:.6rem;color:#000501}.harmony_dictation-popup p{font-size:.85rem;margin:.4rem 0;color:#000}.harmony_dictation-popup-buttons{display:flex;flex-direction:column;gap:8px;margin-top:12px}.harmony_dictation-popup-buttons button{font-size:.9rem;padding:.6rem .75rem;border-radius:8px;font-weight:700;border:none;cursor:pointer;box-shadow:0 2px 6px #0000004d;background:linear-gradient(to right,#1f7d53,#255f38);color:#f8f8f8;transition:background .3s ease,transform .2s ease}.harmony_dictation-popup-buttons button:hover{transform:scale(1.04);background:linear-gradient(to right,#255f38,#1f7d53)}.harmony_dictation-popup::-webkit-scrollbar{width:8px}.harmony_dictation-popup::-webkit-scrollbar-track{background:#e0e0e0}.harmony_dictation-popup::-webkit-scrollbar-thumb{background-color:#4d4d4d;border-radius:6px;border:2px solid transparent;background-clip:content-box}}.harmony_dictation_keyboard-container{background-color:transparent!important;display:flex;align-items:flex-end;justify-content:center;width:100%;height:30vh;padding:14px;overflow-x:hidden}.harmony_dictation_keyboard-octave{display:flex;flex:1 1 0;position:relative}.harmony_dictation_keyboard-white-keys{display:flex;flex:1;z-index:1}.harmony_dictation_keyboard-white-key{flex:1 1 0;min-width:40px;max-width:90px;height:clamp(200px,32vh,360px);background:linear-gradient(to bottom,#f1efec,#d4c9be);border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:2px solid #999;display:flex;align-items:flex-end;justify-content:center;font-size:1.3rem;font-weight:700;box-shadow:inset 0 -3px 4px #00000014;transition:background .2s ease,box-shadow .2s ease;cursor:pointer;-webkit-user-select:none;user-select:none;color:#18230f;position:relative;overflow:hidden}.harmony_dictation_keyboard-white-key:hover{background:linear-gradient(to bottom,#c3f7d5,#aaf4c5);box-shadow:inset 0 -4px 6px #00800033}.harmony_dictation_keyboard-white-key:active{background:#d4c9be}.harmony_dictation_keyboard-label{padding:6px;z-index:10;position:relative;pointer-events:none}.harmony_dictation_keyboard-black-keys{position:absolute;top:0;left:0;width:100%;height:clamp(140px,24vh,242px);z-index:2}.harmony_dictation_keyboard-black-key{position:absolute;width:clamp(25px,4vw,50px);height:clamp(140px,24vh,242px);background:linear-gradient(to bottom,#18230f,#0f1610);border-radius:3px;transform:translate(-50%);box-shadow:0 4px 12px #00000080;cursor:pointer;z-index:3;transition:background .2s ease,transform .15s ease,box-shadow .15s ease;overflow:hidden}.harmony_dictation_keyboard-black-key:hover{background:linear-gradient(to bottom,#1f7d53,#255f38);transform:translate(-50%) scaleY(1.02) translateY(-3px);box-shadow:0 6px 16px #000000a6}.harmony_dictation_keyboard-black-key:active{background:#1f7d53;transform:translate(-50%) scaleY(.98) translateY(1px);box-shadow:0 2px 6px #0006}.harmony_dictation_keyboard-Cs{left:12.85%}.harmony_dictation_keyboard-Ds{left:27.1%}.harmony_dictation_keyboard-Fs{left:56.6%}.harmony_dictation_keyboard-Gs{left:70.85%}.harmony_dictation_keyboard-As{left:85.15%}@keyframes flashFade{0%{opacity:1}50%{opacity:.6}to{opacity:0}}.flash-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;pointer-events:none;animation:flashFade .6s ease-out;opacity:0}.harmony_dictation_keyboard-white-key.harmony_dictation_keyboard-flash-0 .flash-overlay{background-color:#a8ffb3;opacity:1}.harmony_dictation_keyboard-white-key.harmony_dictation_keyboard-flash-1 .flash-overlay{background-color:#5cff88;opacity:1}.harmony_dictation_keyboard-white-key.harmony_dictation_keyboard-flash-2 .flash-overlay{background-color:#00ff5c;opacity:1}.harmony_dictation_keyboard-black-key.harmony_dictation_keyboard-flash-0 .flash-overlay{background-color:#a8ffb3;opacity:1}.harmony_dictation_keyboard-black-key.harmony_dictation_keyboard-flash-1 .flash-overlay{background-color:#5cff88;opacity:1}.harmony_dictation_keyboard-black-key.harmony_dictation_keyboard-flash-2 .flash-overlay{background-color:#00ff5c;opacity:1}.harmony_dictation_keyboard-white-key.harmony_dictation_keyboard-flash-correct .flash-overlay,.harmony_dictation_keyboard-black-key.harmony_dictation_keyboard-flash-correct .flash-overlay{background-color:#4cff4c;opacity:1}.harmony_dictation_keyboard-white-key.harmony_dictation_keyboard-flash-wrong .flash-overlay,.harmony_dictation_keyboard-black-key.harmony_dictation_keyboard-flash-wrong .flash-overlay{background-color:#ff4c4c;opacity:1}@media (max-width: 1600px){.harmony_dictation_keyboard-black-key{width:clamp(20px,3.5vw,40px);height:clamp(120px,20vh,220px)}}.harmony_dictation_settings-container{height:100vh;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#99e06c,#18230f);color:#f1efec}.harmony_dictation_settings-content-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.harmony_dictation_settings-navbar{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;font-size:1.15rem}.harmony_dictation_settings-dropdown{position:relative;display:inline-block;margin-right:12px}.harmony_dictation_settings-dropbtn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;box-shadow:0 4px 8px #0003;transition:all .3s ease}.harmony_dictation_settings-dropbtn:hover{transform:scale(1.05);background:linear-gradient(to right,#255f38,#1f7d53);box-shadow:0 6px 14px #00000040}.harmony_dictation_settings-dropdown-content{display:none;position:absolute;top:110%;left:0;background-color:#f1efec;color:#18230f;padding:12px;border-radius:12px;box-shadow:0 2px 6px #0000004d;z-index:10;flex-direction:column;z-index:20}.harmony_dictation_settings-dropdown:hover .harmony_dictation_settings-dropdown-content{display:flex}.harmony_dictation_settings-dropdown-content label{font-size:1rem;margin-bottom:4px;cursor:pointer}.harmony_dictation_settings-controls{display:flex;align-items:center;gap:16px}.harmony_dictation_settings-rounds-input{width:80px;font-size:1.1rem;padding:6px 10px;border-radius:10px;border:2px solid #F1EFEC;background-color:#27391c;color:#f1efec;text-align:center}.harmony_dictation_settings-start-btn{background:linear-gradient(to right,#1f7d53,#255f38);color:#f1efec;padding:12px 24px;border:none;border-radius:14px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 12px #00000040;animation:bouncePulse 2s infinite ease-in-out,pulseGradient 4s infinite ease-in-out;background-size:200% 200%}.harmony_dictation_settings-start-btn:hover{background:linear-gradient(to right,#255f38,#1f7d53);transform:scale(1.07);box-shadow:0 8px 18px #0000004d}@keyframes bouncePulse{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes pulseGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.harmony_dictation_settings-summary{padding:12px 24px;font-size:1.2rem;text-align:center;color:#f1efec}.harmony_dictation_settings-chord-buttons{display:grid;gap:12px;padding:14px;align-items:stretch;justify-items:stretch;grid-auto-rows:1fr;max-height:20vh;overflow-y:auto;margin-bottom:10px}.harmony_dictation_settings-chord-btn{width:100%;height:100%;font-size:2.2rem;font-weight:700;border:2px solid #F1EFEC;border-radius:10px;background:linear-gradient(135deg,#1f7d53,#255f38);color:#f1efec;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.harmony_dictation_settings-chord-btn:hover{background-color:#27391c;transform:scale(1.03)}.harmony_dictation_settings-keyboard-wrapper{width:100%;padding-bottom:12px}.harmony_dictation_settings-floating-message{position:absolute;top:90px;left:50%;transform:translate(-50%);background-color:#ffffff1f;color:#fff;font-size:1.4rem;font-weight:700;padding:14px 24px;border-radius:16px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;z-index:10;animation:messageFadeIn .4s ease}@keyframes messageFadeIn{0%{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%)}}.rounds-group{display:flex;align-items:center;background:#27391c;border:2px solid #F1EFEC;padding:8px 14px;border-radius:12px;box-shadow:0 3px 6px #0003;gap:10px}.rounds-label{font-size:1.2rem;font-weight:600;color:#f1efec}.harmony_dictation_settings-rounds-input:focus{box-shadow:0 0 6px #99e06c}.rounds-group{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#27391c;border:2px solid #F1EFEC;border-radius:12px;box-shadow:0 4px 8px #00000040;font-size:1.1rem}.rounds-label{font-weight:600;color:#f1efec;white-space:nowrap}.harmony_dictation_settings-rounds-input{width:60px;padding:6px 8px;font-size:1.1rem;border-radius:8px;border:2px solid #F1EFEC;background-color:#407217;color:#f1efec;text-align:center;transition:box-shadow .2s ease}.harmony_dictation_settings-rounds-input:focus{outline:none;box-shadow:0 0 6px #99e06c}@media only screen and (max-width: 1000px) and (orientation: landscape){.harmony_dictation_settings-navbar{flex-wrap:wrap;gap:10px;font-size:1rem;padding:10px}.harmony_dictation_settings-dropbtn{font-size:1rem;padding:10px 18px;border-radius:10px}.harmony_dictation_settings-dropdown-content label{font-size:.95rem}.harmony_dictation_settings-controls{flex-wrap:wrap;gap:10px}.harmony_dictation_settings-start-btn{font-size:1rem;padding:10px 18px;border-radius:10px;animation:none}.harmony_dictation_settings-summary{font-size:1rem;padding:8px 16px}.harmony_dictation_settings-chord-buttons{gap:10px;padding:10px;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));max-height:25vh}.harmony_dictation_settings-chord-btn{font-size:1.6rem;border-radius:8px}.harmony_dictation_settings-keyboard-wrapper{height:30vh;padding-bottom:10px}.harmony_dictation_settings-floating-message{display:none}.rounds-group{padding:6px 10px;gap:8px;border-radius:10px;font-size:1rem}.rounds-label{font-size:1rem}.harmony_dictation_settings-rounds-input{width:60px;font-size:1rem;padding:4px 6px;border-radius:6px}}.harmonic_dictation_valid-progressions-container{padding:2rem;max-width:900px;margin:0 auto;background:linear-gradient(to bottom,#99e06c,#fbff00);color:#18230f;border-radius:20px;box-shadow:0 8px 16px #00000026;font-family:Segoe UI,sans-serif}.harmonic_dictation_valid-progressions-title{font-size:2.2rem;text-align:center;margin-bottom:.5rem;color:#1f7d53}.harmonic_dictation_valid-progressions-subtitle{font-size:1.1rem;text-align:center;margin-bottom:2rem;color:#444}.harmonic_dictation_valid-progressions-list{display:flex;flex-direction:column;gap:1.8rem}.harmonic_dictation_valid-progression-group{background:#fffe;border-left:6px solid #1F7D53;padding:1rem 1.5rem;border-radius:12px;transition:transform .2s}.harmonic_dictation_valid-progression-group:hover{transform:scale(1.01)}.harmonic_dictation_valid-progression-heading{font-size:1.4rem;font-weight:700;color:#255f38;margin-bottom:.8rem}.harmonic_dictation_valid-progression-sequences{list-style-type:none;padding-left:0;font-size:1.05rem;color:#333}.harmonic_dictation_valid-progression-sequence{margin-bottom:.4rem;line-height:1.6}.harmonic_dictation_valid-progressions-footer{text-align:center;margin-top:2.5rem;font-size:1rem}.harmonic_dictation_valid-progressions-footer a{color:#1f7d53;text-decoration:none;font-weight:700}.harmonic_dictation_valid-progressions-footer a:hover{text-decoration:underline}.school-wrapper{min-height:100vh;background-color:#bbf5b5;display:flex;flex-direction:column;font-family:Segoe UI,sans-serif}.school-content{flex:1;max-width:800px;margin:0 auto;padding:2rem;text-align:center}.school-section{margin-bottom:2rem}.school-section label{display:block;font-weight:700;margin-bottom:.5rem;font-size:1.1rem}.school-section input{padding:.5rem;font-size:1rem;width:60%;max-width:300px;margin-bottom:.5rem;border:1px solid #ccc;border-radius:4px}.school-section button{padding:.5rem 1rem;background-color:#199600;color:#fff;border:none;margin-left:.5rem;border-radius:4px;cursor:pointer}.school-section button:hover{background-color:#004600}.school-message{margin-top:1rem;color:#007bff;font-weight:700}.school-student-list{margin-top:2rem}.school-student-list h3{margin-bottom:1rem;font-size:1.4rem}.school-empty{color:#999;font-style:italic}.school-student-button{display:block;margin:.5rem auto;padding:.6rem 1rem;font-size:1rem;background-color:#07490b;border:2px solid #0e4102;color:#fff;border-radius:6px;cursor:pointer;width:70%;max-width:300px;text-align:center;transition:all .2s ease}.school-student-button:hover{background-color:#229605;color:#fff}.school-explanation{background-color:#f6fff0;border:1px solid #a3dca1;border-radius:8px;padding:1rem;margin:1.5rem 0 2.5rem;font-size:1rem;line-height:1.6;color:#333}.school-scroll-container{flex:1;overflow-y:auto}.school-wrapper{display:flex;flex-direction:column;min-height:100vh;background-color:#bbf5b5;font-family:Segoe UI,sans-serif}.school-fixed-navbar{position:fixed;top:0;left:0;width:100%;z-index:999}.school-scroll-container{flex:1;display:flex;flex-direction:column;overflow-y:auto}.school-inner-wrapper{display:flex;flex-direction:column;flex:1}.school-content{flex-grow:1;max-width:800px;margin:0 auto;padding:2rem;text-align:center}.school-linked-message{background:linear-gradient(to right,#39e9da,#f0fff4);border:1px solid #c6f6d5;padding:1.2rem 1.4rem;margin-bottom:2rem;color:#22543d;font-size:1.05rem;border-radius:12px;box-shadow:0 2px 6px #0080000d}.school-linked-message ul{margin:.6rem 0 0;padding-left:1.2rem;list-style-type:disc}.school-linked-message li{margin-bottom:.3rem;line-height:1.5}.school-not-logged-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#bbf5b5;font-family:Segoe UI,sans-serif;padding:2rem;text-align:center}.school-not-logged-in h2{font-size:2rem;color:#1a4d1a;margin-bottom:1rem}.school-not-logged-in p{background-color:#f0fff4;border:1px solid #a3dca1;border-radius:10px;padding:1rem 1.5rem;font-size:1.1rem;color:#22543d;max-width:500px;box-shadow:0 4px 10px #0064000d}.school-not-logged-in-message{background-color:#f0fff4;border:1px solid #a3dca1;border-radius:10px;padding:1.2rem 1.6rem;font-size:1.15rem;color:#22543d;max-width:500px;margin:2rem auto;box-shadow:0 4px 10px #0064000d}.all_courses-wrapper{display:flex;flex-direction:column;min-height:100vh;background-color:#bbf5b5;font-family:Segoe UI,sans-serif}.all_courses-fixed-navbar{position:fixed;top:0;left:0;width:100%;z-index:999;background-color:#fff;box-shadow:0 2px 4px #0000000f}.all_courses-scroll-container{flex:1;display:flex;flex-direction:column;overflow-y:auto}.all_courses-content{max-width:900px;margin:0 auto;padding:2rem;text-align:center}.all_courses-title{font-size:32px;color:#1a4d1a;margin-bottom:.5rem}.all_courses-subtitle{font-size:18px;color:#444;margin-bottom:2rem}.all_courses-list{display:flex;flex-direction:column;gap:20px}.all_courses-card{background-color:#6dfd94;border:1px solid #c6f6d5;border-radius:12px;padding:1.5rem;box-shadow:0 2px 6px #0064000d;transition:box-shadow .2s ease}.all_courses-card:hover{box-shadow:0 4px 12px #0064001f}.all_courses-card-title{font-size:24px;color:#2f855a;margin-bottom:.5rem}.all_courses-card-description{font-size:16px;color:#22543d;margin-bottom:1rem}.all_courses-card-button{display:inline-block;padding:8px 16px;background-color:#199600;color:#fff;border-radius:6px;text-decoration:none;font-weight:700}.all_courses-card-button:hover{background-color:#004600}.all_courses-card-progress{font-size:1.05rem;margin-top:14px;margin-bottom:10px;font-weight:500;transition:color .3s ease}.progress-none{color:#999}.progress-incomplete{color:#d48806}.progress-complete{color:#28a745;font-weight:600}.welcome_keyboard-wrapper{display:flex;flex-direction:column;min-height:100vh;background-color:#bbf5b5;font-family:Segoe UI,sans-serif}.welcome_keyboard-fixed-navbar{position:fixed;top:0;left:0;width:100%;z-index:999;background-color:#fff;box-shadow:0 2px 4px #0000000f}.welcome_keyboard-scroll-container{flex:1;display:flex;flex-direction:column;overflow-y:auto}.welcome_keyboard-inner-wrapper{flex:1;display:flex;flex-direction:column}.welcome_keyboard-page{padding:24px;max-width:800px;margin:0 auto;flex-grow:1;text-align:center}.welcome_keyboard-title{font-size:28px;margin-bottom:12px;color:#1a4d1a}.welcome_keyboard-description{margin-bottom:24px;color:#22543d;font-size:16px;background-color:#f0fff4;border:1px solid #a3dca1;border-radius:10px;padding:1rem 1.5rem;line-height:1.6;box-shadow:0 4px 10px #0064000d}.welcome_keyboard-lesson-list{display:flex;flex-direction:column;gap:16px}.welcome_keyboard-lesson-card{border:1px solid #c6f6d5;border-radius:10px;padding:16px;background-color:#f6fff0;box-shadow:0 2px 4px #0064000f;transition:box-shadow .2s ease-in-out}.welcome_keyboard-lesson-card:hover{box-shadow:0 4px 8px #0064001f}.welcome_keyboard-lesson-title{margin:0 0 8px;font-size:20px;color:#2f855a}.welcome_keyboard-lesson-description{margin:0 0 12px;color:#22543d;font-size:15px}.welcome_keyboard-start-btn{display:inline-block;padding:8px 16px;background-color:#199600;color:#fff;border-radius:6px;text-decoration:none;font-weight:500;transition:background-color .2s ease-in-out}.welcome_keyboard-start-btn:hover{background-color:#004600}.welcome_keyboard-lesson-header{display:flex;align-items:center;justify-content:space-between}.welcome_keyboard-checkbox{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid #199600;border-radius:4px;background-color:#fff;cursor:pointer;position:relative;transition:background-color .2s ease-in-out,border .2s}.welcome_keyboard-checkbox:checked{background-color:#199600;border-color:#199600}.welcome_keyboard-checkbox:checked:after{content:"✔";position:absolute;top:0;left:3px;color:#fff;font-size:14px;font-weight:700}.functional_harmony-wrapper{display:flex;flex-direction:column;min-height:100vh;background-color:#bbf5b5;font-family:Segoe UI,sans-serif}.functional_harmony-fixed-navbar{position:fixed;top:0;left:0;width:100%;z-index:999;background-color:#fff;box-shadow:0 2px 4px #0000000f}.functional_harmony-scroll-container{flex:1;display:flex;flex-direction:column;overflow-y:auto}.functional_harmony-inner-wrapper{flex:1;display:flex;flex-direction:column}.functional_harmony-page{padding:24px;max-width:800px;margin:0 auto;flex-grow:1;text-align:center}.functional_harmony-title{font-size:28px;margin-bottom:12px;color:#1a4d1a}.functional_harmony-description{margin-bottom:24px;color:#22543d;font-size:16px;background-color:#f0fff4;border:1px solid #a3dca1;border-radius:10px;padding:1rem 1.5rem;line-height:1.6;box-shadow:0 4px 10px #0064000d}.functional_harmony-lesson-list{display:flex;flex-direction:column;gap:16px}.functional_harmony-lesson-card{border:1px solid #c6f6d5;border-radius:10px;padding:16px;background-color:#f6fff0;box-shadow:0 2px 4px #0064000f;transition:box-shadow .2s ease-in-out}.functional_harmony-lesson-card:hover{box-shadow:0 4px 8px #0064001f}.functional_harmony-lesson-header{display:flex;align-items:center;justify-content:space-between}.functional_harmony-lesson-title{margin:0 0 8px;font-size:20px;color:#2f855a}.functional_harmony-lesson-description{margin:0 0 12px;color:#22543d;font-size:15px}.functional_harmony-start-btn{display:inline-block;padding:8px 16px;background-color:#199600;color:#fff;border-radius:6px;text-decoration:none;font-weight:500;transition:background-color .2s ease-in-out}.functional_harmony-start-btn:hover{background-color:#004600}.functional_harmony-checkbox{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid #199600;border-radius:4px;background-color:#fff;cursor:pointer;position:relative;transition:background-color .2s ease-in-out,border .2s}.functional_harmony-checkbox:checked{background-color:#199600;border-color:#199600}.functional_harmony-checkbox:checked:after{content:"✔";position:absolute;top:0;left:3px;color:#fff;font-size:14px;font-weight:700}.pingpong_melody-wrapper{display:flex;flex-direction:column;min-height:100vh;background-color:#bbf5b5;font-family:Segoe UI,sans-serif}.pingpong_melody-fixed-navbar{position:fixed;top:0;left:0;width:100%;z-index:999;background-color:#fff;box-shadow:0 2px 4px #0000000f}.pingpong_melody-scroll-container{flex:1;display:flex;flex-direction:column;overflow-y:auto}.pingpong_melody-inner-wrapper{flex:1;display:flex;flex-direction:column}.pingpong_melody-page{padding:24px;max-width:800px;margin:0 auto;flex-grow:1;text-align:center}.pingpong_melody-title{font-size:28px;margin-bottom:12px;color:#1a4d1a}.pingpong_melody-description{margin-bottom:24px;color:#22543d;font-size:16px;background-color:#f0fff4;border:1px solid #a3dca1;border-radius:10px;padding:1rem 1.5rem;line-height:1.6;box-shadow:0 4px 10px #0064000d}.pingpong_melody-lesson-list{display:flex;flex-direction:column;gap:16px}.pingpong_melody-lesson-card{border:1px solid #c6f6d5;border-radius:10px;padding:16px;background-color:#f6fff0;box-shadow:0 2px 4px #0064000f;transition:box-shadow .2s ease-in-out}.pingpong_melody-lesson-card:hover{box-shadow:0 4px 8px #0064001f}.pingpong_melody-lesson-header{display:flex;align-items:center;justify-content:space-between}.pingpong_melody-lesson-title{margin:0 0 8px;font-size:20px;color:#2f855a}.pingpong_melody-lesson-description{margin:0 0 12px;color:#22543d;font-size:15px}.pingpong_melody-start-btn{display:inline-block;padding:8px 16px;background-color:#199600;color:#fff;border-radius:6px;text-decoration:none;font-weight:500;transition:background-color .2s ease-in-out}.pingpong_melody-start-btn:hover{background-color:#004600}.pingpong_melody-checkbox{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid #199600;border-radius:4px;background-color:#fff;cursor:pointer;position:relative;transition:background-color .2s ease-in-out,border .2s}.pingpong_melody-checkbox:checked{background-color:#199600;border-color:#199600}.pingpong_melody-checkbox:checked:after{content:"✔";position:absolute;top:0;left:3px;color:#fff;font-size:14px;font-weight:700}.password-gate-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#1e3c72,#2a5298);background:linear-gradient(135deg,#1e5128,#4caf50);color:#fff;font-family:Arial,sans-serif}.password-gate-box{background:#ffffff1a;padding:30px 40px;border-radius:16px;box-shadow:0 8px 25px #0000004d;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.password-gate-box h2{margin-bottom:10px;font-size:1.6rem}.password-gate-box p{font-size:.9rem;margin-bottom:20px;color:#ddd}.password-gate-input{padding:10px;width:220px;border-radius:8px;border:none;margin-bottom:15px;font-size:1rem;outline:none}.password-gate-button{padding:10px 20px;background:#4caf50;border:none;border-radius:8px;cursor:pointer;font-weight:700;color:#fff;font-size:1rem;transition:background .3s ease}.password-gate-button:hover{background:#388e3c}.password-error{margin-top:15px;color:#ff6b6b;font-size:.9rem;font-weight:500;background:#0009;padding:10px 14px;border-radius:8px;display:inline-block;box-shadow:0 2px 6px #0006;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}