/* app/explain/explain.css: "Zo werkt dit"-paneel bovenaan elke pagina van CAZT OS (kloon demo-os/demo/explain.css).
   Donker paneel met klei-accenten, serif-koppen, inline SVG-flow met een lopende puls. */
#osExplain:empty{display:none}
#osExplain{margin:0 0 22px}
.ox{--g:#161514;--g2:#241D16;--y:#E2561F;--cr:#F4F2EE;--mu:rgba(244,242,238,.66);--ln:rgba(244,242,238,.12);
  position:relative;overflow:hidden;border-radius:24px;color:var(--cr);
  background:radial-gradient(120% 140% at 100% 0%,rgba(226,86,31,.13) 0%,rgba(226,86,31,0) 42%),
             radial-gradient(90% 120% at 0% 100%,rgba(226,86,31,.07) 0%,rgba(226,86,31,0) 55%),
             linear-gradient(160deg,#1d1916 0%,#100E0C 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 50px -34px rgba(16,14,12,.65);
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;animation:oxIn .45s cubic-bezier(.2,.7,.2,1) both}
.ox::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(244,242,238,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(244,242,238,.035) 1px,transparent 1px);
  background-size:28px 28px;mask-image:linear-gradient(180deg,#000 0%,transparent 75%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 75%)}
@keyframes oxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.ox-bar{position:relative;display:flex;align-items:center;gap:12px;padding:18px 20px 0 24px}
.ox-tog{flex:1;min-width:0;display:flex;align-items:center;gap:14px;background:none;border:0;color:inherit;cursor:pointer;text-align:left;padding:0;font:inherit}
.ox-eye{flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--g);background:var(--y);padding:5px 10px;border-radius:999px}
.ox-title{min-width:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:25px;line-height:1.1;color:#FCFAF6;letter-spacing:-.005em}
.ox-chev{flex-shrink:0;margin-left:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--ln);color:var(--y);transition:transform .25s,background .2s}
.ox-chev svg{width:16px;height:16px}
.ox.open .ox-chev{transform:rotate(180deg);background:rgba(226,86,31,.08)}
.ox-tog:hover .ox-chev{border-color:rgba(226,86,31,.5)}
.ox-ask{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;background:rgba(244,242,238,.06);color:var(--cr);border:1px solid rgba(226,86,31,.4);
  border-radius:999px;padding:9px 15px;font:600 13px/1 Inter,'Helvetica Neue',Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.ox-ask svg{width:16px;height:16px;color:var(--y)}
.ox-ask:hover{background:var(--y);color:var(--g)}
.ox-ask:hover svg{color:var(--g)}
.ox-kern{position:relative;margin:10px 24px 18px;max-width:880px;font-size:15.5px;line-height:1.6;color:rgba(244,242,238,.86)}

.ox-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.ox.open .ox-body{grid-template-rows:1fr}
.ox-inner{min-height:0;overflow:hidden;position:relative}
.ox:not(.open) .ox-kern{margin-bottom:18px}

/* flowdiagram */
.ox-flow{margin:0 16px 6px;padding:8px 8px 4px;border-radius:18px;background:rgba(10,16,6,.28);border:1px solid var(--ln)}
.ox-svg{display:block;width:100%;height:auto;overflow:visible}
.ox-v{display:none}
.ox-line{fill:none;stroke:rgba(226,86,31,.22);stroke-width:2}
.ox-dash{stroke:rgba(226,86,31,.6);stroke-dasharray:4 10;animation:oxDash 1.4s linear infinite}
@keyframes oxDash{to{stroke-dashoffset:-28}}
.ox-node rect{fill:#241D16;stroke:rgba(226,86,31,.32);stroke-width:1.2}
.ox-node .ox-dot{fill:#241D16;stroke:rgba(226,86,31,.5);stroke-width:1.4}
.ox-node{opacity:0;animation:oxNode .5s ease-out forwards;animation-delay:calc(var(--i) * 90ms + 150ms)}
@keyframes oxNode{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ox-num{fill:var(--y)}
.ox-numt{fill:var(--g);font:700 12px Inter,Arial,sans-serif}
.ox-numt.big{fill:var(--y);font-size:14px}
.ox-lbl{fill:#f3efe3;font:600 13px Inter,Arial,sans-serif}
.ox-lbl.left{font-size:14px}
.ox-pulse{filter:drop-shadow(0 0 6px rgba(226,86,31,.8))}
.ox-tick{stroke:rgba(226,86,31,.25);stroke-width:1.2;fill:none}
.ox-joint{fill:#100E0C;stroke:rgba(226,86,31,.55);stroke-width:1.2}
.ox-node rect,.ox-node .ox-dot{animation:oxGlow var(--dur,6s) linear infinite;animation-delay:var(--d,0s)}
@keyframes oxGlow{0%{stroke:#E2561F;stroke-width:2;fill:#2e4222}12%{stroke:rgba(226,86,31,.32);stroke-width:1.2;fill:#241D16}100%{stroke:rgba(226,86,31,.32);fill:#241D16}}

/* stappen + zijkolom */
.ox-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;padding:14px 16px 4px}
.ox-col h4,.ox-card h4{margin:0 0 10px;font:700 11px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--y);display:flex;align-items:center;gap:8px}
.ox-steps{padding:16px 18px;border-radius:18px;background:rgba(244,242,238,.04);border:1px solid var(--ln)}
.ox-steps ol{list-style:none;margin:0;padding:0;position:relative}
.ox-steps ol::before{content:"";position:absolute;left:13px;top:12px;bottom:12px;width:1px;background:linear-gradient(var(--y),rgba(226,86,31,.05))}
.ox-steps li{position:relative;display:flex;gap:14px;padding:7px 0}
.ox-n{flex-shrink:0;width:27px;height:27px;border-radius:50%;background:var(--g);border:1.5px solid var(--y);color:var(--y);display:grid;place-items:center;font:700 12px/1 Inter,sans-serif;position:relative;z-index:1}
.ox-steps b{display:block;color:#FCFAF6;font-size:14.5px;font-weight:650;line-height:1.35;padding-top:3px}
.ox-steps p{margin:3px 0 0;color:var(--mu);font-size:13.5px;line-height:1.55}
.ox-side{display:flex;flex-direction:column;gap:12px}
.ox-card{padding:14px 16px;border-radius:18px;background:rgba(244,242,238,.04);border:1px solid var(--ln)}
.ox-card h4 i{width:8px;height:8px;border-radius:50%;background:var(--y);display:inline-block}
.ox-card h4 i.in{background:transparent;border:2px solid var(--y)}
.ox-card h4 i.tech{border-radius:2px}
.ox-card h4 i.rule{background:#F3A27F}
.ox-card.rules h4{color:#f4c9a4}
.ox-chips{display:flex;flex-wrap:wrap;gap:7px}
.ox-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font:600 12.5px/1.2 Inter,sans-serif;color:var(--cr);
  background:rgba(244,242,238,.07);border:1px solid rgba(244,242,238,.16);text-decoration:none}
.ox-chip.go{cursor:pointer}
.ox-chip.go span{color:var(--y);transition:transform .2s}
.ox-chip.go:hover{background:var(--y);color:var(--g);border-color:var(--y)}
.ox-chip.go:hover span{color:var(--g);transform:translateX(2px)}
.ox-tech,.ox-rules{list-style:none;margin:0;padding:0}
.ox-tech li{padding:6px 0;border-top:1px solid var(--ln);font-size:13.5px;line-height:1.5;color:var(--mu)}
.ox-tech li:first-child{border-top:0;padding-top:0}
.ox-tech b{display:block;color:#FCFAF6;font-weight:650;font-size:13.5px}
.ox-rules li{position:relative;padding:4px 0 4px 18px;font-size:13.5px;line-height:1.5;color:rgba(244,242,238,.82)}
.ox-rules li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;border-radius:2px;background:#F3A27F;transform:rotate(45deg)}
.ox-demo{margin:12px 16px 0;padding:11px 14px;border-radius:14px;background:rgba(226,86,31,.08);border:1px dashed rgba(226,86,31,.35);font-size:13.5px;line-height:1.5;color:rgba(244,242,238,.85)}
.ox-demo b{color:var(--y);margin-right:4px}
.ox-foot{display:flex;gap:16px;flex-wrap:wrap;padding:14px 24px 20px}
.ox-foot a{font:600 13px/1 Inter,sans-serif;color:var(--y);text-decoration:none;border-bottom:1px solid rgba(226,86,31,.35);padding-bottom:3px}
.ox-foot a:hover{border-color:var(--y)}

@media (max-width:900px){
  .ox-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .ox{border-radius:20px}
  .ox-bar{flex-wrap:wrap;padding:16px 16px 0}
  .ox-tog{flex-wrap:wrap;gap:8px 10px}
  .ox-title{font-size:22px;flex:1 1 60%}
  .ox-ask{order:3;width:100%;justify-content:center}
  .ox-kern{margin:10px 16px 16px;font-size:14.5px}
  .ox-h{display:none}
  .ox-v{display:block;margin:0 auto;max-width:420px}
  .ox-flow{margin:0 12px 4px}
  .ox-grid{padding:12px 12px 2px;gap:12px}
  .ox-steps,.ox-card{padding:14px}
  .ox-demo{margin:12px 12px 0}
  .ox-foot{padding:14px 16px 18px}
}
@media (prefers-reduced-motion:reduce){
  .ox,.ox-node,.ox-node rect,.ox-node .ox-dot{animation:none;opacity:1}
  .ox-dash{animation:none}
  .ox-pulse{display:none}
  .ox-body{transition:none}
}