@property --demo-canvas-width{syntax:"<length>";inherits:false;initial-value:0}.app-screen{--demo-bg:#000;--demo-ink:#fff;--demo-sec:#8e8e93;--demo-fill:#151517;--demo-hair:#242428;--demo-selected:#333;color:var(--demo-ink)}.demo-viewport{aspect-ratio:466/678;isolation:isolate;background:var(--demo-bg);position:relative;overflow:hidden;container-type:inline-size}.app-ios .demo-viewport{border-radius:1.717% 12.732% 12.732% 1.717%/1.18% 8.751% 8.751% 1.18%;width:88.8183%;height:92.7074%;position:absolute;top:3.64631%;left:5.59085%}.app-ios:before{content:"";z-index:1;pointer-events:none;-webkit-user-select:none;user-select:none;background:url(/assets/iphone-duo-outer-CGUMn54Y.png) 50%/100% 100% no-repeat;position:absolute;inset:0}.app-ios .demo-viewport:after{content:"";z-index:4;pointer-events:none;background:#fff3;border-radius:20px;width:36%;height:.7%;position:absolute;bottom:1.2%;left:32%}.app-macos .demo-viewport{aspect-ratio:680/600}.demo-canvas{--demo-canvas-width:100cqw;width:466px;height:678px;transform:scale(tan(atan2(var(--demo-canvas-width), 466px)));transform-origin:0 0;color:var(--demo-ink);background:var(--demo-bg);text-align:left;letter-spacing:0;font:400 15px/1.2 -apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,sans-serif;position:absolute}.app-macos .demo-canvas{width:680px;height:600px;transform:scale(tan(atan2(var(--demo-canvas-width), 680px)))}.demo-canvas :where(p,ol){font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;margin:0;padding:0}.demo-canvas :where(button,input){font:inherit;color:inherit;letter-spacing:inherit}.demo-canvas button{appearance:none;cursor:pointer;text-align:inherit;box-shadow:none;line-height:inherit;touch-action:manipulation;background:0 0;border:0;border-radius:0;margin:0;padding:0;transition:background-color .18s,transform .12s}.demo-canvas button:disabled{cursor:default;opacity:1}.demo-canvas button:focus-visible,.demo-canvas input:focus-visible{outline:3px solid var(--demo-ink);outline-offset:-3px}.demo-canvas button:active:not(:disabled){transform:scale(.98)}.demo-canvas svg{flex-shrink:0;width:24px;height:24px;display:block}.demo-canvas small{color:var(--demo-sec);font-size:13px;display:block}.demo-brand{justify-content:space-between;align-items:baseline;display:flex;position:absolute;top:83px;left:20px;right:20px}.demo-brand strong{font-size:15px;font-weight:600}.demo-brand span{color:var(--demo-sec);letter-spacing:.1px;font-size:12px}.demo-hero{position:absolute;top:123px;left:20px;right:20px}.demo-hero .demo-title{letter-spacing:-1.2px;white-space:nowrap;font-size:36px;font-weight:700;line-height:43px}.demo-hero p{color:var(--demo-sec);margin-top:20px;font-size:15px}.demo-tunnel{height:56px;position:absolute;top:257px;left:20px;right:20px}.demo-tunnel svg{width:100%;height:100%}.demo-packet{display:none}.demo-tunnel[data-phase=disconnected],.demo-tunnel[data-phase=disconnecting]{color:var(--demo-hair)}.demo-tunnel[data-phase=connecting] .demo-track{stroke-dasharray:11 7;animation:1s linear infinite demo-march}.demo-tunnel[data-phase=connecting] .demo-packet{animation:1.4s ease-in-out infinite alternate demo-packet;display:block}.demo-endpoints{letter-spacing:.3px;justify-content:space-between;font-size:11px;display:flex;position:absolute;top:322px;left:20px;right:20px}.demo-endpoints span{color:var(--demo-sec)}.demo-endpoints strong{font-weight:600}.demo-bottom{position:absolute;bottom:176px;left:20px;right:20px}.demo-canvas .demo-node{background:var(--demo-fill);border-radius:14px;justify-content:space-between;align-items:center;width:100%;min-height:73px;padding:14px 16px;display:flex;position:relative}.demo-node strong{letter-spacing:-.3px;font-size:20px;font-weight:600;display:block}.demo-node small{margin-top:2px;font-size:15px}.demo-node svg{width:16px;height:20px;color:var(--demo-sec)}.demo-metrics{gap:44px;min-height:40px;margin-top:12px;display:flex}.demo-metrics small{letter-spacing:.6px;font-size:12px}.demo-metrics strong{font-variant-numeric:tabular-nums;margin-top:4px;font-size:17px;font-weight:600;display:block}.demo-metrics[data-empty=true]{display:none}.demo-canvas .demo-connect,.demo-canvas .demo-add{border:1px solid var(--demo-hair);text-align:center;border-radius:14px;height:56px;font-size:17px;font-weight:600;position:absolute;bottom:102px;left:20px;right:20px}.demo-canvas .demo-primary{color:var(--demo-bg);background:var(--demo-ink);border-color:var(--demo-ink)}.demo-tabbar{border:1px solid var(--demo-hair);background:var(--demo-bg);border-radius:36px;height:61px;padding:4px;display:flex;position:absolute;bottom:21px;left:56px;right:56px;box-shadow:0 10px 35px #00000010}.demo-tabbar button{border-radius:28px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;font-size:10px;font-weight:600;display:flex}.demo-tabbar button[aria-current=page]{background:var(--demo-selected)}.demo-tabbar svg{width:25px;height:25px}.app-macos .demo-brand{top:30px;left:40px;right:40px}.app-macos .demo-hero{top:88px;left:40px;right:40px}.app-macos .demo-tunnel{top:236px;left:40px;right:40px}.app-macos .demo-endpoints{top:301px;left:40px;right:40px}.app-macos .demo-bottom{bottom:96px;left:40px;right:40px}.app-macos .demo-metrics{gap:44px}.app-macos .demo-connect{bottom:22px;left:40px;right:40px}.app-macos .demo-tabbar{display:none}.demo-server-dim{z-index:2;background:#0005;position:absolute;inset:0}.demo-servers{z-index:3;background:var(--demo-bg);border-radius:14px 14px 0 0;padding:32px 20px 0;position:absolute;inset:212px 0 0}.demo-handle{background:#bcbcc0;border-radius:4px;width:36px;height:5px;position:absolute;top:8px;left:calc(50% - 18px)}.demo-servers header{justify-content:space-between;align-items:center;display:flex}.demo-servers .demo-title{letter-spacing:-.8px;font-size:30px;font-weight:700;line-height:36px}.demo-canvas .demo-close{background:var(--demo-fill);width:30px;height:30px;color:var(--demo-sec);border-radius:50%;place-items:center;display:grid}@media (prefers-reduced-motion:no-preference){.demo-viewport[data-interaction-hint=connected] .demo-node:after,.demo-viewport[data-interaction-hint=servers] .demo-server-list button:last-child:after{content:"";box-sizing:border-box;border:1.5px solid var(--signal);pointer-events:none;border-radius:13px;animation:2.4s ease-in-out infinite demo-signal-pulse;position:absolute;inset:1px}.demo-viewport[data-interaction-hint=servers] .demo-server-list button:last-child:after{border-radius:10px}}@keyframes demo-signal-pulse{0%,to{opacity:.18}50%{opacity:.65}}.demo-viewport[data-hint-active=false] :is(.demo-node,.demo-server-list button:last-child):after{animation-play-state:paused}.demo-close svg{width:20px;height:20px}.demo-server-scroll{scrollbar-width:none;padding-bottom:30px;position:absolute;inset:76px 20px 0;overflow-y:auto}.demo-protocol-header{justify-content:space-between;align-items:center;width:100%;min-height:52px;display:flex}.demo-protocol-header small,.demo-server-label{letter-spacing:.6px;color:var(--demo-sec);text-transform:uppercase;font-size:10px}.demo-protocol-header span{align-items:center;gap:8px;display:flex}.demo-protocol-header>*{position:relative;top:6px}.demo-protocol-header i{border-top:1.8px solid var(--demo-sec);border-left:1.8px solid var(--demo-sec);width:8px;height:8px;transform:rotate(225deg)}.demo-protocol-header i.expanded{transform:rotate(45deg)}.demo-protocols{gap:8px;padding-top:11px;padding-bottom:16px;display:flex}.demo-protocols button{border:1px solid var(--demo-hair);border-radius:10px;min-width:54px;height:44px;padding:0 11px;font-size:12px;font-weight:600}.demo-protocols button[aria-pressed=true]{color:var(--demo-bg);background:var(--demo-ink);border-color:var(--demo-ink)}.demo-server-label{padding:0 0 7px}.demo-server-list{flex-direction:column;display:flex}.demo-canvas .demo-server-row{border-bottom:1px solid var(--demo-hair);justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:70px;padding:12px;display:flex;position:relative}.demo-canvas .demo-server-row:last-child{border:0}.demo-canvas .demo-server-row[aria-pressed=true]{background:var(--demo-fill);border:0;border-radius:10px}.demo-server-row strong{letter-spacing:-.3px;font-size:18px;font-weight:600;display:block}.demo-server-row small{margin-top:3px;font-size:12px}.demo-server-row>svg{width:22px;height:22px}.demo-latency{align-items:center;gap:12px;display:flex}.demo-latency small{white-space:nowrap;margin:0}.demo-latency svg{width:22px;height:16px}.app-macos .demo-servers{border-radius:14px;inset:50px 20px 0}.demo-devices{background:var(--demo-bg);position:absolute;inset:0}.demo-device-base>.demo-title{letter-spacing:-.7px;font-size:34px;font-weight:700;line-height:41px;position:absolute;top:121px;left:16px;right:16px}.demo-device-scroll{scrollbar-width:none;position:absolute;inset:190px 20px 140px;overflow-y:auto}.demo-page-devices .demo-device-scroll{top:178px}.demo-capacity{color:var(--demo-sec);margin:0 0 10px;font-size:15px;position:relative;top:-2px}.demo-device-list{background:var(--demo-fill);border-radius:26px;overflow:hidden}.demo-canvas .demo-device-row{align-items:center;gap:9px;width:100%;min-height:67px;padding:10px 16px;display:flex;position:relative}.demo-device-row:not(:last-child):after{content:"";border-bottom:1px solid var(--demo-hair);position:absolute;bottom:0;left:51px;right:16px}.demo-device-row>svg{color:var(--demo-sec);width:26px;height:26px}.demo-device-row>svg:last-child{color:#bcbcc0;width:16px;margin-left:auto}.demo-device-row strong{font-size:17px;font-weight:400}.demo-device-row small{font-size:15px;line-height:17px}.demo-device-note{color:var(--demo-sec);margin:8px 16px 0;font-size:12px;line-height:14px}.demo-canvas .demo-device-link{background:var(--demo-fill);border-radius:30px;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:52px;padding:16px;font-size:17px;display:flex}.demo-device-link svg{color:#bcbcc0;width:16px}.demo-canvas .demo-add{bottom:54px}.demo-canvas .demo-back{align-items:center;gap:4px;min-height:44px;font-size:17px;display:flex;position:absolute;top:74px;left:12px}.demo-section-label{color:var(--demo-sec);text-transform:uppercase;margin:24px 16px 8px;font-size:13px}.demo-flow-copy{margin-bottom:24px;font-size:16px;line-height:1.4}.demo-steps{padding-left:32px;font-size:15px;line-height:1.5}.demo-steps li{margin-bottom:14px}.demo-canvas input{border:1px solid var(--demo-hair);background:var(--demo-fill);border-radius:8px;width:100%;min-height:44px;padding:12px}.demo-flow-actions{gap:12px;margin-top:20px;display:grid}.demo-flow-actions button{border:1px solid var(--demo-hair);text-align:center;border-radius:14px;padding:14px;font-size:17px}.demo-dim{z-index:3;background:#0006;place-items:center;display:grid;position:absolute;inset:0}.demo-alert{text-align:center;background:var(--demo-fill);border-radius:14px;width:290px;padding:20px 16px 0}.demo-alert .demo-title{font-size:17px;font-weight:600}.demo-alert p{margin:8px 0 16px;font-size:13px;line-height:1.35}.demo-alert input{background:var(--demo-bg);margin-bottom:16px}.demo-alert button{text-align:center;border-top:1px solid var(--demo-hair);width:100%;min-height:44px;font-size:17px}.demo-alert-actions{display:flex}.demo-alert-actions button+button{border-left:1px solid var(--demo-hair);font-weight:600}.demo-announcement{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@keyframes demo-sheet{0%{transform:translateY(32px)}to{transform:translateY(0)}}@keyframes demo-march{to{stroke-dashoffset:-18px}}@keyframes demo-packet{0%{transform:translate(-120px)}to{transform:translate(120px)}}fieldset.app-screen{border:0;min-width:0;margin:0;padding:0}.demo-canvas fieldset{border:0;min-width:0;margin:0}.demo-canvas .demo-protocols{padding:11px 0 16px}.demo-canvas .demo-protocol-header small{text-transform:uppercase}.demo-canvas .demo-servers{transition:top .3s cubic-bezier(.2,.7,.3,1)}.demo-viewport[data-panel-opened=true] .demo-servers{animation:.3s cubic-bezier(.2,.7,.3,1) demo-sheet}.demo-device-base{position:absolute;inset:0}.demo-device-base>.demo-title:focus{outline:none}.demo-canvas .demo-close{position:relative}.demo-close:before{content:"";position:absolute;inset:-7px}@media (prefers-reduced-motion:no-preference){.demo-viewport[data-interacted=true] .demo-hero{animation:.2s demo-state}}@keyframes demo-state{0%{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.demo-viewport[data-demo-active=false] .demo-canvas *,.demo-viewport[data-interacted=false] .demo-tunnel *{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.app-screen .demo-viewport .demo-canvas *,.app-screen .demo-viewport .demo-canvas :before{transition:none;animation:none}}.app-ios{--demo-fill:#141416;--demo-sec:#8e8e93}.app-ios .demo-statusbar{z-index:4;flex-direction:column;align-items:center;gap:4px;width:48px;height:auto;padding:0;font-size:17px;font-weight:600;line-height:20px;display:flex;position:absolute;inset:82px auto auto 394px}.app-ios .demo-statusbar svg{width:48px;height:48px}.app-ios .demo-brand,.app-ios .demo-hero,.app-ios .demo-tunnel,.app-ios .demo-endpoints{right:104px}.app-ios .demo-brand{top:20px}.app-ios .demo-hero{top:78px}.app-ios .demo-hero p{align-items:center;min-height:36px;margin-top:12px;display:flex}.app-ios .demo-tunnel{top:228.667px}.app-ios .demo-endpoints{top:292.667px}.app-ios .demo-bottom{display:contents}.app-ios .demo-node{width:auto;min-height:75px;padding:16px;position:absolute;bottom:130px;left:20px;right:104px}.app-ios .demo-node small{font-size:14px;line-height:17px}.app-ios .demo-metrics{text-align:center;align-items:center;gap:0;width:max-content;min-height:40px;margin:0;position:absolute;top:339px;left:424px;transform:translate(-50%,-50%)rotate(90deg)}.app-ios .demo-metrics>div+div{margin-left:33px;position:relative}.app-ios .demo-metrics>div+div:before{content:"";border-left:1px solid var(--demo-hair);height:60%;position:absolute;top:20%;left:-17px}.app-ios .demo-metrics small{font-weight:500}.app-ios .demo-connect,.app-ios .demo-add{bottom:54px;right:104px}.app-ios .demo-tabbar{background:linear-gradient(#161616,#222);border-color:#ffffff26;border-radius:26px;flex-direction:column;width:48px;height:162px;padding:2px;inset:492px auto auto 394px;box-shadow:inset 0 1px 1px #ffffff20}.app-ios .demo-tabbar button{border-radius:24px}.app-ios .demo-tabbar button[aria-current=page]{background:#090909}.app-ios .demo-tabbar svg{width:28px;height:28px}.app-ios .demo-tabbar button span{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.app-ios .demo-server-dim{background:#0007}.app-ios .demo-servers{border-radius:48px;inset:169.667px 8px 8px;box-shadow:0 0 0 .5px #ffffff0a}.app-ios .demo-servers:not(:has(.demo-protocols)){top:221.667px}.app-ios .demo-handle{background:#48484a;width:60px;height:4px;top:6px;left:calc(50% - 30px)}.app-ios .demo-server-scroll{padding-bottom:40px;top:88px}.app-ios .demo-protocol-header{min-height:44px;font-size:16px}.app-ios .demo-protocol-header>*{top:0}.app-ios .demo-protocol-header small,.app-ios .demo-server-label{letter-spacing:0;text-transform:none;font-size:15px;font-weight:600;line-height:18px}.app-ios .demo-protocol-header i{width:9px;height:9px;margin-inline:2px 4px}.app-ios .demo-protocols{padding:8px 0 16px}.app-ios .demo-protocols button{min-width:56px;padding:0 12px;font-size:14px}.app-ios .demo-server-label{padding-bottom:8px}.app-ios .demo-servers:not(:has(.demo-protocols)) .demo-server-label{padding-top:16px}.app-ios .demo-server-row{padding:16px 12px}.app-ios .demo-server-row small{margin-top:4px;font-size:14px;line-height:17px}.app-ios .demo-server-row>svg{width:24px;height:24px}.app-ios .demo-latency small{margin:0}.app-ios .demo-device-base>.demo-title{font-size:28px;line-height:34px;top:30px;left:20px;right:104px}.app-ios .demo-device-scroll{inset:90px 104px 130px 20px}.app-ios .demo-capacity{margin:0 16px 12px;top:0}.app-ios .demo-device-row{gap:8px;min-height:69.333px;padding:15px 16px}.app-ios .demo-device-row>svg{width:32px;height:26px}.app-ios .demo-device-row>svg:last-child{width:12px}.app-ios .demo-device-row:not(:last-child):after{left:56px}.app-ios .demo-device-note{margin-inline:20px;font-size:13px;line-height:16px}.app-ios .demo-back{top:0}.app-ios .demo-device-base:has(.demo-back)>.demo-title{top:46px}.app-ios .demo-device-base:has(.demo-back) .demo-device-scroll{top:96px}