/* TRYeTECH Academy — course player styles (no external fonts, no network) */

/* ------------------------------------------------------------------ tokens */
:root {
  --navy: #0b3d5e; --navy-2: #0f5480; --navy-3: #082c44;
  --accent: #f2a516; --on-accent: #0b2a40; --accent-ink: var(--accent);
  --bg: #f3f5f8; --surface: #ffffff; --surface-2: #f6f8fb; --surface-3: #eef2f6;
  --line: #dce3eb; --line-2: #c9d3de;
  --ink: #0f1d2b; --ink-2: #33475c; --muted: #546579;
  --link: #0a5a8c; --ok: #2e7d32; --ok-bg: #e8f5e9; --bad: #c62828; --bad-bg: #fdecea; --warn: #8a5300; --warn-bg: #fff4dc;
  --code: #6a4c93; --code-bg: #f3effa;
  --shadow-1: 0 1px 2px rgba(11, 61, 94, .06), 0 2px 8px rgba(11, 61, 94, .05);
  --shadow-2: 0 2px 4px rgba(11, 61, 94, .06), 0 10px 30px rgba(11, 61, 94, .10);
  --r: 14px; --r-lg: 20px;
  --sb: 272px; --top: calc(56px + env(safe-area-inset-top, 0px)); --tab: calc(60px + env(safe-area-inset-bottom, 0px));
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --grid-line: rgba(11, 61, 94, .075); --paper: #f8fbfd;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a131d; --surface: #111e2b; --surface-2: #162636; --surface-3: #1b2e41; --line: #243a50; --line-2: #2f4a64;
    --ink: #e9eff6; --ink-2: #bfccda; --muted: #98a9bc; --link: #86c8ff;
    --ok: #66bb6a; --ok-bg: rgba(102, 187, 106, .14); --bad: #ef6b6b; --bad-bg: rgba(239, 107, 107, .14); --warn: #ffc65c; --warn-bg: rgba(242, 165, 22, .14);
    --code: #c3a8ec; --code-bg: rgba(155, 120, 210, .14);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 30px rgba(0, 0, 0, .45);
    --grid-line: rgba(160, 200, 235, .07); --paper: #0f2232;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a131d; --surface: #111e2b; --surface-2: #162636; --surface-3: #1b2e41; --line: #243a50; --line-2: #2f4a64;
  --ink: #e9eff6; --ink-2: #bfccda; --muted: #98a9bc; --link: #86c8ff;
  --ok: #66bb6a; --ok-bg: rgba(102, 187, 106, .14); --bad: #ef6b6b; --bad-bg: rgba(239, 107, 107, .14); --warn: #ffc65c; --warn-bg: rgba(242, 165, 22, .14);
  --code: #c3a8ec; --code-bg: rgba(155, 120, 210, .14);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 30px rgba(0, 0, 0, .45);
  --grid-line: rgba(160, 200, 235, .07); --paper: #0f2232;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font);
  -webkit-tap-highlight-color: rgba(242, 165, 22, .18); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--link); }
h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
img, svg { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 200; top: 8px; left: 8px; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
[hidden] { display: none !important; }
kbd { font: 12px var(--mono); padding: 2px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); }
mark { background: rgba(242, 165, 22, .35); color: inherit; border-radius: 3px; padding: 0 1px; }

.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }
.ic.fill { fill: currentColor; }

/* ------------------------------------------------------------------ controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: 0 18px;
  border-radius: 12px; border: 1.5px solid transparent; font-weight: 650; font-size: 15px; line-height: 1.2; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; user-select: none; -webkit-user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn .ic { width: 1.15em; height: 1.15em; }
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 4px 12px rgba(242, 165, 22, .28); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--navy-2); }
.btn.danger { background: #c62828; color: #fff; }
.btn.danger-ghost { background: var(--surface); color: var(--bad); border-color: var(--bad); }
.btn.sm { padding: 0 14px; font-size: 14px; }
.btn.big { min-height: 56px; padding: 0 28px; font-size: 17px; border-radius: 14px; }
.btn.disabled { opacity: .7; cursor: default; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.primary:disabled:hover { background: var(--accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-row.center { justify-content: center; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent;
  color: inherit; cursor: pointer; text-decoration: none; flex: none;
}
.icon-btn:hover { background: rgba(127, 140, 160, .14); }
.icon-btn.on { background: rgba(242, 165, 22, .2); color: var(--ink); }
.icon-btn .ic { width: 22px; height: 22px; }
.link { color: var(--link); font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; }
.link:hover { text-decoration: underline; }
.link .ic { width: 1em; height: 1em; }
.link.sm { font-size: 14px; min-height: 44px; }
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; white-space: nowrap; line-height: 1.4;
}
button.pill { cursor: pointer; min-height: 36px; padding: 4px 14px; }
.pill b { font-weight: 800; color: var(--ink); }
.pill.muted { color: var(--muted); }
.pill.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.pill.free { background: var(--warn-bg); color: var(--warn); border-color: rgba(242, 165, 22, .55); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 750; padding: 3px 10px; border-radius: 999px; letter-spacing: .02em; }
.chip.dom { background: var(--dc); color: #fff; }
.chip.cat { background: var(--surface-3); color: var(--ink-2); text-transform: capitalize; }
.chip.cat .ic { width: 14px; height: 14px; }
.meta { color: var(--muted); font-size: 14px; }
.kicker { text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; font-weight: 750; color: var(--muted); margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lead { font-size: 17px; color: var(--ink-2); max-width: 70ch; }
.bar { display: block; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .3s; }
.bar.thin { height: 5px; }
.ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .rt { stroke: var(--surface-3); }
.ring .rv { stroke: var(--rc, var(--accent)); stroke-linecap: round; transition: stroke-dashoffset .5s; }
.ring b { position: relative; font-weight: 800; line-height: 1; color: var(--ink); display: inline-flex; align-items: baseline; }
.ring b small { font-size: .62em; font-weight: 700; color: var(--muted); }
.ring b .ic { width: 1.25em; height: 1.25em; color: var(--rc, var(--ok)); stroke-width: 3; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.card.pad { padding: 22px; }
.card-h { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 14px; }
.card-h .ic { color: var(--accent); }
.sub-h { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 10px; }
.sec-h { font-size: 20px; margin: 0 0 14px; }
.sec-h a { color: inherit; text-decoration: none; }
.sec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.empty > .ic { width: 44px; height: 44px; color: var(--line-2); margin-bottom: 8px; }
.empty h2 { color: var(--ink); }
.empty.sm { padding: 24px 12px; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 80px 0; color: var(--muted); }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.spinner.sm { width: 18px; height: 18px; border-width: 2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
.search-field { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 12px; padding: 0 14px; min-height: 48px; }
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(242, 165, 22, .22); }
.search-field .ic { color: var(--muted); }
.search-field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-size: 16px; padding: 10px 0; }
.search-field.big { min-height: 58px; border-radius: 16px; }
.search-field.big input { font-size: 18px; }
.sel select {
  min-height: 44px; max-width: 100%; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); padding: 0 36px 0 12px;
  -webkit-appearance: none; appearance: none; font-size: 15px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.seg { display: inline-flex; background: var(--surface-3); border-radius: 12px; padding: 3px; gap: 2px; flex: none; }
.seg > a, .seg > button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 9px; border: 0; background: transparent;
  color: var(--ink-2); font-weight: 650; font-size: 14.5px; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.seg > .on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg .ic { width: 18px; height: 18px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: inherit; text-decoration: none; padding: 6px 0; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep .ic { width: 14px; height: 14px; }
.logo { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--navy); color: var(--accent-ink); flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.logo .ic { width: 24px; height: 24px; fill: var(--accent-ink); stroke: var(--accent-ink); stroke-width: 1.5; }
.logo.sm { width: 34px; height: 34px; border-radius: 9px; }
.logo.sm .ic { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ shell */
.topbar {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: var(--top); padding: env(safe-area-inset-top, 0px) max(6px, env(safe-area-inset-right, 0px)) 0 max(6px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; gap: 4px; background: var(--navy); color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}
.tb-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 750; min-width: 0; flex: 1; min-height: 44px; }
.tb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16.5px; }
.tb-actions { display: flex; }
.topbar .icon-btn:hover { background: rgba(255, 255, 255, .12); }
.tabbar {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: var(--tab); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  display: flex; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(11, 61, 94, .06);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none;
  font-size: 11.5px; font-weight: 650; position: relative; min-height: 44px;
}
.tabbar a .ic { width: 24px; height: 24px; }
.tabbar a.on { color: var(--ink); }
.tabbar a.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent); }
.tabbar a.on .ic { color: var(--navy-2); }
:root[data-theme="dark"] .tabbar a.on .ic { color: var(--accent-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabbar a.on .ic { color: var(--accent-ink); } }

#view { display: block; min-height: 100vh; padding-top: var(--top); padding-bottom: var(--tab); overflow-x: hidden; outline: 0; }
@supports (overflow: clip) { #view { overflow-x: clip; } }

.sidebar {
  position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(var(--sb), 86vw); background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; transform: translateX(-102%); transition: transform .25s ease, visibility .25s; visibility: hidden;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.menu-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-2); }
.scrim { position: fixed; z-index: 55; inset: 0; background: rgba(5, 18, 30, .5); opacity: 0; pointer-events: none; transition: opacity .25s; }
.menu-open .scrim { opacity: 1; pointer-events: auto; }
.sb-head { display: flex; align-items: center; gap: 6px; padding: 14px 10px 12px 16px; border-bottom: 1px solid var(--line); }
.sb-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: 1; min-width: 0; }
.sb-brand small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sb-brand strong { display: block; font-size: 16px; line-height: 1.2; }
.sb-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sb-link {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink-2); text-decoration: none;
  font-weight: 650; font-size: 15px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
}
.sb-link:hover { background: var(--surface-2); color: var(--ink); }
.sb-link.on { background: rgba(242, 165, 22, .16); color: var(--ink); }
.sb-link.on .ic { color: var(--navy-2); }
:root[data-theme="dark"] .sb-link.on .ic { color: var(--accent-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sb-link.on .ic { color: var(--accent-ink); } }
.sb-link.sm { font-size: 14px; }
.sb-foot { border-top: 1px solid var(--line); padding: 8px 10px; display: flex; flex-direction: column; }
.sb-mods, .sb-lessons { list-style: none; margin: 0; padding: 0; }
.sb-mods { margin: 2px 0 8px 12px; border-left: 1px solid var(--line); padding-left: 6px; }
.sb-mod { display: flex; align-items: center; border-radius: 10px; }
.sb-mod:hover { background: var(--surface-2); }
.sb-mod.on { background: rgba(242, 165, 22, .16); }
.sb-mod > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 8px; min-height: 44px; text-decoration: none; color: var(--ink-2); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.sb-num { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--dc); color: #fff; font-size: 12px; font-weight: 800; }
.sb-mt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-done .ic { width: 16px; height: 16px; color: var(--ok); stroke-width: 3; }
.sb-tog { width: 40px; height: 44px; border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; border-radius: 8px; flex: none; }
.sb-tog .ic { width: 18px; height: 18px; transition: transform .2s; }
.open > .sb-mod .sb-tog .ic { transform: rotate(180deg); }
.sb-lessons { margin: 2px 0 6px 20px; }
.sb-lessons a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 8px; min-height: 40px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-size: 13.5px; line-height: 1.35; }
.sb-lessons a:hover { background: var(--surface-2); }
.sb-lessons a.on { background: var(--surface-3); color: var(--ink); font-weight: 650; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-2); margin-top: 4px; }
.st-prog .dot { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.st-done .dot { border-color: var(--ok); background: var(--ok); }
.sb-close { color: var(--muted); }

@media (min-width: 1024px) {
  :root { --top: 0px; --tab: 0px; }
  .topbar, .tabbar, .sb-close, .scrim { display: none; }
  .sidebar { transform: none; visibility: visible; width: var(--sb); transition: none; }
  #view { margin-left: var(--sb); }
}
.pl-menu { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  body.in-player .sidebar { transform: translateX(-102%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
  body.in-player.menu-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-2); }
  body.in-player .scrim { display: block; }
  body.in-player #view { margin-left: 0; }
  body.in-player .pl-menu { display: inline-grid; }
}

/* ------------------------------------------------------------------ page */
.page { max-width: 1200px; margin: 0 auto; padding: 24px max(20px, env(safe-area-inset-right, 0px)) 36px max(20px, env(safe-area-inset-left, 0px)); }
.page-h { margin: 4px 0 22px; }
.page-h h1 { font-size: clamp(26px, 4vw, 34px); }
.page-h.row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.page-h.row .lead { margin: 0; }
.ai-note {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 1200px; margin: 0 auto; padding: 14px max(20px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px));
  font-size: 12.5px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--line); text-align: left;
}
.ai-note .ic { width: 15px; height: 15px; margin-top: 1px; }

