@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--vh: 1vh;--vw: 1vw}@supports (height: 100dvh){:root{--vh: 1dvh}}@supports (width: 100dvw){:root{--vw: 1dvw}}body{font-family:var(--font-family-en);line-height:1.6;color:var(--text-color);background-color:var(--background-color);min-height:100vh;margin:0;padding:0;font-size:var(--fs-base);width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html[lang=zh] body{font-family:var(--font-family-zh)}h1{font-size:var(--fs-4xl);line-height:1.2;margin-bottom:var(--space-lg)}h2{font-size:var(--fs-3xl);line-height:1.3;margin-bottom:var(--space-md)}h3{font-size:var(--fs-2xl);line-height:1.4;margin-bottom:var(--space-sm)}h4{font-size:var(--fs-xl);line-height:1.5;margin-bottom:var(--space-sm)}h1,h2,h3,h4,h5,h6{font-family:"Orbitron",var(--font-family-zh);letter-spacing:.02em;color:var(--text-color);text-shadow:0 0 10px rgba(0,0,0,.5)}html{overflow-y:scroll;scrollbar-gutter:stable;width:100%;height:100%}.App{min-height:calc(100 * var(--vh));width:100%;position:relative;overflow-x:hidden;background:transparent!important}.navigation-container{position:fixed;top:0;left:0;width:100%;z-index:1000;background:transparent;height:80px;display:flex;align-items:center}.nav-content{max-width:var(--container-max-width-xl);margin:0 auto;padding:0 .5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;background:rgba(0,0,0,0);height:80px}.hamburger-menu{margin-right:0;padding:0 .8rem}.toggle-container{gap:.8rem;padding-left:0;position:fixed!important;top:2rem!important;right:4rem!important;z-index:1003;background-color:transparent;display:flex;gap:.5rem;align-items:center;height:2.5rem}.main-container{position:relative;z-index:1;padding-top:80px;min-height:100vh;width:100%;color:#fff;text-shadow:0 0 10px rgba(0,0,0,.5)}.section-wrapper{width:var(--container-width);margin-inline:auto}.content-wrapper{position:relative;min-height:100vh;background:transparent!important;padding-top:var(--space-xl);container-type:inline-size;container-name:main}section{width:100%;max-width:var(--container-max-width-xl);margin:0 auto;padding:2rem}section>div{width:100%;max-width:inherit;margin:0 auto}#about,#education,#experience,#skills,#contact{width:100%;max-width:inherit}section{margin-bottom:var(--space-2xl)}:focus{outline:2px solid var(--accent-color);outline-offset:2px}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.header-intro{font-size:2.5rem;font-weight:600;margin-bottom:2.5rem;color:var(--accent-color);letter-spacing:-.02em;text-align:left;color:#fff;text-shadow:0 0 10px rgba(0,0,0,.5);font-family:"Orbitron",var(--font-family-zh);letter-spacing:.02em}header{display:flex;align-items:center;justify-content:flex-start;height:100vh;padding:0;position:relative;overflow:hidden;background-color:transparent;min-height:calc(100vh - var(--header-height));display:grid;grid-template-columns:minmax(min(100%,30rem),1fr) minmax(0,1fr)}header>div{z-index:1;padding:2rem;width:50%;height:100%;display:flex;flex-direction:column;justify-content:center}header h1{font-size:3.5rem;margin-bottom:1rem;font-weight:600;letter-spacing:-.02em;color:var(--text-color);font-family:"Orbitron",var(--font-family-zh);letter-spacing:.02em}header .subtitle{font-size:2rem;font-weight:400;color:var(--accent-color);margin:0}.header-container h2.subtitle{margin:0;text-align:left;position:static;left:auto;transform:none}.header-container h2.subtitle:after{display:none}canvas{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;z-index:0}section{padding:0;background:transparent!important}#about,#education,#experience,#skills{padding-top:clamp(3rem,8vh,6rem);padding-bottom:clamp(3rem,8vh,6rem)}section:not(:last-child){position:relative}section:not(:last-child):after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:0;max-width:1200px;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.1),transparent)}section>div{max-width:1400px;width:100%;margin:0 auto;background:transparent!important}section:not(.header-container) h2{margin-bottom:3rem;text-align:center;display:flex;justify-content:center;position:relative}section:not(.header-container) h2:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:200px;height:2px;background:linear-gradient(to right,transparent,var(--accent-color),transparent)}.job,.education-item{transition:background-color .3s ease}.job h3,.education-item h3{color:#7eb2ff;font-size:1.3em;letter-spacing:.02em;font-weight:600;margin-bottom:.25rem;font-family:"Orbitron",var(--font-family-zh)}.education-header,.job-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}.name-location{display:flex;align-items:center;gap:1rem}.name-location h3{margin:0}.education-location,.job-location{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text-color);opacity:.9}.education-location svg,.job-location svg{font-size:.9em;color:red}.job-date,.education-date{font-size:.9rem;color:var(--accent-color);background:none!important;border:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;margin:0!important;display:inline!important}.job-date:hover,.education-date:hover{background:none!important;border:none!important;transform:none!important;box-shadow:none!important;color:var(--accent-color)!important}.calendar-icon{margin-right:.5rem;color:var(--accent-color)}.job{margin-bottom:2rem;padding-left:1rem;border-left:2px solid var(--accent-color);border:1px solid rgba(255,255,255,.3);border-radius:16px;padding:1.5rem 2rem;transition:all .3s ease;box-shadow:0 4px 20px #0000001a}.job:last-child{margin-bottom:0}.job ul{padding-left:1.5rem}.job-position{margin-bottom:1rem;padding-left:1rem;border-left:2px solid var(--accent-color)}.job-position:last-child{margin-bottom:0}.job-position:hover{padding-left:1.5rem;background-color:color-mix(in srgb,var(--background-color) 85%,var(--accent-color) 15%);transition:padding-left .2s ease,background-color .2s ease}.job-title{color:var(--position-color);font-weight:600;margin-bottom:.25rem;font-size:1.05rem}.job-position ul{list-style-type:disc;padding-left:1.2rem;margin-top:.5rem;color:var(--text-color);font-size:.9rem}.job-position ul li{margin-bottom:.25rem}.education-item{margin-bottom:0;padding-bottom:1rem}.education-item:last-child{margin-bottom:0;padding-bottom:0}.education-position{margin-bottom:2rem;padding-left:1rem;border-left:2px solid var(--accent-color);border:1px solid rgba(255,255,255,.3);border-radius:16px;padding:1.5rem 2rem;transition:all .3s ease;box-shadow:0 4px 20px #0000001a}.education-position:last-child{margin-bottom:0}.education-position:hover,.job:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 8px 30px #0003}.education-title{color:var(--position-color);font-weight:600;margin-bottom:.25rem;font-size:1.1rem;letter-spacing:-.01em}.education-details{list-style:none;padding-left:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.75rem}.education-details li:hover{background:linear-gradient(135deg,var(--accent-color),#34d399);color:#000;border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 12px #7eb2ff4d}.job-details{list-style:disc;padding-left:1.5rem;margin:1rem 0 0}.job-details li{display:list-item;padding:0;margin-bottom:.75rem;background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.job-details li:hover{background:transparent!important;transform:none!important;box-shadow:none!important;color:var(--text-color)!important;border:none!important}.role{margin-top:1rem;padding-left:1rem;border-left:2px solid var(--text-color);opacity:.9}.role:first-of-type{margin-top:.5rem}.role .job-title{font-size:1.1em;font-weight:600;color:var(--position-color);margin-bottom:.2rem}.role .job-date{font-size:.9em;margin-bottom:.5rem}nav{position:sticky;top:0;z-index:1000;background-color:var(--background-color);padding:1rem 0}.nav-menu{display:flex;gap:2rem;margin:2rem 0}.nav-menu a{color:var(--text-color);text-decoration:none;font-size:1.125rem;transition:color .3s ease}.nav-menu a:hover{color:#34d399!important}a{color:#7eb2ff;text-decoration:none;transition:color .3s ease}a:hover{color:#5a8cd9}.date,.duration{font-size:.9em;color:orange!important}.experience-item .date,.education-item .date,.experience-item .duration,.education-item .duration{color:orange!important}h1,h2,h3,h4,h5,h6{color:#fff;text-shadow:0 0 10px rgba(0,0,0,.5);font-family:"Orbitron",var(--font-family-zh);letter-spacing:.02em}p,span,li{color:#f0f0f0;text-shadow:0 0 5px rgba(0,0,0,.3)}[data-lang=en]{font-family:var(--font-family-en)}[data-lang=zh]{font-family:var(--font-family-zh)}.home-button,.contact-info a{transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s ease}.education-position,.experience-position,.position{background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:16px;transition:all .3s ease;box-shadow:0 4px 20px #0000001a}.education-position:hover,.experience-position:hover,.position:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 8px 30px #0003;background:rgba(255,255,255,.08)}.education-position p,.experience-position p,.position p,.job-description p,.job-description li{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.education-position *:not(.calendar-icon):not(button),.experience-position *:not(.calendar-icon):not(button),.position *:not(.calendar-icon):not(button){background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.job-description,.education-details,.nav-menu a{font-size:1.25rem;line-height:1.7}[data-lang=zh] .job-description,[data-lang=zh] .education-details,[data-lang=zh] .nav-menu a{font-size:1.3125rem;line-height:1.8}[data-lang=zh] .job-description li,[data-lang=zh] .education-details li,[data-lang=zh] .job-details li{font-size:1.3125rem;line-height:1.8;margin-bottom:.75rem}[data-lang=zh] .job-description{font-size:1.125rem;line-height:1.8}.job-description li,.education-details li,.job-details li{font-size:1.0625rem;line-height:1.7}.transition-container{position:absolute;z-index:var(--z-transition);width:200vw;bottom:-100%;transform:rotate(20deg);left:-40%;pointer-events:none}@keyframes hideTopTransition{0%{bottom:-120%;left:-40%}to{bottom:100%;left:40%}}@keyframes showTransition{0%{bottom:-450%;left:-60%}to{bottom:-120%;left:-40%}}.hide-top-transition{animation:hideTopTransition var(--transition-slow) ease-in forwards}.show-transition{animation:showTransition var(--transition-slow) ease-in forwards}@media (max-aspect-ratio: 12/10){.transition-container{transform:translateY(-20%) scale(1.2) rotate(10deg)}.content-container{flex-direction:column;padding-top:var(--header-height)}}html[lang] .home-button,html[lang] .language-toggle,html[lang] .hamburger-container{position:fixed;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;padding:0!important;border-radius:25px!important;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff;background:black;color:#fff;transition:all .3s ease;box-sizing:border-box;cursor:pointer;margin:0;top:32px!important}html[lang] .home-button:hover,html[lang] .language-toggle:hover,html[lang] .hamburger-container:hover{background-color:#7eb2ff;border-color:#7eb2ff;color:#000}html[lang] .toggle-container{position:fixed;top:32px;right:32px;z-index:1003;height:48px;display:flex;gap:.5rem;align-items:center;background-color:transparent}html[lang] .home-button{left:2.5rem}html[lang] .language-toggle{right:6rem}html[lang] .hamburger-container{right:2.5rem}.fade-up-section{opacity:0;transform:translateY(20px);transition:opacity .4s ease-in-out,transform .4s ease-in-out;transition-delay:var(--delay, 0s)}.fade-up-section.visible{opacity:1;transform:translateY(0)}section h2{--delay: .1s}.education-item,.experience-item,.contact-form{--delay: .2s}.education-position,.job{--delay: .3s}@media (min-width: 768px){h1{font-size:4rem}h2{font-size:3rem}h3{font-size:2.25rem}h4{font-size:1.875rem}}@media (min-width: 768px){.section-wrapper{padding:0 2rem}.job,.education-position{padding:2rem 2.5rem}.job-header,.education-header{display:grid;grid-template-columns:2fr 1fr;gap:2rem}}@media (min-width: 1024px){.section-wrapper{padding:0 4rem}.experience-grid,.education-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}canvas{width:50vw;right:0;left:auto}header>div{padding:4rem;max-width:50%}}@media (min-width: 1280px){.section-wrapper{padding:0}.job,.education-position{padding:2.5rem 3rem}}@media (min-width: 768px){.navigation-container{height:100px}.nav-content{height:100px;padding:0 2rem}.toggle-container{top:2.5rem!important;right:6rem!important}}@media (hover: hover){.job:hover,.education-position:hover{transform:translateY(-4px);box-shadow:0 12px 40px #0000004d}}.experience-grid,.education-grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr))}@media (aspect-ratio < 1/1){header{grid-template-columns:1fr}canvas{height:50vh}html[lang] .home-button{left:1rem}html[lang] .language-toggle{right:4.5rem}html[lang] .hamburger-container{right:1rem}}@media (min-width: 768px){section{margin-bottom:clamp(5rem,12vh,10rem)}}@media (min-width: 1024px){section{margin-bottom:clamp(6rem,15vh,12rem)}#about,#education,#experience,#skills{padding-top:clamp(4rem,10vh,8rem);padding-bottom:clamp(4rem,10vh,8rem)}}@media (min-width: 1280px){section{margin-bottom:clamp(7rem,18vh,14rem)}}.contact{display:flex;flex-direction:column;background:transparent!important}.contact-container{width:100%;max-width:var(--container-max-width-xl);margin:0 auto;padding:0}.contact h2{margin-bottom:2rem;text-align:center;position:relative;width:100%}.contact h2:after{content:"";position:absolute;bottom:-10px;left:0;width:100%;height:2px;background:linear-gradient(to right,transparent,var(--accent-color),transparent)}.contact-wrapper{padding:0;background:transparent!important;width:100%;max-width:var(--container-max-width-xl)}.contact-content{background:transparent!important;width:100%;max-width:var(--container-max-width-xl);display:flex;justify-content:center}.contact-form{width:100%;max-width:800px;margin:0;display:flex;flex-direction:column;gap:1.5rem;border:1px solid rgba(126,178,255,.3);border-radius:16px;padding:2.5rem;margin-top:1.5rem;background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .3s ease;box-shadow:0 4px 20px #00000026}.contact-form:hover{transform:translateY(-2px);border-color:#7eb2ff80;box-shadow:0 8px 32px #0003;background:rgba(255,255,255,.08)}.contact-form label{display:block;margin-bottom:.5rem;color:var(--text-color);font-weight:500;font-size:.95rem;opacity:.9}.form-group{display:flex;flex-direction:column;gap:.5rem;position:relative}.form-group label{transition:all .3s ease}.contact-form input,.contact-form textarea{width:100%;padding:.875rem 1rem;margin-bottom:.5rem;border:1px solid rgba(126,178,255,.3);border-radius:12px;background-color:#ffffff12!important;color:var(--text-color);transition:all .3s ease;box-shadow:0 2px 8px #0000001a}.contact-form input:hover,.contact-form textarea:hover{background-color:#ffffff17!important;border-color:#7eb2ff80}.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent-color);background-color:#ffffff1a!important;box-shadow:0 0 0 2px #7eb2ff33}.contact-form textarea{min-height:150px;resize:vertical}.contact-form button{background:transparent;color:#fff;border:2px solid #ffffff;border-radius:25px;padding:.875rem 2rem;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;width:auto;min-width:160px;height:40px;display:inline-flex;align-items:center;justify-content:center}.contact-form button:hover{background:#7eb2ff;color:#000;border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 15px #7eb2ff4d}.contact-form button:disabled{opacity:.6;cursor:not-allowed}.form-actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:flex-end}.social-links{display:flex;gap:1rem;align-items:center}.social-links .social-link{color:#fff;font-size:2.25rem;transition:all .3s ease;opacity:.9}.social-links .social-link:hover{opacity:1;transform:translateY(-2px);color:#7eb2ff!important}.status-message{text-align:center;padding:1rem;border-radius:12px;margin-top:1rem;font-weight:500;opacity:0;transform:translateY(10px);animation:fadeInUp .3s forwards}.status-message.success{background:rgba(52,211,153,.1);color:#34d399;border:1px solid rgba(52,211,153,.2)}.status-message.error{background:rgba(255,86,86,.1);color:#ff5656;border:1px solid rgba(255,86,86,.2)}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.form-group input::placeholder,.form-group textarea::placeholder{color:#ffffff80}.App.dark-mode .form-group input::placeholder,.App.dark-mode .form-group textarea::placeholder{color:#fff9}.App:not(.dark-mode) .form-group input::placeholder,.App:not(.dark-mode) .form-group textarea::placeholder{color:#666}.required{color:#e74c3c;margin-left:.25rem}.submit-btn{min-width:100px;text-align:center}.submit-btn:hover{background-color:#7eb2ff!important;border-color:#7eb2ff!important}.submit-btn:disabled{opacity:.6;cursor:not-allowed}:root{--visited-link-light: #800080;--visited-link-dark: #ffe6ff}#education{position:relative;display:flex;flex-direction:column;justify-content:flex-start;background:transparent!important}.education h2{margin-bottom:0rem}.education-school-link,.education-degree-link{position:relative;text-decoration:none;color:inherit;font-weight:500;transition:all .3s ease}.education-school-link:after,.education-degree-link:after{content:"";position:absolute;width:100%;height:1px;bottom:-2px;left:0;background-color:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s ease}.education-school-link:hover:after,.education-degree-link:hover:after{transform:scaleX(1);transform-origin:left}.education-school-link:hover{color:#7eb2ff}.education-degree-link:hover{color:#19c493}.education-date{display:inline-flex;align-items:center;gap:8px;background:rgba(255,165,0,.1);padding:4px 12px;border-radius:20px;margin:8px 0}.education-date>span,.calendar-icon{color:orange;font-size:.9em}.education-position{padding:1.5rem;margin-bottom:1.5rem;width:100%;max-width:100%;padding-left:15px}.education-position:before{content:"";position:absolute;left:0;top:0;height:100%;width:4px;background:linear-gradient(to bottom,#7eb2ff,#19c493);border-top-left-radius:12px;border-bottom-left-radius:12px}.education>div{padding:0}.education-details li{background:rgba(20,20,30,.3);border:1px solid rgba(255,255,255,.4);border-radius:25px;padding:6px 16px;font-size:.95rem;color:var(--text-color);transition:all .3s ease;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:0 2px 8px #0000001a}.education-details li:hover{background:linear-gradient(135deg,var(--accent-color),#34d399)!important;color:#000!important;border-color:transparent!important;transform:translateY(-2px)!important;box-shadow:0 4px 12px #7eb2ff4d!important}.company-link{position:relative;text-decoration:none;color:inherit;font-weight:500;transition:all .3s ease}.company-link:after{content:"";position:absolute;width:100%;height:1px;bottom:-2px;left:0;background-color:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s ease}.company-link:hover:after{transform:scaleX(1);transform-origin:left}.company-link:hover{color:var(--company-color)}.date-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,165,0,.1);padding:4px 12px;border-radius:20px;margin:8px 0;font-size:.9em;letter-spacing:normal}.date-tag>span{color:orange;font-size:.9em;letter-spacing:normal}.calendar-icon{color:orange}.duration{color:var(--text-secondary);font-size:.9em;font-style:italic;letter-spacing:normal;margin-left:8px}.duration[data-lang=zh]{letter-spacing:normal}.position-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:12px;transition:all .3s ease;position:relative;padding:1.5rem;margin-bottom:1.5rem;width:100%;max-width:100%;padding-left:15px}.position-card:before{content:"";position:absolute;left:0;top:0;height:100%;width:4px;background:linear-gradient(to bottom,var(--company-color),var(--position-color));border-top-left-radius:12px;border-bottom-left-radius:12px}.position-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}.job-title{color:var(--position-color);font-weight:600;margin:.5rem 0}.location-tag{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:.9em;background:rgba(255,255,255,.05);padding:4px 12px;border-radius:16px;margin-top:4px}.location-icon{font-size:.9em}.job-description{margin-top:1rem;color:var(--text-color);opacity:.9;line-height:1.6;background:transparent!important;max-width:100%}.job-description ul{list-style-type:none!important;padding-left:0!important;margin:.5rem 0;display:flex!important;flex-direction:column!important;width:100%;background:transparent!important;gap:.75rem}.job-description li{position:relative!important;padding-left:1.5em!important;margin:.75rem 0!important;display:block!important;width:100%!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;white-space:pre-wrap!important;word-wrap:break-word!important;border:none!important;border-radius:0!important;box-shadow:none!important}.job-description li:before{content:"•"!important;position:absolute!important;left:.5em!important;color:var(--position-color)!important;background:transparent!important}.experience-container{width:100%;max-width:var(--container-max-width-xl);margin:0 auto;padding:2rem}#experience{min-height:100vh;position:relative;display:flex;flex-direction:column;background:transparent!important}.footer{width:100%;padding:2rem 0;margin-top:4rem;position:relative}.footer-content{max-width:1200px;margin:0 auto;padding:0 2rem;text-align:center;color:var(--text-color);font-size:.9rem;opacity:.7;transition:opacity .3s ease}.footer-content:hover{opacity:.9}.assetCredit{font-size:.8rem;opacity:.6;margin-top:.5em}.assetCredit a{color:var(--text-color);text-decoration:underline}.assetCredit a:hover{opacity:.8}.hamburger-container{position:fixed;top:2rem;right:1rem;z-index:1003;background:transparent}.hamburger-container:hover{background-color:#7eb2ff;border-color:#7eb2ff}.hamburger-container:hover .hamburger span{background:#000000}.hamburger{width:24px;height:24px;position:relative;background:transparent;border:none;cursor:pointer;padding:0}.hamburger span{display:block;position:absolute;width:100%;height:4px;background:var(--text-color);border-radius:2px;transition:all .3s ease-in-out;transform-origin:center}.hamburger span:first-child{top:4px}.hamburger span:nth-child(2){top:11px}.hamburger span:last-child{top:18px}.hamburger.open span:first-child{transform:translateY(7px) rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:last-child{transform:translateY(-7px) rotate(-45deg)}.menu{position:fixed;top:0;right:-300px;width:300px;height:100vh;background-color:#000000f7;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .4s cubic-bezier(.4,0,.2,1);z-index:1001;overflow-y:auto;-webkit-overflow-scrolling:touch;border-left:1px solid rgba(255,255,255,.1)}.menu.open{transform:translate(-300px);box-shadow:-5px 0 15px #0000004d}.menu ul{list-style:none;padding:5rem 2rem;margin:0}.menu li{margin:1.5rem 0;font-size:1.2rem;cursor:pointer;transition:all .3s ease;color:var(--text-color);opacity:.9;transform:translate(0)}.menu li:hover,.menu a:hover{color:#7eb2ff;opacity:1;transform:translate(10px)}.menu a{text-decoration:none;color:var(--text-color);transition:all .3s ease}.close-button{position:absolute;top:2rem;right:2rem;width:2rem;height:2rem;background:transparent;border:none;cursor:pointer;padding:0;z-index:1002}.close-button span{display:block;width:2rem;height:.25rem;background:var(--text-color);border-radius:10px;position:absolute;top:50%;left:0}.close-button span:first-child{transform:rotate(45deg)}.close-button span:last-child{transform:rotate(-45deg)}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999;opacity:0;animation:fadeIn .3s ease-in-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.toggle-container{position:fixed!important;top:2rem!important;right:4rem!important;background-color:var(--background-color);z-index:1003;display:flex;gap:.5rem;align-items:center}@supports (padding: max(0px)){.menu{padding-top:max(2rem,env(safe-area-inset-top));padding-bottom:max(2rem,env(safe-area-inset-bottom));padding-right:max(0px,env(safe-area-inset-right))}}.earth-container{position:absolute!important;right:0;top:0;width:50vw!important;height:100vh!important;margin:0;padding:0;display:flex;justify-content:flex-end;align-items:center;pointer-events:auto;z-index:1;transition:all .3s ease}.earth-canvas{position:relative;right:0;top:0;width:50vw!important;height:100vh!important;margin:0;padding:0;transform:none!important;will-change:transform;transition:all .3s ease;pointer-events:auto;cursor:grab}.earth-canvas:active{cursor:grabbing}.earth-canvas:hover{filter:brightness(1.05)}@media (max-aspect-ratio: 12/10){.earth-container,.earth-canvas{position:relative!important;width:100vw!important;height:40vh!important;right:auto;top:auto}}:root{--earth-ambient-intensity: .55;--earth-primary-light-intensity: .75;--earth-secondary-light-intensity: .18;--earth-hemisphere-intensity: .28;--earth-rotation-speed: .1;--earth-roughness: .6;--earth-metalness: .05;--earth-env-map-intensity: .8;--placeholder-color: #1a1a1a;--placeholder-roughness: .8;--placeholder-metalness: .2}.header{position:fixed;top:0;left:0;width:100%;z-index:1000;background-color:#000c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-container{position:relative;height:100vh;overflow:hidden;display:flex;justify-content:space-between;align-items:stretch;padding:0;width:100%;min-height:100vh;height:auto;margin:0;gap:clamp(1rem,5vh,3rem)}.logo{font-size:1.5rem;font-weight:700;color:var(--text-color);text-decoration:none;z-index:1002}.nav{display:flex;align-items:center}.header-content{text-align:center;padding:1rem;max-width:var(--container-max-width-sm);margin:0 auto;width:100%;box-sizing:border-box}.header-content h1{font-size:2.5rem;margin-bottom:1rem;font-weight:700;background:linear-gradient(45deg,#34d399 0%,#7eb3e6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.title{font-size:1.25rem;margin-bottom:.5rem;color:var(--text-color)}.earth-wrapper{position:relative;right:0;top:0;width:50vw;height:100vh;margin:0;padding:0;z-index:0}.text-container{position:relative;width:50%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box;z-index:2;color:#fff;text-align:left;background:transparent;min-height:100vh;height:auto;z-index:1;margin:0;min-height:auto}.greeting{font-size:clamp(2.5rem,4vw,4rem);font-weight:700;margin-bottom:.5rem;line-height:1.2;font-family:var(--font-heading);white-space:pre-line;text-shadow:2px 2px 4px rgba(0,0,0,.3);letter-spacing:-.02em}.subtitle{font-size:clamp(1.5rem,2.5vw,2.5rem);font-weight:500;opacity:1;color:var(--accent-color);text-shadow:2px 2px 4px rgba(0,0,0,.3)}.subtitle span{text-align:center;color:var(--accent-color)}.current-location{font-size:clamp(1.25rem,2vw,2rem);font-weight:400;display:flex;align-items:center;white-space:nowrap;color:var(--text-color);column-gap:.5rem;row-gap:.5rem}canvas{pointer-events:none;position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;transform:none;margin:0}@keyframes wave-animation{0%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}60%{transform:rotate(0)}to{transform:rotate(0)}}.wave-emoji{display:inline-block;transform-origin:70% 70%}.wave-emoji:hover{animation:wave-animation 2.5s ease-in-out 1;cursor:default}.menu-button{right:0;width:48px;height:48px;border-radius:15px;cursor:pointer;pointer-events:auto}.menu-button-bar{width:26px;height:4px;background:white;margin:2.5px;border-radius:2px;transition:var(--transition-fast)}.overlay-container{position:absolute;height:calc(100% - 30px);padding:15px 0;margin:0 auto;right:0;left:0;z-index:var(--z-overlay);pointer-events:none;opacity:0;transition:opacity var(--transition-medium)}@media screen and (max-width: 1080px){canvas{width:100vw;transform:none;height:100vh;margin:0}.header-container{flex-direction:column;height:auto}.text-container{width:100%}.earth-wrapper{width:var(--container-width);max-width:var(--container-max-width-xl);margin:0 auto;height:auto}}@media (max-aspect-ratio: 12/10){.header-container{padding-top:10px}.menu-button{transform:scale(.9)}.earth-container,.earth-canvas{width:100%!important;height:50vh!important}.header-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh}.text-container{width:100%;height:auto;min-height:auto;justify-content:center;padding-top:clamp(2rem,10vh,6rem);order:1}.earth-wrapper{width:100%;height:50vh;position:relative;order:2;margin-top:0}}:root{--breakpoint-phone: 375px;--breakpoint-tablet: 768px;--breakpoint-laptop: 1024px;--breakpoint-desktop: 1440px;--container-max-width-phone: 350px;--container-max-width-tablet: 720px;--container-max-width-laptop: 960px;--container-max-width-desktop: 1200px;--container-padding: clamp(1rem, 3vw, 3rem);--fs-base: clamp(16px, .8rem + 1vw, 18px);--fs-lg: clamp(20px, 1rem + 1.25vw, 24px);--fs-xl: clamp(24px, 1.25rem + 1.5vw, 32px);--fs-2xl: clamp(32px, 1.75rem + 2vw, 40px);--fs-3xl: clamp(40px, 2rem + 2.5vw, 56px);--fs-4xl: clamp(48px, 2.5rem + 3vw, 64px);--space-xs: clamp(8px, .4rem + .5vw, 12px);--space-sm: clamp(12px, .6rem + .75vw, 16px);--space-md: clamp(16px, .8rem + 1vw, 24px);--space-lg: clamp(24px, 1.2rem + 1.5vw, 32px);--space-xl: clamp(32px, 1.6rem + 2vw, 48px);--space-2xl: clamp(48px, 2.4rem + 3vw, 64px);--container-width: min(100% - var(--container-padding) * 2, 90rem);--header-height: clamp(4rem, 8vh, 6rem);--nav-height: clamp(3rem, 6vh, 5rem);--card-padding: clamp(1rem, 2vw, 2rem);--section-spacing: clamp(2rem, 4vw, 4rem);--grid-gap: clamp(1rem, 2vw, 2rem);--background-color: transparent;--text-color: #ffffff;--accent-color: #7eb3e6;--company-color: #7eb3e6;--position-color: #34d399;--border-color: rgba(255, 255, 255, .1);--font-family-en: "Exo 2", "Orbitron", sans-serif;--font-family-zh: "Noto Sans TC", sans-serif;--font-heading: "Orbitron", var(--font-family-zh);--transition-slow: .7s cubic-bezier(.645, .045, .355, 1);--transition-medium: .4s ease-in-out;--transition-fast: .3s ease;--z-transition: 1000;--z-overlay: 3;--z-header: 2;--bp-sm: 640px;--bp-md: 768px;--bp-lg: 1024px;--bp-xl: 1280px;--bp-2xl: 1536px;--container-max-width-sm: 640px;--container-max-width-md: 768px;--container-max-width-lg: 1024px;--container-max-width-xl: 1280px;--container-max-width-2xl: 1536px;--section-padding-sm: 2rem;--section-padding-md: 3rem;--section-padding-lg: 4rem;--section-padding-xl: 5rem;font-size:16px}:root[lang=zh]{font-size:16px}.container{width:100%;margin:0;padding-left:0;padding-right:0;max-width:var(--container-max-width-desktop)}.grid{display:grid;gap:var(--space-md);grid-template-columns:repeat(4,1fr)}@media (hover: none){.touch-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.touch-scroll::-webkit-scrollbar{display:none}}@media (max-aspect-ratio: 12/10){:root{--header-height: 70px;--container-padding: 1rem}}@container (aspect-ratio > 1/1){.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}}@media (aspect-ratio < 1/1){:root{--header-height: clamp(3rem, 6vh, 4rem)}}.skills{display:flex;flex-direction:column;background:transparent!important;padding:0}.skills h2{margin-bottom:3rem}.skills>div{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:var(--container-max-width-xl);margin:0 auto}.skills .skill-category{padding:0;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.3);border-radius:16px;transition:all .3s ease;box-shadow:0 4px 20px #0000001a;overflow:hidden;opacity:1!important;transform:none!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.skill-header{padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all .3s ease;border-bottom:1px solid rgba(255,255,255,.1)}.skill-category:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 8px 30px #0003;background:rgba(255,255,255,.08)!important}.skill-header:hover{background:rgba(255,255,255,.08)}.skill-category h3{color:var(--accent-color);margin:0;font-size:1.5rem;border-bottom:none;padding-bottom:0}.expand-icon{font-size:1.5rem;color:var(--accent-color);transition:transform .3s ease}.skill-category.expanded .expand-icon{transform:rotate(180deg)}.skill-header{padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.1)}.skill-header h3{margin:0!important;padding:0!important;border:none!important}.expand-icon{font-size:1.5rem;font-weight:700;transition:transform .3s ease}.skills .skills-list{display:flex;flex-wrap:wrap;gap:.75rem;max-height:0;opacity:0;overflow:hidden;padding:0;margin:0;transition:max-height .3s ease-out,opacity .2s ease-out,padding .3s ease-out}.skills .skills-list.expanded{max-height:2000px;opacity:1;padding:1.5rem 2rem;background:rgba(255,255,255,.03)!important}.skills .skills-list.expanded li{opacity:1;transform:translateY(0)}.skills .skills-list li{background:rgba(20,20,30,.3);border:1px solid rgba(255,255,255,.4);border-radius:25px;padding:6px 16px;font-size:.95rem;display:inline-flex;align-items:center;margin:0;color:var(--text-color);transition:all .3s ease;cursor:pointer;white-space:nowrap;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:0 2px 8px #0000001a}.skills-list li:hover{background:linear-gradient(135deg,var(--accent-color),#34d399);color:#000;border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 12px #7eb2ff4d}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;display:flex;justify-content:center;align-items:center;z-index:99999;opacity:1;transition:opacity .8s ease-out;pointer-events:auto}.loading-screen.fade-out{opacity:0;pointer-events:none;z-index:-1}.loading-container{position:relative}.progress-circle{position:relative;display:flex;justify-content:center;align-items:center}.progress-text{position:absolute;color:#fff;font-size:1.5rem;font-weight:700}.progress-ring-circle-bg{stroke:#333}.progress-ring-circle{stroke:#fff;transform:rotate(-90deg);transform-origin:60px 60px;transition:stroke-dashoffset .6s ease}:root{--font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-heading: "Orbitron", sans-serif;--font-chinese: "Noto Sans TC", sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--text-base-zh: 1rem;--text-lg-zh: 1.125rem;--text-xl-zh: 1.25rem;--text-2xl-zh: 1.5rem;--text-3xl-zh: 2rem;--text-4xl-zh: 2.5rem}html{background:transparent!important;font-size:16px}body{margin:0;font-family:var(--font-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--text-base);line-height:1.6;letter-spacing:-.011em;background:transparent!important}[lang=zh],[lang=zh] body{font-family:var(--font-chinese);font-size:var(--text-base-zh);line-height:1.8;letter-spacing:.05em}[lang=zh] h1{font-family:var(--font-chinese);font-size:var(--text-4xl-zh);font-weight:700;line-height:1.4;letter-spacing:.02em}[lang=zh] h2{font-family:var(--font-chinese);font-size:var(--text-3xl-zh);font-weight:700;line-height:1.5;letter-spacing:.02em}[lang=zh] h3{font-family:var(--font-chinese);font-size:var(--text-3xl-zh);font-weight:500;line-height:1.6;letter-spacing:.01em}[lang=zh] h4,[lang=zh] h5,[lang=zh] h6{font-family:var(--font-chinese);font-size:var(--text-xl-zh);font-weight:500;line-height:1.6;letter-spacing:.01em}h1{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:700;line-height:1.2;letter-spacing:-.02em}h2{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:600;line-height:1.3;letter-spacing:-.02em}h3{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:600;line-height:1.4;letter-spacing:-.01em}h4,h5,h6{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:600;line-height:1.4;letter-spacing:-.01em}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;font-size:var(--text-sm)}
