/* Trí Lữ Word Focus V30.6 — compact editorial word spread.
 * Chữ chính bên trái; nghĩa mềm, nhỏ và luôn nằm bên phải. */
html.word-focus-v30 {
  --wf-shodo:"YuKyokasho","Klee","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --wf-sumi:#172833;
  --wf-sumi-soft:#53616a;
  --wf-seal:#a53b2e;
  --wf-sepia:#80582f;
  --wf-c1:var(--wf-sumi);
  --wf-c2:var(--wf-sumi);
  --wf-c3:var(--wf-sumi);
  --wf-c4:var(--wf-sumi);
  --wf-nav-a:var(--wf-sumi);
  --wf-nav-b:#263b45;
  --wf-paper:rgba(245,240,228,.76);
  --wf-paper-strong:rgba(255,252,244,.92);
  --wf-soft:rgba(23,40,51,.055);
  --wf-hair:color-mix(in srgb,var(--j-ink) 16%,transparent);
}

html[data-mode="dark"].word-focus-v30 {
  --wf-sumi:#f0eee6;
  --wf-sumi-soft:#bec6c8;
  --wf-seal:#e88977;
  --wf-sepia:#d4b075;
  --wf-c1:var(--wf-sumi);
  --wf-c2:var(--wf-sumi);
  --wf-c3:var(--wf-sumi);
  --wf-c4:var(--wf-sumi);
  --wf-nav-a:#e8e4da;
  --wf-nav-b:#c9c4b9;
  --wf-paper:rgba(5,18,30,.66);
  --wf-paper-strong:rgba(8,26,43,.84);
  --wf-soft:rgba(240,238,230,.065);
  --wf-hair:rgba(210,235,248,.19);
}

html.word-focus-v30 .journey-stage {
  overflow:visible!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

html.word-focus-v30 .journey-stage::before,
html.word-focus-v30 .journey-stage__glyph {
  display:none!important;
}

html.word-focus-v30 .lm-switch {
  background:var(--wf-paper-strong)!important;
  border:1px solid color-mix(in srgb,var(--wf-sumi) 22%,transparent)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

html.word-focus-v30 .lm-switch button {
  color:var(--wf-sumi)!important;
  filter:none!important;
  text-shadow:none!important;
  text-rendering:optimizeLegibility;
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:-.01em;
}

html.word-focus-v30 .lm-switch button.on {
  background:var(--wf-sumi)!important;
  color:var(--wf-paper-strong)!important;
  text-shadow:none!important;
}

html.word-focus-v30 .word-focus-index {
  padding:var(--tl-space-4);
  border-radius:var(--tl-radius-surface);
  background:var(--wf-paper-strong);
  color:var(--wf-sumi);
}
html.word-focus-v30 .word-focus-index-row {
  display:grid;
  grid-template-columns:2rem minmax(0,1fr) 1.5rem;
  align-items:center;
  gap:var(--tl-space-3);
  width:100%;
  min-height:68px;
  padding:var(--tl-space-3) 0;
  border:0;
  border-bottom:1px solid var(--wf-hair);
  background:transparent;
  color:inherit;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
html.word-focus-v30 .word-focus-index-number { font-family:var(--tl-font-mono); }
html.word-focus-v30 .word-focus-index-word {
  min-width:0;
  overflow-wrap:anywhere;
  font-family:var(--tl-font-jp);
  font-size:24px;
  line-height:1.8;
}
html.word-focus-v30 .word-focus-index-word rt { font-size:12px; }
html.word-focus-v30 .word-focus-index-row:focus-visible { outline:2px solid var(--wf-seal); outline-offset:2px; }

html.word-focus-v30 .journey-step[aria-current="step"] {
  background:color-mix(in srgb,var(--wf-sumi) 8%,transparent)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--wf-sumi) 18%,transparent)!important;
}

html.word-focus-v30 .journey-step[aria-current="step"] .journey-step__num {
  border-color:transparent!important;
  background:var(--wf-seal)!important;
  color:#fff8ee!important;
}

html.word-focus-v30 .journey-step[aria-current="step"] .journey-step__copy b {
  color:var(--wf-sumi)!important;
}

html.word-focus-v30 .journey-toolbox .bnav button.on {
  border-color:color-mix(in srgb,var(--wf-sumi) 22%,transparent)!important;
  background:color-mix(in srgb,var(--wf-sumi) 8%,transparent)!important;
  color:var(--wf-sumi)!important;
}

html.word-focus-v30 .journey-companion__dots i.is-current {
  background:var(--wf-seal)!important;
}

/* Trong màn Học đã có nút nghe từ/câu riêng; nút âm thanh nổi chỉ cần ở các
 * chế độ luyện để không che nội dung editorial. */
html.word-focus-v30:has(#v-hoc.on #flowBox.word-focus-v30-active) #hnc-am {
  display:none!important;
}

html.word-focus-v30 #flowBox.word-focus-v30-active > .fl-nav,
html.word-focus-v30 #flowBox.word-focus-v30-active > .fl-hintswipe {
  display:none!important;
}

