.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%}
}