/* Shared quiet interface for the website and offline mobile app. */
:root {
 --bg:#f7f8fa; --surface:#fff; --surface-2:#f0f3f5;
 --ink:#202a35; --ink-2:#4b5968; --muted:#647180; --line:#dce2e7;
 --brand:#176b75; --brand-d:#11535b; --brand-l:#e6f2f3;
 --shadow:none; --shadow-s:none; --font-d:var(--font);
}
:root[data-theme="dark"] {
 --bg:#151b22; --surface:#1d252e; --surface-2:#28333f;
 --ink:#edf2f7; --ink-2:#c1ccd6; --muted:#a7b4c1; --line:#3c4957;
 --brand:#79cad2; --brand-d:#a3dce1; --brand-l:#243f44;
 --shadow:none; --shadow-s:none;
}
@media(prefers-color-scheme:invalid) {
 :root:not([data-theme="light"]) {
  --bg:#151b22; --surface:#1d252e; --surface-2:#28333f;
  --ink:#edf2f7; --ink-2:#c1ccd6; --muted:#a7b4c1; --line:#3c4957;
  --brand:#79cad2; --brand-d:#a3dce1; --brand-l:#243f44;
  --shadow:none; --shadow-s:none;
 }
}
body {font-weight:400;line-height:1.65}
h1,h2,h3 {font-weight:700;line-height:1.3;letter-spacing:0}
.kicker {font-weight:600;letter-spacing:.035em;text-transform:none}
.btn,.btn.primary,.btn.ok,.btn.bad,.btn.soft,.btn.ghost,
.btn:hover,.btn:active,.btn.primary:active,.btn.ok:active,.btn.bad:active {
 border-width:1px;border-radius:8px;box-shadow:none;transform:none;filter:none;font-weight:700;
}
.btn {min-height:44px;padding:12px 18px;line-height:1.35;transition:background .15s,border-color .15s}
.btn:hover {border-color:var(--brand)}
.btn.primary,.hero .btn.primary {background:#176b75;border-color:#176b75;color:#fff;box-shadow:none}
.btn.soft,:root[data-theme="dark"] .btn.soft {color:var(--brand-d)}
.icon-btn,.chip-btn,.zoom-button,.zoom-reset,.notes-button {border-radius:8px;border-width:1px;box-shadow:none}
.topbar {background:var(--surface);backdrop-filter:none;border-bottom-width:1px}
.topnav a {border-radius:6px;font-weight:600}
.brand-text b {font-weight:750;font-size:21px}
.pill {border-radius:6px;background:transparent;font-weight:600}
.zoom-controls {box-shadow:none}
.hero {background:var(--surface);color:var(--ink);border-radius:0;border-bottom:1px solid var(--line)}
.hero-in {display:block;padding-block:30px}
.hero h1 {font-size:clamp(28px,4vw,40px);max-width:24em}
.hero h1 em {color:inherit}
.hero .lead {color:var(--ink-2);font-size:17px;max-width:48em}
.hero .btn.ghost {color:var(--ink);border-color:var(--line)}
.hero-art {display:none}
.hero-facts {font-size:14px;color:var(--ink-2);gap:8px 22px}
.hero-facts b {font-size:16px;font-weight:700;color:var(--ink)}
.hero-cta {margin:18px 0}
.how {margin-top:24px}
.how-ic {display:none}
.how-card h3 {font-size:18px}
.sec-h {font-size:26px;margin-top:30px}
.gcard,.chapter,.tile,.how-card,.gh-ring,.guide-home-cta,.guide-topic,
.guide-start,.starter-entry,.starter-topic,.abi-entry,.abi-panel,.abi-topic,
.drill-cta,.card,.checkpoint,.visual-lab,.q-solution,.soon-card {
 border-radius:10px;border-width:1px;border-color:var(--line);box-shadow:none;
}
.gcard::before {display:none}
.gcard {padding:16px;gap:4px}
.gcard.ready:hover,.tile:hover,.tile:active,.abi-topic:hover {transform:none;box-shadow:none;border-color:var(--brand)}
.gnum {width:42px;height:42px;border-radius:8px;background:var(--surface-2);color:var(--ink);font-size:23px;font-weight:700;box-shadow:none}
.gmeta b {font-size:20px;font-weight:700}
.gbadge {border-radius:4px;background:var(--surface-2);font-weight:600}
.gprog {height:5px}
.gprog i {background:var(--brand)}
.grade-head {background:var(--surface);border-bottom:1px solid var(--line)}
.grade-head .kicker {color:var(--ink-2)}
.grade-head h1 {font-size:clamp(26px,4vw,36px)}
.ch-head {background:var(--surface-2);border-bottom:1px solid var(--line)}
.ch-ic {width:36px;height:36px;font-size:22px;border-radius:6px;background:transparent;box-shadow:none}
.ch-prog {border-width:1px;border-radius:6px}
.tile {min-height:110px}
.tile-ic {font-size:21px}
.tile.next {border-color:var(--brand);box-shadow:none}
.tile.done {background:var(--surface-2)}
.drill-cta,.guide-home-cta,.starter-entry,.abi-entry {background:var(--surface)}
.drill-cta h3,.guide-home-cta h2,.starter-entry h2,.abi-entry h2 {font-size:24px}
.abi-nav {gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.abi-nav .btn {background:transparent;border-color:transparent;padding:9px 12px}
.abi-nav .btn:hover {background:var(--surface-2);border-color:var(--line)}
.abi-panel {padding:22px;margin:16px 0}
.abi-panel p {line-height:1.75}
.abi-filters input[type=search],.abi-filters select,.course-search {border-radius:8px;border-width:1px}
.abi-book-option {border-radius:8px;box-shadow:none}
.progress {height:8px}
.progress i::after {display:none}
.player-foot {border-top-width:1px}
@media(max-width:600px) {
 .hero-in {padding-block:24px}
 .hero h1 {font-size:28px}
 .hero-facts {gap:6px 16px}
 .abi-panel {padding:16px}
 .abi-nav {gap:4px}
 .abi-nav .btn {padding:8px;font-size:14px}
 .grade-grid {gap:12px}
}
@media(prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto}
 .btn,.tile,.gcard {transition:none}
}