:root{--color-text:#1a1a1a;--color-text-muted:#6b6560;--color-background:#f5f0e8;--color-surface:#fffdf9;--color-primary:#8b4513;--color-primary-hover:#6b3410;--color-accent:#c9a86c;--color-border:#d4c8b8;--color-shadow:rgba(139,69,19,0.1);--font-family-base:"Segoe UI",system-ui,-apple-system,sans-serif;--font-family-mono:"Lucida Console","Consolas",monospace;--font-family-pixel:"Dogica Pixel","Dogica",monospace;--zh-font-scale:1.5;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--shadow-sm:0 1px 3px rgba(139,69,19,0.08);--shadow-md:0 4px 12px rgba(139,69,19,0.12);--shadow-lg:0 8px 24px rgba(139,69,19,0.15);--transition-fast:150ms ease;--transition-base:250ms ease;--transition-slow:400ms ease;--max-width:75vw;--content-padding:var(--space-lg)}@font-face{font-family:KaiTi;src:url(/assets/kaiti.ttf);font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:pingfang_jianti;src:url(/assets/pingfang_jianti.ttf);font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Dogica;src:url(/assets/Dogica.eot);src:url(/assets/Dogica.eot?#iefix) format("embedded-opentype"),url(/assets/Dogica.woff2) format("woff2"),url(/assets/Dogica.woff) format("woff"),url(/assets/Dogica.ttf) format("truetype"),url(/assets/Dogica.svg#Dogica) format("svg");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Dogica Pixel;src:url(/assets/Dogica_Pixel_Bold.eot);src:url(/assets/Dogica_Pixel_Bold.eot?#iefix) format("embedded-opentype"),url(/assets/Dogica_Pixel_Bold.woff2) format("woff2"),url(/assets/Dogica_Pixel_Bold.woff) format("woff"),url(/assets/Dogica_Pixel_Bold.ttf) format("truetype"),url(/assets/Dogica_Pixel_Bold.svg#Dogica_Pixel_Bold) format("svg");font-weight:700;font-style:normal;font-display:swap}@keyframes skeleton-pulse{0%{background-color:var(--color-border)}50%{background-color:#cbd5e1}to{background-color:var(--color-border)}}.skeleton{animation:skeleton-pulse 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--color-border)}*,:after,:before{box-sizing:border-box}html{scroll-behavior:smooth}:lang(zh){font-family:"KaiTi",var(--font-family-mono)}.hero__title:lang(zh){font-family:pingfang_jianti;font-size:calc(clamp(2rem, 8vw, 3.5rem) * var(--zh-font-scale))}.hero__link:lang(zh){font-size:calc(1.3rem * var(--zh-font-scale))}.section__title:lang(zh){font-family:KaiTi;font-size:calc(1.25rem * var(--zh-font-scale))}.section__text:lang(zh){font-size:calc(1.1rem * var(--zh-font-scale));line-height:2}.project-card,.project-card__description,.project-card__title{font-family:var(--font-family-base)}.website-card__title:lang(zh){font-family:KaiTi;font-size:calc(1rem * var(--zh-font-scale));white-space:normal;overflow:visible}.website-card__description:lang(zh){font-family:KaiTi;font-size:calc(.9rem * var(--zh-font-scale));-webkit-line-clamp:unset}.website-card__tag:lang(zh){font-family:KaiTi;font-size:calc(.65rem * var(--zh-font-scale))}.websites-toggle__btn:lang(zh){font-family:KaiTi;font-size:calc(.9rem * var(--zh-font-scale))}body,html{margin:0;padding:0;overflow-x:hidden;width:100%}body{font-family:var(--font-family-mono);font-size:1rem;line-height:1.6;color:var(--color-text);background-color:var(--color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{background:radial-gradient(ellipse at 20% 20%,rgba(201,168,108,.08) 0,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(139,69,19,.05) 0,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(201,168,108,.03) 0,transparent 70%)}body:after,body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:0}body:after{opacity:.08;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238b4513' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.language-toggle{position:fixed;top:var(--space-lg);right:var(--space-lg);z-index:100;padding:var(--space-sm) var(--space-lg);font-family:var(--font-family-pixel);font-size:.85rem;color:var(--color-primary);background:var(--color-surface);border:1px solid var(--color-accent);border-radius:2px;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.language-toggle:hover{background:var(--color-accent);color:var(--color-surface);transform:translateY(-1px);box-shadow:var(--shadow-md)}.language-toggle:active{transform:translateY(0)}.page{position:relative;z-index:1;max-width:var(--max-width);margin:0 auto;padding:0 var(--content-padding)}.page--full{max-width:100%;padding:0}.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;text-align:center;padding:var(--space-2xl) 0;position:relative;overflow:hidden}.hero__content{margin-bottom:var(--space-xl);width:100%}.hero:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:3px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent)}.hero__title{font-family:var(--font-family-pixel);font-size:clamp(1.8rem,10vw,4rem);font-weight:400;margin:0 0 var(--space-xl);letter-spacing:.05em;color:var(--color-primary);position:relative;padding:0 var(--space-xl);z-index:2;line-height:1.1}.hero__title:after{content:"";position:absolute;bottom:-1.25rem;left:50%;transform:translateX(-50%);width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent)}.hero__subtitle{font-size:1.1rem;color:var(--color-text-muted);margin:0 0 var(--space-lg);font-weight:400}.hero__subtitle:lang(zh){font-family:KaiTi;font-size:calc(1.2rem * var(--zh-font-scale))}.hero__nav{margin-top:var(--space-xl)}.hero__list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm) var(--space-lg);list-style:none;padding:0;margin:0}.hero__link{display:inline-block;padding:var(--space-sm) 0;font-size:1.15rem;font-weight:500;color:var(--color-text-muted);text-decoration:none;position:relative;transition:color var(--transition-fast)}.hero__link:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--color-accent);transform:scaleX(0);transform-origin:center;transition:transform var(--transition-base)}.hero__link:hover{color:var(--color-primary)}.hero__link:hover:after{transform:scaleX(1)}.section{padding:var(--space-3xl) 0;position:relative}.section:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);opacity:.6}.section__title{font-family:var(--font-family-pixel);font-size:1.25rem;font-weight:600;margin:0 0 var(--space-lg);color:var(--color-primary);letter-spacing:.02em}.section__text{margin:0;max-width:65ch;line-height:1.8;color:var(--color-text)}.section__link{color:var(--color-primary);font-family:var(--font-family-mono);text-decoration:underline;-webkit-text-decoration-color:var(--color-accent);text-decoration-color:var(--color-accent);text-underline-offset:3px;transition:color var(--transition-fast)}.section__link:hover{color:var(--color-primary-hover)}.section__text a{font-family:var(--font-family-mono)}.about-content{display:flex;align-items:flex-start;gap:var(--space-lg)}.about-content .section__text{flex:1 1}.about__logo{width:10rem;height:auto;object-fit:contain;flex-shrink:0}.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:var(--space-xl);gap:var(--space-xl)}.project-card{display:flex;flex-direction:column;padding:var(--space-xl);background-color:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-md);border:1px solid var(--color-border);transition:transform var(--transition-base),box-shadow var(--transition-base)}.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.project-card__icon-wrapper{width:56px;height:56px}.project-card__icon{width:100%;height:100%;object-fit:contain;background-color:transparent;padding:var(--space-xs)}.project-card__title{font-family:var(--font-family-base);font-size:1.15rem;font-weight:600;margin:0 0 var(--space-sm);text-align:center;color:var(--color-text)}.project-card__description{flex-grow:1;margin:0 0 var(--space-lg);font-size:.875rem;color:var(--color-text-muted);text-align:center;line-height:1.5}.project-card__link{display:inline-block;padding:var(--space-sm) var(--space-lg);background-color:var(--color-primary);color:white;font-size:.875rem;font-family:var(--font-family-mono);font-weight:500;text-align:center;border-radius:2px;text-decoration:none;transition:background-color var(--transition-fast),transform var(--transition-fast)}.project-card__link:hover{background-color:var(--color-primary-hover);transform:translateY(-1px)}.websites-toggle{display:flex;gap:var(--space-sm);margin-bottom:var(--space-xl);padding:var(--space-xs);background-color:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border);width:-moz-fit-content;width:fit-content}.websites-toggle__btn{padding:var(--space-sm) var(--space-lg);font-family:var(--font-family-base);font-size:.9rem;font-weight:500;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);background-color:transparent;color:var(--color-text-muted)}.websites-toggle__btn:hover{background-color:var(--color-background);color:var(--color-text)}.websites-toggle__btn:focus{outline:2px solid var(--color-accent);outline-offset:2px}.websites-toggle__btn--active{background-color:var(--color-primary);color:white}.websites-toggle__btn--active:hover{background-color:var(--color-primary-hover)}.websites-grid-container{position:relative;min-height:200px}.websites-grid{display:none;grid-template-columns:repeat(auto-fit,minmax(300px,420px));gap:var(--space-xl);justify-content:center;opacity:0;transform:translateY(10px);transition:opacity var(--transition-slow),transform var(--transition-slow)}.websites-grid--active{display:grid;opacity:1;transform:translateY(0)}.website-card{background-color:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;max-width:420px;border:1px solid var(--color-border);transition:transform var(--transition-base),box-shadow var(--transition-base)}.website-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-lg)}.website-card__link{display:flex;flex-direction:column;color:inherit;text-decoration:none}.website-card__preview{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background-color:var(--color-background)}.website-card__thumbnail{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.website-card:hover .website-card__thumbnail{transform:scale(1.05)}.website-card__content{padding:var(--space-md);display:flex;flex-direction:column;gap:4px}.website-card__tag{display:inline-block;align-self:flex-start;padding:2px 8px;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:white;background-color:var(--color-primary);border-radius:2px}.website-card__title{font-size:.9rem;font-weight:600;margin:0;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.website-card__domain{margin:0;font-family:var(--font-family-mono);font-size:.75rem;color:var(--color-text-muted)}.website-card__description{margin:4px 0 0;font-size:.8rem;color:var(--color-text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.case-study{padding:var(--space-3xl) 0;background-color:transparent;position:relative;z-index:1;--radius-gallery:25px;--radius-stacked:20px}.case-study__back-link{display:inline-flex;align-items:center;gap:var(--space-sm);color:var(--color-primary);text-decoration:none;font-family:var(--font-family-pixel);font-size:.8rem;margin-bottom:var(--space-xl);transition:transform var(--transition-fast)}.case-study__back-link:lang(zh){font-family:KaiTi,serif;font-size:1.2rem}.case-study__back-link:hover{transform:translateX(-4px)}.case-study__header{text-align:center;margin-bottom:var(--space-3xl)}.case-study__title{font-family:var(--font-family-pixel);font-size:clamp(1.5rem,5vw,3rem);color:var(--color-primary);margin:0 0 var(--space-lg);line-height:1.2}.case-study__quote{font-size:1.25rem;font-style:italic;color:var(--color-text-muted);max-width:800px;margin:0 auto;line-height:1.6;font-family:var(--font-family-base)}.case-study__hero-container{width:100%;margin:var(--space-3xl) 0}.case-study__hero-img-std{width:100%;height:auto;display:block;border-radius:25px;box-shadow:var(--shadow-md)}.case-study__grid-layout{display:grid;grid-template-columns:300px 1fr;grid-gap:var(--space-3xl);gap:var(--space-3xl);margin-top:var(--space-3xl);align-items:start}.case-study__sidebar-sticky{position:-webkit-sticky;position:sticky;top:var(--space-xl)}.case-study__section-title{font-family:var(--font-family-pixel);font-size:.9rem;color:var(--color-primary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-md)}.case-study__section-title:lang(zh){font-family:KaiTi,serif;font-size:1.5rem;text-transform:none}.skills-list{display:flex;flex-direction:column;gap:var(--space-sm);list-style:none;padding:0;margin:0}.skills-list__item{font-size:.85rem;font-family:var(--font-family-mono);color:var(--color-text-muted);text-transform:uppercase;line-height:1.4}.skills-list__item:lang(zh){font-family:KaiTi,serif;font-size:1.3rem;font-weight:500;text-transform:none}.case-study__gallery-flow{display:flex;flex-direction:column;gap:var(--space-2xl);width:100%}.case-study__stacked-gallery{display:flex;flex-direction:column;align-items:center;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:var(--space-3xl) 0}.case-study__stacked-content{max-width:var(--max-width);width:100%}.case-study__stacked-img-container{width:100%;line-height:0;display:block;margin-bottom:20px;overflow:hidden}.case-study__stacked-img-container,.case-study__stacked-img-container .gallery-img-fluid{border-radius:var(--radius-stacked)}.gallery-img-fluid{width:100%;height:auto;border-radius:var(--radius-gallery);display:block}.gallery-row-std{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--space-lg);gap:var(--space-lg)}.portfolio.mobile{--phone-scale:0.7;--screen-scale:1.105;--phone-w:466px;--phone-h:898px;--screen-t:5px;--screen-w:390px;--screen-h:810px;--screen-r:70px;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background-color:transparent;padding:var(--space-3xl) 0}.img-project,.portfolio.mobile{display:flex;justify-content:center;align-items:center}.img-project{gap:var(--space-3xl);list-style:none;margin:0;padding:0}.img-project li{position:relative;width:calc(var(--phone-w) * var(--phone-scale));height:calc(var(--phone-h) * var(--phone-scale));flex-shrink:0}.img-project li:before{content:"";display:block;height:100%;width:100%;background-image:url(/assets/iphone.png);background-repeat:no-repeat;background-size:calc(1200px * var(--phone-scale));background-position:calc(-367px * var(--phone-scale)) calc(-151px * var(--phone-scale));position:absolute;top:0;left:0;z-index:1;pointer-events:none}.mobile-frame-std__screen{position:absolute;--final-scale:calc(var(--phone-scale) * var(--screen-scale));top:calc(var(--screen-t) * var(--phone-scale));left:50%;transform:translateX(-50%);width:calc(var(--screen-w) * var(--final-scale));height:calc(var(--screen-h) * var(--final-scale));border-radius:calc(var(--screen-r) * var(--final-scale));overflow:hidden;z-index:0;display:block;background-color:#ffffff!important}.mobile-frame-std__img{width:100%;height:100%;display:block;object-fit:cover;background-color:#ffffff}.case-study__footer-img-wrap{margin-top:var(--space-3xl);width:100%}.case-study__sidebar-cta,.case-study__sidebar-logo{margin-top:var(--space-2xl)}.case-study__sidebar-logo{width:120px}.sidebar-logo-img{width:100%;height:auto;object-fit:contain}.case-study__cta-btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;background-color:transparent;color:var(--color-primary);text-decoration:none;font-family:var(--font-family-pixel);font-size:.85rem;border-bottom:2px solid var(--color-accent);transition:all var(--transition-base)}.case-study__cta-btn:lang(zh){font-family:KaiTi,serif;font-size:1.2rem;padding:0}.case-study__cta-btn:hover{color:var(--color-primary-hover);border-bottom-color:var(--color-primary)}.cta-arrow{transition:transform var(--transition-base)}.case-study__cta-btn:hover .cta-arrow{transform:translateX(6px)}@media (max-width:1024px){.case-study__grid-layout{grid-template-columns:1fr;gap:var(--space-2xl)}.case-study__sidebar-sticky{position:static}.case-study__sidebar{order:1}.case-study__gallery-flow{order:2}.skills-list{flex-direction:row;flex-wrap:wrap;gap:var(--space-sm) var(--space-md)}.mobile-mockup-wrap{gap:var(--space-xl)}}@media (max-width:768px){:root{--max-width:92vw;--content-padding:var(--space-md)}.case-study{padding:var(--space-xl) 0}.case-study__hero-container{margin:var(--space-xl) 0}.gallery-row-std{grid-template-columns:1fr;gap:var(--space-md)}.portfolio.mobile{--phone-scale:0.55;padding:var(--space-xl) 0}.img-project{flex-direction:column;align-items:center;gap:var(--space-xl);padding:0}.case-study__stacked-gallery{padding:var(--space-xl) 0}.case-study__stacked-content{gap:var(--space-xl)}.case-study__footer-img-wrap{margin-top:var(--space-xl)}.skills-list{flex-direction:column;gap:var(--space-xs)}.skills-list__item{padding:2px 0;border-bottom:1px solid var(--color-border);width:100%}}@media (max-width:480px){.hero__list{flex-direction:column;align-items:center;gap:var(--space-md)}.hero__link{font-size:1rem}.about-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}.about-content .section__text{text-align:center}.about__logo{width:8rem}.portfolio.mobile{--phone-scale:0.45}}