/* Trí Lữ Lesson Atlas V26
   Shared visual layer for generated lessons. It deliberately changes no lesson
   data, IDs, audio, progress keys or exercise behavior. */
@font-face{font-family:"Be Vietnam Pro";src:url("/tra-cuu-fonts/be-vietnam-pro-400-vietnamese.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("/tra-cuu-fonts/be-vietnam-pro-600-vietnamese.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/tra-cuu-fonts/bricolage-grotesque-500-600-vietnamese.woff2") format("woff2");font-style:normal;font-weight:500 600;font-display:swap}

:root{
  --v26-scene:url("/anh-art/tra-cuu-dawn-v30.webp");
  --v26-ink:#0b2137;
  --v26-muted:#344c61;
  --v26-label:#71430a;
  --v26-accent:#952b50;
  --v26-teal:#176b65;
  --v26-gold:#8e5612;
  --v26-line:rgba(36,76,104,.25);
  --v26-edge:rgba(255,255,255,.72);
  --v26-shell:rgba(238,247,249,.28);
  --v26-stage:rgba(249,251,248,.66);
  --v26-raised:rgba(251,252,249,.78);
  --v26-control:rgba(248,251,250,.58);
  --v26-shadow:0 24px 74px rgba(24,46,64,.18);
  --v26-focus:#a92955;
  --bg:transparent;
  --bg2:transparent;
  --card:var(--v26-raised);
  --card2:rgba(246,250,249,.62);
  --ink:var(--v26-ink);
  --muted:var(--v26-muted);
  --line:var(--v26-line);
  --line2:var(--v26-line);
  --accent:var(--v26-accent);
  --gold:var(--v26-gold);
  --gold-2:#b57625;
  --green:var(--v26-teal);
  --green-bg:rgba(41,137,110,.10);
  --red:#a12e4d;
  --red-bg:rgba(179,55,81,.09);
  --teal:#1a6874;
  --plum:#6e407c;
  --terra:#8c4d2e;
  --chip:rgba(33,75,101,.08);
  --shadow:0 14px 38px rgba(22,44,62,.12);
  --nav-bg:var(--v26-shell);
}

html[data-mode="dark"]{
  --v26-scene:url("/anh-art/tra-cuu-night-v30.webp");
  --v26-ink:#f9fcff;
  --v26-muted:#d7e5ef;
  --v26-label:#ffd38b;
  --v26-accent:#ffb3c8;
  --v26-teal:#91e9cf;
  --v26-gold:#ffd078;
  --v26-line:rgba(202,232,249,.23);
  --v26-edge:rgba(235,248,255,.38);
  --v26-shell:rgba(3,15,31,.22);
  --v26-stage:rgba(5,21,41,.50);
  --v26-raised:rgba(10,35,60,.58);
  --v26-control:rgba(8,30,52,.50);
  --v26-shadow:0 26px 82px rgba(0,5,15,.43);
  --v26-focus:#8fe9ff;
  --bg:transparent!important;
  --bg2:transparent!important;
  --card:var(--v26-raised)!important;
  --card2:rgba(10,35,60,.54)!important;
  --ink:var(--v26-ink)!important;
  --muted:var(--v26-muted)!important;
  --line:var(--v26-line)!important;
  --line2:var(--v26-line)!important;
  --accent:var(--v26-accent)!important;
  --gold:var(--v26-gold)!important;
  --gold-2:#ffd078!important;
  --green:var(--v26-teal)!important;
  --green-bg:rgba(28,116,91,.20)!important;
  --red:#ff9daf!important;
  --red-bg:rgba(171,49,78,.22)!important;
  --teal:#8bddf0!important;
  --plum:#d9b7ef!important;
  --terra:#ffc29d!important;
  --chip:rgba(218,239,252,.10)!important;
  --nav-bg:var(--v26-shell)!important;
}

html{min-width:320px;scroll-behavior:smooth;background:#e9eef0}
html[data-mode="dark"]{background:#020a13}
body{
  min-height:100dvh;
  background-color:#e9eef0;
  background-image:linear-gradient(180deg,rgba(241,247,248,.28),rgba(234,240,240,.75)),var(--v26-scene)!important;
  background-position:center top!important;
  background-size:cover!important;
  background-attachment:fixed!important;
  color:var(--v26-ink);
  font-family:"Be Vietnam Pro","Noto Sans JP",system-ui,sans-serif;
  overflow-x:hidden;
}
html[data-mode="dark"] body{
  background-color:#020a13!important;
  background-image:linear-gradient(180deg,rgba(1,7,16,.20),rgba(2,9,18,.72)),var(--v26-scene)!important;
  background-position:center top!important;
  background-size:cover!important;
  background-attachment:fixed!important;
  color:var(--v26-ink)!important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle at 9% 8%,rgba(91,205,235,.10),transparent 28%),radial-gradient(circle at 92% 30%,rgba(255,137,187,.08),transparent 27%);
}
html[data-mode="dark"] body::before{background:radial-gradient(circle at 12% 4%,rgba(80,203,240,.08),transparent 28%),radial-gradient(circle at 90% 34%,rgba(255,128,181,.06),transparent 26%)}
button,a{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--v26-focus);outline-offset:3px}
ruby{ruby-position:over;white-space:nowrap}
rt{font-size:max(.5em,11px);line-height:1.15;color:var(--v26-muted);font-family:"Noto Sans JP","Yu Gothic",sans-serif}

.app{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  grid-template-rows:auto minmax(calc(100dvh - 128px),auto);
  gap:18px;
  width:min(1180px,calc(100% - 40px));
  max-width:none;
  min-height:100dvh;
  margin:0 auto;
  padding:18px 0 34px;
  border:0!important;
}

/* Header: one compact glass strip, not a second page hero. */
.hd{
  position:sticky;
  top:12px;
  z-index:50;
  grid-column:1/-1;
  padding:11px 14px 10px;
  border:1px solid var(--v26-edge);
  border-radius:22px;
  background:linear-gradient(125deg,rgba(255,255,255,.18),rgba(255,255,255,.03)),var(--v26-shell);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
  backdrop-filter:blur(18px) saturate(155%);
  box-shadow:inset 0 1px rgba(255,255,255,.32),0 18px 48px rgba(18,39,57,.13);
}
html[data-mode="dark"] .hd{
  background:linear-gradient(125deg,rgba(255,255,255,.10),rgba(255,255,255,.015)),var(--v26-shell)!important;
  border:1px solid var(--v26-edge)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.20),0 18px 52px rgba(0,6,16,.28)!important;
}
.hd-row{gap:12px}
.hd-back,.hd-mode{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  border:1px solid var(--v26-line);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.035)),var(--v26-control);
  color:var(--v26-ink);
  box-shadow:inset 0 1px rgba(255,255,255,.30);
}
html[data-mode="dark"] .hd-back,html[data-mode="dark"] .hd-mode{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.015)),var(--v26-control)!important;border-color:var(--v26-line)!important;color:var(--v26-ink)!important}
.hd-kicker,.sec-kicker{font-family:"Be Vietnam Pro",sans-serif;color:var(--v26-label)!important;font-size:.64rem;font-weight:600;letter-spacing:.15em}
.hd-name{font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif;font-size:1.02rem;font-weight:600;letter-spacing:-.015em}
.pbar{height:7px;background:rgba(24,66,91,.10)!important}
html[data-mode="dark"] .pbar{background:rgba(222,242,254,.10)!important}
.pbar>i{background:linear-gradient(90deg,#5dd2ee,#a89dff,#ff8fbd,#ffd17b);box-shadow:0 0 13px rgba(84,204,239,.42)}
.pmeta{font-family:"Be Vietnam Pro",sans-serif;color:var(--v26-muted)!important;font-size:.64rem}

/* Desktop learning navigation: fixed mental model, all original buttons/IDs. */
.bnav{
  position:sticky;
  top:120px;
  left:auto;
  bottom:auto;
  align-self:start;
  grid-column:1;
  grid-row:2;
  transform:none;
  width:auto;
  max-width:none;
  padding:9px;
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  border:1px solid var(--v26-edge);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.16),transparent),var(--v26-shell);
  -webkit-backdrop-filter:blur(14px) saturate(145%);
  backdrop-filter:blur(14px) saturate(145%);
  box-shadow:var(--v26-shadow);
}
html[data-mode="dark"] .bnav{background:linear-gradient(145deg,rgba(255,255,255,.08),transparent),var(--v26-shell)!important;border:1px solid var(--v26-edge)!important}
.bnav button{
  position:relative;
  min-height:62px;
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  border-radius:15px;
  color:var(--v26-muted)!important;
  font-size:.76rem;
  font-weight:600;
  text-align:left;
}
.bnav button .ic{width:28px;font-size:1.25rem;text-align:center}
.bnav button.on{color:var(--v26-ink)!important;background:linear-gradient(110deg,rgba(91,211,239,.16),rgba(171,147,255,.13),rgba(255,140,186,.11))}
.bnav button.on .ic{filter:drop-shadow(0 0 8px rgba(91,211,239,.45))}
.bnav button.on::after{position:absolute;left:0;top:12px;bottom:12px;width:3px;height:auto;margin:0;background:linear-gradient(#5ed4ee,#a99dff,#ff91be);box-shadow:0 0 10px rgba(85,207,239,.45)}

/* The active view is the learning paper; inactive views retain display:none. */
.view{grid-column:2;grid-row:2;min-width:0;padding:0}
.view.on{
  display:block;
  min-width:0;
  padding:clamp(20px,3.2vw,42px);
  border:1px solid var(--v26-edge);
  border-radius:30px;
  background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 42%),var(--v26-stage);
  -webkit-backdrop-filter:blur(13px) saturate(145%);
  backdrop-filter:blur(13px) saturate(145%);
  box-shadow:inset 0 1px rgba(255,255,255,.32),var(--v26-shadow);
  overflow:hidden;
}
html[data-mode="dark"] .view.on{background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%),var(--v26-stage)!important;border-color:var(--v26-edge)!important}
.view.on::before{content:"";position:absolute;z-index:-1;right:-38px;top:72px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(91,213,240,.07),transparent 68%);pointer-events:none}