html.word-focus-v30 #flowBox.word-focus-v30-active > .fl-chunkmap {
  display:none!important;
}

html.word-focus-v30 #flowBox.word-focus-v30-active > .fl-top {
  min-height:48px!important;
  margin:0 0 16px!important;
  padding:0 0 14px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  gap:10px 18px!important;
  border-bottom:1px solid var(--wf-hair)!important;
}

html.word-focus-v30 #flowBox.word-focus-v30-active > .fl-top.word-focus-full-head {
  min-height:38px!important;
  display:block!important;
  margin-bottom:12px!important;
  padding:0 0 10px!important;
}

html.word-focus-v30 #flowBox.word-focus-v30-active > .fl-top.word-focus-full-head .fl-step {
  font-size:13px!important;
}

html.word-focus-v30 #flowBox.word-focus-v30-active .fl-step {
  font-family:"Be Vietnam Pro",sans-serif!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.105em!important;
  color:var(--j-muted)!important;
}

html.word-focus-v30 .word-focus-dots {
  display:flex;
  align-items:center;
  gap:6px;
}

html.word-focus-v30 .word-focus-dots i {
  display:block;
  width:14px;
  height:3px;
  border:0;
  border-radius:99px;
  background:color-mix(in srgb,var(--j-ink) 12%,transparent);
  transition:width .22s ease,background .22s ease;
}

html.word-focus-v30 .word-focus-dots i.is-done {
  background:color-mix(in srgb,var(--wf-c1) 55%,transparent);
}

html.word-focus-v30 .word-focus-dots i.is-current {
  width:30px;
  background:var(--wf-sumi);
}

html.word-focus-v30 .word-focus-phasebar {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  margin:0;
  padding:0 0 2px;
  list-style:none;
  scrollbar-width:none;
}

html.word-focus-v30 .word-focus-phasebar::-webkit-scrollbar {
  display:none;
}

html.word-focus-v30 .word-focus-phasebar li {
  position:relative;
  flex:1 0 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--j-muted);
  opacity:.58;
}

html.word-focus-v30 .word-focus-phasebar li::after {
  content:"";
  flex:1;
  min-width:12px;
  height:1px;
  margin-left:2px;
  background:var(--wf-hair);
}

html.word-focus-v30 .word-focus-phasebar li:last-child::after {
  display:none;
}

html.word-focus-v30 .word-focus-phasebar li b {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 auto;
  border:1px solid var(--wf-hair);
  border-radius:50%;
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:11px;
}

html.word-focus-v30 .word-focus-phasebar li span {
  white-space:nowrap;
  font-size:11px;
  font-weight:650;
}

html.word-focus-v30 .word-focus-phasebar li.is-done {
  opacity:.76;
}

html.word-focus-v30 .word-focus-phasebar li.is-current {
  color:var(--wf-sumi);
  opacity:1;
}

html.word-focus-v30 .word-focus-phasebar li.is-current b {
  border-color:transparent;
  background:var(--wf-sumi);
  color:var(--wf-paper-strong);
}

html.word-focus-v30 #flowBox[data-word-focus-phase="example"] .word-focus-phasebar li.is-current {
  color:var(--wf-sumi);
}

html.word-focus-v30 #flowBox[data-word-focus-phase="example"] .word-focus-phasebar li.is-current b {
  background:var(--wf-sumi);
}

html.word-focus-v30 #flowBox[data-word-focus-phase="usage"] .word-focus-phasebar li.is-current {
  color:var(--wf-sumi);
}

html.word-focus-v30 #flowBox[data-word-focus-phase="usage"] .word-focus-phasebar li.is-current b {
  background:var(--wf-sumi);
}

html.word-focus-v30 #flStage {
  scroll-margin-top:140px;
}

html.word-focus-v30 .word-focus-card {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(520px,64vh,680px);
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  border-radius:26px;
  color:var(--j-ink);
  background:
    radial-gradient(circle at 86% 10%,color-mix(in srgb,var(--wf-sumi) 4%,transparent),transparent 30%),
    radial-gradient(circle at 7% 92%,color-mix(in srgb,var(--wf-seal) 3%,transparent),transparent 31%),
    linear-gradient(145deg,var(--wf-paper-strong),var(--wf-paper));
  box-shadow:inset 0 1px rgba(255,255,255,.58),0 20px 54px rgba(12,42,61,.10);
  --wf-phase:var(--wf-sumi);
}

html.word-focus-v30 .word-focus-card.word-focus-phase-kanji,
html.word-focus-v30 .word-focus-card.word-focus-phase-origin {
  --wf-phase:var(--wf-sumi);
}

html.word-focus-v30 .word-focus-card.word-focus-phase-example {
  --wf-phase:var(--wf-sumi);
}

