:root{--bg: #0a0a0b;--text: #f3f0ea;--text-2: #b9b5ac;--text-3: #8a877f;--line: #2a2927;--accent: #f5a05a;--bg-translucent: rgba(10, 10, 11, .92);--font-serif: "Instrument Serif", "Noto Sans TC", Georgia, serif;--font-sans: "Inter", "Noto Sans TC", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Noto Sans TC", ui-monospace, monospace;--fs-2xs: .6875rem;--fs-xs: .75rem;--fs-sm: .875rem;--fs-base: 1rem;--fs-md: 1.125rem;--fs-lg: 1.375rem;--fs-xl: 1.875rem;--fs-2xl: 2.75rem;--fs-display: clamp(3.5rem, 10vw, 9rem);--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-5: 1.5rem;--sp-6: 2rem;--sp-7: 3rem;--sp-8: 4rem;--sp-9: 6rem;--sp-10: 8rem;--max-width: 1200px;--gutter: var(--sp-5);--header-height: 64px;--radius: 2px;--ease: cubic-bezier(.16, 1, .3, 1);--dur-fast: .2s;--dur: .4s}*{box-sizing:border-box;margin:0;padding:0}html{background-color:var(--bg)}body{font-family:var(--font-sans);font-size:var(--fs-base);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}.icon{display:inline-block;height:1em;overflow:visible;vertical-align:-.125em}a{color:inherit;text-decoration:none;transition:color var(--dur-fast) ease}h1,h2,h3,h4{font-weight:500;color:var(--text);line-height:1.2}:focus-visible{outline:1px solid var(--accent);outline-offset:3px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--line)}::-webkit-scrollbar-thumb:hover{background:var(--text-3)}.mono-label{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.08em;color:var(--text-3)}header{position:fixed;top:0;left:0;width:100%;height:var(--header-height);background-color:transparent;border-bottom:1px solid transparent;z-index:1000;display:flex;align-items:center;transition:background-color var(--dur) ease,border-color var(--dur) ease}header.scrolled{background-color:var(--bg-translucent);border-bottom-color:var(--line)}.nav-container{max-width:var(--max-width);width:100%;margin:0 auto;padding:0 var(--gutter);display:flex;justify-content:space-between;align-items:center}.logo{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text)}.nav-links{display:flex;list-style:none;align-items:center;gap:var(--sp-6)}.nav-links a{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-2)}.nav-links a:hover{color:var(--accent)}.github-icon-link{display:flex;align-items:center;font-size:var(--fs-md)!important}.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:var(--fs-md);cursor:pointer}.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--bg)}.hero-bh{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:65% 40%;will-change:transform}.hero-fade{position:absolute;left:0;right:0;bottom:0;height:35%;background:linear-gradient(to bottom,rgba(10,10,11,0) 0%,var(--bg) 100%);pointer-events:none}.hero-content{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;pointer-events:none}.hero-inner{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter) var(--sp-9);pointer-events:auto;animation:hero-fade-in 1.2s ease .6s both}@keyframes hero-fade-in{0%{opacity:0}to{opacity:1}}.hero-eyebrow{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.12em;color:var(--text-2);margin-bottom:var(--sp-4)}.hero-name{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-display);line-height:.95;letter-spacing:-.01em;margin-bottom:var(--sp-5)}.hero-desc{max-width:34rem;font-size:var(--fs-md);color:var(--text-2);margin-bottom:var(--sp-6)}.hero-link{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text);border-bottom:1px solid var(--accent);padding-bottom:2px}.hero-link:hover{color:var(--accent)}.section-container{max-width:var(--max-width);width:100%;margin:0 auto;padding:var(--sp-9) var(--gutter)}.section-header{margin-bottom:var(--sp-8)}.section-label{display:block;margin-bottom:var(--sp-3)}.section-title{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-2xl);line-height:1.2;color:var(--text);max-width:700px}.section-container h2.mono-label{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:400;line-height:1.6;letter-spacing:.08em;color:var(--text-3);max-width:none}.work-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:var(--sp-4)}.filter-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-bottom:var(--sp-6)}.filter-tabs button{background:none;border:none;border-bottom:1px solid transparent;padding:var(--sp-1) 0;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-3);cursor:pointer;transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}.filter-tabs button:hover{color:var(--text-2)}.filter-tabs button.active{color:var(--text);border-bottom-color:var(--accent)}.work-list-wrap{position:relative}.work-list{list-style:none;border-top:1px solid var(--line)}.work-list li{border-bottom:1px solid var(--line)}.work-row{display:grid;grid-template-columns:3.5rem minmax(0,1fr) 360px 11rem;grid-template-areas:"num main . meta";align-items:baseline;gap:var(--sp-4);min-height:44px;padding:var(--sp-2) 0;cursor:pointer;outline:none}.row-num{grid-area:num;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3)}.row-title{grid-area:main;min-width:0;font-family:var(--font-sans);font-weight:500;font-size:var(--fs-lg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--dur-fast) ease}.row-meta{grid-area:meta;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3);text-align:right;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}.work-row:hover .row-title,.work-row:focus-visible .row-title,.work-row.is-active .row-title{color:var(--accent)}.work-row:focus-visible .row-num,.work-row:focus-visible .row-meta{color:var(--text-2)}.work-all{margin-top:var(--sp-5)}.work-all-link{background:none;border:none;border-bottom:1px solid var(--accent);cursor:pointer}.work-float{position:absolute;top:0;right:calc(11rem + var(--sp-4));width:360px;pointer-events:none;z-index:5;opacity:0;transition:opacity .25s ease,top .25s var(--ease)}.work-float.visible{opacity:1}.work-float-img{height:225px;overflow:hidden;border:1px solid var(--line);background:#111112}.work-float img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;filter:saturate(.7) brightness(.85)}.project-highlight{font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.5;color:var(--text-3)}.work-float-caption{padding:var(--sp-2) 0;background:var(--bg)}@media (max-width: 1199px),(hover: none){.work-float{display:none}.work-row{grid-template-columns:2.5rem minmax(0,1fr) auto;grid-template-areas:"num main meta"}}.text-link,.submit-btn{display:inline-flex;align-items:flex-end;min-height:44px;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text);border-bottom:1px solid transparent;padding:var(--sp-3) 0 2px;transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}.text-link:hover,.text-link:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}.about-section{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:var(--sp-6);align-items:start}.about-label{padding-top:.6rem}.about-body{max-width:60ch;margin-bottom:0}.about-body .section-title{margin-bottom:var(--sp-6)}.about-lead{font-size:var(--fs-md);line-height:1.85;color:var(--text-2);margin-bottom:var(--sp-6)}.about-skills{font-family:var(--font-mono);font-size:var(--fs-xs);line-height:2;color:var(--text-2);padding:var(--sp-4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:var(--sp-6)}.about-skills .skill{white-space:nowrap}.about-skills .sep,.honor-line .sep{color:var(--text-3)}.about-stats{display:flex;flex-wrap:wrap;gap:var(--sp-5) var(--sp-7)}.about-stats dt{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}.about-stats dd{font-family:var(--font-serif);font-size:var(--fs-xl);line-height:1.2}.resume-list{list-style:none;border-top:1px solid var(--line)}.resume-row{display:grid;grid-template-columns:9rem minmax(0,1fr) 14rem;gap:var(--sp-5);align-items:baseline;padding:var(--sp-5) 0;border-bottom:1px solid var(--line)}.resume-time{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap}.resume-present{color:var(--accent)}.resume-main h3{font-family:var(--font-sans);font-weight:500;font-size:var(--fs-md);margin-bottom:var(--sp-1)}.resume-main p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.7}.resume-tags{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3);text-align:right;line-height:1.7}.honors-list{list-style:none;border-top:1px solid var(--line)}.honor-row{padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}.honor-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--sp-3)}.honor-year{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-3)}.honor-name{font-weight:500}.honor-place{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-2)}.honor-note{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--text-3)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start}.contact-info-panel{margin-bottom:0}.section-title.contact-invite{font-size:clamp(2.25rem,4.5vw,3.5rem);line-height:1.1;margin-bottom:var(--sp-6)}.contact-links{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1)}.contact-links .text-link{word-break:break-all}.form-group{margin-bottom:var(--sp-6)}.form-group label{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--text-3)}.form-group input,.form-group textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:var(--sp-3) 0;font-family:var(--font-sans);color:var(--text);font-size:var(--fs-base);resize:vertical;transition:border-color var(--dur-fast) ease}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-3)}.form-group input:focus,.form-group textarea:focus{outline:none;border-bottom-color:var(--accent)}.form-group input:disabled,.form-group textarea:disabled{opacity:.5;cursor:not-allowed}.submit-btn{background:none;border-top:none;border-left:none;border-right:none;border-bottom-color:var(--accent);cursor:pointer}.submit-btn:hover:not(:disabled),.submit-btn:focus-visible{color:var(--accent)}.submit-btn:disabled{color:var(--text-3);border-bottom-color:var(--line);cursor:progress}.form-success{padding:var(--sp-6) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.form-success p{margin-top:var(--sp-2);color:var(--text)}.form-error{font-size:var(--fs-sm);color:var(--accent);margin-bottom:var(--sp-3)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0a0bcc;z-index:2000;display:flex;justify-content:center;align-items:center;padding:var(--sp-5);opacity:0;pointer-events:none;transition:opacity var(--dur) ease}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-card{background:var(--bg);border:1px solid var(--line);width:100%;max-width:820px;max-height:90%;overflow-y:auto;position:relative}.modal-close-btn{position:absolute;top:var(--sp-4);right:var(--sp-4);width:36px;height:36px;background:none;border:1px solid var(--line);color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}.modal-close-btn:hover{color:var(--accent);border-color:var(--text-3)}.modal-header-banner{padding:var(--sp-7) var(--sp-6) var(--sp-5);border-bottom:1px solid var(--line)}.modal-header-banner h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-2xl);line-height:1.1;margin-top:var(--sp-3);padding-right:var(--sp-7)}.modal-highlight{margin-top:var(--sp-3);padding-right:var(--sp-7)}.modal-category-badge{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}.modal-body{padding:var(--sp-6)}.modal-preview{width:100%;aspect-ratio:16 / 9;overflow:hidden;border:1px solid var(--line);margin-bottom:var(--sp-6);background:#111112}.modal-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}.modal-gallery{display:flex;flex-direction:column;gap:var(--sp-5);margin-bottom:var(--sp-6)}.modal-gallery figure{border:1px solid var(--line);overflow:hidden}.modal-gallery img{display:block;width:100%;height:auto}.modal-gallery figcaption{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--text-2);border-top:1px solid var(--line)}.modal-details-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--sp-6)}.modal-main-content h3{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:var(--sp-3)}.modal-main-content p{color:var(--text-2);margin-bottom:var(--sp-6);line-height:1.75}.tech-title{margin-bottom:var(--sp-3)!important}.modal-tags{display:flex;gap:var(--sp-2);flex-wrap:wrap}.modal-tag{font-family:var(--font-mono);font-size:var(--fs-xs);border:1px solid var(--line);color:var(--text-2);padding:2px var(--sp-2);border-radius:var(--radius)}.modal-sidebar{display:flex;flex-direction:column;gap:var(--sp-5)}.sidebar-info-box{padding:var(--sp-4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.sidebar-info-box h4{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-xs);margin-bottom:var(--sp-3);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}.sidebar-info-box ul{list-style:none}.sidebar-info-box ul li{font-size:var(--fs-sm);color:var(--text-2);margin-bottom:var(--sp-2)}.sidebar-info-box ul li:last-child{margin-bottom:0}.sidebar-info-box strong{font-weight:500;color:var(--text)}.modal-action-buttons{display:flex;flex-direction:column;gap:var(--sp-3)}.modal-btn{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--radius);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text);transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}.modal-btn:hover{color:var(--accent);border-color:var(--text-3)}.caption-subtitle{font-size:var(--fs-2xs);color:var(--text-3);margin-top:var(--sp-5)}.modal-scale-enter-active,.modal-scale-leave-active{transition:transform .35s var(--ease),opacity .35s ease}.modal-scale-enter-from,.modal-scale-leave-to{transform:translateY(12px);opacity:0}.scroll-to-top{position:fixed;bottom:var(--sp-6);right:var(--sp-6);width:40px;height:40px;background:var(--bg);color:var(--text-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:999;opacity:0;pointer-events:none;transition:opacity var(--dur) ease,color var(--dur-fast) ease}.scroll-to-top.visible{opacity:1;pointer-events:auto}.scroll-to-top:hover{color:var(--accent)}footer{border-top:1px solid var(--line);margin-top:var(--sp-6)}.footer-content{max-width:var(--max-width);margin:0 auto;padding:var(--sp-5) var(--gutter);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);font-size:var(--fs-sm);color:var(--text-2)}.footer-built{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-3)}@media (max-width: 992px){.about-section{grid-template-columns:1fr;gap:var(--sp-3)}.about-label{padding-top:0}.contact-grid{grid-template-columns:1fr;gap:var(--sp-7)}.resume-row{grid-template-columns:8rem minmax(0,1fr)}.resume-tags{grid-column:2;text-align:left}}@media (max-width: 768px){:root{--gutter: var(--sp-4);--fs-2xl: 2.25rem}.section-container{padding-top:var(--sp-8);padding-bottom:var(--sp-8)}.menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-12px;position:relative;z-index:2}.logo{position:relative;z-index:2;padding:var(--sp-3) 0}header.menu-open{background-color:var(--bg);border-bottom-color:var(--line)}.nav-links{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;padding:calc(var(--header-height) + var(--sp-6)) var(--gutter) var(--sp-7);background-color:var(--bg);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--sp-2);opacity:0;visibility:hidden;transition:opacity var(--dur) ease,visibility 0s linear var(--dur)}.nav-links.active{opacity:1;visibility:visible;transition:opacity var(--dur) ease,visibility 0s}.nav-links a{display:block;font-family:var(--font-serif);font-size:2.75rem;line-height:1.2;color:var(--text);padding:var(--sp-1) 0}.nav-links .github-icon-link{font-size:var(--fs-xl)!important;margin-top:var(--sp-4);min-width:44px;min-height:44px}.filter-tabs button{min-height:44px}.filter-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:0 var(--gutter)}.filter-tabs::-webkit-scrollbar{display:none}.filter-tabs button{flex-shrink:0;white-space:nowrap}.work-row{align-items:start}.row-title{font-size:var(--fs-md);white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.row-num,.row-meta{line-height:calc(var(--fs-md) * 1.3)}.row-category{display:none}.modal-close-btn{width:44px;height:44px}.scroll-to-top{display:none}.hero-inner{padding-bottom:var(--sp-8)}.hero-desc{font-size:var(--fs-base)}.hero-link{display:inline-flex;align-items:flex-end;min-height:44px}.modal-details-grid{grid-template-columns:1fr;gap:var(--sp-6)}.modal-body{padding:var(--sp-5) var(--gutter)}.modal-header-banner{padding:var(--sp-7) var(--gutter) var(--sp-4)}.resume-row{grid-template-columns:1fr;gap:var(--sp-1)}.resume-tags{grid-column:1;margin-top:var(--sp-1)}.footer-content{flex-direction:column;align-items:flex-start}}@media (max-width: 480px){.modal-header-banner h2{font-size:var(--fs-xl)}}.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s var(--ease)}.reveal.is-visible{opacity:1;transform:none}@media (prefers-reduced-motion: reduce){.hero-inner{animation:none}}