/* finesse · brand · midnight-silver-jade · kinetic-light-ribbons · typographic-stage · S8 */
:root{--bg:#090f13;--panel:#10191f;--ink:#e8eeec;--muted:#94a7ad;--accent:#bdebd6;--green:#64cdb3;--line:rgba(199,224,222,.16);--light:#e4eae5;--dark:#14211e;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Microsoft YaHei UI','Microsoft YaHei',Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button{border:0}::selection{background:var(--accent);color:var(--bg)}.skip{position:fixed;left:12px;top:-80px;z-index:100;background:var(--accent);color:var(--bg);padding:15px}.skip:focus{top:12px}.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--accent);z-index:50}.nav{height:88px;padding:0 5%;display:flex;align-items:center;gap:25px;position:absolute;top:0;width:100%;z-index:5;border-bottom:1px solid var(--line)}.logo{font-family:Arial,sans-serif;font-size:36px;letter-spacing:-4px;font-weight:800}.logo span{color:var(--green)}.nav-name{font-size:13px;letter-spacing:2px}.nav-name span{color:var(--muted);font:10px monospace;letter-spacing:1px;margin-left:8px}.nav nav{margin-left:auto;display:flex;align-items:center;gap:34px;font-size:12px}.nav nav a{padding:15px 0;transition:color .3s}.nav nav a:hover{color:var(--green)}.nav-contact span{margin-left:18px;font-size:18px}.hero{height:900px;min-height:720px;max-height:1100px;height:100svh;position:relative;isolation:isolate;overflow:clip}.hero canvas{position:absolute;width:100%;height:100%;inset:0;z-index:-3}.hero-wash{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(9,15,19,.4),transparent 65%),linear-gradient(0deg,var(--bg),transparent 23%,transparent 75%,rgba(9,15,19,.4))}.hero-top{position:absolute;top:124px;left:5%;right:5%;display:flex;justify-content:space-between;font:10px monospace;letter-spacing:1.4px;color:var(--muted)}i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(100,205,179,.4);margin-right:10px}.hero-copy{position:absolute;left:9%;right:7%;top:29%;pointer-events:none}.eyebrow{font:10px/1.5 monospace;letter-spacing:2.3px;color:var(--accent);margin:0 0 28px}h1,h2,h3,p{margin-top:0}h1{font-weight:500;font-size:clamp(55px,6.7vw,108px);line-height:1.27;letter-spacing:-.065em;margin:0}.line{display:block}.second{padding-left:8%}.outline{color:var(--accent);font-weight:300}.dot{color:var(--green)}.punct{color:var(--muted)}.hero-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:35px;max-width:930px;gap:24px}.hero-bottom p{font-size:14px;line-height:2;color:var(--muted);margin:0;letter-spacing:1px}.round-link{display:flex;align-items:center;gap:25px;pointer-events:auto;font-size:12px}.round-link b{display:grid;place-items:center;width:62px;height:62px;border:1px solid var(--line);border-radius:50%;font-size:25px;font-weight:400;transition:background .3s,transform .4s}.round-link:hover b{background:var(--accent);color:var(--bg);transform:rotate(45deg)}.hero-foot{position:absolute;bottom:34px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;font:10px monospace;color:var(--muted);letter-spacing:1px;gap:20px}.flow-controls{display:flex;align-items:center;gap:22px}.hint{font:11px 'Microsoft YaHei',sans-serif}.flow-controls button{background:transparent;border:1px solid var(--line);padding:12px 16px;min-height:44px;font-size:11px;border-radius:30px}.flow-controls button span{margin-left:12px}.scroll-cue span{display:inline-block;margin-left:15px;animation:down 2s ease-in-out infinite}@keyframes down{50%{transform:translateY(7px)}}.section{padding:100px 9%;}.section-label{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding-top:22px;font:10px/1.7 monospace;letter-spacing:1px;color:var(--muted);margin-bottom:72px}.section-label span:last-child{font-family:'Microsoft YaHei',sans-serif;letter-spacing:1px}.intro{padding-bottom:130px}.intro-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12%}h2{font-size:clamp(30px,3.3vw,54px);font-weight:400;line-height:1.5;letter-spacing:-.045em;margin-bottom:0}em{font-style:normal;color:var(--muted)}.intro-text p{font-size:14px;line-height:2.2;color:var(--ink)}.intro-text p.muted{color:var(--muted);font-size:12px;margin-top:25px}.skill-tags,.project-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.skill-tags span,.project-tags span{border:1px solid var(--line);padding:8px 12px;font-size:10px;border-radius:30px;color:var(--muted)}.work{padding-top:0}.work-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:55px}.work-count{font:82px/.9 Arial,sans-serif;letter-spacing:-6px;color:var(--accent)}.work-count span{display:block;font:9px/1.5 monospace;letter-spacing:2px;text-align:right;margin-top:18px;color:var(--muted)}.project-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:28px;gap:40px}.project-tabs button{background:none;min-height:65px;padding:16px 0;flex:1;text-align:left;position:relative;font-size:15px;white-space:nowrap;color:var(--muted)}.project-tabs button>span{font:10px monospace;margin-right:15px}.project-tabs button b{float:right;font-size:18px;font-weight:400}.project-tabs button:after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}.project-tabs button[aria-selected=true]{color:var(--accent)}.project-tabs button[aria-selected=true]:after{transform:scaleX(1)}.project-stage{height:540px;background:radial-gradient(ellipse at 50% 80%,rgba(90,140,125,.23),transparent 65%),var(--panel);position:relative;overflow:hidden;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;perspective:1500px}.stage-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.2;mask-image:linear-gradient(transparent,rgba(9,15,19,.7))}.stage-meta{position:absolute;top:26px;left:30px;right:30px;display:flex;justify-content:space-between;font:9px monospace;letter-spacing:1.5px;color:var(--muted)}.preview-frame{width:76%;position:relative;border:1px solid rgba(211,237,230,.25);background:var(--bg);box-shadow:0 40px 80px rgba(3,12,16,.55);transform:rotateX(5deg) rotateY(-5deg);transition:transform .7s var(--ease);z-index:1;border-radius:7px;overflow:hidden}.window-bar{height:31px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font:8px monospace;color:var(--muted)}.window-bar>span:first-child{letter-spacing:3px;font-size:6px}.preview-frame video{width:100%;display:block;aspect-ratio:16/9;background:var(--panel)}.stage-number{position:absolute;bottom:-24px;left:22px;font:150px/1 Arial,sans-serif;color:rgba(185,228,209,.06);letter-spacing:-12px}.detail-trigger{position:absolute;bottom:19px;right:24px;background:transparent;font-size:11px;min-height:44px;padding:12px;z-index:2}.detail-trigger span{margin-left:30px}.detail-trigger:hover{color:var(--green)}.project-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10%;padding:36px 0 0}.project-info .eyebrow{color:var(--muted);font-family:'Microsoft YaHei',sans-serif;letter-spacing:1px;margin:0 0 12px}.project-info h3{font-size:32px;font-weight:400;margin:0}.project-info p{font-size:13px;line-height:2;color:var(--muted);margin-bottom:0}.project-tags{margin-top:16px}.statement{background:var(--light);color:var(--dark);position:relative}.statement .eyebrow{color:var(--dark)}.statement h2{font-size:clamp(34px,4.7vw,72px);line-height:1.5}.statement h2 span{color:#5a796c}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7%;margin-top:85px}.steps article{border-top:1px solid rgba(20,33,30,.2);padding-top:24px}.steps article>span{font:10px monospace;letter-spacing:1px;color:#5a796c}.steps h3{font-size:20px;font-weight:500;margin:25px 0 12px}.steps p{font-size:13px;line-height:2;color:#53645c}.contact{padding-bottom:120px}.contact-intro{font-size:13px;color:var(--muted);margin-bottom:30px}.contact-link{display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:clamp(32px,4.4vw,68px);line-height:1.5;letter-spacing:-.045em}.contact-link em{color:var(--accent)}.contact-link b{font-size:80px;font-weight:300;transition:transform .5s}.contact-link:hover b{transform:translate(12px,-12px);color:var(--accent)}.contact-note{font-size:11px;margin-top:35px}.contact-note span{margin-left:15px}.contact-note span:last-child{color:var(--muted)}footer{border-top:1px solid var(--line);padding:28px 5%;display:flex;align-items:center;justify-content:space-between;gap:25px;font:10px monospace;color:var(--muted)}footer .logo{font-size:28px;color:var(--ink)}dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:35px;width:min(640px,calc(100% - 30px));max-height:85svh;box-shadow:0 50px 150px rgba(3,9,12,.65)}dialog::backdrop{background:rgba(4,10,13,.8);backdrop-filter:blur(9px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;font:10px monospace;color:var(--muted)}.dialog-head button{background:transparent;font-size:28px;width:44px;height:44px}dialog h2{font-size:32px;margin:24px 0}dialog h3{font-size:14px;color:var(--accent);font-weight:400;margin:23px 0 10px}dialog p{font-size:13px;color:var(--muted);line-height:2}.detail-foot{border-top:1px solid var(--line);padding-top:20px;margin-top:25px;font-size:11px}
@media(min-width:1500px){.hero-copy{top:32%}.project-stage{height:620px}}@media(max-width:900px){.nav-name span{display:none}.nav{padding-inline:6%}.hero-copy{left:7%;right:7%;top:31%}h1{font-size:8vw}.second{padding-left:0}.hero-bottom{align-items:start}.hero-foot>span,.hint{display:none}.section{padding:75px 7%}.intro-grid{gap:7%}.section-label{margin-bottom:45px}.project-stage{height:430px}.preview-frame{width:84%}.work{padding-top:0}.contact-link b{font-size:55px}footer>span:nth-last-child(2){display:none}}
@media(max-width:600px){.nav{height:72px;gap:18px}.nav-name{font-size:12px}.nav nav{gap:20px}.nav nav>a:not(:last-child){display:none}.nav-contact{font-size:11px}.hero{min-height:720px;max-height:920px}.hero-top{top:98px;left:7%;right:7%;font-size:8px}.hero-top>span:last-child{display:none}.hero-copy{top:28%}.hero-copy .eyebrow{font-size:8px;letter-spacing:1.6px;margin-bottom:28px}h1{font-size:clamp(33px,8.4vw,50px);line-height:1.55;letter-spacing:-.065em;white-space:nowrap}.hero-bottom{display:block;margin-top:24px}.hero-bottom p{font-size:12px;letter-spacing:0}.round-link{margin-top:30px;justify-content:space-between;width:195px}.round-link b{width:48px;height:48px;font-size:20px}.hero-foot{left:7%;right:7%;bottom:25px;gap:10px}.scroll-cue{font-size:8px;letter-spacing:0}.flow-controls button{font-size:10px;padding-inline:12px}.intro-grid,.project-info{grid-template-columns:minmax(0,1fr);gap:27px}.intro h2{font-size:32px}.section-label{font-size:9px;gap:20px}.section-label span:last-child{max-width:145px;font-size:9px;text-align:right}.intro-text p{font-size:13px}.work-heading{margin-bottom:32px}.work-heading h2{font-size:30px}.work-count{font-size:54px;letter-spacing:-3px}.work-count span{font-size:8px;letter-spacing:1px}.project-tabs{gap:14px;margin-bottom:18px}.project-tabs button{font-size:11px;min-height:58px}.project-tabs button>span{font-size:8px;margin-right:6px}.project-tabs button b{display:none}.project-stage{height:300px}.stage-meta{top:18px;left:17px;right:17px;font-size:8px}.stage-meta span:last-child{display:none}.preview-frame{width:89%;transform:none}.window-bar{height:24px;font-size:7px}.stage-number{font-size:100px;bottom:-12px;letter-spacing:-7px}.detail-trigger{bottom:6px;right:8px;font-size:10px}.project-info{padding-top:25px;gap:17px}.project-info h3{font-size:26px}.project-info p{font-size:12px}.project-tags{margin-top:14px}.statement h2{font-size:31px}.steps{grid-template-columns:minmax(0,1fr);gap:23px;margin-top:45px}.steps article{padding-top:18px}.steps h3{margin:16px 0 8px;font-size:19px}.steps p{margin-bottom:0}.contact-intro{font-size:12px;line-height:2}.contact-link{font-size:29px;gap:10px}.contact-link b{font-size:32px}.contact{padding-bottom:70px}footer{flex-wrap:wrap;gap:18px;padding:24px 7%;font-size:9px}footer>a:last-child{margin-left:auto}dialog{padding:24px}dialog h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.preview-frame{transform:none}}