:root{--bg: #0a0a14;--surface: #12121e;--text: #ffffff;--text-dim: rgba(255,255,255,0.55);--text-dimmer: rgba(255,255,255,0.28);--bdr: rgba(255,255,255,0.09);--topbar-bg: rgba(10,10,20,0.75);--kbd-bg: rgba(255,255,255,0.07);--easing: cubic-bezier(0.4, 0, 0.2, 1)}body.light{--bg: #f0f0f8;--surface: #ffffff;--text: #0a0a14;--text-dim: rgba(0,0,0,0.55);--text-dimmer: rgba(0,0,0,0.28);--bdr: rgba(0,0,0,0.08);--topbar-bg: rgba(240,240,248,0.8);--kbd-bg: rgba(0,0,0,0.06)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}button{font-family:inherit}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;font-size:13px;overflow-x:hidden;transition:background .4s,color .4s}.topbar{position:fixed;top:0;left:0;right:0;height:3rem;display:flex;align-items:center;gap:.8rem;padding:0 1.4rem;background:var(--topbar-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--bdr);z-index:100;transition:background .4s}.tb__brand{display:flex;align-items:baseline;gap:.35rem}.tb__name{font-size:.68rem;color:var(--text-dim)}.tb__sep{color:var(--text-dimmer);font-size:.68rem}.tb__title{font-size:.82rem;font-weight:700}.tb__dark{margin-left:auto;width:1.9rem;height:1.9rem;border:1px solid var(--bdr);border-radius:7px;background:rgba(0,0,0,0);color:var(--text-dim);cursor:pointer;display:grid;place-items:center;transition:all .2s;flex-shrink:0}.tb__dark:hover{color:var(--text)}body.dark .icon-sun{display:none}body.dark .icon-moon{display:block}body.light .icon-moon{display:none}body.light .icon-sun{display:block}.filter-bar{display:flex;gap:.3rem;margin-left:.5rem}.filter-btn{display:flex;align-items:center;gap:.3rem;padding:.28rem .65rem;border:1px solid var(--bdr);border-radius:99px;background:rgba(0,0,0,0);color:var(--text-dim);font-size:.72rem;cursor:pointer;transition:all .2s}.filter-btn:hover{color:var(--text);border-color:rgba(124,58,237,.4)}.filter-btn.active{background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.45);color:var(--text)}.filter-count{font-size:.6rem;padding:.05rem .3rem;border-radius:99px;background:hsla(0,0%,100%,.1);color:var(--text-dimmer);transition:all .2s}body.light .filter-count{background:rgba(0,0,0,.07)}.filter-btn.active .filter-count{background:rgba(124,58,237,.25);color:var(--text)}.main{min-height:100vh;display:flex;align-items:center;padding:3.5rem 0 2.5rem}.works-slider{--_shadow: 30px;width:100%;padding-top:calc(var(--_shadow)*2);padding-bottom:calc(var(--_shadow)*2 + 3rem);position:relative}.swiper-slide{width:300px;transition:opacity .4s var(--easing),transform .4s var(--easing)}.swiper-slide:not(.swiper-slide-active){opacity:.35}.swiper-slide:not(.swiper-slide-active) .card__inner{transform:scale(0.93)}.swiper-slide.is-hidden{opacity:0 !important;pointer-events:none;transform:scale(0.7)}.slider-arrow{position:absolute;z-index:10;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--bdr);background:var(--topbar-bg);backdrop-filter:blur(10px);color:var(--text-dim);cursor:pointer;display:grid;place-items:center;transition:all .2s}.slider-arrow:hover{color:var(--text);border-color:rgba(124,58,237,.5)}.slider-arrow.swiper-button-disabled{opacity:0;pointer-events:none}.slider-arrow--prev{left:1rem}.slider-arrow--next{right:1rem}.card{height:440px;perspective:1200px;cursor:pointer}.card__inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(0.4, 0.2, 0.2, 1);border-radius:18px}.swiper-slide-active .card:hover .card__inner{transform:rotateY(180deg)}.card__front,.card__back{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.card__front{background:var(--grad, #1a1a2e);display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 var(--_shadow) calc(var(--_shadow)*2) rgba(0,0,0,.3)}.card__back{background:var(--surface);border:1px solid var(--bdr);transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;gap:.75rem;padding:1.8rem 1.6rem;box-shadow:0 var(--_shadow) calc(var(--_shadow)*2) rgba(0,0,0,.3);transition:background .4s,border-color .4s}.card__front-body{padding:1.4rem;background:linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);display:flex;flex-direction:column;gap:.45rem}.card__cat{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:99px;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;width:fit-content}.card__cat.cat--ui{background:rgba(99,102,241,.25);color:#a5b4fc;border:1px solid rgba(99,102,241,.3)}.card__cat.cat--animation{background:rgba(124,58,237,.25);color:#c4b5fd;border:1px solid rgba(124,58,237,.3)}.card__name{font-size:1.25rem;font-weight:700;color:#fff;line-height:1.2}.card__back-name{font-size:1.3rem;font-weight:700;line-height:1.2}.card__techs,.card__back-techs{display:flex;flex-wrap:wrap;gap:.3rem}.card__techs span,.card__back-techs span{padding:.18rem .5rem;border-radius:5px;font-size:.62rem;font-weight:500;background:hsla(0,0%,100%,.12);color:hsla(0,0%,100%,.8);border:1px solid hsla(0,0%,100%,.1)}.card__back-techs span{background:rgba(124,58,237,.1);color:var(--text-dim);border-color:rgba(124,58,237,.2)}.card__desc{font-size:.78rem;color:var(--text-dim);line-height:1.6}.card__links{display:flex;gap:.5rem;margin-top:.2rem}.btn-live{flex:1;padding:.6rem 1rem;background:#7c3aed;color:#fff;border-radius:9px;font-size:.78rem;font-weight:600;text-decoration:none;text-align:center;transition:all .2s}.btn-live:hover{background:#6d28d9}.btn-gh{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.6rem .9rem;border:1px solid var(--bdr);border-radius:9px;color:var(--text-dim);font-size:.75rem;text-decoration:none;transition:all .2s}.btn-gh:hover{color:var(--text);border-color:rgba(124,58,237,.4)}.works-pagination{display:flex;justify-content:center;align-items:center;gap:.4rem;margin-top:1.2rem;padding:0 1.4rem}.works-pagination .works-pagination__btn{flex:1;max-width:80px;height:4px;border:none;border-radius:99px;background:hsla(0,0%,100%,.12);position:relative;overflow:hidden;cursor:pointer;transition:background .2s;padding:0}body.light .works-pagination .works-pagination__btn{background:rgba(0,0,0,.1)}.works-pagination .works-pagination__btn::after{content:"";position:absolute;inset:0;width:var(--_progress, 0%);background:#7c3aed;border-radius:inherit;transition:width linear}.works-pagination .works-pagination__btn.swiper-pagination-bullet-active::after{transition:width linear}.kbd-hint{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);font-size:.62rem;color:var(--text-dimmer);white-space:nowrap;pointer-events:none;z-index:50}.kbd-hint kbd{display:inline-block;padding:.1rem .3rem;border:1px solid var(--bdr);border-radius:3px;background:var(--kbd-bg);font-family:inherit;font-size:inherit}.card__art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.card__art--glass .ga-circle{position:absolute;border-radius:50%;border:1px solid hsla(0,0%,100%,.2);backdrop-filter:blur(4px);background:hsla(0,0%,100%,.06);animation:float-circle 6s ease-in-out infinite alternate}.card__art--glass .ga-circle--1{width:120px;height:120px;top:10%;left:10%;animation-duration:6s}.card__art--glass .ga-circle--2{width:80px;height:80px;top:40%;right:15%;animation-duration:4s;animation-delay:-2s}.card__art--glass .ga-circle--3{width:160px;height:160px;bottom:5%;left:30%;animation-duration:8s;animation-delay:-4s}@keyframes float-circle{from{transform:translate(0, 0) scale(1)}to{transform:translate(10px, -15px) scale(1.05)}}.card__art--login .la-card{width:130px;padding:16px;border-radius:12px;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:8px}.card__art--login .la-field{height:28px;background:hsla(0,0%,100%,.08);border:1px solid hsla(0,0%,100%,.12);border-radius:7px}.card__art--login .la-btn{height:28px;background:rgba(124,58,237,.5);border-radius:7px;margin-top:4px}.card__art--gsap{flex-direction:column;gap:0}.card__art--gsap .gsap-layer{position:absolute;left:0;right:0;border-top:1px solid hsla(0,0%,100%,.15)}.card__art--gsap .gsap-layer--1{top:30%;height:30%;background:rgba(16,185,129,.08)}.card__art--gsap .gsap-layer--2{top:50%;height:25%;background:rgba(16,185,129,.12);clip-path:polygon(0 30%, 100% 0%, 100% 100%, 0% 100%)}.card__art--gsap .gsap-layer--3{top:65%;height:35%;background:rgba(16,185,129,.2);clip-path:polygon(0 40%, 100% 10%, 100% 100%, 0% 100%)}.card__art--slider .sl-card{position:absolute;height:140px;border-radius:10px;border:1px solid hsla(0,0%,100%,.15);background:hsla(0,0%,100%,.07)}.card__art--slider .sl-card--1{width:110px;left:50%;top:50%;transform:translate(-50%, -50%) rotate(-8deg)}.card__art--slider .sl-card--2{width:110px;left:50%;top:50%;transform:translate(-50%, -50%) rotate(0deg);background:hsla(0,0%,100%,.11)}.card__art--slider .sl-card--3{width:110px;left:50%;top:50%;transform:translate(-50%, -50%) rotate(8deg);background:hsla(0,0%,100%,.06)}.card__art--loader .lo-ring{position:relative;width:100px;height:100px}.card__art--loader .lo-ring span{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;animation:lo-spin 3s linear infinite}.card__art--loader .lo-ring span:nth-child(1){transform:rotate(calc(0 * 72deg));animation-delay:calc(0*-0.6s)}.card__art--loader .lo-ring span:nth-child(1)::before{content:"";width:12px;height:12px;border-radius:50%;background:#f43f5e;box-shadow:0 0 8px #f43f5e}.card__art--loader .lo-ring span:nth-child(2){transform:rotate(calc(1 * 72deg));animation-delay:calc(1*-0.6s)}.card__art--loader .lo-ring span:nth-child(2)::before{content:"";width:12px;height:12px;border-radius:50%;background:#fb923c;box-shadow:0 0 8px #fb923c}.card__art--loader .lo-ring span:nth-child(3){transform:rotate(calc(2 * 72deg));animation-delay:calc(2*-0.6s)}.card__art--loader .lo-ring span:nth-child(3)::before{content:"";width:12px;height:12px;border-radius:50%;background:#facc15;box-shadow:0 0 8px #facc15}.card__art--loader .lo-ring span:nth-child(4){transform:rotate(calc(3 * 72deg));animation-delay:calc(3*-0.6s)}.card__art--loader .lo-ring span:nth-child(4)::before{content:"";width:12px;height:12px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80}.card__art--loader .lo-ring span:nth-child(5){transform:rotate(calc(4 * 72deg));animation-delay:calc(4*-0.6s)}.card__art--loader .lo-ring span:nth-child(5)::before{content:"";width:12px;height:12px;border-radius:50%;background:#818cf8;box-shadow:0 0 8px #818cf8}@keyframes lo-spin{to{transform:rotate(360deg)}}.card__art--404{overflow:hidden}.card__art--404 .f4-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%, white 0%, transparent 100%),radial-gradient(1px 1px at 40% 70%, white 0%, transparent 100%),radial-gradient(1px 1px at 60% 20%, white 0%, transparent 100%),radial-gradient(1px 1px at 80% 50%, white 0%, transparent 100%),radial-gradient(1px 1px at 10% 60%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),radial-gradient(1px 1px at 70% 80%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),radial-gradient(2px 2px at 50% 45%, rgba(255, 255, 255, 0.4) 0%, transparent 100%),radial-gradient(2px 2px at 30% 85%, rgba(255, 255, 255, 0.4) 0%, transparent 100%);opacity:.8}.card__art--404 .f4-planet{position:absolute;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 35% 35%, #4f46e5, #1e1b4b);box-shadow:0 0 20px rgba(99,102,241,.5);top:22%;right:20%}.card__art--404 .f4-text{font-size:3.5rem;font-weight:900;letter-spacing:-2px;color:hsla(0,0%,100%,.08);position:absolute;bottom:20%;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:system-ui,sans-serif}@media(max-width: 600px){.filter-bar{display:none}.kbd-hint{display:none}.swiper-slide{width:260px}.card{height:380px}}