[data-systeem-visual] .sy-kant{position:absolute;top:66px;width:170px;display:grid;justify-items:center;gap:14px}[data-systeem-visual] .sy-bs{left:50px}[data-systeem-visual] .sy-jij{left:340px}[data-systeem-visual] .sy-label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--color-bone) 48%,transparent)}[data-systeem-visual] .sy-tegel{position:relative;width:130px;height:130px;border-radius:23%;display:grid;place-items:center;background:linear-gradient(170deg,#fff,#efebe2);box-shadow:0 30px 50px -24px #000000f2,0 0 0 1px #ffffff14,inset 0 1px #fff,inset 0 -10px 20px -12px #0000001f}[data-systeem-visual] .sy-tegel:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 42%)}[data-systeem-visual] .sy-tegel.is-bs{background:linear-gradient(165deg,#232631,#14161c 55%,#0e1015);box-shadow:0 30px 50px -24px #000000f2,0 0 0 1px #ffffff1a,inset 0 1px #ffffff29}[data-systeem-visual] .sy-tegel.is-bs:after{background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 45%)}[data-systeem-visual] .sy-tegel.is-bs svg{position:relative;z-index:1;width:100%;height:100%}[data-systeem-visual] .sy-gloed{position:absolute;left:50%;top:95px;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--color-amber) 30%,transparent),transparent 72%);animation:sy-adem 3.6s ease-in-out infinite}@keyframes sy-adem{0%,to{opacity:.65;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}[data-systeem-visual] .sy-tegel img{width:70px;height:70px;object-fit:contain}[data-systeem-visual] .sy-wissel{transition:transform .45s cubic-bezier(.23,1,.32,1),opacity .3s ease}[data-systeem-visual] .sy-wissel.uit{opacity:0;transform:translateY(18px) scale(.94);transition-duration:.3s}[data-systeem-visual] .sy-wissel.in{opacity:0;transform:translateY(-18px) scale(.94);transition:none}[data-systeem-visual] .sy-naam{font-family:var(--font-display);font-weight:500;font-size:19px;letter-spacing:-.01em;white-space:nowrap;transition:opacity .3s ease}[data-systeem-visual] .sy-naam.uit{opacity:0}[data-systeem-visual] .sy-brug{position:absolute;left:200px;width:160px;top:142px;height:40px}[data-systeem-visual] .sy-stip,[data-systeem-visual] .sy-vol{position:absolute;left:6px;right:6px;top:19px;height:2px;border-radius:2px}[data-systeem-visual] .sy-stip{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--color-bone) 22%,transparent) 0 5px,transparent 5px 11px)}[data-systeem-visual] .sy-vol{background:linear-gradient(90deg,var(--color-amber),#ffd08a 50%,var(--color-amber));box-shadow:0 0 10px color-mix(in srgb,var(--color-amber) 70%,transparent);transform:scaleX(0);transform-origin:left center;transition:transform .2s ease}[data-systeem-visual] .sy-brug.is-aan .sy-vol{transform:none;transition:transform .55s cubic-bezier(.77,0,.175,1)}[data-systeem-visual] .sy-eind{position:absolute;top:15px;width:10px;height:10px;border-radius:50%;background:#14161c;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-bone) 30%,transparent);transition:box-shadow .3s ease,background .3s ease}[data-systeem-visual] .sy-eind.is-l{left:-5px}[data-systeem-visual] .sy-eind.is-r{right:-5px}[data-systeem-visual] .sy-brug.is-aan .sy-eind{background:var(--color-amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-amber) 25%,transparent),0 0 12px var(--color-amber)}[data-systeem-visual] .sy-brug.is-aan .sy-eind.is-r{transition-delay:.5s}[data-systeem-visual] .sy-puls{position:absolute;top:16px;left:0;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px var(--color-amber);opacity:0}[data-systeem-visual] .sy-brug.is-aan .sy-puls{animation:sy-puls 1.8s cubic-bezier(.77,0,.175,1) .7s infinite}@keyframes sy-puls{0%{transform:translate(0);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translate(152px);opacity:0}}[data-systeem-visual] .sy-chip{position:absolute;left:50%;top:44px;translate:-50% 0;display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 5px;border-radius:999px;white-space:nowrap;background:#1c1f26b8;color:color-mix(in srgb,var(--color-sage) 55%,white);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-sage) 35%,transparent),0 10px 24px -12px #000c;font-size:13px;font-weight:600;opacity:0;transform:translateY(-4px) scale(.9);transition:opacity .2s ease,transform .2s ease}[data-systeem-visual] .sy-brug.is-aan .sy-chip{opacity:1;transform:none;transition:opacity .3s cubic-bezier(.23,1,.32,1) .45s,transform .45s cubic-bezier(.34,1.4,.64,1) .45s}[data-systeem-visual] .sy-chip svg{width:15px;height:15px;padding:2px;border-radius:50%;background:var(--color-sage);fill:none;stroke:#0d0f14;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}[data-systeem-visual] .sy-jij{transition:opacity .3s ease,transform .45s cubic-bezier(.23,1,.32,1)}[data-systeem-visual] .sy-jij.weg{opacity:0;transform:translate(30px)}[data-systeem-visual] .sy-brug.kort{width:150px}[data-systeem-visual] .sy-wa{position:absolute;left:350px;top:66px;width:186px;display:grid;justify-items:center;gap:14px;opacity:0;transform:translate(60px);pointer-events:none;transition:opacity .35s cubic-bezier(.23,1,.32,1),transform .6s cubic-bezier(.23,1,.32,1)}[data-systeem-visual] .sy-wa.on{opacity:1;transform:none}[data-systeem-visual] .sy-wa .sy-label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}[data-systeem-visual] .sy-wa .sy-label img{width:14px;height:14px}[data-systeem-visual] .sy-scherm{width:186px;height:206px;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;background:#efeae2;box-shadow:0 0 0 5px #15171d,0 0 0 6px #ffffff1a,0 30px 50px -22px #000000f2}[data-systeem-visual] .sy-wakop{display:flex;align-items:center;gap:8px;padding:10px 11px;background:#f7f6f3;border-bottom:1px solid rgba(0,0,0,.07)}[data-systeem-visual] .sy-waav{flex:none;width:28px;height:28px;border-radius:50%;overflow:hidden}[data-systeem-visual] .sy-waav svg{display:block;width:100%;height:100%}[data-systeem-visual] .sy-wanaam{display:grid;line-height:1.2}[data-systeem-visual] .sy-wanaam b{font-size:12.5px;font-weight:600;color:#111b21}[data-systeem-visual] .sy-wanaam small{font-size:10px;color:#667781}[data-systeem-visual] .sy-chat{flex:1;position:relative;padding:10px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}[data-systeem-visual] .sy-dag{align-self:center;padding:2px 8px;border-radius:6px;background:#fff;font-size:9.5px;color:#54656f;box-shadow:0 1px 1px #0000000f}[data-systeem-visual] .sy-bel,[data-systeem-visual] .sy-typt{position:relative;background:#fff;border-radius:0 9px 9px;box-shadow:0 1px 1px #0000001a}[data-systeem-visual] .sy-bel:before,[data-systeem-visual] .sy-typt:before{content:"";position:absolute;left:-6px;top:0;border-top:8px solid #fff;border-left:7px solid transparent}[data-systeem-visual] .sy-bel{max-width:160px;padding:6px 9px 5px;font-size:12px;line-height:1.38;color:#111b21;display:none;opacity:0;transform:translateY(6px) scale(.97);transform-origin:left top}[data-systeem-visual] .sy-bel.on{display:block;animation:sy-bel .4s cubic-bezier(.23,1,.32,1) forwards}@keyframes sy-bel{to{opacity:1;transform:none}}[data-systeem-visual] .sy-bel small{display:block;margin-top:2px;text-align:right;font-size:9px;color:#667781}[data-systeem-visual] .sy-typt{display:none;gap:3px;padding:9px 11px}[data-systeem-visual] .sy-typt.on{display:inline-flex}[data-systeem-visual] .sy-typt i{width:5px;height:5px;border-radius:50%;background:#8696a0;animation:rv-dot 1s ease-in-out infinite}[data-systeem-visual] .sy-typt i:nth-child(2){animation-delay:.15s}[data-systeem-visual] .sy-typt i:nth-child(3){animation-delay:.3s}@keyframes rv-dot{0%,to{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}@container (max-width: 480px){[data-systeem-visual] .sy-label,[data-systeem-visual] .sy-chip{font-size:15px}[data-systeem-visual] .sy-naam{font-size:22px}[data-systeem-visual] .sy-bel{font-size:14px;max-width:166px}[data-systeem-visual] .sy-wanaam b{font-size:14px}}
