/*
  TypingSpot shared stylesheet
  Layout: centered single-column practice stage — stat rail above, live
  text track in the middle, phonetic virtual keyboard pinned below.
*/
:root{
  --bg:#f3f7fc;
  --surface:#ffffff;
  --ink:#14263f;
  --muted:#6b7b92;
  --accent:#0a72ea;
  --accent2:#fb315f;
  --accent-ink:#ffffff;
  --good:#1f8a5b;
  --key-on:#1f9d57; --key-on-ink:#ffffff;
  --bad:#d62f48;
  --border:#d9e3f0;
  --key:#e6edf7;
  --hand:#14263f;
  --kb-body:#14263f; --kb-key:#f7faff; --kb-edge:#b6c4d9; --kb-special:#25395b; --kb-special-ink:#a9b9d1; --kb-shadow:rgba(10,25,50,.55);
  --font-display:'Lateef','Noto Naskh Arabic',serif;
  --font-body:'Source Serif 4',Georgia,serif;
  --font-ui:'Inter',system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c1624; --surface:#13223a; --ink:#e8eef8; --muted:#93a4bc;
    --accent:#4da3ff; --accent2:#ff6b8b; --accent-ink:#0c1624; --good:#5fd09a; --bad:#ff6b80; --key-on:#5fd68a; --key-on-ink:#10261a;
    --border:#24364f; --key:#1c2d47; --hand:#e8eef8; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0c1624; --surface:#13223a; --ink:#e8eef8; --muted:#93a4bc;
  --accent:#4da3ff; --accent2:#ff6b8b; --accent-ink:#0c1624; --good:#5fd09a; --bad:#ff6b80; --key-on:#5fd68a; --key-on-ink:#10261a;
  --border:#24364f; --key:#1c2d47; --hand:#e8eef8; color-scheme:dark;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  margin:0;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-block:28px;
}
a{color:var(--accent);}
.wrap{max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:20px;}

header.top{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:10px; border-bottom:1px solid var(--border); padding-bottom:14px;
}
h1{font-family:var(--font-display); font-size:2rem; margin:0; font-weight:600; letter-spacing:.3px;}
h1 span{color:var(--accent2);}
.tagline{color:var(--muted); font-size:.85rem; margin:4px 0 0;}

nav.sitenav{display:flex; gap:14px; flex-wrap:wrap; font-size:.85rem;}
nav.sitenav a{color:var(--muted); text-decoration:none; font-weight:600;}
nav.sitenav a.current, nav.sitenav a:hover{color:var(--accent);}

.statrow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 14px; min-width:0;}
.stat .num{font-variant-numeric:tabular-nums; font-size:1.4rem; font-weight:700; line-height:1.1;}
.stat.hl{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 9%, var(--surface));}
.stat.hl .num{color:var(--accent); font-size:1.75rem;}
.stat .meter{height:5px; border-radius:3px; background:color-mix(in srgb, var(--border) 70%, transparent); margin-top:7px; overflow:hidden;}
.stat .meter i{display:block; height:100%; width:100%; border-radius:3px; background:var(--muted);
  transition:width .55s cubic-bezier(.22,.8,.3,1), background-color .45s ease;}
.stat.meter-good .meter i{background:var(--good);}
.stat.meter-bad .meter i{background:var(--bad);}
.stat .num{transition:color .45s ease;}
.stat.meter-good .num{color:var(--good);}
.stat.meter-bad .num{color:var(--bad);}
.stat .lbl{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}

.stage{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px 24px; position:relative; overflow:hidden;}
.stage.rtl{direction:rtl;}
#target{font-family:var(--font-body); font-size:1.5rem; line-height:2.3; min-width:0; word-wrap:break-word; position:relative; max-height:calc(2.3em * 4); overflow:hidden;}
.stage.rtl #target{font-family:var(--font-display); font-size:2.5rem; line-height:2.5; max-height:calc(2.5em * 3);}
#target .ch{position:relative; white-space:pre-wrap;}
#target{word-spacing:.45em;}
.stage.rtl #target{word-spacing:.6em;}
#target .ch.correct{color:var(--good);}
#target .ch.wrong{color:var(--bad); background:color-mix(in srgb, var(--bad) 18%, transparent); border-radius:3px;}
#target .ch.cursor, #target .ch.pending.cursor{background:color-mix(in srgb, var(--key-on) 28%, transparent); color:var(--ink); border-radius:4px;}
#target .ch.pending{color:color-mix(in srgb, var(--ink) 78%, var(--muted));}

.hidden-input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;}

.controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;}
.actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.controls .group{display:flex; gap:8px; flex-wrap:wrap;}
button.action{
  font-family:var(--font-ui); font-size:.82rem; font-weight:600; padding:9px 16px;
  border-radius:8px; border:1px solid var(--border); background:var(--key); color:var(--ink); cursor:pointer;
}
button.action.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
button.action:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
select.level{
  font-family:var(--font-ui); font-size:.82rem; padding:9px 12px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
}

.hint{font-size:.78rem; color:var(--muted); text-align:center;}

.kb-wrap{overflow-x:auto; padding-bottom:4px;}
.kb{
  display:flex; flex-direction:column; gap:7px; align-items:stretch; min-width:680px;
  padding:16px; background:color-mix(in srgb, var(--key) 12%, var(--surface));
  border:1px solid var(--border); border-radius:16px;
  box-shadow:0 1px 0 color-mix(in srgb, var(--surface) 60%, white) inset, 0 8px 20px -14px rgba(0,0,0,.4);
}
.kb{direction:ltr; position:relative; overflow:hidden;}
.hands{position:absolute; left:0; top:0; pointer-events:none; overflow:visible;}
.hands .hand{fill:var(--hand); opacity:.2;}
.hands .hand path{fill:var(--hand);}
.hand-tips .tip{fill:var(--key-on); fill-opacity:.28; stroke:var(--key-on); stroke-width:3; opacity:0;}
.kb{--gap:7px;}
.krow{display:flex; gap:var(--gap);}
.key{
  /* width = u units + the (u-1) gaps a wide key spans, so every row totals the same */
  --u:1;
  flex: var(--u) var(--u) calc((var(--u) - 1) * var(--gap));
  min-width:0;
  height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:7px; background:var(--key); border:1px solid var(--border);
  border-bottom-width:3px;
  font-size:.65rem; color:var(--muted);
  transition:background .08s, color .08s, transform .05s, border-bottom-width .05s;
  position:relative; box-shadow:0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent) inset;
}
.key .glyph{font-size:1.05rem; color:var(--ink); font-family:var(--font-body); line-height:1;}
.kb.script-rtl .key .glyph{font-family:var(--font-display); font-size:1.3rem;}
.key.active{background:var(--accent); border-color:var(--accent); transform:translateY(2px); border-bottom-width:1px;}
.key.active .glyph, .key.active .lat{color:var(--accent-ink);}
.key .lat{position:absolute; bottom:2px; right:4px; font-size:.5rem; opacity:.6;}

/* non-typing keys: tab, caps, shift, ctrl, alt, enter, space, backspace — dimmed, label-only */
.key.special{
  background:color-mix(in srgb, var(--key) 55%, var(--surface));
  border-color:color-mix(in srgb, var(--border) 80%, transparent);
  color:color-mix(in srgb, var(--muted) 75%, transparent);
  font-size:.62rem; font-weight:600; letter-spacing:.02em;
}
.key.special .glyph{display:none;}

/* Shift held: that Shift key lights up and sinks like a real press */
.key.special.pressed{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  transform:translateY(2px); border-bottom-width:1px;
}
/* while Shift is held, letter keys show their shifted glyph in the accent colour;
   keys with no distinct shifted form fade back */
.kb.shift-on .key[data-lat]:not(.active) .glyph{color:var(--accent);}
.kb.shift-on .key.dim-shift:not(.active){opacity:.45;}

.legend{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; font-size:.72rem; color:var(--muted);}
.legend .dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle;}

.result{display:none; text-align:center; padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:14px; gap:6px; flex-direction:column;}
.result.show{display:flex;}
.result .big{font-family:var(--font-display); font-size:2.6rem; color:var(--accent); font-weight:700;}

.rules{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 22px;}
.rules h2{font-size:1rem; margin:0 0 10px;}
.rules ul{margin:0; padding-inline-start:20px; font-size:.85rem; color:var(--muted); line-height:1.7;}

.intro{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px 22px; font-size:.92rem; line-height:1.7; color:var(--ink);}
.intro h2{font-size:1.1rem; margin-top:0;}

.langcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.langcard{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:6px;
  transition:border-color .15s, transform .1s;
}
.langcard:hover{border-color:var(--accent); transform:translateY(-2px);}
.langcard .name{font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--accent2);}
.langcard .desc{font-size:.82rem; color:var(--muted);}

footer.foot{margin-top:28px; border-top:1px solid var(--line,rgba(120,140,170,.25)); padding-top:22px; font-size:.85rem; color:var(--muted);}
.foot-in{display:flex; flex-wrap:wrap; gap:28px 48px; justify-content:space-between;}
.foot-brand{max-width:300px;} .foot-brand p{margin:8px 0 0; line-height:1.5;}
.foot-brand .brand{font-size:1.4rem;}
.foot-links{display:flex; flex-direction:column; gap:6px;}
.foot-links b{color:var(--ink); margin-bottom:2px;}
.foot-brand a:not(.brand){color:var(--accent); text-decoration:none;}
.foot-links a{color:var(--muted); text-decoration:none;} .foot-links a:hover{color:var(--accent);}
.foot-copy{margin-top:20px; padding-bottom:14px; text-align:center; font-size:.75rem;}

@media (max-width:620px){
  .statrow{grid-template-columns:repeat(2,minmax(0,1fr));}
  #target{font-size:1.25rem; line-height:2.1;}
  .stage.rtl #target{font-size:2.1rem; line-height:2.4;}
  h1{font-size:1.6rem;}
}

.stage-row{display:flex; gap:12px; align-items:stretch; direction:ltr;}
.stage-row .stage{flex:1; min-width:0;}
.sidecol{display:flex; flex-direction:column; gap:10px; width:170px; flex:none;}
.sidecol .statrow{display:flex; flex-direction:column; gap:8px; margin:0;}
.sidecol button{width:100%;}
.actions.side{flex-direction:column; justify-content:center; flex-wrap:nowrap; width:120px; flex:none;}
.actions.side button{width:100%;}
@media (max-width:640px){
  .stage-row{flex-direction:column;}
  .sidecol{width:auto;}
  .sidecol .statrow{display:grid; grid-template-columns:1fr 1fr;}
  .actions.side{flex-direction:row; width:auto; justify-content:center;}
  .actions.side button{width:auto;}
}
.result{display:none !important;}
.pager{display:flex; justify-content:space-between; gap:10px; margin-top:12px; font-size:.9rem;}
.pager a{color:var(--accent); text-decoration:none; font-weight:600;}
.langcard .name{font-family:var(--font-ui);}

.brand{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:1.45rem; color:var(--ink); text-decoration:none; letter-spacing:.2px;}
.brand b{color:var(--accent2); font-weight:700;}
.brand .mark{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--accent); color:#fff; font-family:var(--font-ui); font-size:1rem; font-weight:700;}
header.top{align-items:center;}
.pagehead{margin:6px 0 18px;}
.pagehead h1{font-size:1.9rem;}
.brand .mark{background:none; width:40px; height:40px; border-radius:0; display:block;}
.brand .mark{width:auto; height:44px;}



.brand .mark{display:block; width:45px; height:44px; background:url("data:image/webp;base64,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") center/contain no-repeat;}
button.action:not(.primary){background:var(--surface); color:var(--accent); border:1.5px solid var(--accent);}
button.action:not(.primary):hover{background:color-mix(in srgb, var(--accent) 10%, var(--surface));}
.brand{font-size:2.2rem; gap:12px; line-height:1;} @media (max-width:640px){.brand{font-size:1.7rem;}}

.lessons{display:grid; grid-template-columns:270px minmax(0,1fr); gap:20px; align-items:start;}
.ltabs{display:flex; flex-direction:column; gap:6px; position:sticky; top:16px;}
.ltab{display:flex; align-items:center; gap:12px; text-align:left; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px; cursor:pointer; color:var(--ink); font-family:var(--font-ui); transition:border-color .15s, background .15s;}
.ltab:hover{border-color:var(--accent);}
.ltab .num{flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--key); color:var(--accent2); font-weight:700; font-size:.9rem;}
.ltab .txt{display:flex; flex-direction:column; min-width:0;}
.ltab b{font-size:.88rem; font-weight:600;}
.ltab small{font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ltab.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.ltab.active small{color:color-mix(in srgb, var(--accent-ink) 80%, transparent);}
.ltab.active .num{background:#fff; color:var(--accent);}
.lpanel{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px;}
.lpanel[hidden]{display:none;}
.video{aspect-ratio:16/9; background:var(--kb-body); border-radius:12px; overflow:hidden; display:grid; place-items:center; color:var(--kb-special-ink);}
.video iframe{width:100%; height:100%; border:0;}
.vph{text-align:center;} .vph span{display:grid; place-items:center; width:56px; height:56px; margin:0 auto 8px; border-radius:50%; background:var(--accent2); color:#fff; font-size:1.2rem;} .vph p{margin:0; font-size:.85rem;}
.lpanel h2{font-family:var(--font-ui); font-size:1.25rem; margin:18px 0 6px;}
.lpanel h3{font-size:.95rem; margin:16px 0 6px;}
.lintro{margin:0; color:var(--ink); line-height:1.6;}
.guide{margin:0; padding-left:20px; line-height:1.7; color:var(--ink);}
.lactions{margin-top:18px;}
a.action.primary{display:inline-block; text-decoration:none; font-family:var(--font-ui); font-size:.9rem; font-weight:600; padding:11px 20px; border-radius:10px; background:var(--accent); color:var(--accent-ink);}
@media (max-width:760px){
  .lessons{grid-template-columns:1fr;}
  .ltabs{flex-direction:row; overflow-x:auto; position:static; padding-bottom:4px;}
  .ltab{width:auto; flex:none;} .ltab small{display:none;}
}

.urdu{font-family:var(--font-display); font-size:1.45rem; line-height:2.1; text-align:right;}
.urdu li{margin-bottom:2px;}
.guide.urdu{padding-left:0; padding-right:22px;}

.lpanel h2.urdu{font-size:1.2rem; line-height:1.6; margin:0 0 8px; text-align:right;}
.slogan{font-size:1.6rem; font-weight:700; color:var(--accent2); margin:14px 0 0;}

.lpanel h3.urdu{font-size:1.6rem; margin:10px 0 0; text-align:right;}
@media (max-width:760px){
  .ltabs{flex-wrap:wrap; overflow:visible; gap:8px;}
  .ltab{border-radius:999px; padding:6px 12px 6px 6px; gap:8px;}
  .ltab .num{width:22px; height:22px; font-size:.72rem;}
  .ltab b{font-size:.8rem; white-space:nowrap;}
}

.ltab .pre{font-style:normal;}

/* practice pages: keep text + keyboard in the first screen */
body:has(.stage-row){padding-block:12px;}
.wrap:has(.stage-row){gap:12px;}
.wrap:has(.stage-row) header.top{padding-bottom:8px;}
.wrap:has(.stage-row) .brand{font-size:1.7rem;}
.wrap:has(.stage-row) .brand .mark{height:36px; width:41px;}
.wrap:has(.stage-row) .pagehead{margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px;}
.wrap:has(.stage-row) .pagehead h1{font-size:1.5rem;}
.wrap:has(.stage-row) .pagehead .tagline{margin:0; font-size:.85rem;}
.wrap:has(.stage-row) .stage-row{gap:10px;}
.wrap:has(.stage-row) .sidecol{width:150px; gap:6px;}
.wrap:has(.stage-row) .sidecol .statrow{gap:6px;}
.wrap:has(.stage-row) .sidecol .stat{padding:6px 12px;}
.wrap:has(.stage-row) .sidecol .stat .num{font-size:1.2rem;}
.wrap:has(.stage-row) .sidecol .stat.hl .num{font-size:1.4rem;}
.wrap:has(.stage-row) .sidecol .stat .lbl{font-size:.64rem;}
.wrap:has(.stage-row) .sidecol button.action{padding:7px 10px;}
.wrap:has(.stage-row) .stage{padding:14px 20px;}
.wrap:has(.stage-row) #target{line-height:2.1; max-height:calc(2.1em * 3);}
.wrap:has(.stage-row) .stage.rtl #target{line-height:2.4; max-height:calc(2.4em * 3); font-size:2.4rem;}

.wrap:has(.stage-row) .pagehead.lower{display:block; margin-top:8px; padding-top:14px; border-top:1px solid var(--border);}
.wrap:has(.stage-row) .pagehead.lower .tagline{margin-top:4px;}

/* lesson hubs */
.crumbs{display:flex; width:fit-content; max-width:100%; align-items:center; flex-wrap:wrap; gap:2px; font-size:.78rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); background:#e6eefb; border:1px solid #cfdcf3; border-radius:999px; padding:6px 14px; margin:2px 0 10px;}
.crumbs a{color:var(--accent); text-decoration:none; font-weight:700;} .crumbs a:hover{text-decoration:underline;} .crumbs span{margin:0 8px; color:var(--accent2); font-weight:800;}
.lguide{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 18px;}
.lguide h3{margin:0 0 6px; font-size:.95rem;}
.lsec h2{font-family:var(--font-ui); font-size:1.15rem; margin:0 0 2px;}
.lsub{margin:0 0 10px; color:var(--muted); font-size:.85rem;}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px;}
.tile{display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px; text-decoration:none; background:var(--surface); border:1px solid var(--border); border-radius:14px; color:var(--ink); transition:border-color .15s, transform .15s;}
.tile:hover{border-color:var(--accent); transform:translateY(-2px);}
.tile .g{font-family:var(--font-display); font-size:2.3rem; line-height:1.5; color:var(--accent);}
.tile small{font-size:.72rem; color:var(--muted); font-weight:600; text-align:center;}
.wcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px;}
.wcard{display:flex; align-items:center; gap:12px; padding:12px 14px; text-decoration:none; background:var(--surface); border:1px solid var(--border); border-radius:14px; color:var(--ink);}
a.wcard:hover{border-color:var(--accent);}
.wcard .g{flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--key); color:var(--accent2); font-weight:700; font-size:1rem;}
.wcard .t{display:flex; flex-direction:column; min-width:0;} .wcard b{font-size:.9rem;} .wcard small{color:var(--muted); font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-display);}
.wcard.soon{opacity:.55; border-style:dashed;} .wcard.soon small{font-family:var(--font-ui); font-size:.75rem;}
.wcard.mixed{border-color:var(--accent);} .wcard.mixed small{font-family:var(--font-ui); font-size:.8rem;}

