.fa,.fas,.fa-solid{display:inline-block;width:1em;height:1em;vertical-align:-.125em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.fa-align-left{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M288 64c0 17.7-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32H256c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E")}.fa-book-open{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8V454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5V83.8c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11V456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/svg%3E")}.fa-check-circle,.fa-circle-check{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E")}.fa-cog,.fa-gear{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E")}.fa-music{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M499.1 6.3c8.1 6 12.9 15.6 12.9 25.7v72V368c0 44.2-43 80-96 80s-96-35.8-96-80s43-80 96-80c11.2 0 22 1.6 32 4.6V147L192 223.8V432c0 44.2-43 80-96 80s-96-35.8-96-80s43-80 96-80c11.2 0 22 1.6 32 4.6V200 128c0-14.1 9.3-26.6 22.8-30.7l320-96c9.7-2.9 20.2-1.1 28.3 5z'/%3E%3C/svg%3E")}.fa-photo-film{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M256 0H576c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64zM476 106.7C471.5 100 464 96 456 96s-15.5 4-20 10.7l-56 84L362.7 169c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h80 48H552c8.9 0 17-4.9 21.2-12.7s3.7-17.3-1.2-24.6l-96-144zM336 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM64 128h96V384v32c0 17.7 14.3 32 32 32H320c17.7 0 32-14.3 32-32V384H512v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192c0-35.3 28.7-64 64-64zm8 64c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V208c0-8.8-7.2-16-16-16H72zm0 104c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V312c0-8.8-7.2-16-16-16H72zm0 104c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V416c0-8.8-7.2-16-16-16H72zm336 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16V416c0-8.8-7.2-16-16-16H424c-8.8 0-16 7.2-16 16z'/%3E%3C/svg%3E")}.assignment-context-card{display:flex;justify-content:space-between;gap:1rem;align-items:center;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:1rem 1.25rem;margin-bottom:1.25rem;color:#14532d}.assignment-context-card span{display:block;font-size:.85rem;font-weight:700;text-transform:uppercase}.assignment-context-card h2{margin:.25rem 0;font-size:1.2rem;color:#14532d}.assignment-context-card p,.assignment-context-card strong{margin:0}.assignment-context-card:dir(ltr) [dir=auto]{text-align:left}.assignment-context-card:dir(rtl) [dir=auto]{text-align:right}.assignment-context-card--error{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}.assignment-context-card--error h2{color:#7f1d1d}@media(max-width:640px){.assignment-context-card{align-items:flex-start;flex-direction:column}}.piano-section{background:linear-gradient(135deg,#2a2a3a,#1a1a2a);border-radius:20px;padding:2rem;box-shadow:0 20px 40px #0000004d;border:1px solid rgba(255,255,255,.1);width:100%;box-sizing:border-box}overflow: hidden; } .piano-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(139,92,246,.1) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgba(168,85,247,.1) 0%,transparent 50%);pointer-events:none}.piano-display{background:linear-gradient(135deg,#0f0f0f,#1a1a1a);border-radius:15px;padding:1.5rem;margin-bottom:2rem;text-align:center;border:2px solid rgba(139,92,246,.3);box-shadow:0 0 20px #8b5cf633;position:relative;z-index:2}.piano-display-note{font-family:Geist Mono,ui-monospace,monospace;font-size:3rem;font-weight:700;color:#8b5cf6;text-shadow:0 0 20px rgba(139,92,246,.5);margin-bottom:.5rem;letter-spacing:.1em}.piano-display-instrument{font-family:Geist,Geist Fallback,system-ui,sans-serif;font-size:1.1rem;font-weight:500;color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em}.piano-controls{display:flex;justify-content:space-between;align-items:center;background:#ffffff0d;border-radius:12px;padding:1.5rem;margin-bottom:2rem;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);position:relative;z-index:2}.piano-control-group{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:1}.piano-control-group label{font-family:Geist,Geist Fallback,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#fffc;text-transform:uppercase;letter-spacing:.05em}.control-select{background:linear-gradient(135deg,#2a2a2a,#1a1a1a);border:2px solid rgba(139,92,246,.3);border-radius:8px;color:#fff;padding:.5rem 1rem;font-size:.9rem;font-weight:500;min-width:140px;transition:all .3s ease}.control-select:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 10px #8b5cf64d}.control-select option{background:#2a2a2a;color:#fff}input[type=range]{-webkit-appearance:none;appearance:none;width:120px;height:6px;background:linear-gradient(to right,#8b5cf6 0% 80%,#fff3 80% 100%);border-radius:3px;outline:none;transition:all .3s ease}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:linear-gradient(135deg,#a78bfa,#8b5cf6);border-radius:50%;cursor:pointer;box-shadow:0 0 10px #8b5cf680;transition:all .3s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 15px #8b5cf6cc}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:linear-gradient(135deg,#a78bfa,#8b5cf6);border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 10px #8b5cf680;transition:all .3s ease}#key-label-toggle{appearance:none;width:50px;height:26px;background:#fff3;border-radius:13px;position:relative;cursor:pointer;transition:all .3s ease;border:2px solid rgba(255,255,255,.1)}#key-label-toggle:checked{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-color:#8b5cf6}#key-label-toggle:before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 4px #0003}#key-label-toggle:checked:before{transform:translate(24px)}.settings-grid input[type=checkbox],.settings-options input[type=checkbox],.select-all-checkbox{appearance:auto;width:auto;height:auto;background:initial;border-radius:initial;position:initial}.piano{display:flex;justify-content:center;position:relative;background:linear-gradient(135deg,#0a0a0a,#1a1a1a);border-radius:15px;padding:3rem 2rem;box-shadow:inset 0 10px 30px #000c;z-index:2;width:100%;box-sizing:border-box;overflow:hidden;min-height:280px}.white-key{width:60px;height:220px;background:linear-gradient(to bottom,#fff,#f8f8f8,#f0f0f0,#e8e8e8,#e0e0e0,#d8d8d8);border:3px solid #c0c0c0;border-top:4px solid #ffffff;border-left:4px solid #f0f0f0;border-right:4px solid #c0c0c0;border-bottom:4px solid #a0a0a0;border-radius:0 0 12px 12px;margin:0 1px;position:relative;cursor:pointer;transition:all .15s ease;box-shadow:0 15px 30px #00000080,inset 0 2px 4px #fffc,inset 0 -2px 4px #0000001a}.white-key:hover{background:linear-gradient(to bottom,#f0f0f0,#e8e8e8,#e0e0e0,#d8d8d8,#d0d0d0,#c8c8c8);transform:translateY(3px);box-shadow:0 12px 24px #0009,inset 0 2px 4px #ffffffb3,inset 0 -2px 4px #0003}.white-key:active,.white-key.key-pressed{background:linear-gradient(to bottom,#e0e0e0,#d8d8d8,#d0d0d0,#c8c8c8,silver,#b8b8b8);transform:translateY(8px);box-shadow:0 8px 16px #000000b3,inset 0 4px 8px #0006,inset 0 -1px 2px #ffffff4d;border-top:2px solid #d0d0d0;border-left:2px solid #c0c0c0;border-right:2px solid #a0a0a0;border-bottom:2px solid #808080}.black-key{width:36px;height:140px;background:linear-gradient(to bottom,#4a4a4a,#3a3a3a,#2a2a2a,#1a1a1a,#0a0a0a,#000);border:3px solid #000000;border-top:3px solid #666666;border-left:3px solid #444444;border-right:3px solid #000000;border-bottom:3px solid #000000;border-radius:0 0 8px 8px;position:absolute;cursor:pointer;transition:all .15s ease;box-shadow:0 15px 30px #000c,inset 0 2px 4px #fff3,inset 0 -2px 4px #000c;z-index:10}.black-key:hover{background:linear-gradient(to bottom,#5a5a5a,#4a4a4a,#3a3a3a,#2a2a2a,#1a1a1a,#0a0a0a);transform:translateY(3px);box-shadow:0 12px 24px #000000e6,inset 0 2px 4px #ffffff4d,inset 0 -2px 4px #000000e6}.black-key:active,.black-key.key-pressed{background:linear-gradient(to bottom,#2a2a2a,#1a1a1a,#0a0a0a 40%,#000 60% 80%,#000);transform:translateY(6px);box-shadow:0 8px 16px #000,inset 0 4px 8px #000000e6,inset 0 -1px 2px #ffffff1a;border-top:2px solid #333333;border-left:2px solid #222222;border-right:2px solid #000000;border-bottom:2px solid #000000}.key-label{position:absolute;bottom:20px;width:100%;text-align:center;font-family:Geist,Geist Fallback,system-ui,sans-serif;font-size:13px;font-weight:700;color:#666;display:none;pointer-events:none;text-shadow:0 1px 2px rgba(255,255,255,.8)}.black-key .key-label{color:#ccc;bottom:15px;font-size:12px;text-shadow:0 1px 2px rgba(0,0,0,.8)}.show-labels .key-label{display:block}.key-active{box-shadow:0 0 20px #8b5cf6cc;border-color:#8b5cf6}.white-key.key-active{background:linear-gradient(to bottom,#ede9fe,#ddd6fe,#c4b5fd)}.black-key.key-active{background:linear-gradient(to bottom,#8b5cf6,#7c3aed,#6d28d9)}@media(max-width:768px){.piano-controls{flex-direction:column;gap:1rem}.piano-control-group{flex-direction:row;width:100%;justify-content:space-between}.piano-display-note{font-size:2rem}.white-key{width:45px;height:180px}.black-key{width:28px;height:110px}.piano{padding:2rem 1rem;min-height:240px}}.progress-bar{display:flex;justify-content:center;margin-bottom:20px;min-height:4px}.progress-line{width:20px;height:4px;background-color:#555;margin:0 2px;border-radius:2px}.progress-step.correct{background-color:#22c55e}.progress-step.incorrect{background-color:#ef4444}.ear-symbol{font-size:5rem;color:#777;animation:none}.ear-symbol.playing{animation:pulse .5s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.settings-modal{display:none;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000000b3;padding-top:60px}.settings-modal-content{background-color:#2d2d2d;margin:5% auto;padding:25px;border:1px solid #888;width:80%;max-width:700px;border-radius:1rem;color:#fff}.settings-section{margin-bottom:20px;padding:15px;background-color:#3a3a3a;border-radius:.5rem}.settings-section h3{margin-top:0;margin-bottom:15px;border-bottom:1px solid #555;padding-bottom:5px}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;max-height:200px;overflow-y:auto;padding-right:10px}.settings-grid label{display:flex;align-items:center;background-color:#4a4a4a;padding:5px 8px;border-radius:4px;cursor:pointer;font-size:.9rem}.settings-grid input[type=checkbox],.settings-options input[type=checkbox],.select-all-checkbox{margin-right:8px;cursor:pointer}.settings-options label{margin-right:15px}.settings-slider-container label{width:120px;margin-right:10px}.settings-slider-container span{margin-left:10px;min-width:60px;text-align:right}.settings-button{background-color:#555;color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;margin-left:10px;transition:background-color .2s}.settings-button:hover{background-color:#777}.settings-button.primary{background-color:#3b82f6}.settings-button.primary:hover{background-color:#2563eb}.settings-gear-icon{font-size:1.5rem;cursor:pointer;margin-left:10px;color:#ccc;transition:color .2s}.settings-gear-icon:hover{color:#fff}.notation-section svg{max-width:100%;height:auto;background-color:#fff;border-radius:4px;padding:10px}.navbar-content{display:flex!important;justify-content:space-between!important;align-items:center!important;max-width:95%!important;margin:0 auto!important;gap:1.5rem!important}.navbar-links{display:flex!important;justify-content:flex-end!important;flex-grow:1!important;gap:2rem!important;flex-wrap:wrap!important;padding:0rem 1rem!important;margin:0!important}.ear-training-hero{padding:6rem 2rem 2rem;margin-bottom:1.5rem;text-align:center;position:relative;overflow:hidden}.ear-training-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(139,92,246,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(168,85,247,.1) 0%,transparent 50%);pointer-events:none}.hero-content{background:linear-gradient(135deg,var(--primary-bg) 0%,var(--secondary-bg) 100%);max-width:1200px;margin:0 auto;padding:3rem;position:relative;z-index:2;border-radius:1.5rem;box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.1)}.hero-title{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:800;background:linear-gradient(135deg,#8b5cf6,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;line-height:1.1}.hero-subtitle{font-size:clamp(1.1rem,2.5vw,1.3rem);color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.6;max-width:800px;margin-left:auto;margin-right:auto}.training-container{max-width:1200px;margin:0 auto;padding:1.5rem}.session-status{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:var(--border-radius-large);padding:1rem 2rem;margin-bottom:1.5rem;box-shadow:0 4px 12px #8b5cf633}.session-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;align-items:center}.session-stat{display:flex;flex-direction:column;align-items:center;text-align:center}.stat-label{color:#ffffffe6;font-size:.85rem;font-weight:500;margin-bottom:.25rem}.stat-value{color:#fff;font-size:1.1rem;font-weight:700}.control-section{background:var(--card-bg);backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--border-radius-large);padding:2rem;box-shadow:var(--shadow-medium);margin-bottom:1.5rem}.control-header{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;margin-bottom:1.5rem}.training-selector{display:flex;flex-direction:column;gap:.5rem}.training-selector label{font-size:1.2rem;font-weight:700;color:var(--text-primary)}.mode-select{width:100%;max-width:400px;padding:.875rem 1rem;background:#2a2a2a;border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-primary);font-size:1rem;font-weight:500}.mode-select option{background:#2a2a2a;color:#fff;padding:.5rem}.mode-select:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.settings-icon{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-fast);color:var(--text-secondary)}.settings-icon:hover{background:linear-gradient(135deg,#a78bfa,#8b5cf6);transform:scale(1.05);box-shadow:0 6px 16px #8b5cf666}.instruction-text{margin:1.5rem 0;padding:1rem;background:#ffffff0d;border-radius:var(--border-radius);border:1px solid var(--border-color)}.progress-container{margin-bottom:1.5rem}.progress-bar{width:100%;height:24px;background:#ffffff1a;border-radius:12px;padding:3px;border:1px solid var(--border-color);display:flex;gap:2px}.progress-step{flex:1;height:100%;background:#fff3;border-radius:8px;transition:all .3s ease;border:1px solid rgba(255,255,255,.1)}.progress-step.completed{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:#16a34a;box-shadow:0 0 8px #22c55e4d}.progress-step.current{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-color:#7c3aed;box-shadow:0 0 8px #8b5cf666;transform:scaleY(1.1)}.progress-step.player1-first{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:#16a34a;box-shadow:0 0 8px #22c55e59}.progress-step.player2-second{background:linear-gradient(135deg,#f97373,#dc2626);border-color:#dc2626;box-shadow:0 0 8px #ef444459}.progress-step.player1-first.player2-second{background:linear-gradient(135deg,#22c55e 0% 50%,#dc2626 50% 100%);border-color:#dc2626;box-shadow:0 0 10px #ef444473}.control-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.control-btn{padding:.875rem 1.5rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;border-radius:var(--border-radius);font-weight:600;cursor:pointer;transition:all .2s ease;font-size:.95rem}.control-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #8b5cf64d}.control-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.control-btn.secondary{background:#ffffff1a;color:var(--text-primary);border:1px solid var(--border-color)}.control-btn.secondary:hover{background:#fff3;box-shadow:0 4px 12px #0000001a}.answer-section{background:var(--card-bg);backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--border-radius-large);padding:2rem;box-shadow:var(--shadow-medium);text-align:center;margin-bottom:1.5rem}.answer-section h3{color:var(--text-primary);font-size:1.2rem;font-weight:700;margin-bottom:1.5rem}.piano-section{background:var(--card-bg);backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--border-radius-large);padding:2rem;box-shadow:var(--shadow-medium);margin-bottom:1.5rem}.notation-container{background:#fff;backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--border-radius-large);padding:.75rem;box-shadow:var(--shadow-medium);margin-bottom:1rem}.notation-container h3,.notation-container h4{color:#000!important}.settings-modal{display:none;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;overflow:auto;background:#000c;backdrop-filter:blur(10px);padding-top:60px}.settings-modal-content{background:var(--card-bg);margin:5% auto;padding:25px;border:1px solid var(--border-color);width:80%;max-width:700px;border-radius:var(--border-radius-large);box-shadow:var(--shadow-heavy);color:#fff}.settings-close-btn{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer}.settings-close-btn:hover,.settings-close-btn:focus{color:#fff;text-decoration:none}.settings-section{margin-bottom:20px;padding:15px;background-color:#ffffff0d;border-radius:.5rem;border:1px solid rgba(255,255,255,.1)}.settings-section h3{margin-top:0;margin-bottom:15px;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:5px;color:var(--text-primary)}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;max-height:200px;overflow-y:auto;padding-right:10px}.settings-grid label{display:flex;align-items:center;background-color:#ffffff14;padding:5px 8px;border-radius:4px;cursor:pointer;font-size:.9rem;color:var(--text-secondary);transition:background-color .2s}.settings-grid label:hover{background-color:#ffffff1f}.settings-grid input[type=checkbox],.settings-options input[type=checkbox]{margin-right:8px}.form-checkbox{width:1.25rem!important;height:1.25rem!important;cursor:pointer;appearance:auto!important;position:static!important;background:initial!important;border-radius:initial!important}.form-checkbox:before{display:none!important}.text-gray-300{color:#d1d5db}.text-blue-600{accent-color:#2563eb}.h-5{height:1.25rem!important}.w-5{width:1.25rem!important}.settings-options label{margin-right:15px;color:var(--text-secondary)}.settings-slider-container{display:flex;align-items:center;margin:10px 0}.settings-slider-container label{width:120px;margin-right:10px;color:var(--text-secondary)}.settings-slider-container input[type=range]{flex-grow:1}.settings-slider-container span{margin-left:10px;min-width:60px;text-align:right;color:var(--text-primary)}.settings-button-container{text-align:right;margin-top:20px}.settings-button{background-color:#ffffff1a;color:#fff;padding:10px 20px;border:1px solid var(--border-color);border-radius:5px;cursor:pointer;margin-left:10px;transition:background-color .2s}.settings-button:hover{background-color:#fff3}.settings-button.primary{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none}.settings-button.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-heavy)}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.inline-flex{display:inline-flex}.items-center{align-items:center}.select-all-checkbox{margin-right:8px}.trial-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:9999}.trial-modal-content{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius-large);padding:3rem;max-width:500px;text-align:center;box-shadow:var(--shadow-heavy)}.trial-modal h2{color:var(--text-primary);font-size:1.8rem;font-weight:700;margin-bottom:1rem}.trial-modal p{color:var(--text-secondary);margin-bottom:2rem;line-height:1.6}.trial-modal-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.trial-btn{padding:.875rem 2rem;border-radius:var(--border-radius);font-weight:600;text-decoration:none;transition:var(--transition-smooth);display:inline-block}.trial-btn.primary{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}.trial-btn.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-heavy)}.trial-btn.secondary{background:#ffffff1a;color:var(--text-primary);border:1px solid var(--border-color)}.trial-btn.secondary:hover{background:#fff3}.vertical-video{aspect-ratio:9/16;width:auto!important;max-width:100%;margin:0 auto;display:block}@media(max-width:768px){#study-media{height:auto!important;min-height:480px}#study-media-content video{max-height:460px!important}#study-media-content video.vertical-video{max-height:600px!important;width:100%;max-width:340px}video:fullscreen{object-fit:contain;background:#000}video:-webkit-full-screen{object-fit:contain;background:#000}video:-moz-full-screen{object-fit:contain;background:#000}video:-ms-fullscreen{object-fit:contain;background:#000}}@media(max-width:768px){.ear-training-hero{padding:5rem 1rem 1rem;margin-top:1.5rem}.hero-content{padding:2rem 1.5rem;max-width:calc(100% - 2rem)}.training-container{padding:1rem}.control-section,.answer-section,.piano-section,.notation-container{padding:.75rem}.control-header{grid-template-columns:1fr;gap:1rem}.control-buttons{flex-direction:column;align-items:stretch}.control-btn{width:100%}.trial-modal-content{margin:1rem;padding:2rem}.piano-section>div:first-child{flex-direction:column!important;gap:1rem!important;align-items:stretch!important}.piano-section>div:first-child>div{justify-content:space-between!important}}.feature-navigation{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;color:#fff;text-align:center}.feature-navigation h3{margin:0 0 1rem;font-size:1.2rem;font-weight:600}.feature-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.feature-btn{background:#fff3;color:#fff;padding:.75rem 1rem;border-radius:8px;text-decoration:none;font-weight:500;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s ease;backdrop-filter:blur(10px)}.feature-btn:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.feature-btn i{font-size:1.1rem}input[type=range]{-webkit-appearance:none;appearance:none;height:6px;background:#ffffff1a;border-radius:3px;outline:none;transition:all .15s ease}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;cursor:pointer;box-shadow:0 4px 6px #0000001a;transition:all .15s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 0 20px #8b5cf64d}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;cursor:pointer;border:none;box-shadow:0 4px 6px #0000001a;transition:all .15s ease}input[type=range]::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 0 20px #8b5cf64d}.piano-container{background:linear-gradient(135deg,#2d2d2d,#1a1a1a);border-radius:1rem;box-shadow:0 10px 40px #000c}.white-key{background:linear-gradient(to bottom,#fff,#e5e5e5);border:1px solid #666;transition:all .1s ease;position:relative}.black-key{background:linear-gradient(to bottom,#333,#000);border:1px solid #000;transition:all .1s ease;position:relative}.key-pressed{transform:translateY(4px);box-shadow:inset 0 4px 12px #0006}.key-label{position:absolute;bottom:10px;width:100%;text-align:center;font-size:12px;color:#000;display:none;pointer-events:none}.black-key .key-label{color:#fff}.speaker{width:60px;height:60px;background:radial-gradient(circle,#555 10%,#333 50%,#222);border-radius:50%;position:relative;overflow:hidden}.speaker:before{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;background:radial-gradient(circle,#777 20%,#444 60%);border-radius:50%;transform:translate(-50%,-50%)}.speaker:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;background:#111;border-radius:50%;transform:translate(-50%,-50%)}.control-panel{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,#444,#333);border-radius:.5rem .5rem 0 0;padding:1rem}.arrow-btn{background-color:#555;color:#fff;width:30px;height:30px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s}.arrow-btn:hover{background-color:#777}.index-display{background-color:#222;color:#fff;width:40px;height:30px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:1rem;margin:0 5px}.ear-training-panel{display:flex;justify-content:center;align-items:center;background:linear-gradient(to bottom,#444,#333);border-radius:0 0 .5rem .5rem;padding:1rem;margin-top:1rem;min-height:60px}.ear-training-btn{background-color:#555;color:#fff;padding:.5rem 1rem;border-radius:.5rem;margin:0 .5rem;cursor:pointer;transition:background-color .2s,transform .1s}.ear-training-btn:hover{background-color:#777}.ear-training-btn:active{transform:scale(.95)}.ear-training-btn.new-question{background-color:#f59e0b}.ear-training-btn.new-question:hover{background-color:#d97706}.answer-btn{background-color:#8b5cf6;color:#fff;padding:.8rem 1rem;border-radius:.5rem;margin:.3rem;cursor:pointer;transition:background-color .2s,transform .1s,border .2s;font-size:1rem;min-width:50px;text-align:center;border:2px solid transparent}.answer-btn.comparison{padding:1rem 2rem;font-size:1.5rem;margin:0 1rem}.answer-btn:hover{background-color:#22c55e}.answer-btn:active{transform:scale(.95)}.answer-btn.answer-feedback-correct{background-color:#16a34a;border-color:#bbf7d0;transform:scale(1.05)}.answer-btn.answer-feedback-incorrect{background-color:#dc2626;border-color:#fecaca;animation:shake .5s}.answer-btn.answer-feedback-reveal{border-color:#16a34a;box-shadow:0 0 10px #16a34a}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.instrument-btn{background-color:#666;color:#fff;padding:.3rem .8rem;border-radius:.3rem;margin:0 .3rem;cursor:pointer;transition:background-color .2s;font-size:.9rem}.instrument-btn:hover,.instrument-btn.active{background-color:#8b5cf6}.piano{display:flex!important;justify-content:center!important;align-items:center!important;position:relative!important;margin-top:2rem!important;height:240px;min-height:240px!important;width:100%;padding:.5rem!important;margin-left:auto;margin-right:auto}.white-key{width:40px;height:216px;margin:0 1px;border-radius:0 0 8px 8px;cursor:pointer;z-index:1}.black-key{width:24px;height:132px;margin:0 -12px;border-radius:0 0 4px 4px;cursor:pointer;z-index:2;position:relative}.key{display:inline-block;vertical-align:top}.challenge-status{padding:.5rem 1rem;border-radius:.25rem;font-weight:500;text-align:center;font-size:.9rem}.challenge-status.connected{background-color:#10b981;color:#fff}.challenge-status.disconnected{background-color:#ef4444;color:#fff}#challenge-mode-controls{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}#challenge-mode-controls button{padding:.35rem .75rem;border:none;border-radius:.25rem;font-size:.85rem;cursor:pointer;transition:background-color .2s}.btn-primary{background-color:#8b5cf6;color:#fff}.btn-primary:hover{background-color:#7c3aed}.btn-secondary{background-color:#6b7280;color:#fff}#challenge-participants{margin-top:.75rem;padding:.75rem 1rem;border:1px solid rgba(139,92,246,.2);border-radius:var(--border-radius);background:#8b5cf614;display:none}#challenge-participants-title{font-size:.95rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}#challenge-participants-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem .75rem}#challenge-participants-list li{padding:.3rem .65rem;background:#ffffff1f;border-radius:999px;font-size:.9rem;color:var(--text-primary)}.btn-secondary:hover{background-color:#4b5563}#channel-id-input{border:1px solid #D1D5DB;border-radius:.25rem;padding:.35rem;font-size:.85rem;min-width:100px}.dropdowns-container{display:flex;gap:3rem;justify-content:center;flex-wrap:wrap;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:.5rem;min-width:250px;flex:1;max-width:400px}.dropdown-spacer{margin-top:2rem}.notation-side-by-side{display:flex;justify-content:space-around;align-items:flex-start;gap:2rem;flex-wrap:wrap}.notation-side-by-side>div{flex:1;min-width:140px}.piano-scroll-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.4) transparent;padding-bottom:4px}.piano-scroll-container::-webkit-scrollbar{height:4px}.piano-scroll-container::-webkit-scrollbar-track{background:transparent}.piano-scroll-container::-webkit-scrollbar-thumb{background:#8b5cf666;border-radius:2px}@media(max-width:768px){.dropdowns-container{gap:1rem;flex-direction:column;align-items:stretch}.dropdown-group{min-width:unset;max-width:100%;width:100%}.dropdown-spacer{margin-top:.75rem}.mode-select{max-width:100%;font-size:.95rem;padding:.75rem .875rem}.control-section,.answer-section,.piano-section,.notation-container{padding:1rem .875rem}.control-buttons{flex-direction:column;align-items:stretch;gap:.6rem}.control-btn{width:100%;padding:.875rem 1rem;font-size:1rem;min-height:48px}.answer-btn{font-size:.9rem;padding:.65rem .75rem;min-width:44px;min-height:44px}.answer-btn.comparison{padding:.75rem 1rem;font-size:1.1rem;margin:0 .25rem}.piano-scroll-container .piano{width:max-content;min-width:100%;justify-content:flex-start;overflow:visible;padding:1.5rem 1rem;min-height:200px}.piano-scroll-container .white-key{width:34px;height:180px}.piano-scroll-container .black-key{width:20px;height:110px;margin:0 -10px}.piano-controls{flex-direction:column;gap:.75rem;padding:1rem;margin-bottom:1rem}.piano-control-group{flex-direction:row;width:100%;justify-content:space-between;align-items:center}.control-select{min-width:unset;flex:1;max-width:200px}input[type=range]{width:100%;max-width:180px}.piano-display{margin-bottom:1rem;padding:1rem}.piano-display-note{font-size:2rem}.piano-display-instrument{font-size:.9rem}.notation-side-by-side{flex-direction:column;gap:1rem;align-items:center}.notation-side-by-side>div{width:100%;min-width:unset}.settings-modal{padding-top:0}.settings-modal-content{position:absolute;bottom:0;left:0;right:0;width:100%;max-width:100%;margin:0;padding:1.25rem;border-radius:1rem 1rem 0 0;max-height:85vh;overflow-y:auto}.settings-grid{grid-template-columns:repeat(2,1fr);max-height:160px}.settings-slider-container{flex-wrap:wrap;gap:.5rem}.settings-slider-container label{width:100%;margin-right:0}.settings-slider-container input[type=range]{width:100%;flex-grow:1;max-width:100%}.settings-slider-container span{margin-left:0}.settings-button-container{display:flex;flex-direction:column;gap:.5rem;align-items:stretch}.settings-button{width:100%;margin-left:0;padding:.875rem;min-height:48px;text-align:center}#challenge-mode-controls{flex-direction:column;align-items:stretch;gap:.5rem}#channel-id-input{width:100%!important;min-width:unset!important;margin-left:0!important;padding:.5rem;font-size:1rem;min-height:44px;box-sizing:border-box}#challenge-mode-controls button{width:100%;min-height:44px;font-size:.9rem}.ear-training-hero{padding:5rem .75rem .75rem;margin-top:1rem}.hero-content{padding:1.5rem 1rem}.training-container{padding:.75rem}.trial-modal-content{margin:1rem;padding:1.5rem;max-width:calc(100% - 2rem)}.trial-modal-buttons{flex-direction:column;align-items:stretch}.trial-btn{width:100%;text-align:center}.session-info{grid-template-columns:repeat(2,1fr);gap:.75rem}.settings-icon{width:70px!important;height:70px!important}.settings-icon i{font-size:1.8rem!important}#study-media{height:auto!important;min-height:280px}}@media(max-width:480px){.settings-modal-content{padding:1rem}.settings-grid{grid-template-columns:1fr 1fr;gap:6px}.settings-grid label{font-size:.8rem;padding:4px 6px}#answer-buttons{flex-direction:column;align-items:stretch}.answer-btn.comparison{width:100%;font-size:1rem;margin:.2rem 0}.piano-display-note{font-size:1.75rem}.hero-content{padding:1rem .75rem}}@font-face{font-family:Geist Fallback;src:local("Arial"),local("Roboto"),local("Liberation Sans");size-adjust:102.7%;ascent-override:89%;descent-override:26%;line-gap-override:0%}@font-face{font-family:"Instrument Serif Fallback";src:local("Georgia Italic"),local("Georgia"),local("Gelasio Italic"),local("Gelasio"),local("Noto Serif Italic"),local("Noto Serif"),local("Roboto");font-style:italic;size-adjust:77.08%;ascent-override:86%;descent-override:29%;line-gap-override:0%}.mz-topbar,.site-topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:6px 2px 0;margin:0 0 30px;min-height:46px}.mz-topbar .mz-auth{min-width:40px;min-height:40px}@media(min-width:1025px){.mz-topbar .mz-auth:empty,.mz-topbar .mz-auth[data-mz-auth-state=out]{min-width:200px}}.mz-topbar .mz-topbar-social{min-width:86px;min-height:38px}.mz-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink, #111827)}.mz-brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--accent2, #4f7cff),var(--accent, #7c2fe0));box-shadow:0 16px 38px -14px color-mix(in srgb,var(--accent, #7c2fe0) 70%,transparent)}.mz-brand-mark svg{width:19px;height:19px}.mz-brand-name{font-family:var(--font-body, system-ui, sans-serif);font-weight:600;font-size:16.5px;letter-spacing:-.02em}.mz-brand-name em{font-family:var(--font-display, var(--font-serif, Georgia, serif));font-style:italic;font-weight:400;color:var(--accent, #7c2fe0)}.mz-nav,.site-nav{display:flex;align-items:center;gap:8px;min-width:0;margin-left:auto}.mz-nav-link{color:var(--sub, #6b7280);text-decoration:none;font-family:var(--font-body, system-ui, sans-serif);font-size:14px;font-weight:500;padding:8px 12px;border-radius:10px;transition:color .18s ease,background .18s ease;white-space:nowrap}.mz-nav-link:hover{color:var(--ink, #111827);background:color-mix(in srgb,var(--ink, #111827) 8%,transparent)}.mz-theme-toggle{appearance:none;border:1px solid color-mix(in srgb,var(--ink, #111827) 16%,transparent);background:color-mix(in srgb,var(--surface, #ffffff) 70%,transparent);width:40px;height:40px;border-radius:11px;cursor:pointer;color:var(--sub, #6b7280);display:grid;place-items:center;transition:.18s ease}.mz-theme-toggle:hover{color:var(--accent, #7c2fe0);border-color:color-mix(in srgb,var(--accent, #7c2fe0) 45%,transparent)}.mz-auth{display:inline-flex;align-items:center;min-height:40px}.mz-auth:empty{visibility:hidden}@media(max-width:640px){.mz-nav-link.hide-sm{display:none}}@media(max-width:640px){.mz-topbar,.site-topbar{flex-wrap:nowrap}}@media(max-width:1024px){.mz-topbar,.site-topbar{gap:10px}.mz-nav,.site-nav{gap:4px}.mz-nav-link{padding-left:8px;padding-right:8px}.mz-auth{width:40px;min-width:40px}.mz-auth .mz-signin-fallback{width:40px;height:40px;gap:0;padding:0;justify-content:center}.mz-auth .mz-signin-fallback .mz-glabel{display:none}}@media(max-width:640px){.mz-auth{position:relative}.mz-auth .mz-signin-fallback{position:absolute;right:0;top:50%;transform:translateY(-50%);white-space:nowrap}}@media(max-width:359.98px){.mz-foot-social.mz-topbar-social{display:none}}@media(min-width:1025px){.mz-auth.mz-auth-out{min-width:200px;justify-content:flex-end}}html[data-mz-guest] .mz-auth:empty{display:inline-flex}@media(min-width:1025px){html[data-mz-guest] .mz-auth{min-width:200px;justify-content:flex-end}}.mz-gbtn{position:relative;display:inline-flex;align-items:center;justify-content:flex-end;min-width:40px;height:40px}.mz-signin-fallback{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:flex-start;gap:21px;width:200px;height:32px;padding:0 12px 0 11px;border-radius:999px;border:1px solid #747775;background:#fff;color:#1f1f1f;text-decoration:none;font-family:Roboto,Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:.25px;white-space:nowrap;overflow:hidden}.mz-signin-fallback .mz-gsvg{width:15px;height:15px;flex:0 0 15px}.mz-signin-fallback:hover{box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}@media(max-width:640px){.mz-signin-fallback{width:40px;height:40px;gap:0;padding:0;justify-content:center}.mz-signin-fallback .mz-glabel{display:none}.mz-signin-fallback .mz-gsvg{width:16px;height:16px;flex:0 0 16px}}.mz-gbtn .mz-gsi{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;opacity:0;pointer-events:none}.mz-gbtn.mz-gsi-ready .mz-gsi{pointer-events:auto}@media(max-width:1024px){.mz-auth .mz-gsi{overflow:hidden}}.mz-user{position:relative}.mz-user-btn{appearance:none;border:0;padding:0;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--cta, var(--accent, #7c2fe0));color:#fff;font-family:var(--mzx-font, "Geist", "Geist Fallback", system-ui, sans-serif);font-weight:700;font-size:15px;box-shadow:0 0 0 1px var(--line, #e5e7eb),0 6px 18px -8px #00000080;transition:box-shadow .15s ease,transform .12s ease}.mz-user-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent, #7c2fe0) 55%,transparent),0 10px 26px -10px #0000008c}.mz-user-avatar{width:100%;height:100%;object-fit:cover;display:block}.mz-user-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:6800;min-width:210px;padding:8px;background:var(--surface, #fff);border:1px solid var(--line, #e5e7eb);border-radius:14px;box-shadow:0 24px 60px -24px #0009;-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);font-family:var(--mzx-font, "Geist", "Geist Fallback", system-ui, sans-serif)}.mz-user-head{padding:8px 10px 10px;border-bottom:1px solid var(--line, #e5e7eb);margin-bottom:6px}.mz-user-name{font-weight:600;font-size:14px;color:var(--ink, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mz-user-email{font-size:12px;color:var(--sub, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mz-user-item{display:block;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--ink, #111827);font-size:14px;font-weight:500}.mz-user-item:hover{background:color-mix(in srgb,var(--accent, #7c2fe0) 14%,transparent);color:var(--accent, #7c2fe0)}@media(hover:none)and (pointer:coarse){input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]):not([type=file]),select,textarea{font-size:16px!important}}.rail,.cosmic-rail{box-sizing:border-box;position:fixed;inset-inline-start:0;top:0;bottom:0;width:66px;z-index:6000;display:flex;flex-direction:column;padding:16px 0;background:color-mix(in srgb,var(--bg) 66%,transparent);border-inline-end:1px solid var(--line);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);overflow:hidden;font-family:var(--font-body, var(--font-sans, system-ui, sans-serif));transition:width .3s cubic-bezier(.3,.7,.4,1),box-shadow .3s ease,background .5s ease}.rail:hover,.rail:focus-within,.cosmic-rail:hover,.cosmic-rail:focus-within{width:min(378px,calc(100vw - 40px));box-shadow:30px 0 80px -30px #000000b3}.rail-brand,.cosmic-rail-brand{display:flex;align-items:center;gap:16px;height:46px;padding-inline-start:22px;text-decoration:none;flex-shrink:0;margin-bottom:10px}.rail-logo,.cosmic-rail-logo{width:22px;height:22px;flex-shrink:0;color:var(--accent);display:grid;place-items:center;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--glow) 70%,transparent))}.rail-brand-text,.cosmic-rail-brandtext{font-family:var(--font-display, var(--serif, var(--font-serif, Georgia, serif)));font-style:var(--display-style, italic);font-size:21px;font-weight:600;color:var(--ink, var(--bone, #f3efff));white-space:nowrap;opacity:0;transform:translate(-6px);transition:opacity .2s ease,transform .25s ease}.rail-langtrigger,.cosmic-rail-langtrigger{margin-bottom:6px}.rail-langcaret,.cosmic-rail-langcaret{flex-shrink:0;margin-inline-start:auto;margin-inline-end:4px;opacity:0;transform:translate(-6px);transition:opacity .2s ease,transform .25s ease}.rail:hover .rail-langcaret,.rail.is-open .rail-langcaret,.cosmic-rail:hover .cosmic-rail-langcaret,.cosmic-rail.is-open .cosmic-rail-langcaret{opacity:.7;transform:translate(0)}.rail-items,.cosmic-rail-items{flex:1;display:flex;flex-direction:column;gap:3px;padding:6px 0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.rail-items::-webkit-scrollbar,.cosmic-rail-items::-webkit-scrollbar{width:0}.rail-item,.rail-foot,.rail-theme,.cosmic-rail-item,.cosmic-rail-theme{display:flex;align-items:center;gap:16px;height:44px;margin:0 10px;padding-inline-start:12px;border-radius:12px;text-decoration:none;color:var(--sub, var(--ink-2, var(--bone-2, #a99fce)));border:0;background:transparent;font:inherit;cursor:pointer;flex-shrink:0;width:calc(100% - 20px);position:relative;transition:background .18s ease,color .18s ease}.rail-foot,.rail-theme,.cosmic-rail-theme{margin-top:10px}.rail-item:hover,.rail-foot:hover,.rail-theme:hover,.cosmic-rail-item:hover,.cosmic-rail-theme:hover{background:color-mix(in srgb,var(--bubbleColor, var(--accent)) 18%,transparent);color:var(--ink, var(--bone, #f3efff))}.rail-item:hover .rail-ico,.cosmic-rail-item:hover .cosmic-rail-ico{color:var(--bubbleColor, var(--accent));filter:drop-shadow(0 0 8px color-mix(in srgb,var(--bubbleColor, var(--accent)) 70%,transparent))}.rail-item.active,.rail-item.is-active,.cosmic-rail-item.active,.cosmic-rail-item.is-active{background:color-mix(in srgb,var(--bubbleColor, var(--accent)) 22%,transparent);color:var(--ink, var(--bone, #f3efff))}.rail-item.active:before,.rail-item.is-active:before,.cosmic-rail-item.active:before,.cosmic-rail-item.is-active:before{content:"";position:absolute;inset-inline-start:-10px;top:9px;bottom:9px;width:3px;border-radius:999px;background:var(--bubbleColor, var(--accent));box-shadow:0 0 10px var(--bubbleColor, var(--accent))}.rail-item.active .rail-ico,.rail-item.is-active .rail-ico,.cosmic-rail-item.active .cosmic-rail-ico,.cosmic-rail-item.is-active .cosmic-rail-ico{color:var(--bubbleColor, var(--accent))}.rail-ico,.cosmic-rail-ico{width:20px;height:20px;flex-shrink:0;display:grid;place-items:center;color:inherit;transition:color .18s ease,filter .18s ease}.rail-ico svg,.cosmic-rail-ico svg{width:20px;height:20px;display:block}.rail-label,.cosmic-rail-label{font-family:var(--font-body, var(--font-sans, system-ui, sans-serif));font-size:14.5px;font-weight:500;white-space:nowrap;color:inherit;opacity:0;transform:translate(-6px);transition:opacity .2s ease,transform .25s ease}.rail:hover .rail-brand-text,.rail:hover .rail-label,.rail:focus-within .rail-brand-text,.rail:focus-within .rail-label,.cosmic-rail:hover .cosmic-rail-brandtext,.cosmic-rail:hover .cosmic-rail-label,.cosmic-rail:focus-within .cosmic-rail-brandtext,.cosmic-rail:focus-within .cosmic-rail-label{opacity:1;transform:translate(0)}.rail-ver{flex-shrink:0;margin-inline-start:-4px;padding:clamp(2px,.25vw,3px) clamp(7px,.7vw,9px);border-radius:8px;font-family:var(--font-body, var(--font-sans, system-ui, sans-serif));font-size:clamp(10px,.85vw,11.5px);font-weight:800;letter-spacing:.06em;line-height:1.5;color:var(--accent-ink, #fff);background:linear-gradient(160deg,color-mix(in srgb,var(--accent2, var(--accent, #7c2fe0)) 82%,#ffffff 18%) 0%,var(--accent, #7c2fe0) 55%,color-mix(in srgb,var(--accent, #7c2fe0) 72%,#000000 28%) 100%);border:1px solid color-mix(in srgb,#ffffff 34%,transparent);box-shadow:inset 0 1px #ffffff61,0 5px 14px -6px color-mix(in srgb,var(--accent, #7c2fe0) 85%,transparent);text-shadow:0 1px 2px rgba(0,0,0,.28);opacity:0;transform:translate(-6px);transition:opacity .2s ease,transform .25s ease}.rail:hover .rail-ver,.rail:focus-within .rail-ver,.cosmic-rail:hover .rail-ver,.cosmic-rail:focus-within .rail-ver{opacity:1;transform:translate(0)}.rail,.cosmic-rail{view-transition-name:mz-rail}.rail-burger,.cosmic-rail-burger{display:none;position:fixed;top:16px;inset-inline-start:0;z-index:6200;width:56px;height:46px;padding:0;padding-inline-start:22px;margin:0;align-items:center;justify-content:flex-start;background:transparent;border:0;box-shadow:none;cursor:pointer;color:var(--ink, var(--bone, #f3efff));-webkit-tap-highlight-color:transparent;transition:color .18s ease,transform .12s ease}.rail-burger svg,.cosmic-rail-burger svg{width:20px;height:20px;display:block}.rail-burger:hover,.cosmic-rail-burger:hover{color:var(--accent)}.rail-burger:active,.cosmic-rail-burger:active{transform:scale(.9)}.rail-scrim,.cosmic-rail-scrim{display:none;position:fixed;inset:0;z-index:5990;background:#06041080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@media(hover:none),(max-width:760px){.rail,.cosmic-rail{width:56px}.rail:hover,.cosmic-rail:hover{width:56px;box-shadow:none}.rail.is-open,.cosmic-rail.is-open{width:min(378px,calc(100vw - 40px));box-shadow:30px 0 80px -30px #000000bf}.rail.is-open .rail-brand-text,.rail.is-open .rail-label,.cosmic-rail.is-open .cosmic-rail-brandtext,.cosmic-rail.is-open .cosmic-rail-label{opacity:1;transform:none}.rail-brand,.cosmic-rail-brand{visibility:hidden}.rail-burger,.cosmic-rail-burger{display:flex}.rail-scrim.show,.cosmic-rail-scrim.show{display:block}}@media(prefers-reduced-motion:reduce){.rail,.cosmic-rail{transition:none}}[dir=rtl] .rail:hover,[dir=rtl] .rail:focus-within,[dir=rtl] .cosmic-rail:hover,[dir=rtl] .cosmic-rail:focus-within{box-shadow:-30px 0 80px -30px #000000b3}[dir=rtl] .rail-brand-text,[dir=rtl] .rail-label,[dir=rtl] .rail-langcaret,[dir=rtl] .rail-ver,[dir=rtl] .cosmic-rail-brandtext,[dir=rtl] .cosmic-rail-label,[dir=rtl] .cosmic-rail-langcaret{transform:translate(6px)}@media(hover:none),(max-width:760px){[dir=rtl] .rail.is-open,[dir=rtl] .cosmic-rail.is-open{box-shadow:-30px 0 80px -30px #000000bf}}.mz-foot-social{display:inline-flex;align-items:center;gap:10px}.mz-foot-social a{display:inline-flex;align-items:center;justify-content:center;width:51px;height:51px;border-radius:50%;border:0;color:#fff;transition:filter .2s ease,transform .2s ease;box-shadow:0 6px 16px -8px #00000073}.mz-foot-social a:hover{filter:brightness(1.12);transform:translateY(-1px)}.mz-foot-social a svg{width:24px;height:24px}.mz-foot-social a.mz-soc-fb{background:#1877f2}.mz-foot-social a.mz-soc-mail{background:#16a34a}.mz-topbar-social{margin-left:12px;margin-right:auto}.mz-topbar-social.mz-foot-social a{width:38px;height:38px}.mz-topbar-social.mz-foot-social a svg{width:18px;height:18px}.mz-social-home{position:fixed;top:var(--home-chrome-top, 26px);left:max(84px,calc((100vw - 1080px)/2 + 26px));z-index:6000;height:var(--home-chrome-h, 40px);display:flex;align-items:center}.mz-social-home .mz-foot-social{flex-direction:row;gap:clamp(6px,1.2vw,10px)}.mz-social-home .mz-foot-social a{width:clamp(26px,6.5vw,38px);height:clamp(26px,6.5vw,38px)}.mz-social-home .mz-foot-social a svg{width:clamp(13px,3.2vw,18px);height:clamp(13px,3.2vw,18px)}@media(max-width:480px){.mz-social-home{left:74px}}.cosmic-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.cosmic-bg-base{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 12%,var(--bg3),transparent 56%),radial-gradient(110% 80% at 50% 118%,var(--bg2),transparent 62%),var(--bg);transition:background .5s ease}.cosmic-bg-nebula{position:absolute;inset:-22%;background:radial-gradient(52% 58% at 24% 26%,color-mix(in srgb,var(--glow) 30%,transparent),transparent 76%),radial-gradient(56% 60% at 80% 80%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 78%),radial-gradient(48% 52% at 84% 20%,color-mix(in srgb,var(--accent2) 20%,transparent),transparent 78%);filter:blur(54px);opacity:.5}.has-cosmic-shell[data-motion="1"] .cosmic-bg-nebula{animation:cosmic-nebula 38s ease-in-out infinite alternate}@keyframes cosmic-nebula{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(2.5%,-2%,0) scale(1.08)}}.cosmic-light .cosmic-bg-nebula{opacity:.4}.cosmic-bg-stars{position:absolute;inset:0;color:#fff}.cosmic-bg-stars span{position:absolute;border-radius:50%;background:currentColor;box-shadow:0 0 6px color-mix(in srgb,currentColor 70%,transparent)}.has-cosmic-shell[data-motion="1"] .cosmic-bg-stars.twinkle span{animation:cosmic-twinkle linear infinite}@keyframes cosmic-twinkle{0%,to{opacity:.2}50%{opacity:1}}.cosmic-light .cosmic-bg-stars{color:var(--accent);opacity:.3}.cosmic-bg-grain{position:absolute;inset:0;mix-blend-mode:overlay;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}.cosmic-bg-vignette{position:absolute;inset:0;background:radial-gradient(115% 100% at 50% 42%,transparent 52%,color-mix(in srgb,var(--bg) 92%,black) 100%)}.cosmic-fab{position:fixed;inset-inline-end:18px;bottom:18px;z-index:6600;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 72%,transparent);color:var(--ink);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 34px -16px #0009}.cosmic-fab svg{width:20px;height:20px}.cosmic-panel{position:fixed;inset-inline-end:18px;bottom:18px;z-index:6600;width:268px;max-height:calc(100dvh - 36px);display:flex;flex-direction:column;background:color-mix(in srgb,var(--bg2) 80%,transparent);color:var(--ink);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -24px #0009;font:12px/1.4 var(--font-body, system-ui, sans-serif);overflow:hidden}.cosmic-panel-h{display:flex;align-items:center;justify-content:space-between;padding:13px 12px 11px 16px;border-bottom:1px solid var(--line)}.cosmic-panel-h b{font-family:var(--font-display);font-style:var(--display-style);font-size:16px;font-weight:600}.cosmic-x{border:0;background:transparent;color:var(--sub);width:26px;height:26px;border-radius:8px;cursor:pointer;display:grid;place-items:center}.cosmic-x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}.cosmic-x svg{width:16px;height:16px}.cosmic-panel-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}.cosmic-sect{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--sub);opacity:.85}.cosmic-sw{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.cosmic-chip{height:30px;border-radius:9px;border:0;cursor:pointer;padding:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent);transition:transform .12s ease,box-shadow .12s ease}.cosmic-chip:hover{transform:translateY(-1px)}.cosmic-chip.on{box-shadow:0 0 0 2px var(--ink),0 2px 8px #00000040}.cosmic-seg{display:flex;gap:3px;padding:3px;border-radius:11px;background:color-mix(in srgb,var(--ink) 9%,transparent)}.cosmic-seg button{flex:1;border:0;background:transparent;cursor:pointer;font:inherit;font-weight:600;color:var(--sub);padding:7px 6px;border-radius:8px;transition:.15s ease}.cosmic-seg button.on{background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--ink);box-shadow:0 1px 3px #0000002e}.cosmic-row{display:flex;flex-direction:column;gap:6px;color:var(--ink)}.cosmic-row.h{flex-direction:row;align-items:center;justify-content:space-between}.cosmic-field{appearance:none;width:100%;height:34px;padding:0 12px;cursor:pointer;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:500;background:color-mix(in srgb,var(--bg) 50%,transparent);color:var(--ink);outline:none}.cosmic-field option{color:#111}.cosmic-toggle{position:relative;width:38px;height:22px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 22%,transparent);cursor:pointer;padding:0;transition:background .15s}.cosmic-toggle.on{background:var(--accent)}.cosmic-toggle i{position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d;transition:transform .15s}.cosmic-toggle.on i{transform:translate(16px)}:where(html){font-family:var(--font-body, "Geist", "Geist Fallback", system-ui, sans-serif)}.has-cosmic-shell body{margin:0}.has-cosmic-shell .cosmic-shell-content{position:relative;z-index:1;padding-inline-start:66px}.has-cosmic-shell .cosmic-shell-content.cosmic-tool{box-sizing:border-box;max-width:1080px;margin:0 auto;padding:22px 24px 80px;padding-inline-start:92px}@media(hover:none),(max-width:760px){.has-cosmic-shell .cosmic-shell-content{padding-inline-start:56px}.has-cosmic-shell .cosmic-shell-content.cosmic-tool{max-width:none;margin:0;padding:16px 16px 60px;padding-inline-start:72px}}@media(prefers-reduced-motion:reduce){.cosmic-bg-nebula,.cosmic-bg-stars span{animation:none!important}}.has-cosmic-shell{--hero-serif: var(--font-display);--hero-ink: var(--ink);--hero-sub: var(--sub);--hero-accent: var(--accent);--hero-soft: color-mix(in srgb, var(--accent) 15%, transparent);--hero-line: color-mix(in srgb, var(--accent) 38%, transparent)}.has-cosmic-shell .mz-topbar{position:relative;z-index:1}.has-cosmic-shell .mz-brand-mark{background:var(--cta, var(--accent));color:var(--accent-ink, #fff);border:0;flex:0 0 auto;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 55%,transparent)}.has-cosmic-shell .mz-brand-name{color:var(--ink);text-decoration:none}.has-cosmic-shell .mz-nav{margin-inline-start:auto}@media(min-width:1025px){.has-cosmic-shell .mz-nav{gap:6px}}.has-cosmic-shell .mz-nav-link{border-radius:9px;transition:color .15s,background .15s}.has-cosmic-shell .mz-theme-toggle{flex:0 0 auto;background:var(--surface);transition:color .15s,border-color .15s}.has-cosmic-shell .mz-theme-toggle svg{width:18px;height:18px}.has-cosmic-shell .mz-hero{text-align:center;margin:18px auto 36px;max-width:760px;display:flex;flex-direction:column;align-items:center}.has-cosmic-shell .mz-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hero-accent);background:var(--hero-soft);border:1px solid var(--hero-line);padding:6px 13px;border-radius:999px;margin-bottom:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.has-cosmic-shell .mz-hero .eyebrow .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--hero-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--hero-accent) 22%,transparent)}.has-cosmic-shell .mz-hero h1{margin:0 0 14px;font-family:var(--font-body);font-size:clamp(34px,6vw,56px);line-height:1.04;letter-spacing:-.03em;font-weight:600;color:var(--hero-ink);text-wrap:balance}.has-cosmic-shell .mz-hero h1 em{font-family:var(--hero-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}.has-cosmic-shell .mz-hero p{margin:0 auto;max-width:560px;color:var(--hero-sub);font-family:var(--font-body);font-size:16.5px;line-height:1.6;text-wrap:pretty}@media(max-width:767px){.has-cosmic-shell.mz-hero-tap .mz-hero h1{font-size:clamp(24.8px,7.5vw,33.6px)}.has-cosmic-shell.mz-hero-tap .mz-hero p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}.has-cosmic-shell.mz-hero-tap .mz-hero p.is-open{-webkit-line-clamp:unset}}.has-cosmic-shell .mz-footer{position:relative;z-index:1;margin:56px 0 0;padding:22px 2px 40px;border-top:1px solid var(--line)}.has-cosmic-shell .mz-footer-line{color:var(--ink-3, var(--sub));font-family:var(--font-body);font-size:13.5px;letter-spacing:.01em}@media(max-width:760px){.has-cosmic-shell .mz-topbar .mz-nav-link{display:none}}[dir=rtl] .cosmic-toggle.on i{transform:translate(-16px)}.has-cosmic-shell{--shadow-card: 0 18px 50px -28px rgba(0, 0, 0, .7);--cta-glow: 0 14px 38px -16px color-mix(in srgb, var(--accent) 70%, transparent);--accent-line: color-mix(in srgb, var(--accent) 45%, var(--line));--line-strong: color-mix(in srgb, var(--ink) 16%, transparent);--track: color-mix(in srgb, var(--ink) 14%, transparent)}.has-cosmic-shell .header{display:none!important}.has-cosmic-shell body{background:transparent;font-family:var(--font-body, "Geist", system-ui, sans-serif);color:var(--ink)}.has-cosmic-shell .app-container{position:relative;z-index:1;padding-left:66px;background:transparent}.has-cosmic-shell .main-content{max-width:1040px;margin:0 auto;padding:8px 22px 40px;background:transparent!important}.has-cosmic-shell .ear-training-hero{padding:10px 16px 4px;margin-bottom:10px;text-align:center;overflow:visible}.has-cosmic-shell .ear-training-hero:before{display:none}.has-cosmic-shell .hero-content{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;max-width:700px;margin:0 auto}.has-cosmic-shell .et-eyebrow{display:inline-block;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding:6px 13px;margin-bottom:14px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}.has-cosmic-shell .hero-title{font-family:var(--font-display);font-style:var(--display-style);font-weight:600;font-size:clamp(30px,4.4vw,48px)!important;line-height:1.05;letter-spacing:-.01em;margin:0 0 12px!important;color:var(--ink)!important;-webkit-text-fill-color:currentColor;background:none!important}.has-cosmic-shell .hero-title em{font-style:var(--display-style);color:var(--accent);background:var(--cta);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.has-cosmic-shell .hero-subtitle{color:var(--sub)!important;font-size:15px;line-height:1.6;max-width:600px;margin:0 auto!important}.has-cosmic-shell .training-container{max-width:none;margin:0;padding:0;display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:stretch}.has-cosmic-shell .assignment-context-card,.has-cosmic-shell #notation-container,.has-cosmic-shell #notation-section,.has-cosmic-shell .training-container>.mz-ad-box,.has-cosmic-shell .piano-section{grid-column:1 / -1}.has-cosmic-shell .training-container>.mz-ad-box{margin-inline:0}.has-cosmic-shell .control-section{grid-column:1}.has-cosmic-shell .answer-section{grid-column:2}.has-cosmic-shell .control-section,.has-cosmic-shell .answer-section,.has-cosmic-shell .assignment-context-card{position:relative;background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:var(--shadow-card)!important;-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);padding:17px!important;margin-bottom:0!important;color:var(--ink)!important;display:flex;flex-direction:column;overflow:hidden}.has-cosmic-shell .assignment-context-card h2{color:var(--ink)!important}.has-cosmic-shell .assignment-context-card{border-inline-start:4px solid #16a34a!important}.has-cosmic-shell .assignment-context-card--error{border-inline-start-color:#dc2626!important}.has-cosmic-shell .control-section:before{content:"Training Setup";display:flex;align-items:center;min-height:18px;padding-left:25px;margin-bottom:14px;font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--ink);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23a35bff' stroke-width='1.8' stroke-linecap='round'><path d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M18 18h2'/><circle cx='15' cy='6' r='2.2'/><circle cx='9' cy='12' r='2.2'/><circle cx='15' cy='18' r='2.2'/></svg>");background-repeat:no-repeat;background-position:left center;background-size:17px 17px}.has-cosmic-shell .control-header{display:block!important;margin:0!important}.has-cosmic-shell .dropdowns-container{flex-direction:column!important;gap:11px!important;justify-content:flex-start!important}.has-cosmic-shell .dropdown-group{min-width:0!important;max-width:none!important;gap:11px!important}.has-cosmic-shell .dropdown-spacer{margin-top:0!important}.has-cosmic-shell .dropdown-group>div{display:flex;flex-direction:column;gap:6px}.has-cosmic-shell .dropdown-group label{font-size:11.5px!important;font-weight:600!important;letter-spacing:.05em;text-transform:uppercase;color:var(--sub)!important;margin:0!important}.has-cosmic-shell .mode-select{-webkit-appearance:none;appearance:none;width:100%!important;max-width:none!important;height:40px;padding:0 36px 0 14px!important;font-size:14px;font-weight:500;cursor:pointer;color:var(--ink)!important;border:1px solid var(--line-strong)!important;border-radius:12px!important;background-color:var(--surface-2)!important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path fill='%23888' d='M0 0h11L5.5 7z'/></svg>")!important;background-repeat:no-repeat!important;background-position:right 14px center!important}.has-cosmic-shell .mode-select:focus{outline:none;border-color:var(--accent-line)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)!important}.has-cosmic-shell .mode-select option,.has-cosmic-shell .control-select option{background-color:var(--bg2, #15131f)!important;color:var(--ink, #f3efff)!important}.has-cosmic-shell .control-header>div:last-child{display:contents}.has-cosmic-shell #settings-icon{position:absolute!important;top:13px!important;right:13px!important;width:34px!important;height:34px!important;margin:0!important;background:color-mix(in srgb,var(--ink) 8%,transparent)!important;border:1px solid var(--line)!important;box-shadow:none!important}.has-cosmic-shell #settings-icon:hover{background:var(--cta)!important;transform:none!important;box-shadow:var(--cta-glow)!important}.has-cosmic-shell #settings-icon i{font-size:1rem!important;color:var(--ink)!important;line-height:1!important;display:block!important}.has-cosmic-shell #settings-icon:hover i{color:#fff!important}.has-cosmic-shell .et-session{margin-top:auto}.has-cosmic-shell .setup-div{height:1px;background:var(--line);margin:16px 0 12px}.has-cosmic-shell .setup-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}.has-cosmic-shell .setup-sub{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--sub)}.has-cosmic-shell .reset-link{appearance:none;border:0;background:transparent;color:var(--sub);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.has-cosmic-shell .reset-link:hover{color:var(--ink)}.has-cosmic-shell .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.has-cosmic-shell .stat{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:10px 12px}.has-cosmic-shell .stat .v{font-family:var(--font-display);font-style:var(--display-style);font-size:23px;line-height:1;color:var(--ink)}.has-cosmic-shell .stat .k{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);margin-top:4px}.has-cosmic-shell .acc-bar{height:6px;border-radius:999px;background:var(--track);overflow:hidden;margin-top:10px}.has-cosmic-shell .acc-bar i{display:block;height:100%;border-radius:999px;background:var(--cta);transition:width .4s ease}.has-cosmic-shell .answer-section{gap:0;justify-content:flex-start;text-align:left}.has-cosmic-shell #qa-questions-wrapper,.has-cosmic-shell #qa-answers-wrapper,.has-cosmic-shell #study-mode-content{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;margin:0 0 14px!important}.has-cosmic-shell #qa-answers-wrapper{margin-bottom:0!important}.has-cosmic-shell #qa-questions-wrapper>h3{display:flex!important;align-items:center;gap:9px;justify-content:flex-start!important;font-size:14px!important;font-weight:600!important;letter-spacing:.02em;color:var(--ink)!important;margin:0 0 12px!important}.has-cosmic-shell #qa-answers-wrapper>h3{display:flex!important;align-items:center;gap:8px;justify-content:center!important;font-size:13.5px!important;font-weight:600!important;color:var(--ink)!important;margin:0 0 12px!important}.has-cosmic-shell #qa-questions-wrapper>h3 i{color:var(--accent)!important}.has-cosmic-shell #qa-answers-wrapper>h3 i{color:var(--accent2)!important}.has-cosmic-shell .instruction-text{background:var(--surface-2)!important;border:1px solid var(--line)!important;border-radius:14px!important;padding:16px 18px!important;margin:0 0 16px!important;text-align:center;color:var(--ink)!important}.has-cosmic-shell .instruction-text div{color:var(--ink)!important;font-weight:500}.has-cosmic-shell #qa-questions-wrapper .progress-container{display:block!important;margin:0 0 14px!important}.has-cosmic-shell .progress-bar{background:color-mix(in srgb,var(--ink) 8%,transparent)!important;border-color:var(--line)!important}.has-cosmic-shell .progress-step:not(.correct):not(.incorrect):not(.completed):not(.current):not(.player1-first):not(.player2-second){background:color-mix(in srgb,var(--ink) 16%,transparent)!important;border-color:var(--line)!important}.has-cosmic-shell .progress-step.current{background:var(--cta)!important;border-color:transparent!important}.has-cosmic-shell .progress-step.completed{background:var(--accent2)!important;border-color:var(--accent2)!important}.has-cosmic-shell .control-buttons{gap:10px!important;margin:0 0 4px!important}.has-cosmic-shell .control-btn:not(.secondary),.has-cosmic-shell .btn-primary,.has-cosmic-shell .settings-button.primary{background:var(--cta)!important;color:#fff!important;border:0!important;border-radius:11px!important;box-shadow:var(--cta-glow)!important;font-weight:600}[data-palette=mono].has-cosmic-shell .control-btn:not(.secondary),[data-palette=mono].has-cosmic-shell .btn-primary,[data-palette=mono].has-cosmic-shell .settings-button.primary{color:var(--bg)!important}.has-cosmic-shell .control-btn.secondary,.has-cosmic-shell .btn-secondary,.has-cosmic-shell .settings-button{background:var(--surface-2)!important;color:var(--ink)!important;border:1px solid var(--line-strong)!important;border-radius:11px!important;font-weight:600}.has-cosmic-shell .control-btn:hover{transform:translateY(-1px)}.has-cosmic-shell #answer-buttons{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(82px,1fr))!important;gap:9px!important;justify-content:stretch!important;margin-top:4px}.has-cosmic-shell .answer-btn{margin:0!important;min-width:0!important;min-height:48px;background:color-mix(in srgb,var(--accent) 14%,var(--surface-2))!important;color:var(--ink)!important;border:1px solid var(--accent-line)!important;border-radius:12px!important;font-weight:600;font-size:15px}.has-cosmic-shell .answer-btn.comparison{grid-column:span 2;font-size:16px}.has-cosmic-shell .answer-btn:hover{background:color-mix(in srgb,var(--accent) 26%,var(--surface-2))!important;transform:translateY(-1px)}.has-cosmic-shell .answer-btn.answer-feedback-correct{background:#1faa63!important;border-color:#1faa63!important;color:#fff!important}.has-cosmic-shell .answer-btn.answer-feedback-incorrect{background:#e0445f!important;border-color:#e0445f!important;color:#fff!important}.has-cosmic-shell .answer-btn.answer-feedback-reveal{border-color:#1faa63!important;box-shadow:0 0 12px -2px #1faa63!important}.has-cosmic-shell .study-card{background:color-mix(in srgb,var(--ink) 4%,transparent)!important;border:1px solid var(--line)!important;border-radius:12px!important}.has-cosmic-shell .study-card *{color:var(--ink)}.has-cosmic-shell #notation-container,.has-cosmic-shell #notation-section{border-radius:16px!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-card)!important;margin-bottom:0!important}.has-cosmic-shell .piano-section{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:var(--shadow-card)!important;padding:11px 14px 13px!important;margin-bottom:0!important;-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);display:grid;grid-template-columns:auto 1fr;grid-template-areas:"read ctl" "keys keys";gap:11px 18px;align-items:center}.has-cosmic-shell .piano-section:before{display:none!important}.has-cosmic-shell .piano-display{grid-area:read;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;display:flex;align-items:center;gap:12px;min-width:150px}.has-cosmic-shell .piano-display-note{font-family:var(--font-display)!important;font-style:var(--display-style);font-size:30px!important;line-height:1;color:var(--accent)!important;margin:0!important;letter-spacing:0!important;min-width:56px;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)!important}.has-cosmic-shell .piano-display-instrument{font-size:11px!important;letter-spacing:.12em;color:var(--sub)!important}.has-cosmic-shell .piano-controls{grid-area:ctl;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;display:flex;align-items:center;justify-content:flex-start;gap:18px;flex-wrap:wrap}.has-cosmic-shell .piano-control-group{flex:0 0 auto!important;flex-direction:row!important;align-items:center;gap:9px}.has-cosmic-shell .piano-control-group label{font-size:11px!important;letter-spacing:.08em;color:var(--sub)!important;margin:0!important}.has-cosmic-shell .control-select{background:var(--surface-2)!important;color:var(--ink)!important;border:1px solid var(--line-strong)!important;border-radius:10px!important;height:36px;padding:0 12px!important;min-width:0!important}.has-cosmic-shell #volume-slider{width:110px!important;height:5px!important;background:var(--track)!important}.has-cosmic-shell #volume-slider::-webkit-slider-thumb{background:var(--accent)!important;width:15px!important;height:15px!important;box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)!important}.has-cosmic-shell #volume-slider::-moz-range-thumb{background:var(--accent)!important}.has-cosmic-shell #key-label-toggle{appearance:none;-webkit-appearance:none;position:relative;width:38px;height:22px;border-radius:999px;cursor:pointer;margin:0;background:var(--track);transition:background .15s;flex-shrink:0}.has-cosmic-shell #key-label-toggle:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d;transition:transform .15s}.has-cosmic-shell #key-label-toggle:checked{background:var(--accent)}.has-cosmic-shell #key-label-toggle:checked:after{transform:translate(16px)}.has-cosmic-shell .dock-midi{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:12px;color:var(--sub)}.has-cosmic-shell .midi-dot{width:9px;height:9px;border-radius:50%;background:var(--sub);flex-shrink:0;transition:background .2s,box-shadow .2s}.has-cosmic-shell .midi-dot.on{background:#2bd383;box-shadow:0 0 10px #2bd383}.has-cosmic-shell .midi-btn{appearance:none;border:1px solid var(--accent-line);cursor:pointer;white-space:nowrap;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink);font:inherit;font-size:12px;font-weight:600;padding:7px 12px;border-radius:9px}.has-cosmic-shell .midi-btn:hover{background:color-mix(in srgb,var(--accent) 28%,transparent)}.has-cosmic-shell .midi-btn:disabled{opacity:.6;cursor:default}.has-cosmic-shell .piano-scroll-container{grid-area:keys;overflow:visible!important}.has-cosmic-shell .piano{background:linear-gradient(180deg,color-mix(in srgb,#000 28%,var(--bg3)),color-mix(in srgb,#000 55%,var(--bg)))!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;align-items:flex-end!important;border-radius:14px!important;box-shadow:inset 0 -3px 12px #00000059!important;overflow:visible!important}.has-cosmic-shell .white-key{height:150px!important;background:linear-gradient(180deg,#fdfdfd,#ececec 88%,#d8d8d8)!important;border-color:#fdfdfd #c4c4c8 #c0c0c0 #fdfdfd!important;border-radius:0 0 6px 6px!important;box-shadow:none!important}.has-cosmic-shell .white-key:hover{background:linear-gradient(180deg,#f2f2f4,#e2e2e6)!important;transform:translateY(2px)!important;box-shadow:none!important}.has-cosmic-shell .white-key.key-active,.has-cosmic-shell .white-key.key-pressed{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 34%,#fff),color-mix(in srgb,var(--accent) 16%,#e8e8e8))!important;border-color:color-mix(in srgb,var(--accent) 40%,#fff)!important}.has-cosmic-shell .black-key{height:92px!important;background:linear-gradient(180deg,#3a3a44,#111118 92%)!important;border-color:#0a0a0f!important;border-radius:0 0 5px 5px!important;box-shadow:0 4px 6px #00000080,inset 0 -3px 4px #ffffff14!important}.has-cosmic-shell .black-key:hover{background:linear-gradient(180deg,#45454f,#15151c)!important;transform:translateY(2px)!important}.has-cosmic-shell .black-key.key-active,.has-cosmic-shell .black-key.key-pressed{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#111))!important;border-color:var(--accent)!important}.has-cosmic-shell .key-active{box-shadow:0 0 16px color-mix(in srgb,var(--accent) 70%,transparent)!important}.has-cosmic-shell .key-label{color:#5a5a66!important;text-shadow:none!important}.has-cosmic-shell .black-key .key-label{color:#c8c8d4!important}.has-cosmic-shell .settings-modal{background-color:color-mix(in srgb,#000 55%,transparent)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.has-cosmic-shell .settings-modal-content{background:color-mix(in srgb,var(--bg2) 92%,transparent)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:0 40px 90px -30px #000000d9!important}.has-cosmic-shell .settings-modal-content h2{color:var(--ink)!important;font-family:var(--font-display);font-style:var(--display-style)}.has-cosmic-shell .settings-section{background:var(--surface-2)!important;border:1px solid var(--line)!important;border-radius:12px!important}.has-cosmic-shell .settings-section h3{color:var(--ink)!important;border-bottom-color:var(--line)!important}.has-cosmic-shell .settings-grid label{background:var(--surface-3)!important;color:var(--ink)!important;border:1px solid var(--line)!important}.has-cosmic-shell .settings-close-btn{color:var(--sub)!important}.has-cosmic-shell .settings-close-btn:hover{color:var(--ink)!important}.has-cosmic-shell .trial-modal-content{background:color-mix(in srgb,var(--bg2) 92%,transparent)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:18px!important}.has-cosmic-shell .trial-btn.primary{background:var(--cta)!important;color:#fff!important;border-radius:999px!important}.has-cosmic-shell .trial-btn.secondary{background:color-mix(in srgb,var(--ink) 8%,transparent)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:999px!important}@media(max-width:880px){.has-cosmic-shell .training-container{grid-template-columns:minmax(0,1fr);gap:14px}.has-cosmic-shell .control-section,.has-cosmic-shell .answer-section{grid-column:1}.has-cosmic-shell .control-section,.has-cosmic-shell .answer-section,.has-cosmic-shell .piano-section,.has-cosmic-shell .assignment-context-card,.has-cosmic-shell #notation-container,.has-cosmic-shell #notation-section,.has-cosmic-shell .piano-scroll-container{min-width:0}.has-cosmic-shell .piano-section{grid-template-columns:minmax(0,1fr);grid-template-areas:"read" "ctl" "keys"}.has-cosmic-shell .piano-controls{justify-content:flex-start}}@media(max-width:760px){.has-cosmic-shell .app-container{padding-left:56px}.has-cosmic-shell .main-content{padding-left:14px;padding-right:14px}}.has-cosmic-shell .et-tabs,.has-cosmic-shell .et-view{--surface-3: color-mix(in srgb, var(--ink) 7%, var(--surface));--ink-2: color-mix(in srgb, var(--ink) 72%, var(--sub));--accent-soft: color-mix(in srgb, var(--accent) 16%, transparent)}.has-cosmic-shell .et-tabs{display:flex;gap:4px;padding:5px;margin:0 auto 18px;max-width:540px;background:var(--surface-3);border:1px solid var(--line);border-radius:14px}.has-cosmic-shell .et-tab{flex:1;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);padding:9px 8px;border-radius:10px;transition:.15s ease;white-space:nowrap}.has-cosmic-shell .et-tab:hover{color:var(--ink)}.has-cosmic-shell .et-tab.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #0003}.has-cosmic-shell .et-view{display:none}.has-cosmic-shell .et-view.is-on{display:block;max-width:1040px;margin:0 auto;padding:0 22px 44px}.has-cosmic-shell .et-collapsed{display:none!important}.etp{display:flex;flex-direction:column;gap:16px}.etp .card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card);padding:18px 20px}.etp-sec-h{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:14px}.etp-sec-h .ic{color:var(--accent);display:grid;place-items:center}.etp-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.etp-flabel{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}.etp-ftabs,.etp-lb-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--surface-3);border:1px solid var(--line);border-radius:11px}.etp-lb-tabs{margin-bottom:4px}.etp-ftab{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);padding:7px 14px;border-radius:8px}.etp-ftab.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #0003}.etp-fselect{appearance:none;border:1px solid var(--line-strong, var(--line));background:var(--surface);color:var(--ink);font:inherit;font-size:13px;padding:8px 12px;border-radius:10px;cursor:pointer}.etp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.etp-kpi{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;overflow:hidden;box-shadow:var(--shadow-card)}.etp-kpi:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--kpi)}.etp-kpi-ic{font-size:22px}.etp-kpi-label{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--sub);margin-top:8px}.etp-kpi-value{font-family:var(--font-display, inherit);font-style:var(--display-style, normal);font-size:30px;font-weight:600;color:var(--ink);line-height:1.1;margin-top:2px}.etp-kpi-sub{font-size:12px;color:var(--sub);margin-top:3px}.etp-acc-chart{width:100%;height:180px;display:block}.etp-legend{display:flex;gap:18px;font-size:12.5px;color:var(--sub);margin-top:8px}.etp-legend span{display:inline-flex;align-items:center;gap:7px}.etp-legend i{width:10px;height:10px;border-radius:50%}.etp-heat{display:grid;grid-template-columns:repeat(26,1fr);gap:3px}.etp-heat-c{aspect-ratio:1;border-radius:2px;background:color-mix(in srgb,var(--ink) 8%,transparent)}.etp-heat-c[data-level="1"]{background:color-mix(in srgb,var(--accent) 30%,transparent)}.etp-heat-c[data-level="2"]{background:color-mix(in srgb,var(--accent) 50%,transparent)}.etp-heat-c[data-level="3"]{background:color-mix(in srgb,var(--accent) 72%,transparent)}.etp-heat-c[data-level="4"]{background:var(--accent)}.etp-heat-legend{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--sub);margin-top:10px;justify-content:flex-end}.etp-heat-legend .etp-heat-c{width:12px;aspect-ratio:1}.etp-row2{display:grid;grid-template-columns:1fr 1.2fr;gap:16px}.etp-radar{width:100%;max-width:240px;margin:0 auto;display:block}.etp-areas{display:flex;flex-direction:column;gap:11px}.etp-area{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:10px}.etp-area-n{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.etp-area-track{height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}.etp-area-fill{height:100%;border-radius:999px;background:#8b5cf6}.etp-area-fill.rp{background:#10b981}.etp-area-p{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}.etp-table-wrap{overflow-x:auto}.etp-table{width:100%;border-collapse:collapse;font-size:13px}.etp-table th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);padding:0 12px 10px;white-space:nowrap}.etp-table td{padding:11px 12px;border-top:1px solid var(--line);color:var(--ink-2);white-space:nowrap}.etp-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}.etp-badge.pp{color:#b794ff;background:color-mix(in srgb,#8b5cf6 18%,transparent)}.etp-badge.rp{color:#5ee0b0;background:color-mix(in srgb,#10b981 18%,transparent)}.etp-acc.hi{color:#34d399;font-weight:600}.etp-acc.mid{color:#fbbf24;font-weight:600}.etp-acc.lo{color:#f87171;font-weight:600}.etp-userstats{background:linear-gradient(135deg,var(--accent2, #6366f1),var(--accent));color:#fff;border-radius:18px;padding:26px;text-align:center;box-shadow:var(--cta-glow)}.etp-userstats h2{margin:0 0 6px;font-family:var(--font-display, inherit);font-style:var(--display-style, normal);font-weight:600;font-size:22px}.etp-userstats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}.etp-us-v{font-size:30px;font-weight:700}.etp-us-l{opacity:.9;font-size:12.5px;margin-top:2px}.etp-ach-h{font-size:16px;font-weight:600;color:var(--ink);margin:4px 0 14px}.etp-ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.etp-ach{background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:16px;transition:transform .15s ease}.etp-ach:hover{transform:translateY(-2px)}.etp-ach.earned{border-color:color-mix(in srgb,#10b981 60%,var(--line))}.etp-ach.uncommon{border-color:color-mix(in srgb,#10b981 55%,var(--line))}.etp-ach.rare{border-color:color-mix(in srgb,#3b82f6 55%,var(--line))}.etp-ach.epic{border-color:color-mix(in srgb,#8b5cf6 55%,var(--line))}.etp-ach.legendary{border-color:color-mix(in srgb,#f59e0b 60%,var(--line))}.etp-ach-top{display:flex;align-items:center;gap:12px;margin-bottom:11px}.etp-ach-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:23px;background:color-mix(in srgb,var(--ink) 8%,transparent);flex-shrink:0}.etp-ach-ic.uncommon{background:linear-gradient(135deg,#10b981,#059669)}.etp-ach-ic.rare{background:linear-gradient(135deg,#3b82f6,#2563eb)}.etp-ach-ic.epic{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.etp-ach-ic.legendary{background:linear-gradient(135deg,#f59e0b,#d97706)}.etp-ach-t{font-size:15px;font-weight:700;color:var(--ink)}.etp-ach-r{font-size:12px;font-weight:600;text-transform:capitalize;color:var(--sub)}.etp-ach-r.rare{color:#60a5fa}.etp-ach-r.epic{color:#a78bfa}.etp-ach-r.legendary{color:#fbbf24}.etp-ach-r.uncommon{color:#34d399}.etp-ach-d{font-size:13px;color:var(--ink-2);line-height:1.45;margin-bottom:12px;min-height:38px}.etp-ach-meta{display:flex;align-items:center;justify-content:space-between}.etp-ach-pts{background:var(--accent);color:var(--accent-ink, #fff);padding:3px 11px;border-radius:999px;font-size:12px;font-weight:600}.etp-ach-date{font-size:11.5px;color:var(--sub)}.etp-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}.etp-pod{background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 0 0;padding:16px 12px 0;text-align:center;box-shadow:var(--shadow-card)}.etp-pod-medal{font-size:28px}.etp-pod-name{font-weight:600;color:var(--ink);margin-top:6px}.etp-pod-pts{font-size:13px;color:var(--sub);margin:2px 0 10px;font-variant-numeric:tabular-nums}.etp-pod-bar{display:grid;place-items:center;font-weight:700;color:var(--accent-ink, #fff);background:var(--cta);border-radius:8px 8px 0 0}.etp-pod.p1 .etp-pod-bar{height:70px}.etp-pod.p2 .etp-pod-bar{height:48px}.etp-pod.p3 .etp-pod-bar{height:34px}.etp-lb{display:flex;flex-direction:column}.etp-lb-row{display:flex;align-items:center;gap:14px;padding:12px 4px;border-top:1px solid var(--line)}.etp-lb-row:first-child{border-top:0}.etp-lb-row.me{background:var(--accent-soft);border-radius:12px;padding-inline:12px;border-top-color:transparent}.etp-lb-rank{width:26px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sub)}.etp-lb-rank.top{color:var(--accent)}.etp-lb-name{flex:1;font-weight:600;color:var(--ink)}.etp-lb-lvl{font-size:12px;color:var(--sub)}.etp-lb-pts{font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:13.5px}.etp-ach-empty{color:var(--sub);font-size:13.5px;padding:18px;text-align:center;border:1px dashed var(--line-strong, var(--line));border-radius:12px}.etp-lb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.etp-loading{color:var(--sub);text-align:center;padding:48px 0;font-size:14px}.etp-login-cta{text-align:center;padding:40px 20px}.etp-login-ic{font-size:40px;display:block;margin-bottom:10px}.etp-login-t{font-weight:700;font-size:18px;color:var(--ink);margin-bottom:6px}.etp-login-s{color:var(--sub);font-size:13.5px;margin-bottom:16px}.etp-cta{display:inline-block;margin:0 5px;padding:10px 22px;border-radius:10px;background:var(--cta);color:var(--accent-ink, #fff);font-weight:600;font-size:14px;text-decoration:none}.etp-cta-secondary{background:transparent;color:var(--ink);border:1px solid var(--line-strong, var(--line))}@media(max-width:820px){.etp-kpis{grid-template-columns:1fr 1fr}.etp-row2{grid-template-columns:1fr}.etp-ach-grid,.etp-userstats-grid{grid-template-columns:1fr 1fr}}@media(max-width:760px){.has-cosmic-shell .et-view.is-on{padding-left:14px;padding-right:14px}}@media(max-width:560px){.etp-kpis,.etp-ach-grid{grid-template-columns:1fr}.etp-area{grid-template-columns:100px 1fr 40px}.has-cosmic-shell .et-tabs{flex-wrap:wrap;max-width:420px}.has-cosmic-shell .et-tab{flex:1 1 calc(50% - 4px)}}.has-cosmic-shell .training-container,.has-cosmic-shell .control-section,.has-cosmic-shell .answer-section,.has-cosmic-shell .piano-section,.has-cosmic-shell #qa-questions-wrapper,.has-cosmic-shell #qa-answers-wrapper,.has-cosmic-shell #study-mode-content,.has-cosmic-shell .notation-container,.has-cosmic-shell .main-content{box-sizing:border-box}.has-cosmic-shell .main-content{overflow-x:hidden}.has-cosmic-shell .notation-container svg,.has-cosmic-shell #notation-display-a svg,.has-cosmic-shell #notation-display-b svg{max-width:100%;height:auto}.has-cosmic-shell .et-acc-toggle{display:none}@media(max-width:576px){.has-cosmic-shell .control-section.et-acc:before{display:none}.has-cosmic-shell .et-acc-toggle{display:flex;align-items:center;gap:8px;width:100%;appearance:none;border:0;cursor:pointer;font:inherit;text-align:left;background:transparent;color:var(--ink);font-weight:600;font-size:14px;letter-spacing:.02em;padding:4px 0;min-height:44px}.has-cosmic-shell .et-acc-toggle .et-acc-caret{margin-left:auto;flex:0 0 auto;width:16px;height:16px;transition:transform .2s ease}.has-cosmic-shell .control-section.et-acc-open .et-acc-toggle .et-acc-caret{transform:rotate(180deg)}.has-cosmic-shell .control-section.et-acc .control-header{display:none!important}.has-cosmic-shell .control-section.et-acc-open .control-header{display:block!important}.has-cosmic-shell .control-section.et-acc:not(.et-acc-open) #settings-icon{display:none!important}.has-cosmic-shell #progress-bar,.has-cosmic-shell .progress-bar{display:grid!important;grid-template-columns:repeat(5,1fr);gap:6px;height:auto!important;padding:6px;align-content:start}.has-cosmic-shell .progress-bar .progress-step{flex:none!important;height:12px;transform:none!important}.has-cosmic-shell .piano-scroll-container{overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;padding-top:16px;scrollbar-width:thin}.has-cosmic-shell #notation-display-a,.has-cosmic-shell #notation-display-b,.has-cosmic-shell #interval-a-notation,.has-cosmic-shell #interval-b-notation,.has-cosmic-shell #single-interval-notation,.has-cosmic-shell #chord-notation,.has-cosmic-shell #chord-inversion-notation,.has-cosmic-shell #scale-notation{overflow-x:auto;max-width:100%}.has-cosmic-shell .control-select,.has-cosmic-shell .mode-select{min-height:44px}.has-cosmic-shell #key-label-toggle{width:52px!important;height:30px!important}.has-cosmic-shell #volume-slider{min-height:44px}.has-cosmic-shell #volume-slider::-webkit-slider-thumb{width:24px!important;height:24px!important}.has-cosmic-shell #volume-slider::-moz-range-thumb{width:24px!important;height:24px!important}.has-cosmic-shell #challenge-participants{max-width:100%;overflow-wrap:anywhere}.has-cosmic-shell #challenge-mode-controls{flex-wrap:wrap;gap:.5rem}.has-cosmic-shell #channel-id-input{margin-left:0!important;width:100%;min-height:44px}.etp-heat{grid-template-columns:repeat(13,1fr)}.etp-lb-name{min-width:0}}@media(min-width:577px)and (max-width:992px){.has-cosmic-shell .et-session .stat-grid{grid-template-columns:repeat(4,1fr)!important}.has-cosmic-shell .notation-side-by-side{flex-direction:row}}.has-cosmic-shell .white-key,.has-cosmic-shell .black-key{transition:background-color .12s ease,box-shadow .12s ease,transform .12s ease!important;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.has-cosmic-shell .piano,.has-cosmic-shell .piano-scroll-container,.has-cosmic-shell .key-label{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.has-cosmic-shell .white-key,.has-cosmic-shell .white-key:active,.has-cosmic-shell .white-key.key-pressed,.has-cosmic-shell .white-key.key-active,.has-cosmic-shell .black-key,.has-cosmic-shell .black-key:active,.has-cosmic-shell .black-key.key-pressed,.has-cosmic-shell .black-key.key-active{border-width:1px!important}@media(hover:none){.has-cosmic-shell .white-key:active,.has-cosmic-shell .black-key:active{transform:none}}.has-cosmic-shell .piano .white-key[data-note^=C]:not([data-note*="#"]):after{content:attr(data-note);position:absolute;left:0;right:0;bottom:5px;text-align:center;font-family:var(--font-body, sans-serif);font-size:9px;font-weight:700;letter-spacing:.01em;color:color-mix(in srgb,var(--accent) 80%,#4a2d80);opacity:.9;pointer-events:none}@media(max-width:576px){.has-cosmic-shell .piano-scroll-container{touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:none}.has-cosmic-shell .piano-scroll-container::-webkit-scrollbar{display:none;height:0}.has-cosmic-shell .white-key.key-active,.has-cosmic-shell .black-key.key-active,.has-cosmic-shell .key-active{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 75%,#fff)!important}.has-cosmic-shell .piano-section{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.has-cosmic-shell .piano .white-key[data-note^=C]:not([data-note*="#"]):after{font-size:10px;bottom:4px}}