@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;800&display=swap";:root{--color-bg:#000;--color-primary:#fff;--color-link:#4285f4;--color-text-secondary:#ffffffb3;--color-text-tertiary:#fff6;--color-divider:#ffffff29;--color-nav-bg:#262626b3;--color-tag-bg:#ffffff0f;--font-size-display:44px;--font-size-h1:40px;--font-size-h2:22px;--font-size-h3:20px;--font-size-body-lg:18px;--font-size-body:16px;--font-size-body-sm:15px;--font-size-label:14px;--font-size-label-sm:13px;--font-size-caption:12px;--font-family-zh:"PingFang SC", "PingFang TC", "Microsoft YaHei", sans-serif;--font-family-en:"Inter", sans-serif;--font-family-base:var(--font-family-en), var(--font-family-zh), sans-serif;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-extrabold:800;--line-height-tight:1.4;--line-height-snug:1.5;--line-height-normal:1.6;--line-height-relaxed:1.7;--line-height-massive:2;--spacing-2:2px;--spacing-4:4px;--spacing-6:6px;--spacing-8:8px;--spacing-10:10px;--spacing-12:12px;--spacing-14:14px;--spacing-16:16px;--spacing-18:18px;--spacing-20:20px;--spacing-24:24px;--spacing-28:28px;--spacing-32:32px;--spacing-36:36px;--spacing-40:40px;--spacing-48:48px;--spacing-60:60px;--spacing-80:80px;--spacing-100:100px;--spacing-120:120px;--spacing-160:160px;--radius-8:8px;--radius-10:10px;--radius-12:12px;--radius-14:14px;--radius-18:18px;--radius-22:22px;--radius-full:9999px;--max-width:980px;--page-padding-x:24px;--page-padding-x-mobile:20px;--nav-height:60px;--nav-blur:10px;--transition-fast:.2s ease;--transition-base:.3s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-primary);font-family:var(--font-family-base);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.container{width:100%;max-width:var(--max-width);padding-left:var(--spacing-40);padding-right:var(--spacing-40);margin:0 auto}a{color:var(--color-link);transition:filter var(--transition-fast);text-decoration:none}a:hover{filter:brightness(.7)}img{max-width:100%;height:auto;display:block}.page-enter{animation:.4s forwards pageFadeIn}@keyframes pageFadeIn{0%{opacity:0}to{opacity:1}}.section-animate{opacity:0;transform:translateY(var(--spacing-24));transition:opacity .5s,transform .5s}.section-animate.visible{opacity:1;transform:translateY(0)}.footer{padding:var(--spacing-120) 0 var(--spacing-60);flex-direction:column;align-items:center;display:flex}.footer-logo{width:var(--spacing-40);height:var(--spacing-40);margin-bottom:var(--spacing-12)}.footer-brand,.footer-slogan{font-size:var(--font-size-caption);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary);font-family:var(--font-family-en);margin-bottom:0}.footer-year{font-size:var(--font-size-caption);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary);font-family:var(--font-family-en)}@media (width<=767px){.footer{padding:var(--spacing-60) 0 var(--spacing-40)}}.portfolio-page-wrapper{width:100%}.portfolio-homepage-content{box-sizing:border-box;width:100%;max-width:1000px;margin-left:auto;margin-right:auto;padding-top:210px}.hero-section{margin-bottom:var(--spacing-120);padding-left:var(--spacing-2);padding-right:var(--spacing-2);z-index:10;position:relative}.hero-section.centered{text-align:center;flex-direction:column;align-items:center;display:flex}.hero-top-row.centered{margin-bottom:var(--spacing-16);justify-content:center;width:100%;display:flex}.hero-badge{align-items:center;gap:var(--spacing-4);font-size:var(--font-size-label);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary);font-family:var(--font-family-en);display:flex;position:relative}.hero-badge:before{content:"";z-index:-1;pointer-events:none;background-image:url(https://guoboyuan-portfolio.oss-cn-beijing.aliyuncs.com/Color%20Bg.png);background-position:50%;background-repeat:no-repeat;background-size:contain;width:106px;height:60px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hero-badge-icon{opacity:.4;width:21px;height:21px}.hero-title{font-family:var(--font-family-zh);font-size:var(--font-size-display);font-weight:var(--font-weight-semibold);color:var(--color-primary);line-height:var(--line-height-tight);margin-bottom:var(--spacing-24)}.hero-title.centered{text-align:center;max-width:900px;margin-left:auto;margin-right:auto}.hover-char{color:var(--color-primary);display:inline-block}.hero-title.animate-glow .hover-char{animation-name:charGlow;animation-timing-function:ease-in-out;animation-delay:var(--glow-delay,0s);animation-duration:var(--glow-duration,.4s);animation-iteration-count:var(--glow-iterations,3);animation-fill-mode:forwards}@keyframes charGlow{0%{color:var(--color-primary)}30%{color:var(--glow-color)}70%{color:var(--glow-color)}to{color:var(--color-primary)}}.hero-description{font-size:var(--font-size-body-lg);font-weight:var(--font-weight-regular);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--spacing-40)}.hero-description.centered{text-align:center;max-width:750px;margin-left:auto;margin-right:auto}.hero-actions-centered{align-items:center;gap:var(--spacing-20);flex-direction:column;display:flex}.hero-download-btn{align-items:center;gap:var(--spacing-8);padding:var(--spacing-12) var(--spacing-24);border-radius:var(--radius-full);color:var(--color-bg);font-family:var(--font-family-zh);font-size:var(--font-size-label);font-weight:var(--font-weight-medium);background:var(--color-primary);transition:all var(--transition-fast);border:none;text-decoration:none;display:inline-flex}.hero-download-btn:hover{color:var(--color-bg);filter:none;background:#ffffffe6}.hero-contact-wrapper.centered{justify-content:center;display:inline-flex;position:relative}.hero-contact-btn{align-items:center;gap:var(--spacing-4);font-size:var(--font-size-label);color:var(--color-primary);transition:all var(--transition-fast);cursor:pointer;font-family:var(--font-family-zh);background:0 0;border:none;text-decoration:none;display:inline-flex}.hero-contact-btn:hover{color:var(--color-primary);filter:none}.hero-contact-icon{width:20px;height:20px}.contact-popover.bottom-centered{z-index:1000;opacity:0;visibility:hidden;transition:opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);padding-top:12px;position:absolute;top:100%;left:50%;right:auto;transform:translateY(12px)translate(-50%)}.hero-contact-wrapper.centered:hover .contact-popover.bottom-centered{opacity:1;visibility:visible;transform:translateY(0)translate(-50%)}.contact-card{border-radius:var(--radius-12);box-sizing:border-box;width:max-content;padding-top:var(--spacing-32);padding-bottom:var(--spacing-28);text-align:left;background-color:#262626;flex-direction:column;display:flex}.contact-qr{width:140px;height:140px;margin:0 auto;display:block}.contact-qr-label{font-size:var(--font-size-caption);color:var(--color-text-secondary);margin-top:var(--spacing-10);text-align:center;font-family:var(--font-family-zh);font-weight:var(--font-weight-regular)}.contact-details{margin-top:var(--spacing-20);padding-left:var(--spacing-20);padding-right:var(--spacing-20);flex-direction:column;display:flex}.contact-detail-item:not(:last-child){margin-bottom:var(--spacing-16)}.contact-detail-label{font-size:var(--font-size-label);color:var(--color-text-secondary);font-family:var(--font-family-zh);line-height:var(--line-height-tight)}.contact-detail-value{font-size:var(--font-size-label);color:var(--color-primary);font-family:var(--font-family-zh);margin-top:var(--spacing-4);line-height:var(--line-height-tight)}.portfolio-projects-grid{margin-bottom:var(--spacing-160);grid-template-columns:repeat(2,484px);justify-content:center;gap:32px;width:100%;display:grid}.project-card{cursor:pointer;border-radius:8px;flex-direction:column;text-decoration:none;display:flex;overflow:hidden}.project-card-image-wrapper{background-color:var(--color-divider);width:484px;height:288px;margin-bottom:var(--spacing-20);border-radius:8px;overflow:hidden}.project-card-image{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-base);display:block}.project-card:hover .project-card-image{transform:scale(1.03)}.project-card-content{flex-direction:column;flex-grow:1;display:flex}.project-card-title{font-family:var(--font-family-zh);font-size:var(--font-size-body-lg);font-weight:var(--font-weight-semibold);color:var(--color-primary);margin-bottom:var(--spacing-8);line-height:var(--line-height-tight);transition:opacity var(--transition-fast)}.project-card:hover .project-card-title{opacity:.8}.project-card-description{font-family:var(--font-family-zh);font-size:var(--font-size-label);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--spacing-6);flex-grow:1}.project-card-meta{font-size:var(--font-size-caption);color:var(--color-text-tertiary);font-family:var(--font-family-en);justify-content:space-between;align-items:center;display:flex}.project-card-english-title,.project-card-period{font-weight:var(--font-weight-medium);font-size:var(--font-size-label);font-family:var(--font-family-en);color:var(--color-text-tertiary)}.other-projects-section{width:100%;padding-top:var(--spacing-64);margin-bottom:0}.other-projects-container{grid-template-columns:auto 1fr;gap:100px;width:100%;display:grid}.other-projects-title{font-family:var(--font-family-zh);font-size:var(--font-size-h2);font-weight:var(--font-weight-semibold);color:var(--color-primary);line-height:var(--line-height-tight)}.other-projects-list{flex-direction:column;display:flex}.other-project-item{gap:var(--spacing-6);padding:var(--spacing-24) 0;border-top:1px solid var(--color-divider);cursor:pointer;transition:opacity var(--transition-fast);flex-direction:column;text-decoration:none;display:flex}.other-project-item:first-child{border-top:none;padding-top:0}.other-project-item:last-child{padding-bottom:0}.other-project-item:hover{opacity:.9}.other-project-header{justify-content:space-between;align-items:center;display:flex}.other-project-name{font-family:var(--font-family-zh);font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-primary);line-height:24px}.other-project-date{font-family:var(--font-family-zh);font-size:var(--font-size-label);color:var(--color-text-tertiary);font-weight:var(--font-weight-regular);line-height:var(--line-height-relaxed)}.other-project-summary{font-family:var(--font-family-zh);font-size:var(--font-size-label);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);max-width:600px}@media (width<=999px){.portfolio-homepage-content{max-width:100%;padding-left:var(--spacing-40);padding-right:var(--spacing-40)}.portfolio-projects-grid{grid-template-columns:repeat(2,1fr);gap:32px}.project-card-image-wrapper{aspect-ratio:484/288;width:100%;height:auto}.other-projects-container{grid-template-columns:auto 1fr;gap:40px}}@media (width<=767px){.portfolio-homepage-content{padding-top:var(--spacing-100);padding-left:var(--spacing-20);padding-right:var(--spacing-20)}.hero-title{font-size:var(--font-size-h2)}.hero-badge:before{display:none}.portfolio-projects-grid{gap:var(--spacing-40);margin-bottom:var(--spacing-80);grid-template-columns:1fr;max-width:484px;margin-left:auto;margin-right:auto}.project-card-image-wrapper{aspect-ratio:484/288;width:100%;height:auto}.other-projects-section{padding-top:var(--spacing-40);margin-bottom:0}.other-projects-container{gap:var(--spacing-24);grid-template-columns:1fr}.other-project-header{align-items:flex-start;gap:var(--spacing-4);flex-direction:column}.other-project-date{font-size:var(--font-size-caption)}.contact-popover.bottom-centered{top:100%;left:50%;transform:translateY(8px)translate(-50%)}}.project-detail-page-wrapper{width:100%}.project-detail-header-new{margin-bottom:var(--spacing-64);text-align:center;flex-direction:column;align-items:center;width:100%;padding-top:152px;display:flex}.project-detail-meta-centered{width:100%;padding-bottom:var(--spacing-80);flex-direction:column;align-items:center;display:flex}.project-detail-tag{background-color:var(--color-primary);color:var(--color-bg);font-family:var(--font-family-en);font-size:var(--font-size-label-sm);font-weight:var(--font-weight-regular);border-radius:var(--radius-full);margin-bottom:var(--spacing-16);justify-content:center;align-items:center;padding:3px 14px;display:inline-flex}.project-detail-period{font-family:var(--font-family-en);font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-tertiary);margin-bottom:var(--spacing-10)}.project-detail-title-centered{font-family:var(--font-family-zh);font-size:32px;font-weight:var(--font-weight-semibold);color:var(--color-primary);line-height:var(--line-height-tight);margin-bottom:var(--spacing-10);max-width:800px}.project-detail-desc-centered{font-family:var(--font-family-zh);font-size:var(--font-size-body-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);max-width:600px;margin:0 auto}.portfolio-main-content{width:100%;padding-bottom:80px}.portfolio-images{gap:var(--spacing-28);flex-direction:column;display:flex}.lazy-image-wrapper{background-color:var(--color-divider);border-radius:0;width:100%;overflow:hidden}.lazy-image{opacity:0;width:100%;height:auto;transition:opacity var(--transition-base);display:block}.lazy-image.loaded{opacity:1}.back-to-top-btn{background-color:var(--color-nav-bg);width:44px;height:44px;-webkit-backdrop-filter:blur(var(--nav-blur));backdrop-filter:blur(var(--nav-blur));color:var(--color-primary);cursor:pointer;z-index:1000;opacity:0;visibility:hidden;transition:opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast), background-color var(--transition-fast), right .5s cubic-bezier(.25, 1, .5, 1);border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex;position:fixed;bottom:24px;right:48px;transform:translateY(16px)}.back-to-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top-btn:hover{color:var(--color-primary);background-color:#26262566}.back-to-top-btn svg{transition:transform var(--transition-fast)}.back-to-top-btn:hover svg{transform:translateY(-3px)}@media (width>=1160px){.back-to-top-btn{right:calc(50% - 452px)}}@media (width>=1000px) and (width<=1439px){.portfolio-layout-container.has-catalog~.back-to-top-btn{right:308px}}@media (width>=1440px){.portfolio-layout-container.has-catalog~.back-to-top-btn{right:calc(50% - 452px)}}@media (width<=767px){.back-to-top-btn{width:40px;height:40px;bottom:24px;right:24px}}.portfolio-img-anchor{width:100%;scroll-margin-top:90px}.portfolio-layout-container{box-sizing:border-box;grid-template-columns:calc(50% - 500px) 1000px calc(50% - 500px);width:100%;transition:grid-template-columns .5s cubic-bezier(.25,1,.5,1);display:grid}.portfolio-main-content{grid-column:2;width:100%}@media (width>=1000px){.portfolio-sidebar-col{opacity:0;visibility:hidden;grid-column:3;justify-self:start;width:180px;margin-left:40px;transition:opacity .5s cubic-bezier(.25,1,.5,1),visibility .5s cubic-bezier(.25,1,.5,1),transform .5s cubic-bezier(.25,1,.5,1);display:block;position:relative;transform:translate(20px)}.portfolio-sidebar-col.visible{opacity:1;visibility:visible;transform:translate(0)}}@media (width>=1440px){.portfolio-layout-container.has-catalog{grid-template-columns:calc(50% - 500px) 1000px calc(50% - 500px)}}@media (width>=1300px) and (width<=1439px){.portfolio-layout-container{grid-template-columns:calc(50% - 500px) 1000px calc(50% - 500px)}.portfolio-layout-container.has-catalog{grid-template-columns:calc(100% - 1260px) 1000px 260px}}@media (width>=1000px) and (width<=1299px){.portfolio-layout-container{grid-template-columns:40px calc(100% - 80px) 40px}.portfolio-layout-container.has-catalog{grid-template-columns:40px calc(100% - 300px) 260px}}@media (width<=999px){.portfolio-layout-container{padding-left:var(--spacing-40);padding-right:var(--spacing-40);grid-template-columns:1fr}.portfolio-main-content{grid-column:1;justify-self:center;width:100%;max-width:1080px}.portfolio-sidebar-col{display:none!important}}.portfolio-catalog{align-items:flex-start;gap:var(--spacing-10);scrollbar-width:none;box-sizing:border-box;background:0 0;border:none;flex-direction:column;width:100%;max-height:calc(100vh - 180px);padding:0;display:flex;position:sticky;top:140px;overflow:hidden auto}.portfolio-catalog::-webkit-scrollbar{display:none}.catalog-item{cursor:pointer;text-align:left;width:100%;transition:color var(--transition-fast);background:0 0;border:none;outline:none;flex-direction:row;justify-content:flex-start;align-items:center;padding:4px 0;display:flex}.catalog-item.level-1{color:var(--color-text-secondary)}.catalog-item.level-2{color:var(--color-text-tertiary);padding-left:var(--spacing-16)}.catalog-item:hover,.catalog-item.active{color:var(--color-primary)!important}.catalog-text{font-size:var(--font-size-label);font-family:var(--font-family-zh);color:inherit;font-weight:var(--font-weight-regular);white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%;transition:opacity var(--transition-fast), color var(--transition-fast);overflow:hidden}.catalog-item.level-1 .catalog-text{font-weight:var(--font-weight-medium)}.portfolio-catalog-wrapper:hover .catalog-text{opacity:.7;width:190px}.catalog-item:hover .catalog-text,.catalog-item.active .catalog-text{opacity:1!important}@media (width<=767px){.project-detail-header-new{padding-top:var(--spacing-80);margin-bottom:var(--spacing-32)}.project-detail-title-centered{font-size:var(--font-size-h2)}.project-detail-desc-centered{font-size:var(--font-size-body-sm)}}.design-thinking-page{padding-top:var(--spacing-160);padding-bottom:0}.dt-header{text-align:center;margin-bottom:var(--spacing-60)}.dt-title{font-family:var(--font-family-zh);font-size:var(--font-size-h1);font-weight:var(--font-weight-semibold);color:var(--color-primary);margin-bottom:var(--spacing-12)}.dt-zcool-btn{align-items:center;gap:var(--spacing-2);border:1px solid var(--color-divider);border-radius:var(--radius-full);color:var(--color-primary);font-size:var(--font-size-label);font-weight:var(--font-weight-medium);font-family:var(--font-family-zh);transition:all var(--transition-fast);background-color:var(--color-tag-bg);padding:5px 14px 5px 12px;text-decoration:none;display:inline-flex}.dt-zcool-icon{width:20px;height:20px}.dt-article-list{flex-direction:column;display:flex}.dt-article-item{gap:var(--spacing-24);padding:var(--spacing-24) 0;border-top:1px solid var(--color-divider);color:inherit;transition:all var(--transition-fast);grid-template-columns:180px 1fr auto;align-items:start;text-decoration:none;display:grid}.dt-article-item:hover{opacity:.9}.dt-article-item:first-child{border-top:none}.dt-article-item:last-child{border-bottom:1px solid var(--color-divider)}.dt-article-meta{gap:var(--spacing-6);flex-direction:column;display:flex}.dt-article-category{font-size:var(--font-size-label);font-weight:var(--font-weight-medium);color:var(--color-primary);font-family:var(--font-family-zh);line-height:24px}.dt-article-date{font-size:var(--font-size-body-sm);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary);line-height:var(--line-height-relaxed);font-family:var(--font-family-zh)}.dt-article-content{gap:var(--spacing-6);flex-direction:column;display:flex}.dt-article-title{font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-primary);transition:color var(--transition-fast);font-family:var(--font-family-zh);line-height:24px}.dt-article-summary{font-size:var(--font-size-body-sm);font-weight:var(--font-weight-regular);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);font-family:var(--font-family-zh);max-width:600px}.dt-article-link-icon{width:var(--spacing-16);height:var(--spacing-16);opacity:.7;transition:opacity var(--transition-fast);align-self:center}@media (width<=767px){.design-thinking-page{padding-top:var(--spacing-100)}.dt-title{font-size:var(--font-size-h2)}.dt-article-item{gap:var(--spacing-12);grid-template-columns:1fr auto}.dt-article-meta{align-items:center;gap:var(--spacing-12);flex-direction:row;grid-column:1/-1}}.photo-scroll{width:100%;max-width:100%;padding:0;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000);mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000)}.photo-scroll-track{gap:var(--spacing-12);width:max-content;animation:50s linear infinite scrollLeft;display:flex}.photo-scroll-track:hover{animation-play-state:paused}@keyframes scrollLeft{0%{transform:translate(0)}to{transform:translate(-50%)}}.photo-scroll-item{border-radius:var(--radius-12);width:220px;height:147px;transition:transform var(--transition-fast), opacity var(--transition-fast);flex-shrink:0;overflow:hidden}.photo-scroll-item:hover{opacity:.9;transform:scale(1.02)}.photo-scroll-img{object-fit:cover;width:100%;height:100%;display:block}@media (width<=767px){.photo-scroll-item{width:180px;height:120px}}.about-page{padding-top:var(--spacing-160);padding-bottom:0}.about-profile{margin-bottom:var(--spacing-48);z-index:10;justify-content:space-between;align-items:center;display:flex;position:relative}.about-avatar{object-fit:cover;border-radius:50%;flex-shrink:0;width:160px;height:160px}.about-contact-list{gap:var(--spacing-12);flex-direction:column;align-items:flex-start;display:flex}.about-contact-item{align-items:center;gap:20px;display:flex}.about-contact-label{font-size:var(--font-size-label);font-weight:var(--font-weight-regular);color:var(--color-text-secondary);font-family:var(--font-family-zh)}.about-contact-value{font-size:var(--font-size-label);font-weight:var(--font-weight-regular);color:var(--color-primary);font-family:var(--font-family-zh)}.about-wechat-btn{align-items:center;gap:var(--spacing-6);color:var(--color-primary);font-size:var(--font-size-label);font-family:var(--font-family-zh);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;padding:0;display:inline-flex}.about-wechat-btn:hover{color:var(--color-primary)}.about-wechat-icon{width:20px;height:20px}.about-intro{margin-bottom:var(--spacing-40)}.about-intro-title{font-family:var(--font-family-zh);font-size:var(--font-size-h1);font-weight:var(--font-weight-semibold);color:var(--color-primary);line-height:var(--line-height-tight);margin-bottom:var(--spacing-40)}.about-intro-text{font-size:var(--font-size-h2);font-weight:var(--font-weight-regular);color:var(--color-primary);line-height:var(--line-height-relaxed);margin-bottom:var(--spacing-36);font-family:var(--font-family-zh)}.about-intro-text:last-child{margin-bottom:0}.about-skills{gap:var(--spacing-12);margin-bottom:var(--spacing-80);flex-direction:column;display:flex}.about-skills-row{gap:var(--spacing-12);flex-wrap:wrap;display:flex}.about-skill-tag{border:1px solid var(--color-divider);background-color:var(--color-tag-bg);border-radius:var(--radius-full);font-size:var(--font-size-label);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);color:var(--color-primary);font-family:var(--font-family-zh);align-items:center;gap:4px;padding:8px 15px 8px 13px;display:inline-flex}.about-skill-icon{object-fit:contain;width:20px;height:20px;display:block}.about-experience{margin-bottom:var(--spacing-80)}.about-experience-title{font-family:var(--font-family-zh);font-size:24px;font-weight:var(--font-weight-semibold);color:var(--color-primary);margin-bottom:var(--spacing-28)}.about-exp-item{margin-bottom:var(--spacing-36);padding-left:var(--spacing-28);position:relative}.about-exp-item:before{content:"";width:var(--spacing-10);height:var(--spacing-10);background-color:var(--color-text-secondary);border-radius:var(--radius-full);z-index:2;position:absolute;top:8px;left:0}.about-exp-item:after{content:"";top:26px;left:4px;bottom:calc(-1 * var(--spacing-36));z-index:1;background-color:#fff3;width:2px;position:absolute}.about-exp-item:nth-of-type(3):after{display:none}.about-exp-header{margin-bottom:var(--spacing-8);justify-content:space-between;align-items:baseline;display:flex}.about-exp-company{font-size:var(--font-size-body-lg);font-family:var(--font-family-zh);font-weight:var(--font-weight-medium);color:var(--color-primary)}.about-exp-period{font-size:var(--font-size-body-lg);font-family:var(--font-family-zh);font-weight:var(--font-weight-medium);color:var(--color-primary);margin-left:var(--spacing-16);flex-shrink:0}.about-exp-role{font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-primary);margin-bottom:var(--spacing-6)}.about-exp-description{font-size:var(--font-size-body-sm);font-weight:var(--font-weight-regular);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);font-family:var(--font-family-zh)}.about-exp-note{font-size:var(--font-size-body-sm);font-weight:var(--font-weight-regular);color:var(--color-text-secondary);margin-top:var(--spacing-36);padding-left:var(--spacing-28)}.about-exp-note-link{color:var(--color-link);font-weight:var(--font-weight-medium);text-decoration:none}.about-beyond{padding-top:0}.about-beyond-title{font-family:var(--font-family-zh);font-size:24px;font-weight:var(--font-weight-semibold);color:var(--color-primary);margin-bottom:var(--spacing-8)}.about-beyond-description{font-size:var(--font-size-body);font-weight:var(--font-weight-regular);color:var(--color-text-secondary);line-height:var(--line-height-massive);margin-bottom:12px}.about-beyond-description:last-of-type{margin-bottom:var(--spacing-40)}.about-wechat-wrapper{align-items:center;display:inline-flex;position:relative}.about-wechat-popover{z-index:1000;opacity:0;visibility:hidden;transition:opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);padding-top:16px;position:absolute;top:100%;right:0;transform:translateY(8px)}.about-wechat-wrapper:hover .about-wechat-popover{opacity:1;visibility:visible;transform:translateY(0)}.about-wechat-card{border-radius:var(--radius-12);box-sizing:border-box;width:max-content;padding:var(--spacing-20);background-color:#262626;flex-direction:column;display:flex}.about-wechat-qr{width:140px;height:140px;display:block}@media (width<=767px){.about-page{padding-top:var(--spacing-100)}.about-profile{align-items:center;gap:var(--spacing-24);flex-direction:column}.about-avatar{width:140px;height:140px}.about-contact-list{align-items:flex-start;margin:0 auto}.about-exp-header{gap:var(--spacing-4);flex-direction:column}.about-exp-period{margin-left:0}}.navbar{top:var(--spacing-20);z-index:1000;pointer-events:none;justify-content:center;display:flex;position:fixed;left:0;right:0}.navbar-pill{background-color:var(--color-nav-bg);-webkit-backdrop-filter:blur(var(--nav-blur));backdrop-filter:blur(var(--nav-blur));border-radius:var(--radius-full);pointer-events:auto;align-items:center;gap:0;padding:9px 12px;display:flex}.navbar-link{color:var(--color-text-secondary);font-size:var(--font-size-label);font-weight:var(--font-weight-regular);border-radius:var(--radius-full);transition:color var(--transition-fast), filter var(--transition-fast);white-space:nowrap;margin:0;padding:0 12px;text-decoration:none}.navbar-link:hover{color:var(--color-primary);filter:none}.navbar-link.active{color:var(--color-primary);font-weight:var(--font-weight-medium)}.navbar-logo{cursor:pointer;width:26px;height:26px;transition:opacity var(--transition-fast);flex-shrink:0;margin:0 12px}.navbar-logo:hover{opacity:.8}.navbar-resume{color:var(--color-text-secondary);font-size:var(--font-size-label);font-weight:var(--font-weight-regular);border-radius:var(--radius-full);transition:color var(--transition-fast), filter var(--transition-fast);white-space:nowrap;margin:0;padding:0 12px;text-decoration:none}.navbar-resume:hover{color:var(--color-primary);filter:none}.navbar-back-home{color:var(--color-text-secondary);font-size:var(--font-size-label);font-weight:var(--font-weight-regular);align-items:center;gap:var(--spacing-8);border-radius:var(--radius-full);transition:color var(--transition-fast);white-space:nowrap;cursor:pointer;padding:0 12px;text-decoration:none;display:inline-flex}.navbar-back-home:hover{color:var(--color-primary)}.navbar-back-home-icon{margin-top:-1px}@media (width<=767px){.navbar{top:var(--spacing-10)}.navbar-pill{gap:0;padding:8px}.navbar-link,.navbar-resume,.navbar-back-home{font-size:var(--font-size-caption);padding:0 8px}.navbar-logo{width:20px;height:20px;margin:0 8px}}.m-app{background-color:var(--color-bg);color:var(--color-primary);box-sizing:border-box;width:100%;min-height:100vh;font-family:var(--font-family-base);-webkit-font-smoothing:antialiased;flex-direction:column;display:flex;overflow-x:hidden}.m-content-container{padding:0 var(--page-padding-x-mobile);box-sizing:border-box;width:100%}.m-header{width:100%;height:var(--nav-height);-webkit-backdrop-filter:blur(var(--nav-blur));z-index:1000;opacity:0;visibility:hidden;transition:opacity var(--transition-base), visibility var(--transition-base);background-color:#000;position:fixed;top:0;left:0}.m-header.visible{opacity:1;visibility:visible}.m-header-container{height:100%;padding:0 var(--page-padding-x-mobile);justify-content:space-between;align-items:center;display:flex}.m-header-left{align-items:center;gap:var(--spacing-4);display:flex}.m-header-logo{height:var(--spacing-36);width:var(--spacing-36)}.m-header-title{font-size:var(--font-size-label);font-weight:var(--font-weight-medium);color:var(--color-primary);letter-spacing:0;font-family:var(--font-family-zh)}.m-header-btn{background-color:var(--color-primary);color:var(--color-bg);font-family:var(--font-family-zh);line-height:var(--line-height-normal);font-size:var(--font-size-label-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-full);transition:opacity var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;padding:7px 16px;text-decoration:none;display:inline-flex}.m-header-btn:active{opacity:.9;transform:scale(.95)}.m-back-btn{align-items:center;gap:var(--spacing-4);color:var(--color-primary);cursor:pointer;background:0 0;border:none;padding:0;display:flex}.m-back-arrow{width:24px;height:24px;display:block}.m-back-text{font-size:var(--font-size-body-sm);font-weight:var(--font-weight-semibold);color:var(--color-primary)}.m-hero{z-index:1;padding:120px 0 92px;position:relative}.m-hero:before{content:"";opacity:.4;z-index:-1;pointer-events:none;background-image:url(https://guoboyuan-portfolio.oss-cn-beijing.aliyuncs.com/Color%20Bg.png);background-position:50% 120px;background-repeat:no-repeat;background-size:350px 198px;position:absolute;inset:0}.m-hero-top{align-items:flex-start;gap:var(--spacing-4);margin-bottom:var(--spacing-10);flex-direction:column;display:flex}.m-hero-logo{height:var(--spacing-20);width:var(--spacing-20);opacity:.4}.m-hero-badge{font-size:var(--font-size-label);font-family:var(--font-family-en);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary);letter-spacing:0}.m-hero-title{font-size:28px;font-weight:var(--font-weight-regular);line-height:var(--line-height-tight);color:var(--color-primary);margin-bottom:var(--spacing-12);letter-spacing:0;font-family:var(--font-family-zh)}.m-hero-desc{font-size:var(--font-size-label);font-weight:var(--font-weight-regular);line-height:var(--line-height-relaxed);color:var(--color-text-secondary);margin-bottom:var(--spacing-20);font-family:var(--font-family-zh)}.m-hero-actions{align-items:center;gap:var(--spacing-12);display:flex}.m-btn-primary{background-color:var(--color-primary);color:var(--color-bg);padding:var(--spacing-8) var(--spacing-20);border-radius:var(--radius-full);font-size:var(--font-size-label);font-weight:var(--font-weight-medium);font-family:var(--font-family-zh);transition:transform var(--transition-fast), opacity var(--transition-fast);justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.m-btn-primary:active{opacity:.9;transform:scale(.96)}.m-btn-link{color:var(--color-primary);font-size:var(--font-size-label);font-weight:var(--font-weight-medium);padding:var(--spacing-12) var(--spacing-4);transition:opacity var(--transition-fast);font-family:var(--font-family-zh);align-items:center;text-decoration:none;display:inline-flex}.m-btn-link:active{opacity:.7}.m-section{padding:var(--spacing-28) 0;border-top:1px solid var(--color-divider)}.m-section-title{font-size:var(--font-size-body-lg);font-weight:var(--font-weight-medium);font-family:var(--font-family-zh);color:var(--color-primary);margin-bottom:var(--spacing-16)}.m-portfolio-section{padding-bottom:var(--spacing-28);border-top:none}.m-portfolio-card{border-radius:var(--radius-10);margin-bottom:var(--spacing-14);cursor:pointer;transition:transform var(--transition-fast);background-color:var(--color-tag-bg);overflow:hidden}.m-portfolio-card:active{transform:scale(.98)}.m-card-image-full{width:100%;height:auto;display:block}.m-portfolio-entry-info{cursor:pointer}.m-entry-title-row{color:var(--color-primary);justify-content:space-between;align-items:center;display:flex}.m-entry-title{font-size:var(--font-size-body-lg);font-weight:var(--font-weight-medium);font-family:var(--font-family-zh)}.m-entry-arrow{width:var(--spacing-20);height:var(--spacing-20);transition:transform var(--transition-fast)}.m-portfolio-entry-info:active .m-entry-arrow{transform:translate(4px)}.m-entry-desc{font-size:var(--font-size-label);color:var(--color-text-secondary);font-family:var(--font-family-zh);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);margin-top:var(--spacing-4)}.m-articles-list{flex-direction:column;gap:28px;display:flex}.m-article-card{color:inherit;text-decoration:none;display:block}.m-article-card:hover{filter:none}.m-article-header{margin-bottom:var(--spacing-4);justify-content:space-between;align-items:center;display:flex}.m-article-title{font-size:var(--font-size-body-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-zh);font-weight:var(--font-weight-regular);color:var(--color-primary)}.m-article-arrow{width:20px;height:20px;display:block}.m-article-meta{font-size:var(--font-size-label);color:var(--color-text-tertiary);margin-bottom:var(--spacing-4);font-family:var(--font-family-zh);font-weight:var(--font-weight-regular);display:block}.m-article-desc{font-size:var(--font-size-label);color:var(--color-text-secondary);line-height:var(--line-height-normal);font-family:var(--font-family-zh);font-weight:var(--font-weight-regular)}.m-more-link{align-items:center;gap:var(--spacing-2);font-size:var(--font-size-label);color:var(--color-text-tertiary);margin-top:var(--spacing-20);font-weight:var(--font-weight-regular);text-decoration:none;display:inline-flex}.m-zcool-icon{width:var(--spacing-20);height:var(--spacing-20);display:block}.m-more-link:active{opacity:.8}.m-about-profile{margin-bottom:var(--spacing-24)}.m-about-avatar{border-radius:var(--radius-full);object-fit:cover;width:90px;height:90px}.m-about-title{font-size:var(--font-size-h2);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);font-family:var(--font-family-zh);color:var(--color-primary);margin-bottom:var(--spacing-12)}.m-about-desc p{font-size:var(--font-size-body);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--spacing-24)}.m-about-desc p:last-child{margin-bottom:0}.m-about-tags{gap:var(--spacing-10);margin-top:var(--spacing-20);flex-wrap:wrap;display:flex}.m-tag{align-items:center;gap:var(--spacing-2);background-color:var(--color-tag-bg);border:1px solid var(--color-divider);color:var(--color-primary);border-radius:var(--radius-full);line-height:var(--line-height-snug);font-size:var(--font-size-label-sm);font-weight:var(--font-weight-regular);font-family:var(--font-family-zh);padding:5px 10px 5px 9px;display:inline-flex}.m-tag-icon{width:var(--spacing-18);height:var(--spacing-18);display:block}.m-exp-list{flex-direction:column;gap:0;display:flex}.m-exp-item{margin-bottom:var(--spacing-32);padding-left:var(--spacing-20);flex-direction:column;display:flex;position:relative}.m-exp-item:before{content:"";background-color:var(--color-text-secondary);border-radius:var(--radius-full);z-index:2;width:8px;height:8px;position:absolute;top:8px;left:1px}.m-exp-item:after{content:"";z-index:1;border-radius:var(--radius-full);background-color:#fff3;width:2px;position:absolute;top:24px;bottom:-32px;left:4px}.m-exp-item:last-child:after{display:none}.m-exp-header{gap:var(--spacing-2);margin-bottom:var(--spacing-4);font-family:var(--font-family-zh);flex-direction:column;display:flex}.m-exp-company{font-size:var(--font-size-body-sm);font-weight:var(--font-weight-regular);color:var(--color-primary)}.m-exp-period{font-size:var(--font-size-label);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary);font-family:var(--font-family-zh)}.m-exp-role{font-size:var(--font-size-label);font-weight:var(--font-weight-regular);color:var(--color-primary);margin-bottom:var(--spacing-4);font-family:var(--font-family-zh)}.m-exp-description{font-size:var(--font-size-label);font-weight:var(--font-weight-regular);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);font-family:var(--font-family-zh)}.m-exp-note{font-size:var(--font-size-label);color:var(--color-text-secondary);font-family:var(--font-family-zh);padding-left:var(--spacing-20);margin-top:0}.m-exp-note-link{color:var(--color-link);font-weight:var(--font-weight-medium);text-decoration:none}.m-contact-grid{justify-content:space-between;align-items:center;gap:var(--spacing-16);display:flex}.m-contact-list{gap:var(--spacing-12);flex-direction:column;flex:1;display:flex}.m-contact-item{align-items:center;gap:var(--spacing-12);flex-direction:row;display:flex}.m-contact-label{font-size:var(--font-size-label);color:var(--color-text-secondary);font-family:var(--font-family-zh);font-weight:var(--font-weight-regular);min-width:32px}.m-contact-val{font-size:var(--font-size-label);color:var(--color-primary);font-family:var(--font-family-zh);font-weight:var(--font-weight-regular);text-decoration:none}a.m-contact-val:active{color:var(--color-link)}.m-contact-qr-side{justify-content:center;align-items:center;display:flex}.m-contact-qr{border-radius:var(--radius-8);box-sizing:border-box;width:100px;height:100px;display:block}.m-footer{padding:var(--spacing-80) 0 var(--spacing-40) 0;text-align:center;flex-direction:column;align-items:center;margin-top:0;display:flex}.m-footer-logo{height:var(--spacing-36);width:var(--spacing-36);margin-bottom:var(--spacing-4)}.m-footer-brand,.m-footer-slogan{font-size:var(--font-size-caption);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary);margin-bottom:var(--spacing-2);font-family:var(--font-family-en)}.m-footer-year{font-size:var(--font-size-caption);font-weight:var(--font-weight-regular);color:var(--color-text-tertiary);font-family:var(--font-family-en)}.m-detail-page{background-color:var(--color-bg)}.m-detail-page .m-contact{border-top:none}.m-detail-images{gap:var(--spacing-12);flex-direction:column;width:100%;padding:100px 20px 52px;display:flex}.m-detail-image-item{width:100%;overflow:hidden}.m-lazy-img-wrapper{background-color:var(--color-tag-bg);aspect-ratio:1.5;width:100%;position:relative;overflow:hidden}.m-detail-image-item:first-child .m-lazy-img-wrapper:not(.loaded){aspect-ratio:1.6}.m-lazy-img{opacity:0;width:100%;height:auto;transition:opacity var(--transition-base);display:block}.m-lazy-img-wrapper.loaded{aspect-ratio:auto;background-color:#0000}.m-lazy-img-wrapper.loaded .m-lazy-img{opacity:1}.m-scroll-top-btn{border-radius:var(--radius-full);-webkit-backdrop-filter:blur(10px);border:1px solid var(--color-divider);width:48px;height:48px;color:var(--color-primary);cursor:pointer;z-index:999;opacity:0;visibility:hidden;transition:opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base), background-color var(--transition-fast);background-color:#262626cc;justify-content:center;align-items:center;display:flex;position:fixed;bottom:20px;right:32px;transform:translateY(10px)}.m-scroll-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0)}.m-scroll-top-btn:active{background-color:#ffffff1a;transform:scale(.92)}