/* home hero + language sections */
.hero{text-align:center; padding:44px 0 36px;}
.eyebrow{display:inline-block; margin:0 0 14px; padding:5px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--muted); font-size:.8rem; font-weight:600;}
.hero h1{font-size:clamp(2rem,5.2vw,3.4rem); line-height:1.15; max-width:820px; margin:0 auto;}
.hero h1 span{color:var(--accent2);}
.hero .lead{max-width:600px; margin:16px auto 0; font-size:1.08rem; color:var(--muted); line-height:1.55;}
.hero .cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px;}
.btn-hero,.btn-ghost{display:inline-block; padding:12px 24px; border-radius:12px; font-weight:700; text-decoration:none; font-size:1rem;}
.btn-hero{background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(10,114,234,.28);}
.btn-hero:hover{filter:brightness(1.08);}
.btn-ghost{border:1.5px solid var(--accent); color:var(--accent); background:transparent;}
.btn-ghost:hover{background:var(--surface);}
.hero-points{list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; margin:26px 0 0; padding:0; color:var(--muted); font-size:.9rem;}
.hero-points li:before{content:"\2713"; color:var(--accent2); font-weight:700; margin-right:7px;}
.langsec{padding:10px 0 26px;}
.langsec h2{text-align:center; margin:0 0 18px;}
.lsection{display:flex; align-items:center; gap:22px; padding:22px 26px; margin-bottom:14px; background:var(--surface); border:1px solid var(--border); border-radius:18px; text-decoration:none; color:var(--ink); transition:transform .15s,border-color .15s,box-shadow .15s;}
.lsection:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 26px rgba(20,38,63,.08);}
.lglyph{flex:none; width:84px; height:84px; border-radius:20px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-size:2rem; font-weight:700; font-family:var(--font-display);}
.lglyph.rtl{font-family:"Lateef",serif; font-size:2.6rem;}
.ltext{flex:1; display:flex; flex-direction:column; gap:5px;}
.ltext b{font-size:1.35rem; font-family:var(--font-display);}
.ltext span{color:var(--muted); line-height:1.5;}
.lgo{flex:none; color:var(--accent); font-weight:700;}
@media(max-width:640px){.lsection{flex-wrap:wrap; gap:14px; padding:18px;} .lglyph{width:64px; height:64px; font-size:1.6rem;} .lglyph.rtl{font-size:2rem;} .lgo{width:100%;}}
.foot-copy .ver{margin-left:6px; padding:1px 7px; border:1px solid var(--border); border-radius:999px; font-size:.7rem;}
.pagehead.below{margin:26px 0 8px;}
@media(max-width:640px){.foot-in{flex-direction:column; align-items:flex-start; gap:22px;} .foot-brand{max-width:none;} .foot-links{align-items:flex-start;} .foot-copy{text-align:left;}}
@media(max-width:760px){.ltabs{display:grid; grid-template-columns:1fr 1fr; overflow:visible; gap:8px;} .ltab{width:100%; justify-content:flex-start; text-align:left; border-radius:14px;} .ltab b{white-space:normal; line-height:1.25;}}

/* end-of-run celebration */
.sidecol.done .stat{animation:flashBorder .45s ease-in-out 0s 8, statPop .6s cubic-bezier(.2,1.6,.4,1) both; border-width:2px; border-color:var(--accent);}
.sidecol.done .stat:nth-of-type(2){animation-delay:.07s;} .sidecol.done .stat:nth-of-type(3){animation-delay:.14s;} .sidecol.done .stat:nth-of-type(4){animation-delay:.21s;}
.sidecol.done .stat.hl{background:linear-gradient(135deg,var(--accent),var(--accent2)); border-color:transparent; animation:flashBorder .45s ease-in-out 0s 8, statPop .6s cubic-bezier(.2,1.6,.4,1) both, glow 1.2s ease-out .4s 4;}
.sidecol.done .stat.hl .num,.sidecol.done .stat.hl .lbl{color:#fff;}
.sidecol.done .stat.hl .num{font-size:2.2rem;}
.stage-row.done #stage{opacity:.45; transition:opacity .6s ease;}
@keyframes flashBorder{0%,100%{border-color:var(--accent); background-color:color-mix(in srgb,var(--accent) 14%,var(--surface));}50%{border-color:var(--accent2); background-color:color-mix(in srgb,var(--accent2) 16%,var(--surface));}}
@keyframes statPop{0%{transform:scale(.88);}60%{transform:scale(1.07);}100%{transform:scale(1);}}
@keyframes glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent2) 60%,transparent);}100%{box-shadow:0 0 0 18px transparent;}}
@media (prefers-reduced-motion:reduce){.sidecol.done .stat,.sidecol.done .stat.hl{animation:none;}}

