.page-lessons{
  position:relative;
  min-height:100vh;
  padding:32px 0 96px;
  color:var(--t-text-secondary, #e5e7eb);
}
.page-lessons::before,
.page-lessons::after{
  content:'';
  position:fixed;
  pointer-events:none;
  z-index:-2;
  border-radius:999px;
  filter:blur(120px);
  opacity:0;
}
.page-lessons::before{
  top:0;right:0;width:600px;height:600px;
  background:transparent;
}
.page-lessons::after{
  left:0;bottom:0;width:420px;height:420px;
  background:transparent;
}

.lessons-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  width:min(980px, calc(100% - 48px));
  margin:0 auto;
  padding:0 0 48px;
}

/* ── Sidebar ── */
.lessons-sidebar{
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--t-surface, transparent);
  backdrop-filter:none;
  border:1px solid var(--t-border, transparent);
  box-shadow:none;
  border-radius:12px;
  padding:8px;
  max-height:612px;
  overflow-y:auto;
  position:sticky;
  top:80px;
  align-self:start;
}
.lessons-sidebar-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--t-text-secondary, #e5e7eb);
  cursor:pointer;
  transition:background .15s, border-color .15s;
  text-align:left;
  font-size:13px;
  white-space:nowrap;
}
.lessons-sidebar-btn:hover{
  background:var(--t-surface, rgba(255,255,255,.04));
}
.lessons-sidebar-btn.active{
  background:var(--t-accent-blue-soft, rgba(59,130,246,.12));
  border-color:var(--t-accent-blue-border, rgba(59,130,246,.45));
}
.lessons-sidebar-btn.locked{
  opacity:.58;
  cursor:not-allowed;
  background:rgba(148,163,184,.06);
  border-color:rgba(148,163,184,.12);
}
.lessons-sidebar-btn.locked:hover{
  background:rgba(148,163,184,.06);
}
.lessons-sidebar-btn.locked .lessons-sidebar-num{
  background:rgba(148,163,184,.14);
  color:rgba(226,232,240,.72);
}
.lessons-sidebar-num{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  border-radius:7px;
  background:var(--t-surface, rgba(255,255,255,.06));
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
}
.lessons-sidebar-btn.active .lessons-sidebar-num{
  background:var(--t-accent-blue-soft, rgba(59,130,246,.2));
  color:var(--t-accent-blue-light, #60a5fa);
}
.lessons-sidebar-title{
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
}
.lessons-sidebar-check{
  font-size:13px;
  font-weight:700;
  color:transparent;
  margin-left:auto;
  flex-shrink:0;
  transition:color .2s;
}
.lessons-sidebar-check.done{
  color:#4ade80;
}
.lessons-sidebar-btn.locked .lessons-sidebar-check{
  color:transparent;
  position:relative;
}
.lessons-sidebar-btn.locked .lessons-sidebar-check::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:12px;
  height:12px;
  display:block;
  background-color:rgba(148,163,184,.95);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V6Zm7 13H7v-9h10v9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V6Zm7 13H7v-9h10v9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Main ── */
.lessons-main{
  display:flex;
  flex-direction:column;
  gap:20px;
  background:transparent;
  backdrop-filter:none;
  border:none;
  box-shadow:none;
  border-radius:0;
  padding:0;
  position:relative;
}
.lessons-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.lessons-header-spacer,
.lessons-header-right{
  flex:1;
  min-width:0;
}
.lessons-header-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.lessons-title{
  font-size:1.4rem;
  font-weight:800;
  color:var(--t-text-primary, #f8fafc);
}
.lessons-current-lesson-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px 12px;
  border-radius:12px;
  border:1px solid var(--t-border, rgba(255,255,255,.12));
  background:var(--t-surface, rgba(255,255,255,.04));
  color:var(--t-text-primary, #f8fafc);
  font-size:1.12rem;
  font-weight:700;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s;
  text-align:center;
}
.lessons-current-lesson-btn:hover{
  background:var(--t-surface-hover, rgba(255,255,255,.08));
  border-color:var(--t-border-hover, rgba(255,255,255,.2));
}
.lessons-current-lesson-btn:active{
  transform:scale(0.98);
}
.lessons-desc{
  font-size:14px;
  color:var(--t-text-muted, rgba(226,232,240,.72));
  margin-top:-10px;
  text-align:center;
}

/* ── Language Selector ── */
.lessons-language-selector{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:flex-end;
  flex-shrink:0;
  padding:3px;
  border-radius:12px;
  border:1px solid var(--t-border, rgba(255,255,255,.12));
  background:var(--t-surface, rgba(255,255,255,.04));
}
.lessons-language-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 9px;
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--t-text-secondary, #e5e7eb);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s;
}
.lessons-language-btn:hover{
  background:var(--t-surface-hover, rgba(255,255,255,.08));
}
.lessons-language-btn:active{
  transform:scale(0.98);
}
.lessons-language-icon{
  display:none;
}
.lessons-language-text{
  line-height:1;
}
.lessons-layout-divider{
  display:none;
  width:1px;
  height:18px;
  background:rgba(255,255,255,.16);
  flex-shrink:0;
}
.lessons-language-selector.with-os-switch .lessons-layout-divider{
  display:block;
}
.lessons-language-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:200px;
  max-height:min(60vh, 440px);
  overflow-y:auto;
  background:var(--t-modal-bg, rgba(15,23,42,.95));
  backdrop-filter:blur(12px);
  border:1px solid var(--t-border, rgba(255,255,255,.1));
  border-radius:12px;
  padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  z-index:100;
}
.lessons-language-dropdown.hidden{
  display:none;
}
.lessons-language-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s;
}
.lessons-language-option:hover{
  background:var(--t-surface-hover, rgba(255,255,255,.08));
}
.lessons-language-option.selected{
  background:var(--t-accent-blue-soft, rgba(59,130,246,.15));
}
.lessons-language-flag{
  display:none;
}
.lessons-language-name{
  font-size:12px;
  color:var(--t-text-secondary, #e5e7eb);
  font-weight:600;
}

/* ── OS Switch ── */
.lessons-os-switch{
  display:flex;
  gap:4px;
  flex-shrink:0;
  padding:0;
  border-radius:0;
  border:none;
  background:transparent;
}
.lessons-os-switch-group{
  display:flex;
  align-items:center;
}
.lessons-os-switch.hidden{
  display:none;
}
.lessons-os-btn{
  width:34px;
  height:28px;
  padding:0;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--t-text-secondary, #e5e7eb);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, border-color .15s, color .15s;
}
.lessons-os-btn:hover{
  background:var(--t-surface-hover, rgba(255,255,255,.06));
  border-color:rgba(255,255,255,.08);
}
.lessons-os-btn.selected{
  background:var(--t-accent-blue-soft, rgba(59,130,246,.15));
  border-color:var(--t-accent-blue, rgba(59,130,246,.4));
  color:var(--t-accent-blue, #60a5fa);
}
.lessons-os-logo{
  width:15px;
  height:15px;
  display:block;
  background-color:currentColor;
  opacity:.92;
}
.lessons-os-logo-win{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 3.4 11.2 2v9.5H2V3.4Zm10.8-1.55L22 0.5v11h-9.2V1.85ZM2 12.5h9.2V22L2 20.6v-8.1Zm10.8 0H22v11.05L12.8 22V12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 3.4 11.2 2v9.5H2V3.4Zm10.8-1.55L22 0.5v11h-9.2V1.85ZM2 12.5h9.2V22L2 20.6v-8.1Zm10.8 0H22v11.05L12.8 22V12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lessons-os-logo-mac{
  width:18px;
  height:18px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.65 12.53c.02 2.53 2.2 3.38 2.22 3.39-.02.06-.35 1.2-1.14 2.38-.68 1.01-1.39 2.01-2.49 2.03-1.08.02-1.43-.64-2.67-.64-1.24 0-1.63.62-2.64.66-1.05.04-1.84-1.05-2.53-2.06-1.42-2.05-2.5-5.79-1.05-8.31.72-1.25 2-2.04 3.4-2.06 1.06-.02 2.07.72 2.67.72.6 0 1.73-.89 2.92-.76.5.02 1.89.2 2.79 1.53-.07.04-1.67.98-1.65 2.92Zm-2.17-6.08c.57-.69.95-1.65.84-2.6-.82.03-1.82.55-2.4 1.24-.53.61-.99 1.59-.87 2.52.91.07 1.85-.46 2.43-1.16Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.65 12.53c.02 2.53 2.2 3.38 2.22 3.39-.02.06-.35 1.2-1.14 2.38-.68 1.01-1.39 2.01-2.49 2.03-1.08.02-1.43-.64-2.67-.64-1.24 0-1.63.62-2.64.66-1.05.04-1.84-1.05-2.53-2.06-1.42-2.05-2.5-5.79-1.05-8.31.72-1.25 2-2.04 3.4-2.06 1.06-.02 2.07.72 2.67.72.6 0 1.73-.89 2.92-.76.5.02 1.89.2 2.79 1.53-.07.04-1.67.98-1.65 2.92Zm-2.17-6.08c.57-.69.95-1.65.84-2.6-.82.03-1.82.55-2.4 1.24-.53.61-.99 1.59-.87 2.52.91.07 1.85-.46 2.43-1.16Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Sequence ── */
.lessons-sequence{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  justify-content:center;
  padding:12px 0;
  min-height:58px;
  overflow:hidden;
}
.lessons-seq-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:48px;
  border-radius:10px;
  background:var(--t-surface, rgba(255,255,255,.06));
  border:1px solid var(--t-border, rgba(255,255,255,.08));
  font-size:22px;
  font-weight:700;
  color:var(--t-text-secondary, #e5e7eb);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.lessons-seq-tile.ghost{
  opacity:0;
  border-color:transparent;
  background:transparent;
}
.lessons-seq-tile.current{
  border-color:rgba(59,130,246,.7);
  box-shadow:none;
  color:#fff;
  transform:translateY(-2px) scale(1.17);
  animation:lessons-current-pop .24s ease;
}
.lessons-seq-tile.current.finger-lp{background:rgb(197,202,233);border-color:rgb(210,215,245);color:#1a1a2e;}
.lessons-seq-tile.current.finger-lr{background:rgb(144,202,249);border-color:rgb(170,218,255);color:#1a1a2e;}
.lessons-seq-tile.current.finger-lm{background:rgb(244,143,177);border-color:rgb(255,170,200);color:#1a1a2e;}
.lessons-seq-tile.current.finger-li{background:rgb(128,203,196);border-color:rgb(160,225,218);color:#1a1a2e;}
.lessons-seq-tile.current.finger-ri{background:rgb(255,245,157);border-color:rgb(255,250,180);color:#1a1a2e;}
.lessons-seq-tile.current.finger-rm{background:rgb(255,171,145);border-color:rgb(255,195,175);color:#1a1a2e;}
.lessons-seq-tile.current.finger-rr{background:rgb(255,204,128);border-color:rgb(255,220,160);color:#1a1a2e;}
.lessons-seq-tile.current.finger-rp{background:rgb(165,214,167);border-color:rgb(190,230,192);color:#1a1a2e;}
.lessons-seq-tile.current.finger-thumb{background:rgb(207,216,220);border-color:rgb(225,230,235);color:#1a1a2e;}
.lessons-seq-tile.done{
  opacity:0.4;
  color:rgba(96,165,250,.7);
}

/* ── Keyboard ── */
.lessons-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  position:relative;
  width:fit-content;
  margin:0 auto;
  padding-bottom:0;
}
.lessons-keyboard{
  display:flex;
  flex-direction:column;
  gap:5px;
  background:var(--t-kb-wrap-bg, rgba(255,255,255,.02));
  padding:14px;
  border-radius:22px;
  border:1px solid var(--t-kb-wrap-border, rgba(255,255,255,.06));
  width:min(860px, 100%);
}
.lessons-key-row{
  display:flex;
  justify-content:flex-start;
  gap:5px;
}
.lessons-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"]){
  width:fit-content;
  max-width:100%;
  padding:6px 8px;
  gap:3px;
}
.lessons-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"]) .lessons-key-row{
  gap:3px;
}
.lessons-key-row--space{
  margin-top:4px;
  justify-content:flex-start;
  padding-left:190px;
}
.lessons-key{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:48px;
  height:48px;
  border-radius:10px;
  border:1px solid var(--t-kb-key-border, rgba(255,255,255,.12));
  background:var(--t-kb-key-bg, rgba(255,255,255,.04));
  font-size:16px;
  font-weight:600;
  color:var(--t-kb-key-color, #e5e7eb);
  transition:all .12s;
  text-transform:lowercase;
}
.lessons-key.home{
  border-bottom:2px solid rgba(255,255,255,.22);
}
.lessons-key.active{
  transform:scale(1.1);
  color:#1a1a2e;
  font-weight:800;
}
.lessons-key.key-grey.active,
.lessons-key[data-key="Shift"].active{
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(255,255,255,.98)!important;
  color:#1f2937!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset, 0 0 14px rgba(255,255,255,.18);
}
.lessons-key.finger-lp.active{background:rgb(197,202,233)!important;border-color:rgb(210,215,245)!important;box-shadow:0 0 20px rgba(197,202,233,0.55);}
.lessons-key.finger-lr.active{background:rgb(144,202,249)!important;border-color:rgb(170,218,255)!important;box-shadow:0 0 20px rgba(144,202,249,0.55);}
.lessons-key.finger-lm.active{background:rgb(244,143,177)!important;border-color:rgb(255,170,200)!important;box-shadow:0 0 20px rgba(244,143,177,0.55);}
.lessons-key.finger-li.active{background:rgb(128,203,196)!important;border-color:rgb(160,225,218)!important;box-shadow:0 0 20px rgba(128,203,196,0.55);}
.lessons-key.finger-ri.active{background:rgb(255,245,157)!important;border-color:rgb(255,250,180)!important;box-shadow:0 0 20px rgba(255,245,157,0.55);}
.lessons-key.finger-rm.active{background:rgb(255,171,145)!important;border-color:rgb(255,195,175)!important;box-shadow:0 0 20px rgba(255,171,145,0.55);}
.lessons-key.finger-rr.active{background:rgb(255,204,128)!important;border-color:rgb(255,220,160)!important;box-shadow:0 0 20px rgba(255,204,128,0.55);}
.lessons-key.finger-rp.active{background:rgb(165,214,167)!important;border-color:rgb(190,230,192)!important;box-shadow:0 0 20px rgba(165,214,167,0.55);}
.lessons-key.finger-thumb.active{background:rgb(207,216,220)!important;border-color:rgb(225,230,235)!important;box-shadow:0 0 20px rgba(207,216,220,0.55);}
.lessons-key.error{
  background:rgba(248,113,113,.30) !important;
  border-color:rgba(248,113,113,.55) !important;
  color:#fee2e2 !important;
  box-shadow:0 0 0 1px rgba(248,113,113,.18) inset, 0 0 10px rgba(248,113,113,.18);
  animation:lessons-shake .3s;
}
.lessons-space{
  --lessons-space-height:38px;
  width:222px;
  height:var(--lessons-space-height);
  font-size:11px;
  color:rgba(255,255,255,.35);
}
.lessons-key-row--space .lessons-key[data-key="AltGr"]{
  height:var(--lessons-space-height, 38px);
}

/* ── Finger colors on keys (pastel palette) ── */
.lessons-key.finger-lp{border-color:rgba(197,202,233,0.5);background:rgba(197,202,233,0.18);}
.lessons-key.finger-lr{border-color:rgba(144,202,249,0.5);background:rgba(144,202,249,0.18);}
.lessons-key.finger-lm{border-color:rgba(244,143,177,0.5);background:rgba(244,143,177,0.18);}
.lessons-key.finger-li{border-color:rgba(128,203,196,0.5);background:rgba(128,203,196,0.18);}
.lessons-key.finger-ri{border-color:rgba(255,245,157,0.5);background:rgba(255,245,157,0.18);}
.lessons-key.finger-rm{border-color:rgba(255,171,145,0.5);background:rgba(255,171,145,0.18);}
.lessons-key.finger-rr{border-color:rgba(255,204,128,0.5);background:rgba(255,204,128,0.18);}
.lessons-key.finger-rp{border-color:rgba(165,214,167,0.5);background:rgba(165,214,167,0.18);}
.lessons-key.finger-thumb{border-color:rgba(207,216,220,0.4);background:rgba(207,216,220,0.1);}

/* ── Grey utility keys ── */
.lessons-key.key-grey{
  background:var(--t-kb-grey-bg, rgba(207,216,220,0.08));
  border-color:var(--t-kb-grey-border, rgba(207,216,220,0.18));
  color:var(--t-kb-grey-color, rgba(207,216,220,0.5));
  font-size:10px;
  font-weight:500;
  text-transform:none;
}
.lessons-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"],[data-layout="ridna"],[data-layout="jp"]) .lessons-key.key-grey{
  background:var(--t-kb-key-bg, rgba(255,255,255,.04));
  border-color:var(--t-kb-key-border, rgba(255,255,255,.12));
  color:var(--t-kb-key-color, #e5e7eb);
  font-size:16px;
  font-weight:600;
}
.lessons-key.key-w1{width:58px;}
.lessons-key.key-w2{width:68px;}
.lessons-key.key-w3{width:84px;}

/* ── Windows layouts: stretch right-side Enter and Shift to align with Backspace ── */
.lessons-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"],[data-layout="ridna"],[data-layout="jp"]){
  width:fit-content;
  max-width:min(860px,100%);
}
.lessons-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"],[data-layout="ridna"],[data-layout="jp"]) .lessons-key-row{
  justify-content:flex-start;
}
.lessons-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"],[data-layout="ridna"],[data-layout="jp"]) .lessons-key-row:nth-child(3) .lessons-key[data-key="Enter"]:last-child{
  flex-grow:1!important;
  min-width:68px;
  width:auto!important;
}
.lessons-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"],[data-layout="ridna"],[data-layout="jp"]) .lessons-key-row:nth-child(4) .lessons-key[data-key="Shift"]:last-child{
  flex-grow:1!important;
  min-width:84px;
  width:auto!important;
}

/* ── Mac ISO Enter (two-row shape) ── */
.lessons-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"]) .lessons-key[data-key="Enter"]{
  height:87px !important;
  margin-top:-45px;
  align-self:flex-end;
  transform:translateX(-2px);
  z-index:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-bottom:0;
  border:none;
  background:transparent;
  box-shadow:none;
  color:var(--t-kb-key-color, #e5e7eb);
}
.lessons-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"]) .lessons-key[data-key="Enter"]::before{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:39px;
  height:42px;
  box-sizing:border-box;
  border:1px solid var(--t-kb-key-border, rgba(255,255,255,.12));
  background:var(--t-kb-key-bg, rgba(255,255,255,.04));
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:0;
  z-index:-1;
  pointer-events:none;
}
.lessons-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"]) .lessons-key[data-key="Enter"]::after{
  content:"";
  position:absolute;
  right:0;
  top:41px;
  width:100%;
  height:46px;
  box-sizing:border-box;
  border:1px solid var(--t-kb-key-border, rgba(255,255,255,.12));
  border-top:none;
  border-top-left-radius:0;
  border-top-right-radius:0;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  background:var(--t-kb-key-bg, rgba(255,255,255,.04));
  z-index:-1;
  pointer-events:none;
}

/* ── Hands ── */
.lessons-hands{
  display:flex;
  justify-content:space-between;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:calc(100% + 480px);
  padding:0;
  margin-top:0;
  pointer-events:none;
  z-index:2;
}
.lessons-hand{
  width:180px;
  max-width:38vw;
}
.hand-finger[data-finger="lp"]{fill:rgb(197,202,233);}
.hand-finger[data-finger="lr"]{fill:rgb(144,202,249);}
.hand-finger[data-finger="lm"]{fill:rgb(244,143,177);}
.hand-finger[data-finger="li"]{fill:rgb(128,203,196);}
.hand-finger[data-finger="ri"]{fill:rgb(255,245,157);}
.hand-finger[data-finger="rm"]{fill:rgb(255,171,145);}
.hand-finger[data-finger="rr"]{fill:rgb(255,204,128);}
.hand-finger[data-finger="rp"]{fill:rgb(165,214,167);}
.hand-finger[data-finger="thumb"]{fill:rgb(202,166,104);}
.lessons-hand .hand-finger{
  opacity:0.18;
  transition:opacity .2s, filter .2s;
  filter:brightness(.6);
}
.lessons-hand .hand-finger.finger-active{
  opacity:1;
  filter:brightness(1.15);
}

/* ── Finger hint ── */
.lessons-finger-hint{
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:var(--t-accent-blue-light, #60a5fa);
  min-height:22px;
}

.lessons-mobile-capture{
  position:fixed;
  left:-9999px;
  top:0;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* ── Progress ── */
.lessons-progress{
  display:flex;
  align-items:center;
  width:min(860px, 100%);
  margin:0 auto;
}
.lessons-progress-bar{
  width:100%;
  height:6px;
  background:var(--t-progress-track, rgba(255,255,255,.06));
  border-radius:3px;
  overflow:hidden;
}
.lessons-progress-fill{
  height:100%;
  background:#3b82f6;
  border-radius:3px;
  transition:width .2s;
  width:0;
}
.lessons-progress-text{
  display:none;
}

/* ── Result overlay ── */
.lessons-result{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border-radius:0;
  z-index:5;
  backdrop-filter:none;
}
.lessons-result.hidden{
  display:none;
}
.lessons-result-card{
  background:rgba(9,10,12,.95);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:36px 40px;
  text-align:center;
  min-width:280px;
  box-shadow:0 20px 60px rgba(2,8,23,.4);
}
.lessons-result-title{
  font-size:1.3rem;
  font-weight:800;
  color:var(--t-text-primary, #f8fafc);
  margin-bottom:22px;
}
.lessons-final-congrats{
  margin:-8px 0 18px;
  color:#86efac;
  font-size:14px;
  font-weight:700;
}
.lessons-final-congrats.hidden{
  display:none;
}
.lessons-result-stats{
  display:flex;
  gap:28px;
  justify-content:center;
  margin-bottom:26px;
}
.lessons-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.lessons-stat-value{
  font-size:28px;
  font-weight:800;
  color:var(--t-accent-blue-light, #60a5fa);
}
.lessons-stat-label{
  font-size:11px;
  color:var(--t-text-muted, rgba(226,232,240,.55));
}
.lessons-result-actions{
  display:flex;
  gap:10px;
  justify-content:center;
}

/* ── Buttons ── */
.lessons-btn{
  padding:10px 20px;
  border-radius:12px;
  border:1px solid var(--t-accent-blue-border, rgba(59,130,246,.45));
  background:var(--t-accent-blue-soft, rgba(59,130,246,.12));
  color:var(--t-text-primary, #eff6ff);
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.lessons-btn:hover{
  background:var(--t-accent-blue-hover, rgba(59,130,246,.2));
  border-color:var(--t-accent-blue-border, rgba(59,130,246,.55));
}
.lessons-btn-next{
  background:rgba(59,130,246,.22);
}
.lessons-btn-cert{
  background:rgba(16,185,129,.16);
  border-color:rgba(16,185,129,.45);
}
.lessons-btn-cert:hover{
  background:rgba(16,185,129,.25);
  border-color:rgba(16,185,129,.6);
}
.lessons-btn-cert.hidden{
  display:none;
}
.lessons-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

/* ── Home position guide overlay ── */
.lessons-home-btn{
  position:absolute;
  top:16px;
  right:16px;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.5);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s, color .15s;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
}
.lessons-home-btn:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
}

.lessons-guide-banner{
  position:absolute;
  left:0;right:0;top:0;
  z-index:6;
  display:flex;
  justify-content:center;
  padding:12px 16px;
  pointer-events:none;
}
.lessons-guide-banner.hidden{display:none;}
.lessons-guide-banner-inner{
  background:rgba(15,18,30,.92);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:16px 24px;
  text-align:center;
  box-shadow:0 12px 40px rgba(2,8,23,.5);
  pointer-events:all;
  max-width:620px;
  width:100%;
}
.lessons-guide-banner-title{
  font-size:1rem;
  font-weight:800;
  color:#f8fafc;
  margin-bottom:4px;
}
.lessons-guide-banner-text{
  font-size:12px;
  color:rgba(226,232,240,.55);
  margin-bottom:12px;
}
.lessons-guide-banner-row{
  display:flex;
  gap:6px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.lessons-guide-tag{
  padding:4px 10px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,.12);
}
.lessons-guide-tag-sep{
  color:rgba(255,255,255,.15);
  font-size:14px;
  display:flex;
  align-items:center;
}
.lessons-guide-close{
  padding:6px 16px;
  font-size:12px;
}

/* ── Animations ── */
@keyframes lessons-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
@keyframes lessons-current-pop{
  0%{transform:translateY(0) scale(1)}
  100%{transform:translateY(-2px) scale(1.17)}
}

/* ── Mobile picker / modal defaults (desktop: hidden) ── */
.lessons-mobile-picker{
  display:none;
}
.lessons-mobile-modal{
  display:flex;
  position:fixed;
  inset:0;
  z-index:300;
  background:rgba(0,0,0,.55);
  align-items:center;
  justify-content:center;
  padding:16px;
}
.lessons-mobile-modal.hidden{
  display:none;
}
.lessons-mobile-modal-inner{
  width:min(560px, 100%);
  max-height:min(72vh, 640px);
  background:var(--t-nav-bg, #151A2E);
  border:1px solid var(--t-border, rgba(255,255,255,.08));
  border-radius:18px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.lessons-mobile-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--t-border, rgba(255,255,255,.08));
  flex-shrink:0;
}
.lessons-mobile-modal-title{
  font-size:15px;
  font-weight:700;
  color:var(--t-text-primary, #f8fafc);
}
.lessons-mobile-modal-close{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid var(--t-border, rgba(255,255,255,.12));
  background:transparent;
  color:var(--t-text-secondary, #e5e7eb);
  font-size:15px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lessons-mobile-modal-list{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px;
}
.lessons-mobile-modal-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--t-text-secondary, #e5e7eb);
  cursor:pointer;
  text-align:left;
  font-size:12px;
  -webkit-appearance:none;
  appearance:none;
}
.lessons-mobile-modal-item.active{
  background:var(--t-accent-blue-soft, rgba(59,130,246,.12));
  border-color:var(--t-accent-blue-border, rgba(59,130,246,.45));
  color:var(--t-text-primary, #f8fafc);
}
.lessons-mobile-modal-item.locked{
  opacity:.42;
  cursor:not-allowed;
}
.lessons-mobile-modal-num{
  min-width:22px;
  height:22px;
  border-radius:6px;
  background:rgba(255,255,255,.06);
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.lessons-mobile-modal-item.active .lessons-mobile-modal-num{
  background:var(--t-accent-blue-soft, rgba(59,130,246,.2));
  color:var(--t-accent-blue-light, #60a5fa);
}
.lessons-mobile-modal-sub{
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
}
.lessons-mobile-modal-check{
  font-size:11px;
  font-weight:700;
  color:transparent;
  flex-shrink:0;
}
.lessons-mobile-modal-item.done .lessons-mobile-modal-check{
  color:#4ade80;
}

/* ── Mobile ── */
@media (max-width:768px){
  .page-lessons{
    padding:16px 0 32px;
  }
  .lessons-layout{
    grid-template-columns:1fr;
    width:calc(100% - 20px);
    gap:12px;
    padding:6px 0 28px;
  }
  .lessons-sidebar{
    display:none;
  }
  .lessons-visual{
    display:none;
  }
  .lessons-finger-hint{
    display:none;
  }
  .lessons-mobile-picker{
    display:block;
    width:calc(100% - 20px);
    margin:0 auto 0;
  }
  .lessons-mobile-picker-btn{
    width:100%;
    padding:10px 16px;
    border-radius:14px;
    background:var(--t-surface, rgba(255,255,255,.04));
    border:1px solid var(--t-border, rgba(255,255,255,.1));
    color:var(--t-text-primary, #f8fafc);
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    text-align:left;
    display:flex;
    align-items:center;
    justify-content:space-between;
    -webkit-appearance:none;
    appearance:none;
  }
  .lessons-mobile-picker-btn:active{
    opacity:.85;
  }
  .lessons-mobile-modal{
    align-items:flex-end;
    justify-content:stretch;
    padding:0;
  }
  .lessons-mobile-modal.hidden{
    display:none;
  }
  .lessons-mobile-modal-inner{
    width:100%;
    max-height:72vh;
    border:none;
    border-radius:20px 20px 0 0;
  }
  .lessons-mobile-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    border-bottom:1px solid var(--t-border, rgba(255,255,255,.08));
    flex-shrink:0;
  }
  .lessons-mobile-modal-title{
    font-size:15px;
    font-weight:700;
    color:var(--t-text-primary, #f8fafc);
  }
  .lessons-mobile-modal-close{
    width:30px;
    height:30px;
    border-radius:50%;
    border:1px solid var(--t-border, rgba(255,255,255,.12));
    background:transparent;
    color:var(--t-text-secondary, #e5e7eb);
    font-size:15px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .lessons-mobile-modal-list{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:8px;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:4px;
  }
  .lessons-mobile-modal-item{
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 10px;
    border-radius:10px;
    border:1px solid transparent;
    background:transparent;
    color:var(--t-text-secondary, #e5e7eb);
    cursor:pointer;
    text-align:left;
    font-size:12px;
    -webkit-appearance:none;
    appearance:none;
  }
  .lessons-mobile-modal-item.active{
    background:var(--t-accent-blue-soft, rgba(59,130,246,.12));
    border-color:var(--t-accent-blue-border, rgba(59,130,246,.45));
    color:var(--t-text-primary, #f8fafc);
  }
  .lessons-mobile-modal-item.locked{
    opacity:.42;
    cursor:not-allowed;
  }
  .lessons-mobile-modal-num{
    min-width:22px;
    height:22px;
    border-radius:6px;
    background:rgba(255,255,255,.06);
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .lessons-mobile-modal-item.active .lessons-mobile-modal-num{
    background:var(--t-accent-blue-soft, rgba(59,130,246,.2));
    color:var(--t-accent-blue-light, #60a5fa);
  }
  .lessons-mobile-modal-sub{
    font-size:11px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:1;
    min-width:0;
  }
  .lessons-mobile-modal-check{
    font-size:11px;
    font-weight:700;
    color:transparent;
    flex-shrink:0;
  }
  .lessons-mobile-modal-item.done .lessons-mobile-modal-check{
    color:#4ade80;
  }
  .lessons-main{
    padding:12px 14px;
    border-radius:18px;
    gap:12px;
  }
  .lessons-header{
    gap:10px;
  }
  .lessons-header-spacer{
    display:none;
  }
  .lessons-header-right{
    flex:0 0 auto;
  }
  .lessons-title{
    font-size:1.05rem;
    line-height:1.25;
  }
  .lessons-current-lesson-btn{
    max-width:100%;
    padding:7px 12px;
  }
  .lessons-desc{
    margin-top:-8px;
    font-size:12px;
  }
  .lessons-seq-tile{
    width:32px;
    height:36px;
    font-size:16px;
    border-radius:8px;
  }
  .lessons-sequence{
    gap:6px;
    min-height:46px;
    padding:8px 0;
  }
  .lessons-key{
    width:28px;
    height:28px;
    font-size:11px;
    border-radius:6px;
  }
  .lessons-space{
    width:100px;
    height:20px;
  }
  .lessons-hands{
    display:none;
  }
  .lessons-result-card{
    width:min(100%, 360px);
    min-width:0;
    padding:22px 14px;
    border-radius:16px;
  }
  .lessons-result-stats{
    gap:14px;
    margin-bottom:18px;
  }
  .lessons-stat-value{
    font-size:22px;
  }
  .lessons-result-actions{
    flex-direction:column;
    width:100%;
  }
  .lessons-btn{
    width:100%;
    min-height:40px;
  }
  .lessons-home-btn{
    top:10px;
    right:10px;
    width:28px;
    height:28px;
    font-size:12px;
  }
  .lessons-guide-banner{
    padding:8px;
  }
  .lessons-guide-banner-inner{
    border-radius:12px;
    padding:12px;
  }
}

@media (max-width:520px){
  .lessons-layout{
    width:calc(100% - 14px);
  }
  .lessons-main{
    padding:12px;
  }
  .lessons-keyboard{
    padding:8px;
    border-radius:14px;
    gap:4px;
  }
  .lessons-key-row{
    gap:4px;
  }
  .lessons-key{
    width:24px;
    height:24px;
    font-size:10px;
  }
  .lessons-key.key-w1{width:40px;}
  .lessons-key.key-w2{width:48px;}
  .lessons-key.key-w3{width:58px;}
  .lessons-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"]) .lessons-key-row:nth-child(3) .lessons-key[data-key="Enter"]:last-child{
    min-width:48px;
  }
  .lessons-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"]) .lessons-key-row:nth-child(4) .lessons-key[data-key="Shift"]:last-child{
    min-width:58px;
  }
  .lessons-space{
    width:82px;
    height:18px;
  }
}

/* ── Japanese (Romaji) tile styling ── */
.lessons-seq-tile.japanese-tile{
  flex-direction:column;
  height:58px;
  padding:4px 0;
}
.lessons-seq-tile.japanese-tile .tile-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
  gap:2px;
}
.lessons-seq-tile.japanese-tile .tile-hiragana{
  font-size:18px;
  font-weight:700;
  color:#f472b6;
  line-height:1;
  opacity:0.95;
}
.lessons-seq-tile.japanese-tile .tile-romaji{
  font-size:16px;
  font-weight:700;
  line-height:1;
}
.lessons-seq-tile.japanese-tile .tile-romaji .romaji-entered{
  color:#60a5fa;
  font-weight:700;
}
.lessons-seq-tile.japanese-tile .tile-romaji .romaji-remaining{
  color:#9ca3af;
  font-weight:500;
}
.lessons-seq-tile.japanese-tile.current .tile-hiragana{
  color:#f472b6;
  opacity:1;
}
.lessons-seq-tile.japanese-tile.current .tile-romaji .romaji-remaining{
  color:#fff;
  font-weight:700;
}
.lessons-seq-tile.japanese-tile.done .tile-hiragana{
  color:rgba(244,114,182,0.5);
}

@media (max-width:768px){
  .lessons-seq-tile.japanese-tile{
    height:44px;
    padding:2px 0;
  }
  .lessons-seq-tile.japanese-tile .tile-hiragana{
    font-size:9px;
  }
  .lessons-seq-tile.japanese-tile .tile-romaji{
    font-size:12px;
  }
}

/* ── Japanese font support ── */
.lessons-seq-tile.japanese-tile .tile-hiragana{
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", "Yu Gothic", "Meiryo", "MS Gothic", sans-serif;
}

/* ── Light theme Japanese styling ── */
[data-theme="light"] .lessons-seq-tile.japanese-tile .tile-hiragana{
  color:#ec4899;
}
[data-theme="light"] .lessons-seq-tile.japanese-tile .tile-romaji .romaji-entered{
  color:#2563eb;
}
[data-theme="light"] .lessons-seq-tile.japanese-tile .tile-romaji .romaji-remaining{
  color:#111827;
}
[data-theme="light"] .lessons-seq-tile.japanese-tile.current .tile-romaji .romaji-remaining{
  color:#000;
}

/* ── Japanese controls buttons ── */
.lessons-japanese-controls{
  display:flex;
  gap:10px;
  align-items:center;
}

.lessons-toggle-romaji-btn,
.lessons-hint-btn{
  min-width:120px;
  text-align:center;
}

.lessons-toggle-romaji-btn.active,
.lessons-hint-btn.active{
  background:var(--t-surface-hover, rgba(255,255,255,.08));
  border-color:var(--t-border-hover, rgba(255,255,255,.15));
}

/* ── Hide romaji and hint styles ── */
.lessons-sequence.hide-romaji .tile-romaji{
  visibility:hidden;
}

.lessons-sequence.show-hint .tile-romaji{
  visibility:hidden;
}

.lessons-sequence.show-hint .lessons-seq-tile.current .tile-romaji{
  visibility:visible !important;
  opacity:0.7;
  background:rgba(59,130,246,0.1);
  border-radius:4px;
  padding:2px 4px;
}