@import"https://fonts.googleapis.com/css2?family=Pangolin&display=swap";:root{--font-primary: "Pangolin",cursive;--font-display: "Pangolin",cursive;--color-primary: #6366f1;--color-primary-dark: #4f46e5;--color-accent: #f59e0b;--color-text-primary: #111827;--color-text-secondary: #6b7280;--color-text-light: #9ca3af;--color-bg-primary: #ffffff;--color-bg-secondary: #f9fafb;--color-bg-tertiary: #f3f4f6;--color-border: #e5e7eb;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--sectionTitleFontSize:clamp(2rem, 3vw, 3rem);--sectonTop:var(--size-8, 5rem)}[data-theme=dark]{--color-text-primary: #f9fafb;--color-text-secondary: #d1d5db;--color-text-light: #9ca3af;--color-bg-primary: #111827;--color-bg-secondary: #1f2937;--color-bg-tertiary: #374151;--color-border: #4b5563;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .3), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .3), 0 8px 10px -6px rgb(0 0 0 / .3)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-primary);font-style:normal;line-height:1.6;color:var(--color-text-primary);background:var(--color-bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1200px;margin:0 auto;padding:0 var(--size-4, 1rem)}.nav{position:fixed;top:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border);z-index:1000;transition:all .3s ease}[data-theme=dark] .nav{background:#111827f2}.nav__container{max-width:1200px;margin:0 auto;padding:0 var(--size-4, 1rem);display:flex;justify-content:space-between;align-items:center;height:70px}.nav__logo{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin:0;color:var(--color-text-primary)}.nav__links{display:flex;gap:var(--size-6, 2rem);align-items:center}.nav__link{text-decoration:none;color:var(--color-text-secondary);font-weight:500;transition:color .2s ease;position:relative}.nav__link:hover{color:var(--color-primary)}.nav__link:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--color-primary);transition:width .2s ease}.nav__link:hover:after{width:100%}.theme-toggle{background:none;border:none;cursor:pointer;padding:8px;border-radius:6px;transition:all .2s ease;color:var(--color-text-secondary);margin-left:var(--size-2, .5rem)}.theme-toggle:hover{background:var(--color-bg-secondary);color:var(--color-primary)}.theme-toggle svg{width:18px;height:18px;transition:transform .2s ease}.theme-toggle:hover svg{transform:scale(1.1)}[data-theme=dark] .theme-toggle .sun-icon{display:none}[data-theme=dark] .theme-toggle .moon-icon{display:block}[data-theme=light] .theme-toggle .moon-icon,:root .theme-toggle .moon-icon{display:none}[data-theme=light] .theme-toggle .sun-icon,:root .theme-toggle .sun-icon{display:block}.hero{--heroPLeft:1rem;padding:140px 0 100px;background-image:url(https://leileixia-website.b-cdn.net/artworks/Tactileye/Empty%20Touch/DSC00105.jpg);background-size:cover;background-position:70% center;background-repeat:no-repeat;background-color:#000;color:#fff;position:relative;overflow:hidden}.hero__container{max-width:1200px;margin:0 auto;padding:0 var(--size-8, 1rem);display:grid;grid-template-columns:none;gap:var(--size-8, 3rem);align-items:center}.hero__title{font-family:var(--font-display);font-size:clamp(2rem,2vw,4.5rem);font-weight:200;line-height:1.3;margin:0 0 var(--size-4, 1.5rem) 0;letter-spacing:-.02em}.hero__title--accent{padding-left:var(--heroPLeft);background:var(--gradient-15);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero__subtitle{padding-left:var(--heroPLeft);font-size:clamp(1.1rem,2vw,1.3rem);opacity:.9;margin:0 0 var(--size-4, 2rem) 0;font-weight:400;line-height:1.6;width:100%!important}.nameLogo{display:inline-block;width:25rem}.hero__cta{padding-left:var(--heroPLeft);display:flex;gap:var(--size-4, 1rem);flex-wrap:wrap}.hero__visual{display:flex;justify-content:center;align-items:center}.hero__decoration{width:300px;height:300px;background:linear-gradient(45deg,#ffffff1a,#ffffff0d);border-radius:50%;position:relative;animation:float 6s ease-in-out infinite}.hero__decoration:before{content:"";position:absolute;top:20px;left:20px;right:20px;bottom:20px;border:2px solid rgba(255,255,255,.2);border-radius:50%}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.btn{display:inline-flex;align-items:center;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;font-size:.95rem;transition:all .2s ease;border:2px solid transparent}.btn--primary{background:var(--color-accent);color:#fff}.btn--primary:hover{background:#d97706;transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn--secondary{background:transparent;color:#fff;border-color:#ffffff4d}.btn--secondary:hover{background:#ffffff1a;border-color:#ffffff80}.hero__cta .btn--secondary:first-child:hover{transform:translateY(-2px)}.hero__cta .btn--secondary:last-child:hover{transform:scale(1.05)}.image-title img{height:10rem}.image-title-white{display:none}[data-theme=dark] .footer__text a{color:var(--yellow-4)}[data-theme=dark] .image-title-black{display:none}[data-theme=dark] .image-title-white{display:block}.section__header{text-align:left;margin-left:var(--size-10, 4rem);margin-bottom:var(--size-8, 4rem)}.section__title{font-family:var(--font-display);font-size:var(--sectionTitleFontSize);font-weight:350;margin:0 0 var(--size-3, 1rem) 0;color:var(--color-text-primary)}.section__subtitle{font-size:1.2rem;color:var(--color-text-secondary);max-width:600px;margin:0 auto}.about{padding:var(--sectonTop) 0;background:var(--color-bg-secondary)}.about__content{max-width:800px;margin:0 auto}.about__intro{font-size:1.3rem;color:var(--color-text-primary);font-weight:300;margin-bottom:var(--size-6, 2rem);line-height:1.6}.about__text p{font-size:1.1rem;color:var(--color-text-secondary);margin-bottom:var(--size-4, 1.5rem);line-height:1.7}.about__skills{display:flex;flex-wrap:wrap;gap:var(--size-3, .75rem);margin-top:var(--size-6, 2rem)}.skill-tag{background:var(--color-primary);color:#fff;padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:500}.work{padding:var(--size-12, 5rem) 0}.filter-section{max-width:1200px;margin:0 var(--size-9, 3rem) var(--size-6, 2rem) var(--size-9, 3rem);padding:0 var(--size-4, 1rem)}.filter-toggle{display:flex;align-items:center;gap:var(--size-2, .5rem);background:var(--gradient-6);color:#fff;border:none;padding:12px 20px;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s ease;margin-bottom:var(--size-4, 1rem)}.filter-toggle:hover{background:var(--gradient-15);transform:translateY(-1px);color:var(--color-primary)}.filter-toggle__icon{transition:transform .2s ease;font-size:.8rem}.filter-toggle.active .filter-toggle__icon{transform:rotate(180deg)}.filter-options{max-height:0;overflow:hidden;transition:max-height .3s ease}.filter-options.show{max-height:fit-content}.filter-tags{display:flex;flex-wrap:wrap;gap:var(--size-2, .5rem);padding:var(--size-3, 1rem) 0}.filter-tag{background:var(--color-bg-secondary);color:var(--color-text-secondary);padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.filter-tag:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.filter-tag.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary-dark)}.filter-tag.show-all{background:var(--color-accent);color:#fff}.filter-tag.show-all:hover{background:#d97706}.card-container{max-width:1200px;margin:0 auto;justify-content:center}#app{display:grid;grid-auto-flow:row;gap:var(--size-6, 2rem);grid-template-columns:1fr 1fr 1fr;width:100%!important}.card{--cardH:250px;background:var(--color-bg-primary);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md);transition:all .3s ease;border:1px solid var(--color-border);max-width:350px;width:auto;height:var(--cardH);position:relative}.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}.card__link{text-decoration:none;color:inherit;display:block}.card__link:hover{color:inherit}.card__image-wrapper{position:relative;overflow:hidden;height:100%;width:100%}.card__image{width:100%;height:var(--cardH);object-fit:cover;transition:transform .3s ease}.card:hover .card__image{transform:scale(1.05)}.card__overlay{position:absolute;top:16px;left:16px}.card__category{visibility:hidden;background:#000000b3;color:#fff;padding:4px 12px;border-radius:12px;font-size:.8rem;font-weight:500;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease}.card:hover .card__category{opacity:1;transform:translateY(0)}.card__content{position:absolute;bottom:0;left:0;right:0;padding:var(--size-4, 1.5rem);background:linear-gradient(transparent,#000c);color:#fff;transform:translateY(100%);transition:transform .3s ease;max-height:100%;overflow:hidden}.card:hover .card__content{transform:translateY(0)}.card__title{font-family:var(--font-display);font-size:1.3rem;font-weight:300;margin:0 0 var(--size-2, .75rem) 0;color:#fff}.card__description{color:#ffffffe6;line-height:1.6;margin:0 0 var(--size-3, 1rem) 0;font-size:.95rem}.card__tags{display:flex;flex-wrap:wrap;gap:var(--size-2, .5rem)}.tag{background:#fff3;color:#fff;padding:4px 12px;border-radius:12px;font-size:.8rem;font-weight:500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.contact{padding:var(--sectonTop) 0;background:var(--color-bg-secondary);text-align:left;align-items:center}.contact__title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:400;margin:0 0 var(--size-4, 1.5rem) 0;color:var(--color-text-primary)}.contact__subtitle{font-size:1.2rem;color:var(--color-text-secondary);margin:0 0 var(--size-8, 3rem) 0;left:0;text-align:left;margin-left:auto}.contact__link{display:inline-flex;align-items:center;padding:16px 32px;background:var(--color-primary);color:#fff;text-decoration:none;border-radius:12px;font-weight:600;font-size:1.1rem;transition:all .2s ease}.contact__link:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.contact-icons{display:flex;justify-content:flex-start;align-items:center;gap:var(--size-4, 1.5rem);margin-top:var(--size-4, 1.5rem);max-width:800px;margin-left:auto;margin-right:auto}.contact-icon{display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--color-text-secondary);transition:all .3s ease;padding:var(--size-2, .75rem);border-radius:50%;background:transparent}.contact-icon:hover{color:var(--color-primary);transform:translateY(-2px);background:var(--color-bg-secondary)}.contact-icon .icon{width:24px;height:24px;transition:transform .2s ease}.contact-icon:hover .icon{transform:scale(1.1)}@media (max-width: 768px){.filter-section{padding:0 var(--size-3, .75rem)}.filter-toggle{width:100%;justify-content:center}.filter-tags{justify-content:center}.nav__links{display:none}.nav__container{justify-content:center}.hero__container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--size-6, 2rem);grid-template-columns:none}.hero__title{margin:auto auto 1rem}.hero__visual{order:-1}.hero__decoration{width:200px;height:200px}.hero__cta{justify-content:center}.about,.work,.contact{padding:var(--size-10, 4rem) 0;text-align:center}.section__header,.about__content{text-align:center}#app{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--size-4, 1.5rem);max-width:30rem;margin:0 auto}.card{max-width:100%;width:100%}.about__skills{justify-content:center}.contact__content{text-align:center}.contact-icons{gap:var(--size-3, 1rem)}.contact-icon .icon{width:20px;height:20px}}@media (max-width: 480px){.nav__container{height:60px}.hero{padding:120px 0 80px}.btn{padding:10px 20px;font-size:.9rem}.card__content{padding:var(--size-4, 1.5rem)}}.page-nav{position:fixed;top:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border);z-index:1000;transition:all .3s ease}[data-theme=dark] .page-nav{background:#111827f2}.page-nav__container{max-width:1200px;margin:0 auto;padding:0 var(--size-4, 1rem);display:flex;justify-content:space-between;align-items:center;height:70px}.page-nav__logo{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin:0;color:var(--color-text-primary);text-decoration:none}.page-nav__links{display:flex;gap:var(--size-6, 2rem)}.page-nav__link{text-decoration:none;color:var(--color-text-secondary);font-weight:500;transition:color .2s ease;position:relative}.page-nav__link:hover{color:var(--color-primary)}.page-nav__link:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--color-primary);transition:width .2s ease}.page-nav__link:hover:after{width:100%}.page-nav__links{display:flex;gap:var(--size-6, 2rem);align-items:center}.page-nav .theme-toggle{background:none;border:none;cursor:pointer;padding:8px;border-radius:6px;transition:all .2s ease;color:var(--color-text-secondary);margin-left:var(--size-2, .5rem)}.page-nav .theme-toggle:hover{background:var(--color-bg-secondary);color:var(--color-primary)}.page-nav .theme-toggle svg{width:18px;height:18px;transition:transform .2s ease}.page-nav .theme-toggle:hover svg{transform:scale(1.1)}[data-theme=dark] .page-nav .theme-toggle .sun-icon{display:none}[data-theme=dark] .page-nav .theme-toggle .moon-icon{display:block}[data-theme=light] .page-nav .theme-toggle .moon-icon,:root .page-nav .theme-toggle .moon-icon{display:none}[data-theme=light] .page-nav .theme-toggle .sun-icon,:root .page-nav .theme-toggle .sun-icon{display:block}.main-content{max-width:900px;margin:0 auto;padding:120px var(--size-4, 1rem) var(--size-8, 3rem)}.back-link{display:inline-flex;align-items:center;color:var(--color-primary);text-decoration:none;margin-bottom:var(--size-6, 2rem);font-weight:500;transition:color .2s ease}.back-link:hover{color:var(--color-primary-dark)}.hero-image{width:100%;height:400px;object-fit:cover;border-radius:16px;margin-bottom:var(--size-6, 2rem);box-shadow:var(--shadow-lg)}.page-title{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,3.5rem);font-weight:450;margin:0 0 var(--size-4, 1.5rem) 0;line-height:1.2;color:var(--color-text-primary);right:0;display:block}.page-description{font-size:1.2rem;color:var(--color-text-secondary);margin-bottom:var(--size-8, 3rem);line-height:1.6}.content{font-size:1.1rem;line-height:1.7;color:var(--color-text-primary);--bold:500}.content p{margin-bottom:var(--size-4, 1.5rem)}.content-image{width:100%;height:auto;border-radius:12px;margin:var(--size-6, 2rem) 0;box-shadow:var(--shadow-md)}.content h1{font-family:var(--font-display);font-size:2.2rem;font-weight:var(--bold);margin:var(--size-8, 3rem) 0 var(--size-4, 1.5rem) 0;color:var(--color-text-primary)}.content h2{font-family:var(--font-display);font-size:1.8rem;font-weight:var(--bold);margin:var(--size-6, 2rem) 0 var(--size-3, 1rem) 0;color:var(--color-text-primary)}.content h3{font-family:var(--font-display);font-size:1.4rem;font-weight:400;margin:var(--size-4, 1.5rem) 0 var(--size-2, .75rem) 0;color:var(--color-text-primary)}.content blockquote{border-left:4px solid var(--color-primary);padding-left:var(--size-4, 1.5rem);margin:var(--size-6, 2rem) 0;font-style:italic;color:var(--color-text-secondary);background:var(--color-bg-secondary);padding:var(--size-4, 1.5rem);border-radius:8px}.content pre{background:var(--color-bg-secondary);padding:var(--size-4, 1.5rem);border-radius:12px;overflow-x:auto;border:1px solid var(--color-border)}.content code{background:var(--color-bg-tertiary);padding:2px 6px;border-radius:4px;font-size:.9em}.content pre code{background:none;padding:0}.content ul,.content ol{padding-left:var(--size-6, 2rem);margin-bottom:var(--size-4, 1.5rem)}.content li{margin-bottom:var(--size-2, .75rem)}.column-list{display:flex;gap:var(--size-4, 1.5rem);margin:var(--size-4, 1.5rem) 0}.column{flex:1;min-width:0}.block-with-children{margin:var(--size-2, .75rem) 0}.video-wrapper{margin:var(--size-6, 2rem) 0;position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;border-radius:12px;box-shadow:var(--shadow-md)}.content-video{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px}.video-caption{text-align:center;font-style:italic;color:var(--color-text-secondary);margin-top:var(--size-2, .75rem);font-size:.9rem}.footer{padding:var(--size-8, 3rem) 0;background:var(--color-bg-tertiary);border-top:1px solid var(--color-border);text-align:center}.footer__text{font-size:.9rem;color:var(--color-text-secondary);margin:0 0 var(--size-2, .75rem) 0;line-height:1.6}.footer__text a{color:var(--color-primary);text-decoration:none;font-weight:500;transition:color .2s ease}.footer__text a:hover{color:var(--color-primary-dark);text-decoration:underline}.footer__source{font-size:.85rem;margin:0}.footer__source a{color:var(--color-text-light);text-decoration:none;font-weight:400;transition:color .2s ease}.footer__source a:hover{color:var(--color-primary);text-decoration:underline}@media (max-width: 768px){.page-nav__links{display:none}.page-nav__container{justify-content:center}.main-content{padding:100px var(--size-3, .75rem) var(--size-6, 2rem)}.hero-image{height:250px;border-radius:12px}.page-title{font-size:2rem}.page-description{font-size:1.1rem}.content{font-size:1rem}.column-list{flex-direction:column;gap:var(--size-2, .75rem)}.video-wrapper{padding-bottom:56.25%}}@media (max-width: 480px){.page-nav__container{height:60px}.main-content{padding:80px var(--size-2, .5rem) var(--size-4, 1.5rem)}.hero-image{height:200px}.video-wrapper{padding-bottom:56.25%}}