*{box-sizing:border-box}html{scroll-behavior:smooth}:root{--bg:#050914;--navy:#0a1326;--ink:#11192d;--muted:#66718a;--blue:#365cdf;--violet:#685be9;--cyan:#32b9ef;--line:#dfe4f0;--paper:#f6f8fc}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg)}header{height:84px;padding:0 5vw;display:flex;align-items:center;gap:34px;background:#050914;color:white;position:sticky;top:0;z-index:10;border-bottom:1px solid #172039}.brand{font-size:30px;font-weight:900;letter-spacing:-1.5px;text-decoration:none;white-space:nowrap}.brand .api{color:white}.brand .base{background:linear-gradient(90deg,#2866e9,#655ce8);-webkit-background-clip:text;color:transparent}.brand .db{font-size:18px;color:#8799ff;margin-left:5px}header nav{display:flex;gap:26px;margin-left:auto}header nav a{color:#aab5cf;text-decoration:none;font-weight:650}.login{color:white;text-decoration:none;border:1px solid #34415f;border-radius:11px;padding:11px 16px}.hero,.dark{position:relative;overflow:hidden;background:radial-gradient(circle at 75% 25%,rgba(54,92,223,.23),transparent 30%),linear-gradient(145deg,#040812,#071020);color:white}.hero{min-height:780px;padding:100px 5vw;display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center}.orb{position:absolute;width:620px;height:620px;border-radius:50%;right:-260px;top:40px;background:rgba(96,77,231,.11);filter:blur(2px)}.kicker{font-size:13px;letter-spacing:.18em;font-weight:850;color:#7188ff}.hero h1,.light h2,.dark h2,.store h2,.final h2{font-size:clamp(46px,6.5vw,84px);line-height:.98;letter-spacing:-.055em;margin:20px 0}.hero h1 em,.dark h2 em,.final h2 em{font-style:normal;background:linear-gradient(90deg,#3b69e8,#6a5ce8);-webkit-background-clip:text;color:transparent}.lead,.dark p,.final p{font-size:clamp(18px,2vw,25px);line-height:1.55;color:#aeb9d1;max-width:760px}.actions{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0}.primary,.secondary{display:inline-block;padding:16px 22px;border-radius:11px;text-decoration:none;font-weight:800}.primary{background:linear-gradient(100deg,var(--blue),var(--violet));color:white;box-shadow:0 0 28px rgba(72,84,230,.25)}.secondary{border:1px solid #34415f;color:white}.proof{display:flex;gap:16px;flex-wrap:wrap;color:#8997b6;font-size:14px}.hero-panel{position:relative;border:1px solid #304d9c;border-radius:26px;padding:28px;background:linear-gradient(145deg,rgba(16,29,58,.95),rgba(5,10,22,.96));box-shadow:0 0 55px rgba(54,92,223,.22)}.panel-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #263657;padding-bottom:18px}.panel-head>span{font-size:30px;font-weight:900}.panel-head span span,.core h3 span{color:#5269ed}.panel-head small{color:#7887a7}.mini-flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:30px 0}.mini-flow b{background:#101c36;border:1px solid #2c4583;padding:12px;border-radius:10px}.mini-flow i{color:#7188ff}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-grid div{padding:17px;border-radius:12px;background:#0d1830;border:1px solid #263d72}.mini-grid strong,.mini-grid small{display:block}.mini-grid small{color:#8492af;margin-top:5px}.light,.store{background:var(--paper);padding:105px 5vw}.light h2,.store h2{font-size:clamp(42px,6vw,72px)}.intro{font-size:21px;line-height:1.6;color:#5f697f;max-width:800px}.cards,.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:55px}.cards article,.steps article{background:white;border:1px solid var(--line);border-radius:24px;padding:30px;min-height:220px}.cards span,.steps b{color:var(--blue);font-weight:900}.cards h3,.steps h3{font-size:23px;margin:22px 0 10px}.cards p,.steps p{color:#69738a;line-height:1.55}.visual{padding:105px 5vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-items:center}.visual .copy ul{padding-left:20px;color:#aeb9d1;font-size:18px;line-height:1.8}.diagram{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:14px;align-items:center}.sources,.outputs{display:grid;gap:11px}.sources b,.outputs b{padding:15px;border:1px solid #2f4f9b;border-radius:12px;background:#0d1830;color:#dfe7fa}.sources b:nth-child(1){border-left:4px solid #19bba4}.sources b:nth-child(2){border-left:4px solid #45a7ee}.sources b:nth-child(3){border-left:4px solid #3470dd}.sources b:nth-child(4){border-left:4px solid #7b68ed}.sources b:nth-child(5){border-left:4px solid #f0bb48}.outputs b:nth-child(1){border-right:4px solid #49a8f0}.outputs b:nth-child(2){border-right:4px solid #9a6ce8}.outputs b:nth-child(3){border-right:4px solid #5268ef}.outputs b:nth-child(4){border-right:4px solid #8e6ce8}.outputs b:nth-child(5){border-right:4px solid #3fa5ed}.core{padding:22px;border-radius:22px;border:2px solid #5367ed;box-shadow:0 0 32px rgba(73,86,233,.3);background:#071126}.core h3{font-size:30px;margin:0 0 18px;text-align:center}.core div{padding:13px;border:1px solid #263f7b;border-radius:10px;margin:8px 0}.workflow .steps{grid-template-columns:repeat(4,1fr)}.security{padding:100px 5vw;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}.security-card{display:grid;grid-template-columns:1fr 1fr;gap:12px}.security-card div{background:#0c1730;border:1px solid #304783;border-radius:16px;padding:22px}.security-card strong,.security-card small{display:block}.security-card small{color:#8f9bb7;margin-top:6px}.store{background:#eef2ff}.final{text-align:center;padding:120px 5vw;background:radial-gradient(circle at 50% 0,rgba(76,84,231,.25),transparent 38%),#050914;color:white}.final h2{margin-left:auto;margin-right:auto}.final .primary{margin-top:20px}footer{padding:45px 5vw;background:#03060d;color:#7e8aa5;display:flex;justify-content:space-between;align-items:center}footer .brand{font-size:25px}@media(max-width:820px){header{height:74px;padding:0 24px}header nav{display:none}.login{margin-left:auto;font-size:13px}.hero{grid-template-columns:1fr;padding:72px 25px;min-height:auto}.hero-panel{margin-top:20px}.light,.store,.visual,.security{padding:78px 25px}.cards,.steps,.workflow .steps{grid-template-columns:1fr}.visual,.security{grid-template-columns:1fr}.diagram{grid-template-columns:1fr}.sources,.outputs{grid-template-columns:1fr 1fr}.core{order:-1}.hero h1{font-size:52px}.proof{gap:9px}.final{padding:90px 25px}footer{padding:35px 25px;flex-direction:column;align-items:flex-start;gap:12px}}
/* 2026-10-07 approved visual direction: sharp geometric dark background. */
.hero,.visual,.security,.final{isolation:isolate}
.hero::before,.visual::before,.security::before,.final::before{
 content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
 background:
 linear-gradient(132deg,transparent 0 14%,rgba(30,76,184,.16) 14.15% 15.2%,transparent 15.35% 67%,rgba(36,70,165,.12) 67.15% 69%,transparent 69.2%),
 linear-gradient(48deg,transparent 0 72%,rgba(42,83,192,.11) 72.15% 73.3%,transparent 73.5%);
}
.hero::after,.visual::after,.security::after,.final::after{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(circle at 50% 50%,rgba(35,100,238,.09),transparent 42%);
}
.hero-panel,.core,.security-card div{backdrop-filter:blur(8px)}
.diagram .sources b,.diagram .outputs b{position:relative;overflow:hidden}
.diagram .sources b::after,.diagram .outputs b::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 45%);pointer-events:none}
@media(max-width:820px){
 .hero::before,.visual::before,.security::before,.final::before{background:linear-gradient(138deg,transparent 0 17%,rgba(35,78,181,.15) 17.2% 18.2%,transparent 18.4% 76%,rgba(47,76,174,.1) 76.2% 78%,transparent 78.2%)}
 .diagram{gap:18px}.sources,.outputs{gap:9px}.sources b,.outputs b{font-size:14px;padding:13px}
}

