@property --beam-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
:root{color-scheme:dark;--bg:#090909;--text:#ebebeb;--muted:#929292;--accent:#bfbfbf;--line:#a4a4a424}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:radial-gradient(ellipse at 65% 8%,#29292925,transparent 35%),var(--bg);color:var(--text);font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.7}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:#95959555}main{max-width:1200px;margin:auto;padding:0 32px}.site-nav{max-width:1360px;margin:auto;padding:24px 48px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #ffffff09}.identity{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;white-space:nowrap}.identity svg{width:31px;fill:var(--accent)}.identity small{display:block;font-size:8px;letter-spacing:2.5px;font-weight:400;color:#7c7c7c}.site-nav nav{display:flex;gap:30px;color:#a3a3a3;font-size:12px}.site-nav nav a:hover,.text-link:hover,footer a:hover{color:#dbdbdb}.button{display:inline-flex;justify-content:center;align-items:center;gap:28px;background:linear-gradient(120deg,#252525,#171717);border:1px solid #a9a9a94d;border-radius:10px;padding:12px 24px;color:#e7e7e7;font-size:13px;transition:background .2s,box-shadow .2s;position:relative}.button:hover{background:linear-gradient(120deg,#313131,#242424);box-shadow:0 0 28px #9e9e9e18}.button.small{font-size:12px;padding:8px 16px;gap:18px}.primary{padding:14px 27px;font-size:14px}.button span{font-size:19px}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:25px;align-items:center;min-height:620px;padding:70px 0 66px}.eyebrow{font-size:10px;letter-spacing:2.2px;color:#979797;display:flex;align-items:center;gap:9px;margin:0 0 20px}.spark{display:inline-block;width:6px;height:6px;background:#dbdbdb;box-shadow:0 0 13px #a1a1a1;transform:rotate(45deg);flex:none}.hero h1{font-size:clamp(38px,4.4vw,62px);letter-spacing:-2px;line-height:1.3;font-weight:600;margin:0 0 22px}.iridescent{background:linear-gradient(105deg,#f5f5f5 0%,#d2d2d2 35%,#aaaaaa 70%,#dbdbdb);color:transparent;background-clip:text}.hero-description{max-width:415px;color:#a8a8a8;font-size:14px;line-height:1.95}.hero-actions{display:flex;align-items:center;gap:26px;margin:30px 0 24px}.text-link{color:#9f9f9f;font-size:12px}.text-link span{margin-left:10px}.hero-notes{display:flex;gap:17px;flex-wrap:wrap;font-size:10px;color:#6d6d6d}.hero-notes span+span:before{content:'·';padding-right:17px;color:#9b9b9b}.hero-art{position:relative;height:470px;display:flex;align-items:center;justify-content:center;isolation:isolate}.art-glow{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(ellipse,#5e5e5e35,transparent 70%);filter:blur(25px);z-index:-1}.orbit{position:absolute;inset:18% -3%;border:1px solid #8f8f8f16;border-radius:50%;transform:rotate(-28deg);z-index:-1}.orbit-two{inset:30% -8%;transform:rotate(28deg)}.demo-phone{width:155px;height:342px;border-radius:25px;padding:5px;background:linear-gradient(135deg,#595959,#1e1e1e 40%,#696969);box-shadow:0 20px 55px #00000088;position:relative;flex:none}.phone-left{transform:rotate(-13deg) translate(15px,10px);z-index:1;opacity:.65}.phone-right{transform:rotate(13deg) translate(-15px,10px);z-index:1;opacity:.72}.phone-center{width:184px;height:406px;z-index:2;transform:translateY(-10px)}.demo-screen{height:100%;border-radius:21px;position:relative;overflow:hidden;text-align:center;padding-top:38px}.midnight{background:linear-gradient(145deg,#060d20,#16404e 60%,#478c9b)}.sky{background:linear-gradient(150deg,#203451,#638cbd 60%,#c6dded)}.dusk{background:linear-gradient(145deg,#382335,#9d655d 65%,#d1a891)}.demo-screen strong{font-size:43px;font-weight:300;display:block;position:relative;z-index:2;letter-spacing:-2px;line-height:1.3}.phone-center strong{font-size:52px}.demo-date{font-size:7px;color:#e5e5e5bd;position:relative;z-index:2}.ribbon{position:absolute;width:190px;height:470px;border:18px solid #c7e5f835;border-radius:50%;left:20%;top:20%;transform:rotate(-32deg);box-shadow:inset 0 0 0 18px #d9c4ff16,0 0 0 26px #acd0f016}.phone-center .ribbon{border-color:#c8e6f866}.demo-bar{position:absolute;bottom:8px;left:35%;right:35%;height:2px;background:#ffffff99;border-radius:4px}.glass-window{position:absolute;left:9%;right:9%;top:45%;height:22%;border:1px solid #e9eaff97;border-radius:14px;background:linear-gradient(135deg,#e7edff25,#6c86a620);backdrop-filter:blur(2px);box-shadow:inset 2px 3px 6px #e4efff45,inset -2px -2px 9px #21385345,0 0 9px #cbdeff25;animation:glass-drift 7s ease-in-out infinite}.phone-tag{position:absolute;top:calc(100% + 15px);left:10px;right:10px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#aaaaaa}.phone-tag i{font-style:normal;color:#636363}.art-caption{position:absolute;bottom:-7px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:11px;font-size:10px;color:#969696;letter-spacing:2px}.art-caption small{color:#606060;font-size:8px;letter-spacing:0}.section{padding:70px 0;border-top:1px solid #aeaeae15;scroll-margin-top:20px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:30px}.section-heading .eyebrow{margin-bottom:10px}.section-heading h2{font-size:29px;line-height:1.4;font-weight:500;letter-spacing:-.8px;margin:0}.section-heading>p{max-width:315px;color:#8a8a8a;font-size:12px;margin:0 0 3px}.effect-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.effect-card,.principle-card{border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#171717b0,#121212);padding:14px;box-shadow:inset 0 1px #dbdbdb08}.effect-card{transition:transform .3s,border-color .3s}.effect-card:hover{transform:translateY(-4px);border-color:#aeaeae65}.effect-art{height:95px;border-radius:8px;overflow:hidden;position:relative}.effect-heading{display:flex;align-items:center;justify-content:space-between;margin-top:13px}.effect-heading h3{font-size:13px;font-weight:500;margin:0}.effect-heading span{font-size:9px;color:#6f6f6f}.effect-card p{font-size:11px;color:#8a8a8a;line-height:1.8;margin:8px 0 0}.metal{background:repeating-radial-gradient(ellipse at 95% 120%,#080a10 0%,#30303c 13%,#aeb3c2 20%,#edf2ff 21%,#282730 24%,#080a12 36%)}.fluid{background:radial-gradient(ellipse at 50% 80%,#7487cd 10%,#b29acf 25%,#4f496f 42%,#171b2d 65%)}.kaleido{background:repeating-conic-gradient(from 30deg,#14172e 0deg 25deg,#5c95a6 25deg 30deg,#d6a5ba 30deg 40deg,#282041 40deg 60deg)}.raster{background:repeating-linear-gradient(90deg,#0e1022 0 7px,#4377a4 9px,#161b31 15px)}.softglass{background:radial-gradient(ellipse at 50% 10%,#f1ded45c,transparent 50%),linear-gradient(140deg,#494569 10%,#b8bad5 52%,#3a354f 58%,#171a27)}.sphere{background:radial-gradient(circle at 52% 95%,#100f24 10%,#5b397e 34%,#d0b2f3 38%,#615588 41%,#171425 47%,#0a0b12 70%)}.water{background:repeating-radial-gradient(ellipse at 30% 45%,#d2dbe4 0px,#657588 9px,#172436 14px,#c6cdd9 21px,#90a0ad 35px)}.opening{background:linear-gradient(135deg,#233e61,#719ebb)}.opening div{position:absolute;inset:22% 18%;border-radius:12px;border:1px solid #ddecffae;box-shadow:inset 2px 3px 7px #e7f0ff66,inset -2px -2px 9px #24425d66;background:#c7d5f115}.principle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.principle-card{padding:23px 20px}.card-index{font-size:9px;letter-spacing:1.5px;color:#9a9a9a}.principle-card h3{font-size:17px;font-weight:500;margin:14px 0 10px}.principle-card p{color:#999999;font-size:12px;line-height:1.9}.principle-card .note{font-size:10px;color:#767676;margin:15px 0 0}.state-diagram{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:26px}.state-diagram>span{background:#1b1b1b;border:1px solid #b0b0b02b;padding:10px 11px;border-radius:8px;font-size:10px;color:#cacaca;text-align:center}.state-diagram small{display:block;color:#7d7d7d;font-size:8px}.state-diagram b{color:#6e6e6e;font-weight:400}.glass-diagram{height:70px;display:flex;align-items:center;justify-content:space-around;border-radius:10px;background:linear-gradient(90deg,#273554,#69819a);position:relative;margin-top:22px;font-size:9px;color:#d9e3f0}.sample-glass{height:48px;width:48%;border:1px solid #e9e4ffac;border-radius:12px;display:grid;place-items:center;background:#dce5ff12;box-shadow:inset 2px 2px 5px #e4efff59,inset -3px -3px 7px #24364a55;backdrop-filter:blur(2px)}.timing-diagram{margin:31px 0 28px}.timing-diagram>div:first-child{display:flex;justify-content:space-between;font-size:9px;color:#b2b2b2;margin-bottom:12px}.timing-track{height:5px;border-radius:8px;background:#2e2e2e;overflow:hidden}.timing-track i{display:block;width:95%;height:100%;background:linear-gradient(90deg,#6d6d6d,#dbdbdb)}.render-note{display:flex;align-items:center;gap:18px;margin-top:23px;padding:20px 24px;border:1px solid #a6a6a61c;border-radius:12px;background:#12121265}.render-note strong{font-size:12px;font-weight:500;color:#cdcdcd}.render-note p{font-size:11px;color:#868686;margin:5px 0 0}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.steps article{position:relative;padding-top:17px;border-top:1px solid #a1a1a130}.steps article>span{font-size:10px;color:#999999;letter-spacing:2px}.steps h3{font-size:16px;font-weight:500;margin:12px 0 8px}.steps p{font-size:12px;color:#8c8c8c;line-height:1.9;max-width:280px}.export-note{font-size:10px;color:#676767;margin:20px 0 0}.final-cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:55px;padding:32px 38px;background:radial-gradient(ellipse at 20% 10%,#4141413d,transparent 70%),#111111;border:1px solid #a7a7a735;border-radius:17px}.final-cta .eyebrow{margin-bottom:9px}.final-cta h2{font-size:29px;font-weight:500;margin:0}.beam::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--beam-angle),transparent 0deg 280deg,#96969644 295deg,#ededed 310deg,#9d9d9d44 325deg,transparent 345deg);mask:linear-gradient(#ffffff 0 0) content-box,linear-gradient(#ffffff 0 0);mask-composite:exclude;animation:beam-orbit 14s linear infinite}footer{max-width:1296px;margin:auto;padding:22px 48px 32px;border-top:1px solid #ffffff0b;display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#6c6c6c;letter-spacing:1px}@keyframes beam-orbit{to{--beam-angle:360deg}}@keyframes glass-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(20px)}}
@media(max-width:1050px){.site-nav{padding:20px 28px}.site-nav nav{gap:18px}.hero{gap:10px;min-height:550px;padding:55px 0}.hero h1{font-size:43px}.hero-art{transform:scale(.86);transform-origin:center;width:110%;margin-left:-5%}.demo-phone{width:125px;height:280px}.phone-center{width:160px;height:354px}.effect-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.principle-card{padding:18px 15px}.section-heading h2{font-size:25px}.state-diagram>span{padding:9px 5px}.hero-notes{gap:10px}.hero-notes span+span:before{padding-right:10px}}
@media(max-width:720px){html{scroll-padding-top:20px}main{padding:0 22px}.site-nav{padding:17px 22px;gap:10px}.identity{font-size:13px}.identity small{font-size:7px;letter-spacing:1.5px}.identity svg{width:26px}.site-nav nav{display:none}.button.small{padding:7px 12px;font-size:10px;gap:8px}.hero{grid-template-columns:1fr;padding:44px 0 34px;gap:30px}.hero h1{font-size:43px;letter-spacing:-1.5px}.hero-description{font-size:13px;max-width:440px}.hero-actions{gap:18px;margin:24px 0 20px}.primary{padding:12px 22px}.hero-notes{font-size:9px}.hero-art{height:400px;width:100%;margin:0;transform:none}.demo-phone{width:105px;height:240px;border-radius:20px}.phone-center{width:146px;height:326px;transform:translateY(-6px)}.demo-screen{border-radius:17px;padding-top:28px}.demo-screen strong{font-size:31px}.phone-center strong{font-size:43px}.demo-date{font-size:5px}.phone-left{transform:rotate(-12deg) translateX(14px)}.phone-right{transform:rotate(12deg) translateX(-14px)}.ribbon{width:145px;height:350px;left:18%}.art-caption{bottom:0}.section{padding:40px 0}.section-heading{display:block;margin-bottom:22px}.section-heading>p{margin-top:12px;max-width:100%}.section-heading h2{font-size:24px}.effect-grid{gap:11px}.effect-card{padding:11px;border-radius:11px}.effect-art{height:84px}.effect-card p{font-size:10px}.principle-grid{grid-template-columns:1fr}.principle-card{padding:22px}.principle-card p{max-width:100%}.state-diagram{justify-content:center;gap:18px}.state-diagram>span{padding:11px 19px}.steps{grid-template-columns:1fr;gap:16px}.steps p{max-width:none}.final-cta{padding:25px;display:block;margin-top:30px}.final-cta h2{font-size:26px}.final-cta .button{margin-top:22px;width:100%}.final-cta .eyebrow{font-size:8px}.render-note{padding:17px;align-items:flex-start}.render-note .spark{margin-top:9px}footer{padding:20px 22px;font-size:8px;flex-wrap:wrap}footer>span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.beam::before,.glass-window{animation:none}.effect-card,.button{transition:none}}

.hero-art{overflow:clip}main{min-width:0}.effect-grid>*{min-width:0}

.hero-art{height:490px}.art-caption{bottom:2px}@media(max-width:720px){.hero-art{height:420px}}

:root{--bg:#090909;--text:#f4f4f4;--muted:#aaa;--accent:#eee;--line:#ffffff1c}.hero-description{color:#b6b6b6}.section-heading>p,.effect-card p,.principle-card p,.steps p{color:#aaa}.iridescent{background:linear-gradient(105deg,#fff,#d1d1d1);background-clip:text;color:transparent}

footer{flex-wrap:wrap;align-items:center}footer .icp-record{color:#aaa;font-size:10px;letter-spacing:0;white-space:nowrap;text-decoration:none}footer .icp-record:hover{color:#fff;text-decoration:underline}.icp-record[hidden]{display:none!important}

/* Keep the landing page light while the editor is the main destination. */
.beam::before{animation:none;background:linear-gradient(120deg,#c4deef66,transparent 70%)}
.section{content-visibility:auto;contain-intrinsic-size:auto 700px;scroll-margin-top:24px}
.button:focus-visible,.text-link:focus-visible,.site-nav a:focus-visible{outline:2px solid #c4deef;outline-offset:4px}
@media(max-width:660px){.site-nav{gap:10px;flex-wrap:wrap}.site-nav>.button{font-size:11px;padding:9px 12px}.hero-notes{flex-wrap:wrap;row-gap:8px}}