html.word-focus-v30 .word-focus-card.word-focus-phase-usage {
  --wf-phase:var(--wf-sumi);
}

html.word-focus-v30 .word-focus-card::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    repeating-linear-gradient(8deg,transparent 0 12px,color-mix(in srgb,var(--wf-sumi) 2.1%,transparent) 12px 13px),
    linear-gradient(103deg,transparent 0 72%,color-mix(in srgb,var(--wf-sumi) 3%,transparent) 72% 72.2%,transparent 72.2%),
    radial-gradient(ellipse at 12% 23%,rgba(255,255,255,.48),transparent 39%);
}

html.word-focus-v30 .word-focus-card::after {
  content:attr(data-watermark);
  position:absolute;
  z-index:-1;
  right:-.12em;
  bottom:-.30em;
  max-width:80%;
  overflow:hidden;
  white-space:nowrap;
  pointer-events:none;
  font-family:"Yu Mincho","Noto Serif JP",serif;
  font-size:clamp(116px,16vw,220px);
  line-height:1;
  color:var(--wf-sumi);
  opacity:.026;
}

html[data-mode="dark"].word-focus-v30 .word-focus-card {
  box-shadow:inset 0 1px rgba(194,232,255,.12),0 24px 70px rgba(0,5,16,.34);
}

html.word-focus-v30 .word-focus-panel {
  position:relative;
  z-index:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px,4vw,58px) clamp(24px,5vw,68px) 32px;
  animation:word-focus-enter .34s cubic-bezier(.18,.75,.26,1) both;
}

html.word-focus-v30 .word-focus-panel--full {
  display:block;
  padding:0;
  animation:none;
}

html.word-focus-v30 .word-focus-panel--full > .word-focus-panel {
  min-height:0;
  justify-content:flex-start;
  padding:clamp(38px,5vw,66px) clamp(24px,5vw,68px);
  border-bottom:1px solid var(--wf-hair);
  animation:none;
}

html.word-focus-v30 .word-focus-panel--full > .word-focus-panel:last-child {
  border-bottom:0;
}

html.word-focus-v30 .word-focus-panel--full > .word-focus-panel--components {
  background:color-mix(in srgb,var(--wf-sumi) 1.8%,transparent);
}

html.word-focus-v30 .word-focus-panel [tabindex="-1"]:focus {
  outline:none;
}

@keyframes word-focus-enter {
  from { opacity:0; transform:translate3d(18px,0,0); }
  to { opacity:1; transform:none; }
}

html.word-focus-v30 .word-focus-kicker {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--j-warm);
}

html.word-focus-v30 .word-focus-kicker b {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid color-mix(in srgb,var(--wf-seal) 82%,transparent);
  border-radius:5px 7px 4px 6px;
  background:var(--wf-seal);
  color:var(--wf-paper-strong);
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:13px;
  letter-spacing:0;
  transform:rotate(-1.4deg);
}

html[data-mode="dark"].word-focus-v30 .word-focus-kicker b {
  background:var(--wf-seal);
  color:#03111f;
}

html.word-focus-v30 .word-focus-kicker i {
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--wf-hair),transparent);
}

html.word-focus-v30 .word-focus-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(190px,.82fr);
  gap:clamp(24px,3.5vw,50px);
  align-items:center;
}

html.word-focus-v30 .word-focus-hero-main,
html.word-focus-v30 .word-focus-hero-copy {
  min-width:0;
}

html.word-focus-v30 .word-focus-reading {
  min-height:24px;
  margin-bottom:5px;
  font-family:var(--wf-shodo);
  font-size:clamp(16px,1.5vw,21px);
  font-weight:600;
  letter-spacing:.24em;
  color:var(--wf-sepia);
}

html.word-focus-v30 .word-focus-title {
  display:flex;
  flex-wrap:nowrap;
  align-items:baseline;
  margin:0;
  position:relative;
  width:max-content;
  max-width:100%;
  font-family:var(--wf-shodo);
  font-size:clamp(62px,8.4vw,116px);
  font-weight:600;
  line-height:1.03;
  letter-spacing:-.07em;
  color:var(--wf-sumi);
  white-space:nowrap;
}

html.word-focus-v30 .word-focus-title .word-focus-piece {
  display:inline-block;
  color:var(--wf-sumi)!important;
  text-shadow:0 1px .5px color-mix(in srgb,var(--wf-sumi) 32%,transparent),0 15px 34px color-mix(in srgb,var(--wf-sumi) 10%,transparent);
}

html.word-focus-v30 .word-focus-hero-ruby {
  ruby-position:over;
  ruby-align:center;
}

html.word-focus-v30 .word-focus-hero-ruby rt {
  font-family:var(--wf-shodo);
  font-size:max(.18em,12px);
  font-weight:600;
  line-height:1;
  letter-spacing:.12em;
  text-align:center;
  color:var(--wf-sepia);
}

