:root{--primary: #1a2332;--primary-dark: #131521;--accent: #c9a227;--accent-light: #d4b24a;--text: #1a2332;--text-light: #64748b;--text-muted: #94a3b8;--bg: #fafafa;--bg-white: #ffffff;--bg-light: #f1f5f9;--border: #e2e8f0;--success: #10b981;--error: #ef4444;--warning: #f59e0b;--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow: 0 4px 6px -1px rgba(0,0,0,.1);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);--radius: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;display:flex;flex-direction:column}.container{max-width:1200px;margin:0 auto;padding:0 24px}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2}h1{font-size:clamp(2rem,5vw,3.5rem)}h2{font-size:clamp(1.5rem,4vw,2.5rem)}h3{font-size:clamp(1.25rem,3vw,1.5rem)}h4{font-size:1.25rem}.italic{font-family:Playfair Display,serif;font-style:italic;color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font-size:.95rem;font-weight:500;border-radius:var(--radius-full);border:none;cursor:pointer;text-decoration:none;transition:all .2s ease;white-space:nowrap}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-secondary{background:var(--bg-white);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-light);border-color:var(--text-muted)}.btn-white{background:#fff;color:var(--primary)}.btn-white:hover{background:var(--bg-light)}.btn-outline-white{background:transparent;color:#fff;border:2px solid white}.btn-outline-white:hover{background:#fff;color:var(--primary)}.btn-lg{padding:16px 32px;font-size:1rem}.btn-sm{padding:8px 16px;font-size:.875rem}.btn-link{color:var(--text);text-decoration:none;font-weight:500;transition:color .2s;background:none;border:none;cursor:pointer}.btn-link:hover{color:var(--accent)}.navbar{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--border);z-index:1000}.nav-container{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);flex-shrink:0}.logo-icon{width:32px;height:48px;display:flex;align-items:center;justify-content:center}.logo-svg{width:100%;height:100%}.logo-icon span{font-family:Playfair Display,serif;font-weight:600;font-size:1.25rem;color:var(--primary)}.logo-text{font-weight:600;font-size:1.25rem}.nav-links{display:flex;align-items:center;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-full);padding:4px}.nav-link{padding:10px 20px;text-decoration:none;color:var(--text);font-weight:500;font-size:.95rem;border-radius:var(--radius-full);transition:all .2s}.nav-link:hover{color:var(--accent)}.nav-link.active{background:var(--primary);color:#fff}.nav-actions{display:flex;align-items:center;gap:16px}.mobile-menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:5px}.mobile-menu-btn span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}.mobile-nav{display:none;position:fixed;top:73px;left:0;right:0;background:var(--bg-white);border-bottom:1px solid var(--border);padding:16px 24px;z-index:999}.mobile-nav.open{display:block}.mobile-nav-links{display:flex;flex-direction:column;gap:8px}.mobile-nav-link{padding:12px 16px;text-decoration:none;color:var(--text);font-weight:500;border-radius:var(--radius);transition:all .2s}.mobile-nav-link:hover,.mobile-nav-link.active{background:var(--bg-light);color:var(--accent)}.hero{padding:clamp(60px,10vw,100px) 0 clamp(40px,8vw,80px)}.hero.hero-split{min-height:100vh;display:flex;align-items:center;padding:100px 0 60px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.hero-text{padding-right:40px}.hero.hero-split .hero-badge{background:#ffffff1a;border-color:#fff3;color:#ffffffe6}.hero.hero-split .badge-dot{background:var(--accent)}.hero.hero-split .hero-title{color:#fff;max-width:100%}.hero.hero-split .hero-title .italic{color:var(--accent)}.hero.hero-split .hero-subtitle{color:#fffc;max-width:100%}.hero.hero-split .btn-primary{background:var(--accent);color:var(--primary);border:none}.hero.hero-split .btn-primary:hover{background:var(--accent-light);transform:translateY(-2px)}.hero.hero-split .btn-link{color:#fff}.hero.hero-split .btn-link:hover{color:var(--accent)}.hero-image{display:flex;align-items:center;justify-content:center;padding:20px}.hero-image img{max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain}@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px;text-align:center}.hero-text{padding-right:0;order:1}.hero-image{order:2}.hero-image img{max-height:50vh}.hero.hero-split .hero-title,.hero.hero-split .hero-subtitle{max-width:100%}.hero-actions{justify-content:center}}@media(max-width:600px){.hero.hero-split{min-height:auto;padding:80px 0 40px}.hero-image img{max-height:40vh}}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-full);font-size:.875rem;color:var(--text-light);margin-bottom:32px}.badge-dot{width:8px;height:8px;background:var(--accent);border-radius:50%}.hero-title{font-size:clamp(2.5rem,8vw,4.5rem);line-height:1.1;margin-bottom:24px;max-width:700px}.hero-subtitle{font-size:clamp(1rem,2vw,1.25rem);color:var(--text-light);max-width:550px;margin-bottom:40px;line-height:1.7}.hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.features{padding:clamp(20px,8vw,0px) 0;background:var(--bg-white)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px}.feature-card{padding:32px;background:var(--bg);border-radius:var(--radius-lg);text-align:center}.feature-icon{width:56px;height:56px;margin:0 auto 20px;background:var(--primary);border-radius:var(--radius);display:flex;align-items:center;justify-content:center}.feature-icon svg{width:28px;height:28px;color:#fff}.feature-card h3{font-size:1.125rem;margin-bottom:12px}.feature-card p{color:var(--text-light);font-size:.95rem}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}.tool-card{padding:24px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;text-decoration:none;color:var(--text);transition:all .3s ease}.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}.tool-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tool-icon{width:56px;height:56px;margin:0 auto 16px;background:var(--bg-light);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.75rem}.tool-icon svg{width:28px;height:28px;color:var(--primary)}.tool-card h4{font-size:1rem;margin-bottom:4px}.tool-card p{font-size:.85rem;color:var(--text-light)}.section-header{text-align:center;margin-bottom:60px}.section-header h2{margin-bottom:12px}.section-header p{color:var(--text-light);font-size:1.125rem;max-width:600px;margin:0 auto}.tools-preview{padding:clamp(60px,10vw,100px) 0;background:var(--bg)}.tools-cta{text-align:center;margin-top:40px}.theory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.theory-card{padding:32px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:var(--text);transition:all .3s ease}.theory-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}.theory-number{font-size:.875rem;font-weight:600;color:var(--accent);margin-bottom:12px}.theory-card h4{margin-bottom:8px}.theory-card p{color:var(--text-light);font-size:.95rem}.cta-section{padding:clamp(60px,10vw,100px) 0;background:var(--primary)}.cta-content{text-align:center;color:#fff}.cta-content h2{margin-bottom:16px}.cta-content p{opacity:.8;font-size:1.125rem;margin-bottom:32px}.cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.footer{padding:80px 0 40px;background:var(--bg-white);border-top:1px solid var(--border);margin-top:auto}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:60px;margin-bottom:60px}.footer-brand p{color:var(--text-light);margin-top:16px}.footer-links h5{font-weight:600;margin-bottom:20px;font-size:.95rem}.footer-links a{display:block;color:var(--text-light);text-decoration:none;padding:6px 0;font-size:.95rem;transition:color .2s}.footer-links a:hover{color:var(--accent)}.footer-bottom{padding-top:40px;border-top:1px solid var(--border);text-align:center}.footer-bottom p{color:var(--text-muted);font-size:.875rem}.dashboard{padding:40px 0;min-height:calc(100vh - 80px)}.dashboard-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px;flex-wrap:wrap;gap:24px}.dashboard-greeting h1{font-size:clamp(1.75rem,4vw,2.5rem);margin-bottom:8px}.dashboard-greeting p{color:var(--text-light);font-size:1.125rem}.streak-badge{display:flex;align-items:center;gap:12px}.streak-info{text-align:right}.streak-info strong{display:block;font-size:1rem}.streak-info span{font-size:.875rem;color:var(--text-light)}.streak-icon{width:48px;height:48px;background:#fef3c7;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-bottom:48px}.stat-card{background:var(--bg-white);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--border)}.stat-card.primary{background:var(--primary);color:#fff;border:none}.stat-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.stat-icon{width:40px;height:40px;background:#ffffff1a;border-radius:var(--radius);display:flex;align-items:center;justify-content:center}.stat-card:not(.primary) .stat-icon{background:var(--bg-light)}.stat-icon svg{width:20px;height:20px}.stat-label{font-size:.875rem;opacity:.8}.stat-value{font-size:2rem;font-weight:700;margin-bottom:12px}.stat-meta{font-size:.875rem;color:var(--success)}.stat-card.primary .stat-meta{color:#ffffffb3}.progress-bar{height:6px;background:#fff3;border-radius:3px;overflow:hidden;margin-top:12px}.progress-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .3s ease}.tools-page{padding:60px 0}.tools-hero{text-align:center;margin-bottom:60px}.tools-hero h1{margin-bottom:16px}.tools-hero p{color:var(--text-light);font-size:1.125rem;max-width:600px;margin:0 auto}.tools-category{margin-bottom:60px}.tools-category h2{font-size:1.5rem;margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid var(--border)}.tools-category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}.tool-card-lg{padding:32px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:var(--text);transition:all .3s ease}.tool-card-lg:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}.tool-card-lg .tool-icon{width:64px;height:64px;margin-bottom:20px}.tool-card-lg .tool-icon svg{width:32px;height:32px}.tool-card-lg h3{font-size:1.125rem;margin-bottom:8px}.tool-card-lg p{color:var(--text-light);font-size:.95rem}.tool-page{padding:40px 0;min-height:calc(100vh - 160px)}.tool-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;flex-wrap:wrap;gap:16px}.tool-header h1{font-size:clamp(1.5rem,4vw,2rem)}.tool-controls{display:flex;gap:12px;flex-wrap:wrap}.tool-container{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-xl);padding:clamp(20px,4vw,40px);margin-bottom:32px}.piano-container{display:flex;flex-direction:column;align-items:center;overflow-x:auto;padding-bottom:20px}.piano-settings{display:flex;gap:24px;margin-bottom:32px;padding:16px 24px;background:var(--bg-light);border-radius:var(--radius);flex-wrap:wrap}.setting-group{display:flex;align-items:center;gap:12px}.setting-group label{font-size:.875rem;font-weight:500;white-space:nowrap}.setting-group select,.setting-group input{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;background:#fff}.piano-keyboard{display:flex;position:relative;min-width:max-content}.white-key{width:clamp(40px,5vw,60px);height:clamp(140px,18vw,200px);background:#fff;border:1px solid #ccc;border-radius:0 0 6px 6px;cursor:pointer;position:relative;z-index:1;transition:all .1s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-size:.75rem;color:var(--text-light);-webkit-user-select:none;user-select:none}.white-key:hover{background:#f0f0f0}.white-key.active{background:var(--bg-light);transform:translateY(2px)}.black-key{width:clamp(24px,3vw,36px);height:clamp(84px,11vw,120px);background:var(--primary);border-radius:0 0 4px 4px;cursor:pointer;position:absolute;z-index:2;transform:translate(-50%);transition:all .1s;-webkit-user-select:none;user-select:none}.black-key:hover{background:#2a3444}.black-key.active{background:#3a4454;height:clamp(79px,10.5vw,115px)}.metronome-container{text-align:center;max-width:400px;margin:0 auto}.metronome-display{margin-bottom:40px}.bpm-display{font-size:clamp(3rem,10vw,5rem);font-weight:700;line-height:1;margin-bottom:8px}.bpm-label{color:var(--text-light);font-size:1.125rem}.metronome-visual{width:200px;height:200px;margin:0 auto 40px;position:relative}.metronome-circle{width:100%;height:100%;border:4px solid var(--border);border-radius:50%;position:relative}.metronome-indicator{width:20px;height:20px;background:var(--accent);border-radius:50%;position:absolute;top:-10px;left:50%;transform:translate(-50%);transition:transform .1s ease-out}.metronome-indicator.tick{transform:translate(-50%) scale(1.3);background:var(--primary)}.tempo-slider{width:100%;margin-bottom:24px}.tempo-slider input[type=range]{width:100%;height:8px;-webkit-appearance:none;background:var(--bg-light);border-radius:4px;outline:none}.tempo-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:var(--primary);border-radius:50%;cursor:pointer}.tempo-presets{display:flex;justify-content:center;gap:8px;margin-bottom:32px;flex-wrap:wrap}.tempo-preset{padding:8px 16px;background:var(--bg-light);border:none;border-radius:var(--radius-full);font-size:.875rem;cursor:pointer;transition:all .2s}.tempo-preset:hover,.tempo-preset.active{background:var(--primary);color:#fff}.metronome-controls{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.play-btn{width:80px;height:80px;background:var(--primary);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#fff}.play-btn:hover{background:var(--primary-dark);transform:scale(1.05)}.play-btn svg{width:32px;height:32px}.time-sig-btn{padding:12px 20px;background:var(--bg-light);border:none;border-radius:var(--radius);font-weight:500;cursor:pointer;transition:all .2s}.time-sig-btn:hover{background:var(--border)}.circle-container{display:flex;justify-content:center;align-items:center;padding:20px}.circle-of-fifths{width:min(500px,90vw);height:min(500px,90vw);position:relative}.key-segment{position:absolute;width:clamp(40px,8vw,60px);height:clamp(40px,8vw,60px);background:var(--bg-white);border:2px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:clamp(.75rem,2vw,1rem);cursor:pointer;transition:all .2s}.key-segment:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.1)}.key-segment.active{background:var(--primary);color:#fff;border-color:var(--primary)}.key-info{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;background:var(--bg-white);padding:20px;border-radius:var(--radius-lg);min-width:150px}.key-info h3{font-size:2rem;margin-bottom:8px}.key-info p{color:var(--text-light);font-size:.95rem}.exercise-container{max-width:600px;margin:0 auto;text-align:center}.exercise-question{margin-bottom:32px}.exercise-question h3{margin-bottom:24px}.exercise-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.option-btn{padding:16px;background:#fff;border:2px solid var(--border);border-radius:var(--radius);font-weight:500;font-size:1rem;cursor:pointer;transition:all .2s}.option-btn:hover{border-color:var(--primary)}.option-btn.correct{background:var(--success);border-color:var(--success);color:#fff}.option-btn.incorrect{background:var(--error);border-color:var(--error);color:#fff}.exercise-score{display:flex;justify-content:center;gap:32px;margin-bottom:24px}.score-item{text-align:center}.score-value{font-size:2rem;font-weight:700}.score-label{font-size:.875rem;color:var(--text-light)}.not-found{text-align:center;padding:100px 24px}.not-found h1{font-size:6rem;color:var(--text-muted);margin-bottom:16px}.not-found p{color:var(--text-light);margin-bottom:32px}@media(max-width:1024px){.footer-grid{grid-template-columns:repeat(2,1fr);gap:40px}}@media(max-width:768px){.nav-links,.nav-actions{display:none}.mobile-menu-btn{display:flex}.footer-grid{grid-template-columns:1fr;gap:32px}.hero-actions{flex-direction:column;align-items:flex-start}.cta-actions{flex-direction:column}}@media(max-width:480px){.container{padding:0 16px}.exercise-options,.stats-grid{grid-template-columns:1fr}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-contrast:high){:root{--border: #000;--text-light: #333;--text-muted: #666}}.auth-page{min-height:calc(100vh - 160px);display:flex;align-items:center;justify-content:center;padding:40px 16px;background:var(--bg)}.auth-container{width:100%;max-width:480px;background:var(--bg-white);border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow-lg);border:1px solid var(--border)}.auth-container.role-select{max-width:720px}.auth-header{text-align:center;margin-bottom:32px}.auth-header h1{font-size:1.75rem;margin-bottom:8px}.auth-header p{color:var(--text-light);font-size:1rem}.auth-icon{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:flex;align-items:center;justify-content:center}.auth-icon svg{width:32px;height:32px}.auth-icon.learner{background:#dbeafe;color:#2563eb}.auth-icon.teacher{background:#dcfce7;color:#16a34a}.auth-icon.parent{background:#fef3c7;color:#d97706}.auth-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:6px;width:100%}.form-group label{font-size:.875rem;font-weight:600;color:var(--text)}.form-group label .required{color:var(--error);margin-left:2px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:var(--radius);font-size:1rem;font-family:inherit;transition:border-color .2s,box-shadow .2s;background:var(--bg-white);color:var(--text);box-sizing:border-box;min-height:48px}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #1a233226}.form-group input.error,.form-group select.error,.form-group textarea.error,.form-group input[aria-invalid=true],.form-group select[aria-invalid=true]{border-color:var(--error)}.form-group input.error:focus,.form-group select.error:focus,.form-group input[aria-invalid=true]:focus,.form-group select[aria-invalid=true]:focus{box-shadow:0 0 0 3px #ef444426}.error-message{font-size:.8125rem;color:var(--error);font-weight:500;display:flex;align-items:center;gap:4px}.error-message:before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;background:var(--error);color:#fff;border-radius:50%;font-size:.625rem;font-weight:700;flex-shrink:0}.form-hint{font-size:.8125rem;color:var(--text-muted);margin-top:2px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}.form-options{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.checkbox-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.875rem;color:var(--text);line-height:1.5}.checkbox-label input[type=checkbox]{width:20px;height:20px;min-width:20px;accent-color:var(--primary);cursor:pointer;margin-top:2px}.checkbox-label input[type=checkbox]:focus{outline:2px solid var(--primary);outline-offset:2px}.checkbox-label.terms{margin-top:8px}.checkbox-label.terms span{color:var(--text-light)}.checkbox-label.terms a{color:var(--primary);text-decoration:underline;font-weight:500}.checkbox-label.terms a:hover{text-decoration:none}.checkbox-label.terms a:focus{outline:2px solid var(--primary);outline-offset:2px}.checkbox-label.homeschool-check{padding:12px 16px;background:var(--bg-light);border-radius:var(--radius)}.forgot-link{font-size:.875rem;color:var(--text-light);text-decoration:none;transition:color .2s}.forgot-link:hover{color:var(--primary);text-decoration:underline}.forgot-link:focus{outline:2px solid var(--primary);outline-offset:2px}.auth-submit{width:100%;margin-top:8px;min-height:48px}.subject-chips{display:flex;flex-wrap:wrap;gap:8px}.subject-chip{padding:10px 16px;background:var(--bg-light);border:2px solid var(--border);border-radius:var(--radius-full);font-size:.875rem;cursor:pointer;transition:all .2s;min-height:40px}.subject-chip:hover{border-color:var(--primary);background:var(--bg)}.subject-chip:focus{outline:2px solid var(--primary);outline-offset:2px}.subject-chip.selected,.subject-chip[aria-pressed=true]{background:var(--primary);color:#fff;border-color:var(--primary)}.auth-footer{margin-top:32px;text-align:center}.auth-footer p{font-size:.95rem;color:var(--text-light)}.auth-footer a{color:var(--primary);font-weight:500;text-decoration:none}.auth-footer a:hover{text-decoration:underline}.auth-footer a:focus{outline:2px solid var(--primary);outline-offset:2px}.auth-divider{display:flex;align-items:center;margin:20px 0}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.auth-divider span{padding:0 16px;font-size:.85rem;color:var(--text-muted)}.auth-alt-links{display:flex;justify-content:center;gap:12px}.auth-alt-link{padding:10px 20px;background:var(--bg-light);border-radius:var(--radius-full);color:var(--text);text-decoration:none;font-size:.9rem;font-weight:500;transition:all .2s;min-height:44px;display:inline-flex;align-items:center;justify-content:center}.auth-alt-link:hover{background:var(--primary);color:#fff}.auth-alt-link:focus{outline:2px solid var(--primary);outline-offset:2px}.role-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}.role-card{padding:24px 16px;background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-lg);text-align:center;text-decoration:none;color:var(--text);transition:all .2s ease}.role-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow)}.role-card:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #1a233226}.role-card .role-icon{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center}.role-card .role-icon svg{width:28px;height:28px}.role-card h3{font-size:1.125rem;margin-bottom:8px}.role-card p{font-size:.8125rem;color:var(--text-light);line-height:1.5}@media(max-width:600px){.auth-page{padding:24px 16px;align-items:flex-start}.auth-container{padding:24px 20px;border-radius:var(--radius-lg)}.auth-header h1{font-size:1.5rem}.auth-header p{font-size:.9375rem}.form-row{grid-template-columns:1fr;gap:20px}.role-cards{grid-template-columns:1fr;gap:12px}.role-card{padding:20px 16px;display:flex;align-items:center;text-align:left;gap:16px}.role-card .role-icon{margin:0;flex-shrink:0}.role-card h3{margin-bottom:4px}.form-options{flex-direction:column;align-items:flex-start;gap:16px}.auth-alt-links{flex-direction:column;gap:10px}.auth-alt-link{width:100%}.checkbox-label.terms{font-size:.8125rem}}@media(min-width:601px)and (max-width:768px){.auth-container{padding:32px}.role-cards{grid-template-columns:1fr}}.skip-link{position:absolute;top:-40px;left:0;background:var(--primary);color:#fff;padding:8px 16px;z-index:100;text-decoration:none;border-radius:0 0 var(--radius) 0}.skip-link:focus{top:0}.about-page{position:relative;overflow-x:hidden;min-height:100vh}.about-page.loaded .hero-title .title-line{opacity:1;transform:translateY(0)}.about-page.loaded .floating-violin{opacity:1}.sky-backdrop{position:fixed;inset:0;background:linear-gradient(180deg,#0a1628,#0d1a2d,#102035,#132640,#162c4a,#1a3255);z-index:-1}.clouds-layer{position:fixed;inset:0;pointer-events:none;overflow:visible}.clouds-layer-1{z-index:1}.clouds-layer-2{z-index:2}.clouds-layer-3{z-index:3}.cloud{position:absolute;border-radius:100px;filter:blur(1px)}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%}.cloud-far{background:#ffffff40;animation:drift-slow 60s ease-in-out infinite}.cloud-far:before,.cloud-far:after{background:#ffffff40}.cloud-far.c1{width:200px;height:50px;top:5%;left:10%}.cloud-far.c1:before{width:60px;height:60px;top:-30px;left:30px}.cloud-far.c1:after{width:80px;height:80px;top:-40px;left:80px}.cloud-far.c2{width:180px;height:45px;top:15%;right:15%;animation-delay:-15s}.cloud-far.c2:before{width:55px;height:55px;top:-28px;left:25px}.cloud-far.c2:after{width:70px;height:70px;top:-35px;left:70px}.cloud-far.c3{width:220px;height:55px;top:35%;left:5%;animation-delay:-30s}.cloud-far.c3:before{width:70px;height:70px;top:-35px;left:35px}.cloud-far.c3:after{width:85px;height:85px;top:-42px;left:100px}.cloud-far.c4{width:160px;height:40px;top:55%;right:8%;animation-delay:-45s}.cloud-far.c4:before{width:50px;height:50px;top:-25px;left:20px}.cloud-far.c4:after{width:65px;height:65px;top:-32px;left:60px}.cloud-far.c5{width:190px;height:48px;top:75%;left:20%;animation-delay:-20s}.cloud-far.c5:before{width:58px;height:58px;top:-29px;left:28px}.cloud-far.c5:after{width:75px;height:75px;top:-38px;left:85px}.cloud-mid{background:#ffffff73;animation:drift-mid 45s ease-in-out infinite}.cloud-mid:before,.cloud-mid:after{background:#ffffff73}.cloud-mid.m1{width:280px;height:70px;top:8%;left:-50px}.cloud-mid.m1:before{width:90px;height:90px;top:-45px;left:40px}.cloud-mid.m1:after{width:110px;height:110px;top:-55px;left:120px}.cloud-mid.m2{width:320px;height:80px;top:20%;right:-80px;animation-delay:-10s}.cloud-mid.m2:before{width:100px;height:100px;top:-50px;left:50px}.cloud-mid.m2:after{width:130px;height:130px;top:-65px;left:140px}.cloud-mid.m3{width:260px;height:65px;top:40%;left:15%;animation-delay:-25s}.cloud-mid.m3:before{width:85px;height:85px;top:-42px;left:35px}.cloud-mid.m3:after{width:100px;height:100px;top:-50px;left:110px}.cloud-mid.m4{width:300px;height:75px;top:58%;right:10%;animation-delay:-35s}.cloud-mid.m4:before{width:95px;height:95px;top:-48px;left:45px}.cloud-mid.m4:after{width:120px;height:120px;top:-60px;left:130px}.cloud-mid.m5{width:240px;height:60px;top:72%;left:-30px;animation-delay:-18s}.cloud-mid.m5:before{width:80px;height:80px;top:-40px;left:30px}.cloud-mid.m5:after{width:95px;height:95px;top:-48px;left:100px}.cloud-mid.m6{width:270px;height:68px;top:88%;right:25%;animation-delay:-40s}.cloud-mid.m6:before{width:88px;height:88px;top:-44px;left:38px}.cloud-mid.m6:after{width:105px;height:105px;top:-52px;left:115px}.cloud-near{background:#ffffffb3;animation:drift-fast 30s ease-in-out infinite;filter:blur(0)}.cloud-near:before,.cloud-near:after{background:#ffffffb3}.cloud-near.n1{width:400px;height:100px;top:12%;left:-100px}.cloud-near.n1:before{width:130px;height:130px;top:-65px;left:60px}.cloud-near.n1:after{width:160px;height:160px;top:-80px;left:180px}.cloud-near.n2{width:450px;height:110px;top:45%;right:-150px;animation-delay:-8s}.cloud-near.n2:before{width:145px;height:145px;top:-72px;left:70px}.cloud-near.n2:after{width:175px;height:175px;top:-88px;left:200px}.cloud-near.n3{width:380px;height:95px;top:68%;left:5%;animation-delay:-15s}.cloud-near.n3:before{width:125px;height:125px;top:-62px;left:55px}.cloud-near.n3:after{width:150px;height:150px;top:-75px;left:170px}.cloud-near.n4{width:420px;height:105px;top:85%;right:-80px;animation-delay:-22s}.cloud-near.n4:before{width:135px;height:135px;top:-68px;left:65px}.cloud-near.n4:after{width:165px;height:165px;top:-82px;left:190px}@keyframes drift-slow{0%,to{transform:translate(0) translateY(0)}25%{transform:translate(20px) translateY(-8px)}50%{transform:translate(40px) translateY(4px)}75%{transform:translate(20px) translateY(-4px)}}@keyframes drift-mid{0%,to{transform:translate(0) translateY(0)}25%{transform:translate(35px) translateY(-12px)}50%{transform:translate(70px) translateY(6px)}75%{transform:translate(35px) translateY(-6px)}}@keyframes drift-fast{0%,to{transform:translate(0) translateY(0)}25%{transform:translate(50px) translateY(-15px)}50%{transform:translate(100px) translateY(8px)}75%{transform:translate(50px) translateY(-8px)}}.music-notes-container{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}.floating-note{position:absolute;font-size:2rem;color:var(--accent);text-shadow:0 2px 10px rgba(201,162,39,.3);animation:note-float 8s ease-in-out infinite}.note-1{top:20%;left:8%;animation-delay:0s;font-size:1.5rem}.note-2{top:35%;right:12%;animation-delay:-2s;font-size:2.5rem}.note-3{top:50%;left:5%;animation-delay:-4s;font-size:1.8rem}.note-4{top:65%;right:8%;animation-delay:-6s;font-size:2rem}.note-5{top:80%;left:15%;animation-delay:-3s;font-size:3rem}@keyframes note-float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(10deg)}}.floating-violin{position:fixed;top:15%;left:10%;width:clamp(120px,20vw,250px);height:auto;z-index:5;opacity:0;transition:opacity 1.5s ease-out;filter:drop-shadow(0 30px 60px rgba(0,0,0,.4));will-change:transform}.violin-svg{width:100%;height:auto}.about-hero{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;z-index:10}.hero-content{position:relative;text-align:center;color:#fff;padding:0 24px;margin-top:80px}.hero-title{font-size:clamp(3rem,10vw,7rem);font-weight:700;line-height:1.1;margin-bottom:24px;text-shadow:0 4px 30px rgba(0,0,0,.3)}.hero-title .title-line{display:block;opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(.16,1,.3,1)}.hero-title .title-line:nth-child(2){transition-delay:.2s}.hero-title .title-line.accent{color:var(--accent);font-family:Playfair Display,serif;font-style:italic}.hero-subtitle{font-size:clamp(1.125rem,3vw,1.5rem);opacity:.9;margin-bottom:60px;font-weight:300;text-shadow:0 2px 10px rgba(0,0,0,.2)}.scroll-indicator{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.7;animation:bounce-fade 2s ease-in-out infinite}.scroll-indicator span{font-size:.875rem;text-transform:uppercase;letter-spacing:2px}.scroll-arrow{width:24px;height:24px;border-right:2px solid white;border-bottom:2px solid white;transform:rotate(45deg)}@keyframes bounce-fade{0%,to{opacity:.7;transform:translateY(0)}50%{opacity:1;transform:translateY(10px)}}.glass-card{background:#ffffff1f;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:60px 48px;max-width:700px;margin:0 auto;text-align:center;box-shadow:0 8px 32px #0000001a,inset 0 1px #fff3;position:relative;z-index:10}.glass-card.wide{max-width:1000px}.glass-card.cta-card{max-width:600px;padding:80px 48px}.cloud-accent{position:absolute;width:300px;height:80px;background:#ffffff26;border-radius:100px;filter:blur(2px)}.cloud-accent:before,.cloud-accent:after{content:"";position:absolute;background:#ffffff26;border-radius:50%}.cloud-accent-left{left:-100px;top:30%}.cloud-accent-left:before{width:100px;height:100px;top:-50px;left:40px}.cloud-accent-left:after{width:120px;height:120px;top:-60px;left:120px}.cloud-accent-right{right:-100px;top:60%}.cloud-accent-right:before{width:90px;height:90px;top:-45px;left:30px}.cloud-accent-right:after{width:110px;height:110px;top:-55px;left:100px}.story-section{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:100px 24px;z-index:10}.story-section .section-label{display:inline-block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:3px;color:var(--accent);margin-bottom:24px;padding:8px 16px;background:#c9a22733;border-radius:var(--radius-full)}.story-section h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:24px;line-height:1.2;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.2)}.story-section p{font-size:clamp(1rem,2vw,1.25rem);color:#ffffffd9;line-height:1.8}.stats-section{position:relative;padding:120px 24px;z-index:10}.stats-clouds{position:absolute;inset:0;overflow:hidden;pointer-events:none}.cloud-stats{background:#ffffff1a}.cloud-stats:before,.cloud-stats:after{background:#ffffff1a}.cloud-stats.s1{width:350px;height:90px;top:10%;left:-50px}.cloud-stats.s1:before{width:115px;height:115px;top:-58px;left:50px}.cloud-stats.s1:after{width:140px;height:140px;top:-70px;left:150px}.cloud-stats.s2{width:320px;height:80px;bottom:15%;right:-40px}.cloud-stats.s2:before{width:105px;height:105px;top:-52px;left:45px}.cloud-stats.s2:after{width:125px;height:125px;top:-62px;left:135px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.glass-stat{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:32px 24px;text-align:center;transition:transform .3s ease,background .3s ease}.glass-stat:hover{transform:translateY(-5px);background:#ffffff26}.stat-number{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;color:var(--accent);display:block;margin-bottom:8px}.stat-label{font-size:.875rem;color:#fffc;text-transform:uppercase;letter-spacing:1px}.values-section{position:relative;padding:120px 24px;z-index:10}.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:48px}.value-item{text-align:center}.value-icon{width:64px;height:64px;margin:0 auto 20px;background:#c9a22733;border-radius:16px;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,background .3s ease}.value-icon:hover{transform:scale(1.1);background:#c9a2274d}.value-icon svg{width:32px;height:32px;color:var(--accent)}.value-item h3{font-size:1.25rem;color:#fff;margin-bottom:8px}.value-item p{font-size:.9rem;color:#ffffffb3;line-height:1.5}.about-cta{position:relative;padding:120px 24px 160px;z-index:10}.cta-clouds{position:absolute;inset:0;overflow:hidden;pointer-events:none}.cloud-cta{background:#ffffff14}.cloud-cta:before,.cloud-cta:after{background:#ffffff14}.cloud-cta.cta1{width:300px;height:75px;top:20%;left:5%}.cloud-cta.cta1:before{width:95px;height:95px;top:-48px;left:40px}.cloud-cta.cta1:after{width:115px;height:115px;top:-58px;left:125px}.cloud-cta.cta2{width:280px;height:70px;top:50%;right:10%}.cloud-cta.cta2:before{width:90px;height:90px;top:-45px;left:35px}.cloud-cta.cta2:after{width:110px;height:110px;top:-55px;left:115px}.cloud-cta.cta3{width:260px;height:65px;bottom:15%;left:15%}.cloud-cta.cta3:before{width:85px;height:85px;top:-42px;left:32px}.cloud-cta.cta3:after{width:100px;height:100px;top:-50px;left:105px}.about-cta h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:16px;color:#fff}.about-cta p{font-size:1.25rem;color:#fffc;margin-bottom:40px}.cta-buttons{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.btn-accent{background:var(--accent);color:var(--primary);font-weight:600}.btn-accent:hover{background:var(--accent-light);transform:translateY(-2px)}.btn-glass{background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.btn-glass:hover{background:#ffffff40;border-color:#ffffff80}.footer-clouds{position:relative;height:200px;z-index:10;overflow:hidden}.cloud-footer{background:#fff9;animation:drift-fast 25s ease-in-out infinite}.cloud-footer:before,.cloud-footer:after{background:#fff9}.cloud-footer.f1{width:500px;height:120px;bottom:-40px;left:-100px}.cloud-footer.f1:before{width:160px;height:160px;top:-80px;left:80px}.cloud-footer.f1:after{width:200px;height:200px;top:-100px;left:220px}.cloud-footer.f2{width:450px;height:110px;bottom:-30px;right:-50px;animation-delay:-10s}.cloud-footer.f2:before{width:145px;height:145px;top:-72px;left:70px}.cloud-footer.f2:after{width:180px;height:180px;top:-90px;left:195px}.cloud-footer.f3{width:400px;height:100px;bottom:-50px;left:40%;animation-delay:-18s}.cloud-footer.f3:before{width:130px;height:130px;top:-65px;left:60px}.cloud-footer.f3:after{width:160px;height:160px;top:-80px;left:175px}@media(max-width:1024px){.values-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)}.glass-card{padding:48px 32px}}@media(max-width:600px){.floating-violin{width:100px;left:5%;top:10%}.hero-content{margin-top:40px}.clouds-layer-1,.cloud-near.n2,.cloud-near.n4,.cloud-mid.m2,.cloud-mid.m4,.cloud-mid.m6{display:none}.glass-card{padding:40px 24px;margin:0 16px;border-radius:16px}.story-section{padding:80px 16px;min-height:auto}.stats-grid{grid-template-columns:1fr 1fr;gap:16px}.glass-stat{padding:24px 16px}.stat-number{font-size:1.75rem}.values-grid{grid-template-columns:1fr 1fr;gap:24px}.value-icon{width:48px;height:48px}.value-icon svg{width:24px;height:24px}.cta-buttons{flex-direction:column;padding:0 16px}.cta-buttons .btn{width:100%}.cloud-accent,.music-notes-container{display:none}}@keyframes cloud-rise{0%{bottom:-100vh;opacity:0}to{bottom:0;opacity:1}}@keyframes night-sky{0%{background-position:bottom 0px center}to{background-position:bottom -400px center}}#hero-container{background-image:url(/images/clouds/DarkNightSky.png);background-position:center;background-size:cover;height:100vh;width:100vw}#hero-container{animation:night-sky 1s linear;animation-timeline:scroll()}#violin{animation:cloud-rise 1ms cubic-bezier(.3,.8,.3,2.3);animation-timeline:scroll()}