:root{--primary: #06c;--primary-focus: #0071e3;--primary-on-dark: #2997ff;--ink: #1d1d1f;--ink-muted-80: #333;--ink-muted-48: #6e6e73;--body-muted: #ccc;--hairline: #e0e0e0;--canvas: #fff;--canvas-parchment: #f5f5f7;--surface-black: #000;--surface-card-dark: #1d1d1f;--font-display: -apple-system, blinkmacsystemfont, "SF Pro Display", "SF Pro TC", "PingFang TC", "Helvetica Neue", "Noto Sans TC", "Microsoft JhengHei", sans-serif;--font-text: -apple-system, blinkmacsystemfont, "SF Pro Text", "SF Pro TC", "PingFang TC", "Helvetica Neue", "Noto Sans TC", "Microsoft JhengHei", sans-serif;--nav-height: 44px;--product-shadow: rgb(0 0 0 / 22%) 3px 5px 30px 0;font-family:var(--font-text);font-size:17px;line-height:1.47;font-weight:400;color:var(--ink);background-color:var(--canvas);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{scroll-behavior:smooth;scroll-padding-top:var(--nav-height)}*{margin:0;padding:0;box-sizing:border-box}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--primary-focus);outline-offset:2px}body{margin:0;min-width:320px;min-height:100vh;background:var(--canvas)}#root{display:flex;flex-direction:column;min-height:100vh}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}.app{display:flex;flex-direction:column;min-height:100vh;padding-top:var(--nav-height);background:var(--canvas);color:var(--ink)}.app:lang(en){--display-tracking: -.01em}.container{width:100%;max-width:1068px;margin:0 auto;padding:0 22px}.header{position:fixed;inset:0 0 auto;z-index:300;height:var(--nav-height);background:#000c;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.navbar{max-width:1068px;height:100%;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo-text{color:#fff;font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.02em;white-space:nowrap}.logo-text:hover{color:#fff;text-decoration:none}.nav-right{display:flex;align-items:center;gap:28px}.nav-links{display:flex;gap:26px;list-style:none}.nav-links a,.lang-btn{display:inline-block;color:#fffc;font-size:12px;line-height:var(--nav-height);letter-spacing:-.01em;white-space:nowrap;transition:color .2s ease}.lang-btn{color:#ffffff8f}.nav-links a:hover,.lang-btn:hover{color:#fff;text-decoration:none}.nav-links a.active{color:#fff}.language-switcher{display:inline-flex;align-items:center;gap:6px}.lang-btn.active{color:#fff}.lang-divider{color:#ffffff52;font-size:12px;-webkit-user-select:none;user-select:none}.menu-toggle{display:none;position:relative;width:44px;height:var(--nav-height);margin-right:-12px}.menu-toggle span{position:absolute;left:15px;width:14px;height:1px;background:#fff;transition:transform .25s ease,opacity .2s ease}.menu-toggle span:nth-child(1){top:18px}.menu-toggle span:nth-child(2){display:none}.menu-toggle span:nth-child(3){top:25px}.menu-toggle.active span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}.menu-toggle.active span:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}section{padding:80px 0;background:var(--canvas)}section h2{margin-bottom:40px;font-family:var(--font-display);font-size:40px;font-weight:600;line-height:1.1;letter-spacing:var(--display-tracking, 0)}.about,.projects,.footer{background:var(--canvas-parchment)}.skills,.credentials{background:var(--surface-black);color:#fff}.summary-card h3,.experience-period{color:var(--ink-muted-48);font-size:14px;font-weight:600;line-height:1.29}.summary-list,.experience-bullets,.project-highlights,.credential-card ul{display:grid;gap:10px;list-style:none}.summary-list li,.experience-bullets li,.project-highlight,.credential-card li{position:relative;padding-left:16px}.summary-list li:before,.experience-bullets li:before,.project-highlight:before,.credential-card li:before{content:"";position:absolute;left:2px;top:.68em;width:4px;height:4px;border-radius:50%;background:var(--ink-muted-48)}.button-primary,.button-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 22px;border:1px solid var(--primary);border-radius:9999px;font-size:17px;line-height:1.2;transition:transform .15s ease}.button-primary{background:var(--primary);color:#fff}.button-secondary{background:transparent;color:var(--primary)}.button-primary:hover,.button-secondary:hover{text-decoration:none}.button-primary:active,.button-secondary:active{transform:scale(.95)}.hero{padding:120px 22px 112px;text-align:center}.hero-content{max-width:820px;margin:0 auto;text-wrap:balance}.hero-content h1{font-family:var(--font-display);font-size:80px;font-weight:600;line-height:1.05;letter-spacing:var(--display-tracking, 0)}.hero-content h1 strong{font-weight:600}.hero-content p{margin-top:20px;color:var(--ink-muted-48);font-family:var(--font-display);font-size:28px;line-height:1.25}.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:36px}.about-wrapper{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:56px;align-items:start}.about-image{aspect-ratio:1;overflow:hidden;border-radius:18px;box-shadow:var(--product-shadow)}.about-image img{display:block;width:100%;height:100%;object-fit:cover}.about-content p{margin-bottom:16px}.summary-card{margin-top:32px;padding:28px 32px;border-radius:18px;background:var(--canvas)}.summary-card h3{margin-bottom:14px}.experience-timeline{display:grid;gap:20px}.experience-card{padding:32px 36px;border-radius:18px;background:var(--canvas-parchment)}.experience-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.experience-header h3{font-family:var(--font-display);font-size:21px;font-weight:600;line-height:1.19}.experience-company{margin-top:4px;color:var(--ink-muted-48)}.experience-type{flex-shrink:0;color:var(--ink-muted-48);font-size:14px}.experience-segments{display:grid;gap:24px}.experience-period{margin-bottom:10px}.skills-grid,.credentials-grid{columns:3;column-gap:20px}.skill-card,.credential-card{break-inside:avoid;margin-bottom:20px}.skill-card{padding:28px;border-radius:18px;background:var(--surface-card-dark)}.skill-card h3,.credential-card h3{margin-bottom:14px;font-family:var(--font-display);font-size:21px;font-weight:600;line-height:1.19}.skill-card ul{display:grid;gap:8px;list-style:none}.skill-card li{color:var(--body-muted)}.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.project-card{display:flex;flex-direction:column;padding:32px;border-radius:18px;background:var(--canvas)}.side-projects .project-card{background:var(--canvas-parchment)}.project-card h3{font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.14}.project-card p{margin-bottom:20px;color:var(--ink-muted-80)}.project-header{margin-bottom:12px}.project-accent{display:none}.project-card .project-tagline{margin:-4px 0 20px;color:var(--ink);font-family:var(--font-display);font-size:21px;font-weight:600;line-height:1.19}.project-highlights{margin-bottom:24px;color:var(--ink-muted-80);font-size:15px}.technologies{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}.tech-tag{padding:4px 10px;border-radius:8px;background:var(--canvas-parchment);color:var(--ink-muted-80);font-size:12px;line-height:1.4}.side-projects .tech-tag{background:var(--canvas)}.project-screenshots{display:flex;gap:12px;margin:0 0 24px;overflow-x:auto;scroll-snap-type:x mandatory}.project-screenshot,.project-screenshot-placeholder{aspect-ratio:16 / 10;border-radius:8px}.project-screenshot{flex:0 0 100%;overflow:hidden;scroll-snap-align:start;background:var(--canvas)}.project-screenshot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.project-screenshot-placeholder{display:grid;place-items:center;margin:0 0 24px;border:1px dashed var(--hairline);color:var(--ink-muted-48);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.project-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:20px}.project-link{font-size:17px}.credential-card{padding:28px;border-radius:18px;background:var(--surface-card-dark)}.credential-card li{color:var(--body-muted);font-size:15px;overflow-wrap:anywhere}.credential-card li:before{background:#fff6}.contact{padding:96px 0;text-align:center}.contact h2{margin-bottom:12px}.contact-subtitle{color:var(--ink-muted-48);font-family:var(--font-display);font-size:21px}.contact-methods{display:flex;justify-content:center;margin:32px 0 28px}.contact-method{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:14px 28px;border-radius:9999px;background:var(--primary);color:#fff;font-size:18px;font-weight:300;line-height:1;transition:transform .15s ease}.contact-method:hover{text-decoration:none}.contact-method:active{transform:scale(.95)}.contact-method-label{font-weight:600}.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 32px}.contact-link:after{content:" ›"}.footer{padding:20px 22px;border-top:1px solid var(--hairline);color:var(--ink-muted-48);font-size:12px}.footer-divider{display:none}.footer p{max-width:1024px;margin:0 auto}@media(max-width:1068px){.hero-content h1{font-size:64px}.hero-content p{font-size:24px}}@media(max-width:900px){.projects-grid{grid-template-columns:1fr}.skills-grid,.credentials-grid{columns:2}}@media(max-width:768px){.menu-toggle{display:block}.nav-right{position:absolute;top:100%;left:0;right:0;height:calc(100dvh - var(--nav-height));flex-direction:column;align-items:stretch;gap:32px;padding:24px 48px 48px;background:var(--surface-black);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}.nav-right.open{opacity:1;visibility:visible}.nav-links{flex-direction:column;gap:4px}.nav-links a{color:#fffc;font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.5}.language-switcher{gap:12px}.lang-btn,.lang-divider{font-size:17px}section{padding:64px 0}section h2{margin-bottom:28px;font-size:32px}.hero{padding:80px 22px 72px}.hero-content h1{font-size:48px}.hero-content p{font-size:21px}.about-wrapper{grid-template-columns:1fr;gap:40px}.about-image{width:min(280px,100%);margin:0 auto}.experience-card,.project-card{padding:28px 24px}.summary-card{padding:24px}.project-card h3{font-size:24px}.skills-grid,.credentials-grid{columns:1}.contact{padding:72px 0}}@media(max-width:480px){.container,.navbar{padding:0 16px}.nav-right{padding:16px 32px 40px}.hero{padding:64px 16px 56px}.hero-content h1{font-size:40px}.hero-content p{font-size:19px}section h2{font-size:28px}.experience-header{flex-direction:column;gap:6px}.experience-card,.project-card,.skill-card,.credential-card{padding:24px 20px}.contact-method{padding:14px 22px;font-size:16px}.footer{padding:20px 16px}}