/* ============================================================
   ai45.xyz — IB syllabus notes reader (notes.html)
   Google-Docs-style side panel (chapters → subtopics → sections),
   one subtopic per view, SL/HL switch, simulations, recall.
   Builds on site.css; colours are theme tokens (themes.css),
   plus the callout colours below with their light variants.
   ============================================================ */

:root {
  --n-def: #7C9CF0;
  --n-key: #F9982F;
  --n-tip: #23B58F;
  --n-trap: #E0707B;
  --n-nos: #3CB4C2;
  --n-like: #EAB56F;
  --n-hl: #B08AE0;
  --n-well: rgba(var(--well-rgb), calc(0.32 * var(--well-k)));
  --n-hover: rgba(var(--fg-rgb), 0.06);
  --n-line: rgba(var(--fg-rgb), 0.09);
  --n-side-top: 96px;
}
html[data-theme="light"] {
  --n-def: #3E63C9;
  --n-key: #B8620F;
  --n-tip: #0B7F63;
  --n-trap: #C0444F;
  --n-nos: #1C7480;
  --n-like: #8A5A12;
  --n-hl: #7444B5;
  --n-well: rgba(var(--well-rgb), 0.05);
}

/* ---------- slim hero ---------- */
.nb-hero { min-height: 0; padding-bottom: 0; background: none; padding: 0; }
.nb-top {
  max-width: 1264px;
  margin: 0 auto;
  padding: 104px 48px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.nb-top__eyebrow { font-size: 11px; color: var(--sand); }
.nb-top__title { margin-top: 10px; font-size: clamp(28px, 3.6vw, 44px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; }
.nb-top__sub { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 62ch; }
.nb-subjects { display: flex; gap: 6px; flex-wrap: wrap; }
.nb-subj {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--n-line);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.nb-subj:hover { color: var(--paper); background: var(--n-hover); }
.nb-subj.is-on { color: var(--on-accent); background: var(--sand); border-color: transparent; }
.nb-subj.is-soon { opacity: .6; }
.nb-subj .nb-soon { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--n-nos); }

/* ---------- layout ---------- */
.nb { max-width: 1264px; margin: 28px auto 0; padding: 0 48px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 44px; align-items: start; }
.nb-side {
  position: sticky;
  top: var(--n-side-top);
  max-height: calc(100vh - var(--n-side-top) - 20px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  transition: top .4s var(--ease), max-height .4s var(--ease);
}
body.dock-low .nb-side { top: 24px; max-height: calc(100vh - 128px); }
.nb-side__head { padding: 14px 14px 12px; border-bottom: 1px solid var(--hairline); display: grid; gap: 10px; }
.nb-side__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 10px 8px 16px; scrollbar-width: thin; }
.nb-side__close { display: none; }

/* SL / HL switch */
.nb-level { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: var(--n-well); border: 1px solid var(--hairline); }
.nb-level button { padding: 7px 0; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); transition: background-color .2s var(--ease), color .2s var(--ease); }
.nb-level button.is-on { background: var(--paper); color: var(--navy); }
.nb-level__hint { font-size: 11.5px; line-height: 1.45; color: var(--faint); }

.nb-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; background: var(--n-well); border: 1px solid var(--hairline); }
.nb-search:focus-within { border-color: color-mix(in srgb, var(--orange) 55%, transparent); }
.nb-search svg { width: 15px; height: 15px; flex: none; opacity: .55; }
.nb-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: 13.5px; color: var(--paper); }
.nb-search input::placeholder { color: var(--faint); }

.nb-prog { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--faint); }
.nb-prog__bar { flex: 1; height: 5px; border-radius: 999px; background: var(--n-line); overflow: hidden; }
.nb-prog__bar i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: inherit; background: var(--sand); transition: width .6s var(--ease); }

