/* Vonk — "Neural networks, seen". Page styles for netwerken.html.
   The canonical header, footer, sides and back-to-top blocks live inline in
   the page, byte-identical to the other pages; nothing here touches them. */

body{background:var(--warm);}
/* the honest strip: everything here is in development */
.devnote{background:rgba(242,173,32,.16); color:#6B5415; font-size:13px; font-weight:600;
         text-align:center; padding:8px clamp(16px,3vw,40px); border-bottom:1px solid rgba(242,173,32,.3);
         position:relative; z-index:3;}
.topbar{position:relative; z-index:3;}

/* ---------------- hero ---------------- */
.nhero{position:relative; padding:20px 0 70px; min-height:min(640px,78vh); display:flex; align-items:center; overflow:hidden;}
.nhero-net{position:absolute; inset:0; width:100%; height:100%; display:block;}
.nhero-copy{position:relative; z-index:1; width:100%;}
.nhero .eyebrow a{color:inherit; text-decoration:none; border-bottom:1.5px solid rgba(237,98,41,.35);}
.nhero .eyebrow a:hover{border-color:var(--orange);}
/* the back arrow at the top: round arrow + Learn, back to the index */
.lback{display:inline-flex; align-items:center; gap:9px; margin:14px 0 16px; font-weight:600;
       font-size:14.5px; color:var(--navy); text-decoration:none; position:relative; z-index:1;}
.lback .arr{width:30px; height:30px; flex:none; border-radius:50%; background:var(--paper); color:var(--navy);
            box-shadow:inset 0 0 0 1.5px var(--line); display:inline-flex; align-items:center;
            justify-content:center; font-weight:800; font-size:15px; transition:background .16s, color .16s;}
