/* Music Fundamentals — shared stylesheet v3 (design pass per DESIGN-stripe.md) Visual language: indigo CTA (#533afd) used sparingly · ink-navy text (#0d253d, never black) · gradient-mesh hero band · pill buttons (8px 16px+) · 12px hairline cards with blue-tinted shadows · Inter 300 display with negative tracking · tnum for numerics · cream interlude band (Mia's Tips) · dark-navy featured card (next-lesson invite). All selectors identical to v2 — visual values only. FULL-FILE REWRITE only. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap'); :root{ --primary:#533afd; --primary-dark:#4434d4; --primary-press:#2e2b8c; --primary-soft:#665efd; --primary-subtle:#b9b9f9; --brand-dark:#1c1e54; --ink:#0d253d; --ink-2:#273951; --muted:#64748d; --accent:#E8A33D; --accent-dark:#cf8f2e; --correct:#2E8B57; --wrong:#ea2261; --bg:#f6f0e2; --card:#ffffff; --cream:#f1e2c4; --hairline:#e7ddc8; --hairline-input:#c9b98f; --text:var(--ink); --radius:12px; --shadow:0 1px 3px rgba(0,55,112,.08); --shadow-2:0 8px 24px rgba(0,55,112,.08), 0 2px 6px rgba(0,55,112,.04); } *{box-sizing:border-box;margin:0;padding:0} body{font-family:Inter,"SF Pro Display",-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55;font-weight:400; font-feature-settings:"ss01"} b,strong{font-weight:600} main,.container{max-width:860px;margin:0 auto;padding:16px 16px 120px} button{font:inherit;font-weight:600;cursor:pointer;border:none;border-radius:9999px; padding:10px 20px;background:linear-gradient(135deg,#533afd,#665efd);color:#fff;min-height:40px; transition:transform .12s,background .2s,box-shadow .2s} button:hover{background:linear-gradient(135deg,#4434d4,#533afd);box-shadow:0 4px 14px rgba(83,58,253,.35);transform:translateY(-1px)} button:active{transform:scale(.98);background:var(--primary-press)} button.ghost{background:var(--card);color:var(--primary);border:1px solid var(--hairline)} button.ghost:hover{background:var(--bg)} button.play{background:linear-gradient(135deg,#1c1e54,#2e2b8c)} button.play:hover{background:linear-gradient(135deg,#23265f,#3a37a8);box-shadow:0 4px 14px rgba(28,30,84,.4)} button:disabled{opacity:.45;cursor:default} a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline} /* header — gradient mesh band, ink type */ .lesson-header{color:#fff;padding:26px 16px 30px;position:relative;overflow:hidden; background:linear-gradient(135deg,#1c1e54 0%,#2e2b8c 62%,#4434d4 100%)} .lesson-header .inner{max-width:860px;margin:0 auto;position:relative;z-index:1} .crumb{font-size:13px;color:rgba(255,255,255,.85);margin-bottom:8px} .crumb a{color:#fff;text-decoration:none} .crumb a:hover{text-decoration:underline} .lesson-header h1{font-size:1.7rem;font-weight:800;letter-spacing:-.4px;line-height:1.2} .time-badge{display:inline-block;background:#ffd166;color:#1c1e54; border-radius:9999px;padding:4px 14px;font-size:12.5px;font-weight:700;margin-top:10px; font-feature-settings:"tnum";letter-spacing:.02em} /* cards & sections */ .card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius); box-shadow:var(--shadow);padding:26px;margin-top:20px} .card h2{color:var(--brand-dark);font-size:1.25rem;font-weight:800;letter-spacing:-.2px;margin-bottom:12px} .tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--primary-dark);background:rgba(185,185,249,.35); border-radius:9999px;padding:3px 10px;margin-bottom:8px} .objectives li{margin-left:22px;margin-bottom:5px} .mistakes li,.summary li{margin-left:22px;margin-bottom:6px} hr.sep{border:none;border-top:1px solid var(--hairline);margin:20px 0} /* Mia dialogue bubbles (in flow) */ .say{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px} .say .mini{flex:0 0 40px;width:40px;height:46px} .say .bub{background:var(--bg);border:1px solid var(--hairline);border-radius:4px 14px 14px 14px; padding:11px 15px;font-size:1.0rem} .say .bub b{color:var(--primary-dark);font-weight:600} /* floating Mia */ #mia{position:fixed;left:14px;bottom:14px;z-index:50;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none;transform:translateX(-130%);transition:transform .5s cubic-bezier(.34,1.4,.5,1)} #mia.in{transform:none} #miaBubble{pointer-events:auto;max-width:290px;background:#fff;border:1.5px solid var(--primary);border-radius:14px 14px 14px 4px;box-shadow:var(--shadow-2);padding:12px 30px 12px 14px;margin-bottom:6px;margin-left:44px;font-size:15px;position:relative} #miaBubble:after{content:"";position:absolute;left:-2px;bottom:-10px;border:10px solid transparent;border-top-color:var(--primary);border-left-color:var(--primary)} #miaClose{position:absolute;top:4px;right:8px;background:none;border:none;color:var(--muted);font-size:14px;padding:2px;min-height:0} #miaClose:hover{background:none;color:var(--ink)} #miaSvg{width:96px;height:112px;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 3px 6px rgba(0,55,112,.2))} .armR{transform-origin:78px 82px} .armL{transform-origin:42px 82px} .pose-wave .armR{animation:mia-wave .7s ease 3} @keyframes mia-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-55deg)}} .pose-point .armR{transform:rotate(-35deg)} .pose-celebrate .armR{transform:rotate(-120deg)} .pose-celebrate .armL{transform:rotate(120deg)} .pose-celebrate #miaSvg{animation:mia-bounce .5s ease 2} @keyframes mia-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .pose-think .armR{transform:rotate(28deg) translate(-6px,-14px)} .mouth-smile,.mouth-big,.mouth-o{display:none} .pose-neutral .mouth-smile,.pose-wave .mouth-smile,.pose-point .mouth-smile{display:block} .pose-celebrate .mouth-big{display:block} .pose-think .mouth-o{display:block} .confetti{position:fixed;z-index:49;font-size:22px;color:var(--primary-soft);pointer-events:none;animation:mia-fly 1.4s ease-out forwards} @keyframes mia-fly{from{opacity:1;transform:translate(0,0) rotate(0)}to{opacity:0;transform:translate(var(--dx),-140px) rotate(var(--rot))}} /* Ask-Mia icon & menu */ #miaIcon{position:fixed;left:14px;bottom:14px;z-index:48;width:58px;height:58px;border-radius:50%;background:#fff;border:2px solid var(--primary);box-shadow:var(--shadow-2);padding:0;min-height:0;display:flex;align-items:center;justify-content:center;transition:transform .15s} #miaIcon:hover{transform:scale(1.1);background:#fff} #miaIcon svg{width:46px;height:46px;pointer-events:none} #miaIcon.hidden{display:none} #miaIcon .pulse{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--primary-soft);opacity:0;animation:mia-pulse 3s ease-out infinite} @keyframes mia-pulse{0%{transform:scale(1);opacity:.7}60%{transform:scale(1.35);opacity:0}100%{opacity:0}} #miaMenu{position:fixed;left:14px;bottom:82px;z-index:48;background:#fff;border:1px solid var(--hairline);border-radius:14px 14px 14px 4px;box-shadow:var(--shadow-2);padding:8px;display:none;flex-direction:column;gap:6px;min-width:230px} #miaMenu.open{display:flex;animation:rise .25s ease} #miaMenu .mm-title{font-size:12.5px;color:var(--muted);padding:2px 6px} #miaMenu button{background:var(--bg);color:var(--ink);text-align:left;padding:10px 14px;font-size:15px;border-radius:10px;min-height:0} #miaMenu button:hover{background:#eef2f7} /* progressive steps */ .step{display:none} .step.open{display:block;animation:rise .4s ease} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .continue-row{text-align:center;margin-top:18px} .feedback{min-height:24px;font-weight:500;font-size:15px;margin-top:8px} .feedback.ok{color:var(--correct)} .feedback.no{color:var(--wrong)} /* staff & keyboard components */ .staffwrap{overflow-x:auto} .mf-staff .staffline{stroke:#33415c;stroke-width:1.5} .mf-staff .clickline{stroke:transparent;stroke-width:14;cursor:pointer} .mf-staff .clickspace{fill:transparent;cursor:pointer} .mf-staff .note{fill:var(--primary-dark)} .mf-staff .note.hollow{fill:transparent;stroke:var(--primary-dark);stroke-width:2.4} .mf-staff .note.hl{fill:var(--accent)} .mf-staff .note.hl.hollow{fill:transparent;stroke:var(--accent)} .mf-staff .stem,.mf-staff .ledger{stroke:var(--primary-dark);stroke-width:1.6} .mf-staff .note.clickable{cursor:pointer} .mf-staff text.clef{fill:#33415c;font-family:serif} .mf-staff .clef-path{fill:#33415c;stroke:none} .mf-staff .clefdot{fill:#33415c} .mf-staff .brace{fill:#33415c} .mf-staff text.lbl{fill:var(--muted);font-size:12px} .mf-staff text.fig{font-weight:800;font-size:11.5px} /* stacked figured-bass digits */ .mf-staff .accg .acc{stroke-width:2.4} /* accidentals read bolder than generic lines */ /* inline figured-bass symbols in prose (6 over 4, aligned) — added on opt-in lessons by template.js. vertical-align:middle keeps the stacked pair centered on the text line (not sinking below it). */ .fb{display:inline-flex;flex-direction:column;align-items:center;line-height:.9;font-weight:700;font-size:.82em;vertical-align:middle;margin:0 .12em;position:relative;top:-.06em} .fb>span{display:block} .fb .fbh{visibility:hidden} /* single figures (I6, V7): reserve the bottom line so the digit sits at the same size/height as a stacked figure's top digit */ .mf-kb{position:relative;height:150px;max-width:460px;margin:12px auto;user-select:none; border-radius:0 0 8px 8px;box-shadow:var(--shadow)} .mf-kb .w{position:absolute;top:0;box-sizing:border-box;background:#fff;border:2px solid #23263e;border-left:none;border-radius:0 0 6px 6px;cursor:pointer;transition:background .1s} .mf-kb .w:first-child{border-left:2px solid #23263e} .mf-kb .w.on{background:#cfc9fb} /* DD-30: sounding = purple */ .mf-kb .w.mark{background:#e3e1fd} /* black keys look BLACK (instructor 2026-07-06): near-black fill + bold dark border; a marked black key (scale member, e.g. F♯) turns PURPLE but keeps the black-key border — standing rule for every scale keyboard from now on */ .mf-kb .b{position:absolute;top:0;box-sizing:border-box;background:#101226;border:2px solid #000;border-top:none;border-radius:0 0 4px 4px;cursor:pointer;z-index:2;transition:background .1s} .mf-kb .b.on{background:#665efd} .mf-kb .b.mark{background:#7b6cf6} .mf-kb .klabel{position:absolute;bottom:6px;width:100%;text-align:center;font-size:12px;color:var(--muted);pointer-events:none} .kb-note{text-align:center;font-size:14px;color:var(--muted);min-height:22px} /* quiz */ .qnum{font-size:13px;color:var(--muted);margin-bottom:6px;font-feature-settings:"tnum";letter-spacing:-.2px} .big-q{font-size:1.15rem;font-weight:600;margin:10px 0} .choices{display:flex;flex-direction:column;gap:8px;margin-top:12px} .choices button{background:var(--card);color:var(--ink);text-align:left;border:1px solid var(--hairline);border-radius:10px;font-weight:400} .choices button:hover{background:var(--bg);border-color:var(--hairline-input)} .choices button.right{background:#e6f4ec;border-color:var(--correct);color:var(--correct);font-weight:600} .choices button.wrongpick{background:#fdecf2;border-color:var(--wrong);color:var(--wrong)} .explain{background:var(--bg);border-left:3px solid var(--primary);padding:11px 15px;border-radius:0 10px 10px 0;margin-top:12px;font-size:15px} .score-box{text-align:center;padding:12px 0} .score-big{font-size:2.3rem;font-weight:800;letter-spacing:-1px;color:var(--brand-dark);font-feature-settings:"tnum"} .score-box p{color:var(--ink-2)} .score-box p b{font-feature-settings:"tnum"} .code-chip{display:inline-block;background:var(--brand-dark);color:#cfd3ff;font-family:ui-monospace,monospace;font-size:1.05rem;padding:9px 20px;border-radius:9999px;margin-top:10px;letter-spacing:.08em;user-select:all;font-feature-settings:"tnum"} /* game-style chip buttons (letter/short answers) + flashcards */ .choices.chips{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px} .choices.chips button{flex:0 0 auto;min-width:54px;min-height:48px;padding:12px 16px;text-align:center; font-weight:600;font-size:1.15rem;background:var(--card);color:var(--primary); border:1.5px solid var(--primary-subtle);border-bottom-width:4px;border-radius:12px; box-shadow:var(--shadow)} .choices.chips button:hover{background:#f4f2ff;border-color:var(--primary)} .choices.chips button:active{transform:translateY(2px);border-bottom-width:2px} .choices.chips button.right{background:#e6f4ec;border-color:var(--correct);color:var(--correct)} .choices.chips button.wrongpick{background:#fdecf2;border-color:var(--wrong);color:var(--wrong)} .flashcard{background:var(--card);border:1px solid var(--hairline);border-top:4px solid var(--primary); border-radius:14px;padding:14px 18px 16px;max-width:330px;margin:14px auto;box-shadow:var(--shadow-2)} .flashcard .fc-title{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:2px} /* games */ .game-arena{text-align:center;padding:10px 0} .streak{font-size:14px;color:var(--muted);margin-top:8px;font-feature-settings:"tnum"} .game-timer{font-weight:600;color:var(--primary-dark);font-feature-settings:"tnum"} .gbtns button{margin:4px} /* vocabulary flip cards */ .vocab{display:flex;gap:12px;flex-wrap:wrap} .vcard{flex:1 1 140px;height:96px;perspective:600px;cursor:pointer} .vin{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d} .vcard.flip .vin{transform:rotateY(180deg)} .vface{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:10px;text-align:center} .vfront{background:linear-gradient(135deg,#1c1e54,#4434d4);color:#fff;font-weight:700;letter-spacing:-.2px} .vback{background:var(--bg);border:1px solid var(--hairline);font-size:14px} /* Mia's Tips — warm cream interlude band */ #secTips{background:var(--cream);border-color:#dcc794} #secTips .bub{background:rgba(255,255,255,.7);border-color:#e8d9bc} /* nav & next invite — dark featured card */ .next-invite{background:linear-gradient(135deg,var(--brand-dark),#2e2b8c);color:#fff;text-align:center;border:none} .next-invite h2{color:#fff} .next-invite a{color:#fff} .navrow{display:flex;justify-content:space-between;gap:10px;margin-top:20px} .navrow a{flex:1;text-align:center;background:var(--card);border:1px solid var(--hairline);border-radius:9999px;box-shadow:var(--shadow);padding:12px;color:var(--primary);text-decoration:none;font-weight:500} .navrow a:hover{background:var(--bg);text-decoration:none} .navrow a.disabled{opacity:.4;pointer-events:none} .nav-jump{flex:1;font:inherit;padding:12px;border-radius:9999px;border:1px solid var(--hairline);background:var(--card);color:var(--primary);font-weight:500;box-shadow:var(--shadow)} /* v3 lesson footer: Previous/Next pop a per-lesson button list (prev = up, next = down) */ .navpop-wrap{flex:1;position:relative;display:flex} .navbtn{flex:1;font:inherit;cursor:pointer;text-align:center;background:var(--card); border:1px solid var(--hairline);border-radius:9999px;box-shadow:var(--shadow); padding:12px;color:var(--primary);font-weight:500} .navbtn:hover{background:var(--bg)} .navbtn:disabled{opacity:.4;cursor:default} .nav-here{flex:1.1;text-align:center;font-weight:700;color:var(--brand-dark); background:var(--cream);border:1px solid #dcc794;border-radius:9999px;padding:12px; font-feature-settings:"tnum";white-space:nowrap} .navpop{position:absolute;z-index:60;display:none; min-width:280px;max-width:min(92vw,380px);max-height:320px;overflow:auto; background:var(--card);border:1px solid var(--hairline);border-radius:14px; box-shadow:0 14px 36px rgba(0,55,112,.20);padding:6px} .navpop.open{display:block} /* prev pops up, anchored to the row's left edge; next pops down, anchored right */ .navpop.up{bottom:calc(100% + 8px);left:0} .navpop.down{top:calc(100% + 8px);right:0} .navpop a{display:block;text-align:left;padding:8px 12px;border-radius:8px; color:var(--ink);text-decoration:none;font-size:13.5px;line-height:1.35} .navpop a:hover{background:var(--bg);text-decoration:none} .navpop a.disabled{opacity:.45;pointer-events:none} @media(max-width:600px){ .nav-here{font-size:13px;padding:12px 6px} .navpop{min-width:240px} } /* index & home — mesh hero */ .hero{color:#fff;text-align:left;padding:44px 16px;position:relative;overflow:hidden; display:flex;flex-direction:column;justify-content:center;min-height:36vh; background:linear-gradient(135deg,#1c1e54 0%,#2e2b8c 62%,#4434d4 100%)} .hero .inner{max-width:860px;margin:0 auto;width:100%;position:relative;z-index:1} .hero .eyebrow{font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.65);margin-bottom:10px} .hero h1{font-size:2rem;font-weight:800;letter-spacing:-.6px;margin-bottom:12px} .hero p{max-width:600px;margin:0 0 24px;color:rgba(255,255,255,.88)} .hero .btns{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap} .hero a{display:inline-block;background:#ffd166;color:#1c1e54;text-decoration:none;font-weight:800;padding:14px 30px;border-radius:9999px;box-shadow:0 6px 20px rgba(255,209,102,.35);transition:transform .12s,box-shadow .2s} .hero a:hover{background:#ffc247;text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,209,102,.45)} .hero a.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)} .how{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px} .how .card{text-align:center;margin-top:0} .how .card h2::after{margin-left:auto;margin-right:auto} .unit-group{margin-top:16px} .unit-head{background:var(--card);border:1px solid var(--hairline);border-radius:12px;box-shadow:var(--shadow);padding:13px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--brand-dark)} .unit-body{display:none;padding:6px 0 0} .unit-group.open .unit-body{display:block} .lesson-link{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--hairline);border-radius:10px;padding:11px 16px;margin-top:6px;text-decoration:none;color:var(--ink)} .lesson-link:hover{background:var(--bg);text-decoration:none} .lesson-link .done{color:var(--correct);font-weight:600} .lesson-link .lnum{color:var(--muted);font-size:13px;margin-right:8px;font-feature-settings:"tnum"} .searchbox{width:100%;font:inherit;padding:11px 16px;border:1px solid var(--hairline-input);border-radius:8px;margin-top:16px;background:var(--card);color:var(--ink)} .searchbox:focus{outline:none;border-color:var(--primary)} .progress-line{font-size:14px;color:var(--muted);margin-top:10px;font-feature-settings:"tnum"} .progress-track{background:#eae2ce;border-radius:9999px;height:8px;margin-top:6px;overflow:hidden} .progress-fill{background:var(--primary);height:100%;border-radius:9999px;transition:width .4s} /* validation warning */ .mf-warn{background:#fff3cd;border:1px solid #e0a800;border-radius:12px;padding:12px 16px;margin-top:16px;font-size:14px} /* ===== v2: design-doc lesson features ===== */ .lesson-progress{position:sticky;top:0;height:4px;background:#eae2ce;z-index:40} .lesson-progress-fill{height:100%;width:0;background:linear-gradient(90deg,#ffd166,#f96bee,#533afd);transition:width .5s} .bs-slots{max-width:420px;margin:10px auto;padding:4px 0} .bs-slot{height:0;border-top:2px dashed var(--primary-subtle);margin:26px 18px;position:relative} .bs-slot span{position:absolute;right:-8px;top:-9px;font-size:11px;color:var(--muted)} .bs-slot.filled{border-top:3px solid var(--primary-dark)} .bs-pile{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px} .bs-bar{background:var(--primary)} .shake{animation:mf-shake .4s} @keyframes mf-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}} .dragnote{display:inline-block;font-size:46px;line-height:1;cursor:grab;user-select:none;color:var(--primary-dark)} .dragnote.dragging{cursor:grabbing;opacity:.85} .stars{font-size:2.4rem;letter-spacing:.1em} .badge-card{display:inline-flex;align-items:center;gap:10px;background:var(--cream);border:1px solid #dcc794;border-radius:12px;padding:12px 22px;margin-top:10px;font-size:1.05rem} .badge-icon{font-size:1.8rem} .mistakes li.oops{list-style:none;margin-left:0;background:#fdecf2;border-left:3px solid var(--wrong);padding:9px 13px;border-radius:0 10px 10px 0;margin-bottom:8px} @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} } @media (max-width:600px){ .card{padding:18px} .lesson-header h1{font-size:1.35rem} .hero h1{font-size:1.7rem} .hero{padding:44px 16px 50px} button{min-height:44px} .choices.chips button{min-width:48px;min-height:44px;padding:10px 13px} #miaBubble{max-width:230px} #miaSvg{width:78px;height:92px} } /* ===== v3b: visual impact layer (instructor: "needs eye-catching impact") ===== */ .lesson-header::before{content:"\1D11E";position:absolute;right:-8px;top:-38px;font-family:serif; font-size:190px;line-height:1;color:rgba(255,255,255,.09);pointer-events:none} .lesson-header::after{content:"";position:absolute;inset:0;pointer-events:none;background: radial-gradient(40% 90% at 85% 10%,rgba(249,107,238,.25),transparent 65%), radial-gradient(35% 80% at 12% 100%,rgba(255,209,102,.16),transparent 60%)} .lesson-header h1::after{content:"";display:block;width:64px;height:5px;border-radius:3px; background:linear-gradient(90deg,#ffd166,#f96bee);margin-top:12px} .hero::after{content:"";position:absolute;inset:0;pointer-events:none;background: radial-gradient(45% 90% at 88% 8%,rgba(249,107,238,.28),transparent 65%), radial-gradient(40% 80% at 8% 95%,rgba(255,209,102,.18),transparent 60%)} /* gradient underline bar under the home title, matching the lesson header */ .hero h1::after{content:"";display:block;width:64px;height:5px;border-radius:3px; background:linear-gradient(90deg,#ffd166,#f96bee);margin:12px 0 0} .card h2::after{content:"";display:block;width:42px;height:4px;border-radius:2px; background:linear-gradient(90deg,#533afd,#ffd166);margin-top:7px} .next-invite{box-shadow:0 10px 30px rgba(28,30,84,.35)} .lesson-link{transition:transform .12s,box-shadow .15s} .lesson-link:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)} .choices.chips button:hover{transform:translateY(-1px)} .badge-card{box-shadow:0 6px 18px rgba(232,163,61,.25)} /* ===== v4 (Milestone 3): rhythm notation — rests, time signatures, bar lines ===== */ .mf-staff .rest{fill:var(--primary-dark)} .mf-staff .rest.hl{fill:var(--accent)} .mf-staff .rest.clickable{cursor:pointer} .mf-staff text.tsig{fill:#33415c;font-weight:800;font-family:Georgia,'Times New Roman',serif} .mf-staff .barline{stroke:#33415c;stroke-width:1.6} .mf-staff .barline.thick{stroke-width:5} .mf-staff .clickbar{fill:transparent;cursor:pointer} .mf-staff .clickbar:hover{fill:rgba(83,58,253,.08)} /* v4.3 (instructor, DD-22 cont.): compact answer buttons — wrap in rows (4 fit on one line when short), width follows content, centered text */ .choices{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px} .choices button{flex:0 1 auto;text-align:center;min-width:96px;max-width:100%} .mf-staff .clef-stroke{fill:none;stroke:#33415c;stroke-width:2.6;stroke-linecap:round} /* DD-25: vocabulary cards — front = description, flip to term + drawn symbol */ .vcard{height:118px} .vback{flex-direction:column;gap:2px} .vback b{font-size:14.5px} .vback .vstaff{width:100%} .vback svg.mf-staff{height:56px;width:auto;margin:0 auto} .vfront{font-size:13px;line-height:1.35;font-weight:600} /* v5 (Units 3-6): new notation elements */ .mf-staff .acc{stroke:var(--primary-dark);stroke-width:1.8;fill:none;stroke-linecap:round} .mf-staff .artic{fill:var(--primary-dark)} .mf-staff .arc{fill:none;stroke:var(--primary-dark);stroke-width:2} .mf-staff .beam{stroke:var(--primary-dark);stroke-width:5;stroke-linecap:butt} /* v7.9b: butt caps meet the stems cleanly */ .mf-staff .rest-line{fill:none;stroke:var(--primary-dark);stroke-width:2;stroke-linecap:round} .mf-staff text.dyn{fill:#33415c;font-weight:800;font-style:italic;font-size:15px;font-family:Georgia,serif} .mf-staff text.mark-txt{fill:#33415c;font-weight:800;font-style:italic;font-size:13px} .mf-staff text.mark-txt.seg{font-family:Georgia,serif} /* DD-27: notation-card option buttons inside games/activities */ .gbtns button svg.mf-staff,.choices button svg.mf-staff{height:46px;width:auto;margin:0 auto;display:block} /* DD-27: notation-card buttons — WHITE card so the staff drawing is visible */ button.notecard{background:#fff !important;background-image:none !important;color:var(--ink,#0d253d) !important; border:1.5px solid #c9d4e3 !important;box-shadow:0 2px 6px rgba(13,37,61,.08) !important} button.notecard:hover{border-color:var(--primary) !important;background:#f8f9ff !important} button.notecard div{color:inherit} /* center the drawn symbol inside notation cards */ button.notecard svg.mf-staff{height:46px;width:auto;max-width:100%;display:block;margin:0 auto} /* Vocabulary cards v3 (instructor 2026-07-05): FRONT = term + drawn symbol (light card), BACK = definition (navy). Equal card sizes — no full-width stretching on the last row. */ .vocab .vcard{flex:0 0 172px} .vface.vfront{background:var(--card,#fff);color:var(--ink,#0d253d);border:1px solid #c9d4e3; flex-direction:column;gap:2px;font-weight:800;font-size:14.5px;line-height:1.25} .vface.vback{background:linear-gradient(135deg,#1c1e54,#4434d4);color:#fff;border:none; font-size:13px;line-height:1.35;font-weight:600} .vfront .vstaff{width:100%} .vfront svg.mf-staff{height:56px;width:auto;margin:0 auto;display:block} /* roadmap letter-measures (instructor's L21 design) */ .mf-staff text.mtxt{fill:var(--primary-dark);font-weight:800;font-size:22px} .mf-staff text.mtxt.hl{fill:var(--accent)} /* FIX: the back face must be pre-rotated so it shows when the card flips (without this, flipping hid BOTH faces and the card vanished) */ .vface.vback{transform:rotateY(180deg)} .vface{-webkit-backface-visibility:hidden} /* Belt-and-suspenders: even if 3D backface support fails, always show the correct face */ .vface{transition:opacity .2s .15s} .vcard:not(.flip) .vface.vback{opacity:0} .vcard.flip .vface.vfront{opacity:0} /* ===== Vocabulary cards v4 — REBUILT from scratch (instructor 2026-07-06). No 3D, no backface, no absolute stacking: one card, two faces, class toggle. FRONT: term + drawn symbol on white. TAP -> BACK: definition on navy. ===== */ .vox{display:flex;gap:12px;flex-wrap:wrap} .vox-card{flex:0 0 172px;min-height:126px;border-radius:12px;cursor:pointer;user-select:none; display:flex;align-items:flex-start;justify-content:center;padding:12px;text-align:center; background:#ffd166;border:1px solid #eab63e;box-shadow:0 3px 10px rgba(232,163,61,.3); transition:transform .15s,box-shadow .15s,background .25s} .vox-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)} .vox-front{display:flex;flex-direction:column;gap:4px;align-items:center;width:100%; font-weight:800;font-size:14.5px;line-height:1.25;color:var(--ink,#0d253d)} .vox-front b{min-height:40px;display:flex;align-items:center;justify-content:center;width:100%} .vox-sym{width:100%;height:60px;display:flex;align-items:center;justify-content:center} .vox-card.back{align-items:center} .vox-sym svg.mf-staff{height:56px;width:auto;max-width:100%;margin:0 auto;display:block} .vox-back{display:none;font-size:13px;line-height:1.45;font-weight:600;color:#fff} .vox-card.back{background:linear-gradient(135deg,#1c1e54,#4434d4);border-color:transparent} .vox-card.back .vox-front{display:none} .vox-card.back .vox-back{display:block} /* vocab card BACK realization staff: white (readable on the dark flipped card) + fills the card, shorter and wider so the notes read clearly */ .vox-card.back .vox-back{padding:6px} .vox-symb{width:100%;display:flex;align-items:center;justify-content:center} .vox-symb svg.mf-staff{height:54px;width:auto;max-width:100%;margin:0 auto;display:block} .vox-symb svg.mf-staff .staffline{stroke:rgba(255,255,255,.7)} .vox-symb svg.mf-staff .note{fill:#fff} .vox-symb svg.mf-staff .stem,.vox-symb svg.mf-staff .ledger{stroke:#fff} .vox-symb svg.mf-staff .beam{fill:#fff;stroke:#fff} .vox-symb svg.mf-staff text.clef,.vox-symb svg.mf-staff .clef-path,.vox-symb svg.mf-staff .clefdot{fill:#fff} .vox-symb svg.mf-staff .clef-stroke{stroke:#fff} .vox-symb svg.mf-staff .arc{stroke:#fff} @media (max-width:600px){ .vox-card{flex:1 1 45%} } /* v7 — key signatures (Book 2, L29-30) */ .mf-staff .ksgroup.clickable{cursor:pointer} .mf-staff .ksgroup.clickable:hover .acc{stroke:var(--accent)} .mf-staff .ksgroup.hl .acc{stroke:var(--accent)} /* v3.4 — auto-enlarged double sharp/flat glyphs (template.js walker) */ .dbx{font-size:1.55em;line-height:1;vertical-align:-0.08em;font-weight:700} .dbf{font-size:1.05em;line-height:1;font-weight:800} /* double flat: lowercase-b height, gently bold */ /* DD-30 — red guide arrow: "press THIS key"; purple stays = "this key is sounding" */ .mf-kb .kpoint{position:absolute;top:-2px;left:0;width:100%;text-align:center;font-size:19px;line-height:1; color:#e11d48;text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none;z-index:4;animation:kpt .9s ease-in-out infinite} .mf-kb .b .kpoint{color:#ff5a76;top:2px} @keyframes kpt{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} /* -- cinematic hero v6: recreated from the instructor's reference image -- big diagonal keys enter from the right (black keys toward the upper-left end, ambient-shadowed, dissolving leftward via mask), deep navy-indigo gradient, faint tilted staff + notes across the middle, glow + vignette. Layout untouched; header background only. -- */ .time-badge{display:none} .lesson-header{padding:26px 16px 40px; /* Theory Lab identity: SKY (matches the front door) */ background:linear-gradient(135deg,#0c1f3c 0%,#1a4a80 55%,#2f86d6 100%)} .hero{padding:44px 16px;background:linear-gradient(135deg,#12143c 0%,#22246e 55%,#3a2fae 100%)} .lesson-header::before,.hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:url("data:image/svg+xml;utf8,") right center/cover no-repeat}