/* tree */
.nb-ch + .nb-ch { margin-top: 4px; }
.nb-ch__h {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 10px; text-align: left;
  font-size: 13px; font-weight: 700; color: var(--paper);
}
.nb-ch__h:hover { background: var(--n-hover); }
.nb-ch__code { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--on-accent); background: var(--sand); }
.nb-ch__t { flex: 1; min-width: 0; }
.nb-ch__n { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--faint); }
.nb-ch__chev { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--faint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.nb-ch.is-open .nb-ch__chev { transform: rotate(180deg); }
.nb-ch__items { display: none; padding: 2px 0 6px; }
.nb-ch.is-open .nb-ch__items { display: block; }

.nb-it {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px 7px 12px; margin-left: 10px;
  border-radius: 10px; font-size: 13.5px; line-height: 1.3; color: var(--muted);
  border-left: 2px solid transparent;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nb-it:hover { background: var(--n-hover); color: var(--paper); }
.nb-it.is-on { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--paper); border-left-color: var(--orange); border-radius: 4px 10px 10px 4px; }
.nb-it__code { flex: none; min-width: 30px; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.nb-it.is-on .nb-it__code { color: var(--sand); }
.nb-it__t { flex: 1; min-width: 0; }
.nb-it__done { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--n-tip); }
.nb-it__done svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.nb-it.is-hlonly.is-dim { opacity: .55; }
.nb-it--sum .nb-it__code { color: var(--n-nos); }
.nb-tag { flex: none; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .06em; padding: 2px 6px; border-radius: 6px; color: var(--n-hl); background: color-mix(in srgb, var(--n-hl) 14%, transparent); border: 1px solid color-mix(in srgb, var(--n-hl) 30%, transparent); }
.nb-tag--plus { color: var(--n-hl); background: none; }

/* sections of the open subtopic (the "tabs inside the tab") */
.nb-secs { margin: 2px 0 6px 32px; padding-left: 10px; border-left: 1px solid var(--hairline); }
.nb-secs a { display: flex; gap: 6px; padding: 5px 8px; border-radius: 8px; font-size: 12.5px; line-height: 1.35; color: var(--faint); }
.nb-secs a:hover { color: var(--paper); background: var(--n-hover); }
.nb-secs a.is-on { color: var(--paper); }
.nb-secs a.is-on::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 6px; border-radius: 50%; background: var(--sand); }
.nb-secs .nb-tag { margin-left: auto; align-self: center; }

/* mobile contents bar */
.nb-bar { display: none; }

/* ---------- main column ---------- */
.nb-main { min-width: 0; max-width: 800px; padding-bottom: 40px; }
.nb-loading { padding: 60px 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

.nb-crumb { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.nb-crumb a { color: var(--sand); }
.nb-head { padding-bottom: 22px; border-bottom: 1px solid var(--hairline); }
.nb-head__row { margin-top: 12px; display: flex; align-items: flex-start; gap: 14px; }
.nb-head__code { flex: none; margin-top: 4px; padding: 6px 10px; border-radius: 10px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--on-accent); background: var(--sand); }
.nb-head__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.nb-head__sum { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.nb-head__meta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--hairline); }
.nb-pill--hl { color: var(--n-hl); border-color: color-mix(in srgb, var(--n-hl) 40%, transparent); background: color-mix(in srgb, var(--n-hl) 10%, transparent); }
.nb-pill--sl { color: var(--n-tip); border-color: color-mix(in srgb, var(--n-tip) 40%, transparent); }
.nb-done-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--paper); border: 1px solid rgba(var(--fg-rgb), .18); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.nb-done-btn:hover { background: var(--n-hover); }
.nb-done-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nb-done-btn.is-done { background: var(--n-tip); border-color: transparent; color: #fff; }

.nb-banner { margin-top: 20px; padding: 14px 18px; border-radius: 14px; font-size: 14px; line-height: 1.55; color: var(--muted); border: 1px solid color-mix(in srgb, var(--n-hl) 35%, transparent); background: color-mix(in srgb, var(--n-hl) 8%, transparent); }
.nb-banner b { color: var(--n-hl); }

/* sections */
.nb-sec { padding-top: 34px; scroll-margin-top: 110px; }
.nb-sec__h { display: flex; align-items: baseline; gap: 12px; font-size: clamp(21px, 2.3vw, 25px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--paper); }
.nb-sec__n { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--sand); }
.nb-sec__h .nb-tag { align-self: center; }

