/* Deep-space product lab. All effects use CSS; product media stays real. */
:root{--paper:#070c14;--ink:#eaf2ff;--muted:#95a7bf;--accent:#71f5ce;--line:#233249;--white:#101a28;--green-dark:#54dab5;--serif:"Segoe UI","Microsoft YaHei",sans-serif;color-scheme:dark}
body{overflow-x:clip;background:radial-gradient(ellipse at 80% 6%,#12385470,transparent 36%),radial-gradient(ellipse at 10% 40%,#16234c45,transparent 32%),#070c14}
.hero-visual{overflow:hidden}.hero-copy,.project-body,.approach-intro,.approach-notes{min-width:0}
body::before{content:"";position:absolute;inset:0 0 auto;height:920px;pointer-events:none;background-image:linear-gradient(#8cc9ef08 1px,transparent 1px),linear-gradient(90deg,#8cc9ef08 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(#000,transparent);z-index:0}
main,.header,.footer{position:relative}::selection{background:#71f5ce;color:#071514}.header{background:#070c14d9;border-bottom:1px solid #20324b70}.nav-bar{border:0;min-height:82px}.brand-symbol{font-family:monospace;font-style:normal;letter-spacing:-4px;font-size:34px}.brand-symbol span{font-size:12px;right:-6px;top:-4px}.brand small{letter-spacing:1px}.nav-contact{border:1px solid #395168;border-radius:6px;padding:10px 16px;color:var(--accent)}
.hero{padding-top:72px;gap:0 44px}.hero-copy{position:relative;z-index:2}.hero .eyebrow{color:var(--accent);letter-spacing:2px;font-size:10px;margin-bottom:35px}.status-dot{box-shadow:0 0 14px #71f5ce;animation:signal 3s ease-in-out infinite}.hero-greeting{font-size:13px;letter-spacing:3px;color:#9fb0c6;margin-bottom:19px}.hero h1{font-size:clamp(44px,4.7vw,68px);letter-spacing:-2.8px;font-weight:700;line-height:1.2;margin-bottom:25px}.hero-line{display:block;background:linear-gradient(110deg,#a8eaff,#71f5ce 75%);background-clip:text;color:transparent}.name-period{font-family:monospace;margin-left:3px;color:var(--accent);font-weight:300;animation:signal 2s ease-in-out infinite}.hero-statement{font-size:22px;line-height:1.65;letter-spacing:0;font-weight:400;margin-bottom:21px}.hero-description{font-size:14px;line-height:1.95;max-width:480px;margin-bottom:20px}.ai-stack{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}.ai-stack span{font-size:10px;color:#b7d4e9;padding:6px 10px;border:1px solid #2b4259;background:#11233760;border-radius:4px;letter-spacing:.3px}.ai-stack span:first-child{color:var(--accent);border-color:#71f5ce55}.button{border-radius:5px;font-size:12px;min-height:46px;transition:transform .2s,background .2s,box-shadow .2s}.primary{color:#08201c;background:var(--accent);border:1px solid var(--accent);box-shadow:0 0 28px #71f5ce15;font-weight:600}.primary:hover{background:#a2ffe6;box-shadow:0 0 32px #71f5ce30;transform:translateY(-2px)}.text-button{border:1px solid #33485e;padding-inline:19px;background:#11203455}.text-button:hover,.secondary:hover{background:#182c40;color:var(--accent);border-color:#5a9caa}
.hero-visual{height:590px;margin-top:0;border-radius:14px;background:radial-gradient(ellipse at 50% 42%,#1a60772e,transparent 66%),linear-gradient(145deg,#102032aa,#09111d);border:1px solid #324d665c;box-shadow:inset 0 0 60px #1d587513,0 25px 80px #0004;perspective:1200px}
.hero-visual::before{content:"";position:absolute;inset:0;border-radius:14px;background:repeating-linear-gradient(0deg,transparent 0px,transparent 5px,#7ddcff03 6px);pointer-events:none;z-index:6}.hero-visual::after{content:"LIVE PRODUCT PREVIEW";position:absolute;bottom:15px;left:20px;color:#6c94ad;font-family:monospace;font-size:9px;letter-spacing:2px}.visual-topline{top:21px;left:21px;right:21px;color:#7cb4c9;font-family:monospace;font-size:8px;letter-spacing:1px}.visual-topline>span:last-child{color:var(--accent)}.visual-orbit{inset:20% 5%;border-color:#71f5ce35;transform:rotate(-22deg);box-shadow:0 0 40px #71f5ce09,inset 0 0 40px #71f5ce09;overflow:visible}.visual-orbit::after{inset:-35px 40px;border-color:#7ba3ff30;transform:rotate(65deg)}.hero-device{border-color:#85b8ce80;background:#b9eaff12;box-shadow:0 16px 40px #0008,0 0 25px #7ce4ff15;padding:4px}.hero-device>span{color:#9cc7d9;font-family:monospace;font-size:8px}.device-map{top:83px;left:12%;transform:rotate(-8deg);width:35%}.device-time{top:78px;right:10%;transform:rotate(9deg);width:29%}.device-ohm{bottom:61px;right:6%;width:72%;transform:rotate(-4deg)}.hero-device:hover{box-shadow:0 16px 50px #0008,0 0 30px #71f5ce40}.workbench-note{left:22px;bottom:29px;font-family:monospace;font-style:normal;font-size:10px;letter-spacing:1px;transform:none;color:var(--accent)}.visual-cross{font-family:monospace;font-size:30px;color:var(--accent);right:15px;bottom:215px}
.hero-facts{margin-top:50px;padding-block:25px;background:linear-gradient(90deg,#11243766,transparent);border-color:#2b415a}.hero-facts strong{font-family:"Segoe UI",sans-serif;font-weight:300;font-size:46px;letter-spacing:-2px}.hero-facts>div:first-child{padding-left:20px}.hero-facts>div>span{color:#9fb5ca}.hero-facts>p{font-size:11px}.section{padding-block:95px}.section-top .eyebrow{color:#74a0bd;font-family:monospace;font-size:10px}.section-top h2{font-weight:600;letter-spacing:-1px}.section-aside{font-size:12px;letter-spacing:1px}.section-description{color:#8ca2b9;line-height:1.9}.project-toolbar{border-color:var(--line)}.filter.active{color:var(--accent);border-color:var(--accent)}
.project-card{border-color:#23364c}.project-media{border:1px solid #344b645c;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#20465380,transparent 70%),#0e1a28!important;color:#9dd9df!important;overflow:hidden}.project-card:nth-child(2) .project-media{background:radial-gradient(ellipse,#46412280,transparent 75%),#161c24!important}.project-card:nth-child(3) .project-media{background:radial-gradient(ellipse,#49324e70,transparent 75%),#151b2a!important}.project-card:nth-child(4) .project-media{background:radial-gradient(ellipse,#33346590,transparent 75%),#101827!important}.project-media::after{content:"";position:absolute;inset:0;background-image:linear-gradient(#87b4cf08 1px,transparent 1px),linear-gradient(90deg,#87b4cf08 1px,transparent 1px);background-size:32px 32px;pointer-events:none}.project-sequence,.media-status{color:#b6d3e3;z-index:1}.media-watermark{color:#b8e1ee0c!important;font-family:monospace;font-style:normal}.media-arrow{background:#133345;color:var(--accent);border:1px solid #416478;z-index:1}.device-frame{box-shadow:0 22px 45px #0006;border-color:#7793a0;background:#e9f2f2}.project-subtitle{color:#a9d5df;font-size:18px}.project-body h3{color:#eaf2ff}.published{color:var(--accent)}.published::before{background:var(--accent);box-shadow:0 0 8px #71f5ce55}.tech-tags span{color:#a3b9d0;border-color:#33485e}.project-actions .project-detail{border-color:#5f9da8;color:var(--accent)}
.approach-section{background:linear-gradient(115deg,#10233899,#0b1421);position:relative;border-color:#293e55}.approach-intro h2{font-weight:500;font-size:40px;letter-spacing:-1px;line-height:1.5}.approach-intro>p:not(.eyebrow){max-width:360px;color:#99adc3;font-size:14px}.margin-note{font-family:monospace;font-size:10px;letter-spacing:1px}.approach-notes article{border-color:#2c4156;padding:27px 0}.step-number{font-family:monospace;font-style:normal;font-size:18px}.approach-notes h3{font-size:19px;color:#e4edfa}.approach-notes p{color:#9db0c7;font-size:14px}.step-tag{color:#7fd2c6;font-size:10px}.foundation{border-color:#2c4156;font-size:12px}.resume-viewer{border-radius:10px;overflow:hidden;border-color:#30455d;background:#101c2b}.pdf-toolbar,.resume-text{background:#111e2e}.pdf-pages{background:#0b1420;scrollbar-color:#3b5369 transparent}.pdf-page{color:#49576b;color-scheme:light}.pdf-page-label{color:#55657b}.contact-section{background:radial-gradient(ellipse at 15% 60%,#16474470,transparent 65%),#0d1926;border-top:1px solid #2f475a;color:var(--ink)}.contact-inner h2{font-family:inherit;font-weight:500;letter-spacing:-1px}.contact-inner .accent,.contact-inner .eyebrow{color:var(--accent)}.contact-inner p:last-child{color:#9ab2c8}.contact-links>a{border-color:#344d62}.contact-links>a:hover{color:var(--accent)}.copy-button{border-color:#345266;color:#a6d4de;border-radius:5px}.footer{color:#829bb4}
/* The detail viewer follows the same material and contrast system. */
.project-dialog{background:#101b29;border-color:#3a536c;box-shadow:0 30px 120px #0009;color:var(--ink)}.project-dialog::backdrop{background:#020710c9;backdrop-filter:blur(12px)}.project-dialog .dialog-header,.project-dialog .dialog-tabs,.project-dialog .tab-panel{background:#101b29}.project-dialog .dialog-tabs{border-color:#2b4055}.project-dialog .dialog-kicker{color:#8da7bd}.project-dialog .close-dialog,.project-dialog .dialog-back{background:#182b3e;border-color:#344b62;color:#b8cce1}.project-dialog .close-dialog:hover,.project-dialog .dialog-back:hover{background:#234258;color:#d8fff5;border-color:#55989d}.project-dialog .dialog-tabs button{color:#9fb3ca}.project-dialog .dialog-tabs button:hover{background:#1a3043;color:#ddf9ff}.project-dialog .dialog-tabs button[aria-selected=true]{background:#193b3d;border-color:#3b726c;color:#96f5d9}.project-dialog .overview-title{color:#e4f1ff;font-family:inherit;font-weight:500}.overview-label{color:#78c4c6}.overview-description p,.project-dialog .contribution-list li{color:#a4b6cb}.project-dialog .contributions-heading{color:#dceafa}.project-dialog .contribution-list li,.overview-facts>div{border-color:#2c4054}.contribution-number{color:#71f5ce}.overview-cover{background:radial-gradient(ellipse,#25485b,#172435);border-color:#3e596c}.overview-cover>span{color:#a9d7e0}.overview-facts dt,.project-dialog .overview-tech h3{color:#8ba2ba}.overview-facts dd{color:#c0cfdf}.overview-facts .overview-published{color:var(--accent)}.project-dialog .overview-tech .tech-tags span{background:#192b3e;border-color:#30495f;color:#a9c5d9}.project-dialog .dialog-bottom{background:#0d1723;border-color:#2a4057}.project-dialog .dialog-watch,.project-dialog .dialog-download{background:#71f5ce;color:#08241f;border-color:#71f5ce}.project-dialog .dialog-watch:hover{background:#a0ffe4;border-color:#a0ffe4}.project-dialog .gallery-stage{background:#0b131f;border-color:#2d4359}.project-dialog .gallery-controls button{background:#1a2b3f;border-color:#3a536d;color:#c4daef}.project-dialog .gallery-caption,.project-dialog .gallery-controls{color:#94aac0}.project-dialog #panel-video .text-button{color:#9abdd1}.project-dialog .project-video{background:#03080f}
@keyframes signal{0%,100%{opacity:1}50%{opacity:.45}}
@media(min-width:1500px){.hero{padding-top:80px}.hero h1{font-size:70px}.hero-visual{height:600px}}
@media(max-width:1100px){.hero{gap:0 30px;padding-top:50px}.hero h1{font-size:54px}.hero-visual{height:570px}.hero-statement{font-size:20px}.hero-description{font-size:13px}.hero-facts strong{font-size:40px}}
@media(max-width:800px){.hero h1{font-size:43px;letter-spacing:-2px}.hero .eyebrow{font-size:8px;letter-spacing:1px}.hero-visual{height:525px;margin-top:0}.device-map{top:100px}.device-time{top:100px}.device-ohm{bottom:90px}.hero-actions{gap:12px}.hero-actions .button{gap:14px}.hero-facts>div:first-child{padding-left:0}.hero-facts{padding-inline:16px}.approach-intro h2{font-size:33px}.approach-notes p{font-size:13px}}
@media(max-width:600px){.nav-bar{min-height:68px}.brand-symbol{font-size:31px}.hero{padding-top:35px}.hero .eyebrow{font-size:9px;margin-bottom:28px}.hero h1{font-size:clamp(43px,11vw,62px);margin-bottom:22px}.hero-greeting{font-size:11px;letter-spacing:2px}.hero-statement{font-size:21px;margin-bottom:18px}.hero-description{font-size:13px;line-height:1.95;max-width:100%}.ai-stack{margin-bottom:26px;gap:6px}.ai-stack span{font-size:9px;padding:6px 8px}.hero-actions .button{font-size:11px;padding-inline:16px;gap:20px}.hero-visual{margin-top:36px;height:445px;border-radius:12px}.visual-topline{font-size:7px;left:15px;right:15px}.device-map{top:66px;left:14%;width:34%}.device-time{top:65px;right:11%;width:28%}.device-ohm{bottom:58px}.workbench-note{font-size:8px;left:15px;bottom:31px}.hero-visual::after{font-size:7px;bottom:15px;left:15px}.hero-facts{margin-top:25px;padding:22px 14px 18px;gap:20px 10px}.hero-facts strong{font-size:37px}.hero-facts>div>span{font-size:9px}.section{padding-block:58px}.section-top h2{font-size:28px}.approach-intro h2{font-size:32px}.approach-intro>p:not(.eyebrow){font-size:13px}.project-subtitle{font-size:17px}.project-summary{font-size:13px}.contact-inner h2{font-size:38px}.foundation{font-size:10px}.project-dialog .overview-title{font-size:20px}}
@media(max-width:360px){.hero-visual{height:390px}.hero h1{font-size:42px}.hero-facts>div>span{font-size:8px}.nav-bar nav{gap:12px}.hero-actions .button{gap:12px;padding-inline:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}