/* Reader modes and responsive presentation adapted from cursussen presentatie.css.
   See docs/code-origins.md. Formularium styles are maintained locally. */
:root { --header-h:3.6rem; color-scheme: light; --bg:#f7f8fa; --panel:#fff; --ink:#182536; --muted:#526175; --line:#d7dfe7; --accent:#185a91; }
:root[data-theme=dark] { color-scheme:dark; --bg:#111922; --panel:#1a2532; --ink:#e5edf5; --muted:#afbdce; --line:#35475a; --accent:#8bc7ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { color-scheme:dark; --bg:#111922; --panel:#1a2532; --ink:#e5edf5; --muted:#afbdce; --line:#35475a; --accent:#8bc7ff; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 system-ui,sans-serif; }
a { color:var(--accent); text-decoration-thickness:.08em; text-underline-offset:.16em; }
button,input,select { font:inherit; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:.45rem .7rem; }
button { cursor:pointer; } button:disabled { opacity:.45; cursor:default; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
.site-header { position:sticky; top:0; z-index:10; box-sizing:border-box; min-height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem max(1.55rem,calc((100% - 1450px)/2 + 1.55rem)); border-bottom:1px solid var(--line); background:var(--panel); }
.brand { display:flex; align-items:center; gap:.65rem; font-weight:750; font-size:1.3rem; text-decoration:none; color:var(--ink); }
.brand img { width:42px; height:42px; border-radius:10px; }
.site-header nav,footer { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
footer { padding:2rem 3vw; border-top:1px solid var(--line); justify-content:center; }
.collection,.prose { max-width:1100px; margin:3rem auto; padding:0 1.2rem; }
.collection h1 { font-size:clamp(2rem,5vw,3.3rem); line-height:1.1; }
.collection>p { color:var(--muted); }
label { display:block; }
.search-box { position:relative; margin:.4rem 0 2rem; }
.search-box svg { position:absolute; left:.8rem; top:50%; width:1.2rem; height:1.2rem; transform:translateY(-50%); fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; pointer-events:none; }
.collection input { width:100%; box-sizing:border-box; padding-left:2.6rem; }
.chapter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.1rem; }
.chapter-card { background:var(--panel); border:1px solid var(--line); padding:1.3rem; border-radius:12px; }
.chapter-card h2 { font-size:1.3rem; margin:0; } .chapter-card details[open] { margin-top:.8rem; } summary { cursor:pointer; }
.chapter-card ul { padding-left:1.3rem; }.chapter-card li { margin:.45rem 0; }
.reader { display:grid; grid-template-columns:280px minmax(0,1fr); max-width:1450px; margin:auto; }
aside { border-right:1px solid var(--line); padding:1.1rem; max-height:calc(100vh - var(--header-h) - 1rem); overflow:auto; position:sticky; top:var(--header-h); }
aside ul { list-style:none; padding:0; } aside li { margin:.4rem 0; } aside a { display:block; padding:.15rem .45rem; border-radius:5px; font-size:.9rem; }
aside .toc-current>a { font-weight:700; } aside .toc-current>ul { margin:.2rem 0 .6rem; } aside .toc-l4 { margin-left:1rem; } aside .toc-l5 { margin-left:2rem; } aside .toc-l5 a { font-size:.92em; }
aside a[aria-current] { background:var(--line); font-weight:650; }
.reader main { min-width:0; padding:1.3rem clamp(1rem,3vw,3rem) 3rem; }
.topic { scroll-margin-top:calc(var(--header-h) + 1rem); padding:1rem 0; overflow-x:auto; } h2,h3,h4,h5 { line-height:1.3; } h3 { font-size:1.5rem; } h4 { font-size:1.2rem; }
.figure { margin:1.5rem auto; max-width:min(100%,40rem); text-align:center; position:relative; } .figure img { max-width:100%; height:auto; max-height:420px; border-radius:4px; }
:root[data-theme=dark] .figure img[src$=".svg"], :root[data-theme=dark] .figure iframe { filter:invert(1) hue-rotate(180deg); }
:root[data-theme=dark] .figure iframe { mix-blend-mode:screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .figure img[src$=".svg"], :root:not([data-theme=light]) .figure iframe { filter:invert(1) hue-rotate(180deg); mix-blend-mode:screen; } }
.figure iframe { width:100%; height:350px; border:0; position:absolute; left:0; top:0; visibility:hidden; }.figure.ready iframe { position:static; visibility:visible; }.figure.ready img { display:none; }
.figure-controls { position:absolute; top:.35rem; right:.35rem; z-index:1; display:flex; gap:.25rem; }.figure-controls button { display:grid; place-items:center; width:1.8rem; height:1.8rem; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); opacity:.75; cursor:pointer; }.figure-controls button:hover,.figure-controls button:focus-visible { opacity:1; }.figure:not(.moved) .figure-reset { display:none; }.figure-controls svg { width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
dialog { background:var(--panel); color:var(--ink); width:min(95vw,1100px); max-height:95vh; border:1px solid var(--line); border-radius:10px; } dialog::backdrop { background:#000a; } dialog iframe { height:70vh !important; }
dialog .figure { max-width:100%; }
dialog .figure img { width:100%; max-height:70vh; object-fit:contain; }
mjx-container[display=true] { overflow-x:auto; overflow-y:hidden; padding:.5rem 0; max-width:100%; } .hidden { display:none; }
@media(max-width:760px) { .site-header { flex-wrap:wrap; } .site-header nav { gap:.65rem; font-size:.9rem; } .reader { display:block; } aside { position:static; max-height:220px; border-right:0; border-bottom:1px solid var(--line); } .reader main { padding:1rem; } .figure iframe { height:280px; } }
@media print { .site-header,aside,footer,.figure-controls { display:none !important; }.reader { display:block; }body { background:white;color:black; } }
.hero { display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem; align-items:center; max-width:1100px; margin:3rem auto 0; padding:0 1.2rem; }
.hero h1 { font-size:clamp(2rem,5vw,3.3rem); line-height:1.1; margin:0 0 1rem; }
.hero p { color:var(--muted); font-size:1.15rem; margin:0 0 1.5rem; }
.hero .shot { justify-self:center; width:min(260px,80%); height:auto; border-radius:24px; border:1px solid var(--line); box-shadow:0 20px 50px rgb(0 0 0 / .18); }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.btn { display:inline-block; padding:.7rem 1.4rem; border-radius:999px; font-weight:600; text-decoration:none; border:1px solid var(--accent); }
.btn.primary { background:var(--accent); color:var(--bg); }
@media (max-width:700px) { .hero { grid-template-columns:1fr; } }
.shot-dark { display:none; }
:root[data-theme=dark] .shot-light { display:none; }
:root[data-theme=dark] .shot-dark { display:block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .shot-light { display:none; } :root:not([data-theme=light]) .shot-dark { display:block; } }

#theme { display:inline-flex; align-items:center; padding:.45rem; }
#theme svg { width:1.3rem; height:1.3rem; fill:none; stroke:currentColor; stroke-width:2; }
.play-badge { display:inline-flex; align-items:center; gap:.55rem; padding:.3rem .9rem .3rem .65rem; background:#000; color:#fff; border:1px solid #a6a6a6; border-radius:8px; text-decoration:none; font-weight:600; font-size:1.15rem; line-height:1.1; }
.play-badge svg { width:1.6rem; height:1.7rem; }
.play-badge span { display:flex; flex-direction:column; }
.play-badge small { font-size:.6rem; font-weight:500; letter-spacing:.04em; }
.play-badge:hover { background:#1a1a1a; }
@media(max-width:760px) { .play-badge { font-size:.95rem; padding:.2rem .6rem .2rem .45rem; gap:.4rem; } .play-badge svg { width:1.3rem; height:1.4rem; } .play-badge small { font-size:.5rem; } .site-header nav select { padding:.4rem .4rem; } }
.features { list-style:none; padding:0; margin:1.2rem 0; color:var(--muted); }
.features li { position:relative; padding-left:1.6rem; margin:.35rem 0; }
.features li::before { content:""; position:absolute; left:.2rem; top:.35em; width:.4rem; height:.7rem; border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(45deg); }
.hero h1 { text-wrap:balance; }
.copyright { flex-basis:100%; text-align:center; color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.chapter-card summary { display:none; }