html.word-focus-v30 .word-focus-title::after {
  content:"";
  position:absolute;
  right:.01em;
  bottom:-.08em;
  left:.03em;
  height:.07em;
  border-radius:65% 30% 58% 34%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--wf-sumi) 32%,transparent) 7% 88%,transparent);
  transform:rotate(-1.1deg);
}

html.word-focus-v30 .word-focus-title[data-length="long"] {
  font-size:clamp(38px,4.6vw,58px);
  letter-spacing:-.045em;
}

html.word-focus-v30 .word-focus-title[data-length="xlong"] {
  font-size:clamp(30px,3.7vw,48px);
  letter-spacing:-.025em;
}

html.word-focus-v30 .wf-tone-1,
html.word-focus-v30 .wf-tone-2,
html.word-focus-v30 .wf-tone-3,
html.word-focus-v30 .wf-tone-4 { color:var(--wf-sumi)!important; }

html.word-focus-v30 .word-focus-audio,
html.word-focus-v30 .word-focus-example-audio {
  width:auto!important;
  min-width:44px!important;
  min-height:44px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:9px;
  align-self:flex-start;
  margin-top:20px;
  padding:6px 12px 6px 7px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:var(--j-ink)!important;
  font-family:"Be Vietnam Pro",sans-serif!important;
  font-size:14px!important;
  font-weight:700!important;
}

html.word-focus-v30 .word-focus-audio span,
html.word-focus-v30 .word-focus-example-audio span {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:color-mix(in srgb,var(--wf-c1) 14%,transparent);
  color:var(--wf-sumi);
}

html.word-focus-v30 .word-focus-audio::after {
  display:none!important;
}

html.word-focus-v30 .word-focus-hero-copy {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:clamp(18px,2.4vw,32px);
  border-left:1px solid color-mix(in srgb,var(--wf-sumi) 24%,transparent);
}

html.word-focus-v30 .word-focus-meaning-label {
  display:block;
  margin-bottom:6px;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.145em;
  text-transform:uppercase;
  color:var(--wf-seal);
}

html.word-focus-v30 .word-focus-meaning {
  max-width:28ch;
  margin:0;
  font-family:"Avenir Next","Bricolage Grotesque","Be Vietnam Pro",sans-serif;
  font-size:clamp(19px,1.9vw,27px);
  font-weight:600;
  line-height:1.42;
  letter-spacing:-.022em;
  color:var(--wf-sumi);
  text-wrap:balance;
  -webkit-font-smoothing:antialiased;
}

html.word-focus-v30 .word-focus-meaning ruby {
  font-family:var(--wf-shodo);
  font-size:.94em;
  font-weight:600;
  letter-spacing:0;
}

html.word-focus-v30 .word-focus-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:14px;
}

html.word-focus-v30 .word-focus-meta-item {
  display:grid;
  gap:3px;
}

html.word-focus-v30 .word-focus-meta-item small {
  font-size:9px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--j-muted);
}

html.word-focus-v30 .word-focus-meta-item strong {
  font-family:"Avenir Next","Be Vietnam Pro",sans-serif;
  font-size:12.5px;
  font-weight:600;
  color:var(--wf-sumi-soft);
}

html.word-focus-v30 .word-focus-panel--components {
  justify-content:flex-start;
}

html.word-focus-v30 .word-focus-components-equation {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(9px,1.4vw,18px);
  margin:0 0 14px;
  font-family:var(--wf-shodo);
  font-size:clamp(36px,4.2vw,56px);
  font-weight:600;
  line-height:1.1;
  color:var(--wf-sumi);
}

html.word-focus-v30 .word-focus-components-equation span {
  white-space:nowrap;
}

html.word-focus-v30 .word-focus-components-equation b {
  font-family:"Be Vietnam Pro",sans-serif;
  font-size:.34em;
  font-weight:400;
  color:var(--wf-sumi-soft);
  opacity:.52;
}

html.word-focus-v30 .word-focus-components-sheet {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--wf-hair);
  border-bottom:1px solid var(--wf-hair);
}

html.word-focus-v30 .word-focus-components-sheet.is-count-1 {
  grid-template-columns:minmax(0,1fr);
  max-width:360px;
  width:100%;
  margin-right:auto;
  margin-left:auto;
}

