:root { --bg:#06111f; --surface:#081827; --surface2:#0a1d2f; --line:rgba(99,174,226,.18); --text:#edf5ff; --muted:#8fa3b8; --blue:#38a8ff; --lime:#9add2a; --mint:#31d0aa; --violet:#a776ff; --amber:#f6ad22; --red:#ff5d67; --sans:"Noto Sans TC",system-ui,sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; color:var(--text); font-family:var(--sans); background:radial-gradient(circle at 78% 5%,rgba(12,92,166,.20),transparent 31rem),radial-gradient(circle at 14% 52%,rgba(22,125,130,.12),transparent 38rem),var(--bg); min-width:320px; }
body::before { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; background-image:linear-gradient(rgba(45,136,199,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(45,136,199,.032) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent 72%); }
.noise { position:fixed; z-index:20; pointer-events:none; opacity:.035; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
a { color:inherit; text-decoration:none; }
.section-shell { width:min(1500px,calc(100% - 48px)); margin:0 auto; }
.site-header { width:min(1500px,calc(100% - 48px)); height:82px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:10; }
.brand { font:700 clamp(1.1rem,2vw,1.45rem)/1 var(--sans); letter-spacing:.05em; } .brand span { color:var(--blue); }
.nav-links { display:flex; gap:28px; font-size:.79rem; color:var(--muted); } .nav-links a { transition:color .2s; } .nav-links a:hover { color:var(--blue); }
.header-cta { border:1px solid rgba(57,168,255,.36); padding:9px 14px; border-radius:4px; font:500 .74rem var(--mono); color:#a9d9ff; transition:all .2s; } .header-cta:hover { background:rgba(56,168,255,.12); box-shadow:0 0 18px rgba(56,168,255,.2); }
.hero { min-height:420px; padding:86px 0 58px; display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:center; }
.eyebrow { font:500 .68rem var(--mono); color:#6caedc; letter-spacing:.1em; margin:0 0 13px; } .eyebrow span { display:inline-block; width:18px; height:1px; vertical-align:middle; margin-right:7px; background:var(--blue); }
h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.035em; }
h1 { max-width:700px; margin-bottom:18px; font-size:clamp(2.55rem,5.5vw,5.3rem); line-height:1.12; } h1 em,h2 em { color:var(--blue); font-style:normal; }
.hero-intro { max-width:570px; color:var(--muted); font-size:1rem; line-height:1.9; }
.hero-actions { display:flex; gap:12px; margin-top:29px; }.button { display:inline-flex; gap:15px; align-items:center; padding:12px 18px; border-radius:4px; font:500 .8rem var(--mono); transition:all .25s; }.button-primary { color:#02121c; background:var(--lime); box-shadow:0 0 24px rgba(154,221,42,.15); }.button-primary:hover { transform:translateY(-2px); box-shadow:0 7px 25px rgba(154,221,42,.25); }.button-quiet { border:1px solid var(--line); color:#c9e2f4; }.button-quiet:hover { border-color:var(--blue); background:rgba(56,168,255,.08); }
.hero-panel { height:285px; padding:22px 25px; overflow:hidden; position:relative; border:1px solid var(--line); border-radius:8px; background:linear-gradient(135deg,rgba(8,33,53,.94),rgba(5,18,32,.72)); box-shadow:inset 0 0 30px rgba(22,137,221,.06); }.hero-panel::after { content:""; position:absolute; width:190px; height:190px; right:-45px; bottom:-70px; border:1px solid rgba(57,168,255,.25); border-radius:50%; box-shadow:0 0 0 25px rgba(57,168,255,.025),0 0 0 50px rgba(57,168,255,.02); }
.role-line { color:#79bce8; font:500 .61rem var(--mono); letter-spacing:.05em; }.status-dot { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); }.hero-role { display:flex; gap:18px; margin-top:30px; position:relative; z-index:1; }.hero-role>span { color:rgba(111,178,221,.46); font:400 .75rem var(--mono); }.hero-role strong { display:block; color:#dbeeff; font-size:1rem; }.hero-role small { display:block; margin-top:4px; color:#65b4ec; font-size:.84rem; }.hero-role:nth-of-type(3) small { color:var(--lime); }.coordinate-grid { position:absolute; right:20px; top:35px; display:grid; grid-template-columns:repeat(2,18px); gap:7px; }.coordinate-grid i { width:18px; height:18px; border:1px solid rgba(56,168,255,.28); }.coordinate-grid i:nth-child(2),.coordinate-grid i:nth-child(3) { background:rgba(56,168,255,.18); }.hero-location { position:absolute; bottom:14px; margin:0; color:rgba(147,181,205,.55); font:.6rem var(--mono); letter-spacing:.09em; }
.metrics-band { border:1px solid var(--line); border-radius:8px; display:grid; grid-template-columns:repeat(5,1fr); background:rgba(7,25,40,.62); overflow:hidden; }.metric { min-height:94px; display:flex; align-items:center; gap:14px; padding:19px; border-right:1px solid var(--line); }.metric:last-child { border:0; }.metric-icon { width:33px; color:var(--blue); font:500 1.45rem var(--mono); text-align:center; }.metric-icon.time { color:var(--red); }.metric-icon.trophy { color:var(--amber); }.metric-icon.data { color:var(--mint); }.metric strong { display:block; font:600 1rem var(--mono); white-space:nowrap; }.metric small { color:var(--muted); font-size:.7rem; }
.projects { padding-top:83px; overflow:hidden; }.section-heading,.panel-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }.section-heading h2,.panel-heading h2 { margin:0; font-size:1.48rem; font-weight:700; }.section-heading>p,.panel-heading>p { color:var(--muted); margin:0; font-size:.75rem; line-height:1.7; text-align:right; }.project-controls { display:flex; gap:7px; }.project-nav { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(78,172,231,.42); border-radius:4px; color:#9ed9ff; background:rgba(11,42,66,.78); font:1.1rem var(--mono); cursor:pointer; transition:all .2s; }.project-nav:hover,.project-nav:focus-visible { outline:0; color:#03121d; border-color:var(--lime); background:var(--lime); box-shadow:0 0 15px rgba(154,221,42,.25); }.project-track { display:flex; width:100%; max-width:100%; gap:12px; margin-top:28px; padding:12px 3px 16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#285d7d transparent; touch-action:pan-y; user-select:none; cursor:grab; }.project-track.is-dragging { cursor:grabbing; scroll-snap-type:none; }.project-track::-webkit-scrollbar { height:6px; }.project-track::-webkit-scrollbar-thumb { background:#285d7d; border-radius:9px; }.project-card { --accent:var(--blue); position:relative; flex:0 0 218px; width:218px; min-height:345px; padding:16px 15px 12px; border:1px solid color-mix(in srgb,var(--accent) 72%,#27445b); border-radius:7px; background:linear-gradient(145deg,rgba(13,30,46,.94),rgba(6,18,30,.92)); box-shadow:inset 0 0 28px color-mix(in srgb,var(--accent) 9%,transparent); scroll-snap-align:start; transition:transform .22s,box-shadow .22s; cursor:pointer; }.project-card:hover,.project-card:focus-visible { transform:translateY(-7px); outline:0; box-shadow:0 11px 28px rgba(0,0,0,.35),inset 0 0 35px color-mix(in srgb,var(--accent) 15%,transparent); }.project-card.mint{--accent:var(--mint)}.project-card.violet{--accent:var(--violet)}.project-card.blue{--accent:var(--blue)}.project-card.amber{--accent:var(--amber)}.project-card.teal{--accent:#26cbb3}.project-card.red{--accent:var(--red)}.project-card.purple{--accent:#ad6bf3}.project-card.azure{--accent:#2997f7}.project-card.lime{--accent:var(--lime)}
.project-top { display:flex; justify-content:space-between; gap:5px; min-height:17px; color:#c8dbe9; font:.61rem var(--mono); }.tag { font:.54rem var(--sans); padding:2px 5px; border-radius:3px; white-space:nowrap; }.done { color:#8ade71; background:rgba(90,214,90,.14); }.active-tag { color:#d3ff82; background:rgba(154,221,42,.17); }.project-number { position:absolute; top:43px; right:14px; color:rgba(177,203,220,.1); font:800 3rem var(--mono); }.project-icon { display:grid; place-items:center; width:45px; height:45px; margin:20px 0 11px; border:1px solid color-mix(in srgb,var(--accent) 70%,transparent); border-radius:50%; color:var(--accent); font:1.5rem var(--mono); }.project-card h3 { margin-bottom:1px; font-size:1rem; font-weight:600; }.project-subtitle { min-height:34px; margin-bottom:9px; color:#d5e4ee; font-size:.72rem; }.tech-pill { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 6px; border:1px solid color-mix(in srgb,var(--accent) 34%,transparent); border-radius:3px; color:color-mix(in srgb,var(--accent) 77%,white); background:color-mix(in srgb,var(--accent) 10%,transparent); font:.57rem var(--mono); }.project-card ul { min-height:66px; margin:11px 0 8px; padding-left:14px; color:#b3c5d3; font-size:.67rem; line-height:1.75; }.project-card footer { position:absolute; bottom:11px; left:14px; right:13px; display:flex; align-items:center; gap:8px; color:#d1e4f2; font:.58rem var(--mono); }.project-card footer span::before { content:"◇"; color:var(--accent); margin-right:3px; }.project-card footer button { margin-left:auto; border:0; color:var(--accent); background:none; font-size:1.05rem; cursor:pointer; }.timeline { min-width:1400px; margin-top:3px; position:relative; display:flex; justify-content:space-between; padding:18px 20px 0; color:#b6c7d4; font:.61rem var(--mono); }.timeline div { position:absolute; left:0; right:0; top:4px; height:1px; background:linear-gradient(90deg,var(--mint),var(--blue),var(--lime)); }.timeline div::after { content:""; position:absolute; right:0; top:-3px; border:4px solid transparent; border-left-color:var(--lime); }.timeline span::before { content:""; position:absolute; top:0; width:10px; height:10px; margin-left:12px; border:1px solid currentColor; border-radius:50%; background:var(--bg); }.timeline span:last-child { color:var(--lime); }
.dashboard { display:grid; grid-template-columns:1.15fr .88fr .9fr; gap:10px; padding-top:63px; }.panel { border:1px solid var(--line); border-radius:7px; background:rgba(5,22,37,.63); box-shadow:inset 0 0 30px rgba(21,105,173,.035); }.growth-panel,.skills-panel { padding:17px; }.panel-heading h2 { font-size:1rem; }.panel-heading .eyebrow { margin-bottom:7px; font-size:.56rem; }.panel-heading>p { font-size:.61rem; }.chart-legend { display:flex; flex-wrap:wrap; gap:5px 10px; margin-top:15px; color:#a6bfd0; font:.57rem var(--sans); }.chart-legend .python{color:#9add2a}.chart-legend .gui{color:#429af1}.chart-legend .data{color:#ffb131}.chart-legend .etl{color:#a776ff}.chart-legend .api{color:#31d0aa}.chart-legend .arch{color:#ff6572}.growth-chart { width:100%; height:auto; margin-top:10px; overflow:visible; }.chart-grid line { stroke:rgba(130,185,223,.12); stroke-dasharray:3 4; }.chart-labels text { fill:#9bb1c1; font:10px var(--mono); }.chart-line { fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }.python-line{stroke:#9add2a}.gui-line{stroke:#429af1}.data-line{stroke:#ffb131}.etl-line{stroke:#a776ff}.api-line{stroke:#31d0aa}.arch-line{stroke:#ff6572}.chart-dots circle { stroke:#071525; stroke-width:1.5; }.python-dots{fill:#9add2a}.gui-dots{fill:#429af1}.data-dots{fill:#ffb131}.etl-dots{fill:#a776ff}.api-dots{fill:#31d0aa}.arch-dots{fill:#ff6572}.chart-note { display:flex; justify-content:space-between; gap:10px; margin-top:1px; color:#aabfce; font:.57rem var(--mono); }.skill-list { margin-top:17px; display:grid; gap:9px; }.skill-row { display:grid; grid-template-columns:122px 1fr 22px; gap:8px; align-items:center; color:#cfdeea; font-size:.62rem; }.skill-bar { height:7px; overflow:hidden; border-radius:10px; background:repeating-linear-gradient(90deg,#102b40 0 9px,transparent 9px 13px); }.skill-bar i { display:block; width:var(--level); height:100%; border-radius:inherit; background:linear-gradient(90deg,#27a8e8,#78d5ff); box-shadow:0 0 8px rgba(78,196,255,.38); }.skill-row:nth-child(1) .skill-bar i,.skill-row:nth-child(2) .skill-bar i{background:linear-gradient(90deg,#21a85c,#9add2a)}.skill-row:nth-child(4) .skill-bar i{background:linear-gradient(90deg,#8266e8,#d48cff)}.skill-row:nth-child(8) .skill-bar i{background:linear-gradient(90deg,#c94b50,#ff8470)}.skill-row b { color:#8eb2c8; font:500 .59rem var(--mono); }.planned-skills { border-top:1px dashed rgba(139,183,212,.26); margin-top:18px; padding-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:7px 18px; color:#839dad; font-size:.6rem; }.planned-skills p { grid-column:1/-1; margin:0 0 2px; color:#7ba6c1; font:.56rem var(--mono); }.planned-skills span::before { content:"—"; color:#86b2cf; margin-right:6px; }
.right-rail { display:grid; gap:10px; }.kpi-panel,.roadmap-panel { padding:17px; }.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:15px; }.kpi-grid>div { min-height:91px; padding:9px 6px; border:1px solid rgba(95,157,195,.12); border-radius:4px; background:rgba(9,30,48,.62); text-align:center; }.kpi-grid i { display:block; min-height:25px; color:var(--blue); font:1.15rem var(--mono); font-style:normal; }.kpi-grid>div:nth-child(3n) i { color:var(--mint); }.kpi-grid>div:nth-child(5n) i { color:var(--red); }.kpi-grid strong { display:block; margin-top:3px; color:#e6f4fc; font:500 .7rem var(--mono); white-space:nowrap; }.kpi-grid small { display:block; margin-top:4px; color:#82a0b2; font-size:.49rem; line-height:1.2; }.roadmap-panel { min-height:177px; }.roadmap { display:flex; margin:19px 0 0; padding:0; list-style:none; justify-content:space-between; }.roadmap li { position:relative; flex:1; display:grid; justify-items:center; text-align:center; }.roadmap li:not(:last-child)::after { content:""; position:absolute; top:13px; left:60%; width:80%; height:1px; background:linear-gradient(90deg,rgba(84,159,209,.75),rgba(84,159,209,.06)); }.roadmap li:not(:last-child)::before { content:"›"; position:absolute; top:1px; right:-2px; z-index:1; color:#68b8ee; font-size:1.2rem; }.roadmap i { position:relative; z-index:2; display:grid; place-items:center; width:29px; height:29px; border:1px solid rgba(103,181,232,.46); border-radius:50%; color:#a9d7f4; background:#081a2a; font-style:normal; font:.88rem var(--mono); }.roadmap span { display:block; max-width:70px; margin-top:8px; color:#b9cfdd; font-size:.55rem; line-height:1.35; }.roadmap small { display:block; margin-top:2px; color:#6f95ac; font-size:.5rem; }
.contact { margin-top:70px; padding:64px 0 66px; border-top:1px solid var(--line); }.contact h2 { margin-bottom:26px; font-size:clamp(2rem,4vw,3.7rem); line-height:1.2; }.site-footer { display:flex; justify-content:space-between; gap:15px; padding:18px 0 25px; border-top:1px solid var(--line); color:#718a9c; font:.58rem var(--mono); }.site-footer a { color:#9fc3d9; }
.project-dialog { width:min(490px,calc(100% - 36px)); padding:30px; border:1px solid rgba(71,176,241,.45); border-radius:9px; color:var(--text); background:linear-gradient(145deg,#0a2439,#071625); box-shadow:0 25px 70px #000; }.project-dialog::backdrop { background:rgba(0,9,18,.7); backdrop-filter:blur(4px); }.dialog-close { position:absolute; right:13px; top:7px; border:0; color:#9bc4de; background:transparent; font-size:1.7rem; cursor:pointer; }.project-dialog h2 { margin-bottom:3px; font-size:1.9rem; }.dialog-subtitle { color:#6abcf0; }.project-dialog>p:not(.eyebrow):not(.dialog-subtitle) { color:#bdd0dc; font-size:.87rem; line-height:1.8; }.dialog-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }.dialog-tags span { padding:4px 8px; border:1px solid rgba(77,184,247,.3); border-radius:3px; color:#92cdef; background:rgba(32,129,191,.1); font:.67rem var(--mono); }
/* Fluid type scale: readable at 1080p without making tablet and phone layouts oversized. */
:root { --type-micro:clamp(.875rem,.45vw + .5rem,1rem); --type-meta:clamp(.94rem,.45vw + .58rem,1.1rem); --type-small:clamp(1rem,.5vw + .65rem,1.18rem); --type-body:clamp(1.08rem,.5vw + .75rem,1.25rem); }

.nav-links { font-size:var(--type-meta); }
.header-cta { padding:10px 15px; font-size:var(--type-meta); }
.eyebrow { font-size:var(--type-micro); }
.hero-intro { font-size:var(--type-body); }
.button { padding:13px 19px; font-size:var(--type-small); }
.role-line,.hero-location { font-size:var(--type-micro); }
.hero-role>span { font-size:var(--type-meta); }
.hero-role strong { font-size:var(--type-body); }
.hero-role small { font-size:var(--type-meta); }
.metric { min-height:100px; }
.metric strong { font-size:var(--type-body); }
.metric small { font-size:var(--type-micro); }
.section-heading h2 { font-size:clamp(1.65rem,1vw + .8rem,2rem); }
.section-heading>p { font-size:var(--type-meta); }
.project-nav { width:38px; height:38px; }
.project-track { gap:14px; }
.project-card { display:flex; flex-direction:column; flex-basis:240px; width:240px; min-height:420px; padding:18px 17px 14px; }
.project-top,.tag,.tech-pill,.project-card footer,.timeline { font-size:var(--type-micro); }
.tag { padding:3px 6px; }
.project-number { top:47px; right:16px; font-size:3.25rem; }
.project-icon { width:50px; height:50px; margin:22px 0 12px; font-size:1.65rem; }
.project-card h3 { font-size:var(--type-body); }
.project-subtitle { min-height:38px; font-size:var(--type-meta); }
.tech-pill { padding:4px 7px; }
.project-card ul { flex:1; min-height:0; margin-bottom:12px; padding-left:16px; font-size:var(--type-micro); line-height:1.8; }
.project-card footer { position:static; min-height:20px; margin-top:auto; }
.panel-heading h2 { font-size:clamp(1.3rem,.55vw + .88rem,1.55rem); }
.panel-heading .eyebrow,.panel-heading>p,.chart-legend,.chart-note { font-size:var(--type-micro); }
.chart-labels text { font-size:11.5px; }
.skill-row { font-size:var(--type-micro); }
.skill-row b { font-size:var(--type-micro); }
.planned-skills { font-size:var(--type-micro); }
.planned-skills p { font-size:var(--type-micro); }
.kpi-grid strong { font-size:var(--type-meta); }
.kpi-grid small { font-size:var(--type-micro); line-height:1.35; }
.roadmap span { max-width:80px; font-size:var(--type-micro); line-height:1.45; }
.roadmap small { font-size:var(--type-micro); line-height:1.3; }
.site-footer { font-size:var(--type-micro); }

@media (max-width:1200px) { .hero{gap:45px}.dashboard{grid-template-columns:1.2fr .9fr}.right-rail{grid-column:1/-1;grid-template-columns:1.2fr .8fr}.roadmap-panel{min-height:auto}.metric{padding:15px 11px;gap:8px}.metric strong{font-size:.88rem}.metric-icon{font-size:1.2rem} }
@media (max-width:850px) { .timeline { display:none; } }
@media (max-width:850px) { .site-header{height:68px}.nav-links{display:none}.hero{grid-template-columns:1fr;gap:28px;padding:60px 0 45px}.hero-panel{height:245px}.metrics-band{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2){border-right:0}.metric:nth-child(3){border-top:1px solid var(--line)}.metric:nth-child(4){border-top:1px solid var(--line);border-right:0}.metric:nth-child(5){border-top:1px solid var(--line);grid-column:1/-1}.dashboard{grid-template-columns:1fr}.right-rail{grid-column:auto;grid-template-columns:1fr}.section-heading>p{display:none}.growth-panel{padding:14px}.skills-panel{padding:16px}.chart-note{font-size:.49rem}.skill-row{grid-template-columns:110px 1fr 20px}.contact{margin-top:45px}.project-card{flex-basis:232px;width:232px} }
@media (max-width:540px) { .section-shell,.site-header{width:min(100% - 28px,1500px)}.brand{font-size:1.1rem}.header-cta{padding:8px 9px;font-size:.64rem}.hero{padding-top:45px}h1{font-size:2.5rem}.hero-intro{font-size:.88rem}.hero-panel{height:220px;padding:18px}.hero-role{margin-top:22px}.metrics-band{grid-template-columns:1fr 1fr}.metric{min-height:81px}.metric strong{font-size:.77rem}.metric small{font-size:.61rem}.project-track{width:calc(100vw - 28px)}.projects{padding-top:55px}.dashboard{min-width:0;padding-top:45px}.chart-legend{gap:4px 7px}.growth-chart{width:100%;margin-left:0}.chart-note{font-size:.44rem}.skill-row{grid-template-columns:95px 1fr 16px;font-size:.55rem}.kpi-grid{grid-template-columns:repeat(2,1fr)}.kpi-grid>div{min-height:76px}.roadmap-panel{min-width:0;overflow:hidden}.roadmap{gap:7px;overflow-x:auto;padding-bottom:4px}.roadmap li{min-width:65px}.roadmap li:not(:last-child)::after{width:72%}.roadmap li:not(:last-child)::before{right:-6px}.site-footer{display:grid;gap:9px;font-size:.53rem}.site-footer a{grid-row:1;justify-self:end}.contact{padding:48px 0}.contact h2{font-size:2rem}.project-dialog{padding:25px 20px} }