.hlk{color:var(--accent2); font-weight:800; font-family:Inter,system-ui,sans-serif;}
.guide-img{display:block; width:100%; max-width:400px; height:auto; margin:14px auto 26px; border-radius:12px; border:1px solid var(--border);}
.ltab .pre{color:var(--accent2); font-weight:700;}
.ltab.active .pre{color:#fff;}
@media(max-width:760px){.ltab b{display:flex; flex-direction:column;} .ltab .pre{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;}}
/* more vertical breathing room */
.pagehead{margin:10px 0 28px;}
.lsec{margin-bottom:34px;}
.lsec h2{margin:0 0 6px;}
.lsub{margin:0 0 18px;}
.lguide{margin-bottom:30px;}
.lguide h3{margin:0 0 12px;}
.lpanel h2{margin:0 0 18px;}
.lpanel h3{margin:26px 0 14px;}
.lpanel .lintro{margin:0 0 24px;}
.lpanel .lactions{margin:24px 0;}
.lpanel .slogan{margin:28px 0 22px;}
.pager{margin:30px 0 18px;}
.tagline{margin-bottom:16px;}
.wcard{margin-bottom:10px;}
.pagehead{margin:10px 0 8px;}
.pagehead h1{margin-bottom:6px;}
.pagehead .tagline{margin-bottom:0;}
.pagehead:not(:has(.tagline)){margin-bottom:-12px;}
.wcard small[lang=ur]{text-align:left; font-size:.95rem; direction:rtl; unicode-bidi:plaintext;}
.lsub[lang=ur]{font-size:.95rem;}
.guide-img.wide{max-width:100%; margin:20px 0 10px;}
.guide.urdu li p{margin:0;}
.guide.urdu li>p:last-child{margin-bottom:16px;}
header.top{margin-bottom:28px;}
.wrap:has(.stage-row) header.top{margin-bottom:16px;}
.wcard.drill{background:var(--accent); border-color:var(--accent); color:#fff; padding:18px 22px; box-shadow:0 8px 22px rgba(10,110,240,.28); transition:transform .15s, box-shadow .15s;}
.wcard.drill:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(10,110,240,.36);}
.wcard.drill .t b{font-size:1.15rem; color:#fff;}
.wcard.drill .t small{color:rgba(255,255,255,.88); font-size:1rem;}
.wcard.drill .g{background:#fff; color:var(--accent); width:46px; height:46px;}
.wcard.drill::after{content:"\2192"; margin-left:auto; font-size:1.4rem; font-weight:700;}
/* Typing Tests dropdown */
.dd{position:relative;}
.dd-btn{all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--muted); font-weight:600; font-size:inherit; font-family:inherit;}
.dd-btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}
.dd:hover .dd-btn, .dd:focus-within .dd-btn, .dd.current .dd-btn{color:var(--accent);}
.dd .caret{transition:transform .2s;}
.dd:hover .caret, .dd:focus-within .caret{transform:rotate(180deg);}
.dd-menu{position:absolute; right:0; top:100%; min-width:200px; padding:6px; margin-top:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 30px rgba(20,38,63,.14); z-index:50;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .18s, transform .18s, visibility 0s linear .18s;}
.dd-menu::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px;}   /* keeps the menu open while the pointer crosses the gap */
.dd:hover .dd-menu, .dd:focus-within .dd-menu{opacity:1; visibility:visible; transform:none; transition:opacity .18s, transform .18s;}
nav.sitenav .dd-menu a{display:block; padding:9px 12px; border-radius:8px; color:var(--ink); white-space:nowrap;}
nav.sitenav .dd-menu a:hover{background:var(--key); color:var(--accent);}
/* Typing test article */
.tt-article{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:26px 28px; margin-top:28px; font-size:.97rem; line-height:1.75; color:var(--ink);}
.tt-article h2{font-size:1.35rem; margin:34px 0 10px; line-height:1.3;}
.tt-article h2:first-of-type{margin-top:26px;}
.tt-article h3{font-size:1.05rem; margin:24px 0 6px;}
.tt-article p{margin:0 0 12px;}
.tt-article .lead{font-size:1.05rem; margin-bottom:18px;}
.tt-article ol,.tt-article ul{margin:0 0 14px; padding-inline-start:22px;}
.tt-article li{margin:4px 0;}
.tt-article table{width:100%; border-collapse:collapse; margin:14px 0 18px; font-size:.9rem; line-height:1.55;}
.tt-article th,.tt-article td{border:1px solid var(--border); padding:9px 12px; text-align:left; vertical-align:top;}
.tt-article thead th{background:var(--key); font-weight:700;}
.tt-article tbody th{background:var(--key); font-weight:600; width:32%;}
.tt-article kbd{display:inline-block; padding:0 6px; border:1px solid var(--border); border-bottom-width:2px; border-radius:6px; background:var(--key); font:600 .8rem/1.5 inherit; font-family:inherit;}
.tt-article .ur{font-family:"Noto Naskh Arabic","Lateef",serif; font-size:1.15rem; line-height:1.8; unicode-bidi:isolate;}
.tt-keys td{line-height:2.1;}
@media (max-width:640px){.tt-article{padding:18px 16px;} .tt-article table{display:block; overflow-x:auto;}}
.tt-article .nw{white-space:nowrap; display:inline-block; margin:0 6px 2px 0;}
.tt-article .ur{font-size:1.4rem; font-family:"Noto Naskh Arabic","Lateef","Segoe UI",Tahoma,serif;}
.tt-keys td{line-height:2.4;}
.crumbs{font-size:.85rem; color:var(--muted,#64748b); margin:14px 0 4px;}
.crumbs a{color:inherit; text-decoration:none;} .crumbs a:hover{text-decoration:underline;}
.crumbs span{margin:0 4px;}
/* tt-article v2 */
.tt-by{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.82rem; color:var(--muted); padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--border);}
.tt-by b{color:var(--ink); font-weight:600; margin-right:4px;}
.tt-answer{font-size:1.08rem; line-height:1.65; background:var(--key); border-inline-start:4px solid var(--accent); padding:14px 18px; border-radius:10px; margin:0 0 16px;}
.tt-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 20px;}
.tt-facts div{border:1px solid var(--border); border-radius:10px; padding:10px 14px; background:var(--surface);}
.tt-facts small{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.tt-facts b{display:block; font-size:.95rem; line-height:1.4; margin-top:2px;}
.tt-toc{border:1px solid var(--border); border-radius:12px; padding:14px 20px; margin:0 0 8px; background:var(--surface);}
.tt-article .tt-toc-h{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 8px;}
.tt-toc ol{columns:2; column-gap:28px; margin:0; padding-inline-start:20px; font-size:.9rem;}
.tt-toc li{margin:3px 0; break-inside:avoid;}
.tt-article h2[id]{scroll-margin-top:16px;}
.tt-steps{list-style:none; counter-reset:s; padding:0 !important; margin:12px 0 14px;}
.tt-steps li{counter-increment:s; position:relative; padding:10px 14px 10px 52px; margin:8px 0; border:1px solid var(--border); border-radius:10px; line-height:1.55;}
.tt-steps li::before{content:counter(s); position:absolute; left:12px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center;}
.tt-note{font-size:.88rem; color:var(--muted); margin:0 0 14px;}
.tt-note b{color:var(--ink);}
.tt-callout{border:1px solid var(--border); border-inline-start:4px solid var(--accent2); background:var(--key); border-radius:10px; padding:12px 16px; font-size:.93rem; margin:12px 0 16px;}
.tt-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px 0 16px;}
.tt-card{border:1px solid var(--border); border-radius:12px; padding:14px 16px;}
.tt-article .tt-card h3{margin:0 0 4px; font-size:1rem;}
.tt-card p{margin:0 0 6px; font-size:.9rem;}
.tt-ex{background:var(--key); border-radius:8px; padding:6px 10px; font-size:.85rem !important; margin:6px 0 0 !important;}
.tt-two{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0;}
.tt-two div{border:1px solid var(--border); border-radius:10px; padding:12px 16px;}
.tt-two p{margin:4px 0 0; font-size:.92rem;}
.tt-tag{display:inline-block; padding:1px 10px; border-radius:99px; font-size:.78rem; font-weight:600; background:var(--key);}
.tt-tag.t3{background:#fff2c9; color:#6b4d00;} .tt-tag.t4{background:#d6f3e3; color:#0d5a31;} .tt-tag.t5{background:#c8e6ff; color:#05437d;}
.tt-chips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px;}
.tt-chip{border:1px solid var(--border); border-radius:99px; padding:6px 14px; font-size:.88rem; text-decoration:none; background:var(--surface); display:inline-flex; gap:8px; align-items:center;}
.tt-chip b{background:var(--accent); color:var(--accent-ink); border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:.75rem;}
.tt-chip:hover{border-color:var(--accent);}
.tt-about{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:10px 0 16px;}
.tt-about div{border:1px solid var(--border); border-radius:10px; padding:10px 14px;}
.tt-about dt{font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.tt-about dd{margin:2px 0 0; font-size:.92rem; line-height:1.55;}
.tt-src{font-size:.9rem;}
.tt-faq{display:grid; gap:10px; margin-top:12px;}
.tt-q{border:1px solid var(--border); border-radius:12px; padding:12px 18px;}
.tt-article .tt-q h3{margin:0 0 4px; font-size:1rem;}
.tt-q p{margin:0; font-size:.93rem;}
@media (max-width:640px){.tt-facts,.tt-cards,.tt-two,.tt-about{grid-template-columns:1fr;} .tt-toc ol{columns:1;}}
.tt-hub{margin-top:24px;}
.tt-keyline{display:flex; flex-wrap:wrap; gap:6px 10px; border:1px solid var(--border); border-radius:10px; padding:10px 14px; background:var(--surface);}
.tt-keyline .nw{margin:0;}
.hubhead{margin:6px 0 16px;}
.hubhead h1{font-size:1.9rem; margin:0;}
.hubhead .lactions{margin-top:12px; display:flex; flex-wrap:wrap; gap:10px;}
a.action{display:inline-block; text-decoration:none; font-family:var(--font-ui); font-size:.9rem; font-weight:600; padding:10px 20px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--ink);}
a.action:hover{border-color:var(--accent);}
a.action.primary{border-color:var(--accent);}
.tt-keycards{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:12px 0 8px;}
.tt-kc{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; text-decoration:none; color:var(--ink); border:1px solid var(--border); border-radius:12px; padding:12px 6px; background:var(--surface);}
.tt-kc:hover{border-color:var(--accent);}
.tt-kc kbd{font-size:.8rem;}
.tt-kc .ur{font-size:2rem; line-height:1.6;}
.tt-kc b{font-size:.85rem;}
.tt-kc small{font-size:.74rem; color:var(--muted); line-height:1.3;}
@media (max-width:640px){.tt-keycards{grid-template-columns:repeat(2,1fr);}}
.tt-keycards.k7{grid-template-columns:repeat(7,1fr);}
.tt-keycards.k7 kbd{white-space:nowrap;}
@media (max-width:900px){.tt-keycards.k7{grid-template-columns:repeat(4,1fr);}}
@media (max-width:640px){.tt-keycards.k7{grid-template-columns:repeat(2,1fr);}}