/* ---------- note body ---------- */
.note { font-size: 15.5px; line-height: 1.72; color: var(--muted); }
.note > :first-child { margin-top: 14px; }
.note h3 { margin-top: 30px; font-size: 18px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; color: var(--paper); }
.note h4 { margin-top: 22px; font-size: 15.5px; font-weight: 600; color: var(--paper); }
.note p { margin-top: 12px; }
.note b, .note strong { color: var(--paper); font-weight: 600; }
.note em, .note i { color: var(--paper); }
.note ul, .note ol { margin-top: 12px; padding-left: 1.35em; }
.note li { margin-top: 6px; }
.note li::marker { color: var(--faint); }
.note sup, .note sub { line-height: 0; }
.note a { color: var(--sand); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sand) 40%, transparent); text-underline-offset: 3px; }
.note code { font-family: var(--font-mono); font-size: .86em; padding: .1em .4em; border-radius: 6px; background: var(--n-well); border: 1px solid var(--hairline); color: var(--paper); }
.note mjx-container { color: var(--paper); }
.note mjx-container[display="true"] { margin: 0 !important; }
.note .mjx-wrap, .note .eq { overflow-x: auto; overflow-y: hidden; }

/* numbered key points (one idea per line) */
.note ol.pts { list-style: none; padding-left: 0; counter-reset: pt; }
.note ol.pts > li { counter-increment: pt; position: relative; padding: 1px 0 1px 38px; margin-top: 12px; }
.note ol.pts > li::before {
  content: counter(pt); position: absolute; left: 0; top: 1px;
  width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--sand);
  background: color-mix(in srgb, var(--sand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sand) 28%, transparent);
}
/* numbered method steps */
.note ol.steps { list-style: none; padding-left: 0; counter-reset: step; }
.note ol.steps > li { counter-increment: step; position: relative; padding: 0 0 0 34px; margin-top: 10px; }
.note ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--on-accent); background: var(--sand); }

/* definition */
.note .def {
  margin-top: 18px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--n-def) 30%, transparent);
  background: color-mix(in srgb, var(--n-def) 8%, transparent);
  color: var(--paper);
}
.note .def::before { content: "Definition"; display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--n-def); }
.note .def dfn { font-style: normal; font-weight: 700; color: var(--n-def); }
.note .def > p:first-child, .note .def > :first-child { margin-top: 0; }

/* callouts */
.note .box {
  --box-c: var(--n-key);
  margin-top: 18px; padding: 14px 18px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--box-c) 28%, transparent);
  border-left: 3px solid var(--box-c);
  background: color-mix(in srgb, var(--box-c) 7%, transparent);
}
.note .box > :first-of-type { margin-top: 0; }
.note .box::before { display: block; margin-bottom: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--box-c); }
.note .box.key { --box-c: var(--n-key); }
.note .box.key::before { content: "Key idea"; }
.note .box.tip { --box-c: var(--n-tip); }
.note .box.tip::before { content: "Exam tip"; }
.note .box.trap { --box-c: var(--n-trap); }
.note .box.trap::before { content: "Common mistake"; }
.note .box.nos { --box-c: var(--n-nos); }
.note .box.nos::before { content: "Nature of science · TOK"; }
.note .box.like { --box-c: var(--n-like); }
.note .box.like::before { content: "Think of it like this"; }
.note .box.link { --box-c: var(--n-def); }
.note .box.link::before { content: "Connects to"; }
.note .box[data-t]::before { content: attr(data-t); }