/* Exact logo uit de apiBASE-app. Donkere homepagevariant: alleen de donkere api/symbool-strokes worden wit. */
.brand .brand-logo{display:block;width:210px;height:auto;max-width:100%}.brand .brand-logo path[fill="#182339"],.brand .brand-logo circle[fill="#182339"]{fill:#fff}.brand .brand-logo g[stroke="#182339"]{stroke:#fff}footer .brand .brand-logo{width:175px}@media(max-width:820px){.brand .brand-logo{width:165px}footer .brand .brand-logo{width:145px}}

.hero-infographic{position:relative;margin:0;width:100%;align-self:center}.hero-infographic img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid #284384;box-shadow:0 22px 70px rgba(0,0,0,.4),0 0 45px rgba(44,91,218,.16)}@media(max-width:820px){.hero-infographic{width:calc(100% + 18px);margin-left:-9px;margin-top:18px}.hero-infographic img{border-radius:18px}}

/* Decorative light must never intercept taps on hero links. */
.orb{pointer-events:none}.hero-copy{position:relative;z-index:1}

.hero-infographic video{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:22px;border:1px solid #284384;background:#050914}.hero-infographic [hidden]{display:none!important}#explainer-error{color:#bccbff;line-height:1.5}

/* Compact language selector; text changes preserve video and scroll state. */
.home-language{position:relative;flex:0 0 auto;margin-left:-20px}.home-language>button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #425886;border-radius:50%;background:#101c36;font-size:23px;line-height:1;cursor:pointer}.home-language button:focus-visible{outline:3px solid #89a8ff;outline-offset:3px}#home-language-menu{position:absolute;right:0;top:48px;min-width:180px;padding:7px;border:1px solid #345083;border-radius:14px;background:#0b1730;box-shadow:0 12px 36px #0008;z-index:30}#home-language-menu[hidden]{display:none}#home-language-menu button{display:block;width:100%;padding:11px 13px;border:0;border-radius:8px;background:transparent;color:#eff4ff;text-align:left;white-space:nowrap;font:inherit;cursor:pointer}#home-language-menu button:hover,#home-language-menu button[aria-pressed="true"]{background:#294ca5}.media-language-note{font-size:13px;color:#9aaccf;margin-top:10px;text-align:center}.hero-copy,.copy,.core,.sources,.outputs{min-width:0}.diagram b,.core div{overflow-wrap:anywhere}@media(max-width:820px){header{gap:10px;padding-left:4vw;padding-right:4vw}.home-language{margin-left:0}.login{margin-left:auto;padding:10px;font-size:13px}.brand .brand-logo{width:145px}.home-language>button{width:34px;height:34px;font-size:21px}}@media(max-width:360px){.brand .brand-logo{width:120px}.login{font-size:12px;padding:8px}}

/* apiBASE explanatory middle sections — 2026-10-07 */
.explain{position:relative}
.explain h2{font-size:clamp(36px,4.5vw,64px);line-height:1.07;letter-spacing:-.045em;max-width:960px}
.explain .ex-heading{max-width:1000px;margin:0 auto}
.explain .intro{max-width:800px;font-size:19px;line-height:1.65}
.explain .ex-gradient{color:#425fdf}
.explain .ex-icon{width:32px;height:34px;flex-shrink:0;color:#5478ee}
.explain .ex-eyebrow{font-size:11px!important;font-weight:750;letter-spacing:.12em;text-transform:uppercase;line-height:1.5!important}
.explain .ex-transform{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;max-width:1000px;margin:48px auto 0;gap:20px}
.explain .ex-fragments{display:grid;gap:12px;padding:18px 0}
.explain .ex-fragments>.ex-eyebrow{color:#68758d;margin-bottom:8px}
.explain .ex-fragment{background:#fff;border:1px solid #dce3f3;border-radius:14px;display:grid;grid-template-columns:32px 1fr;align-items:center;gap:8px 14px;padding:18px 20px;box-shadow:0 6px 24px #1d367008}
.explain .ex-fragment:nth-child(3){margin-left:20px}
.explain .ex-fragment:nth-child(4){margin-right:20px}
.explain .ex-fragment>span{font-size:15px;font-weight:650;line-height:1.5}
.explain .ex-bars{display:grid;gap:5px;width:100%;grid-column:2}
.explain .ex-bars i{display:block;height:4px;border-radius:4px;background:#e5eaf4;width:88%}
.explain .ex-bars i:nth-child(2){width:64%}.explain .ex-bars i:nth-child(3){width:76%}
.explain .ex-bridge{display:flex;justify-content:center;color:#4c78f2}
.explain .ex-bridge .ex-icon{width:48px;height:48px}
.explain .ex-knowledge{border:1px solid #4168d8;border-radius:22px;padding:28px;background:radial-gradient(ellipse at 100% 0,#253770,transparent 70%),#08132b;color:#eef4ff;box-shadow:0 18px 50px #263e8c25}
.explain .ex-panel-title{display:flex;align-items:center;gap:12px}.explain .ex-panel-title strong{font-size:28px;letter-spacing:-1px}
.explain .ex-panel-title .ex-icon{color:#5fbfff}
.explain .ex-dot{width:7px;height:7px;border-radius:50%;background:#62d5e6;box-shadow:0 0 14px #50c6ff;margin-left:auto}
.explain .ex-knowledge .ex-eyebrow{color:#a1b5e2;margin:24px 0 16px}
.explain .ex-record{border:1px solid #2c4273;border-radius:10px;padding:13px 15px;margin:9px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#0d1c38;font-size:15px}
.explain .ex-record b{font:600 11px ui-monospace,monospace;color:#6b96ef}
.explain .ex-footnote{display:flex;gap:10px;align-items:center;margin-top:21px;color:#a5bbdf;font-size:12px;line-height:1.6}
.explain .ex-footnote .ex-icon{width:19px;height:20px;color:#5eafff}
.explain.ex-context{grid-template-columns:1fr 1fr;gap:6vw}
.explain .copy>p,.explain.security>div>p{font-size:19px;line-height:1.7}
.explain .copy>.kicker,.explain.security>div>.kicker{font-size:12px}
.explain .ex-caption{display:flex;gap:11px;align-items:center;margin-top:28px;font-size:14px;color:#b7c8ed}
.explain .ex-caption .ex-icon{width:22px;height:24px;color:#56bafb}
.explain .ex-circuit{position:relative;padding:32px;border:1px solid #28467e;border-radius:24px;background:radial-gradient(ellipse at center,#102958aa,transparent 70%),linear-gradient(#4979be0b 1px,transparent 1px),linear-gradient(90deg,#4979be0b 1px,transparent 1px),#071123;background-size:auto,26px 26px,26px 26px,auto;box-shadow:0 20px 70px #0003}
.explain .ex-circuit-top{text-align:center}.explain .ex-circuit-top>.ex-eyebrow{color:#95add8}
.explain .ex-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.explain .ex-chips span{border:1px solid #334a7b;border-radius:8px;padding:10px 13px;background:#0c1b35;font-size:13px;color:#d0ddf7}
.explain .ex-wire{position:relative;height:43px;width:2px;margin:auto;background:linear-gradient(#365ee3,#60d6ff);box-shadow:0 0 12px #51a7ef88}
.explain .ex-wire i{position:absolute;left:-3px;top:18px;width:8px;height:8px;background:#b7eeff;border-radius:50%;box-shadow:0 0 15px #51bcff}
.explain .ex-engine{display:flex;flex-direction:column;align-items:center;text-align:center;padding:25px 15px;border:1px solid #5e85ff;border-radius:16px;background:linear-gradient(140deg,#1d3263,#0a1832);box-shadow:0 0 0 4px #4167d219,0 0 30px #2875dd24;gap:10px}
.explain .ex-engine .ex-icon{color:#6ac8ff}.explain .ex-engine strong{font-size:21px;line-height:1.3}.explain .ex-engine>span{font-size:12px;color:#a8bfea;line-height:1.6}
.explain .ex-chat-output{display:flex;align-items:center;gap:15px;padding:20px;background:#0c1b32;border:1px solid #315386;border-radius:14px}
.explain .ex-chat-output strong{font-size:16px}.explain .ex-chat-output p{margin:5px 0 0;font-size:13px;color:#9fb6dc;line-height:1.4}
.explain .ex-ready{margin-left:auto;color:#61d9e1;background:#0e364b;border:1px solid #286078;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;flex-shrink:0}
.explain .ex-diagram-note{font-size:12px;line-height:1.6;color:#91a6cb;margin:22px 0 0;text-align:center}
.explain .ex-workflow,.explain .ex-roadmap{max-width:1200px;margin:48px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.explain .ex-workflow article{padding:26px;border:1px solid #dde4f1;border-radius:20px;background:#fff;position:relative}
.explain .ex-step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.explain .ex-step-top>span{font:600 12px ui-monospace,monospace;color:#536bbc;border:1px solid #d5def4;border-radius:7px;padding:7px 9px}
.explain .ex-step-top .ex-icon{width:27px;height:29px}
.explain .ex-mini-ui{height:158px;padding:20px;border:1px solid #dce4f5;border-radius:13px;background:linear-gradient(145deg,#f8faff,#edf2ff);display:flex;flex-direction:column;justify-content:center;gap:14px}
.explain .ex-bubble{background:white;border:1px solid #dbe3f4;border-radius:9px 9px 9px 0;padding:10px;font-size:12px;line-height:1.5;color:#475c83}
.explain .ex-mini-label{font-size:11px;color:#526bb0}
.explain .ex-review>div{display:flex;align-items:center;gap:10px;font-size:13px;color:#415b89}
.explain .ex-review b{font-size:11px;background:#3e60d7;color:white;width:19px;height:19px;border-radius:5px;display:grid;place-items:center}
.explain .ex-package{align-items:center;text-align:center;color:#4c6698;font-size:12px}
.explain .ex-package-line{width:65%;height:5px;background:linear-gradient(90deg,#4678f2,#82c4fc);border-radius:4px}
.explain h3{font-size:22px;line-height:1.25;letter-spacing:-.025em;margin:25px 0 12px}
.explain .ex-workflow article>p,.explain .ex-roadmap article>p{font-size:15px;line-height:1.7;color:#64718a;margin:0}
.explain .ex-control{border:1px solid #30497c;border-radius:23px;background:linear-gradient(145deg,#10213e,#070f22);padding:28px;box-shadow:0 20px 60px #0003}
.explain .ex-control-head{display:flex;align-items:center;gap:13px;padding-bottom:24px;border-bottom:1px solid #293d62;margin-bottom:23px}
.explain .ex-control-head .ex-icon{color:#7ba4ff}
.explain .ex-control-head strong{font-size:18px;line-height:1.4}
.explain .ex-gate{display:flex;align-items:center;gap:14px;padding:20px 15px;border:1px solid #2a3b5c;border-radius:12px;background:#0c172b;margin:14px 0}
.explain .ex-gate-open{border-color:#316789;background:linear-gradient(100deg,#102c45,#0c192e)}
.explain .ex-gate-symbol{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;border:1px solid #4a6087;color:#809bc3;flex-shrink:0}
.explain .ex-gate-open .ex-gate-symbol{border-color:#4196b5;color:#84e0f5;background:#164460}
.explain .ex-gate strong{display:block;font-size:15px;line-height:1.5}
.explain .ex-gate small{display:block;color:#9caecc;font-size:12px;margin-top:5px;line-height:1.6}
.explain .ex-lineage{border-top:1px solid #283a5a;padding-top:22px;margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;line-height:1.5;color:#91a9cf}
.explain .ex-lineage i{color:#6095ea;font-style:normal}
.explain .ex-planned{display:inline-block;vertical-align:middle;letter-spacing:.08em;font-size:10px;padding:5px 9px;border:1px solid #b9c6ec;border-radius:6px;margin-left:8px;color:#596eac}
.explain .ex-roadmap article{padding:20px 20px 28px;border:1px solid #d7dff1;border-radius:20px;background:#fff}
.explain .ex-road-art{height:165px;border:1px solid #233f80;border-radius:13px;background:radial-gradient(ellipse at center,#204a9280,transparent 65%),linear-gradient(130deg,#060d1e,#0b1935);position:relative;display:grid;place-items:center;overflow:hidden}
.explain .ex-road-art::before,.explain .ex-road-art::after{content:"";position:absolute;width:120px;height:120px;border:1px solid #466bc040;border-radius:50%}
.explain .ex-road-art::after{width:190px;height:190px;border-style:dashed}
.explain .ex-road-art>.ex-icon{box-sizing:content-box;padding:16px;width:36px;height:38px;border:1px solid #567eec;border-radius:15px;background:#0e2347;color:#7acaff;box-shadow:0 0 22px #346de84d;z-index:1}
.explain .ex-satellite{position:absolute;width:8px;height:8px;background:#87d8ff;border-radius:50%;box-shadow:0 0 14px #4787ff}
.explain .ex-satellite.a{left:calc(50% - 65px);top:50%}.explain .ex-satellite.b{left:calc(50% + 55px);top:36%}.explain .ex-satellite.c{left:calc(50% + 25px);top:81%;background:#ab97ff}
.explain .ex-roadmap h3{margin:24px 5px 12px}.explain .ex-roadmap article>p{margin:0 5px}
.explain :is(.ex-knowledge,.ex-fragments,.ex-circuit,.ex-control,.copy){min-width:0}
@media(min-width:1440px){.explain.ex-context,.explain.security{padding-left:max(5vw,calc((100vw - 1280px)/2));padding-right:max(5vw,calc((100vw - 1280px)/2))}}
@media(max-width:1000px){.explain .ex-workflow{gap:14px}.explain .ex-workflow article{padding:20px}.explain .ex-transform{grid-template-columns:1fr 40px 1fr;gap:12px}.explain .ex-knowledge{padding:22px}}
@media(max-width:820px){.explain.ex-context{grid-template-columns:1fr;gap:36px}.explain h2{font-size:clamp(34px,8vw,52px)}.explain .intro,.explain .copy>p,.explain.security>div>p{font-size:17px}.explain .ex-transform{grid-template-columns:1fr;gap:6px;margin-top:28px}.explain .ex-bridge{height:46px}.explain .ex-bridge .ex-icon{transform:rotate(90deg);width:35px;height:35px}.explain .ex-fragments{gap:9px}.explain .ex-fragment{padding:15px 17px}.explain .ex-knowledge{padding:24px}.explain .ex-workflow,.explain .ex-roadmap{grid-template-columns:1fr;gap:20px;margin-top:32px}.explain .ex-workflow article{padding:24px}.explain .ex-mini-ui{height:145px}.explain .ex-circuit,.explain .ex-control{padding:23px}.explain.security{gap:35px}.explain .ex-road-art{height:170px}.explain .ex-heading .kicker{font-size:11px}.explain .ex-lineage{flex-wrap:wrap}.explain .ex-workflow article>p,.explain .ex-roadmap article>p{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Matching accent edges and numbers in the project-memory panel. */
.explain .ex-knowledge .ex-record{--record-accent:#19bba4;border-left:4px solid var(--record-accent)}
.explain .ex-knowledge .ex-record+.ex-record{--record-accent:#45a7ee}
.explain .ex-knowledge .ex-record+.ex-record+.ex-record{--record-accent:#f0bb48}
.explain .ex-knowledge .ex-record b{color:var(--record-accent)}

/* Quiet palette continuity in the next-chat context diagram. */
.ex-context .ex-chips span:nth-child(1){border-color:#296c69;border-bottom:2px solid #19bba4;background:linear-gradient(145deg,#12312f,#0c1b35);color:#91d8cd}
.ex-context .ex-chips span:nth-child(2){border-color:#315e88;border-bottom:2px solid #45a7ee;background:linear-gradient(145deg,#152c48,#0c1b35);color:#a1d0f4}
.ex-context .ex-chips span:nth-child(3){border-color:#766338;border-bottom:2px solid #f0bb48;background:linear-gradient(145deg,#302b24,#0c1b35);color:#e4ce98}
.ex-context .ex-engine{border-color:#8174de;background:linear-gradient(140deg,#292d59,#101d38);box-shadow:0 0 0 4px #8174de12,0 0 30px #7360cf20}
.ex-context .ex-engine .ex-icon{color:#b3a9f6}
.ex-context .ex-chat-output{border-color:#2f5966;border-left:4px solid #29b7ae;background:linear-gradient(110deg,#102832,#0c1b32)}
.ex-context .ex-chat-output>.ex-icon{color:#65cdc5}

/* Richer apiBASE styling for the three explanatory workflow cards. */
.explain .ex-workflow article{--step-accent:#45a7ee;--step-tint:#edf6ff;border-top:3px solid var(--step-accent);background:linear-gradient(150deg,var(--step-tint),#fff 32%);box-shadow:0 12px 32px #17346a09}
.explain .ex-workflow article:nth-child(2){--step-accent:#19bba4;--step-tint:#ecf9f6}
.explain .ex-workflow article:nth-child(3){--step-accent:#8b78e9;--step-tint:#f3efff}
.explain .ex-workflow .ex-step-top>span{font-weight:750;color:var(--step-accent);background:var(--step-tint);border-color:var(--step-accent);border-radius:9px;padding:8px 10px}
.explain .ex-workflow .ex-step-top>.ex-icon{color:var(--step-accent)}
.explain .ex-workflow .ex-mini-ui{position:relative;isolation:isolate;overflow:hidden;height:190px;border:1px solid #304c81;border-radius:15px;background:radial-gradient(ellipse at 100% 0,#263864aa,transparent 70%),linear-gradient(#4979be0b 1px,transparent 1px),linear-gradient(90deg,#4979be0b 1px,transparent 1px),#08142b;background-size:auto,22px 22px,22px 22px,auto;box-shadow:inset 0 1px 0 #ffffff08,0 8px 20px #14347714}
.explain .ex-workflow .ex-mini-ui::before{content:"";position:absolute;z-index:-1;right:-30px;top:-35px;width:140px;height:140px;border:1px solid #5e84c52b;border-radius:28px;transform:rotate(35deg);pointer-events:none}
.explain .ex-workflow .ex-bubble{background:linear-gradient(130deg,#182d50,#0d1d38);border-color:#37598b;border-left:3px solid var(--step-accent);color:#d1e1f9;padding:12px}
.explain .ex-workflow .ex-bars i{background:#2c4164}
.explain .ex-workflow .ex-bars i:first-child{background:linear-gradient(90deg,#487bd4,#2c4164)}
.explain .ex-workflow .ex-mini-label{color:#85c2f1;font-size:12px}
.explain .ex-workflow .ex-review{gap:9px}
.explain .ex-workflow .ex-review>div{position:relative;padding:8px 11px;background:#10233b;border:1px solid #284b57;border-radius:8px;color:#c4dfdc;font-size:13px}
.explain .ex-workflow .ex-review>div::after{content:"";margin-left:auto;width:25px;height:3px;background:#295751;border-radius:3px}
.explain .ex-workflow .ex-review b{background:#154d49;border:1px solid #2c9b8b;color:#72dec9;box-shadow:0 0 9px #19bba418}
.explain .ex-workflow .ex-package{color:#c6c5ea;gap:17px}
.explain .ex-workflow .ex-package>.ex-icon{box-sizing:content-box;padding:13px;width:32px;height:34px;color:#b4a6fa;border:1px solid #7163b3;border-radius:14px;background:#211f47;box-shadow:0 0 25px #8b78e926}
.explain .ex-workflow .ex-package-line{height:4px;background:linear-gradient(90deg,#45a7ee,#8b78e9);box-shadow:0 0 12px #8b78e944}
@media(max-width:820px){.explain .ex-workflow .ex-mini-ui{height:185px}}

/* Matching source-card accents at the start of the project-memory story. */
.explain .ex-fragments .ex-fragment{--fragment-accent:#19bba4;--fragment-tint:#eefaf7;border-left:4px solid var(--fragment-accent);background:linear-gradient(115deg,var(--fragment-tint),#fff 65%);box-shadow:0 8px 25px #17346a0a}
.explain .ex-fragments .ex-fragment+.ex-fragment{--fragment-accent:#45a7ee;--fragment-tint:#edf6ff}
.explain .ex-fragments .ex-fragment+.ex-fragment+.ex-fragment{--fragment-accent:#d9a832;--fragment-tint:#fff9eb}
.explain .ex-fragment>.ex-icon{color:var(--fragment-accent)}
.explain .ex-fragment .ex-bars i:first-child{background:linear-gradient(90deg,var(--fragment-accent),#e5eaf4 80%);opacity:.45}
.explain .ex-fragment .ex-bars i:nth-child(2){opacity:.85}

/* Individual accent colours for planned extension cards. */
.explain .ex-roadmap article{--road-accent:#45a7ee;--road-tint:#eff7ff;--road-glow:#45a7ee32;--road-fill:#112945;border-top:3px solid var(--road-accent);background:linear-gradient(155deg,var(--road-tint),#fff 45%);box-shadow:0 10px 28px #17346a09}
.explain .ex-roadmap article:nth-child(2){--road-accent:#9a85ee;--road-tint:#f5f1ff;--road-glow:#9a85ee32;--road-fill:#282044}
.explain .ex-roadmap article:nth-child(3){--road-accent:#25bba7;--road-tint:#eefaf7;--road-glow:#25bba732;--road-fill:#103c3c}
.explain .ex-roadmap .ex-road-art{border-color:var(--road-accent);background:radial-gradient(ellipse at center,var(--road-glow),transparent 68%),linear-gradient(130deg,#060d1e,#0b1935)}
.explain .ex-roadmap .ex-road-art>.ex-icon{color:var(--road-accent);border-color:var(--road-accent);background:var(--road-fill);box-shadow:0 0 25px var(--road-glow)}
.explain .ex-roadmap .ex-satellite{background:var(--road-accent);box-shadow:0 0 14px var(--road-glow)}
.explain .ex-roadmap .ex-satellite.c{background:var(--road-accent)}
.explain .ex-roadmap .ex-road-art::before{border-color:var(--road-glow)}
.explain .ex-roadmap .ex-road-art::after{border-color:var(--road-glow)}