/* lesson hub: even grids, finger map, middle-aligned tables */
.tt-article td,.tt-article th{vertical-align:middle;}
.tiles.n10{grid-template-columns:repeat(5,1fr);}
.tiles.n9{grid-template-columns:repeat(9,1fr);}
@media (max-width:640px){.tiles.n9{grid-template-columns:repeat(3,1fr);}}
.wcards.n4{grid-template-columns:repeat(2,1fr);}
@media (max-width:520px){.wcards.n4{grid-template-columns:1fr;}}
.tt-fl{list-style:none; margin:8px 0 0; padding:0;}
.tt-fl li{display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--border); font-size:.92rem;}
.tt-fl li:first-child{border-top:0;}
.tt-fl .f{flex:0 0 64px; color:var(--muted);}
.tt-fl .ur{font-size:1.5rem; line-height:1.5;}
.tt-fl small{margin-left:auto; color:var(--muted);}

/* lesson hub: word and practice cards read as links */
a.wcard:not(.drill){border-color:var(--accent); box-shadow:0 2px 8px rgba(10,114,234,.12); transition:transform .12s, box-shadow .12s;}
a.wcard:not(.drill) b{color:var(--accent); font-size:1rem;}
a.wcard:not(.drill)::after{content:"\2192"; margin-left:auto; flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; font-weight:700;}
a.wcard:not(.drill):hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(10,114,234,.22);}
a.wcard:not(.drill) .g{background:rgba(10,114,234,.1); color:var(--accent);}
.tiles.n5{grid-template-columns:repeat(5,1fr);}
.wcards.n3{grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){.wcards.n3{grid-template-columns:1fr;}}

/* plain key -> Shift letter pair cards */
.tt-pairs{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:12px 0 8px;}
.tt-pair{display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 6px; text-align:center; text-decoration:none; color:var(--ink); border:1px solid var(--accent); border-radius:12px; background:var(--surface); box-shadow:0 2px 8px rgba(10,114,234,.1);}
.tt-pair:hover{box-shadow:0 6px 16px rgba(10,114,234,.2);}
.tt-pair .pl{display:flex; align-items:center; gap:6px;}
.tt-pair .pl .ur{font-size:1.5rem; line-height:1.5; color:var(--muted);}
.tt-pair .ar{font-size:.72rem; color:var(--muted); font-weight:600;}
.tt-pair .ar::before{content:"\2193  "; color:var(--accent);}
.tt-pair .big{font-size:2.3rem; line-height:1.5; color:var(--accent);}
.tt-pair kbd{font-size:.78rem; white-space:nowrap;}
.tt-pair b{font-size:.85rem;}
.tt-pair small{font-size:.74rem; color:var(--muted);}
@media (max-width:900px){.tt-pairs{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.tt-pairs{grid-template-columns:repeat(2,1fr);} .tt-pair:last-child:nth-child(odd){grid-column:1/-1;}}
.tiles.n12{grid-template-columns:repeat(6,1fr);}
@media (max-width:640px){.tiles.n12{grid-template-columns:repeat(3,1fr);}}
.tt-keycards.k9{grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){.tt-keycards.k9{grid-template-columns:repeat(3,1fr); gap:8px;} .tt-keycards.k9 .tt-kc small{font-size:.66rem;}}

/* look-alike letter pairs */
.tt-twins{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:12px 0 8px;}
.tt-twin{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; text-align:center; border:1px solid var(--border); border-radius:12px; background:var(--surface);}
.tt-twin .tw{display:flex; align-items:center; gap:8px;}
.tt-twin .tw .ur{font-size:2rem; line-height:1.5;}
.tt-twin i{font-style:normal; font-size:.72rem; font-weight:700; color:var(--accent2); text-transform:uppercase; letter-spacing:.06em;}
.tt-twin small{font-size:.78rem; color:var(--muted); line-height:1.35;}
@media (max-width:900px){.tt-twins{grid-template-columns:repeat(2,1fr);}}

/* lesson 6 layout helpers */
.tiles.n7{grid-template-columns:repeat(7,1fr);}
@media (max-width:640px){.tiles.n7{grid-template-columns:repeat(4,1fr);}}
.tt-pairs.p6{grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){.tt-pairs.p6{grid-template-columns:repeat(2,1fr);}}
.tt-pair .tip{margin-top:6px; padding-top:7px; border-top:1px solid var(--border); width:100%; line-height:1.35;}
.tt-lets{display:flex; flex-wrap:wrap; gap:4px 14px; direction:ltr; align-items:center;}
.tt-keycards.k4{grid-template-columns:repeat(4,1fr);}
@media (max-width:640px){.tt-keycards.k4{grid-template-columns:repeat(2,1fr);}}
.tt-keycards.k4 a.tt-kc{border-color:var(--accent); box-shadow:0 2px 8px rgba(10,114,234,.1);}
.tt-keycards.k4 a.tt-kc b{color:var(--accent);}
.tt-keycards.k4 a.tt-kc::after{content:"Practise \2192"; margin-top:6px; font-size:.78rem; font-weight:700; color:var(--accent);}
.tt-keycards.k6{grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){.tt-keycards.k6{grid-template-columns:repeat(2,1fr);}}
.tt-keycards.k6 a.tt-kc{border-color:var(--accent); box-shadow:0 2px 8px rgba(10,114,234,.1);}
.tt-keycards.k6 a.tt-kc small{color:var(--accent); font-weight:700;}
.tt-keycards.k6 .tt-lets{justify-content:center; gap:2px 8px; margin:4px 0;}
.tt-keycards.k6 .tt-lets .ur{font-size:1.4rem; line-height:1.6;}

/* sentence example cards */
.tt-sents{display:grid; gap:10px; margin:12px 0 8px;}
.tt-sent{display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 20px; padding:12px 18px; border:1px solid var(--border); border-radius:12px; background:var(--surface);}
.tt-sent .ur{grid-column:2; grid-row:1 / span 2; font-size:1.8rem; line-height:1.7; text-align:right;}
.tt-sent b{grid-column:1; grid-row:1; align-self:end; font-size:.92rem;}
.tt-sent small{grid-column:1; grid-row:2; align-self:start; font-size:.8rem; color:var(--muted);}
@media (max-width:640px){.tt-sent{grid-template-columns:1fr;} .tt-sent .ur{grid-column:1; grid-row:1; font-size:1.6rem;} .tt-sent b{grid-row:2;} .tt-sent small{grid-row:3;}}
.tt-keycards.k3{grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){.tt-keycards.k3{grid-template-columns:1fr;}}
.tt-keycards.k3 a.tt-kc{border-color:var(--accent); box-shadow:0 2px 8px rgba(10,114,234,.1);}
.tt-keycards.k3 .ur.big{font-size:3.4rem; line-height:1.4; color:var(--accent);}
.tiles.n2{grid-template-columns:repeat(2,minmax(92px,150px));}
.tt-cards.c3{grid-template-columns:repeat(3,1fr);}
.tt-cards.c4{grid-template-columns:repeat(4,1fr);}
@media (max-width:640px){.tt-cards.c3{grid-template-columns:1fr;} .tt-cards.c4{grid-template-columns:repeat(2,1fr);} .tt-cards.c4 .tt-card{padding:12px;}}
.tt-nrow{display:flex; gap:6px; margin:12px 0 6px; align-items:stretch;}
.tt-nrow .k{flex:1 1 0; min-width:0; text-align:center; border:1px solid var(--border); border-radius:10px; padding:10px 2px 6px; font-weight:700; font-size:1.25rem;}
.tt-nrow .k small{display:block; font-weight:500; font-size:.68rem; color:var(--muted); margin-top:2px;}
.tt-nrow .k.gap{margin-left:10px;}
.tt-nrow .f1{background:rgba(220,60,60,.13);} .tt-nrow .f2{background:rgba(240,150,20,.16);} .tt-nrow .f3{background:rgba(40,170,80,.15);} .tt-nrow .f4{background:rgba(10,114,234,.14);}
.tt-nrowl{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.82rem; color:var(--muted); margin:0 0 14px;}
.tt-nrowl i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-1px; border:1px solid var(--border);}
.tt-nrowl .f1{background:rgba(220,60,60,.3);} .tt-nrowl .f2{background:rgba(240,150,20,.35);} .tt-nrowl .f3{background:rgba(40,170,80,.32);} .tt-nrowl .f4{background:rgba(10,114,234,.3);}
@media (max-width:640px){.tt-nrow{gap:3px;} .tt-nrow .k{font-size:1.05rem; padding:8px 0 5px;} .tt-nrow .k small{font-size:.6rem;} .tt-nrow .k.gap{margin-left:6px;}}
.tiles.n4{grid-template-columns:repeat(4,1fr);}
@media (max-width:640px){.tiles.n4{grid-template-columns:repeat(2,1fr);}}
.tt-article td .ur{font-size:1.9rem; line-height:1.3;}
.tt-okno{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px 0 14px;}
.tt-okno>div{border:1px solid var(--border); border-radius:12px; padding:12px 14px; text-align:center;}
.tt-okno .ur{display:block; font-size:2rem; line-height:1.7;}
.tt-okno b{display:block; font-size:.85rem; margin-bottom:2px;}
.tt-okno small{color:var(--muted); font-size:.8rem;}
.tt-okno .ok{border-color:rgba(40,170,80,.55); background:rgba(40,170,80,.08);} .tt-okno .ok b{color:#1b8a45;}
.tt-okno .no{border-color:rgba(220,60,60,.5); background:rgba(220,60,60,.07);} .tt-okno .no b{color:#c93434;}
@media (max-width:640px){.tt-okno{grid-template-columns:1fr;}}
.tt-card .ur.big{font-size:1.9rem; line-height:1.4;}
.tt-keycards.k5{grid-template-columns:repeat(5,1fr);}
@media (max-width:640px){.tt-keycards.k5{grid-template-columns:repeat(2,1fr);}}
.tt-keycards.k5 a.tt-kc{border-color:var(--accent); box-shadow:0 2px 8px rgba(10,114,234,.1);}
.tt-keycards.k5 a.tt-kc b{color:var(--accent);}
.tt-keycards.k5 a.tt-kc::after{content:"Practise \2192"; margin-top:6px; font-size:.78rem; font-weight:700; color:var(--accent);}

/* Enter key lights up blue when a drill is finished */
.key.special.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:translateY(2px); border-bottom-width:1px; animation:enterPulse 1.2s ease-in-out infinite;}
@keyframes enterPulse{50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);}}
@media (prefers-reduced-motion:reduce){.key.special.active{animation:none;}}

