:root{--bg:#101211;--surface:#1a1d1c;--text:#f4f5f2;--muted:#979c98;--lime:#c5ff32;--shell:1060px;scroll-padding-top:85px}
.site-header{top:22px;width:min(960px,calc(100% - 64px));height:46px;padding:5px 7px;background:#343b4959;border:1px solid #e7edf52b;box-shadow:0 3px 24px #10151a15;backdrop-filter:blur(18px)}
.brand{height:32px;padding:0 16px;gap:7px;background:var(--lime);border-radius:40px;font-size:21px;color:#152000}
.brand-dot,.brand-symbol{color:inherit}.brand-symbol{width:18px;height:18px}.brand-symbol svg{width:18px;height:18px}
.site-header nav{gap:32px}.site-header nav a{font-size:11px;color:#e7e8ec}.site-header sup{font-size:8px}.nav-contact{border:1px solid #ffffff50;background:#ffffff12;color:#fff;padding:7px 13px;gap:8px;font-size:10px}.nav-contact:hover{color:#152000;background:var(--lime)}.nav-contact svg{width:13px;height:13px}
.hero{height:calc(100svh - 60px);min-height:540px;max-height:1050px;background:#83c5f3;border:0;overflow:hidden}
.hero:before{display:none}.scene-wrap{inset:0;width:100%;height:100%;min-height:0;z-index:0}.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#1b25321c 0%,#0c151514 40%,#10121100 70%,#101211c9 100%)}
.hero-clouds{position:absolute;inset:-18%;z-index:1;pointer-events:none;opacity:.58;mix-blend-mode:normal;filter:blur(8px);background:radial-gradient(ellipse 24% 14% at 4% 18%,#ffffffdc 0 38%,#e8f7ff85 58%,transparent 78%),radial-gradient(ellipse 29% 17% at 26% 30%,#ffffffd8 0 36%,#e0f3ff9a 57%,transparent 80%),radial-gradient(ellipse 25% 14% at 55% 15%,#ffffffdf 0 37%,#e4f5ff8a 57%,transparent 80%),radial-gradient(ellipse 33% 18% at 86% 25%,#ffffffda 0 38%,#e1f1ff9a 59%,transparent 82%),radial-gradient(ellipse 27% 15% at 12% 67%,#ffffffd5 0 35%,#d9f0ff8f 58%,transparent 81%),radial-gradient(ellipse 30% 18% at 44% 72%,#ffffffd9 0 36%,#def2ff91 59%,transparent 82%),radial-gradient(ellipse 26% 15% at 78% 64%,#ffffffd5 0 35%,#d9f0ff8f 58%,transparent 81%),radial-gradient(ellipse 36% 20% at 96% 87%,#ffffffd1 0 34%,#d7efff86 57%,transparent 82%);animation:cloud-field 18s ease-in-out infinite alternate}
@keyframes cloud-field{from{transform:translate3d(-2.5%,1%,0) scale(1)}to{transform:translate3d(2.5%,-1.5%,0) scale(1.06)}}
.hero-inner{width:min(960px,calc(100% - 64px));padding:0;align-items:flex-start;z-index:2}.hero-copy{width:100%;padding-top:clamp(136px,21svh,240px)}
.hero-eyebrow{font:10px Consolas,monospace;color:#f5f7edbd;margin-bottom:13px}
#hero-title{font-size:72px;line-height:.98;font-weight:700;text-shadow:0 2px 24px #172b3220}
.hero-name{display:flex;align-items:flex-start;gap:16px;color:var(--lime)}.title-sparkle{display:block;width:52px;height:52px;margin-top:-8px}.title-sparkle svg{width:52px;height:52px;stroke-width:1.2}
.hero-portfolio{display:block;position:relative;font-size:58px;line-height:1.08;font-weight:500;margin-top:3px;width:max-content}.hero-signature{position:absolute;right:-44px;bottom:1px;font:italic 24px Georgia,serif;color:var(--lime);transform:rotate(-9deg)}
.hero-intro{margin-top:17px;display:block}.hero-intro p{font-size:14px;font-weight:400;line-height:1.65;color:#fff;text-shadow:0 2px 8px #14202780}
.scene-caption{position:absolute;z-index:3;bottom:190px;right:max(32px,calc((100% - 1060px)/2));color:#ffffffbc;gap:12px;font:8px Consolas,monospace}.scene-caption #motion-toggle{width:29px;height:29px;border-color:#ffffff50;background:#18201c44;color:#fff;margin:0}.scene-caption svg{width:12px;height:12px}
.scene-fallback{inset:0;display:flex;align-items:center;justify-content:center;opacity:1;background:#8998a7;color:#fff;font:12px Consolas,monospace}.ready .scene-fallback{opacity:0}.no-webgl .scene-fallback{background:url('/assets/island-fallback.jpg') center/cover no-repeat,#8998a7}.no-webgl .scene-fallback span{padding:10px;background:#263d4c44}.ready .scene-fallback span{display:none}
.work-section{position:relative;z-index:4;width:100%;margin-top:-153px;padding:0 0 65px;border:0}.project-rail{gap:18px;padding:12px 24px 20px;scroll-padding-left:24px;align-items:flex-start;min-height:308px;margin:0;width:100%;scroll-snap-type:none}
.project-rail.is-auto-playing{scroll-snap-type:none;cursor:default}
.project-card{width:184px;min-width:184px;transform-origin:50% 100%;transition:transform .25s}.project-card:nth-child(3n + 1){transform:rotate(-2deg)}.project-card:nth-child(3n + 2){transform:rotate(2deg)}.project-card:hover,.project-card:focus-visible{transform:translateY(-8px)}
.project-card .project-cover{aspect-ratio:.82;border-radius:8px;box-shadow:0 10px 30px #0004}.project-meta{margin-top:14px}.project-meta>span:first-child{font-size:8px;color:#b8bcb9}.project-meta>span:last-child{font-size:16px}.project-card h3{font-size:14px;font-weight:500;line-height:1.5;margin-top:3px}.project-card>p{display:none}.demo-label{font-size:7px;padding:3px 6px;left:10px;bottom:10px}.cover-open{width:24px;height:24px;bottom:9px;right:9px}.cover-open svg{width:13px;height:13px}
.project-card .mock-phone{border-width:3px;border-radius:13px}.project-card .phone-greeting{font-size:5px;padding:9px 5px 4px}.project-card .phone-greeting strong{font-size:6px}.project-card .phone-top{font-size:4px;padding:8px 5px 0}.project-card .phone-notch{height:5px}.project-card .phone-tile{margin:4px;padding:5px;height:38%;border-radius:4px}.project-card .phone-tile strong{font-size:8px;margin-top:6px}.project-card .phone-tile b{font-size:16px}.project-card .phone-tile>span{font-size:3px}.project-card .phone-list{padding:5px;font-size:5px}.project-card .phone-list i{height:7px;margin-top:4px}.project-card .phone-nav{font-size:8px;bottom:5px;left:7px;right:7px}
.project-card .mock-browser{width:123%;left:-8%;top:22%;height:58%}.project-card .dashboard-main{padding:12px 8px}.project-card .dashboard-main>strong{font-size:10px}.project-card .dashboard-body aside{padding:7px}.project-card .dashboard-metrics{gap:3px;margin-top:8px}.project-card .dashboard-metrics b{font-size:10px}.project-card .dashboard-chart{margin-top:6px}.project-card .chart-bars{gap:5px;padding:3px}.project-card .brand-sheet{padding:12px}.project-card .brand-card{padding:9px}.project-card .brand-card>span{font-size:5px}.project-card .pack-box{padding:8px}.project-card .book-front{padding:12px 9px}.project-card .book-front>span{font-size:3px}.project-card .book-front>b{margin-top:12px}.project-card .book-back{padding:24px 10px}.project-card .mock-website{width:116%;left:-4%;height:52%;top:26%}.project-card .web-head{padding:9px 11px}.project-card .web-content{padding:0 11px}
.work-index{padding-top:8px}.work-index .section-topline{margin:0 0 24px;align-items:center}.work-index h2{font-size:22px;line-height:1.4;font-weight:500}.work-index h2>span{font:9px Consolas,monospace;color:var(--muted);margin-left:13px;white-space:nowrap}.work-index .section-note{font-size:10px}.work-toolbar{margin-bottom:18px}.filter{padding:8px 12px;font-size:10px}.filter.active{background:var(--lime);color:#243113;border-color:var(--lime)}.filter.active span{color:#243113}.rail-footer{margin-top:0;font-size:8px}.draft-note{font-size:9px;color:#838a85;margin-top:18px}
.about-section,.strengths-section{padding-block:75px}.about-art,.strength-card,.contact-card,.project-dialog,.case-image-placeholder{border-radius:8px}.about-section h2,.strengths-section h2{font-size:35px}.contact-section{padding-block:80px}
@media(min-width:1700px){.project-card{width:220px;min-width:220px}.project-rail{min-height:360px}.work-section{margin-top:-175px}.scene-caption{bottom:215px}}
@media(max-width:1100px){#hero-title{font-size:64px}.hero-portfolio{font-size:52px}.hero-copy{padding-top:175px}.hero-inner{width:calc(100% - 120px)}.scene-caption{right:30px}.project-card{width:174px;min-width:174px}.project-rail{min-height:295px}.work-section{margin-top:-146px}}
@media(max-width:800px){.hero{height:calc(100svh - 55px);min-height:670px;max-height:1000px}.hero-inner{width:calc(100% - 80px)}.hero-copy{padding-top:160px}.site-header{width:calc(100% - 40px);top:18px}.site-header nav{gap:20px}.hero-portfolio{font-size:48px}.hero-signature{font-size:21px;right:-28px}.scene-caption{bottom:180px}.project-card{width:168px;min-width:168px}.work-section{margin-top:-145px}.work-index{width:calc(100% - 48px)}.project-rail{padding-inline:20px;scroll-padding-left:20px}.about-section h2,.strengths-section h2{font-size:31px}}
@media(max-width:600px){.site-header{height:43px;top:16px;width:calc(100% - 32px);padding:4px 5px}.brand{height:31px;font-size:19px;padding-inline:12px}.brand-symbol svg{width:16px;height:16px}.site-header nav a{font-size:9px}.nav-contact{font-size:9px;padding:7px 10px;gap:5px}.hero{height:calc(100svh - 45px);min-height:590px;max-height:900px}.hero-inner{width:calc(100% - 48px)}.hero-copy{padding-top:132px}.hero-eyebrow{font-size:8px;margin-bottom:13px}#hero-title{font-size:46px}.hero-portfolio{font-size:37px}.title-sparkle{width:32px;height:32px;margin-top:-4px}.title-sparkle svg{width:32px;height:32px}.hero-name{gap:7px}.hero-signature{font-size:16px;right:-18px;bottom:0}.hero-intro{margin-top:14px}.hero-intro p{font-size:11px;line-height:1.8}.scene-wrap{inset:0;width:100%;height:100%}.scene-caption{bottom:160px;right:18px;left:auto;font-size:6px;gap:8px}.scene-caption #motion-toggle{width:26px;height:26px}.project-rail{gap:14px;min-height:270px;padding:12px 18px 15px;scroll-padding-left:18px;margin:0}.project-card{width:148px;min-width:148px}.project-card h3{font-size:12px}.project-meta{margin-top:12px}.project-meta>span:first-child{font-size:7px}.work-section{margin-top:-130px;padding-bottom:45px}.work-index{width:calc(100% - 36px)}.work-index h2{font-size:20px}.work-index h2>span{font-size:7px;margin-left:8px}.work-index .section-topline{margin-bottom:20px}.rail-controls{display:flex}.round-button{width:28px;height:28px}.round-button svg{width:13px;height:13px}.work-toolbar{align-items:flex-start;gap:8px}.project-filters{gap:5px}.filter{padding:7px 9px;font-size:9px}.rail-footer{gap:15px}.draft-note{font-size:8px}.about-section,.strengths-section{padding-block:50px}.about-section h2,.strengths-section h2{font-size:28px}.hero:before{display:none}.scene-fallback{inset:0}}
@media(max-width:360px){#hero-title{font-size:40px}.hero-portfolio{font-size:32px}.hero-name{gap:6px}.hero-signature{font-size:14px}.title-sparkle svg{width:27px;height:27px}.hero-inner{width:calc(100% - 40px)}}
@media(max-height:650px) and (min-width:601px){.hero{height:calc(100svh - 40px);min-height:440px}.hero-copy{padding-top:125px}#hero-title{font-size:55px}.hero-portfolio{font-size:45px}.hero-intro p{font-size:12px}}

/* Monochrome glass title and a curved image-only rail. */
#hero-title{font-size:clamp(76px,7.36vw,107px);line-height:.88;letter-spacing:-4px}
.hero-name,.hero-portfolio{color:transparent;background:linear-gradient(180deg,#ffffffee 0%,#ffffff34 48%,#ffffffb5 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #ffffffaa;text-shadow:0 2px 0 #ffffff55,0 12px 28px #15222b35}
.hero-name{display:block}
.hero-portfolio{font-size:clamp(64px,5.6vw,82px)}
.title-sparkle,.hero-signature{display:none}
.project-rail{min-height:278px;align-items:flex-start}
.project-card{width:164px;min-width:164px;transform:translateY(var(--card-lift,0px)) rotate(var(--card-tilt,0deg));transition:transform .25s}
.project-card:nth-child(9n+1){--card-lift:16px;--card-tilt:-7deg}.project-card:nth-child(9n+2){--card-lift:6px;--card-tilt:-4deg}.project-card:nth-child(9n+3){--card-lift:-5px;--card-tilt:-2deg}.project-card:nth-child(9n+4){--card-lift:-12px;--card-tilt:1deg}.project-card:nth-child(9n+5){--card-lift:-16px;--card-tilt:3deg}.project-card:nth-child(9n+6){--card-lift:-11px;--card-tilt:1deg}.project-card:nth-child(9n+7){--card-lift:-4px;--card-tilt:-2deg}.project-card:nth-child(9n+8){--card-lift:7px;--card-tilt:4deg}.project-card:nth-child(9n+9){--card-lift:16px;--card-tilt:7deg}
.project-card:hover,.project-card:focus-visible{transform:translateY(calc(var(--card-lift,0px) - 8px)) rotate(var(--card-tilt,0deg))}
.project-meta,.project-card h3,.project-card>p{display:none}
.project-card .demo-label{display:none}.project-card .cover-open{opacity:0}.project-card:hover .cover-open,.project-card:focus-visible .cover-open{opacity:1}
@media(max-width:1100px){#hero-title{font-size:clamp(63px,7.36vw,85px)}.hero-portfolio{font-size:clamp(54px,5.6vw,68px)}.project-card{width:156px;min-width:156px}.project-rail{min-height:266px}}
@media(max-width:800px){#hero-title{font-size:clamp(50px,11.04vw,70px)}.hero-portfolio{font-size:clamp(44px,9.5vw,58px)}.project-card{width:146px;min-width:146px}.project-rail{min-height:248px}}
@media(max-width:600px){#hero-title{font-size:clamp(39px,11.68vw,50px);letter-spacing:-2px}.hero-portfolio{font-size:clamp(35px,9.6vw,42px)}.project-card{width:132px;min-width:132px}.project-rail{min-height:225px}}
@media(max-width:360px){#hero-title{font-size:37px}.hero-portfolio{font-size:33px}.project-card{width:124px;min-width:124px}}
/* DOM lettering is a static fallback. Only the WebGL letters play an entrance. */
.hero-name,.hero-portfolio{display:flex;gap:.13em;color:inherit;background:none;-webkit-text-fill-color:initial;-webkit-text-stroke:0;text-shadow:none}
.title-letter{display:block;flex-shrink:0;color:transparent;background:linear-gradient(180deg,#07111916 0%,#0711194b 54%,#ffffffa8 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.25px #08131ab8;text-shadow:0 1px 0 #ffffffc7,0 7px 16px #12212c33;opacity:0}
.hero-clouds{opacity:.48;filter:blur(7px);background-color:rgba(66,171,240,.68)}

.hero-clouds{display:none}
.hero-shade{background:linear-gradient(180deg,transparent 75%,#10121150 100%)}
.hero-copy{transform:translateY(-20px)}
#hero-title{line-height:1.32;min-height:0}.hero-portfolio{font-size:clamp(74px,6.76vw,98px);line-height:1.32;font-weight:700;margin-top:5px}
.hero-intro{margin-top:10px}
.glass-title-ready~.hero-inner .title-letter{opacity:0!important}
.title-entering .hero-eyebrow,.title-entering .hero-intro{opacity:0}.hero-eyebrow,.hero-intro{transition:opacity .5s}
.hero-intro p{color:#fff;text-shadow:0 1px 8px #13283999}.hero-eyebrow{color:#365363}
.title-replay{padding:6px 10px;border:1px solid #ffffff70;border-radius:30px;background:#18201c44;color:#fff;font:10px Arial,"Microsoft YaHei",sans-serif;white-space:nowrap}.title-replay:hover{background:#ffffff30}.title-replay[hidden]{display:none}
@media(max-width:600px){.title-replay{padding:5px 8px;font-size:9px}.scene-caption>span{display:none}}
@media(max-width:1100px){.hero-portfolio{font-size:clamp(57px,6.76vw,74px)}}
@media(max-width:800px){.hero-portfolio{font-size:clamp(44px,9.2vw,64px)}}
@media(max-width:600px){.hero-copy{transform:translateY(-12px)}.hero-portfolio{font-size:clamp(35px,10.67vw,46px)}}
@media(max-width:360px){.hero-portfolio{font-size:33px}}
.no-webgl~.hero-inner .title-letter,.title-fallback~.hero-inner .title-letter{opacity:1!important}
.no-webgl .scene-fallback{background:radial-gradient(ellipse at 15% 25%,#fff 0 15%,transparent 37%),radial-gradient(ellipse at 85% 68%,#fff 0 16%,transparent 40%),linear-gradient(#78c5ef,#d8effe)}