@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}

:root{
  --wall:#ebe3d3; --dot:rgba(26,45,90,.16);
  --win:#fbf8f2; --win-2:#f4efe5; --chrome:#efe8da; --line:#ddd3c1;
  --ink:#1d2233; --muted:#6b6557; --navy:#1a2d5a; --on-navy:#fbf8f2; --navy-soft:#e4e8f1;
  --fern:#4f7a45; --amber:#bf8619; --rust:#b0523a; --out:#9a9384; --bark:#7a5a3c;
  --link:#cdc2ae; --menubar:#1d2233; --menubar-ink:#efe8da;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --wall:#12172a; --dot:rgba(239,232,218,.07);
    --win:#191f32; --win-2:#20273d; --chrome:#20273d; --line:#323a55;
    --ink:#efe8da; --muted:#a39d8f; --navy:#a3b6e6; --on-navy:#12172a; --navy-soft:#29314f;
    --fern:#8cbf7c; --amber:#e3b04f; --rust:#e58d71; --out:#7f7a70; --bark:#c49a72;
    --link:#3a4360; --menubar:#0b0f1d; --menubar-ink:#efe8da;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --wall:#12172a; --dot:rgba(239,232,218,.07);
  --win:#191f32; --win-2:#20273d; --chrome:#20273d; --line:#323a55;
  --ink:#efe8da; --muted:#a39d8f; --navy:#a3b6e6; --on-navy:#12172a; --navy-soft:#29314f;
  --fern:#8cbf7c; --amber:#e3b04f; --rust:#e58d71; --out:#7f7a70; --bark:#c49a72;
  --link:#3a4360; --menubar:#0b0f1d; --menubar-ink:#efe8da;
}
*{box-sizing:border-box}
body{
  margin:0; background-color:var(--wall); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.5;
  background-image:radial-gradient(var(--dot) 1.2px, transparent 1.3px); background-size:22px 22px;
  padding-inline:16px; padding-block:18px 40px;
}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
body.mode-klant .bouw-only{display:none!important}
body.mode-bouw .klant-only{display:none!important}

.menubar{
  max-width:1320px;margin:0 auto 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--menubar);color:var(--menubar-ink);border-radius:999px;padding:7px 16px;
  font-family:var(--mono);font-size:12px;width:fit-content;
}
.menubar b{font-weight:600;letter-spacing:.02em}
.menubar .sep{opacity:.35}
.menubar .dim{opacity:.7}

