:root{--lid-sky:285;--lid-bouwer:30;--lid-onderzoeker:200;--lid-ontwerper:330;--lid-offerte:60;--lid-klantenservice:160;--lid-motion:310;--lid-marketeer:20;--lid-boekhouder:120;--lid-beheerder:240;--lid-werker:90;--lid-websitebouwer:180;--glas-blur:28px;--glas-vlak:oklch(.22 .014 var(--hue) / .55);--glas-vlak-2:oklch(.26 .016 var(--hue) / .5);--glas-rand:oklch(100% 0 0/.14);--glas-glans:linear-gradient(135deg, oklch(100% 0 0/.14) 0%, oklch(100% 0 0/.03) 32%, oklch(100% 0 0/0) 60%)}html,body{height:100%}body{background:var(--bg);min-height:100dvh;color:var(--fg);font-family:var(--font-sans);font-size:var(--fs-14);-webkit-font-smoothing:antialiased;margin:0;line-height:1.45;overflow:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}ul{margin:0;padding:0;list-style:none}h1,h2,h3,p{margin:0}svg{display:block}.kamer{z-index:0;background:var(--bg);position:fixed;inset:0;overflow:hidden}.kamer img{object-fit:cover;filter:blur(22px)saturate(.9)brightness(.55);width:112%;height:112%;position:absolute;inset:-6%;transform:scale(1.04)}.kamer:before{content:"";background:radial-gradient(60% 50% at 20% 15%, var(--grad-a), transparent 70%), radial-gradient(50% 45% at 85% 80%, var(--grad-b), transparent 70%), radial-gradient(40% 40% at 60% 40%, var(--grad-c), transparent 70%);opacity:calc(.6 + .4 * var(--leven));mix-blend-mode:screen;animation:18s ease-in-out infinite alternate kamer-adem;position:absolute;inset:0}.kamer:after{content:"";background:linear-gradient(oklch(0% 0 0/.25),oklch(0% 0 0/.55));position:absolute;inset:0}@keyframes kamer-adem{0%{transform:translate(0,0)scale(1)}to{transform:translate(-2%,1.5%)scale(1.06)}}.glas{background:var(--glas-vlak);-webkit-backdrop-filter:blur(var(--glas-blur)) saturate(1.5);backdrop-filter:blur(var(--glas-blur)) saturate(1.5);border:1px solid var(--glas-rand);border-radius:var(--r-xl);position:relative;box-shadow:inset 0 1px oklch(100% 0 0/.1),0 40px 80px -30px oklch(0% 0 0/.8),0 0 0 .5px oklch(0% 0 0/.4)}.glas:before{content:"";border-radius:inherit;pointer-events:none;background:var(--glas-glans);opacity:calc(.6 + .6 * var(--leven));position:absolute;inset:0}.glas:after{content:"";pointer-events:none;border-radius:inherit;opacity:var(--leven);mix-blend-mode:screen;background:linear-gradient(115deg,#0000 40%,oklch(100% 0 0/.05) 50%,#0000 60%);animation:14s linear infinite glans;position:absolute;inset:-40% -60%}@keyframes glans{0%{transform:translate(-30%)}to{transform:translate(30%)}}.glas>*{z-index:1;position:relative}.lid{--h:285;--m:36px;width:var(--m);height:var(--m);flex:0 0 var(--m);color:oklch(.98 .01 var(--h));font-weight:600;font-size:calc(var(--m) * .38);letter-spacing:-.02em;background:linear-gradient(145deg, oklch(.72 .16 var(--h)), oklch(.52 .17 var(--h)));box-shadow:0 1px 0 oklch(100% 0 0/.25) inset, 0 6px 14px -6px oklch(.6 .2 var(--h) / .7);border-radius:50%;place-items:center;display:grid;position:relative}.lid[data-vorm=blad]{border-radius:50% 50% 50% 18%}.lid[data-vorm=ruit]{border-radius:32%;transform:rotate(0)}.lid[data-vorm=zacht]{border-radius:38%}.lid[data-lid=sky]{--h:var(--lid-sky);background:conic-gradient(from 200deg, oklch(.78 .16 var(--hue)), oklch(.82 .13 var(--hue-2)), oklch(.74 .15 var(--hue-3)), oklch(.78 .16 var(--hue)))}.lid[data-lid=bouwer]{--h:var(--lid-bouwer)}.lid[data-lid=onderzoeker]{--h:var(--lid-onderzoeker)}.lid[data-lid=ontwerper]{--h:var(--lid-ontwerper)}.lid[data-lid=offerte]{--h:var(--lid-offerte)}.lid[data-lid=klantenservice]{--h:var(--lid-klantenservice)}.lid[data-lid=motion]{--h:var(--lid-motion)}.lid[data-lid=marketeer]{--h:var(--lid-marketeer)}.lid[data-lid=boekhouder]{--h:var(--lid-boekhouder)}.lid[data-lid=beheerder]{--h:var(--lid-beheerder)}.lid[data-lid=werker]{--h:var(--lid-werker)}.lid[data-lid=websitebouwer]{--h:var(--lid-websitebouwer)}.lid[data-lid=daan]{background:oklch(.32 .02 var(--hue));color:var(--fg);font-weight:500;box-shadow:inset 0 0 0 1px oklch(100% 0 0/.14)}.lid i{background:oklch(.14 .02 var(--h));border-radius:50%;width:14%;height:14%;animation:5.5s infinite knipper;position:absolute;top:42%}.lid i:first-child{left:30%}.lid i:last-child{animation-delay:.1s;right:30%}.lid[data-lid=daan] i{display:none}@keyframes knipper{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}.punt{background:var(--fg-3);width:11px;height:11px;box-shadow:0 0 0 2.5px var(--bg-2);border-radius:50%;position:absolute;bottom:-2px;right:-2px}.punt[data-staat=werkt]{background:var(--ok);animation:2.2s ease-out infinite puls}.punt[data-staat=wacht]{background:var(--warn);border-radius:2px}.punt[data-staat=fout]{background:var(--err);clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}.punt[data-staat=rust]{background:var(--fg-3);opacity:.7}.punt[data-staat=denkt]{background:var(--info);animation:1.4s ease-out infinite puls}@keyframes puls{0%{box-shadow:0 0 0 2.5px var(--bg-2), 0 0 0 2.5px oklch(76% .15 155/.6)}to{box-shadow:0 0 0 2.5px var(--bg-2), 0 0 0 10px oklch(76% .15 155/0)}}.punt-los{box-shadow:none;flex:none;width:8px;height:8px;display:inline-block;position:static}.punt-los[data-staat=werkt]{animation:2.2s ease-out infinite puls-los}@keyframes puls-los{0%{box-shadow:0 0 oklch(76% .15 155/.6)}to{box-shadow:0 0 0 8px oklch(76% .15 155/0)}}.run-pil{border-radius:var(--r-pill);background:var(--ok-soft);height:28px;color:var(--ok);font-size:var(--fs-12);font-variant-numeric:tabular-nums;white-space:nowrap;border:1px solid oklch(76% .15 155/.3);align-items:center;gap:8px;padding:0 12px 0 10px;font-weight:500;display:inline-flex}.run-pil b{font-weight:600}.run-pil span{color:oklch(76% .15 155/.8)}.bubbel{border-radius:var(--r-lg);max-width:min(78%,520px);font-size:var(--fs-14);animation:schuif-in var(--dur-4) var(--ease-out) both;padding:9px 13px;line-height:1.4;position:relative}.bubbel.ik{background:linear-gradient(160deg, var(--accent), var(--accent-2));color:var(--accent-ink);border-bottom-right-radius:var(--r-xs);align-self:flex-end}.bubbel.agent{background:var(--glas-vlak-2);border:1px solid var(--glass-line);border-bottom-left-radius:var(--r-xs);align-self:flex-start}.bubbel time{font-size:var(--fs-11);opacity:.6;font-variant-numeric:tabular-nums;margin-top:4px;display:block}.bubbel.ik time{text-align:right}@keyframes schuif-in{0%{opacity:0;transform:translateY(10px)scale(.98)}to{opacity:1;transform:none}}.stap{border-radius:var(--r-pill);border:1px dashed var(--line-3);color:var(--fg-2);font-family:var(--font-mono);font-size:var(--fs-12);animation:schuif-in var(--dur-4) var(--ease-out) both;align-self:flex-start;align-items:center;gap:8px;padding:6px 12px;display:flex}.stap.bezig{border-style:solid;border-color:var(--accent-line);color:var(--fg)}.stap.bezig:before{content:"";border:2px solid var(--accent);border-right-color:#0000;border-radius:50%;width:8px;height:8px;animation:1s linear infinite draai}.stap.klaar:before{content:"✓";color:var(--ok);font-weight:700}@keyframes draai{to{transform:rotate(360deg)}}.artefact{border-radius:var(--r-lg);background:var(--glas-vlak-2);border:1px solid var(--glass-line);width:min(100%,340px);transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2);animation:schuif-in var(--dur-4) var(--ease-out) both;grid-template-columns:56px 1fr;align-self:flex-start;align-items:center;gap:12px;padding:8px;text-decoration:none;display:grid}.artefact:hover{border-color:var(--line-3);transform:translateY(-2px)}.artefact .beeld{border-radius:var(--r-sm);background:linear-gradient(135deg, var(--grad-a), var(--grad-b)), var(--bg-3);height:42px;position:relative;overflow:hidden}.artefact .beeld:after{content:"";background:oklch(100% 0 0/.4);border-radius:2px;height:4px;position:absolute;inset:8px 8px auto;box-shadow:0 8px oklch(100% 0 0/.25),0 16px oklch(100% 0 0/.15)}.artefact b{font-weight:500;font-size:var(--fs-13);display:block}.artefact small{color:var(--fg-3);font-size:var(--fs-12)}.rij{min-height:var(--row-h);border-radius:var(--r-md);transition:background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);text-align:left;align-items:center;gap:12px;width:100%;padding:8px 10px;display:flex;position:relative}.rij:hover{background:oklch(100% 0 0/.06)}.rij[aria-current=true]{background:var(--sel)}.rij[aria-current=true]:before{content:"";background:var(--accent);border-radius:2px;width:2px;height:50%;position:absolute;top:25%;left:0}.rij .tekst{flex:1;min-width:0}.rij .tekst b{font-weight:500;font-size:var(--fs-14);white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.rij .tekst span{color:var(--fg-3);font-size:var(--fs-12);white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.rij time{color:var(--fg-3);font-size:var(--fs-11);font-variant-numeric:tabular-nums;flex:none}.badge{border-radius:var(--r-pill);background:var(--accent);min-width:20px;height:20px;color:var(--accent-ink);font-size:var(--fs-11);place-items:center;padding:0 6px;font-weight:600;display:inline-grid}.label{border-radius:var(--r-pill);height:24px;font-size:var(--fs-12);white-space:nowrap;align-items:center;gap:6px;padding:0 10px;font-weight:500;display:inline-flex}.label:before{content:"";background:currentColor;border-radius:50%;width:7px;height:7px}.label[data-status=bezig]{background:var(--ok-soft);color:var(--ok)}.label[data-status=bezig]:before{animation:2.2s ease-out infinite puls-los}.label[data-status=mislukt]{background:var(--err-soft);color:var(--err)}.label[data-status=mislukt]:before{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}.label[data-status=akkoord]{background:var(--warn-soft);color:var(--warn)}.label[data-status=akkoord]:before{border-radius:1px}.label[data-status=klaar]{color:var(--fg-2);background:oklch(100% 0 0/.07)}.label[data-status=klaar]:before{background:0 0;box-shadow:inset 0 0 0 1.5px}.knop{border-radius:var(--r-pill);height:36px;font-weight:500;font-size:var(--fs-13);transition:transform var(--dur-2) var(--ease-spring), background var(--dur-2);justify-content:center;align-items:center;gap:8px;padding:0 16px;display:inline-flex}.knop:active{transform:scale(.97)}.knop.primair{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 0 oklch(100% 0 0/.2) inset, 0 8px 20px -8px var(--accent)}.knop.primair:hover{background:var(--accent-2)}.knop.glas-knop{border:1px solid var(--glass-line);background:oklch(100% 0 0/.08)}.knop.glas-knop:hover{background:oklch(100% 0 0/.13)}.ikoon{width:36px;height:36px;color:var(--fg-2);transition:background var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-spring);border-radius:50%;place-items:center;display:grid}.ikoon:hover{color:var(--fg);background:oklch(100% 0 0/.1)}.ikoon:active{transform:scale(.92)}.ikoon svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.zoek{border-radius:var(--r-pill);border:1px solid var(--glass-line);height:36px;color:var(--fg-3);background:oklch(0% 0 0/.22);align-items:center;gap:8px;padding:0 12px;display:flex}.zoek svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;width:16px;height:16px}.zoek input{min-width:0;color:var(--fg);background:0 0;border:0;outline:0;flex:1}.zoek input::placeholder{color:var(--fg-3)}.zoek:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}.composer{border-radius:var(--r-pill);border:1px solid var(--glass-line);background:oklch(0% 0 0/.25);align-items:center;gap:6px;padding:6px 6px 6px 8px;display:flex}.composer input{min-width:0;color:var(--fg);background:0 0;border:0;outline:0;flex:1;padding:0 6px}.composer input::placeholder{color:var(--fg-3)}.composer .verstuur{background:var(--accent);width:34px;height:34px;color:var(--accent-ink);transition:transform var(--dur-2) var(--ease-spring), background var(--dur-2);border-radius:50%;place-items:center;display:grid}.composer .verstuur:hover{background:var(--accent-2);transform:scale(1.05)}.composer .verstuur svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.composer .ikoon{width:34px;height:34px}.kop-klein{font-size:var(--fs-11);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);font-weight:600}@media (prefers-reduced-motion:reduce){.kamer:before,.glas:after,.lid i,.punt,.label:before,.bubbel,.stap,.artefact,.stap.bezig:before{animation:none!important}.bubbel,.stap,.artefact{opacity:1;transform:none}}