/* Lessons hub: centre the start buttons; one under each lesson title, one at the end */
.lpanel .lactions{display:flex; justify-content:center; text-align:center;}
.lpanel .lactions-top{margin:0 0 18px;}

/* Online Urdu keyboard page */
button.key{font:inherit; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent;}
button.key:hover{background:color-mix(in srgb, var(--accent) 14%, var(--key));}
.uk-box{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px; margin:0 0 14px;}
.uk-tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 10px;}
.uk-tools .sp{flex:1;}
.uk-tools .action{padding:8px 14px; font-size:.85rem;}
#uText{display:block; width:100%; min-height:190px; resize:vertical; box-sizing:border-box; padding:16px 18px; border:1px solid var(--border); border-radius:12px; background:var(--bg, var(--surface)); color:var(--ink); font-family:var(--font-display); font-size:1.5rem; line-height:2.2; word-spacing:.3em;}
#uText:focus{outline:2px solid var(--accent); outline-offset:1px;}
.uk-meta{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.8rem; color:var(--muted); margin:8px 2px 0;}
#kbWrap[hidden]{display:none;}
.uk-chart{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:12px 0 8px;}
.uk-chart table{margin:0; display:table;}
.uk-chart caption{font-weight:600; text-align:left; padding:0 0 6px; font-size:.9rem;}
.tt-article .uk-chart td .ur, .tt-article .uk-marks td .ur{font-size:1.7rem; line-height:1.5;}
.uk-chart td:first-child, .uk-chart th:first-child{white-space:nowrap;}
@media (max-width:820px){.uk-chart{grid-template-columns:1fr;}}
@media (max-width:640px){#uText{font-size:1.3rem; min-height:160px;} .tt-article .uk-chart table{display:table;}}
.key.hit{background:var(--accent); border-color:var(--accent); transform:translateY(2px); border-bottom-width:1px;}
.key.hit .glyph, .key.hit .lat{color:var(--accent-ink);}
#kbWrap .kb{min-width:0;}
@media (max-width:640px){#kbWrap .kb{padding:8px; --gap:3px; gap:3px;} #kbWrap .key{height:38px; font-size:.55rem;} #kbWrap .key .glyph{font-size:.9rem;} #kbWrap .kb.script-rtl .key .glyph{font-size:1rem;} #kbWrap .key .lat{display:none;}}

/* Online Urdu keyboard: keycap map (replaces the tall tables) */
.uk-map h3{margin:18px 0 8px; font-size:1rem;}
.uk-maprow{display:grid; grid-template-columns:repeat(10,1fr); gap:8px;}
.uk-tile{border:1px solid var(--border); border-bottom-width:3px; border-radius:10px; padding:8px 4px 6px; text-align:center; background:var(--surface); display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0;}
.uk-tile kbd{font-size:.72rem;}
.tt-article .uk-tile .ur{font-size:1.9rem; line-height:1.5;}
.uk-tile small{display:flex; align-items:center; gap:4px; font-size:.68rem; color:var(--muted); line-height:1.2;}
.tt-article .uk-tile small .ur{font-size:1.2rem; line-height:1.3; color:var(--ink);}
.uk-tile .muted, .uk-tile small.muted{color:var(--muted); opacity:.7;}
@media (max-width:760px){.uk-maprow{grid-template-columns:repeat(5,1fr);}}

/* Lesson 12: seven mark cards */
.tt-keycards.k7m{grid-template-columns:repeat(7,1fr);}
.tt-keycards.k7m kbd{white-space:nowrap;}
.tt-keycards.k7m a.tt-kc{border-color:var(--accent); box-shadow:0 2px 8px rgba(10,114,234,.1);}
.tt-keycards.k7m a.tt-kc b{color:var(--accent);}
.tt-keycards.k7m a.tt-kc::after{content:"Practise \2192"; margin-top:6px; font-size:.78rem; font-weight:700; color:var(--accent);}
@media (max-width:900px){.tt-keycards.k7m{grid-template-columns:repeat(4,1fr);}}
@media (max-width:640px){.tt-keycards.k7m{grid-template-columns:repeat(2,1fr);}}
button.key:disabled{cursor:default; opacity:1; color:color-mix(in srgb, var(--muted) 75%, transparent);}
button.key.special:disabled:hover{background:color-mix(in srgb, var(--key) 55%, var(--surface));}

/* Tighter gap between the header and the breadcrumbs (header margin 28 + flex gap 20 - 36 = 12px) */
header.top + .crumbs{margin-top:-36px;}
.wrap:has(.stage-row) header.top + .crumbs{margin-top:-24px;}

/* Breadcrumbs: small, plain text, no pill */
.crumbs, .wrap .crumbs{background:none; border:0; border-radius:0; padding:0; font-size:.74rem; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted);}
.crumbs a{color:var(--muted); font-weight:500; text-decoration:none;}
.crumbs a:hover{color:var(--ink); text-decoration:underline;}
.crumbs span{margin:0 6px; color:var(--muted); font-weight:400;}
.crumbs [aria-current]{color:var(--ink);}
.tt-article > .pagehead{margin:0 0 14px;}

/* progress: stars and counters */
.pg-chip{display:inline-block;align-self:flex-start;margin-top:3px;padding:1px 8px;border-radius:999px;background:#eef1f6;color:#475569;font:600 .7rem/1.5 Inter,sans-serif}
.pg-chip.full{background:#dcfce7;color:#166534}
.pg-stars{display:block;margin-top:2px;color:#d97706;font-size:.78rem;letter-spacing:1px;line-height:1.2}
.pg-sum{margin:8px 0 0;font-size:.9rem;color:#166534;font-weight:600}

/* lessons page: progress card + path */
.lp-card{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px;margin:0 0 28px}
.lp-badge{display:inline-block;padding:3px 12px;border-radius:999px;background:#e8f0fe;color:#1a56c7;font:600 .78rem/1.6 Inter,sans-serif}
.lp-card h2{font-family:var(--font-ui);font-size:1.6rem;margin:12px 0 2px}
.lp-sub{margin:0 0 16px;color:var(--muted)}
.lp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.lp-stats{margin:0;color:var(--muted);font-size:.9rem}.lp-stats b{color:var(--ink)}.lp-stats span{margin:0 6px}
.lp-bars{display:flex;gap:4px;align-items:end}
.lp-bars span{flex:1;height:8px;border-radius:4px;background:#e5e9f0;overflow:hidden;display:block}
.lp-bars i{display:block;height:100%;background:#16a34a}
.lp-path{list-style:none;margin:0 0 24px;padding:0}
.lp-unit{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding-bottom:18px}
.lp-unit:before{content:"";position:absolute;left:27px;top:56px;bottom:-2px;width:2px;background:#d7deea}
.lp-unit:last-child:before{display:none}
.lp-node{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:2px dashed #b9c4d6;background:var(--surface);color:var(--muted);font:700 1rem Inter,sans-serif;position:relative;z-index:1}
.lp-unit.is-current .lp-node{background:#0b72ee;border:2px solid #0b72ee;color:#fff;box-shadow:0 0 0 6px rgba(11,114,238,.15)}
.lp-unit.is-done .lp-node{background:#16a34a;border:2px solid #16a34a;color:#fff}
.lp-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px}
.lp-unit.is-current .lp-box{border-color:#0b72ee}
.lp-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.lp-head h2{font-family:var(--font-ui);font-size:1.15rem;margin:0}
.lp-head h2 a{color:var(--ink);text-decoration:none}.lp-head h2 a:hover{color:#0b72ee}
.lp-head p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.lp-count{flex:none;padding:2px 10px;border-radius:999px;background:#eef1f6;color:#475569;font:600 .78rem/1.7 Inter,sans-serif}
.lp-unit.is-done .lp-count{background:#dcfce7;color:#166534}
.lp-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;margin-top:12px;align-items:start}
.lp-row>b{font:600 .72rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding-top:9px}
.lp-chips{display:flex;flex-wrap:wrap;gap:8px}
.lp-d,.lp-key{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:46px;padding:6px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);text-decoration:none;font:500 .82rem/1.3 Inter,sans-serif}
.lp-d:hover{border-color:#0b72ee}
.lp-d .ur,.lp-key .ur{font-size:1.3rem;line-height:1.4}
.lp-d i,.lp-key i{font-style:normal;color:var(--muted);font-size:.72rem}
.lp-d .lp-st{font-style:normal;color:#d97706;font-size:.7rem;letter-spacing:1px;line-height:1.1;min-height:0}
.lp-d.done{border-color:#bbf7d0;background:#f0fdf4}
.lp-foot{margin-top:14px}
.lp-note{font-size:.88rem;color:var(--muted);margin:0 0 28px}
@media(max-width:700px){.lp-card{grid-template-columns:1fr}.lp-unit{grid-template-columns:40px minmax(0,1fr);gap:10px}.lp-node{width:40px;height:40px;font-size:.85rem}.lp-unit:before{left:19px;top:40px}.lp-row{grid-template-columns:1fr}.lp-row>b{padding-top:0}}
.lp-welcome{margin-bottom:24px}

/* guideline images: full width */
.lp-actions a.action{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lp-actions a.action.primary{background:var(--accent2);border-color:var(--accent2);color:#fff}
.lp-actions a.action,.lp-actions a.action.primary{display:inline-block;text-decoration:none;font-family:var(--font-ui);font-size:.9rem;font-weight:600;line-height:1.3;padding:11px 20px;border-radius:10px;border-width:1px;border-style:solid}
.lp-actions{align-items:stretch}
.lp-actions a.action,.lp-actions a.action.primary{display:inline-flex;align-items:center;justify-content:center;line-height:1.3;box-sizing:border-box}
a.lp-d.lp-ex{padding:9px 20px;border:1.5px solid var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:.88rem;border-radius:10px;box-shadow:0 2px 0 rgba(0,0,0,.18);transition:transform .08s,box-shadow .08s,filter .12s}
a.lp-d.lp-ex:hover{filter:brightness(1.1);border-color:var(--accent)}
a.lp-d.lp-ex:active{transform:translateY(2px);box-shadow:none}
a.lp-d.lp-ex .lp-st{color:#fde68a}
a.lp-d.lp-ex.done{background:#16a34a;border-color:#16a34a;color:#fff}
a.lp-d.lp-ex{background:#e3eefc;border-color:#a9cbf5;color:#1d5fbf;box-shadow:0 2px 0 #c6dcf7}
a.lp-d.lp-ex:hover{filter:none;background:#d3e5fb;border-color:#7fb2ee}
a.lp-d.lp-ex .lp-st{color:#d97706}
a.lp-d.lp-ex.done{background:#dcf5e5;border-color:#9fdcb4;color:#14703a;box-shadow:0 2px 0 #bfe9cc}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) a.lp-d.lp-ex{background:#1b2c44;border-color:#2e4a73;color:#9cc7ff;box-shadow:0 2px 0 #14223a}:root:not([data-theme="light"]) a.lp-d.lp-ex.done{background:#143324;border-color:#25613f;color:#8ee0ae;box-shadow:0 2px 0 #0f261b}}
.lp-box{padding:20px 24px 22px}
.lp-row{grid-template-columns:92px minmax(0,1fr);gap:16px;margin-top:18px}
.lp-row>b{padding-top:12px}
.lp-chips{gap:10px}
@media (max-width:560px){.lp-box{padding:18px 16px 20px}.lp-row{grid-template-columns:minmax(0,1fr);gap:8px}.lp-row>b{padding-top:0}}
.lp-box{padding-top:30px}
.lp-row{margin-top:26px}
.lp-box{padding-bottom:32px}

.lp-side{display:flex;flex-direction:column;gap:14px}
.lp-best{margin-top:6px}

.lp-card{grid-template-columns:minmax(0,1fr) 300px}
.lp-side{display:flex;flex-direction:column;align-items:center;gap:16px}
.lp-ring{position:relative;width:150px;height:150px}
.lp-ring svg{display:block}
.rg-bg{fill:none;stroke:#e5e9f0;stroke-width:12}
.rg-fg{fill:none;stroke:var(--accent2);stroke-width:12;stroke-linecap:round;stroke-dasharray:376.99;stroke-dashoffset:376.99;transition:stroke-dashoffset .6s ease}
.rg-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rg-txt b{font:700 1.45rem/1.1 Inter,sans-serif;color:var(--ink)}
.rg-txt span{font:500 .8rem Inter,sans-serif;color:var(--muted);margin-top:2px}
.lp-bars{width:100%;gap:5px;align-items:flex-start}
.lp-bars .lb{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.lp-bars .lb span{width:100%;flex:none}
.lp-bars .lb em{font:600 .6rem Inter,sans-serif;font-style:normal;color:var(--muted)}
@media(max-width:900px){.lp-card{grid-template-columns:1fr}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rg-bg{stroke:#2a3446}}

.lp-tip{display:flex;align-items:center;gap:16px;background:#fff8e6;border:1px solid #f6dfa4;border-radius:16px;padding:16px 20px;margin:0 0 28px}
.tip-ic{font-size:1.7rem;line-height:1;flex:none}
.tip-body{flex:1;min-width:0}
.tip-h{display:inline-block;font:700 .78rem/1.6 'Noto Naskh Arabic',serif;color:#9a6700;background:#fdecb8;border-radius:999px;padding:2px 12px}
.lp-tip p{margin:0;font:400 1.2rem/1.9 'Noto Naskh Arabic','Lateef',serif;color:var(--ink)}
.tip-next{flex:none;border:1px solid #e9cf86;background:#fff;color:#8a5a00;font:600 .9rem/1.4 'Noto Naskh Arabic',serif;padding:8px 16px;border-radius:10px;cursor:pointer}
.tip-next:hover{background:#fdf0c8}
@media(max-width:600px){.lp-tip{flex-wrap:wrap;padding:14px 16px}.tip-next{width:100%}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lp-tip{background:#2a2412;border-color:#5a4a1c}:root:not([data-theme="light"]) .tip-h{background:#4a3c14;color:#f6d77a}:root:not([data-theme="light"]) .tip-next{background:#1d1a10;border-color:#5a4a1c;color:#f6d77a}}

.lp-stats{display:flex;flex-wrap:wrap;gap:8px 22px}
.lp-stats .st{display:inline-flex;align-items:center;gap:7px;margin:0}
.lp-stats .st svg{width:20px;height:20px;flex:none}
.hubhead{text-align:center}.hubhead .tagline{margin-left:auto;margin-right:auto}
a.lp-d.lp-ex.lp-test{background:#fff1d6;border-color:#f1cf8a;color:#8a5a00;box-shadow:0 2px 0 #f6e0ad}
a.lp-d.lp-ex.lp-test:hover{background:#ffe9bd;border-color:#e6b95c}
a.lp-d.lp-ex.lp-test.done{background:#dcf5e5;border-color:#9fdcb4;color:#14703a;box-shadow:0 2px 0 #bfe9cc}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) a.lp-d.lp-ex.lp-test{background:#33290f;border-color:#6b5420;color:#f6d77a;box-shadow:0 2px 0 #241c0a}}
.hubhead h1{font-size:36pt;line-height:1.15}@media(max-width:560px){.hubhead h1{font-size:26pt}}
.lp-card{padding:34px 32px}
.lp-card h2{margin:20px 0 6px}
.lp-sub{margin:0 0 26px}
.lp-actions{margin-bottom:26px}
.lp-stats{gap:12px 24px}
.lp-card{padding:46px 40px}
.lp-card h2{margin:28px 0 10px}
.lp-sub{margin:0 0 38px}
.lp-actions{margin-bottom:38px}
nav.sitenav{gap:8px 30px;font-size:.92rem;align-items:center}
@media(max-width:700px){nav.sitenav{gap:8px 18px;font-size:.88rem}}

/* Urdu tutor result popup */
.rm-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,20,36,.55);animation:rmFade .25s ease both}
.rm-card{width:100%;max-width:500px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:20px;padding:34px 28px 22px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:rmRise .35s cubic-bezier(.2,.9,.3,1.1) both}
.rm-stars{display:flex;justify-content:center;align-items:flex-end;gap:6px;margin-bottom:14px}
.rm-star svg{width:40px;height:40px;fill:var(--border);stroke:var(--muted);stroke-width:.8;stroke-linejoin:round;opacity:.55;display:block}
.rm-star:nth-child(2) svg,.rm-star:nth-child(4) svg{width:46px;height:46px}
.rm-star:nth-child(3) svg{width:58px;height:58px}
.rm-star.on svg{fill:#f5b301;stroke:#d99200;opacity:1;animation:rmStar .6s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.45s + var(--i) * .26s);transform:scale(0)}
.rm-card h2{margin:0 0 6px;font-size:1.5rem}
.rm-sub{margin:0 auto 18px;max-width:330px;color:var(--muted);font-size:.92rem;line-height:1.5}
.rm-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:14px;margin-bottom:18px;overflow:hidden}
.rm-stats div{padding:12px 6px;border-left:1px solid var(--border)}
.rm-stats div:first-child{border-left:0}
.rm-stats span{display:block;color:var(--muted);font-size:.78rem;margin-bottom:4px}
.rm-stats b{font-size:1.5rem;font-family:ui-monospace,Consolas,monospace}
.rm-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.rm-btn{font:inherit;font-weight:600;font-size:.95rem;padding:11px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer}
.rm-btn:hover{border-color:var(--accent)}
.rm-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rm-enter{margin-top:16px;color:var(--muted);font-size:.82rem}
.rm-enter kbd{font-family:ui-monospace,Consolas,monospace;border:1px solid var(--border);border-radius:5px;padding:1px 7px;margin-right:4px}
@keyframes rmFade{from{opacity:0}to{opacity:1}}
@keyframes rmRise{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes rmStar{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce){.rm-star.on svg{animation:none;transform:none}.rm-card,.rm-overlay{animation:none}}

.lp-reset{text-align:center;margin:36px 0 0;font-size:.7rem}
.lp-reset a{color:var(--muted);opacity:.25;text-decoration:none}
.lp-reset a:hover{opacity:.8;text-decoration:underline}

/* Hub top title is a styled line, not a heading (the real H1 sits in the article below) */
.hubhead .hubtitle{font-family:var(--font-display);font-weight:600;letter-spacing:.3px;margin:0 0 6px;font-size:36pt;line-height:1.15}
.hubhead .hubtitle span{color:var(--accent2)}
@media(max-width:560px){.hubhead .hubtitle{font-size:26pt}}

.tt-article h1{font-family:var(--font-display);font-size:28pt;line-height:1.2;margin:0 0 14px}
.tt-article .tt-ur{font-family:'Noto Naskh Arabic','Lateef',serif;font-size:18pt;line-height:1.9;margin:6px 0 16px;padding:10px 16px;border-inline-start:3px solid var(--accent,#2f7d6d);background:rgba(127,127,127,.08);border-radius:8px}
@media(max-width:600px){.tt-article h1{font-size:22pt}}
.tt-article img.guide-img{max-width:min(420px,100%);width:100%;height:auto}

/* hub blocks */
.hb-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.hb-cmp>div{border:1px solid var(--border);border-top:4px solid var(--muted);border-radius:12px;padding:12px 16px;background:var(--surface)}
.hb-cmp .new{border-top-color:var(--accent)}
.tt-article .hb-cmp h3{margin:0 0 6px;font-size:1rem}
.hb-cmp ul{margin:0;padding-inline-start:18px;font-size:.93rem;line-height:1.6}
.hb-fig{margin:14px 0}.hb-fig .guide-img{margin:0 auto 6px}
.hb-fig figcaption{text-align:center;font-size:.82rem;color:var(--muted)}
.hb-lessons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 16px}
.hb-row{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:9px 12px;text-decoration:none;color:var(--ink);background:var(--surface)}
.hb-row:hover{border-color:var(--accent)}
.hb-row b{flex:none;min-width:34px;height:34px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:.85rem}
.hb-row strong{display:block;font-size:.95rem}.hb-row small{display:block;color:var(--muted);font-size:.8rem;line-height:1.35}
.hb-check{list-style:none;padding:0!important;margin:10px 0 14px}
.hb-check li{position:relative;padding:4px 0 4px 28px;line-height:1.5}
.hb-check li::before{content:"✓";position:absolute;left:4px;color:var(--good,#1a9d5c);font-weight:700}
.hb-routine{list-style:none;padding:0!important;margin:10px 0 14px}
.hb-routine li{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:9px 12px;margin:6px 0}
.hb-routine b{flex:none;background:var(--key);border:1px solid var(--border);border-radius:999px;padding:3px 12px;font-size:.85rem}
.hb-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 16px}
.hb-keys div{border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center;background:var(--surface)}
.hb-keys kbd{display:inline-block;margin-bottom:4px}.hb-keys b{display:block;font-size:.9rem}
.hb-keys span{display:block;font-size:1.15rem;line-height:1.8}
.hb-stars{margin:10px 0 14px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.hb-stars div{display:flex;gap:14px;align-items:center;padding:8px 14px;border-top:1px solid var(--border)}
.hb-stars div:first-child{border-top:0}
.hb-stars b{flex:none;width:96px;color:#e5a400;letter-spacing:2px;white-space:nowrap}
@media(max-width:640px){.hb-cmp,.hb-lessons{grid-template-columns:1fr}.hb-keys{grid-template-columns:1fr 1fr}.hb-stars b{width:84px}}
.crumbs span[aria-current]{margin:0}

/* footer band: full-width, darker than the page so it reads as a footer */
footer.foot{--fbg:#14263f; background:var(--fbg); box-shadow:0 0 0 100vmax var(--fbg); clip-path:inset(0 -100vmax); margin-top:36px; margin-bottom:-28px; padding:30px 0 0; border-top:0; color:#aebcd2;}
footer.foot .brand .word{color:#fff;}
footer.foot .foot-brand p{color:#aebcd2;}
footer.foot .foot-links b{color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.07em;}
footer.foot .foot-links a{color:#c9d6ea;} footer.foot .foot-links a:hover{color:#fff; text-decoration:underline;}
footer.foot .foot-brand a:not(.brand){color:#8fc3ff;}
footer.foot .foot-copy{margin-top:24px; padding:14px 0 16px; border-top:1px solid rgba(255,255,255,.14); color:#8fa0ba;}
footer.foot .foot-copy .ver{border-color:rgba(255,255,255,.25);}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) footer.foot{--fbg:#070d17;}}
:root[data-theme="dark"] footer.foot{--fbg:#070d17;}

footer.foot .brand .mark{background-image:url("data:image/webp;base64,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");}
footer.foot .foot-brand .brand{font-size:2.2rem; gap:12px; line-height:1;}
@media(max-width:640px){footer.foot .foot-brand .brand{font-size:1.7rem;}}