.window{
  max-width:1320px;margin:0 auto;background:var(--win);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 18px 50px -24px rgba(26,45,90,.35);overflow:hidden;
}
.chrome{display:flex;align-items:center;gap:12px;padding:9px 14px;background:var(--chrome);border-bottom:1px solid var(--line)}
.dots{display:flex;gap:7px;flex:none}
.dots i{width:11px;height:11px;border-radius:50%;display:block}
.dots i:nth-child(1){background:#e0685b}.dots i:nth-child(2){background:#e3b04f}.dots i:nth-child(3){background:#7fb46b}
.chrome .file{font-family:var(--mono);font-size:12px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.chrome .acts{display:flex;gap:6px;flex:none;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--win);border-radius:6px;
  padding:4px 10px;font-family:var(--mono);font-size:11.5px;cursor:pointer;white-space:nowrap;
}
.btn:hover{border-color:var(--navy);color:var(--navy)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--win);padding:2px;gap:2px}
.seg button{border:0;background:none;border-radius:999px;padding:3px 12px;font-size:12.5px;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
.seg.mode button{font-family:var(--mono);font-size:11.5px;padding:2px 10px}

.head{padding:22px 24px 16px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:12px;color:var(--bark);letter-spacing:.02em;margin:0 0 4px}
body.mode-bouw .eyebrow::before{content:"$ ";color:var(--navy);font-weight:600}
body.mode-klant .eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;font-weight:600}
h1{margin:0;font-size:clamp(22px,3vw,30px);line-height:1.15;font-weight:700;letter-spacing:-.01em;text-wrap:balance;color:var(--navy)}
.sub{margin:6px 0 0;color:var(--muted);max-width:62ch}
.stats{display:flex;gap:22px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.stat{display:flex;flex-direction:column}
.stat b{font-family:var(--mono);font-size:22px;font-weight:600;line-height:1.1}
.stat span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stat.warn b{color:var(--rust)}

.toolbar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:11px 24px;background:var(--win-2);border-bottom:1px solid var(--line)}
.search{position:relative;flex:1 1 220px;max-width:300px}
.search input{width:100%;border:1px solid var(--line);background:var(--win);border-radius:6px;padding:6px 10px 6px 26px;font-family:var(--mono);font-size:12.5px}
.search::before{content:"$";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-family:var(--mono);color:var(--navy);font-weight:600;font-size:12.5px}
.group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tlbl{font-size:12px;color:var(--muted);margin-right:2px}
body.mode-bouw .tlbl{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--win);border-radius:999px;padding:3px 10px;font-size:12.5px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.chip .sw{width:9px;height:9px;border-radius:50%;flex:none}
.chip[aria-pressed="true"] .sw{box-shadow:0 0 0 1.5px var(--on-navy)}
select.sel{border:1px solid var(--line);background:var(--win);border-radius:6px;padding:4px 8px;font-size:12.5px}
.sw{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.sw.bevestigd{background:var(--fern)}.sw.voorgesteld{background:var(--amber)}.sw.open{background:var(--rust)}.sw.buiten{background:transparent;border:1.5px dashed var(--out)}

.main{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0}
.canvas{position:relative;height:clamp(460px,72vh,760px);border-right:1px solid var(--line);overflow:hidden;background:var(--win)}
.canvas svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.canvas svg:active{cursor:grabbing}
.backbtn{position:absolute;left:14px;top:12px;border:1px solid var(--line);background:var(--win);border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.backbtn:hover{border-color:var(--navy);color:var(--navy)}
.overlay{position:absolute;left:14px;bottom:12px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);pointer-events:none;
  background:color-mix(in srgb,var(--win) 90%,transparent);padding:8px 10px;border-radius:8px;border:1px solid var(--line);max-width:calc(100% - 28px)}
.overlay .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.overlay .k{display:inline-flex;align-items:center;gap:5px}
.ring{width:11px;height:11px;border-radius:50%;border:2px solid var(--rust);display:inline-block}
.hint{font-size:13px;color:var(--ink)}
.zoom{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:6px}
.zoom .btn{justify-content:center;min-width:34px}
.shown{position:absolute;right:14px;bottom:12px;font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* svg */
.link{fill:none;stroke:var(--link);stroke-width:1.5;transition:opacity .3s}
.link.ext{stroke-dasharray:4 4}
.link.faded{opacity:.35}
.link.dim,.node.dim{opacity:.14}
.link.hot{stroke:var(--navy);stroke-width:2}
.node{cursor:pointer;outline:none;transition:opacity .3s}
.node:focus-visible circle.dot,.node:focus-visible rect{stroke:var(--navy);stroke-width:3}
.node text{font-family:var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--win);stroke-width:4px;stroke-linejoin:round}
.node.feature text{font-size:13px}
.node.feature.radial text{font-size:11.5px}
.node.feature circle.dot{stroke:var(--win);stroke-width:1.5}
.node.feature circle.q{fill:none;stroke:var(--rust);stroke-width:1.8}
.node .st-bevestigd{fill:var(--fern)}.node .st-voorgesteld{fill:var(--amber)}.node .st-open{fill:var(--rust)}
.node .st-buiten{fill:var(--win);stroke:var(--out)!important;stroke-dasharray:2 2;stroke-width:1.5}
.node.feature.row-buiten text{fill:var(--muted)}
.node.feature:hover text,.node.feature.sel text,.node.feature:focus-visible text{font-weight:600}
.node.feature.sel circle.dot{stroke:var(--navy);stroke-width:2.5}
.node.module rect{fill:var(--win);stroke:var(--navy);stroke-width:1.4}
.node.module:hover rect{stroke-width:2.4}
.node.module text{stroke:none;font-weight:600;font-size:13.5px;fill:var(--navy)}
.node.module text .cnt{font-family:var(--mono);font-weight:500;font-size:11.5px;fill:var(--muted)}
.node.module.focus rect{fill:var(--navy)}
.node.module.focus text,.node.module.focus text .cnt{fill:var(--on-navy)}
.node.module.ext rect{stroke-dasharray:4 3;stroke:var(--bark)}
.node.module.ext text{fill:var(--bark)}
.node.module.ext.focus rect{fill:var(--bark)}
.node.module.ext.focus text,.node.module.ext.focus text .cnt{fill:var(--on-navy)}
.node.module.faded{opacity:.38}
.node.module.faded:hover{opacity:.8}
.node.root circle{fill:var(--navy)}
.node.root text{fill:var(--on-navy);stroke:none;font-weight:600;font-size:14px}
.node.root text.pre{font-family:var(--mono);font-weight:400;font-size:10.5px;opacity:.75}

/* panel */
.panel{padding:18px 20px 22px;overflow:auto;height:clamp(460px,72vh,760px);background:var(--win)}
.panel h2{margin:0 0 6px;font-size:19px;line-height:1.25;text-wrap:balance}
.panel .back{border:0;background:none;padding:0;font-size:12.5px;color:var(--navy);cursor:pointer;margin-bottom:12px}
body.mode-bouw .panel .back{font-family:var(--mono);font-size:12px}
.panel p{margin:0 0 12px}
.muted{color:var(--muted)}
.grouphead{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:16px 0 4px}
.mlist{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.mlist button{width:100%;text-align:left;border:0;background:none;padding:9px 8px;border-radius:8px;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.mlist button:hover{background:var(--win-2)}
.mlist .nm{font-weight:600;font-size:14px}
.mlist .ct{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mlist .ds{grid-column:1/-1;font-size:12.5px;color:var(--muted);line-height:1.4}
.tag{display:inline-block;font-size:11px;font-weight:600;color:var(--rust);border:1px solid color-mix(in srgb,var(--rust) 40%,transparent);border-radius:999px;padding:0 7px;margin-left:6px;white-space:nowrap}
.bar{grid-column:1/-1;display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--win-2);gap:1px;margin-top:4px}
.bar i{display:block;height:100%}
.bar .bevestigd{background:var(--fern)}.bar .voorgesteld{background:var(--amber)}.bar .open{background:var(--rust)}.bar .buiten{background:var(--out);opacity:.5}
.meta{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13px;margin:14px 0}
.meta dt{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.meta dd{margin:0}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:1px 9px;font-size:12.5px;font-weight:500;border:1px solid var(--line);margin:0 4px 4px 0}
.qbox{border:1px solid color-mix(in srgb,var(--rust) 45%,var(--line));background:color-mix(in srgb,var(--rust) 7%,var(--win));border-radius:8px;padding:10px 12px;margin-top:6px}
.qbox h3{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--rust);text-transform:uppercase;letter-spacing:.06em}
.qbox p{margin:0;font-size:13.5px}
.qbox p + p{margin-top:8px}
.flist{list-style:none;margin:10px 0 0;padding:0}
.flist button{width:100%;text-align:left;border:0;background:none;padding:7px 6px;border-radius:6px;cursor:pointer;display:flex;gap:9px;align-items:baseline;font-size:13.5px}
.flist button:hover{background:var(--win-2)}
.flist .sw{position:relative;top:-1px}
.flist .st{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.flist .st.q{color:var(--rust);font-weight:600}
.note{font-size:12px;color:var(--muted);border-left:2px solid var(--line);padding-left:10px;margin-top:14px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--menubar);color:var(--menubar-ink);font-family:var(--mono);font-size:12px;padding:8px 14px;border-radius:8px;z-index:10}

@media (max-width:900px){
  .main{grid-template-columns:1fr}
  .canvas{border-right:0;border-bottom:1px solid var(--line);height:62vh;min-height:400px}
  .panel{height:auto}
  .head,.toolbar{padding-inline:16px}
  .overlay{font-size:11px}
  .shown{display:none}
}
@media (max-width:520px){
  .menubar .dim,.menubar .sep:last-of-type{display:none}
  .chrome .file{display:none}
  .chrome{justify-content:space-between}
  .chrome .acts .btn span{display:none}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* showcase intro */
.intro{max-width:1320px;margin:8px auto 26px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px 48px;align-items:end}
.intro h1{font-size:clamp(28px,4.4vw,48px);line-height:1.08;letter-spacing:-.02em;max-width:18ch}
.intro .lead{font-size:17px;color:var(--ink);max-width:56ch;margin:14px 0 0}
.intro ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.intro li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14.5px}
.intro li b{font-family:var(--mono);color:var(--navy);font-weight:600}
.cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;background:var(--navy);color:var(--on-navy);text-decoration:none;border-radius:8px;padding:10px 16px;font-family:var(--mono);font-size:13px}
.cta:hover{filter:brightness(1.1)}
.demo-flag{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--bark);border:1px dashed var(--bark);border-radius:999px;padding:1px 9px;margin-left:8px;vertical-align:middle}
.foot{max-width:1320px;margin:18px auto 0;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot a{color:var(--navy)}
@media (max-width:900px){.intro{grid-template-columns:1fr}}