/* =====================================================================
   Sleep - Disordered Breathing and Orthodontics — styles (v1.2)
   Palette: deep navy, clinical blue, airway teal on a cool clinical canvas.
   Type: Source Serif 4 (headings), Atkinson Hyperlegible Next (text).
   Each course stage has its own accent: Start (navy), Foundations (teal),
   Assessment (blue), Management (indigo) and Apply and review (amber).
   ===================================================================== */

@font-face {
  font-family: "Atkinson Next";
  src: url("embedded-18b2a1a39a2f.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("embedded-4a5037bfaf66.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Serif";
  src: url("embedded-f2ea9c12d2fe.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}

:root {
  --navy-900: #081A2F;
  --navy-800: #0B2440;
  --ink: #0B2440;
  --ink-2: #1C3A5E;
  --blue: #1E63B0;
  --blue-d: #174F8E;
  --blue-t: #E8F0FA;
  --teal: #0D8277;
  --teal-d: #08645B;
  --teal-t: #E1F3F0;
  --teal-bright: #34C3B1;
  --indigo: #3B5BA9;
  --indigo-t: #EBEFF9;
  --airway: #CDEDEA;
  --airway-s: #2A9D97;
  --text: #18283A;
  --muted: #566578;
  --line: #E1E8EF;
  --line-2: #CBD6E1;
  --canvas: #F2F5F8;
  --surface: #F5F8FB;
  --white: #FFFFFF;
  --ok: #17784A;
  --ok-t: #E6F4EC;
  --no: #B42318;
  --no-t: #FDEDEB;
  --amber: #8A5A00;
  --amber-t: #FFF5DD;
  --gold: #B7791F;
  --child: #5B4A9E;
  --child-t: #F0ECFA;
  --focus: #2E7BD1;

  --serif: "Source Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Atkinson Next", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 13px;
  --r-sm: 9px;
  --shadow-1: 0 1px 2px rgba(11, 36, 64, .05);
  --shadow: 0 1px 2px rgba(11, 36, 64, .04), 0 4px 16px rgba(11, 36, 64, .05);
  --shadow-lift: 0 2px 6px rgba(11, 36, 64, .06), 0 16px 36px rgba(11, 36, 64, .11);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --top-h: 64px;
  --bn-h: 64px;
  --side-w: 300px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* default accent (overridden per course stage) */
  --g: var(--blue);
  --g-d: var(--blue-d);
  --g-t: var(--blue-t);
}
.g-start { --g: #1C3A5E; --g-d: #0B2440; --g-t: #E7EDF4; }
.g-foundations { --g: #0D8277; --g-d: #08645B; --g-t: #E1F3F0; }
.g-assessment { --g: #1E63B0; --g-d: #174F8E; --g-t: #E6EFF9; }
.g-management { --g: #3B5BA9; --g-d: #2D4787; --g-t: #EBEFF9; }
.g-apply { --g: #A8690F; --g-d: #7E4E06; --g-t: #FBF1DD; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.62;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}
@media (min-width: 768px) { body { font-size: 1.125rem; } }
img, svg { max-width: 100%; }
a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-d); text-decoration-thickness: 2px; }
p { margin: 0 0 .8em; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0 0 .5em; }
h1, h2 { font-family: var(--serif); font-weight: 620; letter-spacing: -0.008em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.3vw, 2.7rem); font-variation-settings: "opsz" 52; line-height: 1.12; }
h2 { font-size: clamp(1.32rem, 1.12rem + .8vw, 1.62rem); font-variation-settings: "opsz" 30; }
h3 { font-family: var(--sans); font-size: 1.07rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: .35em; }
strong, b { font-weight: 700; color: inherit; }
small, .small { font-size: .9em; }
.muted { color: var(--muted); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
::selection { background: #CFE3F7; color: var(--ink); }

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

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
svg .hot:focus-visible, svg [role="button"]:focus-visible { outline: none; stroke: var(--focus) !important; stroke-width: 4px !important; }
h1:focus, h2:focus, main:focus, [tabindex="-1"]:focus { outline: none; }

.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 700; }
.skip-link:focus { top: 10px; color: #fff; }
.skip-link:not(:focus) { clip-path: inset(50%); }

/* ---------------- Top bar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--top-h);
  display: flex; align-items: center; gap: 12px; padding: 0 16px 0 10px;
  background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  transition: box-shadow .25s ease;
}
.topbar.scrolled { box-shadow: 0 1px 0 rgba(11, 36, 64, .04), 0 6px 18px rgba(11, 36, 64, .06); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar { background: #fff; } }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); transition: background-color .15s; }
.icon-btn:hover { background: var(--surface); }
.icon-btn .ic { width: 24px; height: 24px; }
.menu-btn .ic-close { display: none; }
body.nav-open .menu-btn .ic-close { display: block; }
body.nav-open .menu-btn .ic-menu { display: none; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; min-width: 0; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; flex: none; box-shadow: 0 1px 2px rgba(11, 36, 64, .2); }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-t { font-family: var(--serif); font-weight: 650; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variation-settings: "opsz" 20; letter-spacing: -.005em; }
.brand-s { font-size: .76rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-progress { margin-left: auto; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.tp-label { color: var(--muted); font-size: .86rem; font-weight: 600; }
.tp-value { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.progress-track { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; }
.progress-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--blue)); border-radius: 0 4px 4px 0; transition: width .6s var(--ease); }
@media (max-width: 560px) { .brand-s { display: none; } }
@media (max-width: 400px) {
  .brand-mark { width: 30px; height: 30px; }
  .topbar { gap: 8px; padding-right: 12px; }
  .brand-t { font-size: 1.02rem; }
  .tp-label { display: none; }
}
@media (min-width: 1024px) {
  .menu-btn { display: none; }
  .topbar { padding-left: 22px; }
  .progress-track { left: auto; right: 22px; bottom: auto; top: 50%; transform: translateY(-50%); width: 168px; height: 8px; background: var(--surface); border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
  .progress-fill { border-radius: 99px; }
  .top-progress { margin-right: 184px; }
}

/* ---------------- Layout and sidebar ---------------- */
.layout { display: block; }
main { display: block; min-height: calc(100vh - var(--top-h)); padding: 24px 16px calc(var(--bn-h) + var(--safe-b) + 40px); }
#view { max-width: 880px; margin: 0 auto; }
#view[data-page="home"] { max-width: 1140px; }
#view[data-page="modules"] { max-width: 1080px; }
.loading { color: var(--muted); padding: 40px 0; }
.noscript { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }

.sidebar {
  position: fixed; z-index: 45; left: 0; top: var(--top-h); bottom: calc(var(--bn-h) + var(--safe-b));
  width: min(336px, 88vw); overflow-y: auto; overscroll-behavior: contain; background: #fff;
  border-right: 1px solid var(--line); padding: 14px 12px 24px; transform: translateX(-104%);
  transition: transform .3s var(--ease), box-shadow .3s; box-shadow: none;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-lift); }
.scrim { position: fixed; z-index: 44; inset: var(--top-h) 0 calc(var(--bn-h) + var(--safe-b)) 0; background: rgba(8, 26, 47, .38); opacity: 0; pointer-events: none; transition: opacity .25s; }
body.nav-open .scrim { opacity: 1; pointer-events: auto; }
@media (min-width: 640px) { main { padding: 32px 28px calc(var(--bn-h) + var(--safe-b) + 48px); } }
@media (min-width: 1024px) {
  .sidebar { transform: none; top: var(--top-h); bottom: 0; width: var(--side-w); padding: 16px 14px 32px; }
  .scrim { display: none; }
  main { margin-left: var(--side-w); padding: 36px 40px 80px; }
}
@media (min-width: 1400px) { main { padding-left: 56px; padding-right: 56px; } }

/* Sidebar progress card */
.sb-card { background: radial-gradient(240px 140px at 100% 0%, rgba(52, 195, 177, .22), transparent 70%), linear-gradient(160deg, var(--navy-800), var(--navy-900)); color: #fff; border-radius: 18px; padding: 14px; margin: 0 0 14px; box-shadow: 0 8px 20px rgba(8, 26, 47, .16); }
.sb-card:empty { display: none; }
.sbp { display: flex; align-items: center; gap: 12px; }
.sbp-txt p { margin: 0; }
.sbp-h { font-family: var(--serif); font-weight: 620; font-size: 1.05rem; line-height: 1.2; }
.sbp-s { font-size: .84rem; color: rgba(255, 255, 255, .74); }
.sbp-ring .ring-track { stroke: rgba(255, 255, 255, .14); }
.sbp-ring .ring-arc { stroke: var(--teal-bright); animation: none; }
.sbp-ring .ring-label { color: #fff; font-size: .86rem; }
.sbp-cta { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 10px 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; line-height: 1.25; min-height: 48px; transition: background-color .15s; }
.sbp-cta:hover { background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; }
.sbp-k { display: block; font-size: .74rem; color: var(--teal-bright); font-weight: 700; }
.sbp-t { display: block; font-weight: 700; font-size: .93rem; flex: 1; min-width: 0; }
.sbp-cta > span:first-child { display: flex; flex-direction: column; }
.sbp-cta { flex-wrap: wrap; }
.sbp-cta .sbp-k { width: 100%; }
.sbp-cta .ic { margin-left: auto; opacity: .8; }

.nav-primary { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 1px; }
.nav-primary li { margin: 0; }
.nav-top { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 11px; color: var(--ink-2); text-decoration: none; font-weight: 650; font-size: .98rem; transition: background-color .15s, color .15s; }
.nav-top .ic { color: var(--muted); width: 22px; height: 22px; }
.nav-top:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.nav-top[aria-current="page"] { background: var(--blue-t); color: var(--blue-d); }
.nav-top[aria-current="page"] .ic { color: var(--blue); }
.nav-heading { font-family: var(--serif); font-weight: 650; color: var(--ink); font-size: 1.02rem; margin: 14px 12px 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.nav-grp { margin-top: 6px; }
.nav-group { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--g-d); font-size: .82rem; font-weight: 800; margin: 12px 12px 4px; letter-spacing: .01em; }
.ng-name { display: inline-flex; align-items: center; gap: 8px; }
.ng-name::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--g); }
.ng-count { font-variant-numeric: tabular-nums; font-size: .76rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 0 8px; line-height: 1.6; }
.ng-count.full { background: var(--g-t); color: var(--g-d); border-color: transparent; }
.nav-secs { list-style: none; padding: 0; margin: 0; }
.nav-secs li { margin: 0; }
.nav-link { position: relative; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; min-height: 42px; padding: 6px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .95rem; line-height: 1.3; transition: background-color .15s, color .15s; }
.nav-link:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.nav-num { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .78rem; font-weight: 800; color: var(--muted); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s, box-shadow .2s; }
.nav-num .nn-ok { position: absolute; width: 14px; height: 14px; stroke-width: 3; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s var(--ease); }
.nav-link.done .nav-num { background: var(--g); color: transparent; box-shadow: none; }
.nav-link.done .nn-ok { opacity: 1; transform: none; color: #fff; }
.nav-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav-link[aria-current="page"] { background: var(--g-t); color: var(--g-d); font-weight: 750; }
.nav-link[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--g); }
.nav-link[aria-current="page"]:not(.done) .nav-num { background: #fff; color: var(--g-d); box-shadow: inset 0 0 0 2px var(--g); }
.sidebar-foot { display: flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--muted); margin: 18px 12px 0; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------------- Bottom nav (mobile/tablet) ---------------- */
.bottom-nav {
  position: fixed; z-index: 48; left: 0; right: 0; bottom: 0; height: calc(var(--bn-h) + var(--safe-b));
  padding-bottom: var(--safe-b); display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, .95); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
}
.bn-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--muted); text-decoration: none; font-size: .74rem; font-weight: 700; min-height: 48px; }
.bn-link .ic { width: 22px; height: 22px; padding: 4px 17px; box-sizing: content-box; border-radius: 99px; transition: background-color .2s, color .2s; }
.bn-link:hover { color: var(--ink); text-decoration: none; }
.bn-link[aria-current="page"], #moreBtn[aria-expanded="true"] { color: var(--blue-d); }
.bn-link[aria-current="page"] .ic, #moreBtn[aria-expanded="true"] .ic { background: var(--blue-t); color: var(--blue); }
@media (min-width: 1024px) { .bottom-nav { display: none; } }

/* ---------------- Buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 12px; border: 1.5px solid transparent; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s; }
.btn:hover { text-decoration: none; }
.btn:active:not([disabled]):not([aria-disabled="true"]) { transform: translateY(1px); }
.btn .ic { width: 1.15em; height: 1.15em; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(11, 36, 64, .2), 0 4px 12px rgba(30, 99, 176, .18); }
.btn-primary:hover { background: var(--blue-d); color: #fff; }
.btn-secondary { background: var(--teal-t); color: var(--teal-d); border-color: #BCE2DC; }
.btn-secondary:hover { background: #D2ECE8; color: var(--teal-d); }
.btn-ghost { background: #fff; color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: #B6C4D2; }
.btn-danger, .btn-danger:hover { background: var(--no-t); color: var(--no); border-color: #F2B8B1; }
.btn-onnavy { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn-onnavy:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-sm { min-height: 40px; padding: 7px 14px; font-size: .92rem; border-radius: 10px; }
.btn-lg { min-height: 54px; padding: 12px 24px; font-size: 1.05rem; border-radius: 14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.btn-row.tight { margin-top: 8px; gap: 8px; }
.text-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---------------- Rings and bars ---------------- */
.ring { --sz: 96px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--sz); height: var(--sz); }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-track { fill: none; stroke: #E2E9F0; }
.ring-arc { fill: none; stroke: var(--teal); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); animation: ringIn 1.1s var(--ease) both; }
.ring.is-zero .ring-arc { opacity: 0; }
.ring-label { position: relative; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; font-size: calc(var(--sz) * .2); line-height: 1; }
@keyframes ringIn { from { stroke-dashoffset: var(--c); } }
.mini-bar { display: block; flex: 1; min-width: 60px; height: 6px; border-radius: 99px; background: #E3EAF1; overflow: hidden; }
.mini-bar > span { display: block; height: 100%; background: var(--g, var(--teal)); border-radius: 99px; transition: width .6s var(--ease); }

/* ---------------- Status pills ---------------- */
.mod-st { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; padding: 3px 10px 3px 8px; border-radius: 99px; line-height: 1.5; white-space: nowrap; background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.mod-st .ic { width: 13px; height: 13px; stroke-width: 3; }
.mod-st i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; }
.st-completed { background: var(--ok-t); color: var(--ok); box-shadow: none; }
.st-inprogress { background: var(--blue-t); color: var(--blue-d); box-shadow: none; }
.st-inprogress i { background: currentColor; }

/* ---------------- Page and section head ---------------- */
.page { animation: pageIn .36s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sec-head { margin: 0 0 28px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -8px 0 10px; font-size: .88rem; color: var(--muted); font-weight: 600; }
.crumbs a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-decoration: none; min-height: 40px; }
.crumbs a:hover { text-decoration: underline; }
.crumb-sep { color: var(--line-2); }
.sh-row { display: flex; align-items: center; gap: 18px; }
.sh-row h1 { margin: 0; }
.sh-num { position: relative; flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; background: linear-gradient(150deg, var(--g), var(--g-d)); color: #fff; box-shadow: 0 8px 18px -6px var(--g); }
.sh-n { font-family: var(--serif); font-weight: 600; font-size: 2.1rem; line-height: 1; font-variant-numeric: lining-nums; font-variation-settings: "opsz" 48; }
.sh-ic { position: absolute; right: -7px; bottom: -7px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--g-d); box-shadow: 0 0 0 2px var(--canvas), 0 2px 6px rgba(11, 36, 64, .15); }
.sh-ic .ic { width: 16px; height: 16px; stroke-width: 2; }
.sec-head .lede { margin-top: 18px; }
.lede { font-size: 1.12em; color: #33465C; max-width: 66ch; line-height: 1.6; }
.sh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 0; }
.sh-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--ink-2); }
.sh-chip .ic { color: var(--muted); width: 16px; height: 16px; }
.sh-meter { display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--muted); font-weight: 600; flex: 1; min-width: 220px; max-width: 420px; }
.sh-meter:empty { display: none; }
.sh-meter .mini-bar { max-width: 140px; }
.plain-head h1 { margin-bottom: .3em; }
@media (max-width: 640px) {
  .sh-num { width: 52px; height: 52px; border-radius: 16px; }
  .sh-n { font-size: 1.6rem; }
  .sh-ic { width: 24px; height: 24px; right: -6px; bottom: -6px; }
  .sh-ic .ic { width: 14px; height: 14px; }
  .sh-row { gap: 14px; align-items: flex-start; }
  .sh-meter { min-width: 100%; }
}

/* In-page contents */
.toc { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-1); }
.toc summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 12px 16px; min-height: 48px; font-weight: 700; color: var(--ink-2); font-size: .96rem; border-radius: var(--r-md); }
.toc summary:hover { background: var(--surface); }
.toc summary::-webkit-details-marker { display: none; }
.toc-chev { transition: transform .25s var(--ease); color: var(--muted); }
details[open] > summary .toc-chev { transform: rotate(180deg); }
.toc ol { list-style: none; margin: 0; padding: 4px 12px 12px; border-top: 1px solid var(--line); }
.toc li { margin: 0; }
.toc-link, .rail-link { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 0; background: none; color: var(--ink-2); text-align: left; padding: 8px; min-height: 40px; font-size: .94rem; line-height: 1.35; border-radius: 8px; }
.toc-link:hover, .rail-link:hover { background: var(--surface); color: var(--blue-d); }
.toc-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; margin-top: .3em; background: var(--k, var(--line-2)); }
.k-learn { --k: #2A4A70; --k-t: #EAF0F7; }
.k-explore { --k: var(--teal); --k-t: var(--teal-t); }
.k-think { --k: #4A4FB0; --k-t: #EEEFFB; }
.k-tryit { --k: var(--blue); --k-t: var(--blue-t); }
.k-check { --k: var(--ok); --k-t: var(--ok-t); }
.k-pearl { --k: #A4700F; --k-t: #FBF2DC; }
.k-ortho { --k: var(--blue-d); --k-t: #E7EEF9; }
.sec-layout { display: block; }
.toc-rail { display: none; }
@media (min-width: 1360px) {
  #view[data-wide] { max-width: 1180px; }
  #view[data-wide] .sec-head { max-width: 900px; }
  #view[data-wide] .toc { display: none; }
  .sec-layout { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 40px; align-items: start; }
  .toc-rail { display: block; position: sticky; top: calc(var(--top-h) + 24px); max-height: calc(100vh - var(--top-h) - 48px); overflow-y: auto; padding: 4px 0 8px 16px; border-left: 1px solid var(--line); scrollbar-width: thin; }
  .rail-h { font-size: .8rem; font-weight: 800; color: var(--muted); margin: 6px 8px 8px; }
  .toc-rail ol { list-style: none; padding: 0; margin: 0; }
  .toc-rail li { margin: 0; }
  .rail-link { font-size: .87rem; color: var(--muted); position: relative; }
  .rail-link.on { color: var(--ink); font-weight: 700; background: var(--surface); }
  .rail-link.on::before { content: ""; position: absolute; left: -17px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--g); }
}

/* ---------------- Blocks ---------------- */
.blocks { display: grid; gap: 22px; }
.block { --px: 18px; --py: 22px; position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--py) var(--px); box-shadow: var(--shadow); min-width: 0; }
@media (min-width: 640px) { .block { --px: 32px; --py: 28px; } }
.block-head { margin-bottom: 14px; }
.block-head h2 { margin: 10px 0 0; }
.block-intro { color: #3A4C61; margin: 10px 0 0; max-width: 70ch; }
.block-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.btag { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 800; color: var(--k); }
.btag-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--k-t); }
.btag-ic .ic { width: 16px; height: 16px; stroke-width: 2; }
.tag-learn { --k: #2A4A70; --k-t: #EAF0F7; }
.tag-explore { --k: var(--teal-d); --k-t: #D6EEEA; }
.tag-think { --k: #4148A3; --k-t: #E6E8FA; }
.tag-tryit { --k: var(--blue-d); --k-t: #DCE9F8; }
.tag-check { --k: var(--ok); --k-t: #D9EFE2; }
.tag-pearl { --k: #8A5B07; --k-t: #F8E9C4; }
.tag-ortho { --k: var(--blue-d); --k-t: #DCE6F6; }
/* Interactive blocks carry a tinted header band */
.block-explore > .block-head, .block-try > .block-head, .block-think > .block-head, .block-check > .block-head {
  margin: calc(-1 * var(--py)) calc(-1 * var(--px)) 20px; padding: var(--py) var(--px) 18px;
  border-radius: calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0; border-bottom: 1px solid var(--line);
}
.block-explore > .block-head { background: linear-gradient(180deg, #EAF6F4, #F6FBFA); border-bottom-color: #D3EAE6; }
.block-try > .block-head { background: linear-gradient(180deg, #EEF4FB, #F8FBFE); border-bottom-color: #D7E4F2; }
.block-think > .block-head { background: linear-gradient(180deg, #F0F1FC, #F9F9FE); border-bottom-color: #DEE0F4; }
.block-check > .block-head { background: linear-gradient(180deg, #EAF5EF, #F7FBF9); border-bottom-color: #D2E8DB; }
.block-explore { border-color: #D6E9E5; }
.block-try { border-color: #D8E4F1; }
.block-think { border-color: #DFE1F3; }
.block-check { border-color: #D3E7DA; }

.source-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); color: var(--muted); font-size: .8rem; font-weight: 700; padding: 5px 11px; border-radius: 99px; min-height: 34px; transition: color .15s, border-color .15s, background-color .15s; }
.source-btn:hover { color: var(--blue-d); background: #fff; border-color: #B9CBE0; }
.source-btn .ic { width: 1em; height: 1em; }

.prose { max-width: 72ch; }
.prose > :last-child { margin-bottom: 0; }
.prose h3 { margin-top: 1.2em; }
.prose h3:first-child { margin-top: 0; }
.prose .table-wrap, .prose .split-grid, .prose .pheno-grid { max-width: none; }
.block-learn .prose { max-width: none; }
.keypoints { list-style: none; padding: 0; }
.keypoints > li { position: relative; padding-left: 26px; margin-bottom: .55em; }
.keypoints > li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--teal-t); }
.plain { list-style: none; padding: 0; }
.plain > li { margin-bottom: .45em; }
.steps-list { counter-reset: st; list-style: none; padding: 0; }
.steps-list > li { counter-increment: st; position: relative; padding-left: 42px; margin-bottom: .75em; min-height: 28px; }
.steps-list > li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-t); color: var(--blue-d); font-weight: 800; font-size: .84rem; }
.note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; font-size: .96em; }
.note .ic { color: var(--teal); margin-right: 4px; }
.caution { background: var(--amber-t); border-left: 4px solid var(--gold); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 10px 14px; color: #5E3F00; font-size: .96em; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1em; border: 1px solid var(--line); border-radius: var(--r-md); background-color: #fff; }
.mini-table { width: 100%; border-collapse: collapse; font-size: .94em; min-width: 520px; }
.mini-table caption { text-align: left; font-weight: 800; padding: 12px 14px 6px; color: var(--ink); caption-side: top; }
.mini-table th, .mini-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.mini-table thead th { background: #F3F6FA; color: var(--ink-2); font-weight: 800; font-size: .92em; }
.mini-table tbody th { color: var(--ink-2); font-weight: 700; background: #FAFBFD; width: 24%; }
.mini-table tbody tr:nth-child(even) td { background: rgba(245, 248, 251, .6); }
.mini-table tr:last-child td, .mini-table tr:last-child th { border-bottom: 0; }

.split-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 1em; }
@media (min-width: 640px) { .split-grid { grid-template-columns: 1fr 1fr; } .split-grid.four { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .split-grid.four { grid-template-columns: repeat(4, 1fr); } }
.split-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; background: var(--surface); }
.split-card h3 { margin-bottom: .5em; }
.split-card.adult { background: var(--blue-t); border-color: #CADCF0; }
.split-card.child { background: var(--child-t); border-color: #D9D1F0; }
.split-card.child h3 { color: var(--child); }
.split-card > :last-child { margin-bottom: 0; }
.scale-list { list-style: none; padding: 0; margin: 0; }
.scale-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(11, 36, 64, .15); margin: 0; }
.scale-list li:last-child { border-bottom: 0; }
.pheno-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 1em; }
@media (min-width: 720px) { .pheno-grid { grid-template-columns: repeat(3, 1fr); } }
.pheno { border-radius: var(--r-md); padding: 14px 16px; border: 1px solid var(--line); }
.pheno.anat { background: var(--teal-t); border-color: #BFE3DF; }
.pheno.infl { background: var(--amber-t); border-color: #F1DDAA; }
.pheno.neuro { background: var(--child-t); border-color: #D9D1F0; }
.pheno > :last-child { margin-bottom: 0; }

/* Callouts, banners, pearls */
.callout { display: flex; gap: 14px; align-items: flex-start; border-radius: var(--r-lg); padding: 16px 20px; }
.callout p { margin: 0; }
.callout > .ic { width: 22px; height: 22px; margin-top: 2px; }
.callout-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }
.callout-ic .ic { width: 19px; height: 19px; }
.callout.safety { background: linear-gradient(90deg, #E3F4F1, #EEF8F6); color: #0A4A44; border: 1px solid #C3E4DE; font-weight: 650; align-items: center; }
.callout.safety .callout-ic { background: #fff; color: var(--teal); box-shadow: 0 1px 2px rgba(13, 130, 119, .2); }
.callout.safety > .ic { color: var(--teal); }
.banner { position: relative; overflow: hidden; display: flex; gap: 18px; align-items: flex-start; background: radial-gradient(420px 220px at 100% 0%, rgba(52, 195, 177, .2), transparent 70%), linear-gradient(150deg, var(--navy-800), var(--navy-900)); color: #fff; border-radius: var(--r-xl); padding: 26px 22px; box-shadow: 0 14px 30px -12px rgba(8, 26, 47, .45); }
@media (min-width: 640px) { .banner { padding: 32px 36px; } }
.banner::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 200px; height: 200px; border-radius: 50%; border: 2px dashed rgba(52, 195, 177, .22); pointer-events: none; }
.banner > div { position: relative; z-index: 1; }
.banner-ic { flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--teal-bright); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.banner-ic .ic { width: 26px; height: 26px; }
.banner-text { font-family: var(--serif); font-weight: 640; font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.005em; font-variation-settings: "opsz" 36; }
.banner-sub { color: rgba(255, 255, 255, .84); margin: 0; }
.banner .source-btn { color: rgba(255, 255, 255, .82); margin-top: 12px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); }
.banner .source-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.banner.tone-child { background: radial-gradient(420px 220px at 100% 0%, rgba(255, 255, 255, .14), transparent 70%), linear-gradient(150deg, #5B4A9E, #3F327A); }
.banner.tone-child .banner-ic { color: #fff; }
.banner.tone-caution { background: var(--amber-t); color: #4F3600; border: 1px solid #F1DDAA; box-shadow: none; }
.banner.tone-caution::after { display: none; }
.banner.tone-caution .banner-ic { background: #FCE7B2; color: var(--amber); box-shadow: none; }
.banner.tone-caution .banner-text { color: #4F3600; font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); }
.banner.tone-caution .banner-sub { color: #5E4200; }
.banner.tone-caution .source-btn { color: #6E5000; background: rgba(255, 255, 255, .5); border-color: #EBD49A; }
.block-pearl { position: relative; background: linear-gradient(135deg, #FFFCF2, #FFF8E6); border: 1px solid #F0DFAF; border-radius: var(--r-xl); padding: 20px 24px 22px; box-shadow: var(--shadow-1); }
@media (min-width: 640px) { .block-pearl { padding: 24px 32px 26px; } }
.block-pearl::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; background: var(--gold); }
.pearl-text { font-family: var(--serif); font-size: 1.28em; line-height: 1.42; color: #3A2B05; margin: 12px 0 0; font-variation-settings: "opsz" 24; font-weight: 520; }

/* Orthodontic link */
.block-ortho { background: linear-gradient(180deg, #F6F9FE, #FFFFFF 70%); border-color: #D5E2F2; }
.block-ortho::before { content: ""; position: absolute; left: -1px; top: 24px; bottom: 24px; width: 4px; border-radius: 0 4px 4px 0; background: var(--blue); }
.ortho-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.ortho-list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #E3EBF5; }
.ortho-list .ic { color: var(--blue); margin-top: 4px; flex: none; }

/* Explore cards (disclosures) */
.xcards { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) { .xcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xcard { border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.xcard.open { border-color: #9FD3CE; box-shadow: 0 0 0 3px var(--teal-t), var(--shadow); grid-column: 1 / -1; }
.xcard-btn { display: flex; width: 100%; gap: 14px; align-items: flex-start; text-align: left; border: 0; background: none; padding: 14px 16px; min-height: 60px; border-radius: 16px; }
.xcard-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--teal-t); color: var(--teal-d); transition: background-color .2s, color .2s; }
.xcard-ic .ic { width: 22px; height: 22px; }
.xcard.open .xcard-ic { background: var(--teal); color: #fff; }
.xcard-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; padding-top: 2px; }
.xcard-t { font-weight: 750; color: var(--ink); line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.xcard-s { color: var(--muted); font-size: .93em; line-height: 1.45; }
.xcard-chev { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); color: var(--muted); margin-top: 6px; transition: transform .25s var(--ease), background-color .2s; }
.xcard-chev .ic { width: 18px; height: 18px; }
.xcard.open .xcard-chev { transform: rotate(180deg); background: var(--teal-t); color: var(--teal-d); }
.xcard-d { padding: 2px 20px 20px 72px; animation: revealIn .3s var(--ease) both; }
@media (max-width: 520px) { .xcard-d { padding-left: 18px; } }
@keyframes revealIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Think reveal */
.think-q { font-weight: 650; color: var(--ink-2); font-size: 1.04em; }
.note-label { display: block; font-size: .9rem; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
.note-input { width: 100%; min-height: 90px; border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: 12px 14px; background: #FBFCFE; resize: vertical; margin-bottom: 12px; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.note-input:focus-visible { border-color: var(--blue); background: #fff; outline: 0; box-shadow: 0 0 0 4px rgba(46, 123, 209, .18); }
.reveal { margin-top: 16px; padding: 18px 20px; border-radius: 16px; background: #F5F6FD; border: 1px solid #DDE0F5; animation: revealIn .3s var(--ease) both; }

/* ---------------- Questions ---------------- */
.quiz { display: grid; gap: 16px; }
.q-card { border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: #fff; transition: border-color .25s; }
@media (min-width: 640px) { .q-card { padding: 20px 22px; } }
.q-card.is-ok { border-color: #C6E5D2; }
.q-card.is-no { border-color: #F1D3CF; }
.block-think .q-card { border: 0; padding: 0; }
.q-stem { font-weight: 650; color: var(--ink); margin-bottom: 14px; line-height: 1.5; }
.q-num { display: flex; align-items: center; gap: 8px; width: fit-content; font-size: .78rem; color: var(--muted); font-weight: 800; margin-bottom: 8px; padding: 2px 10px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.q-opts { display: grid; gap: 8px; }
.q-opts.tf { grid-template-columns: 1fr 1fr; max-width: 380px; }
.opt { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; min-height: 52px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; color: var(--text); line-height: 1.45; transition: border-color .15s, background-color .15s, box-shadow .15s, transform .1s; }
.q-opts.tf .opt { justify-content: center; font-weight: 800; }
.opt-l { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--surface); color: var(--ink-2); font-weight: 800; font-size: .84rem; margin-top: -1px; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .15s, color .15s, box-shadow .15s; }
.opt-t { flex: 1; padding-top: 1px; }
.opt-ic { margin-top: 2px; width: 22px; height: 22px; stroke-width: 2.4; }
.opt:active:not([aria-disabled="true"]) { transform: scale(.995); }
@media (hover: hover) {
  .opt:not([aria-disabled="true"]):hover { border-color: var(--blue); background: #F7FAFE; box-shadow: 0 2px 8px rgba(30, 99, 176, .08); }
  .opt:not([aria-disabled="true"]):hover .opt-l { background: var(--blue-t); color: var(--blue-d); box-shadow: inset 0 0 0 1px #C5D9F0; }
}
.opt[aria-disabled="true"] { cursor: default; }
.opt.correct { border-color: var(--ok); background: var(--ok-t); color: #0F4A2D; }
.opt.correct .opt-l { background: var(--ok); color: #fff; box-shadow: none; }
.opt.correct .opt-ic { color: var(--ok); }
.opt.wrong { border-color: var(--no); background: var(--no-t); color: #7A160F; }
.opt.wrong .opt-l { background: var(--no); color: #fff; box-shadow: none; }
.opt.wrong .opt-ic { color: var(--no); }
.opt.dim { opacity: .58; }
.opt.picked { border-color: var(--blue); background: var(--blue-t); }
.opt-sm { min-height: 44px; padding: 9px 14px; width: auto; }
.just .opt.correct .opt-l, .just .opt.wrong .opt-l { animation: pop .4s var(--ease); }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: none; } }
.q-fb { display: flex; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 14px; font-size: .96em; position: relative; }
.q-fb > .ic { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.q-fb-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; margin-top: 1px; }
.q-fb-ic .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.q-fb p { margin: 0 0 .35em; }
.q-fb p:last-child { margin-bottom: 0; }
.q-fb.ok { background: var(--ok-t); color: #12452C; box-shadow: inset 4px 0 0 var(--ok); }
.q-fb.ok .q-fb-ic { background: var(--ok); color: #fff; }
.q-fb.ok > .ic { color: var(--ok); }
.q-fb.no { background: #FFF6F4; color: #5A1712; box-shadow: inset 4px 0 0 var(--no), inset 0 0 0 1px #F6D2CD; }
.q-fb.no .q-fb-ic { background: #FBE1DD; color: var(--no); }
.q-fb.no > .ic { color: var(--no); }
.q-fb-h { font-weight: 800; }
.just .q-fb, .q-fb.just { animation: fbIn .4s var(--ease) both; }
@keyframes fbIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.q-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding-top: 2px; }
.q-foot .score-line { margin-right: auto; }
.q-dots { display: inline-flex; gap: 5px; }
.q-dots i { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--line-2); transition: background-color .2s; }
.q-dots i.ok { background: var(--ok); box-shadow: none; }
.q-dots i.no { background: var(--no); box-shadow: none; }
.score-line { font-weight: 800; color: var(--ink-2); margin: 0; }

/* Radio questions (pre-test and final) */
.pq { border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px 18px; margin: 0 0 14px; background: #fff; min-width: 0; transition: border-color .2s; }
.pq.is-answered { border-color: #C9D9EC; }
.pq legend { font-weight: 650; color: var(--ink); padding: 0; margin-bottom: 12px; float: left; width: 100%; line-height: 1.5; }
.pq legend + * { clear: both; }
.radio { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; min-height: 52px; border: 1.5px solid var(--line-2); border-radius: 14px; margin-bottom: 8px; cursor: pointer; line-height: 1.45; background: #fff; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.radio:last-of-type { margin-bottom: 0; }
@media (hover: hover) { .radio:hover { border-color: var(--blue); background: #F7FAFE; } }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio:has(input:checked) { border-color: var(--blue); background: var(--blue-t); box-shadow: 0 0 0 3px rgba(30, 99, 176, .1); }
.radio input:checked + .opt-l { background: var(--blue); color: #fff; box-shadow: none; animation: pop .35s var(--ease); }
.radio input:focus-visible + .opt-l { outline: 3px solid var(--focus); outline-offset: 2px; }
.radio.correct { border-color: var(--ok); background: var(--ok-t); }
.radio.correct .opt-l { background: var(--ok); color: #fff; box-shadow: none; }
.radio.wrong { border-color: var(--no); background: var(--no-t); }
.radio.wrong .opt-l { background: var(--no); color: #fff; box-shadow: none; }
.radio input:disabled ~ span { cursor: default; }
.pq .q-fb { margin-top: 12px; }
.pq.is-ok { border-color: #BFE2CF; }
.pq.is-no { border-color: #F2C9C4; }
.form-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 8px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); position: sticky; bottom: calc(var(--bn-h) + var(--safe-b) + 10px); z-index: 4; box-shadow: var(--shadow); }
@media (min-width: 1024px) { .form-foot { bottom: 16px; } }
.form-hint { color: var(--no); margin-top: 8px; }

/* Result card */
.result-card { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 18px; padding: 22px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.result-card > div:last-child { flex: 1; min-width: 220px; }
.result-card h2, .result-card h3 { margin-bottom: .3em; }
.result-card h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 620; }
.result-card.pass { background: linear-gradient(135deg, #E9F6EF, #F5FBF8); border-color: #C3E3D0; }
.result-card.pass .ring-arc { stroke: var(--ok); }
.result-card.fail { background: linear-gradient(135deg, #FFF6E6, #FFFBF3); border-color: #F1DDAA; }
.result-card.fail .ring-arc { stroke: var(--gold); }
.result-card.big { padding: 26px; }
@media (min-width: 640px) { .result-card.big { padding: 30px 34px; } }

/* Completion bar and pager */
.complete-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 18px; margin: 32px 0 18px; padding: 18px 20px; border-radius: var(--r-xl); border: 1.5px dashed var(--line-2); background: rgba(255, 255, 255, .7); transition: background-color .3s, border-color .3s; }
.complete-bar.is-done { border-style: solid; border-color: #B5DED5; background: linear-gradient(90deg, #E3F4F0, #F1FAF8); }
.cb-msg { display: flex; gap: 14px; align-items: flex-start; flex: 1; min-width: 240px; }
.cb-msg p { margin: 0; }
.cb-msg .mini-bar { margin-top: 10px; max-width: 260px; --g: var(--teal); }
.cb-mark { flex: none; width: 40px; height: 40px; }
.cb-mark svg { width: 40px; height: 40px; display: block; }
.cb-mark circle { fill: var(--teal); stroke: none; }
.cb-mark path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 0; }
.cb-mark.todo circle { fill: none; stroke: var(--line-2); stroke-width: 3; stroke-dasharray: 5 5; }
.complete-bar.just .cb-mark circle { animation: cbPop .45s var(--ease) both; transform-origin: 24px 24px; }
.complete-bar.just .cb-mark path { animation: cbDraw .45s .25s var(--ease) both; }
@keyframes cbPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cbDraw { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
.cb-h { font-weight: 800; color: var(--ink); font-size: 1.04rem; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.pager-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); font-weight: 750; line-height: 1.3; min-height: 72px; box-shadow: var(--shadow-1); transition: border-color .15s, box-shadow .2s, color .15s; }
.pager-link:hover { border-color: var(--g, var(--blue)); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.pg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pager-link small { display: block; font-weight: 700; color: var(--muted); font-size: .78rem; }
.pg-t { display: flex; align-items: center; gap: 10px; }
.pg-n { flex: none; display: none; }
.pg-chev { flex: none; width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: var(--g-t, var(--surface)); color: var(--g-d, var(--ink-2)); box-sizing: border-box; transition: background-color .15s, color .15s; }
.pager-link:hover .pg-chev { background: var(--g, var(--blue)); color: #fff; }
.pager-link.next { justify-content: flex-end; text-align: right; }
.pager-link.next .pg-t { justify-content: flex-end; }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } .pager > span { display: none; } }

/* ---------------- Home ---------------- */
.hero { position: relative; overflow: hidden; display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr; padding: 30px 22px 22px; margin-bottom: 30px; border-radius: 28px; color: #fff;
  background: radial-gradient(700px 420px at 92% 8%, rgba(52, 195, 177, .2), transparent 62%), radial-gradient(600px 400px at 0% 100%, rgba(30, 99, 176, .28), transparent 65%), linear-gradient(160deg, #0D2A4A, var(--navy-900));
  box-shadow: 0 24px 48px -24px rgba(8, 26, 47, .55); }
@media (min-width: 640px) { .hero { padding: 40px 36px 26px; } }
@media (min-width: 960px) { .hero { grid-template-columns: 1.15fr .85fr; gap: 44px; padding: 52px 52px 28px; } }
@media (max-width: 520px) { .hero-cta .btn { width: 100%; } }
.hero-copy { position: relative; z-index: 1; }
.hero-kicker { display: flex; align-items: center; gap: 10px; color: var(--teal-bright); font-weight: 700; margin-bottom: 14px; font-size: .95rem; }
.hero-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 0 4px rgba(52, 195, 177, .2); flex: none; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 1.35rem + 3.4vw, 3.6rem); line-height: 1.04; letter-spacing: -0.018em; font-weight: 600; margin-bottom: .45em; font-variation-settings: "opsz" 60; }
.hero-lede { font-size: 1.1em; color: rgba(255, 255, 255, .82); max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 16px; }
.hero .btn-primary { background: #fff; color: var(--ink); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
.hero .btn-primary:hover { background: #E9F4F2; color: var(--ink); }
.hero .btn-primary .ic { color: var(--teal); }
.hero-progress { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .72); font-size: .94rem; margin: 0; }
.hero-progress p { margin: 0; }
.ring-onnavy .ring-track { stroke: rgba(255, 255, 255, .16); }
.ring-onnavy .ring-arc { stroke: var(--teal-bright); }
.install-row { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 12px; }
.ios-hint { color: rgba(255, 255, 255, .72); }
.hero-art { position: relative; z-index: 1; margin: 0; }
.lightbox { position: relative; border-radius: 22px; padding: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -20px rgba(0, 0, 0, .55); }
.lightbox svg { display: block; width: 100%; height: auto; max-height: 520px; border-radius: 16px; }
.lightbox .hero-user-photo {
  display:block;
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  object-position:center;
  border-radius:16px;
  background:#fff;
}

.hero-art figcaption { display: flex; gap: 10px; align-items: center; color: rgba(255, 255, 255, .72); font-size: .88rem; margin-top: 12px; line-height: 1.4; }
.flow-key { flex: none; width: 28px; height: 0; border-top: 3px dashed var(--teal-bright); }
@media (max-width: 959px) { .hero-art { max-width: 440px; width: 100%; margin: 0 auto; } }
.hero-flow { fill: none; stroke: var(--teal); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 14; animation: airflow 2.6s linear infinite; opacity: .9; }
@keyframes airflow { to { stroke-dashoffset: -96; } }
.hero-facts { position: relative; z-index: 1; grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
@media (min-width: 860px) { .hero-facts { grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 36px; } }
.hero-facts li { display: flex; align-items: center; gap: 10px; margin: 0; color: rgba(255, 255, 255, .8); font-size: .92rem; line-height: 1.3; }
.hero-facts .ic { color: var(--teal-bright); width: 20px; height: 20px; }
.hero-facts b { color: #fff; font-weight: 800; }

.home-map, .home-band, .home-how, .home-sources { margin-bottom: 36px; }
.map-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.map-head h2 { margin-bottom: .15em; }
.map-head p { margin: 0; }
.pathway-map { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 14px; }
.pathway-map::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(180deg, #1C3A5E, var(--teal), var(--blue), var(--indigo), var(--gold)); border-radius: 2px; opacity: .5; }
.pm-stage { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; margin: 0; align-items: start; }
.pm-node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--g); box-shadow: inset 0 0 0 2px var(--g), 0 0 0 5px var(--canvas); }
.pm-node .ic { width: 20px; height: 20px; stroke-width: 2; }
.pm-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 16px 10px; box-shadow: var(--shadow-1); min-width: 0; }
.pm-card h3 { margin: 0; color: var(--g-d); font-family: var(--serif); font-size: 1.2rem; font-weight: 640; }
.pm-count { margin: 2px 0 8px; font-size: .84rem; color: var(--muted); font-weight: 600; }
.pm-card > .mini-bar { margin-bottom: 10px; }
.map-list { list-style: none; padding: 0; margin: 0 -6px; display: grid; grid-template-columns: 1fr; }
@media (min-width: 620px) and (max-width: 1099px) { .map-list { grid-template-columns: 1fr 1fr; column-gap: 8px; } }
.map-list li { margin: 0; }
.map-link { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; text-decoration: none; color: var(--text); line-height: 1.3; min-height: 42px; font-size: .95rem; transition: background-color .15s; }
.map-link:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
.map-n { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); color: var(--muted); font-weight: 800; font-size: .78rem; box-shadow: inset 0 0 0 1.5px var(--line-2); font-variant-numeric: tabular-nums; }
.map-n .ic { width: 14px; height: 14px; stroke-width: 3; }
.map-link.done .map-n { background: var(--g); color: #fff; box-shadow: none; }
@media (min-width: 1100px) {
  .pathway-map { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .pathway-map::before { left: 10%; right: 10%; top: 21px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, #1C3A5E, var(--teal), var(--blue), var(--indigo), var(--gold)); }
  .pm-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; justify-items: center; align-items: stretch; gap: 14px; }
  .pm-card { width: 100%; }
}

.home-band { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 20px; box-shadow: var(--shadow-1); }
@media (min-width: 640px) { .home-band { padding: 28px 32px; } }
.hb-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hb-head h2 { margin: 0; }
.hb-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--teal-t); color: var(--teal); }
.hb-ic .ic { width: 24px; height: 24px; }
.principles { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .principles { grid-template-columns: 1fr 1fr; } }
.principles li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.principles li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--surface); color: var(--ink-2); font-weight: 650; margin: 0; line-height: 1.45; border: 1px solid var(--line); }
.principles .ic { color: var(--teal); width: 20px; height: 20px; margin-top: 1px; stroke-width: 2.4; }
.how-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .how-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .how-grid { grid-template-columns: repeat(3, 1fr); } }
.how-item { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; background: #fff; box-shadow: var(--shadow-1); }
.how-item p { margin: 10px 0 0; color: #3A4C61; font-size: .96em; }
.how-grid.compact .how-item { padding: 12px 14px; box-shadow: none; background: var(--surface); }
.how-grid.compact .how-item p { margin-top: 6px; }
.home-sources h2 { margin-bottom: 14px; }
.src-chips { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px; }
.src-chips li { margin: 0; }
.src-chips a { display: flex; height: 100%; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); text-decoration: none; font-size: .9rem; font-weight: 650; line-height: 1.3; min-height: 44px; transition: border-color .15s, color .15s; }
.src-chips a:hover { border-color: #B9CBE0; color: var(--blue-d); }
.src-chips .ic { color: var(--teal); width: 18px; height: 18px; }
.home-foot { border-top: 1px solid var(--line); padding-top: 16px; }

/* ---------------- Modules ---------------- */
.progress-panel { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 20px; margin-bottom: 34px; background: #fff; box-shadow: var(--shadow); }
@media (min-width: 640px) { .progress-panel { padding: 28px 30px; } }
.pp-hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.pp-hero-txt { flex: 1; min-width: 220px; }
.pp-hero-txt h2 { margin: 0 0 .15em; }
.pp-big { font-size: 1.1rem; font-weight: 700; color: var(--ink-2); margin: 0 0 14px; }
.pp-hero-txt .btn { margin: 0; }
.ring-lg .ring-label { font-size: 1.6rem; }
@media (max-width: 520px) {
  .pp-hero { flex-wrap: nowrap; gap: 18px; align-items: flex-start; }
  .ring-lg { --sz: 88px !important; }
  .ring-lg .ring-label { font-size: 1.2rem; }
  .pp-hero-txt { min-width: 0; }
  .pp-big { font-size: 1rem; }
}
.pp-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pp-grid { grid-template-columns: repeat(3, 1fr); } }
.pp-item { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; min-width: 0; }
.pp-item p { margin: 0; }
.pp-item .mini-bar { margin: 6px 0 4px; --g: var(--teal); max-width: 180px; }
.pp-ic { margin-bottom: 8px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; color: var(--blue); box-shadow: inset 0 0 0 1px var(--line); }
.pp-ic .ic { width: 20px; height: 20px; }
.pp-k { color: var(--muted); font-size: .84rem; font-weight: 700; }
.pp-v { font-size: 1.45rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.3; }
.pp-compare { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; color: var(--ink-2); font-weight: 650; }
.pp-compare .ic { color: var(--gold); }
.pp-reset { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.pp-note { margin: 12px 0 0; }
.mod-group { margin-bottom: 34px; }
.mg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mg-head h2 { margin: 0; color: var(--ink); }
.mg-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--g); color: #fff; }
.mg-ic .ic { width: 20px; height: 20px; }
.mg-count { font-size: .86rem; font-weight: 700; color: var(--muted); margin-left: auto; }
.mg-bar { flex: none; width: 110px; }
@media (max-width: 520px) { .mg-count { margin-left: 0; flex-basis: 100%; order: 3; } .mg-bar { order: 4; flex: 1; } }
.mod-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .mod-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1240px) { .mod-grid { grid-template-columns: repeat(3, 1fr); } }
.mod-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; text-decoration: none; color: var(--text); box-shadow: var(--shadow-1); transition: border-color .2s, box-shadow .2s; min-width: 0; }
.mod-card:hover { border-color: var(--g); box-shadow: var(--shadow-lift); text-decoration: none; color: var(--text); }
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mod-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--g-t); color: var(--g-d); transition: background-color .2s, color .2s; }
.mod-ic .ic { width: 23px; height: 23px; }
.mod-card.done .mod-ic { background: var(--g); color: #fff; }
.mod-n { font-size: .8rem; color: var(--g-d); font-weight: 800; }
.mod-t { font-weight: 750; color: var(--ink); line-height: 1.3; font-size: 1.04rem; }
.mod-d { color: var(--muted); font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.mod-card .mod-d { margin-bottom: 10px; }
.mc-prog { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mc-lab { font-size: .78rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-cta { flex: none; display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: .88rem; color: var(--g-d); }
.mc-cta .ic { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.mod-card:hover .mc-cta .ic, .case-card:hover .mc-cta .ic { transform: translateX(3px); }

/* ---------------- Cases ---------------- */
.case-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 22px; }
@media (min-width: 720px) { .case-grid { grid-template-columns: 1fr 1fr; } }
.case-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--text); box-shadow: var(--shadow-1); transition: border-color .2s, box-shadow .2s; min-width: 0; }
.case-card:hover { border-color: var(--g); box-shadow: var(--shadow-lift); text-decoration: none; color: var(--text); }
.cc-top { display: flex; align-items: center; gap: 12px; }
.cc-top .mod-st { margin-left: auto; }
.case-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--g-t); color: var(--g-d); }
.case-ic .ic { width: 24px; height: 24px; }
.case-card.done .case-ic { background: var(--g); color: #fff; }
.cc-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.case-n { font-size: .8rem; font-weight: 800; color: var(--g-d); }
.case-tag { display: inline-block; width: fit-content; font-size: .84rem; color: var(--ink-2); font-weight: 650; }
.case-t { font-weight: 750; color: var(--ink); line-height: 1.3; font-size: 1.06rem; margin-top: 4px; }
.case-d { color: var(--muted); font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cc-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.cc-steps { display: inline-flex; gap: 4px; }
.cc-steps i, .cb-segs i { display: block; width: 18px; height: 6px; border-radius: 99px; background: #E3EAF1; }
.cc-steps i.ok { background: var(--ok); }
.cc-steps i.no { background: #E59A8F; }
.cc-n { font-size: .82rem; color: var(--muted); font-weight: 650; margin-right: auto; }
.case-banner { position: relative; overflow: hidden; display: flex; gap: 18px; align-items: flex-start; padding: 24px 22px; margin-bottom: 22px; border-radius: var(--r-xl); color: #fff;
  background: radial-gradient(420px 240px at 100% 0%, rgba(52, 195, 177, .2), transparent 70%), linear-gradient(150deg, #0D2A4A, var(--navy-900)); box-shadow: 0 18px 36px -20px rgba(8, 26, 47, .55); }
@media (min-width: 640px) { .case-banner { padding: 30px 32px; } }
.case-banner h1 { color: #fff; margin: 6px 0 14px; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.cb-ic { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .1); color: var(--teal-bright); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cb-ic .ic { width: 28px; height: 28px; }
.cb-txt { flex: 1; min-width: 0; }
.case-banner .sec-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0; font-size: .88rem; }
.case-banner .sec-num { padding: 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); font-weight: 800; }
.case-banner .sec-group { color: rgba(255, 255, 255, .78); font-weight: 650; }
.cb-prog { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: rgba(255, 255, 255, .78); }
.cb-segs { display: inline-flex; gap: 5px; }
.cb-segs i { width: 34px; background: rgba(255, 255, 255, .18); }
.cb-segs i.ok { background: var(--teal-bright); }
.cb-segs i.no { background: #F1A397; }
.cb-segs i.cur { background: rgba(255, 255, 255, .55); }
@media (max-width: 520px) { .cb-ic { display: none; } }
.case-intro { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 26px; }
@media (min-width: 820px) { .case-intro { grid-template-columns: 1fr 1fr; } }
.case-box { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 20px 22px; background: #fff; box-shadow: var(--shadow-1); }
.case-box h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-family: var(--sans); font-weight: 800; }
.case-box h2 .ic { color: var(--g); width: 22px; height: 22px; }
.case-box p:last-child, .case-box ul:last-child { margin-bottom: 0; }
.case-steps { position: relative; display: grid; gap: 18px; padding-left: 52px; }
.case-steps::before { content: ""; position: absolute; left: 19px; top: 24px; bottom: 24px; width: 2px; background: var(--line-2); border-radius: 2px; }
.case-step { position: relative; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 18px; background: #fff; box-shadow: var(--shadow-1); }
@media (min-width: 640px) { .case-step { padding: 22px 26px; } }
.case-step.current { border-color: #A9C6E8; box-shadow: 0 0 0 4px var(--blue-t), var(--shadow); animation: revealIn .35s var(--ease) both; }
.step-node { position: absolute; left: -52px; top: 18px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--muted); font-weight: 800; font-size: .95rem; box-shadow: inset 0 0 0 2px var(--line-2), 0 0 0 5px var(--canvas); }
.step-node .ic { width: 18px; height: 18px; stroke-width: 2.8; }
.case-step.current .step-node { background: var(--blue); color: #fff; box-shadow: 0 0 0 5px var(--canvas), 0 0 0 8px rgba(30, 99, 176, .18); }
.case-step.good .step-node { background: var(--ok); color: #fff; box-shadow: 0 0 0 5px var(--canvas); }
.case-step.poor .step-node { background: #FBE1DD; color: var(--no); box-shadow: inset 0 0 0 2px #F2B8B1, 0 0 0 5px var(--canvas); }
.step-label { font-size: .82rem; color: var(--muted); font-weight: 800; margin-bottom: 8px; }
.case-q { font-family: var(--sans); font-size: 1.12rem; font-weight: 750; line-height: 1.4; }
.case-update { display: flex; gap: 12px; align-items: flex-start; background: var(--blue-t); border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; color: var(--ink-2); box-shadow: inset 3px 0 0 var(--blue); }
.case-update p { margin: 0; }
.case-update .ic { color: var(--blue); margin-top: 3px; }
@media (max-width: 520px) {
  .case-steps { padding-left: 0; }
  .case-steps::before { display: none; }
  .step-node { left: 16px; top: 15px; width: 28px; height: 28px; font-size: .8rem; box-shadow: inset 0 0 0 2px var(--line-2); }
  .case-step.current .step-node { box-shadow: 0 0 0 4px rgba(30, 99, 176, .16); }
  .case-step.good .step-node, .case-step.poor .step-node { box-shadow: none; }
  .step-node .ic { width: 14px; height: 14px; }
  .step-label { padding-left: 38px; line-height: 28px; margin-top: -3px; }
}
.case-end { margin-top: 26px; border-radius: var(--r-xl); padding: 22px 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); animation: revealIn .4s var(--ease) both; }
@media (min-width: 640px) { .case-end { padding: 28px 32px; } }
.case-end > h2 { display: flex; align-items: center; gap: 10px; }
.case-end > h2 .ic { color: var(--teal); }
.pathway { list-style: none; padding: 0; margin: 0 0 20px; counter-reset: pw; position: relative; }
.pathway::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(var(--teal), var(--blue)); border-radius: 2px; opacity: .35; }
.pathway li { counter-increment: pw; position: relative; margin: 0 0 8px; padding-left: 42px; min-height: 28px; }
.pathway li::before { content: counter(pw); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font-size: .78rem; font-weight: 800; box-shadow: 0 0 0 4px #fff; }
.pathway li span { display: block; padding: 6px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: .95rem; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.case-learning { margin-bottom: 4px; }

/* ---------------- Final assessment ---------------- */
.final-intro, .final-q, .final-result { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 18px; background: #fff; box-shadow: var(--shadow); }
@media (min-width: 640px) { .final-intro, .final-q, .final-result { padding: 30px 32px; } }
.fi-grid { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 20px; }
@media (min-width: 640px) { .fi-grid { grid-template-columns: repeat(3, 1fr); } }
.fi-item { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.fi-item p { margin: 0; }
.fi-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--g); box-shadow: inset 0 0 0 1px var(--line); }
.fi-ic .ic { width: 22px; height: 22px; }
.final-intro .table-wrap { margin-top: 24px; }
.fq-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.fq-top p { margin: 0; }
.final-q .fq-bar { display: block; height: 8px; margin-bottom: 22px; }
.final-q .pq { border: 0; padding: 0; background: none; }
.final-q .pq legend { font-family: var(--serif); font-size: clamp(1.18rem, 1.05rem + .5vw, 1.4rem); font-weight: 600; line-height: 1.38; margin-bottom: 18px; font-variation-settings: "opsz" 24; color: var(--ink); }
.fq-nav { margin-top: 20px; }
.fq-warn { color: var(--amber); font-weight: 650; min-height: 1.2em; margin-top: 10px; }
.qmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; margin: 18px 0 16px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.qm { min-height: 42px; border-radius: 11px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; transition: background-color .15s, border-color .15s, color .15s; }
.qm:hover { border-color: var(--blue); color: var(--blue-d); }
.qm.answered { background: var(--blue-t); border-color: #A9C6E8; color: var(--blue-d); }
.qm.current { border-color: var(--ink); color: #fff; background: var(--ink); }
.fr-break { margin: 22px 0 6px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.fr-break h3 { margin-bottom: 12px; }
.fr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fr-list li { display: grid; grid-template-columns: minmax(120px, 170px) 1fr auto; align-items: center; gap: 14px; margin: 0; }
.fr-name { font-weight: 700; color: var(--ink-2); font-size: .94rem; display: flex; align-items: center; gap: 8px; }
.fr-name::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--g); }
.fr-bar { height: 10px; }
.fr-score { font-weight: 800; font-size: .9rem; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .fr-list li { grid-template-columns: 1fr auto; } .fr-bar { grid-column: 1 / -1; grid-row: 2; } }
.res-pill { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .84rem; font-weight: 800; }
.res-pill.pass { background: var(--ok-t); color: var(--ok); }
.res-pill.fail { background: var(--amber-t); color: var(--amber); }
.final-result > .table-wrap { margin-top: 18px; }
.rv-h { margin-top: 28px; }
.review { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rv { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0; background: #fff; }
.rv.ok { box-shadow: inset 4px 0 0 var(--ok); }
.rv.no { box-shadow: inset 4px 0 0 var(--no); }
.rv-q { font-weight: 650; color: var(--ink); display: flex; gap: 12px; }
.rv-n { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--surface); font-size: .82rem; font-weight: 800; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.rv-a { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; font-size: .96em; }
.rv-a .ic { margin-top: 3px; stroke-width: 2.4; }
.rv.ok .rv-a .ic { color: var(--ok); }
.rv.no .rv-a .ic { color: var(--no); }
.rv.no .rv-c .ic { color: var(--ok); }
.rv-e { color: #3A4C61; font-size: .95em; margin: 8px 0; }

/* ---------------- Quick guide ---------------- */
.guide-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: -6px 0 24px; }
.page-guide > section { margin-bottom: 34px; }
.alg { list-style: none; padding: 0; margin: 0; position: relative; }
.alg::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--teal), var(--blue)); border-radius: 2px; opacity: .5; }
.alg-step { position: relative; display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0 0 16px 60px; margin: 0; }
@media (min-width: 820px) { .alg-step { grid-template-columns: 200px 1fr; gap: 18px; } }
.alg-k { display: flex; align-items: center; gap: 8px; min-height: 44px; align-self: start; }
.alg-k h3 { margin: 0; font-size: 1.06rem; }
.alg-k > .ic { color: var(--teal); }
.alg-n { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--teal); color: var(--teal-d); font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 5px var(--canvas); }
.alg-d { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow-1); }
.alg-d .plain li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: .35em; font-size: .97em; }
.do-ic { color: var(--ok); margin-top: 3px; stroke-width: 2.4; }
.alg-dont { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #FFF6F4; color: #6B1F17; font-size: .95em; font-weight: 650; }
.dont-ic { color: var(--no); margin-top: 3px; stroke-width: 2.4; }
.guide-safety .principles li { background: #fff; }
.pearl-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pearl-grid { grid-template-columns: 1fr 1fr; } }
.pearl-grid li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, #FFFCF2, #FFF8E6); border: 1px solid #F0DFAF; color: #3A2B05; line-height: 1.45; }
.pearl-grid .ic { color: var(--gold); margin-top: 2px; }
.mistakes td:first-child { color: #6B1F17; }
.link-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .link-cards { grid-template-columns: repeat(3, 1fr); } }
.link-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; border: 1px solid var(--line); text-decoration: none; color: var(--text); background: #fff; box-shadow: var(--shadow-1); transition: border-color .2s, box-shadow .2s; }
.link-card:hover { border-color: var(--blue); text-decoration: none; color: var(--text); box-shadow: var(--shadow); }
.lc-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-t); color: var(--blue); }
.lc-ic .ic { width: 22px; height: 22px; }
.link-card b { display: block; color: var(--ink); }
.link-card span span { color: var(--muted); font-size: .93em; }

/* ---------------- Glossary and references ---------------- */
.search-row { position: sticky; top: var(--top-h); z-index: 5; background: rgba(242, 245, 248, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 12px 0 10px; margin: 0 0 8px; }
.search-row label { display: block; font-weight: 800; margin-bottom: 6px; color: var(--ink); font-size: .95rem; }
.search-row #gCount { margin: 6px 0 0; }
.search-box { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line-2); border-radius: 14px; padding: 0 14px; background: #fff; box-shadow: var(--shadow-1); transition: border-color .15s, box-shadow .15s; }
.search-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(46, 123, 209, .18); }
.search-box .ic { color: var(--muted); }
.search-box input { flex: 1; border: 0; min-height: 50px; background: transparent; outline: none; font-size: 1rem; min-width: 0; }
.gl-az { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 10px; }
.gl-az button, .gl-az span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 8px; font-size: .82rem; font-weight: 800; }
.gl-az button { border: 1px solid var(--line); background: #fff; color: var(--blue-d); }
.gl-az button:hover { background: var(--blue-t); border-color: #C5D9F0; }
.gl-az span { color: #B8C4D0; }
@media (pointer: coarse) { .gl-az button, .gl-az span { min-width: 40px; height: 40px; } }
.gl-sec { margin-bottom: 18px; }
.gl-letter { font-family: var(--serif); font-weight: 650; font-size: 1.5rem; color: var(--teal-d); margin: 18px 0 8px; display: flex; align-items: center; gap: 12px; scroll-margin-top: 170px; }
@media (max-width: 640px) {
  .gl-az { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .gl-az::-webkit-scrollbar { display: none; }
  .gl-az button, .gl-az span { flex: none; }
  .gl-letter { scroll-margin-top: 140px; }
}
.gl-letter::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gloss { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 4px 20px; box-shadow: var(--shadow-1); }
.gl-item { padding: 12px 0; border-bottom: 1px solid #EDF1F5; }
.gl-item:last-child { border-bottom: 0; }
.gl-item dt { font-weight: 800; color: var(--ink); }
.gl-item dd { margin: 3px 0 0; color: #33465C; }
.gl-empty { padding: 20px; color: var(--muted); background: #fff; border-radius: 18px; border: 1px dashed var(--line-2); }
.ref-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; }
.ref-item { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 12px; margin: 0; background: #fff; box-shadow: var(--shadow-1); }
.ref-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--teal-t); color: var(--teal); }
.ref-ic .ic { width: 22px; height: 22px; }
.ref-body { flex: 1; min-width: 0; }
.ref-full { color: var(--ink); line-height: 1.5; }
.ref-item summary { list-style: none; display: flex; gap: 6px; align-items: center; cursor: pointer; font-weight: 700; color: var(--blue); min-height: 40px; font-size: .94rem; }
.ref-item summary::-webkit-details-marker { display: none; }
.ref-item details ul { margin: 6px 0 4px; }
.page-refs > .block { margin-bottom: 18px; }

/* ---------------- Modal, toast, update ---------------- */
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(8, 26, 47, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: grid; place-items: end center; padding: 12px; animation: fadeIn .2s ease both; }
@media (min-width: 640px) { .modal { place-items: center; padding: 16px; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card { width: min(560px, 100%); max-height: 80vh; overflow: auto; background: #fff; border-radius: 22px; box-shadow: 0 30px 70px rgba(8, 26, 47, .35); padding: 20px 22px 22px; animation: sheetIn .3s var(--ease) both; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 1.3rem; }
.src-list { list-style: none; padding: 0; margin: 0 0 12px; }
.src-list li { padding: 14px 0; border-bottom: 1px solid var(--line); margin: 0; }
.src-book { display: flex; gap: 10px; align-items: flex-start; font-weight: 750; color: var(--ink); margin: 0; }
.src-book .ic { color: var(--teal); margin-top: 3px; }
.src-ch { margin: 6px 0 0 32px; color: #3A4C61; font-size: .95em; padding: 6px 10px; border-radius: 8px; background: var(--surface); }
body.modal-open { overflow: hidden; }
.toast { position: fixed; z-index: 95; left: 50%; bottom: calc(var(--bn-h) + var(--safe-b) + 14px); transform: translate(-50%, 20px); max-width: min(92vw, 520px); background: var(--navy-800); color: #fff; padding: 12px 18px 12px 16px; border-radius: 14px; box-shadow: var(--shadow-lift); font-weight: 650; font-size: .95rem; opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--ease); display: flex; align-items: center; gap: 10px; }
.toast::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 0 4px rgba(52, 195, 177, .25); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1024px) { .toast { bottom: 24px; left: calc(50% + var(--side-w) / 2); } }
.update-bar { position: fixed; z-index: 96; left: 12px; right: 12px; top: calc(var(--top-h) + 10px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lift); padding: 12px 14px; animation: sheetIn .3s var(--ease) both; }
.update-bar p { margin: 0 auto 0 0; font-weight: 750; color: var(--ink); }
@media (min-width: 1024px) { .update-bar { left: auto; right: 22px; width: 460px; } }

/* =====================================================================
   WIDGETS
   ===================================================================== */
.widget { margin-top: 6px; min-width: 0; }
.detail-panel { position: relative; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #F7FAFC, #F3F7FA); padding: 18px 20px; box-shadow: inset 0 1px 0 #fff; }
.detail-panel h3 { display: flex; align-items: center; gap: 10px; margin-bottom: .6em; font-family: var(--serif); font-size: 1.22rem; font-weight: 640; line-height: 1.25; }
.detail-panel h3 .ic { color: var(--teal); flex: none; }
.anat-info > *, .bm-info > *, .fc-info > *, .mdt-info > *, .spectrum .detail-panel > * { animation: revealIn .32s var(--ease) both; }
.detail-panel > :last-child { margin-bottom: 0; }
.dl-grid { margin: 0; }
.dl-grid dt { font-size: .8rem; font-weight: 800; color: var(--teal-d); margin-top: 12px; display: flex; align-items: center; gap: 8px; }
.dl-grid dt::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--teal); }
.dl-grid dt:first-child { margin-top: 0; }
.dl-grid dd { margin: 2px 0 0; }
.chip-btn { border: 1.5px solid var(--line-2); background: #fff; color: var(--ink-2); border-radius: 99px; padding: 6px 14px; min-height: 40px; font-size: .9rem; font-weight: 650; line-height: 1.25; text-align: left; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.chip-btn:hover { border-color: var(--teal); color: var(--teal-d); background: #F6FBFA; }
.chip-btn.sel, .chip-btn[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 4px 10px -4px rgba(13, 130, 119, .6); }
.anat-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: #EEF2F6; border: 1px solid var(--line); margin-bottom: 16px; }
.seg-btn { border: 0; background: transparent; padding: 8px 16px; min-height: 40px; border-radius: 10px; font-weight: 750; color: var(--muted); font-size: .92rem; transition: background-color .2s, color .2s, box-shadow .2s; }
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-pressed="true"] { background: #fff; color: var(--blue-d); box-shadow: 0 1px 2px rgba(11, 36, 64, .1), 0 2px 8px rgba(11, 36, 64, .08); }
.seg-btn[disabled] { opacity: .45; cursor: not-allowed; }
.key { display: inline-block; width: 18px; height: 10px; border-radius: 3px; vertical-align: middle; margin: 0 6px 0 2px; }
.key-event { background: rgba(14, 124, 123, .18); }
.key-ref { border-top: 2px dashed #8A99AB; height: 0; border-radius: 0; }
.key-var { background: var(--teal); height: 3px; }
.key-eff { background: var(--teal); height: 4px; }
.key-dent { border-top: 3px dashed var(--gold); height: 0; border-radius: 0; }
.legend { color: var(--muted); }

/* Tabs */
.tabs { min-width: 0; }
.tab-list { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 18px; scrollbar-width: thin; }
.tab { flex: none; border: 0; background: none; padding: 10px 16px; min-height: 46px; font-weight: 750; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 10px 10px 0 0; transition: color .15s, background-color .15s, border-color .2s; }
.tab:hover { color: var(--ink); background: var(--surface); }
.tab[aria-selected="true"] { color: var(--blue-d); border-bottom-color: var(--blue); }
.tab-panel { animation: revealIn .3s var(--ease) both; }
.tab-panel { min-width: 0; }

/* Spectrum */
.spec-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.spec-stop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; border: 1.5px solid var(--line-2); border-radius: 16px; background: #fff; font-weight: 750; font-size: .87rem; color: var(--ink-2); line-height: 1.25; text-align: center; min-height: 124px; transition: border-color .15s, background-color .15s, box-shadow .2s; }
.spec-stop:hover { border-color: var(--teal); }
.spec-stop.active { border-color: var(--teal); background: linear-gradient(180deg, #E6F5F2, #F4FBFA); color: var(--teal-d); box-shadow: 0 0 0 3px var(--teal-t); }
.spec-svg { width: 70px; height: 60px; }
.spec-wall { fill: #EBB8AE; }
.spec-lumen { fill: #F4FBFA; stroke: var(--airway-s); stroke-width: 1.5; transition: ry .3s; }
.spec-lumen.on { fill: var(--airway); }
.spec-arrow { display: flex; justify-content: space-between; margin: 8px 2px 14px; font-size: .82rem; font-weight: 700; color: var(--muted); position: relative; }
.spec-arrow::before { content: ""; position: absolute; left: 90px; right: 130px; top: 50%; height: 2px; background: linear-gradient(90deg, var(--teal), #D9776A); }
@media (max-width: 520px) { .spec-arrow::before { display: none; } }

/* Event trace */
.trace-fig { margin: 0; }
.trace-fig svg { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); }
.trace-fig figcaption { font-size: .93rem; color: #3A4A5E; margin-top: 10px; }
.tr-event { fill: rgba(14, 124, 123, .10); }
.tr-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.tr-line.flow { stroke: var(--teal); }
.tr-line.effort { stroke: var(--ink); }
.tr-title { font: 700 19px var(--sans); fill: var(--ink); }
.tr-lab { font: 700 17px var(--sans); fill: var(--muted); }

/* Classify */
.classify { display: grid; gap: 10px; }
.cl-row { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: #fff; transition: border-color .2s, background-color .2s; }
.cl-row.ok { border-color: #BFE2CF; background: #FAFDFB; }
.cl-row.no { border-color: #F2C9C4; background: #FFFBFA; }
.cl-item { font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.cl-bins, .ahi-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-bin { border: 1.5px solid var(--line-2); background: #fff; color: var(--ink-2); border-radius: 10px; padding: 7px 12px; min-height: 40px; font-weight: 600; font-size: .92rem; line-height: 1.25; text-align: left; }
.cl-bin:hover:not([disabled]) { border-color: var(--blue); background: #F7FAFE; }
.cl-bin[disabled] { cursor: default; opacity: .6; }
.cl-bin.correct { opacity: 1; border-color: var(--ok); background: var(--ok-t); color: #0F4A2D; }
.cl-bin.wrong { opacity: 1; border-color: var(--no); background: var(--no-t); color: #7A160F; }
.cl-fb { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: .94em; }
.cl-row.ok .cl-fb .ic { color: var(--ok); margin-top: 3px; }
.cl-row.no .cl-fb .ic, .ahi-case.no .cl-fb .ic { color: var(--no); margin-top: 3px; }
.ahi-case.ok .cl-fb .ic { color: var(--ok); margin-top: 3px; }
.cl-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* AHI */
.ahi-ex { display: grid; gap: 10px; justify-items: start; }
.ahi-ex > .note { justify-self: stretch; }
.ahi-case { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; width: 100%; background: #fff; }
.ahi-case.ok { border-color: #BFE2CF; }
.ahi-case.no { border-color: #F2C9C4; }
.ahi-badge { flex: none; width: 66px; border-radius: 14px; background: linear-gradient(160deg, var(--ink-2), var(--navy-900)); color: #fff; text-align: center; padding: 8px 4px; box-shadow: 0 6px 14px -8px rgba(8, 26, 47, .6); }
.ahi-badge span { display: block; font-size: .7rem; font-weight: 700; opacity: .8; }
.ahi-badge b { display: block; font-size: 1.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ahi-body { flex: 1; min-width: 0; }
.ahi-desc { margin-bottom: 8px; color: #33445A; }
.form-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .form-grid { grid-template-columns: repeat(4, 1fr); } }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .9rem; color: var(--ink-2); }
.form-grid input, .form-grid select, .mad-prof select { border: 1.5px solid var(--line-2); border-radius: 10px; padding: 8px 10px; min-height: 44px; background: #fff; font-weight: 600; font-size: 1rem; }
.form-grid input:focus-visible, .form-grid select:focus-visible, .mad-prof select:focus-visible { border-color: var(--blue); outline: 3px solid rgba(46, 123, 209, .25); outline-offset: 0; }
.calc-out { margin: 16px 0 8px; }
.calc-result { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.calc-num { font-family: var(--serif); font-size: 2.4rem; font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.calc-unit { color: var(--muted); font-weight: 600; }
.calc-cat { padding: 4px 12px; border-radius: 99px; font-weight: 800; font-size: .92rem; }
.cat-0 { background: #DDF2E6; color: #155E3A; }
.cat-1 { background: #FFF0C2; color: #6B4A00; }
.cat-2 { background: #FFDDB8; color: #7A3E00; }
.cat-3 { background: #F8C9C3; color: #7A160F; }
.sev-bar { position: relative; display: flex; height: 14px; border-radius: 99px; overflow: visible; margin: 6px 0 14px; }
.sev-seg { height: 100%; }
.sev-seg:first-child { border-radius: 99px 0 0 99px; }
.sev-seg:nth-last-child(2) { border-radius: 0 99px 99px 0; }
.sev-marker { position: absolute; top: -5px; width: 4px; height: 24px; margin-left: -2px; background: var(--ink); border-radius: 2px; box-shadow: 0 0 0 2px #fff; transition: left .25s; }

/* Anatomy */
.anat-wrap { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .anat-wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.anat-fig { margin: 0; }
.anat-fig figcaption { margin-top: 6px; }
.anat-svg { display: block; width: 100%; height: auto; }
.anat-info { min-height: 220px; }
.an-panel { fill: #F6F8FB; }
.an-tissue { fill: #F3E2DA; stroke: #D5AE9F; stroke-width: 2; }
.an-cranium { fill: #EDE5D6; stroke: #CDBF9E; stroke-width: 1.5; }
.an-bone-soft { fill: #F6F0E3; stroke: #CDBF9E; stroke-width: 1.5; }
.an-wall { fill: none; stroke: #D5AE9F; stroke-width: 2; }
.an-oes { fill: #EBC9BE; }
.an-cart { fill: #DCE7F0; stroke: #A9BCCD; stroke-width: 1.5; }
.an-air { fill: var(--airway); stroke: var(--airway-s); stroke-width: 1.5; }
.an-turb { fill: none; stroke: #C99B88; stroke-width: 4; stroke-linecap: round; opacity: .7; }
.an-adenoid { fill: #E3A99E; stroke: #C98375; stroke-width: 1.2; }
.an-bone { fill: #FBF5E6; stroke: #BFAE84; stroke-width: 2; }
.an-tooth { fill: #fff; stroke: #BFAE84; stroke-width: 1.5; }
.an-soft { fill: #EAB3A8; stroke: #C98375; stroke-width: 1.5; }
.an-muscle { fill: #E59E93; stroke: #C47A6E; stroke-width: 1.5; }
.an-cartl { fill: #CFE0EE; stroke: #8FA9C0; stroke-width: 1.5; }
.an-ramus { fill: none; stroke: #CDBF9E; stroke-width: 2; stroke-dasharray: 5 4; }
.an-tonsil { fill: rgba(214, 120, 105, .45); stroke: #B86455; stroke-width: 1.8; stroke-dasharray: 4 3; }
.an-bracket { fill: none; stroke: #8A99AB; stroke-width: 2; }
.an-guide { stroke: #8A99AB; stroke-width: 1; stroke-dasharray: 3 4; }
.an-blabel { font: 700 17px var(--sans); fill: var(--ink-2); }
.anat-svg .hot { cursor: pointer; transition: fill .15s, stroke-width .15s; }
.anat-svg .hot:hover { stroke: var(--blue); stroke-width: 2.6; }
.anat-svg .sel, .body-svg .bm-spot.sel .bm-ring, .face-svg .fc-spot.sel circle { animation: selPulse .7s var(--ease); }
@keyframes selPulse { 0% { stroke-width: 7px; } }
.anat-svg .an-air.sel { fill: #8ED8D0; stroke: var(--blue-d); stroke-width: 3; }
.anat-svg .an-bone.sel { fill: #FFE7A6; stroke: var(--blue-d); stroke-width: 3; }
.anat-svg .an-soft.sel, .anat-svg .an-muscle.sel { fill: #F08A78; stroke: var(--blue-d); stroke-width: 3; }
.anat-svg .an-cartl.sel { fill: #9FC6E6; stroke: var(--blue-d); stroke-width: 3; }
.anat-svg .an-tonsil.sel { fill: rgba(214, 90, 70, .8); stroke: var(--blue-d); stroke-width: 3; }
.bk-hit { fill: transparent; cursor: pointer; }
.hot-g { cursor: pointer; }
.hot-g:hover .an-blabel, .hot-g.sel .an-blabel { fill: var(--blue-d); text-decoration: underline; }
.hot-g.sel .an-bracket { stroke: var(--blue-d); stroke-width: 3; }
.hot-g:focus-visible { outline: none; }
.hot-g:focus-visible .an-bracket { stroke: var(--focus); stroke-width: 4; }
.mode-hero .an-panel { fill: #F2F7FA; }

/* Anatomy drag */
.drag-wrap { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .drag-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.small-fig { max-width: 440px; justify-self: center; width: 100%; }
.pin { cursor: pointer; }
.pin circle { fill: var(--ink); stroke: #fff; stroke-width: 2.5; }
.pin text { font: 800 16px var(--sans); fill: #fff; pointer-events: none; }
.tray { display: flex; flex-wrap: wrap; gap: 6px; min-height: 56px; padding: 10px; border: 1.5px dashed var(--line-2); border-radius: 16px; background: var(--surface); margin-bottom: 12px; }
.tray p { margin: 6px; }
.drag-chip { border: 1.5px solid var(--blue); background: #fff; color: var(--blue-d); border-radius: 10px; padding: 7px 12px; min-height: 40px; font-weight: 700; font-size: .92rem; touch-action: none; user-select: none; -webkit-user-select: none; }
.drag-chip.picked, .drag-chip[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: 0 0 0 3px rgba(46, 123, 209, .3); }
.drag-chip.ghost { position: fixed; z-index: 99; pointer-events: none; transform: translate(-50%, -50%) rotate(-2deg); box-shadow: var(--shadow-lift); background: var(--blue); color: #fff; }
.slots { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 6px; }
.slots li { margin: 0; }
.slot { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 12px 7px 8px; min-height: 48px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; transition: border-color .15s, background-color .15s; }
.slot:hover { border-color: var(--blue); }
.slot-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; font-size: .85rem; }
.slot-v { flex: 1; font-weight: 600; color: var(--ink-2); font-size: .97rem; }
.slot.ok { border-color: var(--ok); background: var(--ok-t); }
.slot.ok .ic { color: var(--ok); }
.slot.no { border-color: var(--no); background: var(--no-t); }
.slot.no .ic { color: var(--no); }

/* Pathophysiology player */
.patho { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .patho { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; } }
.patho-svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.pv-lab { font: 700 12px var(--sans); fill: var(--muted); }
.pv-state { fill: var(--ink); font-size: 13px; }
.pv-tissue { fill: #F3E2DA; }
.pv-air { fill: var(--airway); }
.pv-wall-l, .pv-wall-r { fill: #E59E93; transition: d .45s ease; }
.pv-arrow { fill: none; stroke: var(--teal-d); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pv-flow { transition: opacity .3s; }
.pv-chart { fill: #fff; stroke: var(--line-2); }
.pv-spo2 { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; }
.pv-dot { fill: var(--ink); stroke: #fff; stroke-width: 2; transition: cx .4s, cy .4s; }
.pv-sat { font: 800 15px var(--sans); fill: var(--ink); }
.pv-arousal { opacity: .2; transition: opacity .25s; }
.pv-arousal rect { fill: var(--amber-t); stroke: var(--gold); }
.pv-arousal text { font: 800 13px var(--sans); fill: var(--amber); }
.pv-arousal.on { opacity: 1; }
.patho-step { margin-bottom: 2px; font-weight: 700; }
.patho-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 650; margin-bottom: .35em; }
.patho-desc { min-height: 4.8em; }
.patho-flags { list-style: none; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.patho-flags li { display: flex; gap: 8px; align-items: baseline; margin: 0; padding: 6px 12px; border-radius: 10px; background: var(--surface); font-size: .92rem; }
.patho-flags span { color: var(--muted); font-weight: 600; }
.patho-flags b { color: var(--ink); }
.patho-ctrl { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.patho-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.dot { width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; position: relative; padding: 0; }
.dot::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--line-2); transition: background .2s, inset .2s; }
.dot.on::after { background: var(--teal); inset: 8px; }

/* Body map */
.body-wrap { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .body-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.body-fig { margin: 0; }
.body-svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.bm-body { fill: #E6EDF4; stroke: #B9C8D7; stroke-width: 2; }
.bm-limb { fill: none; stroke: #B9C8D7; stroke-width: 22; stroke-linecap: round; opacity: .55; }
.bm-car { fill: #EEF2F6; stroke: #B9C8D7; stroke-width: 2; }
.bm-wheel { fill: #B9C8D7; }
.bm-spot { cursor: pointer; }
.bm-hit { fill: transparent; }
.bm-ring { fill: rgba(14, 124, 123, .16); stroke: var(--teal); stroke-width: 2; transition: fill .15s; }
.bm-core { fill: var(--teal); }
.bm-spot:hover .bm-ring { fill: rgba(14, 124, 123, .3); }
.bm-spot.sel .bm-ring { fill: var(--blue); stroke: var(--blue-d); }
.bm-spot.sel .bm-core { fill: #fff; }
.bm-spot:focus-visible { outline: none; }
.bm-spot:focus-visible .bm-ring { stroke: var(--focus); stroke-width: 4; }
.bm-info { min-height: 150px; }

/* Face */
.face-wrap { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .face-wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.face-fig { margin: 0; }
.face-svg { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; }
.fc-skin { fill: #F3E2DA; stroke: #C99B88; stroke-width: 2.5; }
.fc-line { fill: none; stroke: #B07F6C; stroke-width: 2; stroke-linecap: round; }
.fc-guide { fill: none; stroke: #8A99AB; stroke-width: 1.5; stroke-dasharray: 4 4; }
.fc-spot { cursor: pointer; }
.fc-spot circle { fill: #fff; stroke: var(--blue); stroke-width: 2.5; transition: fill .15s; }
.fc-spot text { font: 800 15px var(--sans); fill: var(--blue-d); pointer-events: none; }
.fc-spot:hover circle { fill: var(--blue-t); }
.fc-spot.sel circle { fill: var(--blue); }
.fc-spot.sel text { fill: #fff; }
.fc-spot:focus-visible { outline: none; }
.fc-spot:focus-visible circle { stroke: var(--focus); stroke-width: 4.5; }
.face-side .anat-list .chip-btn { font-size: .88rem; }

/* ASK and LOOK */
.al-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 14px; }
@media (min-width: 760px) { .al-grid { grid-template-columns: 1fr 1fr; } }
.chk-group { border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px 12px; margin: 0; background: #fff; min-width: 0; }
.chk-group legend { font-family: var(--serif); font-weight: 700; color: var(--ink); padding: 0 6px; font-size: 1.1rem; }
.chk { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; min-height: 44px; border-radius: 8px; cursor: pointer; line-height: 1.4; }
.chk:hover { background: var(--surface); }
.chk input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); cursor: pointer; }
.flag { font-style: normal; font-size: .76rem; font-weight: 800; color: var(--no); background: var(--no-t); padding: 1px 7px; border-radius: 99px; margin-left: 4px; white-space: nowrap; }
.al-summary h4 { margin-top: 12px; margin-bottom: 4px; }
.al-summary p { margin-bottom: .5em; }

/* Virtual exam */
.vx-head { display: grid; gap: 12px; margin-bottom: 14px; }
.vx-patient { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: radial-gradient(260px 120px at 100% 0%, rgba(52, 195, 177, .22), transparent 70%), linear-gradient(150deg, var(--navy-800), var(--navy-900)); color: #fff; }
.vx-patient .ic { width: 28px; height: 28px; color: var(--teal-bright); }
.vx-patient b { display: block; }
.vx-patient span { font-size: .93rem; opacity: .88; }
.vx-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 6px; }
.vx-steps li { margin: 0; }
.vx-tab { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 7px 10px; min-height: 46px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; font-size: .88rem; font-weight: 700; color: var(--ink-2); line-height: 1.2; }
.vx-tab .n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: .8rem; }
.vx-tab .n .ic { width: 14px; height: 14px; }
.vx-tab.on { border-color: var(--blue); background: var(--blue-t); color: var(--blue-d); }
.vx-tab.on .n { background: var(--blue); color: #fff; }
.vx-tab.done .n { background: var(--teal); color: #fff; }
.vx-body { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: #fff; animation: revealIn .3s var(--ease) both; }
.vx-body h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 650; }
.vx .chk { padding: 6px; }
.vx-row { border-radius: 10px; margin-bottom: 4px; }
.vx-row.ok { background: #F4FBF7; }
.vx-row.no { background: #FFF6F5; }
.vx-fb { display: flex; gap: 8px; align-items: flex-start; margin: 0 6px 8px 36px; font-size: .9em; color: #3A4A5E; }
.vx-row.ok .vx-fb .ic { color: var(--ok); }
.vx-row.no .vx-fb .ic { color: var(--no); }
.vx-nav { margin-top: 12px; }
.vexam .q-card { margin-top: 14px; }

/* Phenotypes */
.ph-body { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ph-body { grid-template-columns: 220px 1fr; align-items: start; } }
.ph-fig { margin: 0; text-align: center; }
.ph-svg { width: 100%; max-width: 220px; height: auto; background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--line); }
.ph-ref { fill: none; stroke: #8A99AB; stroke-width: 2; stroke-dasharray: 5 4; }
.ph-var { fill: none; stroke: var(--teal); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ph-lab { font: 700 11px var(--sans); fill: var(--muted); }
.ph-fig figcaption { color: var(--muted); margin-top: 6px; }

/* Static vs dynamic */
.sd-body { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .sd-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.sd-svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.sd-bg { fill: #F6F8FB; stroke: var(--line); }
.sd-air { fill: var(--airway); stroke: var(--airway-s); stroke-width: 1.5; }
.sd-post { fill: #E8C9BE; }
.sd-soft { fill: #EAB3A8; stroke: #C98375; stroke-width: 1.5; }
.sd-muscle { fill: #E59E93; stroke: #C47A6E; stroke-width: 1.5; }
.sd-hard { fill: #FBF5E6; stroke: #BFAE84; stroke-width: 1.5; }
.sd-bg-edge { fill: #F6F8FB; }
.sd-tongue, .sd-post { transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.sd-pal-awake, .sd-pal-asleep { transition: opacity .6s ease; }
.sd-pal-asleep { opacity: 0; }
.sd-svg.asleep .sd-pal-asleep { opacity: 1; }
.sd-svg.asleep .sd-pal-awake { opacity: 0; }
.sd-svg.asleep .sd-tongue { transform: translateX(-46px); }
.sd-svg.asleep .sd-post { transform: translateX(12px); }
.sd-tag { font: 700 13px var(--sans); fill: var(--muted); }
.sd-tag-l { fill: #7A2E24; }
.sd-lab { font: 700 13px var(--sans); fill: var(--ink-2); }

/* Workflow */
.fl-intro { font-weight: 600; color: var(--ink-2); }
.flow { list-style: none; padding: 0; margin: 0; position: relative; }
.fl-node { position: relative; margin: 0 0 10px; padding-left: 0; }
.fl-node + .fl-node::before { content: ""; position: absolute; left: 26px; top: -10px; height: 10px; width: 2px; background: var(--line-2); }
.fl-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; min-height: 54px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; font-weight: 700; color: var(--ink); line-height: 1.3; transition: border-color .15s, box-shadow .15s; }
button.fl-card:hover { border-color: var(--blue); }
.fl-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-t); color: var(--blue-d); font-size: .82rem; }
.fl-title { flex: 1; }
.fl-chev { color: var(--muted); transition: transform .2s; }
.fl-step[aria-expanded="true"] .fl-chev { transform: rotate(180deg); }
.fl-step[aria-expanded="true"] { border-color: var(--blue); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fl-detail { border: 1.5px solid var(--blue); border-top: 0; border-radius: 0 0 14px 14px; padding: 10px 14px 14px 54px; background: #F8FBFE; font-size: .96em; color: #33445A; animation: revealIn .25s var(--ease) both; }
.fl-dec .fl-card { flex-wrap: wrap; background: #FFFCF3; border-color: #EBD49A; border-style: dashed; }
.fl-diamond { flex: none; width: 28px; height: 28px; display: grid; place-items: center; transform: rotate(45deg); background: var(--gold); color: #fff; border-radius: 5px; font-weight: 800; font-size: .85rem; }
.fl-diamond > span { transform: rotate(-45deg); line-height: 1; }
.fl-branch { display: flex; gap: 6px; margin-left: auto; }
.fl-branch .seg-btn { border: 1.5px solid var(--line-2); background: #fff; color: var(--ink-2); min-width: 64px; }
.fl-branch .seg-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fl-end { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 4px; padding: 10px 14px; border-radius: 10px; background: var(--amber-t); color: #4F3600; font-size: .95em; }
.fl-end p { margin: 0; }
.fl-end .ic { color: var(--amber); margin-top: 3px; }
.fl-node.muted { opacity: .42; }
.fl-hint { margin-top: 4px; }

/* MAD simulator */
.mad-prof { margin-bottom: 14px; }
.mad-prof label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.mad-prof select { width: 100%; max-width: 420px; }
.mad-prof p { margin: 6px 0 0; }
.mad-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .mad-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "controls chart" "controls report"; align-items: start; }
  .mad-controls { grid-area: controls; }
  .mad-chartbox { grid-area: chart; }
  .mad-report { grid-area: report; }
}
.mad-chartbox .legend { margin: 6px 0 0; }
.rng-lab { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.rng-lab output { color: var(--blue-d); font-variant-numeric: tabular-nums; white-space: nowrap; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; accent-color: var(--blue); cursor: pointer; margin: 0; --fill: 50%; touch-action: pan-y; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--blue) 0 var(--fill), #DCE4EC var(--fill) 100%); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); box-shadow: 0 2px 8px rgba(11, 36, 64, .28); transition: transform .15s var(--ease), box-shadow .15s; }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: #DCE4EC; }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--blue); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); box-shadow: 0 2px 8px rgba(11, 36, 64, .28); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(46, 123, 209, .35), 0 2px 8px rgba(11, 36, 64, .28); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(46, 123, 209, .35); }
.mad-meters { display: grid; gap: 10px; margin-top: 14px; }
.meter-top { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.meter-track { height: 10px; border-radius: 99px; background: #E3EAF1; overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: 99px; transition: width .25s; }
.lvl-good { color: var(--ok); }
.lvl-mid { color: var(--amber); }
.lvl-bad { color: var(--no); }
.meter-fill.lvl-good { background: #2E9A64; }
.meter-fill.lvl-mid { background: #D9A030; }
.meter-fill.lvl-bad { background: #D2483B; }
.mad-chart { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); }
.mad-zone { fill: rgba(14, 124, 123, .1); }
.mad-zl { font: 700 11px var(--sans); fill: var(--teal-d); }
.mad-axis { stroke: #9FB0C2; stroke-width: 1.2; }
.mad-eff { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linejoin: round; }
.mad-dent { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 6 4; stroke-linejoin: round; }
.mad-now { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mad-dot { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.mad-tick { font: 600 11px var(--sans); fill: var(--muted); }
.mad-report { margin-top: 0; }
.mad-report h4 { margin-bottom: 6px; }
.mad-report .plain li { display: flex; gap: 8px; align-items: flex-start; }
.mad-report .plain .ic { color: var(--teal); margin-top: 3px; }
.mad-msg { padding-left: 1.2em; color: #33445A; }
.mad-study { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); font-size: .95em; }
.mad-study.ok { background: var(--ok-t); color: #12452C; }
.mad-study.mid { background: var(--amber-t); color: #4F3600; }
.mad-study.no { background: var(--no-t); color: #5A1712; }
.mad-study .small { display: block; margin-top: 4px; opacity: .85; }

/* Expansion pathway */
.ep-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; }
.ep-step { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0; background: #fff; }
.ep-step.current { border-color: #A9C6E8; box-shadow: 0 0 0 3px var(--blue-t); }
.ep-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ep-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 800; font-size: .85rem; }
.ep-step.done .ep-n { background: var(--teal); }
.ep-k { font-weight: 800; color: var(--ink); }
.ep-q { margin-bottom: 10px; }
.ep-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ep-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--blue-t); color: var(--ink-2); font-size: .95em; }
.ep-note p { margin: 0; }
.ep-note .ic { margin-top: 3px; color: var(--blue); }
.ep-note.stop { background: var(--amber-t); color: #4F3600; }
.ep-note.stop .ic { color: var(--amber); }
.ep-note.end { background: var(--ok-t); color: #12452C; }
.ep-note.end .ic { color: var(--ok); }
.exppath .callout { margin-bottom: 12px; }

/* Orthognathic explorer */
.ogx-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .ogx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.ogx-svg { display: block; width: 100%; height: auto; }
.og-bg { fill: #F6F8FB; stroke: var(--line); }
.og-vert { fill: #F6F0E3; stroke: #CDBF9E; stroke-width: 1.5; }
.og-air { fill: var(--airway); stroke: var(--airway-s); stroke-width: 1.5; }
.og-bone { fill: #FBF5E6; stroke: #BFAE84; stroke-width: 2; }
.og-soft { fill: #EAB3A8; stroke: #C98375; stroke-width: 1.5; }
.og-muscle { fill: #E59E93; stroke: #C47A6E; stroke-width: 1.5; opacity: .92; }
.og-lab { font: 700 14px var(--sans); fill: var(--ink-2); }
.og-wall { stroke: #C98375; stroke-width: 3; }
.og-small { font-size: 12px; fill: var(--muted); }
.ogx-ctrl .detail-panel { margin-top: 12px; }

/* MDT wheel */
.mdt { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .mdt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.mdt-fig { margin: 0; }
.mdt-svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.mdt-seg { cursor: pointer; }
.mdt-seg path { fill: #EAF1F8; stroke: #fff; stroke-width: 3; transition: fill .2s; transform-box: view-box; transform-origin: 200px 200px; }
.mdt-seg text { font: 700 15px var(--sans); fill: var(--ink-2); pointer-events: none; }
.mdt-seg:hover path { fill: #D5E4F3; }
.mdt-seg.sel path { fill: var(--blue); transform: scale(1.035); animation: segPop .35s var(--ease); }
@keyframes segPop { from { transform: scale(1); } }
.mdt-seg.sel text { fill: #fff; }
.mdt-seg:focus-visible { outline: none; }
.mdt-seg:focus-visible path { stroke: var(--focus); stroke-width: 5; }
.mdt-core { fill: var(--navy-800); stroke: #fff; stroke-width: 4; }
.mdt-pt { font: 650 19px var(--serif); fill: #fff; }
.mdt-pt2 { font: 600 10.5px var(--sans); fill: rgba(255, 255, 255, .8); }
.mdt-info { min-height: 200px; }
.mdt-side { min-width: 0; }
.mdt-list .chip-btn { font-size: .88rem; }

/* Role chain */
.rolechain { display: grid; gap: 14px; }
.rc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rc-list li { margin: 0; display: flex; align-items: center; }
.rc-list li + li::before { content: ""; width: 10px; height: 2px; background: var(--line-2); margin-right: 6px; }
.rc-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 7px; min-height: 44px; border: 1.5px solid var(--line-2); border-radius: 99px; background: #fff; font-weight: 700; color: var(--ink-2); font-size: .92rem; }
.rc-btn:hover { border-color: var(--teal); }
.rc-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: .8rem; }
.rc-btn .ic { color: var(--teal); }
.rc-btn.sel { background: var(--teal); border-color: var(--teal); color: #fff; }
.rc-btn.sel .ic { color: #fff; }
.rc-btn.sel .rc-n { background: rgba(255, 255, 255, .22); }

.madsim > .small { margin-top: 14px; }

/* ---------------- Wide tables: show that they scroll sideways ---------------- */
.table-wrap {
  background:
    linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
    linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11, 36, 64, .16), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11, 36, 64, .16), transparent) right center / 12px 100% no-repeat scroll,
    #fff;
}

/* ---------------- Touch screens: comfortable tap targets ---------------- */
@media (pointer: coarse) {
  .source-btn, .toc-link, .chip-btn, .seg-btn, .cl-bin, .tab { min-height: 44px; }
  .dot { width: 40px; height: 40px; }
  .dot::after { inset: 14px; }
  .dot.on::after { inset: 12px; }
}

/* ---------------- Phones in landscape: keep more room for content ---------------- */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023px) {
  :root { --bn-h: 50px; --top-h: 56px; }
  .bn-link span { display: none; }
  .bn-link .ic { padding: 3px 14px; }
}

/* ---------------- Small phones ---------------- */
@media (max-width: 380px) {
  main { padding-left: 12px; padding-right: 12px; }
  .block { --px: 14px; }
  .hero { padding: 24px 16px 18px; border-radius: 22px; }
  .hero-facts { grid-template-columns: 1fr; }
  .opt, .radio { padding: 10px 12px; gap: 10px; }
  .xcard-btn { gap: 10px; padding: 12px; }
  .xcard-ic { width: 36px; height: 36px; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero-flow { animation: none; stroke-dasharray: none; }
}

/* ---------------- Print (quick guide and sections) ---------------- */
@media print {
  body { background: #fff; }
  .topbar, .sidebar, .bottom-nav, .scrim, .pager, .complete-bar, .toast, .update-bar, .skip-link, .source-btn, .guide-tools, .toc, .toc-rail, .btn, .install-row, .sh-meta, .crumbs { display: none !important; }
  main { margin: 0 !important; padding: 0 !important; }
  #view, #view[data-wide] { max-width: none; }
  .sec-layout { display: block !important; }
  body { font-size: 11pt; color: #000; }
  .sh-num { box-shadow: none; }
  .block, .alg-d, .case-box, .case-step, .final-intro, .final-q, .final-result, .hero, .banner { box-shadow: none !important; break-inside: avoid; }
  .alg-step, .pearl-grid li, .principles li, .mistakes tr { break-inside: avoid; }
  .page, .page * { animation: none !important; }
  a { color: #000; text-decoration: none; }
}

/* Hosted preview page: keep the bars clear of phone system bars */
.topbar { top: env(safe-area-inset-top, 0px); }


/* =====================================================================
   PREMIUM VISUAL LAYER — 2026 edition
   Keeps the learning logic intact while making the module more vibrant,
   elegant and easier to explore on iPhone, iPad, Mac and desktop browsers.
   ===================================================================== */
:root {
  --navy-900: #061A2C;
  --navy-800: #0A2C4A;
  --ink: #0A2944;
  --ink-2: #214B70;
  --blue: #2B74C8;
  --blue-d: #185697;
  --blue-t: #EAF3FF;
  --teal: #078C84;
  --teal-d: #056B66;
  --teal-t: #E6FAF7;
  --teal-bright: #55E0D0;
  --indigo: #6457C6;
  --indigo-t: #F0EEFF;
  --airway: #D8F7F2;
  --airway-s: #19A89B;
  --canvas: #F4F8FC;
  --surface: #F7FAFD;
  --line: #DDE8F2;
  --line-2: #C7D6E5;
  --gold: #C78618;
  --shadow: 0 10px 30px rgba(10, 44, 74, .08), 0 2px 8px rgba(10, 44, 74, .05);
  --shadow-lift: 0 18px 46px rgba(10, 44, 74, .15), 0 6px 16px rgba(10, 44, 74, .08);
}
.g-start { --g: #244D73; --g-d: #173653; --g-t: #EAF1F7; }
.g-foundations { --g: #078C84; --g-d: #056B66; --g-t: #E5FAF6; }
.g-assessment { --g: #2B74C8; --g-d: #185697; --g-t: #EAF3FF; }
.g-management { --g: #6457C6; --g-d: #493DA0; --g-t: #F0EEFF; }
.g-apply { --g: #D18719; --g-d: #935C0A; --g-t: #FFF4DD; }

body {
  background:
    radial-gradient(900px 520px at -10% -8%, rgba(80, 201, 190, .14), transparent 62%),
    radial-gradient(820px 520px at 108% 8%, rgba(81, 125, 212, .13), transparent 60%),
    linear-gradient(180deg, #F7FBFF 0%, #F3F7FB 48%, #F8FAFD 100%);
}

.topbar {
  background: rgba(255,255,255,.86);
  border-bottom-color: rgba(168,190,211,.58);
  box-shadow: 0 8px 30px rgba(10,44,74,.045);
}
.brand-mark { box-shadow: 0 8px 18px rgba(9,64,99,.20); }
.brand-t { letter-spacing: -.012em; }
.progress-fill { background: linear-gradient(90deg, #0FA59B 0%, #2B74C8 52%, #6559CE 100%); }

.sidebar {
  background:
    radial-gradient(380px 260px at 20% 0%, rgba(85,224,208,.12), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F6FAFD 100%);
}

.page { animation: premiumPageIn .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes premiumPageIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.hero {
  min-height: 520px;
  padding: clamp(28px, 4vw, 54px) clamp(22px, 4vw, 54px) 28px;
  border-radius: 34px;
  background:
    radial-gradient(420px 300px at 92% 10%, rgba(88,231,214,.24), transparent 68%),
    radial-gradient(520px 360px at 10% 110%, rgba(111,101,218,.26), transparent 68%),
    linear-gradient(135deg, #071D31 0%, #0A3555 43%, #0B5967 100%);
  box-shadow: 0 28px 70px rgba(5,31,53,.23), 0 8px 22px rgba(5,31,53,.10);
  isolation: isolate;
}
.hero::before {
  content:""; position:absolute; width:440px; height:440px; right:-220px; top:-230px;
  border:1px solid rgba(255,255,255,.13); border-radius:50%; box-shadow:0 0 0 58px rgba(255,255,255,.025),0 0 0 116px rgba(255,255,255,.018); pointer-events:none;
}
.hero::after {
  content:""; position:absolute; inset:auto auto -140px -100px; width:320px; height:320px;
  background:radial-gradient(circle,rgba(85,224,208,.13),transparent 68%); pointer-events:none;
}
.hero-copy,.hero-art,.hero-facts { position:relative; z-index:1; }
.hero-kicker { display:inline-flex; padding:7px 12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); border-radius:999px; backdrop-filter:blur(10px); }
.hero h1 { max-width: 14ch; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.16); }
.hero-lede { font-size:clamp(1.02rem,.98rem + .35vw,1.18rem); color:rgba(255,255,255,.86); max-width:62ch; }
.hero .btn { border-radius:14px; min-height:48px; }
.hero .btn-primary { background:linear-gradient(135deg,#FFFFFF,#E9FFFC); box-shadow:0 12px 28px rgba(0,0,0,.22); }
.hero .btn-onnavy { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); backdrop-filter:blur(10px); }
.hero-art .lightbox { border-radius:26px; background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(240,250,250,.94)); box-shadow:0 18px 44px rgba(0,0,0,.18); }
.hero-facts { border-top-color:rgba(255,255,255,.16); }
.hero-facts li { background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:10px 12px; }

.home-map,.home-band,.home-how,.home-sources { position:relative; }
.home-map::before,.home-how::before { content:""; position:absolute; inset:-18px -18px; border-radius:30px; background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.22)); border:1px solid rgba(211,225,238,.65); z-index:-1; }
.map-head h2,.home-band h2,.home-how h2,.home-sources h2 { letter-spacing:-.015em; }
.pm-card,.how-item,.mod-card,.case-box,.q-card,.block {
  border-color:rgba(202,218,232,.86);
  box-shadow:var(--shadow);
}
.pm-card { padding:18px 18px 12px; overflow:hidden; position:relative; }
.pm-card::before { content:""; position:absolute; left:0; top:0; right:0; height:4px; background:linear-gradient(90deg,var(--g),color-mix(in srgb,var(--g) 35%, white)); }
.pm-stage:hover .pm-card { box-shadow:var(--shadow-lift); transform:translateY(-2px); }
.pm-card,.how-item,.mod-card,.block,.case-box,.q-card { transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease); }
.how-item:hover,.mod-card:hover { transform:translateY(-4px); }
.how-item { background:linear-gradient(180deg,#fff 0%,#FAFCFE 100%); min-height:100%; }
.home-band { background:linear-gradient(135deg,#082B47,#0A5361); border-radius:28px; padding:24px; color:white; box-shadow:0 18px 42px rgba(6,43,71,.16); }
.home-band h2,.home-band .principles span { color:white; }
.home-band .hb-ic { background:rgba(255,255,255,.10); color:#5AE2D4; }
.home-band .principles li { border-color:rgba(255,255,255,.13); background:rgba(255,255,255,.055); }

.mod-card { border-radius:20px; background:linear-gradient(180deg,#FFFFFF 0%,#FBFDFF 100%); position:relative; overflow:hidden; }
.mod-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--g); opacity:.72; }
.mod-card:hover { transform:translateY(-4px); }
.mod-ic { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g) 22%, transparent); }

.sec-head { padding:24px 24px 20px; border-radius:26px; background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(247,251,255,.75)); border:1px solid rgba(205,219,232,.86); box-shadow:0 14px 38px rgba(12,49,82,.07); }
.sec-head .sh-num { box-shadow:0 10px 24px color-mix(in srgb,var(--g) 20%, transparent); }
.block { border-radius:24px; }
.block:hover { box-shadow:0 15px 40px rgba(10,44,74,.10); }
.block-explore,.block-try,.block-think,.block-check { overflow:hidden; }
.block-explore > .block-head,.block-try > .block-head,.block-think > .block-head,.block-check > .block-head { border-radius:22px 22px 0 0; }
.banner { background:radial-gradient(420px 260px at 95% 0%,rgba(86,229,214,.26),transparent 70%),linear-gradient(135deg,#082B47,#0A5261); box-shadow:0 18px 46px rgba(6,43,71,.20); }
.block-pearl { background:linear-gradient(135deg,#FFF9E9 0%,#FFFDF8 60%,#FFF2D1 100%); box-shadow:0 10px 28px rgba(141,94,10,.09); }
.q-card { background:linear-gradient(180deg,#FFFFFF,#FCFEFF); }
.opt,.radio,.chip-btn { transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease; }
.opt:hover,.radio:hover,.chip-btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(13,53,88,.08); }

.btn { border-radius:12px; }
.btn-primary { background:linear-gradient(135deg,var(--blue),#2368B3); box-shadow:0 8px 18px rgba(43,116,200,.22); }
.btn-primary:hover { box-shadow:0 12px 24px rgba(43,116,200,.28); transform:translateY(-1px); }

.bottom-nav { background:rgba(255,255,255,.92); backdrop-filter:blur(18px) saturate(1.4); border-top-color:rgba(185,204,221,.72); }
.bn-link { border-radius:12px; }
.bn-link[aria-current="page"] { background:#ECF6FF; }

.source-btn { border-radius:999px; }
.modal-card { border:1px solid rgba(212,225,236,.9); }

@media (min-width:860px) {
  .hero { grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); gap:42px; }
  .hero-art { transform:translateY(-2px); }
}
@media (max-width:720px) {
  .hero { min-height:0; border-radius:26px; }
  .hero h1 { max-width:none; }
  .hero-facts li { padding:9px 10px; }
  .sec-head { padding:20px 17px 17px; border-radius:22px; }
  .home-map::before,.home-how::before { inset:-10px -8px; border-radius:24px; }
}
@media (prefers-reduced-motion:reduce) { .page { animation:none; } }
@media print { body{background:#fff!important}.home-band{color:#000;background:#fff!important}.home-band h2,.home-band .principles span{color:#000!important} }