.feature-art .art-train{background-image:url("/img/music-train.webp")}.feature-art .art-dynamics{background-image:url("/img/mouse-elephant.webp")}.feature-art .art-horse{background-image:url("/img/horse-moods.webp")}.login>.login-panel.login-box{display:flex;flex-direction:column;align-items:stretch;justify-content:center;width:100%;max-width:none;padding:clamp(34px,7vw,120px)}.login>.login-panel.login-box h1{font-family:Georgia,serif;font-size:clamp(42px,5vw,66px);line-height:1.02;letter-spacing:-.05em;margin:38px 0 12px}.login>.login-panel.login-box>.btn{align-self:flex-start;min-width:150px}.langs{display:flex;gap:3px;background:#eeeae1;border-radius:11px;padding:3px}.langs button{border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:850;padding:7px 8px;border-radius:8px}.langs button.on{background:white;color:var(--ink);box-shadow:0 2px 8px rgba(23,50,77,.08)}.test-access{display:grid;gap:7px;margin-top:22px;padding:14px;background:#fff3d7;border-radius:15px;color:#705722;font-size:13px}.hero.compact{min-height:400px}.dashboard-cols{display:grid;grid-template-columns:1.12fr .88fr;gap:28px}.student-list,.schedule-list{display:grid;gap:12px}.student-card.wide{display:block;width:100%;border:1px solid var(--line);background:white;border-radius:20px;padding:18px;text-align:left;color:var(--ink);box-shadow:0 6px 20px rgba(23,50,77,.05)}.student-card.wide:hover{border-color:var(--mint);transform:translateY(-2px)}.student-card .pill{margin-left:auto}.schedule-item{display:grid;grid-template-columns:115px 1fr;gap:3px 14px;text-align:left;background:white;border:1px solid var(--line);border-radius:17px;padding:15px;color:var(--ink)}.schedule-item:hover{border-color:var(--coral)}.schedule-item time{grid-row:1/3;color:var(--coral);font-weight:850}.schedule-item span{color:var(--muted);font-size:13px}.stage-select{display:flex;align-items:center;gap:9px;font-weight:800}.stage-select select{border:1px solid var(--line);border-radius:12px;padding:9px;background:white}.view-body{margin-top:20px}.lesson-progress-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.progress-lesson{background:white;border:1px solid var(--line);border-radius:19px;padding:17px}.progress-lesson.current{border:2px solid var(--sun)}.progress-lesson.done{background:#f4faf7}.progress-lesson.locked{opacity:.58}.progress-lesson>b{display:block;min-height:42px;margin:8px 0}.progress-lesson label{font-size:12px;color:var(--muted)}.progress-lesson input[type=range]{width:62%;accent-color:var(--coral)}.segmented{display:flex;gap:3px;margin-top:11px;overflow:auto}.segmented button{border:0;background:#f0eee8;color:var(--muted);border-radius:7px;padding:6px 7px;font-size:10px;white-space:nowrap}.segmented button.on{background:var(--ink);color:white}.lesson-facts,.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:18px 0}.lesson-facts>div,.detail-grid>div{background:#f5f2eb;border-radius:14px;padding:13px;display:grid;gap:5px}.lesson-facts small,.detail-grid small{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:10px}.full{width:100%}.mission p{margin:4px 0;color:var(--muted);font-size:13px}.section-head.row{margin-top:0}.lead{font-size:18px;color:var(--muted)}.tile-arrow{position:absolute;right:14px;bottom:12px;color:var(--coral);font-weight:900}.lesson-tile{position:relative}.feature-art{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:26px}.feature-art article{height:230px;background-size:cover;background-position:center;border-radius:22px;display:flex;align-items:flex-end;padding:17px;overflow:hidden;box-shadow:var(--shadow)}.feature-art b{background:rgba(255,253,250,.9);padding:8px 12px;border-radius:11px}.flash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.flashcard{border:1px solid var(--line);background:white;border-radius:22px;padding:0 0 18px;overflow:hidden;text-align:left;color:var(--ink);min-height:270px;transition:.25s}.flashcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.flashcard.flipped{background:var(--ink);color:white}.flashcard>.eyebrow,.flashcard>b,.flashcard>small{display:block;margin:10px 16px}.flashcard>b{font-size:15px;line-height:1.35}.flashcard>small{color:var(--muted)}.card-visual{height:130px;background:#f5e8d2;display:grid;place-items:center;font-size:45px;font-family:Georgia,serif}.flashcard:nth-child(3n+2) .card-visual{background:#dceee8}.flashcard:nth-child(3n) .card-visual{background:#f9ddd5}.tiny-keys{display:flex;height:78px}.tiny-keys .mini-key{width:27px;background:white;border:1px solid #bbb;position:relative}.tiny-keys .mini-key.has-black:after{content:"";position:absolute;z-index:1;right:-9px;top:0;width:17px;height:48px;background:var(--ink);border-radius:0 0 4px 4px}.note-badge{font-size:38px;font-weight:900}.vocab-table{display:grid;gap:8px}.vocab-row{display:grid;grid-template-columns:1fr 1fr 1fr 36px;gap:15px;align-items:center;border:1px solid var(--line);background:white;border-radius:15px;padding:14px;text-align:left;color:var(--ink)}.vocab-row:hover{border-color:var(--sky);background:#f7fbfc}.vocab-row i{font-style:normal}.search{margin:0;min-width:240px}.student-welcome{display:grid;grid-template-columns:1fr 220px;gap:20px;background:linear-gradient(125deg,#f7e9d8,#e9f5f0);border-radius:30px;padding:38px 44px;align-items:center}.student-welcome h1{font-family:Georgia,serif;font-size:44px;letter-spacing:-.04em;margin:10px 0}.lesson-orbit{width:180px;height:180px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--coral) 0 35%,white 35%);box-shadow:inset 0 0 0 18px rgba(255,255,255,.65)}.lesson-orbit strong{font:700 40px Georgia}.student-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}.next-card{display:grid;gap:8px;margin-top:26px}.next-card>b{font-size:20px}.side-illustration{width:100%;height:190px;object-fit:cover;border-radius:22px;margin-top:14px}.learn-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.keyboard-lab{min-height:380px}.big-keyboard{display:grid;place-items:center;padding:35px 5px}.keys{display:flex;height:190px;position:relative}.p-key{width:64px;background:white;border:1px solid #c9c5bd;border-radius:0 0 9px 9px;padding-top:140px;position:relative;font-weight:850;color:var(--ink)}.p-key i{position:absolute;width:38px;height:112px;background:var(--ink);right:-19px;top:0;z-index:2;border-radius:0 0 7px 7px}.p-key.pressed{background:#ffe3a6}.p-key.pressed i{background:var(--coral)}.note-display{text-align:center;font:700 42px Georgia;color:var(--coral)}.lesson-guide{overflow:hidden}.lesson-guide img{width:calc(100% + 44px);height:190px;object-fit:cover;margin:-22px -22px 22px}.lesson-guide small{color:var(--muted);text-transform:uppercase;font-weight:800}.path-strip{display:flex;gap:8px;overflow:auto;padding:5px 0 15px}.path-dot{min-width:65px;border:1px solid var(--line);background:white;border-radius:15px;padding:12px 8px;display:grid;gap:4px;color:var(--ink)}.path-dot.done{background:#dceee8}.path-dot.current{background:#fff0c7;border-color:var(--sun)}.path-dot.locked{opacity:.4}.path-dot span{font-size:10px;color:var(--muted)}.mini-keyboard{overflow:auto}.game-card>span{font-size:42px}.game-card h2{margin-bottom:3px}.celebrate{font-size:70px}.mobile-nav{display:none}
@media(max-width:1000px){.dashboard-cols,.student-grid,.learn-layout{grid-template-columns:1fr}.flash-grid{grid-template-columns:repeat(3,1fr)}.lesson-progress-grid{grid-template-columns:1fr 1fr}.feature-art article{height:180px}.student-welcome{grid-template-columns:1fr 180px}}
@media(max-width:700px){body{padding-bottom:68px}.topbar nav{display:none}.top-actions .langs{display:none}.mobile-nav{display:flex;position:fixed;z-index:30;bottom:0;left:0;right:0;height:66px;background:rgba(255,253,250,.96);backdrop-filter:blur(16px);border-top:1px solid var(--line);justify-content:space-around}.mobile-nav button{border:0;background:transparent;color:var(--muted);display:grid;place-items:center;gap:2px}.mobile-nav button.active{color:var(--coral)}.mobile-nav small{font-size:10px}.feature-art{grid-template-columns:1fr}.feature-art article{height:220px}.flash-grid{grid-template-columns:1fr 1fr}.lesson-progress-grid{grid-template-columns:1fr}.student-welcome{grid-template-columns:1fr;padding:26px}.lesson-orbit{width:140px;height:140px}.student-welcome h1{font-size:35px}.vocab-row{grid-template-columns:1fr}.vocab-row i{display:none}.lesson-facts,.detail-grid{grid-template-columns:1fr}.keys{transform:scale(.72);transform-origin:center}.page-head .search{width:100%}.schedule-item{grid-template-columns:95px 1fr}}

/* True two-sided learning cards */
.flashcard{perspective:1100px;background:transparent!important;border:0!important;border-radius:22px;padding:0!important;overflow:visible!important;min-height:290px;cursor:pointer}
.flashcard-inner{position:relative;width:100%;height:290px;transition:transform .58s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.flashcard.flipped{background:transparent;color:inherit}
.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}
.flash-face{position:absolute;inset:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 7px 22px rgba(23,50,77,.07);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flash-front>.eyebrow,.flash-front>b,.flash-front>small{display:block;margin:10px 16px}
.flash-front>b{font-size:15px;line-height:1.35}
.flash-front>small{color:var(--muted)}
.flash-back{transform:rotateY(180deg);background:linear-gradient(145deg,#17324d,#264c68);color:#fff;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}
.flash-back .eyebrow{color:#ffd77d}.flash-back b{font:700 23px/1.2 Georgia,serif}.flash-back small{color:#dce8ef;line-height:1.45}.back-symbol{min-height:80px;display:grid;place-items:center;font-size:45px}.back-symbol .card-visual{height:auto;background:transparent!important}.back-symbol .tiny-keys{height:66px}.back-symbol .tiny-keys .mini-key{width:23px}.back-symbol .tiny-keys .mini-key.has-black:after{height:40px;width:15px;right:-8px}
.flashcard:focus-visible{outline:3px solid var(--sun);outline-offset:4px}.flashcard .mini-key{cursor:pointer}.flashcard .mini-key:active,.flashcard .mini-key.pressed{background:#ffe3a6}
@media(max-width:700px){.flashcard,.flashcard-inner{min-height:275px;height:275px}}

/* Illustrated card-category controls */
.feature-art .art-filter{height:230px;background-size:cover;background-position:center;border:0;border-radius:22px;display:flex;align-items:flex-end;justify-content:space-between;padding:17px;overflow:hidden;box-shadow:var(--shadow);font:inherit;color:var(--ink);cursor:pointer;transition:transform .22s,outline-color .22s}
.feature-art .art-filter:hover,.feature-art .art-filter.active{transform:translateY(-4px);outline:4px solid var(--sun);outline-offset:2px}
.feature-art .art-filter>span{background:var(--coral);color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900}
.card-filter.active{background:var(--ink);color:#fff}
@media(max-width:1000px){.feature-art .art-filter{height:180px}}
@media(max-width:700px){.feature-art .art-filter{height:220px}}

/* Keyboards: separate black keys with their own semitones */
.keys{position:relative}
.b-key{position:absolute;top:0;width:38px;height:112px;z-index:2;border:0;padding:0;background:var(--ink);border-radius:0 0 7px 7px;cursor:pointer}
.b-key.pressed{background:var(--coral)}
.tiny-keys{position:relative}
.tiny-keys .mini-key.black{position:absolute;top:0;width:17px;height:48px;z-index:2;background:var(--ink);border:0;border-radius:0 0 4px 4px}
.tiny-keys .mini-key.pressed{background:#ffe3a6}
.tiny-keys .mini-key.black.pressed{background:var(--coral)}

/* Games */
.round-dots{display:flex;gap:6px;justify-content:center;margin:8px 0}
.round-dots i{width:10px;height:10px;border-radius:50%;background:#e4e0d8}
.round-dots i.on{background:var(--mint)}
.game-tools{gap:8px;flex-wrap:wrap;justify-content:center}
.hinted{outline:4px solid var(--sun);outline-offset:2px;animation:hintPulse 1s ease-in-out infinite}
@keyframes hintPulse{50%{outline-color:transparent}}
.p-key.mark-a,.p-key.mark-b{box-shadow:inset 0 -46px 0 #dceee8}
.p-key.mark-a.mark-b{box-shadow:inset 0 -46px 0 #ffe3a6}

/* Lesson now */
.block-item{border-bottom:1px solid var(--line);padding-bottom:10px}
.block-item .check-item{border-bottom:0;padding-bottom:6px}
.block-tip{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.phrases,.tired-panel{display:flex;flex-wrap:wrap;gap:6px;padding-left:34px}
.tired-panel{padding:10px 0 4px}
.tired-panel>small{width:100%;color:var(--muted)}
.phrase-chip{border:1px solid var(--line);background:#f7f4ee;border-radius:999px;padding:6px 11px;font-size:13px;color:var(--ink);text-align:left}
.phrase-chip small{color:var(--muted)}
.phrase-chip:hover{border-color:var(--sky)}
.check-item small{display:block;color:var(--muted);font-size:12px;font-weight:400}

/* Teacher: signals, game history, clickable lessons */
.hw-signal.hwAll{color:#3d836e}
.hw-signal.hwPartial{color:#9a6a08}
.hw-signal.hwNone{color:#bd664f}
.last-activity{display:block;margin-top:6px;font-size:12px}
.game-row{display:grid;grid-template-columns:1.2fr 1fr auto auto;gap:14px;align-items:center}
.game-row>div:first-child{display:grid;gap:3px}
.lesson-open{display:block;width:100%;border:0;background:transparent;padding:0;text-align:left;color:inherit;cursor:pointer}
.lesson-open:hover b{color:var(--coral)}
.path-dot{cursor:pointer}
.mission-actions{display:flex;gap:6px;margin-left:auto}
@media(max-width:700px){.game-row{grid-template-columns:1fr auto}.phrases{padding-left:0}}

/* Games v2: rules, levels, animations */
.game-grid .game-card{position:relative}
.game-icon{display:inline-block;font-size:48px;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-4deg)}}
.level-badges{display:flex;gap:6px;justify-content:center;margin-top:10px}
.level-badge{background:#f5f2eb;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:850}
.level-badge em{font-style:normal}
.level-badge i,.stars i{font-style:normal;color:#d9d3c7}
.level-badge i.on,.stars i.on{color:#f0b429}
.level-badge.locked{opacity:.55}
.modal-card.game-card-wide{max-width:760px;width:min(760px,calc(100vw - 24px))}
.game-intro{display:grid;justify-items:center;gap:14px;text-align:center;padding:6px 0 10px}
.intro-icon{font-size:64px;animation:bob 2.2s ease-in-out infinite}
.rules{text-align:left;display:grid;gap:9px;margin:0;padding-left:22px;max-width:520px;font-size:17px}
.rules li{opacity:0;animation:slideIn .45s ease forwards}
@keyframes slideIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.level-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.level-btn{display:grid;gap:4px;border:2px solid var(--line);background:white;border-radius:18px;padding:13px 10px;color:var(--ink);text-align:center;transition:transform .15s,border-color .15s}
.level-btn small{color:var(--muted);font-size:12px;min-height:30px}
.level-btn.on{border-color:var(--coral);transform:translateY(-3px);box-shadow:0 10px 24px rgba(23,50,77,.1)}
.level-btn:disabled{opacity:.5;cursor:not-allowed}
.prompt-bubble{font:700 30px Georgia,serif;background:#fff3d7;border-radius:22px;padding:12px 26px;animation:popIn .4s cubic-bezier(.2,1.6,.4,1)}
.prompt-bubble b{color:var(--coral);font-size:40px}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.game-stage h2{animation:popIn .35s ease}
.timer{width:min(420px,90%);height:8px;background:#eee9df;border-radius:9px;overflow:hidden}
.timer i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--sun),var(--coral));transform-origin:left;animation:timerRun linear forwards}
@keyframes timerRun{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.sound-orb{cursor:pointer;transition:transform .15s}
.sound-orb.playing{animation:orbPulse .8s ease}
@keyframes orbPulse{0%{box-shadow:0 0 0 0 rgba(240,120,90,.55);transform:scale(1)}40%{transform:scale(1.12)}100%{box-shadow:0 0 0 34px rgba(240,120,90,0);transform:scale(1)}}
.orb-pair{display:flex;gap:40px}
.small-orb{width:96px;height:96px;font-size:34px}
.big-choice{font-size:19px;line-height:1.5}
.choice{transition:transform .15s,border-color .15s,background .15s}
.choice:active{transform:scale(.96)}
.choice.correct{border-color:var(--mint);background:#e4f4ee;animation:popIn .35s ease}
.shake{animation:shake .4s ease}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.feedback.pop{animation:popIn .3s ease}
.burst{position:fixed;z-index:200;pointer-events:none;font-size:26px;color:var(--coral);animation:burst 1s ease-out forwards}
.burst:nth-child(3n){color:#f0b429}.burst:nth-child(3n+1){color:var(--mint)}
@keyframes burst{from{transform:translate(-50%,-50%) scale(.6);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.3) rotate(25deg);opacity:0}}
.round-dots i{transition:background .3s,transform .3s}
.round-dots i.on{animation:popIn .3s ease}
.round-dots i.now{background:var(--sun);transform:scale(1.35)}
.streak{text-align:center;font-weight:900;color:var(--coral);animation:popIn .3s ease}
.p-key,.b-key{transition:background .12s,transform .12s}
.p-key.pressed,.b-key.pressed{transform:translateY(3px)}
.finish-stage{gap:14px}
.big-stars{display:flex;gap:10px;font-size:64px}
.big-stars i{font-style:normal;color:#e4ded2;transform:scale(0);animation:starIn .5s cubic-bezier(.2,1.6,.4,1) forwards}
.big-stars i.on{color:#f0b429}
@keyframes starIn{to{transform:scale(1)}}
.score{font-size:18px;font-weight:800;color:var(--muted)}
.unlock{background:#e4f4ee;color:#2f7662;border-radius:14px;padding:10px 18px;font-weight:900;animation:popIn .5s .8s both}
@media(max-width:700px){.level-pick{grid-template-columns:1fr}.orb-pair{gap:20px}.prompt-bubble{font-size:24px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}
.tired-panel[hidden]{display:none}
.skill small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.skill b{display:block}
.cat-badge{display:inline-block;margin-top:7px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;background:#eef0f2;color:#52616d}
.cat-keyboard{background:#e3eefb;color:#2c5d8f}
.cat-ear{background:#f3e6fa;color:#7a3f98}
.cat-rhythm{background:#fff0d4;color:#946a13}
.cat-technique{background:#ffe7e0;color:#ab4e3d}
.cat-music{background:#e1f3ec;color:#2f7662}
.cat-reading{background:#ececf8;color:#4b4f93}

/* Staff notation */
.staff{width:100%;height:auto;display:block}
.staff .sl{stroke:var(--ink);stroke-width:1.2}
.staff .clef{font-family:"Segoe UI Symbol","Noto Music","Apple Symbols","Noto Sans Symbols 2",serif;font-size:62px;fill:var(--ink)}
.staff .note ellipse{fill:var(--ink)}
.staff .note .stem{stroke:var(--ink);stroke-width:1.5}
.staff .note .acc{font-size:17px;font-weight:700;fill:var(--ink)}
.staff .note.hi ellipse,.staff .note.hi .acc{fill:var(--coral)}
.staff .note.hi .stem{stroke:var(--coral)}
.staff .note.done ellipse{fill:#3d836e}
.staff .note.done .stem{stroke:#3d836e}
.staff .note.pulse{animation:notePulse .6s ease;transform-box:fill-box;transform-origin:center}
@keyframes notePulse{50%{transform:scale(1.35)}}
.staff .nlabel{font-size:11px;font-weight:800;fill:var(--muted)}
.staff-big{width:min(260px,70%)}
.staff-song{width:100%;max-width:620px;background:#fffdf8;border-radius:16px;padding:4px 8px}
.staff-live{max-width:210px;margin:6px auto 0}
.staff-lesson{max-width:420px;margin:14px auto}
.card-visual .staff{max-width:150px}
.flash-back .staff .sl,.flash-back .staff .note .stem{stroke:#fff}
.flash-back .staff .note ellipse,.flash-back .staff .clef,.flash-back .staff .note .acc{fill:#fff}
.p-key.next{background:#dceee8;box-shadow:inset 0 -6px 0 var(--mint)}
.lesson-games{gap:8px;flex-wrap:wrap;margin:6px 0 4px}

/* Finger Flash */
.prompt-tr{margin:-12px 0 0;color:var(--muted);font-weight:700}
.hands{display:flex;gap:34px;justify-content:center;flex-wrap:wrap}
.hand{display:grid;justify-items:center;gap:4px}
.fingers{display:flex;align-items:flex-end;gap:5px}
.finger{width:38px;border:2px solid #e7c7a8;background:#ffe2c6;border-radius:19px 19px 9px 9px;font-weight:900;color:#8a5a33;font-size:16px;padding-top:8px;align-self:flex-end;transition:transform .15s,background .15s}
.finger:hover{background:#ffd3ab;transform:translateY(-4px)}
.finger.f1{height:58px;margin-bottom:-18px}
.finger.f2{height:92px}.finger.f3{height:104px}.finger.f4{height:94px}.finger.f5{height:72px}
.hand.right .finger.f1{transform:rotate(-24deg)}.hand.left .finger.f1{transform:rotate(24deg)}
.finger.correct{background:#bfe6d6;border-color:var(--mint)}
.palm{width:218px;height:72px;background:#ffe2c6;border:2px solid #e7c7a8;border-radius:12px 12px 38px 38px;display:grid;place-items:center;color:#8a5a33;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.08em}

/* Rhythm snake */
.snake{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}
.snake-head{font-size:40px}
.seg{height:46px;display:grid;place-items:center;border-radius:23px;background:#dceee8;color:#2f7662;font-weight:900;font-size:13px;transition:background .15s,transform .15s}
.seg.d1{width:64px}.seg.d05{width:36px}.seg.d2{width:124px}
.seg.lit{background:var(--sun);color:var(--ink);transform:scale(1.12)}
.seg.tapped{background:var(--coral);color:white}
.tap-pad{width:150px;height:150px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#ffd7a3,#e78b5b);font-size:54px;display:grid;place-items:center;box-shadow:0 14px 34px rgba(170,80,40,.3);touch-action:manipulation;user-select:none}
.tap-pad small{font-size:12px;font-weight:800;color:white}
.tap-pad.hit{animation:hit .18s ease}
@keyframes hit{50%{transform:scale(.9)}}

/* Music train */
.train{display:flex;align-items:flex-end;gap:6px;min-height:70px;flex-wrap:wrap;justify-content:center}
.train .loco{font-size:52px;line-height:1}
.slot{width:64px;height:48px;border:2px dashed #cfc8ba;border-radius:10px;display:grid;place-items:center;font-weight:900;cursor:pointer;position:relative}
.slot.filled{border-style:solid;color:white}
.slot.filled:after{content:"";position:absolute;bottom:-9px;left:10px;width:12px;height:12px;border-radius:50%;background:#555;box-shadow:30px 0 0 #555}
.slot.ping{transform:translateY(-6px)}
.train.go{animation:trainGo 1.8s ease-in forwards}
@keyframes trainGo{15%{transform:translateX(10px)}100%{transform:translateX(-120vw)}}   /* the engine (🚂 faces left) leads: the train leaves to the left */
.wagons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.wagon{width:72px;height:56px;border:0;border-radius:12px;color:white;font-weight:900;font-size:16px;box-shadow:0 6px 0 rgba(0,0,0,.15);transition:transform .15s,opacity .2s}
.wagon:active{transform:translateY(3px)}
.wagon.used{opacity:.2;pointer-events:none}
.c0{background:#e2574c}.c1{background:#f08a3c}.c2{background:#e9b51f}.c3{background:#4fae76}.c4{background:#3f8ed8}.c5{background:#6c63c9}.c6{background:#b25ab5}

/* Dynamics, horse, hide-and-seek, song picker */
.dyn-meter{font-size:46px;transition:transform .3s ease;height:90px;display:grid;place-items:center}
.horse{font-size:84px;transition:filter .4s}
.horse.sing{animation:bob 1s ease-in-out 2}
.horse.gallop{animation:gallop .45s ease-in-out 4}
.horse.sad{filter:grayscale(.8);transform:rotate(-8deg) translateY(8px)}
@keyframes gallop{50%{transform:translate(18px,-18px) rotate(-8deg)}}
.hide-orb{background:radial-gradient(circle at 35% 30%,#c9f0e1,#3d9f82)}
.song-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.song-btn b{font-size:14px}
@media(max-width:700px){.hands{gap:16px}.finger{width:30px}.palm{width:176px}.song-pick{grid-template-columns:1fr}.tap-pad{width:120px;height:120px}}

/* Avatars */
.av{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;overflow:hidden;font-size:24px;font-weight:900;color:var(--ink);flex:none;background:#f5e8d2}
.av img{width:100%;height:100%;object-fit:cover}
.av.sm{width:36px;height:36px;font-size:19px}.av.md{width:48px;height:48px;font-size:26px}.av.lg{width:72px;height:72px;font-size:40px}.av.xl{width:132px;height:132px;font-size:74px;box-shadow:var(--shadow)}
.bg0{background:#f5e8d2}.bg1{background:#dceee8}.bg2{background:#f9ddd5}.bg3{background:#e3eefb}.bg4{background:#f3e6fa}.bg5{background:#fff0c7}
.avatar-btn{border:0;background:transparent;padding:0;border-radius:50%;cursor:pointer}
.avatar-btn:hover .av{outline:3px solid var(--sun)}
.profile-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.profile-preview{display:grid;place-items:center;margin:4px 0 16px}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;margin:10px 0 14px}
.av-choice{border:2px solid transparent;background:white;border-radius:50%;padding:3px;cursor:pointer;transition:transform .15s}
.av-choice .av{width:48px;height:48px;font-size:28px}
.av-choice:hover{transform:scale(1.08)}
.av-choice.on{border-color:var(--coral)}
.photo-row{gap:8px;flex-wrap:wrap;margin-bottom:12px}
.photo-row label.btn{cursor:pointer}
.profile-layout hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.with-av{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.head-actions{gap:10px;flex-wrap:wrap;align-items:center}
.welcome-av{display:inline-flex;align-items:center;gap:10px}
.last-note{display:block;margin-top:4px;font-size:12px}

/* Repertoire */
.rep-fields{display:grid;grid-template-columns:2fr 1.3fr .8fr 1.2fr;gap:10px}
.rep-ideas{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.rep-ideas small{width:100%;color:var(--muted);font-weight:800}
.rep-list{margin-top:14px}
.rep-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center}
.rep-meta{display:flex;gap:8px;align-items:center}
.stars-inline{color:#f0b429;font-size:13px}
.src-trad{background:#fff0d4;color:#946a13}.src-classic{background:#ececf8;color:#4b4f93}.src-film{background:#f3e6fa;color:#7a3f98}.src-student{background:#e1f3ec;color:#2f7662}.src-app{background:#ffe7e0;color:#ab4e3d}
.rep-mini{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rep-mini small{display:block}

/* Stickers */
.stickers{margin-top:14px}
.sticker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0}
.sticker{display:grid;justify-items:center;gap:3px;text-align:center;padding:8px 4px;border-radius:14px;background:#f5f2eb;filter:grayscale(1);opacity:.45;border:0;cursor:pointer;font:inherit;width:100%;transition:transform .15s}
.sticker:hover{transform:scale(1.08)}
.sticker span{font-size:28px}
.sticker small{font-size:10px;line-height:1.2}
.sticker.got{filter:none;opacity:1;background:#fff3d7;animation:popIn .4s ease}

/* Lesson extras */
.before-lesson{background:#f5f2eb;border-radius:14px;padding:10px 14px;margin:6px 0 10px}
.before-lesson summary{cursor:pointer;font-weight:800}
.qtags{display:flex;flex-wrap:wrap;gap:6px}
.qtag.on{background:var(--ink);color:white;border-color:var(--ink)}

/* Parent space */
.parent-child{margin-bottom:18px}
.parent-head{gap:14px;align-items:center;margin-bottom:10px}
.parent-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.done-line{color:#3d836e;font-weight:700;font-size:14px;margin:4px 0}

/* Rhythm words */
.seg{padding:0 12px;gap:0;height:58px;display:flex;flex-direction:column;justify-content:center}
.seg i{font-style:normal;font-size:20px;line-height:1}
.seg b{font-size:14px}
.seg em{font-style:normal;border-radius:6px;padding:0 2px;transition:background .1s}
.seg em.on{background:var(--ink);color:white}
.seg.w2{min-width:84px}.seg.w4{min-width:132px}

@media(max-width:1000px){.profile-layout,.parent-grid{grid-template-columns:1fr}.rep-fields{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.sticker-grid{grid-template-columns:repeat(4,1fr)}.rep-row{grid-template-columns:1fr}.rep-fields{grid-template-columns:1fr}}
.snake.animal .snake-head{font-size:56px;margin-right:6px}
.snake.animal .snake-head.pop{animation:popIn .45s cubic-bezier(.2,1.6,.4,1)}
.snake.animal .seg{min-width:58px;padding:0 10px;font-size:18px;font-weight:900}
.snake.animal .seg.long{min-width:112px;letter-spacing:.12em;background:#cfe7df}

/* Keyboards scale as a whole: white and black keys stay aligned on any screen */
.keys{display:flex;position:relative;width:448px;max-width:100%;height:190px;transform:none!important;margin:0 auto}
.keys .p-key{flex:1 1 0;width:auto;min-width:0;padding:0 0 12px;display:flex;align-items:flex-end;justify-content:center}
.keys .b-key{width:8.5%;height:59%}
.tiny-keys{width:189px;max-width:100%}
.tiny-keys .mini-key{flex:1 1 0;width:auto;min-width:0}
.tiny-keys .mini-key.black{width:9%;height:62%}
@media(max-width:700px){.keys{height:165px}.keys .p-key{font-size:12px}.big-keyboard{padding:18px 0}}

.mel-fs{position:fixed;inset:0;z-index:200;background:var(--cream,#fbf7ef);display:flex;flex-direction:column;padding:10px 14px}
.mel-fs-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none}
.mel-fs-preview{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mel-fs-hint{margin-left:auto;font-size:12px}
.mel-fs-keys{flex:1;display:flex;align-items:flex-end;min-height:0;padding:8px 0}
.mel-fs-keys .keys{width:100%;max-width:100%;height:100%}
@media(max-width:620px){.mel-fs-hint{display:none}.mel-fs-top{gap:8px}}

/* Phone: tabs become a dropdown */
.tabs-select{display:none;width:100%;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:white;font-weight:800;font-size:16px;color:var(--ink)}
@media(max-width:700px){.tabs{display:none}.tabs-select{display:block}.head-actions{width:100%}.head-actions .btn{flex:1}}

/* Lesson live progress, homework meta, tip */
.lesson-live-progress{display:grid;gap:5px;margin:4px 0 12px}
.lesson-live-progress small{color:var(--muted);font-weight:700}
.hw-meta{display:block;color:#946a13;font-weight:800;font-size:12px;margin-top:2px}
.tip-card{display:grid;gap:10px;margin-bottom:14px;background:linear-gradient(135deg,#fff3d7,#e9f5f0)}
.tip-card>small{font-weight:900;color:var(--coral);text-transform:uppercase;letter-spacing:.06em}
.tip-card b{font-size:18px}

/* Plan */
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.plan-grid>div{background:#f5f2eb;border-radius:14px;padding:12px;display:grid;gap:4px}
.plan-grid>div.wide{grid-column:1/-1}
.plan-grid small{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:800}
.plan-warn{background:#fff0d4;border-radius:12px;padding:10px 14px;font-weight:700}

/* Activity */
.activity{margin-top:14px}
.act-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:110px;align-items:end;margin:14px 0 6px}
.act-day{display:grid;grid-template-rows:1fr auto;height:100%;align-items:end;justify-items:center;gap:4px}
.act-day i{display:block;width:70%;background:linear-gradient(180deg,var(--coral),#f3b27e);border-radius:8px 8px 3px 3px;min-height:2px}
.act-day small{font-size:11px;color:var(--muted);font-weight:800}
.act-sections{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.act-counts{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:10px 0}
.act-counts>div{background:#f5f2eb;border-radius:12px;padding:10px;display:grid;gap:2px}
.act-counts small{color:var(--muted);font-size:11px}
.act-game{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:6px 0}
.act-game small{color:var(--muted)}

/* Recorder & recordings */
.studio{margin-top:26px}
.studio-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;align-items:start}
.recorder h3 small{font-weight:600}
.rec-note{background:#fff0d4;border-radius:10px;padding:8px 12px;font-size:13px}
.rec-controls{gap:14px;align-items:center}
.rec-time{font:700 22px Georgia,serif;color:var(--muted)}
#recBtn.live{background:#c0392b;animation:recPulse 1.2s ease-in-out infinite}
@keyframes recPulse{50%{box-shadow:0 0 0 10px rgba(192,57,43,.15)}}
#recPreview audio,.rec-row audio{width:100%;margin-top:10px}
.rec-actions{gap:8px;margin-top:8px}
.rec-comment{gap:8px;margin-top:8px}
.rec-comment input{flex:1;border:1px solid var(--line);border-radius:10px;padding:8px}
.rec-teacher{background:#e9f5f0;border-radius:10px;padding:8px 12px;margin:8px 0 0}
.helper-card{margin-top:22px}
.helper-card .staff-song{margin-top:10px;min-height:20px}

/* Mic button in games */
.mic-btn.on{background:var(--ink);color:white}
.mic-live{display:inline-flex;align-items:center;gap:6px;font-weight:900}
.mic-live i{display:block;width:60px;height:8px;border-radius:5px;background:linear-gradient(90deg,var(--mint) calc(var(--lvl,0)*100%),#e4e0d8 0)}
@media(max-width:1000px){.studio-grid{grid-template-columns:1fr}}
@media(max-width:700px){.plan-grid{grid-template-columns:1fr}.act-bars{height:90px}}
/* Let keyboards shrink inside cards, grids and the game window */
.learn-layout>*,.student-grid>*,.dashboard-cols>*,.lesson-layout>*,.studio-grid>*{min-width:0}
.big-keyboard{display:block;width:100%;padding:24px 0}
.game-stage .big-keyboard,.game-stage .staff-song{width:100%}
.mini-keyboard{overflow:visible}
@media(max-width:700px){.game-stage h2{font-size:26px}.prompt-bubble{padding:10px 16px}.head-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.head-actions .stage-select{grid-column:1/-1}.modal{padding:8px}.modal-card{padding:18px}}

/* Game window: header and controls always visible, the middle scrolls */
.modal-card.game-card-wide{padding-bottom:0}
.game-head{position:sticky;top:-26px;z-index:5;background:var(--paper);margin:-26px -26px 0;padding:18px 26px 8px}
.game-dock{position:sticky;bottom:0;z-index:5;width:calc(100% + 52px);margin:0 -26px;padding:10px 16px 14px;background:var(--paper);box-shadow:0 -10px 24px rgba(23,50,77,.1);border-radius:18px 18px 0 0;display:grid;gap:6px;justify-items:center}
.game-dock .feedback{min-height:24px;font-size:17px}
.game-dock .game-tools{margin:0}
.game-intro #startBtn{position:sticky;bottom:12px;z-index:5;box-shadow:0 10px 26px rgba(231,110,80,.35)}
.game-stage{padding-bottom:4px}
@media(max-width:700px){.game-head{top:-18px;margin:-18px -18px 0;padding:14px 18px 6px}.game-dock{width:calc(100% + 36px);margin:0 -18px;padding:8px 10px 12px}.game-dock .btn.small{padding:8px 10px;font-size:12px}}
@media(max-height:820px){.game-stage{min-height:0;gap:14px}.game-stage h2{font-size:26px}.staff-big{width:min(210px,60%)}.keys{height:150px}.sound-orb{width:104px;height:104px}.tap-pad{width:120px;height:120px}.choice{min-height:70px}}
@media(max-height:640px){.keys{height:125px}.staff-big{width:min(170px,50%)}.game-stage h2{font-size:21px}}
.mic-live[hidden]{display:none}

/* Library */
.lib-filters{display:flex;gap:10px;margin:6px 0 16px;flex-wrap:wrap}
.lib-filters input,.lib-filters select{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:white;font-size:15px}
.lib-filters input{flex:1;min-width:180px}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.lib-card{display:grid;gap:6px;text-align:left;background:white;border:1px solid var(--line);border-radius:20px;padding:18px;color:var(--ink);transition:transform .15s,border-color .15s}
.lib-card:hover{transform:translateY(-3px);border-color:var(--coral)}
.lib-card b{font:700 19px Georgia,serif}
.lib-card small{color:var(--muted)}
.lib-icons{font-size:22px;letter-spacing:4px}
.lib-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.piece-notes{background:#f5f2eb;border-radius:12px;padding:10px 14px;margin-top:10px}
.sheet-open{margin:4px 0 16px}
.score-card{margin-bottom:16px}
.score-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;position:sticky;top:0;z-index:4;background:var(--paper,#fffdfa);padding:8px 0}
.score-bar select{border:1px solid var(--line);border-radius:10px;padding:7px;background:white}
.score-bar .on,.track-tools .on,.midi-btn.on{background:var(--ink);color:white}
.follow-line{min-height:26px;font-weight:800;margin:6px 0}
.follow-line b{display:inline-block;background:#fff3d7;border-radius:8px;padding:2px 8px;margin:0 2px}
.follow-line b.ok{background:#dceee8;color:#2f7662}
.osmd-box{background:white;border-radius:14px;overflow-x:auto;min-height:120px}
.tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:16px}
.track audio{width:100%;margin:8px 0}
.track-tools{gap:6px;flex-wrap:wrap;align-items:center}
.loop-label{color:var(--coral);font-weight:800}
.file-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:6px 0;gap:10px}
.upload-row,.assign-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.upload-row select,.assign-row select{border:1px solid var(--line);border-radius:10px;padding:9px;background:white}
.upload-row input[type=file]{flex:1;min-width:200px}

/* Sheet viewer ("on the music stand") */
.sheet-viewer{position:fixed;inset:0;z-index:80;background:#2b2b2b;display:flex;flex-direction:column}
.sv-bar{display:flex;gap:6px;align-items:center;justify-content:center;padding:8px;background:#1d1d1d;color:white;flex-wrap:wrap}
.sv-bar button{border:0;border-radius:10px;background:#3a3a3a;color:white;min-width:44px;height:40px;font-size:18px}
.sv-bar span{min-width:70px;text-align:center;font-weight:800}
.sv-page{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:8px;touch-action:pan-y pinch-zoom}
.sv-page canvas,.sv-page img{background:white;box-shadow:0 6px 30px rgba(0,0,0,.4);max-width:none}

/* Metronome */
.metro{margin:16px 0}
.metro-body{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.pendulum{width:90px;height:90px;position:relative}
.pendulum i{position:absolute;left:43px;bottom:6px;width:4px;height:78px;background:var(--ink);border-radius:3px;transform-origin:bottom center;transform:rotate(-24deg);transition:transform var(--swing,.75s) ease-in-out}
.pendulum i:after{content:"";position:absolute;top:-6px;left:-8px;width:20px;height:20px;border-radius:50%;background:var(--coral)}
.pendulum.right i{transform:rotate(24deg)}
.metro-ctrl{display:grid;gap:8px;flex:1;min-width:200px}
.metro-ctrl input[type=range]{width:100%;accent-color:var(--coral)}
.metro-dots{display:flex;gap:8px}
.metro-dots i{width:16px;height:16px;border-radius:50%;background:#e4e0d8}
.metro-dots i.on{background:var(--coral);transform:scale(1.2)}
.metro-dots i:first-child.on{background:var(--ink)}

/* Report */
.report h1{font-size:28px;margin:6px 0 14px}
.report-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 16px}
.report-kpis div{background:#f5f2eb;border-radius:14px;padding:12px;display:grid;gap:2px;text-align:center}
.report-kpis b{font:700 28px Georgia,serif}
.report-kpis small{color:var(--muted);font-size:11px}
@media print{body *{visibility:hidden!important}.report,.report *{visibility:visible!important}.report{position:absolute;inset:0;padding:20px}.no-print,.report audio{display:none!important}.modal{background:none}}

/* Parent intake, install card */
.parent-intake{margin:12px 0;background:#fffaf0}
.parent-intake.done{background:#f4faf7}
.intake-invite{font-weight:700}
.install-card{grid-column:1/-1}
@media(max-width:700px){.report-kpis{grid-template-columns:1fr 1fr}.score-bar .btn.small{padding:7px 9px;font-size:12px}.tracks{grid-template-columns:1fr}}
.attribution{font-size:13px;color:var(--muted);margin-top:8px}
.attribution a{color:var(--coral);font-weight:800}
.score-card:fullscreen{overflow:auto;background:#fffdfa;padding:16px;border-radius:0}
.score-card:fullscreen .osmd-box{min-height:80vh}

/* Hands-free page turning */
.nod-ctrl{display:inline-flex;gap:4px;align-items:center}
.nod-sens{border:1px solid var(--line);border-radius:10px;padding:6px;background:white;font-size:12px}
.sv-bar .nod-sens{background:#3a3a3a;color:white;border-color:#555;height:40px}
.sv-bar .nod-btn{padding:0 10px;font-size:14px}
.nod-btn.on,.sv-bar .nod-btn.on{background:var(--mint);color:white}
.nod-cam{position:fixed;right:14px;bottom:14px;z-index:90;width:132px;border-radius:14px;overflow:hidden;border:3px solid #9aa3a8;background:#000;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.nod-cam video{display:block;width:100%;transform:scaleX(-1)}
.nod-cam.face{border-color:var(--mint)}
.nod-cam.flash{animation:nodFlash .6s ease}
@keyframes nodFlash{0%{border-color:var(--sun);box-shadow:0 0 0 8px rgba(240,180,41,.6)}100%{box-shadow:0 8px 24px rgba(0,0,0,.35)}}
.nod-state{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:white;font-size:10px;font-weight:800;text-align:center;padding:2px}

/* Library: upload, tabs, OMR status */
.dropzone{display:grid;place-items:center;border:2px dashed #cfc8ba;border-radius:18px;padding:22px;margin:6px 0 14px;color:var(--muted);font-weight:800;cursor:pointer;background:#fffdf8;text-align:center;transition:background .15s,border-color .15s}
.dropzone:hover,.dropzone.over{border-color:var(--coral);background:#fff3ea;color:var(--ink)}
.lib-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.lib-tabs small{opacity:.6}
.omr-banner{border-radius:14px;padding:12px 16px;margin:0 0 14px;font-weight:700}
.omr-banner.busy{background:#fff3d7}
.omr-banner.busy:before{content:"";display:inline-block;width:12px;height:12px;border:2px solid var(--coral);border-right-color:transparent;border-radius:50%;margin-right:8px;animation:spin 1s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}
.omr-banner.done{background:#e1f3ec;color:#2f7662}
.omr-banner.err{background:#ffe7e0;color:#ab4e3d}
.omr-busy{animation:bob 1.2s ease-in-out infinite;display:inline-block}
.file-row .btn.small{margin-left:auto}

/* Keyboard under the score */
.score-keys{position:sticky;bottom:0;z-index:4;background:#1d2b38;border-radius:12px;padding:8px;margin-top:10px;overflow-x:auto}
.sk-wrap{position:relative;height:96px}
.sk{position:absolute;top:0;border:0;padding:0;cursor:pointer}
.sk.w{height:100%;background:#fff;border:1px solid #9aa3a8;border-radius:0 0 6px 6px;display:flex;align-items:flex-end;justify-content:center}
.sk.w small{font-size:9px;color:#8a949a;margin-bottom:3px}
.sk.b{height:60%;background:#17324d;border-radius:0 0 4px 4px;z-index:2}
.sk.on.rh.w{background:#f7b08f}.sk.on.rh.b{background:#e2573c}
.sk.on.lh.w{background:#9fd0f0}.sk.on.lh.b{background:#2a7ab8}
.sk.hit.w{background:#9ee0c2}.sk.hit.b{background:#2f9e74}
.sk.tap{filter:brightness(.85)}
.score-card:fullscreen .score-keys{position:sticky;bottom:0}

/* Music stand, transport dock, add buttons */
.score-dock{position:sticky;bottom:0;z-index:6;margin-top:10px;background:#1d2b38;border-radius:14px;padding:8px;box-shadow:0 -8px 24px rgba(23,50,77,.18)}
.score-dock .score-keys{position:static;margin:6px 0 0;padding:0;background:none;box-shadow:none}
.dock-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dock-bar button,.dock-bar select{border:0;border-radius:10px;background:#2e4254;color:#fff;height:40px;padding:0 12px;font-weight:800;font-size:14px}
.dock-bar .dk-main{background:var(--coral);min-width:56px;font-size:18px}
.dock-bar #dkMute.on{background:#2f7662}
.dk-pos{color:#cfe0ea;font-weight:800;font-size:13px;margin-left:4px}
.dk-space{flex:1}
.score-card.stand{position:fixed;inset:0;z-index:75;margin:0;border-radius:0;overflow:auto;padding:10px 14px 0;background:#fffdfa}
.score-card.stand .score-bar{top:0}
.score-card .score-bar{top:64px}
body.stand-open{overflow:hidden}
body.stand-open .mobile-nav{display:none}
.sv-bar .sv-switch{background:var(--coral);padding:0 12px;font-size:14px}
.piece-actions{display:flex;gap:8px;flex-wrap:wrap;align-self:flex-start}
.fab-add{position:fixed;right:18px;bottom:22px;z-index:40;display:flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--coral);color:#fff;font-size:26px;font-weight:900;height:58px;padding:0 20px 0 18px;box-shadow:0 12px 28px rgba(231,110,80,.45)}
.fab-add span{font-size:15px}
body.stand-open .fab-add{display:none}
@media(max-width:700px){.fab-add{bottom:78px;right:12px;height:52px}.fab-add span{display:none}.dock-bar button,.dock-bar select{height:38px;padding:0 9px;font-size:12px}.dk-pos{display:none}}

.link-err{background:#ffe7e0;color:#ab4e3d;border-radius:12px;padding:10px 14px;font-weight:700}

/* Games by level */
.games-banner{border-radius:26px;padding:28px 32px;margin-bottom:18px;min-height:150px;display:flex;align-items:center;background:var(--games-art,none) right center/cover no-repeat,linear-gradient(120deg,#fff3dc,#e6f4ef)}
.games-banner h1{margin:6px 0}
body.theme-tots{--games-art:url(/themes/tots/games.webp)}
body.theme-kids{--games-art:url(/themes/kids/games.webp)}
body.theme-teens{--games-art:url(/themes/teens/games.webp)}
body.theme-adult{--games-art:url(/themes/adult/games.webp)}
.for-you{background:rgba(255,255,255,.55);border-radius:22px;padding:6px 16px 16px;margin-bottom:16px}
.game-tabs{margin:6px 0 14px}
.key-staff{width:min(300px,80%)}
.staff .clef.bass{font-size:40px}
.game-keys{position:static;margin:0;width:100%}
.game-keys .sk-wrap{height:110px}
.scale-name{color:var(--coral)}

.tagline{margin:18px 0 -18px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);font-size:14px}
/* Head-tilt page turning: progress ring, arrow, calibration prompt */
.nod-cam .nod-ring{position:absolute;inset:6px;border-radius:12px;pointer-events:none;background:conic-gradient(var(--sun) var(--prog,0%),transparent 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:5px;z-index:2}
.nod-cam .nod-arrow{position:absolute;top:6px;left:0;right:0;text-align:center;font-size:28px;font-weight:900;color:var(--sun);text-shadow:0 2px 8px rgba(0,0,0,.6);z-index:3}
.nod-cam .nod-calib{position:absolute;left:0;right:0;top:0;bottom:18px;display:grid;place-items:center;text-align:center;padding:6px;background:rgba(23,50,77,.78);color:#fff;font-size:11px;font-weight:800;z-index:4}
.nod-cam .nod-calib[hidden]{display:none}
.nod-cam{width:150px}
.sv-bar .nod-calib-btn{padding:0 10px}

/* Compact camera indicator in the tool bar (never over the notes) */
.nod-cam.mini{position:relative;width:40px;height:40px;min-width:40px;border-radius:50%;border:2px solid #9aa3a8;background:#2e4254;padding:0;display:inline-grid;place-items:center;overflow:visible;box-shadow:none;right:auto;bottom:auto}
.nod-cam.mini.face{border-color:var(--mint)}
.nod-cam.mini .nod-ring{inset:-5px;border-radius:50%;padding:4px}
.nod-cam.mini .nod-arrow{top:-22px;font-size:18px}
.nod-cam.mini .nod-face{font-size:20px;line-height:1}
.nod-preview{position:fixed;top:64px;right:12px;z-index:95;width:180px;border-radius:14px;overflow:hidden;border:3px solid var(--mint);box-shadow:0 10px 30px rgba(0,0,0,.35);background:#000}
.nod-preview video{display:block;width:100%;transform:scaleX(-1)}
.nod-preview[hidden]{display:none}
.nod-banner{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:96;background:rgba(23,50,77,.92);color:#fff;font-weight:800;border-radius:14px;padding:10px 16px;max-width:90vw;text-align:center}
.nod-banner[hidden]{display:none}
.nod-banner .nod-calib{position:static;background:none;display:inline;padding:0;font-size:14px}

/* Install as an app */
.pwa-btn{border:0;border-radius:999px;font-weight:800;cursor:pointer;font:inherit}
.pwa-top{background:var(--sun,#f5bc4e);color:#17324d;padding:7px 12px;font-size:13px;font-weight:800;white-space:nowrap}
.pwa-login{margin-top:14px;background:#fff;border:2px dashed var(--line,#e9e4da);color:var(--ink,#17324d);padding:12px 16px;font-weight:800}
.pwa-login:hover{border-color:var(--coral,#ef765f)}
.pwa-help{position:fixed;inset:0;z-index:200;background:rgba(23,50,77,.45);display:grid;place-items:center;padding:16px}
.pwa-card{background:#fffdfa;border-radius:24px;max-width:440px;width:100%;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.pwa-card h2{margin:10px 0 6px}.pwa-card ol{padding-left:22px;line-height:1.55;font-weight:600}.pwa-card li{margin:6px 0}
.pwa-icon img{width:64px;height:64px;border-radius:16px;display:block}
@media(max-width:700px){.pwa-top span{display:none}.pwa-top{padding:7px 9px}}

/* ---------- Score editor ---------- */
.ed{display:flex;flex-direction:column;gap:10px}
.ed-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--paper,#fffdfa);border:1px solid var(--line,#e9e4da);border-radius:18px;padding:10px 12px;position:sticky;top:64px;z-index:5}
.ed-bar label{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:13px}
.ed-bar select,.ed-bar input{border:1px solid var(--line,#e9e4da);border-radius:10px;padding:6px 8px;background:#fff;font:inherit}
.ed-bar #edTempo{width:64px}.ed-title{flex:1 1 180px;min-width:140px;font-weight:800!important;font-size:16px!important}
.ed-bar .on{outline:2px solid var(--coral,#ef765f)}
.ed-save{margin-left:auto;width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:9px;color:#b8c0c7}.ed-save svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.ed-save .core{fill:currentColor;stroke:none}
.ed-save.ok{color:#2f8f6d}.ed-save.err{color:#c0392b;background:#fde9e4}.ed-save.busy{color:#e39b2d;animation:edBlink .7s steps(2,start) infinite}
@keyframes edBlink{to{opacity:.25}}@media(prefers-reduced-motion:reduce){.ed-save.busy{animation:none}}
.ed-note-msg{margin:0;font-size:13px;color:var(--muted,#6c7c8b)}
.ed-ref{border:1px solid var(--line,#e9e4da);border-radius:18px;background:#fff;height:38vh;min-height:140px;resize:vertical;overflow:auto;display:flex;flex-direction:column}
.ed-ref[hidden]{display:none}.ed-ref-bar{position:sticky;top:0;background:#fff;padding:8px 10px;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line,#e9e4da);z-index:1;font-size:13px;font-weight:700}
.ed-ref-bar input{width:56px;border:1px solid var(--line,#e9e4da);border-radius:8px;padding:4px}.ed-ref-body{padding:8px}
.ed-main{display:grid;grid-template-columns:1fr 248px;gap:12px;align-items:start}
.ed-paper{background:#fff;border:1px solid var(--line,#e9e4da);border-radius:18px;padding:10px 4px;overflow:hidden;min-height:300px;touch-action:none;user-select:none;-webkit-user-select:none}
.ed-pal{position:sticky;top:140px;background:var(--paper,#fffdfa);border:1px solid var(--line,#e9e4da);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:12px;touch-action:none}
.ed-grp b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#6c7c8b);margin-bottom:6px}
.ed-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.ed-pal button{min-width:38px;height:44px;border-radius:12px;border:1px solid var(--line,#e9e4da);background:#fff;font-size:20px;cursor:pointer;color:var(--ink,#17324d);padding:0 8px;touch-action:none}
.ed-pal button.ed-dur{font-size:26px;font-family:"Segoe UI Symbol","Noto Music","Noto Sans Symbols 2",serif}
.ed-pal button.on{background:var(--ink,#17324d);color:#fff;border-color:var(--ink,#17324d)}.ed-pal button:disabled{opacity:.35}
#edRestT{font-size:14px;font-weight:700}.ed-hint{font-size:12px;color:var(--muted,#6c7c8b);margin:0;line-height:1.4}
.ed-fly{position:fixed;z-index:300;pointer-events:none;font-size:34px;transform:translate(-50%,-60%);color:var(--coral,#ef765f);text-shadow:0 2px 6px rgba(0,0,0,.2)}
.ed-menu{position:absolute;z-index:250;background:#fff;border:1px solid var(--line,#e9e4da);border-radius:16px;box-shadow:0 16px 40px rgba(23,50,77,.18);padding:6px;display:flex;flex-direction:column;min-width:260px}
.ed-menu button{border:0;background:none;text-align:left;padding:11px 12px;border-radius:10px;font:inherit;font-weight:700;cursor:pointer;color:var(--ink,#17324d)}.ed-menu button:hover{background:#f6f1e7}
#edSvg .ed-line{stroke:#6f7d89;stroke-width:1}#edSvg .ed-bar{stroke:#17324d;stroke-width:1.3}#edSvg .ed-bar.ghost{stroke-dasharray:4 4;stroke:#b8c0c7}
#edSvg .ed-brace{fill:none;stroke:#17324d;stroke-width:2}#edSvg .ed-clef,#edSvg .ed-time{fill:#17324d;font-family:"Segoe UI Symbol","Noto Music","Noto Sans Symbols 2",serif}#edSvg .ed-time{font-weight:800;font-family:Georgia,serif}
#edSvg .ed-acc{fill:#17324d}#edSvg .ed-mnum{fill:#9aa6b1;font-size:11px}#edSvg .ed-empty{fill:#9aa6b1;font-size:14px;font-weight:700}
#edSvg .ed-head{fill:#17324d;stroke:#17324d;stroke-width:1}#edSvg .ed-head.open{fill:#fff;stroke-width:2}#edSvg .ed-stem{stroke:#17324d;stroke-width:1.4}#edSvg .ed-flag{fill:#17324d}
#edSvg .ed-dot,#edSvg .ed-restfill{fill:#17324d}#edSvg .ed-reststroke{fill:none;stroke:#17324d;stroke-width:2;stroke-linecap:round}#edSvg .ed-tie{fill:none;stroke:#17324d;stroke-width:1.4}
#edSvg .ed-note,#edSvg .ed-rest{cursor:pointer}
#edSvg .sel .ed-head,#edSvg .sel .ed-flag,#edSvg .sel .ed-dot,#edSvg .sel .ed-restfill{fill:var(--coral,#ef765f);stroke:var(--coral,#ef765f)}#edSvg .sel .ed-head.open{fill:#fff}#edSvg .sel .ed-stem,#edSvg .sel .ed-reststroke{stroke:var(--coral,#ef765f)}
#edSvg .playing .ed-head{fill:#2f8f6d;stroke:#2f8f6d}#edSvg .ed-ghost ellipse{fill:var(--coral,#ef765f);opacity:.65}#edSvg .ed-gname{fill:var(--coral,#ef765f);font-weight:800;font-size:13px}
@media(max-width:900px){.ed-main{grid-template-columns:1fr}.ed-pal{position:sticky;bottom:10px;top:auto;flex-direction:row;flex-wrap:wrap;gap:8px;padding:8px;z-index:6}.ed-grp b,.ed-hint{display:none}.ed-row{margin:0}.ed-pal button{height:40px;min-width:38px}.ed-bar{top:56px}}

@media(max-width:700px){.ed-pal{bottom:70px}}
.ed-paper{position:relative}.ed-box{position:absolute;border:2px dashed var(--coral,#ef765f);background:rgba(239,118,95,.08);border-radius:6px;pointer-events:none}
.ed-pal button.ed-mode{font-size:14px;font-weight:800;flex:1}.ed-paper.writing{cursor:crosshair}
.ed-pal #edDel:not(:disabled){background:#fde9e4;border-color:var(--coral,#ef765f)}

/* folding keyboard under the score */
.score-dock{position:sticky}
.dock-fold{position:absolute;top:-26px;left:50%;transform:translateX(-50%);height:28px;padding:0 16px;border:0;border-radius:12px 12px 0 0;background:#1d2b38;color:#fff;font-weight:800;font-size:13px;cursor:pointer;box-shadow:0 -6px 14px rgba(23,50,77,.18);display:flex;align-items:center;gap:6px}
.dock-fold .arr{font-size:14px;transition:transform .2s}
.score-dock .score-keys{max-height:260px;transition:max-height .3s ease,opacity .25s ease,margin .3s ease;overflow-x:auto;overflow-y:hidden}
.score-dock.folded .score-keys{max-height:0;opacity:0;margin-top:0}
.score-dock.folded .dock-fold{background:var(--coral,#ef765f)}

/* continuous strip of sheet pages on the stand */
.sv-page.sv-strip{flex-direction:column;align-items:center;justify-content:flex-start;gap:14px}
.sv-pg{flex:0 0 auto;background:white;box-shadow:0 6px 30px rgba(0,0,0,.4)}
.sv-pg canvas,.sv-pg img{display:block;box-shadow:none}

.ed-save.draft{color:#e39b2d}
#edSaveOrig:disabled{opacity:.45}

.voice-btn.off{text-decoration:line-through;opacity:.6}

/* ---------- tidy piece page ---------- */
.page-head .piece-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;align-self:flex-start;justify-content:flex-end}
.piece-toolbar .btn{height:44px;padding:0 16px;font-size:15px}
.more-wrap{position:relative;display:inline-flex}
.more-btn{min-width:44px;height:40px;font-size:20px;font-weight:900;line-height:1;padding:0 10px}
.piece-toolbar .more-btn{height:44px}
.more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:240px;background:#fff;border:1px solid var(--line,#e9e4da);border-radius:16px;box-shadow:0 16px 40px rgba(23,50,77,.18);padding:6px;display:flex;flex-direction:column;gap:2px}
.more-menu[hidden]{display:none}
.more-menu .more-item{width:100%;justify-content:flex-start;text-align:left;border:0;background:none;box-shadow:none;border-radius:10px;height:auto;min-height:40px;padding:8px 12px;font-size:14px;font-weight:700}
.more-menu .more-item:hover{background:#f6f1e7}
.more-menu .nod-ctrl{display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px;border-top:1px solid var(--line,#e9e4da);border-bottom:1px solid var(--line,#e9e4da);margin:4px 0}
.more-menu .nod-ctrl .nod-btn{flex:1 1 100%}
.score-bar{display:flex!important;flex-wrap:wrap;gap:8px;align-items:center}
.sb-grp{display:inline-flex;align-items:center;gap:4px;padding:3px;border:1px solid var(--line,#e9e4da);border-radius:14px;background:#fff}
.sb-grp.sb-main{border:0;background:none;padding:0;gap:6px}
.sb-grp .btn.small,.sb-grp .btn{height:38px;box-shadow:none}
.sb-grp.sb-loop .btn{min-width:38px;padding:0 10px;border:0}
.sb-grp.sb-practice .btn{border:0}
.sb-select{height:38px;border:1px solid var(--line,#e9e4da);border-radius:12px;padding:0 8px;background:#fff;font:inherit;font-weight:700}
#scPlay{height:44px}
@media(max-width:700px){.page-head .piece-toolbar{justify-content:flex-start;width:100%}.sb-grp.sb-practice .btn{padding:0 10px;font-size:13px}}
.score-card .score-bar{position:relative;z-index:8}
@media(max-width:1000px){.page-head{flex-wrap:wrap}.page-head .piece-toolbar{width:100%;justify-content:flex-start;order:5}}
.sb-practice .nod-ctrl{display:inline-flex;align-items:center;gap:4px}
.sb-practice .nod-ctrl .nod-btn{border:0;height:38px}
.sb-practice .nod-ctrl select{height:32px;border:1px solid var(--line,#e9e4da);border-radius:10px;font-size:12px;max-width:130px}
.sb-practice .nod-ctrl .nod-calib-btn{border:0;height:34px;min-width:34px;padding:0}

/* ---------- homework / auto-tracked progress ---------- */
.hw-bar-wrap{margin:8px 0 18px}
.hw-bar-row{align-items:center;gap:12px}
.hw-bar{flex:1;height:16px;margin:0;border-radius:99px;box-shadow:inset 0 1px 3px rgba(23,50,77,.12)}
.hw-bar i{background:linear-gradient(90deg,var(--mint,#8fc9b6),#4fae8d);transition:width .4s ease}
.hw-bar-pct{font-size:22px;font-weight:900;color:#347464;min-width:58px;text-align:right}
.hw-bar-pct.over{color:#b8720a}
.hw-bar.over i{background:linear-gradient(90deg,#f5bc4e,#ef765f,#f5bc4e);background-size:200% 100%;animation:hwGlow 1.6s linear infinite;box-shadow:0 0 14px rgba(245,188,78,.65)}
@keyframes hwGlow{to{background-position:200% 0}}
.hw-bonus{margin-top:6px;font-weight:800;color:#b8720a;font-size:13px}
.hw-list{gap:10px}
.hw-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px}
.hw-card.done{opacity:.68}
.hw-card-icon{width:40px;height:40px;border-radius:12px;background:#fff1d0;display:grid;place-items:center;font-size:20px;flex:none}
.hw-card-body{flex:1;min-width:0}
.hw-card-body p{margin:2px 0;color:var(--muted,#6c7c8b);font-size:13px}
.hw-card-status{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pill.ok{background:#ddefe8;color:#347464}
.hw-card-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px}
.hw-card-actions .btn{height:34px;padding:0 10px;font-size:12px}
.hw-reflect textarea{width:100%;border:1px solid var(--line,#e9e4da);border-radius:12px;padding:10px;font:inherit;margin-bottom:8px}
@media(max-width:620px){.hw-card{flex-direction:column}.hw-card-status{flex-direction:row;align-self:stretch;justify-content:space-between}}

.hw-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px;margin:8px 0 18px}
.hw-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:2px solid var(--line,#e9e4da);border-radius:14px;background:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s;overflow:hidden}
.hw-tile small{font-size:10px;text-align:center;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw-tile-visual{font-size:22px;line-height:1;display:grid;place-items:center;min-height:26px;pointer-events:none}
.hw-tile-visual .tiny-keys{transform:scale(.32);transform-origin:center;height:60px}
.hw-tile-check{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--coral,#ef765f);color:#fff;font-size:13px;display:grid;place-items:center;opacity:0;transform:scale(.5);transition:.15s}
.hw-tile.on{border-color:var(--coral,#ef765f);background:#fff0ec;transform:scale(1.06);box-shadow:0 6px 16px rgba(239,118,95,.25)}
.hw-tile.on .hw-tile-check{opacity:1;transform:scale(1)}
.hw-piece-preview{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line,#e9e4da);border-radius:12px;margin:6px 0 14px}
.private-bar.bottom{margin-top:34px;padding-top:18px;border-top:1px solid var(--line,#e9e4da)}
.new-activity-dot{position:absolute;top:12px;right:12px;width:12px;height:12px;border-radius:50%;background:var(--coral,#ef765f);box-shadow:0 0 0 3px rgba(239,118,95,.25);z-index:2}
.hw-proof-media{margin-top:8px}
.hw-proof-media img,.hw-proof-media video{max-width:100%;max-height:160px;border-radius:10px;display:block}
.hw-proof-media audio{width:100%}

.sticker-pop{text-align:center;animation:stickerPopIn .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes stickerPopIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.sticker-pop-icon{font-size:72px;margin:18px auto;width:120px;height:120px;border-radius:50%;background:#f5f2eb;display:grid;place-items:center;filter:grayscale(1);opacity:.5}
.sticker-pop-icon.got{background:#fff3d7;filter:none;opacity:1}
.sticker-pop-icon span{display:inline-block}
.sticker-pop-icon.got span{animation:stickerSpin 1s ease}
@keyframes stickerSpin{0%{transform:rotate(0) scale(.6)}60%{transform:rotate(380deg) scale(1.15)}100%{transform:rotate(360deg) scale(1)}}
.sticker-pop h3{margin:6px 0 4px}
.sticker-pop p{color:var(--muted,#6c7c8b);margin:0 0 14px}
.sticker-pop .pill.ok{background:#ddefe8;color:#347464}

.quote-hero{min-height:220px}
.hero-quote{font-family:Georgia,serif;font-style:italic;font-size:clamp(20px,2.6vw,30px);line-height:1.35;margin:14px 0 10px;max-width:560px;color:var(--ink,#17324d)}
.hero-quote-author{display:block;font-size:14px;color:#526778;font-style:normal;font-weight:700}
@media(max-width:620px){.quote-hero{min-height:0}.hero-quote{font-size:19px}.quote-hero .hero-art{min-height:140px}}
.encourage-line{font-weight:700;color:var(--coral,#ef765f);font-size:16px;margin:4px 0 20px}

.lib-meta .meta-txt{font-size:14px;color:var(--muted,#6c7c8b)}
.lib-meta .meta-txt+.meta-txt:before{content:"· ";}
.lib-meta .attribution{margin:0}
.score-dock.unstick{position:relative}


/* ---------- tidy student card ---------- */
.page-head .st-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;align-self:flex-start}
.st-actions .btn{height:44px;padding:0 16px;font-size:15px}
#stGear.on{background:var(--ink,#17324d);color:#fff}
.st-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;margin:0 0 18px;padding:22px}
.st-panel[hidden]{display:none}
.st-panel h3{margin:0 0 10px;font-size:15px}.st-panel h3.danger{color:#c0392b;margin-top:18px}
.st-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.st-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800;color:var(--muted,#6c7c8b)}
.st-form label.wide{grid-column:1/-1}
.st-form label.narrow select{width:auto;min-width:88px}

/* ---------- teacher calendar: month grid + day timeline ---------- */
.cal-nav{justify-content:center;gap:10px;margin:10px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-head{margin-bottom:4px}
.cal-wd{text-align:center;font-size:11px;font-weight:800;color:var(--muted,#6c7c8b);text-transform:uppercase}
.cal-cell{aspect-ratio:1;border:1px solid var(--line,#e9e4da);border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;padding:0}
.cal-cell.empty{border:0;background:transparent;cursor:default}
.cal-cell.today{border-color:var(--coral,#ef765f);border-width:2px}
.cal-cell.has{background:#fff4d8}
.cal-daynum{font-weight:800;font-size:14px}
.cal-dot{position:absolute;bottom:3px;right:3px;background:var(--coral,#ef765f);color:#fff;font-size:10px;font-weight:800;border-radius:999px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 3px}
.cal-day-wrap{max-height:60vh;overflow-y:auto;border:1px solid var(--line,#e9e4da);border-radius:14px;margin-top:12px}
.cal-timeline{position:relative}
.cal-hourline{position:absolute;left:0;right:0;border-top:1px solid var(--line,#e9e4da)}
.cal-hourline span{position:absolute;left:4px;top:-8px;background:var(--paper,#fffdfa);padding:0 4px;font-size:11px;color:var(--muted,#6c7c8b)}
.cal-block{position:absolute;left:54px;right:6px;background:var(--mint,#8fc9b6);border-radius:8px;padding:4px 20px 4px 8px;overflow:hidden;box-shadow:0 2px 6px rgba(23,50,77,.15);touch-action:none;cursor:grab;color:#0b3b30;line-height:1.25}
.cal-block b{display:block;font-size:12px}
.cal-block small{display:block;font-size:10px;opacity:.75}
.cal-block-time{display:block;font-size:10px;font-weight:700}
.cal-block.dragging{opacity:.88;z-index:5;box-shadow:0 10px 24px rgba(23,50,77,.3);cursor:grabbing}
.cal-del{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;border:0;background:rgba(255,255,255,.75);font-size:11px;line-height:1;cursor:pointer;padding:0}
.cal-del.sure{background:#c0392b;color:#fff}
@media(max-width:420px){.cal-daynum{font-size:12px}.cal-dot{min-width:14px;height:14px;font-size:9px}}
.st-form input,.st-form select{height:40px;border:1px solid var(--line,#e9e4da);border-radius:10px;padding:0 10px;font:inherit;font-size:15px;color:var(--ink,#17324d);background:#fff}
.st-form input[readonly]{background:#f6f1e7}
.st-form .btn{grid-column:1/-1;justify-self:start}
.st-err{grid-column:1/-1;color:#c0392b;margin:0;font-weight:700}
.st-stack{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-bottom:10px}
.st-stack .theme-pick,.st-stack .stage-select{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px}
.danger-btn{color:#c0392b!important;border:1px solid #f1c3bb!important}
.btn.danger-btn:not(.light){background:#c0392b;color:#fff!important}.btn.danger-btn:disabled{opacity:.45}
@media(max-width:800px){.st-panel{grid-template-columns:1fr}.page-head .st-actions{justify-content:flex-start;width:100%}}

.fam-card{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;padding:16px 22px}
.fam-tag{font-weight:800;font-size:13px;color:var(--muted,#6c7c8b)}
.fam-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.fam-login{font-size:22px;font-weight:900;color:var(--coral,#ef765f);letter-spacing:-.01em;word-break:break-word}
.fam-card .st-form{margin-top:4px}
@media(max-width:620px){.fam-card{padding:14px 16px}.fam-login{font-size:19px}.fam-row{gap:8px}.fam-row .btn{flex:1;min-width:140px}}

.ga-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.plan-add{display:flex;align-items:center;gap:8px;margin:8px 0 14px;font-weight:800}
.plan-add select{height:40px;border:1px solid var(--line,#e9e4da);border-radius:10px;padding:0 10px;font:inherit}

/* ---------- games part 4 ---------- */
.thumb-on{font-weight:800;color:var(--muted,#6c7c8b);margin:-4px 0 8px}
.finger-seq{display:flex;gap:10px;justify-content:center;margin:6px 0 10px}
.finger-seq .fnum{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font:900 30px Georgia,serif;background:#fff3d7;border:3px solid transparent;transition:.2s}
.finger-seq .fnum.now{border-color:var(--coral,#ef765f);transform:scale(1.12)}.finger-seq .fnum.done{background:#dff3ea;color:#2f8f6d}
.hand-row{display:flex;gap:6px;justify-content:center;align-items:flex-end;margin:4px 0 10px}
.hand-row .finger{width:34px;border-radius:17px 17px 10px 10px;background:#ffe2c9;border:2px solid #f2c29e;display:grid;place-items:end center;padding-bottom:6px;font-weight:900;color:#9b6b45;transition:.2s}
.hand-row .f1{height:56px;transform:rotate(-18deg) translateY(10px)}.hand-row .f2{height:84px}.hand-row .f3{height:94px}.hand-row .f4{height:86px}.hand-row .f5{height:66px}
.hand-row .finger.on{background:var(--coral,#ef765f);color:#fff;border-color:var(--coral,#ef765f);box-shadow:0 0 0 5px rgba(239,118,95,.25)}
.game-keys .sk.in-pos{box-shadow:inset 0 -6px 0 #bfe6d6}
.game-keys .sk.muted-key{opacity:.45;pointer-events:none}.game-keys .sk.home-key{background:#ffe08a!important;box-shadow:0 0 0 3px #f5bc4e inset}
.ladder-choice{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px}.ladder{width:190px;height:92px}
.ladder .rung{stroke:#d9d2c3;stroke-width:2}.ladder .rung-t{font-size:10px;fill:#8a96a3;font-weight:700}.ladder .dot{fill:var(--coral,#ef765f)}.ladder .path{stroke:var(--coral,#ef765f);stroke-width:3;opacity:.5}
.orff-bubbles{display:flex;gap:14px;justify-content:center;margin:8px 0 12px}
.orff-bubbles .bubble{display:flex;gap:6px;padding:12px 16px;border-radius:22px;background:#eef4ff}.orff-bubbles .bubble.a{background:#fff3d7}
.orff-bubbles i{width:16px;height:16px;border-radius:50%;background:#cdd6e2;transition:.15s}.orff-bubbles i.on{background:var(--coral,#ef765f);transform:scale(1.25)}
.echo-dots{display:flex;gap:8px;justify-content:center;margin:6px 0 12px}.echo-dots i{width:18px;height:18px;border-radius:50%;background:#e2ddd2}.echo-dots i.on{background:#2f8f6d}
.mover{font-size:64px;line-height:1;margin:4px 0 10px}.mover.hop{animation:moverHop .25s ease}
@keyframes moverHop{50%{transform:translateY(-14px)}}
.choice .big-ic{display:block;font-size:40px;line-height:1.1}
.bells{display:grid;gap:12px;justify-content:center;margin:8px auto 10px;grid-template-columns:repeat(3,86px)}.bells.b8{grid-template-columns:repeat(4,86px)}.bells.b10{grid-template-columns:repeat(5,76px)}
.bell{height:86px;border-radius:22px;border:3px solid var(--line,#e9e4da);background:#fff;font-size:38px;cursor:pointer;transition:transform .15s}
.bell.open{background:#fff3d7;border-color:var(--sun,#f5bc4e)}.bell.found{background:#dff3ea;border-color:#8fc9b6;cursor:default}.bell.ring{animation:bellRing .5s ease}
@keyframes bellRing{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.bell-moves{text-align:center;color:var(--muted,#6c7c8b);font-weight:700;margin-bottom:6px}
@media(max-width:560px){.bells,.bells.b8,.bells.b10{grid-template-columns:repeat(4,64px)}.bell{height:64px;font-size:28px}.ladder{width:140px}}
#fStaff .staff{max-height:120px;width:auto;max-width:100%}
.first-login{margin-top:22px;padding:14px;background:#fff3d7;border-radius:15px;color:#705722;font-size:14px;line-height:1.5}.pw-wrap{position:relative}.pw-wrap input{width:100%;padding-right:50px}.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:20px;padding:6px 8px;border-radius:10px;opacity:.45;cursor:pointer}.pw-eye.on{opacity:1;background:#eef5f8}.private-bar{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}.private-bar .btn{font-size:17px;padding:15px 22px}.now-lesson .student-list{max-width:640px}
/* teacher home: a neutral studio (no child) until a lesson's own look takes over */
.hero-art{background:url('/img/hero-studio.webp') 100% center/cover no-repeat}
@media(max-width:620px){.hero-art{background-image:url('/img/hero-studio-sm.webp')}}
/* empty lists for the teacher and parents: a quiet studio picture (students keep their theme's mascot) */
body:not([data-theme]) :is(.now-lesson,.schedule-list,.lib-grid) .empty:before,body:not([data-theme]) .card.empty:before{content:"";display:block;height:150px;max-width:260px;margin:0 auto 12px;border-radius:16px;background:url(/img/scenes/classroom.webp) center/cover no-repeat}
body:not([data-theme]) .now-lesson .empty:before{background-image:url(/img/scenes/lesson-room.webp)}
body:not([data-theme]) .schedule-list .empty:before{background-image:url(/img/scenes/study-desk.webp)}
body:not([data-theme]) .lib-grid .empty:before{background-image:url(/img/scenes/reading-nook.webp)}
/* learning cards: topics, sound button, show-in-class stage, test yourself */
.card-topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.chip{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:9px 15px;font-weight:750;font-size:14px}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cards-actions{flex-wrap:wrap;gap:10px}
.flashcard{position:relative}
.card-sound{position:absolute;top:10px;right:10px;z-index:3;border:0;background:rgba(255,255,255,.92);border-radius:50%;width:40px;height:40px;font-size:18px;box-shadow:0 3px 10px rgba(23,50,77,.12)}
.flashcard.flipped .card-sound{opacity:.85}
.sym{font-size:52px;line-height:1;display:grid;justify-items:center;gap:6px;font-family:"Noto Music","Segoe UI Symbol",Georgia,serif}
.sym small{font-size:15px;font-family:Inter,system-ui,sans-serif;letter-spacing:.1em}
.rsym{height:78px;width:auto;fill:currentColor}
.back-symbol .sym{font-size:44px}.back-symbol .rsym{height:64px}
.card-stage{position:fixed;inset:0;z-index:60;background:var(--cream);display:grid;grid-template-rows:auto 1fr auto;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
.card-stage-top,.card-stage-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-stage-top span{font-weight:800;color:var(--muted)}
.card-stage-body{display:grid;place-items:center;padding:14px 0;min-height:0}
.card-stage-body .flashcard{width:min(560px,92vw)}
.card-stage-body .flashcard-inner{height:min(64vh,520px)}
.card-stage-body .card-visual{height:62%!important;font-size:110px}
.card-stage-body .card-visual .staff{max-width:320px}
.card-stage-body .sym{font-size:120px}.card-stage-body .rsym{height:170px}
.card-stage-body .flash-front .eyebrow{font-size:28px;letter-spacing:.06em}
.card-stage-body .flash-back b{font-size:26px;line-height:1.35}
.quiz-dots{display:flex;gap:5px;margin:6px 0 14px}.quiz-dots i{flex:1;height:7px;border-radius:9px;background:#ece8df}.quiz-dots i.done{background:var(--mint)}.quiz-dots i.now{background:var(--sun)}
.quiz-body{display:grid;justify-items:center;gap:14px;text-align:center}
.quiz-staff .staff{width:220px}
.quiz-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}
.quiz-opt{flex:1 1 130px;max-width:180px;min-height:84px;border:2px solid var(--line);background:#fff;border-radius:18px;padding:10px;display:grid;justify-items:center;gap:6px;color:var(--ink);font-size:16px}
.quiz-opt .qo-art{font-size:34px;line-height:1}.quiz-opt .qo-art .sym{font-size:34px}.quiz-opt .qo-art .rsym{height:44px}.quiz-opt .qo-art .tiny-keys{transform:scale(.6);height:50px}
.quiz-opt.ok{border-color:var(--mint);background:#eef8f4}.quiz-opt.try{border-color:var(--coral);background:#fff3f0}
@media(max-width:620px){.card-stage-body .card-visual{font-size:80px}.card-stage-body .sym{font-size:90px}.quiz-opt{flex-basis:40%}}
/* menu button for narrow screens: a note with three flags; opens the list of sections, languages, profile, sign-out */
.nav-burger{display:none;border:0;background:#fff;color:var(--ink);width:44px;height:44px;border-radius:14px;place-items:center;box-shadow:0 3px 12px rgba(23,50,77,.10);margin-left:6px;flex:0 0 auto}
.nav-burger[aria-expanded="true"]{background:var(--ink);color:#fff}
@media(max-width:900px){.nav-burger{display:grid}}
.nav-sheet{position:fixed;inset:0;z-index:70;background:rgba(11,26,39,.28)}
.ns-card{position:absolute;top:calc(env(safe-area-inset-top) + 70px);right:12px;width:min(320px,calc(100vw - 24px));max-height:calc(100vh - 90px);overflow:auto;background:var(--paper);border-radius:22px;padding:10px;box-shadow:0 20px 60px rgba(11,26,39,.25);display:grid;gap:4px}
.ns-item{border:0;background:transparent;text-align:left;padding:13px 14px;border-radius:14px;font-weight:750;font-size:16px;color:var(--ink);display:flex;align-items:center;gap:10px}
.ns-item:hover,.ns-item.on{background:#f1ede4}.ns-item.on{color:var(--coral)}
.ns-item .av{width:28px;height:28px;font-size:15px}
.ns-langs{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0}
.ns-langs span{color:var(--muted);font-weight:700;font-size:14px}.ns-langs .langs{display:flex!important}
.ns-out{color:var(--muted)}
/* calendar: pencil and bin next to every lesson; overlap message in the form */
.schedule-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.sched-actions{display:flex;flex-direction:column;gap:6px;justify-content:center}
.sched-btn{border:1px solid var(--line);background:#fff;border-radius:12px;min-width:44px;height:40px;font-size:17px;padding:0 8px}
.sched-btn.del.sure{background:#fff0ec;border-color:var(--coral);color:#ab4e3d;font-size:13px;font-weight:800}
.form-err{background:#fff0ec;color:#ab4e3d;border-radius:12px;padding:10px 12px;font-weight:700;margin:4px 0 12px}
@media(max-width:620px){.sched-actions{flex-direction:row;align-items:center}.schedule-row{grid-template-columns:1fr}.sched-actions{justify-content:flex-end}}
/* Orff question–answer: captions, rhythm shapes (short dot, long capsule), a clear instruction, the home key tagged */
.orff-col{display:grid;justify-items:center;gap:4px}.orff-col small{color:var(--muted);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.orff-bubbles .bubble{align-items:center}
.orff-bubbles i.d1{width:14px}.orff-bubbles i.d2{width:26px;border-radius:9px}.orff-bubbles i.d4{width:48px;border-radius:9px}
.orff-todo{min-height:44px;margin:4px auto 10px;max-width:520px;text-align:center;font-weight:750;color:var(--ink);background:#f4f1ea;border-radius:14px;padding:10px 14px}
.orff-todo.go{background:#fff0c7}.orff-todo.warn{background:#fff0ec;color:#ab4e3d}
.sk .home-tag{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:16px;pointer-events:none}
/* student panel (⚙ Alumno) on a phone: one column, nothing wider than the screen */
.st-form label,.st-form input,.st-form select{min-width:0;max-width:100%}
@media(max-width:620px){
  .st-panel{padding:16px;gap:18px;overflow:hidden}
  .st-form{grid-template-columns:1fr}
  .st-form input,.st-form select{width:100%;height:46px;font-size:16px}
  .st-form .btn{justify-self:stretch;height:48px}
  .st-stack{align-items:stretch;width:100%}
  .st-stack .theme-pick,.st-stack .stage-select{flex-wrap:wrap;width:100%}
  .st-stack select{flex:1 1 160px;min-width:0;max-width:100%}
  .st-actions{display:grid;grid-template-columns:1fr 1fr}.st-actions .btn{height:auto;min-height:48px;padding:8px 10px;white-space:normal;line-height:1.2}
  .st-panel code{word-break:break-all}
}
.sk.step-key{outline:3px dashed var(--sky,#80b6cc);outline-offset:-3px}
.sk .step-tag{position:absolute;left:50%;top:6px;transform:translateX(-50%);font-size:15px;color:#fff;pointer-events:none}
/* picture cards (teacher's own photo/memo): tap to fill the screen, tap again to shrink back */
.poster-card{display:flex;flex-direction:column;background:#fff;padding:0 0 10px;cursor:pointer;overflow:hidden;min-height:0!important}
.poster-card img{width:100%;height:210px;object-fit:cover;display:block}
.poster-card small{margin:9px 14px 0;font-weight:750;color:var(--ink)}
.poster-card.full{position:fixed;inset:4vh 4vw;z-index:75;border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.4);flex-direction:column}
.poster-card.full img{flex:1;width:100%;height:auto;min-height:0;object-fit:contain;background:#111}
.poster-card.full small{text-align:center;padding-bottom:4px}
.poster-back{position:fixed;inset:0;background:rgba(11,26,39,.72);z-index:74}
body.poster-open{overflow:hidden}
.card-stage-body .poster-card.full{position:static;inset:auto;box-shadow:none;width:min(720px,92vw);height:min(78vh,720px)}
.score-hidden-note{margin:0;padding:10px 14px;background:#fff3d7;color:#705722;border-radius:12px;font-size:13px;font-weight:700}
.osmd-box .btn{margin:24px auto;display:block}
.file-row-actions{gap:4px}
/* student card: tap a login to copy it; the "lesson held" quick button under the now-lesson card */
.acct-row{flex-wrap:wrap;gap:8px;margin:2px 0}
.acct-line{font-size:12px;font-weight:700;color:var(--ink);background:#f0eee8;border-radius:999px;padding:4px 9px}
.acct-line.muted{color:var(--muted)}
.now-card{display:grid;gap:10px}
.mark-done.done{background:var(--mint);color:#fff;opacity:.9}
/* drag to reorder learning cards (Android-launcher style): long-press jiggles, drag shifts the rest live */
@keyframes cardJiggle{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.flash-grid.reorder-mode .flashcard{touch-action:none;user-select:none;-webkit-user-select:none}
.flash-grid.reorder-mode .flashcard:not(.dragging){animation:cardJiggle .26s ease-in-out infinite}
.flash-grid.reorder-mode .flashcard:nth-child(2n):not(.dragging){animation-delay:-.13s}
.flash-grid.reorder-mode .flashcard:nth-child(3n):not(.dragging){animation-delay:-.07s}
.flash-grid .flashcard.dragging{animation:none!important;z-index:60;cursor:grabbing;box-shadow:0 24px 50px rgba(0,0,0,.4);transition:none!important}
.reorder-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;border-radius:999px;padding:10px 10px 10px 20px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.reorder-bar small{font-weight:700;white-space:nowrap}
@media(max-width:620px){.reorder-bar{left:16px;right:16px;transform:none;flex-wrap:wrap;justify-content:center;text-align:center;padding:12px}}