html.word-focus-v30 .word-focus-components-sheet.is-count-2 {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

html.word-focus-v30 .word-focus-components-sheet.is-count-4 {
  grid-template-columns:repeat(4,minmax(0,1fr));
}

html.word-focus-v30 .word-focus-component-item {
  min-width:0;
  display:grid;
  grid-template-rows:auto 1fr;
  align-content:start;
  padding:14px clamp(10px,1.4vw,18px) 16px;
  text-align:center;
}

html.word-focus-v30 .word-focus-component-item+.word-focus-component-item {
  border-left:1px solid var(--wf-hair);
}

html.word-focus-v30 .word-focus-component-char {
  min-height:104px;
  display:grid;
  place-items:center;
  font-family:var(--wf-shodo);
  font-size:clamp(70px,8vw,108px);
  font-weight:600;
  line-height:1;
  color:var(--wf-sumi);
  white-space:nowrap;
}

html.word-focus-v30 .word-focus-component-char.is-multi {
  font-size:clamp(44px,5vw,66px);
}

html.word-focus-v30 .word-focus-stroke-group {
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

html.word-focus-v30 .word-focus-stroke-cell {
  position:relative;
  flex:0 0 80px;
  width:80px;
  height:80px;
  display:block;
  overflow:hidden;
  color:var(--wf-sumi);
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),color-mix(in srgb,var(--wf-sumi) 8%,transparent) 50%,transparent calc(50% + .5px)),
    linear-gradient(transparent calc(50% - .5px),color-mix(in srgb,var(--wf-sumi) 8%,transparent) 50%,transparent calc(50% + .5px));
}

html.word-focus-v30 .word-focus-stroke-group.is-multi .word-focus-stroke-cell {
  flex-basis:56px;
  width:56px;
  height:56px;
}

html.word-focus-v30 .word-focus-stroke-fallback,
html.word-focus-v30 .word-focus-stroke-canvas {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}

html.word-focus-v30 .word-focus-stroke-fallback {
  z-index:1;
  font-family:var(--wf-shodo);
  font-size:70px;
  font-weight:600;
  line-height:1;
  color:var(--wf-sumi);
  transition:opacity .18s ease;
}

html.word-focus-v30 .word-focus-stroke-group.is-multi .word-focus-stroke-fallback {
  font-size:48px;
}

html.word-focus-v30 .word-focus-stroke-canvas {
  z-index:2;
}

html.word-focus-v30 .word-focus-stroke-canvas svg {
  display:block;
}

html.word-focus-v30 .word-focus-stroke-cell.is-ready .word-focus-stroke-fallback {
  opacity:0;
}

html.word-focus-v30 .word-focus-stroke-cell.is-fallback .word-focus-stroke-fallback {
  opacity:1;
}

html.word-focus-v30 .word-focus-component-copy {
  padding-top:7px;
}

html.word-focus-v30 .word-focus-component-copy h3 {
  margin:4px 0 0;
  display:grid;
  justify-items:center;
  gap:3px;
  font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--wf-sumi);
}

html.word-focus-v30 .word-focus-component-copy h3 b {
  font-size:clamp(16px,1.35vw,20px);
  white-space:nowrap;
}

html.word-focus-v30 .word-focus-component-copy h3 span {
  font-family:var(--wf-shodo);
  font-size:clamp(15px,1.25vw,18px);
  font-weight:500;
  white-space:nowrap;
  color:var(--wf-sepia);
}

html.word-focus-v30 .word-focus-component-copy p {
  margin:5px 0 0;
  font-size:14px;
  line-height:1.45;
  color:var(--wf-sumi-soft);
}

html.word-focus-v30 .word-focus-kanji-notes {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:0;
  width:100%;
  margin:0 0 4px;
  padding:0;
  border:0;
  text-align:center;
}

html.word-focus-v30 .word-focus-kanji-notes[hidden] {
  display:none;
}

html.word-focus-v30 .word-focus-kanji-anatomy {
  display:block;
  min-width:0;
  padding:0;
  font-family:"Avenir Next","Be Vietnam Pro",sans-serif;
  font-size:9.5px;
  line-height:1.1;
  letter-spacing:-.03em;
  white-space:nowrap;
  color:var(--wf-sumi-soft);
}

html.word-focus-v30 .word-focus-kanji-anatomy+.word-focus-kanji-anatomy {
  border:0;
}

html.word-focus-v30 .word-focus-anatomy-head {
  font-weight:700;
  color:var(--wf-sumi-soft);
}

html.word-focus-v30 .word-focus-kanji-layout {
  display:grid;
  grid-template-columns:minmax(190px,.72fr) minmax(0,1fr);
  gap:clamp(34px,6vw,82px);
  align-items:center;
}

html.word-focus-v30 .word-focus-kanji {
  display:grid;
  place-items:center;
  min-height:270px;
  font-family:var(--wf-shodo);
  font-size:clamp(128px,17vw,210px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.05em;
  white-space:nowrap;
  text-shadow:0 20px 45px color-mix(in srgb,currentColor 17%,transparent);
}

html.word-focus-v30 .word-focus-kanji.is-multi {
  font-size:clamp(70px,9vw,116px);
  letter-spacing:.015em;
}

html.word-focus-v30 .word-focus-component-label {
  display:block;
  margin-bottom:9px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--j-muted);
}

html.word-focus-v30 .word-focus-kanji-copy h2 {
  margin:0;
  font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif;
  font-size:clamp(30px,3.5vw,48px);
  line-height:1.18;
  letter-spacing:-.02em;
  color:var(--j-ink);
}

html.word-focus-v30 .word-focus-kanji-copy p {
  max-width:28ch;
  margin:14px 0 0;
  font-size:clamp(18px,1.9vw,25px);
  line-height:1.6;
  color:var(--j-muted);
}

