OUR COMPONENT
LIBRARY.

/* WebGL gradient-mesh — eigen / Codrops (eigen) */
.herowebgl-root{position:absolute;inset:0;background:#0a0a0a}
.herowebgl-canvas{position:absolute;inset:0;width:100%;height:100%}
.herowebgl-copy{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font-family:'Boldonse','Switzer',sans-serif;pointer-events:none}
.herowebgl-copy span{font-size:30px;letter-spacing:-.03em}.herowebgl-copy sup{font-size:.4em;color:#F5480F}
.herowebgl-copy p{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;margin:4px 0 0;opacity:.8}

// init(root):
var canvas=root.querySelector('.herowebgl-canvas');var renderer,gl;try{renderer=new OGL.Renderer({canvas:canvas,dpr:Math.min(devicePixelRatio,1.5),alpha:false});gl=renderer.gl;}catch(e){return;}
function resize(){var r=canvas.getBoundingClientRect();renderer.setSize(r.width,r.height);}
var vertex='attribute vec2 uv;attribute vec2 position;varying vec2 vUv;void main(){vUv=uv;gl_Position=vec4(position,0.,1.);}';
var fragment='precision highp float;varying vec2 vUv;uniform float uTime;uniform vec2 uMouse;vec3 cA=vec3(.96,.28,.06);vec3 cB=vec3(.04,.04,.04);vec3 cC=vec3(.55,.12,.02);void main(){vec2 p=vUv;float t=uTime*.25;float w=sin(p.x*3.+t)*.5+cos(p.y*4.-t*1.3)*.5;float m=distance(p,uMouse);float g=smoothstep(.0,1.,p.y+w*.18+sin(m*6.-t)*.06);vec3 col=mix(cB,cA,g);col=mix(col,cC,smoothstep(.4,.0,m)*.5);gl_FragColor=vec4(col,1.);}';
var program=new OGL.Program(gl,{vertex:vertex,fragment:fragment,uniforms:{uTime:{value:0},uMouse:{value:[.5,.5]}}});var mesh=new OGL.Mesh(gl,{geometry:new OGL.Triangle(gl),program:program});
resize();addEventListener('resize',resize);canvas.addEventListener('pointermove',function(e){var r=canvas.getBoundingClientRect();program.uniforms.uMouse.value=[(e.clientX-r.left)/r.width,1-(e.clientY-r.top)/r.height];});
var raf,vis=true;var io=new IntersectionObserver(function(es){es.forEach(function(en){vis=en.isIntersecting;});},{threshold:.05});io.observe(canvas);
(function loop(t){raf=requestAnimationFrame(loop);if(!vis)return;program.uniforms.uTime.value=t*.001;renderer.render({scene:mesh});})(0);

/* Kinetische typografie — eigen (eigen) */
.herokin-root{position:absolute;inset:0;display:flex;align-items:center;padding:0 22px;background:#fff}
.herokin-h{font-family:'Boldonse','Switzer',sans-serif;font-size:clamp(22px,4.4vw,40px);line-height:.96;letter-spacing:-.03em;text-transform:uppercase;color:#0a0a0a;margin:0}
.herokin-h .kl{display:block;overflow:hidden}.herokin-h .kl i{display:block;font-style:normal;transform:translateY(115%)}
.herokin-h .po{color:#F5480F}

// init(root):
if(!window.gsap)return;gsap.to(root.querySelectorAll('.kl i'),{yPercent:0,duration:.9,stagger:.08,ease:'power3.out',scrollTrigger:{trigger:root,start:'top 90%'}});

/* Cursor Image Trail — Codrops (eigen) */
.cit-stage{position:relative;width:100%;height:100%;background:#fff;overflow:hidden;cursor:none}
.cit-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cit-title{margin:0;font:800 clamp(34px,9vw,84px)/.92 'Boldonse','Switzer',sans-serif;letter-spacing:-.03em;color:#0a0a0a;text-align:center}
.cit-title span{color:#F5480F;font-weight:400;font-size:.42em;letter-spacing:0}
.cit-img{position:absolute;width:130px;height:90px;border-radius:8px;will-change:transform,opacity;pointer-events:none;background-size:cover;opacity:0;transform:translate(-50%,-50%) scale(.5)}
.cit-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#F5480F;mix-blend-mode:difference;transform:translate(-50%,-50%);pointer-events:none;z-index:5}

// init(root):
root.classList.add('cit-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var hues=[18,200,140,330,48,270];
var imgs=hues.map(function(h){return 'data:image/svg+xml,'+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="130" height="90"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl('+h+',70%,55%)"/><stop offset="1" stop-color="hsl('+((h+40)%360)+',75%,40%)"/></linearGradient></defs><rect width="130" height="90" fill="url(#g)"/></svg>');});
var dot=document.createElement('div');dot.className='cit-dot';root.appendChild(dot);var i=0,last=0,lx=0,ly=0;
root.addEventListener('pointermove',function(e){var r=root.getBoundingClientRect();var x=e.clientX-r.left,y=e.clientY-r.top;dot.style.left=x+'px';dot.style.top=y+'px';if(reduce)return;var dist=Math.hypot(x-lx,y-ly);var now=performance.now();if(dist<48||now-last<60)return;last=now;lx=x;ly=y;var el=document.createElement('div');el.className='cit-img';el.style.backgroundImage='url("'+imgs[i++%imgs.length]+'")';el.style.left=x+'px';el.style.top=y+'px';var rot=(Math.random()*16-8);root.appendChild(el);
if(window.gsap){gsap.timeline({onComplete:function(){el.remove();}}).to(el,{opacity:1,scale:1,rotation:rot,duration:.35,ease:'power3.out'}).to(el,{opacity:0,scale:.85,y:'+=22',duration:.6,ease:'power2.in'},'+=0.25');}else{var an=el.animate([{opacity:0,transform:'translate(-50%,-50%) scale(.5)'},{opacity:1,transform:'translate(-50%,-50%) scale(1) rotate('+rot+'deg)',offset:.3},{opacity:0,transform:'translate(-50%,-40%) scale(.85)'}],{duration:1100,easing:'ease-out'});an.onfinish=function(){el.remove();};}});
root.addEventListener('pointerleave',function(){dot.style.opacity='0';});root.addEventListener('pointerenter',function(){dot.style.opacity='1';});

/* Glitch Hero Text — eigen (eigen) */
.gh-stage{position:relative;width:100%;height:100%;background:#0a0a0a;overflow:hidden;display:flex;align-items:center;justify-content:center}
.gh-wrap{text-align:center}.gh-text{position:relative;margin:0;font:800 clamp(32px,8vw,76px)/1 'JetBrains Mono',monospace;letter-spacing:-.02em;color:#fff;text-transform:uppercase}
.gh-text::before,.gh-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;background:transparent;mix-blend-mode:screen}
.gh-text::before{color:#F5480F;animation:gh-a 1.4s infinite linear alternate-reverse;transform:translate(2px,0)}.gh-text::after{color:#27d3e0;animation:gh-b 1.7s infinite linear alternate-reverse;transform:translate(-2px,0)}
@keyframes gh-a{0%{clip-path:inset(8% 0 86% 0);transform:translate(-2px,0)}20%{clip-path:inset(40% 0 38% 0);transform:translate(2px,0)}40%{clip-path:inset(70% 0 12% 0);transform:translate(-3px,0)}60%{clip-path:inset(24% 0 60% 0);transform:translate(3px,0)}80%{clip-path:inset(55% 0 28% 0);transform:translate(-2px,0)}100%{clip-path:inset(12% 0 80% 0);transform:translate(2px,0)}}
@keyframes gh-b{0%{clip-path:inset(60% 0 22% 0);transform:translate(2px,0)}25%{clip-path:inset(12% 0 70% 0);transform:translate(-3px,0)}50%{clip-path:inset(78% 0 6% 0);transform:translate(2px,0)}75%{clip-path:inset(35% 0 45% 0);transform:translate(-2px,0)}100%{clip-path:inset(50% 0 30% 0);transform:translate(3px,0)}}
.gh-sub{margin:.9em 0 0;font:500 13px/1 'JetBrains Mono',monospace;letter-spacing:.5em;text-transform:uppercase;color:#888}
.gh-wrap.is-hot .gh-text::before{animation-duration:.35s}.gh-wrap.is-hot .gh-text::after{animation-duration:.3s}
@media(prefers-reduced-motion:reduce){.gh-text::before,.gh-text::after{animation:none;clip-path:inset(0 0 100% 0)}}

// init(root):
root.classList.add('gh-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var wrap=root.querySelector('.gh-wrap');if(reduce)return;
root.addEventListener('pointerenter',function(){wrap.classList.add('is-hot');});root.addEventListener('pointerleave',function(){wrap.classList.remove('is-hot');});
var timer;function burst(){wrap.classList.add('is-hot');setTimeout(function(){if(!root.matches(':hover'))wrap.classList.remove('is-hot');},260);timer=setTimeout(burst,1800+Math.random()*2600);}
new IntersectionObserver(function(es){if(es[0].isIntersecting)burst();else clearTimeout(timer);}).observe(root);

/* Split Text — React Bits (MIT) */
.splittext-root{margin:0;font:700 clamp(1.4rem,4vw,2.6rem)/1.1 'Boldonse','Switzer',sans-serif;color:#fff;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .04em;text-transform:uppercase}
.splittext-root .splittext-char{display:inline-block;will-change:transform,opacity}
.splittext-root .splittext-space{display:inline-block;width:.3em}

// init(root):
root=root.querySelector('.splittext-root')||root;var text=root.textContent;root.textContent='';for(const ch of text){var span=document.createElement('span');if(ch===' '){span.className='splittext-space';}else{span.className='splittext-char';span.textContent=ch;}root.appendChild(span);}
var chars=root.querySelectorAll('.splittext-char');if(!window.gsap)return;gsap.set(chars,{yPercent:110,opacity:0});gsap.to(chars,{yPercent:0,opacity:1,duration:.6,ease:'back.out(1.7)',stagger:.03,scrollTrigger:{trigger:root,start:'top 90%',once:true}});

/* Blur Text — React Bits (MIT) */
.blurtext-root{margin:0;font:600 clamp(1.3rem,3.5vw,2.2rem)/1.3 'Switzer',sans-serif;color:#fff;text-align:center}
.blurtext-root .blurtext-word{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(14px);animation:blurtext-in .7s forwards cubic-bezier(.2,.7,.3,1)}
@keyframes blurtext-in{to{opacity:1;filter:blur(0);transform:translateY(0)}}

// init(root):
root=root.querySelector('.blurtext-root')||root;var words=root.textContent.trim().split(/\s+/);root.textContent='';words.forEach(function(w,i){var s=document.createElement('span');s.className='blurtext-word';s.textContent=w;s.style.animationDelay=(i*0.12)+'s';root.append(s,document.createTextNode(' '));});

/* Shiny Text — React Bits (MIT) */
.shinytext-root{display:inline-block;font:700 clamp(1.4rem,4vw,2.4rem) 'Boldonse','Switzer',sans-serif;color:#5b5b5b;background:linear-gradient(110deg,#5b5b5b 40%,#fff 50%,#5b5b5b 60%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shinytext-move 3s linear infinite;text-transform:uppercase}
@keyframes shinytext-move{0%{background-position:180% 0}100%{background-position:-80% 0}}

/* Gradient Text — React Bits (MIT) */
.gradienttext-root{display:inline-block;font:800 clamp(1.6rem,5vw,3rem) 'Boldonse','Switzer',sans-serif;background:linear-gradient(90deg,#F5480F,#ff9466,#F5480F,#ffb38c,#F5480F);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradienttext-flow 6s linear infinite;text-transform:uppercase}
@keyframes gradienttext-flow{to{background-position:300% 0}}

/* Count Up — React Bits (MIT) */
.countup-root{font:800 clamp(2rem,6vw,3.4rem) 'JetBrains Mono',monospace;color:#fff;font-variant-numeric:tabular-nums}

// init(root):
root=root.querySelector('.countup-root')||root;var target=parseFloat(root.dataset.to||'100');var dur=(parseFloat(root.dataset.dur||'2'))*1000;var dec=(root.dataset.to||'').includes('.')?root.dataset.to.split('.')[1].length:0;var started=false;
function run(){var t0=performance.now();(function tick(now){var p=Math.min((now-t0)/dur,1);var e=1-Math.pow(1-p,3);root.textContent=(target*e).toLocaleString('nl-NL',{minimumFractionDigits:dec,maximumFractionDigits:dec});if(p<1)requestAnimationFrame(tick);})(performance.now());}
var io=new IntersectionObserver(function(es){if(es[0].isIntersecting&&!started){started=true;run();io.disconnect();}},{threshold:.4});io.observe(root);

/* Scramble Text — React Bits (MIT) */
.scrambletext-root{font:700 clamp(1.2rem,3.5vw,2rem) 'JetBrains Mono',monospace;color:#F5480F;cursor:pointer;letter-spacing:.02em}

// init(root):
root=root.querySelector('.scrambletext-root')||root;var real=root.dataset.text||root.textContent;var glyphs='!<>-_\\/[]{}=+*^?#________';var raf,frame=0;
function scramble(){cancelAnimationFrame(raf);frame=0;var queue=[].map.call(real,function(ch,i){return{ch:ch,start:Math.floor(Math.random()*12),end:Math.floor(Math.random()*12)+18+i};});
(function tick(){var out='',done=0;queue.forEach(function(q){if(frame>=q.end){out+=q.ch;done++;}else if(frame>=q.start){out+=glyphs[Math.floor(Math.random()*glyphs.length)];}else{out+=q.ch===' '?' ':'';}});root.textContent=out;frame++;if(done<queue.length)raf=requestAnimationFrame(tick);else root.textContent=real;})();}
root.addEventListener('mouseenter',scramble);

/* Rotating Text — React Bits (MIT) */
.rotatingtext-root{margin:0;font:700 clamp(1.4rem,4vw,2.4rem) 'Switzer',sans-serif;color:#fff}
.rotatingtext-slot{display:inline-block;position:relative;color:#F5480F;min-width:4ch;text-align:left}
.rotatingtext-slot .rotatingtext-word{display:inline-block;will-change:transform,opacity}
.rotatingtext-slot .rotatingtext-in{animation:rotatingtext-in .5s forwards cubic-bezier(.2,.7,.3,1)}
.rotatingtext-slot .rotatingtext-out{position:absolute;left:0;top:0;animation:rotatingtext-out .5s forwards cubic-bezier(.5,0,.8,.3)}
@keyframes rotatingtext-in{from{opacity:0;transform:translateY(60%);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes rotatingtext-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-60%);filter:blur(6px)}}

// init(root):
root=root.querySelector('.rotatingtext-root')||root;var words=(root.dataset.words||'').split(',').map(function(s){return s.trim();}).filter(Boolean);var slot=root.querySelector('.rotatingtext-slot');var i=0;
function make(t,c){var s=document.createElement('span');s.className='rotatingtext-word '+c;s.textContent=t;return s;}
slot.appendChild(make(words[0],'rotatingtext-in'));
setInterval(function(){var cur=slot.querySelector('.rotatingtext-word');cur.className='rotatingtext-word rotatingtext-out';cur.addEventListener('animationend',function(){cur.remove();},{once:true});i=(i+1)%words.length;slot.appendChild(make(words[i],'rotatingtext-in'));},2200);

/* True Focus — React Bits (MIT) */
.truefocus-root{position:relative;display:flex;gap:.5em;flex-wrap:wrap;justify-content:center;align-items:center;font:800 clamp(1.4rem,4vw,2.4rem) 'Boldonse','Switzer',sans-serif;color:#fff;text-transform:uppercase}
.truefocus-root .truefocus-word{filter:blur(6px);opacity:.5;transition:filter .4s,opacity .4s}
.truefocus-root .truefocus-word.is-active{filter:blur(0);opacity:1}
.truefocus-frame{position:absolute;pointer-events:none;left:0;top:0;width:0;height:0;transition:transform .5s cubic-bezier(.2,.7,.3,1),width .5s,height .5s}
.truefocus-c{position:absolute;width:14px;height:14px;border:2px solid #F5480F}
.truefocus-c.tl{left:-6px;top:-6px;border-right:0;border-bottom:0}.truefocus-c.tr{right:-6px;top:-6px;border-left:0;border-bottom:0}
.truefocus-c.bl{left:-6px;bottom:-6px;border-right:0;border-top:0}.truefocus-c.br{right:-6px;bottom:-6px;border-left:0;border-top:0}

// init(root):
root=root.querySelector('.truefocus-root')||root;var frame=root.querySelector('.truefocus-frame');var words=(root.dataset.words||'').split(',').map(function(s){return s.trim();});words.forEach(function(w){var s=document.createElement('span');s.className='truefocus-word';s.textContent=w;root.appendChild(s);});
var spans=root.querySelectorAll('.truefocus-word');var i=0;
function focus(idx){spans.forEach(function(s){s.classList.remove('is-active');});var el=spans[idx];el.classList.add('is-active');var r=el.getBoundingClientRect(),pr=root.getBoundingClientRect();frame.style.transform='translate('+(r.left-pr.left)+'px,'+(r.top-pr.top)+'px)';frame.style.width=r.width+'px';frame.style.height=r.height+'px';}
focus(0);setInterval(function(){i=(i+1)%spans.length;focus(i);},1600);

/* Typewriter — eigen (eigen) */
.twc-wrap{font:700 clamp(22px,5vw,46px)/1.1 'Boldonse','Switzer',sans-serif;color:#0a0a0a;display:flex;align-items:center;gap:.05em}
.twc-text{white-space:pre}.twc-caret{display:inline-block;width:.08em;height:1em;background:#F5480F;animation:twc-blink 1s steps(1) infinite}
@keyframes twc-blink{50%{opacity:0}}

// init(root):
root=root.querySelector('.twc-wrap')||root;var out=root.querySelector('.twc-text');var words=(root.dataset.words||'Hello.').split('|');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(reduce){out.textContent=words[0];return;}var wi=0,ci=0,del=false;function tick(){var w=words[wi];out.textContent=w.slice(0,ci);if(!del){ci++;if(ci>w.length){del=true;setTimeout(tick,1100);return;}}else{ci--;if(ci===0){del=false;wi=(wi+1)%words.length;}}setTimeout(tick,del?45:90);}tick();

/* Variable Weight Hover — Osmo (eigen) */
.vwh{font:400 clamp(26px,6vw,58px)/1 'Switzer',sans-serif;color:#0a0a0a;letter-spacing:.02em;text-align:center;cursor:default}
.vwh span{display:inline-block;transition:font-variation-settings .25s ease,transform .25s ease,color .25s ease;will-change:font-variation-settings;font-variation-settings:'wght' 400}
.vwh span.sp{width:.3em}

// init(root):
root=root.querySelector('.vwh')||root;var txt=root.dataset.text||'TYPE';root.textContent='';var spans=[];txt.split('').forEach(function(ch){var s=document.createElement('span');if(ch===' '){s.className='sp';s.innerHTML=' ';}else s.textContent=ch;root.appendChild(s);spans.push(s);});var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(reduce)return;root.addEventListener('pointermove',function(e){spans.forEach(function(s){var r=s.getBoundingClientRect();var d=Math.abs((r.left+r.width/2)-e.clientX);var f=Math.max(0,1-d/180);var w=Math.round(400+f*500);s.style.fontVariationSettings="'wght' "+w;s.style.transform='translateY('+(-f*6)+'px)';s.style.color=f>.5?'#F5480F':'#0a0a0a';});});root.addEventListener('pointerleave',function(){spans.forEach(function(s){s.style.fontVariationSettings="'wght' 400";s.style.transform='';s.style.color='#0a0a0a';});});

/* Text Wave Hover — React Bits (MIT) */
.twh{font:800 clamp(26px,6vw,56px)/1 'Boldonse','Switzer',sans-serif;color:#0a0a0a;cursor:default;display:flex;flex-wrap:wrap;justify-content:center;text-transform:uppercase}
.twh span{display:inline-block;transition:transform .3s cubic-bezier(.2,.9,.2,1),color .3s}.twh span.sp{width:.3em}

// init(root):
root=root.querySelector('.twh')||root;var txt=root.dataset.text||'WAVE';root.textContent='';var spans=[];txt.split('').forEach(function(ch){var s=document.createElement('span');if(ch===' '){s.className='sp';s.innerHTML=' ';}else s.textContent=ch;root.appendChild(s);spans.push(s);});var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(reduce)return;root.addEventListener('pointermove',function(e){spans.forEach(function(s){var r=s.getBoundingClientRect();var d=Math.abs((r.left+r.width/2)-e.clientX);var f=Math.max(0,1-d/120);s.style.transform='translateY('+(-f*22)+'px) scale('+(1+f*.15)+')';s.style.color=f>.4?'#F5480F':'#0a0a0a';});});root.addEventListener('pointerleave',function(){spans.forEach(function(s){s.style.transform='';s.style.color='#0a0a0a';});});

/* Neon Flicker — Codrops (MIT) */
.nft-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.nft{font:700 clamp(30px,7vw,64px)/1 'JetBrains Mono',monospace;color:#fff;letter-spacing:.04em;text-align:center;margin:0;text-shadow:0 0 6px #F5480F,0 0 14px #F5480F,0 0 30px #F5480F,0 0 60px #F5480F}
.nft .nft-flick{animation:nft-flick 4s linear infinite}
@keyframes nft-flick{0%,18%,22%,25%,53%,57%,100%{opacity:1;text-shadow:0 0 6px #F5480F,0 0 14px #F5480F,0 0 30px #F5480F}20%,24%,55%{opacity:.25;text-shadow:none}}

/* 3D Extruded Text — eigen (eigen) */
.e3d-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.e3d{perspective:700px;font:900 clamp(30px,8vw,72px)/1 'Boldonse','Switzer',sans-serif;margin:0}
.e3d-inner{display:inline-block;color:#fff;transform-style:preserve-3d;transition:transform .15s ease-out;text-shadow:1px 1px 0 #d63f0d,2px 2px 0 #c43a0c,3px 3px 0 #b2350b,4px 4px 0 #a0300a,5px 5px 0 #8e2b09,6px 6px 12px rgba(0,0,0,.4);-webkit-text-stroke:1.5px #F5480F}

// init(root):
root=root.querySelector('.e3d')||root;var inner=root.querySelector('.e3d-inner');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(reduce)return;root.addEventListener('pointermove',function(e){var r=root.getBoundingClientRect();var rx=((e.clientY-r.top)/r.height-.5)*-26;var ry=((e.clientX-r.left)/r.width-.5)*26;inner.style.transform='rotateX('+rx+'deg) rotateY('+ry+'deg)';});root.addEventListener('pointerleave',function(){inner.style.transform='rotateX(0) rotateY(0)';});

/* Character Drop-In — React Bits (MIT) */
.cdi{font:800 clamp(28px,7vw,62px)/1 'Boldonse','Switzer',sans-serif;color:#0a0a0a;text-align:center;text-transform:uppercase}
.cdi span{display:inline-block}.cdi .sp{width:.3em;display:inline-block}

// init(root):
root=root.querySelector('.cdi')||root;var txt=root.dataset.text||'DROP IN';root.textContent='';var spans=[];txt.split('').forEach(function(ch){var s=document.createElement('span');if(ch===' '){s.className='sp';s.innerHTML=' ';}else s.textContent=ch;root.appendChild(s);spans.push(s);});var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(reduce)return;if(window.gsap){gsap.from(spans,{y:-80,opacity:0,duration:.6,ease:'bounce.out',stagger:.06,scrollTrigger:window.ScrollTrigger?{trigger:root,start:'top 90%',once:true}:undefined});}else{spans.forEach(function(s,i){s.style.transform='translateY(-80px)';s.style.opacity='0';s.style.transition='transform .5s cubic-bezier(.34,1.56,.64,1) '+(i*.06)+'s,opacity .4s '+(i*.06)+'s';});requestAnimationFrame(function(){spans.forEach(function(s){s.style.transform='';s.style.opacity='1';});});}

/* Gradient Shift Heading — Osmo (eigen) */
.gsh{font:900 clamp(28px,8vw,70px)/1.05 'Boldonse','Switzer',sans-serif;text-align:center;text-transform:uppercase;margin:0;background:linear-gradient(90deg,#0a0a0a,#F5480F,#ff8a4c,#F5480F,#0a0a0a);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gsh-move 6s linear infinite}
@keyframes gsh-move{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* Split-Flap Board — eigen (eigen) */
.sfb{display:flex;gap:4px;justify-content:center;font:800 clamp(18px,4vw,38px)/1 'JetBrains Mono',monospace}
.sfb-cell{display:inline-flex;align-items:center;justify-content:center;width:1.1em;height:1.5em;background:#0a0a0a;color:#fff;border-radius:4px;position:relative;overflow:hidden}
.sfb-cell.on{color:#F5480F}

// init(root):
root=root.querySelector('.sfb')||root;var txt=root.dataset.text||'BOARD';root.textContent='';var glyphs='ABCDEFGHIJKLMNOPQRSTUVWXYZ ';var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var cells=[];txt.split('').forEach(function(ch){var c=document.createElement('span');c.className='sfb-cell';c.textContent=ch===' '?'\u00a0':ch;root.appendChild(c);cells.push({el:c,target:ch});});if(reduce){cells.forEach(function(c){c.el.textContent=c.target===' '?'\u00a0':c.target;c.el.classList.add('on');});return;}cells.forEach(function(c,i){var steps=8+i*3,n=0;var iv=setInterval(function(){n++;if(n>=steps){clearInterval(iv);c.el.textContent=c.target===' '?'\u00a0':c.target;c.el.classList.add('on');return;}c.el.textContent=glyphs[Math.floor(Math.random()*glyphs.length)];},55);});

/* Odometer Counter — Frontend Masters (MIT) */
.odr-wrap{text-align:center;font-family:'Boldonse','Switzer',system-ui,sans-serif}
.odr-num{display:inline-flex;gap:2px;font-size:54px;font-weight:800;color:#0a0a0a;line-height:1}
.odr-digit{position:relative;width:.62em;height:1em;overflow:hidden}
.odr-track{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.odr-track span{height:1em;display:flex;align-items:center;justify-content:center}
.odr-label{display:block;margin-top:12px;font-family:'Switzer',system-ui,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#F5480F}

// init(root):
root=root.querySelector('.odr-wrap')||root;var box=root.querySelector('.odr-num');var target=String(box.dataset.val);var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;box.innerHTML='';var tracks=[];target.split('').forEach(function(ch){var d=document.createElement('span');d.className='odr-digit';var t=document.createElement('span');t.className='odr-track';for(var i=0;i<=10;i++){var s=document.createElement('span');s.textContent=String(i%10);t.appendChild(s);}d.appendChild(t);box.appendChild(d);tracks.push({el:t,n:parseInt(ch,10)});});function run(){tracks.forEach(function(t,idx){var off=reduce?t.n:t.n+10;setTimeout(function(){t.el.style.transform='translateY(-'+off+'em)';},reduce?0:idx*90);});}if(reduce){run();return;}var io=new IntersectionObserver(function(e){if(e[0].isIntersecting){run();io.disconnect();}});io.observe(box);

/* Text Fill On Hover — Hover.css (MIT) */
.foh-nav{display:flex;gap:30px;font-family:'Switzer',system-ui,sans-serif}
.foh-link{position:relative;font-size:22px;font-weight:600;color:rgba(10,10,10,.32);text-decoration:none;line-height:1.1}
.foh-link::after{content:attr(data-t);position:absolute;top:0;left:0;color:#F5480F;white-space:nowrap;width:0;overflow:hidden;transition:width .4s cubic-bezier(.16,1,.3,1)}
.foh-link:hover::after,.foh-link:focus-visible::after{width:100%}

/* Border Beam — Magic UI (MIT) */
.borderbeam-card{position:relative;width:280px;height:150px;border-radius:16px;background:#0b0b12;border:1px solid #23232e;overflow:hidden;display:flex;align-items:center;justify-content:center}
.borderbeam-content{padding:20px;color:#e7e7ef;text-align:center;z-index:1}.borderbeam-content h3{margin:0 0 6px;font:600 18px 'Switzer',sans-serif}.borderbeam-content p{margin:0;font:13px 'Switzer',sans-serif;color:#9b9ba8}
.borderbeam-beam{position:absolute;inset:-1px;background:conic-gradient(from 0deg,transparent 0 75%,#F5480F 85%,#ff9466 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;border-radius:16px;animation:borderbeam-spin 5s linear infinite}
@keyframes borderbeam-spin{to{transform:rotate(1turn)}}

/* Shimmer Button — Magic UI (MIT) */
.shimmerbtn-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a10}
.shimmerbtn{position:relative;isolation:isolate;cursor:pointer;padding:14px 28px;border:none;border-radius:999px;background:#0a0a0a;color:#fff;font:600 15px 'Switzer',sans-serif;overflow:hidden;transition:transform .2s}
.shimmerbtn:active{transform:translateY(1px)}
.shimmerbtn-spark{position:absolute;inset:0;overflow:visible;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;border-radius:999px}
.shimmerbtn-spark-inner{position:absolute;inset:0;width:100%;height:100%;background:conic-gradient(from 0deg,transparent 0 340deg,#fff 360deg);animation:shimmerbtn-spin 3s linear infinite}
.shimmerbtn-label{position:relative;z-index:1}
.shimmerbtn-hl{position:absolute;inset:0;border-radius:999px;z-index:1;pointer-events:none;box-shadow:inset 0 -8px 10px rgba(255,255,255,.12)}
@keyframes shimmerbtn-spin{to{transform:rotate(1turn)}}

/* Marquee — Magic UI (MIT) */
.mqc-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a10}
.mqc{display:flex;overflow:hidden;gap:var(--gap,1rem);max-width:340px;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mqc-track{display:flex;gap:var(--gap,1rem);flex-shrink:0;min-width:100%;animation:mqc-scroll var(--duration,18s) linear infinite}
.mqc:hover .mqc-track{animation-play-state:paused}
.mqc-item{white-space:nowrap;padding:10px 16px;border-radius:10px;background:#15151d;color:#dcdce6;border:1px solid #26262f;font:500 14px 'Switzer',sans-serif}
@keyframes mqc-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--gap,1rem)))}}

/* Meteors — Magic UI (MIT) */
.meteors-root{position:absolute;inset:0;border-radius:0;overflow:hidden;background:radial-gradient(120% 120% at 50% 0%,#11111b,#05050a);display:flex;align-items:center;justify-content:center}
.meteors-label{color:#cfcfe0;font:600 18px 'Switzer',sans-serif;z-index:1}
.meteors-meteor{position:absolute;top:-10%;left:50%;width:2px;height:2px;border-radius:50%;background:#ffd2bf;box-shadow:0 0 6px 1px rgba(245,72,15,.6);transform:rotate(215deg);animation:meteors-fall linear infinite}
.meteors-meteor::before{content:"";position:absolute;top:50%;left:0;width:60px;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,#ff9466,transparent)}
@keyframes meteors-fall{0%{transform:rotate(215deg) translateX(0);opacity:1}70%{opacity:1}100%{transform:rotate(215deg) translateX(420px);opacity:0}}

// init(root):
for(var i=0;i<14;i++){var m=document.createElement('span');m.className='meteors-meteor';m.style.left=Math.floor(Math.random()*100)+'%';m.style.top=Math.floor(Math.random()*40-20)+'%';m.style.animationDelay=(Math.random()*4).toFixed(2)+'s';m.style.animationDuration=(3+Math.random()*5).toFixed(2)+'s';root.appendChild(m);}

/* Ripple — Magic UI (MIT) */
.ripple-root{position:absolute;inset:0;overflow:hidden;background:#06060c;display:flex;align-items:center;justify-content:center}
.ripple-content{color:#e7e7ef;font:600 18px 'Switzer',sans-serif;z-index:1}
.ripple-circle{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(245,72,15,.35);background:rgba(245,72,15,.04);transform:translate(-50%,-50%) scale(1);animation:ripple-pulse 3s ease-out infinite}
@keyframes ripple-pulse{0%{opacity:.7}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}

// init(root):
for(var i=0;i<6;i++){var c=document.createElement('div');c.className='ripple-circle';var size=60+i*36;c.style.width=c.style.height=size+'px';c.style.animationDelay=(i*0.18)+'s';c.style.opacity=(0.7-i*0.1).toFixed(2);c.style.borderColor='rgba(245,72,15,'+(0.4-i*0.05).toFixed(2)+')';root.appendChild(c);}

/* Dot Pattern — Magic UI (MIT) */
.dotpattern-root{position:absolute;inset:0;overflow:hidden;background:#0a0a10;display:flex;align-items:center;justify-content:center}
.dotpattern-root::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(150,150,180,.45) 1px,transparent 1px);background-size:16px 16px;-webkit-mask:radial-gradient(220px 140px at 50% 50%,#000,transparent);mask:radial-gradient(220px 140px at 50% 50%,#000,transparent)}
.dotpattern-label{position:relative;z-index:1;color:#dcdce6;font:600 18px 'Switzer',sans-serif}

/* Orbiting Circles — Magic UI (MIT) */
.orbit-root{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#0e0e18,#05050a);display:flex;align-items:center;justify-content:center}
.orbit-center{font-size:28px;z-index:2}
.orbit-path{position:absolute;top:50%;left:50%;width:0;height:0;animation:orbit-spin var(--dur) linear infinite;animation-delay:var(--delay,0s)}
.orbit-path.orbit-reverse{animation-direction:reverse}
.orbit-path::before{content:"";position:absolute;top:50%;left:50%;width:calc(var(--r)*2);height:calc(var(--r)*2);transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(140,140,180,.18)}
.orbit-item{position:absolute;top:0;left:var(--r);transform:translate(-50%,-50%);font-size:18px;animation:orbit-counter var(--dur) linear infinite reverse;animation-delay:var(--delay,0s)}
.orbit-reverse .orbit-item{animation-direction:normal}
@keyframes orbit-spin{to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes orbit-counter{to{transform:translate(-50%,-50%) rotate(1turn)}}

/* Word Rotate — Magic UI (MIT) */
.wrot-root{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a10;font:800 24px 'Boldonse','Switzer',sans-serif;color:#fff}
.wrot{display:inline-block;color:#F5480F;will-change:transform,opacity}
.wrot.is-out{animation:wrot-out .4s ease forwards}.wrot.is-in{animation:wrot-in .4s ease forwards}
@keyframes wrot-out{to{transform:translateY(-100%);opacity:0}}@keyframes wrot-in{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

// init(root):
var el=root.querySelector('.wrot');var words=(el.dataset.words||'').split(',').map(function(s){return s.trim();}).filter(Boolean);if(words.length<2)return;var i=0;
setInterval(function(){el.classList.add('is-out');el.addEventListener('animationend',function done(){el.removeEventListener('animationend',done);i=(i+1)%words.length;el.textContent=words[i];el.classList.remove('is-out');el.classList.add('is-in');el.addEventListener('animationend',function(){el.classList.remove('is-in');},{once:true});},{once:true});},2200);

/* Animated List — Magic UI (MIT) */
.anl-root{position:absolute;inset:0;background:#0a0a10;padding:14px;overflow:hidden}
.anl-stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.anl-item{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:#15151d;border:1px solid #26262f;color:#e7e7ef;transform-origin:top;animation:anl-pop .45s cubic-bezier(.22,1,.36,1) both}
.anl-item b{font:600 14px 'Switzer',sans-serif}.anl-item p{margin:2px 0 0;font:12px 'Switzer',sans-serif;color:#9b9ba8}.anl-ico{font-size:20px}
@keyframes anl-pop{from{transform:translateY(120%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

// init(root):
var stack=root.querySelector('.anl-stack');var data=[['\uD83D\uDCAC','Nieuw bericht','Iemand reageerde'],['\u2B50','Nieuwe ster','Repo gestard'],['\uD83D\uDCB8','Betaling','\u20AC129 ontvangen'],['\uD83D\uDE80','Deploy','Build geslaagd']];var i=0;
function add(){var d=data[i%data.length];var li=document.createElement('li');li.className='anl-item';li.innerHTML='<span class="anl-ico">'+d[0]+'</span><div><b>'+d[1]+'</b><p>'+d[2]+'</p></div>';stack.prepend(li);while(stack.children.length>4)stack.lastElementChild.remove();i++;}
add();setInterval(add,1800);

/* Confetti — Magic UI (MIT) */
.conf-root{position:absolute;inset:0;overflow:hidden;background:#0a0a10;display:flex;align-items:center;justify-content:center}
.conf-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.conf-btn{position:relative;z-index:1;cursor:pointer;border:none;border-radius:999px;padding:12px 22px;font:600 15px 'Switzer',sans-serif;color:#0a0a10;background:#F5480F;transition:transform .1s}
.conf-btn:active{transform:scale(.96)}

// init(root):
var canvas=root.querySelector('.conf-canvas');var btn=root.querySelector('.conf-btn');var ctx=canvas.getContext('2d');var colors=['#F5480F','#ff9466','#ffd2bf','#fff','#1dd1a1'];var parts=[],raf=null;
function resize(){canvas.width=root.clientWidth;canvas.height=root.clientHeight;}resize();new ResizeObserver(resize).observe(root);
function burst(){var cx=canvas.width/2,cy=canvas.height/2;for(var i=0;i<120;i++){var a=Math.random()*Math.PI*2,sp=2+Math.random()*6;parts.push({x:cx,y:cy,vx:Math.cos(a)*sp,vy:Math.sin(a)*sp-2,size:4+Math.random()*4,rot:Math.random()*6.28,vr:(Math.random()-.5)*.3,color:colors[(Math.random()*colors.length)|0],life:1});}if(!raf)loop();}
function loop(){ctx.clearRect(0,0,canvas.width,canvas.height);parts.forEach(function(p){p.vy+=0.12;p.x+=p.vx;p.y+=p.vy;p.vx*=.99;p.rot+=p.vr;p.life-=.012;ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.rot);ctx.globalAlpha=Math.max(0,p.life);ctx.fillStyle=p.color;ctx.fillRect(-p.size/2,-p.size/2,p.size,p.size*0.6);ctx.restore();});parts=parts.filter(function(p){return p.life>0&&p.y<canvas.height+20;});if(parts.length){raf=requestAnimationFrame(loop);}else{raf=null;ctx.clearRect(0,0,canvas.width,canvas.height);}}
btn.addEventListener('click',burst);

/* Dynamic Island — Cult UI (MIT) */
.isl-root{position:absolute;inset:0;background:#0a0a10;display:flex;align-items:center;justify-content:center}
.isl{background:#000;color:#fff;border-radius:28px;overflow:hidden;display:flex;align-items:center;justify-content:center;width:140px;height:34px;padding:0 14px;transition:width .5s cubic-bezier(.34,1.56,.64,1),height .5s cubic-bezier(.34,1.56,.64,1),border-radius .5s;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.isl[data-state="expanded"]{width:240px;height:64px;border-radius:24px}
.isl-idle{display:flex;align-items:center;gap:8px;font:600 13px 'Switzer',sans-serif;white-space:nowrap}
.isl-exp{display:none;align-items:center;gap:12px;width:100%}
.isl[data-state="expanded"] .isl-idle{display:none}.isl[data-state="expanded"] .isl-exp{display:flex}
.isl-art{font-size:26px}.isl-meta b{display:block;font:600 13px 'Switzer',sans-serif}.isl-meta small{color:#9b9ba8;font:11px 'Switzer',sans-serif}
.isl-eq{margin-left:auto;display:flex;gap:2px;align-items:flex-end;height:18px}.isl-eq i{width:3px;background:#F5480F;border-radius:2px;animation:isl-eq .9s ease-in-out infinite}
.isl-eq i:nth-child(2){animation-delay:.2s}.isl-eq i:nth-child(3){animation-delay:.4s}.isl-eq i:nth-child(4){animation-delay:.1s}
@keyframes isl-eq{0%,100%{height:5px}50%{height:16px}}

// init(root):
var isl=root.querySelector('.isl');var exp=false;setInterval(function(){exp=!exp;isl.dataset.state=exp?'expanded':'idle';},2600);

/* Texture Card — Cult UI (MIT) */
.texcard-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#06060a}
.texcard{width:280px;border-radius:20px;padding:1px;background:linear-gradient(145deg,#2a2a36,#0e0e16 40%,#2a2a36);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.texcard-inner{position:relative;border-radius:19px;padding:22px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.04),transparent 40%),#0c0c14;color:#e7e7ef}
.texcard-inner::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")}
.texcard-inner h3{margin:0 0 8px;font:700 18px 'Switzer',sans-serif;position:relative}.texcard-inner p{margin:0;font:13px/1.5 'Switzer',sans-serif;color:#9b9ba8;position:relative}

/* Direction-Aware Hover — Cult UI (MIT) */
.dah-root{position:absolute;inset:0;overflow:hidden;cursor:pointer}
.dah-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}
.dah-overlay{position:absolute;inset:0;background:rgba(245,72,15,.92);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .35s ease;transform:translate(var(--tx,0),var(--ty,100%))}
.dah-content{text-align:center;font-family:'Switzer',sans-serif}.dah-content b{display:block;font-size:18px;font-weight:700}.dah-content span{font-size:12px;opacity:.85}

// init(root):
var overlay=root.querySelector('.dah-overlay');
function setFrom(e){var r=root.getBoundingClientRect();var x=(e.clientX-r.left)/r.width-.5,y=(e.clientY-r.top)/r.height-.5;if(Math.abs(x)>Math.abs(y)){overlay.style.setProperty('--tx',x>0?'100%':'-100%');overlay.style.setProperty('--ty','0');}else{overlay.style.setProperty('--ty',y>0?'100%':'-100%');overlay.style.setProperty('--tx','0');}}
root.addEventListener('mouseenter',function(e){setFrom(e);requestAnimationFrame(function(){overlay.style.setProperty('--tx','0');overlay.style.setProperty('--ty','0');});});
root.addEventListener('mouseleave',function(e){setFrom(e);});

/* Family Button — Cult UI (MIT) */
.fam-root{position:absolute;inset:0;background:#0a0a10}
.fam{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fam-panel{display:flex;flex-direction:column;gap:8px;overflow:hidden;background:#15151d;border:1px solid #26262f;border-radius:18px;padding:0 8px;max-height:0;opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s,transform .4s cubic-bezier(.22,1,.36,1),padding .4s}
.fam[data-open="true"] .fam-panel{max-height:180px;opacity:1;transform:translateY(0) scale(1);padding:8px}
.fam-action{cursor:pointer;white-space:nowrap;border:none;background:transparent;color:#e7e7ef;font:500 14px 'Switzer',sans-serif;padding:8px 12px;border-radius:10px;text-align:left;transition:background .2s}
.fam-action:hover{background:#23232e}
.fam-toggle{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;background:#F5480F;color:#fff;font:300 30px/1 'Switzer',sans-serif;box-shadow:0 8px 24px rgba(245,72,15,.5);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.fam[data-open="true"] .fam-toggle{transform:rotate(135deg)}

// init(root):
var fam=root.querySelector('.fam');var toggle=root.querySelector('.fam-toggle');toggle.addEventListener('click',function(){fam.dataset.open=fam.dataset.open==='true'?'false':'true';});

/* Spotlight Card — React Bits / Aceternity (MIT/eigen) */
.spot-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#06060a}
.spot-root{--x:50%;--y:50%;position:relative;overflow:hidden;border-radius:16px;max-width:300px}
.spot-root::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;background:radial-gradient(220px circle at var(--x) var(--y),rgba(245,72,15,.25),transparent 60%);z-index:1}
.spot-root:hover::before{opacity:1}
.spot-inner{position:relative;padding:28px;background:#0e0e12;border:1px solid #26262e;color:#cfcfd6;font-family:'Switzer',sans-serif;border-radius:16px}
.spot-inner h3{margin:0 0 .4em;color:#fff;font-size:1.25rem}.spot-inner p{margin:0;font-size:.92rem;line-height:1.5}

// init(root):
var card=root.querySelector('.spot-root');card.addEventListener('pointermove',function(e){var r=card.getBoundingClientRect();card.style.setProperty('--x',(e.clientX-r.left)+'px');card.style.setProperty('--y',(e.clientY-r.top)+'px');});

/* Magnetic Button — React Bits (MIT) */
.magnet-root{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0c0c12}
.magnet-target{padding:16px 34px;border-radius:999px;border:0;cursor:pointer;font:600 1rem 'Switzer',sans-serif;color:#0a0a0a;background:#fff;will-change:transform}
.magnet-label{display:inline-block;will-change:transform;pointer-events:none}

// init(root):
var btn=root.querySelector('.magnet-target');var label=root.querySelector('.magnet-label');
root.addEventListener('pointermove',function(e){var r=btn.getBoundingClientRect();var x=e.clientX-(r.left+r.width/2),y=e.clientY-(r.top+r.height/2);if(window.gsap){gsap.to(btn,{x:x*.4,y:y*.4,duration:.5,ease:'power3.out'});gsap.to(label,{x:x*.7,y:y*.7,duration:.5,ease:'power3.out'});}else{btn.style.transform='translate('+x*.4+'px,'+y*.4+'px)';}});
root.addEventListener('pointerleave',function(){if(window.gsap){gsap.to([btn,label],{x:0,y:0,duration:.7,ease:'elastic.out(1,.4)'});}else{btn.style.transform='';}});

/* 3D Tilt + glare — Cult UI / Aceternity (MIT/eigen) */
.tilt-root{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:900px;background:#0c0c14}
.tilt-card{position:relative;width:62%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:linear-gradient(145deg,#202840,#11131f);transform-style:preserve-3d;will-change:transform;transition:transform .25s ease-out}
.tilt-glare{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.4),transparent 45%);transition:opacity .25s}
.tilt-card:hover .tilt-glare{opacity:1}
.tilt-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:22px;color:#fff;transform:translateZ(40px)}
.tilt-cat{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.16em;color:#F5480F}.tilt-body b{font:700 26px 'Boldonse','Switzer',sans-serif;text-transform:uppercase}.tilt-body em{font-style:normal;font:11px 'JetBrains Mono',monospace;opacity:.7}

// init(root):
var card=root.querySelector('.tilt-card');var glare=root.querySelector('.tilt-glare');var MAX=12;
card.addEventListener('pointermove',function(e){var r=card.getBoundingClientRect();var px=(e.clientX-r.left)/r.width,py=(e.clientY-r.top)/r.height;var ry=(px-.5)*MAX*2,rx=(.5-py)*MAX*2;if(window.gsap){gsap.to(card,{rotationX:rx,rotationY:ry,duration:.4,ease:'power2.out',transformPerspective:900});}else{card.style.transform='rotateX('+rx+'deg) rotateY('+ry+'deg)';}glare.style.setProperty('--gx',px*100+'%');glare.style.setProperty('--gy',py*100+'%');});
card.addEventListener('pointerleave',function(){if(window.gsap){gsap.to(card,{rotationX:0,rotationY:0,duration:.6,ease:'power3.out'});}else{card.style.transform='';}});

/* Click Spark — React Bits (MIT) */
.cspark-root{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0c0c10;cursor:pointer;overflow:hidden;color:#9aa;font:600 1rem 'Switzer',sans-serif;user-select:none}
.cspark-canvas{position:absolute;inset:0;pointer-events:none}

// init(root):
var canvas=root.querySelector('.cspark-canvas');var ctx=canvas.getContext('2d');var dpr=window.devicePixelRatio||1;
function resize(){canvas.width=root.clientWidth*dpr;canvas.height=root.clientHeight*dpr;ctx.setTransform(dpr,0,0,dpr,0,0);}resize();new ResizeObserver(resize).observe(root);
var sparks=[];root.addEventListener('click',function(e){var r=root.getBoundingClientRect();var x=e.clientX-r.left,y=e.clientY-r.top,n=9;for(var i=0;i<n;i++)sparks.push({x:x,y:y,ang:(Math.PI*2*i)/n,t:performance.now()});if(sparks.length===n)requestAnimationFrame(draw);});
function draw(now){ctx.clearRect(0,0,canvas.width,canvas.height);var len=18;sparks=sparks.filter(function(s){var p=(now-s.t)/450;if(p>=1)return false;var e=1-Math.pow(1-p,3);var d=e*22,x1=s.x+Math.cos(s.ang)*d,y1=s.y+Math.sin(s.ang)*d;var x2=x1+Math.cos(s.ang)*len*(1-p),y2=y1+Math.sin(s.ang)*len*(1-p);ctx.strokeStyle='rgba(245,72,15,'+(1-p)+')';ctx.lineWidth=2;ctx.lineCap='round';ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke();return true;});if(sparks.length)requestAnimationFrame(draw);else ctx.clearRect(0,0,canvas.width,canvas.height);}

/* Image Reveal on Hover — Codrops (eigen) */
.irc-list{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 9%;background:#fff;font-family:'Switzer',sans-serif}
.irc-row{position:relative;display:block;padding:.5em 0;font-weight:800;font-size:clamp(20px,5.4vw,40px);letter-spacing:-.02em;color:#0a0a0a;text-decoration:none;border-bottom:1px solid #e9e9e9;transition:color .35s,padding-left .35s;cursor:pointer;z-index:2}
.irc-row:hover{color:#F5480F;padding-left:18px}
.irc-thumb{position:absolute;width:140px;height:96px;border-radius:10px;background:var(--c,#F5480F);pointer-events:none;z-index:1;opacity:0;transform:translate(-50%,-50%) scale(.6);clip-path:inset(0 100% 0 0);transition:opacity .25s}
.irc-thumb::after{content:'';position:absolute;inset:0;border-radius:10px;background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.35),transparent 60%)}

// init(root):
var thumb=root.querySelector('.irc-thumb');var rows=root.querySelectorAll('.irc-row');var g=window.gsap;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;
function move(e){var r=root.getBoundingClientRect();var x=e.clientX-r.left,y=e.clientY-r.top;if(g)g.to(thumb,{left:x,top:y,duration:.5,ease:'power3.out'});else{thumb.style.left=x+'px';thumb.style.top=y+'px';}}
rows.forEach(function(row){row.addEventListener('mouseenter',function(){thumb.style.setProperty('--c',row.dataset.c);if(g&&!rm)g.to(thumb,{opacity:1,scale:1,clipPath:'inset(0 0% 0 0)',duration:.45,ease:'power3.out'});else thumb.style.opacity=1;});row.addEventListener('mouseleave',function(){if(g&&!rm)g.to(thumb,{opacity:0,scale:.6,clipPath:'inset(0 100% 0 0)',duration:.3,ease:'power2.in'});else thumb.style.opacity=0;});});
root.addEventListener('mousemove',move);

/* Flip Card Grid — eigen (eigen) */
.fcg-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;padding:10%;background:#fff;font-family:'Switzer',sans-serif}
.fcg-card{perspective:600px}.fcg-in{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;border-radius:12px}
.fcg-card:hover .fcg-in{transform:rotateY(180deg)}
.fcg-f,.fcg-b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:12px;backface-visibility:hidden;font-weight:800}
.fcg-f{background:#0a0a0a;color:#fff;font-size:clamp(18px,4vw,30px)}.fcg-b{background:#F5480F;color:#fff;transform:rotateY(180deg);font-size:clamp(13px,2.4vw,18px)}

// init(root):
var g=window.gsap;if(!g)return;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;g.set(root.querySelectorAll('.fcg-card'),{opacity:0,y:14});g.to(root.querySelectorAll('.fcg-card'),{opacity:1,y:0,duration:rm?0:.5,stagger:rm?0:.06,ease:'power3.out',delay:.1});

/* Infinite Logo Loop — Osmo (eigen) */
.ill-stage{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;background:#fff;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ill-track{display:flex;will-change:transform}.ill-set{display:flex;flex:none}
.ill-set span{flex:none;padding:0 clamp(20px,4vw,46px);font-family:'Boldonse','Switzer',sans-serif;font-weight:800;font-size:clamp(18px,3.4vw,30px);color:#0a0a0a;letter-spacing:-.01em;white-space:nowrap}
.ill-set span:nth-child(odd){color:#F5480F}.ill-stage:hover .ill-track{animation-play-state:paused}

// init(root):
var track=root.querySelector('.ill-track');var g=window.gsap;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;if(rm)return;var w=root.querySelector('.ill-set').offsetWidth;
if(g){g.to(track,{x:-w,duration:14,ease:'none',repeat:-1});root.addEventListener('mouseenter',function(){g.getTweensOf(track).forEach(function(t){t.timeScale(.15);});});root.addEventListener('mouseleave',function(){g.getTweensOf(track).forEach(function(t){t.timeScale(1);});});}else{track.style.animation='ill-scroll 14s linear infinite';var s=document.createElement('style');s.textContent='@keyframes ill-scroll{to{transform:translateX(-'+w+'px)}}';root.appendChild(s);}

/* Gooey Blob Nav — Codrops (eigen) */
.gbh-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a;font-family:'Switzer',sans-serif}
.gbh-goo{position:absolute;inset:0;filter:url(#gbh-goo);pointer-events:none}
.gbh-blob{position:absolute;height:46px;border-radius:30px;background:#F5480F;top:50%;transform:translateY(-50%);transition:left .45s cubic-bezier(.5,1.5,.4,1),width .45s cubic-bezier(.5,1.5,.4,1)}
.gbh-nav{display:flex;gap:6px;position:relative;z-index:2}.gbh-i{padding:11px 20px;font-weight:700;font-size:clamp(13px,2.6vw,18px);color:#fff;cursor:pointer;transition:color .3s;border-radius:30px}

// init(root):
var blob=root.querySelector('.gbh-blob');var items=root.querySelectorAll('.gbh-i');
function place(el){var r=el.getBoundingClientRect();blob.style.left=(r.left-root.getBoundingClientRect().left)+'px';blob.style.width=r.width+'px';}
function set(el){items.forEach(function(i){i.classList.remove('is-on');});el.classList.add('is-on');place(el);}
items.forEach(function(el){el.addEventListener('mouseenter',function(){place(el);});el.addEventListener('mouseleave',function(){place(root.querySelector('.gbh-i.is-on'));});el.addEventListener('click',function(){set(el);});});
requestAnimationFrame(function(){set(root.querySelector('.gbh-i.is-on'));});

/* Liquid Fill Button — Osmo (eigen) */
.lqb-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.lqb-btn{position:relative;overflow:hidden;border:1.5px solid #F5480F;background:transparent;border-radius:40px;padding:18px 42px;cursor:pointer;font-family:'Switzer',sans-serif}
.lqb-fill{position:absolute;width:240px;height:240px;border-radius:50%;background:#F5480F;left:50%;top:120%;transform:translate(-50%,-50%) scale(0);transition:transform .55s cubic-bezier(.3,.8,.3,1);z-index:1}
.lqb-btn:hover .lqb-fill{transform:translate(-50%,-50%) scale(1.6)}
.lqb-txt{position:relative;z-index:2;font-weight:800;font-size:clamp(15px,3vw,20px);color:#F5480F;transition:color .4s}.lqb-btn:hover .lqb-txt{color:#fff}

// init(root):
var btn=root.querySelector('.lqb-btn');var fill=root.querySelector('.lqb-fill');var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;if(rm)return;
btn.addEventListener('mouseenter',function(e){var r=btn.getBoundingClientRect();fill.style.left=(e.clientX-r.left)+'px';fill.style.top=(e.clientY-r.top)+'px';});
btn.addEventListener('mouseleave',function(e){var r=btn.getBoundingClientRect();fill.style.left=(e.clientX-r.left)+'px';fill.style.top=(e.clientY-r.top)+'px';});

/* Day/Night Toggle — Uiverse (MIT) */
.tgs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tgs__in{position:absolute;opacity:0;pointer-events:none}
.tgs__track{position:relative;width:104px;height:50px;border-radius:50px;background:#0a0a0a;transition:background .45s cubic-bezier(.4,.1,.2,1);box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.tgs__in:checked+.tgs__track{background:#F5480F}
.tgs__thumb{position:absolute;top:5px;left:5px;width:40px;height:40px;border-radius:50%;background:#fff;transition:transform .45s cubic-bezier(.4,.1,.2,1);box-shadow:0 3px 8px rgba(0,0,0,.3);z-index:2}
.tgs__in:checked+.tgs__track .tgs__thumb{transform:translateX(54px)}
.tgs__sun,.tgs__moon{position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;transition:opacity .4s,transform .4s}
.tgs__sun{right:11px;fill:none;stroke:#FFD15C;stroke-width:2;stroke-linecap:round;opacity:0}.tgs__moon{left:12px;fill:#cfe0ff}
.tgs__in:checked+.tgs__track .tgs__sun{opacity:1}.tgs__in:checked+.tgs__track .tgs__moon{opacity:0}

/* Draw-Tick Checkbox — Uiverse (MIT) */
.cbk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;cursor:pointer;font:600 17px/1.2 'Switzer',sans-serif;color:#0a0a0a}
.cbk__in{position:absolute;opacity:0;pointer-events:none}
.cbk__box{width:34px;height:34px;border-radius:9px;border:2.5px solid #0a0a0a;display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s}
.cbk__svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cbk__path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s ease .05s}
.cbk__in:checked+.cbk__box{background:#F5480F;border-color:#F5480F;animation:cbkPop .4s}
.cbk__in:checked+.cbk__box .cbk__path{stroke-dashoffset:0}
@keyframes cbkPop{0%{transform:scale(1)}40%{transform:scale(.86)}100%{transform:scale(1)}}

/* Loader Trio — Animista (eigen) */
.ldt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:56px;background:#fff}
.ldt__ring{width:48px;height:48px;border-radius:50%;border:5px solid #0a0a0a1a;border-top-color:#F5480F;animation:ldtSpin .8s linear infinite}
@keyframes ldtSpin{to{transform:rotate(360deg)}}
.ldt__dots{display:flex;gap:9px;align-items:center}.ldt__dots i{width:13px;height:13px;border-radius:50%;background:#0a0a0a;animation:ldtBounce 1.1s ease-in-out infinite}
.ldt__dots i:nth-child(2){animation-delay:.16s;background:#F5480F}.ldt__dots i:nth-child(3){animation-delay:.32s}
@keyframes ldtBounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-16px);opacity:1}}
.ldt__bars{display:flex;gap:6px;align-items:flex-end;height:44px}.ldt__bars i{width:8px;height:14px;border-radius:4px;background:#F5480F;animation:ldtBars .9s ease-in-out infinite}
.ldt__bars i:nth-child(2){animation-delay:.12s}.ldt__bars i:nth-child(3){animation-delay:.24s}.ldt__bars i:nth-child(4){animation-delay:.36s}
@keyframes ldtBars{0%,100%{height:14px}50%{height:42px}}

/* Neon Glow Button — Uiverse (MIT) */
.ngb-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.ngb{position:relative;width:200px;height:62px;border:0;border-radius:14px;cursor:pointer;background:#141414;color:#fff;font:700 18px/1 'Switzer',sans-serif;letter-spacing:.04em;overflow:hidden;transition:box-shadow .35s,transform .2s}
.ngb::before{content:"";position:absolute;inset:0;border-radius:14px;padding:2px;background:linear-gradient(120deg,#F5480F,#ff8a3d,#F5480F);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.ngb::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s}
.ngb:hover{transform:translateY(-2px);box-shadow:0 0 22px rgba(245,72,15,.65),0 0 46px rgba(245,72,15,.35)}
.ngb:hover::before{opacity:1}.ngb:hover::after{left:120%}.ngb:active{transform:translateY(0) scale(.97)}.ngb__txt{position:relative;z-index:1}

/* Underline Slide Links — Hover.css (MIT) */
.usl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:46px;background:#fff}
.usl__a{position:relative;color:#0a0a0a;text-decoration:none;font:600 22px/1 'Switzer',sans-serif;padding-bottom:6px}
.usl__a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:3px;background:#F5480F;border-radius:2px;transition:left .3s ease,right .3s ease}
.usl__a:hover::after{left:0;right:0}.usl__a--c::after{background:#0a0a0a}

/* Star Rating — Uiverse (MIT) */
.srt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff}
.srt__s{width:42px;height:42px;border:0;background:transparent;cursor:pointer;padding:0;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.8 5.9 20.4l1.4-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E");background-color:#0a0a0a1f;transition:background-color .15s,transform .15s}
.srt__s:hover{transform:scale(1.18)}.srt:not(:hover) .srt__s.is-on,.srt__s.is-hot{background-color:#F5480F}

// init(root):
var stars=[].slice.call(root.querySelectorAll('.srt__s'));var locked=0;
function paint(n){stars.forEach(function(s,i){s.classList.toggle('is-hot',i<n);});}
stars.forEach(function(s,i){s.addEventListener('mouseenter',function(){paint(i+1);});s.addEventListener('click',function(){locked=i+1;stars.forEach(function(x,j){x.classList.toggle('is-on',j<locked);});});});
root.querySelector('.srt').addEventListener('mouseleave',function(){paint(0);});

/* Segmented Control — Uiverse (MIT) */
.sgc-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff}
.sgc{position:relative;width:316px;height:54px;display:flex;background:#0a0a0a0d;border-radius:14px;padding:6px}
.sgc__pill{position:absolute;top:6px;left:6px;width:calc((100% - 12px)/3);height:calc(100% - 12px);background:#fff;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.12);transition:transform .35s cubic-bezier(.4,.1,.2,1)}
.sgc__b{flex:1;border:0;background:transparent;cursor:pointer;font:600 15px/1 'Switzer',sans-serif;color:#0a0a0a99;z-index:1;transition:color .3s}.sgc__b.is-active{color:#F5480F}

// init(root):
var btns=[].slice.call(root.querySelectorAll('.sgc__b'));var pill=root.querySelector('.sgc__pill');
btns.forEach(function(b,i){b.addEventListener('click',function(){btns.forEach(function(x){x.classList.remove('is-active');});b.classList.add('is-active');pill.style.transform='translateX('+(i*100)+'%)';});});

/* Hamburger to X — Animista (eigen) */
.hbx-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.hbx{width:72px;height:72px;border:0;border-radius:18px;background:#141414;cursor:pointer;display:grid;place-items:center;transition:background .3s}.hbx.is-open{background:#F5480F}
.hbx__lines{position:relative;width:34px;height:24px}.hbx__lines i{position:absolute;left:0;width:100%;height:3.5px;border-radius:3px;background:#fff;transition:transform .4s cubic-bezier(.5,0,.2,1),opacity .25s}
.hbx__lines i:nth-child(1){top:0}.hbx__lines i:nth-child(2){top:50%;transform:translateY(-50%)}.hbx__lines i:nth-child(3){bottom:0}
.hbx.is-open .hbx__lines i:nth-child(1){transform:translateY(10px) rotate(45deg)}.hbx.is-open .hbx__lines i:nth-child(2){opacity:0}.hbx.is-open .hbx__lines i:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

// init(root):
var b=root.querySelector('.hbx');b.addEventListener('click',function(){b.classList.toggle('is-open');});

/* Skeleton Shimmer — Uiverse (MIT) */
.skl-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#f4f3f1}
.skl{width:340px;height:128px;background:#fff;border:1px solid #0a0a0a12;border-radius:16px;display:flex;gap:18px;padding:22px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.skl__avatar{width:72px;height:72px;border-radius:50%;flex:none}.skl__lines{flex:1;display:flex;flex-direction:column;gap:13px}
.skl__l{height:14px;border-radius:7px;width:100%}.skl__l--title{width:62%;height:18px}.skl__l--short{width:40%}
.skl__avatar,.skl__l{background:linear-gradient(100deg,#0a0a0a0d 30%,#F5480F26 50%,#0a0a0a0d 70%);background-size:220% 100%;animation:sklSh 1.4s ease-in-out infinite}
@keyframes sklSh{0%{background-position:180% 0}100%{background-position:-80% 0}}

/* Copy Button — Uiverse (MIT) */
.cpb-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff}
.cpb{position:relative;width:206px;height:58px;border:2px solid #0a0a0a;border-radius:13px;background:#fff;color:#0a0a0a;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;font:600 16px/1 'Switzer',sans-serif;transition:background .3s,color .3s,border-color .3s}
.cpb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s,transform .25s}
.cpb__check{position:absolute;left:24px;opacity:0;transform:scale(.5)}.cpb__check path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s}
.cpb.is-done{background:#F5480F;border-color:#F5480F;color:#fff}.cpb.is-done .cpb__copy{opacity:0;transform:scale(.5)}.cpb.is-done .cpb__check{opacity:1;transform:scale(1)}.cpb.is-done .cpb__check path{stroke-dashoffset:0}

// init(root):
var b=root.querySelector('.cpb');var t=b.querySelector('.cpb__txt');var busy=false;
b.addEventListener('click',function(){if(busy)return;busy=true;try{navigator.clipboard&&navigator.clipboard.writeText('npm i neddev-ui');}catch(e){}b.classList.add('is-done');t.textContent='Gekopieerd';setTimeout(function(){b.classList.remove('is-done');t.textContent='Kopieer code';busy=false;},1600);});

/* Floating Label Input — eigen (eigen) */
.flbl-wrap{position:relative;width:300px;font-family:'Switzer',sans-serif}
.flbl-input{width:100%;box-sizing:border-box;padding:18px 14px 8px;font-size:15px;color:#0a0a0a;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:10px;outline:none;transition:border-color .2s}
.flbl-input:focus{border-color:#F5480F}
.flbl-label{position:absolute;left:14px;top:14px;color:rgba(10,10,10,.45);font-size:15px;pointer-events:none;transform-origin:left center;transition:transform .18s ease,color .18s ease}
.flbl-input:focus+.flbl-label,.flbl-input:not(:placeholder-shown)+.flbl-label{transform:translateY(-9px) scale(.78);color:#F5480F}
.flbl-bar{position:absolute;left:14px;right:14px;bottom:9px;height:2px;background:#F5480F;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.flbl-input:focus~.flbl-bar{transform:scaleX(1)}

/* Password Strength — eigen (eigen) */
.pstr-wrap{width:300px;font-family:'Switzer',sans-serif}
.pstr-input{width:100%;box-sizing:border-box;padding:12px 14px;font-size:15px;color:#0a0a0a;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:10px;outline:none;transition:border-color .2s}
.pstr-input:focus{border-color:#0a0a0a}
.pstr-track{display:flex;gap:6px;margin:10px 0 6px}
.pstr-seg{flex:1;height:5px;border-radius:3px;background:rgba(10,10,10,.12);transition:background .25s ease}
.pstr-label{font-size:12px;color:rgba(10,10,10,.55)}

// init(root):
root=root.querySelector('.pstr-wrap')||root;var inp=root.querySelector('.pstr-input'),segs=root.querySelectorAll('.pstr-seg'),lbl=root.querySelector('.pstr-label');var cols=['#e23','#e80','#fb0','#3a9'],txt=['Zwak','Matig','Goed','Sterk'];
inp.addEventListener('input',function(){var v=inp.value,s=0;if(v.length>=8)s++;if(/[A-Z]/.test(v)&&/[a-z]/.test(v))s++;if(/[0-9]/.test(v))s++;if(/[^A-Za-z0-9]/.test(v))s++;if(v.length===0)s=0;segs.forEach(function(sg,i){sg.style.background=i<s?cols[s-1]:'rgba(10,10,10,.12)';});lbl.textContent=v.length===0?'Voer een wachtwoord in':txt[Math.max(0,s-1)];lbl.style.color=v.length===0?'rgba(10,10,10,.55)':cols[Math.max(0,s-1)];});

/* OTP Pin Input — eigen (eigen) */
.otp-wrap{display:flex;gap:10px;font-family:'Switzer',sans-serif}
.otp-box{width:46px;height:56px;text-align:center;font-size:24px;font-weight:600;color:#0a0a0a;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:10px;outline:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.otp-box:focus{border-color:#F5480F;box-shadow:0 0 0 3px rgba(245,72,15,.15)}
.otp-box.otp-filled{border-color:#0a0a0a;transform:translateY(-2px)}

// init(root):
root=root.querySelector('.otp-wrap')||root;var bx=[].slice.call(root.querySelectorAll('.otp-box'));bx.forEach(function(b,i){b.addEventListener('input',function(){b.value=b.value.replace(/\D/g,'');b.classList.toggle('otp-filled',!!b.value);if(b.value&&bx[i+1])bx[i+1].focus();});b.addEventListener('keydown',function(e){if(e.key==='Backspace'&&!b.value&&bx[i-1])bx[i-1].focus();});b.addEventListener('paste',function(e){e.preventDefault();var d=(e.clipboardData.getData('text')||'').replace(/\D/g,'').slice(0,bx.length);d.split('').forEach(function(c,k){if(bx[k]){bx[k].value=c;bx[k].classList.add('otp-filled');}});if(bx[d.length-1])bx[Math.min(d.length,bx.length-1)].focus();});});

/* Range Slider — eigen (eigen) */
.rng-wrap{position:relative;width:300px;padding-top:34px;font-family:'Switzer',sans-serif}
.rng-track{position:relative;height:6px;border-radius:4px;background:rgba(10,10,10,.12);pointer-events:none}
.rng-fill{position:absolute;left:0;top:0;height:100%;width:50%;border-radius:4px;background:#F5480F}
.rng-input{position:absolute;left:0;right:0;bottom:0;width:100%;height:6px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.rng-input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #F5480F;box-shadow:0 2px 6px rgba(10,10,10,.2);transition:transform .12s}
.rng-input:active::-webkit-slider-thumb{transform:scale(1.2)}
.rng-input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #F5480F;cursor:pointer}
.rng-bubble{position:absolute;top:0;left:50%;transform:translateX(-50%);background:#0a0a0a;color:#fff;font-size:12px;font-weight:600;padding:3px 8px;border-radius:6px}
.rng-bubble::after{content:'';position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);border:4px solid transparent;border-top-color:#0a0a0a}

// init(root):
root=root.querySelector('.rng-wrap')||root;var inp=root.querySelector('.rng-input'),fill=root.querySelector('.rng-fill'),bub=root.querySelector('.rng-bubble');function upd(){var p=(inp.value-inp.min)/(inp.max-inp.min);fill.style.width=(p*100)+'%';bub.textContent=inp.value;bub.style.left='calc('+(p*100)+'% + '+((0.5-p)*20)+'px)';}inp.addEventListener('input',upd);upd();

/* Upload Dropzone — eigen (eigen) */
.fud-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:320px;height:160px;box-sizing:border-box;padding:20px;background:#fff;border:2px dashed rgba(10,10,10,.2);border-radius:14px;cursor:pointer;text-align:center;font-family:'Switzer',sans-serif;transition:border-color .2s,background .2s,transform .2s}
.fud-zone.fud-over{border-color:#F5480F;background:rgba(245,72,15,.05);transform:scale(1.02)}
.fud-input{display:none}.fud-ico{transition:transform .25s}.fud-zone.fud-over .fud-ico{transform:translateY(-4px)}
.fud-txt{font-size:14px;color:rgba(10,10,10,.6)}.fud-txt b{color:#F5480F}

// init(root):
root=root.querySelector('.fud-zone')||root;var inp=root.querySelector('.fud-input'),txt=root.querySelector('.fud-txt');['dragenter','dragover'].forEach(function(e){root.addEventListener(e,function(ev){ev.preventDefault();root.classList.add('fud-over');});});['dragleave','drop'].forEach(function(e){root.addEventListener(e,function(ev){ev.preventDefault();root.classList.remove('fud-over');});});root.addEventListener('drop',function(ev){var f=ev.dataTransfer.files[0];if(f){inp.files=ev.dataTransfer.files;txt.innerHTML='<b>'+f.name+'</b>';}});inp.addEventListener('change',function(){if(inp.files[0])txt.innerHTML='<b>'+inp.files[0].name+'</b>';});

/* Expanding Search — Uiverse (MIT) */
.sbx-wrap{display:flex;align-items:center;justify-content:flex-end;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:30px;padding:5px;width:56px;transition:width .35s cubic-bezier(.4,0,.2,1);overflow:hidden;font-family:'Switzer',sans-serif}
.sbx-wrap.sbx-open{width:320px}
.sbx-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:15px;color:#0a0a0a;padding:0 6px 0 14px;opacity:0;transition:opacity .25s}
.sbx-wrap.sbx-open .sbx-input{opacity:1}
.sbx-btn{flex:none;width:44px;height:44px;border-radius:50%;border:none;background:#F5480F;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.sbx-btn:active{transform:scale(.92)}

// init(root):
root=root.querySelector('.sbx-wrap')||root;var btn=root.querySelector('.sbx-btn'),inp=root.querySelector('.sbx-input');btn.addEventListener('click',function(){var open=root.classList.toggle('sbx-open');if(open)setTimeout(function(){inp.focus();},120);});inp.addEventListener('blur',function(){if(!inp.value)root.classList.remove('sbx-open');});

/* Radio Pill Group — eigen (eigen) */
.rpg-wrap{position:relative;display:inline-flex;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:30px;padding:5px;font-family:'Switzer',sans-serif}
.rpg-glider{position:absolute;top:5px;bottom:5px;border-radius:24px;background:#0a0a0a;transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)}
.rpg-pill{position:relative;z-index:1;cursor:pointer}.rpg-pill input{position:absolute;opacity:0;pointer-events:none}
.rpg-pill span{display:block;padding:9px 20px;font-size:14px;font-weight:600;color:rgba(10,10,10,.55);transition:color .25s;border-radius:24px}
.rpg-pill input:checked+span{color:#fff}

// init(root):
root=root.querySelector('.rpg-wrap')||root;var glider=root.querySelector('.rpg-glider'),pills=[].slice.call(root.querySelectorAll('.rpg-pill'));function move(p){glider.style.left=p.offsetLeft+'px';glider.style.width=p.offsetWidth+'px';}pills.forEach(function(p){p.querySelector('input').addEventListener('change',function(){move(p);});});var init=pills.filter(function(p){return p.querySelector('input').checked;})[0]||pills[0];requestAnimationFrame(function(){move(init);});

/* Tag Chip Input — eigen (eigen) */
.tci-wrap{display:flex;flex-wrap:wrap;gap:7px;align-items:center;width:320px;box-sizing:border-box;padding:9px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:12px;font-family:'Switzer',sans-serif;transition:border-color .2s}
.tci-wrap:focus-within{border-color:#F5480F}
.tci-chip{display:inline-flex;align-items:center;gap:5px;background:#0a0a0a;color:#fff;font-size:13px;padding:5px 6px 5px 11px;border-radius:20px;animation:tci-pop .2s ease}
@keyframes tci-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.tci-x{border:none;background:rgba(255,255,255,.2);color:#fff;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s}
.tci-x:hover{background:#F5480F}
.tci-input{flex:1;min-width:80px;border:none;outline:none;font-size:14px;color:#0a0a0a;background:transparent;padding:5px}

// init(root):
root=root.querySelector('.tci-wrap')||root;var inp=root.querySelector('.tci-input');function bind(x){x.addEventListener('click',function(){x.parentNode.remove();});}[].forEach.call(root.querySelectorAll('.tci-x'),bind);inp.addEventListener('keydown',function(e){if(e.key==='Enter'&&inp.value.trim()){e.preventDefault();var c=document.createElement('span');c.className='tci-chip';c.textContent=inp.value.trim();var b=document.createElement('button');b.className='tci-x';b.setAttribute('aria-label','verwijder');b.innerHTML='×';bind(b);c.appendChild(b);root.insertBefore(c,inp);inp.value='';}else if(e.key==='Backspace'&&!inp.value){var chips=root.querySelectorAll('.tci-chip');if(chips.length)chips[chips.length-1].remove();}});

/* Quantity Stepper — eigen (eigen) */
.qst-wrap{display:inline-flex;align-items:center;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:12px;overflow:hidden;font-family:'Switzer',sans-serif}
.qst-btn{width:46px;height:46px;border:none;background:#fff;color:#0a0a0a;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.qst-btn:hover{background:#F5480F;color:#fff}.qst-btn:active{transform:scale(.9)}
.qst-val{width:54px;text-align:center;border-left:1px solid rgba(10,10,10,.12);border-right:1px solid rgba(10,10,10,.12);height:46px;display:flex;align-items:center;justify-content:center}
.qst-num{font-size:17px;font-weight:600;color:#0a0a0a;display:inline-block}
.qst-num.qst-bump{animation:qst-b .25s ease}
@keyframes qst-b{0%{transform:scale(1)}40%{transform:scale(1.4);color:#F5480F}100%{transform:scale(1)}}

// init(root):
root=root.querySelector('.qst-wrap')||root;var num=root.querySelector('.qst-num');[].forEach.call(root.querySelectorAll('.qst-btn'),function(b){b.addEventListener('click',function(){var v=Math.max(0,parseInt(num.textContent,10)+parseInt(b.dataset.d,10));num.textContent=v;num.classList.remove('qst-bump');void num.offsetWidth;num.classList.add('qst-bump');});});

/* Select Dropdown — eigen (eigen) */
.asd-wrap{position:relative;width:300px;font-family:'Switzer',sans-serif}
.asd-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:10px;cursor:pointer;font-size:15px;color:#0a0a0a;transition:border-color .2s}
.asd-trigger:hover{border-color:#0a0a0a}.asd-arr{transition:transform .25s}.asd-wrap.asd-open .asd-arr{transform:rotate(180deg)}
.asd-list{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:10px;box-shadow:0 10px 30px rgba(10,10,10,.12);opacity:0;transform:translateY(-8px) scaleY(.96);transform-origin:top;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}
.asd-wrap.asd-open .asd-list{opacity:1;transform:none;pointer-events:auto}
.asd-list li{padding:10px 12px;border-radius:7px;font-size:14px;color:#0a0a0a;cursor:pointer;transition:background .12s}
.asd-list li:hover{background:rgba(245,72,15,.08)}
.asd-list li.asd-sel{color:#F5480F;font-weight:600;background:rgba(245,72,15,.06)}

// init(root):
root=root.querySelector('.asd-wrap')||root;var trg=root.querySelector('.asd-trigger'),cur=root.querySelector('.asd-cur'),opts=[].slice.call(root.querySelectorAll('.asd-list li'));trg.addEventListener('click',function(e){e.stopPropagation();root.classList.toggle('asd-open');});opts.forEach(function(o){o.addEventListener('click',function(){opts.forEach(function(x){x.classList.remove('asd-sel');});o.classList.add('asd-sel');cur.textContent=o.textContent;root.classList.remove('asd-open');});});document.addEventListener('click',function(e){if(!root.contains(e.target))root.classList.remove('asd-open');});

/* Success Button — eigen (eigen) */
.sck-btn{position:relative;min-width:160px;height:50px;padding:0 26px;border:none;border-radius:12px;background:#0a0a0a;color:#fff;font-size:15px;font-weight:600;font-family:'Switzer',sans-serif;cursor:pointer;overflow:hidden;transition:background .3s,min-width .3s}
.sck-btn.sck-loading{min-width:50px;padding:0;width:50px;border-radius:50%}
.sck-btn.sck-done{background:#1f9d55;min-width:50px;padding:0;width:50px;border-radius:50%}
.sck-label{transition:opacity .2s}.sck-btn.sck-loading .sck-label,.sck-btn.sck-done .sck-label{opacity:0}
.sck-spin{position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;opacity:0;animation:sck-rot .7s linear infinite}
.sck-btn.sck-loading .sck-spin{opacity:1}
@keyframes sck-rot{to{transform:rotate(360deg)}}
.sck-check{position:absolute;top:50%;left:50%;margin:-11px 0 0 -11px;opacity:0;stroke-dasharray:30;stroke-dashoffset:30}
.sck-btn.sck-done .sck-check{opacity:1;animation:sck-draw .4s ease forwards}
@keyframes sck-draw{to{stroke-dashoffset:0}}

// init(root):
root=root.querySelector('.sck-btn')||root;root.addEventListener('click',function(){if(root.classList.contains('sck-loading')||root.classList.contains('sck-done'))return;root.classList.add('sck-loading');setTimeout(function(){root.classList.remove('sck-loading');root.classList.add('sck-done');setTimeout(function(){root.classList.remove('sck-done');},1600);},1300);});

/* Like Heart Burst — eigen (eigen) */
.lhb-btn{position:relative;display:inline-flex;align-items:center;gap:9px;padding:11px 18px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:30px;cursor:pointer;font-family:'Switzer',sans-serif;font-size:15px;font-weight:600;color:#0a0a0a}
.lhb-heart{fill:rgba(10,10,10,.18);transition:transform .25s,fill .25s}
.lhb-btn.lhb-on .lhb-heart{fill:#F5480F;animation:lhb-beat .4s ease}
@keyframes lhb-beat{0%{transform:scale(1)}30%{transform:scale(.7)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.lhb-spark{position:absolute;left:24px;top:50%;width:6px;height:6px;border-radius:50%;background:#F5480F;pointer-events:none;opacity:0}
.lhb-spark.go{animation:lhb-fly .55s ease-out forwards}
@keyframes lhb-fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

// init(root):
root=root.querySelector('.lhb-btn')||root;var cnt=root.querySelector('.lhb-count'),base=128;root.addEventListener('click',function(){var on=root.classList.toggle('lhb-on');root.setAttribute('aria-pressed',on);cnt.textContent=base+(on?1:0);if(on){for(var i=0;i<8;i++){(function(a){var s=document.createElement('span');s.className='lhb-spark';var ang=a/8*6.28,dist=26+Math.random()*16;s.style.setProperty('--dx',Math.cos(ang)*dist+'px');s.style.setProperty('--dy',Math.sin(ang)*dist+'px');root.appendChild(s);requestAnimationFrame(function(){s.classList.add('go');});setTimeout(function(){s.remove();},600);})(i);}}});

/* Validation Shake — Animista (MIT) */
.vsi-wrap{display:flex;flex-direction:column;gap:10px;width:300px;font-family:'Switzer',sans-serif}
.vsi-input{padding:12px 14px;font-size:15px;color:#0a0a0a;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:10px;outline:none;transition:border-color .2s,box-shadow .2s}
.vsi-input:focus{border-color:#0a0a0a}
.vsi-input.vsi-err{border-color:#e23;box-shadow:0 0 0 3px rgba(238,34,51,.12);animation:vsi-shake .4s}
.vsi-input.vsi-ok{border-color:#1f9d55;box-shadow:0 0 0 3px rgba(31,157,85,.12)}
@keyframes vsi-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.vsi-btn{padding:11px;border:none;border-radius:10px;background:#F5480F;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s}
.vsi-btn:hover{opacity:.9}
.vsi-msg{font-size:13px;min-height:16px}.vsi-msg.err{color:#e23}.vsi-msg.ok{color:#1f9d55}

// init(root):
root=root.querySelector('.vsi-wrap')||root;var inp=root.querySelector('.vsi-input'),msg=root.querySelector('.vsi-msg');root.addEventListener('submit',function(e){e.preventDefault();inp.classList.remove('vsi-err','vsi-ok');msg.classList.remove('err','ok');if(inp.value.trim().length<4){void inp.offsetWidth;inp.classList.add('vsi-err');msg.textContent='Minimaal 4 tekens vereist';msg.classList.add('err');}else{inp.classList.add('vsi-ok');msg.textContent='Ziet er goed uit!';msg.classList.add('ok');}});

/* Social Login Row — Hover.css (MIT) */
.slr-row{display:flex;flex-direction:column;gap:10px;width:280px;font-family:'Switzer',sans-serif}
.slr-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;overflow:hidden;border:1px solid rgba(10,10,10,.12);transition:transform .2s,box-shadow .2s}
.slr-btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .5s}
.slr-btn:hover::before{left:130%}
.slr-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(10,10,10,.15)}
.slr-g{background:#fff;color:#0a0a0a}.slr-a{background:#0a0a0a;color:#fff;border-color:#0a0a0a}.slr-f{background:#1877f2;color:#fff;border-color:#1877f2}

/* Sliding Tabs — Aceternity (eigen) */
.stb{width:360px;font-family:'Switzer',sans-serif}
.stb-track{position:relative;display:flex;gap:2px;padding:5px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:14px;box-shadow:0 6px 20px -12px rgba(10,10,10,.25)}
.stb-tab{position:relative;z-index:2;flex:1;padding:9px 4px;border:0;background:none;font-size:13px;font-weight:600;color:rgba(10,10,10,.55);cursor:pointer;border-radius:10px;transition:color .25s}
.stb-tab.is-on{color:#fff}
.stb-pill{position:absolute;z-index:1;top:5px;height:calc(100% - 10px);background:#0a0a0a;border-radius:10px;transition:transform .35s cubic-bezier(.6,.05,.1,1),width .35s cubic-bezier(.6,.05,.1,1)}

// init(root):
root=root.querySelector('.stb')||root;var track=root.querySelector('.stb-track'),pill=root.querySelector('.stb-pill'),tabs=[].slice.call(root.querySelectorAll('.stb-tab'));function move(t){var r=t.getBoundingClientRect(),pr=track.getBoundingClientRect();pill.style.width=r.width+'px';pill.style.transform='translateX('+(r.left-pr.left-5)+'px)';tabs.forEach(function(x){x.classList.toggle('is-on',x===t);});}tabs.forEach(function(t){t.addEventListener('click',function(){move(t);});});requestAnimationFrame(function(){move(tabs[0]);});

/* Pricing Spotlight — Cult UI (MIT) */
.psl{position:relative;width:300px;border-radius:18px;padding:1px;background:rgba(10,10,10,.12);overflow:hidden;font-family:'Switzer',sans-serif}
.psl-glow{position:absolute;width:240px;height:240px;left:var(--x,50%);top:var(--y,0);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(245,72,15,.35),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.psl:hover .psl-glow{opacity:1}
.psl-body{position:relative;background:#fff;border-radius:17px;padding:24px}
.psl-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#F5480F;background:rgba(245,72,15,.1);padding:4px 10px;border-radius:99px}
.psl-price{font-size:40px;font-weight:800;color:#0a0a0a;margin:14px 0 4px}.psl-price small{font-size:14px;font-weight:600;color:rgba(10,10,10,.5)}
.psl-feat{list-style:none;margin:14px 0 18px;padding:0;font-size:13px;color:rgba(10,10,10,.7)}
.psl-feat li{padding:6px 0 6px 22px;position:relative}.psl-feat li::before{content:'';position:absolute;left:0;top:11px;width:12px;height:12px;border-radius:50%;background:rgba(245,72,15,.15);box-shadow:inset 0 0 0 2px #F5480F}
.psl-cta{width:100%;padding:11px;border:0;border-radius:11px;background:#0a0a0a;color:#fff;font-weight:600;font-size:14px;cursor:pointer;transition:transform .2s}.psl-cta:hover{transform:translateY(-2px)}

// init(root):
root=root.querySelector('.psl')||root;root.addEventListener('pointermove',function(e){var r=root.getBoundingClientRect();root.style.setProperty('--x',(e.clientX-r.left)+'px');root.style.setProperty('--y',(e.clientY-r.top)+'px');});

/* Stat Counter Cards — eigen (eigen) */
.scc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:360px;font-family:'Switzer',sans-serif}
.scc-card{background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:14px;padding:16px 10px;text-align:center;transition:transform .25s,box-shadow .25s}
.scc-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px -16px rgba(10,10,10,.4)}
.scc-num{font-size:26px;font-weight:800;color:#0a0a0a;font-variant-numeric:tabular-nums}
.scc-lab{font-size:11px;font-weight:600;color:rgba(10,10,10,.5);margin-top:4px}

// init(root):
root=root.querySelector('.scc')||root;var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var nums=[].slice.call(root.querySelectorAll('.scc-num'));function run(el){var to=+el.dataset.to,suf=el.dataset.suf||'';if(reduce){el.textContent=to+suf;return;}var t0=performance.now(),d=1100;(function tick(t){var p=Math.min((t-t0)/d,1),e=1-Math.pow(1-p,3);el.textContent=Math.round(to*e)+suf;if(p<1)requestAnimationFrame(tick);})(t0);}var io=new IntersectionObserver(function(es){es.forEach(function(en){if(en.isIntersecting){run(en.target);io.unobserve(en.target);}});},{threshold:.4});nums.forEach(function(n){io.observe(n);});

/* Progress Stepper — eigen (eigen) */
.pst{position:relative;width:360px;font-family:'Switzer',sans-serif;padding:8px 18px}
.pst-line{position:absolute;top:26px;left:38px;right:38px;height:3px;background:rgba(10,10,10,.12);border-radius:9px}
.pst-fill{position:absolute;left:0;top:0;height:100%;width:0;background:#F5480F;border-radius:9px;transition:width 1s cubic-bezier(.6,.05,.1,1)}
.pst-steps{position:relative;display:flex;justify-content:space-between}
.pst-step{display:flex;flex-direction:column;align-items:center;gap:8px}
.pst-dot{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#fff;border:2px solid rgba(10,10,10,.18);font-size:13px;font-weight:700;color:rgba(10,10,10,.5);transition:.3s}
.pst-step.is-done .pst-dot{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.pst-step.is-on .pst-dot{border-color:#F5480F;color:#F5480F;box-shadow:0 0 0 4px rgba(245,72,15,.15)}
.pst-txt{font-size:11px;font-weight:600;color:rgba(10,10,10,.6)}

// init(root):
root=root.querySelector('.pst')||root;var fill=root.querySelector('.pst-fill'),steps=[].slice.call(root.querySelectorAll('.pst-step'));var onIdx=steps.findIndex(function(s){return s.classList.contains('is-on');});var pct=(onIdx/(steps.length-1))*100;var io=new IntersectionObserver(function(es){es.forEach(function(en){if(en.isIntersecting){fill.style.width=pct+'%';io.disconnect();}});},{threshold:.4});io.observe(root);

/* Vertical Timeline — eigen (eigen) */
.vtl{position:relative;width:340px;padding-left:26px;font-family:'Switzer',sans-serif}
.vtl::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:rgba(10,10,10,.12)}
.vtl-item{position:relative;margin-bottom:14px;opacity:0;transform:translateX(12px);transition:.5s}
.vtl-item.in{opacity:1;transform:none}
.vtl-node{position:absolute;left:-26px;top:6px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #F5480F}
.vtl-card{background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:12px;padding:11px 14px}
.vtl-card b{font-size:13px;color:#0a0a0a}.vtl-card p{margin:3px 0 0;font-size:12px;color:rgba(10,10,10,.6)}

// init(root):
root=root.querySelector('.vtl')||root;var items=[].slice.call(root.querySelectorAll('.vtl-item'));var io=new IntersectionObserver(function(es){es.forEach(function(en){if(en.isIntersecting){var i=items.indexOf(en.target);setTimeout(function(){en.target.classList.add('in');},i*120);io.unobserve(en.target);}});},{threshold:.3});items.forEach(function(i){io.observe(i);});

/* Toast Stack — Cult UI (MIT) */
.tst{width:360px;display:flex;flex-direction:column;align-items:center;gap:14px;font-family:'Switzer',sans-serif}
.tst-btn{padding:10px 18px;border:0;border-radius:11px;background:#0a0a0a;color:#fff;font-weight:600;font-size:14px;cursor:pointer}
.tst-zone{width:100%;display:flex;flex-direction:column;gap:8px;min-height:60px}
.tst-toast{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(10,10,10,.12);border-left:3px solid #F5480F;border-radius:11px;padding:11px 14px;box-shadow:0 10px 24px -16px rgba(10,10,10,.5);opacity:0;transform:translateY(-8px) scale(.97);transition:.3s}
.tst-toast.in{opacity:1;transform:none}.tst-toast.out{opacity:0;transform:translateX(20px)}
.tst-ic{width:22px;height:22px;flex:none;border-radius:50%;background:rgba(245,72,15,.12);display:grid;place-items:center;color:#F5480F;font-weight:700;font-size:13px}
.tst-tx b{font-size:13px;color:#0a0a0a;display:block}.tst-tx span{font-size:11px;color:rgba(10,10,10,.55)}

// init(root):
root=root.querySelector('.tst')||root;var btn=root.querySelector('.tst-btn'),zone=root.querySelector('.tst-zone');var msgs=[['Opgeslagen','Wijzigingen bewaard.'],['Verzonden','E-mail is verstuurd.'],['Klaar','Build voltooid.']];var n=0;btn.addEventListener('click',function(){var m=msgs[n++%msgs.length];var t=document.createElement('div');t.className='tst-toast';t.innerHTML='<span class="tst-ic">!</span><div class="tst-tx"><b>'+m[0]+'</b><span>'+m[1]+'</span></div>';zone.prepend(t);while(zone.children.length>3)zone.lastChild.remove();requestAnimationFrame(function(){t.classList.add('in');});setTimeout(function(){t.classList.add('out');setTimeout(function(){t.remove();},300);},3200);});

/* Avatar Fan Stack — Uiverse (MIT) */
.avf{width:300px;display:flex;flex-direction:column;align-items:center;gap:12px;font-family:'Switzer',sans-serif}
.avf-row{display:flex}
.avf-a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:var(--c,#0a0a0a);border:3px solid #fff;margin-left:-14px;box-shadow:0 4px 10px -4px rgba(10,10,10,.5);transition:margin .35s cubic-bezier(.6,.05,.1,1),transform .25s}
.avf-a:first-child{margin-left:0}.avf-more{background:#fff;color:rgba(10,10,10,.6);border:3px solid rgba(10,10,10,.12)}
.avf-row:hover .avf-a{margin-left:4px}.avf-row:hover .avf-a:first-child{margin-left:0}.avf-a:hover{transform:translateY(-6px)}
.avf-lab{font-size:12px;font-weight:600;color:rgba(10,10,10,.55)}

/* Status Badge Set — eigen (eigen) */
.bdg{display:flex;flex-wrap:wrap;gap:9px;width:340px;justify-content:center;font-family:'Switzer',sans-serif}
.bdg-p{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;font-size:12px;font-weight:600}
.bdg-d{width:7px;height:7px;border-radius:50%;background:#F5480F;position:relative}
.bdg-d::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px solid #F5480F;animation:bdgp 1.8s ease-out infinite}
@keyframes bdgp{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}
.bdg-live{background:rgba(245,72,15,.1);color:#F5480F}.bdg-warn{background:rgba(10,10,10,.06);color:#0a0a0a}.bdg-ink{background:#0a0a0a;color:#fff}.bdg-soft{background:rgba(10,10,10,.04);color:rgba(10,10,10,.5)}.bdg-out{background:#fff;color:#0a0a0a;box-shadow:inset 0 0 0 1px rgba(10,10,10,.18)}

/* Multi Accordion — eigen (eigen) */
.acc{width:340px;display:flex;flex-direction:column;gap:8px;font-family:'Switzer',sans-serif}
.acc-item{background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:12px;overflow:hidden}
.acc-hd{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border:0;background:none;font-size:13px;font-weight:600;color:#0a0a0a;cursor:pointer;text-align:left}
.acc-ic{position:relative;width:13px;height:13px;flex:none}
.acc-ic::before,.acc-ic::after{content:'';position:absolute;background:#F5480F;border-radius:2px;transition:transform .3s}
.acc-ic::before{left:0;top:5.5px;width:13px;height:2px}.acc-ic::after{left:5.5px;top:0;width:2px;height:13px}
.acc-item.open .acc-ic::after{transform:scaleY(0)}
.acc-bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.acc-item.open .acc-bd{grid-template-rows:1fr}
.acc-bd>p{overflow:hidden;margin:0;padding:0 15px;font-size:12px;color:rgba(10,10,10,.6);line-height:1.6}
.acc-item.open .acc-bd>p{padding-bottom:14px}

// init(root):
root=root.querySelector('.acc')||root;root.querySelectorAll('.acc-hd').forEach(function(h){h.addEventListener('click',function(){h.parentElement.classList.toggle('open');});});

/* Modal Pop — Aceternity (eigen) */
.mdp{position:relative;width:360px;height:230px;display:grid;place-items:center;font-family:'Switzer',sans-serif}
.mdp-open{padding:10px 18px;border:0;border-radius:11px;background:#0a0a0a;color:#fff;font-weight:600;font-size:14px;cursor:pointer}
.mdp-back{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,10,.4);border-radius:14px;opacity:0;pointer-events:none;transition:opacity .25s}
.mdp-back.show{opacity:1;pointer-events:auto}
.mdp-box{width:240px;background:#fff;border-radius:16px;padding:22px;text-align:center;transform:scale(.85);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s}
.mdp-back.show .mdp-box{transform:scale(1);opacity:1}
.mdp-icon{width:42px;height:42px;margin:0 auto 10px;border-radius:50%;background:rgba(245,72,15,.12);color:#F5480F;display:grid;place-items:center;font-size:20px;font-weight:700}
.mdp-box b{font-size:15px;color:#0a0a0a}.mdp-box p{margin:6px 0 16px;font-size:12px;color:rgba(10,10,10,.6)}
.mdp-row{display:flex;gap:8px}.mdp-row button{flex:1;padding:9px;border-radius:10px;font-weight:600;font-size:13px;cursor:pointer}
.mdp-no{border:1px solid rgba(10,10,10,.18);background:#fff;color:#0a0a0a}.mdp-yes{border:0;background:#F5480F;color:#fff}

// init(root):
root=root.querySelector('.mdp')||root;var back=root.querySelector('.mdp-back');root.querySelector('.mdp-open').addEventListener('click',function(){back.classList.add('show');});back.addEventListener('click',function(e){if(e.target===back||e.target.classList.contains('mdp-no')||e.target.classList.contains('mdp-yes'))back.classList.remove('show');});

/* Animated Donut — eigen (eigen) */
.dnt{position:relative;width:200px;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:'Switzer',sans-serif}
.dnt-svg{width:160px;height:160px;transform:rotate(-90deg)}
.dnt-tr{fill:none;stroke:rgba(10,10,10,.1);stroke-width:12}
.dnt-vl{fill:none;stroke:#F5480F;stroke-width:12;stroke-linecap:round;stroke-dasharray:301.6;stroke-dashoffset:301.6;transition:stroke-dashoffset 1.2s cubic-bezier(.6,.05,.1,1)}
.dnt-mid{position:absolute;top:38px;left:0;right:0;display:flex;flex-direction:column;align-items:center}
.dnt-pct{font-size:30px;font-weight:800;color:#0a0a0a;font-variant-numeric:tabular-nums}.dnt-sub{font-size:11px;font-weight:600;color:rgba(10,10,10,.5)}
.dnt-lab{font-size:12px;font-weight:600;color:rgba(10,10,10,.6)}

// init(root):
root=root.querySelector('.dnt')||root;var vl=root.querySelector('.dnt-vl'),pctEl=root.querySelector('.dnt-pct');var C=2*Math.PI*48,target=72,reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;function go(){vl.style.strokeDashoffset=C*(1-target/100);if(reduce){pctEl.textContent=target+'%';return;}var t0=performance.now();(function tick(t){var p=Math.min((t-t0)/1200,1),e=1-Math.pow(1-p,3);pctEl.textContent=Math.round(target*e)+'%';if(p<1)requestAnimationFrame(tick);})(t0);}var io=new IntersectionObserver(function(es){es.forEach(function(en){if(en.isIntersecting){go();io.disconnect();}});},{threshold:.4});io.observe(root);

npm i @neddev/ui
import { Button } from '@neddev/ui'

/* Code Block Copy — Cult UI (MIT) */
.cdc{width:360px;background:#0a0a0a;border-radius:14px;overflow:hidden;font-family:'JetBrains Mono',monospace;box-shadow:0 14px 30px -18px rgba(10,10,10,.7)}
.cdc-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.cdc-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.cdc-name{margin-left:8px;font-size:11px;color:rgba(255,255,255,.55);font-family:'Switzer',sans-serif}
.cdc-cp{margin-left:auto;padding:5px 11px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;border-radius:8px;font-size:11px;font-family:'Switzer',sans-serif;font-weight:600;cursor:pointer;transition:.2s}
.cdc-cp:hover{background:rgba(255,255,255,.12)}.cdc-cp.done{background:#F5480F;border-color:#F5480F}
.cdc-pre{margin:0;padding:16px;font-size:12.5px;line-height:1.7;color:#e6e6e6;white-space:pre-wrap}.cdc-pre code{color:#e6e6e6}

// init(root):
root=root.querySelector('.cdc')||root;var btn=root.querySelector('.cdc-cp'),lab=root.querySelector('.cdc-cplab'),code=root.querySelector('code').textContent;btn.addEventListener('click',function(){function done(){btn.classList.add('done');lab.textContent='Gekopieerd';setTimeout(function(){btn.classList.remove('done');lab.textContent='Kopieer';},1600);}if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(code).then(done).catch(done);}else done();});

/* Hover Breadcrumb — eigen (eigen) */
.hbc{display:flex;align-items:center;gap:4px;width:360px;flex-wrap:wrap;justify-content:center;font-family:'Switzer',sans-serif;font-size:13px}
.hbc-item{display:inline-flex;align-items:center;padding:6px 10px;color:rgba(10,10,10,.55);text-decoration:none;border-radius:9px;font-weight:600;transition:background .25s,color .25s}
.hbc-item:hover{background:rgba(245,72,15,.1);color:#F5480F}
.hbc-dot{width:0;height:6px;border-radius:50%;background:#F5480F;margin-right:0;transition:width .25s,margin .25s}
.hbc-item:hover .hbc-dot{width:6px;margin-right:7px}
.hbc-cur{color:#0a0a0a;background:rgba(10,10,10,.06);cursor:default}.hbc-sep{color:rgba(10,10,10,.25)}

/* Cursor Ring Follower — eigen (eigen) */
.crf-stage{position:absolute;inset:0;overflow:hidden;cursor:none;background:#fff;font-family:'Switzer',system-ui,sans-serif;display:flex;align-items:center;justify-content:center}
.crf-grid{display:flex;gap:14px}
.crf-hot{cursor:none;padding:14px 22px;border:1px solid rgba(10,10,10,.12);background:#fff;color:#0a0a0a;border-radius:12px;font-size:14px;font-weight:600;transition:background .2s,color .2s}
.crf-hot:hover{background:#0a0a0a;color:#fff}
.crf-ring{position:absolute;top:0;left:0;width:38px;height:38px;border:1.5px solid #F5480F;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s;z-index:5;mix-blend-mode:multiply}
.crf-dot{position:absolute;top:0;left:0;width:6px;height:6px;background:#0a0a0a;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:6}
.crf-stage.is-hot .crf-ring{width:60px;height:60px;background:rgba(245,72,15,.08)}
.crf-hint{position:absolute;bottom:14px;left:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(10,10,10,.4)}
@media(hover:none){.crf-ring,.crf-dot{display:none}.crf-stage{cursor:auto}.crf-hot{cursor:pointer}}

// init(root):
root=root.querySelector('.crf-stage')||root;var ring=root.querySelector('.crf-ring'),dot=root.querySelector('.crf-dot');var mx=0,my=0,rx=0,ry=0;var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;
root.addEventListener('mousemove',function(e){var r=root.getBoundingClientRect();mx=e.clientX-r.left;my=e.clientY-r.top;dot.style.transform='translate('+mx+'px,'+my+'px) translate(-50%,-50%)';if(reduce)ring.style.transform=dot.style.transform;});
root.addEventListener('mouseleave',function(){ring.style.opacity='0';dot.style.opacity='0';});root.addEventListener('mouseenter',function(){ring.style.opacity='1';dot.style.opacity='1';});
root.querySelectorAll('.crf-hot').forEach(function(b){b.addEventListener('mouseenter',function(){root.classList.add('is-hot');});b.addEventListener('mouseleave',function(){root.classList.remove('is-hot');});});
if(!reduce){(function loop(){rx+=(mx-rx)*.16;ry+=(my-ry)*.16;ring.style.transform='translate('+rx+'px,'+ry+'px) translate(-50%,-50%)';requestAnimationFrame(loop);})();}

/* Before / After Compare — CSS Script (MIT) */
.bac-wrap{position:relative;width:340px;max-width:88%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid rgba(10,10,10,.12);user-select:none;font-family:'Switzer',system-ui,sans-serif;touch-action:none}
.bac-img{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-start}
.bac-after{background:linear-gradient(135deg,#0a0a0a,#3a3a3a)}
.bac-before{background:repeating-linear-gradient(45deg,#fff,#fff 12px,#f1f1f1 12px,#f1f1f1 24px);clip-path:inset(0 50% 0 0)}
.bac-tag{margin:12px;font-size:10px;font-weight:700;letter-spacing:.16em;padding:5px 9px;border-radius:6px}
.bac-after .bac-tag{background:rgba(255,255,255,.15);color:#fff}.bac-before .bac-tag{background:#0a0a0a;color:#fff}
.bac-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);z-index:4;cursor:ew-resize}
.bac-line{position:absolute;inset:0;background:#F5480F}
.bac-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid #F5480F;color:#F5480F;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;box-shadow:0 4px 12px rgba(10,10,10,.18)}

// init(root):
root=root.querySelector('.bac-wrap')||root;var before=root.querySelector('.bac-before'),handle=root.querySelector('.bac-handle');function set(p){p=Math.max(2,Math.min(98,p));before.style.clipPath='inset(0 '+(100-p)+'% 0 0)';handle.style.left=p+'%';}function fromEvt(e){var r=root.getBoundingClientRect();var x=(e.touches?e.touches[0].clientX:e.clientX)-r.left;set(x/r.width*100);}var drag=false;root.addEventListener('mousedown',function(e){drag=true;fromEvt(e);});window.addEventListener('mousemove',function(e){if(drag)fromEvt(e);});window.addEventListener('mouseup',function(){drag=false;});root.addEventListener('touchstart',function(e){drag=true;fromEvt(e);},{passive:true});window.addEventListener('touchmove',function(e){if(drag){fromEvt(e);}},{passive:true});window.addEventListener('touchend',function(){drag=false;});set(50);

/* Swipe Card Deck — Codrops (MIT) */
.scd-deck{position:relative;width:200px;height:260px;font-family:'Switzer',system-ui,sans-serif}
.scd-card{position:absolute;inset:0;border-radius:18px;background:#fff;border:1px solid rgba(10,10,10,.12);box-shadow:0 10px 30px rgba(10,10,10,.10);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;cursor:grab;will-change:transform;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.scd-card b{font-size:22px;color:#0a0a0a;letter-spacing:-.01em}.scd-card span{font-size:13px;color:#F5480F;font-weight:600;margin-top:4px}
.scd-card::before{content:'';position:absolute;top:18px;left:18px;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#F5480F,#0a0a0a)}
.scd-card.is-drag{transition:none;cursor:grabbing}
.scd-hint{position:absolute;bottom:-26px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,10,.4)}

// init(root):
root=root.querySelector('.scd-deck')||root;var cards=[].slice.call(root.querySelectorAll('.scd-card'));var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;function layout(){cards.forEach(function(c,i){var d=cards.length-1-i;c.style.zIndex=i;c.style.transform='translateY('+(d*-8)+'px) scale('+(1-d*.04)+')';c.style.opacity=d>3?'0':'1';});}layout();
function bindTop(){var top=cards[cards.length-1];if(!top)return;var sx=0,dx=0,dragging=false;function down(e){dragging=true;sx=(e.touches?e.touches[0].clientX:e.clientX);top.classList.add('is-drag');window.addEventListener('mousemove',move);window.addEventListener('mouseup',up);window.addEventListener('touchmove',move,{passive:true});window.addEventListener('touchend',up);}function move(e){if(!dragging)return;var x=(e.touches?e.touches[0].clientX:e.clientX);dx=x-sx;top.style.transform='translateX('+dx+'px) rotate('+(dx*.06)+'deg)';}function up(){if(!dragging)return;dragging=false;top.classList.remove('is-drag');window.removeEventListener('mousemove',move);window.removeEventListener('mouseup',up);window.removeEventListener('touchmove',move);window.removeEventListener('touchend',up);if(Math.abs(dx)>80&&!reduce){var dir=dx>0?1:-1;top.style.transform='translateX('+(dir*420)+'px) rotate('+(dir*22)+'deg)';top.style.opacity='0';setTimeout(function(){cards.pop();cards.unshift(top);top.style.transition='none';top.style.opacity='';top.style.transform='translateY(-24px) scale(.88)';requestAnimationFrame(function(){top.style.transition='';layout();bindTop();});},360);}else{layout();}}top.addEventListener('mousedown',down);top.addEventListener('touchstart',down,{passive:true});}bindTop();

/* Keyboard Shortcut Keys — eigen (eigen) */
.ksk-wrap{text-align:center;font-family:'Switzer',system-ui,sans-serif}
.ksk-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,10,.45);margin:0 0 16px}
.ksk-combo{display:flex;align-items:center;justify-content:center;gap:10px}.ksk-plus{color:rgba(10,10,10,.35);font-size:18px}
.ksk-key{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:600;color:#0a0a0a;background:#fff;min-width:30px;padding:10px 14px;border-radius:9px;border:1px solid rgba(10,10,10,.14);box-shadow:0 4px 0 rgba(10,10,10,.16),0 6px 10px rgba(10,10,10,.10);transition:transform .08s,box-shadow .08s,background .12s,color .12s;cursor:pointer}
.ksk-key.is-down{transform:translateY(4px);box-shadow:0 0 0 rgba(10,10,10,.16);background:#F5480F;color:#fff;border-color:#F5480F}

// init(root):
root=root.querySelector('.ksk-wrap')||root;var keys=[].slice.call(root.querySelectorAll('.ksk-key'));function find(k){return keys.filter(function(e){return e.dataset.k.toLowerCase()===String(k).toLowerCase();});}function press(el){el.classList.add('is-down');}function release(el){el.classList.remove('is-down');}keys.forEach(function(el){el.addEventListener('mousedown',function(){press(el);});el.addEventListener('mouseup',function(){release(el);});el.addEventListener('mouseleave',function(){release(el);});el.addEventListener('touchstart',function(){press(el);},{passive:true});el.addEventListener('touchend',function(){release(el);});});window.addEventListener('keydown',function(e){find(e.key).forEach(press);});window.addEventListener('keyup',function(e){find(e.key).forEach(release);});

/* Mini Player Bars — CodeShack (MIT) */
.abp-card{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;background:#fff;border:1px solid rgba(10,10,10,.12);box-shadow:0 8px 24px rgba(10,10,10,.07);font-family:'Switzer',system-ui,sans-serif;width:280px}
.abp-btn{flex:none;width:46px;height:46px;border-radius:50%;border:none;background:#0a0a0a;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.abp-btn:hover{background:#F5480F}
.abp-play{width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.abp-pause{width:13px;height:15px;border-left:4px solid #fff;border-right:4px solid #fff;box-sizing:border-box}
.abp-meta{min-width:0}.abp-meta b{display:block;font-size:15px;color:#0a0a0a}.abp-meta small{display:block;font-size:12px;color:rgba(10,10,10,.5);margin-bottom:8px}
.abp-bars{display:flex;align-items:flex-end;gap:3px;height:22px}.abp-bars i{width:3px;height:6px;background:#F5480F;border-radius:2px;transform-origin:bottom}
.abp-card.is-playing .abp-bars i{animation:abp-eq var(--d) ease-in-out infinite alternate}
@keyframes abp-eq{from{height:4px}to{height:22px}}

// init(root):
root=root.querySelector('.abp-card')||root;var btn=root.querySelector('.abp-btn'),ico=root.querySelector('.abp-ico');var playing=false;btn.addEventListener('click',function(){playing=!playing;root.classList.toggle('is-playing',playing);ico.className='abp-ico '+(playing?'abp-pause':'abp-play');});

/* Animated Map Pin — CodePen (MIT) */
.mpp-map{position:relative;width:300px;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(10,10,10,.12);font-family:'Switzer',system-ui,sans-serif}
.mpp-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(10,10,10,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,10,.05) 1px,transparent 1px);background-size:26px 26px}
.mpp-anchor{position:absolute;top:46%;left:50%;transform:translate(-50%,-100%)}
.mpp-pin{position:absolute;bottom:0;left:50%;width:22px;height:22px;background:#F5480F;border:3px solid #fff;border-radius:50% 50% 50% 0;transform:translate(-50%,0) rotate(-45deg);box-shadow:0 3px 8px rgba(10,10,10,.25);animation:mpp-drop .7s cubic-bezier(.34,1.56,.64,1) both}
.mpp-pulse{position:absolute;bottom:-6px;left:50%;width:18px;height:18px;border-radius:50%;background:rgba(245,72,15,.4);transform:translate(-50%,50%);animation:mpp-pulse 2s ease-out infinite;animation-delay:.7s}
.mpp-shadow{position:absolute;bottom:-8px;left:50%;width:18px;height:5px;border-radius:50%;background:rgba(10,10,10,.18);transform:translate(-50%,0);filter:blur(1px)}
.mpp-tag{position:absolute;top:46%;left:50%;transform:translate(18px,-40px);font-size:11px;font-weight:600;color:#0a0a0a;background:#fff;padding:4px 9px;border-radius:7px;border:1px solid rgba(10,10,10,.12);box-shadow:0 3px 8px rgba(10,10,10,.10);animation:mpp-fade .4s .7s both}
@keyframes mpp-drop{0%{transform:translate(-50%,-30px) rotate(-45deg);opacity:0}100%{transform:translate(-50%,0) rotate(-45deg);opacity:1}}
@keyframes mpp-pulse{0%{width:18px;height:18px;opacity:.6}100%{width:80px;height:80px;opacity:0}}
@keyframes mpp-fade{from{opacity:0;transform:translate(18px,-30px)}to{opacity:1;transform:translate(18px,-40px)}}

/* Ripple Grid Hover — Codrops (MIT) */
.rgh-stage{position:absolute;inset:0;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
.rgh-grid{position:absolute;inset:0;display:grid;padding:14px;gap:7px}
.rgh-cell{border-radius:5px;background:rgba(10,10,10,.06);transform:scale(.7);transition:transform .25s ease,background .25s ease;will-change:transform}

// init(root):
root=root.querySelector('.rgh-stage')||root;var grid=root.querySelector('.rgh-grid');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var cols=11,rows=7,cells=[];grid.style.gridTemplateColumns='repeat('+cols+',1fr)';grid.style.gridTemplateRows='repeat('+rows+',1fr)';for(var i=0;i<cols*rows;i++){var c=document.createElement('div');c.className='rgh-cell';grid.appendChild(c);cells.push(c);}if(reduce){cells.forEach(function(c){c.style.transform='scale(.85)';});return;}var R=130;root.addEventListener('mousemove',function(e){var r=root.getBoundingClientRect();var mx=e.clientX-r.left,my=e.clientY-r.top;cells.forEach(function(c){var cr=c.getBoundingClientRect();var cx=cr.left-r.left+cr.width/2,cy=cr.top-r.top+cr.height/2;var d=Math.hypot(mx-cx,my-cy);var t=Math.max(0,1-d/R);c.style.transform='scale('+(.7+t*.55).toFixed(3)+')';c.style.background='rgba(245,72,15,'+(t*0.8).toFixed(3)+')';});});root.addEventListener('mouseleave',function(){cells.forEach(function(c){c.style.transform='scale(.7)';c.style.background='rgba(10,10,10,.06)';});});

/* Gradient Cursor Glow — Webflow (eigen) */
.gcg-stage{position:absolute;inset:0;overflow:hidden;background:#0a0a0a;display:flex;align-items:center;justify-content:center;font-family:'Switzer',system-ui,sans-serif}
.gcg-glow{position:absolute;inset:0;background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),rgba(245,72,15,.55),rgba(245,72,15,0) 60%);transition:background .12s ease}
.gcg-content{position:relative;text-align:center;z-index:2}.gcg-content b{display:block;font-size:24px;color:#fff;letter-spacing:-.01em}.gcg-content span{display:block;margin-top:6px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.gcg-stage::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:30px 30px}

// init(root):
root=root.querySelector('.gcg-stage')||root;var glow=root.querySelector('.gcg-glow');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(reduce)return;root.addEventListener('mousemove',function(e){var r=root.getBoundingClientRect();glow.style.setProperty('--gx',(e.clientX-r.left)+'px');glow.style.setProperty('--gy',(e.clientY-r.top)+'px');});

/* 3D Flip Coin — eigen (eigen) */
.fc3-scene{perspective:800px;text-align:center;font-family:'Boldonse',system-ui,sans-serif}
.fc3-coin{position:relative;width:110px;height:110px;margin:0 auto;transform-style:preserve-3d;cursor:pointer;transition:transform 1.6s cubic-bezier(.3,1.1,.4,1)}
.fc3-face{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;backface-visibility:hidden;border:5px solid #fff}
.fc3-front{background:radial-gradient(circle at 35% 30%,#ff7a45,#F5480F);color:#fff;box-shadow:0 8px 20px rgba(245,72,15,.35)}
.fc3-back{background:radial-gradient(circle at 35% 30%,#3a3a3a,#0a0a0a);color:#fff;transform:rotateY(180deg)}
.fc3-edge{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px rgba(10,10,10,.1) inset}
.fc3-hint{display:block;margin-top:24px;font-family:'Switzer',system-ui,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,10,.4)}

// init(root):
root=root.querySelector('.fc3-scene')||root;var coin=root.querySelector('.fc3-coin');var flips=0;var busy=false;var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;coin.addEventListener('click',function(){if(busy)return;busy=true;var heads=Math.random()<.5;var spins=reduce?1:(2+Math.floor(Math.random()*2));flips+=spins*360+(heads?0:180);if(reduce){coin.style.transition='transform .3s';coin.style.transform='rotateY('+(heads?0:180)+'deg)';}else{coin.style.transform='rotateY('+flips+'deg)';}setTimeout(function(){busy=false;},reduce?320:1600);});

/* Countdown Ring — CSS-Tricks (MIT) */
.cdr-wrap{position:relative;width:140px;height:140px;cursor:pointer;font-family:'JetBrains Mono',monospace}
.cdr-svg{width:140px;height:140px;transform:rotate(-90deg)}
.cdr-track{fill:none;stroke:rgba(10,10,10,.10);stroke-width:8}
.cdr-bar{fill:none;stroke:#F5480F;stroke-width:8;stroke-linecap:round;stroke-dashoffset:0;transition:stroke .3s}
.cdr-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);font-size:34px;font-weight:600;color:#0a0a0a}
.cdr-hint{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-family:'Switzer',system-ui,sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.35)}

// init(root):
root=root.querySelector('.cdr-wrap')||root;var bar=root.querySelector('.cdr-bar'),num=root.querySelector('.cdr-num');var C=2*Math.PI*52,DUR=10000,start=0,raf;function tick(t){if(!start)start=t;var e=t-start;var p=Math.min(1,e/DUR);bar.style.strokeDashoffset=(C*p).toFixed(1);var rem=Math.ceil((DUR-e)/1000);num.textContent=Math.max(0,rem);bar.style.stroke=rem<=3?'#0a0a0a':'#F5480F';if(p<1)raf=requestAnimationFrame(tick);}bar.style.strokeDasharray=C.toFixed(1);root.addEventListener('click',function(){cancelAnimationFrame(raf);start=0;bar.style.strokeDashoffset='0';bar.style.stroke='#F5480F';raf=requestAnimationFrame(tick);});raf=requestAnimationFrame(tick);

/* Marquee Hover Button — Animista (eigen) */
.mhb-btn{position:relative;overflow:hidden;border:1px solid #0a0a0a;background:#0a0a0a;color:#fff;border-radius:999px;padding:16px 34px;font-family:'Switzer',system-ui,sans-serif;font-size:15px;font-weight:600;cursor:pointer}
.mhb-label{position:relative;z-index:2;transition:opacity .25s,transform .25s}
.mhb-track{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;color:#0a0a0a;background:#F5480F;opacity:0;transform:translateY(100%);transition:opacity .25s,transform .25s;font-weight:700}
.mhb-set{padding-left:.3em;animation:mhb-scroll 6s linear infinite;animation-play-state:paused}
.mhb-btn:hover .mhb-label{opacity:0;transform:translateY(-100%)}.mhb-btn:hover .mhb-track{opacity:1;transform:translateY(0)}.mhb-btn:hover .mhb-set{animation-play-state:running}
@keyframes mhb-scroll{to{transform:translateX(-100%)}}

/* Parallax Tilt Card — Codrops (MIT) */
.ptc-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:800px;background:#0c0c14}
.ptc-card{position:relative;width:62%;aspect-ratio:4/3;border-radius:18px;background:linear-gradient(145deg,#1a1f33,#0a0d18);transform-style:preserve-3d;transition:transform .2s ease-out;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #232a44}
.ptc-l{font-family:'Boldonse','Switzer',sans-serif;color:#fff;font-size:30px;letter-spacing:-.02em;transform:translateZ(20px)}
.ptc-sub{font-size:13px;color:#F5480F;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.2em;margin-top:6px}
.ptc-glow{position:absolute;inset:0;border-radius:18px;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(245,72,15,.25),transparent 50%);pointer-events:none}

// init(root):
root=root.querySelector('.ptc-stage')||root;var card=root.querySelector('.ptc-card'),glow=root.querySelector('.ptc-glow');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(reduce)return;root.addEventListener('mousemove',function(e){var r=card.getBoundingClientRect();var px=(e.clientX-r.left)/r.width-.5,py=(e.clientY-r.top)/r.height-.5;card.style.transform='rotateY('+(px*16)+'deg) rotateX('+(-py*16)+'deg)';glow.style.setProperty('--gx',(px+.5)*100+'%');glow.style.setProperty('--gy',(py+.5)*100+'%');});root.addEventListener('mouseleave',function(){card.style.transform='rotateY(0) rotateX(0)';});

/* Clean Light — eigen (eigen) */
.lab-stage[data-fx="thm-clean-light"]{background:#FAFAF7}
.thm-cl-card{font-family:'Inter',system-ui,sans-serif;width:min(86%,460px);background:#FFFFFF;border:1px solid #E7E5E0;border-radius:14px;padding:22px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06)}
.thm-cl-swatch{display:flex;gap:8px;margin-bottom:16px}.thm-cl-swatch span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.thm-cl-swatch i{display:block;width:100%;height:30px;border-radius:7px;background:var(--c);border:1px solid rgba(0,0,0,.08)}
.thm-cl-swatch b{font:500 8px/1 'Inter',sans-serif;color:#8A8F98}
.thm-cl-font{font:600 10px/1 'Inter',sans-serif;color:#5B6470;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}
.thm-cl-sample h4{margin:0 0 12px;font:700 clamp(1.1rem,3vw,1.5rem)/1.1 'Inter',sans-serif;color:#1A1A18;letter-spacing:-.02em}
.thm-cl-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:#FAFAF7;border:1px solid #E7E5E0;border-radius:10px}
.thm-cl-mini p{margin:0;font:400 13px/1.4 'Inter',sans-serif;color:#5B6470}
.thm-cl-mini button{flex-shrink:0;border:0;background:#2D6BFF;color:#fff;font:600 12px 'Inter',sans-serif;padding:9px 16px;border-radius:8px;cursor:pointer;box-shadow:0 1px 2px rgba(45,107,255,.4)}

/* True Dark — eigen (eigen) */
.lab-stage[data-fx="thm-true-dark"]{background:#070908}
.thm-td-card{font-family:'Geist','Inter',system-ui,sans-serif;width:min(86%,460px);background:#0B0E0D;border:1px solid #1E2422;border-radius:14px;padding:22px}
.thm-td-swatch{display:flex;gap:8px;margin-bottom:16px}.thm-td-swatch span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.thm-td-swatch i{display:block;width:100%;height:30px;border-radius:7px;background:var(--c);border:1px solid rgba(255,255,255,.08)}
.thm-td-swatch b{font:500 8px/1 'JetBrains Mono',monospace;color:#6B746F}
.thm-td-font{font:600 10px/1 'JetBrains Mono',monospace;color:#3DF2A8;text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px}
.thm-td-sample h4{margin:0 0 12px;font:700 clamp(1.1rem,3vw,1.5rem)/1.1 'Geist','Inter',sans-serif;color:#E8EDEA;letter-spacing:-.02em}
.thm-td-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:#15191A;border:1px solid #232927;border-radius:10px}
.thm-td-mini p{margin:0;font:400 13px/1.4 'Geist','Inter',sans-serif;color:#8A938F}
.thm-td-mini button{flex-shrink:0;border:0;background:#3DF2A8;color:#06140D;font:600 12px 'JetBrains Mono',monospace;padding:9px 16px;border-radius:8px;cursor:pointer;box-shadow:0 0 0 1px rgba(61,242,168,.4),0 0 18px rgba(61,242,168,.25)}

/* Refined Brutalist — eigen (eigen) */
.lab-stage[data-fx="thm-brutalist"]{background:#F2F0E9}
.thm-br-card{font-family:'Space Grotesk','Arial',sans-serif;width:min(86%,460px);background:#FFFFFF;border:1.5px solid #0A0A0A;border-radius:0;padding:20px;box-shadow:7px 7px 0 #0A0A0A}
.thm-br-swatch{display:flex;gap:7px;margin-bottom:16px}.thm-br-swatch span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.thm-br-swatch i{display:block;width:100%;height:30px;background:var(--c);border:1.5px solid #0A0A0A}
.thm-br-swatch b{font:600 8px/1 'JetBrains Mono',monospace;color:#0A0A0A}
.thm-br-font{font:700 9px/1 'JetBrains Mono',monospace;color:#0A0A0A;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;border-top:1.5px solid #0A0A0A;border-bottom:1.5px solid #0A0A0A;padding:6px 0}
.thm-br-sample h4{margin:0 0 12px;font:700 clamp(1.2rem,4vw,1.8rem)/.95 'Space Grotesk',sans-serif;color:#0A0A0A;letter-spacing:-.03em;text-transform:uppercase}
.thm-br-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;background:#F2F0E9;border:1.5px solid #0A0A0A}
.thm-br-mini p{margin:0;font:700 11px/1.3 'JetBrains Mono',monospace;color:#0A0A0A}
.thm-br-mini button{flex-shrink:0;border:1.5px solid #0A0A0A;background:#FF4D00;color:#0A0A0A;font:700 11px 'JetBrains Mono',monospace;padding:9px 14px;border-radius:0;cursor:pointer;box-shadow:3px 3px 0 #0A0A0A}

/* Chromatic Acid — eigen (eigen) */
.lab-stage[data-fx="thm-chromatic"]{background:#08080A}
.thm-ch-card{font-family:'Space Grotesk','Arial',sans-serif;width:min(86%,460px);background:#0D0D0F;border:1px solid #2A2A30;border-radius:6px;padding:22px}
.thm-ch-swatch{display:flex;gap:8px;margin-bottom:16px}.thm-ch-swatch span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.thm-ch-swatch i{display:block;width:100%;height:30px;border-radius:4px;background:var(--c);border:1px solid rgba(255,255,255,.1)}
.thm-ch-swatch b{font:500 8px/1 'JetBrains Mono',monospace;color:#6A6A72}
.thm-ch-font{font:600 10px/1 'JetBrains Mono',monospace;color:#CCFF00;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}
.thm-ch-sample h4{margin:0 0 12px;font:700 clamp(1.2rem,4vw,1.8rem)/.95 'Space Grotesk',sans-serif;color:#fff;text-transform:uppercase}
.thm-ch-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:#1A1A1F;border:1px solid #00E5FF;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,229,255,.15)}
.thm-ch-mini p{margin:0;font:400 13px/1.4 'JetBrains Mono',monospace;color:#9A9AA2}
.thm-ch-mini button{flex-shrink:0;border:0;background:#FF2D9B;color:#0D0D0F;font:700 12px 'JetBrains Mono',monospace;padding:9px 16px;border-radius:4px;cursor:pointer;box-shadow:0 0 16px rgba(255,45,155,.5)}

/* Warm Editorial — eigen (eigen) */
.lab-stage[data-fx="thm-warm-editorial"]{background:#1C1917}
.thm-we-card{font-family:'Hanken Grotesk','Inter',sans-serif;width:min(86%,460px);background:#F7F3EC;border:1px solid #E4DBCB;border-radius:4px;padding:24px}
.thm-we-swatch{display:flex;gap:8px;margin-bottom:16px}.thm-we-swatch span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.thm-we-swatch i{display:block;width:100%;height:30px;border-radius:3px;background:var(--c);border:1px solid rgba(28,25,23,.12)}
.thm-we-swatch b{font:500 8px/1 'Hanken Grotesk',sans-serif;color:#8A7E6B}
.thm-we-font{font:600 10px/1 'Hanken Grotesk',sans-serif;color:#C75B39;text-transform:uppercase;letter-spacing:.16em;margin-bottom:12px}
.thm-we-sample h4{margin:0 0 12px;font:800 clamp(1.2rem,3.6vw,1.7rem)/1 'Hanken Grotesk',sans-serif;color:#1C1917;letter-spacing:-.03em}
.thm-we-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:#FFFFFF;border:1px solid #E4DBCB;border-radius:3px}
.thm-we-mini p{margin:0;font:400 13px/1.5 'Newsreader','Georgia',serif;color:#3F3A34;font-style:italic}
.thm-we-mini button{flex-shrink:0;border:0;background:#1C1917;color:#F7F3EC;font:600 12px 'Hanken Grotesk',sans-serif;padding:9px 18px;border-radius:2px;cursor:pointer}

/* Pastel-Soft 2026 — eigen (eigen) */
.lab-stage[data-fx="thm-pastel-soft"]{background:linear-gradient(135deg,#F3EEFB,#FDEDE4)}
.thm-ps-card{font-family:'Plus Jakarta Sans','Inter',sans-serif;width:min(86%,460px);background:#FBFAFF;border:1px solid #EDE7F7;border-radius:22px;padding:24px;box-shadow:0 10px 30px rgba(124,92,252,.12)}
.thm-ps-swatch{display:flex;gap:8px;margin-bottom:16px}.thm-ps-swatch span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.thm-ps-swatch i{display:block;width:100%;height:30px;border-radius:11px;background:var(--c);border:1px solid rgba(50,43,69,.08)}
.thm-ps-swatch b{font:500 8px/1 'Plus Jakarta Sans',sans-serif;color:#9990AD}
.thm-ps-font{font:700 10px/1 'Plus Jakarta Sans',sans-serif;color:#7C5CFC;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.thm-ps-sample h4{margin:0 0 12px;font:800 clamp(1.1rem,3.2vw,1.55rem)/1.05 'Plus Jakarta Sans',sans-serif;color:#322B45;letter-spacing:-.02em}
.thm-ps-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px;background:#F4EFFE;border:1px solid #E6DEF7;border-radius:16px}
.thm-ps-mini p{margin:0;font:500 13px/1.4 'Plus Jakarta Sans',sans-serif;color:#6B6280}
.thm-ps-mini button{flex-shrink:0;border:0;background:#7C5CFC;color:#fff;font:700 12px 'Plus Jakarta Sans',sans-serif;padding:10px 18px;border-radius:12px;cursor:pointer;box-shadow:0 4px 14px rgba(124,92,252,.4)}

/* Retro-Future Y2K — eigen (eigen) */
.lab-stage[data-fx="thm-y2k"]{background:radial-gradient(circle at 30% 20%,#141B33,#060912 70%)}
.thm-y2-card{font-family:'Rajdhani','Arial',sans-serif;width:min(86%,460px);background:linear-gradient(160deg,#10162B,#0A0F1E);border:1px solid #2B3556;border-radius:10px;padding:22px;box-shadow:inset 0 1px 0 rgba(125,226,255,.2)}
.thm-y2-swatch{display:flex;gap:8px;margin-bottom:16px}.thm-y2-swatch span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.thm-y2-swatch i{display:block;width:100%;height:30px;border-radius:6px;background:var(--c);border:1px solid rgba(255,255,255,.12)}
.thm-y2-swatch b{font:600 8px/1 'Rajdhani',sans-serif;color:#7E89AD}
.thm-y2-font{font:700 10px/1 'Rajdhani',sans-serif;background:linear-gradient(90deg,#7DE2FF,#FF4FD8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px}
.thm-y2-sample h4{margin:0 0 12px;font:700 clamp(1rem,3vw,1.4rem)/1 'Rajdhani',sans-serif;background:linear-gradient(120deg,#E8ECF5,#C7CBD4 40%,#FFFFFF 50%,#9AA2B8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.02em}
.thm-y2-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:rgba(125,226,255,.06);border:1px solid #2B3556;border-radius:8px}
.thm-y2-mini p{margin:0;font:600 13px/1.4 'Rajdhani',sans-serif;color:#A7B0CC}
.thm-y2-mini button{flex-shrink:0;border:0;background:linear-gradient(120deg,#7DE2FF,#FF4FD8);color:#0A0F1E;font:700 12px 'Rajdhani',sans-serif;letter-spacing:.08em;padding:9px 16px;border-radius:7px;cursor:pointer;box-shadow:0 0 18px rgba(255,79,216,.4)}

/* Earthy Natural — eigen (eigen) */
.lab-stage[data-fx="thm-earthy"]{background:#E8DECB}
.thm-ea-card{font-family:'Hanken Grotesk','Inter',sans-serif;width:min(86%,460px);background:#F3EDE1;border:1px solid #DDD0B8;border-radius:16px;padding:24px}
.thm-ea-swatch{display:flex;gap:8px;margin-bottom:16px}.thm-ea-swatch span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.thm-ea-swatch i{display:block;width:100%;height:30px;border-radius:9px;background:var(--c);border:1px solid rgba(46,42,36,.1)}
.thm-ea-swatch b{font:500 8px/1 'Hanken Grotesk',sans-serif;color:#8C8068}
.thm-ea-font{font:600 10px/1 'Hanken Grotesk',sans-serif;color:#6B7A5A;text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px}
.thm-ea-sample h4{margin:0 0 12px;font:600 clamp(1.15rem,3.4vw,1.65rem)/1 'Fraunces','Georgia',serif;color:#2E2A24;letter-spacing:-.01em}
.thm-ea-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px;background:#EBE2D0;border:1px solid #DDD0B8;border-radius:12px}
.thm-ea-mini p{margin:0;font:400 13px/1.45 'Hanken Grotesk',sans-serif;color:#5A5346}
.thm-ea-mini button{flex-shrink:0;border:0;background:#0E9E8E;color:#fff;font:600 12px 'Hanken Grotesk',sans-serif;padding:10px 18px;border-radius:10px;cursor:pointer;box-shadow:0 3px 12px rgba(14,158,142,.35)}