@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 */
: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.staff-tutorial{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;}.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);}.info-callout.quality-note{background:linear-gradient(135deg,var(--color-brass) 0%,#d4a02f 100%);}.staff-display-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);}.staff-visual{position:relative;padding:2rem 0;}.staff-lines{position:relative;height:200px;width:100%;}.staff-line{position:absolute;left:0;right:0;height:2px;background:var(--color-staff);}.staff-line:nth-of-type(1){top:0;}.staff-line:nth-of-type(3){top:50px;}.staff-line:nth-of-type(5){top:100px;}.staff-line:nth-of-type(7){top:150px;}.staff-line:nth-of-type(9){top:200px;}.staff-space{position:absolute;left:0;right:0;height:50px;background:transparent;}.staff-space:nth-of-type(2){top:0;}.staff-space:nth-of-type(4){top:50px;}.staff-space:nth-of-type(6){top:100px;}.staff-space:nth-of-type(8){top:150px;}.staff-labels{position:absolute;top:0;bottom:0;right:2rem;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none;}.label-group{display:flex;align-items:center;gap:0.5rem;}.label-arrow{font-size:1.5rem;color:var(--color-brass);}.label-text{font-family:var(--font-ui);font-size:0.9rem;font-weight:600;color:var(--color-brass);text-transform:uppercase;letter-spacing:0.05em;}.label-group.lines{transform:translateY(-50px);}.label-group.spaces{transform:translateY(25px);}.staff-note{text-align:center;font-size:1rem;color:var(--color-staff);opacity:0.8;margin-top:2rem;}.concept-card.clef-intro{background:white;border-radius:12px;padding:3rem;margin:3rem 0;box-shadow:0 4px 6px var(--color-shadow),0 0 0 1px var(--color-warm);display:flex;align-items:center;gap:3rem;transition:transform 0.3s ease,box-shadow 0.3s ease;}.concept-card.clef-intro:hover{transform:translateY(-4px);box-shadow:0 12px 24px var(--color-shadow),0 0 0 1px var(--color-brass);}.clef-symbol{font-size:8rem;color:var(--color-burgundy);line-height:1;flex-shrink:0;}.concept-explanation h3{font-family:var(--font-display);font-size:2rem;color:var(--color-burgundy);margin:0 0 1rem 0;}.concept-explanation p{font-size:1.125rem;margin:0;}.clef-detail-card{background:white;border-radius:12px;padding:3rem;margin:3rem 0;box-shadow:0 4px 12px var(--color-shadow);border-top:4px solid var(--color-brass);}.clef-detail-card.treble{border-top-color:var(--color-brass);}.clef-detail-card.bass{border-top-color:var(--color-sage);}.clef-visual-large{margin-bottom:3rem;}.staff-with-clef{overflow-x:auto;padding:1rem 0;}.staff-svg{display:block;max-width:100%;height:auto;}.note-mnemonics{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem;}.mnemonic-group{background:var(--color-manuscript);padding:2rem;border-radius:8px;border:2px solid var(--color-warm);}.mnemonic-group h4{font-family:var(--font-ui);font-size:0.9rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-brass);margin:0 0 1rem 0;font-weight:700;}.note-sequence{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--color-burgundy);margin:1rem 0;letter-spacing:0.1em;}.mnemonic-phrase{font-size:1.1rem;color:var(--color-staff);font-style:italic;margin:1rem 0 0 0;}.mnemonic-phrase strong{color:var(--color-brass);font-weight:700;}.leger-demo-card{background:white;border-radius:12px;padding:3rem;margin:3rem 0;box-shadow:0 4px 12px var(--color-shadow);}.leger-svg{display:block;width:100%;height:auto;margin-bottom:2rem;}.leger-explanation{text-align:center;font-size:1.1rem;color:var(--color-staff);opacity:0.9;}.interval-basics{margin:3rem 0;}.interval-example-card{background:white;border-radius:12px;padding:3rem;box-shadow:0 4px 12px var(--color-shadow);border-left:4px solid var(--color-brass);}.interval-example-card h4{font-family:var(--font-display);font-size:1.8rem;color:var(--color-burgundy);margin:0 0 2rem 0;}.counting-demo{display:flex;flex-direction:column;align-items:center;gap:2rem;}.count-step{display:flex;align-items:center;gap:2rem;font-size:1.5rem;}.note-letter.large{font-family:var(--font-display);font-size:3rem;font-weight:700;color:var(--color-burgundy);background:var(--color-manuscript);width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid var(--color-brass);}.to-arrow{font-family:var(--font-ui);color:var(--color-brass);font-weight:600;text-transform:uppercase;letter-spacing:0.1em;}.count-sequence{display:flex;align-items:center;gap:1rem;}.count-item{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--color-staff);background:var(--color-manuscript);padding:0.75rem 1.5rem;border-radius:8px;border:2px solid var(--color-warm);}.count-item sub{color:var(--color-brass);font-size:0.8em;}.count-item.first,.count-item.last{border-color:var(--color-brass);background:linear-gradient(135deg,var(--color-brass) 0%,#d4a02f 100%);color:white;}.count-arrow{color:var(--color-brass);font-size:1.5rem;}.interval-result{font-family:var(--font-ui);font-size:1.3rem;color:var(--color-burgundy);margin:0;}.interval-result strong{font-size:2rem;font-weight:700;}.interval-types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin:3rem 0;}.interval-type-card{background:white;border-radius:12px;padding:2rem;box-shadow:0 2px 8px var(--color-shadow);border-top:3px solid var(--color-brass);transition:all 0.3s ease;display:flex;flex-direction:column;align-items:center;text-align:center;}.interval-type-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px var(--color-shadow);border-top-color:var(--color-burgundy);}.interval-header{display:flex;flex-direction:column;align-items:center;gap:0.5rem;margin-bottom:1.5rem;}.interval-number{font-family:var(--font-display);font-size:3rem;font-weight:700;color:var(--color-burgundy);line-height:1;}.interval-name{font-family:var(--font-ui);font-size:0.9rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-brass);font-weight:600;}.interval-visual-mini{width:100%;height:80px;margin:1rem 0;display:flex;align-items:center;justify-content:center;}.mini-staff{position:relative;width:60px;height:60px;background-image:repeating-linear-gradient(0deg,transparent,transparent 14px,var(--color-warm) 14px,var(--color-warm) 15px);}.mini-note{position:absolute;width:12px;height:12px;background:var(--color-burgundy);border-radius:50%;left:50%;transform:translateX(-50%);box-shadow:0 2px 4px rgba(0,0,0,0.2);}.interval-desc{font-size:0.95rem;color:var(--color-staff);opacity:0.8;margin:1rem 0;}.play-interval-btn{font-family:var(--font-ui);background:var(--color-brass);color:white;border:none;padding:0.75rem 1.5rem;border-radius:24px;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:0.05em;margin-top:auto;}.play-interval-btn:hover{background:var(--color-burgundy);transform:scale(1.05);}.play-interval-btn:active{transform:scale(0.98);}.play-interval-btn.playing{background:var(--color-sage);animation:pulse 1s infinite;}@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.7;}}.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);}.practice-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1.5rem;}.clef-selector{display:flex;align-items:center;gap:1rem;}.clef-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;}.clef-select-btn{font-family:var(--font-ui);padding:0.75rem 1.5rem;border:2px solid var(--color-warm);background:white;color:var(--color-staff);border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;}.clef-select-btn:hover{border-color:var(--color-brass);background:var(--color-manuscript);}.clef-select-btn.active{background:var(--color-brass);color:white;border-color:var(--color-brass);}.challenge-display{display:flex;flex-direction:column;align-items:center;gap:1rem;}.challenge-text{font-family:var(--font-display);font-size:1.5rem;color:var(--color-staff);margin:0;}.target-note-display{font-size:2.5rem;font-weight:700;color:var(--color-burgundy);background:var(--color-manuscript);padding:0.5rem 1.5rem;border-radius:8px;border:3px solid var(--color-brass);}.control-btn{font-family:var(--font-ui);padding:0.75rem 2rem;border:2px solid var(--color-warm);background:white;color:var(--color-staff);border-radius:8px;font-size:0.95rem;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.secondary{background:var(--color-brass);color:white;border-color:var(--color-brass);}.control-btn.secondary:hover{background:var(--color-burgundy);border-color:var(--color-burgundy);}.score-display{display:flex;align-items:center;gap:0.5rem;}.score-label{font-family:var(--font-ui);font-weight:600;color:var(--color-staff);text-transform:uppercase;letter-spacing:0.05em;font-size:0.9rem;}.score-value{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--color-burgundy);}.interactive-staff-container{margin-top:2rem;}.practice-staff-svg{display:block;background:var(--color-manuscript);border-radius:8px;border:2px solid var(--color-warm);cursor:crosshair;}.feedback-message{text-align:center;font-family:var(--font-ui);font-size:1.2rem;font-weight:600;padding:1rem;margin-top:1rem;border-radius:8px;min-height:3rem;}.feedback-message.correct{background:linear-gradient(135deg,var(--color-sage) 0%,#9fb08a 100%);color:white;}.feedback-message.incorrect{background:linear-gradient(135deg,var(--color-accent) 0%,#d89067 100%);color:white;}.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.staff-tutorial{padding:2rem 1rem;}.tutorial-title{font-size:2.5rem;}.tutorial-subtitle{font-size:1rem;}.section-header h2{font-size:2rem;}.concept-card.clef-intro{flex-direction:column;gap:2rem;padding:2rem;}.clef-symbol{font-size:5rem;}.note-mnemonics{grid-template-columns:1fr;}.interval-types-grid{grid-template-columns:1fr;}.practice-controls{flex-direction:column;align-items:stretch;}.clef-selector,.challenge-display,.score-display{width:100%;justify-content:center;}.staff-svg,.leger-svg{overflow-x:auto;}}