*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif;background:#3f4247;color:#222}
body{display:block;margin:0;padding:0;overflow-x:hidden}
button,select,textarea{font:inherit}
.app-window{width:100vw;min-height:100vh;background:#d7d7d7;border:0;box-shadow:none}
.titlebar{height:34px;background:linear-gradient(#4d4d4d,#242424);color:#f2f2f2;display:flex;align-items:center;padding:0 7px;gap:8px;font-size:12px;border-bottom:1px solid #111}
.window-brand{display:flex;align-items:center;gap:6px;font-weight:bold}.app-icon{width:20px;height:20px;border-radius:3px;background:#eee;color:#222;display:grid;place-items:center;font-size:12px}
.window-title{position:absolute;left:50%;transform:translateX(-50%);opacity:.9}.window-controls{margin-left:auto;display:flex;gap:14px;font-size:15px;color:#ddd}.window-controls span:last-child{color:#fff}
.toolbar{height:52px;background:linear-gradient(#f9f9f9,#dedede);border-bottom:1px solid #aaa;display:flex;align-items:center;padding:5px 8px;gap:6px;box-shadow:inset 0 1px #fff}
.toolbar-icon{width:32px;height:30px;background:linear-gradient(#fff,#ddd);border:1px solid #bbb;border-radius:3px;color:#444}.toolbar-icon:hover{background:#eef5ff}
.toolbar-sep{height:27px;width:1px;background:#aaa;margin:0 4px}.toolbar-spacer{flex:1}
.combo{height:31px;display:flex;align-items:center;gap:7px;padding:0 8px;min-width:205px;border:1px solid #b6b6b6;background:#fff;border-radius:3px;font-size:12px}.combo.wide{min-width:265px}.combo.tiny{min-width:90px}.combo b{margin-left:auto;font-size:9px;color:#777}
.play-btn{width:38px;height:32px;border:1px solid #969696;border-radius:3px;background:linear-gradient(#fbfbfb,#d3d3d3);font-size:16px;color:#333}
.toolbar-score{font-size:11px;color:#555;padding:0 6px}.toolbar-score b{color:#111}

.lesson-strip{height:37px;background:#ededed;border-bottom:1px solid #aaa;display:flex;align-items:center;gap:6px;padding:4px 9px;font-size:10px;color:#555}.lesson-strip select{height:27px;border:1px solid #aaa;background:#fff;font-size:11px;padding:0 4px}.strip-btn{height:27px;border:1px solid #aaa;background:linear-gradient(#fff,#ddd);border-radius:3px;padding:0 9px;font-size:10px}.strip-btn:hover{background:#eef4fb}.strip-spacer{flex:1}.mini-wpm,.mini-acc{font-size:10px;color:#666}.mini-wpm b,.mini-acc b{color:#111}

.legacy-main{padding:0;background:#b7b7b7;min-height:calc(100vh - 86px)}
.practice-scene{height:calc(100vh - 390px);min-height:300px;max-height:510px;position:relative;overflow:hidden;border-bottom:1px solid #8d8d8d;background:
linear-gradient(180deg,#9bddff 0%,#caeffb 28%,#eefbd6 64%,#fff7b5 100%)}
.practice-scene:after{content:"";position:absolute;inset:auto 0 0 0;height:15px;background:linear-gradient(#d9d93c,#eee660)}
.cloud{position:absolute;background:#fff;opacity:.75;border-radius:99px;filter:blur(.2px)}.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud1{width:100px;height:16px;left:35px;top:56px}.cloud1:before{width:34px;height:34px;left:15px;top:-18px}.cloud1:after{width:46px;height:26px;left:47px;top:-12px}.cloud2{width:95px;height:14px;left:18px;top:90px}.cloud2:before{width:31px;height:28px;left:10px;top:-14px}.cloud2:after{width:38px;height:23px;left:49px;top:-10px}.cloud3{width:70px;height:12px;right:24px;top:62px}.cloud3:before{width:28px;height:27px;left:8px;top:-14px}.cloud3:after{width:32px;height:22px;left:35px;top:-9px}
.flower,.butterfly,.red-bird{position:absolute;z-index:2;user-select:none}.flower-left{left:4px;bottom:8px;font-size:63px}.flower-right{right:8px;bottom:4px;font-size:66px}.butterfly{left:25px;bottom:92px;font-size:30px}.red-bird{right:22px;top:70px;font-size:27px;transform:scaleX(-1)}
.typing-line-wrap{position:absolute;left:0;right:0;top:93px;text-align:center;z-index:4}.typing-line{display:flex;align-items:center;justify-content:center;gap:6px;min-height:112px;max-width:96%;margin:0 auto;color:#111;font:700 clamp(42px,4vw,68px)/1 "Times New Roman",serif;letter-spacing:0;text-shadow:0 1px #fff;flex-wrap:wrap}.typing-line span{display:inline-grid;place-items:center;min-width:34px;height:60px;padding:2px 4px;text-align:center;border:2px solid transparent;border-radius:2px}.typing-line span.current{border:2px solid #222;background:#fff;box-shadow:0 1px 0 #888 inset,0 0 0 2px #fff6;line-height:.85;animation:cursorPulse .8s infinite}.typing-line span.correct{color:#0c7b45;background:#d8f6e5;border-color:#74c79c}.typing-line span.wrong{color:#c60000;background:#ffd9dc;border-color:#ea777d;text-decoration:underline;text-decoration-thickness:2px}.typing-line span.pending{color:#111;background:transparent;border-color:transparent}
.scene-ground{position:absolute;bottom:0;left:0;right:0;height:13px;border-top:2px solid #d1d13a;background:#f0ed75}
.instruction-bar{height:42px;background:linear-gradient(#fff,#eee);border-bottom:1px solid #aaa;display:flex;align-items:center;justify-content:center;gap:14px;font-size:12px;font-weight:bold;color:#333;position:relative}.instruction-bar .speaker{position:absolute;right:10px;color:#777}.instruction-bar #statusText{position:absolute;left:10px;color:#888;font-weight:normal;font-size:10px}

.lower-panel{min-height:300px;background:#a4a4a4;border-bottom:1px solid #666;display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:12px;padding:10px 24px 12px}
.keyboard-and-hands{position:relative;background:#989898;border:1px solid #777;padding:6px;overflow:hidden}
.legacy-keyboard{position:relative;z-index:1;margin:0 auto;width:min(90%,1060px);min-width:680px;max-width:1060px}
.key-row{display:flex;justify-content:center;gap:3px;margin-bottom:3px}.key{height:40px;min-width:44px;border:1px solid #d17d00;border-radius:2px;color:#6b3d00;font:bold 10px Tahoma;background:#f6a623;box-shadow:inset 0 1px #ffd27d,0 1px 1px #8a5808;position:relative}.key.wide{min-width:82px}.key.xwide{min-width:110px}.key.space{min-width:340px}
.key.f1{background:#ffd320}.key.f2{background:#70df58}.key.f3{background:#1799eb;color:#08395a}.key.f4{background:#ff6f3d}.key.f5{background:#c1c1c1}.key.target{outline:3px solid #fff;box-shadow:0 0 0 2px #333,0 1px 4px #000}.key.active{transform:translateY(1px);filter:brightness(.9)}
.hands-overlay{position:absolute;left:0;right:0;bottom:-2px;height:205px;z-index:2;pointer-events:none}.hands-svg{width:100%;height:100%}.hands-svg .hand-left,.hands-svg .hand-right{fill:#c5c8c9;stroke:#f7f7f7;stroke-width:4;filter:drop-shadow(0 2px 1px #666)}.hands-svg .hand-left{fill:#c7cbcc}.hands-svg .hand-right{fill:#c7cbcc}
.side-numpad{display:flex;flex-direction:column;gap:8px}.side-numpad>div{background:#bfc0c0;border:1px solid #7e7e7e;padding:8px}.side-numpad #statsBox{font-size:10px}.side-numpad #statsBox div{display:flex;justify-content:space-between;padding:5px 2px;border-bottom:1px solid #a5a5a5}.side-numpad #statsBox div:last-child{border-bottom:0}.side-numpad span{color:#666}.side-numpad b{color:#222}
.finger-guide{text-align:center;min-height:110px}.guide-title{text-transform:uppercase;font-size:9px;color:#666;font-weight:bold}.guide-key{width:54px;height:54px;margin:8px auto 6px;border:3px solid #333;background:#fff;display:grid;place-items:center;font:bold 28px Georgia;border-radius:2px}.finger-guide #fingerHint{font-size:10px;color:#333}
.legacy-bottom{height:40px;background:#d3d3d3;border-top:1px solid #eee;display:flex;align-items:center;gap:12px;padding:5px 10px;font-size:10px;color:#666}.progress-legacy{height:7px;background:#aaa;flex:1;border:1px solid #888}.progress-legacy i{display:block;height:100%;width:0;background:#4c9bea}.target-note{white-space:nowrap}
.hidden-input{position:absolute;width:1px;height:1px;opacity:0;left:-10000px;top:-10000px}

dialog{border:0;border-radius:4px;box-shadow:0 10px 35px #0007;padding:0}.dialog-card{padding:20px;min-width:330px}.dialog-card h3{margin:0 0 6px}.dialog-card p{color:#666;font-size:12px}.dialog-actions{display:flex;justify-content:flex-end;gap:6px}
.danger-btn{height:27px;background:#c74343;color:#fff;border:1px solid #a53a3a;border-radius:3px;padding:0 12px}

@media(max-width:900px){body{padding:0}.app-window{width:100%;border:0}.window-title{display:none}.lesson-strip{flex-wrap:wrap;height:auto}.lower-panel{grid-template-columns:1fr}.side-numpad{display:grid;grid-template-columns:1fr 1fr}.practice-scene{height:310px}.typing-line{font-size:44px;gap:12px;letter-spacing:4px}.legacy-keyboard{width:100%}}
@media(max-width:620px){.toolbar .combo,.toolbar .toolbar-score,.toolbar-icon:nth-child(2),.toolbar-icon:nth-child(3),.toolbar-sep{display:none}.practice-scene{height:230px}.typing-line{font-size:31px;gap:5px;letter-spacing:1px}.typing-line span{min-width:25px}.instruction-bar{font-size:9px}.lower-panel{padding:7px}.key{min-width:28px;height:29px;font-size:8px}.key.wide{min-width:48px}.key.xwide{min-width:70px}.key.space{min-width:150px}.hands-overlay{height:120px}}

/* Fullscreen/reference refinements */
.practice-scene{display:block}
.typing-line-wrap{top:calc(50% - 58px)}
.typing-line span{font-family:"Times New Roman",serif}
.instruction-bar{position:relative;z-index:9}
.lower-panel{grid-template-columns:minmax(0,1fr) 190px}
@media(min-height:760px){
  .practice-scene{height:430px}
  .typing-line-wrap{top:120px}
}
@media(max-width:1000px){
  .legacy-keyboard{min-width:650px}
}
@media(max-width:700px){
  .legacy-keyboard{min-width:560px}
  .lower-panel{overflow-x:auto}
}

@keyframes cursorPulse{0%,100%{box-shadow:0 1px 0 #888 inset,0 0 0 2px #fff6}50%{box-shadow:0 1px 0 #888 inset,0 0 0 4px #2b8fff55}}

.typing-status-row{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:96%;margin:0 auto 4px;color:#505b64;font-size:10px;font-weight:bold}
.typing-legend{display:flex;flex-wrap:wrap;gap:10px}
.legend-item{display:flex;align-items:center;gap:4px}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:2px;border:1px solid #888}
.correct-dot{background:#74c79c;border-color:#24875a}.wrong-dot{background:#ec7c83;border-color:#b63840}.current-dot{background:#fff;border:2px solid #222}.pending-dot{background:#cfd3d7;border-color:#999}
#charProgress{font-variant-numeric:tabular-nums;white-space:nowrap}
.answer-status{position:absolute;right:55px;font-size:10px;font-weight:bold;padding:3px 7px;border-radius:3px;background:#eef4f8;color:#5d6972}
.answer-status.good{background:#dbf5e7;color:#167647;border:1px solid #9bd0b2}
.answer-status.bad{background:#ffe1e3;color:#a6272e;border:1px solid #e99399}
.answer-status.neutral{background:#f0f2f4;color:#6b757c;border:1px solid #cfd4d9}

.finger-guide{min-height:165px;text-align:center}
.guide-key{width:68px;height:68px;margin:7px auto 4px;border:3px solid #222;background:#fff;display:grid;place-items:center;font:bold 30px Georgia;border-radius:3px;box-shadow:0 0 0 4px #2b8fff33,0 5px 10px #0002}
.finger-guide .finger-name{font-size:14px;font-weight:bold;color:#222;margin-top:2px}
.finger-action{display:inline-block;margin-top:6px;padding:4px 7px;background:#e7f1ff;border:1px solid #8fb9e8;color:#165a9d;border-radius:3px;font-size:10px;font-weight:bold}
.return-home{font-size:9px;color:#6b7074;margin-top:7px}

.key.target{animation:keyPulse .75s infinite;outline:3px solid #fff;box-shadow:0 0 0 2px #1f1f1f,0 0 14px #fff}
@keyframes keyPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
.key.f4.target{box-shadow:0 0 0 2px #222,0 0 18px #ff6f3d}

.lower-panel{align-items:stretch}
.keyboard-and-hands{min-height:285px}

/* Finger color teaching system */
.finger-color-guide{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  margin:7px auto 0;
  width:min(86%,1020px);
  font-size:9px;
  font-weight:bold;
}
.finger-color-guide span{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 6px;
  border:1px solid #aaa;
  border-radius:3px;
  background:#ededed;
}
.finger-color-guide i{display:inline-block;width:12px;height:12px;border-radius:2px;border:1px solid #555}
.finger-color-guide .c-pinky{background:#ffd21c}
.finger-color-guide .c-ring{background:#63dc4f}
.finger-color-guide .c-middle{background:#26a7eb}
.finger-color-guide .c-index{background:#ff7043}
.finger-color-guide .c-thumb{background:#bdbdbd}

.key.f1{background:#ffd21c !important;border-color:#c58e00 !important}
.key.f2{background:#63dc4f !important;border-color:#318c2b !important}
.key.f3{background:#26a7eb !important;border-color:#146f9f !important;color:#083d58 !important}
.key.f4{background:#ff7043 !important;border-color:#ae4425 !important;color:#5b1b0d !important}
.key.f5{background:#c8c8c8 !important;border-color:#888 !important}
.key.target{
  animation:keyPulse .72s infinite;
  outline:4px solid #fff !important;
  box-shadow:0 0 0 3px #222,0 0 18px rgba(255,255,255,.9) !important;
  z-index:5;
}
.key.target.f1{box-shadow:0 0 0 3px #222,0 0 20px #ffd21c !important}
.key.target.f2{box-shadow:0 0 0 3px #222,0 0 20px #63dc4f !important}
.key.target.f3{box-shadow:0 0 0 3px #222,0 0 20px #26a7eb !important}
.key.target.f4{box-shadow:0 0 0 3px #222,0 0 20px #ff7043 !important}

.keyboard-and-hands{
  position:relative;
  overflow:hidden;
}
.keyboard-and-hands:after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#ffd21c 0 20%,#63dc4f 20% 40%,#26a7eb 40% 60%,#ff7043 60% 80%,#c8c8c8 80% 100%);
  opacity:.8;
}
.hands-overlay{
  left:auto;
  right:10px;
  bottom:4px;
  width:310px;
  height:150px;
  opacity:.28;
  z-index:2;
  transform:scale(.78);
  transform-origin:bottom right;
}
.hands-svg{opacity:.95}
.hands-overlay .hand-left,.hands-overlay .hand-right{
  fill:#aeb4b8;
  stroke:#fff;
  stroke-width:4;
}
#fingerGuide{
  border:2px solid #777;
  background:#f2f2f2;
  box-shadow:inset 0 0 0 2px #fff;
}
#fingerGuide .guide-key{
  font-size:34px;
  font-weight:bold;
}
#fingerGuide[data-color="f1"] .guide-key{background:#ffd21c;border-color:#ac7c00}
#fingerGuide[data-color="f2"] .guide-key{background:#63dc4f;border-color:#398a30}
#fingerGuide[data-color="f3"] .guide-key{background:#26a7eb;border-color:#15658e}
#fingerGuide[data-color="f4"] .guide-key{background:#ff7043;border-color:#9d3d22}
#fingerGuide[data-color="f5"] .guide-key{background:#c8c8c8;border-color:#777}
.finger-action{font-size:11px}

/* ===== RapidTyping-style large hands ===== */
.keyboard-and-hands{position:relative;overflow:hidden}
.hands-overlay{
  position:absolute;
  left:50%;
  bottom:-4px;
  transform:translateX(-50%);
  width:min(820px,78%);
  height:230px;
  z-index:4;
  pointer-events:none;
  opacity:1;
}
.hands-svg{width:100%;height:100%;display:block}
.hand-group .palm,
.hand-group .finger,
.hand-group .thumb{
  stroke:#f7f7f7;
  stroke-width:4;
  stroke-linejoin:round;
  stroke-linecap:round;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
.hand-group .palm{fill:#c9cdcf}
.hand-group .finger,
.hand-group .thumb{fill:#bfc4c6;transition:fill .18s,filter .18s,transform .18s}
.hand-left,.hand-right{transform-origin:center bottom}
.hand-left{transform:translateX(-25px)}
.hand-right{transform:translateX(25px)}

.hand-left .finger-lp,.hand-right .finger-rp{fill:#ffd21c}
.hand-left .finger-lr,.hand-right .finger-rr{fill:#63dc4f}
.hand-left .finger-lm,.hand-right .finger-rm{fill:#26a7eb}
.hand-left .finger-li,.hand-right .finger-ri{fill:#ff7043}
.hand-group .thumb{fill:#c8c8c8}

.hand-group .finger.active,
.hand-group .thumb.active{
  filter:drop-shadow(0 0 7px rgba(255,255,255,.95)) drop-shadow(0 2px 2px rgba(0,0,0,.4));
  stroke:#fff;
  stroke-width:5;
}
.hand-group .finger-lp.active,.hand-group .finger-rp.active{fill:#ffe85d}
.hand-group .finger-lr.active,.hand-group .finger-rr.active{fill:#84f66d}
.hand-group .finger-lm.active,.hand-group .finger-rm.active{fill:#6bc5ff}
.hand-group .finger-li.active,.hand-group .finger-ri.active{fill:#ff9677}
.hand-group .thumb.active{fill:#e2e2e2}

.finger-target-line{
  position:absolute;
  width:4px;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 7px rgba(0,0,0,.25);
  transform-origin:bottom center;
  z-index:6;
  display:none;
}
.finger-target-dot{
  position:absolute;
  width:17px;height:17px;border-radius:50%;
  background:#fff;border:3px solid #222;
  box-shadow:0 0 10px rgba(255,255,255,.9);
  z-index:7;
  display:none;
}
.finger-coach-arrow{
  position:absolute;
  z-index:7;
  font:900 13px/1 Tahoma,Arial,sans-serif;
  color:#111;
  background:#fff;
  border:2px solid #222;
  border-radius:4px;
  padding:4px 7px;
  box-shadow:0 2px 7px rgba(0,0,0,.25);
  display:none;
}

.legacy-keyboard{position:relative;z-index:2}
.hands-overlay{mix-blend-mode:normal}
@media(max-width:900px){
  .hands-overlay{width:720px;max-width:96%;height:210px}
}

/* ===== Transparent-outline RapidTyping hands ===== */
.hands-overlay{
  position:absolute;
  left:50%;
  bottom:-5px;
  transform:translateX(-50%);
  width:min(900px,84%);
  height:215px;
  z-index:4;
  pointer-events:none;
  opacity:1;
}
.hands-svg{width:100%;height:100%;display:block;overflow:visible}
.hand-group .palm,
.hand-group .finger,
.hand-group .thumb{
  fill:rgba(255,255,255,0.05);
  stroke:#d7d7d7;
  stroke-width:5;
  stroke-linejoin:round;
  stroke-linecap:round;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.42));
  transition:stroke .15s,stroke-width .15s,fill .15s,filter .15s;
}
/* Only the currently required finger receives a color. */
.hand-group .finger,
.hand-group .thumb{stroke:#e6e6e6}
.hand-group [data-finger].active{
  fill:rgba(255,255,255,0.08);
  stroke-width:8;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.hand-group [data-finger="pinkL"].active,
.hand-group [data-finger="pinkR"].active{stroke:#ffd21c}
.hand-group [data-finger="ringL"].active,
.hand-group [data-finger="ringR"].active{stroke:#63dc4f}
.hand-group [data-finger="midL"].active,
.hand-group [data-finger="midR"].active{stroke:#26a7eb}
.hand-group [data-finger="indexL"].active,
.hand-group [data-finger="indexR"].active{stroke:#ff7043}
.hand-group [data-finger="thumb"].active{stroke:#bdbdbd}

.hand-group .palm{
  stroke:#f0f0f0;
  fill:rgba(250,250,250,0.025);
}
.hand-group .palm.active{
  stroke:#f0f0f0;
}

/* Keyboard remains readable beneath transparent guide hands. */
.keyboard-and-hands{background:#9e9e9e}
.hands-overlay .finger,.hands-overlay .thumb{opacity:.92}

.combo-keys{
  font-size:10px;
  font-weight:bold;
  color:#4e5860;
  margin-top:2px;
  min-height:14px;
}
.key.target.secondary-target{
  outline:2px dashed #fff !important;
}
#fingerGuide.multi{
  border-color:#333;
}

/* ===== RapidTyping-style horizontal typing marquee ===== */
.typing-viewport{
  position:relative;
  width:100%;
  height:165px;
  overflow:hidden;
  margin-top:2px;
}
.typing-line{
  position:absolute;
  inset:0;
  width:100%;
  max-width:none;
  margin:0;
  min-height:0;
  height:100%;
  display:block;
  overflow:hidden;
  white-space:nowrap;
  padding:0;
}
.typing-track{
  position:absolute;
  left:0;
  top:50%;
  display:flex;
  align-items:center;
  width:max-content;
  height:74px;
  gap:4px;
  transform:translate3d(0,-50%,0);
  transition:transform .16s ease-out;
  will-change:transform;
}
.typing-track span{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:42px;
  height:58px;
  margin:0;
  padding:0;
  border:2px solid transparent;
  border-radius:2px;
  font:700 clamp(40px,3.8vw,66px)/1 "Times New Roman",serif;
  letter-spacing:0;
  text-shadow:0 1px #fff;
}
.typing-track span.correct{
  color:#087743;
  background:#d8f6e5;
  border-color:#72c99b;
}
.typing-track span.wrong{
  color:#bd171e;
  background:#ffd8dc;
  border-color:#e57980;
  text-decoration:underline;
}
.typing-track span.current{
  color:#111;
  background:#fff;
  border-color:#222;
  box-shadow:0 1px 0 #888 inset;
  animation:cursorPulse .8s infinite;
}
.typing-track span.pending{
  color:#111;
  background:transparent;
  border-color:transparent;
}
.typing-track span.space-char{
  width:20px;
}
.typing-cursor-line{
  position:absolute;
  top:21px;
  bottom:21px;
  width:2px;
  left:29%;
  background:#1a1a1a;
  opacity:.18;
  pointer-events:none;
}
.typing-viewport:after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;
  width:170px;
  background:linear-gradient(90deg,rgba(255,247,181,.95),rgba(255,247,181,0));
  pointer-events:none;
}
.typing-viewport:before{
  content:"";
  position:absolute;
  top:0;bottom:0;right:0;
  width:120px;
  background:linear-gradient(270deg,rgba(255,247,181,.95),rgba(255,247,181,0));
  pointer-events:none;
  z-index:1;
}

/* More space between the hands so each hand reads separately. */
.hands-overlay{
  width:min(900px,88%);
  height:215px;
}
.hand-left{transform:translateX(-115px)}
.hand-right{transform:translateX(115px)}

/* ===== Clean text viewport: no side gradient boxes ===== */
.typing-viewport::before,
.typing-viewport::after{
  display:none !important;
  content:none !important;
}
.typing-viewport{
  background:transparent;
}
.typing-track{
  filter:none;
}

.typing-legend{
  background:transparent;
}
.typing-status-row{
  background:transparent;
  border:0;
}

/* ===== Comfortable text margins ===== */
.typing-viewport{
  width:calc(100% - 180px);
  margin-left:90px;
  margin-right:90px;
}
.typing-track{
  left:0;
}
@media(max-width:900px){
  .typing-viewport{
    width:calc(100% - 100px);
    margin-left:50px;
    margin-right:50px;
  }
}
@media(max-width:600px){
  .typing-viewport{
    width:calc(100% - 50px);
    margin-left:25px;
    margin-right:25px;
  }
}

/* =========================================================
   V12 POLISHED UI
   ========================================================= */
body{
  background:#e7edf3;
  color:#1c2732;
}
.app-window{
  background:#e7edf3;
  border:0;
  box-shadow:0 16px 45px rgba(16,33,48,.18);
}
.titlebar{
  height:52px;
  padding:0 14px;
  background:linear-gradient(135deg,#16334c,#234c6a);
  border-bottom:1px solid #10283b;
}
.window-brand{
  gap:9px;
  min-width:230px;
}
.window-brand .app-icon{
  width:28px;
  height:28px;
  border-radius:8px;
  background:#fff;
  color:#19364f;
  font-size:16px;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.window-brand b{
  display:block;
  font-size:13px;
  color:#fff;
  letter-spacing:.01em;
}
.window-brand small{
  display:block;
  margin-top:1px;
  font-size:9px;
  color:#bad0e2;
}
.window-title{
  color:#dbe9f5;
  font-size:11px;
  font-weight:700;
}
.window-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  color:#d3e0eb;
  font-size:9px;
}
.online-dot{
  width:8px;height:8px;border-radius:50%;
  background:#55d17f;
  box-shadow:0 0 10px rgba(85,209,127,.6);
}
.window-btn{
  width:28px;height:26px;border:1px solid rgba(255,255,255,.14);
  border-radius:6px;background:rgba(255,255,255,.07);
  color:#fff;font-size:13px;
}
.window-btn:hover{background:rgba(255,255,255,.13)}
.window-btn.close:hover{background:#d64d5a}

.modern-toolbar{
  height:70px;
  padding:8px 12px;
  gap:10px;
  background:rgba(250,252,255,.96);
  border-bottom:1px solid #c7d2dc;
  box-shadow:0 5px 16px rgba(23,44,60,.05);
}
.toolbar-group{display:flex;align-items:center;gap:8px}
.tool-card{
  height:42px;
  border:1px solid #ccd7e0;
  border-radius:10px;
  background:#fff;
  color:#2c3e4d;
  box-shadow:0 3px 9px rgba(28,53,72,.05);
  transition:.15s ease;
}
.tool-card:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(28,53,72,.09)}
.icon-tool{
  width:42px;
  font-size:18px;
}
.play-modern{
  padding:0 15px;
  border-color:#1878e8;
  background:linear-gradient(180deg,#2389ff,#1573df);
  color:#fff;
  font-weight:800;
}
.play-modern span{font-size:11px;margin-left:4px}
.soft-tool{
  padding:0 11px;
  font-size:10px;
  font-weight:800;
}
.select-card{
  height:48px;
  min-width:235px;
  padding:5px 9px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
  background:#fff;
  border:1px solid #ccd7e0;
  border-radius:10px;
  box-shadow:0 3px 9px rgba(28,53,72,.04);
}
.select-card span{
  font-size:8px;
  letter-spacing:.12em;
  font-weight:900;
  color:#8a98a5;
}
.select-card select{
  border:0;
  outline:none;
  background:transparent;
  color:#2b3d4c;
  font-size:11px;
  font-weight:800;
}
.lesson-select-card{min-width:320px}
.timer-card{
  height:42px;
  padding:0 11px;
  display:flex;
  align-items:center;
  gap:7px;
  background:#f6f9fc;
  border:1px solid #d2dce4;
  border-radius:10px;
}
.timer-icon{font-size:15px}
.timer-card small{
  display:block;
  font-size:7px;
  color:#8a98a5;
  letter-spacing:.08em;
}
.timer-card b{font-size:12px}
.top-metric{
  min-width:48px;
  text-align:right;
  padding-right:2px;
}
.top-metric small{
  display:block;font-size:7px;letter-spacing:.08em;color:#98a4af;
}
.top-metric b{font-size:12px;color:#1f6fc6}
.modern-strip{
  height:44px;
  background:#f7fafc;
  border-bottom:1px solid #cad5df;
  padding:4px 10px;
}
.modern-strip .strip-btn{
  border-radius:8px;
  font-weight:700;
}
.lesson-state{
  color:#4f8dbe;
  background:#eaf4ff;
  border:1px solid #c4def8;
  border-radius:99px;
  padding:4px 8px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}
.practice-scene{
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.08);
}
.instruction-bar{
  height:50px;
  background:#fff;
  border-top:1px solid #c8d2db;
  border-bottom:1px solid #c8d2db;
  box-shadow:0 2px 8px rgba(21,46,66,.05);
}
.instruction-bar #statusText{
  left:14px;
  font-size:9px;
}
.instruction-bar #fingerInstruction{
  font-size:11px;
  color:#243341;
}
.answer-status{
  right:52px;
  font-size:9px;
  padding:4px 8px;
  border-radius:99px;
}
.lower-panel{
  background:#a1a4a7;
  padding:13px 22px 14px;
  gap:14px;
}
.keyboard-and-hands{
  border-radius:12px;
  border:1px solid #7e858b;
  background:#969a9d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.side-numpad>div{
  border-radius:12px;
  border-color:#8a9197;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
#statsBox{background:#ebeff2}
#fingerGuide{background:#f8fafc}
.legacy-bottom{
  height:46px;
  background:#eef2f5;
  border-top:1px solid #c2cdd6;
}
.dialog-card{
  border-radius:14px;
}
@media(max-width:1100px){
  .lesson-select-card{min-width:250px}
  .select-card{min-width:190px}
}
@media(max-width:900px){
  .window-title,.window-actions>span:not(.online-dot){display:none}
  .modern-toolbar{height:auto;flex-wrap:wrap}
  .toolbar-spacer{display:none}
  .top-metric{margin-left:auto}
}
@media(max-width:700px){
  .lesson-pickers{width:100%}
  .select-card,.lesson-select-card{flex:1;min-width:0}
  .session-tools{width:100%;flex-wrap:wrap}
  .modern-strip{height:auto;flex-wrap:wrap}
}

/* ===== V13 Minimal / Clean UI ===== */
.clean-titlebar{
  height:46px;
  padding:0 14px;
  background:linear-gradient(135deg,#17364f,#214e70);
}
.clean-titlebar .window-title{
  font-size:10px;
  opacity:.9;
}
.clean-titlebar .window-actions{
  font-size:9px;
}
.clean-toolbar{
  height:64px;
  padding:8px 14px;
  gap:10px;
}
.clean-toolbar .lesson-pickers{
  flex:0 1 650px;
}
.clean-toolbar .select-card{
  height:46px;
  min-width:0;
}
.clean-toolbar .lesson-select-card{
  flex:1;
  min-width:280px;
}
.clean-toolbar .select-card:first-child{
  width:215px;
}
.clean-toolbar .session-tools{
  margin-left:auto;
}
.clean-toolbar .soft-tool{
  display:none;
}
.clean-toolbar .top-metric{
  min-width:52px;
}
.modern-strip{
  display:none !important;
}
.lesson-state{
  display:none !important;
}
.instruction-bar{
  padding:0 14px;
}
.instruction-bar #statusText{
  left:14px;
}
@media(max-width:900px){
  .clean-titlebar .window-title,
  .clean-titlebar .window-actions span:not(.online-dot){
    display:none;
  }
  .clean-toolbar{
    height:auto;
    flex-wrap:wrap;
    padding:8px 10px;
  }
  .clean-toolbar .lesson-pickers{
    flex:1 1 100%;
  }
  .clean-toolbar .lesson-pickers .select-card:first-child{
    width:auto;
  }
  .clean-toolbar .session-tools{
    margin-left:0;
  }
}
@media(max-width:620px){
  .clean-toolbar .session-tools .play-modern span{
    display:none;
  }
  .clean-toolbar .timer-card div{
    display:none;
  }
}

/* =========================================================
   V14 Responsive Layout
   ========================================================= */
html,body{
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:100%;
  overflow-x:hidden;
}
body{
  padding:0;
}
.app-window{
  width:100%;
  max-width:1440px;
  min-width:0;
  min-height:100vh;
  margin:0 auto;
  overflow:hidden;
}
.legacy-main{
  width:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.practice-scene{
  width:100%;
  height:clamp(250px,38vh,440px);
  min-height:250px;
  max-height:440px;
}
.typing-viewport{
  width:calc(100% - clamp(40px,10vw,180px));
  margin-left:clamp(20px,5vw,90px);
  margin-right:clamp(20px,5vw,90px);
  height:clamp(120px,18vh,165px);
  top:auto;
}
.typing-line-wrap{
  left:0;
  right:0;
}
.typing-track span{
  width:clamp(30px,3vw,42px);
  height:clamp(48px,6vw,58px);
  font-size:clamp(32px,4vw,66px);
}
.instruction-bar{
  width:100%;
  min-width:0;
}
.lower-panel{
  width:100%;
  min-width:0;
  grid-template-columns:minmax(0,1fr) clamp(155px,16vw,190px);
  gap:clamp(8px,1vw,14px);
  padding:clamp(8px,1vw,13px) clamp(10px,2vw,22px);
  overflow:hidden;
}
.keyboard-and-hands{
  min-width:0;
  width:100%;
  overflow:hidden;
}
.legacy-keyboard{
  width:min(100%,1060px);
  min-width:0;
  max-width:none;
}
.key{
  min-width:clamp(24px,3.1vw,44px);
  height:clamp(30px,3.6vw,40px);
  font-size:clamp(7px,.8vw,11px);
  padding:0 clamp(3px,.6vw,8px);
}
.key.wide{min-width:clamp(45px,5.5vw,82px)}
.key.xwide{min-width:clamp(60px,7.2vw,110px)}
.key.space{min-width:clamp(150px,22vw,340px)}
.hands-overlay{
  width:min(82%,900px);
  height:clamp(125px,17vw,215px);
}
.finger-color-guide{
  width:min(100%,1060px);
  gap:4px;
}
.finger-color-guide span{
  padding:3px 5px;
  font-size:clamp(7px,.75vw,9px);
}
.side-numpad{
  min-width:0;
}
.side-numpad>div{
  min-width:0;
  overflow:hidden;
}
.legacy-bottom{
  width:100%;
  min-width:0;
}
.top-metric{
  flex:0 0 auto;
}
.select-card select{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.modern-toolbar{
  flex-wrap:nowrap;
  min-width:0;
}
.lesson-pickers{
  min-width:0;
}
.clean-toolbar .select-card:first-child{
  width:clamp(150px,18vw,215px);
}
.clean-toolbar .lesson-select-card{
  min-width:0;
}
.session-tools{
  flex:0 0 auto;
}
.window-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Laptop screens: compact everything to fit above the fold. */
@media (max-height:800px) and (min-width:901px){
  .practice-scene{height:clamp(230px,33vh,330px);min-height:220px}
  .typing-viewport{height:130px}
  .lower-panel{min-height:220px}
  .hands-overlay{height:155px}
  .legacy-bottom{height:38px}
}

/* Tablet */
@media (max-width:1000px){
  .modern-toolbar{
    height:auto;
    flex-wrap:wrap;
    gap:7px;
  }
  .lesson-pickers{
    flex:1 1 100%;
  }
  .clean-toolbar .lesson-pickers{
    width:100%;
  }
  .clean-toolbar .lesson-pickers .select-card{
    flex:1;
  }
  .session-tools{
    width:auto;
    flex-wrap:wrap;
  }
  .top-metric{
    margin-left:auto;
  }
  .practice-scene{
    height:clamp(250px,36vh,380px);
  }
  .lower-panel{
    grid-template-columns:1fr;
    overflow:visible;
  }
  .side-numpad{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

/* Narrow tablet / mobile landscape */
@media (max-width:720px){
  .clean-titlebar{
    height:42px;
  }
  .window-brand small{
    display:none;
  }
  .window-title{
    display:none;
  }
  .modern-toolbar{
    padding:7px 8px;
  }
  .session-tools{
    width:100%;
  }
  .clean-toolbar .play-modern{
    flex:1;
  }
  .timer-card{
    flex:0 0 auto;
  }
  .top-metric{
    margin-left:0;
  }
  .practice-scene{
    height:270px;
    min-height:220px;
  }
  .typing-viewport{
    width:calc(100% - 50px);
    margin-left:25px;
    margin-right:25px;
    height:125px;
  }
  .typing-track{
    gap:2px;
  }
  .typing-track span{
    width:28px;
    height:48px;
    font-size:34px;
  }
  .instruction-bar{
    height:44px;
  }
  .instruction-bar #fingerInstruction{
    font-size:9px;
    padding:0 55px;
    text-align:center;
  }
  .answer-status{
    right:10px;
  }
  .lower-panel{
    padding:7px;
    grid-template-columns:1fr;
  }
  .keyboard-and-hands{
    min-height:225px;
  }
  .legacy-keyboard{
    width:100%;
  }
  .key{
    min-width:23px;
    height:29px;
    font-size:7px;
  }
  .key.wide{min-width:42px}
  .key.xwide{min-width:60px}
  .key.space{min-width:145px}
  .hands-overlay{
    width:86%;
    height:145px;
    opacity:.9;
  }
  .finger-color-guide{
    gap:3px;
  }
  .finger-color-guide span{
    padding:2px 4px;
    font-size:7px;
  }
  .side-numpad{
    grid-template-columns:1fr 1fr;
  }
}

/* Phones: stack controls, reduce visual height, and keep whole page usable. */
@media (max-width:520px){
  .window-actions{display:none}
  .clean-toolbar .lesson-pickers{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .clean-toolbar .select-card:first-child{
    width:auto;
  }
  .clean-toolbar .session-tools{
    display:grid;
    grid-template-columns:1.2fr auto auto;
    width:100%;
    gap:6px;
  }
  .clean-toolbar .play-modern{
    width:100%;
  }
  .clean-toolbar .top-metric{
    display:none;
  }
  .practice-scene{
    height:235px;
    min-height:210px;
  }
  .typing-viewport{
    width:calc(100% - 28px);
    margin-left:14px;
    margin-right:14px;
    height:105px;
  }
  .typing-status-row{
    font-size:8px;
  }
  .typing-legend{
    gap:5px;
  }
  .typing-track span{
    width:24px;
    height:40px;
    font-size:29px;
  }
  .instruction-bar #statusText{
    display:none;
  }
  .instruction-bar #fingerInstruction{
    padding:0 10px;
  }
  .answer-status{
    display:none;
  }
  .keyboard-and-hands{
    min-height:205px;
  }
  .key{
    min-width:19px;
    height:25px;
    font-size:6px;
    padding:0 2px;
  }
  .key.wide{min-width:34px}
  .key.xwide{min-width:48px}
  .key.space{min-width:105px}
  .hands-overlay{
    width:90%;
    height:120px;
    bottom:-3px;
  }
  .side-numpad{
    grid-template-columns:1fr;
  }
  .legacy-bottom{
    height:40px;
  }
  .left-note{
    display:none;
  }
}

/* Very small portrait phones */
@media (max-width:380px){
  .clean-titlebar{
    padding:0 8px;
  }
  .window-brand{
    min-width:0;
  }
  .window-brand b{
    font-size:11px;
  }
  .app-icon{
    display:none;
  }
  .modern-toolbar{
    padding:5px;
  }
  .practice-scene{
    height:215px;
  }
  .typing-viewport{
    height:95px;
    margin-left:10px;
    margin-right:10px;
    width:calc(100% - 20px);
  }
  .typing-track span{
    width:21px;
    height:36px;
    font-size:25px;
  }
  .keyboard-and-hands{
    min-height:185px;
  }
  .key{
    min-width:16px;
    height:22px;
    font-size:5px;
  }
  .key.wide{min-width:30px}
  .key.xwide{min-width:42px}
  .key.space{min-width:85px}
}

/* ===== V15 minimal top bar ===== */
.clean-toolbar{
  min-height:58px;
  height:58px;
}
.clean-toolbar .toolbar-spacer{
  min-width:12px;
}
.clean-toolbar .top-metric,
.clean-toolbar .session-tools{
  display:none !important;
}
.clean-toolbar .lesson-pickers{
  flex:1 1 auto;
  width:100%;
}
.clean-toolbar .lesson-select-card{
  flex:1 1 auto;
}
@media(max-width:900px){
  .clean-toolbar .lesson-pickers{
    flex:1 1 100%;
  }
}

/* ===== V16 simple navigation ===== */
.clean-toolbar{
  height:60px;
  min-height:60px;
  padding:7px 12px;
  background:#f7fafc;
  border-bottom:1px solid #ccd7df;
}
.clean-toolbar .lesson-pickers{
  display:grid;
  grid-template-columns:minmax(180px,260px) minmax(260px,1fr);
  width:100%;
  max-width:980px;
  margin:0 auto;
}
.clean-toolbar .select-card{
  height:44px;
  min-width:0;
}
.clean-toolbar .lesson-select-card{
  min-width:0;
}
@media(max-width:620px){
  .clean-toolbar{
    height:auto;
    min-height:0;
    padding:6px;
  }
  .clean-toolbar .lesson-pickers{
    grid-template-columns:1fr 1fr;
  }
}

/* V18: keyboard is captured globally; no off-screen textarea required. */
body:focus{outline:none}

/* V19 startup clarity */
.typing-track .current{
  z-index:3;
}

/* V20 combo feedback */
.key.target.secondary-target{
  outline:2px dashed rgba(255,255,255,.95) !important;
}
.key.active{
  transform:translateY(2px) scale(.98);
  filter:brightness(1.12);
}

/* ===== V21 Fullscreen + Nasyid JSIT ===== */
.toolbar-tools{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
}
.utility-btn{
  width:40px;
  height:40px;
  border:1px solid #cbd7e0;
  border-radius:10px;
  background:#fff;
  color:#294355;
  font-size:18px;
  font-weight:800;
  box-shadow:0 3px 9px rgba(28,53,72,.05);
}
.utility-btn:hover{
  background:#edf6ff;
  border-color:#9bc9f3;
  color:#106dc3;
}
.music-dialog{
  border:0;
  padding:0;
  background:transparent;
  width:min(560px,92vw);
  max-width:none;
}
.music-dialog::backdrop{
  background:rgba(10,27,40,.52);
  backdrop-filter:blur(3px);
}
.music-panel{
  background:#fff;
  border:1px solid #d4dee6;
  border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.25);
  overflow:hidden;
}
.music-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:20px 20px 16px;
  background:linear-gradient(135deg,#eff8ff,#f9fcff);
  border-bottom:1px solid #dce6ed;
}
.music-kicker{
  font-size:9px;
  letter-spacing:.15em;
  font-weight:1000;
  color:#5f85a2;
}
.music-head h3{
  margin:4px 0 3px;
  font-size:20px;
}
.music-head p{
  margin:0;
  font-size:11px;
  color:#71808c;
}
.music-close{
  width:34px;height:34px;border-radius:9px;border:1px solid #d3dde4;background:#fff;font-size:20px;color:#6c7b87;
}
.playlist{
  padding:10px 14px;
  max-height:48vh;
  overflow:auto;
}
.track{
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:11px;
  text-decoration:none;
  color:#263844;
}
.track:hover{
  background:#f3f8fb;
}
.track + .track{
  margin-top:2px;
}
.play-circle,.track-icon{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:#e9f4ff;color:#1572c6;
  font-size:13px;
}
.track b{display:block;font-size:12px}
.track small{display:block;color:#87949d;font-size:9px;margin-top:2px}
.track>a{
  font-size:9px;font-weight:800;color:#1675c7;
  text-decoration:none;
  padding:6px 8px;
  background:#eff7ff;
  border:1px solid #c8e0f5;
  border-radius:7px;
}
.music-foot{
  padding:12px 16px;
  font-size:9px;
  color:#8a969e;
  border-top:1px solid #e1e7ec;
  background:#fafcfd;
}
.music-foot a{color:#1572c6;text-decoration:none;font-weight:800;margin-left:4px}

:fullscreen .app-window,
.app-window:fullscreen{
  max-width:none;
  width:100vw;
  height:100vh;
  min-height:100vh;
}
:fullscreen .practice-scene{
  height:clamp(280px,42vh,520px);
}
:fullscreen .lower-panel{
  min-height:280px;
}
@media(max-width:620px){
  .toolbar-tools{
    gap:5px;
  }
  .utility-btn{
    width:36px;height:36px;
  }
}


/* ===== V28 PWA ===== */
.install-btn.hidden{display:none !important}
.install-btn{
  background:#eef8ff;
  border-color:#a9d3f2;
  color:#1266a7;
}
.offline-badge{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:100;
  padding:6px 9px;
  border-radius:999px;
  background:#e9f8ef;
  border:1px solid #abd8bd;
  color:#287347;
  font-size:8px;
  font-weight:900;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:.2s ease;
}
.offline-badge.offline{
  background:#fff4df;
  border-color:#e9c77f;
  color:#8f6400;
}
@media(max-width:520px){
  .offline-badge{
    right:8px;
    bottom:8px;
    font-size:7px;
  }
}