html.word-focus-v30 .word-focus-build {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid var(--wf-hair);
}

html.word-focus-v30 .word-focus-build span {
  position:relative;
  display:inline-grid;
  place-items:center;
  min-width:46px;
  min-height:48px;
  font-family:var(--wf-shodo);
  font-size:31px;
  font-weight:600;
  opacity:.46;
  transition:opacity .2s ease,transform .2s ease;
}

html.word-focus-v30 .word-focus-build span.is-current {
  opacity:1;
  transform:translateY(-3px);
}

html.word-focus-v30 .word-focus-build span.is-current::after {
  content:"";
  position:absolute;
  right:5px;
  bottom:0;
  left:5px;
  height:3px;
  border-radius:99px;
  background:currentColor;
}

html.word-focus-v30 .word-focus-build b {
  color:var(--j-muted);
  font-size:15px;
  opacity:.46;
}

html.word-focus-v30 .word-focus-combine,
html.word-focus-v30 .word-focus-origin-note {
  position:relative;
  max-width:46ch;
  margin:24px auto 0;
  padding:16px 0 0 20px;
  border-top:1px solid var(--wf-hair);
  font-size:17px;
  line-height:1.75;
  color:var(--j-muted);
}

html.word-focus-v30 .word-focus-combine::before,
html.word-focus-v30 .word-focus-origin-note::before {
  content:"";
  position:absolute;
  top:20px;
  bottom:4px;
  left:0;
  width:4px;
  border-radius:99px;
  background:var(--wf-seal);
}

html.word-focus-v30 .word-focus-combine strong,
html.word-focus-v30 .word-focus-origin-note strong {
  color:var(--wf-seal);
}

html.word-focus-v30 .word-focus-example-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  max-width:none;
}

html.word-focus-v30 .word-focus-example-main {
  min-width:0;
}

html.word-focus-v30 .word-focus-example-main {
  padding-left:var(--tl-space-3,12px);
  border-left:4px solid color-mix(in srgb,var(--wf-seal) 72%,transparent);
}

html.word-focus-v30 .word-focus-example {
  max-width:none;
  margin:0;
  font-family:"Yu Mincho","Noto Serif JP",serif;
  font-size:var(--tl-text-jp,24px);
  font-weight:500;
  line-height:1.85;
  letter-spacing:.005em;
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
  /* `balance` leaves an empty right edge on short Japanese examples and can
     force an awkward final break. Keep the editorial width, then wrap only
     between the small semantic groups prepared by the runtime. */
  text-wrap:pretty;
  color:var(--j-ink);
}

@supports (text-wrap: pretty) {
  html.word-focus-v30 .word-focus-example {
    text-wrap:pretty;
  }
}

html.word-focus-v30 .word-focus-example ruby,
html.word-focus-v30 .word-focus-example-token {
  white-space:nowrap;
}

html.word-focus-v30 .word-focus-example rt {
  font-size:max(11px,.46em);
  font-weight:500;
  color:var(--j-muted);
}

html.word-focus-v30 .word-focus-example .target,
html.word-focus-v30 .word-focus-form .target {
  position:relative;
  padding:0 4px 2px;
  border-radius:5px;
  background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--wf-seal) 12%,transparent) 55%);
  color:var(--wf-sumi);
  font-weight:700;
}

html.word-focus-v30 .word-focus-example-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:18px;
}

html.word-focus-v30 .word-focus-meaning-toggle {
  min-width:112px;
  min-height:44px;
  padding:8px 15px;
  border:1px solid var(--wf-hair);
  border-radius:999px;
  background:transparent;
  color:var(--j-ink);
  font-family:"Be Vietnam Pro",sans-serif;
  font-size:14px;
  font-weight:700;
}

html.word-focus-v30 .word-focus-translation {
  max-width:42ch;
  margin-top:16px;
  padding:15px 0 0 18px;
  border-left:3px solid color-mix(in srgb,var(--wf-seal) 42%,transparent);
  font-size:16px;
  line-height:1.75;
  color:var(--j-muted);
}

html.word-focus-v30 .word-focus-usage-grid {
  display:grid;
}

html.word-focus-v30 .word-focus-usage-row {
  padding:14px 0;
  border-bottom:1px solid var(--wf-hair);
}

html.word-focus-v30 .word-focus-usage-row:last-child {
  border-bottom:0;
}

html.word-focus-v30 .word-focus-usage-row small {
  display:block;
  margin-bottom:5px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--j-muted);
}

html.word-focus-v30 .word-focus-usage-row strong,
html.word-focus-v30 .word-focus-usage-row div {
  font-size:17px;
  line-height:1.65;
  color:var(--j-ink);
}

html.word-focus-v30 .word-focus-known {
  width:100%;
  max-width:360px;
  min-height:48px!important;
  margin-top:24px;
  padding:9px 16px!important;
  border-radius:14px!important;
}