.lm-switch{min-height:48px;margin:0 0 18px;border-color:var(--v26-line);background:var(--v26-control)!important}
html[data-mode="dark"] .lm-switch{background:var(--v26-control)!important;border-color:var(--v26-line)!important}
.lm-switch button{min-height:46px;color:var(--v26-muted)!important}
.lm-switch button.on{background:linear-gradient(110deg,rgba(79,202,235,.22),rgba(169,145,255,.18),rgba(255,137,185,.15));color:var(--v26-ink)!important}

/* Repeated learning surfaces: clear hierarchy without dozens of live blurs. */
.wcard,.fc-face,.hubcard,.exwrap,.stat,.xtra .wf-item,.xtra .adv-item,.g-ex,.g-explain,.g-cmp,.q-detail{
  border-color:var(--v26-line);
  background:linear-gradient(135deg,rgba(255,255,255,.13),transparent 50%),var(--v26-raised);
  box-shadow:0 14px 38px rgba(18,40,58,.10);
}
html[data-mode="dark"] :is(.wcard,.fc-face,.hubcard,.exwrap,.stat,.xtra .wf-item,.xtra .adv-item,.g-ex,.g-explain,.g-cmp,.q-detail){background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 50%),var(--v26-raised)!important;border-color:var(--v26-line)!important}
.wcard{max-width:820px;margin:0 auto 16px;border-radius:24px;padding:20px 20px 17px}
.wcard::before,.fc-face::before{height:4px;background:linear-gradient(90deg,#5dd2ee,#a99cff,#ff91bd,#ffd17a)}
.wcard::after{opacity:.032}
.w-num{font-family:"Be Vietnam Pro",sans-serif;color:var(--v26-muted)!important}
.w-kanji,.fc-kanji,.g-title{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;color:var(--v26-ink)!important}
.w-kanji{font-size:clamp(3rem,6vw,4.5rem);line-height:1.38}
.w-kanji rt,.fc-furi{color:var(--v26-label)!important}
.w-mean,.fc-mean{color:var(--v26-accent)!important;font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif;font-weight:600}
.w-mean{font-size:clamp(1.35rem,2vw,1.7rem)}
.spk{width:44px;height:44px;min-width:44px;min-height:44px;background:var(--v26-control)!important;border-color:var(--v26-line)!important}
.spk.playing{background:linear-gradient(135deg,#63dbf0,#c5a8ff,#ff96bd)!important;color:#061426!important}
.w-photo{width:min(220px,54vw);height:auto;aspect-ratio:4/3;border-color:var(--v26-line)!important}
.w-icon{width:96px;height:96px;background:var(--v26-control)!important;border-color:var(--v26-line)!important;color:var(--v26-label)!important}
.kb,.w-ex,.hw-box,.lm-switch,.opt,.mt,.ls-in,.ghost,.wchip,.done-xp{
  background:rgba(247,251,250,.48);
  border-color:var(--v26-line);
}
html[data-mode="dark"] :is(.kb,.w-ex,.hw-box,.opt,.mt,.ls-in,.ghost,.wchip,.done-xp){background:rgba(10,35,60,.50)!important;border-color:var(--v26-line)!important}
.kb-char,.knowbtn,.fl-prev,.hw-btn{background:var(--v26-control)!important;border-color:var(--v26-line)!important}
html[data-mode="dark"] :is(.kb-char,.knowbtn,.fl-prev,.hw-btn){background:var(--v26-control)!important;border-color:var(--v26-line)!important}
.kb-info,.kb-combine,.kb-note,.w-ex,.g-explain,.g-cmp,.g-ex{font-size:max(.96rem,16px)}
.w-ex .jp,.g-ex .jp{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(1.2rem,2vw,1.45rem);line-height:2.2;word-break:normal;overflow-wrap:normal}
.w-ex .vn,.g-ex .vn{font-family:"Be Vietnam Pro",sans-serif;font-size:max(1rem,16px);line-height:1.75;color:var(--v26-muted)!important}
.fc-ex{font-size:clamp(1.2rem,2vw,1.5rem)!important;line-height:1.8!important}
.knowbtn,.exspk,.fl-prev,.fl-next,.fc-btn,.hubcard,.opt,.nextbtn,.mt,.hw-btn,.ls-play,.ghost{min-height:44px}
/* Deepened 2026-08-16: the old teal/indigo/rose stops carried white text at only
   2.71:1 / 3.37:1 / 4.23:1. These stops keep the same sweep at 4.61:1 / 5.80:1 / 6.13:1. */
.fl-next,.nextbtn{background:linear-gradient(110deg,#1f7f99,#5d5ab8 56%,#a63a68);color:#fff;box-shadow:0 12px 28px rgba(53,99,146,.19)}
.fc{height:min(500px,62vh);min-height:390px}
.fc-face{border-radius:28px}
.hub{gap:14px}.hubcard{min-height:150px;padding:20px;border-radius:22px}.hubcard :is(h3,span:where(.hubcard-heading)){font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif;font-size:1.08rem;font-weight:600}.hubcard :is(p,span:where(.hubcard-description)){font-size:.9rem;line-height:1.65;color:var(--v26-muted)!important}
.exwrap{max-width:860px;margin:0 auto;border-radius:24px;padding:clamp(20px,3.2vw,34px)}
.stat-grid{gap:14px}.stat{border-radius:20px;padding:18px}.stat .v{font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif;color:var(--v26-accent)!important}.stat .l{font-family:"Be Vietnam Pro",sans-serif;color:var(--v26-muted)!important}

/* Questions are learning content, not compact UI chrome. Keep prompts and
   Japanese choices large enough to scan without zooming on phones. */
.q-label{font-family:"Be Vietnam Pro",sans-serif;font-size:.78rem;line-height:1.45;letter-spacing:.1em;color:var(--v26-label)!important}
.q-stem{font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif;font-size:clamp(1.55rem,3.2vw,2.35rem)!important;font-weight:600;line-height:1.45!important;letter-spacing:-.02em;color:var(--v26-ink)!important}
.q-stem.jp,.q-stem:lang(ja){font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(1.45rem,3vw,2.15rem)!important;line-height:2!important;letter-spacing:0;word-break:normal;overflow-wrap:normal}
.q-stem .big{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(2rem,4vw,3rem)!important;line-height:1.55!important;color:var(--v26-ink)!important;word-break:keep-all}
.opts{gap:12px}
.opt{min-height:72px;padding:14px 18px!important;border-radius:18px!important;font-family:"Be Vietnam Pro",sans-serif;font-size:clamp(1.1rem,2vw,1.35rem)!important;line-height:1.55;gap:14px!important}
.opt .jp,.opt:lang(ja){font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(1.35rem,2.5vw,1.8rem)!important;line-height:1.6;word-break:keep-all;overflow-wrap:normal}
.opt .idx,.opt .om{width:36px!important;height:36px!important;min-width:36px;border-radius:10px!important;font-size:.86rem!important}
.q-exp,.q-detail{font-family:"Be Vietnam Pro",sans-serif;font-size:max(1rem,16px)!important;line-height:1.75!important}
.q-stem + div[style*="font-size:.78rem"],
.q-stem + div[style*="font-size:.76rem"]{font-family:"Be Vietnam Pro",sans-serif;font-size:max(1rem,16px)!important;line-height:1.65!important;color:var(--v26-muted)!important}
.nextbtn{font-family:"Be Vietnam Pro",sans-serif;font-size:1rem!important}
.mt{min-height:72px!important;padding:12px 14px!important;font-family:"Be Vietnam Pro",sans-serif;font-size:clamp(1.05rem,2vw,1.3rem)!important;line-height:1.55}
.mt .jp{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(1.2rem,2.3vw,1.55rem)!important;line-height:1.6;word-break:keep-all}

/* Grammar/particles/adverbs use the same material but keep semantic colors. */
.g-title,.tl-card-v2 .g-title{font-size:clamp(2rem,4.6vw,3.7rem)!important;line-height:1.45!important;text-align:left;letter-spacing:-.025em}
.g-sec{margin:0 0 18px}
.g-lbl{font-family:"Be Vietnam Pro",sans-serif;font-size:.66rem;color:var(--v26-label)!important;font-weight:600}
.g-struct{padding:15px 18px;border-radius:16px;border-color:rgba(31,132,105,.32);background:rgba(42,150,116,.10);font-size:clamp(1.1rem,1.8vw,1.35rem)!important;line-height:2.05}
#fcS.g-struct{font-size:clamp(1.1rem,1.8vw,1.35rem)!important;line-height:1.9!important}
.g-explain,.g-cmp{padding:16px 18px;border-radius:16px;line-height:1.85}
.g-exs{gap:12px}.g-ex{padding:15px 17px;border-radius:16px}

/* Writing canvas remains square and its animation/layout contracts stay intact. */
.hw-box{width:min(340px,76vw);height:min(340px,76vw);aspect-ratio:1;border-radius:24px}

@media(min-width:1280px){
  .app{width:min(1280px,calc(100% - 52px));grid-template-columns:205px minmax(0,1fr)}
  .view.on{padding:46px}
  #pointList[style*="block"]{column-count:1}
}

@media(max-width:820px){
  body{background-attachment:scroll!important}
  .app{display:block;width:100%;min-height:100dvh;padding:0 0 calc(88px + env(safe-area-inset-bottom));}
  .hd{top:0;margin:0;border-width:0 0 1px;border-radius:0;padding:9px 12px 8px}
  .hd-row{gap:8px}.hd-back,.hd-mode{width:44px;height:44px}.hd-name{font-size:.94rem}.hd-kicker{font-size:.57rem}.pmeta{font-size:.59rem}
  .view{padding:0}
  .view.on{margin:12px;padding:20px 15px;border-radius:24px;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}
  .bnav{position:fixed;z-index:60;left:0;right:0;top:auto;bottom:0;width:100%;max-width:none;padding:6px 7px calc(7px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border-width:1px 0 0;border-radius:20px 20px 0 0;-webkit-backdrop-filter:blur(17px) saturate(155%);backdrop-filter:blur(17px) saturate(155%);transform:none}
  .bnav button{min-width:0;min-height:56px;flex-direction:column;justify-content:center;gap:3px;padding:5px 2px;font-size:.64rem;text-align:center}.bnav button .ic{width:auto;font-size:1.18rem}.bnav button.on::after{left:50%;right:auto;top:auto;bottom:3px;width:20px;height:3px;transform:translateX(-50%)}
  .wcard{padding:18px 15px 15px}.w-kanji{font-size:clamp(2.8rem,15vw,4rem)}.w-ex .jp,.g-ex .jp{font-size:1.25rem!important}
  .q-stem{font-size:clamp(1.4rem,6vw,1.8rem)!important}.q-stem.jp,.q-stem:lang(ja){font-size:clamp(1.32rem,5.6vw,1.72rem)!important}.q-stem .big{font-size:clamp(2.1rem,9vw,2.7rem)!important}
  .opt{min-height:66px;padding:12px 14px!important;font-size:1.05rem!important}.opt .jp,.opt:lang(ja){font-size:1.3rem!important}.mt{font-size:1rem!important}.mt .jp{font-size:1.2rem!important}
  .g-title,.tl-card-v2 .g-title{font-size:clamp(1.9rem,9vw,3rem)!important}
  .hub{grid-template-columns:1fr 1fr}.hubcard{min-height:138px;padding:16px 13px}
}

@media(max-width:430px){
  .hd-kicker{letter-spacing:.09em}.hd-name{max-width:44vw}
  .view.on{margin:9px;padding:17px 12px;border-radius:21px}
  .lm-switch button{font-size:.7rem}
  .hub{grid-template-columns:1fr}.hubcard{min-height:108px}
  .fc{height:440px;min-height:360px}
  .w-kanji{font-size:3rem}.w-mean{font-size:1.35rem}
  .stat-grid{grid-template-columns:1fr 1fr;gap:9px}.stat{padding:14px 11px}
  .mt-grid{gap:9px}.mt{min-height:66px!important;padding:10px!important;font-size:1rem!important}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.view,.slide-r,.slide-l,.sparkle,.confetti i{animation:none!important}.pbar>i,.fc,.bnav button,.hubcard,.opt,.mt{transition:none!important}}

@media(prefers-reduced-transparency:reduce){
  body,html[data-mode="dark"] body{background-image:none!important}
  .hd,.bnav,.view.on{background:#f7faf9!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html[data-mode="dark"] :is(.hd,.bnav,.view.on){background:#071a2e!important}
  .wcard,.fc-face,.hubcard,.exwrap,.stat,.xtra .wf-item,.xtra .adv-item,.g-ex,.g-explain,.g-cmp{background:#fff!important}
  html[data-mode="dark"] :is(.wcard,.fc-face,.hubcard,.exwrap,.stat,.xtra .wf-item,.xtra .adv-item,.g-ex,.g-explain,.g-cmp){background:#0d243d!important}
}

/* Light-mode metadata: the inherited brass was below WCAG on the tinted stamp/chip surfaces. */
html[data-mode="light"] .stamp,
html[data-mode="light"] .done-xp{color:#4e3912!important}

@media(forced-colors:active){
  body,html[data-mode="dark"] body{background:Canvas!important;color:CanvasText!important}
  body::before,.wcard::before,.wcard::after,.fc-face::before,.bnav button.on::after,.view.on::before{display:none!important}
  .hd,.bnav,.view.on,.wcard,.fc-face,.hubcard,.exwrap,.stat,.kb,.w-ex,.g-ex,.g-explain,.g-cmp,.lm-switch,.opt,.mt,.hw-box{background:Canvas!important;color:CanvasText!important;border-color:CanvasText!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .bnav button.on{outline:2px solid Highlight}.pbar>i{background:Highlight!important}
}

@media print{
  body,html[data-mode="dark"] body{background:#fff!important;color:#111!important}
  body::before,.hd,.bnav,.spk,.exspk,.hw-tools,.fc-ctl,.fl-nav,.hub{display:none!important}
  .app,.view.on{display:block;width:auto;min-height:0;margin:0;padding:0;border:0;background:#fff!important;color:#111!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .wcard,.kb,.w-ex,.g-ex,.g-explain,.g-cmp{break-inside:avoid;background:#fff!important;color:#111!important;border-color:#bbb!important;box-shadow:none!important}
  rt,.w-ex .vn,.g-ex .vn{color:#333!important}
}