.keystroke{min-height:0;padding:48px 0 66px;overflow:hidden}.keystroke-layout{grid-template-columns:.95fr 1.15fr;align-items:center;gap:70px;display:grid}.keystroke h1{letter-spacing:-.04em;font-size:clamp(48px,4.6vw,66px);font-weight:520;line-height:1.05}.keystroke h1 em{color:#bca8ff;font-style:normal}.keystroke-copy>p{color:#b7b1c1;max-width:48ch;margin-top:25px;font-size:16px;line-height:1.85}.keystroke-copy strong{color:#f4f1eb;font-weight:550}.keystroke .actions{flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px;display:flex}.keystroke .button{gap:32px;padding:16px 22px;font-size:14px;display:inline-flex}.keystroke .button svg{fill:none;stroke:currentColor;stroke-width:1.7px;width:18px;height:18px}.keystroke .actions small{color:#aaa8b3;font-size:10px}.keystroke .hero-windows{color:#ddd5e9;margin-top:2px;font-size:12px}.hero-windows span{color:#aaa8b3;margin-left:7px;font-size:10px}.keystroke-art{height:520px;position:relative}.key-local,.key-remote{width:270px;position:absolute}.key-local{top:18px;left:8px;transform:rotate(-8deg)}.key-remote{bottom:25px;right:4px;transform:rotate(7deg)}.key-local>span,.key-remote>span{letter-spacing:0;color:#bdb4c9;margin-bottom:14px;font-size:11px;display:block}.key-face{color:#241b39;background:#bca8ff;border-radius:16px;justify-content:space-around;align-items:center;height:178px;padding-bottom:5px;display:flex;box-shadow:inset 0 1px #e0d4ff,inset 0 -8px #9a80da,0 19px 32px #0004}.key-face svg{fill:none;stroke:currentColor;stroke-width:3px;width:68px;height:68px}.key-face b{font-size:86px;font-weight:500}.key-remote .key-face{background:#d7fa79;box-shadow:inset 0 1px #efffc8,inset 0 -8px #a9cc4f,0 19px 32px #0004}.key-face>span{letter-spacing:-.025em;font-size:34px;font-weight:500}.key-connector{fill:none;stroke:#8d819e;stroke-width:1.5px;width:225px;height:85px;position:absolute;top:237px;left:43px}.key-transport{color:#c9b6ff;background:#101014;padding:5px 9px;font-size:11px;position:absolute;top:270px;left:84px}.keystroke-features{border-top:1px solid #49434e;grid-template-columns:1fr 1fr 1.2fr;gap:20px;margin-top:31px;padding-top:22px;display:grid}.keystroke-features a{color:#c9b6ff;flex-direction:column;gap:8px;display:flex}.keystroke-features b{font-size:13px;font-weight:550}.keystroke-features span{color:#aaa8b3;font-size:10px;line-height:1.6}.keystroke-copy .keystroke-note{color:#aaa8b3;margin-top:20px;font-size:11px;line-height:1.8}@media (width>=701px) and (width<=1000px){.keystroke-layout{grid-template-columns:.9fr 1.1fr;gap:38px}.keystroke h1{font-size:49px}.keystroke-copy>p{font-size:14px}.keystroke-art{height:450px}.key-local,.key-remote{width:220px}.key-face{height:148px}.key-face b{font-size:70px}.key-face svg{width:55px}.key-face>span{font-size:29px}.key-local{top:20px;left:2px}.key-remote{bottom:23px;right:0}.key-connector{width:195px;top:202px;left:22px}.key-transport{top:235px;left:55px}.keystroke-features{gap:12px}.keystroke-features b{font-size:11px}.keystroke-features span{font-size:9px}}@media (width<=700px){.keystroke{padding:26px 0 24px}.keystroke-layout{flex-direction:column-reverse;gap:24px;display:flex}.keystroke h1{font-size:clamp(39px,10.7vw,60px)}.keystroke-copy>p{margin-top:23px;font-size:15px;line-height:1.8}.keystroke .actions{margin-top:24px}.keystroke-features{gap:13px;margin-top:27px;padding-top:20px}.keystroke-features b{font-size:12px}.keystroke-features span{font-size:10px}.keystroke-art{width:100%;max-width:420px;height:420px;margin-top:5px}.key-local,.key-remote{width:218px}.key-local{top:5px;left:13px}.key-remote{bottom:20px;right:10px}.key-face{border-radius:13px;height:140px}.key-face b{font-size:70px}.key-face svg{width:54px;height:54px}.key-face>span{font-size:28px}.key-connector{width:190px;height:70px;top:186px;left:45px}.key-transport{font-size:10px;top:211px;left:76px}.key-local>span,.key-remote>span{font-size:10px}}.key-remote>span{text-align:right;padding-right:10px}[data-hero-carousel] h1{min-height:2.1em}[data-hero-carousel] .keystroke-copy>p:first-of-type{min-height:7.4em}.keystroke-features button{text-align:left;color:#b5a8c9;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;flex-direction:column;gap:8px;padding:0 0 12px;display:flex}.keystroke-features button[aria-pressed=true]{color:#d7fa79;border-bottom-color:#d7fa79}.keystroke-features button:hover{color:#f4f1eb}.hero-carousel-controls{justify-content:space-between;align-items:center;gap:15px;margin-top:14px;display:flex}.hero-carousel-controls>div{align-items:center;gap:5px;display:flex}.hero-learn{color:#c9b6ff;font-size:11px}.hero-slide-count{color:#aaa8b3;text-align:right;min-width:104px;margin-right:9px;font-size:10px}.hero-carousel-controls button{color:#e1d9ed;cursor:pointer;background:0 0;border:1px solid #49434e;border-radius:4px;place-items:center;width:36px;height:40px;display:grid}.hero-carousel-controls button:hover{background:#28232e;border-color:#bca8ff}.hero-carousel-controls svg{fill:none;stroke:currentColor;stroke-width:1.5px;width:17px;height:17px}[data-hero-carousel] .keystroke-note{min-height:3.6em}.key-command,.key-port{letter-spacing:-.025em;text-align:center;flex-direction:column;gap:14px;font:26px ui-monospace,SFMono-Regular,Consolas,monospace;display:flex}.key-command small,.key-port small{letter-spacing:0;font-size:13px;font-weight:400}.key-port{font-size:39px}.key-face .key-browser{stroke-width:2.5px;width:135px;height:90px}@media (width<=1000px){.hero-carousel-controls{flex-wrap:wrap}.hero-carousel-controls>div{margin-left:auto}.key-command{font-size:22px}.key-port{font-size:33px}}@media (width<=700px){[data-hero-carousel] .keystroke-copy>p:first-of-type{min-height:7.2em}.hero-carousel-controls{gap:9px}.hero-carousel-controls button{width:40px;height:44px}.hero-slide-count{min-width:0;margin-right:4px;font-size:9px}.hero-learn{font-size:10px}.key-face .key-browser{width:115px;height:76px}}.browser-scene{height:100%;padding-top:10px;position:relative}.remote-link{border-block:1px solid #514760;margin-right:45px;padding:18px 0}.remote-link>span{color:#aaa8b3;letter-spacing:.04em;margin-bottom:15px;font-size:10px;display:block}.remote-link code{color:#c9b6ff;font:23px ui-monospace,SFMono-Regular,Consolas,monospace}.remote-link code b{color:#d7fa79;font-weight:400}.browser-route{fill:none;stroke:#bca8ff;stroke-width:1.5px;width:100%;height:125px;position:absolute;top:118px;left:0}.browser-symbol{background:#151912;border:2px solid #d7fa79;border-radius:12px;position:absolute;top:222px;left:25px;right:0;overflow:hidden;transform:rotate(-4deg)}.browser-symbol-bar{color:#d7fa79;border-bottom:1px solid #84994f;align-items:center;gap:7px;height:35px;padding:0 15px;display:flex}.browser-symbol-bar i{background:#d7fa79;border-radius:50%;width:4px;height:4px}.browser-symbol-bar span{margin-left:auto;font-size:10px}.browser-symbol-bar .browser-url{white-space:nowrap;text-overflow:ellipsis;background:#d7fa7921;border-radius:999px;max-width:45%;margin-left:6px;padding:3px 8px;font:9px ui-monospace,SFMono-Regular,Consolas,monospace;overflow:hidden}.browser-symbol>svg{fill:none;stroke:#d7fa79;stroke-width:1.4px;width:100%;height:190px;display:block}.browser-symbol .browser-cursor{fill:#bca8ff;stroke:#151912;stroke-width:2px}.browser-symbol .page-accent{fill:#d7fa792e}.browser-symbol .page-dim{opacity:.45}.browser-scene-caption{color:#aaa8b3;font-size:11px;position:absolute;bottom:7px;left:25px}.ports-scene{padding:45px 0 0}.ports-heading{color:#aaa8b3;letter-spacing:.04em;justify-content:space-between;margin-bottom:24px;font-size:10px;display:flex}.port-route{border-top:1px solid #4e4559;grid-template-columns:1fr 85px 1fr;align-items:center;gap:16px;padding:22px 0;display:grid}.port-route>div:last-child{text-align:right}.port-route small{color:#aaa8b3;margin-bottom:10px;font-size:11px;display:block}.port-route code{color:#bca8ff;letter-spacing:-.025em;font:30px ui-monospace,SFMono-Regular,Consolas,monospace}.port-route>div:last-child code{color:#d7fa79}.port-route svg{fill:none;stroke:#8a8097;stroke-width:1.5px;width:100%}.port-primary code{font-size:42px}.port-primary svg{stroke:#d7fa79}.ports-base{color:#c9b6ff;border-top:1px solid #4e4559;justify-content:space-between;padding-top:20px;font-size:11px;display:flex}.ports-example{color:#aaa8b3;margin-top:13px;font-size:10px}[data-hero-carousel] .keystroke-note{margin-top:10px}@media (width>=701px) and (width<=1000px){.remote-link code{font-size:19px}.remote-link{margin-right:0}.browser-route{height:105px;top:108px}.browser-symbol{top:195px;left:0}.browser-symbol>svg{height:170px}.browser-scene-caption{font-size:10px;left:0}.port-route{grid-template-columns:1fr 44px 1fr;gap:9px}.port-route code{font-size:24px}.port-primary code{font-size:31px}.ports-scene{padding-top:20px}.port-route{padding:19px 0}}@media (width<=700px){.browser-scene{padding-top:0}.remote-link{margin-right:20px}.remote-link code{font-size:20px}.browser-route{height:100px;top:95px}.browser-symbol{top:180px;left:20px;right:10px}.browser-symbol>svg{height:157px}.browser-scene-caption{font-size:10px;bottom:10px;left:20px}.ports-scene{padding-top:8px}.port-route{grid-template-columns:1fr 70px 1fr;gap:12px;padding:18px 0}.port-route code{font-size:28px}.port-primary code{font-size:35px}.ports-base{font-size:10px}.ports-heading{font-size:9px}}[data-hero-carousel] .keystroke-copy>.hero-learn{margin-top:22px;display:inline-block}[data-hero-carousel] .keystroke-features a{padding-bottom:17px;position:relative}[data-hero-carousel] .keystroke-features a[data-active=true] b{color:#d7fa79}[data-hero-carousel] .keystroke-features .hero-progress-track{background:#39333f;height:2px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.hero-progress-track i{transform-origin:0;background:#7e718f;width:100%;height:100%;display:block;transform:scaleX(0)}[data-active=true] .hero-progress-track i{background:#d7fa79}[data-browser-command]{white-space:nowrap;min-width:19ch;display:inline-block}[data-browser-command]>span{display:inline-block}.command-char{white-space:pre;will-change:transform, opacity;display:inline-block}.command-arg{color:#d7fa79}.command-caret{transform-origin:bottom;background:#d7fa79;width:.5ch;height:.95em;margin-left:.2ch;animation:1.1s step-end infinite command-caret-blink;display:inline-block;translate:0 .12em}@keyframes command-caret-blink{0%,55%{opacity:1}56%,to{opacity:.18}}@media (prefers-reduced-motion:reduce){.command-caret{display:none}}