html.word-focus-v30 .word-focus-nav {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:10px;
  padding:18px clamp(24px,5vw,68px) clamp(24px,4vw,38px);
}

html.word-focus-v30 .word-focus-nav.is-first {
  grid-template-columns:minmax(0,1fr);
}

html.word-focus-v30 .word-focus-nav button {
  min-height:54px;
  border-radius:17px;
  font-family:"Be Vietnam Pro",sans-serif;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

html.word-focus-v30 .word-focus-prev {
  display:grid;
  place-items:center;
  border:1px solid var(--wf-hair);
  background:transparent;
  color:var(--j-muted);
  font-size:21px!important;
}

html.word-focus-v30 .word-focus-prev span {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

html.word-focus-v30 .word-focus-next {
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--wf-sumi) 34%,transparent);
  background:var(--wf-sumi);
  color:var(--wf-paper-strong);
  box-shadow:0 13px 30px color-mix(in srgb,var(--wf-sumi) 20%,transparent),inset 0 1px rgba(255,255,255,.11);
}

html.word-focus-v30 .word-focus-next::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.12),transparent 42%);
}

html.word-focus-v30 .word-focus-nav button:hover {
  transform:translateY(-1px);
}

html.word-focus-v30 .word-focus-nav button:active {
  transform:translateY(1px) scale(.99);
}

