:root{
  color-scheme:dark;
  /* Achtergrond en vlakken, van diep naar hoog. */
  --void:#05070a; --hull:#0d1216; --plate:#161d23; --line:#232c34; --line-hot:#3a4752;
  /* Accent (EVE-cyaan) en tekst. */
  --ice:#7ccbe0; --ice-dim:#4f8a9c; --ink:#dfe4e7; --ink-dim:#8e989f;
  /* Signaalkleuren: goud, rood, groen. */
  --amber:#e0a83f; --rust:#d2533c; --jade:#5dbb7c;
  --sans:'Titillium Web',system-ui,sans-serif;
  --mono:'Share Tech Mono',ui-monospace,monospace;
  /* Knop met accent (primair), vlak: elke knop in de toolset is vlak. */
  --accent-bg:rgba(124,203,224,.22);
  --accent-bg-hover:rgba(124,203,224,.36);
  --accent-line:rgba(124,203,224,.65);
  --accent-fg:#eef9fc;
  --glow:0 0 0 1px rgba(124,203,224,.25),0 0 14px rgba(124,203,224,.18);
  /* Paneel: donker vlak met licht verloop en een hoekaccent linksboven. */
  --corner:var(--ice-dim);
  --panel:linear-gradient(var(--corner),var(--corner)) 0 0/.75rem 1px no-repeat,
          linear-gradient(var(--corner),var(--corner)) 0 0/1px .75rem no-repeat,
          linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 2.5rem),
          var(--hull);
  --panel-inset:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 1.5rem),var(--void);
  --radius:2px;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:calc(16px * var(--ui-scale,1));-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{
  min-height:100vh;overflow-wrap:break-word;
  background:
    radial-gradient(80rem 40rem at 75% -12rem,rgba(60,120,150,.16),transparent 70%),
    radial-gradient(60rem 30rem at -10% 110%,rgba(150,90,40,.07),transparent 70%),
    var(--void);
  background-attachment:fixed;
}
img,svg,video,canvas{max-width:100%}
::selection{background:rgba(124,203,224,.35);color:#fff}
:focus-visible{outline:1px solid var(--ice);outline-offset:1px}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{accent-color:var(--ice)}
select option{background:var(--hull);color:var(--ink)}
::placeholder{color:var(--ink-dim);opacity:.7}
a{color:var(--ice)}
*{scrollbar-width:thin;scrollbar-color:var(--line-hot) transparent}
::-webkit-scrollbar{width:.5rem;height:.5rem}
::-webkit-scrollbar-thumb{background:var(--line-hot);border-radius:0}
::-webkit-scrollbar-track{background:transparent}

/* Elke pagina zet zijn inhoud in .wrap; dat is de container waar de
   breekpunten naar kijken. Wat vast op het scherm staat (tooltips, meldingen)
   hoort buiten .wrap, want een container is ook hun bevattend blok. */
.wrap{container:page / inline-size;width:100%}

/* Layouthulpen voor nieuwe markup. */
.stack{display:flex;flex-direction:column;gap:var(--gap,.75rem);min-width:0}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,.5rem);min-width:0}
.auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--min,16rem),100%),1fr));gap:var(--gap,.75rem)}
.scroll-x{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.875rem 1rem;min-width:0}

/* Elke module-pagina: de kop en de basiskleuren. Een module zet in zijn eigen
   style.css alleen wat afwijkt (die laadt na dit bestand en wint dan). */
body{padding:0 0 4rem}
.wrap{max-width:114.286rem;margin:0 auto;padding:0 1.429rem}
.eyebrow{font-family:var(--mono);font-size:0.786rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ice-dim);margin:0 0 0.429rem}
h1{font-size:1.857rem;font-weight:600;margin:0;letter-spacing:-.01em}
.sub{font-family:var(--mono);font-size:0.857rem;color:var(--ink-dim);margin:0.429rem 0 0}
.dim{color:var(--ink-dim)}
.warn,.warnc{color:var(--amber)}
.err{color:var(--rust)}
.pos{color:var(--jade)}
.neg{color:var(--rust)}
.tablewrap{overflow-x:auto;max-width:100%}