/* finesse · register=brand · A=dark-ink+silver+paper · B=heavy-name+quiet-body · C=type-led-intro+featured-row
 * D=CSS-state-motion · E=graphite-and-paper · SOUL=7 SPECTACLE=3 DENSITY=4 */
:root{--page:#f5f7fb;--paper:#fff;--ink:#183144;--muted:#5a6d7d;--blue:#284cdf;--blue-light:#e1e8ff;--line:#d5dfe9;--soft:#eef3f8;--max:1120px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--page);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;font-size:16px;line-height:1.8}a{color:inherit;text-underline-offset:5px}a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}p,h1,h2,h3{margin:0}h1,h2,h3{line-height:1.35}.wrap{width:min(var(--max),calc(100% - 80px));margin-inline:auto}.skip-link{position:fixed;top:-100px;left:16px;background:#fff;color:var(--blue);padding:10px 16px;z-index:5}.skip-link:focus{top:12px}.site-header{min-height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-size:21px;font-weight:800;text-decoration:none;display:flex;align-items:center;gap:8px}.name-mark{width:8px;height:8px;border-radius:50%;background:var(--blue)}nav{display:flex;gap:30px;font-size:13px}nav a{text-decoration:none}nav a:hover{color:var(--blue);text-decoration:underline}.eyebrow{color:var(--blue);font-size:12px;font-weight:700;margin-bottom:15px}.home-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:100px;align-items:end;padding-block:82px 110px;border-bottom:1px solid var(--line)}.home-hero h1{font-size:clamp(48px,6vw,78px);letter-spacing:-2px}.hero-lead{font-size:23px;line-height:1.65;max-width:480px;margin-top:25px}.text-link,.card-link{display:inline-flex;gap:18px;align-items:center;color:var(--blue);font-weight:700;text-decoration:none;margin-top:30px}.text-link:hover,.card-link:hover{text-decoration:underline}.hero-index{border-left:2px solid var(--blue);padding:10px 0 10px 24px;display:flex;gap:20px;align-items:flex-start}.index-number{color:var(--blue);font-size:29px;font-weight:800;line-height:1}.hero-index strong{font-size:18px}.hero-index p{font-size:13px;color:var(--muted);margin-top:7px}.modules-section{padding-block:80px}.section-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:end}.section-intro h2,.about-panel h2,.contact-panel h2{font-size:32px}.section-intro>p:last-child{color:var(--muted);max-width:390px}.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:42px}.module-card{display:grid;grid-template-columns:45px 1fr;gap:15px;background:var(--paper);border:1px solid var(--line);padding:27px;text-decoration:none;min-height:235px;transition:transform .2s ease,border-color .2s ease}.module-card:hover{transform:translateY(-4px);border-color:#9cafee}.module-card-featured{grid-column:span 2;background:var(--blue-light);border-color:#c4d0f4}.module-card-muted{background:transparent}.module-number{font-size:13px;color:var(--blue);font-weight:800}.module-type{font-size:12px;color:var(--muted);margin-bottom:13px}.module-card h3{font-size:26px}.module-card p:not(.module-type){font-size:14px;color:var(--muted);max-width:470px;margin-top:12px}.card-link{font-size:13px;margin-top:24px}.coming-soon{display:inline-block;color:var(--muted);font-size:12px;margin-top:23px}.about-panel,.contact-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;border-top:1px solid var(--line);padding-block:72px}.body-lead{font-size:19px;line-height:1.8}.tag-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.tag-list span{font-size:12px;background:#fff;border:1px solid var(--line);padding:5px 12px;border-radius:20px}.contact-panel{padding-bottom:90px}.contact-panel .body-lead{color:var(--muted)}.site-footer{display:flex;justify-content:space-between;align-items:center;padding-block:35px}.footer-name{font-size:19px;font-weight:800;text-decoration:none}.site-footer p{font-size:12px;color:var(--muted);margin-top:5px}.back-top{font-size:12px}.project-back{padding-top:30px}.project-back a{font-size:13px;color:var(--blue);text-decoration:none}.project-hero{padding-block:56px 65px}.project-hero h1{font-size:clamp(44px,6vw,72px);letter-spacing:-2px}.project-deck{font-size:25px;line-height:1.6;margin-top:22px}.project-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:40px;font-size:13px}.project-facts span{color:var(--muted)}.project-facts b{display:block;color:var(--ink);font-size:12px;margin-bottom:5px}.project-section,.sensor-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px;padding-block:65px;border-top:1px solid var(--line)}.project-label h2{font-size:30px}.project-copy>p+p{margin-top:18px}.mini-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:25px 0;color:var(--muted);font-size:13px}.mini-flow span,.mini-flow strong{padding:8px 10px;background:var(--soft);border-radius:5px}.mini-flow strong{background:var(--blue);color:#fff}.stats-strip{background:var(--paper);display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:34px;border:1px solid var(--line);position:relative}.stats-strip strong{font-size:42px;line-height:1}.stats-strip strong span{font-size:13px;color:var(--muted);font-weight:400;margin-left:7px}.stats-strip p{font-size:13px;color:var(--muted);margin-top:10px}.stats-note{grid-column:1/-1;font-size:11px!important;border-top:1px solid var(--line);padding-top:16px;margin-top:12px}.sensor-section{background:var(--soft);border-top:0}.sensor-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}.sensor-cards div{background:#fff;padding:13px;border:1px solid var(--line);border-radius:5px}.sensor-cards b,.sensor-cards span{display:block}.sensor-cards b{font-size:14px}.sensor-cards span{font-size:11px;color:var(--muted);margin-top:3px}.boundary-note{font-size:13px;background:var(--soft);padding:13px;border-left:3px solid var(--blue)}.contribution-panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px;padding-block:65px;border-block:1px solid var(--line)}.short-list{list-style:none;padding:0;margin:0}.short-list li{display:grid;grid-template-columns:130px 1fr;gap:15px;padding-block:16px;border-bottom:1px solid var(--line);font-size:14px}.short-list li:first-child{padding-top:0}.short-list li:last-child{border-bottom:0}.short-list span{color:var(--muted)}.next-list{padding-left:20px;color:var(--muted);font-size:14px}.next-list li{margin-bottom:10px}.small-note{font-size:12px;color:var(--muted);margin-top:18px}@media(max-width:800px){.wrap{width:calc(100% - 40px)}.site-header{min-height:78px}.site-header nav{gap:16px;font-size:12px}.home-hero,.section-intro,.about-panel,.contact-panel,.project-section,.sensor-section,.contribution-panel{grid-template-columns:1fr;gap:28px}.home-hero{padding-block:50px 65px}.home-hero h1{font-size:56px}.hero-lead{font-size:21px}.hero-index{max-width:470px}.modules-section{padding-block:52px}.section-intro h2,.about-panel h2,.contact-panel h2,.project-label h2{font-size:28px}.module-grid{grid-template-columns:1fr;margin-top:28px}.module-card-featured{grid-column:auto}.about-panel,.contact-panel,.project-section,.sensor-section,.contribution-panel{padding-block:48px}.project-hero{padding-block:43px 50px}.project-hero h1{font-size:54px}.project-deck{font-size:21px}.project-facts{grid-template-columns:1fr;gap:14px;margin-top:26px}.stats-strip{grid-template-columns:1fr;padding:24px}.stats-note{grid-column:auto}.sensor-section{margin-inline:0;padding-inline:20px}.contribution-panel{margin-inline:0;padding-inline:20px}.short-list li{grid-template-columns:1fr;gap:4px}.site-footer{align-items:flex-start;gap:20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.hero-project-link{display:inline-flex;align-items:center;gap:28px;background:var(--blue);color:#fff;padding:15px 22px;border-radius:6px;font-size:17px;font-weight:700;text-decoration:none;margin-top:30px;transition:transform .2s ease,background .2s ease}.hero-project-link span{font-size:25px;line-height:1}.hero-project-link:hover{background:#1e3db9;transform:translateY(-3px)}

/* 2026-10-17：统一项目目录、个人资料和概念图展示。 */
nav a[aria-current="page"]{color:var(--blue);font-weight:700}
.hero-index{align-self:center}.home-hero{padding-block:70px 82px}.hero-lead{font-size:21px}
.projects-heading{display:flex;justify-content:space-between;align-items:end;gap:25px}.projects-heading h2{font-size:34px}.projects-heading .text-link{margin:0;font-size:14px}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:30px}
.portfolio-card{display:block;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:white;text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease}
.portfolio-card:hover{border-color:#8a9fe8;box-shadow:0 10px 30px #1831440b}.portfolio-cover{position:relative;background:#eef3fa;aspect-ratio:1200/840;overflow:hidden}.portfolio-cover img{display:block;width:100%;height:100%;object-fit:contain}
.cover-caption{position:absolute;right:12px;bottom:12px;background:#fff;color:#526678;padding:3px 9px;border-radius:4px;font-size:11px}.portfolio-content{padding:25px}.portfolio-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:18px}.project-phase{color:#284cdf;background:#edf1ff;padding:3px 8px;border-radius:4px}
.portfolio-content h3{font-size:27px}.portfolio-content .project-subname{margin:5px 0 10px;color:var(--blue);font-size:15px}.portfolio-content>p:not(.project-subname){font-size:14px;color:var(--muted);max-width:34em}.portfolio-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:25px;padding-top:17px;border-top:1px solid var(--line);font-size:12px}.portfolio-bottom>span{color:var(--muted)}.portfolio-bottom strong{font-size:14px;color:var(--blue)}
.upcoming-project{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:35px;border:1px dashed #bdcadc;border-radius:12px;min-height:280px;color:var(--muted)}.future-mark{font-size:42px;font-weight:300;color:#91a5c3;margin-bottom:18px}.upcoming-project h3{font-size:20px}.upcoming-project p{font-size:14px;margin-top:12px;max-width:22em}
.listing-hero{padding-block:62px 26px}.listing-hero h1{font-size:54px;letter-spacing:-1px}.listing-hero>p:last-child{color:var(--muted);font-size:18px;margin-top:18px}.listing-section{padding-bottom:80px}
.profile-facts{display:flex;flex-wrap:wrap;gap:24px 35px;margin-top:23px}.profile-facts dt{font-size:12px;color:var(--muted)}.profile-facts dd{margin:3px 0 0;font-size:15px}.contact-label{font-size:13px;color:var(--muted);margin-bottom:10px}.contact-email{font-size:clamp(17px,2vw,24px);color:var(--blue);overflow-wrap:anywhere}.contact-note{font-size:13px;margin-top:12px;color:var(--muted)}.footer-email{font-size:13px;overflow-wrap:anywhere;color:var(--blue)}
.project-back{padding-top:27px}.project-back .back-button,.back-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:60px;min-width:225px;padding:13px 24px;background:var(--blue);border:1px solid var(--blue);color:white;font-size:18px;font-weight:700;text-decoration:none;border-radius:8px}.back-button>span{font-size:25px;line-height:1}.back-button:hover{background:#1e3db9}
.project-hero{padding-block:42px 36px}.project-hero h1{font-size:clamp(36px,5.6vw,66px)}.project-deck{font-size:25px}.project-summary{font-size:20px;color:var(--muted)}.project-facts{grid-template-columns:1fr 1.2fr 1.2fr;margin-top:28px}
figure{margin:0}.concept-hero{margin-inline:auto;margin-bottom:45px;max-width:1000px}.concept-hero img,.concept-figure img{display:block;width:100%;height:auto;background:#eef3fa;border-radius:10px;border:1px solid var(--line)}.concept-hero>a,.concept-figure>a{display:block}.concept-hero figcaption,.concept-figure figcaption{display:flex;justify-content:space-between;gap:15px;align-items:start;font-size:12px;line-height:1.6;color:var(--muted);padding-top:12px}.concept-hero figcaption a,.concept-figure figcaption a{color:var(--blue);white-space:nowrap}
.visual-section{padding-block:50px;border-top:1px solid var(--line)}.visual-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;row-gap:12px;margin-bottom:30px}.visual-intro .eyebrow{grid-column:1/-1;margin:0}.visual-intro h2{font-size:30px}.visual-intro>p:last-child{color:var(--muted);font-size:16px;align-self:center}.concept-figure{max-width:1000px;margin-inline:auto}.project-end{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px 55px}.project-end .text-link{margin:0}.site-footer{gap:25px;border-top:1px solid var(--line)}
@media(max-width:800px){.home-hero{padding-block:45px 55px}.portfolio-grid{gap:20px}.portfolio-content{padding:20px}.portfolio-content h3{font-size:23px}.portfolio-meta,.portfolio-bottom{flex-wrap:wrap}.project-facts{grid-template-columns:1fr}.project-hero{padding-block:30px}.visual-intro{grid-template-columns:1fr;gap:15px}.visual-intro h2{font-size:27px}.concept-hero figcaption,.concept-figure figcaption{flex-direction:column;gap:8px}.site-footer{flex-wrap:wrap}.project-label h2{font-size:27px}.project-back .back-button,.back-button{min-height:58px;min-width:220px}.visual-section{padding-block:40px}}
@media(max-width:600px){.portfolio-grid{grid-template-columns:1fr}.projects-heading h2{font-size:28px}.upcoming-project{min-height:210px}.listing-hero h1{font-size:42px}.listing-hero{padding-top:40px}.portfolio-content h3{font-size:25px}.project-end{flex-direction:column;align-items:stretch}.project-end .text-link{justify-content:center}.site-header{gap:14px;flex-wrap:wrap;padding-block:17px;min-height:80px}.site-header nav{gap:14px;font-size:12px}.hero-project-link{min-height:60px}.visual-intro>p:last-child{font-size:15px}}
@media(max-width:380px){.site-header{align-items:start;gap:9px}.site-header nav{width:100%;justify-content:space-between}.home-hero h1{font-size:46px}.hero-lead{font-size:19px}.profile-facts{gap:20px}.project-hero h1{font-size:35px}}

/* 全站按钮与独立个人页面 */
html{scroll-behavior:auto}
a.site-button,.project-back a.site-button,.concept-hero figcaption a.site-button,.concept-figure figcaption a.site-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:11px 19px;border:1px solid #b3c3e8;border-radius:8px;background:#fff;color:#2446bc;font-family:inherit;font-size:15px;font-weight:600;line-height:1.45;text-align:center;text-decoration:none;white-space:normal;max-width:100%;transition:background .16s,border-color .16s,box-shadow .16s}
a.site-button:hover{background:#eaf0ff;border-color:#708ad8;text-decoration:none;box-shadow:0 3px 10px #284cdf12}
a.site-button:focus-visible{outline:3px solid #284cdf;outline-offset:4px}
a.site-button:active{background:#dbe5ff}
a.site-button.button-primary,.project-back a.site-button.button-primary{background:#284cdf;border-color:#284cdf;color:#fff}
a.site-button.button-primary:hover{background:#1d3ab7;border-color:#1d3ab7}
a.site-button.button-large,.project-back a.site-button.button-large{min-height:60px;min-width:215px;font-size:18px;padding:15px 25px}
.home-hero a.site-button{margin-top:28px}.site-header nav{gap:9px;flex-wrap:wrap}.site-header nav a.nav-button{font-size:14px;min-height:44px;padding:10px 17px;background:transparent;border-color:#b9c8e1}
.site-header nav a[aria-current="page"]{background:#284cdf;border-color:#284cdf;color:#fff}
.site-header nav a:hover{background:#e3ebff}.site-header nav a[aria-current="page"]:hover{background:#1d3ab7}
.portfolio-card{transition:none}.portfolio-card:hover{border-color:var(--line);box-shadow:none}.portfolio-bottom{gap:16px;flex-wrap:wrap}.portfolio-bottom>.site-button{flex-shrink:0}
.footer-actions,.profile-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px}.site-footer .footer-name{display:inline-block}.project-end{flex-wrap:wrap}
.concept-hero figcaption,.concept-figure figcaption{align-items:center}.concept-hero figcaption>.site-button,.concept-figure figcaption>.site-button{flex-shrink:0;white-space:nowrap}
.home-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-block:50px 70px;border-top:1px solid var(--line)}.home-shortcuts h2{font-size:28px}.home-shortcuts p:not(.eyebrow){color:var(--muted);font-size:15px;margin:14px 0 24px}
.standalone-intro{padding-block:55px 45px}.standalone-intro h1{font-size:56px;letter-spacing:-1px}.intro-summary{font-size:23px;line-height:1.75;max-width:36em;margin-top:23px}
.profile-section{display:grid;grid-template-columns:1fr 1.25fr;gap:75px;padding-block:40px 30px;border-top:1px solid var(--line)}.profile-section h2{font-size:30px}.profile-description{margin-top:18px;color:var(--muted);max-width:25em}.profile-section .profile-facts{margin:0 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.profile-section>.profile-facts dd{font-size:17px}.profile-actions.wrap{padding-block:15px 65px}.contact-content{border-top:1px solid var(--line);padding-block:45px 85px}.email-address{font-size:clamp(19px,3vw,32px);color:var(--ink);overflow-wrap:anywhere;line-height:1.5}.contact-content .profile-actions{margin-top:30px}
@media(max-width:900px){.site-header{gap:18px;flex-wrap:wrap;padding-block:18px}.profile-section{gap:35px}.site-header nav a.nav-button{padding-inline:13px}}
@media(max-width:650px){.site-header nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}.site-header nav a.nav-button{font-size:12px;padding:10px 6px;min-width:0;gap:0;white-space:nowrap}.home-shortcuts,.profile-section{grid-template-columns:1fr;gap:35px}.home-shortcuts{padding-block:40px 50px}.home-shortcuts article+article{border-top:1px solid var(--line);padding-top:30px}.standalone-intro{padding-block:35px}.standalone-intro h1{font-size:42px}.intro-summary{font-size:20px}.profile-section h2{font-size:26px}.profile-actions.wrap{padding-top:25px}.profile-actions .site-button{flex-grow:1}.contact-content{padding-block:30px 60px}.site-footer{align-items:flex-start;gap:20px}.footer-actions{gap:9px}.concept-hero figcaption,.concept-figure figcaption{align-items:flex-start}.projects-heading{flex-wrap:wrap}.project-end a.site-button{width:100%}}
@media(prefers-reduced-motion:reduce){a.site-button{transition:none}}

/* 首页仅显示个人介绍及独立页面入口。 */
.intro-home{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.intro-home .site-header{flex-shrink:0}
.intro-home-main{display:flex;align-items:center;flex:1;width:100%}
.intro-home-content{padding-block:60px 68px}
.intro-home-content h1{font-size:clamp(48px,5.5vw,76px);line-height:1.22;letter-spacing:-2px;margin-bottom:25px}
.intro-home-school{font-size:22px;line-height:1.6;margin-bottom:23px;color:var(--ink)}
.intro-home-description{max-width:760px;color:var(--muted);font-size:18px;line-height:1.9}
.intro-home-description+.intro-home-description{margin-top:12px}
.intro-home-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.intro-home-footer{border-top:1px solid var(--line);padding-block:20px;color:var(--muted);font-size:12px}
@media(max-width:650px){.intro-home-content{padding-block:38px 45px}.intro-home-content h1{font-size:52px}.intro-home-school{font-size:17px;margin-bottom:20px}.intro-home-description{font-size:16px;line-height:1.85}.intro-home-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.intro-home-actions .site-button.button-large{min-width:0;width:100%;min-height:52px;font-size:16px;padding:12px}.intro-home-actions .button-primary{grid-column:1/-1}.intro-home-footer{padding-block:18px}}
@media(max-width:360px){.intro-home-content h1{font-size:47px}.intro-home-school{font-size:16px}}

/* 首页所有页面入口集中在姓名下方。 */
.intro-home-content h1{margin-bottom:0}
.intro-home .intro-home-actions{margin-top:28px;margin-bottom:36px}
.intro-home .intro-home-school{margin-bottom:17px}
@media(max-width:650px){.intro-home .intro-home-actions{margin-top:24px;margin-bottom:30px}.intro-home .site-header{min-height:74px}}

.contact-content button.site-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:11px 19px;border:1px solid #b3c3e8;border-radius:8px;background:#fff;color:#2446bc;font-family:inherit;font-size:15px;font-weight:600;line-height:1.45;cursor:pointer;text-align:center;max-width:100%}
.contact-content button.site-button:hover{background:#eaf0ff;border-color:#708ad8}
.contact-content button.site-button:focus-visible{outline:3px solid #284cdf;outline-offset:4px}
.mail-help{margin-top:24px;font-size:14px;color:var(--muted);max-width:45em}.mail-status{font-size:13px;color:var(--muted);margin-top:8px;min-height:24px;max-width:48em}

/* 写实展示与可关闭的大图查看器 */
button.site-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:11px 19px;border:1px solid #b3c3e8;border-radius:8px;background:#fff;color:#2446bc;font-family:inherit;font-size:15px;font-weight:600;line-height:1.45;cursor:pointer;text-align:center}
button.site-button:hover{background:#eaf0ff;border-color:#708ad8}button.site-button:focus-visible{outline:3px solid #284cdf;outline-offset:4px}button.site-button.button-primary{background:#284cdf;border-color:#284cdf;color:white}button.site-button.button-primary:hover{background:#1d3ab7}button.site-button:disabled{opacity:.6;cursor:wait}
.photoreal-section{padding-block:28px 50px}.photoreal-heading h2,.diagram-divider h2{font-size:30px}.photoreal-heading>p:last-child,.diagram-divider>p:last-child{font-size:14px;color:var(--muted);max-width:52em;margin-top:13px}.photoreal-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.photoreal-grid img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;border:1px solid var(--line)}.photoreal-grid figcaption{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px}.photoreal-grid figcaption h3{font-size:19px}.photoreal-grid figcaption p{font-size:12px;color:var(--muted);margin-top:7px}.photoreal-grid figcaption .site-button{flex-shrink:0;white-space:nowrap}
.concept-animation{margin-top:45px;padding-top:32px;border-top:1px solid var(--line);display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:center}.concept-animation img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}.animation-copy h3{font-size:24px}.animation-copy>p:not(.eyebrow){font-size:14px;color:var(--muted);margin-top:15px}.animation-copy button{margin-top:20px}.diagram-divider{padding-block:35px 25px;border-top:1px solid var(--line)}
html.viewer-open{overflow:hidden}.image-viewer{width:calc(100vw - 64px);max-width:1400px;height:calc(100dvh - 64px);max-height:960px;padding:0;margin:auto;border:1px solid #c6d2e4;border-radius:14px;background:#f8faff;color:var(--ink);overflow:hidden;box-shadow:0 20px 80px #0006}
.image-viewer[open]{display:flex;flex-direction:column}.image-viewer::backdrop{background:#0b1725c9}.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 20px;background:#fff;border-bottom:1px solid var(--line);flex-shrink:0}.viewer-toolbar h2{font-size:17px;line-height:1.4}.viewer-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.viewer-actions button{white-space:nowrap}.viewer-scroll{flex:1;min-height:0;width:100%;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px;overscroll-behavior:contain}.viewer-scroll img{display:block;width:100%;height:100%;object-fit:contain;min-width:0}.image-viewer.is-zoomed .viewer-scroll{display:block}.image-viewer.is-zoomed .viewer-scroll img{height:auto;max-width:none;max-height:none;min-width:100%}.viewer-hint{font-size:12px;color:var(--muted);padding:10px 20px;margin:0;flex-shrink:0;border-top:1px solid var(--line);background:#fff}
@media(max-width:900px){.photoreal-grid{grid-template-columns:1fr;gap:32px}.photoreal-grid figure{max-width:800px}.concept-animation{gap:25px}.viewer-toolbar{flex-wrap:wrap}.viewer-toolbar h2{width:100%}}
@media(max-width:650px){.concept-animation{grid-template-columns:1fr}.photoreal-grid figcaption{flex-wrap:wrap;align-items:flex-start}.photoreal-heading h2,.diagram-divider h2{font-size:27px}.image-viewer{width:calc(100vw - 24px);height:calc(100dvh - 24px);border-radius:10px}.viewer-toolbar{padding:12px;gap:10px}.viewer-toolbar h2{font-size:15px}.viewer-actions{width:100%;justify-content:space-between}.viewer-actions button.site-button{font-size:14px;min-height:46px;padding:10px 14px}.viewer-scroll{padding:6px}.viewer-hint{font-size:11px;padding:9px 12px}.photoreal-section{padding-block:20px 35px}}

/* 原生线条人动作模拟，保持四肢长度并随进度连续绘制。 */
.motion-demo{margin-top:46px;border-top:1px solid var(--line);padding-top:32px}.motion-heading{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:24px}.motion-heading h3{font-size:27px}.motion-heading>p{max-width:28em;color:var(--muted);font-size:14px}.motion-stage{max-width:900px;margin:auto}.motion-stage svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px}.motion-timeline{display:flex;gap:18px;align-items:center;margin:22px 0 18px;font-size:14px}.motion-timeline input{flex:1;min-width:0;accent-color:var(--blue);min-height:40px;cursor:pointer}.motion-timeline output{min-width:44px;text-align:right;font-variant-numeric:tabular-nums}.motion-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.motion-speed-label,.motion-loop{display:flex;align-items:center;gap:9px;min-height:46px;font-size:14px;color:var(--muted)}.motion-speed-label select{font:inherit;padding:10px;border:1px solid #b3c3e8;border-radius:7px;color:var(--ink);background:white}.motion-loop input{width:19px;height:19px;accent-color:var(--blue)}.motion-status{margin-top:14px;min-height:24px;color:var(--muted);font-size:13px}.motion-caption{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:15px;padding-top:18px;border-top:1px solid var(--line)}.motion-caption p{font-size:12px;max-width:48em;color:var(--muted)}.motion-caption .site-button{flex-shrink:0}.motion-controls select:focus-visible,.motion-controls input:focus-visible,.motion-timeline input:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@media(max-width:650px){.motion-heading{display:block}.motion-heading>p{margin-top:15px}.motion-heading h3{font-size:24px}.motion-controls{gap:10px}.motion-timeline{gap:10px;font-size:12px}.motion-caption{flex-direction:column;align-items:flex-start}.motion-speed-label{flex-wrap:wrap}.motion-stage{margin-inline:-10px}}
/* finesse · portfolio refresh: a warmer, more personal visual system. */
:root{
  --page:#f2f3f1;
  --paper:#fbfbfa;
  --ink:#222424;
  --muted:#565b59;
  --blue:#353839;
  --blue-light:#e7e9e8;
  --line:#cfd3d0;
  --soft:#e8eae8;
  --max:1120px;
}
html,body{overflow-x:clip}
body{background:var(--page);color:var(--ink)}
h1,h2{overflow-wrap:anywhere;min-width:0}
.site-header{border-color:var(--line)}
.wordmark{color:var(--ink);font-weight:800}
.name-mark{width:10px;height:10px;border-radius:2px;transform:rotate(45deg);background:#777b79}
.eyebrow{color:#555a58;letter-spacing:0}
a:focus-visible,button:focus-visible{outline-color:#4f5553}
a.site-button,.project-back a.site-button,.concept-hero figcaption a.site-button,.concept-figure figcaption a.site-button,
button.site-button,.contact-content button.site-button{
  border-color:#aeb5b1;border-radius:5px;background:#fbfbfa;color:#292d2c;
  white-space:nowrap;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;
}
a.site-button:hover,button.site-button:hover,.contact-content button.site-button:hover{
  background:#e7e9e7;border-color:#7c8380;box-shadow:none;transform:translateY(-2px);
}
a.site-button.button-primary,.project-back a.site-button.button-primary,
button.site-button.button-primary,.site-header nav a[aria-current="page"]{
  background:#262829;border-color:#262829;color:#f5f5f2;
}
a.site-button.button-primary:hover,.project-back a.site-button.button-primary:hover,
button.site-button.button-primary:hover,.site-header nav a[aria-current="page"]:hover{
  background:#454849;border-color:#454849;
}
a.site-button:active,button.site-button:active{transform:translateY(0)}
.site-header nav a.nav-button{border-color:#aeb5b1;background:transparent;color:#292d2c}
.site-header nav a.nav-button:hover{background:#e7e9e7;color:#262829;text-decoration:none}
.site-header nav a[aria-current="page"]{color:#fff}
.site-footer{border-top:1px solid var(--line)}
.site-footer .footer-name{color:var(--ink)}

/* The home remains a single self-introduction, with navigation below the name. */
.intro-home{background:#1c1e1f;color:#f3f4f1}
.intro-home .site-header{min-height:82px;border-color:#444849}
.intro-home .wordmark{color:#f3f4f1}
.intro-home .name-mark{background:#bfc3c0}
.intro-home-main{position:relative;overflow:hidden;background:#1c1e1f}
.intro-home-main::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#878d89;
}
.intro-home-content{position:relative;isolation:isolate;padding-block:64px 70px}
.intro-home-content::before{
  content:"";position:absolute;z-index:-1;right:2%;top:12%;width:120px;height:120px;
  border-top:2px solid #4c5150;border-right:2px solid #4c5150;transform:rotate(12deg);
}
.intro-home-content .eyebrow{font-size:14px;margin-bottom:23px;color:#cbd0cc}
.intro-home-content .eyebrow span{padding-inline:8px;color:#828a85}
.intro-home-content h1{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  font-size:clamp(56px,7vw,98px);line-height:1.08;letter-spacing:0;margin:0;font-weight:800}
.intro-home-content h1 span{font-size:.53em;font-weight:500;color:#aeb6b0}
.intro-home-content h1 strong{font-weight:800;position:relative;z-index:0}
.intro-home-content h1 strong::after{
  content:"";position:absolute;z-index:-1;left:0;right:-.08em;bottom:.08em;height:.09em;background:#858b88;
}
.intro-home .intro-home-actions{margin-top:28px;margin-bottom:43px;gap:12px}
.intro-home-actions .site-button{min-width:0;min-height:56px;padding:13px 21px;font-size:16px}
.intro-home-actions .site-button.button-primary{min-width:206px}
.intro-home-bio{max-width:685px;border-top:1px solid #4b504e;padding-top:23px}
.intro-home .intro-home-school{font-size:18px;font-weight:700;margin-bottom:12px;color:#ecede9}
.intro-home-description{font-size:16px;line-height:1.75;color:#b8c0bb;max-width:625px}
.intro-home-description+.intro-home-description{margin-top:8px}
.intro-home-signature{position:absolute;z-index:-1;right:0;bottom:4%;font-size:clamp(135px,18vw,280px);
  font-family:Arial,sans-serif;font-weight:900;line-height:1;letter-spacing:0;color:#313536;user-select:none;pointer-events:none}
.intro-home-footer{border-color:#444849;background:#151718;color:#bfc5c0}
.intro-home-footer p{color:inherit}
.intro-home-actions a.site-button{background:transparent;border-color:#707774;color:#f0f1ee}
.intro-home-actions a.site-button:hover{background:#343839;border-color:#b9bfba;color:#f5f5f2}
.intro-home-actions a.site-button.button-primary{background:#efefec;border-color:#efefec;color:#1c1e1f}
.intro-home-actions a.site-button.button-primary:hover{background:#d8dcd8;border-color:#d8dcd8;color:#1c1e1f}
.intro-home a:focus-visible{outline-color:#e2e5e0}

/* Give the single live project room to lead, while leaving space for future work. */
.listing-hero{padding-block:70px 55px}
.listing-hero .eyebrow{margin-bottom:8px}
.listing-hero h1{font-size:clamp(46px,6vw,76px);letter-spacing:0;line-height:1.15}
.listing-hero>p:last-child{color:#565b59;max-width:36em;margin-top:18px}
.listing-section{padding-bottom:90px}
.portfolio-grid{grid-template-columns:1fr;gap:20px;margin-top:0}
.portfolio-card{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);
  min-height:410px;border-radius:5px;border-color:#cfd3d0;background:#fbfbfa}
.portfolio-card:hover{border-color:#848a86;box-shadow:0 18px 42px #22242412}
.portfolio-cover{aspect-ratio:auto;min-height:410px;background:#e9ebea}
.portfolio-cover img{object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.portfolio-card:hover .portfolio-cover img{transform:scale(1.035)}
.cover-caption{background:#f7f8f6;color:#383c3a}
.project-phase{color:#414745;background:#e9ebe9}
.portfolio-content{display:flex;flex-direction:column;justify-content:center;padding:40px 44px}
.portfolio-meta{margin-bottom:30px;color:#5d6460}
.portfolio-content h3{font-size:clamp(29px,3vw,42px);line-height:1.25}
.portfolio-content .project-subname{color:#4e5450;font-size:17px;margin:10px 0 20px}
.portfolio-content>p:not(.project-subname){font-size:16px;line-height:1.8}
.portfolio-bottom{margin-top:32px;padding-top:23px}
.upcoming-project{min-height:150px;align-items:flex-start;text-align:left;border-radius:5px;
  border-color:#bdc3be;flex-direction:row;gap:24px;padding:35px 42px;background:#eceeeb}
.upcoming-project .future-mark{font-size:42px;line-height:1;color:#626865}
.upcoming-project h3{margin-top:3px}
.upcoming-project p{margin:6px 0 0}

/* Shared rhythm on the independent About, Contact and project pages. */
.standalone-intro h1,.project-hero h1{letter-spacing:0}
.profile-section,.contact-content,.project-section,.visual-section,.contribution-panel{border-color:var(--line)}
.project-facts{border-top:1px solid var(--line);padding-top:25px}
.photoreal-grid img,.concept-figure img,.concept-hero img{border-radius:5px}
.motion-stage svg{border-radius:5px}

@media(max-width:900px){
  .intro-home-signature{right:-4%;font-size:150px;opacity:.7}
  .portfolio-card{grid-template-columns:1fr}
  .portfolio-cover{min-height:0;aspect-ratio:3/2}
  .portfolio-content{padding:32px}
}
@media(max-width:650px){
  .intro-home .site-header{min-height:70px}
  .intro-home-main::before{width:5px}
  .intro-home-content{padding-block:48px 54px}
  .intro-home-content::before{right:2%;top:6%;width:58px;height:58px}
  .intro-home-content h1{font-size:clamp(52px,13vw,76px)}
  .intro-home .intro-home-actions{margin-top:25px;margin-bottom:32px;gap:9px}
  .intro-home-actions .site-button.button-large{min-height:54px;font-size:15px;padding:10px 12px}
  .intro-home .intro-home-school{font-size:16px}
  .intro-home-description{font-size:15px}
  .intro-home-signature{font-size:110px;right:-3%;bottom:1%;opacity:.35}
  .listing-hero{padding-block:48px 38px}
  .portfolio-cover{aspect-ratio:3/2}
  .portfolio-content{padding:27px 22px}
  .portfolio-meta{margin-bottom:18px}
  .upcoming-project{padding:25px 22px;min-height:0;gap:16px}
  .upcoming-project .future-mark{font-size:32px}
}
@media(prefers-reduced-motion:reduce){
  .portfolio-cover img,a.site-button,button.site-button{transition:none}
  .portfolio-card:hover .portfolio-cover img{transform:none}
}
.site-header nav a.nav-button[aria-current="page"]{background:#262829;border-color:#262829;color:#f5f5f2}
.site-header nav a.nav-button[aria-current="page"]:hover{background:#454849;color:#f5f5f2}
.intro-home-footer{width:100%;max-width:none;padding-inline:max(40px,calc((100vw - var(--max))/2))}
@media(max-width:650px){
  .intro-home-footer{padding-inline:20px}
  .upcoming-project{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:15px;row-gap:0;align-items:start}
  .upcoming-project .future-mark{grid-row:1/3}
  .upcoming-project p{grid-column:2;margin-top:6px}
}
.site-button:focus-visible,.contact-content button.site-button:focus-visible,
.motion-controls select:focus-visible,.motion-controls input:focus-visible,.motion-timeline input:focus-visible{
  outline:3px solid #545a57;outline-offset:4px;
}
.intro-home .site-button:focus-visible{outline-color:#e2e5e0}
.motion-speed-label select{border-color:#aeb5b1;background:#fbfbfa}
.motion-timeline input,.motion-loop input{accent-color:#3a3d3e}
.image-viewer{border-color:#bfc4c0;background:#f2f3f1;border-radius:6px}
.image-viewer::backdrop{background:#111314d9}
.viewer-toolbar,.viewer-hint{background:#fbfbfa}
.project-why{background:#252728;color:#f2f3f1}
.project-why-inner{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:80px;padding-block:62px 68px}
.project-why h2{font-size:clamp(32px,3.3vw,46px);line-height:1.3}
.project-why-copy{min-width:0;color:#d5d9d5;font-size:15px;line-height:1.9}
.project-why-copy p+p{margin-top:16px}
.project-why-copy .why-lead{color:#f4f5f2;font-size:clamp(19px,2vw,23px);line-height:1.65;font-weight:600}
.project-why-copy .why-note{border-top:1px solid #4a4e4b;padding-top:15px;color:#afb8b1;font-size:12px}
@media(max-width:750px){
  .project-why-inner{grid-template-columns:1fr;gap:25px;padding-block:43px 48px}
  .project-why h2{font-size:32px}
}

/* Skill-enhanced polish: monochrome editorial system + restrained motion */
:root{
  --page:#f4f5f2;
  --paper:#fbfbfa;
  --ink:#252829;
  --muted:#606764;
  --blue:#343837;
  --blue-light:#e7eae7;
  --line:#d2d6d2;
  --soft:#eceeeb;
  --max:1120px;
  --motion-fast:180ms;
  --motion-base:360ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth;scroll-padding-top:36px}
body{background:var(--page);color:var(--ink)}
body:not(.intro-home){background:var(--page)}
a,button,.site-button{cursor:pointer}
.site-header{position:relative;z-index:10;animation:site-header-in .65s var(--ease-out) both}
.site-header .wordmark{letter-spacing:.02em}
.site-header .name-mark{background:#252829;animation:mark-breathe 3.2s ease-in-out infinite}
.site-button{transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
.site-button:hover{transform:translateY(-2px)}
.site-button:active{transform:translateY(0) scale(.98)}
.portfolio-card,.upcoming-project,.concept-figure,.concept-hero,.photoreal-grid,.project-section,.visual-section,.contribution-panel,.profile-section,.contact-content{will-change:transform}
.portfolio-card{transition:transform .55s var(--ease-out),border-color .3s ease,box-shadow .55s var(--ease-out)}
.portfolio-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(27,31,29,.12)}
.portfolio-cover{overflow:hidden}
.portfolio-cover img{transition:transform .8s var(--ease-out),filter .6s ease}
.portfolio-card:hover .portfolio-cover img{transform:scale(1.045);filter:contrast(1.03) saturate(.92)}
.intro-home-content{animation:home-content-in .9s var(--ease-out) .08s both}
.intro-home-content::before{animation:orbit-mark 12s linear infinite}
.intro-home-signature{animation:signature-in 1.1s var(--ease-out) .24s both}
.intro-home-bio{animation:rule-in .8s var(--ease-out) .35s both}
.intro-home-actions .site-button{animation:button-in .65s var(--ease-out) both}
.intro-home-actions .site-button:nth-child(2){animation-delay:.08s}
.intro-home-actions .site-button:nth-child(3){animation-delay:.16s}

/* Scroll reveal is opt-in from JS, so pages remain fully readable without scripts. */
.motion-enabled [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .58s var(--ease-out),transform .58s var(--ease-out)}
.motion-enabled [data-reveal].is-visible{opacity:1;transform:none}
.motion-enabled [data-reveal][data-reveal-delay="1"]{transition-delay:80ms}
.motion-enabled [data-reveal][data-reveal-delay="2"]{transition-delay:160ms}
.motion-enabled [data-reveal][data-reveal-delay="3"]{transition-delay:240ms}

.scroll-progress{position:fixed;inset:0 0 auto 0;height:2px;background:#252829;transform:scaleX(0);transform-origin:left center;z-index:100;pointer-events:none}
.page-transition{position:fixed;inset:0;background:#252829;color:#f4f5f2;display:grid;place-items:center;z-index:200;transform:translateY(100%);pointer-events:none;transition:transform .32s var(--ease-out)}
.page-transition span{font-size:clamp(28px,5vw,56px);font-weight:800;letter-spacing:.12em;opacity:.8}
.page-transition.is-active{transform:translateY(0)}

@keyframes site-header-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes home-content-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes button-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rule-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes signature-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes mark-breathe{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
@keyframes orbit-mark{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@media(max-width:650px){
  .site-header{animation-duration:.45s}
  .portfolio-card:hover{transform:translateY(-3px)}
  .page-transition span{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .motion-enabled [data-reveal]{opacity:1;transform:none}
  .portfolio-card:hover,.site-button:hover,.site-button:active{transform:none}
}

/* Keep the first screen readable in screenshots and on slower devices. */
.intro-home-content{animation:none}
.intro-home-actions .site-button{animation:none}
.page-transition{visibility:hidden;opacity:0;transform:translateY(0);transition:opacity .18s ease,visibility 0s linear .18s}
.page-transition.is-active{visibility:visible;opacity:1;transform:translateY(0);transition:opacity .18s ease,visibility 0s}

/* The name is intentionally clean without the decorative underline. */
.intro-home-content h1 strong::after{display:none!important}


/* Remove the small mark after the wordmark so KelanG stands alone. */
.site-header .name-mark{display:none}

/* Button navigation uses an abstract moving mark instead of a name label. */
.page-transition .transition-orbit{position:relative;display:block;width:72px;height:72px;border:1px solid #f4f5f2;border-radius:50%;opacity:.92;animation:transition-orbit-in .24s var(--ease-out) both}
.page-transition .transition-orbit::before,.page-transition .transition-orbit::after{content:"";position:absolute;inset:13px;border:1px solid #9da49f;border-radius:50%;animation:transition-orbit-spin .72s linear infinite}
.page-transition .transition-orbit::after{inset:25px;border-color:#f4f5f2;animation-direction:reverse;animation-duration:.48s}
.page-transition .transition-orbit i{position:absolute;left:50%;top:7px;width:1px;height:58px;background:#f4f5f2;transform-origin:50% 29px;opacity:.78}
.page-transition .transition-orbit i:nth-child(1){transform:rotate(0deg)}
.page-transition .transition-orbit i:nth-child(2){transform:rotate(60deg)}
.page-transition .transition-orbit i:nth-child(3){transform:rotate(120deg)}
.page-transition[data-variant="1"] .transition-orbit{transform:rotate(45deg)}
.page-transition[data-variant="2"] .transition-orbit{transform:rotate(-28deg);border-radius:16px}
@keyframes transition-orbit-in{from{opacity:0;transform:scale(.72)}to{opacity:.92;transform:scale(1)}}
@keyframes transition-orbit-spin{to{transform:rotate(360deg)}}
.page-transition[data-variant="1"] .transition-orbit::before{animation-duration:.56s}
.page-transition[data-variant="2"] .transition-orbit::after{animation-duration:.38s}

/* Refined transition: a single metallic bead orbiting a suspended ring. */
.page-transition .transition-orbit{position:relative;display:block;width:92px;height:92px;border:0;border-radius:50%;opacity:1;transform-style:preserve-3d;perspective:420px;animation:transition-orbit-enter .28s var(--ease-out) both}
.page-transition .transition-orbit::before{content:"";position:absolute;inset:8px;border:1px solid rgba(244,245,242,.78);border-radius:50%;transform:rotateX(66deg) rotateZ(0deg);transform-style:preserve-3d;animation:transition-ring-spin .68s cubic-bezier(.45,.05,.25,.95) both}
.page-transition .transition-orbit::after{content:"";position:absolute;inset:36px;border:1px solid rgba(244,245,242,.68);border-radius:50%;box-shadow:0 0 22px rgba(244,245,242,.16);animation:transition-core-breathe .68s ease-in-out both}
.page-transition .transition-track{position:absolute;inset:0;display:block;transform-style:preserve-3d;animation:transition-track-spin .6s cubic-bezier(.35,.05,.2,1) both}
.page-transition .transition-bead{position:absolute;left:50%;top:1px;display:block;width:13px;height:13px;border-radius:50%;background:#f4f5f2;box-shadow:0 0 0 4px rgba(244,245,242,.10),0 0 24px rgba(244,245,242,.65);transform:translateX(-50%);animation:transition-bead-pulse .34s ease-in-out infinite alternate}
.page-transition .transition-core{position:absolute;inset:42px;display:block;border-radius:50%;background:#f4f5f2;box-shadow:0 0 24px rgba(244,245,242,.35)}
.page-transition[data-variant="1"] .transition-orbit{transform:rotate(18deg) scale(.94)}
.page-transition[data-variant="2"] .transition-orbit{transform:rotate(-22deg) scale(1.06)}
@keyframes transition-orbit-enter{from{opacity:0;transform:scale(.56) rotate(-18deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes transition-ring-spin{from{transform:rotateX(66deg) rotateZ(-70deg)}to{transform:rotateX(66deg) rotateZ(290deg)}}
@keyframes transition-track-spin{from{transform:rotateZ(-120deg) rotateY(-16deg)}to{transform:rotateZ(240deg) rotateY(16deg)}}
@keyframes transition-core-breathe{0%,100%{opacity:.42;transform:scale(.78)}50%{opacity:.95;transform:scale(1.08)}}
@keyframes transition-bead-pulse{from{transform:translateX(-50%) scale(.86)}to{transform:translateX(-50%) scale(1.12)}}

/* Final transition direction: a restrained camera-aperture reveal. */
.page-transition .transition-aperture{position:relative;display:block;width:104px;height:104px;transform:rotate(45deg);animation:aperture-enter .34s var(--ease-out) both}
.page-transition .transition-aperture::before{content:"";position:absolute;inset:14px;border:1px solid rgba(244,245,242,.78);border-radius:50%;animation:aperture-ring .58s cubic-bezier(.16,1,.3,1) both}
.page-transition .transition-aperture::after{content:"";position:absolute;inset:39px;background:#f4f5f2;border-radius:50%;box-shadow:0 0 28px rgba(244,245,242,.3);animation:aperture-core .58s cubic-bezier(.16,1,.3,1) both}
.page-transition .transition-aperture i{position:absolute;left:50%;top:5px;width:1px;height:94px;background:linear-gradient(to bottom,transparent,#f4f5f2 22%,#f4f5f2 78%,transparent);transform-origin:50% 47px;opacity:.74}
.page-transition .transition-aperture i:nth-child(1){transform:rotate(0deg) scaleY(.7);animation:aperture-blade-a .56s cubic-bezier(.16,1,.3,1) both}
.page-transition .transition-aperture i:nth-child(2){transform:rotate(45deg) scaleY(.7);animation:aperture-blade-b .56s cubic-bezier(.16,1,.3,1) both}
.page-transition .transition-aperture i:nth-child(3){transform:rotate(90deg) scaleY(.7);animation:aperture-blade-a .56s cubic-bezier(.16,1,.3,1) .02s both}
.page-transition .transition-aperture i:nth-child(4){transform:rotate(135deg) scaleY(.7);animation:aperture-blade-b .56s cubic-bezier(.16,1,.3,1) .02s both}
.page-transition .transition-aperture b{position:absolute;left:8px;top:51px;width:88px;height:1px;background:#f4f5f2;transform:scaleX(0);transform-origin:left center;animation:aperture-scan .42s cubic-bezier(.16,1,.3,1) .06s both}
.page-transition[data-variant="1"] .transition-aperture{transform:rotate(-35deg) scale(.92)}
.page-transition[data-variant="2"] .transition-aperture{transform:rotate(12deg) scale(1.05)}
@keyframes aperture-enter{from{opacity:0;transform:rotate(45deg) scale(.38)}to{opacity:1;transform:rotate(45deg) scale(1)}}
@keyframes aperture-ring{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes aperture-core{from{opacity:0;transform:scale(.2)}65%{opacity:1;transform:scale(1.08)}to{opacity:.92;transform:scale(1)}}
@keyframes aperture-blade-a{from{opacity:0;transform:rotate(0deg) scaleY(.12)}to{opacity:.74;transform:rotate(0deg) scaleY(.7)}}
@keyframes aperture-blade-b{from{opacity:0;transform:rotate(45deg) scaleY(.12)}to{opacity:.74;transform:rotate(45deg) scaleY(.7)}}
@keyframes aperture-scan{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.86}}
.page-transition[data-variant="1"] .transition-aperture i:nth-child(1),.page-transition[data-variant="1"] .transition-aperture i:nth-child(3){animation-name:aperture-blade-b}
.page-transition[data-variant="2"] .transition-aperture b{animation-delay:0s}
@keyframes aperture-enter-v1{from{opacity:0;transform:rotate(-65deg) scale(.38)}to{opacity:1;transform:rotate(-35deg) scale(.92)}}
@keyframes aperture-enter-v2{from{opacity:0;transform:rotate(42deg) scale(.38)}to{opacity:1;transform:rotate(12deg) scale(1.05)}}
.page-transition[data-variant="1"] .transition-aperture{animation-name:aperture-enter-v1}
.page-transition[data-variant="2"] .transition-aperture{animation-name:aperture-enter-v2}

/* Softer page transition: slow gradient veil with a quiet light sweep. */
.page-transition{background:linear-gradient(135deg,#151717 0%,#252928 42%,#4a504d 100%);background-size:180% 180%;transition:opacity .48s cubic-bezier(.22,.61,.36,1),visibility 0s linear .48s;overflow:hidden}
.page-transition::before{content:"";position:absolute;inset:-18%;background:radial-gradient(circle at 50% 50%,rgba(244,245,242,.12),transparent 24%),radial-gradient(circle at 20% 80%,rgba(161,169,164,.12),transparent 32%);filter:blur(18px);opacity:0;transform:scale(.9);animation:transition-glow-in .8s cubic-bezier(.16,1,.3,1) both;pointer-events:none}
.page-transition::after{content:"";position:absolute;left:-35%;top:0;width:26%;height:100%;background:linear-gradient(90deg,transparent,rgba(244,245,242,.13),transparent);transform:skewX(-16deg);opacity:0;animation:transition-sheen .72s cubic-bezier(.16,1,.3,1) .08s both;pointer-events:none}
.page-transition.is-active{background-position:100% 0;visibility:visible;opacity:1;transition:opacity .48s cubic-bezier(.22,.61,.36,1),visibility 0s}
.page-transition .transition-aperture{z-index:1;opacity:.72;filter:drop-shadow(0 12px 28px rgba(0,0,0,.16));animation-duration:.6s}
@keyframes transition-glow-in{0%{opacity:0;transform:scale(.82)}45%{opacity:.9;transform:scale(1)}100%{opacity:.55;transform:scale(1.06)}}
@keyframes transition-sheen{0%{left:-35%;opacity:0}20%{opacity:.85}100%{left:125%;opacity:0}}
@media(prefers-reduced-motion:reduce){.page-transition::before,.page-transition::after{animation:none}.page-transition .transition-aperture{animation:none}}
/* Hold the transition at its first frame until a link is actually activated. */
.page-transition:not(.is-active)::before,.page-transition:not(.is-active)::after,.page-transition:not(.is-active) .transition-aperture,.page-transition:not(.is-active) .transition-aperture::before,.page-transition:not(.is-active) .transition-aperture::after,.page-transition:not(.is-active) .transition-aperture i,.page-transition:not(.is-active) .transition-aperture b{animation-play-state:paused}
.page-transition.is-active::before,.page-transition.is-active::after,.page-transition.is-active .transition-aperture,.page-transition.is-active .transition-aperture::before,.page-transition.is-active .transition-aperture::after,.page-transition.is-active .transition-aperture i,.page-transition.is-active .transition-aperture b{animation-play-state:running}

/* Final fallback direction: a clean circular spinner with a slow gradient veil. */
.page-transition{background:linear-gradient(135deg,#151717 0%,#252928 48%,#515853 100%);background-size:160% 160%;transition:opacity .6s cubic-bezier(.22,.61,.36,1),visibility 0s linear .6s}
.page-transition.is-active{background-position:100% 0;transition:opacity .6s cubic-bezier(.22,.61,.36,1),visibility 0s}
.page-transition::before{inset:-10%;background:radial-gradient(circle at 50% 48%,rgba(244,245,242,.08),transparent 24%),radial-gradient(circle at 18% 82%,rgba(172,180,175,.11),transparent 34%);filter:blur(20px);animation:spinner-veil-in .9s ease both}
.page-transition::after{left:-32%;width:22%;background:linear-gradient(90deg,transparent,rgba(244,245,242,.12),transparent);animation:spinner-sheen .85s cubic-bezier(.16,1,.3,1) .08s both}
.page-transition .transition-spinner{position:relative;z-index:1;display:block;width:78px;height:78px;border:1px solid rgba(244,245,242,.28);border-radius:50%;box-shadow:0 12px 34px rgba(0,0,0,.15);animation:spinner-enter .7s cubic-bezier(.16,1,.3,1) both}
.page-transition .transition-spinner::before{content:"";position:absolute;inset:7px;border:1px solid transparent;border-top-color:#f4f5f2;border-right-color:rgba(244,245,242,.72);border-radius:50%;animation:spinner-rotate 1.05s cubic-bezier(.62,.05,.36,.95) infinite}
.page-transition .transition-spinner::after{content:"";position:absolute;inset:18px;border:1px solid rgba(244,245,242,.22);border-radius:50%;animation:spinner-rotate-reverse 1.55s linear infinite}
.page-transition .transition-spinner i{position:absolute;left:50%;top:50%;display:block;width:7px;height:7px;border-radius:50%;background:#f4f5f2;box-shadow:0 0 18px rgba(244,245,242,.45);transform:translate(-50%,-50%);animation:spinner-pulse .85s ease-in-out infinite alternate}
.page-transition[data-variant="1"] .transition-spinner{transform:scale(.93)}
.page-transition[data-variant="2"] .transition-spinner{transform:scale(1.06)}
@keyframes spinner-enter{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
@keyframes spinner-rotate{to{transform:rotate(360deg)}}
@keyframes spinner-rotate-reverse{to{transform:rotate(-360deg)}}
@keyframes spinner-pulse{from{opacity:.42;transform:translate(-50%,-50%) scale(.78)}to{opacity:1;transform:translate(-50%,-50%) scale(1.14)}}
@keyframes spinner-veil-in{from{opacity:0;transform:scale(.88)}to{opacity:.86;transform:scale(1)}}
@keyframes spinner-sheen{from{left:-32%;opacity:0}22%{opacity:.72}to{left:124%;opacity:0}}
.page-transition:not(.is-active) .transition-spinner,.page-transition:not(.is-active) .transition-spinner::before,.page-transition:not(.is-active) .transition-spinner::after,.page-transition:not(.is-active) .transition-spinner i{animation-play-state:paused}
.page-transition.is-active .transition-spinner,.page-transition.is-active .transition-spinner::before,.page-transition.is-active .transition-spinner::after,.page-transition.is-active .transition-spinner i{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.page-transition .transition-spinner,.page-transition .transition-spinner::before,.page-transition .transition-spinner::after,.page-transition .transition-spinner i{animation:none}}

/* Destination pages arrive softly after the transition veil. */
.page-enter > .site-header,.page-enter > main,.page-enter > .site-footer{opacity:0;transform:translateY(16px)}
.page-enter.page-enter-active > .site-header,.page-enter.page-enter-active > main,.page-enter.page-enter-active > .site-footer{opacity:1;transform:none;transition:opacity .78s cubic-bezier(.16,1,.3,1),transform .78s cubic-bezier(.16,1,.3,1)}
.page-enter.page-enter-active > main{transition-delay:.05s}
.page-enter.page-enter-active > .site-footer{transition-delay:.1s}
@media(prefers-reduced-motion:reduce){.page-enter > .site-header,.page-enter > main,.page-enter > .site-footer{opacity:1;transform:none}}

/* 3D concept stage: a monochrome sensor constellation for the AI fitness project. */
.sensor-3d-section{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:70px;padding-block:76px;border-top:1px solid var(--line);align-items:center}
.sensor-3d-copy h2{font-size:clamp(30px,3.2vw,46px);line-height:1.28;margin-bottom:22px}
.sensor-3d-copy>p:not(.eyebrow){max-width:430px;color:#575e5a;line-height:1.85}
.sensor-3d-copy .small-note{margin-top:18px;color:#7a817c;font-size:12px}
.sensor-3d-stage{position:relative;min-height:440px;border-radius:10px;background:linear-gradient(145deg,#171a1a 0%,#252928 54%,#343b37 100%);overflow:hidden;isolation:isolate;perspective:1000px;box-shadow:0 24px 70px rgba(26,30,28,.17)}
.sensor-3d-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(242,244,239,.12),transparent 30%),linear-gradient(110deg,transparent 30%,rgba(255,255,255,.04),transparent 68%);pointer-events:none}
.sensor-stage-grid{position:absolute;inset:14% 9% 12%;border:1px solid rgba(226,231,226,.16);border-radius:50%;transform:rotateX(66deg) rotateZ(-16deg);box-shadow:0 0 0 28px rgba(226,231,226,.025),0 0 0 57px rgba(226,231,226,.02);animation:sensor-grid-breathe 5s ease-in-out infinite}
.sensor-body-core{position:absolute;left:50%;top:50%;width:82px;height:188px;transform:translate(-50%,-50%) translateZ(26px);border:1px solid rgba(244,245,242,.72);border-radius:44% 44% 38% 38% / 22% 22% 48% 48%;box-shadow:0 0 36px rgba(232,237,232,.12);animation:sensor-body-float 4.6s ease-in-out infinite}
.sensor-body-core::before{content:"";position:absolute;left:50%;top:13%;width:22px;height:30px;transform:translateX(-50%);border:1px solid rgba(244,245,242,.62);border-radius:50%}
.sensor-body-core::after{content:"";position:absolute;left:50%;top:34%;width:1px;height:45%;background:linear-gradient(to bottom,rgba(244,245,242,.64),transparent)}
.sensor-body-core span{position:absolute;left:18%;right:18%;top:39%;height:1px;background:rgba(244,245,242,.5);box-shadow:0 47px rgba(244,245,242,.42)}
.sensor-body-core i{position:absolute;left:25%;right:25%;bottom:15%;height:42px;border-left:1px solid rgba(244,245,242,.44);border-right:1px solid rgba(244,245,242,.44);transform:skewX(-8deg)}
.sensor-ring{position:absolute;left:50%;top:50%;width:304px;height:304px;transform:translate(-50%,-50%) rotateX(67deg) rotateZ(-14deg);transform-style:preserve-3d;animation:sensor-ring-spin 18s linear infinite}
.sensor-ring::before{content:"";position:absolute;inset:0;border:1px solid rgba(244,245,242,.38);border-radius:50%;box-shadow:inset 0 0 28px rgba(244,245,242,.05),0 0 18px rgba(244,245,242,.06)}
.sensor-node{position:absolute;left:50%;top:50%;display:block;width:18px;height:18px;margin:-9px;border:1px solid #f4f5f2;border-radius:4px;background:#737c76;box-shadow:0 0 0 5px rgba(244,245,242,.08),0 0 22px rgba(244,245,242,.28);transform:rotate(var(--node-angle)) translateY(-152px) rotate(calc(var(--node-angle) * -1));transform-style:preserve-3d}
.sensor-node::after{content:"";position:absolute;inset:5px;background:#f4f5f2;border-radius:50%;opacity:.72}
.sensor-node:nth-child(1){--node-angle:0deg}.sensor-node:nth-child(2){--node-angle:60deg}.sensor-node:nth-child(3){--node-angle:120deg}.sensor-node:nth-child(4){--node-angle:180deg}.sensor-node:nth-child(5){--node-angle:240deg}.sensor-node:nth-child(6){--node-angle:300deg}
.sensor-stage-label{position:absolute;left:24px;bottom:22px;color:#c5ccc5;font:600 10px/1.2 Arial,sans-serif;letter-spacing:.22em}
@keyframes sensor-ring-spin{to{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(346deg)}}
@keyframes sensor-body-float{0%,100%{transform:translate(-50%,-50%) translateZ(20px)}50%{transform:translate(-50%,-52%) translateZ(36px)}}
@keyframes sensor-grid-breathe{0%,100%{opacity:.68;transform:rotateX(66deg) rotateZ(-16deg) scale(.98)}50%{opacity:1;transform:rotateX(66deg) rotateZ(-16deg) scale(1.02)}}
@media(max-width:800px){.sensor-3d-section{grid-template-columns:1fr;gap:34px;padding-block:54px}.sensor-3d-stage{min-height:370px}.sensor-ring{width:260px;height:260px}.sensor-node{transform:rotate(var(--node-angle)) translateY(-130px) rotate(calc(var(--node-angle) * -1))}}
@media(prefers-reduced-motion:reduce){.sensor-stage-grid,.sensor-body-core,.sensor-ring{animation:none}.sensor-ring{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(-14deg)}}

/* Pointer-led depth for project visuals: small angle, soft return, no spectacle. */
.tilt-target{--tilt-x:0deg;--tilt-y:0deg;--tilt-lift:0px;--glow-x:50%;--glow-y:50%;position:relative;transform:perspective(1100px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateY(var(--tilt-lift));transform-style:preserve-3d;transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s ease;will-change:transform}
.tilt-target::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--glow-x) var(--glow-y),rgba(255,255,255,.12),transparent 30%);opacity:0;pointer-events:none;transition:opacity .42s ease;mix-blend-mode:screen}
.tilt-target:hover{--tilt-lift:-4px;box-shadow:0 24px 60px rgba(26,30,28,.14)}
.tilt-target:hover::after{opacity:1}
.portfolio-card.tilt-target{--tilt-lift:-6px}
.photoreal-grid figure.tilt-target,.concept-hero.tilt-target,.concept-figure.tilt-target{--tilt-lift:-3px}
@media(prefers-reduced-motion:reduce){.tilt-target{transform:none!important;transition:none!important;will-change:auto}.tilt-target::after{display:none}}