@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=DM+Sans:wght@400;500;700&family=Newsreader:wght@300;400;600&display=swap');
/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
.brass-tutorial{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;max-width:1000px;margin:0 auto;}.brass-tutorial h2{color:#667eea;margin-top:40px;margin-bottom:20px;border-bottom:3px solid #667eea;padding-bottom:10px;}.brass-tutorial h3{color:#764ba2;margin-top:25px;margin-bottom:15px;}.brass-tutorial p{margin-bottom:15px;}.brass-tutorial ul{margin-left:30px;margin-bottom:15px;}.brass-tutorial li{margin-bottom:8px;}.interactive-demo{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);padding:30px;margin:30px 0;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,0.1);}.demo-title{font-size:1.3em;color:#764ba2;margin-bottom:20px;text-align:center;font-weight:bold;}.harmonic-visualizer{display:flex;align-items:flex-end;justify-content:space-around;height:250px;margin:20px 0;padding:20px;background:white;border-radius:8px;}.harmonic-bar{width:40px;background:linear-gradient(to top,#667eea,#764ba2);border-radius:5px 5px 0 0;transition:all 0.3s ease;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;}.harmonic-bar:hover{background:linear-gradient(to top,#764ba2,#667eea);transform:scale(1.05);}.harmonic-bar.active{background:linear-gradient(to top,#ff6b6b,#ee5a24);animation:pulse 0.5s ease;}@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}.harmonic-label{position:absolute;bottom:-25px;font-size:0.8em;font-weight:bold;color:#333;}.harmonic-note{position:absolute;top:-25px;font-size:0.9em;font-weight:bold;color:#764ba2;}.trombone-simulator{background:white;padding:30px;border-radius:8px;margin:20px 0;}.trombone-visual{position:relative;height:150px;margin:30px 0;}.trombone-outer{position:absolute;top:50px;left:50px;width:400px;height:40px;background:linear-gradient(to right,#c9a227,#f4d03f);border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,0.2);}.trombone-inner{position:absolute;top:55px;left:150px;width:300px;height:30px;background:linear-gradient(to right,#d4af37,#ffd700);border-radius:5px;transition:left 0.3s ease;box-shadow:inset 0 2px 4px rgba(0,0,0,0.2);}.slide-control{margin-top:20px;text-align:center;}.slide-control input[type="range"]{width:80%;height:8px;background:#ddd;border-radius:5px;outline:none;}.slide-control input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#764ba2;border-radius:50%;cursor:pointer;}.slide-control input[type="range"]::-moz-range-thumb{width:20px;height:20px;background:#764ba2;border-radius:50%;cursor:pointer;border:none;}.position-display{margin-top:15px;font-size:1.2em;font-weight:bold;color:#764ba2;}.valve-simulator{background:white;padding:30px;border-radius:8px;margin:20px 0;}.valves-container{display:flex;justify-content:center;gap:40px;margin:30px 0;flex-wrap:wrap;}.valve{display:flex;flex-direction:column;align-items:center;cursor:pointer;}.valve-button{width:80px;height:120px;background:linear-gradient(to bottom,#c9a227,#f4d03f);border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,0.3);transition:all 0.2s ease;position:relative;overflow:hidden;}.valve-button::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:rgba(255,255,255,0.2);border-radius:10px 10px 0 0;}.valve.pressed .valve-button{transform:translateY(10px);box-shadow:0 2px 5px rgba(0,0,0,0.3);background:linear-gradient(to bottom,#d4af37,#ffd700);}.valve-label{margin-top:15px;font-weight:bold;color:#333;}.valve-info{font-size:0.9em;color:#666;text-align:center;}.semitone-display{margin-top:20px;padding:15px;background:#f0f0f0;border-radius:8px;text-align:center;font-size:1.1em;font-weight:bold;color:#764ba2;}.wave-container{height:150px;background:white;border-radius:8px;margin:20px 0;position:relative;overflow:hidden;}.wave{position:absolute;width:100%;height:100%;}.wave-path{stroke:#667eea;stroke-width:3;fill:none;}.control-buttons{display:flex;justify-content:center;gap:15px;margin:20px 0;flex-wrap:wrap;}.btn{padding:12px 25px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;border-radius:25px;cursor:pointer;font-size:1em;font-weight:bold;transition:all 0.3s ease;box-shadow:0 4px 10px rgba(0,0,0,0.2);}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,0,0,0.3);}.btn:active{transform:translateY(0);}.info-box{background:#e3f2fd;border-left:4px solid #667eea;padding:15px;margin:20px 0;border-radius:5px;}.info-box strong{color:#764ba2;}@media (max-width:768px){.trombone-outer{width:300px;left:20px;}.trombone-inner{width:200px;left:120px;}.harmonic-visualizer{height:200px;padding:10px;}.harmonic-bar{width:30px;}.valves-container{gap:20px;}}
:root{--color-manuscript:#f8f6f0;--color-staff:#2c2416;--color-brass:#b8860b;--color-burgundy:#6d1f3a;--color-warm:#d4a574;--color-accent:#c77d4b;--color-sage:#8b9d7e;--color-shadow:rgba(44,36,22,0.08);--font-display:'Newsreader',serif;--font-body:'Crimson Pro',serif;--font-ui:'DM Sans',sans-serif;}.music-tutorial-container{max-width:1200px;margin:0 auto;padding:3rem 2rem;background:linear-gradient(135deg,var(--color-manuscript) 0%,#ffffff 100%);font-family:var(--font-body);color:var(--color-staff);line-height:1.7;}.tutorial-hero{text-align:center;padding:4rem 2rem;margin-bottom:4rem;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(184,134,11,0.05) 0%,transparent 100%);border-bottom:3px solid var(--color-brass);}.staff-decoration{position:absolute;top:0;left:0;right:0;height:100%;background-image:repeating-linear-gradient(0deg,transparent,transparent 18px,var(--color-brass) 18px,var(--color-brass) 19px,transparent 19px,transparent 28px);opacity:0.15;pointer-events:none;}.tutorial-title{font-family:var(--font-display);font-size:4rem;font-weight:600;margin:0 0 1rem 0;color:var(--color-burgundy);letter-spacing:-0.02em;position:relative;animation:fadeInDown 0.8s ease-out;}.tutorial-subtitle{font-family:var(--font-ui);font-size:1.25rem;color:var(--color-brass);font-weight:400;letter-spacing:0.03em;text-transform:uppercase;position:relative;animation:fadeInUp 0.8s ease-out 0.2s both;}@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}.tutorial-section{margin-bottom:5rem;animation:fadeIn 0.6s ease-out;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}.section-header{display:flex;align-items:baseline;gap:1.5rem;margin-bottom:2rem;border-bottom:2px solid var(--color-warm);padding-bottom:1rem;}.section-number{font-family:var(--font-ui);font-size:3rem;font-weight:700;color:var(--color-brass);opacity:0.3;line-height:1;}.section-header h2{font-family:var(--font-display);font-size:2.5rem;font-weight:600;margin:0;color:var(--color-burgundy);letter-spacing:-0.01em;}.section-content{font-size:1.125rem;color:var(--color-staff);}.section-content p{margin-bottom:1.5rem;}.lead-text{font-size:1.4rem;line-height:1.8;color:var(--color-burgundy);font-weight:400;}.concept-card{background:white;border-radius:12px;padding:3rem;margin:2rem 0;box-shadow:0 4px 6px var(--color-shadow),0 0 0 1px var(--color-warm);display:flex;align-items:center;gap:4rem;transition:transform 0.3s ease,box-shadow 0.3s ease;}.concept-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px var(--color-shadow),0 0 0 1px var(--color-brass);}.time-sig-display{display:flex;flex-direction:column;align-items:center;font-family:var(--font-display);min-width:120px;}.ts-numerator,.ts-denominator{font-size:5rem;font-weight:700;color:var(--color-burgundy);line-height:1;}.ts-line{width:100%;height:4px;background:var(--color-brass);margin:0.5rem 0;}.time-sig-display.small .ts-numerator,.time-sig-display.small .ts-denominator{font-size:3rem;}.concept-explanation{flex:1;display:flex;flex-direction:column;gap:2rem;}.explanation-item{display:flex;flex-direction:column;gap:0.5rem;}.emphasis-number{font-family:var(--font-ui);font-size:1.1rem;font-weight:700;color:var(--color-brass);text-transform:uppercase;letter-spacing:0.05em;}.explanation-item p{font-size:1.125rem;margin:0;color:var(--color-staff);}.info-callout{background:linear-gradient(135deg,var(--color-sage) 0%,#9fb08a 100%);color:white;padding:1.5rem 2rem;border-radius:8px;margin:2rem 0;display:flex;align-items:flex-start;gap:1rem;border-left:4px solid var(--color-brass);}.callout-icon{font-size:2rem;line-height:1;flex-shrink:0;}.info-callout p{margin:0;font-size:1.125rem;}.info-callout strong{font-weight:700;color:var(--color-manuscript);}.bar-demo{display:flex;align-items:stretch;margin:3rem 0;padding:2rem 0;background:white;border-radius:8px;overflow-x:auto;}.bar-line{width:3px;background:var(--color-staff);flex-shrink:0;}.bar-line.start{width:6px;background:var(--color-burgundy);}.bar-line.end{width:6px;background:var(--color-burgundy);}.bar-content{display:flex;flex-direction:column;align-items:center;padding:0 3rem;min-width:250px;}.bar-content .beat{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--color-brass);padding:1rem;margin:0.5rem;display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background:var(--color-manuscript);border:2px solid var(--color-warm);transition:all 0.3s ease;}.bar-content .beat:hover{background:var(--color-brass);color:white;transform:scale(1.1);}.bar-label{font-family:var(--font-ui);font-size:0.875rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-brass);margin-top:1rem;}.note-hierarchy{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin:3rem 0;}.note-card{background:white;border-radius:12px;padding:2rem;box-shadow:0 2px 8px var(--color-shadow);border:2px solid transparent;transition:all 0.3s ease;display:flex;flex-direction:column;align-items:center;text-align:center;}.note-card:hover{border-color:var(--color-brass);transform:translateY(-4px);box-shadow:0 8px 20px var(--color-shadow);}.note-visual{font-size:5rem;color:var(--color-burgundy);margin-bottom:1rem;line-height:1;}.note-info h3{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--color-burgundy);margin:0 0 0.25rem 0;}.note-alt-name{font-family:var(--font-ui);font-size:0.9rem;color:var(--color-brass);font-style:italic;margin:0 0 0.75rem 0;opacity:0.9;}.note-duration{font-family:var(--font-ui);font-size:1.25rem;font-weight:700;color:var(--color-brass);margin:0.5rem 0;}.note-desc{font-size:0.95rem;color:var(--color-staff);opacity:0.8;margin:0.5rem 0 1rem 0;}.play-btn{font-family:var(--font-ui);background:var(--color-brass);color:white;border:none;padding:0.75rem 2rem;border-radius:24px;font-size:0.95rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:0.05em;}.play-btn:hover{background:var(--color-burgundy);transform:scale(1.05);}.play-btn:active{transform:scale(0.98);}.play-btn.playing{background:var(--color-sage);animation:pulse 1s infinite;}@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.7;}}.signature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin:3rem 0;}.signature-card{background:white;border-radius:12px;padding:2rem;box-shadow:0 2px 8px var(--color-shadow);border-top:4px solid var(--color-brass);transition:all 0.3s ease;}.signature-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px var(--color-shadow);border-top-color:var(--color-burgundy);}.sig-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--color-warm);}.sig-name h3{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--color-burgundy);margin:0 0 0.25rem 0;}.sig-alt{font-family:var(--font-ui);font-size:0.85rem;color:var(--color-brass);font-style:italic;}.beat-pattern{display:flex;gap:0.5rem;margin:1.5rem 0;justify-content:center;}.beat-pattern .beat{font-family:var(--font-display);font-size:1.5rem;font-weight:700;padding:0.75rem;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-manuscript);border:2px solid var(--color-warm);color:var(--color-staff);}.beat-pattern .beat.strong{background:var(--color-burgundy);color:white;border-color:var(--color-burgundy);transform:scale(1.1);}.beat-pattern .beat.medium{background:var(--color-brass);color:white;border-color:var(--color-brass);}.beat-pattern .beat.tiny{font-size:1rem;opacity:0.6;}.signature-card .example{font-size:0.95rem;color:var(--color-staff);opacity:0.7;font-style:italic;margin-top:1rem;}.practice-tool{background:white;border-radius:12px;padding:3rem;margin:3rem 0;box-shadow:0 4px 12px var(--color-shadow);border:2px solid var(--color-warm);}.metronome-display{display:flex;flex-direction:column;gap:2rem;align-items:center;}.tempo-control{display:flex;align-items:center;gap:1rem;width:100%;max-width:500px;}.tempo-control label{font-family:var(--font-ui);font-weight:600;color:var(--color-staff);white-space:nowrap;}.tempo-control input[type="range"]{flex:1;height:8px;border-radius:4px;background:var(--color-manuscript);outline:none;-webkit-appearance:none;}.tempo-control input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--color-brass);cursor:pointer;transition:all 0.3s ease;}.tempo-control input[type="range"]::-webkit-slider-thumb:hover{background:var(--color-burgundy);transform:scale(1.2);}.tempo-control input[type="range"]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--color-brass);cursor:pointer;border:none;transition:all 0.3s ease;}.tempo-control input[type="range"]::-moz-range-thumb:hover{background:var(--color-burgundy);transform:scale(1.2);}#tempo-value{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--color-burgundy);min-width:60px;text-align:center;}.time-sig-selector{display:flex;flex-direction:column;align-items:center;gap:1rem;}.time-sig-selector label{font-family:var(--font-ui);font-weight:600;color:var(--color-staff);text-transform:uppercase;letter-spacing:0.05em;font-size:0.9rem;}.sig-buttons{display:flex;gap:1rem;}.sig-btn{font-family:var(--font-display);font-size:1.25rem;font-weight:700;padding:0.75rem 1.5rem;border:2px solid var(--color-warm);background:white;color:var(--color-staff);border-radius:8px;cursor:pointer;transition:all 0.3s ease;}.sig-btn:hover{border-color:var(--color-brass);background:var(--color-manuscript);}.sig-btn.active{background:var(--color-brass);color:white;border-color:var(--color-brass);}.beat-visualizer{display:flex;gap:1rem;padding:2rem;}.beat-indicator{font-family:var(--font-display);font-size:2rem;font-weight:700;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-manuscript);color:var(--color-staff);border:3px solid var(--color-warm);transition:all 0.2s ease;}.beat-indicator.active{background:var(--color-burgundy);color:white;border-color:var(--color-burgundy);transform:scale(1.15);box-shadow:0 0 20px rgba(109,31,58,0.4);}.beat-indicator.hidden{opacity:0.3;}.metronome-controls{display:flex;gap:1rem;}.control-btn{font-family:var(--font-ui);padding:1rem 3rem;border:2px solid var(--color-warm);background:white;color:var(--color-staff);border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:0.05em;}.control-btn:hover{background:var(--color-manuscript);border-color:var(--color-brass);}.control-btn.primary{background:var(--color-brass);color:white;border-color:var(--color-brass);}.control-btn.primary:hover{background:var(--color-burgundy);border-color:var(--color-burgundy);}.control-btn:active{transform:scale(0.98);}.takeaway-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin:3rem 0;}.takeaway-card{background:white;border-radius:12px;padding:2rem;text-align:center;box-shadow:0 2px 8px var(--color-shadow);border-top:3px solid var(--color-brass);transition:all 0.3s ease;}.takeaway-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px var(--color-shadow);border-top-color:var(--color-burgundy);}.takeaway-icon{font-size:3rem;display:block;margin-bottom:1rem;}.takeaway-card h3{font-family:var(--font-display);font-size:1.4rem;color:var(--color-burgundy);margin:0 0 1rem 0;}.takeaway-card p{font-size:1rem;color:var(--color-staff);margin:0;line-height:1.6;}.final-note{background:linear-gradient(135deg,var(--color-brass) 0%,var(--color-burgundy) 100%);color:white;padding:2rem;border-radius:12px;margin-top:3rem;text-align:center;}.final-note p{font-size:1.2rem;margin:0;line-height:1.8;}@media (max-width:768px){.music-tutorial-container{padding:2rem 1rem;}.tutorial-title{font-size:2.5rem;}.tutorial-subtitle{font-size:1rem;}.section-header h2{font-size:2rem;}.concept-card{flex-direction:column;gap:2rem;padding:2rem;}.note-hierarchy{grid-template-columns:1fr;}.signature-grid{grid-template-columns:1fr;}.bar-demo{flex-direction:column;gap:1rem;}.bar-line{width:100%;height:3px;}.sig-buttons{flex-wrap:wrap;justify-content:center;}.beat-visualizer{flex-wrap:wrap;justify-content:center;}.metronome-controls{flex-direction:column;width:100%;}.control-btn{width:100%;}}