@media (max-width:780px) {
  html.word-focus-v30 #hnc-am {
    right:14px!important;
    bottom:calc(90px + env(safe-area-inset-bottom,0px))!important;
  }

  html.word-focus-v30 .word-focus-card {
    min-height:min(620px,72vh);
    border-radius:22px;
    padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));
  }

  html.word-focus-v30 #flowBox.word-focus-v30-active > .fl-top {
    gap:7px 12px!important;
    padding:0 18px 11px!important;
  }

  html.word-focus-v30 #flowBox.word-focus-v30-active > .fl-top.word-focus-full-head {
    padding-right:18px!important;
    padding-left:18px!important;
  }

  html.word-focus-v30 .word-focus-card::after {
    right:-.05em;
    bottom:.12em;
    font-size:132px;
  }

  html.word-focus-v30 .word-focus-panel {
    justify-content:flex-start;
    padding:24px 20px 24px;
  }

  html.word-focus-v30 .word-focus-panel--full {
    padding:0;
  }

  html.word-focus-v30 .word-focus-panel--full > .word-focus-panel {
    padding:30px 20px 34px;
  }

  html.word-focus-v30 .word-focus-kicker {
    margin-bottom:18px;
  }

  html.word-focus-v30 .word-focus-hero-grid {
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(118px,.82fr);
    gap:12px;
    align-items:center;
  }

  html.word-focus-v30 .word-focus-reading {
    min-height:18px;
    margin-bottom:3px;
    font-size:14px;
    letter-spacing:.18em;
  }

  html.word-focus-v30 .word-focus-title {
    font-size:clamp(44px,12vw,58px);
  }

  html.word-focus-v30 .word-focus-title[data-length="long"] {
    font-size:clamp(30px,8.5vw,40px);
  }

  html.word-focus-v30 .word-focus-title[data-length="xlong"] {
    font-size:clamp(26px,7vw,34px);
  }

  html.word-focus-v30 .word-focus-audio {
    margin-top:14px;
  }

  html.word-focus-v30 .word-focus-hero-copy {
    margin-top:0;
    padding:4px 0 4px 12px;
    border-top:0;
    border-left:1px solid var(--wf-hair);
  }

  html.word-focus-v30 .word-focus-meaning {
    max-width:18ch;
    font-size:clamp(14px,4vw,17.5px);
    line-height:1.42;
  }

  html.word-focus-v30 .word-focus-meaning-label {
    margin-bottom:4px;
    font-size:8px;
  }

  html.word-focus-v30 .word-focus-meta {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:6px;
    margin-top:10px;
  }

  html.word-focus-v30 .word-focus-meta-item {
    gap:1px;
  }

  html.word-focus-v30 .word-focus-meta-item small {
    font-size:8px;
  }

  html.word-focus-v30 .word-focus-meta-item strong {
    font-size:11px;
    line-height:1.3;
  }

  html.word-focus-v30 .word-focus-kanji-layout {
    display:block;
  }

  html.word-focus-v30 .word-focus-kanji {
    min-height:190px;
    font-size:118px;
  }

  html.word-focus-v30 .word-focus-kanji.is-multi {
    font-size:clamp(58px,18vw,76px);
  }

  html.word-focus-v30 .word-focus-kanji-copy {
    text-align:center;
  }

  html.word-focus-v30 .word-focus-kanji-copy p {
    margin-right:auto;
    margin-left:auto;
  }

  html.word-focus-v30 .word-focus-components-equation {
    gap:8px;
    margin-bottom:10px;
    font-size:clamp(30px,9vw,42px);
  }

  html.word-focus-v30 .word-focus-components-sheet {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:none;
  }

  html.word-focus-v30 .word-focus-components-sheet.is-count-1 {
    grid-template-columns:minmax(0,1fr);
    max-width:280px;
  }

  html.word-focus-v30 .word-focus-components-sheet.is-count-2 {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html.word-focus-v30 .word-focus-components-sheet.is-count-4 {
    grid-template-columns:repeat(4,minmax(132px,1fr));
    overflow-x:auto;
    overscroll-behavior-inline:contain;
  }

  html.word-focus-v30 .word-focus-component-item {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:11px 7px 13px;
    text-align:center;
  }

  html.word-focus-v30 .word-focus-component-item+.word-focus-component-item {
    border-top:0;
    border-left:1px solid var(--wf-hair);
  }

  html.word-focus-v30 .word-focus-component-char {
    min-height:88px;
    font-size:74px;
  }

  html.word-focus-v30 .word-focus-component-char.is-multi {
    font-size:42px;
  }

  html.word-focus-v30 .word-focus-stroke-group {
    min-height:72px;
  }

  html.word-focus-v30 .word-focus-stroke-cell {
    flex-basis:68px;
    width:68px;
    height:68px;
  }

  html.word-focus-v30 .word-focus-stroke-fallback {
    font-size:60px;
  }

  html.word-focus-v30 .word-focus-stroke-group.is-multi .word-focus-stroke-cell {
    flex-basis:46px;
    width:46px;
    height:46px;
  }

  html.word-focus-v30 .word-focus-stroke-group.is-multi .word-focus-stroke-fallback {
    font-size:40px;
  }

  html.word-focus-v30 .word-focus-component-copy {
    padding-top:5px;
  }

  html.word-focus-v30 .word-focus-component-copy h3 {
    justify-items:center;
  }

  html.word-focus-v30 .word-focus-component-label {
    white-space:normal;
    font-size:9px;
    letter-spacing:.1em;
  }

  html.word-focus-v30 .word-focus-kanji-notes {
    display:grid;
    margin:0 0 3px;
  }

  html.word-focus-v30 .word-focus-kanji-anatomy {
    padding:0;
    font-size:7.8px;
    line-height:1;
  }

  html.word-focus-v30 .word-focus-kanji-anatomy+.word-focus-kanji-anatomy {
    border:0;
  }

  html.word-focus-v30 .word-focus-build {
    margin-top:22px;
  }

  html.word-focus-v30 .word-focus-example-layout {
    display:block;
  }

  html.word-focus-v30 .word-focus-example-main {
    padding-left:var(--tl-space-2,8px);
  }

  html.word-focus-v30 .word-focus-example {
    font-size:clamp(22px,5.95vw,var(--tl-text-jp,24px));
    line-height:1.78;
    letter-spacing:0;
  }

  html.word-focus-v30 .word-focus-nav {
    grid-template-columns:54px minmax(0,1fr);
    padding:16px 20px calc(24px + env(safe-area-inset-bottom,0px));
  }

  html.word-focus-v30 .word-focus-phasebar {
    gap:6px;
  }

  html.word-focus-v30 .word-focus-phasebar li {
    flex:1 1 0;
  }

  html.word-focus-v30 .word-focus-phasebar li b {
    width:22px;
    height:22px;
    font-size:10px;
  }

  html.word-focus-v30 .word-focus-phasebar li span {
    display:none;
    font-size:10px;
  }

  html.word-focus-v30 .word-focus-phasebar li.is-current {
    flex:0 0 auto;
  }

  html.word-focus-v30 .word-focus-phasebar li.is-current span {
    display:block;
  }

  html.word-focus-v30 .word-focus-phasebar li::after {
    min-width:6px;
  }
}

@media (max-width:350px) {
  html.word-focus-v30 .word-focus-panel {
    padding-right:16px;
    padding-left:16px;
  }

  html.word-focus-v30 .word-focus-title {
    font-size:55px;
  }

  html.word-focus-v30 .word-focus-meaning {
    font-size:14px;
  }

  html.word-focus-v30 .word-focus-nav {
    padding-right:16px;
    padding-left:16px;
  }
}

@media (prefers-reduced-motion:reduce) {
  html.word-focus-v30 .word-focus-panel { animation:none; }
  html.word-focus-v30 .word-focus-stroke-fallback,
  html.word-focus-v30 .word-focus-dots i,
  html.word-focus-v30 .word-focus-nav button { transition:none; }
}

@media (forced-colors:active) {
  html.word-focus-v30 .word-focus-card { border:1px solid CanvasText; background:Canvas; }
  html.word-focus-v30 .word-focus-title .word-focus-piece,
  html.word-focus-v30 .word-focus-kanji { color:CanvasText!important; text-shadow:none; }
  html.word-focus-v30 .word-focus-next { border:1px solid ButtonText; background:ButtonFace; color:ButtonText; }
}