:root{--vlak:#ffffff;--rand:#d6d9de;--tekst:#16191d;--zacht:#5b6470;--accent:#1d4ed8;--achter:#f3f4f6;--blad:#d9dce1;--fout:#b91c1c;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--vlak:#16191d;--rand:#2f353d;--tekst:#eceef1;--zacht:#9aa3af;--accent:#7aa2ff;--achter:#0e1013;--blad:#23272e;--fout:#fca5a5}}*{box-sizing:border-box}body,html{height:100%;margin:0}body{background:var(--achter);color:var(--tekst);font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif}button,input{color:inherit;font:inherit}.paginas:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.alleen-lezer{-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.zacht{color:var(--zacht)}.viewer{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);height:100%}.zijbalk{background:var(--vlak);border-right:1px solid var(--rand);min-height:0}.zijbalk,.zijbalk header{display:flex;flex-direction:column}.zijbalk header{border-bottom:1px solid var(--rand);gap:2px;padding:10px 14px}.zijbalk header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zijbalk header span{color:var(--zacht);font-size:12px}.tabs{border-bottom:1px solid var(--rand);display:flex}.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--zacht);cursor:pointer;flex:1 1;padding:8px 4px}.tabs button[aria-selected=true]{border-bottom-color:var(--accent);color:var(--tekst);font-weight:600}.tabs button:disabled{cursor:default;opacity:.45}.zijbalk-inhoud{flex:1 1;min-height:0;overflow-y:auto}.zijbalk-melding{color:var(--zacht);margin:0;padding:14px}.inhoud,.lijst,.miniaturen{list-style:none;margin:0;padding:6px}.inhoud button,.lijst button{background:none;border:0;border-radius:6px;cursor:pointer;overflow:hidden;padding:7px 8px;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}.inhoud button:hover,.lijst button:hover,.miniaturen button:hover{background:var(--achter)}.lijst button[aria-current=true]{background:var(--achter);color:var(--accent);font-weight:600}.miniaturen{gap:4px}.miniaturen,.miniaturen button{align-items:center;display:flex;flex-direction:column}.miniaturen button{background:none;border:0;border-radius:6px;cursor:pointer;gap:3px;padding:6px 10px}.miniaturen canvas{background:#ffffff;border:1px solid var(--rand);display:block}.miniaturen span{color:var(--zacht);font-size:12px}.miniaturen button[aria-current=true] canvas{outline:2px solid var(--accent)}.miniaturen button[aria-current=true] span{color:var(--accent);font-weight:600}.werkvlak{display:flex;flex-direction:column;min-height:0;min-width:0}.werkbalk{background:var(--vlak);border-bottom:1px solid var(--rand);flex-wrap:wrap;gap:6px 18px;justify-content:space-between;min-height:44px;padding:5px 10px}.werkbalk,.werkbalk .groep{align-items:center;display:flex}.werkbalk .groep{gap:6px;min-width:0}.werkbalk button{background:none;border:1px solid var(--rand);border-radius:6px;cursor:pointer;line-height:1;min-height:30px;min-width:30px;padding:0 8px}.werkbalk button:hover:not(:disabled){background:var(--achter)}.werkbalk button:disabled{cursor:default;opacity:.4}.werkbalk .zoomstand{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;min-width:58px}.werkbalk .naam{font-weight:600;max-width:42ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.werkbalk input{background:var(--vlak);border:1px solid var(--rand);border-radius:6px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;height:30px;text-align:right;width:54px}.blad{background:var(--blad);min-height:0}.blad,.paginas{display:flex;flex:1 1;min-width:0}.paginas{align-items:safe center;flex-direction:column;gap:12px;overflow:auto;padding:12px}.pagina{background:#ffffff;box-shadow:0 1px 3px rgb(0 0 0/.25);flex:none;position:relative}.pagina canvas{display:block;height:100%;width:100%}.afbeelding{flex:1 1;min-width:0;overflow:auto;padding:12px}.afbeelding img{display:block;margin:0 auto}.melding{color:var(--zacht);margin:auto;max-width:46ch;padding:24px;text-align:center}.melding h1{color:var(--tekst);font-size:18px}.melding.fout{color:var(--fout)}@media (max-width:640px){.viewer{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,32%) minmax(0,1fr)}.zijbalk{border-bottom:1px solid var(--rand);border-right:0}.werkbalk .naam{max-width:18ch}}