/* © 2026 MDH Technologies PLC. All rights reserved. Proprietary — see LICENSE. */
/* Meseret app shell + lesson player. Tokens first; everything derives from them. */
:root {
  --bg: #F6F9F3; --surface: #FFFFFF; --surface-2: #EAF1E5; --line: #D6E2CF;
  --fg: #142019; --muted: #56655B;
  --accent: #129B60; --accent-deep: #0B6E44; --accent-ink: #FFFFFF; --accent-soft: #DAF4E6; --accent-line: #A9DFC3;
  --sun: #F5A400; --sun-deep: #B87900; --sun-soft: #FFF2D1; --sun-line: #F3D48A; --sun-ink: #7A4A00; --on-sun: #2A1B00;
  --sky: #2A77E0; --sky-soft: #E0ECFD; --sky-line: #A9C8F3;
  --bad: #DA4A1F; --bad-soft: #FDE5DC; --bad-ink: #A13212;
  --coral: #E8603C; --coral-soft: #FDE6DE; --violet: #7A5AF0; --violet-soft: #ECE6FE;
  --tile-a: #9BDDB9; --tile-b: #FFD677; --hi: rgba(18,155,96,.35);
  --skin: #8B5A3C; --skin-2: #B07850; --hair: #2B1D16; --cloth: #FFFFFF; --earth: #8A5A35;
  --shadow: 0 1px 2px rgba(20,32,25,.06), 0 8px 24px rgba(20,32,25,.08);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Nunito Sans', 'Noto Sans Ethiopic', 'Segoe UI', system-ui, sans-serif;
  --ethiopic: 'Noto Sans Ethiopic', 'Nunito Sans', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121712; --surface: #1B221C; --surface-2: #253027; --line: #334036; --fg: #EEF4EC; --muted: #A3B2A7;
  --accent: #39C987; --accent-deep: #1F8A5A; --accent-ink: #062014; --accent-soft: #173A29; --accent-line: #2A5E44;
  --sun: #FFBA2E; --sun-deep: #B98316; --sun-soft: #3A2E12; --sun-line: #5E4A1C; --sun-ink: #FFD27A; --on-sun: #241700;
  --sky: #6EA6F5; --sky-soft: #172B47; --sky-line: #2C4C78; --bad: #F07A52; --bad-soft: #3D211A; --bad-ink: #F7A68A;
  --coral: #F38A66; --coral-soft: #3B2219; --violet: #A58BFF; --violet-soft: #2A2245; --tile-a: #2F7A55; --tile-b: #8C6A1C; --hi: rgba(57,201,135,.35); --skin: #9C6848; --skin-2: #BC8460; --hair: #1A120D; --cloth: #DCD8CE; --earth: #9E6A42; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #121712; --surface: #1B221C; --surface-2: #253027; --line: #334036; --fg: #EEF4EC; --muted: #A3B2A7;
  --accent: #39C987; --accent-deep: #1F8A5A; --accent-ink: #062014; --accent-soft: #173A29; --accent-line: #2A5E44;
  --sun: #FFBA2E; --sun-deep: #B98316; --sun-soft: #3A2E12; --sun-line: #5E4A1C; --sun-ink: #FFD27A; --on-sun: #241700;
  --sky: #6EA6F5; --sky-soft: #172B47; --sky-line: #2C4C78; --bad: #F07A52; --bad-soft: #3D211A; --bad-ink: #F7A68A;
  --coral: #F38A66; --coral-soft: #3B2219; --violet: #A58BFF; --violet-soft: #2A2245; --tile-a: #2F7A55; --tile-b: #8C6A1C; --hi: rgba(57,201,135,.35); --skin: #9C6848; --skin-2: #BC8460; --hair: #1A120D; --cloth: #DCD8CE; --earth: #9E6A42; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.55; }
html[lang="am"] body, html[lang="om"] body { font-size: 18px; line-height: 1.65; }
html[lang="am"] .display { font-family: var(--ethiopic); font-weight: 800; }
/* lesson language (set on #app by setLessonLang): Ethiopic text needs ~10% larger type and more line height */
#app[lang="am"], #app[lang="om"] { font-size: 18.7px; line-height: 1.7; }
#app[lang="am"] .display, #app[lang="am"] h1, #app[lang="am"] h2, #app[lang="am"] h3 { font-family: var(--ethiopic); }
#app[lang="am"] .opt, #app[lang="am"] .qb, #app[lang="am"] .chip, #app[lang="am"] .btn, #app[lang="am"] .qq, #app[lang="am"] .ask, #app[lang="am"] .tx { font-family: var(--ethiopic); line-height: 1.55; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 8px; }
p { margin: 0; }
[hidden] { display: none !important; }
.display { font-family: var(--display); font-weight: 700; line-height: 1.15; text-wrap: balance; }
h1.display { font-size: 28px; margin: 0; }
h2.display { font-size: 20px; margin: 0; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.eyebrow.sky { color: var(--sky); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.lead { font-size: 18px; }
.ask { font-weight: 800; }

.view { max-width: 560px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 20px 110px; display: grid; gap: 16px; }
.view > * { min-width: 0; }
.stack { display: grid; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row > * { min-width: 0; }
.grow { flex: 1; }
.card { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.card.soft { background: var(--sun-soft); border-color: var(--sun-line); }
.card.sky { background: var(--sky-soft); border-color: var(--sky-line); }
.card.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 4px 0 var(--accent-deep); text-decoration: none; }
.card.accent .eyebrow { color: var(--accent-ink); opacity: .9; }
.list { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; overflow: hidden; }
.list > * { border-top: 1px solid var(--surface-2); }
.list > *:first-child { border-top: 0; }
.item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: var(--fg); background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; }
.item .t { font-weight: 800; font-size: 15px; }
.item .s { font-size: 13px; color: var(--muted); }
.item.current { background: var(--sky-soft); }
.item.head { padding: 10px 16px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); cursor: default; }
.item.head.book { color: var(--sun-ink); background: var(--sun-soft); }
.dot { width: 28px; height: 28px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); flex: none; display: grid; place-items: center; }
.dot.done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dot.now { border: 3px solid var(--sky); }
.icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; flex: none; }
.pill { display: inline-flex; align-items: center; min-height: 28px; border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 800; }
.pill.green { background: var(--accent-soft); color: var(--accent-deep); }
.pill.sun { background: var(--sun-soft); color: var(--sun-ink); }
.pill.sky { background: var(--sky); color: #fff; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; width: 100%; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 4px 0 var(--accent-deep); text-decoration: none; padding: 0 16px; }
.btn.sun { background: var(--sun); color: var(--on-sun); box-shadow: 0 4px 0 var(--sun-deep); }
.btn.ghost { background: var(--surface); color: var(--fg); border: 2px solid var(--line); border-bottom-width: 4px; box-shadow: none; }
.btn.link { background: transparent; color: var(--accent-deep); box-shadow: none; min-height: 44px; }
.btn:disabled { background: var(--surface-2); color: var(--muted); box-shadow: none; cursor: default; }
.opts { display: grid; gap: 10px; }
.opts.row2 { grid-template-columns: 1fr 1fr; }
.opts.row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { text-align: left; min-height: 56px; padding: 12px 16px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 14px; background: var(--surface); font-weight: 700; cursor: pointer; }
.opt.center { text-align: center; }
.opt[aria-checked="true"], .opt[aria-pressed="true"] { border-color: var(--sky); background: var(--sky-soft); }
.opt.ok { border-color: var(--accent); background: var(--accent-soft); }
.opt.no { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-ink); text-decoration: line-through; }
.opt:disabled { cursor: default; }

/* top bar + progress */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); }
.top .in { max-width: 560px; margin: 0 auto; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-block: 10px; display: flex; align-items: center; gap: 10px; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 12px; cursor: pointer; color: var(--muted); flex: none; }
.mode.mode { display: inline-block; padding: 4px 10px; } .mode { flex: none; align-self: center; white-space: nowrap; line-height: 1.3; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft); border: 1.5px solid var(--accent-line); border-radius: 99px; padding: 4px 10px; }
.mode.review { color: var(--sky); background: var(--sky-soft); border-color: var(--sky-line); }
.mode.book { color: var(--sun-ink); background: var(--sun-soft); border-color: var(--sun-line); }
.bar { flex: 1; height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .35s ease; }
.count { flex: none; font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }

/* figures */
.fig { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 12px; display: grid; gap: 12px; }
.fig svg { display: block; width: 100%; height: auto; }
.fig svg text { font-family: var(--body); }
.sizes, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.size, .chip { min-height: 46px; min-width: 46px; padding: 0 12px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 12px; background: var(--surface); font-weight: 800; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; cursor: pointer; }
.size.fit, .chip.on, .chip.ok { border-color: var(--accent); background: var(--accent-soft); }
.size.gap, .chip.no { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-ink); }
.size[aria-pressed="true"] { outline: 3px solid var(--fg); outline-offset: 1px; }
.chip[aria-pressed="true"] { border-color: var(--sky); background: var(--sky-soft); }
.result { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; font-size: 16px; min-height: 3.1em; }
.result strong { display: block; }
.defn { background: var(--sun-soft); border: 2px solid var(--sun-line); border-radius: 16px; padding: 12px 16px; display: grid; gap: 4px; }
.defn b { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--sun-ink); }
.frow { display: grid; gap: 6px; }
.frow > span { font-weight: 800; font-size: 15px; }
.inner { justify-self: start; min-height: 48px; padding: 0 18px; border: 2px solid var(--sky); border-bottom-width: 4px; border-radius: 12px; background: var(--sky-soft); font-weight: 800; cursor: pointer; }
.inner:disabled { opacity: .5; cursor: default; }
.steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.steps li::marker { font-weight: 800; color: var(--sky); }
.blank { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; }
.blank input { font-weight: 800; font-size: 20px; width: 6em; min-height: 52px; text-align: center; color: var(--fg); background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 12px; }
.blank input.no { border-color: var(--bad); background: var(--bad-soft); }
.blank input.ok { border-color: var(--accent); background: var(--accent-soft); }
.explain { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.play { width: 44px; height: 44px; border-radius: 99px; border: 0; background: var(--accent); display: grid; place-items: center; flex: none; cursor: pointer; }
.kw { display: inline; border-bottom: 2px dotted var(--sky); cursor: pointer; background: transparent; border-top: 0; border-left: 0; border-right: 0; padding: 0; font: inherit; color: inherit; }
.gloss { background: var(--sky-soft); border: 2px solid var(--sky-line); border-radius: 12px; padding: 10px 12px; font-size: 15px; }

/* tray */
.tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--surface); border-top: 2px solid var(--line); transition: background-color .2s ease; }
.tray .in { max-width: 560px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.tray.ok { background: var(--accent-soft); border-color: var(--accent-line); }
.tray.no { background: var(--sun-soft); border-color: var(--sun-line); }
.tray.info { background: var(--sky-soft); border-color: var(--sky-line); }
.msg { display: grid; gap: 2px; font-size: 16px; }
.msg:empty { display: none; }
.msg strong { font-family: var(--display); font-size: 21px; }
.tray.ok .msg strong { color: var(--accent-deep); }
.tray.no .msg strong { color: var(--sun-ink); }
.tray.no .btn { background: var(--sun); color: var(--on-sun); box-shadow: 0 4px 0 var(--sun-deep); }

/* bottom nav */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--surface); border-top: 2px solid var(--line); }
.nav .in { max-width: 560px; margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-block: 8px calc(10px + env(safe-area-inset-bottom, 0px)); padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; color: var(--muted); text-decoration: none; min-height: 48px; justify-content: center; }
.nav a.on { color: var(--accent-deep); }

/* sheet */
.sheet { position: fixed; inset: 0; z-index: 9; background: rgba(20,32,25,.55); display: flex; align-items: flex-end; }
.sheet .in { width: 100%; max-width: 560px; margin: 0 auto; background: var(--bg); border-radius: 24px 24px 0 0; padding: 12px max(20px, env(safe-area-inset-left, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; }
.sheet textarea { width: 100%; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); resize: none; }
.score { display: flex; align-items: baseline; gap: 10px; }
.score .big { font-family: var(--display); font-weight: 700; font-size: 48px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week div { display: grid; justify-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--muted); }
.week i { width: 30px; height: 30px; border-radius: 99px; background: var(--surface-2); border: 2px solid var(--line); }
.week i.on { background: var(--accent); border-color: var(--accent); }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 99px; font-weight: 700; font-size: 14px; z-index: 20; max-width: 90vw; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* work-it-out panel: half height, question stays visible above */
.panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; height: 56vh; max-height: 92vh; background: var(--bg); border-top: 2px solid var(--line); border-radius: 20px 20px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.12); display: flex; flex-direction: column; transition: height .2s ease; }
.panel.tall { height: 92vh; }
.panel .phead { display: flex; align-items: center; gap: 8px; padding: 8px max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); }
.panel .pq { flex: 1; min-width: 0; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .pbody { flex: 1; overflow: auto; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); display: grid; gap: 10px; align-content: start; }
.panel .ptabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.panel .ptabs .opt { min-height: 40px; padding: 6px 8px; font-size: 14px; border-bottom-width: 3px; }
body.panel-open main { padding-bottom: 60vh; }