/* equations */
.note .eq {
  position: relative; margin-top: 16px; padding: 16px 18px 14px; border-radius: 14px;
  background: var(--n-well); border: 1px solid var(--hairline);
  text-align: center; color: var(--paper);
}
.note .eq::after {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px;
}
.note .eq[data-db="yes"]::after { content: "Data booklet"; color: var(--faint); border: 1px solid var(--hairline); }
.note .eq[data-db="no"]::after { content: "Learn this"; color: var(--n-key); border: 1px solid color-mix(in srgb, var(--n-key) 40%, transparent); }
.note .eq .eq-where { margin-top: 10px; text-align: left; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.note .eq .eq-where p { margin-top: 2px; }

/* HL-only blocks */
.note .hl, .nb-sec.hl-sec {
  position: relative;
}
.note .hl {
  margin-top: 20px; padding: 4px 18px 16px; border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--n-hl) 55%, transparent);
  background: color-mix(in srgb, var(--n-hl) 5%, transparent);
}
.hl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0 2px; font-size: 12.5px; color: var(--muted); }
.hl-bar .nb-tag { font-size: 10px; }
.hl-bar button { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--n-hl); padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--n-hl) 40%, transparent); }
.hl-bar button:hover { background: color-mix(in srgb, var(--n-hl) 12%, transparent); }
.nb-main[data-level="SL"] .hl:not(.is-open) > :not(.hl-bar) { display: none; }
.nb-main[data-level="SL"] .hl:not(.is-open) { padding-bottom: 10px; opacity: .85; }
.nb-main[data-level="HL"] .hl-bar button { display: none; }
.nb-sec.hl-sec .hl-bar { margin-top: 10px; padding: 10px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--n-hl) 55%, transparent); background: color-mix(in srgb, var(--n-hl) 5%, transparent); }
.nb-main[data-level="SL"] .nb-sec.hl-sec:not(.is-open) > .note { display: none; }

/* worked examples */
.note .ex { margin-top: 20px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--hairline); background: var(--surface-2); }
.note .ex::before { content: "Worked example"; display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sand); }
.note .ex[data-t]::before { content: attr(data-t); }
.note .ex > p:first-of-type { margin-top: 8px; color: var(--paper); }
.note details { margin-top: 12px; }
.note details > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--sand);
  padding: 6px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sand) 40%, transparent);
}
.note details > summary::-webkit-details-marker { display: none; }
.note details > summary::before { content: "+"; font-size: 15px; line-height: 1; transition: transform .25s var(--ease); }
.note details[open] > summary::before { transform: rotate(45deg); }
.note details > :not(summary) { animation: nbIn .3s var(--ease); }
@keyframes nbIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* tables */
.note .tbl-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--hairline); border-radius: 12px; }
.note .tbl { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.note .tbl caption { caption-side: top; text-align: left; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--paper); border-bottom: 1px solid var(--hairline); }
.note .tbl th, .note .tbl td { padding: 9px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.note .tbl th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--sand); background: var(--n-well); white-space: nowrap; }
.note .tbl td { color: var(--muted); }
.note .tbl td:first-child { color: var(--paper); }
.note .tbl tbody tr:last-child td { border-bottom: none; }
.note .tbl .hl-row td { background: color-mix(in srgb, var(--n-hl) 6%, transparent); }

/* figures (inline SVG: stroke/fill classes follow the theme) */
.note figure.fig { margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--n-well); border: 1px solid var(--hairline); }
.note figure.fig svg { display: block; width: 100%; height: auto; max-height: 380px; overflow: visible; font-family: var(--font-mono); font-size: 12px; }
.note figure.fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--faint); text-align: center; }
.fig svg text { fill: var(--muted); stroke: none; }
.fig svg .t-strong { fill: var(--paper); font-weight: 600; }
.fig svg .ln { stroke: var(--paper); fill: none; stroke-width: 2; }
.fig svg .ax { stroke: var(--faint); fill: none; stroke-width: 1.5; }
.fig svg .gd { stroke: var(--n-line); fill: none; stroke-width: 1; }
.fig svg .dash { stroke-dasharray: 5 5; }
.fig svg .c1 { stroke: var(--n-key); } .fig svg .f1 { fill: var(--n-key); }
.fig svg .c2 { stroke: var(--n-def); } .fig svg .f2 { fill: var(--n-def); }
.fig svg .c3 { stroke: var(--n-tip); } .fig svg .f3 { fill: var(--n-tip); }
.fig svg .c4 { stroke: var(--n-trap); } .fig svg .f4 { fill: var(--n-trap); }
.fig svg .c5 { stroke: var(--n-hl); } .fig svg .f5 { fill: var(--n-hl); }
.fig svg .c6 { stroke: var(--n-nos); } .fig svg .f6 { fill: var(--n-nos); }
.fig svg .fp { fill: var(--paper); } .fig svg .fm { fill: var(--faint); } .fig svg .fs { fill: var(--surface-2); }
.fig svg .t1 { fill: var(--n-key); } .fig svg .t2 { fill: var(--n-def); } .fig svg .t3 { fill: var(--n-tip); } .fig svg .t4 { fill: var(--n-trap); } .fig svg .t5 { fill: var(--n-hl); } .fig svg .t6 { fill: var(--n-nos); }

