.tnm-app{display:flex;min-height:760px;background:#f5f7fa;border-radius:20px;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17202a;box-shadow:0 18px 50px rgba(20,33,61,.10)}
.tnm-sidebar{width:290px;background:#fff;border-right:1px solid #e3e7eb;padding:22px;flex:none}
.tnm-brand{font-size:15px;margin-bottom:30px}.tnm-brand small{display:block;font-size:9px;letter-spacing:2px;color:#7d8790;margin-top:3px}
.tnm-label{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#7d8790}.tnm-group{font-size:10px;font-weight:800;color:#9ba4ac;padding:17px 4px 5px}
.tnm-course{width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid transparent;background:#fff;border-radius:10px;padding:11px;text-align:left;cursor:pointer;transition:.18s}.tnm-course:hover{background:#eef4f8;transform:translateX(2px)}
.tnm-main{flex:1;padding:30px;min-width:0}.tnm-top{border-bottom:1px solid #e1e5e9;padding-bottom:18px}.tnm-top small{font-size:10px;letter-spacing:1.5px;color:#7d8790}.tnm-top h1{margin:5px 0 3px}.tnm-top p{margin:0;color:#6d7881}
.tnm-welcome{max-width:760px;margin:60px auto;background:#fff;border:1px solid #e1e5e9;border-radius:20px;padding:42px;text-align:center}.tnm-welcome-icon{font-size:58px}.tnm-welcome h2{margin:9px 0}.tnm-welcome p{color:#69747e;line-height:1.7}.tnm-pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.tnm-pills span{background:#f0f4f7;padding:8px 12px;border-radius:99px;font-size:12px}
.tnm-course-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.tnm-course-summary>div{background:#fff;border:1px solid #e1e5e9;border-radius:12px;padding:15px}.tnm-course-summary b,.tnm-course-summary small{display:block}.tnm-course-summary b{font-size:20px}.tnm-course-summary small{color:#78828a;margin-top:3px}
.tnm-lessons{display:grid;gap:10px}.tnm-lesson-card{display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border:1px solid #dfe4e8;border-radius:12px;padding:16px;cursor:pointer;transition:.18s}.tnm-lesson-card:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(20,33,61,.08)}.tnm-lesson-card .num{font-size:18px;color:#87919a}.tnm-lesson-card span{flex:1}.tnm-lesson-card strong,.tnm-lesson-card small{display:block}.tnm-lesson-card small{color:#7b858d;margin-top:5px}.tnm-lesson-card em{font-style:normal;font-size:12px;color:#53616b}
.tnm-loading,.tnm-empty{background:#fff;border-radius:12px;padding:35px;text-align:center;color:#69747e}.tnm-error{background:#fff1f0;color:#a11;padding:18px;border-radius:10px}
.tnm-modal{display:none;position:fixed;inset:0;background:rgba(11,17,27,.72);z-index:99999;padding:16px}.tnm-modal.show{display:block}.tnm-modal-box{position:relative;background:#fff;max-width:1320px;height:96vh;margin:auto;border-radius:18px;overflow:auto;padding:30px}.tnm-modal-box>#tnm-close{position:absolute;right:12px;top:5px;border:0;background:none;font-size:31px;cursor:pointer;z-index:4}
.tnm-lesson-head{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #e4e8eb;padding-bottom:15px}.tnm-lesson-head small{font-size:10px;letter-spacing:1.5px;color:#7d8790}.tnm-lesson-head h2{margin:4px 0}.tnm-progress{text-align:right}.tnm-progress b{font-size:22px;display:block}.tnm-progress small{font-size:11px;color:#7d8790}
.tnm-stepbar{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.tnm-stepbar a{font-size:12px;text-decoration:none;color:#27313a;background:#f0f4f7;padding:8px 11px;border-radius:8px}
.tnm-modal-box section{margin-top:26px;scroll-margin-top:10px}.tnm-video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#111}.tnm-content{line-height:1.75;margin-top:15px}.tnm-muted{padding:28px;text-align:center;color:#707a82;background:#f7f9fa;border-radius:10px}
.tnm-section-title{display:flex;align-items:end;gap:10px;margin-bottom:10px}.tnm-section-title>span{font-size:24px;font-weight:900;color:#bbc3ca}.tnm-section-title h3{margin:0}.tnm-section-title small{color:#7a848c}.tnm-score-tools{margin-left:auto;display:flex;gap:5px;align-items:center}.tnm-score-tools button{border:1px solid #d6dce1;background:#fff;border-radius:7px;padding:6px 10px}
.tnm-score-box{border:1px solid #dfe4e8;border-radius:13px;background:#fff;padding:10px;min-height:380px;overflow:hidden}.tnm-osmd{width:100%}.tnm-score-status{font-size:12px;color:#68737c;padding:7px}.tnm-score-error{padding:50px;text-align:center;background:#fff4f3;color:#a11;border-radius:10px}
.tnm-practice{background:#f8fafb;border:1px solid #e0e6ea;border-radius:13px;padding:14px}.tnm-hand-tabs{display:flex;gap:6px;flex-wrap:wrap}.tnm-hand-tabs button{border:1px solid #d4dbe1;background:#fff;border-radius:8px;padding:9px 13px;cursor:pointer}.tnm-hand-tabs button.active{background:#17202a;color:#fff}
.tnm-transport{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}.tnm-transport button{border:1px solid #d4dbe1;background:#fff;border-radius:8px;padding:9px 12px;cursor:pointer}.tnm-transport .play{background:#17202a;color:#fff}.tnm-transport label{display:flex;align-items:center;gap:7px}.tnm-transport input{width:200px}.tnm-bpm{min-width:72px}.tnm-practice-status{font-size:12px;background:#edf3f7;padding:9px;border-radius:8px;margin-top:10px}
.tnm-keyboard{display:flex;height:145px;overflow-x:auto;margin-top:12px;padding-bottom:3px}.tnm-keyboard button{flex:0 0 27px;height:140px;background:#fff;border:1px solid #777;border-radius:0 0 4px 4px}.tnm-keyboard button.black{background:#151515;height:88px;margin:0 -8px;z-index:2;flex-basis:18px;border-color:#111;border-radius:0 0 3px 3px}
.tnm-modal-box audio{width:100%;margin-top:10px}
@media(max-width:900px){.tnm-app{display:block}.tnm-sidebar{width:auto;border-right:0;border-bottom:1px solid #e3e7eb}.tnm-main{padding:16px}.tnm-modal-box{padding:18px}.tnm-course-summary{grid-template-columns:1fr 1fr}.tnm-score-tools{margin-left:0}.tnm-section-title{align-items:flex-start;flex-wrap:wrap}}
@media(max-width:600px){.tnm-course-summary{grid-template-columns:1fr}.tnm-lesson-head{display:block}.tnm-progress{text-align:left;margin-top:8px}.tnm-stepbar a{font-size:11px}.tnm-score-box{min-height:300px}.tnm-transport input{width:135px}}
/* 4.0.0 UX refinement */
.tnm-guide-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:14px;align-items:stretch}
.tnm-guide-video,.tnm-guide-pdf{min-width:0}
.tnm-guide-video .tnm-video iframe{aspect-ratio:16/8.6}
.tnm-guide-pdf{background:#f7f9fa;border:1px solid #e1e5e9;border-radius:12px;overflow:hidden}
.tnm-pdf-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;background:#fff;border-bottom:1px solid #e1e5e9}
.tnm-pdf-head small{font-size:10px;color:#7b858d}
.tnm-pdf{display:block;width:100%;height:clamp(250px,25vw,380px);border:0;background:#fff}
.tnm-score-box{min-height:270px;height:auto;max-height:430px;overflow:auto;padding:8px}
.tnm-osmd{max-height:390px;overflow:hidden}
.tnm-osmd svg{max-width:100%;height:auto}
.tnm-practice{padding:11px}
.tnm-practice .tnm-practice-status{margin-top:9px}
.tnm-refine-panel{background:#f8fafb;border:1px solid #e0e6ea;border-radius:13px;padding:13px}
.tnm-refine-status{font-size:12px;background:#edf3f7;padding:9px;border-radius:8px;margin-top:10px}
.tnm-refine-panel .tnm-keyboard{margin-top:10px}
.tnm-section-title{margin-bottom:8px}
@media(max-width:900px){
 .tnm-guide-grid{grid-template-columns:1fr}
 .tnm-guide-pdf .tnm-pdf{height:330px}
 .tnm-guide-video .tnm-video iframe{aspect-ratio:16/9}
 .tnm-score-box{max-height:360px}
}
@media(max-width:600px){
 .tnm-pdf-head{display:block}.tnm-pdf-head small{display:block;margin-top:2px}
 .tnm-pdf{height:300px}
 .tnm-score-box{max-height:320px;min-height:230px}
}

/* 4.0.2 interface refinement */
.tnm-guide-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:14px;align-items:stretch}
.tnm-guide-video,.tnm-guide-pdf{min-width:0}
.tnm-guide-video .tnm-video iframe{aspect-ratio:16/8.5}
.tnm-guide-pdf{border:1px solid #e1e5e9;border-radius:12px;overflow:hidden;background:#f7f9fa;min-height:260px}
.tnm-pdf{display:block;width:100%;height:100%;min-height:260px;border:0;background:#fff}
.tnm-score-box{min-height:255px;max-height:400px;padding:7px;overflow:auto}
.tnm-osmd{max-height:365px;overflow:hidden}
.tnm-osmd svg{max-width:100%;height:auto}
.tnm-practice{padding:11px}
.tnm-refine-panel{background:#f8fafb;border:1px solid #e0e6ea;border-radius:13px;padding:13px}
.tnm-refine-status{font-size:12px;background:#edf3f7;padding:9px;border-radius:8px;margin-top:10px}
.tnm-stepbar{position:sticky;top:0;z-index:2;background:#fff;padding:8px 0;border-bottom:1px solid #edf0f2}
@media(max-width:900px){.tnm-guide-grid{grid-template-columns:1fr}.tnm-guide-pdf{min-height:330px}.tnm-pdf{height:330px}.tnm-score-box{max-height:350px}}
@media(max-width:600px){.tnm-guide-pdf,.tnm-pdf{min-height:290px;height:290px}.tnm-score-box{min-height:220px;max-height:320px}.tnm-stepbar{position:static}}

/* 4.0.3 — integrated score into Luyện tập */
.tnm-practice{padding:11px}
.tnm-practice-score{margin-top:12px;min-height:270px;max-height:410px;border:1px solid #dfe4e8;border-radius:13px;background:#fff;padding:7px;overflow:auto}
.tnm-practice-score .tnm-osmd{max-height:380px;overflow:hidden}
.tnm-practice-score .tnm-osmd svg{max-width:100%;height:auto}
.tnm-practice-score .tnm-score-status{font-size:12px;color:#68737c;padding:7px}
.tnm-practice-score .tnm-score-error{padding:45px;text-align:center;background:#fff4f3;color:#a11;border-radius:10px}
.tnm-section-title{margin-bottom:8px}
@media(max-width:900px){.tnm-practice-score{max-height:360px;min-height:240px}.tnm-practice-score .tnm-osmd{max-height:330px}}
@media(max-width:600px){.tnm-practice-score{max-height:320px;min-height:220px}}

/* 4.0.6 — XML is the actual Luyện tập canvas */
.tnm-practice-score-tools{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:10px;flex-wrap:wrap}
.tnm-practice-score-tools button{border:1px solid #d5dce2;background:#fff;border-radius:7px;padding:6px 10px;cursor:pointer}
.tnm-practice-score-tools button:hover,.tnm-practice-score-tools button.active{background:#17202a;color:#fff;border-color:#17202a}
.tnm-practice-score-tools b{font-size:11px;min-width:42px;text-align:center;color:#5d6871}
.tnm-practice-score{position:relative;display:flex;justify-content:center;align-items:flex-start;min-height:330px;max-height:455px;overflow:auto;background:#fff;padding:8px 10px 16px}
.tnm-practice-score .tnm-osmd{width:100%;display:flex;justify-content:center;align-items:flex-start;overflow:visible;max-height:none}
.tnm-practice-score .tnm-osmd>svg{display:block;margin:0 auto;max-width:none}
.tnm-score-loading{width:100%;padding:65px 20px;text-align:center;color:#7a858d;font-size:13px}
.tnm-practice-score .tnm-score-error{width:100%;padding:45px 20px;text-align:center;background:#fff4f3;color:#a11;border-radius:10px}
@media(max-width:600px){
 .tnm-practice-score-tools{justify-content:flex-start}
 .tnm-practice-score{min-height:280px;max-height:390px}
}

/* 4.0.7 — compact score controls + responsive 88-key piano */
.tnm-practice-score-tools{justify-content:flex-end;margin-left:auto;margin-top:0}
.tnm-practice .tnm-hand-tabs{display:flex;align-items:center;gap:6px}
.tnm-practice-score-tools button{font-size:11px;padding:5px 8px}
.tnm-practice-score-tools b{font-size:10px;min-width:36px}
.tnm-practice-score{margin-top:9px}
.tnm-keyboard{height:auto;overflow:visible;margin-top:12px;padding:0}
.tnm-piano-wrap{width:100%;overflow:hidden}
.tnm-piano-controls{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-bottom:6px;font-size:11px;color:#69747c}
.tnm-piano-controls span{margin-right:auto;font-weight:700;color:#48535c}
.tnm-piano-controls button{width:27px;height:25px;border:1px solid #d3dbe1;background:#fff;border-radius:6px;cursor:pointer;font-size:16px;line-height:1}
.tnm-piano-controls b{font-size:10px;min-width:48px;text-align:center}
.tnm-piano-keys{display:flex;position:relative;width:100%;height:112px;overflow:hidden;justify-content:center}
.tnm-piano-keys .white{position:relative;flex:1 1 0;min-width:8px;height:112px;margin:0;border:1px solid #7b858d;border-radius:0 0 3px 3px;background:#fff;cursor:pointer;z-index:1}
.tnm-piano-keys .white:active{background:#e9eef2}
.tnm-piano-keys .black{position:relative;flex:0 0 14px;height:70px;margin:0 -7px;z-index:3;border:1px solid #222;border-radius:0 0 3px 3px;background:#16191c;cursor:pointer}
.tnm-piano-keys .black:active{background:#4d555b}
@media(max-width:700px){
 .tnm-piano-keys{height:96px}.tnm-piano-keys .white{height:96px}.tnm-piano-keys .black{height:60px;flex-basis:12px;margin:0 -6px}
 .tnm-practice-score-tools{margin-left:4px}
}

/* 4.0.8 — typographic hierarchy + refined piano keyboard */
.tnm-section-title{position:relative;display:flex;align-items:center;gap:12px;padding:4px 0 11px;margin-bottom:10px}
.tnm-section-title>span{font-size:26px;line-height:1;font-weight:900;letter-spacing:-1px;color:#17202a;min-width:34px}
.tnm-section-title>div:not(.tnm-score-tools){position:relative}
.tnm-section-title h3{font-size:19px;line-height:1.2;letter-spacing:-.2px;font-weight:800;color:#17202a}
.tnm-section-title small{font-size:11px;line-height:1.35;color:#7b858d}
.tnm-section-title:after{content:"";position:absolute;left:0;bottom:0;width:46px;height:2px;border-radius:3px;background:#17202a;opacity:.16}
.tnm-stepbar a{font-weight:600}
.tnm-hand-tabs{display:flex;align-items:center;gap:7px}
.tnm-hand-tabs button{font-weight:700;font-size:13px;padding:9px 14px;min-height:38px}
.tnm-practice-score-tools{margin-left:auto;margin-top:0;align-self:center;flex-wrap:nowrap}
.tnm-practice-score-tools button{font-size:10px;line-height:1;padding:5px 8px;min-height:28px}
.tnm-practice-score-tools b{font-size:10px;line-height:1;min-width:34px}
.tnm-practice-score{margin-top:6px}

/* Make the small score tools share exactly the same row as the three main tabs. */
.tnm-practice>.tnm-hand-tabs{display:flex;align-items:center}
.tnm-practice>.tnm-practice-score-tools{display:flex;align-items:center;justify-content:flex-end}

/* Piano: compact, elegant proportions. White keys remain tall; black keys are
   substantially shorter and narrower, with correct overhang into adjacent whites. */
.tnm-piano-controls{justify-content:flex-end;margin-bottom:7px;min-height:24px}
.tnm-piano-controls span{display:none}
.tnm-piano-controls button{width:26px;height:24px;font-size:15px}
.tnm-piano-controls b{font-size:10px;min-width:46px}
.tnm-piano-keys{height:126px;position:relative;display:flex;justify-content:flex-start;align-items:flex-start;padding:0 1px}
.tnm-piano-keys .white{height:126px;flex:1 1 0;min-width:0;width:auto;margin:0;border:1px solid #777f86;border-top:0;border-radius:0 0 5px 5px;background:linear-gradient(to bottom,#fff 0%,#fbfbfb 82%,#eef1f3 100%);box-sizing:border-box}
.tnm-piano-keys .black{position:absolute;height:78px;width:16px;flex:0 0 16px;margin:0;z-index:3;border:1px solid #17191b;border-top:0;border-radius:0 0 4px 4px;background:linear-gradient(to right,#0e0f10,#24282b 50%,#090a0b);box-shadow:0 2px 3px rgba(0,0,0,.22);transform:translateX(-8px)}
.tnm-piano-keys .black:active{background:#51585d}
@media(max-width:900px){
 .tnm-section-title>span{font-size:24px}
 .tnm-section-title h3{font-size:18px}
}
@media(max-width:700px){
 .tnm-hand-tabs button{font-size:12px;padding:8px 10px}
 .tnm-practice-score-tools button{padding:5px 6px}
 .tnm-piano-keys{height:110px}
 .tnm-piano-keys .white{height:110px}
 .tnm-piano-keys .black{height:68px;width:13px;flex-basis:13px;transform:translateX(-6.5px)}
}

/* =========================================================
   Thành Nam Music Piano Online 4.0.9
   Unified artistic learning interface
   ========================================================= */

/* Main section hierarchy */
.tnm-section-title{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:5px 2px 12px;
  margin:0 0 12px;
}
.tnm-section-title>span{
  flex:0 0 auto;
  font-size:27px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1.4px;
  color:#f07818;
}
.tnm-section-title>div:not(.tnm-score-tools){
  min-width:0;
}
.tnm-section-title h3{
  margin:0;
  font-size:19px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.25px;
  color:#1b2630;
}
.tnm-section-title small{
  display:block;
  margin-top:4px;
  font-size:11px;
  line-height:1.35;
  color:#7d878f;
}
.tnm-section-title:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:54px;
  height:2px;
  border-radius:10px;
  background:#f07818;
  opacity:.22;
}

/* Main content separators: subtle artistic orange */
#tnm-guide,
#tnm-practice,
#tnm-refine,
#tnm-audio{
  position:relative;
  padding-bottom:22px;
  margin-bottom:20px;
}
#tnm-guide:after,
#tnm-practice:after,
#tnm-refine:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,rgba(240,120,24,.05),rgba(240,120,24,.42),rgba(240,120,24,.05));
}

/* 01 — guide */
.tnm-guide-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(310px,.92fr);
  gap:14px;
  align-items:stretch;
}
.tnm-guide-video,
.tnm-guide-pdf{
  min-width:0;
  border:1px solid #e4e8eb;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 10px rgba(25,35,45,.035);
}
.tnm-guide-video .tnm-video iframe{
  display:block;
  width:100%;
  aspect-ratio:16/8.7;
  border:0;
}
.tnm-guide-pdf{
  min-height:250px;
}
.tnm-guide-pdf .tnm-pdf{
  display:block;
  width:100%;
  height:100%;
  min-height:250px;
  border:0;
}

/* 02 — practice: large tabs + compact controls on the same row */
.tnm-practice-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin-bottom:7px;
}
.tnm-hand-tabs{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}
.tnm-hand-tabs button{
  min-height:40px;
  padding:9px 15px;
  border:1px solid #dce2e6;
  border-radius:9px;
  background:#fff;
  color:#34404a;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:.15s ease;
}
.tnm-hand-tabs button:hover{
  border-color:#c8d0d6;
  transform:translateY(-1px);
}
.tnm-hand-tabs button.active{
  background:#1b2630;
  border-color:#1b2630;
  color:#fff;
  box-shadow:0 4px 12px rgba(27,38,48,.12);
}
.tnm-practice-score-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  margin:0 0 0 auto;
  flex:0 0 auto;
}
.tnm-practice-score-tools button{
  min-height:27px;
  padding:5px 8px;
  border:1px solid #dce2e6;
  border-radius:7px;
  background:#fff;
  color:#59636b;
  font-size:10px;
  line-height:1;
  cursor:pointer;
}
.tnm-practice-score-tools b{
  min-width:35px;
  text-align:center;
  font-size:10px;
  color:#657078;
}
.tnm-practice-score{
  margin-top:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  min-height:290px;
  max-height:430px;
  overflow:auto;
  padding:7px 10px 14px;
  border:1px solid #e3e7ea;
  border-radius:13px;
  background:#fff;
  box-shadow:0 2px 10px rgba(25,35,45,.025);
}
.tnm-practice-score .tnm-osmd{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.tnm-practice-score .tnm-osmd>svg{
  display:block;
  margin:0 auto;
}

/* 03 — refine & keyboard */
.tnm-refine-panel{
  padding:14px;
  border:1px solid #e3e7ea;
  border-radius:14px;
  background:#fff;
  box-shadow:0 2px 10px rgba(25,35,45,.025);
}
.tnm-transport{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.tnm-transport button{
  min-width:45px;
  height:42px;
  border:1px solid #dfe4e8;
  border-radius:8px;
  background:#fff;
}
.tnm-transport button.play{
  background:#1b2630;
  color:#fff;
  border-color:#1b2630;
}
.tnm-refine-status{
  margin-top:9px;
  padding:8px 10px;
  border-radius:8px;
  background:#f6f8f9;
  color:#66717a;
  font-size:11px;
}
.tnm-keyboard{
  margin-top:13px;
  padding:0;
  overflow:hidden;
}
.tnm-piano-wrap{
  width:100%;
}
.tnm-piano-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  min-height:24px;
  margin-bottom:6px;
}
.tnm-piano-controls span{
  display:none;
}
.tnm-piano-controls button{
  width:26px;
  height:24px;
  padding:0;
  border:1px solid #dce2e6;
  border-radius:6px;
  background:#fff;
}
.tnm-piano-controls b{
  min-width:45px;
  font-size:10px;
  text-align:center;
  color:#68737b;
}
.tnm-piano-keys{
  position:relative;
  display:flex;
  align-items:flex-start;
  width:100%;
  height:122px;
  padding:0 1px;
  overflow:hidden;
}
.tnm-piano-keys .white{
  position:relative;
  flex:1 1 0;
  min-width:0;
  height:122px;
  margin:0;
  padding:0;
  border:1px solid #858d93;
  border-top:0;
  border-radius:0 0 5px 5px;
  background:linear-gradient(to bottom,#fff 0%,#fff 80%,#eef1f3 100%);
  box-sizing:border-box;
  z-index:1;
  cursor:pointer;
}
.tnm-piano-keys .white.pressed,
.tnm-piano-keys .white:active{
  background:#e5eaed;
}
.tnm-piano-keys .black{
  position:absolute;
  width:15px;
  height:73px;
  margin:0;
  padding:0;
  border:1px solid #171a1c;
  border-top:0;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#080909,#282c2f 50%,#090a0b);
  box-shadow:0 2px 3px rgba(0,0,0,.22);
  z-index:3;
  transform:translateX(-7.5px);
  cursor:pointer;
}
.tnm-piano-keys .black.pressed,
.tnm-piano-keys .black:active{
  background:#4a5054;
}

/* 04 — audio */
#tnm-audio audio{
  width:100%;
  margin-top:4px;
}

/* responsive */
@media(max-width:900px){
  .tnm-guide-grid{grid-template-columns:1fr}
  .tnm-guide-pdf{min-height:320px}
  .tnm-guide-pdf .tnm-pdf{height:320px}
  .tnm-section-title>span{font-size:24px}
  .tnm-section-title h3{font-size:18px}
}
@media(max-width:700px){
  .tnm-practice-topline{
    align-items:flex-end;
    gap:7px;
  }
  .tnm-hand-tabs{gap:4px}
  .tnm-hand-tabs button{
    min-height:37px;
    padding:8px 9px;
    font-size:11px;
  }
  .tnm-practice-score-tools{
    gap:2px;
  }
  .tnm-practice-score-tools button{
    padding:5px 6px;
  }
  .tnm-piano-keys{height:108px}
  .tnm-piano-keys .white{height:108px}
  .tnm-piano-keys .black{height:65px;width:12px;transform:translateX(-6px)}
}
@media(max-width:500px){
  .tnm-practice-topline{
    flex-wrap:wrap;
    align-items:center;
  }
  .tnm-practice-score-tools{
    margin-left:auto;
  }
}

/* 4.1.0 — rebuilt virtual piano: two stable layers */
.tnm-piano-keys{
  position:relative;
  display:block;
  width:100%;
  height:126px;
  overflow:hidden;
  padding:0;
  background:#e7eaec;
  border:1px solid #aeb6bc;
  border-radius:0 0 6px 6px;
  box-sizing:border-box;
  touch-action:none;
}
.tnm-piano-whites{
  position:absolute;
  inset:0;
  display:flex;
  width:100%;
  height:100%;
  z-index:1;
}
.tnm-piano-blacks{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
}
.tnm-piano-keys .white{
  position:relative;
  display:block;
  flex:1 1 0;
  width:auto;
  min-width:0;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-right:1px solid #858d93;
  border-radius:0 0 4px 4px;
  background:linear-gradient(to bottom,#ffffff 0%,#ffffff 80%,#edf0f2 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.7);
  box-sizing:border-box;
  cursor:pointer;
  z-index:1;
  touch-action:none;
}
.tnm-piano-keys .white:first-child{
  border-left:0;
}
.tnm-piano-keys .white.pressed,
.tnm-piano-keys .white:active{
  background:linear-gradient(to bottom,#eef2f4,#dfe5e8);
}
.tnm-piano-keys .black{
  position:absolute;
  top:0;
  width:clamp(8px,1.15%,16px);
  height:64%;
  margin:0;
  padding:0;
  transform:translateX(-50%);
  border:1px solid #121416;
  border-top:0;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#080909 0%,#303438 48%,#090a0b 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.30);
  box-sizing:border-box;
  cursor:pointer;
  pointer-events:auto;
  touch-action:none;
}
.tnm-piano-keys .black.pressed,
.tnm-piano-keys .black:active{
  background:linear-gradient(90deg,#3e4549,#687076,#30363a);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.tnm-piano-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  min-height:24px;
  margin-bottom:6px;
}
.tnm-piano-controls button{
  width:26px;
  height:24px;
  padding:0;
  border:1px solid #dce2e6;
  border-radius:6px;
  background:#fff;
  color:#53606a;
  cursor:pointer;
}
.tnm-piano-controls b{
  min-width:74px;
  font-size:9px;
  line-height:1;
  text-align:center;
  color:#68737b;
}
@media(max-width:700px){
  .tnm-piano-keys{height:108px}
  .tnm-piano-keys .black{height:64%;width:clamp(7px,1.7%,13px)}
}

/* =========================================================
   4.2.0 — final responsive learning UI
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
.tnm-learning-app,.tnm-learning-app *{box-sizing:border-box}
.tnm-learning-app{width:100%;max-width:1500px;margin:0 auto;padding:18px 22px;color:#1b2630}
.tnm-learning-app .tnm-section-title{padding:2px 0 10px;margin-bottom:11px}
.tnm-learning-app .tnm-section-title>span{font-size:30px;color:#f07818}
.tnm-learning-app .tnm-section-title h3{font-size:20px}
.tnm-learning-app .tnm-section-title small{font-size:11px}

/* light orange separators */
#tnm-guide:after,#tnm-practice:after,#tnm-refine:after{
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(240,120,24,.42) 18%,rgba(240,120,24,.42) 82%,transparent 100%);
}

/* 01 */
.tnm-guide-grid{grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:16px}
.tnm-guide-video,.tnm-guide-pdf{border-radius:14px;background:#fff}
.tnm-guide-video .tnm-video iframe{aspect-ratio:16/8.8}
.tnm-guide-pdf{min-height:255px}

/* 02 */
.tnm-practice-topline{min-height:42px;margin-bottom:6px}
.tnm-hand-tabs{overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.tnm-hand-tabs::-webkit-scrollbar{display:none}
.tnm-hand-tabs button{white-space:nowrap;flex:0 0 auto}
.tnm-practice-score-tools{white-space:nowrap}
.tnm-practice-score{min-height:300px;max-height:445px;padding:6px 9px 13px}
.tnm-practice-score .tnm-osmd{min-width:0}

/* 03 */
.tnm-refine-panel{padding:15px;border-radius:14px}
.tnm-transport{gap:7px}
.tnm-transport button{width:46px;min-width:46px;height:42px}
.tnm-keyboard{width:100%;overflow:hidden}
.tnm-piano-wrap{width:100%;min-width:0}
.tnm-piano-keys{height:126px}
.tnm-piano-controls{height:25px}

/* 04 cards if the existing markup exposes them */
#tnm-audio .tnm-audio-grid,
#tnm-audio .tnm-audio-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
#tnm-audio .tnm-audio-card{
  min-width:0;
  border:1px solid #e3e7ea;
  border-radius:14px;
  background:#fff;
  padding:14px;
}
#tnm-audio audio{max-width:100%}

/* touch targets */
@media (hover:none){
  .tnm-hand-tabs button,.tnm-practice-score-tools button,
  .tnm-transport button,.tnm-piano-controls button{min-height:42px}
}

/* tablet */
@media(max-width:900px){
  .tnm-learning-app{padding:15px 14px}
  .tnm-guide-grid{grid-template-columns:1fr}
  .tnm-guide-pdf{min-height:300px}
  .tnm-guide-pdf .tnm-pdf{height:300px}
  #tnm-audio .tnm-audio-grid,
  #tnm-audio .tnm-audio-cards{grid-template-columns:1fr 1fr}
}

/* phone */
@media(max-width:640px){
  .tnm-learning-app{padding:12px 10px}
  .tnm-learning-app .tnm-section-title{gap:8px;padding-bottom:8px;margin-bottom:9px}
  .tnm-learning-app .tnm-section-title>span{font-size:24px;min-width:30px}
  .tnm-learning-app .tnm-section-title h3{font-size:17px}
  .tnm-learning-app .tnm-section-title small{font-size:10px}

  /* Practice controls remain on one logical row; if screen is too narrow,
     controls scroll horizontally instead of breaking the page. */
  .tnm-practice-topline{
    display:flex;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .tnm-practice-topline::-webkit-scrollbar{display:none}
  .tnm-hand-tabs{flex:0 0 auto}
  .tnm-hand-tabs button{
    min-height:38px;
    padding:8px 10px;
    font-size:11px;
  }
  .tnm-practice-score-tools{
    flex:0 0 auto;
    margin-left:auto;
  }
  .tnm-practice-score-tools button{
    min-height:30px;
    padding:5px 7px;
    font-size:9px;
  }
  .tnm-practice-score-tools b{min-width:31px;font-size:9px}
  .tnm-practice-score{
    min-height:245px;
    max-height:355px;
    padding:4px 5px 10px;
    border-radius:11px;
  }

  .tnm-refine-panel{padding:11px}
  .tnm-transport{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
  .tnm-transport button{width:100%;min-width:0;height:42px}
  .tnm-refine-status{font-size:10px}
  .tnm-piano-keys{height:92px}
  .tnm-piano-keys .black{height:60%}
  .tnm-piano-controls b{min-width:60px;font-size:9px}

  #tnm-audio .tnm-audio-grid,
  #tnm-audio .tnm-audio-cards{grid-template-columns:1fr}
  #tnm-audio .tnm-audio-card{padding:11px}

  .tnm-guide-video .tnm-video iframe{aspect-ratio:16/9}
  .tnm-guide-pdf,.tnm-guide-pdf .tnm-pdf{min-height:270px;height:270px}
}

/* very small phones */
@media(max-width:390px){
  .tnm-learning-app{padding:10px 7px}
  .tnm-learning-app .tnm-section-title>span{font-size:22px}
  .tnm-learning-app .tnm-section-title h3{font-size:16px}
  .tnm-hand-tabs button{padding:7px 8px;font-size:10px}
  .tnm-practice-score-tools button{padding:4px 5px}
  .tnm-practice-score{min-height:220px}
  .tnm-transport{grid-template-columns:repeat(3,1fr)}
}

/* 4.2.1 — exact piano geometry */
.tnm-piano-keys{
  position:relative;
  width:100%;
  height:132px;
  padding:0;
  margin:0;
  overflow:hidden;
  border:1px solid #8b9297;
  border-radius:2px 2px 6px 6px;
  background:#e7e8e9;
  box-sizing:border-box;
  isolation:isolate;
}
.tnm-piano-whites{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  width:100%;
  height:100%;
}
.tnm-piano-blacks{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  pointer-events:none;
}
.tnm-piano-keys .white{
  position:relative;
  flex:1 1 0;
  width:auto;
  min-width:0;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-right:1px solid #8c9398;
  border-radius:0 0 3px 3px;
  background:linear-gradient(to bottom,#ffffff 0%,#ffffff 78%,#f0f1f2 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.75);
  box-sizing:border-box;
  cursor:pointer;
  touch-action:none;
}
.tnm-piano-keys .white:first-child{
  border-left:1px solid #8c9398;
}
.tnm-piano-keys .white.pressed,
.tnm-piano-keys .white:active{
  background:linear-gradient(to bottom,#f1f4f5 0%,#e4e8ea 100%);
}
.tnm-piano-keys .black{
  position:absolute;
  top:0;
  left:0;
  width:clamp(9px,1.20%,18px);
  height:65%;
  margin:0;
  padding:0;
  transform:translateX(-50%);
  border:1px solid #101214;
  border-top:0;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#090a0b 0%,#292d30 48%,#08090a 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.28);
  box-sizing:border-box;
  cursor:pointer;
  pointer-events:auto;
  touch-action:none;
}
.tnm-piano-keys .black.pressed,
.tnm-piano-keys .black:active{
  background:linear-gradient(90deg,#3b4145 0%,#666e73 50%,#30363a 100%);
}
.tnm-piano-keys .white[data-label]::after{
  content:attr(data-label);
  position:absolute;
  left:4px;
  bottom:3px;
  font-size:9px;
  line-height:1;
  color:#687177;
  pointer-events:none;
}
@media(max-width:700px){
  .tnm-piano-keys{height:104px}
  .tnm-piano-keys .black{
    width:clamp(7px,1.65%,13px);
    height:63%;
  }
  .tnm-piano-keys .white[data-label]::after{font-size:7px;left:2px;bottom:2px}
}

/* =========================================================
   4.3.0 — final piano UI
   Reference-style piano: black fallboard, 52 equal white
   keys, 36 correctly centered black keys.
   ========================================================= */

.tnm-practice-topline{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%!important;
  margin:0 0 6px!important;
}
.tnm-practice-topline .tnm-hand-tabs{
  flex:0 0 auto;
  min-width:0;
}
.tnm-practice-topline .tnm-practice-score-tools{
  flex:0 0 auto;
  margin-left:auto!important;
}

.tnm-keyboard-shell{
  width:100%;
  margin-top:12px;
  padding:0;
  border:0;
  background:transparent;
}
.tnm-keyboard{
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}
.tnm-piano-wrap{
  width:100%;
}
.tnm-piano-controls{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  min-height:32px;
  margin:0 0 9px;
}
.tnm-piano-controls button{
  width:46px;
  height:40px;
  border:1px solid #d6dee3;
  border-radius:9px;
  background:#fff;
  color:#59646c;
  font-size:22px;
  line-height:1;
  font-weight:500;
  box-shadow:0 1px 2px rgba(20,30,40,.03);
  cursor:pointer;
}
.tnm-piano-controls b{
  min-width:74px;
  font-size:14px;
  color:#66727b;
  text-align:center;
}

/* The keyboard itself */
.tnm-piano-keys{
  position:relative;
  width:100%;
  height:185px;
  overflow:hidden;
  margin:0;
  padding:0 0 2px;
  border:1px solid #8d969c;
  border-radius:4px 4px 8px 8px;
  background:#151718;
  box-shadow:0 2px 5px rgba(20,25,28,.18);
  isolation:isolate;
}
.tnm-piano-keys:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:11px;
  background:linear-gradient(#292d2f,#111314);
  border-bottom:1px solid #050606;
  z-index:5;
  pointer-events:none;
}
.tnm-piano-whites{
  position:absolute;
  left:0;
  right:0;
  top:11px;
  bottom:0;
  display:flex;
  width:100%;
  height:calc(100% - 11px);
  z-index:1;
}
.tnm-piano-blacks{
  position:absolute;
  left:0;
  right:0;
  top:11px;
  bottom:0;
  width:100%;
  height:calc(100% - 11px);
  z-index:4;
  pointer-events:none;
}

/* 52 equal white keys */
.tnm-piano-keys .white{
  position:relative;
  flex:1 1 0;
  min-width:0;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-right:1px solid #92999e;
  background:linear-gradient(to right,#ffffff 0%,#fdfdfd 84%,#e8eaeb 100%);
  border-radius:0 0 3px 3px;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.8);
  cursor:pointer;
  touch-action:none;
}
.tnm-piano-keys .white:first-child{
  border-left:1px solid #92999e;
}
.tnm-piano-keys .white.pressed,
.tnm-piano-keys .white:active{
  background:linear-gradient(to bottom,#f1f3f4,#dfe4e6);
}
.tnm-piano-keys .white[data-label]::after{
  content:attr(data-label);
  position:absolute;
  left:4px;
  bottom:4px;
  color:#626c73;
  font-size:10px;
  line-height:1;
  font-weight:600;
  pointer-events:none;
}

/* 36 black keys: narrow, short, raised and centered on white-key seams */
.tnm-piano-keys .black{
  position:absolute;
  top:0;
  width:1.20%;
  min-width:10px;
  max-width:18px;
  height:61%;
  margin:0;
  padding:0;
  transform:translateX(-50%);
  border:1px solid #090a0b;
  border-top:0;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#080909 0%,#2a2e30 46%,#090a0b 100%);
  box-shadow:0 3px 4px rgba(0,0,0,.34);
  cursor:pointer;
  pointer-events:auto;
  touch-action:none;
}
.tnm-piano-keys .black:before{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  top:0;
  height:4px;
  background:linear-gradient(90deg,#3b3f41,#141617);
  border-radius:0 0 2px 2px;
}
.tnm-piano-keys .black.pressed,
.tnm-piano-keys .black:active{
  background:linear-gradient(90deg,#3b4144 0%,#697176 50%,#2c3134 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* desktop proportions */
@media(min-width:1000px){
  .tnm-piano-keys{height:180px}
  .tnm-piano-keys .black{height:62%;width:1.05%;min-width:11px}
}

/* mobile: retain the same proportions, simply reduce height */
@media(max-width:640px){
  .tnm-practice-topline{
    overflow-x:auto!important;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .tnm-practice-topline::-webkit-scrollbar{display:none}
  .tnm-hand-tabs{white-space:nowrap}
  .tnm-piano-controls button{width:38px;height:36px;font-size:20px}
  .tnm-piano-controls b{font-size:12px;min-width:62px}
  .tnm-piano-keys{height:116px;border-radius:3px 3px 6px 6px}
  .tnm-piano-keys:before{height:8px}
  .tnm-piano-whites,.tnm-piano-blacks{
    top:8px;
    height:calc(100% - 8px);
  }
  .tnm-piano-keys .black{
    width:1.8%;
    min-width:7px;
    max-width:12px;
    height:62%;
  }
  .tnm-piano-keys .white[data-label]::after{
    left:2px;
    bottom:3px;
    font-size:7px;
  }
}

/* =========================================================
   4.4.0 — corrected piano geometry
   IMPORTANT:
   - black keys are centered ON white-key boundary lines
   - range presets preserve real MIDI note relationships
   - mobile keyboard is shorter, not wider/taller
   ========================================================= */

.tnm-piano-wrap{width:100%;max-width:100%;overflow:hidden}
.tnm-piano-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  min-height:34px!important;
  margin:0 0 8px!important;
}
.tnm-piano-controls button{
  width:42px!important;
  height:36px!important;
  min-width:42px!important;
  padding:0!important;
  border:1px solid #d4dde2!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#606b73!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:600!important;
  box-shadow:0 1px 2px rgba(0,0,0,.03)!important;
}
.tnm-piano-controls b{
  min-width:68px!important;
  font-size:13px!important;
  color:#68737a!important;
  text-align:center!important;
}

/* Piano frame: no extra horizontal stretch on phones */
.tnm-piano-keys{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:176px!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #7d878e!important;
  border-radius:4px 4px 7px 7px!important;
  background:#17191a!important;
  box-shadow:0 2px 4px rgba(20,25,28,.18)!important;
  isolation:isolate!important;
}

/* black fallboard */
.tnm-piano-keys:before{
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;top:0!important;
  height:10px!important;
  background:#202528!important;
  border-bottom:1px solid #0d0f10!important;
  z-index:8!important;
  pointer-events:none!important;
}

.tnm-piano-whites{
  position:absolute!important;
  left:0!important;right:0!important;top:10px!important;bottom:0!important;
  display:flex!important;
  width:100%!important;height:calc(100% - 10px)!important;
  z-index:1!important;
}
.tnm-piano-blacks{
  position:absolute!important;
  left:0!important;right:0!important;top:10px!important;bottom:0!important;
  width:100%!important;height:calc(100% - 10px)!important;
  z-index:6!important;
  pointer-events:none!important;
}

/* White key: one equal column per white MIDI note */
.tnm-piano-keys .white{
  position:relative!important;
  flex:1 1 0!important;
  width:auto!important;
  min-width:0!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-right:1px solid #8a9297!important;
  border-radius:0 0 3px 3px!important;
  background:linear-gradient(90deg,#fff 0%,#fff 83%,#e8ebed 100%)!important;
  box-shadow:inset -1px 0 rgba(255,255,255,.7)!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
  touch-action:none!important;
}
.tnm-piano-keys .white:first-child{
  border-left:1px solid #8a9297!important;
}
.tnm-piano-keys .white.pressed,
.tnm-piano-keys .white:active{
  background:linear-gradient(#f0f3f4,#dfe4e7)!important;
}
.tnm-piano-keys .white[data-label]::after{
  content:attr(data-label)!important;
  position:absolute!important;
  left:3px!important;
  bottom:3px!important;
  color:#667178!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:600!important;
  pointer-events:none!important;
}

/* Black key dimensions are a percentage of ONE WHITE KEY.
   52 whites => 1.923% each. 0.62*white ≈ 1.19%.
   This makes the key visually centred and correctly narrower. */
.tnm-piano-keys .black{
  position:absolute!important;
  top:0!important;
  width:1.18%!important;
  min-width:8px!important;
  max-width:17px!important;
  height:61%!important;
  margin:0!important;
  padding:0!important;
  transform:translateX(-50%)!important;
  border:1px solid #090a0b!important;
  border-top:0!important;
  border-radius:0 0 4px 4px!important;
  background:linear-gradient(90deg,#070809 0%,#292d30 47%,#070809 100%)!important;
  box-shadow:0 2px 4px rgba(0,0,0,.34)!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:none!important;
}
.tnm-piano-keys .black:before{
  content:""!important;
  position:absolute!important;
  left:1px!important;right:1px!important;top:0!important;
  height:4px!important;
  background:linear-gradient(90deg,#3b3f41,#121516)!important;
  border-radius:0 0 2px 2px!important;
}
.tnm-piano-keys .black.pressed,
.tnm-piano-keys .black:active{
  background:linear-gradient(90deg,#3b4144,#687177,#2b3033)!important;
}

/* Desktop */
@media(min-width:901px){
  .tnm-piano-keys{height:176px!important}
}

/* Tablet */
@media(max-width:900px){
  .tnm-piano-keys{height:136px!important}
}

/* Phone: compact, visually balanced — do NOT make the keyboard tall */
@media(max-width:640px){
  .tnm-piano-wrap{
    width:100%!important;
    max-width:100%!important;
  }
  .tnm-piano-controls{
    min-height:31px!important;
    margin-bottom:7px!important;
    gap:4px!important;
  }
  .tnm-piano-controls button{
    width:34px!important;
    min-width:34px!important;
    height:32px!important;
    border-radius:8px!important;
    font-size:19px!important;
  }
  .tnm-piano-controls b{
    min-width:58px!important;
    font-size:11px!important;
  }
  .tnm-piano-keys{
    width:100%!important;
    height:92px!important;
    border-radius:3px 3px 6px 6px!important;
  }
  .tnm-piano-keys:before{height:7px!important}
  .tnm-piano-whites,
  .tnm-piano-blacks{
    top:7px!important;
    height:calc(100% - 7px)!important;
  }
  .tnm-piano-keys .black{
    width:1.55%!important;
    min-width:5px!important;
    max-width:11px!important;
    height:60%!important;
    border-radius:0 0 3px 3px!important;
  }
  .tnm-piano-keys .black:before{height:2px!important}
  .tnm-piano-keys .white[data-label]::after{
    left:2px!important;
    bottom:2px!important;
    font-size:7px!important;
  }
}

/* Small phone */
@media(max-width:390px){
  .tnm-piano-keys{height:82px!important}
  .tnm-piano-keys .black{
    width:1.50%!important;
    min-width:4px!important;
    max-width:9px!important;
  }
}

/* 4.5.0 — Member / teacher area */
.tnm-user-nav{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.tnm-login-link,.tnm-register-link,.tnm-dash-link,.tnm-primary-link{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 12px;border-radius:9px;text-decoration:none!important;font-weight:700}
.tnm-login-link{background:#202b35;color:#fff!important}.tnm-register-link{border:1px solid #e47622;color:#d66918!important;background:#fff}
.tnm-user-name{font-size:12px;color:#5e6b73}.tnm-mini-logout{margin:0}.tnm-mini-logout button{border:0;background:none;color:#6d7880;cursor:pointer}
.tnm-auth-card{max-width:560px;margin:40px auto;padding:28px;background:#fff;border:1px solid #e3e9ec;border-radius:18px;box-shadow:0 10px 35px rgba(25,40,50,.08)}
.tnm-auth-card h2{margin:0 0 8px;font-size:25px;color:#202b34}.tnm-auth-card p{color:#748089}
.tnm-auth-form{display:grid;gap:13px;margin-top:20px}.tnm-auth-form label{display:grid;gap:6px;font-weight:700;font-size:13px;color:#3b474f}
.tnm-auth-form input,.tnm-auth-form select{width:100%;min-height:44px;padding:9px 11px;border:1px solid #d6dee3;border-radius:9px;background:#fff}
.tnm-auth-form button,.tnm-save-note{min-height:44px;border:0;border-radius:9px;background:#e87522;color:#fff;font-weight:800;cursor:pointer}
.tnm-check{display:flex!important;align-items:center;gap:8px!important;font-weight:500!important}.tnm-check input{width:auto;min-height:0}
.tnm-auth-register{display:inline-block;margin-top:16px;color:#d86c19;font-weight:700}.tnm-auth-error,.tnm-auth-success{padding:11px 13px;border-radius:9px;margin-bottom:15px;font-size:13px}
.tnm-auth-error{background:#fff0f0;color:#a33}.tnm-auth-success{background:#effaf3;color:#26733c}
.tnm-dashboard{max-width:1180px;margin:0 auto;padding:20px 12px}.tnm-dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.tnm-dashboard-head small{color:#e37523;font-weight:800;letter-spacing:.06em}.tnm-dashboard-head h1{margin:4px 0;font-size:28px}.tnm-dashboard-head p{margin:0;color:#7a858d}
.tnm-dash-link{background:#202b35;color:#fff!important}.tnm-dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.tnm-dashboard-card,.tnm-teacher-class{background:#fff;border:1px solid #e2e8eb;border-radius:15px;padding:18px;box-shadow:0 6px 20px rgba(30,45,55,.05)}
.tnm-dashboard-card h3{margin:6px 0 8px}.tnm-dashboard-card p{color:#78838b}.tnm-kicker{font-size:10px;color:#e47723;font-weight:800;letter-spacing:.08em}
.tnm-primary-link{background:#fff3e9;color:#cf6519!important}.tnm-teacher-class{margin-bottom:18px}
.tnm-class-head{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #edf0f2;padding-bottom:11px;margin-bottom:12px}.tnm-class-head h2{margin:0;font-size:20px}.tnm-class-head span{color:#7a858c;font-size:12px}
.tnm-student-list{display:grid;gap:10px}.tnm-student-card{border:1px solid #e7ecef;border-radius:11px;overflow:hidden}
.tnm-student-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px}.tnm-student-top b{display:block}.tnm-student-top small{display:block;color:#88939a;margin-top:3px}
.tnm-student-open{border:1px solid #dbe2e6;background:#fff;border-radius:8px;padding:8px 10px;font-weight:700;cursor:pointer}
.tnm-student-detail{display:none;padding:12px;background:#fafbfc;border-top:1px solid #e8edef}.tnm-student-detail.show{display:block}
.tnm-student-meta{font-size:12px;color:#7b858d;margin-bottom:8px}.tnm-note-form{display:grid;grid-template-columns:1fr 150px auto;gap:8px}
.tnm-note-form textarea{min-height:76px;border:1px solid #d9e0e4;border-radius:8px;padding:9px;resize:vertical}.tnm-note-form select{border:1px solid #d9e0e4;border-radius:8px;padding:8px;background:#fff}
.tnm-note-form .tnm-save-note{padding:0 13px}.tnm-notes{margin-top:8px}.tnm-note-item{display:flex;justify-content:space-between;padding:7px 0;color:#647079;font-size:11px}
@media(max-width:800px){.tnm-user-nav{justify-content:flex-start;margin-top:10px}.tnm-dashboard{padding:12px 8px}.tnm-dashboard-head{align-items:flex-start;flex-direction:column}.tnm-dashboard-grid{grid-template-columns:1fr}.tnm-note-form{grid-template-columns:1fr}.tnm-student-top{align-items:flex-start;flex-direction:column}}

.tnm-member-gate{
  max-width:620px;margin:55px auto;padding:42px 28px;text-align:center;
  background:#fff;border:1px solid #e3e9ec;border-radius:20px;
  box-shadow:0 12px 36px rgba(25,40,50,.08)
}
.tnm-member-gate-icon{font-size:48px;margin-bottom:8px}
.tnm-member-gate h2{margin:0 0 9px;font-size:27px;color:#202b34}
.tnm-member-gate p{margin:0 auto 22px;max-width:500px;color:#748089}
.tnm-member-gate-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
@media(max-width:600px){
  .tnm-member-gate{margin:25px 10px;padding:32px 18px}
  .tnm-member-gate h2{font-size:23px}
  .tnm-member-gate-actions>a{width:100%}
}

/* 4.7.0 */
.tnm-piano-key{box-sizing:border-box!important;background:linear-gradient(#fff,#f4f4f2)!important;color:#20272b!important;border:1px solid #aab4ba!important;position:relative!important;z-index:1!important;cursor:pointer!important;touch-action:none}
.tnm-piano-key.black{background:linear-gradient(#34383b,#101214)!important;color:#fff!important;border-color:#07090a!important;z-index:4!important}
.tnm-piano-key.white{background:linear-gradient(#fff,#f4f4f2)!important;color:#20272b!important}
.tnm-piano-key.is-pressed{background:#ead7b7!important}.tnm-piano-key.black.is-pressed{background:#b8752c!important}
.tnm-completion-controls,.tnm-completion-bar,.tnm-practice-controls{display:flex!important;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:9px 10px;margin:8px auto 12px;background:#faf8f5;border:1px solid #eadfd5;border-radius:12px}
.tnm-completion-controls button,.tnm-completion-bar button,.tnm-practice-controls button{min-width:42px;height:38px;padding:0 12px;border:1px solid #d7c9bd!important;border-radius:9px!important;background:#fff!important;color:#343b40!important;font-weight:700!important;cursor:pointer}
.tnm-code-card{border-top:2px solid #e68a42!important}.tnm-code-form{display:flex;gap:8px;max-width:620px}.tnm-code-form input{flex:1;min-height:44px;border:1px solid #d8e0e4;border-radius:9px;padding:8px 11px;text-transform:uppercase}.tnm-code-form button{min-height:44px;padding:0 18px;border:0;border-radius:9px;background:#e47722;color:#fff;font-weight:800;cursor:pointer}.tnm-code-result{margin-top:8px;font-size:12px}.tnm-code-result.success{color:#24733d}.tnm-code-result.error{color:#b43d3d}
@media(max-width:600px){.tnm-completion-controls,.tnm-completion-bar,.tnm-practice-controls{gap:6px;padding:7px}.tnm-completion-controls button,.tnm-completion-bar button,.tnm-practice-controls button{min-width:38px;height:38px;padding:0 8px}.tnm-code-form{flex-direction:column}.tnm-code-form button{width:100%}}

/* 4.8.0 professional UI */
.tnm-piano-key{forced-color-adjust:none!important;filter:none!important;mix-blend-mode:normal!important}
.tnm-piano-key.white{background:#fff!important;color:#222!important;border:1px solid #9aa2a8!important}
.tnm-piano-key.black{background:#17191c!important;color:#fff!important;border:1px solid #050607!important}
.tnm-piano-key.is-pressed{background:#e6c99f!important}.tnm-piano-key.black.is-pressed{background:#b96e26!important}
.tnm-completion-controls,.tnm-completion-bar,.tnm-practice-controls{background:var(--tnm-panel,#fbfaf8)!important;border:1px solid #dfd5cc!important;box-shadow:0 5px 18px rgba(30,35,40,.06)!important;gap:6px!important}
.tnm-completion-controls button,.tnm-completion-bar button,.tnm-practice-controls button{display:inline-flex!important;align-items:center;justify-content:center;width:42px!important;min-width:42px!important;height:40px!important;border:1px solid #d4cbc4!important;border-radius:10px!important;background:#fff!important;color:#252a2e!important;line-height:1!important;transition:.18s ease}
.tnm-completion-controls button:hover,.tnm-completion-bar button:hover,.tnm-practice-controls button:hover{transform:translateY(-1px);border-color:#d47a35!important;box-shadow:0 4px 10px rgba(212,122,53,.16)!important}
.tnm-completion-controls button[data-action="play"],.tnm-completion-bar button[data-action="play"]{width:48px!important;height:44px!important;border-radius:12px!important}
.tnm-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.tnm-admin-card{background:#fff;border:1px solid #e3e7ea;border-radius:14px;padding:18px}.tnm-admin-card b{display:block;font-size:28px}.tnm-admin-card span{color:#748089}
.tnm-role-dashboard{max-width:1000px;margin:0 auto;display:grid;gap:16px}.tnm-role-hero{display:flex;gap:15px;align-items:center;padding:22px;border-radius:18px;background:linear-gradient(135deg,#fffaf5,#f8f5f1);border:1px solid #eadfd5}.tnm-role-icon{font-size:34px}.tnm-role-hero h2{margin:0 0 5px}.tnm-role-hero p{margin:0;color:#69747b}.tnm-role-card{background:#fff;border:1px solid #e4e8eb;border-radius:16px;padding:20px;box-shadow:0 6px 20px rgba(25,35,42,.05)}.tnm-form-input{width:100%;box-sizing:border-box;margin:0 0 10px;border:1px solid #d6dee2;border-radius:9px;padding:11px}.tnm-primary-btn{border:0;border-radius:9px;background:#df7627;color:#fff;padding:11px 18px;font-weight:700}.tnm-request-row,.tnm-history-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #edf0f1}.tnm-notice{padding:12px 0;border-bottom:1px solid #edf0f1}
@media(max-width:700px){.tnm-admin-grid{grid-template-columns:1fr}.tnm-role-hero{padding:17px}.tnm-role-card{padding:16px}.tnm-completion-controls button,.tnm-completion-bar button,.tnm-practice-controls button{width:38px!important;min-width:38px!important;height:38px!important}}

.tnm-auth-wrap{max-width:460px;margin:30px auto;padding:28px;background:#fff;border:1px solid #e2e7ea;border-radius:20px;box-shadow:0 15px 45px rgba(25,35,45,.09)}
.tnm-auth-wrap h2{text-align:center;margin:0 0 8px;font-size:27px}.tnm-auth-wrap .tnm-auth-sub{text-align:center;color:#768087;margin:0 0 22px}
.tnm-auth-wrap label{display:block;font-weight:600;margin:0 0 12px}.tnm-auth-wrap input,.tnm-auth-wrap select{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:12px;border:1px solid #d6dee2;border-radius:10px;background:#fff;color:#222}
.tnm-auth-wrap .tnm-auth-submit{width:100%;border:0;border-radius:11px;padding:13px;background:#df7627;color:#fff;font-weight:800;font-size:15px}
@media(prefers-color-scheme:dark){.tnm-auth-wrap,.tnm-role-card,.tnm-admin-card{background:#202326;color:#f4f5f6;border-color:#383d40}.tnm-auth-wrap input,.tnm-auth-wrap select{background:#181a1c;color:#fff;border-color:#4a4f53}}

/* 4.8.1 — Professional completion controls */
.tnm-completion-controls,.tnm-completion-bar,.tnm-practice-controls{
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:7px!important;padding:8px 10px!important;margin:7px auto 11px!important;
  border-radius:13px!important;background:var(--tnm-control-bg,#faf9f7)!important;
  border:1px solid var(--tnm-control-border,#e5ddd5)!important;
}
.tnm-completion-controls button,.tnm-completion-bar button,.tnm-practice-controls button{
  position:relative!important;display:inline-flex!important;align-items:center!important;
  justify-content:center!important;flex:0 0 auto!important;
  width:40px!important;min-width:40px!important;height:38px!important;
  padding:0!important;margin:0!important;border-radius:9px!important;
  border:1px solid var(--tnm-control-border,#d9d0c8)!important;
  background:var(--tnm-control-button,#fff)!important;
  color:var(--tnm-control-icon,#3d4347)!important;
  box-shadow:0 1px 2px rgba(20,25,30,.05)!important;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease!important;
  font-size:0!important;line-height:0!important;
}
.tnm-completion-controls button:hover,.tnm-completion-bar button:hover,.tnm-practice-controls button:hover{
  transform:translateY(-1px)!important;border-color:#d8894b!important;
  box-shadow:0 4px 12px rgba(175,102,43,.13)!important;
}
.tnm-completion-controls button:active,.tnm-completion-bar button:active,.tnm-practice-controls button:active{
  transform:translateY(0)!important;box-shadow:0 1px 3px rgba(20,25,30,.08)!important;
}
.tnm-completion-controls button::before,.tnm-completion-bar button::before,.tnm-practice-controls button::before{
  content:"";display:block;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--tnm-icon) center/contain no-repeat;mask:var(--tnm-icon) center/contain no-repeat;
}
.tnm-completion-controls button:nth-child(1)::before,.tnm-completion-bar button:nth-child(1)::before,.tnm-practice-controls button:nth-child(1)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.tnm-completion-controls button:nth-child(2)::before,.tnm-completion-bar button:nth-child(2)::before,.tnm-practice-controls button:nth-child(2)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5a7 7 0 1 0 6.7 9h-2.1A5 5 0 1 1 12 7c1.3 0 2.5.5 3.4 1.4L13 11h7V4l-3 3A7 7 0 0 0 12 5z'/%3E%3C/svg%3E");
}
.tnm-completion-controls button:nth-child(3)::before,.tnm-completion-bar button:nth-child(3)::before,.tnm-practice-controls button:nth-child(3)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h10v10H7z'/%3E%3C/svg%3E");
}
.tnm-completion-controls button:nth-child(4)::before,.tnm-completion-bar button:nth-child(4)::before,.tnm-practice-controls button:nth-child(4)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h10l-4-4 1.4-1.4L19.8 14l-7.4 7.4L11 20l4-4H5z'/%3E%3C/svg%3E");
}
.tnm-completion-controls button:nth-child(5)::before,.tnm-completion-bar button:nth-child(5)::before,.tnm-practice-controls button:nth-child(5)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H9l4-4-1.4-1.4L4.2 14l7.4 7.4L13 20l-4-4h10z'/%3E%3C/svg%3E");
}
.tnm-completion-controls button:nth-child(6)::before,.tnm-completion-bar button:nth-child(6)::before,.tnm-practice-controls button:nth-child(6)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-7-7V3zm1 2h-2v7l5 3 1-1.7-4-2.3z'/%3E%3C/svg%3E");
}
@media(prefers-color-scheme:dark){
  .tnm-completion-controls,.tnm-completion-bar,.tnm-practice-controls{
    --tnm-control-bg:#25282b;--tnm-control-border:#454a4e;--tnm-control-button:#303438;--tnm-control-icon:#eef1f2;
  }
}
@media(max-width:600px){
  .tnm-completion-controls,.tnm-completion-bar,.tnm-practice-controls{gap:5px!important;padding:7px!important}
  .tnm-completion-controls button,.tnm-completion-bar button,.tnm-practice-controls button{width:38px!important;min-width:38px!important;height:37px!important}
}

/* =========================================================
   4.8.2 — Premium Hoàn thiện & củng cố transport
   Giữ nguyên DOM/event hiện tại; chỉ thay presentation.
   ========================================================= */
.tnm-completion-controls,
.tnm-completion-bar,
.tnm-practice-controls{
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:12px!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:16px!important;
  margin:10px 0 16px!important;
  border:1px solid #e8e8e8!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 8px 26px rgba(25,32,38,.07)!important;
}

/* Transport buttons */
.tnm-completion-controls button,
.tnm-completion-bar button,
.tnm-practice-controls button{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 92px!important;
  width:92px!important;
  min-width:92px!important;
  height:88px!important;
  padding:10px 8px 8px!important;
  margin:0!important;
  border:1px solid #e4e7e9!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#20262b!important;
  box-shadow:0 2px 5px rgba(25,32,38,.04)!important;
  font-size:13px!important;
  font-weight:650!important;
  line-height:1.15!important;
  text-align:center!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease!important;
}
.tnm-completion-controls button:hover,
.tnm-completion-bar button:hover,
.tnm-practice-controls button:hover{
  transform:translateY(-2px)!important;
  border-color:#d7dadd!important;
  box-shadow:0 7px 16px rgba(25,32,38,.10)!important;
}
.tnm-completion-controls button:active,
.tnm-completion-bar button:active,
.tnm-practice-controls button:active{
  transform:translateY(0)!important;
}

/* Play = primary action */
.tnm-completion-controls button:nth-child(1),
.tnm-completion-bar button:nth-child(1),
.tnm-practice-controls button:nth-child(1){
  background:#d9232e!important;
  border-color:#d9232e!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(217,35,46,.20)!important;
}
.tnm-completion-controls button:nth-child(1):hover,
.tnm-completion-bar button:nth-child(1):hover,
.tnm-practice-controls button:nth-child(1):hover{
  background:#c91f29!important;
  border-color:#c91f29!important;
}

/* Icon */
.tnm-completion-controls button::before,
.tnm-completion-bar button::before,
.tnm-practice-controls button::before{
  content:""!important;
  display:block!important;
  width:28px!important;
  height:28px!important;
  margin:0 auto 7px!important;
  background:currentColor!important;
  -webkit-mask:var(--tnm-icon) center/contain no-repeat!important;
  mask:var(--tnm-icon) center/contain no-repeat!important;
}

/* Return */
.tnm-completion-controls button:nth-child(1)::before,
.tnm-completion-bar button:nth-child(1)::before,
.tnm-practice-controls button:nth-child(1)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5a7 7 0 1 0 6.7 9h-2.1A5 5 0 1 1 12 7c1.2 0 2.3.4 3.2 1.1L13 10h7V3l-3 3A8.9 8.9 0 0 0 12 5z'/%3E%3C/svg%3E");
}
/* Play */
.tnm-completion-controls button:nth-child(2)::before,
.tnm-completion-bar button:nth-child(2)::before,
.tnm-practice-controls button:nth-child(2)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
/* Stop */
.tnm-completion-controls button:nth-child(3)::before,
.tnm-completion-bar button:nth-child(3)::before,
.tnm-practice-controls button:nth-child(3)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='1.2' fill='%23000'/%3E%3C/svg%3E");
}
/* Tua lại */
.tnm-completion-controls button:nth-child(4)::before,
.tnm-completion-bar button:nth-child(4)::before,
.tnm-practice-controls button:nth-child(4)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 6v5H6l6.5 6.5L14 16l-3-3h4v-7z'/%3E%3Cpath fill='%23000' d='M17 6v5h-3l4 4v-3h1V6z'/%3E%3C/svg%3E");
}
/* Tua đi */
.tnm-completion-controls button:nth-child(5)::before,
.tnm-completion-bar button:nth-child(5)::before,
.tnm-practice-controls button:nth-child(5)::before{
  --tnm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 6v5h5l-6.5 6.5L10 16l3-3H9v-7z'/%3E%3Cpath fill='%23000' d='M7 6v5h3l-4 4v-3H5V6z'/%3E%3C/svg%3E");
}

/* Keep existing text labels readable even if theme CSS tried to hide them */
.tnm-completion-controls button span,
.tnm-completion-bar button span,
.tnm-practice-controls button span{
  font-size:inherit!important;
}

/* Tempo area remains visually independent and balanced */
.tnm-completion-controls .tnm-tempo,
.tnm-completion-bar .tnm-tempo,
.tnm-practice-controls .tnm-tempo{
  flex:1 1 auto!important;
  min-width:220px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* If tempo is a direct sibling rather than a named block, keep it compact */
.tnm-completion-controls input[type="range"],
.tnm-completion-bar input[type="range"],
.tnm-practice-controls input[type="range"]{
  accent-color:#d9232e!important;
}

@media(max-width:800px){
  .tnm-completion-controls,
  .tnm-completion-bar,
  .tnm-practice-controls{
    gap:8px!important;
    padding:12px!important;
    overflow-x:auto!important;
  }
  .tnm-completion-controls button,
  .tnm-completion-bar button,
  .tnm-practice-controls button{
    flex:0 0 72px!important;
    width:72px!important;
    min-width:72px!important;
    height:72px!important;
    padding:7px 5px!important;
    font-size:11px!important;
  }
  .tnm-completion-controls button::before,
  .tnm-completion-bar button::before,
  .tnm-practice-controls button::before{
    width:23px!important;
    height:23px!important;
    margin-bottom:5px!important;
  }
  .tnm-completion-controls .tnm-tempo,
  .tnm-completion-bar .tnm-tempo,
  .tnm-practice-controls .tnm-tempo{
    min-width:180px!important;
  }
}

@media(prefers-color-scheme:dark){
  .tnm-completion-controls,
  .tnm-completion-bar,
  .tnm-practice-controls{
    background:#202327!important;
    border-color:#363b40!important;
    box-shadow:0 8px 26px rgba(0,0,0,.22)!important;
  }
  .tnm-completion-controls button,
  .tnm-completion-bar button,
  .tnm-practice-controls button{
    background:#2a2e33!important;
    border-color:#454b51!important;
    color:#f1f3f4!important;
  }
  .tnm-completion-controls button:nth-child(1),
  .tnm-completion-bar button:nth-child(1),
  .tnm-practice-controls button:nth-child(1){
    background:#d9232e!important;
    color:#fff!important;
  }
}

/* =========================================================
   4.8.3 — REAL transport icons
   The markup now contains actual SVG-like CSS masks/classes.
   No emoji, no nth-child dependency.
   ========================================================= */
.tnm-refine-panel{width:100%;box-sizing:border-box}
.tnm-transport{
  display:flex!important;
  align-items:stretch!important;
  gap:12px!important;
  padding:16px!important;
  width:100%!important;
  box-sizing:border-box!important;
  border:1px solid #e7e8ea!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 8px 26px rgba(24,31,38,.07)!important;
}
.tnm-transport > button{
  flex:0 0 92px!important;
  width:92px!important;
  min-width:92px!important;
  height:88px!important;
  padding:9px 6px!important;
  margin:0!important;
  border:1px solid #e0e3e5!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#20262b!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  font:600 13px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  box-shadow:0 2px 6px rgba(20,28,34,.05)!important;
  cursor:pointer!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease!important;
}
.tnm-transport > button:hover{
  transform:translateY(-2px)!important;
  border-color:#d5d9dc!important;
  box-shadow:0 8px 17px rgba(20,28,34,.10)!important;
}
.tnm-transport > button:active{transform:translateY(0)!important}
.tnm-transport > .play{
  background:#d8232f!important;
  border-color:#d8232f!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(216,35,47,.22)!important;
}
.tnm-transport > .play:hover{background:#c91f2a!important;border-color:#c91f2a!important}
.tnm-transport > .listen{display:none!important}

.tnm-transport-icon{
  display:block!important;
  width:29px!important;
  height:29px!important;
  flex:0 0 29px!important;
  background:currentColor!important;
  -webkit-mask:center/contain no-repeat!important;
  mask:center/contain no-repeat!important;
}
.tnm-icon-return{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 6H6v7h3V9.9A9 9 0 1 1 7.5 19H4.3A12 12 0 1 0 13 6z'/%3E%3Cpath d='M6 6h10v3H9v7H6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 6H6v7h3V9.9A9 9 0 1 1 7.5 19H4.3A12 12 0 1 0 13 6z'/%3E%3Cpath d='M6 6h10v3H9v7H6z'/%3E%3C/svg%3E");
}
.tnm-icon-play{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11 6.5v19L26 16z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11 6.5v19L26 16z'/%3E%3C/svg%3E");
}
.tnm-icon-stop{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='7' y='7' width='18' height='18' rx='2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='7' y='7' width='18' height='18' rx='2'/%3E%3C/svg%3E");
}
.tnm-icon-prev{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 8h3v16H7zM13 16l13-10v20z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 8h3v16H7zM13 16l13-10v20z'/%3E%3C/svg%3E");
}
.tnm-icon-next{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22 8h3v16h-3zM19 16L6 6v20z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22 8h3v16h-3zM19 16L6 6v20z'/%3E%3C/svg%3E");
}
.tnm-icon-listen{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 12h5l7-6v20l-7-6H6z'/%3E%3Cpath d='M22 11a7 7 0 0 1 0 10l-2-2a4 4 0 0 0 0-6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 12h5l7-6v20l-7-6H6z'/%3E%3Cpath d='M22 11a7 7 0 0 1 0 10l-2-2a4 4 0 0 0 0-6z'/%3E%3C/svg%3E");
}

.tnm-tempo-control{
  flex:1 1 300px!important;
  min-width:250px!important;
  display:grid!important;
  grid-template-columns:auto minmax(120px,1fr) auto!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:13px!important;
  row-gap:6px!important;
  padding:5px 10px!important;
}
.tnm-tempo-head{display:flex;align-items:center;gap:8px;white-space:nowrap}
.tnm-tempo-head strong{font-size:18px;color:#20262b}
.tnm-tempo-note{font-size:30px;line-height:1;color:#20262b}
.tnm-tempo-control .tempo{width:100%!important;margin:0!important;accent-color:#d8232f!important}
.tnm-tempo-control .bpm{font-size:20px!important;white-space:nowrap!important;color:#20262b!important}
.tnm-tempo-control small{
  grid-column:1 / -1!important;
  color:#778087!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.tnm-refine-status{margin-top:8px!important;color:#667078!important;font-size:13px!important}

@media(max-width:850px){
  .tnm-transport{gap:8px!important;padding:10px!important;flex-wrap:wrap!important}
  .tnm-transport > button{flex:1 1 76px!important;width:auto!important;min-width:72px!important;height:72px!important}
  .tnm-transport-icon{width:24px!important;height:24px!important;flex-basis:24px!important}
  .tnm-tempo-control{flex:1 0 100%!important;min-width:0!important;padding:8px 4px!important}
}
@media(max-width:480px){
  .tnm-transport{padding:8px!important;gap:6px!important}
  .tnm-transport > button{flex:1 1 calc(20% - 6px)!important;min-width:58px!important;height:67px!important;font-size:10px!important;border-radius:11px!important}
  .tnm-transport-icon{width:22px!important;height:22px!important;flex-basis:22px!important}
  .tnm-tempo-control{grid-template-columns:1fr auto!important}
  .tnm-tempo-head{grid-column:1 / -1!important}
  .tnm-tempo-control .tempo{grid-column:1!important}
  .tnm-tempo-control .bpm{grid-column:2!important}
  .tnm-tempo-control small{font-size:11px!important}
}
@media(prefers-color-scheme:dark){
  .tnm-transport{background:#202327!important;border-color:#373c41!important}
  .tnm-transport > button{background:#2b2f34!important;border-color:#454b51!important;color:#f2f4f5!important}
  .tnm-transport > .play{background:#d8232f!important;border-color:#d8232f!important;color:#fff!important}
  .tnm-tempo-head strong,.tnm-tempo-note,.tnm-tempo-control .bpm{color:#f2f4f5!important}
}

/* =========================================================
   4.8.4 — Compact colored transport icons
   Use inline SVG instead of CSS masks so icons render reliably
   in light/dark themes and never become solid squares.
   ========================================================= */
.tnm-transport > button .tnm-transport-icon{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}
.tnm-transport > button .tnm-transport-icon svg{
  display:block!important;
  width:22px!important;
  height:22px!important;
  fill:currentColor!important;
  stroke:none!important;
}
.tnm-transport > button .tnm-icon-return{color:#607d8b!important}
.tnm-transport > button .tnm-icon-play{color:#e53935!important}
.tnm-transport > button .tnm-icon-stop{color:#37474f!important}
.tnm-transport > button .tnm-icon-prev{color:#8e44ad!important}
.tnm-transport > button .tnm-icon-next{color:#1976d2!important}
.tnm-transport > button .tnm-icon-listen{color:#26a69a!important}

/* Keep Play highlighted without making the icon a giant block. */
.tnm-transport > .play .tnm-icon-play{color:#fff!important}
.tnm-transport > .play .tnm-transport-icon svg{width:24px!important;height:24px!important}

@media(max-width:850px){
  .tnm-transport > button .tnm-transport-icon{width:22px!important;height:22px!important;flex-basis:22px!important}
  .tnm-transport > button .tnm-transport-icon svg{width:20px!important;height:20px!important}
}
@media(max-width:480px){
  .tnm-transport > button .tnm-transport-icon{width:20px!important;height:20px!important;flex-basis:20px!important}
  .tnm-transport > button .tnm-transport-icon svg{width:18px!important;height:18px!important}
}

/* =========================================================
   4.8.5 — Hoàn thiện & củng cố UI
   Giữ nguyên logic JS/event; chỉ chuẩn hóa presentation.
   ========================================================= */
.tnm-refine-panel{width:100%;box-sizing:border-box}
.tnm-refine-panel .tnm-transport{
  display:flex!important;
  align-items:stretch!important;
  gap:10px!important;
  padding:14px!important;
  width:100%!important;
  box-sizing:border-box!important;
  border:1px solid #e7eaee!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 7px 24px rgba(22,34,48,.06)!important;
}
.tnm-refine-panel .tnm-transport > button{
  position:relative!important;
  flex:0 0 82px!important;
  width:82px!important;
  min-width:82px!important;
  height:76px!important;
  padding:7px 5px!important;
  margin:0!important;
  border:1px solid #e4e8ed!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#26313b!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  font:600 12px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  cursor:pointer!important;
  box-shadow:0 2px 7px rgba(20,32,44,.04)!important;
  transition:color .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .12s ease!important;
}
.tnm-refine-panel .tnm-transport > button:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 6px 14px rgba(20,32,44,.08)!important;
}
.tnm-refine-panel .tnm-transport > button:active{transform:translateY(0)!important}

/* Compact icons: no square backgrounds, function-specific colors. */
.tnm-refine-panel .tnm-transport-icon{
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}
.tnm-refine-panel .tnm-transport-icon svg{
  width:19px!important;
  height:19px!important;
  display:block!important;
  fill:currentColor!important;
  stroke:none!important;
}

/* Default colors by function */
.tnm-refine-panel .tnm-icon-return{color:#0f9fa7!important}
.tnm-refine-panel .tnm-icon-play{color:#1976f3!important}
.tnm-refine-panel .tnm-icon-stop{color:#626b75!important}
.tnm-refine-panel .tnm-icon-prev{color:#7a45d6!important}
.tnm-refine-panel .tnm-icon-next{color:#08a875!important}
.tnm-refine-panel .tnm-icon-listen{color:#22a88d!important}

/* Click/keyboard focus: only the selected control changes color.
   Do not recolor the other icons. */
.tnm-refine-panel .tnm-transport > button.is-active,
.tnm-refine-panel .tnm-transport > button.active,
.tnm-refine-panel .tnm-transport > button:focus-visible{
  border-color:#1976f3!important;
  box-shadow:0 0 0 2px rgba(25,118,243,.10),0 6px 14px rgba(20,32,44,.08)!important;
}
.tnm-refine-panel .tnm-transport > button.is-active .tnm-transport-icon,
.tnm-refine-panel .tnm-transport > button.active .tnm-transport-icon{
  color:#1976f3!important;
}

/* Phát: blue triangular icon, while only the selected button gets the active outline. */
.tnm-refine-panel .tnm-transport > .play .tnm-icon-play{color:#1976f3!important}
.tnm-refine-panel .tnm-transport > .play.is-active .tnm-icon-play,
.tnm-refine-panel .tnm-transport > .play.active .tnm-icon-play{color:#0b5ed7!important}

/* Hide the old auxiliary Listen button visually, but keep it in DOM for compatibility. */
.tnm-refine-panel .tnm-transport > .listen{display:none!important}

/* Tempo stays in the same row. */
.tnm-refine-panel .tnm-tempo-control{
  flex:1 1 300px!important;
  min-width:250px!important;
  display:grid!important;
  grid-template-columns:auto minmax(120px,1fr) auto!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:12px!important;
  row-gap:5px!important;
  padding:4px 8px!important;
}
.tnm-refine-panel .tnm-tempo-head{display:flex;align-items:center;gap:7px;white-space:nowrap}
.tnm-refine-panel .tnm-tempo-note{font-size:23px!important;line-height:1;color:#202831!important}
.tnm-refine-panel .tnm-tempo-head strong{font-size:16px!important;color:#202831!important}
.tnm-refine-panel .tnm-tempo-control .tempo{
  width:100%!important;
  margin:0!important;
  accent-color:#1976f3!important;
}
.tnm-refine-panel .tnm-tempo-control .bpm{
  font-size:17px!important;
  white-space:nowrap!important;
  color:#202831!important;
}
.tnm-refine-panel .tnm-tempo-control small{
  grid-column:1/-1!important;
  color:#77818a!important;
  font-size:11px!important;
}

/* Mobile */
@media(max-width:850px){
  .tnm-refine-panel .tnm-transport{
    flex-wrap:wrap!important;
    gap:7px!important;
    padding:10px!important;
  }
  .tnm-refine-panel .tnm-transport > button{
    flex:1 1 72px!important;
    width:auto!important;
    min-width:68px!important;
    height:68px!important;
    font-size:11px!important;
  }
  .tnm-refine-panel .tnm-transport-icon{
    width:18px!important;height:18px!important;flex-basis:18px!important;
  }
  .tnm-refine-panel .tnm-transport-icon svg{width:17px!important;height:17px!important}
  .tnm-refine-panel .tnm-tempo-control{
    flex:1 0 100%!important;
    min-width:0!important;
    padding:7px 3px!important;
  }
}
@media(max-width:480px){
  .tnm-refine-panel .tnm-transport > button{
    flex:1 1 calc(20% - 6px)!important;
    min-width:55px!important;
    height:62px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }
  .tnm-refine-panel .tnm-transport-icon{
    width:17px!important;height:17px!important;flex-basis:17px!important;
  }
  .tnm-refine-panel .tnm-transport-icon svg{width:16px!important;height:16px!important}
  .tnm-refine-panel .tnm-tempo-control{
    grid-template-columns:1fr auto!important;
  }
  .tnm-refine-panel .tnm-tempo-head{grid-column:1/-1!important}
  .tnm-refine-panel .tnm-tempo-control .tempo{grid-column:1!important}
  .tnm-refine-panel .tnm-tempo-control .bpm{grid-column:2!important}
}

/* Dark themes */
@media(prefers-color-scheme:dark){
  .tnm-refine-panel .tnm-transport{
    background:#20252a!important;
    border-color:#363d44!important;
  }
  .tnm-refine-panel .tnm-transport > button{
    background:#292f35!important;
    border-color:#444c54!important;
    color:#eef2f5!important;
  }
  .tnm-refine-panel .tnm-tempo-head strong,
  .tnm-refine-panel .tnm-tempo-note,
  .tnm-refine-panel .tnm-tempo-control .bpm{color:#eef2f5!important}
}

/* =========================================================
   4.8.6 — Approved compact Hoàn thiện & củng cố interface
   ========================================================= */
.tnm-refine-panel .tnm-transport{
  display:flex!important;align-items:center!important;
  gap:4px!important;padding:12px 14px!important;
  border:1px solid #e5e9ef!important;border-radius:16px!important;
  background:#fff!important;box-shadow:0 5px 18px rgba(20,32,44,.045)!important;
}
.tnm-refine-panel .tnm-transport > button{
  flex:0 0 74px!important;width:74px!important;min-width:74px!important;
  height:68px!important;padding:6px 4px!important;margin:0!important;
  border:1px solid transparent!important;border-radius:11px!important;
  background:transparent!important;color:#26313b!important;
  box-shadow:none!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;gap:4px!important;
  font:600 11px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
.tnm-refine-panel .tnm-transport > button:hover{
  background:#f7f9fb!important;transform:none!important;box-shadow:none!important;
}
.tnm-refine-panel .tnm-refine-panel .tnm-transport > button:active{transform:none!important}
.tnm-refine-panel .tnm-transport-icon{
  width:14px!important;height:14px!important;flex:0 0 14px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:none!important;-webkit-mask:none!important;mask:none!important;
}
.tnm-refine-panel .tnm-transport-icon svg{
  display:block!important;width:14px!important;height:14px!important;
  fill:currentColor!important;stroke:none!important;
}
.tnm-refine-panel .tnm-icon-return{color:#0b9ca3!important}
.tnm-refine-panel .tnm-icon-play{color:#146ef5!important}
.tnm-refine-panel .tnm-icon-stop{color:#59636d!important}
.tnm-refine-panel .tnm-icon-prev{color:#7440d2!important}
.tnm-refine-panel .tnm-icon-next{color:#00a875!important}
.tnm-refine-panel .tnm-icon-listen{color:#21a68e!important}
.tnm-refine-panel .tnm-transport > button.is-active,
.tnm-refine-panel .tnm-transport > button.active{
  background:#f4f8ff!important;border-color:#1976f3!important;
}
.tnm-refine-panel .tnm-transport > button.is-active .tnm-transport-icon,
.tnm-refine-panel .tnm-transport > button.active .tnm-transport-icon{
  color:#1976f3!important;
}
.tnm-refine-panel .tnm-transport > .play .tnm-icon-play{color:#146ef5!important}
.tnm-refine-panel .tnm-transport > .play.is-active .tnm-icon-play,
.tnm-refine-panel .tnm-transport > .play.active .tnm-icon-play{color:#0a5edb!important}

.tnm-refine-panel .tnm-tempo-control{
  flex:1 1 auto!important;min-width:250px!important;
  display:grid!important;grid-template-columns:auto minmax(120px,1fr) auto!important;
  grid-template-rows:auto auto!important;align-items:center!important;
  column-gap:10px!important;row-gap:3px!important;
  margin-left:8px!important;padding-left:18px!important;
  border-left:1px solid #e5e9ef!important;
}
.tnm-refine-panel .tnm-tempo-note{font-size:20px!important}
.tnm-refine-panel .tnm-tempo-head strong{font-size:15px!important}
.tnm-refine-panel .tnm-tempo-control .bpm{font-size:16px!important}
.tnm-refine-panel .tnm-tempo-control small{font-size:10px!important}

@media(max-width:850px){
  .tnm-refine-panel .tnm-transport{gap:2px!important;padding:9px!important;flex-wrap:wrap!important}
  .tnm-refine-panel .tnm-transport > button{
    flex:1 1 62px!important;width:auto!important;min-width:58px!important;height:58px!important;
  }
  .tnm-refine-panel .tnm-transport-icon{width:13px!important;height:13px!important;flex-basis:13px!important}
  .tnm-refine-panel .tnm-transport-icon svg{width:13px!important;height:13px!important}
  .tnm-refine-panel .tnm-tempo-control{
    flex:1 0 100%!important;min-width:0!important;margin-left:0!important;
    margin-top:4px!important;padding:8px 0 0!important;border-left:0!important;
    border-top:1px solid #e5e9ef!important;
  }
}
@media(max-width:480px){
  .tnm-refine-panel .tnm-transport > button{
    flex:1 1 calc(20% - 4px)!important;min-width:48px!important;height:54px!important;
    font-size:9px!important;
  }
  .tnm-refine-panel .tnm-transport-icon{width:12px!important;height:12px!important;flex-basis:12px!important}
  .tnm-refine-panel .tnm-transport-icon svg{width:12px!important;height:12px!important}
}

/* 4.8.7 — Interactive score cursor */
.tnm-practice-score .osmd-cursor,
.tnm-practice-score .osmd-cursor-line,
.tnm-practice-score .cursor{
  pointer-events:none!important;
  z-index:5!important;
}
.tnm-refine-panel .tnm-transport > button.active{
  box-shadow:0 0 0 2px rgba(25,118,243,.10)!important;
}

/* 4.8.9 score transport cursor: never auto-scroll the page */
.tnm-practice-score .osmd-cursor,
.tnm-practice-score .osmd-cursor-line,
.tnm-practice-score .cursor{
  pointer-events:none!important;
}
.tnm-refine-panel .tnm-transport > button.active{
  background:#f4f8ff!important;
  border-color:#1976f3!important;
}

/* 4.9.0 — note cursor, animal follower and metronome */
.tnm-score-note-marker{
 position:absolute;top:0;left:0;width:24px;height:30px;z-index:20;
 pointer-events:none;display:none;transition:left .08s linear,top .08s linear;
}
.tnm-score-note-marker.show{display:block}
.tnm-score-caret{
 display:block;width:2px;height:27px;margin:auto;border-radius:2px;
 background:#1976f3;box-shadow:0 0 5px rgba(25,118,243,.35);
}
.tnm-score-animal{display:none;position:absolute;left:-5px;top:-19px;font-size:14px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.tnm-score-animal.show{display:block;animation:tnm-note-hop .18s ease-in-out infinite alternate}
@keyframes tnm-note-hop{from{transform:translateY(2px)}to{transform:translateY(-3px)}}
.tnm-metronome-tools{display:flex;align-items:center;gap:8px;white-space:nowrap}
.tnm-metronome-toggle{
 border:1px solid #dfe4ea;background:#fff;border-radius:9px;padding:6px 9px;
 font-size:11px;display:flex;align-items:center;gap:5px;cursor:pointer;color:#39434c;
}
.tnm-metronome-toggle span{font-size:15px;color:#e08b24}
.tnm-metronome-toggle.active{border-color:#e08b24;background:#fff7e9;color:#b86b00}
.tnm-animal-toggle{font-size:10px;color:#69737c;cursor:pointer}
@media(max-width:850px){
 .tnm-metronome-tools{width:100%;justify-content:flex-start}
 .tnm-score-note-marker{width:20px}
 .tnm-score-caret{height:23px}
}

/* 4.9.1 — minimal metronome + monkey follower */
.tnm-metronome-tools{display:flex!important;align-items:center!important;gap:7px!important;white-space:nowrap!important}
.tnm-metronome-toggle{
  width:30px!important;height:30px!important;padding:0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid #dfe4ea!important;border-radius:8px!important;
  background:#fff!important;color:#e39a28!important;cursor:pointer!important;
  font-size:18px!important;line-height:1!important;
}
.tnm-metronome-toggle.active{
  color:#fff!important;background:#e39a28!important;border-color:#e39a28!important;
  box-shadow:0 0 0 2px rgba(227,154,40,.14)!important;
}
.tnm-monkey-toggle{
  position:relative!important;width:30px!important;height:30px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;border-radius:8px!important;
}
.tnm-monkey-toggle input{position:absolute!important;opacity:0!important;pointer-events:none!important}
.tnm-monkey-icon{
  font-size:17px!important;line-height:1!important;opacity:.48!important;
  filter:grayscale(1)!important;transition:transform .15s,opacity .15s,filter .15s!important;
}
.tnm-monkey-toggle input:checked + .tnm-monkey-icon{
  opacity:1!important;filter:none!important;transform:scale(1.05)!important;
}
.tnm-score-monkey{
  display:none;position:absolute;left:-4px;top:-17px;
  font-size:14px;line-height:1;z-index:21;pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));
}
.tnm-score-monkey.show{
  display:block;animation:tnm-monkey-hop .18s ease-in-out infinite alternate;
}
@keyframes tnm-monkey-hop{
  from{transform:translateY(2px) rotate(-3deg)}
  to{transform:translateY(-4px) rotate(3deg)}
}
@media(max-width:480px){
  .tnm-metronome-toggle,.tnm-monkey-toggle{width:27px!important;height:27px!important}
  .tnm-monkey-icon{font-size:15px!important}
  .tnm-score-monkey{font-size:12px!important;top:-15px!important}
}

/* 4.9.4 — responsive piano input */
.tnm-piano-keys, .tnm-piano-keys button{touch-action:none!important;-webkit-tap-highlight-color:transparent!important}

/* 4.9.6 — Synthesia-style score follower: hide blue cursor, use monkey */
.tnm-practice-score .osmd-cursor,
.tnm-practice-score .osmd-cursor-line,
.tnm-practice-score .cursor{
  opacity:0!important;
  visibility:hidden!important;
}
.tnm-practice-score .tnm-osmd{position:relative!important}
.tnm-score-monkey-live{
  position:absolute!important;
  z-index:50!important;
  display:none;
  width:24px!important;height:24px!important;
  font-size:20px!important;line-height:24px!important;
  text-align:center!important;
  pointer-events:none!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.18));
  transform-origin:50% 100%;
  transition:left .06s linear,top .06s linear;
}
.tnm-score-monkey-live.show{display:block!important}
.tnm-score-monkey-live.hop{animation:tnm-synthesia-monkey-hop .18s ease-in-out 2 alternate}
@keyframes tnm-synthesia-monkey-hop{
  from{transform:translateY(2px) rotate(-4deg) scale(.96)}
  to{transform:translateY(-6px) rotate(4deg) scale(1.04)}
}
@media(max-width:600px){
  .tnm-score-monkey-live{width:20px!important;height:20px!important;font-size:17px!important;line-height:20px!important}
}

/* 4.9.10 — cheerful monkey follower */
.tnm-score-monkey-live{
  width:30px!important;height:34px!important;
  margin:0!important;
  display:none;
  position:absolute!important;
  z-index:60!important;
  pointer-events:none!important;
  transform-origin:50% 100%;
}
.tnm-score-monkey-live svg{width:100%;height:100%;overflow:visible}
.tnm-score-monkey-live .ear{fill:#9b5b32;stroke:#63371f;stroke-width:1.5}
.tnm-score-monkey-live .head{fill:#b8733f;stroke:#63371f;stroke-width:1.5}
.tnm-score-monkey-live .muzzle{fill:#f2c39a}
.tnm-score-monkey-live .eye{fill:#1e1a18}
.tnm-score-monkey-live .smile{fill:none;stroke:#382018;stroke-width:2.2;stroke-linecap:round}
.tnm-score-monkey-live .body{fill:#8e4e2c;stroke:#63371f;stroke-width:1.5}
.tnm-score-monkey-live .limb{fill:none;stroke:#63371f;stroke-width:4;stroke-linecap:round}
.tnm-score-monkey-live.show{display:block!important}
.tnm-score-monkey-live.hop{animation:tnm-monkey-hop .22s cubic-bezier(.3,.8,.4,1) 1}
@keyframes tnm-monkey-hop{
  0%{transform:translateY(2px) rotate(0deg) scale(.96)}
  45%{transform:translateY(-9px) rotate(-6deg) scale(1.06)}
  75%{transform:translateY(-5px) rotate(6deg) scale(1.03)}
  100%{transform:translateY(1px) rotate(0deg) scale(1)}
}