/* scratch pad: squared paper that grows; one finger writes, two fingers scroll */
.panel .pbody { display: flex; flex-direction: column; overflow: hidden; }
#wbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#wbody > .stack { overflow: auto; }
.scratch { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.padbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.padbar .opt { min-height: 44px; padding: 0; font-size: 18px; border-bottom-width: 3px; }
.padbar .opt.no { font-size: 12px; text-decoration: none; }
.padhint { font-size: 13px; font-weight: 700; color: var(--sky); background: var(--sky-soft); border-radius: 10px; padding: 6px 10px; }
.padwrap { flex: 1; min-height: 160px; overflow-y: auto; overflow-x: hidden; border: 2px solid var(--line); border-radius: 14px; background-color: var(--surface);
  background-image: linear-gradient(var(--surface-2) 1px, transparent 1px), linear-gradient(90deg, var(--surface-2) 1px, transparent 1px); background-size: 24px 24px; background-attachment: local; overscroll-behavior: contain; }
.padwrap canvas { display: block; touch-action: none; cursor: crosshair; }
.padmore { display: block; width: 100%; min-height: 44px; border: 0; border-top: 1px dashed var(--line); background: transparent; color: var(--muted); font-weight: 800; font-size: 14px; cursor: pointer; }
.panel .ptabs .opt { min-height: 38px; padding: 4px 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .phead { padding-block: 4px 4px; }
.panel .pbody { gap: 8px; padding-top: 8px; }
.padbar .opt { min-height: 40px; }

/* book reader: one scrolling page per section */
.reader { display: grid; gap: 16px; padding-bottom: 40px; }
.reader > header h1 { font-size: 26px; }
.ideahead { font-size: 21px; margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--line); }
.blk { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 12px; scroll-margin-top: 72px; }
.blk.plain { background: transparent; border: 0; padding: 4px 2px; }
.blk.hook { border-color: var(--sky-line); background: var(--sky-soft); }
.blk.done, .blk.seen { border-color: var(--accent-line); }
.blk h1.display { font-size: 20px; }
.blk .fb { border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; }
.blk .fb.ok { background: var(--accent-soft); } .blk .fb.ok strong { color: var(--accent-deep); }
.blk .fb.no { background: var(--sun-soft); } .blk .fb.no strong { color: var(--sun-ink); }
.blk .fb.info { background: var(--sky-soft); } .blk .fb.info strong { color: var(--sky); }
.blk .offer { display: grid; gap: 8px; }
.blkfoot { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.blkfoot .btn { width: auto; min-height: 44px; padding-inline: 0; }
.endblk .kw { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kwam { color: var(--muted); font-weight: 600; }
.tbl { overflow-x: auto; } .tbl table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tbl th, .tbl td { border: 1.5px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; } .tbl th { background: var(--surface-2); }
.note { font-size: 14px; color: var(--muted); border-left: 4px solid var(--sun-line); padding-left: 10px; }
.mini { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 6px; } .mini i { display: block; height: 100%; background: var(--accent); }
.reader, .blk, .blk .stack { grid-template-columns: minmax(0, 1fr); }
.reader > *, .blk > *, .blk .stack > * { min-width: 0; }
.blk { overflow-wrap: anywhere; }
.eyebrow:empty { display: none; }

/* ---------- book view (one colourful scrolling chapter) ---------- */
.h-g { --h: var(--accent); --hs: var(--accent-soft); } .h-s { --h: var(--sky); --hs: var(--sky-soft); } .h-y { --h: var(--sun); --hs: var(--sun-soft); }
.h-c { --h: var(--coral); --hs: var(--coral-soft); } .h-v { --h: var(--violet); --hs: var(--violet-soft); }
.pts { flex: none; font-weight: 900; font-size: 16px; background: var(--sun-soft); color: var(--sun-ink); border: 2px solid var(--sun-line); border-radius: 99px; padding: 4px 12px; }
.pts.bump { animation: bump .5s ease; }
@keyframes bump { 30% { transform: scale(1.35) rotate(-6deg); } 60% { transform: scale(.95); } }
.book { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 60px; }
.book > * { min-width: 0; }
.hero { position: relative; overflow: hidden; border-radius: 24px; padding: 22px 20px; color: #fff; background: linear-gradient(135deg, #129B60 0%, #2A77E0 60%, #7A5AF0 100%); display: grid; gap: 6px; }
.hero .eyebrow { color: #fff; opacity: .9; } .hero h1 { font-size: 28px; line-height: 1.15; margin: 0; } .hero p { opacity: .95; font-size: 15px; max-width: 80%; }
.heroart { position: absolute; right: -14px; bottom: -14px; width: 120px; height: 120px; color: #fff; opacity: .22; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.secnav { position: sticky; top: 62px; z-index: 4; background: var(--bg); display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px; scrollbar-width: none; flex-wrap: nowrap; }
.secnav::-webkit-scrollbar { display: none; }
.secnav .chip { flex: none; text-decoration: none; font-weight: 800; color: var(--h); background: var(--hs); border: 2px solid transparent; border-radius: 99px; padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; }
.secnav .chip.on { background: var(--h); color: #fff; }
.sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; scroll-margin-top: 120px; padding-top: 8px; }
.sec > * { min-width: 0; }
.sechead { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 23px; line-height: 1.2; margin: 6px 0 0; }
.sechead .num { flex: none; font-family: var(--body); font-size: 14px; font-weight: 900; color: #fff; background: var(--h); border-radius: 12px; padding: 6px 10px; box-shadow: 0 3px 0 color-mix(in srgb, var(--h) 70%, #000); }
.sec.complete .sechead .num::after { content: ' ✓'; }
.rd { display: grid; gap: 10px; } .rd h3 { margin: 4px 0 0; font-size: 18px; color: var(--h); }
.kwt { all: unset; cursor: pointer; font-weight: 800; color: var(--fg); background: linear-gradient(transparent 55%, var(--hs) 55%); border-bottom: 2px dotted var(--h); }
.kwt:focus-visible { outline: 3px solid var(--sky); }
.tip { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--sun-ink); background: var(--sun-soft); border-radius: 12px; padding: 8px 12px; min-height: 28px; }
.tip .tx { display: block; }
.keys { display: grid; gap: 10px; }
.kcard { border-radius: 18px; padding: 14px 16px; background: var(--hs, var(--sun-soft)); border-left: 6px solid var(--h, var(--sun)); display: grid; gap: 4px; }
.kcard .kt { font-weight: 900; font-size: 18px; color: var(--h, var(--sun-ink)); } .kcard .kd { font-size: 16px; } .kam { font-weight: 700; color: var(--muted); font-size: 15px; }
.kcard.big .kt { font-size: 24px; }
.quiz, .explore { border-radius: 20px; padding: 14px; background: var(--surface); border: 2px solid var(--line); display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.quiz > *, .explore > * { min-width: 0; }
.quiz.think { background: var(--hs); border-color: transparent; }
.quiz.done { border-color: var(--accent-line); }
.ql { font-size: 13px; font-weight: 900; letter-spacing: .04em; color: var(--h); }
.qq { font-weight: 800; font-size: 17px; } .qctx { color: var(--muted); }
.qo { display: grid; gap: 8px; } .qo.two { grid-template-columns: 1fr 1fr; }
.qb { min-height: 48px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); font-weight: 700; text-align: left; padding: 10px 14px; cursor: pointer; transition: transform .1s ease; }
.qo.two .qb { text-align: center; }
.qb:active { transform: translateY(2px); }
.qb.pick { border-color: var(--h); background: var(--hs); }
.qb.ok { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.qb.no { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-ink); opacity: .85; }
.qb:disabled { cursor: default; }
.pop { animation: pop .45s ease; } @keyframes pop { 40% { transform: scale(1.06); } }
.shake { animation: shake .4s ease; } @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.qf { border-radius: 12px; padding: 8px 12px; font-size: 15px; } .qf.ok { background: var(--accent-soft); color: var(--accent-deep); } .qf.no { background: var(--sun-soft); color: var(--sun-ink); }
.quiz:not(.think) .qf:not(.ok):not(.no) { background: var(--hs); }
.quiz .btn.small, .explore .btn.small { min-height: 48px; font-size: 16px; }
.secend { display: grid; gap: 10px; }
.secdone { text-align: center; font-weight: 900; font-size: 18px; padding: 14px; border-radius: 18px; background: var(--sun-soft); color: var(--sun-ink); animation: pop .6s ease; }
.pcard { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 64px; padding: 12px 16px; border-radius: 18px; border: 0; background: var(--h); color: #fff; font-weight: 800; box-shadow: 0 4px 0 color-mix(in srgb, var(--h) 70%, #000); cursor: pointer; }
.pcard small { display: block; font-weight: 600; opacity: .9; font-size: 13px; } .pcard .pi { font-size: 24px; } .pcard.soft { background: var(--hs); color: var(--fg); box-shadow: none; border: 2px solid var(--line); }
.bookend { display: grid; gap: 10px; text-align: center; padding-top: 12px; } .bookend .display { font-size: 20px; }
.conf { position: fixed; z-index: 50; width: 9px; height: 9px; border-radius: 2px; pointer-events: none; animation: conf .85s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes conf { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
.ptsfloat { position: fixed; z-index: 50; transform: translateX(-50%); font-weight: 900; font-size: 22px; color: var(--sun-deep); pointer-events: none; animation: ptsup 1.1s ease forwards; }
@keyframes ptsup { to { transform: translate(-50%, -60px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pts.bump, .pop, .shake, .heroart, .secdone { animation: none; } }
.quiz .stack > .eyebrow:empty + *:not(p) { margin-top: 0; } .quiz .stack { gap: 10px; }

/* ---------- book view v2: progress %, focus timer, pictures, people, skip, translate ---------- */
.top .prog { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.top .prog .bar { height: 10px; } #ppct { font-weight: 900; font-size: 14px; color: var(--accent-deep); font-variant-numeric: tabular-nums; min-width: 36px; }
.focus { flex: none; min-height: 40px; min-width: 44px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); font-weight: 800; font-size: 14px; padding: 0 10px; cursor: pointer; font-variant-numeric: tabular-nums; }
.focus.on { background: var(--violet-soft); border-color: var(--violet); color: var(--violet); } .focus.brk { background: var(--sky-soft); border-color: var(--sky); color: var(--sky); }
.focussheet { display: grid; gap: 12px; text-align: center; } .focussheet .big { font-size: 48px; font-weight: 900; font-variant-numeric: tabular-nums; } .focussheet .pts { justify-self: center; font-size: 20px; }
.hero { background: linear-gradient(135deg, var(--h) 0%, color-mix(in srgb, var(--h) 55%, var(--violet)) 100%); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--h) 70%, transparent); }
.hero .heroart { animation: float 5s ease-in-out infinite; width: 130px; height: 130px; right: -8px; bottom: -10px; opacity: .9; color: inherit; background: rgba(255,255,255,.18); border-radius: 50%; padding: 14px; }
.hero .heroart svg { width: 100%; height: 100%; }
@keyframes float { 50% { transform: translateY(-6px) rotate(-4deg); } }
.secnav .chip { position: relative; overflow: hidden; isolation: isolate; }
.secnav .chip i { position: absolute; inset: 0; width: var(--p, 0%); background: color-mix(in srgb, var(--h) 35%, transparent); z-index: -1; transition: width .4s ease; }
.secnav .chip.full::after { content: '✓'; margin-left: 4px; }
.secnav .chip.on i { display: none; }
.sechead { font-size: 24px; }
.picblk { display: grid; justify-items: center; gap: 6px; text-align: center; background: var(--hs); border-radius: 22px; padding: 16px; }
.pic { display: block; width: 140px; height: 140px; } .pic svg { width: 100%; height: 100%; display: block; }
.picblk .cap { font-weight: 800; color: var(--h); }
.gal { display: grid; gap: 10px; } .gal h3 { margin: 0; font-size: 18px; color: var(--h); }
.galgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.gi { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 18px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); cursor: pointer; font-weight: 800; font-size: 13px; line-height: 1.2; text-align: center; transition: transform .12s ease; }
.gi .pic { width: 64px; height: 64px; } .gi:active { transform: scale(.96); }
.gi[aria-expanded="true"] { border-color: var(--h); background: var(--hs); transform: translateY(-2px); }
.ginfo { background: var(--hs); border-left: 6px solid var(--h); border-radius: 14px; padding: 10px 14px; animation: pop .35s ease; } .ginfo b { color: var(--h); }
.ppl { display: grid; gap: 10px; } .ppl h3 { margin: 0; font-size: 18px; color: var(--h); }
.pplgrid { display: grid; gap: 10px; }
.person { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 2px solid var(--line); border-radius: 20px; padding: 12px; }
.face { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--hs); border: 3px solid var(--h); display: grid; place-items: center; font-weight: 900; font-size: 24px; color: var(--h); }
.face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.pinfo { display: grid; gap: 2px; min-width: 0; } .pinfo b { font-size: 17px; } .pinfo small { color: var(--muted); font-weight: 700; } .pinfo p { font-size: 15px; }
.kcard .kt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.quiz { box-shadow: 0 6px 18px -14px rgba(0,0,0,.35); }
.quiz.worked { background: var(--surface); border-style: dashed; }
.skip { all: unset; cursor: pointer; justify-self: end; font-size: 14px; font-weight: 800; color: var(--muted); padding: 10px 4px; min-height: 24px; }
.quiz.skipped { opacity: .75; } .quiz.skipped .qo, .quiz.skipped .stack, .quiz.skipped > .btn { display: none; }
.skipnote { font-size: 14px; font-weight: 700; color: var(--muted); }
.conf.round { border-radius: 50%; }
.trpill { position: fixed; z-index: 40; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 0; background: var(--fg); color: var(--bg); font-weight: 800; box-shadow: 0 8px 20px rgba(0,0,0,.25); cursor: pointer; animation: pop .25s ease; }
.trsheet { display: grid; gap: 12px; } .trq { color: var(--muted); font-size: 15px; border-left: 4px solid var(--line); padding-left: 10px; }
.tra { font-family: var(--ethiopic); font-size: 20px; line-height: 1.7; font-weight: 700; min-height: 36px; }
.spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hero .heroart, .ginfo, .trpill { animation: none; } }

/* tap-to-pair match, activities */
.pairs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pcol { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pl, .pr { overflow-wrap: anywhere; hyphens: auto; }
.pl, .pr { min-height: 48px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); font-weight: 700; font-size: 15px; line-height: 1.25; padding: 8px 10px; text-align: left; cursor: pointer; transition: transform .1s ease; }
.pl.sel { border-color: var(--fg); transform: translateX(3px); }
.pl.on, .pr.on { border-color: var(--h); background: var(--hs); color: var(--fg); }
.quiz.act { background: var(--violet-soft); border-color: transparent; } .quiz.act .ql { color: var(--violet); }
.quiz.act .rv { justify-self: start; width: auto; padding: 0 18px; }

/* interactive figures: tree, venn, tap buttons */
.quiz.fig { background: var(--surface); }
.treebox { display: grid; gap: 14px; position: relative; padding: 4px 0; }
.trow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; position: relative; }
.trow + .trow::before { content: ''; position: absolute; top: -12px; left: 15%; right: 15%; border-top: 2px dashed var(--line); }
.tnode { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--hs); font-weight: 800; font-size: 14px; cursor: pointer; transition: transform .12s ease; }
.tnode .pic { width: 28px; height: 28px; }
.tnode.on { background: var(--h); color: #fff; border-color: var(--h); transform: scale(1.06); }
.tnode.path { border-color: var(--h); }
.vsvg { width: 100%; max-width: 320px; justify-self: center; display: block; }
.vchips, .tbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.vchip, .tb { min-height: 44px; padding: 6px 14px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); font-weight: 800; font-size: 14px; cursor: pointer; }
.vchip.ov { border-style: dashed; }
.vchip.on, .tb.on { background: var(--h); color: #fff; border-color: var(--h); }
.tb.seen:not(.on), .gi.seen:not([aria-expanded="true"]) { border-color: var(--accent-line); }
.tbtns.withpic { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.tbtns.withpic .tb { border-radius: 18px; display: grid; justify-items: center; gap: 4px; padding: 10px 6px; }
.tbtns.withpic .tb .pic { width: 56px; height: 56px; }

/* fractions drawn stacked like the book (textContent keeps "3/5") */
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; font-size: .82em; margin: 0 .08em; text-align: center; }
.frac .fn { border-bottom: .09em solid currentColor; padding: 0 .12em; }
.frac .fd { padding: 0 .12em; }
.frac .fs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.frac { position: relative; }
/* number line */
.nl .nlsvg { touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nl .nlp:empty { display: none; }
.nl .vchips { display: flex; flex-wrap: wrap; gap: 8px; }
/* engine B: sign buttons, sliders, figures */
.sgn { display: inline-flex; gap: 6px; }
.sgn button { min-width: 44px; min-height: 52px; font-size: 24px; font-weight: 800; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; }
.sgn button[aria-pressed="true"] { background: var(--sky); border-color: var(--sky); color: #fff; }
.sld .sl { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-weight: 700; }
.sld .sl input { grid-column: 1 / -1; width: 100%; min-height: 36px; accent-color: var(--accent); }
.sld .sout { font-size: 22px; font-weight: 800; color: var(--accent-deep); background: var(--accent-soft); border-radius: 12px; padding: 10px 14px; text-align: center; }
.fbar .fbp:empty, .grd .gp:empty { display: none; }
.fbar svg, .grd svg, .nest svg { touch-action: manipulation; }
/* order game: placed items can be taken back */
.oseq .oit { all: unset; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; min-height: 40px; padding: 2px 12px; border-radius: 10px; background: var(--sky-soft); font-weight: 800; }
.oseq .oit .x { color: var(--muted); font-size: 13px; }
.oseq .oit:disabled { cursor: default; } .oseq .oit:disabled .x { display: none; }
.undo { justify-self: start; width: auto; }
.fig #pool .chip:disabled { opacity: .3; box-shadow: none; }
/* mixed numbers: whole part and fraction as one unit, like the book */
.mixed, .fwrap { display: inline-flex; align-items: center; white-space: nowrap; vertical-align: middle; position: relative; }
.mixed .mw { margin-right: .06em; }
.mixed .frac { margin-left: 0; }
.mixed > .fs, .fwrap > .fs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* answer pop-up: right / try again / here is the answer */
.verdict { position: fixed; left: 50%; top: 34%; transform: translate(-50%, 0) scale(.9); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 18px; font-size: 20px; font-weight: 800; box-shadow: 0 10px 30px rgba(0,0,0,.18); animation: vpop .25s ease forwards; pointer-events: none; white-space: nowrap; }
.verdict b { font-size: 26px; }
.verdict.ok { background: var(--accent); color: var(--accent-ink); }
.verdict.retry { background: var(--sun); color: var(--on-sun); }
.verdict.answer { background: var(--sky); color: #fff; }
.verdict.out { opacity: 0; transition: opacity .35s ease; }
@keyframes vpop { to { transform: translate(-50%, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .verdict { animation: none; transform: translate(-50%, 0); } }
/* book reference label (Example 1.31, Exercise 1.6 Q2) kept apart from the question */
.ref { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--muted); background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 99px; padding: 2px 10px; vertical-align: middle; }
.eyebrow + .ref { margin-left: 6px; }
/* install card and help sheet */
.card.install { border-color: var(--accent-line); background: var(--accent-soft); display: grid; gap: 10px; }
.instic { font-size: 22px; background: var(--surface); border-radius: 12px; width: 44px; height: 44px; display: grid; place-items: center; }
.isteps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.istep { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.inum { flex: none; width: 28px; height: 28px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-weight: 800; display: grid; place-items: center; }
.ishare { width: 20px; height: 20px; vertical-align: -4px; color: var(--sky); }

/* drawn figures (shapes and everyday objects) */
.mf { width: 100%; max-width: 140px; height: auto; display: block; margin: 0 auto; }
.figrow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.figbtn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; flex: 1 1 96px; max-width: 160px; min-height: 44px; padding: 8px 6px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; }
.figbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); }
.figbtn .cap { font-weight: 800; font-size: 15px; text-align: center; }
.figbtn .pill { font-weight: 800; font-size: 14px; padding: 2px 10px; border-radius: 99px; background: var(--sun-soft, var(--surface-2)); border: 1.5px solid var(--sun, var(--line)); }
.opt .mf, .chip .mf, .pl .mf, .pr .mf { max-width: 96px; }
#it .mf { max-width: 150px; }
.lad svg g[data-i] { cursor: pointer; }
/* difficulty badge and challenge card */
.lvl { display: inline-block; margin-left: 8px; font-size: 12px; letter-spacing: 1px; padding: 1px 8px; border-radius: 99px; vertical-align: middle; font-weight: 800; }
.lvl.l1 { color: var(--accent-deep); background: var(--accent-soft); }
.lvl.l2 { color: var(--sky); background: var(--sky-soft); }
.lvl.l3 { color: var(--sun-ink); background: var(--sun-soft); border: 1.5px solid var(--sun-line); }
.quiz.chal { border: 2.5px solid var(--sun); background: linear-gradient(180deg, var(--sun-soft), var(--surface) 60%); }
.quiz.chal .ql { color: var(--sun-ink); }
.stack > .lvl, .stack > .ref { justify-self: start; width: fit-content; margin-left: 0; }
/* feedback */
.fbcard { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; cursor: pointer; color: var(--fg); font: inherit; }
.fbcard small { display: block; }
.fbsheet textarea:focus, .fbsheet input:focus { outline: 2px solid var(--sky); }
.fbpic { width: auto; cursor: pointer; }
.secend .fbsec { justify-self: start; }
/* floating report button on lesson screens */
.fbfab { position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 7; width: 52px; height: 52px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); box-shadow: 0 6px 18px rgba(0,0,0,.18); font-size: 24px; display: grid; place-items: center; cursor: pointer; }
.fbfab:disabled { opacity: .6; }
body:has(#tray:not([hidden])) .fbfab { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
.fbshot { display: flex; gap: 12px; align-items: center; }
.fbshot img { width: 92px; border-radius: 10px; border: 2px solid var(--line); }
/* bottom sheets never grow taller than the screen: they scroll */
.sheet .in { max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
/* a reported item opened from a link */
.flash { outline: 4px solid var(--coral); outline-offset: 4px; border-radius: 18px; transition: outline-color .4s ease; }
/* timed test */
.clock:empty { display: none; } .clock { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 99px; background: var(--sky-soft); color: var(--sky); font-size: 14px; }
.clock.low { background: var(--sun-soft); color: var(--sun-ink); animation: pop .6s ease infinite alternate; }
.secres { display: grid; gap: 6px; margin-top: 8px; }
.sr { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.sr.ok { background: var(--accent-soft); } .sr.weak { background: var(--sun-soft); }
.sr .srn { font-weight: 800; min-width: 44px; }

.cmpbox { display: inline-block; min-width: 1.6em; height: 1.4em; line-height: 1.3em; vertical-align: -0.25em; margin: 0 .15em; border: 2px dashed var(--accent-line); border-radius: 8px; background: var(--surface, #fff); text-align: center; font-weight: 800; color: var(--accent-deep); }
.cmpbox.on { border-style: solid; border-color: var(--accent); }
.nw { white-space: nowrap; }

/* explanations: one step per line */
.qf, #msg span, .gp, .ginfo { white-space: pre-line; }
.qb.meh { outline: 2px dashed var(--sun); }
/* table of squares (sqtable) */
.sqt .sqscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--line); max-height: 360px; overflow-y: auto; }
.sqtab { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: 14px; }
.sqtab th { position: sticky; top: 0; background: var(--surface-2); padding: 6px; font-weight: 800; z-index: 1; min-width: 46px; }
.sqtab th.sqx { left: 0; z-index: 2; background: var(--surface-2); }
.sqtab tbody th.sqx { position: sticky; left: 0; z-index: 1; }
.sqtab td { padding: 0; border-top: 1px solid var(--line); }
.sqtab .sqc { min-width: 54px; min-height: 44px; border: 0; background: transparent; font: inherit; color: var(--fg); padding: 0 6px; cursor: pointer; transition: background .25s; }
.sqtab td.hrow .sqc, .sqtab td.hcol .sqc { background: var(--sky-soft, var(--hs)); }
.sqtab td.hit .sqc { background: var(--sun); color: var(--sun-ink, var(--fg)); font-weight: 800; border-radius: 8px; }
.sqtab th.hhead { background: var(--sky); color: #fff; }
.sout.multi { display: grid; gap: 6px; font-size: 18px; }
.sout.multi div { display: flex; justify-content: space-between; gap: 10px; }
.sout.multi span { font-weight: 700; color: var(--fg); }
.slpic { max-height: 170px; }
.sqlink { margin: 4px 0 6px; }
/* factor tree and odd-number patterns */
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; justify-content: center; font-weight: 800; }
.fchips:empty { display: none; }
.fchip { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border-radius: 17px; background: var(--sun-soft); padding: 0 8px; font-weight: 800; color: var(--fg); }
.fchips i, .oddrow i { font-style: normal; opacity: .6; }
.oddrows { display: grid; gap: 8px; }
.oddrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.oddrow .oddk { font-size: 12px; font-weight: 800; color: var(--muted); width: 18px; }
.oddrow b { margin-left: 4px; }
.fgrp { display: inline-flex; align-items: center; gap: 3px; border: 2px dashed; border-radius: 22px; padding: 3px; }

/* ---------- Home / subject / exams (UX rework 2026-10-24) ---------- */
.h-g { --h: var(--accent); --hs: var(--accent-soft); --hd: var(--accent-deep); }
.h-s { --h: var(--sky); --hs: var(--sky-soft); --hd: #1B57A8; }
.h-y { --h: var(--sun); --hs: var(--sun-soft); --hd: var(--sun-ink); }
.h-c { --h: var(--coral); --hs: var(--coral-soft); --hd: #A8411F; }
.h-v { --h: var(--violet); --hs: var(--violet-soft); --hd: #5236C4; }
.hhead { display: flex; align-items: center; gap: 10px; }
.hhead h1 { font-size: 28px; margin: 0; }
.gtabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.gtabs button { flex: none; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); font: inherit; font-weight: 800; color: var(--muted); cursor: pointer; }
.gtabs button[aria-selected="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.stats { display: flex; flex-wrap: wrap; gap: 8px; }
.stats > * { display: inline-flex; gap: 5px; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 99px; background: var(--surface); border: 2px solid var(--line); font-size: 14px; color: var(--fg); text-decoration: none; }
.hero { display: grid; gap: 6px; padding: 18px; border-radius: 22px; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--accent) 0%, #0E7F8C 100%); box-shadow: 0 5px 0 var(--accent-deep); }
.hero .eyebrow { color: #fff; opacity: .95; }
.hero .ht { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.15; }
.hero .hs { font-size: 15px; opacity: .92; }
.btn.light { justify-self: start; margin-top: 6px; background: #fff; color: var(--accent-deep); box-shadow: 0 3px 0 rgba(0,0,0,.18); min-height: 46px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 14px; font-weight: 800; }
.examcard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--sun-soft); border: 2px solid var(--sun-line); color: var(--fg); text-decoration: none; }
.examcard .eico { font-size: 26px; }
.examcard small { display: block; color: var(--muted); font-size: 13px; }
h2.sec { font-size: 21px; margin: 6px 0 -2px; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stile { display: grid; gap: 4px; align-content: start; padding: 14px; min-height: 132px; border-radius: 20px; text-decoration: none; color: var(--fg); background: var(--hs); border: 2px solid transparent; box-shadow: 0 3px 0 color-mix(in srgb, var(--h) 35%, transparent); }
.stile:active { transform: translateY(2px); box-shadow: none; }
.sico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--h); color: #fff; font-weight: 800; font-size: 20px; }
.sico.big { width: 58px; height: 58px; font-size: 26px; border-radius: 18px; }
.sname { font-weight: 800; font-size: 16px; line-height: 1.2; margin-top: 6px; }
.smeta { font-size: 12px; color: var(--muted); font-weight: 700; }
.pbar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 10%, transparent); overflow: hidden; margin-top: 4px; }
.pbar i { display: block; height: 100%; border-radius: 99px; background: var(--h, var(--accent)); }
.sband { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 22px; background: var(--hs); }
.sband .small { color: var(--muted); font-weight: 700; }
.upath { display: grid; gap: 12px; position: relative; }
.ucard { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); color: var(--fg); text-decoration: none; }
.ucard.now { border-color: var(--h); box-shadow: 0 3px 0 var(--h); }
.ucard.done .unum { background: var(--h); color: #fff; }
.unum { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--hs); color: var(--hd); font-family: var(--display); font-weight: 700; font-size: 24px; }
.ulabel { display: block; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.utitle { display: block; font-weight: 800; font-size: 16px; line-height: 1.25; }
.umeta { display: block; font-size: 13px; color: var(--muted); }
.uarrow { font-size: 22px; color: var(--muted); }
.icon.soft { background: var(--hs); color: var(--hd); }
.homefoot { display: grid; gap: 12px; margin-top: 8px; }
.lead { white-space: pre-line; }
/* tray never hides the question: the page leaves room for it, long explanations scroll inside it; the feedback bubble moves aside */
body:has(#tray:not([hidden])) #app { padding-bottom: calc(var(--trayh, 140px) + 24px); }
.tray .msg { max-height: 48vh; max-height: 48dvh; overflow-y: auto; overscroll-behavior: contain; }
body:has(#tray:not([hidden])) .fbfab { display: none; }
/* ---------- real-exam mode ---------- */
.xtt { min-width: 0; } .xtn { font-weight: 800; font-size: 15px; }
.xpaper { display: grid; gap: 14px; padding-bottom: 96px; }
.xhead { display: flex; align-items: center; gap: 10px; }
.xnum { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-family: var(--display); font-weight: 800; font-size: 18px; }
.xnum.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
.xflag { min-height: 44px; padding: 0 12px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.xflag[aria-pressed="true"] { background: var(--sun-soft); border-color: var(--sun-line); color: var(--sun-ink); }
.xfig { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--sky-soft); border: 2px dashed var(--sky-line); font-size: 15px; }
.xq { font-size: 19px; line-height: 1.55; margin: 0; white-space: pre-line; } .xq.sm { font-size: 16px; }
.xopts { display: grid; gap: 10px; }
.xopt { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px; text-align: left; border-radius: 16px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); color: var(--fg); font: inherit; font-size: 17px; cursor: pointer; }
.xopt .xl { flex: none; width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center; border: 2px solid var(--line); font-weight: 800; color: var(--muted); }
.xopt[aria-checked="true"] { border-color: var(--sky); background: var(--sky-soft); }
.xopt[aria-checked="true"] .xl { background: var(--sky); border-color: var(--sky); color: #fff; }
.xclear { justify-self: start; width: auto; }
.xbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--surface); border-top: 2px solid var(--line); }
.xbar .in { max-width: 560px; margin: 0 auto; padding: 10px max(16px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; }
.xbar .btn { min-height: 50px; } .xbar #xprev { font-size: 26px; padding: 0; } .xbar #xnext { width: auto; min-width: 104px; }
.xcount { position: relative; overflow: hidden; min-height: 50px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface-2); font: inherit; font-size: 14px; color: var(--fg); cursor: pointer; }
.xcount i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--sky); }
body:has(.xbar) .fbfab { display: none; }
.xmaphd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.xlegend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); } .xlegend span { display: flex; align-items: center; gap: 6px; }
.lg { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--line); background: var(--surface); } .lg.a { background: var(--sky); border-color: var(--sky); } .lg.f { border-color: var(--sun); background: var(--sun-soft); }
.xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.xgrid button { min-height: 46px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font: inherit; font-weight: 800; color: var(--fg); cursor: pointer; position: relative; }
.xgrid button.a { background: var(--sky); border-color: var(--sky); color: #fff; }
.xgrid button.f { box-shadow: inset 0 0 0 3px var(--sun); } .xgrid button.f::after { content: '🚩'; position: absolute; top: -8px; right: -6px; font-size: 12px; }
.xgrid button.c { outline: 3px solid var(--fg); outline-offset: 1px; }
.xwarn { padding: 10px 12px; border-radius: 12px; background: var(--sun-soft); color: var(--sun-ink); font-weight: 700; margin: 0; }
.xres { display: flex; align-items: center; gap: 16px; } .xring { width: 120px; flex: none; }
.xrp { font-family: var(--display); font-weight: 800; font-size: 26px; fill: var(--fg); } .xrs { font-size: 13px; fill: var(--muted); font-weight: 700; }
.xtopics { display: grid; gap: 8px; margin-top: 8px; } .xtp { display: grid; grid-template-columns: 1fr auto 70px; gap: 10px; align-items: center; font-size: 15px; }
.xtb { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .xtb i { display: block; height: 100%; border-radius: 99px; }
.xrevs { display: grid; gap: 12px; }
.xrev { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); border-left-width: 6px; }
.xrev.ok { border-left-color: var(--accent); } .xrev.no { border-left-color: var(--sun); } .xrev.skip { border-left-color: var(--muted); }
.xrh { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.xmine { color: var(--sun-ink); } .xright { color: var(--accent-deep); }
.xwhy { justify-self: start; width: auto; padding: 0; min-height: 44px; }
.xwhyt { white-space: pre-line; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 15px; line-height: 1.6; }
/* ---------- welcome tour ---------- */
.tourcard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--sky-soft); border: 2px solid var(--sky-line); color: var(--fg); text-decoration: none; }
.tourcard .eico { font-size: 26px; } .tourcard small { display: block; color: var(--muted); font-size: 13px; }
.tour { display: grid; gap: 18px; min-height: calc(100dvh - 140px); grid-template-rows: auto 1fr auto auto; }
.tour-top { display: flex; align-items: center; justify-content: space-between; }
.tdots { display: flex; gap: 6px; } .tdots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .2s; } .tdots i.past { background: var(--accent-line); } .tdots i.on { width: 22px; background: var(--accent); }
.tart { display: grid; place-items: center; min-height: 230px; border-radius: 28px; background: var(--hs); border: 2px solid color-mix(in srgb, var(--h) 30%, transparent); overflow: hidden; animation: tin .35s ease; }
.tcopy { display: grid; gap: 8px; animation: tin .35s ease; } .tcopy h1 { font-size: 28px; margin: 0; } .tcopy p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--fg); }
.tnav { display: flex; gap: 10px; }
@keyframes tin { from { transform: translateY(10px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tart, .tcopy { animation: none !important; } }
/* tour examples: real lesson content in small cards */
.tart > div { width: min(300px, 100%); }
.tart { padding: 16px; }
.tx-card, .tx-page { display: grid; gap: 8px; background: var(--surface); border-radius: 18px; padding: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.08); font-size: 15px; text-align: left; }
.tx-eb { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tx-h { display: flex; gap: 8px; align-items: center; font-family: var(--display); font-weight: 800; font-size: 18px; } .tx-sec { flex: none; padding: 2px 8px; border-radius: 8px; background: var(--h); color: #fff; font-family: var(--body); font-size: 13px; }
.tx-p, .tx-q { margin: 0; line-height: 1.45; } .tx-q { font-weight: 700; } .tx-q.sm { font-weight: 800; color: var(--muted); font-size: 13px; }
.tx-def { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--hs); border-left: 4px solid var(--h); } .tx-def b { font-size: 18px; }
.tx-tags { display: flex; gap: 6px; flex-wrap: wrap; } .tx-tags span, .tx-pill { padding: 4px 10px; border-radius: 99px; background: var(--surface-2); font-size: 13px; font-weight: 800; }
.tx-chip { justify-self: start; padding: 3px 10px; border-radius: 99px; background: var(--hs); color: var(--fg); font-size: 13px; font-weight: 800; }
.tx-opts { display: flex; gap: 8px; } .tx-opts button { flex: 1; min-height: 46px; border-radius: 12px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); font: inherit; font-weight: 800; font-size: 18px; color: var(--fg); cursor: pointer; }
.tx-opts button[aria-pressed="true"] { border-color: var(--h); background: var(--hs); }
.tx-out { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-weight: 700; font-size: 14px; } .tx-out.ok { background: var(--accent-soft); color: var(--accent-deep); } .tx-out.no { background: var(--sun-soft); color: var(--sun-ink); } .tx-out.big { font-size: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.tx-grid { display: grid; gap: 3px; width: 150px; height: 150px; justify-self: center; } .tx-grid i { border-radius: 4px; background: var(--h); opacity: .85; }
.tart input[type=range] { width: 100%; min-height: 44px; accent-color: var(--h); }
.tx-step { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-size: 14px; line-height: 1.5; } .tx-step.no { background: var(--sun-soft); color: var(--sun-ink); font-weight: 700; } .tx-step.clue { background: var(--sky-soft); } .tx-step.ok { background: var(--accent-soft); } .tx-step.sm { font-size: 13px; color: var(--muted); }
.tx-lv > div:not(.tx-out) { display: grid; grid-template-columns: 52px 1fr; gap: 0 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); } .tx-lv b { grid-column: 2; font-size: 15px; } .tx-lv span:not(.tx-st) { font-size: 12px; color: var(--muted); font-weight: 800; } .tx-st { grid-row: span 2; color: var(--sun-deep); font-weight: 800; }
.tx-link { justify-self: start; min-height: 44px; padding: 0 12px; border-radius: 99px; border: 2px solid var(--sky-line); background: var(--sky-soft); color: var(--sky); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; } .tx-link:disabled { opacity: .7; }
.tx-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .tx-clock { padding: 3px 10px; border-radius: 99px; background: var(--sky-soft); color: var(--sky); font-weight: 800; font-size: 13px; white-space: nowrap; }
.tx-res { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 14px; } .tx-res i { grid-column: 1 / -1; height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--w), var(--surface-2) var(--w)); } .tx-res i.lo { background: linear-gradient(90deg, var(--sun) var(--w), var(--surface-2) var(--w)); }
.tx-map { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; } .tx-map button { height: 32px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; border: 2px solid var(--line); } .tx-map button.a { background: var(--sky); border-color: var(--sky); color: #fff; } .tx-map button.f { box-shadow: inset 0 0 0 3px var(--sun); } .tx-map button.c { outline: 3px solid var(--fg); }
.tx-bubble { max-width: 85%; padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: var(--accent-soft); font-size: 14px; } .tx-bubble.me { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--surface-2); }
.xtp .small { white-space: nowrap; } .xtp[hidden] { display: none; }
.updbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 20; white-space: nowrap; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 0; background: var(--fg); color: var(--bg); font: inherit; font-weight: 800; font-size: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; max-width: calc(100% - 32px); }
.tx-map button { background: var(--surface); color: var(--fg); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; height: auto; min-height: 36px; }
.tx-opts button.ok { border-color: var(--accent); background: var(--accent-soft); } .tx-opts button.no { border-color: var(--sun); background: var(--sun-soft); opacity: .7; }
.tx-res i { transition: background .5s ease; } #txstr { display: grid; gap: 6px; } #txstr[hidden] { display: none; }
/* ---------- puzzles and labs ---------- */
.pz { display: grid; gap: 10px; }
.pzgoal { padding: 8px 12px; border-radius: 12px; background: var(--sun-soft); border: 2px dashed var(--sun-line); font-weight: 800; }
.pzgoal .pzok { color: var(--accent-deep); margin-left: 6px; } .pz.won .pzgoal { background: var(--accent-soft); border-color: var(--accent-line); }
.pzbody { display: grid; gap: 10px; }
.pzmsg { min-height: 20px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 15px; white-space: pre-line; } .pzmsg:empty { display: none; }
.pzmsg.no { background: var(--sun-soft); color: var(--sun-ink); } .pzmsg.ok { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.pzrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pzrow .btn { width: auto; min-height: 44px; } .btn.small { font-size: 15px; padding: 0 14px; }
.pzchips { display: flex; flex-wrap: wrap; gap: 8px; }
.pzchips button { min-width: 46px; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); font: inherit; font-size: 19px; font-weight: 800; color: var(--fg); cursor: pointer; }
.pzchips button:disabled { opacity: .35; } .pznums button { background: var(--sky-soft); border-color: var(--sky-line); } .pzops button.uni { background: var(--accent-soft); border-color: var(--accent-line); }
.pztgt { display: flex; align-items: baseline; gap: 10px; } .pztgt b { font-family: var(--display); font-size: 34px; }
.pzexpr { min-height: 48px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; } .pzeq { color: var(--accent-deep); }
.pzbag { font-size: 15px; } .pzbag .pzcount { font-family: var(--display); font-size: 26px; } .pzcount.neg { color: var(--sun-deep); }
.pzgrid { display: grid; gap: 3px; width: 100%; max-width: 220px; aspect-ratio: 1; } .pzgrid i { border-radius: 3px; background: var(--sun); opacity: .9; } .pzgrid.big { justify-self: center; }
.pzgridwrap.over .pzgrid i { background: var(--sun-line); } .pzlayers { display: flex; gap: 6px; flex-wrap: wrap; } .pzlayers .pzgrid { width: 64px; }
.pzside { font-size: 18px; flex: 1; text-align: center; } .pzside b { color: var(--accent-deep); }
.pzin { min-height: 46px; width: 110px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font: inherit; font-size: 18px; }
.pzst2 { display: grid; gap: 8px; } .pzst2[hidden] { display: none; }
.pzsvg { width: 100%; max-width: 240px; justify-self: center; } .pzsvg.wide { max-width: 320px; }
.pzatom { display: grid; gap: 6px; } .pzread { display: grid; gap: 2px; text-align: center; font-size: 14px; } .pzread b { font-size: 17px; }
.pzctl { display: grid; gap: 6px; } .pzc { display: grid; grid-template-columns: 1fr 44px 40px 44px; align-items: center; gap: 6px; font-weight: 700; }
.pzc button { min-height: 44px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font: inherit; font-size: 20px; font-weight: 800; cursor: pointer; } .pzc b { text-align: center; font-size: 20px; }
.pzc.p span { color: #C9403E; } .pzc.n span { color: #6B766F; } .pzc.e span { color: var(--sky); }
.pzmol { display: grid; gap: 6px; } .pzformula { text-align: center; font-family: var(--display); font-size: 28px; font-weight: 800; min-height: 36px; }
.pzatoms button { display: inline-flex; align-items: center; gap: 6px; } .pzatoms i { width: 16px; height: 16px; border-radius: 99px; border: 1px solid #0003; }
.pzq.done .pz { opacity: 1; } .pzq.skipped .pz { opacity: .6; }
/* ---------- search ---------- */
.srbtn { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 15px; text-align: left; cursor: pointer; width: 100%; }
.srch { display: grid; gap: 10px; min-height: 60vh; }
.srchbox { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 6px 0 12px; border-radius: 14px; border: 2px solid var(--sky); background: var(--surface); }
.srchbox input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--fg); outline: none; }
.srres { display: grid; gap: 6px; }
.srr { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line); color: var(--fg); text-decoration: none; }
.srr b { display: block; font-size: 15px; } .srr small { display: block; color: var(--muted); font-size: 12px; } .srk { font-size: 20px; } .srta { font-weight: 600; color: var(--muted); }
.srch, .srch > *, .srr, .srr .grow { min-width: 0; } .srr .grow { overflow: hidden; } .srr b, .srr small { overflow-wrap: anywhere; }
.sheet .in > .srch { width: 100%; }

