body{overflow:auto !important;height:auto !important;background-color:#1A1A1A !important;color:white !important;position:relative}html{overflow:auto !important;height:auto !important;background-color:#1A1A1A !important}.global-code-rain{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}.global-code-rain canvas{width:100%;height:100%;opacity:0.6}*{max-width:100%;box-sizing:border-box;-webkit-tap-highlight-color:transparent}button,a{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}html,body{overflow-x:hidden !important;width:100%;max-width:100vw;position:relative}.hero-section,.projects-section,.skills-section,.articles-section,.about-section,.contact-section{max-width:100vw;overflow-x:hidden}.top-navbar{position:fixed;z-index:1000}.hero-section,.projects-section,.skills-section,.articles-section,.about-section,.contact-section,.site-footer{position:relative}.hero-content,.container,.project-card,.skill-item,.article-card,.contact-card,.modal{position:relative;z-index:2}.top-navbar{top:0;left:0;right:0;background:rgba(26,26,26,0.9);backdrop-filter:blur(10px);transition:all 0.3s ease}.top-navbar.scrolled{background:rgba(26,26,26,0.95);box-shadow:0 2px 20px rgba(0,0,0,0.1)}.top-navbar .nav-container{max-width:1200px;margin:0 auto;padding:0 20px;height:70px;display:flex;align-items:center;justify-content:space-between}.top-navbar .nav-logo a{font-size:1.8rem;font-weight:bold;text-decoration:none;position:relative;display:inline-block;background:linear-gradient(45deg, #2196F3, #00BCD4, #f0f, #2196F3);background-size:300% 300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradient-shift 3s ease infinite;text-transform:uppercase;letter-spacing:2px}.top-navbar .nav-logo a:before{content:'GONGXH';position:absolute;top:0;left:0;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.2);z-index:-1;animation:glitch 2s ease-in-out infinite}.top-navbar .nav-logo a:after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:2px;background:linear-gradient(90deg, transparent, #00BCD4, transparent);transform:scaleX(0);transition:transform 0.3s ease}.top-navbar .nav-logo a:hover:after{transform:scaleX(1)}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes glitch{0%, 100%{transform:translate(0)}20%{transform:translate(-1px, 1px)}40%{transform:translate(1px, -1px)}60%{transform:translate(-1px, -1px)}80%{transform:translate(1px, 1px)}}.top-navbar .nav-menu{display:flex;gap:30px;align-items:center}@media (max-width: 768px){.top-navbar .nav-menu{gap:15px;margin-right:10px}}.top-navbar .nav-item{color:#ccc;text-decoration:none;font-size:1rem;transition:all 0.3s ease;position:relative}.top-navbar .nav-item:after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:#2196F3;transition:width 0.3s ease}.top-navbar .nav-item:hover,.top-navbar .nav-item.active{color:white}.top-navbar .nav-item:hover:after,.top-navbar .nav-item.active:after{width:100%}@media (max-width: 768px){.top-navbar .nav-item{display:none}}.top-navbar .nav-item.nav-blog{background:transparent;padding:10px 25px;border-radius:25px;margin-left:0;border:2px solid rgba(255,255,255,0.3);position:relative;overflow:hidden;transition:all 0.4s ease}.top-navbar .nav-item.nav-blog:before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);transition:left 0.5s ease}.top-navbar .nav-item.nav-blog:hover{color:white;border-color:#00BCD4;box-shadow:0 0 20px rgba(0,188,212,0.5);transform:translateY(-2px)}.top-navbar .nav-item.nav-blog:hover:before{left:100%}.top-navbar .nav-item.nav-blog:after{display:none}.top-navbar .nav-item.nav-blog:active{transform:translateY(-2px) scale(0.98);box-shadow:0 0 20px rgba(0,188,212,0.6),0 0 40px rgba(0,188,212,0.4);border-color:#00BCD4;background-color:rgba(0,188,212,0.15)}@media (max-width: 768px){.top-navbar .nav-item.nav-blog{display:flex !important;margin-left:0;margin-top:0;padding:8px 20px;font-size:0.9rem}}.top-navbar .nav-toggle{display:none}.container{max-width:1200px;margin:0 auto;padding:0 20px;width:100%;overflow-x:hidden}.hero-section{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;background-color:#1A1A1A;color:white;overflow:hidden;padding-top:70px}@media (max-width: 768px){.hero-section{padding-bottom:80px}}.hero-section .hero-background{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center, rgba(26,26,26,0.3) 0%, rgba(26,26,26,0.8) 100%)}.hero-section .hero-content{position:relative;z-index:1;text-align:center}.hero-section .hero-title{font-size:3rem;margin:20px 0}.hero-section .hero-title .greeting{font-size:2.5rem}.hero-section .hero-title .name{color:#2196F3;font-weight:bold}.hero-section .hero-subtitle{font-size:1.5rem;color:#00BCD4;margin:15px 0}.hero-section .hero-description{font-size:1.1rem;color:#ccc;margin:20px 0}.hero-section .hero-intro{max-width:800px;margin:30px auto;font-size:1.1rem;line-height:1.8;color:#ddd}.hero-section .hero-cta{margin:40px 0}.hero-section .hero-cta .btn{display:inline-block;padding:15px 30px;margin:0 10px;border-radius:30px;text-decoration:none;font-size:1.1rem;transition:all 0.4s ease;position:relative;overflow:hidden}@media (max-width: 768px){.hero-section .hero-cta .btn{padding:12px 20px;margin:5px;font-size:1rem}}.hero-section .hero-cta .btn.btn-primary{background:transparent;color:white;border:2px solid #00BCD4}.hero-section .hero-cta .btn.btn-primary:before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:#00BCD4;transition:left 0.4s ease;z-index:-1}.hero-section .hero-cta .btn.btn-primary:hover{color:white;transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,188,212,0.5)}.hero-section .hero-cta .btn.btn-primary:hover:before{left:0}.hero-section .hero-cta .btn.btn-primary:active{transform:translateY(-2px) scale(0.98);box-shadow:0 0 20px rgba(0,188,212,0.6),0 0 40px rgba(0,188,212,0.4);border-color:#00BCD4;background-color:rgba(0,188,212,0.15)}.hero-section .hero-cta .btn.btn-secondary{background:transparent;color:white;border:2px solid rgba(255,255,255,0.3)}.hero-section .hero-cta .btn.btn-secondary:hover{border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.1);transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,255,255,0.2)}.hero-section .hero-cta .btn.btn-secondary:active{transform:translateY(-2px) scale(0.98);box-shadow:0 0 20px rgba(255,255,255,0.6),0 0 40px rgba(255,255,255,0.4);border-color:#fff;background-color:rgba(255,255,255,0.15)}.hero-section .scroll-indicator{position:absolute;bottom:30px;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;animation:bounce 2s infinite;z-index:10}@media (max-width: 768px){.hero-section .scroll-indicator{bottom:20px;position:fixed;left:0;right:0;width:100%}}.hero-section .scroll-indicator span{display:block;font-size:0.9rem;color:#666;margin-bottom:10px;white-space:nowrap;text-align:center;width:100%}@media (max-width: 768px){.hero-section .scroll-indicator span{font-size:0.8rem}}.hero-section .scroll-indicator svg{fill:#666;width:24px;height:24px;display:block;margin:0 auto}.projects-section{padding:80px 0}.projects-section .section-header{text-align:center;margin-bottom:60px}.projects-section .section-header .section-title{font-size:2.5rem;margin-bottom:10px;color:white}.projects-section .section-header .section-subtitle{font-size:1.2rem;color:#ccc}.projects-section .projects-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(500px, 1fr));gap:40px}@media (max-width: 768px){.projects-section .projects-grid{grid-template-columns:1fr;gap:20px}}.projects-section .project-card{background:#2e2e2e;border-radius:10px;box-shadow:0 5px 20px rgba(0,0,0,0.3);overflow:hidden;transition:all 0.3s ease;border:1px solid rgba(255,255,255,0.1)}.projects-section .project-card:hover{transform:translateY(-8px);box-shadow:0 15px 40px rgba(0,0,0,0.5);border-color:rgba(255,255,255,0.2)}.projects-section .project-card .project-media{position:relative;height:300px;overflow:hidden}.projects-section .project-card .project-media video,.projects-section .project-card .project-media img{width:100%;height:100%;object-fit:cover}.projects-section .project-card .project-media .media-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease}.projects-section .project-card .project-media .media-overlay .play-button{font-size:1.2rem;color:white;padding:10px 20px;border:2px solid white;border-radius:30px;cursor:pointer}.projects-section .project-card .project-media:hover .media-overlay{opacity:1}.projects-section .project-card .project-info{padding:30px}.projects-section .project-card .project-info .project-header{margin-bottom:20px}.projects-section .project-card .project-info .project-header .project-title{font-size:1.5rem;margin-bottom:10px;color:white}.projects-section .project-card .project-info .project-description{font-size:1.1rem;color:#ccc;margin-bottom:20px;line-height:1.6}.projects-section .project-card .project-info .project-links{display:flex;gap:15px;flex-wrap:wrap}@media (max-width: 768px){.projects-section .project-card .project-info .project-links{gap:10px}}.projects-section .project-card .project-info .project-links .project-link{display:inline-block;padding:8px 20px;background-color:#2196F3;color:white;text-decoration:none;border-radius:20px;font-size:0.9rem;transition:all 0.3s ease;border:1px solid transparent}@media (max-width: 768px){.projects-section .project-card .project-info .project-links .project-link{padding:6px 15px;font-size:0.85rem}}.projects-section .project-card .project-info .project-links .project-link:hover{background-color:#0c7cd5;transform:translateY(-2px)}.projects-section .project-card .project-info .project-links .project-link:active{transform:translateY(-2px) scale(0.98);box-shadow:0 0 20px rgba(33,150,243,0.6),0 0 40px rgba(33,150,243,0.4);border-color:#2196F3;background-color:rgba(33,150,243,0.15)}.skills-section{padding:80px 0}.skills-section .skills-container{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:40px;margin-bottom:60px}@media (max-width: 768px){.skills-section .skills-container{grid-template-columns:1fr;gap:30px}}.skills-section .skill-category .category-title{font-size:1.3rem;margin-bottom:20px;color:white}.skills-section .skill-category .skill-items{display:flex;flex-direction:column;gap:20px}.skills-section .skill-category .skill-item .skill-header{display:flex;justify-content:space-between;margin-bottom:8px}.skills-section .skill-category .skill-item .skill-header .skill-name{font-weight:500;color:white}.skills-section .skill-category .skill-item .skill-header .skill-level{color:#2196F3;font-weight:bold}.skills-section .skill-category .skill-item .skill-bar{height:8px;background-color:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden;margin-bottom:5px}.skills-section .skill-category .skill-item .skill-bar .skill-progress{height:100%;background:linear-gradient(90deg, #2196F3, #00BCD4);border-radius:4px;transition:width 1.5s ease}.about-section{padding:80px 0}.about-section .about-content{display:grid;grid-template-columns:2fr 1fr;gap:60px}@media (max-width: 968px){.about-section .about-content{grid-template-columns:1fr}}.about-section .personal-story{margin-bottom:40px}.about-section .personal-story h3{font-size:1.5rem;margin-bottom:20px;color:white}.about-section .personal-story blockquote{font-size:1.1rem;line-height:1.8;color:#ddd;border-left:4px solid #2196F3;padding-left:20px;margin:0}.about-section .work-philosophy{margin-bottom:40px}.about-section .work-philosophy h3{font-size:1.5rem;margin-bottom:20px;color:white}.about-section .work-philosophy .philosophy-items{display:flex;flex-direction:column;gap:20px}.about-section .work-philosophy .philosophy-items .philosophy-item{display:flex;gap:16px;align-items:center}.about-section .work-philosophy .philosophy-items .philosophy-item .philosophy-icon{display:flex;align-items:center;justify-content:center;width:2.2rem;flex:0 0 2.2rem}.about-section .work-philosophy .philosophy-items .philosophy-item .icon{font-size:2rem;color:#2196F3;line-height:1}.about-section .work-philosophy .philosophy-items .philosophy-item .philosophy-text{display:flex;flex-direction:column;gap:6px;text-align:left}.about-section .work-philosophy .philosophy-items .philosophy-item h4{font-size:1.1rem;margin:0;color:white}.about-section .work-philosophy .philosophy-items .philosophy-item p{color:#ddd;margin:0;font-size:1rem}.about-section .hobbies h3{font-size:1.5rem;margin-bottom:20px;color:white}.about-section .hobbies ul{list-style:none;padding:0}.about-section .hobbies ul li{padding:10px 0;color:#ddd;line-height:1.6}.about-section .hobbies ul li strong{color:white}.about-section .personal-tags-section{margin-top:60px;text-align:center}.about-section .personal-tags-section h3{font-size:1.5rem;margin-bottom:30px;color:white}.about-section .personal-tags-section .tag-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:15px}.about-section .personal-tags-section .tag-cloud .personal-tag{display:inline-block;padding:10px 20px;background-color:rgba(33,150,243,0.1);color:#2196F3;border-radius:25px;font-size:1rem;border:1px solid rgba(33,150,243,0.3);transition:all 0.3s ease}.about-section .personal-tags-section .tag-cloud .personal-tag:hover{background-color:rgba(33,150,243,0.2);transform:translateY(-2px);box-shadow:0 5px 15px rgba(33,150,243,0.3)}.contact-section{padding:80px 0}.contact-section .cooperation-invitation{text-align:center;margin-bottom:60px}.contact-section .cooperation-invitation h3{font-size:1.8rem;margin-bottom:20px;color:white}.contact-section .cooperation-invitation .invitation-text{font-size:1.1rem;line-height:1.8;color:#ddd;max-width:800px;margin:0 auto 40px}.contact-section .cooperation-invitation .cooperation-areas h4{font-size:1.3rem;margin-bottom:30px;color:white}.contact-section .cooperation-invitation .cooperation-areas .area-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:30px}.contact-section .cooperation-invitation .cooperation-areas .area-grid .area-item{text-align:center;padding:30px;background-color:rgba(255,255,255,0.05);border-radius:10px;transition:all 0.3s ease;border:1px solid rgba(255,255,255,0.1)}.contact-section .cooperation-invitation .cooperation-areas .area-grid .area-item:hover{background-color:rgba(33,150,243,0.1);transform:translateY(-5px);border-color:rgba(33,150,243,0.3)}.contact-section .cooperation-invitation .cooperation-areas .area-grid .area-item .icon{font-size:2.5rem;margin-bottom:15px}.contact-section .cooperation-invitation .cooperation-areas .area-grid .area-item h5{font-size:1.2rem;margin-bottom:10px;color:white}.contact-section .cooperation-invitation .cooperation-areas .area-grid .area-item p{color:#ccc;margin:0}.contact-section .contact-methods{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:30px;margin-bottom:60px}@media (max-width: 768px){.contact-section .contact-methods{grid-template-columns:1fr;gap:20px}}.contact-section .contact-methods .contact-card{background-color:#2e2e2e;padding:30px;border-radius:10px;text-align:center;border:1px solid rgba(255,255,255,0.1)}.contact-section .contact-methods .contact-card.primary{background-color:rgba(33,150,243,0.1);border:2px solid rgba(33,150,243,0.3)}.contact-section .contact-methods .contact-card .contact-icon{font-size:3rem;margin-bottom:20px}.contact-section .contact-methods .contact-card h4{font-size:1.3rem;margin-bottom:15px;color:white}.contact-section .contact-methods .contact-card .contact-info{font-size:1.1rem;color:white;margin-bottom:20px;font-weight:500}.contact-section .contact-methods .contact-card .contact-actions{display:flex;justify-content:center;gap:15px;margin-bottom:15px}.contact-section .contact-methods .contact-card .contact-actions button,.contact-section .contact-methods .contact-card .contact-actions a{padding:8px 20px;border:none;border-radius:20px;font-size:0.95rem;cursor:pointer;text-decoration:none;transition:all 0.3s ease}.contact-section .contact-methods .contact-card .contact-actions button.btn-copy,.contact-section .contact-methods .contact-card .contact-actions button.btn-qr,.contact-section .contact-methods .contact-card .contact-actions a.btn-copy,.contact-section .contact-methods .contact-card .contact-actions a.btn-qr{background-color:white;color:#2196F3;border:1px solid #2196F3}.contact-section .contact-methods .contact-card .contact-actions button.btn-copy:hover,.contact-section .contact-methods .contact-card .contact-actions button.btn-qr:hover,.contact-section .contact-methods .contact-card .contact-actions a.btn-copy:hover,.contact-section .contact-methods .contact-card .contact-actions a.btn-qr:hover{background-color:#2196F3;color:white}.contact-section .contact-methods .contact-card .contact-actions button.btn-copy:active,.contact-section .contact-methods .contact-card .contact-actions button.btn-qr:active,.contact-section .contact-methods .contact-card .contact-actions a.btn-copy:active,.contact-section .contact-methods .contact-card .contact-actions a.btn-qr:active{transform:translateY(-2px) scale(0.98);box-shadow:0 0 20px rgba(33,150,243,0.6),0 0 40px rgba(33,150,243,0.4);border-color:#2196F3;background-color:rgba(33,150,243,0.15)}.contact-section .contact-methods .contact-card .contact-actions button.btn-send,.contact-section .contact-methods .contact-card .contact-actions a.btn-send{background-color:white;color:#2196F3;border:1px solid #2196F3}.contact-section .contact-methods .contact-card .contact-actions button.btn-send:hover,.contact-section .contact-methods .contact-card .contact-actions a.btn-send:hover{background-color:#2196F3;color:white}.contact-section .contact-methods .contact-card .contact-actions button.btn-send:active,.contact-section .contact-methods .contact-card .contact-actions a.btn-send:active{transform:translateY(-2px) scale(0.98);box-shadow:0 0 20px rgba(33,150,243,0.6),0 0 40px rgba(33,150,243,0.4);border-color:#2196F3;background-color:rgba(33,150,243,0.15)}.contact-section .contact-methods .contact-card .response-time{font-size:0.9rem;color:#ccc}.contact-section .contact-methods .contact-card .social-list{display:flex;flex-direction:column;gap:15px}.contact-section .contact-methods .contact-card .social-list .social-item{display:flex;flex-direction:column;text-decoration:none;padding:15px;background-color:rgba(255,255,255,0.05);border-radius:8px;transition:all 0.3s ease;border:1px solid rgba(255,255,255,0.1)}.contact-section .contact-methods .contact-card .social-list .social-item:hover{transform:translateX(5px);box-shadow:0 5px 15px rgba(0,0,0,0.3);background-color:rgba(255,255,255,0.08)}.contact-section .contact-methods .contact-card .social-list .social-item .platform{font-weight:500;color:white;margin-bottom:5px}.contact-section .contact-methods .contact-card .social-list .social-item .usage{font-size:0.9rem;color:#ccc}.site-stats{background:linear-gradient(180deg, transparent, rgba(18,18,18,0.8));padding:30px 0;position:relative}.site-stats::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;max-width:400px;height:1px;background:linear-gradient(90deg, transparent, rgba(33,150,243,0.3), transparent)}.site-stats .stats-content{display:flex;justify-content:center;align-items:center;gap:40px}@media (max-width: 480px){.site-stats .stats-content{gap:20px}}.site-stats .stat-item{display:flex;align-items:center;gap:8px;color:#888;font-size:0.95rem}.site-stats .stat-item .stat-icon{font-size:1.1rem}.site-stats .stat-item .stat-label{color:#666}.site-stats .stat-item .stat-value{color:#00BCD4;font-weight:600;font-family:'Courier New', monospace;min-width:40px}.site-stats .stat-divider{width:1px;height:20px;background:rgba(255,255,255,0.15)}.site-footer{background-color:#0d0d0d;color:#999;padding:40px 0;text-align:center;border-top:1px solid rgba(255,255,255,0.1)}.site-footer .footer-content p{margin:10px 0;font-size:0.95rem}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5)}.modal .modal-content{background-color:white;margin:10% auto;padding:40px;border-radius:10px;width:90%;max-width:400px;text-align:center;position:relative}.modal .modal-content .close{position:absolute;right:20px;top:20px;font-size:30px;cursor:pointer;color:#999}.modal .modal-content .close:hover{color:#333}.modal .modal-content h3{margin-bottom:20px}.modal .modal-content .qr-code img{width:auto;height:auto;max-width:260px;max-height:360px;object-fit:contain;display:inline-block}@keyframes pulse{0%{transform:scale(1);opacity:0.8}50%{transform:scale(1.05);opacity:0.4}100%{transform:scale(1);opacity:0.8}}@keyframes bounce{0%, 20%, 50%, 80%, 100%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@media (max-width: 768px){section{overflow-x:hidden}.hero-section .hero-title{font-size:2rem}.hero-section .hero-title .greeting{font-size:1.8rem}.hero-section .hero-subtitle{font-size:1.2rem;padding:0 10px}.hero-section .hero-description{padding:0 10px}.hero-section .hero-intro{padding:0 20px}.hero-section .hero-intro p br{display:none}.projects-grid{grid-template-columns:1fr;padding:0 10px}.skills-container{grid-template-columns:1fr}.contact-methods{grid-template-columns:1fr}.about-content .philosophy-items .philosophy-item{flex-direction:row;text-align:left;align-items:flex-start}.about-content .philosophy-items .philosophy-item .icon{font-size:1.8rem;width:2rem;flex-basis:2rem}.project-card .project-info{padding:20px}.project-card .project-info .project-title{font-size:1.2rem}.project-card .project-info .project-description{font-size:1rem}}