/* Layout: zijbalk met modules en lessen links, één leeskolom van circa 46rem rechts; op de telefoon een balk bovenin met een uitklapbare inhoud. Schema's in het Maciocia-staafbeeld, kleuren alleen via tokens. */
:root {
  --paper: #edf1ee;
  --card: #f8faf8;
  --ink: #1a2321;
  --muted: #56645f;
  --rule: #c9d3ce;
  --yin: #2c4787;
  --yin-soft: #dfe5f3;
  --yang: #b3412d;
  --yang-soft: #f5e0da;
  --jade: #23705f;
  --jade-soft: #d9ece6;
  --good: #23705f;
  --bad: #a63a2a;
  --warn-soft: #f6e7cf;
  --hout: #3d7a3a;
  --vuur: #b3412d;
  --aarde: #a77c1e;
  --metaal: #7d868d;
  --water: #2a3a5c;
  --display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --han: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --side: 17rem;
  --top: 3.1rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111715; --card: #18201e; --ink: #e4ebe8; --muted: #9aa9a3; --rule: #2b3632;
    --yin: #93a9e8; --yin-soft: #1e2840; --yang: #e8775f; --yang-soft: #3a211b;
    --jade: #63c3aa; --jade-soft: #173029; --good: #63c3aa; --bad: #ef8a76; --warn-soft: #33281a;
    --hout: #7fbf6a; --vuur: #e8775f; --aarde: #d9ad4a; --metaal: #b9c1c7; --water: #8aa3d6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111715; --card: #18201e; --ink: #e4ebe8; --muted: #9aa9a3; --rule: #2b3632;
  --yin: #93a9e8; --yin-soft: #1e2840; --yang: #e8775f; --yang-soft: #3a211b;
  --jade: #63c3aa; --jade-soft: #173029; --good: #63c3aa; --bad: #ef8a76; --warn-soft: #33281a;
  --hout: #7fbf6a; --vuur: #e8775f; --aarde: #d9ad4a; --metaal: #b9c1c7; --water: #8aa3d6;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
img { max-width: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--paper); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; line-height: 1.2; margin: 0; }
h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.12rem; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2rem; }
li { margin: 0.15rem 0; }
a { color: var(--jade); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Kader van de cursus */
.hub-top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; height: var(--top);
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.hub-top .brand { font-family: var(--display); font-size: 1.1rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.hub-top .where { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-btn { display: none; }
.hub {
  display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: 2rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.hub-side {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--top)); align-self: start;
  max-height: calc(100vh - var(--top) - env(safe-area-inset-top, 0px)); overflow-y: auto;
  padding-block: 1.2rem 2rem; border-right: 1px solid var(--rule); padding-right: 1rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.nav-start { font-weight: 700; color: var(--ink); text-decoration: none; }
.nav-dag { display: flex; flex-direction: column; gap: 0.25rem; }
.nav-dagkop { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.nav-thema { font-size: 0.86rem; color: var(--muted); line-height: 1.35; }
.nav-dag ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.nav-les { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.22rem 0.45rem; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 0.93rem; line-height: 1.35; }
.nav-les .nr { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); flex: none; width: 1.7rem; }
.nav-les .stip { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid var(--rule); margin-left: auto; align-self: center; }
.nav-les.klaar .stip { background: var(--good); border-color: var(--good); }
.nav-les[aria-current="page"] { background: var(--jade-soft); }
.nav-les.volgt { color: var(--muted); }
.nav-les.volgt em { font-style: normal; font-size: 0.75rem; font-family: var(--mono); }
.hub-main { min-width: 0; padding-block: 2rem 4rem; }
.hub-col { max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.pager { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1.2rem; }
.pager .mid { display: flex; gap: 0.6rem; flex-wrap: wrap; }
@media (max-width: 60rem) {
  .hub { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .menu-btn { display: inline-flex; }
  .hub-side { display: none; position: fixed; z-index: 25; top: calc(env(safe-area-inset-top, 0px) + var(--top)); left: 0; right: 0; bottom: 0; max-height: none; background: var(--paper); border-right: 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px)); }
  .hub-side.open { display: flex; }
}

/* Startpagina */
.start { display: flex; flex-direction: column; gap: 2rem; }
.start .lead { font-size: 1.15rem; }
.balk { height: 0.55rem; border-radius: 999px; background: var(--rule); overflow: hidden; }
.balk span { display: block; height: 100%; background: var(--good); }
.ritme { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem; counter-reset: r; }
.ritme li { counter-increment: r; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.75rem 0.85rem; font-size: 0.93rem; margin: 0; }
.ritme li::before { content: counter(r); display: block; font-family: var(--display); font-size: 1.3rem; color: var(--jade); }
.dagen { display: grid; gap: 0.8rem; }
.dagkaart { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.dagkaart .k { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.dagkaart .k b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.dagkaart .vraag { font-style: italic; color: var(--muted); font-size: 0.95rem; }
.dagkaart ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.35rem; }
.dagkaart li { margin: 0; }

/* Lesbouwstenen */
.les { display: flex; flex-direction: column; gap: 3rem; }
.les-kop { display: flex; flex-direction: column; gap: 0.9rem; }
.stap { display: flex; flex-direction: column; gap: 1rem; }
.eyebrow { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.han { font-family: var(--han); font-weight: 500; letter-spacing: 0.04em; }
.pin { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.small { font-size: 0.9rem; color: var(--muted); }
.lead { font-size: 1.12rem; }
.mark { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.mark .han { font-size: 2rem; }
.question { border-left: 3px solid var(--yang); padding: 0.2rem 0 0.2rem 1rem; font-family: var(--display); font-size: 1.25rem; line-height: 1.35; }
.sources { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { font-family: var(--mono); font-size: 0.78rem; border: 1px solid var(--rule); border-radius: 999px; padding: 0.2rem 0.65rem; color: var(--muted); background: var(--card); }
.callout { background: var(--jade-soft); border-radius: 10px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.callout.warn { background: var(--warn-soft); border-left: 3px solid var(--bad); }
.callout.sivas { background: var(--yin-soft); }
.callout.yang { background: var(--yang-soft); }
.boek { border: 1px dashed var(--rule); border-radius: 10px; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.95rem; }
.boek::before { content: "In je boek"; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.box { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; }
.cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.65rem; }
.kaart { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.kaart .naam { font-weight: 700; }
.kaart .d { font-size: 0.9rem; color: var(--muted); }
.kaart .han { font-size: 1.4rem; line-height: 1.1; }
.types { display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.35rem 0.6rem; align-items: baseline; font-size: 0.95rem; }
.types .han { font-size: 1.15rem; }
figure { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
figcaption { font-size: 0.85rem; color: var(--muted); }
.fig { width: 100%; max-width: 100%; height: auto; display: block; }
.fig.smal { max-width: 26rem; margin: 0 auto; }
.figscroll { overflow-x: auto; max-width: 100%; }
@media (max-width: 40rem) { svg.fig.breed { min-width: 34rem; } }
.ref { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.ref svg { width: 7rem; height: auto; flex: none; }
.ref p { flex: 1 1 14rem; min-width: 0; }
.dot { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: 0.05rem; background: var(--muted); }
.dot.hout { background: var(--hout); } .dot.vuur { background: var(--vuur); } .dot.aarde { background: var(--aarde); } .dot.metaal { background: var(--metaal); } .dot.water { background: var(--water); }
.dot.yin { background: var(--yin); } .dot.yang { background: var(--yang); } .dot.jade { background: var(--jade); }

.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; }
.state { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.85rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.state svg { width: 100%; max-width: 100%; height: auto; display: block; }
.state .name { font-weight: 700; }
.state .tag { font-size: 0.92rem; }
.state .rx { font-size: 0.86rem; color: var(--muted); }
.state.heat .tag { color: var(--yang); }
.state.cold .tag { color: var(--yin); }

.scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.95rem; }
table.breed { min-width: 44rem; }
th, td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--rule); }
tr:last-child td, tr:last-child th { border-bottom: 0; }
thead th { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
thead th.full, thead th.yang { color: var(--yang); }
thead th.empty, thead th.yin { color: var(--yin); }
tbody th { font-weight: 700; }
.src { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
tr.key td { background: var(--yang-soft); }
tr.key td.e { background: var(--yin-soft); }

.pairs { display: grid; gap: 0.6rem; }
.pair { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.9rem; align-items: start; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.8rem 0.9rem; }
.pair .han { font-size: 1.6rem; line-height: 1.1; }
.pair .q { font-weight: 700; }
.pair .d { font-size: 0.93rem; color: var(--muted); }

.battle { display: grid; grid-template-columns: 6.5rem 1fr 1fr; gap: 0.4rem; font-size: 0.92rem; }
.battle .hd, .battle .rh { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.battle .hd { align-self: end; }
.battle .rh { align-self: center; }
.battle .cell { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 0.55rem 0.65rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.battle .cell b { font-family: var(--display); font-weight: 400; font-size: 1.02rem; }
.battle .cell.full b { color: var(--yang); }
.battle .cell.empty b { color: var(--yin); }
.battle .cell span { color: var(--muted); }
@media (max-width: 30rem) { .battle { grid-template-columns: 4.6rem 1fr 1fr; font-size: 0.85rem; } }

.spectrum { display: flex; flex-direction: column; gap: 0.6rem; }
.band { height: 0.6rem; border-radius: 999px; background: linear-gradient(90deg, var(--yang), var(--jade) 50%, var(--yin)); }
.ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; }
.tile { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.tile svg { width: 100%; height: auto; max-width: 100%; display: block; }
.tile .name { font-weight: 700; }
.tile .d { font-size: 0.86rem; color: var(--muted); }
.cases { display: grid; gap: 0.6rem; }
.case { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.8rem 0.9rem; display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.8rem; }
.case .k { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 30rem) { .case { grid-template-columns: 1fr; gap: 0.3rem; } }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; }
.group { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.85rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.group ul { font-size: 0.93rem; }
ol.stappen { list-style: none; padding: 0; display: grid; gap: 0.5rem; counter-reset: s; }
ol.stappen > li { counter-increment: s; display: grid; grid-template-columns: 2rem 1fr; gap: 0.6rem; align-items: baseline; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.65rem 0.8rem; margin: 0; }
ol.stappen > li::before { content: counter(s); font-family: var(--display); font-size: 1.2rem; color: var(--jade); }

.traps { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.traps li { border-left: 3px solid var(--yang); padding-left: 0.9rem; margin: 0; }
.bridge { border: 1px dashed var(--rule); border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.bridge .row { display: flex; flex-direction: column; gap: 0.2rem; }
.grade { display: inline-block; font-family: var(--mono); font-size: 0.78rem; border-radius: 4px; padding: 0.05rem 0.45rem; background: var(--yin-soft); color: var(--yin); }
.spar { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.spar ol { display: grid; gap: 0.4rem; }
.kijk { border: 1px solid var(--rule); border-radius: 10px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.95rem; }
.kijk::before { content: "Liever kijken"; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.next { background: var(--ink); color: var(--paper); border-radius: 12px; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.next a { color: var(--paper); }
.next .eyebrow, .next .small { color: var(--paper); opacity: 0.8; }

/* SVG-palet: alleen deze klassen gebruiken, nooit losse kleuren */
.svg-label { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.svg-norm { fill: var(--ink); font-family: var(--mono); font-size: 10px; }
.svg-big { fill: var(--ink); font-family: var(--display); font-size: 17px; }
.svg-text { fill: var(--ink); font-family: var(--body); font-size: 13px; }
.svg-bold { fill: var(--ink); font-family: var(--body); font-size: 14px; font-weight: 700; }
.svg-han { fill: var(--muted); font-family: var(--han); font-size: 13px; }
.bar-yin { fill: var(--yin); } .bar-yang { fill: var(--yang); }
.bar-ghost { fill: none; stroke: var(--muted); stroke-dasharray: 3 3; }
.norm { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 4; }
.flow { stroke: var(--jade); stroke-width: 3; fill: none; stroke-linecap: round; }
.flow-faint { stroke: var(--jade); stroke-width: 1.5; fill: none; stroke-dasharray: 3 4; opacity: 0.8; }
.ghost { stroke: var(--muted); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; }
.wall { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.qi { stroke: var(--jade); stroke-width: 3; fill: none; stroke-linecap: round; }
.qi-dot { fill: var(--jade); }
.c-qi { fill: var(--yang-soft); stroke: var(--yang); stroke-width: 1.5; }
.c-xue { fill: var(--yin-soft); stroke: var(--yin); stroke-width: 1.5; }
.rel, .loop { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.lbox { fill: var(--card); stroke: var(--rule); stroke-width: 1.5; }
.ltext { fill: var(--ink); font-family: var(--body); font-size: 14px; font-weight: 700; }
.lsmall { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.s-ink { stroke: var(--ink); } .s-muted { stroke: var(--muted); } .s-rule { stroke: var(--rule); } .s-jade { stroke: var(--jade); } .s-yin { stroke: var(--yin); } .s-yang { stroke: var(--yang); } .s-bad { stroke: var(--bad); }
.s-hout { stroke: var(--hout); } .s-vuur { stroke: var(--vuur); } .s-aarde { stroke: var(--aarde); } .s-metaal { stroke: var(--metaal); } .s-water { stroke: var(--water); }
.f-none { fill: none; } .f-card { fill: var(--card); } .f-paper { fill: var(--paper); } .f-ink { fill: var(--ink); } .f-muted { fill: var(--muted); } .f-rule { fill: var(--rule); }
.f-jade { fill: var(--jade); } .f-jade-soft { fill: var(--jade-soft); } .f-yin { fill: var(--yin); } .f-yin-soft { fill: var(--yin-soft); } .f-yang { fill: var(--yang); } .f-yang-soft { fill: var(--yang-soft); } .f-warn-soft { fill: var(--warn-soft); }
.f-hout { fill: var(--hout); } .f-vuur { fill: var(--vuur); } .f-aarde { fill: var(--aarde); } .f-metaal { fill: var(--metaal); } .f-water { fill: var(--water); }
.w1 { stroke-width: 1; } .w2 { stroke-width: 2; } .w3 { stroke-width: 3; } .dash { stroke-dasharray: 5 4; } .rond { stroke-linecap: round; stroke-linejoin: round; }
.mk-jade, .mk-ink, .mk-red, .mk-muted, .mk-yin, .mk-yang { stroke: none; }
.mk-jade { fill: var(--jade); } .mk-ink { fill: var(--ink); } .mk-red { fill: var(--bad); } .mk-muted { fill: var(--muted); } .mk-yin { fill: var(--yin); } .mk-yang { fill: var(--yang); }

/* Interactieve onderdelen */
.pill { font: inherit; font-size: 0.95rem; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 0.35rem 0.9rem; cursor: pointer; }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill.sterk { background: var(--jade); color: var(--paper); border-color: var(--jade); font-weight: 700; }
.pill.ok { border-color: var(--good); }
.pill:disabled { opacity: 0.45; cursor: default; }
.seg-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.panel .pk-t { font-family: var(--display); font-size: 1.25rem; }
dl.kv { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.3rem 0.8rem; margin: 0; font-size: 0.95rem; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; min-width: 0; }
@media (max-width: 30rem) { dl.kv { grid-template-columns: 1fr; gap: 0.05rem; } dl.kv dd { margin-bottom: 0.4rem; } }
.note { font-size: 0.86rem; color: var(--muted); font-style: italic; }
.w { display: flex; flex-direction: column; gap: 0.7rem; }
.w-fout { color: var(--bad); font-size: 0.9rem; }
.builder { border: 1px solid var(--rule); border-radius: 12px; background: var(--card); padding: 1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.seg { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.seg .lbl { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); width: 6rem; text-transform: uppercase; letter-spacing: 0.06em; }
.builder .panel { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 0.9rem 0 0; background: none; }
.score { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }
.quiz { display: flex; flex-direction: column; gap: 0.6rem; }
.quiz > .q { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.quiz .opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.opt { font: inherit; font-size: 0.95rem; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 0.35rem 0.9rem; cursor: pointer; text-align: left; }
.opt[aria-pressed="true"].ok { background: var(--good); border-color: var(--good); color: var(--paper); }
.opt[aria-pressed="true"].no { background: var(--bad); border-color: var(--bad); color: var(--paper); }
.fb { font-size: 0.92rem; }
.fb b.ok { color: var(--good); }
.fb b.no { color: var(--bad); }
.reset { align-self: flex-start; font: inherit; font-size: 0.9rem; background: none; border: 0; color: var(--jade); text-decoration: underline; cursor: pointer; padding: 0; }
.fc { display: flex; flex-direction: column; gap: 0.7rem; }
.fc-kaart { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 1.1rem 1.2rem; min-height: 8rem; display: flex; flex-direction: column; gap: 0.8rem; }
.fc-voor { font-family: var(--display); font-size: 1.3rem; line-height: 1.3; }
.fc-achter { border-top: 1px dashed var(--rule); padding-top: 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; }
.fc-knoppen { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.wheel-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 40rem) { .wheel-row { grid-template-columns: 1fr; } }
.wheel-row svg { width: 100%; max-width: 26rem; height: auto; display: block; margin: 0 auto; }
.node { cursor: pointer; }
.node circle { fill: var(--card); stroke-width: 3; }
.node text { fill: var(--ink); font-family: var(--body); font-size: 15px; font-weight: 700; }
.node text.h { font-family: var(--han); font-weight: 500; font-size: 13px; fill: var(--muted); }
.node.sel circle { stroke-width: 5; }
.node:focus { outline: none; }
.node:focus-visible circle { stroke-dasharray: 4 3; }
.e-sheng { stroke: var(--jade); stroke-width: 2.5; fill: none; }
.e-ke { stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-dasharray: 6 5; }
.e-faint { opacity: 0.16; }
.e-hi { stroke: var(--bad); stroke-width: 4.5; fill: none; }
.e-weak { stroke: var(--jade); stroke-width: 2.5; fill: none; stroke-dasharray: 2 6; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Leerpad: Vandaag, pad, zegels, herhalen */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; }
.stat { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 0.9rem 1rem; display: flex; gap: 0.9rem; align-items: center; min-width: 0; }
.stat .ring { width: 4.4rem; height: 4.4rem; flex: none; }
.stat .ring circle { fill: none; stroke-width: 6; }
.stat .ring .achter { stroke: var(--rule); }
.stat .ring .voor { stroke: var(--jade); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.stat .ring text { fill: var(--ink); font-family: var(--display); font-size: 22px; text-anchor: middle; dominant-baseline: central; }
.stat .tekst { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.stat .groot { font-family: var(--display); font-size: 1.4rem; line-height: 1.1; overflow-wrap: anywhere; }
.stat .lbl { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.stat .sub { font-size: 0.86rem; color: var(--muted); }
.schild { display: inline-block; width: 0.62rem; height: 0.72rem; border-radius: 0.12rem 0.12rem 0.36rem 0.36rem; background: var(--rule); vertical-align: -0.05rem; margin-left: 0.25rem; }
.schild.vol { background: var(--yin); }
.acties { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.acties .pill { padding: 0.6rem 1.1rem; font-size: 1rem; }
.tijd { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.tijd ol { list-style: none; padding: 0; display: grid; gap: 0.4rem; counter-reset: p; }
.tijd ol li { counter-increment: p; display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.6rem; align-items: baseline; margin: 0; padding: 0.45rem 0.6rem; border-radius: 8px; background: var(--paper); }
.tijd ol li::before { content: counter(p); font-family: var(--display); color: var(--jade); font-size: 1.1rem; }
.tijd ol li .min { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.stations { overflow-x: auto; padding-bottom: 0.2rem; }
.stations svg { width: 100%; height: auto; display: block; min-width: 40rem; }
.st { cursor: pointer; }
.st circle.kern { fill: var(--card); stroke-width: 3; }
.st circle.boog { fill: none; stroke-width: 4; transform: rotate(-90deg); transform-origin: center; transform-box: fill-box; stroke-linecap: round; }
.st circle.rest { fill: none; stroke: var(--rule); stroke-width: 4; }
.st text.h { font-family: var(--han); font-size: 15px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.st text.n { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); text-anchor: middle; letter-spacing: 0.04em; }
.st text.p { font-family: var(--mono); font-size: 10px; fill: var(--muted); text-anchor: middle; }
.st.sel circle.kern { stroke-width: 5; }
.st.sel text.n { fill: var(--ink); font-weight: 700; }
.st:focus { outline: none; }
.st:focus-visible circle.kern { stroke-dasharray: 4 3; }
.spoor { stroke: var(--rule); stroke-width: 6; stroke-linecap: round; }
.spoor-vol { stroke: var(--jade); stroke-width: 6; stroke-linecap: round; }
.modkop { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.modkop .k { display: flex; gap: 0.7rem; align-items: baseline; flex-wrap: wrap; }
.modkop .k b { font-family: var(--display); font-weight: 400; font-size: 1.45rem; }
.modkop .k .han { font-size: 1.5rem; }
.modkop .vraag { font-style: italic; color: var(--muted); }
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.6rem; margin-top: 0.8rem; }
.tegel { display: flex; flex-direction: column; gap: 0.25rem; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.7rem 0.8rem; color: var(--ink); text-decoration: none; min-width: 0; }
.tegel .tnr { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); display: flex; justify-content: space-between; gap: 0.4rem; }
.tegel .ttitel { font-weight: 700; line-height: 1.3; }
.tegel .tmeta { font-size: 0.8rem; color: var(--muted); }
.tegel.klaar { border-color: var(--jade); background: var(--jade-soft); }
.tegel.klaar .tnr::after { content: "klaar"; color: var(--jade); }
.tegel.nu { border: 2px solid var(--ink); }
.tegel.nu .tnr::after { content: "nu"; color: var(--ink); font-weight: 700; }
.tegel.volgt { border-style: dashed; color: var(--muted); cursor: default; }
.tegel.volgt .tnr::after { content: "volgt"; }
.tegel.volgt .ttitel { font-weight: 400; }
.tegel.examen { border-color: var(--yang); }
.tegel.examen.klaar { background: var(--yang-soft); }
.zegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 0.6rem; }
.zegel { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; font-size: 0.74rem; color: var(--muted); font-family: var(--mono); }
.zegel .z { width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 2px dashed var(--rule); display: grid; place-items: center; font-family: var(--han); font-size: 1.2rem; color: var(--muted); background: var(--card); }
.zegel.aan .z { border: 3px solid var(--yang); color: var(--yang); background: var(--yang-soft); }
.zegel.aan { color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: max(1.2rem, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0.6rem 1.1rem; font-size: 0.95rem; z-index: 50; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); max-width: min(92vw, 36rem); text-align: center; }
.boekblok { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.7rem; border: 1px solid var(--rule); border-left: 4px solid var(--jade); border-radius: 10px; padding: 0.9rem 1rem; background: var(--card); }
.boekblok > div { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; font-size: 0.95rem; }
.boekblok .uur { font-size: 0.86rem; color: var(--muted); }
.callout.kern { border-left: 3px solid var(--jade); }
.callout.kern ul { display: grid; gap: 0.35rem; }
.callout.kern li .small { display: block; }
.srs { display: flex; flex-direction: column; gap: 1rem; }
.srs .fc-kaart { min-height: 11rem; }
.srs .fc-voor { font-size: 1.5rem; }
.srs .herkomst { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
.srs .klaar-blok { background: var(--jade-soft); border-radius: 12px; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.srs .toets { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }
.hub-top .chipje { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.nav-mod { border: 0; padding: 0; }
.nav-mod summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.3rem 0.45rem; border-radius: 6px; }
.nav-mod summary::-webkit-details-marker { display: none; }
.nav-mod summary:hover { background: var(--card); }
.nav-mod[open] summary { margin-bottom: 0.25rem; }
.nav-mod .nav-dagkop { display: flex; justify-content: space-between; gap: 0.5rem; }
.nav-mod ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.nav-mod .nav-les.examen .nr { color: var(--yang); }
.les.examen .mark .han { color: var(--yang); }
/* TCM Visueel Laboratorium: additionele, op zichzelf staande interface */
body.lab-mode .hub-col { max-width: 70rem; }
.visual-lab { display:flex; flex-direction:column; gap:1.4rem; }
.lab-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(12rem,.8fr); align-items:center; gap:1rem; overflow:hidden; position:relative; border-radius:22px; min-height:265px; padding:2.35rem 2.4rem; background:var(--ink); color:var(--paper); }
.lab-intro { position:relative; z-index:2; }
.lab-overline,.lab-index,.lab-signal { font:500 .72rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.lab-overline { color:var(--paper);opacity:.82;display:flex;gap:.55rem;align-items:center }
.lab-live-dot{ display:inline-block; width:.5rem;height:.5rem;background:#9ef3bc;border-radius:50%;box-shadow:0 0 0 5px #9ef3bc20; }
.lab-hero h1{font-size:clamp(2.25rem,5vw,3.35rem);margin:.8rem 0 .9rem;letter-spacing:-.025em;line-height:1.13}
.lab-hero h1 em{color:#a6ead5;font-weight:400;}
.lab-hero p {max-width:40rem;line-height:1.55;color:var(--paper);opacity:.86;font-size:1rem}
.lab-hero-metrics{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.35rem}
.lab-hero-metrics span{font:.69rem var(--mono); border:1px solid #ffffff40;color:var(--paper); border-radius:999px;padding:.25rem .6rem}
.lab-hero-art{position:relative;height:225px;min-width:0;display:grid;place-items:center;}
.lab-orb{position:absolute;border:1px solid #a6ead566;border-radius:50%;aspect-ratio:1;animation:labSpin 22s linear infinite;}
.lab-orb-one{width:160px;border-style:dashed}.lab-orb-two{width:210px;border-color:#a6ead533;animation-direction:reverse}.lab-orb-three{width:100px;border-width:2px;animation-duration:12s}
.lab-orb-one::after,.lab-orb-two::after{content:"";width:9px;height:9px;border-radius:50%;background:#a6ead5;position:absolute;top:17%;left:12%;box-shadow:0 0 15px #a6ead5}
.lab-orb-two::after{top:9%;left:74%;background:#f3a995;box-shadow:0 0 15px #f3a995}
.lab-orb-core{font-size:5rem;color:#e2f5ee;line-height:1;filter:drop-shadow(0 0 15px #a6ead555);animation:labBreathe 5s ease-in-out infinite}
@keyframes labSpin {to{transform:rotate(360deg)}} @keyframes labBreathe{50%{transform:scale(1.09)}}
.lab-tabs{display:flex;gap:.4rem;overflow-x:auto;padding:0 0 .45rem;scrollbar-width:thin;position:sticky;top:calc(var(--top) + env(safe-area-inset-top, 0px));z-index:12;background:var(--paper);border-bottom:1px solid var(--rule)}
.lab-tab{white-space:nowrap; flex:none; border:1px solid var(--rule);border-radius:11px;background:var(--card);color:var(--muted);padding:.7rem .82rem;font:700 .88rem var(--body);cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.lab-tab span{font:500 .68rem var(--mono);display:block;opacity:.65}
.lab-tab[aria-selected="true"] {background:var(--jade-soft);border-color:var(--jade);color:var(--ink)}
.lab-tab:hover{transform:translateY(-1px);border-color:var(--jade)}
.lab-main{min-width:0}.lab-topic{display:flex;flex-direction:column;gap:1.25rem;animation:labEnter .3s ease both}
@keyframes labEnter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.lab-topic-header{padding:.75rem .1rem .5rem;max-width:55rem}.lab-topic-header .lab-index,.lab-index{color:var(--jade)}
.lab-topic-header h2 {font-size:clamp(1.6rem,3vw,2.1rem);margin:.28rem 0 .6rem}
.lab-topic-header p{color:var(--muted);max-width:50rem}
.lab-grid-main{display:grid;grid-template-columns:minmax(0,1.46fr) minmax(265px,1fr);gap:1rem;align-items:stretch}
.lab-visual-card,.lab-control-card{background:var(--card);border:1px solid var(--rule);border-radius:17px;padding:1.15rem;display:flex;flex-direction:column;gap:1rem;min-width:0;overflow:hidden}
.lab-control-card{padding:1.35rem;gap:.85rem}.lab-control-card h3{font-size:1.32rem}.lab-control-card h4{font-family:var(--body);font-size:1.01rem;margin:0}.lab-small{color:var(--muted);font-size:.9rem}
.lab-card-top{display:flex;gap:.65rem;align-items:center;justify-content:space-between;flex-wrap:wrap}.lab-card-top b{font-size:1rem}.lab-signal{color:var(--muted);font-size:.65rem}
.lab-chart-svg,.lab-wheel-svg{display:block;width:100%;height:auto;max-height:35rem;overflow:visible}.lab-tong-svg{display:block;width:100%;height:300px;max-width:30rem;margin:0 auto}.lab-pulse-svg{display:block;width:100%;height:260px}
.lab-chip-row{display:flex;flex-wrap:wrap;gap:.45rem}.lab-chip{font:.78rem var(--body);background:var(--paper);border:1px solid var(--rule);border-radius:999px;color:var(--ink);padding:.37rem .7rem;cursor:pointer;transition:background .15s,border .15s}
.lab-chip:hover{border-color:var(--jade)}.lab-chip[aria-pressed="true"]{background:var(--jade-soft);border-color:var(--jade);font-weight:700}
.lab-range-label{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.95rem;margin-top:.3rem}.lab-range-label output{font-family:var(--mono)}.lab-control-card input[type=range]{width:100%;accent-color:var(--jade);cursor:pointer}
.lab-interpret,.lab-note-panel{margin-top:.3rem;background:var(--paper);border-left:3px solid var(--jade);border-radius:9px;padding:.9rem;display:flex;flex-direction:column;gap:.45rem}
.lab-interpret h4{font-size:1.1rem}.lab-interpret p,.lab-note-panel p{font-size:.92rem}.lab-chart-note{color:var(--muted);font-size:.79rem;line-height:1.55}
.lab-legend{display:flex;gap:.9rem;flex-wrap:wrap;color:var(--muted);font-size:.8rem}.lab-legend i{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-right:.32rem}
.lab-link-button{align-self:flex-start;background:transparent;color:var(--jade);border:0;font:.85rem var(--body);padding:.5rem 0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.lab-learn-strip{background:var(--jade-soft);border-left:4px solid var(--jade);padding:1.15rem 1.3rem; border-radius:12px;display:flex;flex-direction:column;gap:.3rem;font-size:.95rem}
.lab-learn-strip a{display:inline-block;align-self:flex-start;font-weight:700;margin-top:.45rem}
.lab-footer{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--rule);padding:1rem 0;color:var(--muted);font:.7rem var(--mono);flex-wrap:wrap}
.lab-info-title{font:400 1.75rem var(--display);line-height:1.3}.lab-info-sub{color:var(--muted);font-size:.9rem}.lab-info-list{display:flex;flex-direction:column;gap:.55rem;margin-top:.4rem}.lab-info-list div{border-top:1px solid var(--rule);padding-top:.55rem}.lab-info-list strong{display:block;color:var(--muted);font:.7rem var(--mono);text-transform:uppercase;letter-spacing:.05em}.lab-info-list p{font-size:.94rem}
.lab-case-bar{display:flex;gap:.6rem;align-items:center;background:var(--card);border:1px solid var(--rule);padding:.65rem .95rem;border-radius:11px;flex-wrap:wrap}
.lab-case-bar label{font-weight:700}.lab-case-bar select{font:inherit;flex:1;min-width:190px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);padding:.55rem;border-radius:8px}
.lab-case-intro{font-size:.98rem;color:var(--muted)}.lab-evidence-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:.55rem}
.lab-evidence-tiles button{border:1px dashed var(--rule);color:var(--muted);background:var(--paper);border-radius:10px;min-height:70px;padding:.65rem;text-align:left;cursor:pointer;font:inherit;font-size:.9rem}
.lab-evidence-tiles button.on{border:1px solid var(--jade);color:var(--ink);background:var(--jade-soft)}
.lab-evidence-tiles button .lab-clue-num{display:block;font:.68rem var(--mono);color:var(--muted);margin-bottom:.25rem}
.lab-bar-row{margin:.8rem 0}.lab-bar-row .lab-bar-txt{display:flex;justify-content:space-between;gap:.4rem;font-size:.86rem;font-weight:700}.lab-bar-row .lab-bar-track{width:100%;height:12px;border-radius:999px;background:var(--rule);overflow:hidden;margin:.25rem 0}
.lab-bar-row .lab-bar-track span{height:100%;display:block;border-radius:999px;min-width:2px;transition:width .38s ease;background:var(--jade)}
.lab-bar-row small{color:var(--muted);font-size:.72rem}.lab-guess-row{display:flex;flex-wrap:wrap;gap:.4rem}.lab-feedback{background:var(--jade-soft);padding:.8rem;border-radius:9px;font-size:.88rem;line-height:1.55}
.lab-svg-node {cursor:pointer;outline:none}.lab-svg-node:focus-visible .lab-node-box,.lab-svg-node:focus-visible circle {stroke:var(--jade);stroke-width:5}.lab-svg-node .lab-node-box{transition:stroke-width .2s,filter .2s}.lab-svg-node:hover .lab-node-box{filter:drop-shadow(0 0 5px #3aa18955)}
.lab-svg-label{font-family:var(--body);fill:var(--ink);font-size:15px;font-weight:700}.lab-svg-small{font-family:var(--mono);fill:var(--muted);font-size:11px}.lab-svg-tiny{font-family:var(--mono);fill:var(--muted);font-size:10px}
.lab-pulse-trace{fill:none;stroke:var(--yang);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}.lab-pulse-base{stroke:var(--rule);stroke-width:1;stroke-dasharray:4 4}.lab-scan{stroke:var(--jade);stroke-width:1.7;stroke-dasharray:4 4;opacity:.75}
.lab-inline-cta{margin:1rem 0;background:linear-gradient(120deg,var(--jade-soft),var(--card));border:1px solid var(--jade);border-radius:11px;padding:.85rem 1rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.89rem}
.lab-inline-cta a{font-weight:700}.lab-inline-cta .lab-inline-ico{font-size:1.3rem}
@media(max-width:60rem){.lab-hero{padding:1.6rem}.lab-grid-main{grid-template-columns:minmax(0,1fr)}.lab-control-card{min-height:0}}
@media(max-width:39rem){.lab-hero{grid-template-columns:1fr;padding:1.3rem}.lab-hero-art{display:none}.lab-hero h1{font-size:2.25rem}.lab-tabs{top:calc(var(--top) + env(safe-area-inset-top, 0px))}.lab-visual-card,.lab-control-card{padding:.85rem}.lab-topic-header{padding:.2rem}.lab-evidence-tiles{grid-template-columns:1fr 1fr}.lab-case-bar{align-items:stretch}}
@media(prefers-reduced-motion:reduce){.lab-orb,.lab-orb-core{animation:none!important}.lab-topic{animation:none!important}.lab-tab,.lab-bar-row .lab-bar-track span{transition:none!important}}

@keyframes labDash {to{stroke-dashoffset:-24}}
.lab-animated-path{animation:labDash 1.5s linear infinite}
@media(prefers-reduced-motion:reduce){.lab-animated-path{animation:none!important}}

/* TCM Plus: didactische laag. Kleurvariabelen uit de bestaande cursus. */
.lab-plus-head {display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.85rem}
.lab-plus-pill {font: .72rem var(--mono); color:var(--jade); border:1px solid var(--jade); padding:.2rem .6rem; border-radius:999px; white-space:nowrap}
.lab-plus-layout {display:grid;grid-template-columns: minmax(0,1.3fr) minmax(16rem,.9fr);gap:1rem;align-items:start}
.lab-plus-card {background:var(--card);border:1px solid var(--rule);padding:1.15rem;border-radius:16px;min-width:0}
.lab-plus-card h3 {margin-bottom:.45rem}
.lab-plus-note {font-size:.85rem;color:var(--muted);line-height:1.5}
.lab-plus-legend {display:flex;flex-wrap:wrap;gap:.5rem;margin-block:.65rem}
.lab-plus-legend span {font:.72rem var(--mono);border:1px solid var(--rule);padding:.2rem .55rem;border-radius:6px}
.lab-plus-segment {display:flex;flex-wrap:wrap;gap:.45rem;margin:.75rem 0}
.lab-plus-button {font:inherit;font-size:.9rem;background:var(--paper);border:1px solid var(--rule);color:var(--ink);border-radius:8px;padding:.5rem .8rem;cursor:pointer;transition:transform .12s,background .12s}
.lab-plus-button:hover {background:var(--jade-soft);transform:translateY(-1px)}
.lab-plus-button[aria-pressed="true"], .lab-plus-button.selected {border-color:var(--jade);background:var(--jade-soft);color:var(--ink);font-weight:700}
.lab-plus-button.primary {background:var(--jade);color:var(--paper);border-color:var(--jade)}
.lab-plus-button:disabled {opacity:.5;cursor:not-allowed;transform:none}
.lab-plus-button:focus-visible,.lab-plus-choice:focus-visible,.lab-plus-map-node:focus-visible {outline:3px solid var(--jade);outline-offset:3px}
.lab-plus-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:.75rem 0}
.lab-plus-stat {border-radius:10px;background:var(--paper);border:1px solid var(--rule);padding:.8rem}
.lab-plus-stat b {display:block;font:1.5rem var(--display);line-height:1.35}
.lab-plus-stat small {font:.72rem var(--mono);color:var(--muted)}
.lab-plus-days {display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem}
.lab-plus-day {border-radius:10px;background:var(--paper);border:1px solid var(--rule);padding:.65rem .2rem;cursor:pointer;text-align:center;font: .74rem var(--mono);color:var(--muted)}
.lab-plus-day b{display:block;font:1.25rem var(--display);color:var(--ink)}
.lab-plus-day.active{background:var(--jade-soft);border-color:var(--jade)}
.lab-plus-progress{height:8px;background:var(--rule);overflow:hidden;border-radius:99px;margin:.6rem 0}
.lab-plus-progress > span{height:100%;display:block;border-radius:99px;background:var(--jade);transition:width .3s ease}
.lab-plus-task{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:.75rem;padding:.85rem .2rem;border-top:1px solid var(--rule)}
.lab-plus-task input{width:18px;height:18px;accent-color:var(--jade);margin-top:.18rem}
.lab-plus-task .tasklinks{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.25rem;font-size:.8rem}
.lab-plus-task .mins {font:.73rem var(--mono);color:var(--muted);white-space:nowrap}
.lab-plus-task strong{line-height:1.35}
.lab-plus-hm {display:grid;grid-template-columns:10rem 1fr;align-items:center;gap:.6rem;max-width:100%;font-size:.84rem}
.lab-plus-hm span{color:var(--muted);font-size:.8rem}
.lab-plus-hm .track{display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem}
.lab-plus-hm .heat{height:28px;border-radius:5px;display:grid;place-items:center;font:.7rem var(--mono);color:var(--muted);background:var(--paper);border:1px solid var(--rule)}
.lab-plus-hm .heat[data-level="1"]{background:var(--jade-soft);color:var(--ink)}
.lab-plus-hm .heat[data-level="2"]{background:var(--jade);color:var(--paper)}
.lab-plus-compare-head{display:flex;flex-wrap:wrap;gap:.7rem;margin:.75rem 0}
.lab-plus-compare-head label{flex:1;min-width:11rem;font:.8rem var(--mono);color:var(--muted)}
.lab-plus-compare-head select{display:block;width:100%;font: .92rem var(--body);background:var(--card);color:var(--ink);border:1px solid var(--rule);padding:.55rem;border-radius:8px;margin-top:.25rem}
.lab-plus-compare-chart{display:grid;gap:.4rem;margin:.75rem 0}
.lab-plus-feature{display:grid;grid-template-columns:minmax(6.3rem,1.25fr) minmax(0,2fr) minmax(0,2fr);gap:.5rem;align-items:center;font-size:.83rem}
.lab-plus-feature>span{line-height:1.25}
.lab-plus-feature .track{height:16px;background:var(--paper);border:1px solid var(--rule);border-radius:20px;overflow:hidden;position:relative}
.lab-plus-feature .fill{height:100%;border-radius:20px;transition:width .33s ease}
.lab-plus-feature .track:first-of-type .fill{background:var(--yin)}
.lab-plus-feature .track:last-of-type .fill{background:var(--yang)}
.lab-plus-feature .different{font-weight:700;color:var(--ink)}
.lab-plus-branch{border-left:2px solid var(--rule);margin-left:.55rem;padding-left:1rem;margin-top:1rem}
.lab-plus-stage{display:inline-block;font:.72rem var(--mono);letter-spacing:.05em;color:var(--jade);margin-bottom:.25rem}
.lab-plus-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:.8rem 0}
.lab-plus-choice{text-align:left;padding:.8rem .85rem;border:1px solid var(--rule);border-radius:9px;background:var(--paper);font: .92rem var(--body);cursor:pointer;color:var(--ink)}
.lab-plus-choice:hover{border-color:var(--jade)}
.lab-plus-choice.correct{background:var(--jade-soft);border-color:var(--jade)}
.lab-plus-choice.wrong{background:var(--yang-soft);border-color:var(--yang)}
.lab-plus-choice:disabled{cursor:default}
.lab-plus-feedback{padding:.9rem 1rem;background:var(--jade-soft);border-radius:9px;margin:.7rem 0;line-height:1.6}
.lab-plus-feedback.warning{background:var(--warn-soft)}
.lab-plus-timeline{display:flex;gap:.4rem;flex-wrap:wrap;margin:.8rem 0}
.lab-plus-timeline span{height:7px;border-radius:9px;background:var(--rule);flex:1;min-width:1rem}
.lab-plus-timeline span.done{background:var(--jade)}
.lab-plus-safety {background:var(--warn-soft);padding:.8rem 1rem;border-radius:9px;margin:.75rem 0}
.lab-plus-nodegraph{width:100%;height:auto;max-height:390px;display:block}
.lab-plus-map-line{stroke:var(--jade);fill:none;stroke-width:2;opacity:.55;stroke-dasharray:7 8;animation:lab-plus-flow 10s linear infinite}
.lab-plus-map-line.hot{stroke:var(--yang);stroke-width:4;opacity:1}
.lab-plus-map-node{cursor:pointer}
.lab-plus-map-node circle{fill:var(--card);stroke:var(--rule);stroke-width:2.2}
.lab-plus-map-node.selected circle{stroke:var(--jade);stroke-width:4;fill:var(--jade-soft)}
.lab-plus-map-node text{font:12px var(--body);fill:var(--ink);pointer-events:none}
@keyframes lab-plus-flow{to{stroke-dashoffset:-120}}
.lab-plus-layer{border:1px solid var(--rule);border-radius:10px;padding:.8rem .85rem;margin:.45rem 0;background:var(--paper)}
.lab-plus-layer b{font-size:.95rem}
.lab-plus-layer p{font-size:.89rem;color:var(--muted);line-height:1.5}
.lab-plus-layer.active{border-color:var(--jade);background:var(--jade-soft)}
.lab-plus-pyramid{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin:1.2rem 0}
.lab-plus-pyramid>div{padding:.65rem;text-align:center;font:.78rem var(--mono);background:var(--paper);border:1px solid var(--rule);border-radius:5px;width:var(--w);max-width:100%;transition:background .2s}
.lab-plus-pyramid>div.active{background:var(--jade-soft);border-color:var(--jade)}
.lab-plus-check{display:grid;grid-template-columns:1fr auto;gap:.7rem;border-top:1px solid var(--rule);padding:.65rem 0;align-items:center}
.lab-plus-check small{color:var(--muted);display:block}
.lab-quickcheck{border:1px solid var(--rule);border-left:4px solid var(--jade);border-radius:11px;background:var(--card);padding:1rem;margin:1rem 0;display:grid;gap:.55rem}
.lab-quickcheck .lab-quick-q{font-weight:700;line-height:1.4}
.lab-quickcheck .lab-quick-answer{background:var(--jade-soft);padding:.75rem;border-radius:8px}
.lab-quickcheck .lab-quick-footer{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.lab-plus-home{background:var(--card);border:1px solid var(--jade);border-radius:14px;padding:1rem 1.2rem;display:flex;gap:1rem;justify-content:space-between;align-items:center;flex-wrap:wrap}
.lab-plus-home p{font-size:.9rem;color:var(--muted)}
.lab-plus-cta{color:var(--jade);font-weight:700}
@media(max-width:950px){.lab-plus-layout{grid-template-columns:1fr}.lab-plus-days{gap:.3rem}}
@media(max-width:520px){.lab-plus-feature{grid-template-columns:minmax(5.6rem,1fr) minmax(0,1fr) minmax(0,1fr);gap:.25rem;font-size:.72rem}.lab-plus-choices{grid-template-columns:1fr}.lab-plus-day{font-size:.65rem;padding:.5rem .1rem}.lab-plus-day b{font-size:1rem}.lab-plus-hm{grid-template-columns:7rem 1fr;font-size:.74rem}.lab-plus-stats{grid-template-columns:1fr 1fr 1fr}.lab-plus-stat{padding:.45rem}.lab-plus-stat b{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){.lab-plus-map-line{animation:none}.lab-plus-progress>span,.lab-plus-feature .fill,.lab-plus-button{transition:none}}