.hero{grid-template-columns:1fr 1.12fr;gap:32px}.hero-art.connection-demo{display:block;height:510px;min-width:0;isolation:isolate}.demo-heading{display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:1.2px;color:#5f7250;height:32px}.demo-badge{margin-left:auto;border:1px solid #d0dec2;border-radius:20px;padding:5px 8px;font-size:7px}.demo-stage{height:375px;position:relative}.pc{position:absolute;filter:drop-shadow(0 18px 20px #1c38251a)}.pc-remote{width:79%;top:13px;right:0;z-index:1}.pc-local{width:74%;left:-9px;bottom:0;z-index:3}.pc-label{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:600;margin-bottom:7px;color:#40513e}.pc-label>span{font-size:8px;font-weight:700;background:#dfead4;border:1px solid #ceddc0;border-radius:4px;padding:3px 5px}.pc-label i{margin-left:auto;font-size:8px;color:#8a9c7b;font-style:normal}.pc-frame{border:5px solid #24313c;border-bottom-width:7px;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #fff8}.pc-title{background:#f8faf7;display:flex;align-items:center;gap:5px;padding:5px 7px;font-size:6px;height:23px}.pc-title img{height:12px;width:12px}.pc-title>span{margin-left:auto;color:#8b948d;font-size:7px}.pc-wallpaper{height:175px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 30% 10%,#d6e6fa,transparent 70%),linear-gradient(135deg,#8aafe5,#587fd0 55%,#274a94)}.pc-local .pc-wallpaper{background:radial-gradient(ellipse at 10% 0,#e0edce,transparent 60%),linear-gradient(135deg,#acc494,#6b9885 60%,#3e6867);height:172px}.bloom{position:absolute;width:220px;height:220px;border-radius:40% 60% 35% 65%;border:23px solid #c7e0ff52;box-shadow:inset 0 0 35px #3455ab66,0 0 0 16px #d2e4ff20,0 0 0 34px #d2e4ff10;right:5px;top:-45px;transform:rotate(-35deg);pointer-events:none}.bloom-b{width:170px;height:170px;right:-25px;top:70px;border-color:#bfdcff3a;transform:rotate(35deg)}.pc-local .bloom{border-color:#d9ebc94a;box-shadow:inset 0 0 30px #427f7760,0 0 0 18px #e1f0d020,0 0 0 35px #e1f0d010}.pc-taskbar{position:absolute;bottom:0;left:0;right:0;height:22px;display:flex;align-items:center;justify-content:center;gap:14px;background:#edf3ffb5;backdrop-filter:blur(15px);font-size:15px;z-index:7;color:#366bb2;border-top:1px solid #ffffff70}.pc-taskbar small{position:absolute;right:9px;font-size:6px;color:#4b5e74}.monitor-foot{width:58px;height:15px;background:linear-gradient(90deg,#9faab0,#d8e0e0,#9faab0);margin:auto;clip-path:polygon(30% 0,70% 0,80% 80%,100% 85%,100% 100%,0 100%,0 85%,20% 80%)}.laptop-base{width:108%;margin-left:-4%;height:8px;border-radius:0 0 50% 50%;background:linear-gradient(#c9d3d5,#87969c);box-shadow:0 4px 8px #20383115}.join-glass,.permission-glass{position:absolute;border-radius:9px;background:#f8fbf5e8;border:1px solid #fff9;box-shadow:0 12px 20px #1a38582a;backdrop-filter:blur(14px);z-index:4;transition:opacity .55s,transform .65s cubic-bezier(.16,1,.3,1)}.join-glass{width:158px;left:50%;top:12px;transform:translateX(-50%);padding:10px 12px}.join-glass .mini-logo{display:inline-block;width:18px;height:18px;min-width:18px;min-height:18px;vertical-align:middle}.join-glass strong{font-size:8px;margin-left:5px}.join-glass small{font-size:6px;display:block;margin:9px 0 4px;color:#6c786b}.fake-input{font-size:8px;padding:6px;border:1px solid #d4dfcd;background:#fff9;border-radius:4px;color:#53614d;letter-spacing:.8px}.join-button{display:block;background:#c1f176;font-size:7px;text-align:center;padding:6px;border-radius:4px;margin-top:7px}.permission-glass{width:180px;top:26px;left:50%;transform:translate(-50%,10px) scale(.92);padding:13px;text-align:center;opacity:0}.permission-glass img{width:22px;height:22px;display:block;margin:0 auto 7px}.permission-glass strong{font-size:9px;display:block}.permission-glass small{display:block;font-size:7px;margin:6px 0 9px;color:#66736b}.permission-allow{display:block;background:#c1f176;border-radius:4px;padding:6px;font-size:8px}.permission-allow b{display:none}.desk-folder{position:absolute;top:12px;left:14px;font-size:6px;color:#fff;text-shadow:0 1px 3px #0005;display:flex;flex-direction:column;align-items:center;gap:5px}.desk-folder>span,.folder-small{display:inline-block;width:24px;height:17px;background:linear-gradient(#ffe198,#eab650);border-radius:2px;position:relative;box-shadow:0 2px 3px #0001}.desk-folder>span:before,.folder-small:before{content:'';position:absolute;top:-3px;left:0;width:45%;height:4px;background:#ecc26b;border-radius:2px 2px 0 0}.folder-small{width:13px;height:9px}.folder-small:before{top:-2px;height:3px}.permission-glass~.remote-pointer{opacity:0}.demo-pointer{position:absolute;width:19px;height:23px;z-index:9;transition:top 1s cubic-bezier(.22,.7,.2,1),left 1s cubic-bezier(.22,.7,.2,1),opacity .4s;pointer-events:none;filter:drop-shadow(0 2px 2px #0002)}.demo-pointer svg{width:100%;height:100%;fill:#18362e;stroke:#fff;stroke-width:1.5;overflow:visible}.demo-pointer>span{position:absolute;left:15px;top:22px;background:#203b34;color:white;border-radius:3px;font-size:6px;padding:3px 5px;white-space:nowrap}.local-pointer{left:68%;top:113px}.remote-pointer{left:69%;top:100px}.mirror-view{position:absolute;inset:0 0 22px;background:radial-gradient(ellipse at 35% 0,#c4dcf4,transparent 70%),linear-gradient(135deg,#83a9e0,#4b73c5);opacity:0;transition:opacity .6s}.mirror-banner{height:18px;background:#183147cc;color:#f0f6ee;font-size:6px;padding:5px 8px}.mirror-banner>span{color:#c1f176;margin-right:4px}.mirror-banner small{float:right;font-size:5px;opacity:.7}.mirror-view .desk-folder{top:29px}.explorer{position:absolute;inset:24px 16px 32px 47px;background:#f5f8fbea;border:1px solid #ffffffa0;border-radius:7px;box-shadow:0 9px 20px #14244433;backdrop-filter:blur(16px);z-index:5;opacity:0;transform:translateY(15px) scale(.9);transform-origin:10% 10%;transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1)}.explorer-title{padding:7px 9px;font-size:7px;display:flex;gap:7px;align-items:center}.explorer-title>span:last-child{margin-left:auto;font-size:6px;color:#7b8993}.explorer-toolbar{background:#ffffff60;border-top:1px solid #e1e7ed;border-bottom:1px solid #e1e7ed;padding:5px 7px;font-size:6px;color:#677888}.explorer-toolbar>span{margin-left:5px;background:#fff9;padding:3px 7px;border-radius:4px}.explorer-body{display:flex;height:55px;font-size:6px}.explorer-body aside{line-height:2.2;padding:7px;width:75px;border-right:1px solid #dfe6ed;color:#80909b;white-space:nowrap}.explorer-body aside b{color:#2d5473}.explorer-body>div{padding:8px 10px;display:grid;grid-template-columns:20px 1fr;gap:3px 6px;align-content:center}.paper-icon{height:25px;width:18px;background:repeating-linear-gradient(0deg,transparent 0 4px,#b3c7dc 4px 5px,transparent 5px 6px),#fff;border:4px solid #fff;box-shadow:0 0 0 1px #d2dfeb;grid-row:span 2}.explorer-body small{font-size:5px;color:#85939e}.mirror-view .explorer{inset:37px 13px 11px 42px}.mirror-view .explorer-body{height:45px}.link-track{position:absolute;left:15%;top:93px;width:80%;height:190px;border:1px dashed #9ab779;border-radius:40px;opacity:.55}.link-packet{position:absolute;width:6px;height:6px;border-radius:50%;background:#82bb3c;box-shadow:0 0 0 4px #b8df8233;top:-3px;left:0;animation:packet-move 3s linear infinite}.link-packet.second{animation-delay:-1.5s}.connection-pill{position:absolute;bottom:45px;right:-9px;z-index:5;font-size:8px;padding:10px 12px;border:1px solid #d4e4c6;background:#f8fff3e8;backdrop-filter:blur(12px);border-radius:30px;box-shadow:0 8px 20px #284b2015;display:flex;align-items:center;gap:6px;transition:background .4s}.connection-led{height:6px;width:6px;border-radius:50%;background:#b0baa8}.demo-story{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 0 0;margin-top:6px}.demo-story>div:first-child{min-height:64px}.demo-story strong{font-size:15px;letter-spacing:-.3px;display:block;margin-top:6px}.demo-story p{font-size:10px;line-height:1.6;color:#6e7b66;margin:6px 0 0;max-width:325px}#demo-counter{font-size:8px;color:#7e9767;letter-spacing:1.5px}.demo-progress{display:flex;gap:5px;flex-shrink:0}.demo-progress button{padding:0;width:22px;height:24px;border:0;background:transparent;cursor:pointer;position:relative}.demo-progress button:after{content:'';position:absolute;left:0;right:0;top:10px;height:4px;border-radius:4px;background:#d7e2cc;transition:background .3s}.demo-progress button[aria-pressed=true]:after{background:#709a44}.connection-demo[data-stage="0"] .link-packet{animation-play-state:paused;opacity:0}.connection-demo[data-stage="1"] .permission-glass{opacity:1;transform:translate(-50%,0) scale(1)}.connection-demo[data-stage="1"] .remote-pointer{opacity:1;left:60%;top:124px}.connection-demo[data-stage="1"] .local-pointer{left:55%;top:111px}.connection-demo[data-stage="2"] .join-glass,.connection-demo[data-stage="3"] .join-glass{opacity:0;transform:translate(-50%,10px) scale(.92)}.connection-demo[data-stage="2"] .mirror-view,.connection-demo[data-stage="3"] .mirror-view{opacity:1}.connection-demo[data-stage="2"] .remote-pointer,.connection-demo[data-stage="3"] .remote-pointer{opacity:1}.connection-demo[data-stage="2"] .connection-led,.connection-demo[data-stage="3"] .connection-led{background:#74ad35;box-shadow:0 0 0 3px #b2d88940}.connection-demo[data-stage="2"] .pc-label i,.connection-demo[data-stage="3"] .pc-label i{color:#6eab30}.connection-demo[data-stage="3"] .explorer{opacity:1;transform:translateY(0) scale(1);transition-delay:1.1s}.connection-demo[data-stage="3"] .local-pointer{left:12%;top:44px}.connection-demo[data-stage="3"] .remote-pointer{left:12%;top:27px}.connection-demo[data-stage="3"] .demo-pointer:after{content:'';position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;border:2px solid #c1f176;opacity:0;animation:click-ring 1.1s ease-out 1s 1}.connection-demo[data-stage="3"] .link-track{border-color:#71a73e}.motion-off .link-packet{display:none}
@keyframes packet-move{0%{left:0;top:-3px}45%{left:98%;top:-3px}50%{left:calc(100% - 3px);top:10px}95%{left:calc(100% - 3px);top:95%}100%{left:98%;top:calc(100% - 3px)}}@keyframes click-ring{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(2.3)}}
@media(min-width:1400px){.hero{gap:45px}.hero-art.connection-demo{height:540px}.demo-stage{height:400px}.pc-wallpaper{height:190px}.pc-local .pc-wallpaper{height:185px}}
@media(max-width:1050px) and (min-width:761px){.hero{grid-template-columns:.9fr 1.1fr;gap:22px}.hero h1{font-size:45px}.hero-art.connection-demo{height:470px}.demo-stage{height:335px}.pc-wallpaper,.pc-local .pc-wallpaper{height:155px}.pc-title{height:20px}.pc-local{width:78%;left:-2px}.pc-remote{width:82%}.join-glass{padding:7px 10px}.permission-glass{top:15px;width:165px;padding:10px}.connection-pill{right:-5px;bottom:32px;font-size:7px;padding:8px}.demo-story{gap:8px}.demo-progress button{width:16px}.demo-story p{font-size:9px}.demo-heading{font-size:7px;letter-spacing:.5px}}
@media(max-width:760px){.hero{grid-template-columns:1fr}.hero-art.connection-demo{height:490px;max-width:520px;margin:10px auto 0}.demo-stage{height:360px}.pc-local{left:0}.pc-remote{right:0}.connection-pill{right:0;bottom:37px}.demo-heading{font-size:7px;letter-spacing:.6px}.demo-story p{font-size:10px}.demo-progress button{width:18px}}
@media(max-width:420px){.hero-art.connection-demo{height:440px}.demo-stage{height:310px}.pc-local{width:84%}.pc-remote{width:87%}.pc-wallpaper,.pc-local .pc-wallpaper{height:140px}.pc-title{height:19px}.pc-label{font-size:8px}.join-glass{top:7px;padding:7px 9px;width:145px}.join-glass small{margin-top:5px}.permission-glass{top:12px;padding:9px;width:160px}.permission-glass img{height:17px;width:17px;margin-bottom:5px}.local-pointer{top:101px}.connection-demo[data-stage="1"] .local-pointer{top:100px}.connection-demo[data-stage="1"] .remote-pointer{top:105px}.connection-pill{bottom:20px;font-size:7px;padding:8px 10px}.demo-story{padding-top:16px;gap:8px}.demo-story strong{font-size:14px}.demo-story p{max-width:230px;font-size:9px}.demo-progress{gap:3px}.demo-progress button{width:14px}.explorer{inset:20px 9px 28px 33px}.explorer-body aside{width:60px}.mirror-view .explorer{inset:28px 8px 7px 29px}.explorer-body{height:45px}.explorer-title{padding:5px 7px}.explorer-toolbar{padding:4px}.explorer-body>div{padding:6px}.link-track{height:150px}}
.permission-glass{left:auto;right:9px;top:9px;width:145px;padding:9px;transform:translateY(10px) scale(.92)}.connection-demo[data-stage="1"] .permission-glass{transform:translateY(0) scale(1)}.permission-glass img{height:18px;width:18px;margin-bottom:5px}.permission-glass strong{font-size:8px}.permission-glass small{font-size:6px}.connection-demo[data-stage="1"] .remote-pointer{left:80%;top:100px}
@media(max-width:420px){.permission-glass{width:133px;right:6px;top:6px;padding:7px}.permission-glass small{margin:4px 0 6px}.connection-demo[data-stage="1"] .remote-pointer{left:80%;top:85px}}
@media(prefers-reduced-motion:reduce){.connection-demo *{animation:none!important;transition:none!important}.link-packet{display:none}}