.lback:hover .arr, .lback:focus-visible .arr{background:var(--navy); color:#fff;}
.nhero h1{font-family:var(--font-display); font-weight:600; font-size:clamp(42px,6.6vw,82px); line-height:.98;
          letter-spacing:-.018em; color:var(--navy); margin:0 0 22px; max-width:11ch;}
.nhero .lead{font-size:clamp(17px,1.6vw,20px); color:var(--ink); max-width:40ch; margin:0;}
.nhero-note{margin:18px 0 0; font-size:14px; color:var(--muted); max-width:44ch;}
@media (max-width:760px){
  .nhero{min-height:0; padding:10px 0 300px; align-items:flex-start;}
}

/* ---------------- chapter bar ---------------- */
.chbar{position:sticky; top:0; z-index:20; background:rgba(251,247,240,.86);
       -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
       border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;}
.chbar.is-stuck{border-bottom-color:var(--line); box-shadow:0 8px 20px -18px rgba(5,41,80,.5);}
.chbar-in{max-width:1240px; margin:0 auto; padding:10px clamp(16px,3vw,28px); display:flex; gap:8px;
          overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth;}
.chbar-in::-webkit-scrollbar{display:none;}
.chbar-a{display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; text-decoration:none;
         padding:6px 14px 6px 6px; border-radius:999px; color:var(--navy); font-size:13.5px; font-weight:600;
         border:1.5px solid transparent; transition:background .18s, border-color .18s, box-shadow .18s;}
.chbar-n{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700;
         background:#fff; color:var(--accent); border:1.5px solid var(--accent);}
.chbar-a:hover{background:#fff; border-color:var(--line);}
.chbar-a.is-on{background:#fff; border-color:var(--accent); box-shadow:0 8px 16px -10px var(--accent);}
.chbar-a.is-on .chbar-n{background:var(--accent); color:#fff;}

/* ---------------- a chapter ---------------- */
.ch{padding:84px 0 40px; scroll-margin-top:56px;}
#chapters > div:nth-child(even) > .ch{background:#fff;}
.ch-head{display:flex; gap:22px; align-items:flex-start;}
.ch-num{flex:0 0 auto; font-family:var(--font-display); font-weight:600; font-size:clamp(40px,5vw,62px); line-height:.9;
        color:var(--accent); letter-spacing:-.02em;}
.ch-hh h2{font-size:clamp(28px,3.6vw,42px); line-height:1.05; margin:4px 0 10px;}
.ch-lead{margin:0; max-width:60ch; font-size:17.5px; color:var(--ink);}

.ch-stagewrap{max-width:1240px; margin:34px auto 0; padding:0 clamp(12px,2.5vw,28px);}
.stage{position:relative; border-radius:26px; overflow:hidden; color:#EAF1F8;
       background:radial-gradient(120% 90% at 22% 0%, #0B3A6E 0%, #062748 42%, #03152B 100%);
       box-shadow:0 34px 60px -38px rgba(5,41,80,.85), 0 0 0 1px rgba(5,41,80,.06);}
.stage::before{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
       box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}

.stage-top{display:grid; grid-template-columns:auto 1fr; gap:14px 28px; align-items:start;
           padding:20px 24px 4px;}
.steps{display:flex; gap:6px; flex-wrap:wrap;}
.stepb{display:inline-flex; align-items:center; gap:8px; border:1.5px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03);
       color:#B9C6D6; font-family:var(--font-body); font-size:13px; font-weight:600; padding:5px 13px 5px 5px;
       border-radius:999px; cursor:pointer; transition:background .18s, color .18s, border-color .18s, box-shadow .18s;}
.stepb-n{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700;
         background:rgba(255,255,255,.08); color:#EAF1F8; transition:background .18s;}
.stepb:hover{color:#fff; border-color:rgba(255,255,255,.3);}
.stepb.is-done .stepb-n{background:rgba(255,255,255,.18);}
.stepb.is-on{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 10px 22px -10px var(--accent);}
.stepb.is-on .stepb-n{background:#fff; color:var(--accent);}
.stepb:focus-visible,.nbtn:focus-visible,.nseg-b:focus-visible,.cap-next:focus-visible{outline:2px solid #fff; outline-offset:2px;}

.cap{min-height:74px; max-width:68ch;}
.cap.is-in{animation:capIn .5s cubic-bezier(.2,.8,.3,1) both;}
@keyframes capIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.cap-h{font-family:var(--font-display); font-weight:600; font-size:20px; line-height:1.2; color:#fff; margin:2px 0 4px;}
.cap-b{margin:0; font-size:15px; line-height:1.55; color:#C9D6E4; display:inline;}
.cap-b b{color:#fff; font-weight:600;}
.cap-b .k-pos{color:#5FD3DB; font-weight:600;} .cap-b .k-neg{color:#FF8C61; font-weight:600;} .cap-b .k-gold{color:#F6BC3C; font-weight:600;}
.cap-next{display:inline-block; margin-left:10px; border:none; background:none; color:#F6BC3C; font-family:var(--font-body);
          font-size:14px; font-weight:700; cursor:pointer; padding:2px 0; white-space:nowrap;}
.cap-next:hover{text-decoration:underline; text-underline-offset:3px;}

.stage-canvas{position:relative; width:100%; touch-action:pan-y;}
.stage-canvas canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.stage-ov{position:absolute; inset:0; pointer-events:none;}
.stage-ov > *{pointer-events:auto;}

.stage-ctl{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:flex-end; padding:8px 24px 22px;
           border-top:1px solid rgba(255,255,255,.07);}
.stage-ctl:empty{display:none;}
.nctl-g{display:flex; flex-wrap:wrap; gap:12px 18px; align-items:flex-end;}
.nctl-g.grow{flex:1 1 auto;}
.nctl-k{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8FA6C2; width:100%; margin-bottom:-4px;}

/* buttons on the stage */
.nbtn{font-family:var(--font-body); font-weight:600; font-size:14px; color:#fff; cursor:pointer;
      background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.2); border-radius:999px; padding:9px 18px;
      transition:background .16s, border-color .16s, transform .12s, box-shadow .16s;}
.nbtn:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4);}
.nbtn:active{transform:translateY(1px);}
.nbtn.go{background:#ED6229; border-color:#ED6229; box-shadow:0 10px 22px -10px #ED6229;}
.nbtn.go:hover{background:#F27A47; border-color:#F27A47;}
.nbtn.is-on{background:#fff; color:#052950; border-color:#fff;}
.nbtn[disabled]{opacity:.4; cursor:default;}

.nseg{display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.14); flex-wrap:wrap;}
.nseg-b{border:none; background:none; color:#B9C6D6; font-family:var(--font-body); font-size:13px; font-weight:600;
        padding:7px 14px; border-radius:999px; cursor:pointer; transition:background .16s, color .16s;}
.nseg-b:hover{color:#fff;}
.nseg-b.is-on{background:#fff; color:#052950; box-shadow:0 6px 14px -8px #fff;}

/* sliders */
.nsl{display:flex; flex-direction:column; gap:6px; min-width:150px; flex:1 1 150px; max-width:260px; --c:#F6BC3C;}
.nsl-top{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:#B9C6D6; font-weight:500;}
.nsl-v{color:#fff; font-variant-numeric:tabular-nums; font-weight:700;}
.nsl input{-webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; margin:0; cursor:pointer; --k:50%;}
.nsl input::-webkit-slider-runnable-track{height:6px; border-radius:6px;
   background:linear-gradient(90deg, var(--c) 0 var(--k), rgba(255,255,255,.14) var(--k) 100%);}
.nsl input::-moz-range-track{height:6px; border-radius:6px; background:rgba(255,255,255,.14);}
.nsl input::-moz-range-progress{height:6px; border-radius:6px; background:var(--c);}
.nsl input::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; margin-top:-7px;
   background:#fff; border:3px solid var(--c); box-shadow:0 4px 12px -2px var(--c); transition:transform .12s;}
.nsl input::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--c); box-shadow:0 4px 12px -2px var(--c);}
.nsl input:active::-webkit-slider-thumb{transform:scale(1.18);}
.nsl input:focus-visible{outline:2px solid #fff; outline-offset:4px; border-radius:4px;}

/* overlay bits chapters can drop onto the canvas */
.tag-ill{position:absolute; right:16px; top:12px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
         color:#8FA6C2; border:1px solid rgba(143,166,194,.35); border-radius:999px; padding:3px 10px; pointer-events:none;}
.ov-card{position:absolute; max-width:300px; background:rgba(3,21,43,.88); border:1px solid rgba(255,255,255,.14);
         border-radius:16px; padding:14px 16px; font-size:13.5px; line-height:1.5; color:#C9D6E4;
         -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 20px 40px -20px #000;
         transition:opacity .25s, transform .25s;}
.ov-card h4{margin:0 0 4px; font-family:var(--font-display); font-weight:600; font-size:17px; color:#fff;}
.ov-card p{margin:0;}
.ov-card.is-off{opacity:0; transform:translateY(6px); pointer-events:none;}

/* ---------------- below the stage ---------------- */
.ch-foot{margin-top:26px;}
.mf{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.mf > div{border-radius:18px; padding:18px 22px; position:relative;}
.mf-myth{background:#fff; border:1.5px dashed #D9CFBE;}
#chapters > div:nth-child(even) .mf-myth{background:var(--warm);}
.mf-myth p{color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(200,59,20,.45); text-decoration-thickness:1.5px;}
.mf-fact{background:var(--accent); color:#fff; box-shadow:0 14px 28px -18px var(--accent);}
.mf-k{display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; color:var(--muted);}
.mf-fact .mf-k{color:rgba(255,255,255,.82);}
.mf p{margin:0; font-size:15.5px; line-height:1.5;}
.mf-fact p{font-weight:500;}

details.hides{margin-top:14px; border-top:1px solid var(--line);}
details.hides summary{cursor:pointer; list-style:none; padding:14px 0 6px; font-weight:600; color:var(--navy); font-size:15px;}
details.hides summary::-webkit-details-marker{display:none;}
details.hides summary::before{content:"+"; display:inline-block; width:1.1em; color:var(--accent); font-weight:700;}
details.hides[open] summary::before{content:"\2013";}
.hides-b{font-size:15px; line-height:1.6; max-width:72ch;}
.hides-b ul{margin:4px 0 0; padding-left:20px;} .hides-b li{margin:4px 0;}
.hides-src{margin-top:12px; font-size:13px; color:var(--muted);}
.hides-src b{font-size:11px; letter-spacing:.12em; text-transform:uppercase;}
.hides-src p{margin:4px 0 0; line-height:1.6;}

/* ---------------- end ---------------- */
.nend{padding:70px 0 90px;}
.nend-box{background:#052950; border-radius:26px; padding:clamp(28px,4vw,48px); color:#C9D6E4;
          background-image:radial-gradient(90% 120% at 100% 0%, rgba(12,129,140,.4), transparent 60%);}
.nend-box h2{color:#fff;}
.nend-box p{max-width:60ch; font-size:16.5px;}
.nend-btns{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px;}

@media (max-width:900px){
  .stage-top{grid-template-columns:1fr;}
  .mf{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .ch{padding-top:60px;}
  .ch-head{flex-direction:column; gap:6px;}
  .stage{border-radius:20px;}
  .stage-top{padding:16px 16px 2px;}
  .stepb{font-size:12px; padding-right:10px;}
  .stepb-l{display:none;}
  .stepb.is-on .stepb-l{display:inline;}
  .stage-ctl{padding:8px 16px 18px;}
  .nsl{max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  .cap.is-in{animation:none;}
}

/* a small − n + stepper */
.nstep{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:#B9C6D6;}
.nstep-l{margin-right:2px;}
.nstep-b{width:32px; height:32px; padding:0; display:grid; place-items:center; font-size:16px; line-height:1;}
.nstep-v{min-width:14px; text-align:center; color:#fff; font-size:15px; font-variant-numeric:tabular-nums;}
/* the "illustration" label lives at the end of the controls strip */
.stage-ctl .tag-ill{position:static; margin-left:auto; align-self:center; order:99;}