:root{color-scheme:dark;--bg:#080b0d;--surface:#101518;--text:#f0f3ee;--muted:#a0aaa9;--accent:#beef9c;--line:#ffffff20;--ease:cubic-bezier(.22,1,.36,1);font-family:'DM Sans',Arial,sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:7px}::selection{background:var(--accent);color:var(--bg)}h1,h2,h3,h4,p{margin:0}button{cursor:pointer}.skip-link{position:fixed;top:-100px;left:16px;z-index:50;padding:12px;background:var(--accent);color:#080b0d}.skip-link:focus{top:15px}.reading-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--accent);z-index:30;pointer-events:none}
.sidebar{height:94px;position:absolute;top:0;left:5%;right:5%;display:flex;align-items:center;gap:42px;border-bottom:1px solid var(--line);z-index:10}.wordmark{font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:600;letter-spacing:-1px;white-space:nowrap}.brand-symbol{font-size:35px;color:var(--accent);display:inline-block;vertical-align:middle;margin-right:8px}.brand-dot{color:var(--accent)}.sidebar nav{display:flex;gap:30px;margin:auto;font-size:14px}.sidebar nav a{color:var(--muted);position:relative;padding:12px 0;transition:color .25s}.sidebar nav a:hover,.sidebar nav a.is-current{color:var(--text)}.sidebar nav a:after{content:'';position:absolute;bottom:4px;height:3px;left:50%;width:3px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .25s}.sidebar nav a.is-current:after{opacity:1}.header-github{font-size:14px;margin-right:126px}.lang-switch{position:absolute;right:5%;top:30px;display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:30px;z-index:12}.lang-btn{border:0;color:var(--muted);background:none;font-size:12px;padding:7px 10px;border-radius:20px}.lang-btn.is-active{background:#26302b;color:var(--accent)}
.content{max-width:1600px;margin:auto;padding:0 5%}.hero{min-height:850px;height:100svh;max-height:1100px;position:relative;display:flex;align-items:center;padding:140px 0 120px;isolation:isolate}.hero-copy{position:relative;z-index:2;max-width:730px;pointer-events:none}.hero-copy a{pointer-events:auto}.hero-kicker,.section-index,.hero-bottom,.orbit-label,.site-footer>span{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1.2px}.hero-kicker{color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:32px}.live-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 12px #beef9c60}.hero h1{font-family:'Space Grotesk','DM Sans',sans-serif;font-size:clamp(76px,8.4vw,132px);font-weight:500;line-height:.99;letter-spacing:-.075em;max-width:720px;text-wrap:balance;margin-left:-6px}.hero-description{font-size:17px;color:var(--muted);line-height:1.85;max-width:460px;margin-top:32px}.hero-actions{display:flex;gap:24px;align-items:center;margin-top:35px}.button,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:26px;font-size:14px;min-height:48px;transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}.button{border-radius:30px;background:var(--accent);color:#142016;padding:13px 23px;font-weight:600;border:1px solid transparent}.button:after{content:'↗';font-size:18px}.button:hover{background:#d2ffb5;transform:translateY(-3px)}.ghost{border-bottom:1px solid #ffffff40;padding:10px 0}.ghost:after{content:'↗';font-size:17px}.ghost:hover{color:var(--accent);border-color:var(--accent)}.hero-bottom{position:absolute;bottom:35px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:27px;color:var(--muted);font-size:11px;letter-spacing:1px}.hero-bottom a{color:var(--text)}.hero-bottom a span{display:inline-block;margin-left:18px;font-size:20px}.hero-art{position:absolute;z-index:0;right:-5.5%;top:9%;width:72%;height:80%;pointer-events:none;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 17%,#000 95%,transparent)}#aurora-canvas{height:100%;width:100%;display:block}.aurora-haze{position:absolute;inset:16% 6%;background:radial-gradient(ellipse at 62% 50%,#37614e36,transparent 60%),radial-gradient(ellipse at 45% 75%,#34386628,transparent 60%);filter:blur(45px)}.orbit-label{position:absolute;right:12%;bottom:12%;font-size:10px;letter-spacing:2px;color:#b1c4b3;writing-mode:vertical-rl}.orbit-label span{margin-top:16px}
.panel:not(.hero){padding:105px 0;scroll-margin-top:20px}.section-head{display:grid;grid-template-columns:1fr 1fr;align-items:end;margin-bottom:48px;gap:20px}.section-index{display:block;color:var(--accent);grid-column:1/-1;margin-bottom:14px}.section-head h3,.contact h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(40px,4.5vw,64px);font-weight:400;letter-spacing:-.055em;line-height:1.1}.section-head p{justify-self:end;color:var(--muted);font-size:15px;max-width:350px;line-height:1.7}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px 30px}.project-card{position:relative;min-width:0}.project-grid .project-card:first-child{grid-column:1/-1}.project-main{display:flex;flex-direction:column}.project-media,.playground-media{order:-1;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;aspect-ratio:1.6;margin-bottom:25px;isolation:isolate;transition:border-color .45s}.project-grid .project-card:first-child .project-media{aspect-ratio:2.35}.project-media:after,.playground-media:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),#c9f3bb17,transparent 70%);opacity:0;transition:opacity .5s}.project-card:hover .project-media:after,.project-card:hover .playground-media:after{opacity:1}.project-preview,.playground-preview{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .8s;filter:saturate(.75)}.project-card:hover img{transform:scale(1.035);filter:saturate(1)}.project-card:hover .project-media,.project-card:hover .playground-media{border-color:#beef9c55}.project-card h4{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:500;letter-spacing:-1px;line-height:1.3}.project-card h4:after{content:'↗';float:right;color:var(--accent);font-size:24px;transition:transform .5s var(--ease)}.project-card:hover h4:after{transform:translate(4px,-4px)}.project-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--accent);margin-top:9px;line-height:1.6}.project-summary,.project-card>p:not(.project-tag){color:var(--muted);font-size:16px;line-height:1.8;margin-top:17px;max-width:680px}.project-grid .project-card:first-child .project-summary{max-width:760px}.card-actions{display:flex;align-items:center;gap:24px;margin-top:22px}.card-actions .button{background:transparent;color:var(--text);border:1px solid var(--line);padding:8px 18px;min-height:42px;font-size:13px}.card-actions .button:hover{border-color:var(--accent);color:var(--accent)}.card-actions .ghost{font-size:13px;min-height:40px;border:0;color:var(--muted)}.card-actions .ghost:hover{color:var(--accent)}#playground{border-top:1px solid var(--line)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.grid .project-card{display:flex;flex-direction:column}.grid .card-actions{margin-top:auto;padding-top:22px}.project-note{font-size:13px!important}.contact{position:relative;border-top:1px solid var(--line);min-height:370px}.contact .section-index{margin-bottom:32px}.contact h3{font-size:clamp(56px,7vw,100px);margin-bottom:30px}.contact p{font-size:17px;line-height:1.9;color:var(--muted);max-width:640px}.contact p a{display:inline-block;color:var(--text);border-bottom:1px solid var(--accent)}.contact-arrow{position:absolute;right:20px;top:120px;font-size:100px;color:var(--accent);font-weight:300}.site-footer{margin:0 5%;padding:28px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px;color:var(--muted)}.site-footer>a{color:var(--text);font-size:18px;letter-spacing:-.5px}.site-footer>a span{color:var(--accent)}.site-footer>span{font-size:10px}
html[lang=zh-CN] .hero h1{font-size:clamp(64px,7.8vw,112px);letter-spacing:-.06em;max-width:680px;line-height:1.2}html[lang=zh-CN] .hero-description{line-height:2}html[lang=zh-CN] .section-head h3{letter-spacing:-.035em}
@media(min-width:1800px){.sidebar{left:calc((100% - 1440px)/2);right:calc((100% - 1440px)/2)}.lang-switch{right:calc((100% - 1440px)/2)}}
@media(max-width:1000px){.sidebar nav{gap:20px}.header-github{display:none}.sidebar nav{margin-right:115px}.hero{min-height:760px}.hero-copy{max-width:650px}.hero-art{width:90%;right:-5%;opacity:.7}.hero h1{font-size:90px;max-width:600px}.hero-description{max-width:410px}.hero-bottom{font-size:9px}.project-grid .project-card:first-child .project-media{aspect-ratio:1.9}.hero-kicker{font-size:10px}}
@media(max-width:680px){html{scroll-padding-top:25px}.sidebar{height:82px;flex-wrap:wrap;gap:0;align-content:center;left:6%;right:6%}.wordmark{font-size:22px}.brand-symbol{font-size:28px}.sidebar nav{position:absolute;top:90px;left:0;right:0;margin:0;justify-content:space-between;font-size:13px;gap:12px}.lang-switch{top:24px;right:6%}.content{padding:0 6%}.hero{height:auto;min-height:850px;max-height:none;padding:210px 0 125px;align-items:flex-start}.hero h1{font-size:clamp(62px,14vw,92px);letter-spacing:-.065em;max-width:470px;margin-left:-3px}.hero-kicker{font-size:9px;letter-spacing:.5px;margin-bottom:24px}.hero-description{font-size:16px;line-height:1.8;margin-top:25px;max-width:380px}.hero-art{top:90px;right:-6.8%;width:110%;height:620px;opacity:.48;mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}.orbit-label{display:none}.hero-actions{gap:22px;margin-top:28px}.button,.ghost{font-size:13px;gap:13px}.hero-bottom{display:block;bottom:25px;line-height:1.8;font-size:9px}.hero-bottom>a{display:block;margin-top:13px}.panel:not(.hero){padding:66px 0}.section-head{display:block;margin-bottom:30px}.section-index{font-size:10px;margin-bottom:23px}.section-head p{margin-top:18px;font-size:14px}.project-grid,.grid{grid-template-columns:1fr;gap:42px}.project-grid .project-card:first-child{grid-column:auto}.project-grid .project-card:first-child .project-media{aspect-ratio:1.6}.project-card h4{font-size:25px}.project-tag{font-size:11px}.project-summary,.project-card>p:not(.project-tag){font-size:15px}.contact-arrow{top:65px;right:0;font-size:52px}.contact p{font-size:15px;max-width:90%}.contact h3{font-size:52px}.site-footer{margin:0 6%;flex-wrap:wrap;gap:18px}.site-footer>span:nth-child(2){display:none}html[lang=zh-CN] .hero h1{font-size:clamp(58px,13vw,82px);line-height:1.2}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* 入场用同一条减速曲线，首屏与滚动区域保持一致的节奏。 */
@keyframes enter{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes art-enter{from{opacity:0;transform:scale(.94) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:no-preference){.hero-kicker{animation:enter .9s var(--ease) both}.hero h1{animation:enter 1.2s .08s var(--ease) both}.hero-description{animation:enter 1.1s .2s var(--ease) both}.hero-actions{animation:enter 1.1s .3s var(--ease) both}.hero-bottom{animation:enter 1s .4s var(--ease) both}#aurora-canvas{animation:art-enter 2s .1s var(--ease) both}.reveal-item{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.reveal-item.is-revealed{opacity:1;transform:translateY(0)}}
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.22s}::view-transition-new(root){animation-duration:.35s}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}}
/* 次级文字也保留可读字号，窄屏允许自然折行。 */
.hero-kicker,.section-index,.hero-bottom,.orbit-label,.site-footer>span,.project-tag{font-size:12px}
.hero-kicker{line-height:1.7}.live-dot{flex-shrink:0}
@media(max-width:680px){.hero-bottom{font-size:11px}.contact-arrow{display:none}}
/* 独立开场：光环聚拢 → 名字浮现 → 选择语言 → 淡出接主页。 */
.opening:not([open]){display:none}
.opening{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--text);background:#080b0d;overflow:auto;isolation:isolate;opacity:1;transition:opacity .75s var(--ease),filter .75s var(--ease),transform .75s var(--ease)}
.opening::backdrop{background:#080b0d00}.intro-active{overflow:hidden}.intro-active .hero-kicker,.intro-active .hero h1,.intro-active .hero-description,.intro-active .hero-actions,.intro-active .hero-bottom,.intro-active #aurora-canvas{animation:none}
.opening-center{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:110px 24px;position:relative;z-index:1}
.opening-corner,.opening-bottom{position:absolute;left:5%;right:5%;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;z-index:2;color:var(--muted)}.opening-corner{top:32px}.opening-corner span{color:#6f8079}.opening-bottom{bottom:25px;display:flex;justify-content:space-between;align-items:center;gap:20px}.opening-symbol{font-size:54px;color:var(--accent);line-height:1;margin-bottom:32px}.opening-kicker{font-family:'IBM Plex Mono',monospace;color:var(--accent);font-size:12px;letter-spacing:2px;line-height:1.8}.opening h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(56px,10vw,152px);font-weight:500;letter-spacing:-.075em;line-height:1.2;margin:16px 0}.opening h2 span{color:var(--accent)}.opening-sub{font-size:16px;color:var(--muted);letter-spacing:1px}.opening-line{width:160px;height:1px;background:#beef9c20;margin:40px 0 25px;overflow:hidden}.opening-line span{display:block;height:100%;background:var(--accent);transform-origin:left}.opening #opening-hint{font-size:12px;color:var(--muted);line-height:1.8}.opening-actions{display:flex;gap:12px;margin-top:20px}.opening-actions button{border:1px solid #ffffff30;background:#121c16;color:var(--text);padding:14px 22px;border-radius:30px;min-width:145px;display:flex;justify-content:space-between;gap:24px;font-size:14px;transition:background .25s,border-color .25s,transform .3s var(--ease)}.opening-actions button.is-active{border-color:#beef9c70;color:var(--accent)}.opening-actions button:hover{background:#263d2b;border-color:var(--accent);transform:translateY(-3px)}.opening-skip,.replay-intro{border:0;background:none;color:var(--muted);padding:10px 0;font-size:12px}.opening-skip:hover,.replay-intro:hover{color:var(--accent)}.opening-space{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 40%,#406d4d20,transparent 60%)}.opening-space i{position:absolute;left:50%;top:47%;width:85vw;height:48vw;min-width:620px;min-height:360px;border:1px solid #beef9c24;border-radius:50%;transform:translate(-50%,-50%) rotate(-30deg);box-shadow:0 0 55px #83cbb508,inset 0 0 55px #83cbb508}.opening-space i:nth-child(2){width:90vw;height:44vw;transform:translate(-50%,-50%) rotate(-38deg);border-color:#93bde021}.opening-space i:nth-child(3){width:78vw;height:52vw;transform:translate(-50%,-50%) rotate(-22deg);border-color:#beef9c12}.opening-space i:nth-child(4){width:95vw;height:60vw;transform:translate(-50%,-50%) rotate(-15deg);border-color:#93bde012}.opening.is-exiting{opacity:0;filter:blur(12px);transform:scale(1.035);pointer-events:none}
@keyframes opening-title{from{opacity:0;filter:blur(16px);transform:translateY(22px);letter-spacing:.04em}to{opacity:1;filter:blur(0);transform:translateY(0);letter-spacing:-.075em}}
@keyframes opening-orbit{from{opacity:0;scale:.84;rotate:-12deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes opening-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){.opening[open] .opening-symbol{animation:enter 1.2s var(--ease) both}.opening[open] .opening-kicker{animation:enter 1.1s .12s var(--ease) both}.opening[open] h2{animation:opening-title 1.7s .18s var(--ease) both}.opening[open] .opening-sub{animation:enter 1.3s .45s var(--ease) both}.opening[open] .opening-line span{animation:opening-line 1.5s .25s var(--ease) both}.opening[open] #opening-hint,.opening[open] .opening-actions{animation:enter 1.2s .7s var(--ease) both}.opening[open] .opening-space{animation:opening-orbit 3s var(--ease) both}}
@media(max-width:680px){.opening-corner span,.opening-bottom>span{display:none}.opening-bottom{justify-content:flex-end}.opening-kicker{font-size:11px;letter-spacing:1px}.opening-actions button{min-width:125px}.opening h2{font-size:clamp(48px,12vw,82px)}.opening-sub{font-size:14px}.opening-center{padding:95px 18px}.opening-symbol{font-size:44px;margin-bottom:25px}}