/* two-column compare */
.note .cols { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.note .cols > div { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--surface-2); }
.note .cols > div > :first-child { margin-top: 0; }
.note .cols h4 { margin-top: 0; }

/* summary cards (chapter summaries) */
.note .sumgrid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.note .sumgrid > div { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--surface-2); }
.note .sumgrid > div > :first-child { margin-top: 0; }
.note .sumgrid h4 { margin-top: 0; font-size: 14.5px; }
.note .sumgrid ul { margin-top: 6px; font-size: 14px; }

/* ---------- simulations ---------- */
.sim { margin-top: 22px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--n-nos) 30%, var(--hairline)); background: var(--surface-2); overflow: hidden; }
.sim__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px 10px 18px; border-bottom: 1px solid var(--hairline); }
.sim__eye { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--n-nos); }
.sim__title { font-size: 14.5px; font-weight: 600; color: var(--paper); }
.sim__btns { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sim__btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--paper); border: 1px solid rgba(var(--fg-rgb), .16); transition: background-color .2s var(--ease); }
.sim__btn:hover { background: var(--n-hover); }
.sim__btn--p { background: var(--n-nos); border-color: transparent; color: #fff; }
.sim__btn svg { width: 13px; height: 13px; fill: currentColor; }
.sim__stage { position: relative; background: var(--n-well); }
.sim__stage canvas { display: block; width: 100%; touch-action: none; }
.sim__ctl { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 14px 18px 4px; }
.sim__ctl:empty { display: none; }
.sim-ctl { display: grid; gap: 6px; min-width: 160px; flex: 1 1 180px; font-size: 12.5px; color: var(--muted); }
.sim-ctl__row { display: flex; justify-content: space-between; gap: 10px; }
.sim-ctl__v { font-family: var(--font-mono); font-size: 12px; color: var(--paper); }
.sim-ctl input[type="range"] { width: 100%; accent-color: var(--n-nos); }
.sim-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: var(--n-well); border: 1px solid var(--hairline); }
.sim-seg button { padding: 5px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.sim-seg button.is-on { background: var(--paper); color: var(--navy); }
.sim-tog { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; align-self: end; padding-bottom: 4px; }
.sim-tog input { accent-color: var(--n-nos); width: 16px; height: 16px; }
.sim__out { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 18px 0; }
.sim__out:empty { display: none; }
.sim-ro { padding: 6px 10px; border-radius: 10px; background: var(--n-well); border: 1px solid var(--hairline); font-size: 12px; color: var(--muted); }
.sim-ro b { font-family: var(--font-mono); font-weight: 500; color: var(--paper); margin-left: 4px; }
.sim__cap { padding: 10px 18px 16px; font-size: 13px; line-height: 1.55; color: var(--faint); }
.sim__cap:empty { display: none; }
.sim__err { padding: 18px; font-size: 13px; color: var(--faint); }

/* ---------- check yourself / recall / AI ---------- */
.nb-block { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--hairline); scroll-margin-top: 110px; }
.nb-block__eye { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sand); }
.nb-block__h { margin-top: 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--paper); }
.nb-block__sub { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }

.mcq { margin-top: 16px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--hairline); background: var(--surface-2); }
.mcq__q { font-size: 15px; line-height: 1.6; color: var(--paper); }
.mcq__q .nb-tag { margin-left: 6px; vertical-align: 2px; }
.mcq__opts { margin-top: 12px; display: grid; gap: 8px; }
.mcq__o { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hairline); font-size: 14.5px; line-height: 1.5; color: var(--paper); transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.mcq__o:hover:not(:disabled) { border-color: var(--faint); }
.mcq__o i { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--faint); display: grid; place-items: center; font-style: normal; font-family: var(--font-mono); font-size: 11px; }
.mcq__o:disabled { cursor: default; }
.mcq__o.is-right { border-color: var(--n-tip); background: color-mix(in srgb, var(--n-tip) 10%, transparent); }
.mcq__o.is-right i { background: var(--n-tip); border-color: var(--n-tip); color: #fff; }
.mcq__o.is-wrong { border-color: var(--n-trap); background: color-mix(in srgb, var(--n-trap) 9%, transparent); }
.mcq__o.is-wrong i { background: var(--n-trap); border-color: var(--n-trap); color: #fff; }
.mcq__why { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.mcq__why b { color: var(--paper); }

.rc { margin-top: 12px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--surface-2); }
.rc__q { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; font-size: 15px; line-height: 1.55; color: var(--paper); }
.rc__n { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--sand); margin-top: 3px; }
.rc__t { flex: 1; min-width: 0; }
.rc__btn { flex: none; font-size: 12.5px; font-weight: 600; color: var(--sand); padding: 5px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sand) 40%, transparent); }
.rc__a { display: none; padding: 0 16px 14px 43px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.rc.is-open .rc__a { display: block; }
.rc__rate { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.rc__rate button { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--muted); }
.rc__rate button.is-on[data-r="got"] { background: var(--n-tip); color: #fff; border-color: transparent; }
.rc__rate button.is-on[data-r="not"] { background: var(--n-trap); color: #fff; border-color: transparent; }
.rc.r-got { border-color: color-mix(in srgb, var(--n-tip) 40%, transparent); }
.rc.r-not { border-color: color-mix(in srgb, var(--n-trap) 40%, transparent); }

.ai { margin-top: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--surface-2); display: flex; gap: 14px; align-items: flex-start; }
.ai__t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.ai__t b { display: block; margin-bottom: 2px; color: var(--paper); font-size: 13.5px; }
.ai__copy { flex: none; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(var(--fg-rgb), .18); color: var(--paper); }
.ai__copy:hover { background: var(--n-hover); }

/* pager */
.nb-pager { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nb-pager a { padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--card); transition: border-color .2s var(--ease), transform .25s var(--ease); }
.nb-pager a:hover { border-color: var(--faint); transform: translateY(-2px); }
.nb-pager a.next { text-align: right; grid-column: 2; }
.nb-pager small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.nb-pager span { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--paper); }

/* sign-in gate */
.nb-gate { margin-top: 28px; padding: 28px; border-radius: 20px; border: 1px solid var(--hairline); background: var(--card); text-align: center; }
.nb-gate h3 { font-size: 22px; font-weight: 600; color: var(--paper); }
.nb-gate p { margin: 10px auto 0; max-width: 46ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.nb-gate__btns { margin-top: 20px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nb-gate__list { margin: 22px auto 0; max-width: 420px; text-align: left; display: grid; gap: 6px; }
.nb-gate__list div { display: flex; gap: 10px; font-size: 13.5px; color: var(--faint); }
.nb-gate__list span { font-family: var(--font-mono); font-size: 11px; color: var(--sand); min-width: 18px; }
.nb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid rgba(var(--fg-rgb), .18); color: var(--paper); transition: transform .25s var(--ease), background-color .2s var(--ease); }
.nb-btn:hover { transform: translateY(-2px); background: var(--n-hover); }
.nb-btn--p { background: var(--sand); color: var(--on-accent); border-color: transparent; }
.nb-btn--p:hover { background: var(--sand); filter: brightness(1.06); }

/* ---------- course map (subject home) ---------- */
.nb-map__intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--hairline); background: var(--card); }
.nb-map__intro h2 { font-size: 22px; font-weight: 600; color: var(--paper); }
.nb-map__intro p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.nb-ring { --p: 0; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--sand) calc(var(--p) * 1%), var(--n-line) 0); }
.nb-ring b { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-family: var(--font-mono); font-size: 14px; color: var(--paper); }
.nb-map__go { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.nb-map__chs { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nb-mch { padding: 18px 18px 12px; border-radius: 18px; border: 1px solid var(--hairline); background: var(--card); }
.nb-mch__h { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 700; color: var(--paper); }
.nb-mch__h .nb-ch__code { width: 26px; height: 26px; font-size: 12px; }
.nb-mch__h small { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--faint); }
.nb-mch ul { list-style: none; margin-top: 10px; }
.nb-mch li a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 14px; color: var(--muted); }
.nb-mch li a:hover { background: var(--n-hover); color: var(--paper); }
.nb-legend { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--faint); }
.nb-legend span { display: inline-flex; gap: 6px; align-items: center; }