/* ------------------------------------------------------------------ home */
.hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: center;
  background: radial-gradient(120% 140% at 100% 0%, #135f8f 0%, var(--navy) 45%, var(--navy-3) 100%); color: #fff; border-radius: var(--r-lg);
  padding: 36px 36px 32px; margin-bottom: 20px; box-shadow: var(--shadow-2);
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--accent), #ffd27a 60%, transparent); }
.hero .kicker { color: var(--accent-ink); }
.hero .kicker .ic { width: 16px; height: 16px; fill: var(--accent); stroke-width: 1.5; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); margin-bottom: 4px; letter-spacing: -.02em; }
.hero-full { font-size: 17px; color: #cfe2f1; font-weight: 600; margin-bottom: 12px; }
.hero .lead { color: #e7f0f8; font-size: 16.5px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.badge { display: inline-flex; align-items: flex-start; gap: 8px; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.35; }
.badge .ic { width: 16px; height: 16px; color: var(--accent-ink); margin-top: 1px; }
.badge.ed { flex-basis: 100%; max-width: 640px; }
.hero-art { align-self: stretch; display: flex; align-items: center; }
.hero-svg { width: 100%; height: auto; }
.home-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
.continue {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink); transition: box-shadow .2s, transform .2s;
}
.continue:hover { box-shadow: var(--shadow-2); }
.cont-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--navy); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.cont-ic .ic { width: 26px; height: 26px; }
.cont-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cont-body small { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 750; color: var(--muted); }
.cont-body strong { font-size: 17px; line-height: 1.3; }
.cont-meta { color: var(--muted); font-size: 14px; }
.cont-body .bar { margin-top: 8px; max-width: 360px; }
.overall { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.overall > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.overall small { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 750; color: var(--muted); }
.overall strong { font-size: 19px; }
.overall .link { margin-top: 4px; font-size: 14.5px; }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; margin-bottom: 30px; }
.qlink { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); min-height: 64px; transition: border-color .15s, box-shadow .15s; }
.qlink:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.ql-ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(242, 165, 22, .16); color: var(--warn); display: grid; place-items: center; flex: none; }
:root[data-theme="dark"] .ql-ic { color: var(--accent-ink); }
.qlink strong { display: block; font-size: 15px; }
.qlink small { display: block; font-size: 12.5px; color: var(--muted); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mcard {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink); overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.mcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--dc); }
.mcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.mcard .chip { align-self: flex-start; }
.mcard h3 { font-size: 16.5px; line-height: 1.3; margin: 0; flex: 1; }
.mcard.soon { background: var(--surface-2); }
.mcard.soon h3 { color: var(--ink-2); }
.mc-top { display: flex; align-items: center; justify-content: space-between; }
.mc-num { font-size: 30px; font-weight: 850; letter-spacing: -.03em; color: var(--dc); line-height: 1; font-variant-numeric: tabular-nums; }
.mc-num.sm { font-size: 22px; }
:root[data-theme="dark"] .mc-num { color: var(--dcl, var(--dc)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mc-num { color: var(--dcl, var(--dc)); } }
.mc-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 13.5px; }
.mc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.mc-meta .ic { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ module page */
.mod-h { background: linear-gradient(135deg, var(--navy-3), var(--navy) 55%, #0f5480); color: #fff; position: relative; }
.mod-h::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--dc); }
.mod-h-in { max-width: 1200px; margin: 0 auto; padding: 18px max(20px, env(safe-area-inset-right, 0px)) 22px max(24px, env(safe-area-inset-left, 0px)); }
.mod-h .crumbs { color: #b8cfe2; }
.mod-h .crumbs a:hover { color: #fff; }
.mod-h .kicker { color: #cfe2f1; }
.mod-num { color: var(--accent-ink); }
.mod-h h1 { font-size: clamp(22px, 3.4vw, 32px); max-width: 26em; margin-bottom: 10px; }
.mod-h-row { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-end; justify-content: space-between; }
.mod-h-txt { flex: 1 1 420px; min-width: 0; }
.mod-h-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: #cfe2f1; font-size: 14px; }
.mod-h-meta span { display: inline-flex; align-items: center; gap: 6px; }
.mod-h-meta .ic { width: 16px; height: 16px; color: var(--accent-ink); }
.mod-h-prog { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mod-h-prog .ring .rt { stroke: rgba(255, 255, 255, .16); }
.mod-h-prog .ring b, .mod-h-prog .ring b small { color: #fff; }
.mod-h-prog strong { display: block; font-size: 20px; }
.mod-h-prog small { color: #cfe2f1; font-size: 13px; }
.tabs-wrap { position: sticky; top: var(--top); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(11, 61, 94, .04); }
.tabs { display: flex; gap: 2px; max-width: 1200px; margin: 0 auto; padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 52px; padding: 0 14px; white-space: nowrap; text-decoration: none; color: var(--muted);
  font-weight: 650; font-size: 14.5px; border-bottom: 3px solid transparent; flex: none;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); }
.tabs a .ic { width: 18px; height: 18px; }
.mod-body { padding-top: 24px; }
.tab-intro { color: var(--ink-2); margin-bottom: 16px; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.summary { font-size: 17px; color: var(--ink-2); line-height: 1.6; max-width: 75ch; }
.objectives { margin: 0; padding-left: 0; list-style: none; counter-reset: ob; display: grid; gap: 8px; }
.objectives li { counter-increment: ob; position: relative; padding: 4px 0 4px 40px; line-height: 1.5; }
.objectives li::before { content: counter(ob); position: absolute; left: 0; top: 3px; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-3); color: var(--ink-2); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.stat-list { list-style: none; margin: 0; padding: 0; }
.stat-list li + li { border-top: 1px solid var(--line); }
.stat-list a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 4px; text-decoration: none; color: var(--ink); font-weight: 600; }
.stat-list a > span { flex: 1; min-width: 0; }
.stat-list a:hover { color: var(--link); }
.stat-list .ic { color: var(--muted); width: 19px; height: 19px; }
.stat-list .chev { width: 16px; height: 16px; }
.lnum { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); font-weight: 800; font-size: 16px; }
.lnum.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 13.5px; }
.st-done .lnum { background: var(--ok); color: #fff; }
.st-done .lnum .ic { stroke-width: 3; width: 20px; height: 20px; }
.st-prog .lnum { background: rgba(242, 165, 22, .2); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }

/* storyboard */
.sb-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.tl { margin: 4px 0 18px; }
.tl-track { position: relative; height: 34px; border-radius: 10px; background: var(--surface-3); overflow: hidden; }
.tl-seg { position: absolute; top: 0; bottom: 0; border: 0; border-right: 2px solid var(--surface); background: rgba(11, 61, 94, .12); cursor: pointer; padding: 0; min-width: 6px; transition: background .2s; }
:root[data-theme="dark"] .tl-seg { background: rgba(160, 200, 235, .12); }
.tl-seg.past { background: rgba(242, 165, 22, .35); }
.tl-seg.on { background: var(--accent); }
.tl-seg:hover { background: rgba(242, 165, 22, .55); }
.tl-head { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1.5px; background: var(--navy); border-radius: 3px; pointer-events: none; transition: left .25s linear; }
:root[data-theme="dark"] .tl-head { background: #fff; }
.tl-ticks { position: relative; height: 22px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-ticks span { position: absolute; top: 4px; transform: translateX(-50%); }
.tl-ticks span:first-child { transform: none; }
.tl-ticks span:last-child { transform: translateX(-100%); }
.shot { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; background: var(--surface-2); }
.shot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.shot-n { font-weight: 800; font-size: 15px; }
.shot-n small, .shot-t small { color: var(--muted); font-weight: 600; }
.shot-t { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink-2); }
.shot-t .ic { width: 16px; height: 16px; }
.vo { margin: 0 0 16px; padding: 14px 18px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 12px 12px 0; font-size: 19px; line-height: 1.45; font-weight: 600; }
.vo small, .sg small, .endcard small, .ex-problem small, .ex-answer small {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--muted); margin-bottom: 4px;
}
.shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.sg { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.sg p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.sg.ost p { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.sb-ctrl { display: flex; justify-content: center; gap: 10px; margin: 16px 0 4px; }
.sb-ctrl .btn { min-width: 110px; }
.takeaways { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.takeaways li { display: flex; gap: 10px; align-items: flex-start; }
.takeaways .ic { color: var(--ok); stroke-width: 3; margin-top: 2px; }
.endcard { margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: var(--navy); color: #e7f0f8; }
.endcard small { color: var(--accent-ink); }
.endcard p { margin: 0; font-size: 14.5px; }

/* lessons tab */
.lesson-list { display: grid; gap: 10px; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.lrow-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); min-height: 48px; }
.lrow-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lrow-t { font-weight: 700; font-size: 16px; line-height: 1.3; }
.lrow-t .pill { margin-left: 6px; vertical-align: 1px; }
.lrow-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--muted); }
.lrow-meta span { display: inline-flex; align-items: center; gap: 5px; }
.lrow-meta .ic { width: 15px; height: 15px; }
.lrow-meta .st { font-weight: 700; color: var(--ink-2); }
.st-done .lrow-meta .st { color: var(--ok); }
.lrow-txt .bar { max-width: 280px; }
.lrow-act { display: flex; gap: 8px; flex: none; }

/* study guide / prose */
.guide { display: block; }
.toc { position: sticky; top: calc(var(--top) + 53px); z-index: 15; margin: -24px -20px 18px; background: var(--bg); padding: 8px 20px; border-bottom: 1px solid var(--line); }
.toc details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.toc summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; font-weight: 700; cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.toc details[open] summary::after { transform: rotate(-135deg); }
.toc ol { list-style: none; margin: 0; padding: 4px 8px 12px; max-height: 60vh; overflow-y: auto; }
.toc ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 34px; }
.toc a { display: block; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-size: 14px; line-height: 1.35; }
.toc a:hover { background: var(--surface-2); color: var(--ink); }
.toc a.on { color: var(--ink); background: rgba(242, 165, 22, .16); font-weight: 650; }
.toc-l > a { font-weight: 700; color: var(--ink); display: flex; gap: 10px; align-items: flex-start; }
.toc-n { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.guide-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.g-sec { padding-bottom: 28px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.g-sec:last-child { border-bottom: 0; }
.g-sec > h2 { font-size: clamp(22px, 3vw, 28px); max-width: 30em; }
.g-sec .kicker { color: var(--warn); }
:root[data-theme="dark"] .g-sec .kicker { color: var(--accent-ink); }
.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 30% { background: rgba(242, 165, 22, .28); } 100% { background: transparent; } }
.prose { max-width: 75ch; font-size: 17px; line-height: 1.7; color: var(--ink); overflow-wrap: break-word; }
.prose p { margin: 0 0 1.05em; }
.prose h4 { font-size: 19px; margin: 1.8em 0 .6em; padding: 4px 0; scroll-margin-top: 140px; border-radius: 6px; }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--accent); }
.tw { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.3em; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.prose table, .numtable, .ptable { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.prose th, .prose td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose thead th { background: var(--surface-3); font-weight: 750; font-size: 13.5px; text-transform: none; color: var(--ink); white-space: nowrap; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:nth-child(even) td { background: var(--surface-2); }
.callout { position: relative; margin: 1.3em 0; padding: 14px 18px 14px 20px; border-radius: 12px; background: rgba(10, 90, 140, .07); border-left: 5px solid var(--link); font-size: 16px; line-height: 1.6; }
.callout.warn { background: var(--bad-bg); border-left-color: var(--bad); }
.callout.code { background: var(--code-bg); border-left-color: var(--code); }
.callout > :last-child { margin-bottom: 0; }
.guide-body { min-width: 0; }
@media (min-width: 1280px) {
  .guide { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
  .toc { position: sticky; top: calc(var(--top) + 70px); margin: 0; padding: 0; border: 0; background: none; max-height: calc(100vh - 100px); overflow: auto; }
  .toc details { background: transparent; border: 0; }
  .toc summary { padding: 0 10px; pointer-events: none; color: var(--muted); text-transform: uppercase; font-size: 12.5px; letter-spacing: .08em; }
  .toc summary::after { display: none; }
  .toc ol { max-height: none; overflow: visible; padding: 0; }
}

/* worked examples */
.ex-list { display: grid; gap: 16px; }
.ex { padding: 20px 22px; }
.ex header h3 { font-size: 18px; margin: 4px 0 12px; }
.ex-n { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--warn); }
:root[data-theme="dark"] .ex-n { color: var(--accent-ink); }
.ex-problem { padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 12px; }
.ex-problem p { margin: 0; }
.steps { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.step { display: flex; gap: 12px; align-items: flex-start; padding: 8px 4px; font-family: var(--font); }
.sn { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.ex-answer { padding: 14px 16px; border-radius: 12px; background: var(--ok-bg); border: 1px solid rgba(46, 125, 50, .3); margin-bottom: 12px; }
.ex-answer small { color: var(--ok); }
.ex-answer p { margin: 0; font-weight: 650; }
.ex-act { display: flex; flex-wrap: wrap; gap: 10px; }
.rv { animation: rv .35s ease both; }
@keyframes rv { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* key terms */
.terms-tools { position: sticky; top: calc(var(--top) + 53px); z-index: 10; background: var(--bg); margin: -24px -20px 12px; padding: 12px 20px 8px; border-bottom: 1px solid var(--line); }
.az { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.az a, .az span { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 8px; font-weight: 750; font-size: 14px; text-decoration: none; }
.az a { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.az a:hover { border-color: var(--accent); }
.az span { color: var(--line-2); }
@media (pointer: coarse) { .az a, .az span { min-width: 44px; height: 44px; } .az span { display: none; } }
.tgroup h3 { font-size: 22px; color: var(--warn); margin: 22px 0 8px; scroll-margin-top: 200px; }
:root[data-theme="dark"] .tgroup h3 { color: var(--accent-ink); }
.tgroup dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.term { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.term dt { font-weight: 750; margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.term dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* formulas */
.f-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fcard-f { padding: 18px 20px; }
.fcard-f h3 { font-size: 16px; }
.formula { font-family: var(--mono); font-size: 16px; padding: 12px 14px; border-radius: 10px; background: var(--navy); color: #fff; margin-bottom: 10px; overflow-x: auto; white-space: pre-wrap; border-left: 4px solid var(--accent); }
.fcard-f p { margin: 0 0 6px; color: var(--ink-2); font-size: 14.5px; }
.fsec { margin-bottom: 30px; }

/* cheat sheet */
.cheat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.cheat-head h2 { font-size: 22px; margin: 0; }
.cheat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cs-must { grid-row: span 2; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.checks li { position: relative; padding-left: 26px; line-height: 1.5; font-size: 15px; }
.checks li::before { content: ""; position: absolute; left: 3px; top: .35em; width: 12px; height: 7px; border-left: 3px solid var(--ok); border-bottom: 3px solid var(--ok); transform: rotate(-45deg); }
.checks.tips li::before { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--accent); transform: none; top: .45em; left: 4px; }
.numtable th, .numtable td { padding: 9px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.numtable td { font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
.numtable tr:last-child th, .numtable tr:last-child td { border-bottom: 0; }
.numtable tr:nth-child(even) { background: var(--surface-2); }
.numtable th { font-weight: 550; color: var(--ink-2); }
.cheat .tw { margin: 0; }
.flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flist code { display: block; font-family: var(--mono); font-size: 14.5px; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; white-space: pre-wrap; }

/* figure canvas */
.figc { position: relative; width: 100%; }
.figc::before { content: ""; display: block; padding-top: 60%; }
.figc-paper {
  position: absolute; inset: 0; border-radius: 12px; border: 1px solid var(--line-2); overflow: hidden;
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(rgba(11, 61, 94, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 61, 94, .04) 1px, transparent 1px);
  background-size: 10% 16.667%, 10% 16.667%, 2.5% 4.1667%, 2.5% 4.1667%; background-position: -1px -1px;
}
.crn { position: absolute; width: 14px; height: 14px; border: 2px solid var(--line-2); }
.crn.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.crn.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.crn.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.crn.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.figc-ghost { position: absolute; inset: 0; display: grid; place-items: center; color: var(--line-2); opacity: .55; pointer-events: none; }
.figc-ghost .ic { width: 22%; height: auto; stroke-width: 1; }
.figw { margin: 0; min-width: 0; }
.figc-cap { display: flex; align-items: center; gap: .55em; margin-bottom: .5em; font-size: .78em; line-height: 1.3; color: var(--ink-2); min-width: 0; }
.figc-cap b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.figc-cap > span { flex: none; display: inline-flex; align-items: center; gap: .3em; padding: .2em .6em; border-radius: 99px; background: var(--navy); color: #fff; font-size: .82em; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.figc-cap > span .ic { width: 1.1em; height: 1.1em; }
.figc-foot { margin-top: .45em; text-align: right; font-size: .62em; color: var(--muted); letter-spacing: .03em; }
.mk {
  position: absolute; z-index: 2; transform: translate(-50%, -50%); width: 2.3em; height: 2.3em; min-width: 26px; min-height: 26px; padding: 0; border-radius: 50%;
  border: 2px solid var(--navy); background: #fff; color: var(--navy); font-weight: 850; font-size: .82em; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 6px rgba(11, 61, 94, .25); transition: transform .2s, background .2s;
}
.mk::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.mk:hover { transform: translate(-50%, -50%) scale(1.08); }
.mk.cur { background: var(--accent); color: var(--on-accent); border-color: var(--navy); z-index: 3; transform: translate(-50%, -50%) scale(1.18); }
.mk.cur::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--accent); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
:root[data-theme="dark"] .mk:not(.cur) { background: #16324a; color: #fff; border-color: #86c8ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk:not(.cur) { background: #16324a; color: #fff; border-color: #86c8ff; } }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.legend li { display: flex; gap: .7em; align-items: flex-start; padding: .45em .6em; border-radius: 10px; transition: background .2s; }
.legend li.on { background: rgba(242, 165, 22, .18); }
.lg-n { flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; border: 2px solid var(--navy); display: grid; place-items: center; font-weight: 850; font-size: .8em; color: var(--navy); background: #fff; }
.legend li.on .lg-n { background: var(--accent); }
.legend small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; margin-top: 2px; }
.fig-list { display: grid; gap: 18px; }
.figcard { padding: 20px 22px; }
.figcard header h3 { font-size: 18px; margin: 4px 0 6px; }
.figcard header p { color: var(--ink-2); font-size: 15px; }
.figcard-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; font-size: 15px; }
.figw.sm { font-size: 15px; }
.figcard footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.refs { display: flex; flex-wrap: wrap; gap: 6px; }
.artdir { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.artdir summary { cursor: pointer; font-weight: 650; color: var(--muted); font-size: 14px; min-height: 40px; display: flex; align-items: center; }
.artdir p { font-size: 13.5px; color: var(--ink-2); margin: 6px 0 0; }

/* flashcards tab boxes */
.boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; }
.box { position: relative; overflow: hidden; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); padding: 10px 6px 14px; text-align: center; }
.box b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.box small { display: block; color: var(--muted); font-size: 12px; font-weight: 650; }
.box > span { position: absolute; left: 0; right: 0; bottom: 0; max-height: 6px; height: 6px !important; background: var(--line-2); }
.box.b1 > span { background: #c62828; } .box.b2 > span { background: #ef6c00; } .box.b3 > span { background: #f2a516; } .box.b4 > span { background: #7cb342; } .box.b5 > span { background: #2e7d32; }
.box.new { background: var(--surface); }
.boxes-note { margin: 0 0 14px; }

/* ------------------------------------------------------------------ quiz */
.quiz-intro, .quiz-res, .fc-done { text-align: center; max-width: 720px; margin: 0 auto; }
.qi-ic, .fc-done > .ic { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 12px; display: grid; place-items: center; background: rgba(242, 165, 22, .18); color: var(--warn); }
.fc-done > .ic { padding: 14px; }
.qi-ic .ic { width: 32px; height: 32px; }
.quiz { max-width: 820px; margin: 0 auto; }
.quiz-top { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); font-weight: 650; margin-bottom: 8px; }
.score { display: inline-flex; align-items: center; gap: 6px; }
.score .ic { color: var(--accent); width: 17px; height: 17px; }
.quiz .q { font-size: 21px; margin: 18px 0 16px; line-height: 1.35; }
.choices { display: grid; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 16px 10px 10px; text-align: left; cursor: pointer;
  background: var(--surface); border: 2px solid var(--line-2); border-radius: 14px; font-size: 16px; line-height: 1.4; transition: border-color .15s, background .15s, transform .1s;
}
.choice:hover:not([aria-disabled]) { border-color: var(--navy-2); }
.choice:active:not([aria-disabled]) { transform: scale(.995); }
.cl { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); font-weight: 850; color: var(--ink-2); }
.cl .ic { width: 20px; height: 20px; stroke-width: 3; }
.ct { flex: 1; min-width: 0; }
.choice.right { border-color: var(--ok); background: var(--ok-bg); }
.choice.right .cl { background: var(--ok); color: #fff; }
.choice.wrong { border-color: var(--bad); background: var(--bad-bg); }
.choice.wrong .cl { background: var(--bad); color: #fff; }
.choice.dim { opacity: .62; }
.choice[aria-disabled] { cursor: default; }
.fb { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid; animation: rv .3s ease both; }
.fb strong { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fb strong .ic { stroke-width: 3; }
.fb p { margin: 0; color: var(--ink-2); }
.fb.ok { background: var(--ok-bg); border-color: rgba(46, 125, 50, .35); }
.fb.ok strong { color: var(--ok); }
.fb.no { background: var(--bad-bg); border-color: rgba(198, 40, 40, .3); }
.fb.no strong { color: var(--bad); }
.quiz-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.quiz-foot .link { font-size: 14px; min-height: 44px; }
.res-top { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; text-align: left; margin-bottom: 8px; }
.res-top h2 { margin-bottom: 4px; }
.res-top .ring b { font-size: 28px; }
.missed { list-style: none; margin: 0 0 20px; padding: 0; text-align: left; display: grid; gap: 8px; }
.missed a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--surface-2); }
.missed small { display: block; color: var(--ok); margin-top: 4px; font-weight: 650; }

/* ------------------------------------------------------------------ lesson player */
.v-player { --pad: 16px; }
@media (min-width: 1024px) { .v-player { --pad: 28px; } }
.player { position: relative; display: flex; flex-direction: column; }
#view.v-player:not(.v-read):not(.fluid) { display: flex; flex-direction: column; height: 100vh; min-height: 0; }
@supports (height: 100dvh) { #view.v-player:not(.v-read):not(.fluid) { height: 100dvh; } }
#view.v-player:not(.v-read):not(.fluid) .player { flex: 1; min-height: 0; }
#view.v-player:not(.v-read):not(.fluid) .ai-note { flex: none; padding-top: 6px; padding-bottom: 8px; font-size: 11.5px; border-top: 0; }
.pl-head { display: flex; align-items: center; gap: 8px 10px; padding: 10px max(var(--pad), env(safe-area-inset-right, 0px)) 8px max(10px, env(safe-area-inset-left, 0px)); flex-wrap: wrap; }
.pl-title { flex: 1; min-width: min(220px, 100%); display: flex; flex-direction: column; }
.pl-title small { font-size: 12.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.free-t { color: var(--warn); }
.pl-title .pl-h { margin: 0; font-weight: 750;  font-size: 17px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tools { display: flex; gap: 2px; margin-left: auto; }
.stage-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 0 max(var(--pad), env(safe-area-inset-right, 0px)) 0 max(var(--pad), env(safe-area-inset-left, 0px)); touch-action: pan-y; }
.stage {
  position: relative; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-2);
  overflow: hidden; font-size: 18px; line-height: 1.45;
}
.player:not(.fluid) .stage { overflow-y: auto; }
.slide { display: flex; flex-direction: column; min-height: 100%; padding: 2em 2.4em; }
.slide > div { flex: 1; }
.in-r { animation: inR .28s ease both; } .in-l { animation: inL .28s ease both; }
@keyframes inR { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes inL { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.s-kick { display: flex; align-items: center; gap: .4em; font-size: max(11.5px, .7em); text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--warn); margin: 0 0 .55em; }
:root[data-theme="dark"] .s-kick { color: var(--accent-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .s-kick, :root:not([data-theme="light"]) .ex-n, :root:not([data-theme="light"]) .g-sec .kicker, :root:not([data-theme="light"]) .tgroup h3, :root:not([data-theme="light"]) .ql-ic { color: var(--accent-ink); } }
.s-kick .ic { width: 1.2em; height: 1.2em; }
.slide h2 { font-size: 1.62em; line-height: 1.18; margin: 0 0 .6em; letter-spacing: -.015em; }

/* title */
.slide.s-title { background: radial-gradient(130% 120% at 100% 0%, #135f8f 0%, var(--navy) 50%, var(--navy-3) 100%); color: #fff; position: relative; }
.slide.s-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .35em; background: linear-gradient(90deg, var(--accent), #ffd27a 60%, transparent); }
.t-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.2em; align-items: center; }
.t-kick { display: inline-flex; align-items: center; gap: .45em; color: var(--accent-ink); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .78em; margin: 0 0 .8em; }
.t-kick .ic { width: 1.2em; height: 1.2em; }
.t-main .t-h { font-size: 2.15em; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .6em; }
.t-meta { display: flex; flex-wrap: wrap; gap: .5em 1.2em; color: #cfe2f1; font-size: .78em; align-items: center; margin: 0; }
.t-meta span { display: inline-flex; align-items: center; gap: .4em; }
.t-meta .ic { width: 1.15em; height: 1.15em; color: var(--accent-ink); }
.t-meta .pill.free { background: rgba(242, 165, 22, .2); color: #ffd27a; font-size: .95em; }
.t-obj { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: .8em; padding: 1em 1.2em; }
.t-obj h3 { color: #fff; font-size: .78em; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .7em; color: var(--accent-ink); }
.t-obj ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.t-obj li { display: flex; gap: .55em; align-items: flex-start; font-size: max(13.5px, .76em); line-height: 1.4; color: #e7f0f8; }
.t-obj li .ic { width: 1.15em; height: 1.15em; color: var(--accent-ink); stroke-width: 3; margin-top: .1em; }

/* bullets */
.b-in { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2em; align-items: center; }
.bl { list-style: none; margin: 0; padding: 0; display: grid; gap: .62em; }
.bl li { position: relative; padding-left: 1.3em; font-size: 1.02em; line-height: 1.4; }
.bl li::before { content: ""; position: absolute; left: 0; top: .48em; width: .5em; height: .5em; border-radius: .14em; background: var(--accent); }
.spot { position: relative; display: block; width: 100%; border-radius: 1em; overflow: hidden; background: #eef5fa; }
.spot::before { content: ""; display: block; padding-top: 75%; }
.spot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s; }
.spot.ok .spot-img { opacity: 1; }
.spot-fb {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; padding: 1em; text-align: center;
  color: #0b3d5e; background: radial-gradient(circle at 50% 42%, rgba(242, 165, 22, .22) 0, rgba(242, 165, 22, .07) 32%, transparent 33%), linear-gradient(160deg, #eef5fa, #e2edf5);
}
.spot-fb .ic { width: 30%; height: auto; max-width: 96px; stroke-width: 1.5; }
.spot-fb-l { font-size: .72em; font-weight: 700; color: #33536e; max-width: 90%; }
.spot.ok .spot-fb { visibility: hidden; }
:root[data-theme="dark"] .spot, :root[data-theme="dark"] .spot-fb { background-color: #e6eef5; }
.b-img .spot { box-shadow: 0 .3em 1em rgba(11, 61, 94, .12); }

/* figure / hotspot */
.fig-in { display: flex; flex-direction: column; }
.fig-row { flex: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.6em; align-items: center; }
.fig-row .figw { font-size: .9em; }
.fig-row .legend { font-size: max(13.5px, .82em); }
.fig-row .legend li { padding: .4em .5em; }
.hs-txt h2 { font-size: 1.35em; margin: .4em 0 .5em; }
.hs-txt p { font-size: .98em; color: var(--ink-2); line-height: 1.5; margin: 0; }
.hs-n { display: inline-flex; align-items: baseline; gap: .35em; padding: .25em .7em .25em .3em; border-radius: 99px; background: rgba(242, 165, 22, .16); font-weight: 850; font-size: 1em; }
.hs-n::first-letter { color: inherit; }
.hs-n { position: relative; }
.hs-n small { font-size: .7em; font-weight: 650; color: var(--muted); }
.hs-n { counter-reset: none; }

/* example */
.ex-in .ex-problem { font-size: .95em; padding: .75em 1em; margin-bottom: .8em; }
.ex-in .ex-problem p { line-height: 1.45; }
.ex-in .steps { gap: .3em; margin-bottom: .8em; font-size: .95em; }
.ex-in .step { padding: .2em 0; gap: .7em; }
.ex-in .sn { width: 1.6em; height: 1.6em; font-size: .78em; margin-top: .05em; }
.ex-in .ex-answer { font-size: .95em; padding: .75em 1em; }
.ex-in .btn { font-size: max(14px, .8em); }

/* numbers */
.num-in .numtable { font-size: max(14px, .9em); }
.num-in .numtable th, .num-in .numtable td { padding: .5em .9em; }

/* quiz slide */
.q-in .q { font-size: 1.32em; margin: 0 0 .9em; line-height: 1.3; }
.q-in .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
.q-in .choice { font-size: max(15px, .9em); min-height: max(48px, 3em); padding: .5em .8em .5em .5em; gap: .7em; }
.q-in .cl { width: max(30px, 1.8em); height: max(30px, 1.8em); }
.q-in .fb { font-size: max(14.5px, .86em); margin-top: .8em; padding: .7em .9em; }
.q-hint { color: var(--muted); font-size: max(13px, .75em); margin: .9em 0 0; }
.q-in .link.sm { margin-top: .4em; }

/* controls */
.pl-ctrl { display: flex; align-items: center; gap: 12px; padding: 10px max(var(--pad), env(safe-area-inset-right, 0px)) 8px max(var(--pad), env(safe-area-inset-left, 0px)); flex: none; }
.nav-btn {
  flex: none; height: 52px; min-width: 52px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-weight: 700; font-size: 15px; padding: 0 12px; box-shadow: var(--shadow-1);
}
.nav-btn .ic { width: 24px; height: 24px; }
.nav-btn.next { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.nav-btn.wide { padding: 0 18px; }
.nav-btn:disabled { opacity: .4; cursor: default; }
.scrub { flex: 1; min-width: 0; }
.scrub-row { display: flex; gap: 12px; align-items: baseline; font-size: 13.5px; margin-bottom: 2px; }
.counter { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sec-name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.scrub input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 0; cursor: pointer; touch-action: none;
}
.scrub input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--p, 0%), var(--surface-3) var(--p, 0%)); }
.scrub input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--surface-3); }
.scrub input[type=range]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--accent); }
.scrub input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.scrub input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
.narr { flex: none; margin: 0 max(var(--pad), env(safe-area-inset-right, 0px)) 8px max(var(--pad), env(safe-area-inset-left, 0px)); padding: 12px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; max-height: 20vh; overflow-y: auto; }
.narr .narr-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 4px; }
.narr .narr-h .ic { width: 16px; height: 16px; }
.narr p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 90ch; }
.drawer-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(5, 18, 30, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
.slide-drawer {
  position: fixed; z-index: 71; top: 0; bottom: 0; right: 0; width: min(380px, 90vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; transform: translateX(102%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) 0;
}
.dr-open .slide-drawer { transform: none; visibility: visible; }
.dr-open .drawer-scrim { opacity: 1; pointer-events: auto; }
.dr-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 10px 18px; border-bottom: 1px solid var(--line); }
.dr-list { flex: 1; overflow-y: auto; padding: 6px 8px 18px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.dr-g h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 10px 4px; }
.dr-g ol { list-style: none; margin: 0; padding: 0; }
.dr-g button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; background: none; border-radius: 10px; text-align: left; cursor: pointer; font-size: 14px; color: var(--ink-2);
}
.dr-g button:hover { background: var(--surface-2); }
.dr-g button.on { background: rgba(242, 165, 22, .18); color: var(--ink); font-weight: 700; }
.dn { flex: none; width: 28px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface-3); font-variant-numeric: tabular-nums; }
.dr-g button.seen .dn { background: var(--navy); color: #fff; }
.dr-g button.on .dn { background: var(--accent); color: var(--on-accent); }
.dt { flex: 1; min-width: 0; line-height: 1.3; }
.dr-g button .ic { width: 16px; height: 16px; color: var(--muted); }
.player.pseudo-fs { position: fixed; inset: 0; z-index: 90; background: var(--bg); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.pfs .topbar, .pfs .tabbar { display: none; }
.player:fullscreen { background: var(--bg); width: 100vw; height: 100vh; }
.player:-webkit-full-screen { background: var(--bg); width: 100vw; height: 100vh; }

/* fluid (phones & narrow portrait): content flows, page scrolls */
.player.fluid .stage { font-size: 16px; border-radius: 16px; }
.player.fluid .stage-wrap { display: block; margin-top: 2px; }
.player.fluid .slide { padding: 1.3em 1.15em 1.4em; min-height: 56vw; }
.player.fluid .slide h2 { font-size: 1.38em; }
.player.fluid .t-in, .player.fluid .b-in, .player.fluid .fig-row { grid-template-columns: minmax(0, 1fr); gap: 1.2em; }
.player.fluid .t-main .t-h { font-size: 1.75em; }
.player.fluid .b-img { max-width: 300px; width: 72%; margin: 0 auto; }
.player.fluid .q-in .choices { grid-template-columns: minmax(0, 1fr); }
.player.fluid .q-in .choice { font-size: 1em; }
.player.fluid .q-in .q { font-size: 1.2em; }
.player.fluid .pl-ctrl { position: sticky; bottom: var(--tab); z-index: 12; background: color-mix(in srgb, var(--bg) 92%, transparent); background: var(--bg); border-top: 1px solid var(--line); margin-top: 10px; }
.player.fluid .narr { max-height: none; margin-top: 8px; }
.player.fluid .figw { font-size: 13px; }
.player.fluid .hs-txt h2 { font-size: 1.2em; }

/* reader */
.reader { padding: 8px max(20px, env(safe-area-inset-right, 0px)) 20px max(20px, env(safe-area-inset-left, 0px)); }
.read-body { max-width: 75ch; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px clamp(18px, 5vw, 48px); box-shadow: var(--shadow-1); }
.read-body .g-sec { border: 0; margin: 0; padding: 0; }
.read-end { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 10px; }

/* ------------------------------------------------------------------ flashcards */
.fc-setup { margin-bottom: 18px; }
.fc-scope { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-bottom: 14px; }
.fc-scope .lbl, .fc-modes::before { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 750; color: var(--muted); }
.fc-scope .sel { flex: 1 1 240px; min-width: 0; }
.fc-scope .sel select { width: 100%; }
.fc-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mode { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; font-weight: 650; font-size: 14.5px; color: var(--ink-2); }
.mode .ic { width: 17px; height: 17px; }
.mode.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.mode.on .ic { color: var(--accent-ink); }
.study { max-width: 760px; margin: 0 auto; }
.fc-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.fc-bar .meta { white-space: nowrap; font-weight: 650; }
.fc-bar .bar { flex: 1; }
.star .ic { width: 24px; height: 24px; }
.star.on { color: #e09a00; background: rgba(242, 165, 22, .15); }
.flip { perspective: 1600px; cursor: pointer; outline: 0; border-radius: var(--r-lg); -webkit-user-select: none; user-select: none; }
.flip:focus-visible .face { box-shadow: 0 0 0 3px var(--accent), var(--shadow-2); }
.flip-in { display: grid; transition: transform .6s cubic-bezier(.2, .75, .25, 1); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.flip.flipped .flip-in { transform: rotateY(180deg); }
.face {
  grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 340px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.face.back { transform: rotateY(180deg); border-top: 5px solid var(--accent); }
.face.front { border-top: 5px solid var(--navy); }
.face-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lvl { display: inline-flex; gap: 3px; }
.lvl i { width: 18px; height: 6px; border-radius: 3px; background: var(--surface-3); }
.lvl i.on { background: var(--accent); }
.ref { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--code); background: var(--code-bg); padding: 4px 10px; border-radius: 8px; }
.ref .ic { width: 15px; height: 15px; }
.face-body { flex: 1; display: flex; align-items: center; gap: 22px; padding: 18px 0; }
.face .spot.fc { width: 170px; flex: none; font-size: 14px; }
.spot.ic-only::before { padding-top: 100%; }
.front-t { font-size: 22px; line-height: 1.38; font-weight: 650; margin: 0; flex: 1; min-width: 0; }
.back-t { font-size: 19px; line-height: 1.55; margin: 0; }
.face-foot { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.face-foot .ic { width: 15px; height: 15px; }
.face-foot a { color: var(--link); text-decoration: none; font-weight: 650; min-height: 32px; display: inline-flex; align-items: center; }
.fc-actions { margin-top: 16px; display: flex; justify-content: center; }
.rate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.rbtn { min-height: 60px; border-radius: 14px; border: 0; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 16px; box-shadow: var(--shadow-1); }
.rbtn small { font-size: 12px; opacity: .92; font-weight: 600; }
.rbtn.again { background: #c62828; } .rbtn.hard { background: #9a5a00; } .rbtn.good { background: #2e7d32; } .rbtn.easy { background: #1565c0; }
.rbtn:active { transform: translateY(1px); }
.kbd-help { text-align: center; color: var(--muted); font-size: 13px; margin-top: 18px; }
@media (pointer: coarse) { .kbd-help { display: none; } }

/* ------------------------------------------------------------------ search */
.search-big { position: sticky; top: var(--top); z-index: 10; background: var(--bg); padding: 8px 0 12px; }
.sstatus .sprog { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.sprog .bar { grid-column: 1 / -1; }
.res-sum { margin: 6px 0 10px; }
.res-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.res-jump a { min-height: 36px; }
.rgroup { margin-bottom: 26px; }
.rgroup h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; scroll-margin-top: 140px; }
.rgroup h2 .ic { color: var(--accent); }
.rgroup ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.rgroup a { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.rgroup a:hover { border-color: var(--accent); }
.r-w { font-size: 12px; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.r-b { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

/* ------------------------------------------------------------------ progress */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 22px; }
.tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.tile b { display: block; font-size: 24px; line-height: 1.1; }
.tile b small { font-size: 15px; color: var(--muted); font-weight: 650; }
.tile span { color: var(--muted); font-size: 13.5px; }
.tile-ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(242, 165, 22, .16); display: grid; place-items: center; color: var(--warn); flex: none; }
:root[data-theme="dark"] .tile-ic { color: var(--accent-ink); }
.tile-ic .ic { width: 26px; height: 26px; }
.pmod { margin-bottom: 12px; overflow: hidden; }
.pmod summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; min-height: 64px; }
.pmod summary::-webkit-details-marker { display: none; }
.pm-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm-t strong { font-size: 15.5px; line-height: 1.3; }
.pm-t small { color: var(--muted); font-size: 13px; }
.pmod .chev { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
.pmod[open] .chev { transform: rotate(180deg); }
.ptable { border-top: 1px solid var(--line); font-size: 14.5px; }
.ptable th, .ptable td { padding: 10px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ptable th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); }
.ptable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable a { color: var(--ink); text-decoration: none; font-weight: 600; }
.ptable a:hover { color: var(--link); }
.stp { display: inline-block; font-size: 12px; font-weight: 750; padding: 2px 9px; border-radius: 99px; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.stp.st-done { background: var(--ok-bg); color: var(--ok); }
.stp.st-prog { background: var(--warn-bg); color: var(--warn); }

/* coming soon */
.soon-panel { max-width: 640px; margin: 20px auto; text-align: center; padding: 40px 24px; background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.soon-panel > .ic { width: 52px; height: 52px; color: var(--accent); margin-bottom: 10px; }
.soon-panel p { color: var(--ink-2); }
.soon-list { text-align: left; list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 6px; }
.soon-list li { padding: 10px 14px; background: var(--surface-2); border-radius: 10px; font-size: 15px; }
.soon-list span { display: inline-block; min-width: 78px; font-weight: 750; color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------------ modal, toast */
.modal-back { position: fixed; inset: 0; z-index: 300; background: rgba(5, 18, 30, .6); display: grid; place-items: center; padding: 20px; animation: fade .18s ease; }
.modal-back.out { opacity: 0; transition: opacity .16s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(500px, 100%); background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: 28px 26px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); animation: pop .22s ease; max-height: 90vh; overflow-y: auto; }
@keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.modal-ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(242, 165, 22, .18); color: var(--warn); display: grid; place-items: center; margin-bottom: 14px; }
.modal-ic .ic { width: 28px; height: 28px; }
.modal h2 { font-size: 22px; }
.modal-body { color: var(--ink-2); font-size: 15.5px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.toast {
  position: fixed; z-index: 250; left: 50%; bottom: calc(var(--tab) + 20px); transform: translate(-50%, 20px); opacity: 0; transition: all .25s ease;
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: var(--navy); color: #fff; font-weight: 650; box-shadow: var(--shadow-2); max-width: calc(100vw - 32px);
}
.toast .ic { color: var(--accent-ink); stroke-width: 3; }
.toast.in { transform: translate(-50%, 0); opacity: 1; }

/* ------------------------------------------------------------------ landing */
.lp { min-height: 100vh; }
#landing { max-width: 1160px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); }
.lp-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 18px; }
.lp-brand { display: flex; align-items: center; gap: 12px; font-size: 19px; }
.lp-hero { background: radial-gradient(120% 140% at 100% 0%, #135f8f 0%, var(--navy) 45%, var(--navy-3) 100%); color: #fff; border-radius: var(--r-lg); padding: clamp(28px, 5vw, 56px); margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: var(--shadow-2); }
.lp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--accent), #ffd27a 60%, transparent); }
.lp-hero .kicker { color: var(--accent-ink); }
.lp-hero h1 { font-size: clamp(30px, 5.5vw, 52px); max-width: 16em; letter-spacing: -.02em; }
.lp-hero .lead { color: #e1edf7; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 30px; }
.lp-card { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.lp-card.live::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--accent); }
.lp-card.dev { background: var(--surface-2); }
.lp-card h2 { font-size: 22px; margin: 10px 0 2px; }
.lp-card p { color: var(--ink-2); font-size: 15px; margin: 0; }
.lp-ed { font-size: 13px !important; color: var(--muted) !important; margin-top: 6px !important; }
.lp-card-top { display: flex; justify-content: space-between; align-items: center; }
.lp-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--navy); color: var(--accent-ink); }
.lp-ic .ic { width: 28px; height: 28px; }
.lp-card.dev .lp-ic { background: var(--surface-3); color: var(--muted); }
.lp-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
#landing .ai-note { padding-left: 0; padding-right: 0; }

/* ================================================================== v2: shell additions */
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 12px 6px; }
.sb-av { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; }
.sb-un { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-un small { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.sb-un strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-link kbd, .sb-kbd { margin-left: auto; font-size: 11px; padding: 1px 6px; color: var(--muted); }
.sb-lock { flex: none; width: 14px; display: grid; place-items: center; margin-top: 2px; color: var(--muted); }
.sb-lock .ic { width: 14px; height: 14px; }
.sb-lessons a.locked { color: var(--muted); }
#tbUser { display: contents; }
.h2 { font-size: 22px; }

/* locked lessons */
.lrow.locked { background: var(--surface-2); box-shadow: none; }
.lrow.locked .lnum { background: var(--surface-3); color: var(--muted); }
.lrow.locked .lnum .ic { width: 18px; height: 18px; }
.lrow.locked .lrow-t { color: var(--ink-2); }
.pill .ic { width: 13px; height: 13px; }
.lock-panel { max-width: 640px; margin: 24px auto; text-align: center; padding: 40px 28px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.lock-panel .kicker { justify-content: center; }
.lock-panel h1 { font-size: clamp(22px, 3.4vw, 28px); }
.lock-panel .lead { margin: 0 auto 6px; }
.lock-ic { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--navy); color: var(--accent-ink); }
.lock-ic .ic { width: 30px; height: 30px; }
.lock-panel .btn-row { margin: 18px 0 6px; }
.lock-open { list-style: none; padding: 0; margin: 0; text-align: left; display: grid; gap: 6px; }
.lock-open a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 12px; background: var(--surface-2); text-decoration: none; color: var(--ink); font-weight: 600; }
.lock-open .ic { color: var(--link); width: 16px; height: 16px; }

/* module intro video */
.vid-card { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0; overflow: hidden; margin-bottom: 18px; }
.vid-wrap { background: #000; display: flex; align-items: center; }
.mvid { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vid-meta { padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vid-meta .card-h { margin-bottom: 4px; }
@media (max-width: 900px) { .vid-card { grid-template-columns: minmax(0, 1fr); } }

/* figure artwork, photos and info */
.figc-cap .fig-tog { margin-left: auto; flex: none; }
.fig-tog > button { min-height: 36px; padding: 0 10px; font-size: 13px; }
.figc-art { position: relative; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; overflow: hidden; }
.figc-art .fig-img { display: block; width: 100%; height: auto; }
.figc-art .mk { font-size: .78em; }
.figc-photo { border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: #0b1a26; }
.figc-photo img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.figc-info { margin: .5em 0 0; font-size: max(13.5px, .78em); line-height: 1.45; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: .5em .8em; min-height: 2.6em; }
.figc-info b { color: var(--ink); }
.figc-info span { color: var(--muted); }
.spot.photo { background: #0b1a26; }
.spot.photo .spot-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ================================================================== v2: lesson player */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, [data-focus]:focus, #view:focus { outline: none; }
.pl-seg { align-items: center; }
.seg-tabs { display: inline-flex; gap: 2px; }
.seg-tabs > a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 9px; color: var(--ink-2); font-weight: 650; font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.seg-tabs > a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg-tabs .ic { width: 18px; height: 18px; }
.seg > .seg-x { position: relative; margin-left: 2px; }
.seg > .seg-x::before { content: ""; position: absolute; left: -2px; top: 10px; bottom: 10px; width: 1px; background: var(--line-2); }
.seg-x .cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--navy); color: #fff; font-size: 12px; display: inline-grid; place-items: center; }
.pl-labs { display: flex; align-items: center; gap: 8px; padding: 0 max(var(--pad), env(safe-area-inset-right, 0px)) 8px max(var(--pad), env(safe-area-inset-left, 0px)); overflow-x: auto; scrollbar-width: thin; flex: none; }
.pl-labs-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.pl-labs-l .ic { width: 16px; height: 16px; }
.lab-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px 12px 4px 10px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 650; font-size: 14px; white-space: nowrap; }
.lab-chip:hover { border-color: var(--link); }
.lab-chip > .ic { width: 17px; height: 17px; color: var(--link); }
.lab-done { display: inline-flex; align-items: center; gap: 3px; color: var(--ok); font-size: 12.5px; font-weight: 800; }
.lab-done .ic { width: 14px; height: 14px; stroke-width: 3; }
.lvl-b { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.6; border: 1px solid; }
.lvl-b.entry { color: var(--ok); background: var(--ok-bg); border-color: currentColor; }
.lvl-b.pro { color: var(--code); background: var(--code-bg); border-color: currentColor; }
.s-kick .lvl-b { margin-left: .4em; letter-spacing: .04em; font-size: max(11px, .9em); }
.lab-dlg { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.lab-dlg li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lab-dlg small { color: var(--muted); font-size: 13.5px; padding-left: 12px; }
.recap-labs { margin-top: 1.2em; padding: .9em 1em; border-radius: .8em; background: var(--surface-2); border: 1px solid var(--line); }
.recap-labs h3 { display: flex; align-items: center; gap: .45em; font-size: .82em; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 .6em; }
.lab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stage:focus { outline: none; }
.stage:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.stage.st-tall { line-height: 1.45; }
.stage.scrolls { box-shadow: var(--shadow-2), inset 0 -10px 10px -10px rgba(11, 61, 94, .25); }

/* key details */
.b-in.has-kd { grid-template-areas: "txt img" "kd kd"; align-items: start; row-gap: 1.1em; }
.b-in.has-kd .b-txt { grid-area: txt; }
.b-in.has-kd .b-img { grid-area: img; }
.b-in.has-kd .kd { grid-area: kd; }
.b-in.no-img { grid-template-columns: minmax(0, 1fr); }
.b-in.no-img.has-kd { grid-template-areas: "txt" "kd"; }
@media (min-width: 1200px) {
  .stage.st-wide .b-in.no-img.has-kd.kd-on { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "txt kd"; }
}
.kd { border: 1px solid var(--line); border-left: 4px solid var(--link); border-radius: .7em; background: var(--surface-2); padding: .6em 1em .7em; font-size: max(14.5px, .8em); }
.kd.closed { padding-bottom: .5em; }
.kd-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kd-h h3 { display: flex; align-items: center; gap: .45em; margin: 0; font-size: .82em; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.kd-h h3 .ic { width: 1.25em; height: 1.25em; color: var(--link); }
.kd-tog { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 650; font-size: 13.5px; cursor: pointer; }
.kd-tog .ic { width: 16px; height: 16px; }
.kd-b, .kd-b.prose { margin-top: .4em; line-height: 1.55; color: var(--ink); font-size: inherit; max-width: none; }
.kd-b p { margin: 0 0 .55em; }
.kd-b ul { margin: 0 0 .55em; padding-left: 1.25em; }
.kd-b li { margin: .15em 0; }
.kd-b > :last-child { margin-bottom: 0; }
.kd-b strong { color: var(--ink); }

/* checklist slide */
.ck-in h2 { margin-bottom: .35em; }
.ck-task { color: var(--ink-2); font-size: .9em; margin: 0 0 .7em; }
.ck-prog { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 .7em; position: sticky; top: -2em; z-index: 2; background: var(--surface); padding: .45em 0; }
.ck-count { font-size: max(14px, .82em); white-space: nowrap; color: var(--ink-2); }
.ck-count b { font-size: 1.15em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ck-prog .bar { flex: 1 1 120px; min-width: 100px; }
.ck-done { display: flex; align-items: center; gap: 8px; margin: 0 0 .7em; padding: .55em .8em; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-weight: 700; font-size: max(14px, .82em); }
.ck-done .ic { stroke-width: 3; }
.ck-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8em; }
.stage.st-wide .ck-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.ck-g { margin: 0; padding: .55em .8em .6em; border: 1px solid var(--line); border-radius: .7em; background: var(--surface-2); min-width: 0; }
.ck-g legend { display: flex; align-items: center; gap: 8px; padding: 0 .4em; font-weight: 800; font-size: max(13px, .74em); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.ck-gc { font-weight: 700; color: var(--muted); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ck-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1em; }
.ck-item { position: relative; border-radius: 8px; }
.ck-item input, .sc-safe-i input { position: absolute; left: .35em; top: .5em; width: 26px; height: 26px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ck-item label, .sc-safe-i label { display: flex; align-items: flex-start; gap: .65em; min-height: 44px; padding: .45em .4em .2em; cursor: pointer; font-size: max(15px, .86em); line-height: 1.4; color: var(--ink); }
.ck-box { flex: none; width: 24px; height: 24px; margin-top: .05em; border-radius: 7px; border: 2px solid var(--line-2); background: var(--surface); display: grid; place-items: center; color: transparent; transition: background .15s, border-color .15s; }
.ck-box .ic { width: 16px; height: 16px; stroke-width: 3.2; }
.ck-item input:checked + label .ck-box, .sc-safe-i input:checked + label .ck-box { background: var(--ok); border-color: var(--ok); color: #fff; }
.ck-item input:focus-visible + label .ck-box, .sc-safe-i input:focus-visible + label .ck-box { outline: 3px solid var(--accent); outline-offset: 2px; }
.ck-item input:hover + label .ck-box { border-color: var(--link); }
.ck-item.on .ck-t { color: var(--ink-2); }
.ck-why { margin: 0 0 .35em calc(24px + 1.05em); font-size: max(13px, .76em); line-height: 1.45; color: var(--muted); }
.ck-refs { margin-top: .9em; align-items: center; }
:root[data-theme="dark"] .ck-item input:checked + label .ck-box { color: #0a131d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ck-item input:checked + label .ck-box, :root:not([data-theme="light"]) .sc-safe-i input:checked + label .ck-box { color: #0a131d; } }
:root[data-theme="dark"] .sc-safe-i input:checked + label .ck-box { color: #0a131d; }

/* scenario slide */
.sc-in h2 { margin-bottom: .5em; }
.sc-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7em; margin-bottom: .8em; }
.stage.st-wide .sc-top { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.sc-card { border: 1px solid var(--line); border-radius: .7em; padding: .6em .9em; background: var(--surface-2); font-size: max(14.5px, .84em); }
.sc-card h3, .sc-step h3 { display: flex; align-items: center; gap: .45em; margin: 0 0 .35em; font-size: max(12.5px, .74em); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.sc-card h3 .ic { width: 1.2em; height: 1.2em; color: var(--link); }
.sc-sym h3 .ic { color: var(--warn); }
.sc-card p { margin: 0; line-height: 1.45; }
.sc-card ul { margin: 0; padding-left: 1.15em; line-height: 1.45; }
.sc-card li + li { margin-top: .2em; }
.sc-step { border: 1px solid var(--line); border-radius: .8em; padding: .7em .9em .8em; margin-bottom: .7em; background: var(--surface); }
.sc-step.cur { border-color: var(--link); box-shadow: 0 0 0 1px var(--link) inset; }
.sc-step.locked { background: var(--surface-2); }
.sc-step.locked > h3 { color: var(--muted); }
.sc-n { width: 1.75em; height: 1.75em; border-radius: 50%; display: inline-grid; place-items: center; background: var(--navy); color: #fff; font-size: .95em; letter-spacing: 0; flex: none; }
.sc-step.ok .sc-n { background: var(--ok); }
.sc-n .ic { width: 1em; height: 1em; stroke-width: 3; }
.sc-step.locked .sc-n { background: var(--surface-3); color: var(--muted); }
.sc-used { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 650; color: var(--ink-2); font-size: 1.05em; }
.sc-used b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-hint { margin: 0 0 .5em; color: var(--muted); font-size: max(13.5px, .78em); display: flex; align-items: center; gap: .4em; }
.sc-hint .ic { width: 1.1em; height: 1.1em; }
.sc-okline { display: flex; align-items: flex-start; gap: .5em; margin: 0; font-size: max(13.5px, .78em); color: var(--ink-2); }
.sc-okline .ic { color: var(--ok); flex: none; margin-top: .1em; }
.sc-safe { list-style: none; margin: 0 0 .5em; padding: 0; display: grid; gap: .1em; }
.sc-safe-i { position: relative; }
.sc-tests { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; grid-template-columns: minmax(0, 1fr); }
.stage.st-wide .sc-tests { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.sc-test { border: 1.5px solid var(--line-2); border-radius: .7em; background: var(--surface); overflow: hidden; }
.sc-test.on { border-color: var(--link); }
.sc-test.useful { border-color: var(--ok); }
.sc-test.less { border-style: dashed; }
.sc-test > button { display: flex; align-items: center; gap: .65em; width: 100%; min-height: 48px; padding: .5em .7em; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: max(14.5px, .84em); line-height: 1.35; color: var(--ink); }
.sc-test > button:disabled, .sc-test > button[aria-disabled="true"] { cursor: default; }
.sc-test > button:disabled { color: var(--ink-2); }
.sc-test > button:not(:disabled):not([aria-disabled="true"]):hover { background: var(--surface-2); }
.sc-k { flex: none; width: 2em; height: 2em; border-radius: .55em; display: grid; place-items: center; background: var(--surface-3); color: var(--link); }
.sc-k .ic { width: 1.15em; height: 1.15em; }
.sc-tl { flex: 1; min-width: 0; }
.sc-tl small { display: block; font-size: max(11.5px, .78em); font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sc-go { flex: none; font-size: max(12.5px, .78em); font-weight: 800; color: var(--link); padding: .2em .6em; border: 1.5px solid currentColor; border-radius: 99px; display: inline-flex; align-items: center; }
.sc-go .ic { width: 1em; height: 1em; }
.sc-test > button:disabled .sc-go { color: var(--muted); }
.sc-r { padding: 0 .8em .6em calc(2em + 1.35em); font-size: max(14px, .82em); line-height: 1.45; }
.sc-res { margin: 0 0 .25em; color: var(--ink); }
.sc-exp { margin: 0; color: var(--ink-2); }
.sc-tag { display: inline-flex; align-items: center; gap: .35em; margin: .4em 0 0; font-weight: 800; font-size: .9em; }
.sc-tag .ic { width: 1.05em; height: 1.05em; stroke-width: 3; }
.sc-tag.useful { color: var(--ok); }
.sc-tag.less { color: var(--muted); }
.sc-dx { border: 0; margin: 0 0 .6em; padding: 0; display: grid; gap: .4em; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.stage.st-wide .sc-dx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-f { position: relative; display: flex; align-items: center; gap: .6em; min-height: 48px; padding: .45em .8em; border: 2px solid var(--line-2); border-radius: .7em; cursor: pointer; font-size: max(14.5px, .86em); line-height: 1.35; background: var(--surface); }
.sc-f input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--navy-2); cursor: pointer; }
.sc-f:hover { border-color: var(--link); }
.sc-f.sel { border-color: var(--link); background: var(--surface-2); }
.sc-f.right { border-color: var(--ok); background: var(--ok-bg); }
.sc-f.wrong { border-color: var(--bad); background: var(--bad-bg); }
.sc-f.dim { opacity: .7; }
.sc-dx:disabled .sc-f { cursor: default; }
.sc-fl { flex: 1; min-width: 0; }
.sc-fm { flex: none; display: inline-flex; align-items: center; gap: .3em; font-weight: 800; font-size: .85em; }
.sc-f.right .sc-fm { color: var(--ok); }
.sc-f.wrong .sc-fm { color: var(--bad); }
.sc-fm .ic { width: 1.05em; height: 1.05em; stroke-width: 3; }
.sc-res-p { border-radius: .8em; padding: .8em 1em; margin-bottom: .5em; border: 1px solid; font-size: max(14.5px, .84em); }
.sc-res-p:focus { outline: none; }
.sc-res-p.ok { background: var(--ok-bg); border-color: rgba(46, 125, 50, .4); }
.sc-res-p.no { background: var(--bad-bg); border-color: rgba(198, 40, 40, .35); }
.sc-res-h { display: flex; align-items: center; gap: 1em; margin-bottom: .6em; }
.sc-res-h h3 { display: flex; align-items: center; gap: .4em; margin: 0 0 .2em; font-size: 1.15em; }
.sc-res-p.ok .sc-res-h h3 { color: var(--ok); }
.sc-res-p.no .sc-res-h h3 { color: var(--bad); }
.sc-res-h p { margin: 0; color: var(--ink-2); }
.sc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2em 1.4em; }
.stage.st-wide .sc-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.sc-grid h4 { margin: .5em 0 .25em; font-size: .78em; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.sc-grid p, .sc-grid ol, .sc-grid ul { margin: 0; line-height: 1.45; color: var(--ink); }
.sc-grid ol, .sc-grid ul { padding-left: 1.25em; }
.sc-grid li + li { margin-top: .15em; }
.sc-res-p .btn-row { margin-top: .7em; }

/* fluid-mode tweaks */
.player.fluid .ck-groups, .player.fluid .sc-tests, .player.fluid .sc-dx, .player.fluid .sc-grid { grid-template-columns: minmax(0, 1fr); }
.player.fluid .ck-prog { top: calc(var(--top) - 1px); }
.player.fluid .b-in.has-kd { grid-template-areas: "txt" "img" "kd"; }
.player.fluid .kd { font-size: 15px; }

/* flashcards v2 */
.fc-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.fc-nav .btn { flex: 1 1 0; max-width: 240px; min-height: 52px; }
.fc-nav .btn:disabled { opacity: .45; cursor: default; }
.fc-shuf .ic { width: 22px; height: 22px; }

/* ================================================================== v2: tools hub, labs, libraries */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tool-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .2s, transform .2s; min-height: 120px; }
.tool-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.tool-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.tool-ic .ic { width: 26px; height: 26px; }
.tool-card.soon .tool-ic { background: var(--surface-3); color: var(--muted); }
.tool-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tool-txt strong { font-size: 17px; }
.tool-txt small { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.tool-meta { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--link); }
.tool-meta .ic { width: 15px; height: 15px; }
.tool-card.soon .tool-meta { color: var(--muted); }
.tool-host, .lab-host { min-height: 320px; }
/* the whiteboard fills its host: give it a definite height so the canvas is not stretched by the symbol library */
.tool-host.tool-whiteboard { height: calc(100vh - 120px); height: calc(100dvh - 120px); min-height: 480px; }
.tool-host.tool-whiteboard > * { height: 100%; }
.page-h.row > .sel { min-width: 0; max-width: 100%; flex: 0 1 420px; }
.page-h.row > .sel select { width: 100%; }
.lab-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; }
.lab-h .kicker .ic { width: 16px; height: 16px; }
.lab-score { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-2); }
.lab-score .ic { color: var(--warn); }
.lab-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.pill.ltag { min-height: 32px; color: var(--link); }
.pill.ltag:hover { border-color: var(--link); }
.lab-sec { margin-bottom: 28px; }
.lab-sec .sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.lab-sec .sec-h .ic, .lib-sec .sec-h .ic { color: var(--accent); }
.lab-sec > .meta { margin: 0 0 12px; }
.lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.lab-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; }
.lab-card h3 { font-size: 17px; margin: 4px 0 0; }
.lab-card p { color: var(--ink-2); font-size: 14.5px; margin: 0; flex: 1; }
.lab-card .btn { align-self: flex-start; margin-top: 8px; }
.lab-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 24px; }
.lib-sec { margin-bottom: 30px; }
.lib-l { margin-bottom: 16px; }
.lib-lh { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 0 0 10px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.lib-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.lib-card:hover { border-color: var(--accent); }
.lib-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--link); flex: none; }
.lib-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.lib-t strong { font-size: 15.5px; line-height: 1.35; }
.lib-t small { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lib-meta { font-size: 13px; color: var(--muted); }
.lib-meta b { color: var(--ok); }
.lib-t .bar { margin-top: 4px; }

/* help dialog */
.modal.wide { width: min(760px, 100%); }
.kbd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 22px; margin-bottom: 8px; }
.kbd-grid h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); margin: 8px 0 6px; }
.kbd-grid dl { margin: 0; display: grid; gap: 4px; }
.kbd-grid dl > div { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: 4px 0; }
.kbd-grid dt { white-space: nowrap; }
.kbd-grid dt span { font-size: 12px; color: var(--muted); }
.kbd-grid dd { margin: 0; text-align: right; font-size: 14px; color: var(--ink); }

/* progress v2 */
.ceu-note { display: flex; gap: 8px; align-items: flex-start; margin: -8px 0 18px; }
.ceu-note .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.ptable tfoot th, .ptable tfoot td { background: var(--surface-2); font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--ink-2); border-bottom: 0; }
.pmod .tw { border: 0; border-radius: 0; box-shadow: none; }

@media (max-width: 700px) {
  .pl-seg { order: 3; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; }
  .pl-labs { display: none; }
  .seg-tabs > a, .seg > .seg-x { padding: 0 11px; }
  .tool-card { padding: 16px; }
  .lib-grid { grid-template-columns: minmax(0, 1fr); }
  .kbd-grid dd { font-size: 13.5px; }
}
@media (max-width: 700px) { .topbar [data-act="help"] { display: none; } }
@media (max-width: 420px) {
  .seg-tabs .ic { display: none; }
  .pl-tools [data-pl="fs"] { display: none; }
  .pl-head { column-gap: 4px; padding-right: 10px; }
  .seg-tabs > a, .seg > .seg-x { padding: 0 9px; }
  .seg-x span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabbar a { font-size: 10.5px; }
}
@media print {
  .pl-labs, .fig-tog, .kd-tog, .fc-nav { display: none !important; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-art { display: none; }
  .home-row { grid-template-columns: minmax(0, 1fr); }
  .cheat-grid, .figcard-body { grid-template-columns: minmax(0, 1fr); }
  .cs-must { grid-row: auto; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 28px 24px 26px; }
  .hero-art { display: none; }
  .home-row { grid-template-columns: minmax(0, 1fr); }
  .cheat-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-must { grid-row: auto; }
  .figcard-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .page { padding-top: 16px; }
  .pl-head { padding-left: 6px; }
  .pl-title { flex-basis: calc(100% - 60px); }
  .pl-head .seg { order: 3; }
  .pl-tools { order: 4; margin-left: auto; }
  .lrow { flex-wrap: wrap; }
  .lrow-act { width: 100%; justify-content: flex-end; padding-left: 54px; }
  .lrow-act .btn { flex: 1; }
  .continue { flex-wrap: wrap; padding: 18px; }
  .continue .btn { width: 100%; }
  .cont-ic { width: 48px; height: 48px; }
  .face { min-height: 300px; padding: 18px; }
  .face-body { flex-direction: column; align-items: stretch; gap: 14px; padding: 12px 0; }
  .face .spot.fc { width: 120px; align-self: center; }
  .front-t { font-size: 19px; text-align: center; }
  .back-t { font-size: 17px; }
  .rate { gap: 6px; }
  .rbtn { min-height: 58px; font-size: 15px; }
  .boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tgroup dl { grid-template-columns: minmax(0, 1fr); }
  .f-grid { grid-template-columns: minmax(0, 1fr); }
  .card.pad { padding: 18px; }
  .prose { font-size: 16.5px; }
  .vo { font-size: 17px; }
  .ptable th, .ptable td { padding: 9px 12px; }
  .mod-h-prog .btn { width: 100%; }
  .quiz .q { font-size: 19px; }
  .tabs a { padding: 0 12px; }
  .toc, .terms-tools { margin-left: -20px; margin-right: -20px; }
  .terms-tools { position: static; margin-top: -16px; }
  .read-body { padding: 22px 18px; border-radius: 16px; }
  .reader { padding-left: 10px; padding-right: 10px; }
  .modal { padding: 24px 20px 18px; }
}
@media (max-width: 420px) {
  .seg > a, .seg > button { padding: 0 11px; }
  .pl-tools .icon-btn { width: 42px; }
  .mode { padding: 0 13px; }
  .hero h1 { font-size: 30px; }
  .badge { font-size: 12.5px; }
}
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1023px) {
  body.in-player .tabbar, body.in-player .topbar { display: none; }
  body.in-player { --top: 0px; --tab: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ print */
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #f6f6f6; --surface-3: #eee; --ink: #000; --ink-2: #222; --muted: #444; --line: #ccc; --line-2: #bbb; color-scheme: light; }
  @page { margin: 16mm 14mm; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .topbar, .tabbar, .sidebar, .scrim, .tabs-wrap, .toc, .guide-tools, .btn, .crumbs, .mod-h-prog, .icon-btn, .skip, .toast, .modal-back, .pl-ctrl, .pl-tools, .seg, .read-end { display: none !important; }
  #view { margin: 0 !important; padding: 0 !important; min-height: 0; }
  .page { max-width: none; padding: 0; }
  .mod-h { background: none !important; color: #000; border-bottom: 2px solid #000; margin-bottom: 12pt; }
  .mod-h::before { display: none; }
  .mod-h .kicker, .mod-h-meta, .mod-h h1 { color: #000 !important; }
  .mod-h-in { padding: 0 0 8pt; max-width: none; }
  .chip.dom { border: 1px solid #000; color: #000; background: none; }
  .card, .tw, .term { box-shadow: none !important; border-color: #bbb; }
  .guide { display: block !important; }
  .mod-body { padding-top: 0; }
  .prose { max-width: none; font-size: 11.5pt; line-height: 1.5; }
  .prose h4 { break-after: avoid; page-break-after: avoid; }
  .g-sec { break-before: page; page-break-before: always; border: 0; }
  .g-sec:first-child { break-before: auto; page-break-before: auto; }
  .callout, table, tr, .ex, .checks li, .figcard { break-inside: avoid; page-break-inside: avoid; }
  .tw { overflow: visible; }
  .formula { background: #fff; color: #000; border: 1px solid #999; border-left: 4px solid #000; }
  .cheat-grid { grid-template-columns: 1fr 1fr; gap: 10pt; }
  .cheat .card.pad { padding: 10pt; }
  .checks li { font-size: 10pt; }
  .ai-note { border-top: 1px solid #999; color: #333; margin-top: 16pt; padding: 8pt 0 0; display: flex !important; }
  a { color: #000; text-decoration: none; }
  .reader { padding: 0; } .read-body { border: 0; padding: 0; max-width: none; box-shadow: none; }
}

/* ------------------------------------------------------------------ V3: operator courses (key points, licensing, question bank, exams) */
.kp-sec { margin-bottom: 30px; }
.kp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.kp { display: flex; gap: 14px; padding: 16px 18px; align-items: flex-start; }
.kp-n { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 850; font-size: 15px; }
.kp h3 { font-size: 15.5px; margin: 2px 0 4px; line-height: 1.35; }
.kp p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.read-parts { margin: 0 0 26px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.read-parts .kicker { margin-bottom: 6px; }
.read-parts .kicker .ic { width: 16px; height: 16px; }
.read-parts ol { margin: 0; padding-left: 1.4em; }
.read-parts li { margin: 2px 0; }
.read-parts li { padding: 3px 0; }
.read-parts a { font-weight: 650; text-decoration: none; line-height: 1.5; }
.read-parts a:hover { text-decoration: underline; }
.read-body .g-sec + .g-sec { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
/* flashcard figure visual */
.face-body.has-fig { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 0; }
.fc-fig { display: flex; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.fc-fig-in { position: relative; display: block; width: 100%; max-width: 540px; line-height: 0; }
.fc-fig-img { display: block; width: 100%; height: auto; }
.fc-ring { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 4px solid #f2a516; box-shadow: 0 0 0 3px #0b3d5e, 0 0 0 9999px rgba(11, 61, 94, .0); display: grid; place-items: center; pointer-events: none; animation: fcpulse 1.6s ease-out 2; }
.fc-ring b { position: absolute; top: -14px; right: -14px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #0b3d5e; color: #fff; font-size: 13px; line-height: 24px; font-weight: 850; text-align: center; }
@keyframes fcpulse { 0% { box-shadow: 0 0 0 3px #0b3d5e, 0 0 0 0 rgba(242, 165, 22, .6); } 100% { box-shadow: 0 0 0 3px #0b3d5e, 0 0 0 18px rgba(242, 165, 22, 0); } }
.has-fig .front-t { font-size: 19px; }
/* licensing page */
.lic { max-width: 1000px; }
.lic h2 { font-size: clamp(19px, 2.4vw, 23px); margin: 30px 0 12px; }
.lic h2:first-child { margin-top: 6px; }
.lic .grid { display: grid; gap: 14px; margin-bottom: 8px; }
.lic .grid.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lic .card { padding: 16px 18px; margin-bottom: 12px; }
.lic .grid .card { margin-bottom: 0; }
.lic .card > strong:first-child { display: block; margin-bottom: 4px; font-size: 15.5px; }
.lic .small { font-size: 14.5px; color: var(--ink-2); margin: 0 0 .5em; line-height: 1.55; }
.lic .small.muted { color: var(--muted); }
.lic p { line-height: 1.6; }
.lic ul { padding-left: 1.3em; margin: 0 0 .6em; } .lic li { margin: .25em 0; line-height: 1.55; } .lic li::marker { color: var(--accent); }
.lic .tablewrap { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lic .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.lic .tbl th, .lic .tbl td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.lic .tbl tr:first-child th, .lic .tbl th { background: var(--surface-3); font-weight: 750; font-size: 13.5px; color: var(--ink); }
.lic .tbl tr:last-child td { border-bottom: 0; }
.lic .tbl tr:nth-child(even) td { background: var(--surface-2); }
.lic .kv, .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 12px; }
.kv dt { font-weight: 750; color: var(--ink-2); } .kv dd { margin: 0; }
.lic-cta { margin-top: 24px; }
/* pills for difficulty stages */
.pill.d-easy { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.pill.d-med { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.pill.d-exam { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.pill.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.pill .ic { width: 14px; height: 14px; }
/* question bank / practice */
.qb-card .meta { margin-bottom: 14px; }
.qb-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 12px; }
.qb-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 750; color: var(--ink-2); min-width: 0; }
.qb-f .sel, .qb-f select { width: 100%; }
.qb-count { margin: 6px 0 10px; color: var(--ink-2); }
.qb-host:empty { display: none; }
.qmeta { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.qx-tools { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.qx-tools .btn { min-height: 40px; }
.qx-tools .btn.on { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.qx .q { margin-top: 8px; }
.qx .q:focus { outline: 0; }
.qx .q:focus-visible { outline: 3px solid var(--accent); }
.choice.sel { border-color: var(--link); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--link); }
.choice.sel .cl { background: var(--navy); color: #fff; }
.choice.struck .ct { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
.choice.struck .cl { opacity: .55; }
.stage-res { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-list { display: grid; gap: 12px; }
.rv-item { padding: 16px 18px; border-left: 5px solid var(--bad); }
.rv-item.ok { border-left-color: var(--ok); }
.rv-item .qmeta { margin-top: 0; }
.rv-q { font-weight: 650; font-size: 16.5px; margin: 10px 0 8px; line-height: 1.45; }
.rv-a { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; font-size: 15px; }
.rv-a .ic { margin-top: 2px; stroke-width: 3; }
.rv-a.bad { color: var(--bad); } .rv-a.good { color: var(--ok); }
.rv-item .fb { margin: 10px 0 6px; }
/* exam prep hub */
.exam-hub .page-h.row { align-items: flex-end; }
.ex-cls { display: flex; flex-direction: column; gap: 6px; }
.ex-cls .lbl { font-size: 12.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ex-cls .seg > button { min-height: 44px; }
.ex-target { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: var(--surface-3); color: var(--ink-2); margin: 0 0 18px; }
.ex-target .ic { color: var(--warn); margin-top: 2px; }
.ex-sec { margin-bottom: 26px; }
.ex-sec > .sec-h { display: flex; align-items: center; gap: 8px; }
.ex-sec > .sec-h .ic { color: var(--accent); }
.ex-sec .meta { margin-bottom: 12px; }
.ex-build { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.ex-build > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--link); list-style: none; }
.ex-build > summary::-webkit-details-marker { display: none; }
.pb-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; margin-top: 10px; }
.pb-grid fieldset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.pb-grid legend { font-weight: 750; margin-bottom: 6px; padding: 0; }
.pb-opts { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.pb-opts .btn { align-self: flex-start; }
.pb-ck { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: 14.5px; }
.pb-ck input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.exam-card { padding: 18px; display: flex; flex-direction: column; gap: 6px; border-top: 4px solid var(--line-2); }
.exam-card.active { border-top-color: var(--accent); } .exam-card.pass { border-top-color: var(--ok); } .exam-card.fail { border-top-color: var(--bad); }
.exam-card .kicker { margin: 0; }
.exam-card h3 { font-size: 16.5px; margin: 0; }
.exam-card .meta { margin: 0 0 4px; }
.exam-card .btn-row { margin-top: auto; padding-top: 8px; }
.ptable td.num, .ptable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ptable a.sc-ok { color: var(--ok); font-weight: 750; } .ptable a.sc-low { color: var(--bad); font-weight: 750; }
.exam-intro { max-width: 640px; margin: 10px auto; text-align: center; }
.exam-intro .kv { text-align: left; max-width: 420px; margin: 16px auto; }
.lock-panel.sm { margin: 0 auto; padding: 28px 22px; }
.lock-panel.sm h2 { font-size: 20px; }
/* running mock exam */
.exam-head { position: sticky; top: calc(var(--top) + 6px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 14px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); }
body.wide .exam-head { top: 10px; }
.eh-t { display: flex; flex-direction: column; line-height: 1.25; }
.eh-t .meta { font-size: 13px; }
.eh-h { font-size: 16px; margin: 0; letter-spacing: 0; }
.timer { display: inline-flex; align-items: center; gap: 6px; font: 800 20px/1 var(--mono); font-variant-numeric: tabular-nums; padding: 8px 12px; border-radius: 10px; background: var(--surface-3); color: var(--ink); }
.timer .ic { width: 20px; height: 20px; color: var(--muted); }
.timer.low { background: var(--bad-bg); color: var(--bad); }
.timer.low .ic { color: var(--bad); }
.eh-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.exam-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ex-q { max-width: none; }
.epal-card { position: sticky; top: calc(var(--top) + 96px); padding: 16px; }
body.wide .epal-card { top: 100px; }
.epal-h { font-size: 15px; margin: 0 0 10px; }
.epal { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; max-height: 52vh; overflow: auto; padding: 2px; }
.epal button { position: relative; min-height: 36px; min-width: 0; border-radius: 8px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: 700 13px var(--font); cursor: pointer; font-variant-numeric: tabular-nums; }
.epal button.ans { background: var(--navy); border-color: var(--navy); color: #fff; }
.epal button.flag::after { content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: #f2a516; box-shadow: 0 0 0 1.5px var(--surface); }
.epal button.cur { outline: 3px solid var(--ink); outline-offset: 1px; }
.epal button.r-ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.epal button.r-bad { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.epal-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 0; font-size: 12.5px; }
.epal-key .k { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line-2); vertical-align: middle; }
.epal-key .k.ans { background: var(--navy); border-color: var(--navy); } .epal-key .k.flag { background: #f2a516; border-color: #f2a516; border-radius: 50%; } .epal-key .k.cur { outline: 2px solid var(--ink); }
.rv-pal { max-height: none; margin: 12px 0 16px; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
.rv-h { margin-top: 26px; }
.rv-filter { flex-wrap: wrap; margin-top: 4px; }
.rv-filter > button { min-height: 44px; }
.dom-table th[scope="row"], .ptable tbody th[scope="row"] { font-size: 14.5px; text-transform: none; letter-spacing: 0; color: var(--ink); background: transparent; font-weight: 650; }
.pill.qstage { font-size: 12.5px; }
.dom-table .barcol { width: 32%; }
.dom-bar > span { background: var(--ok); } .dom-bar.low > span { background: var(--bad); }
.dlg-tool { min-height: 200px; max-height: 70vh; overflow: auto; }
.dlg-forms { display: grid; gap: 8px; max-height: 60vh; overflow: auto; text-align: left; }
.dlg-f { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.dlg-f strong { display: block; font-size: 13.5px; color: var(--ink-2); }
.dlg-f code { font: 600 14.5px/1.5 var(--mono); color: var(--ink); white-space: pre-wrap; }
.pexam { margin: 6px 0 26px; }
.pexam .sec-h { display: flex; align-items: center; gap: 8px; }
.pexam .sec-h .ic { color: var(--accent); }
.pexam .tw { margin-bottom: 12px; }
@media (pointer: coarse) { .epal button { min-height: 44px; } .epal { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); } }
@media (max-width: 1100px) { .exam-layout { grid-template-columns: minmax(0, 1fr); } .epal-card { position: static; } .epal { max-height: none; } }
@media (max-width: 700px) {
  .pb-grid { grid-template-columns: minmax(0, 1fr); }
  .eh-tools .btn:not([data-esub]) span { display: none; }
  .eh-tools .btn { padding: 0 12px; }
  .eh-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .exam-head { top: calc(var(--top) + 4px); }
  .timer { font-size: 17px; }
  .face-body.has-fig { padding: 8px 0; }
  .fc-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0 0; } .kv dd { margin-bottom: 8px; }
}
@media (max-width: 560px) {
  .dom-table .barcol { display: none; } .exam-hub .page-h.row { align-items: flex-start; }
  .qb-tiles, .exam-hub .tiles, .pexam .tiles, .exam-rev .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .qb-tiles .tile, .exam-hub .tile, .pexam .tile, .exam-rev .tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
  .qb-tiles .tile-ic, .exam-hub .tile-ic, .pexam .tile-ic, .exam-rev .tile-ic { width: 38px; height: 38px; border-radius: 10px; }
  .qb-tiles .tile-ic .ic, .exam-hub .tile-ic .ic, .pexam .tile-ic .ic, .exam-rev .tile-ic .ic { width: 20px; height: 20px; }
  .qb-tiles .tile b, .exam-hub .tile b, .pexam .tile b, .exam-rev .tile b { font-size: 20px; }
  .exam-rev .tile .ring { display: none; }
  .ex-cls .seg > button { padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) { .fc-ring { animation: none; } }
@media print { .exam-head, .epal-card { display: none; } }

/* ---- v4: course card, 3D simulator chips/cards ---- */
.crs-card { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; border-left: 6px solid var(--cc, var(--accent)); flex-wrap: wrap; }
.crs-code { background: var(--cc, var(--accent)); color: #fff; font-weight: 800; letter-spacing: .05em; padding: 6px 12px; border-radius: 8px; font-size: .95rem; }
.crs-txt { flex: 1; min-width: 200px; display: flex; flex-direction: column; } .crs-txt small { color: var(--muted); }
.pl-s3 .pl-labs-l { color: var(--accent); }
.s3-host { min-height: 560px; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; } .chip-row .chip { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; font-weight: 600; } .chip-row .chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* hub / tab cards */
.s3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.s3-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); }
.s3-card:hover { border-color: var(--accent); }
.s3-card h3 { font-size: 1rem; margin: 0; } .s3-card p { margin: 0; font-size: .86rem; color: var(--muted); flex: 1; }
.s3-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--navy); color: #fff; }
.s3-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); align-items: center; }
.s3-ic svg{width:22px;height:22px}
.crs-group { margin: 0 0 26px; } .crs-gh { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 3px solid var(--cc, var(--accent)); flex-wrap: wrap; }
.crs-gh .crs-code { padding: 5px 11px; } .crs-gt { flex: 1; min-width: 220px; } .crs-gt h2 { margin: 0; font-size: 1.12rem; } .crs-gt small { color: var(--muted); }

/* ---- v4: checklist workspace ---- */
.ckw h2 { margin-bottom: .3em; }
.cw-hdr { margin: .4em 0 .8em; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } .cw-hdr summary { cursor: pointer; padding: .65em .9em; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 6px; } .cw-hdr summary small { color: var(--muted); font-weight: 500; }
.cw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6em .9em; padding: 0 .9em .9em; }
.cw-f { display: flex; flex-direction: column; gap: 3px; font-size: .82em; } .cw-f > span { color: var(--muted); font-weight: 700; letter-spacing: .02em; }
.cw-f input, .cw-f select, .cw-f textarea, .cw-note textarea { font: inherit; font-size: 1.05em; min-height: 42px; padding: .4em .6em; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface-2, var(--surface)); color: var(--ink); width: 100%; box-sizing: border-box; } .cw-f textarea, .cw-note textarea { min-height: 0; resize: vertical; }
.cw-f input:focus-visible, .cw-f select:focus-visible, .cw-f textarea:focus-visible, .cw-note textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.cw-wide { grid-column: 1 / -1; }
.cw-prog { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 .5em; } .cw-count { font-size: max(14px, .85em); color: var(--ink-2); white-space: nowrap; } .cw-count b { font-size: 1.15em; color: var(--ink); } .cw-fl { color: var(--bad); font-weight: 700; }
.cw-bar { flex: 1 1 120px; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; } .cw-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; } .cw-bar.done i { background: var(--ok); }
.cw-tools { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 .7em; } .cw-tools .ic { width: 16px; height: 16px; }
.cw-flagmsg { margin: 0 0 .7em; padding: .55em .8em; border-radius: 10px; font-weight: 600; } .cw-flagmsg.good { background: var(--ok-bg, #e6f4ea); color: var(--ok); } .cw-flagmsg.warn { background: var(--bad-bg, #fdecea); color: var(--bad); }
.cw-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8em; }
.cw-g { margin: 0; padding: .55em .8em .6em; border: 1px solid var(--line); border-radius: .7em; background: var(--surface); min-width: 0; }
.cw-g legend { display: flex; align-items: center; gap: 8px; padding: 0 .4em; font-weight: 800; } .cw-gc { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.cw-g ul { list-style: none; margin: 0; padding: 0; }
.cw-item { padding: .45em 0; border-bottom: 1px solid var(--line); } .cw-item:last-child { border-bottom: 0; }
.cw-row { display: flex; gap: .7em; align-items: flex-start; }
.cw-seg { display: inline-flex; flex: none; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.cw-b { min-width: 44px; min-height: 44px; padding: 0 .55em; border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: .8em; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 3px; } .cw-b:last-child { border-right: 0; } .cw-b .ic { width: 16px; height: 16px; stroke-width: 3; }
.cw-b:hover { background: var(--surface-3); } .cw-b:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.cw-b.on.cw-ok { background: var(--ok); color: #fff; } .cw-b.on.cw-na { background: var(--muted); color: #fff; } .cw-b.on.cw-fl { background: var(--bad); color: #fff; }
.cw-t { margin: .55em 0 0; flex: 1; min-width: 0; } .cw-item.is-ok .cw-t, .cw-item.is-na .cw-t { color: var(--ink-2); } .cw-item.is-fl .cw-t { font-weight: 700; }
.cw-nb { flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .cw-nb:hover { background: var(--surface-3); } .cw-nb.has { color: var(--accent); } .cw-nb .ic { width: 18px; height: 18px; }
.cw-why { margin: .1em 0 0 0; font-size: max(13px, .78em); color: var(--muted); line-height: 1.45; } .cw-note { margin: .4em 0 0; }
.cw-end { margin-top: 1em; display: grid; gap: .8em; } .cw-sign { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6em .9em; }
.cw-save { margin-top: .8em; }
@media (max-width: 560px) { .cw-row { flex-wrap: wrap; } .cw-t { flex-basis: calc(100% - 100px); } .cw-seg { order: 3; } }
/* printable checklist record (browser print) */
.cwp { display: none; }
@media print {
  body.cw-printing > *:not(.cwp) { display: none !important; } body.cw-printing .cwp { display: block; color: #000; background: #fff; font: 11px/1.35 Helvetica, Arial, sans-serif; padding: 0; }
  .cwp-h { background: #0d2b45; color: #fff; padding: 8px 12px; font-size: 14px; display: flex; justify-content: space-between; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cwp-h span { font-size: 11px; }
  .cwp h1 { font-size: 18px; margin: 10px 0 2px; } .cwp h2 { font-size: 12px; margin: 12px 0 4px; background: #e5ecf3; padding: 3px 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cwp-c { color: #555; margin: 0 0 6px; }
  .cwp table { width: 100%; border-collapse: collapse; } .cwp-i th { text-align: left; font-size: 8px; text-transform: uppercase; color: #555; width: 14%; border: 1px solid #b8c4d0; padding: 4px 5px; background: #f6f8fa; } .cwp-i td { border: 1px solid #b8c4d0; padding: 4px 5px; width: 36%; }
  .cwp-t td { border-bottom: 1px solid #dde4ea; padding: 4px 5px; vertical-align: top; } .cwp-t td.s { width: 56px; font-weight: 700; white-space: nowrap; } .cwp-t tr.fl td { color: #a31; font-weight: 700; } .cwp-t em { display: block; font-weight: 400; color: #333; font-size: 10px; }
  .cwp-n { min-height: 50px; border: 1px solid #b8c4d0; padding: 6px; white-space: pre-wrap; } .cwp-f { margin-top: 14px; font-size: 9px; color: #555; } .cwp tr { break-inside: avoid; }
}

/* ---- v4: scenario background card ---- */
.sc-ctx { margin: 0 0 .8em; border: 1px solid var(--line); border-radius: .7em; background: var(--surface); }
.sc-ctx summary { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; padding: 0 .9em; font-weight: 800; } .sc-ctx summary small { color: var(--muted); font-weight: 500; margin-left: auto; } .sc-ctx summary .ic { width: 18px; height: 18px; color: var(--accent); }
.sc-cx { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .3em 1.2em; padding: 0 .9em .8em; }
.sc-cx-r h4 { margin: .6em 0 .15em; font-size: .78em; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .sc-cx-r p { margin: 0; font-size: .95em; line-height: 1.5; }
.sc-cx-r:first-child { grid-column: 1 / -1; } .sc-cx-c, .sc-cx-h { margin: 0; padding-left: 1.2em; font-size: .93em; line-height: 1.5; }
.sc-cx .lab-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .sc-cx .lab-chip { max-width: 100%; white-space: normal; height: auto; min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
.sc-cx-r { min-width: 0; }
/* TRYeTECH Academy — simulator "How to use" panel */
.gd { margin: 0 0 16px; border: 1px solid var(--line, #d7e0ea); border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #1b2733); }
.gd-h { padding: 14px 16px 6px; } .gd-h h2 { margin: 0 0 4px; font-size: 1.1rem; } .gd-q { margin: 0; color: var(--ink-2, #44546a); line-height: 1.5; }
.gd-s { border-top: 1px solid var(--line, #d7e0ea); } .gd-s:first-of-type { margin-top: 8px; }
.gd-s summary { cursor: pointer; min-height: 44px; padding: 0 16px; display: flex; align-items: center; font-weight: 700; } .gd-s summary:hover { background: var(--surface-3, #f1f5f9); }
.gd-b { padding: 0 16px 12px; line-height: 1.55; } .gd-b p { margin: 0 0 .6em; } .gd-b ul, .gd-b ol { margin: 0 0 .4em; padding-left: 1.3em; } .gd-b li { margin-bottom: .3em; } .gd-b h4 { margin: .8em 0 .3em; }
.gd-watch { padding: 8px 10px; border-radius: 8px; background: var(--warn-bg, #fff4d6); }
.gd-dl { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 6px 16px; margin: 0; } .gd-dl dt { font-weight: 700; } .gd-dl dd { margin: 0; }
@media (max-width: 640px) { .gd-dl { grid-template-columns: 1fr; } .gd-dl dd { margin-bottom: 8px; } }

/* ---- TRY Academy brand mark + duotone course/module icons (assets/icons-modules.js) ---- */
.bmark { display: inline-flex; flex: none; }
.bmark svg { width: 34px; height: 34px; display: block; }
.tb-brand .bmark svg { width: 32px; height: 32px; }
.lp-brand .bmark svg { width: 40px; height: 40px; }
.sb-brand .bmark svg { width: 40px; height: 40px; }
.tic { display: inline-block; flex: none; vertical-align: middle; }
.lp-ic .tic { width: 28px; height: 28px; --ic2: currentColor; }
.hero .kicker .tic { color: var(--accent); --ic2: var(--accent); width: 20px; height: 20px; }
.mc-id { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.mc-id .tic, .mod-h .kicker .tic { color: var(--dc); --ic2: var(--dc); }
.mod-h .kicker .tic { width: 22px; height: 22px; }
:root[data-theme="dark"] .mc-id .tic, :root[data-theme="dark"] .mod-h .kicker .tic { color: var(--dcl, var(--dc)); --ic2: var(--dcl, var(--dc)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mc-id .tic, :root:not([data-theme="light"]) .mod-h .kicker .tic { color: var(--dcl, var(--dc)); --ic2: var(--dcl, var(--dc)); } }

/* ===== v2: larger, easier-to-identify study tiles, tabs and tool cards ===== */
.quick { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.qlink { min-height: 84px; padding: 16px 18px; gap: 16px; border-width: 1.5px; border-radius: 14px; }
.ql-ic { width: 52px; height: 52px; border-radius: 14px; }
.ql-ic .ic { width: 28px; height: 28px; }
.qlink strong { font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.005em; }
.qlink small { font-size: 14px; line-height: 1.35; color: var(--ink-2); margin-top: 2px; }
.qlink:hover, .qlink:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.tabs a { min-height: 52px; font-size: 16px; font-weight: 700; padding: 0 16px; gap: 8px; }
.tabs a .ic { width: 22px; height: 22px; }
.tool-card { min-height: 96px; }
.tool-ic { width: 56px; height: 56px; }
.tool-txt strong { font-size: 18px; font-weight: 800; }
.tool-txt small { font-size: 14.5px; }
.stat-list a { min-height: 52px; font-size: 16px; }
.stat-list .ic { width: 22px; height: 22px; }
@media (max-width: 700px) { .quick { grid-template-columns: 1fr 1fr; gap: 10px; } .qlink { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 108px; padding: 14px; } .qlink strong { font-size: 17px; } .tabs a { padding: 0 14px; } }
@media (max-width: 380px) { .quick { grid-template-columns: 1fr; } .qlink { flex-direction: row; align-items: center; min-height: 76px; } }

/* Brand name TRYeTECH keeps its lower-case e even inside upper-case labels */
.nocase{text-transform:none!important}