/* Trí Lữ Hán tự V19 — approved Klee One / teal glass treatment.
 * Applies only to source-built learner routes whose runtime adds tl-hantu-practice. */
html.journey-v29 body.tl-hantu-practice .journey-stage{
  background:rgba(250,251,247,.18)!important;
  -webkit-backdrop-filter:blur(5px) saturate(150%)!important;
  backdrop-filter:blur(5px) saturate(150%)!important;
}
html[data-mode="dark"].journey-v29 body.tl-hantu-practice .journey-stage{background:rgba(7,24,44,.18)!important}
body.tl-hantu-practice #flowBox{
  padding:var(--tl-space-4,18px)!important;border-radius:var(--tl-radius-panel,22px)!important;
  background:rgba(250,251,247,.07)!important;
  -webkit-backdrop-filter:blur(2px) saturate(145%)!important;
  backdrop-filter:blur(2px) saturate(145%)!important;
}
html[data-mode="dark"] body.tl-hantu-practice #flowBox{background:rgba(7,24,44,.07)!important}
body.tl-hantu-practice .hw-box,
html[data-mode="dark"] body.tl-hantu-practice .hw-box{
  background:transparent!important;background-image:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.tl-hantu-practice .hw-box::before,
body.tl-hantu-practice .hw-box.is-stroke-view::before,
body.tl-hantu-practice .hw-box.is-quiz::before{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.tl-hantu-practice .hw-fallback{
  display:grid!important;opacity:1!important;font-family:"Klee One",var(--tl-font-shodo,"Noto Serif JP",serif)!important;
  font-weight:600!important;color:#2b6673!important;text-shadow:none!important;
}
html[data-mode="dark"] body.tl-hantu-practice .hw-fallback{color:#e8f6f2!important}
body.tl-hantu-practice .hw-box>svg{display:none!important;opacity:1!important;mix-blend-mode:normal!important;filter:none!important}
body.tl-hantu-practice .hw-box.is-stroke-view .hw-fallback,
body.tl-hantu-practice .hw-box.is-quiz .hw-fallback{opacity:0!important}
body.tl-hantu-practice .hw-box.is-stroke-view>svg,
body.tl-hantu-practice .hw-box.is-quiz>svg{
  display:block!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
  width:auto!important;height:auto!important;padding:0!important;z-index:4!important;
  transform:translate(-50%,-50%) scale(1)!important;transform-origin:50% 50%!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
body.tl-hantu-practice .hw-btn{border-color:color-mix(in srgb,#2b6673 35%,var(--line))!important;color:#2b6673!important}
html[data-mode="dark"] body.tl-hantu-practice .hw-btn{border-color:color-mix(in srgb,#e8f6f2 35%,var(--line))!important;color:#e8f6f2!important}
body.tl-hantu-practice .hw-note{color:#2b6673!important}
html[data-mode="dark"] body.tl-hantu-practice .hw-note{color:#e8f6f2!important}
body.tl-hantu-practice .hw-box.tl-hantu-v19-quarantined::after{
  content:"Chưa đủ dữ liệu HanziWriter để xem nét";position:absolute;inset:auto 10px 10px;z-index:5;
  color:#2b6673;background:rgba(250,251,247,.86);border:1px solid color-mix(in srgb,#2b6673 35%,transparent);
  border-radius:10px;padding:6px 8px;font:600 11px/1.35 var(--tl-font-ui,system-ui);text-align:center;
}
html[data-mode="dark"] body.tl-hantu-practice .hw-box.tl-hantu-v19-quarantined::after{color:#e8f6f2;background:rgba(7,24,44,.86)}

/* V19.2 — restore the approved Editorial Study Sheet hierarchy and compact index. */
body.tl-hantu-practice{
  --hantu-accent:var(--tl-seal,#a53b2e);
  --hantu-warm:var(--tl-sepia,#80582f);
  --hantu-ink:var(--tl-ink,var(--ink,#172833));
  --hantu-muted:var(--tl-ink-soft,var(--muted,#52616a));
  --hantu-hair:var(--tl-hair,var(--line,rgba(23,40,51,.16)));
  --hantu-paper:var(--tl-paper,rgba(255,252,244,.70));
  --hantu-glass:var(--tl-glass,rgba(250,252,249,.64));
  --hantu-glass-border:var(--tl-glass-border,rgba(255,255,255,.62));
}
body.tl-hantu-practice .w-hero{
  display:grid!important;
  grid-template-columns:minmax(250px,1.05fr) minmax(140px,.72fr)!important;
  grid-template-areas:"stroke reading" "stroke facts" "stroke meaning"!important;
  gap:var(--tl-space-4,18px) var(--tl-space-5,26px)!important;
  align-items:center!important;text-align:left!important;
  padding:0 0 var(--tl-space-5,26px)!important;border-bottom:1px solid var(--hantu-hair)!important;
}
body.tl-hantu-practice .hw-wrap{grid-area:stroke;width:100%!important;max-width:280px!important;align-self:start!important;margin:0!important;gap:var(--tl-space-3,12px)!important}
body.tl-hantu-practice .hw-box{width:100%!important;max-width:280px!important;height:auto!important;aspect-ratio:4/3!important;overflow:hidden!important;isolation:isolate}
body.tl-hantu-practice .hw-fallback{font-size:clamp(9rem,37vw,11rem)!important;line-height:1!important}
body.tl-hantu-practice .hw-tools{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;max-width:280px!important;gap:var(--tl-space-2,8px)!important}
body.tl-hantu-practice .hw-tools .hw-btn{width:100%!important;min-width:0!important;min-height:var(--tl-control-min,44px)!important;padding:0 var(--tl-space-2,8px)!important}
body.tl-hantu-practice .hw-wrap.stroke-open .hw-tools{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.tl-hantu-practice .hw-order-toggle[aria-pressed="true"]{background:var(--tl-wash,rgba(165,59,46,.075))!important;border-color:color-mix(in srgb,var(--hantu-warm) 42%,transparent)!important}
body.tl-hantu-practice .hw-order-layer{position:absolute;left:50%;top:50%;z-index:5;pointer-events:none;transform:translate(-50%,-50%)}
body.tl-hantu-practice .hw-order-no{
  position:absolute;display:grid;place-items:center;width:20px;height:20px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--tl-glass-strong,rgba(250,252,249,.82));border:1px solid var(--hantu-glass-border);
  color:var(--hantu-warm);font:700 10px/1 var(--tl-font-mono,ui-monospace,monospace);font-style:normal;
  box-shadow:0 2px 7px rgba(23,40,51,.13);
}
body.tl-hantu-practice .hw-box.is-quiz .hw-order-layer{display:none!important}

body.tl-hantu-practice .hantu-reading{grid-area:reading;min-width:0;padding-right:52px}
body.tl-hantu-practice .hantu-reading small,
body.tl-hantu-practice .hantu-fact small,
body.tl-hantu-practice .hantu-meaning .w-mean small{
  display:block;margin-bottom:var(--tl-space-1,4px);font-family:var(--tl-font-mono,ui-monospace,monospace);
  font-size:var(--tl-text-meta,11px);color:var(--hantu-warm);letter-spacing:.13em;text-transform:uppercase;font-weight:600;
}
body.tl-hantu-practice .hantu-reading strong{display:block;font-family:var(--tl-font-jp,"Noto Serif JP",serif);font-size:clamp(22px,2.2vw,29px);font-weight:600;line-height:1.45;color:var(--hantu-ink)}
body.tl-hantu-practice .w-tags{grid-area:facts;display:flex!important;justify-content:flex-start!important;gap:var(--tl-space-5,26px)!important;margin:0!important}
body.tl-hantu-practice .hantu-fact{display:block;min-width:108px}
body.tl-hantu-practice .hantu-fact strong{display:block;font-size:var(--tl-text-body-large,18px);font-weight:600;color:var(--hantu-ink);line-height:1.45}
body.tl-hantu-practice .hantu-meaning{grid-area:meaning;display:grid;gap:var(--tl-space-2,8px);min-width:0}
body.tl-hantu-practice .hantu-meaning .w-mean{margin:0!important;text-align:left!important;color:var(--hantu-ink)!important;font-size:inherit!important}
body.tl-hantu-practice .hantu-meaning .w-mean strong{display:block;max-width:28rem;font-size:clamp(22px,2.7vw,32px);font-weight:600;line-height:1.25;color:var(--hantu-accent)}
body.tl-hantu-practice .hantu-meaning>.tl-meaning-toggle{width:100%!important;min-height:var(--tl-control-min,44px)!important;margin:0!important}

body.tl-hantu-practice .kb:not(.kb-memory){margin:0!important;padding:var(--tl-space-6,38px) var(--tl-space-2,8px) var(--tl-space-4,18px)!important;border:0!important;border-bottom:1px solid var(--hantu-hair)!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important}
body.tl-hantu-practice .kb:not(.kb-memory) .kb-title{
  min-height:32px!important;margin:0 0 var(--tl-space-2,8px)!important;padding:0!important;border:0!important;
  color:var(--hantu-warm)!important;font-family:var(--tl-font-mono,ui-monospace,monospace)!important;
  font-size:.7rem!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;
}
body.tl-hantu-practice .kb:not(.kb-memory) .kb-title::before{content:"02";display:inline-grid;place-items:center;width:28px;height:28px;margin-right:var(--tl-space-3,12px);border-radius:9px;background:var(--hantu-accent);color:#fff;font-size:.62rem;letter-spacing:0}
body.tl-hantu-practice .kb:not(.kb-memory) .kb-title::after{display:none!important}
body.tl-hantu-practice .kb:not(.kb-memory) .kb-row{
  min-height:72px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--tl-control-min,44px)!important;
  gap:var(--tl-space-4,18px)!important;margin:0!important;padding:var(--tl-space-3,12px) 0!important;
  border:0!important;border-top:1px solid var(--hantu-hair)!important;border-radius:0!important;
  background:transparent!important;background-image:none!important;box-shadow:none!important;align-items:center!important;
}
body.tl-hantu-practice .kb:not(.kb-memory) .kb-row:last-child{border-bottom:1px solid var(--hantu-hair)!important}
body.tl-hantu-practice .kb:not(.kb-memory) .kb-char{
  align-self:center!important;width:auto!important;min-width:0!important;height:auto!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;background-image:none!important;box-shadow:none!important;display:block!important;
  font-family:var(--tl-font-jp,"Noto Serif JP",serif)!important;font-size:clamp(1.68rem,2.5vw,1.95rem)!important;
  font-weight:600!important;color:var(--hantu-ink)!important;line-height:1.6!important;
}
body.tl-hantu-practice .kb:not(.kb-memory) .kb-char rt{font-size:.48em!important;color:var(--hantu-muted)!important;font-weight:500!important}
body.tl-hantu-practice .kb:not(.kb-memory) .kb-info{align-self:center!important;min-width:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;line-height:1.45!important}
body.tl-hantu-practice .kb:not(.kb-memory) .kb-info b,
body.tl-hantu-practice .kb:not(.kb-memory) .kb-info br{display:none!important}
body.tl-hantu-practice .kb:not(.kb-memory) .kb-info span{display:block;color:var(--hantu-muted)!important;font-size:1.125rem!important}
body.tl-hantu-practice .kb:not(.kb-memory) .exspk{align-self:center!important;width:var(--tl-control-min,44px)!important;height:var(--tl-control-min,44px)!important;margin:0!important;padding:0!important;border:1px solid var(--hantu-hair)!important;border-radius:50%!important;background:transparent!important;background-image:none!important;color:var(--hantu-warm)!important;font-size:0!important;justify-content:center!important}
body.tl-hantu-practice .kb:not(.kb-memory) .exspk::before{content:"♪";font-family:var(--tl-font-jp,"Noto Serif JP",serif);font-size:1rem}
body.tl-hantu-practice .kb-memory{display:block!important;margin:0!important;padding:var(--tl-space-5,26px) var(--tl-space-2,8px)!important;border:0!important;border-bottom:1px solid var(--hantu-hair)!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important}
body.tl-hantu-practice .kb-memory .kb-title{display:flex!important;align-items:center!important;min-height:28px!important;margin:0!important;padding:0!important;color:var(--hantu-warm)!important;font-family:var(--tl-font-mono,ui-monospace,monospace)!important;font-size:.7rem!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important}
body.tl-hantu-practice .kb-memory .kb-title::before{content:"03";display:grid!important;place-items:center;width:28px;height:28px;margin:0 var(--tl-space-3,12px) 0 0!important;border-radius:9px;background:var(--hantu-accent);color:#fff;font-size:.62rem;line-height:1;letter-spacing:0}
body.tl-hantu-practice .kb-memory .kb-title::after{display:none!important}
body.tl-hantu-practice .kb-memory .kb-note{margin:var(--tl-space-4,18px) 0 0!important;padding:0 0 0 calc(28px + var(--tl-space-3,12px))!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;color:var(--hantu-ink)!important;font-size:var(--tl-text-body-large,18px)!important;line-height:1.65!important}
body.tl-hantu-practice .w-foot{justify-content:flex-start!important;min-height:58px!important;margin:0!important;padding:var(--tl-space-3,12px) 0 0!important;border:0!important;background:transparent!important;background-image:none!important}
body.tl-hantu-practice .w-foot .knowbtn{flex:0 1 auto!important;width:auto!important;min-height:var(--tl-control-min,44px)!important;margin:0!important;padding:0 var(--tl-space-3,12px)!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;color:var(--hantu-accent)!important;font-size:.88rem!important;font-weight:650!important;text-align:left!important;box-shadow:none!important}
body.tl-hantu-practice .w-foot .knowbtn::before{content:"○";margin-right:var(--tl-space-2,8px);color:var(--hantu-warm)}
body.tl-hantu-practice .w-foot .knowbtn.on::before{content:"●";color:var(--tl-success,#34745a)}
body.tl-hantu-practice #flowBox .fl-nav{min-height:58px!important;margin:0!important;padding:var(--tl-space-3,12px) 0 0!important;border:0!important;border-top:1px solid var(--hantu-hair)!important;border-radius:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;grid-template-columns:var(--tl-control-min,44px) minmax(0,1fr)!important;align-items:center!important}
body.tl-hantu-practice #flowBox .fl-prev{min-width:var(--tl-control-min,44px)!important;width:var(--tl-control-min,44px)!important;height:var(--tl-control-min,44px)!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;background-image:none!important;color:var(--hantu-muted)!important;box-shadow:none!important}
body.tl-hantu-practice #flowBox .fl-next{justify-self:end!important;width:auto!important;min-width:156px!important;min-height:46px!important;padding:0 var(--tl-space-3,12px)!important;border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;color:var(--hantu-accent)!important;font-size:.98rem!important;font-weight:700!important;text-align:right!important;box-shadow:none!important}
body.tl-hantu-practice #flowBox .fl-next::after{content:none!important}
body.tl-hantu-practice #flowBox .fl-prev:disabled{visibility:hidden!important}
body.tl-hantu-practice #flowBox .fl-hintswipe{display:none!important}
body.tl-hantu-practice #flowBox .fl-nav--hantu{display:grid!important;grid-template-columns:var(--tl-control-min,44px) minmax(88px,auto) minmax(0,1fr)!important;gap:var(--tl-space-2,8px)!important}
body.tl-hantu-practice #flowBox .fl-nav--hantu.fl-nav--first{grid-template-columns:minmax(88px,auto) minmax(0,1fr)!important}
body.tl-hantu-practice #flowBox .fl-nav--hantu .fl-prev[hidden]{display:none!important}
body.tl-hantu-practice #flowBox .knowbtn--flow{position:relative;display:inline-flex!important;align-items:center;justify-content:flex-start;min-width:88px;min-height:var(--tl-control-min,44px)!important;margin:0!important;padding:0 var(--tl-space-3,12px)!important;border:0!important;border-radius:var(--tl-radius-control,12px)!important;background:transparent!important;color:var(--hantu-accent)!important;font:650 .88rem/1.2 var(--tl-font-ui,system-ui)!important;white-space:nowrap;box-shadow:none!important;cursor:pointer}
body.tl-hantu-practice #flowBox .knowbtn--flow .know-state{margin-right:var(--tl-space-2,8px);color:var(--hantu-warm)}
body.tl-hantu-practice #flowBox .knowbtn--flow.on{color:var(--tl-success,#34745a)!important}
body.tl-hantu-practice #flowBox .knowbtn--flow.on .know-state{color:var(--tl-success,#34745a)}
body.tl-hantu-practice #flowBox .fl-nav--hantu .fl-next{justify-self:stretch!important;width:100%!important;min-width:0!important;min-height:var(--tl-control-min,44px)!important;padding:0 var(--tl-space-3,12px)!important;text-align:right!important;white-space:nowrap}
body.tl-hantu-practice #flowBox .knowbtn--flow:focus-visible,
body.tl-hantu-practice #flowBox .fl-nav--hantu .fl-next:focus-visible{outline:3px solid var(--tl-focus,#1f7087)!important;outline-offset:2px}

body.tl-hantu-practice .hantu-index{background:var(--hantu-paper)!important;border:1px solid var(--hantu-glass-border)!important;border-radius:var(--tl-radius-surface,28px)!important;box-shadow:var(--tl-shadow,0 24px 64px rgba(23,40,51,.15))!important;padding:var(--tl-space-5,26px)!important;-webkit-backdrop-filter:blur(var(--tl-blur,18px));backdrop-filter:blur(var(--tl-blur,18px))}
body.tl-hantu-practice .hantu-index-head{padding:0 0 var(--tl-space-4,18px);border-bottom:1px solid var(--hantu-hair)}
body.tl-hantu-practice .hantu-index-head small{font-family:var(--tl-font-mono,ui-monospace,monospace);color:var(--hantu-warm);letter-spacing:.12em;text-transform:uppercase}
body.tl-hantu-practice .hantu-index-head p{margin:var(--tl-space-2,8px) 0 0;color:var(--hantu-muted)}
body.tl-hantu-practice .hantu-index-row{width:100%;min-height:68px;display:grid;grid-template-columns:50px minmax(0,1fr) auto;align-items:center;gap:var(--tl-space-4,18px);border:0;border-bottom:1px solid var(--hantu-hair);background:transparent;color:var(--hantu-ink);text-align:left;font:inherit;cursor:pointer}
body.tl-hantu-practice .hantu-index-row:last-child{border-bottom:0}
body.tl-hantu-practice .hantu-index-glyph{font-family:"Klee One",var(--tl-font-shodo,"Noto Serif JP",serif);font-size:2.15rem;font-weight:600;color:#2b6673;text-align:center}
html[data-mode="dark"] body.tl-hantu-practice .hantu-index-glyph{color:#e8f6f2}
body.tl-hantu-practice .hantu-index-copy{min-width:0}
body.tl-hantu-practice .hantu-index-copy strong{display:block;font-family:var(--tl-font-jp,"Noto Serif JP",serif);font-size:1rem;font-weight:600}
body.tl-hantu-practice .hantu-index-copy span{display:block;color:var(--hantu-muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.tl-hantu-practice .hantu-index-arrow{color:var(--hantu-warm);font-size:1.2rem}

@media(max-width:720px){
  body.tl-hantu-practice .w-hero{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"stroke" "reading" "facts" "meaning"!important;gap:var(--tl-space-4,18px)!important}
  body.tl-hantu-practice .hw-wrap,body.tl-hantu-practice .hw-box,body.tl-hantu-practice .hw-tools{max-width:none!important}
  body.tl-hantu-practice .hantu-reading{padding-right:0}
  body.tl-hantu-practice .hantu-reading strong{font-size:1.2rem;overflow-wrap:anywhere}
  body.tl-hantu-practice .w-tags{display:grid!important;gap:var(--tl-space-3,12px)!important}
  body.tl-hantu-practice .hantu-fact strong{font-size:1rem}
  body.tl-hantu-practice .kb:not(.kb-memory){padding-top:var(--tl-space-5,26px)!important}
  body.tl-hantu-practice .kb:not(.kb-memory) .kb-row{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) var(--tl-control-min,44px)!important;gap:var(--tl-space-3,12px)!important;min-height:68px!important}
  body.tl-hantu-practice .kb:not(.kb-memory) .kb-char{font-size:1.62rem!important}
  body.tl-hantu-practice .kb-memory .kb-note{padding-left:calc(28px + var(--tl-space-3,12px))!important}
  body.tl-hantu-practice .hantu-index{padding:var(--tl-space-4,18px)!important;border-radius:var(--tl-radius-panel,22px)!important}
  body.tl-hantu-practice .hantu-index-row{grid-template-columns:44px minmax(0,1fr) 24px;gap:var(--tl-space-3,12px)}
  body.tl-hantu-practice .hw-tools .hw-btn{font-size:.72rem!important}
}
@media(max-width:360px){
  body.tl-hantu-practice #flowBox .fl-nav--hantu{grid-template-columns:var(--tl-control-min,44px) var(--tl-control-min,44px) minmax(0,1fr)!important}
  body.tl-hantu-practice #flowBox .fl-nav--hantu.fl-nav--first{grid-template-columns:var(--tl-control-min,44px) minmax(0,1fr)!important}
  body.tl-hantu-practice #flowBox .knowbtn--flow{width:var(--tl-control-min,44px);min-width:var(--tl-control-min,44px);padding:0!important;justify-content:center}
  body.tl-hantu-practice #flowBox .knowbtn--flow .know-state{margin:0}
  body.tl-hantu-practice #flowBox .knowbtn--flow .know-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  body.tl-hantu-practice #flowBox .fl-nav--hantu .fl-next{padding:0 var(--tl-space-2,8px)!important;font-size:.84rem!important;white-space:normal;line-height:1.2}
}
@media(forced-colors:active){
  body.tl-hantu-practice #flowBox .knowbtn--flow,
  body.tl-hantu-practice #flowBox .fl-nav--hantu .fl-next{border:1px solid ButtonText!important}
}
@media(prefers-reduced-motion:reduce){
  body.tl-hantu-practice .hw-fallback,body.tl-hantu-practice .hw-order-no{transition:none!important;animation:none!important}
}