:root{color-scheme:dark;--bg:#101116;--panel:#151720;--fg:#eef0f6;--dim:#a8aab8;--border:#30333f;--spectrum:linear-gradient(110deg,#69d9ff,#9b8aff 35%,#ed87d7 67%,#ffc487);font-family:"Geist","PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--fg)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid #69d9ff;outline-offset:6px;border-radius:2px}
img{display:block;max-width:100%}
p,h1,h2,h3,figure{margin:0}
.wrap{width:min(1200px, calc(100% - 96px));margin-inline:auto}
.header,.footer{display:flex;align-items:center;justify-content:space-between;min-height:80px;border-bottom:1px solid var(--border)}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:650;white-space:nowrap}
.brand small{font-size:12px;color:var(--dim);font-weight:500;margin-left:6px}
nav{display:flex;gap:30px}
nav a,.footer>a:last-child{font-size:14px;color:var(--dim);transition:color .2s}
nav a:hover,.footer>a:last-child:hover{color:var(--fg)}
.hero{padding-block:85px 64px;text-align:center}
.eyebrow{font-family:"IBM Plex Mono","SF Mono",monospace;font-size:13px;letter-spacing:.08em;color:#bec1d3}
.eyebrow i,.scene-top i{display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--spectrum);vertical-align:1px}
h1{margin-top:23px;font-size:clamp(3.6rem,8vw,7.1rem);font-weight:720;line-height:1.05;letter-spacing:-.085em}
h1 span{background:var(--spectrum);color:transparent;background-clip:text}
.hero h1{font-size:clamp(2rem,6.5vw,5.8rem);letter-spacing:-.065em}
.lede{max-width:520px;margin:26px auto 0;color:var(--dim);font-size:clamp(.96rem,1.6vw,1.12rem);line-height:1.85}
.button{display:inline-flex;gap:20px;align-items:center;margin-top:30px;background:var(--spectrum);color:#101116;font-size:14px;font-weight:700;padding:12px 19px;border-radius:8px;transition:transform .22s,box-shadow .22s}
.button:hover{transform:translateY(-3px);box-shadow:0 8px 30px #a48bff32}
.workflow{position:relative;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(240px,1fr);gap:52px;align-items:start;padding-bottom:48px}
.visual{position:sticky;top:clamp(25px,13vh,130px);z-index:1}
.scene{overflow:hidden;padding:23px 26px 19px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(ellipse at 56% 54%,#242235 0%,transparent 70%),#151720}
.scene-top,.scene-bottom{display:flex;align-items:center;justify-content:space-between;font:12px "IBM Plex Mono","SF Mono",monospace;color:#b0b3c4;letter-spacing:.045em}
.devices{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center;padding-block:clamp(38px,7.4vw,99px) 36px}
.device{min-width:0;text-align:center}
.monitor{position:relative;aspect-ratio:16/10;padding:6px;border:1px solid #77788b;border-radius:9px;background:#0b0d13;box-shadow:0 16px 27px #0006;overflow:hidden}
.picture{width:100%;height:100%;border-radius:4px;background:#4c7278 url("assets/lake.webp") center/cover;transition:filter .95s cubic-bezier(.2,.65,.2,1)}
.reference .picture{filter:saturate(.94)}
.target .picture{filter:sepia(.43) saturate(1.37) hue-rotate(-18deg) brightness(1.07)}
.scene[data-phase="3"] .target .picture{filter:saturate(.94)}
.stand{width:24%;height:clamp(10px,2vw,27px);margin:auto;background:linear-gradient(90deg,#343645,#57596c,#343645);clip-path:polygon(28% 0,72% 0,85% 82%,100% 82%,100% 100%,0 100%,0 82%,15% 82%)}
.device-label{margin-top:12px;font-size:12px;color:#b5b7c9;letter-spacing:.12em}
.phone{position:absolute;top:41%;left:50%;width:13%;aspect-ratio:.55;border-radius:16%;border:2px solid #aaa8bf;background:linear-gradient(150deg,#232536,#101219 60%);box-shadow:0 12px 34px #0009;opacity:0;transform:translate(-50%,-42%) scale(.85);transition:left .82s cubic-bezier(.24,.72,.18,1),transform .64s cubic-bezier(.24,.72,.18,1),opacity .35s;pointer-events:none}
.scene[data-phase="1"] .phone,.scene[data-phase="2"] .phone{opacity:1;transform:translate(-50%,-50%) rotate(-7deg)}
.scene[data-phase="1"] .phone{left:24%}
.scene[data-phase="2"] .phone{left:76%;transform:translate(-50%,-50%) rotate(7deg)}
.camera{position:absolute;top:7%;left:36%;width:28%;height:4%;background:#090a12;border-radius:20px}
.reticle{position:absolute;inset:32% 23%;border:1px solid #d2b5ff;border-radius:9%;box-shadow:0 0 14px #9b8aff65}
.phone i{position:absolute;left:35%;right:35%;height:2px;bottom:7%;border-radius:2px;background:var(--spectrum)}
.sweep{position:absolute;inset:6px;background:linear-gradient(180deg,transparent 20%,#9b8aff66 49%,#f7acdebb 50%,transparent 52%);opacity:0;pointer-events:none}
.scene[data-phase="1"] .reference .sweep,.scene[data-phase="2"] .target .sweep{animation:sweep 2.2s ease-in-out infinite}
@keyframes sweep{0%{transform:translateY(-50%);opacity:0}25%,75%{opacity:.58}100%{transform:translateY(50%);opacity:0}}
.scene-bottom{border-top:1px solid #333644;padding-top:16px}
.phase-dots{display:flex;gap:6px}
.phase-dots i{width:5px;height:5px;border-radius:50%;background:#515568}
.scene[data-phase="0"] .phase-dots i:nth-child(1),.scene[data-phase="1"] .phase-dots i:nth-child(2),.scene[data-phase="2"] .phase-dots i:nth-child(3),.scene[data-phase="3"] .phase-dots i:nth-child(4){background:#d4b5ff;box-shadow:0 0 10px #ac90ff}
.steps{position:relative;padding-left:26px}
.steps::before,.steps::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;border-radius:4px;background:#303341}
.steps::after{background:linear-gradient(#69d9ff,#9b8aff 36%,#ed87d7 72%,#ffc487);transform:scaleY(var(--progress,0));transform-origin:top;box-shadow:0 0 16px #a48bff60}
.step{display:flex;align-items:center;min-height:52vh;padding:22px 0 44px}
h2{font-size:clamp(2.05rem,4vw,4.15rem);line-height:1.12;letter-spacing:-.06em}
.step h2{font-size:clamp(1.9rem,3.2vw,3.45rem);margin-top:12px}
.step p:last-child,.section-intro>p:last-child,.feature-grid p,.note-list p{margin-top:15px;color:var(--dim);font-size:15px;line-height:1.82}
.features{padding-block:70px 54px;border-top:1px solid var(--border)}
.section-intro{max-width:600px}
.section-intro h2,.notes h2{margin-top:15px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:35px}
.feature-grid article{padding:25px;border:1px solid var(--border);border-radius:13px;background:var(--panel)}
.feature-mark{display:block;font-size:28px;color:#ccb2ff;margin-bottom:13px;line-height:1}
h3{font-size:17px;font-weight:650}
.product{padding-bottom:75px}
.shots{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(140px,.65fr);gap:24px;align-items:start;max-width:1000px;margin-inline:auto}
.shots img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border);background:var(--panel)}
.shots figcaption{font-size:13px;color:var(--dim);margin-top:9px}
.notes{padding-block:64px;display:grid;grid-template-columns:1fr 1.45fr;gap:34px;border-top:1px solid var(--border)}
.note-list article{padding:19px 0;border-bottom:1px solid var(--border)}
.note-list article:first-child{padding-top:3px}
.note-list p{margin-top:6px}
.footer{border-bottom:0;border-top:1px solid var(--border);min-height:86px}
@media(max-width:820px){.wrap{width:calc(100% - 40px)}.workflow{display:block}.visual{top:12px}.scene{padding:16px 16px 13px}.devices{padding-block:34px 24px}.step{min-height:43vh;padding-bottom:28px;align-items:flex-end}.steps{margin-top:12px}.step h2 br{display:none}.feature-grid{grid-template-columns:1fr}.features{padding-top:52px}.notes{grid-template-columns:1fr;gap:23px}.hero{padding-block:59px 46px}}
@media(max-width:500px){.header{min-height:66px}nav{gap:13px}nav a{font-size:12px}.brand{font-size:17px;gap:5px}.brand small{display:none}.brand img{width:30px;height:30px}.scene-top,.scene-bottom{font-size:10px}.devices{padding-block:25px 18px}.phone{width:16%}.monitor{padding:4px}.shots{grid-template-columns:minmax(0,1.7fr) minmax(90px,.75fr);gap:9px}.shots figcaption{font-size:11px}.steps{padding-left:18px}.step h2{font-size:1.9rem}.features{padding-bottom:38px}.product{padding-bottom:51px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.header nav .nav-download{color:#dac5ff;font-weight:650}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px;margin-top:30px}
.hero-actions .button{margin-top:0}
.hero-guide{color:var(--dim);font-size:14px}
.hero-guide:hover{color:var(--fg)}
.hero-guide span{margin-left:5px}
.download-main{padding-block:clamp(55px,10vh,100px) 66px}
.download-intro h1{margin-top:0;font-size:clamp(2.5rem,7vw,5.8rem)}
.download-intro .lede{margin:20px 0 0}
.download-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:40px}
.download-card{position:relative;overflow:hidden;padding:clamp(20px,4vw,42px);border:1px solid var(--border);border-radius:14px;background:var(--panel)}
.download-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--spectrum)}
.download-card h2{margin-top:14px;font-size:clamp(2rem,4.5vw,3.65rem)}
.download-instructions,.download-status{color:var(--dim);font-size:14px;line-height:1.75}
.download-instructions{margin-top:14px}
.download-card .button{margin-top:24px}
.download-status{margin-top:20px}
@media(max-width:580px){.download-grid{grid-template-columns:1fr;margin-top:28px}.download-main{padding-bottom:46px}}
@media(max-width:420px){.header nav{gap:10px}.header nav a{font-size:11px}}