:root {
  --bg: #0F172A; --surface: #1E293B; --surface2: #272F42;
  --border: #334155; --text: #F8FAFC; --text2: #94A3B8;
  --accent: #22C55E; --accent-glow: rgba(34,197,94,0.15); --radius: 12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}

.hero{text-align:center;padding:4rem 1.5rem 3rem;max-width:700px;margin:0 auto}
.hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:700;letter-spacing:-0.02em;margin-bottom:0.5rem}
.hero .subtitle{font-size:1.05rem;color:var(--text2);max-width:500px;margin:0 auto 1.5rem}
.hero .subtitle span{color:var(--accent);font-weight:600}
.stats{font-size:0.85rem;color:var(--text2);display:flex;gap:0.5rem;justify-content:center;flex-wrap:wrap}
.stats strong{color:var(--text)}.sep{color:var(--border)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:1rem 1.5rem 3rem;max-width:1200px;margin:0 auto}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .25s,box-shadow .25s}
.card:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.card-preview{background:var(--bg);min-height:180px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.card-preview::after{content:"hover";position:absolute;bottom:8px;right:12px;font-size:.7rem;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;pointer-events:none}
.card-body{padding:1.25rem}
.card-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}
.card-head h2{font-size:1.1rem;font-weight:600}
.badge{font-size:.7rem;background:var(--surface2);color:var(--text2);padding:2px 8px;border-radius:20px;white-space:nowrap}
.card-desc{font-size:.85rem;color:var(--text2);margin-bottom:.75rem}
.card-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.9rem}
.card-tags span{font-size:.7rem;background:var(--surface2);color:var(--accent);padding:2px 8px;border-radius:4px}
.btn-code{background:transparent;color:var(--text2);border:1px solid var(--border);padding:6px 16px;border-radius:6px;font-family:inherit;font-size:.8rem;cursor:pointer;transition:all .2s}
.btn-code:hover{color:var(--text);border-color:var(--accent)}.code-block{margin-top:.75rem;display:flex;flex-direction:column;gap:.5rem}
.code-block pre{background:#0a0e17;border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;overflow-x:auto;max-height:260px}
.code-block code{font-family:'SF Mono','Fira Code',monospace;font-size:.73rem;color:#e2e8f0;white-space:pre;line-height:1.55}
footer{text-align:center;padding:2rem 1.5rem 3rem;color:var(--text2);font-size:.8rem;max-width:500px;margin:0 auto}

/* ══ Bubble Lab ══ */
.lab{position:relative;width:80px;height:130px;cursor:pointer;transition:transform .4s cubic-bezier(.34,1.56,.64,1);margin:25px 0 10px}
.lab:hover{transform:scale(1.1) rotate(-3deg)}
.tube{position:relative;width:80px;height:130px}
.Strich1,.Strich2{position:absolute;width:140px;height:55px;background:#111;border-radius:28px;box-shadow:0 4px 15px rgba(0,0,0,.5);z-index:0;top:35px;left:20px}
.Strich1{transform:rotate(48deg)}.Strich2{transform:rotate(-87deg)}.bubble,.bubble1,.bubble2,.bubble3{position:absolute;top:0;width:22px;height:22px;border-radius:50%;z-index:1;transition:filter .3s}
.bubble{left:10px;background:radial-gradient(circle at 30% 30%,#ffb3c1,#e64980,#ff8787);animation:dropAndShift 5s ease-in-out infinite}
.bubble1{left:8px;background:radial-gradient(circle at 30% 30%,#edb3ff,#ac49e6,#fb87ff);animation:dropAndShift 6s ease-in-out infinite;z-index:2}
.bubble2{left:12px;background:radial-gradient(circle at 30% 30%,#b3d8ff,#4963e6,#87a7ff);animation:dropAndShift 4s ease-in-out infinite;z-index:3}
.bubble3{left:14px;background:radial-gradient(circle at 30% 30%,#b3ffbc,#35a32f,#75ba61);animation:dropAndShift 7s ease-in-out infinite;z-index:4}
.lab:hover .bubble{animation-duration:1.8s;filter:drop-shadow(0 0 6px #ff6b9d)}
.lab:hover .bubble1{animation-duration:2s;filter:drop-shadow(0 0 6px #c44dff)}
.lab:hover .bubble2{animation-duration:1.5s;filter:drop-shadow(0 0 6px #4d7cff)}
.lab:hover .bubble3{animation-duration:2.2s;filter:drop-shadow(0 0 6px #4de8a0)}
.glint{position:absolute;width:7px;height:5px;background:rgba(255,255,255,.85);border-radius:50%;top:3px;left:4px;animation:bubbleGlint 3s ease-in-out infinite;pointer-events:none}
.bubble1 .glint{animation-delay:.7s}.bubble2 .glint{animation-delay:1.4s}.bubble3 .glint{animation-delay:2.1s}
.lab:hover .glint{animation:bubbleGlint .8s ease-in-out infinite}
.lab:hover .bubble1 .glint{animation-duration:.9s}.lab:hover .bubble2 .glint{animation-duration:.7s}.lab:hover .bubble3 .glint{animation-duration:1s}@keyframes dropAndShift{0%{transform:translate(0,15px)}16.67%{transform:translate(80px,13px)}33.34%{transform:translate(40px,10px)}50.01%{transform:translate(40px,-30px)}66.68%{transform:translate(40px,55px)}83.35%{transform:translate(40px,10px)}100%{transform:translate(0,15px)}}
@keyframes bubbleGlint{0%{opacity:0;top:3px;left:4px}8.33%{opacity:.7;top:5px;left:5px}16.67%{opacity:0;top:3px;left:4px}33.34%{opacity:.55;top:5px;left:5px}50.01%{opacity:0;top:3px;left:4px}58.34%{opacity:.8;top:5px;left:5px}66.68%{opacity:0;top:3px;left:4px}83.35%{opacity:.65;top:5px;left:5px}100%{opacity:0;top:3px;left:4px}}

/* ══ Tapping Hand ══ */
.\0001f91a{--skin-color:#E4C560;--tap-speed:.6s;--tap-stagger:.1s;position:relative;width:80px;height:60px;margin-left:80px}
.\0001f91a:before{content:'';display:block;width:180%;height:75%;position:absolute;top:70%;right:20%;background:#000;border-radius:40px 10px;filter:blur(10px);opacity:.3}
.\0001f334{display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:var(--skin-color);border-radius:10px 40px}
.\0001f44d{position:absolute;width:120%;height:38px;background:var(--skin-color);bottom:-18%;right:1%;transform-origin:calc(100% - 20px) 20px;transform:rotate(-20deg);border-radius:30px 20px 20px 10px;border-bottom:2px solid rgba(0,0,0,.1);border-left:2px solid rgba(0,0,0,.1)}
.\0001f44d:after{width:20%;height:60%;content:'';background:rgba(255,255,255,.3);position:absolute;bottom:-8%;left:5px;border-radius:60% 10% 10% 30%;border-right:2px solid rgba(0,0,0,.05)}.\0001f449{position:absolute;width:80%;height:35px;background:var(--skin-color);bottom:32%;right:64%;transform-origin:100% 20px;animation-duration:calc(var(--tap-speed)*2);animation-timing-function:ease-in-out;animation-iteration-count:infinite;transform:rotate(10deg)}
.\0001f449:before{content:'';position:absolute;width:140%;height:30px;background:var(--skin-color);bottom:8%;right:65%;transform-origin:calc(100% - 20px) 20px;transform:rotate(-60deg);border-radius:20px}
.\0001f449:nth-child(3){animation-delay:0;filter:brightness(70%);animation-name:tap1}
.\0001f449:nth-child(4){animation-delay:var(--tap-stagger);filter:brightness(80%);animation-name:tap2}
.\0001f449:nth-child(5){animation-delay:calc(var(--tap-stagger)*2);filter:brightness(90%);animation-name:tap3}
.\0001f449:nth-child(6){animation-delay:calc(var(--tap-stagger)*3);filter:brightness(100%);animation-name:tap4}
@keyframes tap1{0%,50%,100%{transform:rotate(10deg) scale(.4)}40%{transform:rotate(50deg) scale(.4)}}
@keyframes tap2{0%,50%,100%{transform:rotate(10deg) scale(.6)}40%{transform:rotate(50deg) scale(.6)}}
@keyframes tap3{0%,50%,100%{transform:rotate(10deg) scale(.8)}40%{transform:rotate(50deg) scale(.8)}}
@keyframes tap4{0%,50%,100%{transform:rotate(10deg) scale(1)}40%{transform:rotate(50deg) scale(1)}}

/* ══ 3D Card Carousel ══ */
.wrapper3d{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.inner3d{--w:80px;--h:120px;--translateZ:calc(var(--w) + var(--h) + 0px);--rotateX:-15deg;--perspective:1000px;position:absolute;width:var(--w);height:var(--h);top:25%;left:calc(50% - var(--w)/2 - 2.5px);z-index:2;transform-style:preserve-3d;transform:perspective(var(--perspective));animation:rotating3d 20s linear infinite}
@keyframes rotating3d{from{transform:perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(0)}to{transform:perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(1turn)}}.card3d{position:absolute;border:2px solid rgba(var(--color-card),1);border-radius:12px;overflow:hidden;inset:0;transform:rotateY(calc(360deg/var(--quantity)*var(--index))) translateZ(var(--translateZ));background:radial-gradient(circle,rgba(var(--color-card),.2) 0%,rgba(var(--color-card),.6) 80%,rgba(var(--color-card),.9) 100%)}

/* ══ Toggle Switch ══ */
.toggle-sw{position:relative;height:100px;width:100px;display:inline-block}
.toggle-sw:before{box-shadow:0;border-radius:84.5px;background:#fff;position:absolute;margin-left:-36px;margin-top:-36px;opacity:.2;height:72px;width:72px;left:50%;top:50%}
.toggle-sw input{opacity:0;position:absolute;cursor:pointer;z-index:1;height:100%;width:100%;left:0;top:0}
.button-sw{transition:all .3s cubic-bezier(.23,1,.32,1);box-shadow:0 15px 25px -4px rgba(0,0,0,.5),inset 0 -3px 4px -1px rgba(0,0,0,.2),0 -10px 15px -1px rgba(255,255,255,.6),inset 0 3px 4px -1px rgba(255,255,255,.2),inset 0 0 5px 1px rgba(255,255,255,.8),inset 0 20px 30px 0 rgba(255,255,255,.2);border-radius:68.8px;position:absolute;background:#eaeaea;margin-left:-34.4px;margin-top:-34.4px;height:68.8px;width:68.8px;left:50%;top:50%;pointer-events:none}
.label-sw{transition:color .3s ease-out;line-height:101px;text-align:center;position:absolute;font-weight:700;font-size:28px;display:block;opacity:.9;height:100%;width:100%;color:rgba(0,0,0,.9)}
.toggle-sw input:active~.button-sw{filter:blur(.5px);box-shadow:0 12px 25px -4px rgba(0,0,0,.4),inset 0 -8px 30px 1px rgba(255,255,255,.9),0 -10px 15px -1px rgba(255,255,255,.6),inset 0 8px 25px 0 rgba(0,0,0,.4),inset 0 0 10px 1px rgba(255,255,255,.6)}
.toggle-sw input:active~.label-sw{font-size:26px;color:rgba(0,0,0,.45)}
.toggle-sw input:checked~.button-sw{filter:blur(.5px);box-shadow:0 10px 25px -4px rgba(0,0,0,.4),inset 0 -8px 25px -1px rgba(255,255,255,.9),0 -10px 15px -1px rgba(255,255,255,.6),inset 0 8px 20px 0 rgba(0,0,0,.2),inset 0 0 5px 1px rgba(255,255,255,.6)}
.toggle-sw input:checked~.label-sw{color:rgba(0,0,0,.8)}/* ══ Star Button keyframes ══ */
.glow-move{animation:borderGlowMove 10s ease-in-out infinite alternate}
.glow-scale{animation:borderGlowScale 10s ease-in-out infinite alternate}
.star-rotate{animation:starRotate 14s cubic-bezier(.68,-.55,.27,1.55) infinite alternate}
.star-shine{animation:starShine 14s ease-in-out infinite alternate}
.group-sw-hover:hover .star-rotate{animation-duration:2s}
@keyframes borderGlowMove{0%{transform:translateX(-20%)}100%{transform:translateX(120%)}}
@keyframes borderGlowScale{0%{transform:scaleY(.7)}100%{transform:scaleY(1.4)}}
@keyframes starRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes starShine{0%{opacity:.2;transform:translate(-50%,-50%) scale(.8)}100%{opacity:.5;transform:translate(-50%,-50%) scale(1.3)}}

/* ══ Folder Dropdown ══ */
.group-dd-hover:hover .group-dd-hover\:opacity-100{opacity:1!important}
.group-dd-hover:hover .group-dd-hover\:pointer-events-auto{pointer-events:auto!important}

/* ══ Responsive ══ */
@media(max-width:640px){.grid{grid-template-columns:1fr;padding:.5rem 1rem 2rem}.hero{padding:2.5rem 1rem 1.5rem}}
@media(prefers-reduced-motion:reduce){.bubble,.bubble1,.bubble2,.bubble3,.glint,.lab,.inner3d,.glow-move,.star-rotate{animation:none!important;transition:none!important}}