/* search results */
.nb-res { display: block; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--card); margin-top: 10px; transition: border-color .2s var(--ease); }
.nb-res:hover { border-color: var(--faint); }
.nb-res__t { font-size: 15px; font-weight: 600; color: var(--paper); }
.nb-res__t small { font-family: var(--font-mono); font-size: 11px; color: var(--sand); margin-right: 8px; }
.nb-res__p { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.nb-res__p mark { background: color-mix(in srgb, var(--sand) 30%, transparent); color: var(--paper); border-radius: 3px; padding: 0 2px; }

.nb-foot-note { margin-top: 36px; font-size: 12.5px; line-height: 1.6; color: var(--faint); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nb, .nb-top { padding-left: 28px; padding-right: 28px; }
  .nb { grid-template-columns: 270px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 920px) {
  .nb { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
  .nb-side {
    position: fixed; z-index: 160; top: 12px; bottom: 12px; left: 12px;
    width: min(360px, calc(100vw - 24px)); max-height: none;
    transform: translateX(calc(-100% - 24px)); transition: transform .45s var(--ease);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  }
  body.dock-low .nb-side { top: 12px; max-height: none; }
  body.nb-open .nb-side { transform: none; }
  .nb-side__close { display: grid; place-items: center; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; color: var(--muted); border: 1px solid var(--hairline); background: var(--card); z-index: 2; }
  .nb-side__head { padding-top: 48px; }
  .nb-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(var(--scrim-rgb), .5); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
  body.nb-open .nb-scrim { opacity: 1; pointer-events: auto; }
  .nb-bar {
    position: sticky; top: 12px; z-index: 40; display: flex; align-items: center; gap: 10px;
    margin: 0 0 14px; padding: 8px 8px 8px 14px; border-radius: 999px;
    background: rgba(var(--glass-rgb), .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(var(--fg-rgb), .12);
  }
  .nb-bar__t { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nb-bar__t small { font-family: var(--font-mono); font-size: 11px; color: var(--sand); margin-right: 6px; }
  .nb-bar button { flex: none; padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--on-accent); background: var(--sand); }
  body:not(.dock-low) .nb-bar { top: 88px; }
}
@media (max-width: 640px) {
  .nb, .nb-top { padding-left: 16px; padding-right: 16px; }
  .nb-top { padding-top: 92px; }
  .note { font-size: 15px; }
  .note .cols, .note .sumgrid, .nb-map__chs { grid-template-columns: 1fr; }
  .nb-head__row { gap: 10px; }
  .nb-head__code { font-size: 12px; padding: 5px 8px; }
  .nb-done-btn { margin-left: 0; }
  .nb-pager { grid-template-columns: 1fr; }
  .nb-pager a.next { grid-column: 1; }
  .nb-map__intro { grid-template-columns: 1fr; }
  .note .eq { padding: 26px 12px 12px; }
  .ai { flex-direction: column; }
  .rc__a { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-side, .nb-it, .nb-pager a, .nb-btn { transition: none; }
  .note details > :not(summary) { animation: none; }
}
@media print {
  .dock, .nb-side, .nb-bar, .nb-top .nb-subjects, .footer, .sim, .nb-pager, .ai, .nb-done-btn { display: none !important; }
  .nb { display: block; }
  .nb-main[data-level] .hl > * , .nb-main[data-level] .nb-sec.hl-sec > .note { display: block !important; }
}