:root{color-scheme:dark;--bg:#0b0b0f;--text:#f1f1f6;--muted:#a1a1ae;--line:#282830;--accent:#b9b0ff}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,"Microsoft YaHei",sans-serif;font-size:16px;line-height:1.7}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}::selection{background:#b9b0ff;color:#14131b}.topbar{position:sticky;top:0;z-index:20;background:#0b0b0fd9;backdrop-filter:blur(18px);border-bottom:1px solid #ffffff0a}.topbar nav{min-height:80px;display:flex;justify-content:center;align-items:center;gap:48px;margin:auto;padding:12px 24px;font-size:14px}.logo{display:flex;gap:12px;align-items:center;font-size:25px;font-weight:800}.logo span{font-size:13px;letter-spacing:2px;font-weight:400}.topbar a:hover{color:var(--accent)}.motion{border:1px solid #ffffff20;border-radius:30px;padding:7px 12px;background:none;font-size:12px;color:var(--muted)}.intro{position:relative;isolation:isolate;overflow:hidden;min-height:790px;background:radial-gradient(ellipse at 76% 42%,#221b4333,transparent 48%),#09090c}.intro canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.intro-inner{max-width:1320px;min-height:720px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;padding:30px 60px 50px}.intro-copy{text-align:center;padding-top:30px}.eyes{display:flex;gap:10px;justify-content:center;align-items:center;margin-bottom:22px}.eyes i{display:block;background:#fff;width:42px;height:49px;border-radius:50%;position:relative;transform:rotate(8deg)}.eyes b{position:absolute;top:14px;left:19px;width:19px;height:23px;background:#09090d;border-radius:50%;transform:translate(var(--eye-x,0px),var(--eye-y,0px))}.eyes b::after{content:"";position:absolute;width:5px;height:5px;right:2px;top:2px;border-radius:50%;background:#fff}.hello{font-family:Georgia,serif;font-style:italic;font-size:26px;margin:0 0 25px}.hello span{color:var(--accent);font-style:normal;margin-left:10px}.intro h1{font-size:clamp(33px,3.2vw,48px);line-height:1.4;letter-spacing:-1px;margin:0;font-weight:650}.light-line{width:150px;height:2px;margin:30px auto;background:linear-gradient(90deg,#6953f2,#ebdfff);box-shadow:0 0 14px #8867ff80}.description{font-size:16px;line-height:1.95;color:#b5b3c0;margin:0}.intro-meta{display:flex;flex-direction:column;gap:2px;font-size:12px;letter-spacing:1px;color:#898594;margin:24px 0}.work-link{font-size:14px;display:inline-flex;gap:34px;padding:10px 0;border-bottom:1px solid #656075}.badge-area{height:650px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:54px;perspective:1000px}.badge-rig{position:relative;width:300px;transform-origin:50% -180px;transform:rotate(var(--swing,-7deg));will-change:transform}.lanyard{position:absolute;bottom:calc(100% + 37px);left:calc(50% - 20px);width:40px;height:280px;background:linear-gradient(90deg,#9c97af,#f7f5ff 18%,#c7b0ee 52%,#f6f3ff 75%,#9198a6);border:1px solid #fff8;box-shadow:3px 0 6px #0004;transform:rotate(3deg);transform-origin:bottom;overflow:hidden}.lanyard span{position:absolute;writing-mode:vertical-rl;left:4px;top:0;color:#221f2c;font-size:17px;font-weight:750;letter-spacing:3px;white-space:nowrap}.metal-loop{position:absolute;bottom:calc(100% - 16px);left:calc(50% - 12px);width:24px;height:62px;border:5px solid #c4c4cd;border-radius:45%;background:linear-gradient(110deg,transparent,#ffffff18);box-shadow:inset 2px 0 3px #111,2px 0 2px #fff8;z-index:2}.badge{position:relative;display:block;width:300px;padding:26px 21px 20px;background:linear-gradient(145deg,#e1ddce,#fbf6da 38%,#d6cef1);border:1px solid #fff9;border-radius:13px;color:#17141f;text-align:left;box-shadow:10px 22px 50px #000b,3px 4px 0 #75707a;transform-style:preserve-3d;touch-action:none;cursor:grab;user-select:none}.badge:active{cursor:grabbing}.badge::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(125deg,#fff5,transparent 25%,transparent 62%,#ae92ff22)}.badge-slot{display:block;width:54px;height:7px;margin:-9px auto 18px;border-radius:10px;background:#151219;box-shadow:0 1px #fff}.badge-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.badge-top b{font-size:28px;letter-spacing:-2px}.badge-top>span{font-size:9px;line-height:1.4;letter-spacing:1px;text-align:right}.photo-wrap{display:block;position:relative;height:247px;overflow:hidden;border:1px solid #38303e25;border-radius:3px;background:#e0e1de}.photo-wrap img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;pointer-events:none;filter:saturate(.68)}.photo-label{position:absolute;bottom:0;left:0;right:0;text-align:center;background:#141019db;color:#eeebef;font-size:9px;padding:5px 0;letter-spacing:1.5px}.badge-name{display:flex;align-items:center;justify-content:space-between;margin:18px 0 15px}.badge-name strong{font-size:29px;line-height:1.2}.badge-name>span{font-size:11px;letter-spacing:1px}.badge-bottom{display:grid;grid-template-columns:1fr 68px;align-items:center;gap:8px;border-top:1px solid #14101955;padding-top:12px}.badge-bottom>span:first-child{font-size:10px;font-weight:600}.barcode{height:22px;background:repeating-linear-gradient(90deg,#221b28 0 1px,transparent 1px 3px,#221b28 3px 5px,transparent 5px 6px)}.badge-bottom small{font-size:9px;letter-spacing:2px}.orbit{position:absolute;width:460px;height:150px;border:1px solid #aa95ff35;transform:rotate(-23deg);border-radius:50%;top:330px;box-shadow:0 0 30px #9070ff10}.orbit::after{content:"";position:absolute;left:30px;top:29px;width:6px;height:6px;background:#d2c6ff;border-radius:50%;box-shadow:0 0 15px #a28aff}.badge-hint{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:12px;color:#8c879c;letter-spacing:2px}.intro-footer{max-width:1200px;margin:0 auto;padding:0 20px 25px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;color:#7f7a8c}.directory{padding:105px max(5vw,20px) 75px;border-top:1px solid var(--line);background:linear-gradient(#111116,#0c0c10)}.directory-heading{text-align:center;margin:0 auto 55px}.directory-heading>p{font-size:12px;letter-spacing:3px;color:#9591a3;margin:0 0 12px}.directory-heading h2{font-size:24px;font-weight:400;letter-spacing:5px;margin:0}.directory-heading h2 span{display:block;font-size:clamp(44px,6vw,88px);font-family:Arial,sans-serif;font-weight:500;letter-spacing:-5px;line-height:1.2;margin:8px 0 22px}.directory-heading .directory-hint{font-size:12px;letter-spacing:1px;color:#797684}.project-accordion{display:flex;gap:12px;max-width:1300px;margin:auto;align-items:stretch}.project-panel{flex:1;min-width:0;transition:flex .75s cubic-bezier(.2,.75,.15,1)}.project-accordion.has-active .project-panel{flex:.7}.project-accordion.has-active .project-panel.active{flex:3.1}.project-panel>a{display:block}.panel-visual{height:390px;position:relative;overflow:hidden;border-radius:5px;background:#25242a;border:1px solid #ffffff17}.panel-visual img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .9s cubic-bezier(.2,.75,.15,1),filter .6s;filter:brightness(.65) saturate(.7);transform:scale(1.07)}.panel-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(#0007,transparent 36%,transparent 65%,#0008);pointer-events:none}.panel-number{position:absolute;top:8px;left:12px;font-size:clamp(45px,5.3vw,78px);line-height:1;letter-spacing:-5px;z-index:2;font-weight:300;color:#fff;transition:color .4s}.panel-action{position:absolute;bottom:22px;right:20px;z-index:2;font-size:14px;border:1px solid #ffffff7a;background:#10101599;backdrop-filter:blur(8px);border-radius:30px;padding:8px 17px;opacity:0;transform:translateY(10px);transition:.4s;white-space:nowrap}.active .panel-visual img,.project-panel a:focus-visible img{filter:brightness(1) saturate(1);transform:scale(1)}.active .panel-number{color:var(--project-accent)}.active .panel-action{opacity:1;transform:translateY(0)}.panel-label{text-align:center;padding-top:18px;min-height:105px}.panel-label h3{font-weight:500;font-size:15px;margin:0 0 4px;white-space:nowrap}.panel-label>span{font-size:11px;color:#9994a3;display:block;white-space:nowrap}.panel-label small{font-size:10px;color:#706b7b;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;white-space:nowrap}.panel-label small::before,.panel-label small::after{content:"";height:1px;width:22px;background:#55505e}.expand-panel{display:none}.directory-footer{max-width:1300px;margin:40px auto 0;display:flex;justify-content:space-between;font-size:13px;color:#9994a6}.directory-footer a{border-bottom:1px solid #625c73;padding-bottom:4px}.experience{max-width:1200px;margin:auto;padding:75px 20px 90px;border-top:1px solid var(--line)}.section-kicker{font-size:12px;color:#a298bc;letter-spacing:3px}.experience h2{font-size:30px;font-weight:500}.experience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}.experience small{font-size:12px;color:#93909e}.experience h3{font-size:16px;font-weight:500;margin:12px 0 4px}.experience b{font-size:13px;color:#c3b2ec;font-weight:400}.experience article p{color:#93909e;font-size:14px}.contact{text-align:center;padding:80px max(5vw,20px) 25px;background:#141219;border-top:1px solid var(--line)}.contact h2{font-size:clamp(28px,4vw,48px);font-weight:400}.email{font-size:clamp(19px,3vw,34px);color:#d6caed;border-bottom:1px solid #7f6c94;padding-bottom:10px}.contact-links{margin:30px 0 75px;display:flex;gap:30px;justify-content:center;font-size:14px;color:#a6a0b0}.contact-links button{border:0;border-bottom:1px solid #61546d;background:none;padding:0}.footer-line{max-width:1300px;margin:auto;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px;font-size:12px;color:#807a8a}.toast:empty{display:none}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 20px;z-index:30;background:#d6c5f5;color:#1b1428;border-radius:10px;font-size:14px;white-space:nowrap}.case-main{max-width:1200px;margin:auto;padding:70px 30px}.case-kicker{color:var(--accent);font-size:13px;letter-spacing:2px}.case-main h1{font-size:clamp(32px,4vw,56px);line-height:1.35;font-weight:500;margin:20px 0}.case-intro{max-width:780px;color:#aaa4b7}.case-meta{display:flex;gap:30px;flex-wrap:wrap;margin:30px 0 45px;font-size:13px}.case-meta a{border-bottom:1px solid #7c7090}.case-images{background:#17151b}.case-images img{display:block;width:100%;height:auto}.case-end{display:flex;justify-content:space-between;margin-top:40px;gap:25px;font-size:14px}.case-page .topbar nav{gap:40px}
@media(max-width:900px){.topbar nav{gap:25px}.intro-inner{padding:25px;gap:0}.intro h1{font-size:33px}.badge-rig{width:260px}.badge{width:260px;padding:23px 17px 17px}.photo-wrap{height:215px}.badge-area{height:620px}.orbit{width:340px}.panel-visual{height:330px}.project-accordion{gap:8px}.panel-label h3{font-size:13px}.panel-label>span{font-size:10px}.project-accordion.has-active .project-panel{flex:.65}.project-accordion.has-active .project-panel.active{flex:2.8}}@media(max-width:650px){html{scroll-padding-top:72px}.topbar nav{min-height:68px;gap:22px;padding:12px 10px;font-size:13px}.logo{font-size:23px}.logo span,.topbar .motion{display:none}.intro-inner{grid-template-columns:1fr;padding:38px 24px 25px;gap:0}.intro-copy{padding:0;z-index:2}.eyes i{width:30px;height:37px}.eyes b{width:15px;height:18px;top:10px;left:13px}.eyes{margin-bottom:15px}.hello{font-size:24px;margin-bottom:18px}.intro h1{font-size:31px}.description{font-size:14px}.light-line{margin:22px auto}.intro-meta{margin:18px 0}.badge-area{height:560px;margin-top:10px;padding-bottom:45px}.badge-rig{width:255px}.badge{width:255px}.lanyard{height:100px}.orbit{top:270px;width:310px}.intro-footer{font-size:10px;letter-spacing:1px;padding:15px 20px 24px}.intro-footer>span:first-child{max-width:155px}.directory{padding:65px 18px 45px}.directory-heading{margin-bottom:35px}.directory-heading h2{font-size:20px}.directory-heading h2 span{font-size:48px;letter-spacing:-3px}.project-accordion{flex-direction:column;gap:20px}.project-panel,.project-accordion.has-active .project-panel,.project-accordion.has-active .project-panel.active{flex:initial}.panel-visual{height:120px;transition:height .6s cubic-bezier(.2,.75,.15,1)}.active .panel-visual{height:245px}.panel-number{font-size:54px}.panel-visual img{filter:brightness(.8) saturate(.8)}.panel-label{min-height:0;display:flex;align-items:center;justify-content:space-between;padding-top:11px;gap:10px}.panel-label h3{font-size:15px;margin:0}.panel-label>span{font-size:11px}.panel-label small{display:none}.expand-panel{display:block;border:0;background:none;color:#a7a0b5;padding:8px 0;font-size:12px}.panel-action{font-size:12px;bottom:16px;right:15px}.directory-footer{font-size:12px;margin-top:30px;gap:15px}.experience{padding:50px 24px}.experience h2{font-size:26px}.experience-grid{grid-template-columns:1fr;gap:23px;margin-top:28px}.experience article{border-bottom:1px solid var(--line);padding-bottom:15px}.contact{padding:55px 20px 25px}.contact-links{margin-bottom:45px;gap:20px;font-size:13px}.footer-line{gap:20px;font-size:10px}.case-main{padding:40px 16px}.case-page .topbar nav{gap:22px}.case-page .logo span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

@media(max-width:650px){.badge-area{margin-top:120px}.directory-hint{font-size:0!important}.directory-hint::after{content:"轻点展开封面 · 再次点击进入项目";font-size:12px}.intro-footer{gap:20px}}
/* Detail refinement: QR, shared atmosphere, glass journey and luminous contact. */
.qr-crop{display:block;position:relative;aspect-ratio:1;overflow:hidden;background:#fff;border-radius:3px}.qr-crop img{position:absolute;width:133.735%;max-width:none;height:auto;left:-16.867%;top:-42.169%;pointer-events:none}.qr-trigger{grid-column:2;grid-row:1/3;border:0;background:#fff;padding:0;width:70px;border-radius:4px;z-index:3;touch-action:manipulation}.badge-bottom{grid-template-columns:1fr 70px;gap:4px 8px}.badge-bottom small{grid-column:1;align-self:start}.badge-bottom>span:first-child{align-self:end}.badge:focus-visible{outline:2px solid var(--accent);outline-offset:8px}.qr-dialog{color:#eceaf7;background:#17151f;border:1px solid #ffffff30;border-radius:20px;padding:28px;width:min(390px,calc(100vw - 36px));box-shadow:0 25px 120px #000b;text-align:center}.qr-dialog::backdrop{background:#030209b8;backdrop-filter:blur(12px)}.qr-dialog h2{font-size:21px;font-weight:500;margin:0 0 24px}.qr-dialog p{font-size:13px;color:#aaa4bc;margin-bottom:0}.qr-close{position:absolute;right:12px;top:8px;background:none;border:0;font-size:26px;color:#aaa4bc}.directory,.experience{position:relative;isolation:isolate;overflow:hidden}.section-particles{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.directory{background:radial-gradient(ellipse at 8% 25%,#38245f19,transparent 42%),linear-gradient(#111116,#0c0c10)}.experience{max-width:none;padding:95px max(5vw,24px) 110px;background:radial-gradient(ellipse at 16% 58%,#293c8629,transparent 47%),radial-gradient(ellipse at 88% 55%,#6a358b26,transparent 45%),#0c0b11}.journey-inner{max-width:1200px;margin:auto}.experience-grid{grid-template-columns:1.2fr 1fr;gap:26px}.glass-panel{position:relative;padding:30px 34px;border:1px solid #ffffff1d;border-radius:20px;background:linear-gradient(125deg,#ffffff09,#ffffff02);box-shadow:inset 0 1px #ffffff12,0 18px 50px #0002;backdrop-filter:blur(16px)}.glass-heading{padding-bottom:24px;border-bottom:1px solid #ffffff14}.glass-heading>span{font-size:10px;letter-spacing:2px;color:#8e87ab}.glass-heading h3{font-size:23px;margin:5px 0 0;color:#edeaf8}.journey-entry{padding-top:25px}.journey-entry+.journey-entry{border-top:1px solid #ffffff0e;margin-top:22px}.journey-entry h4{font-size:17px;font-weight:500;margin:7px 0 3px}.experience .journey-entry p{line-height:1.9;margin:10px 0 0}.tool-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.tool-tags span{border:1px solid #ffffff12;border-radius:5px;padding:3px 8px;font-size:10px;color:#a49ab7;background:#ffffff03}.contact{position:relative;isolation:isolate;overflow:hidden;background:#06060b;min-height:780px;display:flex;flex-direction:column;justify-content:center;padding:120px max(5vw,20px) 25px}.contact-scene{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.corner-light{position:absolute;width:760px;height:760px;filter:blur(25px);opacity:.6;animation:light-breathe 12s ease-in-out infinite alternate;translate:var(--light-x,0px) var(--light-y,0px)}.light-blue{left:-340px;bottom:-360px;background:radial-gradient(ellipse,#6c93fca6 0,#3b5ed15c 25%,#5543a322 45%,transparent 68%)}.light-purple{right:-350px;top:-340px;background:radial-gradient(ellipse,#a786f8a6 0,#7252bf66 25%,#355bb52b 46%,transparent 68%);animation-delay:-6s}.contact-dust{position:absolute;inset:0;background-image:radial-gradient(#b4a5ec44 .7px,transparent .9px),radial-gradient(#829fe52b .6px,transparent 1px);background-size:87px 103px,137px 163px;background-position:13px 24px,43px 61px;mask-image:radial-gradient(ellipse,transparent 12%,#000 90%);opacity:.65}.light-tracks{position:absolute;width:100%;height:100%;inset:0;opacity:.3}.travel-light{stroke-dasharray:110 2400;animation:track-flow 14s linear infinite;filter:drop-shadow(0 0 5px #a08bff)}.contact-content{position:relative;margin:auto 0;padding:38px 0 85px}.contact h2{font-size:clamp(34px,4.6vw,66px);line-height:1.5;font-weight:500;letter-spacing:-1px;margin:25px 0 20px;text-shadow:0 0 45px #8b73ce25}.contact-note{color:#9993aa;font-size:14px}.contact .contact-links{display:flex;flex-wrap:wrap;gap:16px;margin:42px 0 16px;color:#e1ddf0}.contact .copy-button{display:flex;align-items:center;gap:14px;border:1px solid transparent;border-radius:13px;background:linear-gradient(#101019,#101019) padding-box,conic-gradient(from var(--border-angle),#ffffff12 0%,#ffffff12 42%,#6c91f6 49%,#c493f2 53%,#ffffff12 61%,#ffffff12) border-box;padding:14px 18px;min-width:238px;text-align:left;animation:border-flow 6s linear infinite;transition:transform .25s,box-shadow .25s}.copy-button:nth-child(2){animation-delay:-2s}.copy-button:nth-child(3){animation-delay:-4s}.copy-button:hover{transform:translateY(-4px);box-shadow:0 0 28px #8c72e52e}.copy-button svg{width:23px;height:23px;fill:none;stroke:#b4a6e4;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.copy-button>span{font-size:14px;letter-spacing:.2px}.copy-button small{display:block;color:#8f859f;font-size:10px;margin-bottom:1px}.copy-button i{font-style:normal;color:#877a9f;margin-left:auto;font-size:18px}.copy-hint{font-size:11px;color:#716980;letter-spacing:1px}.contact .footer-line{width:100%;border-color:#ffffff10}.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}@property --border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}@keyframes border-flow{to{--border-angle:360deg}}@keyframes track-flow{to{stroke-dashoffset:-2510}}@keyframes light-breathe{from{transform:scale(.92) translate(0,0);opacity:.5}to{transform:scale(1.16) translate(25px,-20px);opacity:.8}}
@media(max-width:900px){.contact .copy-button{min-width:220px}.glass-panel{padding:25px}.contact{min-height:740px}}
@media(max-width:650px){.badge-area{height:595px}.experience{padding:65px 20px 75px}.experience-grid{grid-template-columns:1fr;gap:20px}.experience article{padding:26px;border:1px solid #ffffff1d}.glass-heading h3{font-size:21px}.journey-entry h4{font-size:16px}.contact{min-height:780px;padding-top:55px}.contact-content{padding:30px 0 55px}.contact h2{font-size:32px;letter-spacing:-.8px}.contact .contact-links{flex-direction:column;align-items:stretch;max-width:320px;margin:30px auto 14px;gap:13px}.contact .copy-button{width:100%;padding:13px 18px}.corner-light{width:520px;height:620px}.light-blue{left:-320px;bottom:-220px}.light-purple{right:-340px;top:-270px}.contact .section-kicker{font-size:10px;letter-spacing:2px}.toast{font-size:12px;max-width:94vw;white-space:normal;text-align:center}}
/* Transparent glass: only a faint surface reflection, with a moving perimeter light. */
.topbar .logo{font-size:14px;font-weight:400;letter-spacing:0}
.glass-panel{background:linear-gradient(125deg,#ffffff03,transparent 50%,#ffffff02);border:1px solid #ffffff0d;box-shadow:inset 0 1px #ffffff08,0 15px 50px #0001;backdrop-filter:blur(7px);isolation:isolate}
.glass-panel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--border-angle),#ffffff08 0%,#ffffff08 35%,#729dffb3 47%,#c394edcc 52%,#ffffff08 64%,#ffffff08);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;animation:border-flow 8s linear infinite}
.glass-panel.education::before{animation-delay:-4s}.copy-button .wechat-icon{fill:#b4a6e4;stroke:none;width:25px;height:25px}.wechat-eyes{fill:#101019}
@media(max-width:650px){.experience article{border-color:#ffffff0d}.topbar .logo{font-size:13px}}