/* ---------- Sign-in sheet ---------- */
.auth { display: grid; gap: 14px; min-width: 0; }
.auth > *, .auth .ahead > div { min-width: 0; }
.auth .ahead p { overflow-wrap: anywhere; }
.auth .ahead { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.auth .ahead h2 { margin: 0; font-size: 24px; line-height: 1.2; }
.auth .abrand { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent), var(--accent-deep)); color: var(--accent-ink); font-family: var(--ethiopic); font-size: 24px; font-weight: 800; box-shadow: 0 6px 16px -6px var(--hi); }
.auth .aclose { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.gbtn { gap: 10px; }
.gbtn .glogo { flex: none; }
.auth .aor { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.auth .aor::before, .auth .aor::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.afield { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.afield .alabel { font-size: 14px; font-weight: 800; }
.afield .abox { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 6px 0 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--muted); transition: border-color .15s, box-shadow .15s; }
.afield .abox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); color: var(--accent-deep); }
.afield input { flex: 1 1 0; width: 100%; min-width: 0; min-height: 50px; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; }
.afield .aeye { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.afield .aeye[aria-pressed="true"] { color: var(--accent-deep); background: var(--accent-soft); }
.auth .aerr { color: var(--bad); min-height: 1.3em; margin: -4px 0; }
.auth .aerr:empty { min-height: 0; margin: 0; }
.auth .ahint { margin-top: -6px; }
.auth .btn.link { min-height: 44px; margin-top: -6px; }
.auth .alegal { text-align: center; }
.auth .alegal a { color: var(--muted); }

/* ---------- Welcome / sign-in (ET Learning Hub design, 2026-10-27) ---------- */
.hub { position: relative; overflow: hidden; border-radius: 22px; padding: 22px 20px 24px; color: #fff; display: grid; gap: 12px;
  background: linear-gradient(135deg, #065F46 0%, #064E3B 55%, #0D1F17 100%); }
.hubglow { position: absolute; border-radius: 50%; filter: blur(48px); pointer-events: none; }
.hubglow.a { width: 220px; height: 220px; right: -80px; top: -80px; background: rgba(245,184,12,.28); }
.hubglow.b { width: 240px; height: 240px; left: -90px; bottom: -110px; background: rgba(52,211,153,.22); }
.hub > *:not(.hubglow) { position: relative; }
.hubbrand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.hubchips { position: relative; height: 92px; }
.hubchip { position: absolute; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); animation: hubfloat 6s ease-in-out infinite; }
.hubchip.c1 { left: 0; top: 4px; } .hubchip.c2 { left: 40%; top: 0; } .hubchip.c3 { right: 0; top: 30px; }
.hubchip.c4 { left: 8%; top: 52px; font-family: var(--ethiopic); } .hubchip.c5 { left: 44%; top: 58px; } .hubchip.c6 { display: none; }
@keyframes hubfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .hubchip { animation: none; } }
.hubtag { margin: 0; font-family: var(--display); font-size: 28px; line-height: 1.15; font-weight: 700; text-wrap: balance; }
html[lang="am"] .hubtag { font-family: var(--ethiopic); font-weight: 800; font-size: 25px; line-height: 1.35; }
.hubsub { color: rgba(209,250,229,.92); font-size: 15px; max-width: 34ch; }
.hubcard { display: none; max-width: 280px; margin-top: 6px; padding: 14px; border-radius: 14px; background: #fff; color: #0F172A; box-shadow: 0 12px 30px rgba(0,0,0,.25); animation: hubfloat 6s ease-in-out .4s infinite; }
.hubcard .r { display: flex; justify-content: space-between; font-size: 12px; color: #64748B; } .hubcard .r b { color: #047857; }
.hubcard .tt { font-size: 14px; font-weight: 800; margin-top: 2px; }
.hubcard .hb { height: 8px; border-radius: 99px; background: #F1F5F9; margin-top: 10px; overflow: hidden; }
.hubcard .hb i { display: block; height: 100%; width: 68%; border-radius: 99px; background: linear-gradient(90deg, #10B981, #FBBF24); }
@media (min-width: 420px) { .hubchips { height: 110px; } .hubchip.c6 { display: block; right: 6%; top: 76px; } .hubcard { display: block; } }
.hubin { display: grid; gap: 10px; text-align: center; padding: 4px 4px 0; }
.hublang { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.hl { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; font-size: 14px; cursor: pointer; }
.hl[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.hl:disabled { opacity: .5; cursor: default; }
.hubwel { margin: 0; font-size: 24px; }
.hubg { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 56px; margin-top: 10px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 800; font-size: 17px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(15,23,42,.08); transition: transform .15s, box-shadow .15s; }
.hubg:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15,23,42,.12); }
.hubg .glogo { width: 22px; height: 22px; }
.hubcode { min-height: 44px; margin-top: -6px; color: var(--muted); font-weight: 700; }
.hubterms { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.hubterms a { color: inherit; }
/* pictures on any block (illo), picture options (@pic:id) and the chat block (2026-10-28) */
.illo { display: grid; justify-items: center; } .illo .pic { width: 132px; height: 132px; }
.opic { width: 88px; height: 88px; margin: 0 auto; } .pcap { display: block; text-align: center; font-size: 14px; margin-top: 2px; }
.opt .opic, .qb .opic { width: 96px; height: 96px; } .chip .opic { width: 64px; height: 64px; } .chip:has(.opic) { padding: 6px; display: inline-grid; }
.qo.pics { grid-template-columns: 1fr 1fr; } .qo.pics .qb, .opts.row2 .opt:has(.opic) { text-align: center; display: grid; justify-items: center; align-content: center; padding: 8px; }
.pl .opic, .pr .opic { width: 64px; height: 64px; }
.chat { display: grid; gap: 8px; background: var(--surface-2); border-radius: 18px; padding: 10px; min-width: 0; }
.chead { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .chead b { font-size: 16px; }
.cav { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--hs, var(--sky-soft)); color: var(--h, var(--sky)); font-weight: 900; font-size: 20px; overflow: hidden; }
.cav.pic { background: var(--hs, var(--sky-soft)); } .cav.pic svg { width: 130%; height: 130%; margin-top: 18%; }
.cav.sm { width: 32px; height: 32px; font-size: 16px; align-self: flex-end; }
.cauto { min-height: 44px; border: 2px solid var(--line); border-radius: 99px; background: var(--surface); padding: 0 12px; font-weight: 800; font-size: 13px; cursor: pointer; }
.cauto[aria-pressed="true"] { border-color: var(--h, var(--sky)); background: var(--hs, var(--sky-soft)); }
.clog { display: grid; gap: 8px; min-width: 0; }
.cmsg { display: flex; gap: 6px; align-items: flex-end; max-width: 100%; min-width: 0; animation: pop .25s ease; }
.cmsg.me { justify-content: flex-end; }
.cb { max-width: 78%; min-width: 0; padding: 8px 12px; border-radius: 18px; overflow-wrap: anywhere; display: grid; gap: 4px; }
.them .cb { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.me .cb { background: var(--hs, var(--sky-soft)); color: var(--fg); border: 2px solid var(--h, var(--sky)); border-bottom-right-radius: 6px; }
.me.wrong .cb { background: var(--surface); color: var(--muted); border: 2px dashed var(--line); text-decoration: line-through; }
.them.fix .cb { background: var(--sun-soft); border-color: var(--sun-line); }
.cn { font-size: 12px; font-weight: 900; color: var(--h, var(--sky)); }
.catt { width: 120px; height: 120px; background: var(--surface-2); border-radius: 12px; }
.cplay { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); font-size: 14px; cursor: pointer; display: none; }
.chat.voice .cplay { display: grid; place-items: center; }
.dots { display: inline-flex; gap: 4px; padding: 6px 2px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: cdot 1s infinite ease-in-out; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cdot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.cin { display: grid; gap: 8px; } .copts { display: grid; gap: 8px; }
.copt { min-height: 48px; border-radius: 18px; border: 2px solid var(--h, var(--sky)); background: var(--surface); color: var(--fg); font-weight: 700; text-align: left; padding: 8px 14px; cursor: pointer; }
.copt:has(.opic) { text-align: center; }
.copt.no { border-color: var(--line); color: var(--muted); text-decoration: line-through; }
.copt.hint { background: var(--hs, var(--sky-soft)); box-shadow: 0 0 0 3px var(--accent-line); }
.ctype { display: flex; gap: 8px; min-width: 0; } .ctype input { flex: 1; min-width: 0; min-height: 48px; border-radius: 24px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); padding: 0 16px; font: inherit; }
.csend { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--h, var(--sky)); color: var(--surface); font-size: 18px; cursor: pointer; }
.cend { display: grid; gap: 2px; justify-items: center; text-align: center; font-weight: 800; color: var(--muted); padding: 6px; } .cend b { color: var(--accent-deep); }
@media (prefers-reduced-motion: reduce) { .cmsg, .dots i { animation: none; } }
.chat[lang="am"] .ct, .chat[lang="am"] .copt { font-family: var(--ethiopic); } .chat[lang="am"] .ct, .chat[lang="am"] .copt, .chat[lang="om"] .ct, .chat[lang="om"] .copt { font-size: 1.1em; line-height: 1.6; }
/* PK-START language picture pack (app/pictures-lang.js): generated classes, colours from tokens */
.pk{fill:none;stroke:var(--fg);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.pk .Y{fill:var(--sun)}.pk .y{fill:var(--sun-soft)}.pk .G{fill:var(--accent)}.pk .g{fill:var(--accent-soft)}.pk .B{fill:var(--sky)}.pk .b{fill:var(--sky-soft)}.pk .R{fill:var(--coral)}.pk .r{fill:var(--coral-soft)}.pk .V{fill:var(--violet)}.pk .v{fill:var(--violet-soft)}.pk .K{fill:var(--skin)}.pk .k{fill:var(--skin-2)}.pk .H{fill:var(--hair)}.pk .W{fill:var(--cloth)}.pk .S{fill:var(--surface)}.pk .T{fill:var(--surface-2)}.pk .M{fill:var(--muted)}.pk .F{fill:var(--fg)}.pk .E{fill:var(--earth)}.pk .D{fill:var(--sun-deep)}.pk .lK{stroke:var(--skin);stroke-width:6}.pk .lk{stroke:var(--skin-2);stroke-width:6}.pk .lF{stroke:var(--fg);stroke-width:6}.pk .lB{stroke:var(--sky);stroke-width:6}.pk .lM{stroke:var(--muted);stroke-width:6}.pk .lE{stroke:var(--earth);stroke-width:6}.pk .lG{stroke:var(--accent);stroke-width:6}.pk .lY{stroke:var(--sun);stroke-width:6}.pk .lR{stroke:var(--coral);stroke-width:6}.pk .lW{stroke:var(--cloth);stroke-width:6}.pk .lV{stroke:var(--violet);stroke-width:6}.pk .lH{stroke:var(--hair);stroke-width:6}.pk .x{stroke:none}.pk .t{stroke-width:1.5}.pk .e{stroke-width:3.2}.pk .pt{stroke:var(--sun);stroke-width:8;stroke-dasharray:3 2.2}.pk .dt{stroke:var(--sun-deep);stroke-width:2.6;stroke-dasharray:0 6}.pk .w{stroke:var(--sky);stroke-width:2}
/* PK-END */

/* Ask (AI helper) */
.asksheet .grab { width: 40px; height: 5px; border-radius: 99px; background: var(--line); justify-self: center; }
.asksheet .askq { border-inline-start: 3px solid var(--line); padding-inline-start: 8px; }
.asklog { display: grid; gap: 8px; max-height: 48vh; overflow-y: auto; }
.askb { max-width: 92%; padding: 10px 12px; border-radius: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.askb.me { justify-self: end; background: var(--sky-soft, var(--surface)); border: 2px solid var(--line); }
.askb.ai { justify-self: start; background: var(--surface); border: 2px solid var(--line); }
.askb.wait .askt { animation: askpulse 1s infinite alternate; }
.askb.err { border-style: dashed; }
@keyframes askpulse { from { opacity: .4; } to { opacity: 1; } }
.askfb { display: flex; gap: 4px; margin-top: 6px; }
.askfb .iconbtn { width: 44px; height: 44px; }
.askfb .iconbtn.on { outline: 2px solid var(--sky); }
.askrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.askrow textarea { min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; resize: vertical; }
.askrow textarea:focus { outline: 2px solid var(--sky); }
.askrow .btn { width: 52px; min-height: 48px; padding: 0; }
.askbtn { justify-self: start; width: auto; min-height: 44px; padding-inline: 0; }
.askchips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.askchips::-webkit-scrollbar { display: none; }
.chipbtn { flex: none; min-height: 44px; padding: 0 14px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; font-size: .9rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.chipbtn:active { transform: scale(.97); }
.chipbtn.done { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.asklog { max-height: 42vh; }
/* tap-to-highlight */
.book [data-text] { cursor: pointer; border-radius: 6px; transition: background-color .15s; }
.book [data-text].hi { background: color-mix(in srgb, var(--sun) 45%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 45%, transparent); }
.hibar { position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 99px; background: var(--fg); box-shadow: 0 10px 28px rgba(0,0,0,.3); max-width: calc(100vw - 24px); animation: pop .2s ease; }
.hibar .hib { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 0; background: var(--bg); color: var(--fg); font: inherit; font-weight: 800; white-space: nowrap; cursor: pointer; }
.hibar .hix { width: 44px; height: 44px; background: transparent; color: var(--bg); border: 0; }
@media (prefers-reduced-motion: reduce) { .hibar { animation: none; } }
/* chat page */
.askhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.askhead .btn { width: auto; }
.askpage .asklog { max-height: none; overflow: visible; }
.askpage .askrow { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 5; background: var(--bg); padding-block: 6px; }

/* ---------- exam UI polish (shared: question card, options, keycaps, map details) ---------- */
.xqcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); display: grid; gap: 14px; }
.xopt { transition: border-color .15s ease, background .15s ease; }
.xopt:hover { border-color: var(--sky); }
.xmapbar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.xmapbar i { display: block; height: 100%; width: 0; background: var(--sky); border-radius: 99px; transition: width .3s ease; }
.xmapsum { display: grid; gap: 6px; }
.xgrid button .xlett { position: absolute; bottom: 2px; right: 4px; font-size: 9px; font-style: normal; font-weight: 800; line-height: 1; }
.xkbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--surface-2); font: inherit; font-size: 12px; font-weight: 800; line-height: 1; color: var(--fg); }
.xkeylist { display: grid; gap: 10px; }
.xkeylist > div { display: flex; align-items: center; gap: 10px; }
.xfigd { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); justify-items: center; }
.xtable { width: auto; min-width: 220px; border-collapse: collapse; font-size: 14px; }
.xtable th, .xtable td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.xtable th { background: var(--surface-2); font-weight: 800; }
.xfigd svg { width: 100%; max-width: 300px; height: auto; }
.xhist-t { font-size: 11px; fill: var(--fg); font-weight: 800; }
.xhisl { font-size: 10px; fill: var(--muted); font-weight: 700; }

/* ---------- desktop exam lab layout (additive @media layer, phone flow untouched) ---------- */
.xkeys { display: none; }
@media (min-width: 1024px) {
  #app:has(.xdesk) { max-width: none; margin: 0; padding: 0; display: block; }
  /* quiet top bar */
  .xdt { position: fixed; top: 0; left: 0; right: 0; z-index: 7; background: var(--surface); border-bottom: 2px solid var(--line); box-shadow: var(--shadow); }
  .xdt-in { display: flex; align-items: center; gap: 14px; padding: 10px 24px; }
  .xdt .xtt { min-width: 0; }
  #xdt-title { font-weight: 800; font-size: 17px; line-height: 1.4; padding-block: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #xdt-sec { margin-top: 1px; padding-block: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .xautosave { flex: none; font-size: 13px; font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 99px; padding: 4px 12px; white-space: nowrap; transition: opacity .2s ease; }
  .xautosave.busy { opacity: .65; }
  .xdt .clock { font-size: 15px; }
  .xfinish { flex: none; min-height: 44px; padding: 0 20px; border-radius: 99px; border: 2px solid var(--accent); background: transparent; color: var(--accent); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
  .xfinish:hover { background: var(--accent-soft); }
  .xprogress { height: 3px; background: var(--line); }
  .xprogress i { display: block; height: 100%; width: 0; background: var(--sky); transition: width .3s ease; }
  /* two-pane layout */
  .xdesk { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; padding: 92px 32px 48px; min-height: 100dvh; }
  .xleft { min-width: 0; }
  .xright { position: sticky; top: 92px; }
  .xleft { display: grid; gap: 14px; }
  /* question pane: larger text, full-row options */
  .xdesk .xq { font-size: 24px; line-height: 1.5; }
  .xdesk .xnum { width: 44px; height: 44px; font-size: 20px; }
  .xdesk .xopts { gap: 12px; }
  .xdesk .xopt { min-height: 60px; padding: 12px 18px; font-size: 18px; }
  .xdesk .xopt .xl { width: 38px; height: 38px; font-size: 17px; }
  .xdesk .xflag { font-size: 15px; }
  .xdesk .xfig { font-size: 17px; }
  .xkeys { font-size: 13px; color: var(--muted); padding-top: 4px; }
  /* palette */
  .xpal { display: grid; gap: 12px; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }
  .xpalh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .xpal .xgrid { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
  .xpal .xgrid button { min-height: 38px; border-radius: 10px; font-size: 14px; }
  .xpalc { display: flex; flex-wrap: wrap; gap: 8px; }
  /* review dialog jump links */
  .xrj { display: grid; gap: 6px; }
  .xrj b { font-size: 14px; color: var(--muted); }
  .xjumps { display: flex; flex-wrap: wrap; gap: 6px; }
  .xjump { min-width: 44px; min-height: 44px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface-2); color: var(--fg); font: inherit; font-weight: 800; cursor: pointer; }
  .xjump:hover { border-color: var(--sky); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .xkeys { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
  .xk { display: inline-flex; align-items: center; gap: 5px; }
  .xk .xkl { color: var(--muted); }
  .xkh { width: 26px; height: 26px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; }
  .xkh:hover { border-color: var(--sky); }
}

/* ---------- Ask: structured answers (steps, points, answer / tip / key idea / your turn boxes) ---------- */
.askb.ai .askt { display: grid; gap: 8px; }
.askb.ai .askt p { margin: 0; }
.asksteps, .askpts { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.asksteps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.askn { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; background: var(--sky); color: #fff; font-size: 13px; font-weight: 800; }
.askpts li { position: relative; padding-left: 16px; }
.askpts li::before { content: ''; position: absolute; left: 3px; top: .6em; width: 6px; height: 6px; border-radius: 99px; background: var(--sky); }
.askbox { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; border-radius: 12px; padding: 8px 10px; border: 1.5px solid var(--line); background: var(--surface); }
.askbi { font-size: 18px; line-height: 1.3; }
.askbox.ans { border-color: var(--accent-line); background: var(--accent-soft); font-weight: 700; }
.askbox.tip { border-color: var(--sun); background: var(--sun-soft, var(--surface-2)); }
.askbox.key { border-color: var(--violet); background: var(--violet-soft); }
.askbox.try { border-style: dashed; border-color: var(--sky); background: var(--sky-soft, var(--surface)); font-weight: 700; }

/* ---------- My strengths (#strengths) ---------- */
.stgcard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--violet-soft); border: 2px solid color-mix(in srgb, var(--violet) 35%, transparent); color: var(--fg); text-decoration: none; }
.stgcard .eico { font-size: 26px; } .stgcard small { display: block; color: var(--muted); font-size: 13px; }
.stg { gap: 16px; }
.stgsub { display: grid; gap: 12px; padding: 14px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 3px 0 color-mix(in srgb, var(--h) 30%, transparent); }
.stghead { display: flex; align-items: center; gap: 12px; }
.stg-ring { width: 64px; height: 64px; flex: none; }
.stg-rt { font-size: 14px; font-weight: 800; fill: var(--fg); }
.stgsn { font-size: 20px; }
.stgblk { display: grid; gap: 8px; }
.stglbl { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.stglbl.good { color: var(--accent-deep); } .stglbl.weak { color: var(--coral); }
.stgrow { display: grid; grid-template-columns: minmax(0, 1fr) 72px 44px; gap: 8px; align-items: center; }
.stgrow .pbar { margin-top: 0; height: 10px; }
.stgname { min-width: 0; } .stgname b { display: block; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; } .stgname small { color: var(--muted); font-size: 12px; }
.stgpct { font-size: 13px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.stgweak { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: var(--coral-soft); }
.stgpr { justify-self: start; width: auto; min-height: 44px; }
.stgexs { display: grid; gap: 8px; }
.stgex { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--sun-soft); border: 2px solid var(--sun-line); color: var(--fg); text-decoration: none; min-height: 56px; }
.stgex-t { font-weight: 700; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.stgex-bars { display: flex; align-items: flex-end; gap: 3px; height: 32px; }
.stgex-bars i { flex: 1; background: var(--sun); border-radius: 3px 3px 0 0; min-width: 6px; }
.stgex-s { font-size: 13px; white-space: nowrap; }
.stgempty { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 28px 18px; }
.stgbig { font-size: 48px; }
@media (min-width: 900px) { .stg { max-width: 760px; margin-inline: auto; } .stgrow { grid-template-columns: minmax(0, 1fr) 160px 44px; } }

/* ---------- Layout: cards (bite-sized) mode for chapters, and the first-time choice (2026-10-31) ---------- */
.book.cards { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.book.cards > .hero, .book.cards .sl:not(.on), .book.cards .sec:not(:has(.sl.on)) { display: none; }
.book.cards .sl.on { animation: slin .22s ease-out; }
@keyframes slin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .book.cards .sl.on { animation: none; } }
.cardbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--bg); border-top: 2px solid var(--line); }
.cardbar .btn { flex: 1; width: auto; min-height: 48px; }
.cardbar .btn[hidden] { display: none; }
.cardbar .btn:disabled { opacity: .4; }
.cardbar .cnum { flex: none; min-width: 64px; font-size: 14px; white-space: nowrap; text-align: center; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 820px) { .cardbar { left: 50%; transform: translateX(-50%); max-width: 760px; border: 2px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; } }
body:has(.cardbar) .fbfab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.lyask { display: grid; gap: 12px; }
.lyask h2 { margin: 0; } .lyask p { margin: 0; }
.lyopt { display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; min-height: 84px; padding: 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; }
.lyopt:hover, .lyopt:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.lyopt b { display: block; font-size: 17px; } .lyopt small { display: block; color: var(--muted); }
.lyprev { flex: none; width: 46px; height: 62px; border-radius: 8px; border: 2px solid var(--line); background: var(--surface-2); display: grid; gap: 3px; padding: 5px; align-content: start; }
.lyprev i { display: block; height: 6px; border-radius: 3px; background: var(--accent-line); }
.lyprev.cards i { height: 34px; background: var(--accent-soft); border: 2px solid var(--accent-line); }
.lyprev.cards b { font-size: 10px; text-align: center; color: var(--muted); }

/* anim block: short narrated animations (app/anim.js) */
.animblk { display: grid; gap: 10px; }
.clipbox { aspect-ratio: 16 / 9; width: 100%; border-radius: 14px; overflow: hidden; background: var(--sky-soft); border: 2px solid var(--sky-line); margin-bottom: 10px; display: grid; place-items: center; }
.clipbox video { width: 100%; height: 100%; display: block; background: var(--fg); object-fit: contain; }
.clipbtn { width: 100%; height: 100%; min-height: 44px; display: grid; place-content: center; justify-items: center; gap: 6px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.clipico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: var(--sky); color: var(--accent-ink); }
.anhost { display: grid; gap: 8px; }
.anposter { display: grid; justify-items: center; gap: 10px; padding: 22px 16px; border-radius: 16px; background: var(--sky-soft); border: 2px solid var(--sky-line); }
.anposter .anicon { font-size: 40px; line-height: 1; }
.anposter .btn { max-width: 300px; }
.anstage { border-radius: 14px; overflow: hidden; border: 2px solid var(--line); background: #F7F9FC; }
.ancv { display: block; width: 100%; height: 240px; touch-action: pan-y; }
.anbar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.anbar i { display: block; height: 100%; width: 0; background: var(--accent); }
.ancap { margin: 0; min-height: 3.2em; font-size: 16px; line-height: 1.55; font-weight: 600; }
.anctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.anb { min-width: 48px; min-height: 48px; padding: 0 14px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 12px; background: var(--surface); color: var(--fg); font-weight: 800; font-size: 17px; cursor: pointer; }
.anb[aria-pressed="true"] { background: var(--sky-soft); border-color: var(--sky); }
.antm { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.antry { display: grid; gap: 8px; margin-top: 4px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.antt { margin: 0; font-weight: 800; }
.anrow { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.anrow .anl { min-width: 46px; font-weight: 700; }
.anrow input { flex: 1; min-width: 0; accent-color: var(--accent); }
.anrow .anv2 { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.anres { margin: 0; font-weight: 700; color: var(--accent-deep); overflow-wrap: anywhere; }
.anafter { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-weight: 600; }

/* ---------- Titles and badges (home card, #titles page, celebration, share sheet) ---------- */
.rkcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--sun-soft); border: 2px solid var(--sun-line); color: var(--fg); text-decoration: none; }
.rkcard svg { flex: none; }
.rkcard b { display: block; font-size: 18px; font-family: var(--ethiopic); }
.rkcard small { display: block; color: var(--muted); font-size: 13px; font-weight: 700; }
.rkcard .pbar { margin: 6px 0 4px; }
.rkpage { display: grid; gap: 14px; }
.rkhero { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 18px 16px; border-radius: 22px; background: var(--sun-soft); border: 2px solid var(--sun-line); }
.rkhero h1 { font-family: var(--ethiopic); font-size: 30px; margin: 0; }
.rksub { color: var(--muted); font-weight: 700; }
.rkstat { font-size: 16px; margin-top: 4px; }
.rkprog { width: 100%; max-width: 360px; } .rkprog small { display: block; margin-top: 6px; color: var(--muted); font-weight: 700; font-size: 13px; }
.rkhero .btn { margin-top: 8px; }
.rkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.rkb { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; text-align: center; }
.rkb.on { border-color: var(--sun-line); cursor: pointer; }
.rkb:disabled { opacity: .7; }
.rkb b { font-family: var(--ethiopic); font-size: 15px; } .rkb small { color: var(--muted); font-size: 12px; } .rkb .rkat { font-weight: 800; }
.rkseals { display: grid; gap: 8px; }
.rkseal { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--sun-line); background: var(--surface); color: var(--fg); font: inherit; text-align: left; }
.rkseal small { display: block; color: var(--muted); font-weight: 700; }
.rkcele { text-align: center; display: grid; gap: 6px; justify-items: center; }
.rkcele h2 { font-family: var(--ethiopic); font-size: 30px; margin: 0; }
.rkcele .btn { width: 100%; }
.shsheet { display: grid; gap: 12px; }
.shimg { width: 100%; max-width: 150px; justify-self: center; border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.15); }
.shbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shbtns .btn { text-align: center; }
.shsign { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sky-soft); border: 2px solid var(--sky-line); color: var(--fg); text-decoration: none; }
.shsign small { display: block; color: var(--muted); font-size: 13px; }
.shlink { display: grid; gap: 4px; }
.shlink input { width: 100%; padding: 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; font-size: 14px; }

/* Abebe the guide (app/guide.js) */
.gdock { position: fixed; left: max(8px, env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 7; display: flex; align-items: flex-end; gap: 4px; max-width: calc(100% - 84px); pointer-events: none; }
body:has(.cardbar) .gdock { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.gdock > * { pointer-events: auto; }
.gav { width: 84px; height: 108px; padding: 0; border: 0; background: transparent; cursor: pointer; flex: none; }
.gav canvas { display: block; }
.gbub { position: relative; margin-bottom: 52px; padding: 12px 14px 12px; min-width: 150px; max-width: 250px; border-radius: 16px 16px 16px 4px; background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--shadow); animation: gpop .25s ease-out; }
@keyframes gpop { from { transform: scale(.85) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.gtx { margin: 0 34px 0 0; min-height: 1.4em; font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--fg); }
.gtop { position: absolute; top: 4px; right: 4px; display: flex; flex-direction: column; gap: 2px; }
.gtop button { width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; font-size: 15px; cursor: pointer; color: var(--muted); }
.gbtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gbtns:empty { display: none; }
.gb { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); color: var(--fg); font-weight: 800; cursor: pointer; }
.gb.main { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-deep); }
@media (prefers-reduced-motion: reduce) { .gbub { animation: none; } }

/* beta notice (home, dismissible) */
.betacard { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--sun-soft); border: 2px solid var(--sun-line); }
.betacard small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.betachip { flex: none; font-size: 11px; font-weight: 900; letter-spacing: .08em; padding: 4px 8px; border-radius: 8px; background: var(--sun); color: var(--on-sun); margin-top: 2px; }
.betabtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.betabtns .btn { min-height: 44px; }

/* ---------- Home v2 "Axum to orbit" (preview, ?home2=1) ---------- */
.h2date { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: -6px; }
.h2geez { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--sun-ink); letter-spacing: .02em; }
.h2plain { font-size: 12px; color: var(--muted); font-weight: 700; }
.h2hero { position: relative; display: block; border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff; min-height: 260px; background: #0B1B3F; box-shadow: 0 6px 0 #071430; }
.h2hero:active { transform: translateY(2px); box-shadow: 0 3px 0 #071430; }
.h2sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.h2s { fill: #8FA3C8; opacity: .55; }
.h2s.half { fill: #FFE7A3; opacity: .85; animation: h2tw 4s ease-in-out infinite; }
.h2s.on { fill: #FFD25A; opacity: 1; filter: drop-shadow(0 0 3px #FFD25A); animation: h2tw 3s ease-in-out infinite; }
@keyframes h2tw { 50% { opacity: .55; } }
.h2orbit { fill: none; stroke: #9EC1FF; stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .55; }
.h2glow { fill: #9EC1FF; opacity: .18; animation: h2pulse 2.4s ease-in-out infinite; }
@keyframes h2pulse { 50% { opacity: .45; } }
.h2sat { animation: h2bob 5s ease-in-out infinite; }
@keyframes h2bob { 50% { translate: 0 -3px; } }
.h2climb { fill: #FFD25A; filter: drop-shadow(0 0 2px #FFD25A); }
.h2over { position: relative; display: grid; gap: 6px; padding: 18px 16px 16px 92px; min-height: 260px; align-content: end; background: linear-gradient(180deg, transparent 30%, rgba(7, 14, 34, .72) 100%); }
.h2over .eyebrow { color: #FFD25A; opacity: 1; }
.h2over .ht { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.15; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.h2over .hs { font-size: 14px; opacity: .92; }
.h2over .btn { justify-self: start; }
.h2orbitlbl { font-size: 12px; font-weight: 800; color: #CFE0FF; }
.h2fact { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--sun-soft); border: 2px dashed var(--sun-line); }
.h2fact b { font-size: 13px; color: var(--sun-ink); text-transform: uppercase; letter-spacing: .05em; }
.h2fact p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; }
.h2fico { flex: none; font-family: var(--display); font-weight: 900; font-size: 13px; padding: 8px 6px; border-radius: 10px; background: var(--sun); color: var(--on-sun); white-space: nowrap; }
.h2tile { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px; min-height: 140px; border-radius: 20px; text-decoration: none; color: var(--fg);
  background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--h, #C9A27A) 14%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, #C9A27A 22%, var(--surface)), color-mix(in srgb, #8B6B4A 14%, var(--surface)));
  border: 2px solid color-mix(in srgb, #8B6B4A 30%, transparent); box-shadow: 0 3px 0 color-mix(in srgb, #8B6B4A 45%, transparent); }
.h2tile:active { transform: translateY(2px); box-shadow: none; }
.h2cross { position: relative; width: 54px; height: 54px; display: grid; place-items: center; }
.h2cross svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.h2cross svg path { fill: color-mix(in srgb, #8B6B4A 70%, var(--h, #8B6B4A)); }
.h2cross svg path.in { fill: none; stroke: #FFD25A; stroke-width: .8; opacity: .9; }
.h2cross b { position: relative; color: #fff; font-size: 19px; font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.h2tile .sname { font-family: var(--display); font-weight: 700; font-size: 16px; }
.h2tile .smeta { font-size: 12px; color: var(--muted); font-weight: 700; }
.h2circ { margin-top: auto; height: 6px; border-radius: 6px; background: color-mix(in srgb, #8B6B4A 22%, transparent); overflow: hidden; }
.h2circ i { display: block; height: 100%; border-radius: 6px; background: repeating-linear-gradient(90deg, #E8B53A 0 10px, #FFD25A 10px 12px); box-shadow: 0 0 6px #FFD25A; }
@media (prefers-reduced-motion: reduce) { .h2s, .h2glow, .h2sat { animation: none !important; } }

/* contact */
.cthead h1 { margin: 0 0 4px; font-size: 26px; } .cthead p { margin: 0; }
.ctrow small { word-break: break-word; }
.ctschool { gap: 4px; background: var(--accent-soft); border-color: transparent; }
a.fbcard { text-decoration: none; color: var(--fg); }
.ctco { display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 4px; }

/* welcome page in the Axum-to-orbit style */
.hub.h2wel { padding: 0; min-height: 430px; background: #0B1B3F; display: block; }
.hub.h2wel > .h2sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.h2welin { position: relative; display: grid; gap: 10px; padding: 20px 18px 22px 104px; min-height: 430px; align-content: space-between; background: linear-gradient(180deg, rgba(7,14,34,.15) 0%, rgba(7,14,34,.05) 40%, rgba(7,14,34,.78) 100%); }
.h2welin .hubbrand { margin-left: -86px; }
.h2weldate { font-size: 12px; font-weight: 700; color: #CFE0FF; }
.h2weldate .h2geez { color: #FFD25A; font-size: 14px; }
.h2welin .hubtag { margin-top: auto; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.h2welin .hubsub { color: #E6EEFF; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.h2welline { margin: 0; font-size: 13px; font-weight: 800; color: #FFD25A; }

/* ---------- Landing page ---------- */
.lphero { position: relative; overflow: hidden; border-radius: 26px; background: linear-gradient(180deg, #0B1B3F 0%, #0B1B3F 52%, #10224A 100%); color: #fff; margin: -4px 0 0; display: grid; }
.lpbrand { position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px; }
.lpscene { position: relative; height: 300px; }
.lpscene .h2sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.lpchurch { position: absolute; right: 0; bottom: 0; width: 52%; max-width: 300px; }
.lpscene::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(180deg, transparent, #10224A); }
.lpglyphs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.lpg { position: absolute; bottom: -30px; font-family: var(--ethiopic); font-size: 20px; font-weight: 800; color: #FFD25A; opacity: 0; animation: lprise 12s linear infinite; }
.lpg::after { content: attr(data-b); position: absolute; left: 0; top: 0; font-family: ui-monospace, monospace; font-size: 15px; color: #9EC1FF; opacity: 0; animation: inherit; animation-name: lpbin; }
@keyframes lprise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .8; } 45% { opacity: .8; color: #FFD25A; } 60% { color: transparent; } 100% { transform: translateY(-640px); opacity: 0; color: transparent; } }
@keyframes lpbin { 0%, 48% { opacity: 0; } 62% { opacity: .9; } 100% { opacity: 0; } }
.lpin { position: relative; z-index: 2; display: grid; gap: 16px; padding: 4px 18px 18px; }
.lpmid { display: grid; gap: 10px; }
.lpdate { font-size: 12px; font-weight: 700; color: #CFE0FF; }
.lptag { margin: 0; font-family: var(--display); font-size: 34px; line-height: 1.08; font-weight: 800; text-wrap: balance; }
.lpsub { margin: 0; font-size: 15.5px; line-height: 1.45; color: #DCE6FA; max-width: 36ch; }
.lpgo { justify-self: stretch; min-height: 56px; padding: 0 22px; border: 0; border-radius: 16px; font: inherit; font-weight: 900; font-size: 18px; color: #2A1B00; background: linear-gradient(180deg, #FFD25A, #F5A400); box-shadow: 0 5px 0 #B87900, 0 10px 30px rgba(245,164,0,.35); cursor: pointer; margin-top: 4px; }
.lpgo:active { transform: translateY(3px); box-shadow: 0 2px 0 #B87900; }
.lpstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lpstats span { display: grid; gap: 2px; padding: 10px 8px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(4px); font-size: 11px; font-weight: 700; color: #CFE0FF; text-align: center; }
.lpstats b { font-family: var(--display); font-size: 20px; color: #fff; }
.lpsec { display: grid; gap: 10px; margin-top: 26px; }
.lpsec h2 { margin: 0; font-size: 24px; }
.lpsec > p { margin: -4px 0 4px; }
.lpsubj { display: flex; flex-wrap: wrap; gap: 8px; }
.lps { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--hs); font-weight: 800; font-size: 14px; }
.lps i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--h); color: #fff; font-style: normal; font-size: 15px; }
.lpgrades { display: flex; flex-wrap: wrap; gap: 6px; }
.lpgrades span { padding: 4px 10px; border-radius: 8px; border: 1.5px dashed var(--line); font-size: 12px; font-weight: 800; color: var(--muted); }
.lptime { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; margin: 0 -16px; padding-inline: 16px; }
.lpt { flex: 0 0 168px; scroll-snap-align: start; display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 18px; background: linear-gradient(170deg, #12264F, #0B1B3F); color: #E6EEFF; position: relative; }
.lpt::before { content: ''; position: absolute; left: 14px; right: -10px; top: 34px; height: 2px; background: repeating-linear-gradient(90deg, #FFD25A 0 6px, transparent 6px 10px); opacity: .5; }
.lpt:last-of-type::before { display: none; }
.lpt svg { width: 40px; height: 40px; color: #FFD25A; position: relative; background: #0B1B3F; border-radius: 12px; padding: 4px; }
.lpt small { font-size: 11px; font-weight: 800; color: #9EC1FF; text-transform: uppercase; letter-spacing: .04em; }
.lpt b { font-family: var(--display); font-size: 15px; line-height: 1.2; color: #fff; }
.lpt span { font-size: 12.5px; line-height: 1.35; opacity: .88; }
.lpt.now { background: linear-gradient(170deg, #F5A400, #B87900); color: #2A1B00; }
.lpt.now svg { color: #fff; background: rgba(0,0,0,.15); } .lpt.now small { color: #2A1B00; } .lpt.now b { color: #2A1B00; }
.lpthink { display: grid; gap: 10px; }
.lpk { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); }
.lpmed { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-family: var(--ethiopic); font-size: 24px; font-weight: 900; color: #2A1B00; background: radial-gradient(circle at 35% 30%, #FFE7A3, #F5A400 60%, #B87900); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 3px 0 #8A5A00; }
.lpk b { font-family: var(--display); font-size: 16px; } .lpk small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--sun-ink); }
.lpk p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.lpfeat { grid-template-columns: 1fr; }
.lpfeat > div { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--accent-soft); }
.lpfeat span { grid-row: span 2; font-size: 28px; } .lpfeat b { font-size: 15px; } .lpfeat small { color: var(--muted); font-size: 13px; }
#lpsign { margin-top: 26px; scroll-margin-top: 12px; }
@media (min-width: 640px) { .lpthink { grid-template-columns: 1fr 1fr; } .lpfeat { grid-template-columns: repeat(3, 1fr); } .lpfeat > div { grid-template-columns: 1fr; text-align: center; } .lpfeat span { grid-row: auto; } }
@media (prefers-reduced-motion: reduce) { .lpg, .lpg::after { animation: none !important; opacity: 0; } }

/* landing: bilingual captions, how-it-works mocks, scroll reveal */
.lpcap { display: block; font-family: var(--ethiopic), var(--body, inherit); font-size: .56em; font-weight: 700; opacity: .72; margin-top: 4px; letter-spacing: 0; line-height: 1.35; }
.lptag .lpcap { font-size: .5em; color: #FFD25A; opacity: .95; }
.lph { margin: 0; font-size: 24px; line-height: 1.15; }
.lph .lpcap { color: var(--sun-ink); opacity: 1; }
.lpsubp { margin: 2px 0 4px; } .lpsubp .lpcap { font-size: .95em; font-weight: 600; margin-top: 2px; }
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }
.lphow { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.lpstep { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); }
.lpstx { display: grid; gap: 2px; }
.lpstx b { font-family: var(--display); font-size: 17px; line-height: 1.2; }
.lpstx .lpcap { font-size: 13px; color: var(--sun-ink); opacity: 1; margin-top: 0; }
.lpstx p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.lpnum { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 13px; margin-bottom: 2px; }
.lpmock { width: 116px; height: 150px; border-radius: 18px; padding: 8px; background: #0B1B3F; box-shadow: inset 0 0 0 3px #1F3F7A; position: relative; overflow: hidden; }
.mk { position: relative; height: 100%; border-radius: 12px; background: #F6F9F3; color: #172017; display: grid; align-content: center; gap: 6px; padding: 8px; font-size: 12px; text-align: center; }
.mk b { font-size: 12.5px; }
.mkg span, .mkl span { display: block; padding: 6px; border-radius: 9px; background: #fff; border: 1.5px solid #D6E2CF; font-weight: 800; }
.mkg span.on { animation: mkpick 4s ease-in-out infinite; }
@keyframes mkpick { 0%, 45% { background: #fff; border-color: #D6E2CF; color: #172017; } 55%, 100% { background: #0B6B4F; border-color: #0B6B4F; color: #fff; } }
.mkfinger { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(245,164,0,.75); box-shadow: 0 0 0 5px rgba(245,164,0,.25); left: 70%; top: 90%; animation: mkfing 4s ease-in-out infinite; }
@keyframes mkfing { 0% { left: 75%; top: 95%; opacity: 0; } 20% { opacity: 1; } 48% { left: 55%; top: 74%; transform: scale(1); } 52% { transform: scale(.7); } 60% { transform: scale(1); opacity: 1; } 100% { left: 55%; top: 74%; opacity: 0; } }
.mkl span.r { animation: mkright 4.5s ease infinite; }
@keyframes mkright { 0%, 35% { background: #fff; border-color: #D6E2CF; } 45%, 100% { background: #DDF5E6; border-color: #129B60; color: #0B6B4F; } }
.mkstamp { position: absolute; right: 8px; bottom: 30px; font-style: normal; font-size: 22px; font-weight: 900; color: #129B60; opacity: 0; animation: mkstamp 4.5s ease infinite; }
@keyframes mkstamp { 0%, 40% { opacity: 0; transform: scale(2); } 50% { opacity: 1; transform: scale(1); } 90% { opacity: 1; } 100% { opacity: 0; } }
.mkstar { position: absolute; left: 0; right: 0; top: 6px; font-style: normal; font-weight: 900; color: #B87900; opacity: 0; animation: mkstar 4.5s ease infinite; }
@keyframes mkstar { 0%, 48% { opacity: 0; transform: translateY(10px); } 60% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.mke svg { width: 56px; height: 56px; margin: 0 auto; transform: rotate(-90deg); }
.mke .bg { fill: none; stroke: #E3EADF; stroke-width: 5; }
.mke .fg { fill: none; stroke: #F5A400; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 113; animation: mkring 6s linear infinite; }
@keyframes mkring { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 113; } }
.mke b { font-size: 16px; font-variant-numeric: tabular-nums; } .mke span { color: #5B6B5E; font-weight: 700; }
.mka { align-content: start; text-align: left; gap: 5px; }
.mka .me { justify-self: end; padding: 5px 8px; border-radius: 10px 10px 2px 10px; background: #0B6B4F; color: #fff; font-weight: 700; font-size: 11px; }
.mka .dots { display: flex; gap: 3px; padding: 6px 8px; border-radius: 10px; background: #fff; width: max-content; animation: mkdots 5s steps(1) infinite; }
.mka .dots i { width: 5px; height: 5px; border-radius: 50%; background: #9AA89C; animation: mkbounce 1s ease-in-out infinite; } .mka .dots i:nth-child(2) { animation-delay: .15s; } .mka .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes mkbounce { 50% { transform: translateY(-3px); } }
@keyframes mkdots { 0% { display: flex; } 40%, 100% { display: none; } }
.mka .ai { padding: 6px 8px; border-radius: 10px 10px 10px 2px; background: #fff; border: 1.5px solid #D6E2CF; font-size: 10.5px; line-height: 1.35; opacity: 0; animation: mkai 5s ease infinite; }
@keyframes mkai { 0%, 40% { opacity: 0; transform: translateY(6px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mkp .st { font-size: 22px; letter-spacing: 2px; } .mkp .st i { font-style: normal; filter: grayscale(1); opacity: .35; animation: mkstarl 5s ease infinite; } .mkp .st i:last-child { animation-delay: .6s; }
@keyframes mkstarl { 0%, 40% { filter: grayscale(1); opacity: .35; } 55%, 100% { filter: none; opacity: 1; } }
.mkp .bar { display: block; height: 10px; border-radius: 9px; background: #E3EADF; overflow: hidden; } .mkp .bar i { display: block; height: 100%; width: 72%; border-radius: 9px; background: linear-gradient(90deg, #129B60, #F5A400); transform-origin: left; animation: mkbar 5s ease infinite; }
@keyframes mkbar { 0% { transform: scaleX(.1); } 60%, 100% { transform: scaleX(1); } }
.lpready { margin-bottom: -12px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .mk *, .mk { animation: none !important; } .mka .ai, .mkstamp { opacity: 1; } .mka .dots { display: none; } }
/* keep the rising Ge'ez letters inside the sky scene, and make Amharic captions easier to read */
.lpglyphs { bottom: auto; height: 300px; }
@keyframes lprise { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .8; } 45% { opacity: .8; color: #FFD25A; } 60% { color: transparent; } 100% { transform: translateY(-320px); opacity: 0; color: transparent; } }
.lph .lpcap { font-size: .64em; } .lpstx .lpcap { font-size: 14px; } .lpsubp .lpcap { font-size: 14px; }

/* Go-to panel */
.jumpbtn { margin-left: auto; color: var(--accent-deep); }
.top .in > .jumpbtn:first-child { margin-left: auto; }
.jump { display: grid; gap: 14px; }
.jhead { display: flex; align-items: center; justify-content: space-between; } .jhead b { font-size: 20px; }
.jcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.jcrumb a { color: var(--accent-deep); text-decoration: none; padding: 4px 8px; border-radius: 8px; background: var(--accent-soft); } .jcrumb b { color: var(--fg); padding: 4px 8px; border-radius: 8px; background: var(--surface-2); } .jcrumb span { padding: 4px 2px; } .jcrumb i { font-style: normal; opacity: .6; }
.jbig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jb { display: grid; place-items: center; gap: 4px; min-height: 72px; padding: 8px 4px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); text-decoration: none; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; text-align: center; }
.jb span { font-size: 22px; } .jb:active { transform: translateY(2px); }
.jsec { display: grid; gap: 8px; } .jsec > small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.junits { display: grid; gap: 6px; }
.ju { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 10px 12px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); color: var(--fg); text-decoration: none; overflow: hidden; }
.ju b { font-size: 13px; color: var(--accent-deep); } .ju span { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ju i { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--p), var(--surface-2) var(--p)); }
.ju.on { border-color: var(--accent); background: var(--accent-soft); }
.jsubj { display: flex; flex-wrap: wrap; gap: 8px; } .jsubj .lps { text-decoration: none; color: var(--fg); } .jsubj .lps.on { outline: 2.5px solid var(--h); outline-offset: 1px; }
.jgr { display: flex; flex-wrap: wrap; gap: 8px; } .jgr button { min-height: 40px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font: inherit; font-weight: 800; color: var(--fg); cursor: pointer; } .jgr button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.jfoot { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; border-top: 2px dashed var(--line); }
.jfoot a, .jfoot button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 12px; background: var(--surface-2); border: 0; color: var(--fg); text-decoration: none; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.top .jumpbtn { width: 38px; margin-left: 2px; } .top .prog { min-width: 64px; }
@media (max-width: 420px) { .top .in { gap: 5px; padding-left: 8px; padding-right: 6px; } .top .focus { min-width: 38px; min-height: 38px; padding: 0 7px; font-size: 13px; } .top .iconbtn { width: 38px; } }

/* landing video */
.lpvid { display: grid; place-items: center; padding: 14px; border-radius: 26px; background: linear-gradient(170deg, #12264F, #0B1B3F); }
.lpvid video { display: block; width: min(100%, 300px); height: auto; aspect-ratio: 9 / 16; border-radius: 22px; background: #0B1B3F; box-shadow: 0 0 0 3px #1F3F7A, 0 18px 40px rgba(0,0,0,.45); }

/* free-style timer */
.fown { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--surface-2); text-align: center; }
.fstep { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 10px; } .fstep span { font-size: 18px; font-weight: 800; } .fstep span b { font-size: 34px; font-variant-numeric: tabular-nums; } .fstep .opt { min-height: 52px; font-size: 26px; font-weight: 900; }
.fbrk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .fbrk .opt { min-height: 44px; font-size: 13px; padding: 0 4px; } .fbrk .opt.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#ffree { display: grid; gap: 2px; } #ffree small { font-size: 12px; font-weight: 600; color: var(--muted); }
@media (max-width: 420px) { .top .prog { min-width: 40px; gap: 4px; } #ppct { min-width: 30px; font-size: 12px; } .top .focus.on { padding: 0 6px; font-size: 12px; } }
/* dark mode: bright hue cards get a deeper fill so their white text stays readable */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pcard:not(.soft) { background: color-mix(in srgb, var(--h) 52%, #0B1410); box-shadow: 0 4px 0 color-mix(in srgb, var(--h) 35%, #000); } }
:root[data-theme="dark"] .pcard:not(.soft) { background: color-mix(in srgb, var(--h) 52%, #0B1410); box-shadow: 0 4px 0 color-mix(in srgb, var(--h) 35%, #000); }

/* ---------- Games: Duel and Clash ---------- */
.gmcard { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; min-height: 44px; border-radius: 18px; background: var(--violet-soft); border: 2px solid var(--violet); color: var(--fg); text-decoration: none; }
.gmcard .big, .gmitem .big { font-size: 28px; line-height: 1; }
.gmcard small, .gmitem small, .gmkind small, .gmrow small, .gmrev small { display: block; color: var(--muted); font-size: 13px; }
.gmhero { text-align: center; padding: 18px 12px 12px; }
.gmhero .big { font-size: 48px; line-height: 1.1; }
.gmhero h1 { margin: 6px 0 4px; font-size: 26px; }
.gmhero p { margin: 0; color: var(--muted); }
.gmhero.win h1 { color: var(--sun-deep); }
.gmnew { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 12px; }
.gmkind { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; text-align: center; cursor: pointer; box-shadow: var(--shadow); }
.gmkind:first-child { border-color: var(--coral); background: var(--coral-soft); }
.gmkind:last-child { border-color: var(--sky-line); background: var(--sky-soft); }
.gmkind .big { font-size: 34px; }
.gmkind b { font-size: 18px; }
.gmjoin .row { display: flex; margin-top: 8px; }
.gmjoin input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--fg); font: 700 18px var(--body); letter-spacing: .15em; text-transform: uppercase; }
#gmnow, #gmrecent { scroll-margin-top: 72px; }
#gmnow:not(:empty) { margin-top: 24px; }
#gmrecent:not(:empty) { margin-top: 28px; }
h2.gmhead { font-size: 21px; line-height: 1.3; margin: 0 0 12px; }
.gmlist { display: grid; gap: 8px; margin-bottom: 8px; }
.gmitem { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; min-height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.gmsheet { display: grid; gap: 10px; }
.gmsheet h2 { margin: 0; }
.gmchips { display: flex; flex-wrap: wrap; gap: 8px; }
.gmchips .opt { min-height: 44px; }
.gmchips .opt[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.gmprog { display: flex; gap: 6px; margin: 6px 0 10px; }
.gmprog i { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-2); }
.gmprog i.ok { background: var(--accent); } .gmprog i.no { background: var(--bad); } .gmprog i.done { background: var(--muted); } .gmprog i.cur { background: var(--sun); }
.gmtext { font-size: 18px; font-weight: 700; line-height: 1.4; margin: 6px 0 12px; overflow-wrap: anywhere; }
.gmopts { display: grid; gap: 8px; }
.gmopt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: 600 16px var(--body); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.gmopt:disabled { cursor: default; opacity: 1; }
.gmopt.me { border-color: var(--sky); background: var(--sky-soft); }
.gmopt.ok { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.gmopt.no { border-color: var(--bad); background: var(--bad-soft); }
.gml { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); font-weight: 800; }
.gmwhy.ok { border-left: 5px solid var(--accent); } .gmwhy.no { border-left: 5px solid var(--bad); }
.gmwhy b { display: block; margin-bottom: 4px; }
.gmboard { display: grid; gap: 6px; margin: 10px 0; }
.gmrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.gmrow.me { border: 2px solid var(--sun); background: var(--sun-soft); }
.gmpl { width: 28px; text-align: center; font-weight: 800; font-size: 18px; }
.gmsc { font-size: 18px; }
.gmcode { display: inline-block; margin: 8px 0; padding: 6px 16px; border-radius: 12px; background: var(--surface-2); font: 800 32px var(--body); letter-spacing: .2em; }
.gmtimer { position: relative; height: 26px; border-radius: 13px; background: var(--surface-2); overflow: hidden; margin-bottom: 10px; }
.gmtimer i { position: absolute; inset: 0 auto 0 0; background: var(--sun); transition: width .4s linear; }
.gmtimer span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: var(--fg); }
.gmpts { margin-top: 10px; text-align: center; font: 800 24px var(--body); }
.gmpts.ok { color: var(--accent-deep); } .gmpts.no { color: var(--bad); }
.gmlast.ok { border-left: 5px solid var(--accent); } .gmlast.no { border-left: 5px solid var(--bad); }
.gmrev { display: block; } .gmrev.ok { border-left: 5px solid var(--accent); } .gmrev.no { border-left: 5px solid var(--bad); }
.gmcount { font: 800 72px var(--body); color: var(--sun-deep); }
.gmjoin .btn, .gmitem .btn { width: auto; flex: none; margin: 0; padding-left: 18px; padding-right: 18px; }
.gmitem .btn.small { min-height: 40px; display: inline-grid; place-items: center; }
.gmrev.skip { border-left: 5px solid var(--line); }
.gmjoin .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .gmjoin input { width: 100%; }
.gmnewbtn { margin: 8px 0 10px; font-size: 19px; text-decoration: none; }
.gmtypes { display: grid; gap: 4px; margin-bottom: 14px; text-align: center; }
.gmkind[aria-pressed="false"] { opacity: .6; border-style: dashed; box-shadow: none; }
.gmkind[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Quick Match, Lobby, online count */
.gmtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.gmtop h1 { margin: 0; font-size: 26px; }
.gmonline { flex: none; padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 800; font-size: 13px; }
.gmsubs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 -16px 12px; padding-left: 16px; padding-right: 16px; }
.gmsubs::-webkit-scrollbar { display: none; }
.gmsubs .opt { flex: none; }
.gmquick { display: flex; align-items: center; gap: 14px; padding: 18px 16px; border-radius: 22px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: var(--accent-ink); text-decoration: none; box-shadow: var(--shadow); }
.gmquick .big { font-size: 40px; line-height: 1; }
.gmquick b { display: block; font-size: 22px; }
.gmquick small { display: block; opacity: .9; font-size: 14px; }
.gmgo { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--accent-ink) 22%, transparent); font-size: 20px; }
.gmsec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 8px; }
.gmsec h2 { margin: 0; font-size: 20px; }
.gmsec .btn { width: auto; min-height: 44px; padding: 0 14px; font-size: 15px; }
.gmempty { text-align: center; }
.gmtwo { margin: 14px 0; }
.gmradar { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 30px 8px; }
.gmradar h1 { margin: 6px 0 0; font-size: 24px; }
.gmradar p { margin: 0; }
.gmradar .btn { margin-top: 18px; }
.gmpulse { position: relative; width: 140px; height: 140px; display: grid; place-items: center; }
.gmpulse span { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); font-size: 38px; }
.gmpulse i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; animation: gmping 2s ease-out infinite; }
.gmpulse i + i { animation-delay: 1s; }
@keyframes gmping { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gmpulse i { animation: none; opacity: .4; } }
.gmvs { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0; }
.gmvs > div { display: grid; justify-items: center; gap: 6px; min-width: 90px; }
.gmav { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sky); color: #fff; font: 800 28px var(--body); }
.gmav.b { background: var(--coral); }
.gmvsx { font: 900 22px var(--body); color: var(--sun-deep); }
.gmopp { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 2px; font-size: 14px; font-weight: 700; color: var(--muted); }
.gmauto { margin: 6px 0; padding: 10px; border-radius: 14px; text-align: center; font-weight: 800; background: var(--sun-soft); border: 2px solid var(--sun-line); }
/* games hub: mode grid + panel */
.gmlabel { margin: 4px 0 6px; font-weight: 700; }
.gmmodes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.gmmode { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 104px; padding: 12px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.gmmode .big { font-size: 30px; line-height: 1.1; }
.gmmode b { font-size: 17px; }
.gmmode small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.gmmode[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent) inset; }
.gmmode[aria-checked="true"] b::after { content: " ✓"; color: var(--accent-deep); }
.gmpanel { display: grid; gap: 6px; margin-bottom: 12px; border: 2px solid var(--accent); }
.gmphead { display: flex; gap: 12px; align-items: flex-start; }
.gmphead .big { font-size: 34px; line-height: 1; }
.gmphead b { font-size: 19px; }
.gmphead p { margin: 2px 0 4px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.gmpanel .gmsubs { margin: 0 -16px; }
.gmpanel .gmnewbtn { margin: 8px 0 0; }
.gmmore { margin-top: 6px; width: 100%; }
/* stars to spend, Knowledge Chest cards */
.stcard { background: var(--sun-soft); border-color: var(--sun-line); }
.stbal { text-align: center; padding: 14px 8px 12px; }
.stbal .big { font: 800 44px var(--body); color: var(--sun-deep); line-height: 1.1; }
.stbal b { display: block; font-size: 18px; }
.stbal small { display: block; color: var(--muted); margin-top: 4px; }
.stbox { display: grid; gap: 10px; margin-bottom: 12px; }
.sthead { display: flex; gap: 12px; align-items: flex-start; }
.sthead .big { font-size: 36px; line-height: 1; }
.sthead b { font-size: 19px; }
.sthead p { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.stsets { display: grid; gap: 8px; }
.stset { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic t p" "ic bar p" "ic s p"; column-gap: 12px; row-gap: 3px; align-items: center; padding: 12px; min-height: 76px; border: 0; border-radius: 16px; background: linear-gradient(135deg, var(--k1), var(--k2)); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.stset:disabled { opacity: .55; cursor: default; }
.stset .kchip { grid-area: ic; font-size: 34px; }
.stset b { grid-area: t; font-size: 16px; }
.stset .pbar { grid-area: bar; background: rgba(255,255,255,.3); }
.stset .pbar i { background: #fff; }
.stset small { grid-area: s; font-size: 12.5px; opacity: .95; }
.stprice { grid-area: p; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.22); font-weight: 800; white-space: nowrap; }
.strow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.strow .btn { width: auto; min-height: 44px; padding: 0 16px; }
.stown { font-size: 22px; } .stown i { font-style: normal; opacity: .35; } .stown small { font-size: 13px; color: var(--muted); }
.kcard { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 16px; overflow: hidden; background: var(--surface); border: 2px solid var(--k1); color: var(--fg); text-align: left; }
.kpic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--k1), var(--k2)); }
.kpic span { font-size: 44px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.kpic i { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktx { padding: 7px 9px 8px; } .ktx b { display: block; font-size: 13.5px; line-height: 1.25; }
.kset { display: none; }
.kcard.big { max-width: 320px; margin: 0 auto; width: 100%; }
.kcard.big .kpic span { font-size: 96px; } .kcard.big .kpic i { font-size: 13px; left: 10px; bottom: 10px; }
.kcard.big .ktx { padding: 12px 16px 6px; } .kcard.big .ktx b { font-size: 21px; } .kcard.big .ktx p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; }
.kcard.big .kset { display: block; padding: 0 16px 12px; color: var(--muted); font-size: 12px; }
.kcard.lock { border-style: dashed; border-color: var(--line); } .kcard.lock .kpic { background: var(--surface-2); } .kcard.lock .kpic span { filter: grayscale(1); opacity: .45; } .kcard.lock .ktx b { color: var(--muted); }
.kalb { margin-bottom: 18px; } .kalbh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .kalbh h2 { margin: 6px 0; font-size: 20px; } .kalbh small { color: var(--muted); }
.kgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.kbtn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.ksheet, .kopen { display: grid; gap: 12px; justify-items: center; text-align: center; }
.kopen h2 { margin: 0; }
.kchest { display: grid; place-items: center; width: 150px; height: 150px; margin: 20px auto; border-radius: 32px; background: radial-gradient(circle, var(--k2), var(--k1)); font-size: 86px; animation: kshake .45s ease-in-out 2; }
.kchest.pop { animation: kpop .45s ease-in forwards; }
@keyframes kshake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg) scale(1.04); } 75% { transform: rotate(9deg) scale(1.04); } }
@keyframes kpop { to { transform: scale(1.5); opacity: 0; } }
.kreveal { display: grid; gap: 10px; width: 100%; animation: kin .5s ease-out; }
@keyframes kin { from { transform: rotateY(90deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kchest, .kchest.pop, .kreveal { animation: none; } }
.knew { font: 800 20px var(--body); color: var(--sun-deep); }
.kprog { display: grid; gap: 4px; width: 100%; max-width: 320px; margin: 0 auto; } .kprog small { color: var(--muted); }
.kdone { padding: 10px; border-radius: 14px; background: var(--sun-soft); border: 2px solid var(--sun-line); font-weight: 800; }
.kbtns { display: grid; gap: 8px; width: 100%; }
/* card pictures: animated portraits and floating emoji */
.kpic .pt { position: absolute; inset: 0; width: 100%; height: 100%; }
.kpic span.kemo { font-size: 44px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); animation: kfloat 3s ease-in-out infinite; }
.kcard.big .kpic span.kemo { font-size: 96px; }
.kcard.lock .kpic span.kemo { animation: none; }
@keyframes kfloat { 50% { transform: translateY(-5px) rotate(-3deg); } }
.pt .pt-eyes { transform-origin: 80px 53px; animation: ptblink 4.5s infinite; }
.pt .pt-head { transform-origin: 80px 118px; animation: ptbob 3.4s ease-in-out infinite; }
.pt .pt-prop { animation: ptfloat 2.8s ease-in-out infinite; }
@keyframes ptblink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes ptbob { 50% { transform: rotate(1.8deg); } }
@keyframes ptfloat { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pt .pt-eyes, .pt .pt-head, .pt .pt-prop, .kpic span.kemo { animation: none; } }
.kyrs { display: block; color: var(--muted); font-size: 13px; font-weight: 700; margin-top: 2px; }
.kfact { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sun-soft); border: 1px solid var(--sun-line); font-size: 14.5px; line-height: 1.45; }
.kfact b { display: inline; font-size: 14.5px; }
.kcard.big .ktx .kfact b { display: inline; font-size: 14.5px; }
.gmqh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.gmsubj { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--sky-soft); border: 1px solid var(--sky-line); color: var(--fg); font-weight: 800; font-size: 13px; }

/* ---------- accessibility ("How do you learn best?", 2026-11-05) ---------- */
.axlist { display: grid; gap: 10px; }
.axopt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 14px; text-align: left; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; }
.axopt b { display: block; font-size: 17px; }
.axopt small { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; margin-top: 2px; }
.axopt .axic { font-size: 30px; width: 40px; text-align: center; flex: none; }
.axopt .axtick { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; font-weight: 900; flex: none; }
.axopt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.axopt[aria-pressed="true"] .axtick { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
html[data-a11y-focus] .book:has(.acur) [data-kind]:not(.acur) { opacity: .4; transition: opacity .25s; }
html[data-a11y-focus] .heroart { display: none; }
html[data-a11y-big] body { font-size: 20px; }
html[data-a11y-big] #app { zoom: 1.15; }
html[data-a11y-deaf] .ancap { font-size: 20px; font-weight: 700; }
.sronly { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* follow the phone's own settings: high contrast */
@media (prefers-contrast: more) { :root:not([data-theme="dark"]) { --muted: #2E3A32; --line: #5E6E63; --accent: #0B6E44; --accent-deep: #064A2D; --bad: #A13212; } .opt, .qb, .axopt, .card, input { border-width: 3px; } }
@media (forced-colors: active) { .qb.ok, .opt.ok { outline: 3px solid Highlight; } .qb.no, .opt.no { outline: 3px dashed CanvasText; } .acur { outline: 3px solid Highlight !important; } }
/* rank badges on match screens */
.gmavr { display: grid; place-items: center; width: 72px; height: 80px; }
.gmavr svg { width: 64px; height: auto; }
.gmrkn { color: var(--muted); font-weight: 700; font-size: 13px; }
.gmrkb { flex: none; display: grid; place-items: center; width: 30px; }
.gmrkb svg { width: 30px; height: auto; }
/* avatars */
.avt { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--accent-soft), var(--sun-soft)); flex: none; }
.avt svg.pt { width: 140%; height: auto; margin-top: 18%; }
.avt.big { width: 132px; height: 132px; border: 4px solid var(--accent); }
.avt.vs { width: 76px; height: 76px; border: 3px solid var(--sky); overflow: visible; }
.avt.vs.b { border-color: var(--coral); }
.avt.vs > svg.pt, .avt.sm > svg.pt { border-radius: 50%; }
.avt.vs { clip-path: none; } .avt.vs > svg.pt { width: 100%; margin: 0; clip-path: circle(50%); transform: scale(1.4) translateY(10%); }
.avt.sm { width: 34px; height: 34px; overflow: visible; } .avt.sm > svg.pt { width: 100%; margin: 0; clip-path: circle(50%); transform: scale(1.4) translateY(10%); }
.avrk { position: absolute; right: -6px; bottom: -6px; width: 26px; } .avrk svg { width: 26px; height: auto; }
.avt.sm .avrk { width: 18px; right: -5px; bottom: -5px; } .avt.sm .avrk svg { width: 18px; }
.hav { flex: none; display: grid; text-decoration: none; margin-right: 10px; border-radius: 50%; }
.hav .avt { width: 48px; height: 48px; border: 2px solid var(--accent); }
.avhero { display: grid; justify-items: center; gap: 8px; padding: 10px 0 6px; } .avhero b { font-size: 18px; }
.avphoto { display: flex; margin: 4px 0; cursor: pointer; }
.avsec { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; font-weight: 800; } .avsec svg { width: 22px; height: auto; }
.avrow { display: flex; flex-wrap: wrap; gap: 8px; }
.avopt { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 3px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: 700 14px var(--body); cursor: pointer; }
.avopt.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.avsw { display: block; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.avpics .avopt { width: 64px; height: 56px; overflow: hidden; padding: 0; } .avpics .avopt svg { width: 100%; height: auto; }
.avsave { margin: 16px 0 8px; position: sticky; bottom: 76px; }

/* Textbook source credit (Ministry of Education) */
.srcline { margin-top: 6px; line-height: 1.45; opacity: .85; }
.hero .srcline { color: inherit; opacity: .8; font-size: 12.5px; }
.lpcredit { text-align: left; }
.lpcreditbox { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: start; padding: 16px; border-radius: 18px; background: var(--accent-soft); }
.lpcreditbox span { font-size: 28px; } .lpcreditbox b { font-size: 15px; display: block; margin-bottom: 4px; } .lpcreditbox p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---------- Sideways rows: ‹ › scroll buttons on computers (added by hsArm in app.js) ---------- */
.hsb { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hsb { display: grid; place-items: center; position: sticky; z-index: 3; flex: 0 0 44px; width: 44px; height: 44px; align-self: center; padding: 0; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); box-shadow: 0 2px 10px rgba(0, 0, 0, .28); cursor: pointer; visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; }
  .hsb:hover { border-color: var(--sky); }
  .hsb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .hsl { left: 0; margin-right: -52px; }
  .hsr { right: 0; margin-left: -52px; }
  .hs-l > .hsl, .hs-r > .hsr { visibility: visible; opacity: 1; }
}

/* ---------- Avatar camera: the front camera with an oval for the face ---------- */
.avcam { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; background: rgba(0, 0, 0, .88); color: #fff; }
.avcamv { position: relative; width: min(84vw, 380px); aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #000; }
.avcamv video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.avcamv svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.avcam p { margin: 0; font-weight: 800; text-align: center; }
.avcamb { display: flex; gap: 10px; } .avcamb .btn { white-space: nowrap; min-width: 120px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* Avatar: Male / Female choice (picks the hair styles offered) */
.avsex { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.avsex .avopt { display: grid; justify-items: center; gap: 2px; width: auto; height: auto; padding: 6px 6px 8px; }
.avsex .avopt svg { width: 100%; max-width: 130px; height: auto; } .avsex .avopt b { font-size: 15px; }

/* ---------- Home: beta in one line; one row of small tiles (rank, stars, games, strengths) ---------- */
.betaline { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 4px 4px 4px 10px; border-radius: 12px; background: var(--sun-soft); border: 1px solid var(--line); }
.betaline #betarep { min-height: 44px; border: 0; background: none; color: var(--fg); font: 700 14px var(--body); text-align: left; cursor: pointer; }
.qtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 6px; }
.qt { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 92px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); text-decoration: none; text-align: center; }
.qt .qi { font-size: 28px; line-height: 34px; } .qt svg { width: 34px; height: 34px; }
.qt b { font-size: 12.5px; line-height: 1.2; } .qt small { font-size: 11px; color: var(--muted); margin-top: -3px; }
.qt .pbar, .qt .bar { width: 80%; }

/* ---------- Top bar: "Go to" and "More" carry a word, not just an icon ---------- */
.jumpbtn { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin-left: auto; padding: 0 12px 0 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 700 13px var(--body); cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.jumpbtn svg { width: 18px; height: 18px; }
#bmore { font-size: 13px; } #bmore::first-letter { font-size: 18px; }
.bmenu { display: grid; gap: 8px; }
.bmenu > button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 700 16px var(--body); text-align: left; cursor: pointer; }
.bmenu > button span { font-size: 22px; width: 28px; text-align: center; }
.top .in > .prog { flex: 1 1 auto; min-width: 0; }
.top .in > #bmore { margin-left: 0; }
@media (max-width: 420px) { .top .in > .jumpbtn { padding: 0 10px 0 7px; min-height: 38px; } .top .pts { padding: 3px 9px; font-size: 15px; } }
.top .in > .jumpbtn { width: auto; }
.top .in > #jumpbtn { margin-left: auto; }

/* ---------- Signed out: an example in Ask; sign-in sheets; empty screens with a next step ---------- */
.askex { display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 14px; }
.askexl { justify-self: start; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.signsheet { text-align: center; justify-items: center; } .signsheet .btn { width: 100%; }
.emptycard { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 22px 16px; } .emptycard .big { font-size: 40px; } .emptycard p { margin: 0; }
.signsheet .row { width: 100%; } .signsheet p { margin: 0; }

/* ---------- Free preview gate: the rest of a chapter asks to sign in ---------- */
.gatewrap { margin: 18px 0; }
.gatecard { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 22px 16px; border: 2px solid var(--accent); }
.gatecard .big { font-size: 40px; } .gatecard p { margin: 0; } .gatecard .btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.secnav .chip.lock { opacity: .6; border-style: dashed; cursor: pointer; font: inherit; }
.examcard.locked { opacity: .7; } .examcard.locked b { color: var(--muted); }

/* ---------- Where am I (lesson bar), Settings groups, one feel for every tappable card ---------- */
.top .prog.wcrumb { flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; }
.top .prog.wcrumb .pline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.top .prog.wcrumb .bar { flex: 1; height: 8px; } .top .prog.wcrumb #ppct { font-size: 12px; min-width: 30px; }
.crumb { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setg { margin-top: 18px; font-size: 18px; } .setg:first-child { margin-top: 4px; }
.exinfo { margin: -6px 0 6px; padding-left: 0; }
.fbcard, .examcard, .gmcard, .pcard, .qt, .tourcard, .list .item { transition: transform .08s ease; -webkit-tap-highlight-color: transparent; }
.fbcard:active, .examcard:active, .gmcard:active, .pcard:active, .qt:active, .tourcard:active, .list .item:active { transform: scale(.98); }
.fbcard > span:last-child, .examcard > span:last-child, .gmcard > span:last-child { color: var(--accent-deep); font-size: 22px; font-weight: 900; }
.fbcard:focus-visible, .examcard:focus-visible, .gmcard:focus-visible, .pcard:focus-visible, .qt:focus-visible, .list .item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Welcome on one screen; accessibility offered on Home ---------- */
.lptiles span { justify-items: center; text-align: center; font-size: 11.5px; } .lptiles i { font-style: normal; font-size: 24px; line-height: 1.1; }
.lptiles b { font-size: 15px; } .lptiles em { font-style: normal; font-weight: 900; }
.lpmore { margin: 14px 0 6px; } .lpmore > summary { list-style: none; cursor: pointer; text-align: center; font-weight: 800; color: var(--accent-deep); min-height: 44px; display: grid; place-items: center; }
.lpmore > summary::-webkit-details-marker { display: none; } .lpmore[open] > summary { margin-bottom: 8px; }
.axcard { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 4px 4px 4px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.axcard .axic { font-size: 20px; } .axcard a { min-height: 44px; display: flex; align-items: center; color: var(--fg); font-weight: 700; font-size: 14px; text-decoration: none; }
@media (max-width: 720px) { .lpscene, .lpglyphs { height: 150px; } .lphero .lptag { font-size: 26px; line-height: 1.2; } .lpin { gap: 12px; } .hubin { gap: 8px; } }

/* Setup: stream (Grades 11–12) and Male / Female as two big buttons */
.opts.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.subig .opt { display: grid; justify-items: center; gap: 4px; min-height: 84px; font-weight: 800; font-size: 16px; } .subig .opt span { font-size: 30px; line-height: 1; }

/* voice tutor + My future cards on Home (2026-11-08) */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
button.examcard { width: 100%; font: inherit; text-align: left; cursor: pointer; min-height: 64px; }
.examcard.voicecard, .examcard.futcard { background: var(--surface); border-color: var(--line); }