:root{
  --ink:#17252a;--ink-soft:#405158;--muted:#66747b;--page:#f7f6f2;--paper:#fffefa;
  --line:#e1e2df;--teal:#225d5c;--teal-bright:#a5dcc6;--gold:#dfb581;
  --dark:#15262f;--dark-2:#1c323b;--wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--page);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.7}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #2f9b88;outline-offset:4px;border-radius:3px}
.container{width:min(var(--wrap),calc(100% - 88px));margin-inline:auto}
.skip-link{position:absolute;left:-9999px;top:10px;padding:8px 14px;background:white;z-index:99}
.skip-link:focus{left:10px}
.site-header{height:88px;background:#fffefa;border-bottom:1px solid #e8e8e4;position:relative;z-index:10}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:13px}
.brand-symbol{width:48px;height:48px;background:var(--dark);color:white;display:grid;place-items:center;border-radius:9px;font-family:Georgia,serif;font-size:28px;font-weight:700;letter-spacing:-3px;padding-right:4px}
.brand-symbol span,.period{color:#bb9160}
.brand-name{font-weight:750;font-size:17px;letter-spacing:-.35px;line-height:1.2;white-space:nowrap}
.brand-name small{display:block;font-size:9px;color:#82908d;letter-spacing:2px;margin-top:6px;font-weight:750}
.site-nav{display:flex;align-items:center;gap:35px;color:#425157;font-size:13px;font-weight:650}
.site-nav>a:not(.nav-github):hover{color:#177a68}
.nav-github{border:1px solid #d6dddb;border-radius:999px;padding:10px 17px;transition:background .2s,border-color .2s}
.nav-github:hover{border-color:var(--teal);background:#f0f8f3}
.nav-github span{padding-left:7px}
.hero{position:relative;background:var(--dark);color:white;overflow:hidden}
.hero-grid{position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(198,215,205,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(198,215,205,.13) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,transparent 10%,#000 100%);pointer-events:none}
.hero-content{min-height:600px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:6%;position:relative;padding-block:78px 65px}
.hero-copy{position:relative;z-index:2}
.eyebrow,.section-kicker{font-size:11px;font-weight:800;letter-spacing:2.7px;margin:0}
.eyebrow{color:var(--teal-bright);display:flex;gap:14px;align-items:center}
.eyebrow-line{display:block;width:28px;height:1px;background:var(--teal-bright)}
.hero h1{font-size:clamp(38px,4.45vw,64px);line-height:1.35;letter-spacing:-2.2px;font-weight:750;margin:30px 0 22px;white-space:nowrap}
.hero h1 em{font-style:normal;color:var(--teal-bright)}
.hero-intro{max-width:530px;font-size:16px;line-height:2;color:#b8c9cb;margin:0}
.hero-actions{display:flex;align-items:center;gap:14px;margin-top:35px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:14px 23px;min-height:52px;font-size:13px;font-weight:750;border:1px solid transparent;transition:transform .2s,background .2s,box-shadow .2s}
.button:hover{transform:translateY(-2px)}
.button-primary{background:#d5ecdc;color:#173b3b}
.button-primary:hover{background:#ecf6ec;box-shadow:0 8px 20px #0003}
.button-outline{border-color:#607980;color:#f0f5f2}
.button-outline:hover{background:#ffffff16}
.hero-tech{font-size:11px;color:#92a6aa;margin-top:42px;letter-spacing:.2px}
.hero-tech span{padding-inline:9px;color:#688086}
.hero-art{height:100%;display:flex;align-items:center;justify-content:center;min-height:350px}
.art-frame{position:relative;width:min(100%,405px);aspect-ratio:1/1.05;border:1px solid #5b7177;background:radial-gradient(circle at 64% 37%,#315058 0,transparent 53%),linear-gradient(145deg,#243c43,#182c34 60%,#10232b);display:grid;place-items:center;transform:rotate(3deg);box-shadow:0 35px 70px #0b151a70}
.art-frame::after{content:"";position:absolute;inset:15px;border:1px solid #72908d36}
.art-corner{position:absolute;width:21px;height:21px;border-color:#d9bd8b;z-index:2}
.art-corner-tl{left:-5px;top:-5px;border-left:2px solid;border-top:2px solid}
.art-corner-br{right:-5px;bottom:-5px;border-right:2px solid;border-bottom:2px solid}
.art-rings{position:absolute;width:270px;aspect-ratio:1;border:1px solid #b0c2b522;border-radius:50%;box-shadow:0 0 0 39px #b0c2b50d,0 0 0 79px #b0c2b505}
.art-code{position:relative;z-index:3;width:70%;display:flex;flex-direction:column;align-items:flex-start}
.art-label{font-size:9px;letter-spacing:2px;color:#a4bfb8}
.art-big{font-family:Georgia,"Times New Roman",serif;font-size:clamp(36px,4vw,57px);font-weight:700;line-height:1.08;letter-spacing:-2px;margin-block:27px;color:#f8f1de}
.art-big i{font-size:.43em;color:#d7ae82;font-weight:400;letter-spacing:0}
.art-bottom{font-size:9px;letter-spacing:3px;color:#9eb4b2}
.art-orbit{position:absolute;width:11px;height:11px;background:#a8d8bf;border-radius:50%}
.art-orbit-one{top:20%;right:16%}
.art-orbit-two{bottom:20%;left:13%;width:6px;height:6px;background:#c9ac7e}
.hero-bottom{position:relative;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff1b;color:#81999c;padding:16px 0;font-size:10px;letter-spacing:2px;font-weight:700}
.section{padding-block:94px 106px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:55px;margin-bottom:38px}
.section-kicker{color:#3d7970}
.section-heading h2{font-size:clamp(32px,3.5vw,46px);line-height:1.2;letter-spacing:-1.3px;margin:14px 0 0}
.section-description{max-width:425px;margin:0;color:#64747a;font-size:14px;line-height:1.9}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.book-card{display:grid;grid-template-columns:46% 1fr;gap:24px;align-items:center;border:1px solid #e1e4df;background:var(--paper);padding:26px;min-height:335px;transition:border .2s,transform .2s,box-shadow .2s}
.book-card:hover{border-color:#bcc9c2;transform:translateY(-3px);box-shadow:0 15px 35px #17252a0b}
.book-cover{min-height:277px;height:100%;position:relative;overflow:hidden;padding:19px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:10px 12px 20px #17252a1d;border-radius:2px}
.cover-swift{background:linear-gradient(145deg,#273e49 4%,#152a35 85%);color:#f5e8ca}
.cover-patterns{background:linear-gradient(125deg,#d9c8ab,#f0e2c8 65%,#b6a181);color:#263c3b}
.cover-index,.cover-foot{position:relative;z-index:2;font-size:8px;letter-spacing:1.3px;font-weight:800}
.cover-title-en{position:relative;z-index:2;margin-top:auto;font-family:Georgia,serif;font-size:clamp(28px,3vw,43px);font-weight:700;line-height:1}
.cover-title-en-small{font-size:clamp(24px,2.3vw,34px);line-height:1.13}
.cover-title-zh{position:relative;z-index:2;font-size:16px;font-weight:750;margin:8px 0 23px}
.cover-foot{margin-top:auto;font-size:7px;opacity:.77}
.cover-sphere{position:absolute;width:200px;height:200px;border-radius:50%;right:-80px;top:48px;border:35px solid #b9d9ca44;box-shadow:0 0 0 24px #c7e4cc14}
.cover-pattern-grid{position:absolute;inset:-40px;opacity:.22;background:repeating-linear-gradient(45deg,transparent 0 34px,#48645c 35px 37px,transparent 38px 60px),repeating-linear-gradient(-45deg,transparent 0 34px,#48645c 35px 37px,transparent 38px 60px)}
.book-info{min-width:0;align-self:center}
.book-category{color:#487b71;font-size:10px;font-weight:800;letter-spacing:1.4px}
.book-info h3{font-size:clamp(21px,2vw,28px);line-height:1.35;letter-spacing:-.5px;margin:14px 0}
.book-info p{font-size:13px;line-height:1.95;color:#637177;margin:0 0 23px}
.text-link{display:inline-flex;align-items:center;gap:8px;color:#236f62;font-size:12px;font-weight:800;border-bottom:1px solid #9cc9bb;padding-bottom:6px}
.text-link:hover{color:#0b5445}
.book-note{color:#87908f;font-size:12px;margin:20px 0 0}
.book-note span{margin-right:6px}
.projects-section{background:#ecefea;border-top:1px solid #e2e7e2}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.project-card{min-height:295px;display:flex;flex-direction:column;justify-content:space-between;padding:29px;background:#fffefa;border:1px solid #dfe6df;transition:transform .2s,border-color .2s}
.project-card:hover{transform:translateY(-3px);border-color:#a5bbb1}
.project-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.project-num{color:#bcc6c3;font:italic 27px Georgia,serif}
.project-tag{color:#548277;border:1px solid #cedcd5;padding:5px 9px;font-size:9px;letter-spacing:1px;font-weight:750;white-space:nowrap}
.project-card h3{font-size:22px;line-height:1.28;margin:17px 0 8px;letter-spacing:-.3px}
.project-card p{color:#6b797c;font-size:13px;line-height:1.9;margin:0}
.project-link{border-top:1px solid #e6ebe5;padding-top:16px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:1px;font-weight:800;color:#277265}
.project-link span{font-size:18px}
.project-link:hover{color:#123f38}
.more-projects{margin-top:35px;border-top:1px solid #cbd7d0}
.more-projects-heading{display:flex;justify-content:space-between;align-items:baseline;gap:15px;padding:19px 0}
.more-projects h3{font-size:15px;margin:0}
.more-projects-heading span{font-size:9px;letter-spacing:1.5px;color:#96a29b;font-weight:700}
.more-links{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.more-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 2px;border-top:1px solid #d5ddd6;color:#526761;font-size:13px;transition:color .2s}
.more-links a:hover{color:#0d6755}
.more-links span{color:#498f7a}
.all-projects{margin-top:30px}
.button-dark{background:var(--dark);color:white}
.button-dark:hover{background:#29474b}
.footer{background:#15262f;color:#fff;padding-block:35px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer strong{font-size:19px}
.footer p{color:#8fa7a6;font-size:11px;letter-spacing:.5px;margin:4px 0 0}
.footer-right{display:flex;align-items:center;gap:30px;font-size:11px;color:#8fa7a6}
.footer-right a{color:#e6f0e9;font-size:12px}
.footer-right a:hover{color:var(--teal-bright)}
@media(max-width:1050px){
  .container{width:min(var(--wrap),calc(100% - 56px))}
  .hero-content{gap:3%}.hero h1{font-size:clamp(33px,4.3vw,50px)}
  .book-card{gap:17px;padding:20px;grid-template-columns:43% 1fr}
  .book-cover{min-height:252px;padding:15px}
}
@media(max-width:760px){
  .site-header{height:auto}.header-inner{padding-block:15px;flex-wrap:wrap;gap:15px}
  .site-nav{width:100%;gap:25px;justify-content:space-between;font-size:12px}
  .nav-github{padding:6px 11px}
  .hero-content{grid-template-columns:1fr;gap:15px;min-height:0;padding-block:65px 47px}
  .hero h1{white-space:normal;font-size:clamp(33px,6.4vw,51px);letter-spacing:-1.2px}
  .hero-art{display:none}
  .hero-intro{font-size:15px}.hero-bottom{font-size:9px}
  .section{padding-block:65px 75px}
  .section-heading{display:block;margin-bottom:28px}
  .section-description{margin-top:20px}
  .book-grid{grid-template-columns:1fr}
  .book-card{grid-template-columns:40% 1fr}
  .book-cover{min-height:245px}
  .project-grid{grid-template-columns:1fr;gap:13px}
  .project-card{min-height:230px}
}
@media(max-width:470px){
  .container{width:calc(100% - 36px)}
  .brand-symbol{width:42px;height:42px}
  .site-nav{gap:9px;font-size:11px}.nav-github span{padding-left:1px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-tech{font-size:10px;line-height:2}
  .hero-bottom{gap:12px;font-size:8px;letter-spacing:1px}
  .book-card{grid-template-columns:1fr;gap:20px}
  .book-cover{height:270px;min-height:270px;max-width:270px;width:100%;margin-inline:auto}
  .book-info h3{margin:9px 0}.book-info p{margin-bottom:16px}
  .cover-title-en{font-size:39px}
  .more-links{grid-template-columns:1fr}
  .more-projects-heading span{display:none}
  .footer-inner{align-items:flex-start;flex-direction:column;gap:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}


/* A concise, public cross-disciplinary profile, separate from books/projects. */
.journey-section{background:#fffefa;border-bottom:1px solid #e1e8e1}
.journey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.journey-step{min-width:0;min-height:330px;display:flex;flex-direction:column;padding:27px;background:#f4f6f1;border:1px solid #e0e6dd;transition:transform .2s,border-color .2s,box-shadow .2s}
.journey-step:hover{transform:translateY(-3px);border-color:#a7bdb2;box-shadow:0 12px 28px #17252a0c}
.journey-step-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:1.5px;color:#71877d}
.journey-step-top span:first-child{font-family:Georgia,serif;font-size:24px;font-style:italic;font-weight:400;color:#789d8c}
.journey-mark{position:relative;display:flex;align-items:center;justify-content:center;height:70px;width:92px;margin:24px 0 11px}
.journey-mark-visual span{position:absolute;width:44px;height:44px;border:1.5px solid #487e77;transform:rotate(35deg)}
.journey-mark-visual span:nth-child(2){transform:translateX(14px) rotate(35deg);border-color:#b99b6e}
.journey-mark-visual span:nth-child(3){transform:translateX(27px) rotate(35deg);border-color:#a7c8b6}
.journey-mark-mobile span:first-child{width:42px;height:63px;border:2px solid #487e77;border-radius:9px}
.journey-mark-mobile span:last-child{width:18px;height:3px;background:#b99b6e;position:absolute;bottom:8px;left:37px;border-radius:4px}
.journey-mark-ux span{width:30px;height:30px;border:2px solid #3c7f77;border-radius:50%;position:absolute;left:0}
.journey-mark-ux span:nth-child(2){left:26px;border-color:#b99b6e}
.journey-mark-ux span:nth-child(3){left:52px;border-color:#a3c4b0}
.journey-step h3{font-size:21px;line-height:1.4;margin:3px 0 10px;letter-spacing:-.3px}
.journey-step p{color:#647670;font-size:13px;line-height:1.9;margin:0}
.journey-research{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 19px;margin-top:19px;border-left:3px solid #618c7f;background:#eff3ec;padding:18px 21px}
.journey-research-label{font-size:10px;letter-spacing:1.7px;font-weight:800;color:#4d7f72}
.journey-research p{font-size:13px;font-weight:700;margin:0;color:#304e48}
.journey-research>span:last-child{font-size:11px;color:#71837b}
@media(max-width:800px){.journey-grid{grid-template-columns:1fr;gap:12px}.journey-step{min-height:0;padding:23px}.journey-mark{margin-block:13px}.journey-research{align-items:flex-start;flex-direction:column;gap:6px}}