.hero-motion{--hero-duration:11.2s;--hero-play-state:paused;position:relative;min-width:0;min-height:556px;width:100%;max-width:550px;margin-inline:auto}.hero-motion[data-running=true]{--hero-play-state:running}.hero-network{padding-top:322px;position:relative;isolation:isolate}.network-grid{position:absolute;inset:-30px;background-image:radial-gradient(hsl(200 85% 65%/.2) .7px,transparent 0);background-size:23px 23px;-webkit-mask-image:radial-gradient(ellipse,black 30%,transparent 72%);mask-image:radial-gradient(ellipse,black 30%,transparent 72%);z-index:-1}.network-tracks{position:absolute;top:0;left:0;width:100%;height:440px;overflow:visible}.network-wire{stroke:hsl(200 65% 60%/.2);stroke-width:1}.network-packet,.network-wire{fill:none;vector-effect:non-scaling-stroke}.network-packet{stroke:#68d1ff;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:.12 1.12;stroke-dashoffset:.12;opacity:0;filter:drop-shadow(0 0 6px #25b5ff)}.packet-receive{stroke:#8cddbd;filter:drop-shadow(0 0 6px hsl(162 65% 55%/.7))}.network-tracks-mobile{visibility:hidden}.network-device{position:absolute;top:44px;width:44%;height:170px;border:1px solid hsl(200 75% 60%/.3);border-radius:16px;background:linear-gradient(145deg,hsl(211 37% 17%),hsl(215 30% 10%));box-shadow:0 20px 55px #0004,inset 0 1px 0 hsl(200 70% 80%/.07)}.device-source{left:0}.device-destination{right:0;border-color:hsl(170 45% 60%/.25)}.network-device-label{display:flex;align-items:center;gap:8px;height:45px;padding-inline:15px;border-bottom:1px solid hsl(210 35% 65%/.1);color:#b9cee0;font-size:13px}.network-device-label>svg{flex-shrink:0;color:#6fcbf5}.network-device-label .device-key{margin-left:auto;color:#83cdb5}.network-note{position:relative;height:124px;overflow:hidden;border-radius:0 0 16px 16px}.note-transform-stage{position:absolute;inset:15px 18px}.network-plaintext{position:absolute;inset:0}.network-plaintext>span{display:block;font-size:12px;color:#a2b3c5;margin-bottom:8px}.network-plaintext>strong{display:block;color:#eff9ff;font-size:27px;font-weight:500;letter-spacing:-.035em;line-height:1.12}.destination-plaintext>strong{color:#b4ecd9}.note-cursor{display:inline-block;height:.85em;width:2px;background:#6bcfff;vertical-align:-.03em;margin-left:4px;opacity:0}.cipher-tile-field{position:absolute;inset:0;opacity:0;color:#6fcbf5;pointer-events:none}.destination-cipher{color:#8cddbd}.cipher-envelope{position:absolute;inset:0;border:1px solid hsl(200 80% 62%/.4);border-radius:9px;background:linear-gradient(150deg,hsl(209 39% 15%),hsl(214 34% 11%));box-shadow:inset 0 1px 0 hsl(200 80% 75%/.08)}.destination-cipher .cipher-envelope{border-color:hsl(168 55% 60%/.4)}.cipher-lock{position:absolute;top:8px;left:9px}.cipher-tile-grid{position:absolute;top:32px;bottom:8px;left:8px;right:8px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4px}.cipher-tile-grid i{min-height:0;min-width:0;border-radius:3px;background:hsl(200 82% 60%/.34);box-shadow:inset 0 0 0 1px hsl(200 82% 64%/.24)}.cipher-tile-grid i:nth-child(2n){background:hsl(200 82% 62%/.56)}.cipher-tile-grid i:nth-child(3n){background:hsl(192 78% 58%/.24)}.cipher-tile-grid i:nth-child(5n){background:hsl(172 65% 58%/.46)}.sweep-cursor{position:absolute;top:-2px;bottom:-2px;left:0;width:2px;border-radius:2px;background:linear-gradient(180deg,transparent,#7ce0ff 18%,#dff7ff 50%,#7ce0ff 82%,transparent);box-shadow:0 0 12px #3ec2ff,0 0 4px #b8eeff;opacity:0;pointer-events:none}.destination-sweep{background:linear-gradient(180deg,transparent,#7ee5c4 18%,#e4fff6 50%,#7ee5c4 82%,transparent);box-shadow:0 0 12px #4ad6ad,0 0 4px #b8ffe8}.network-placeholder{position:absolute;inset:26px 20px;opacity:0;pointer-events:none}.network-placeholder i{display:block;width:65%;height:7px;margin-bottom:14px;border-radius:4px;background:hsl(210 30% 60%/.1)}.network-placeholder i:first-child{width:45%}.network-placeholder i:last-child{width:80%}.device-port{position:absolute;bottom:-4px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#356981;box-shadow:0 0 0 4px hsl(210 30% 15%)}.network-server{position:relative;width:min(270px,94%);margin-inline:auto}.network-server-body{position:relative;padding:15px 16px 14px;border:1px solid hsl(200 55% 55%/.3);border-radius:14px;background:linear-gradient(160deg,hsl(211 30% 16%),hsl(214 29% 10%));box-shadow:0 20px 50px #0004}.network-server-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#c1d3e0}.network-server-label svg{color:#6fcbf5;flex-shrink:0}.network-server-label svg:last-child{margin-left:auto;width:13px;color:#9bacba}.server-payload{display:flex;align-items:center;gap:10px;min-height:35px;padding:8px 10px;margin-top:12px;border:1px solid hsl(162 55% 62%/.5);border-radius:8px;color:#8cddbd;background:hsl(162 45% 35%/.09)}.server-payload>svg{flex-shrink:0}.server-cipher-blocks{display:flex;flex:1;gap:5px;color:inherit}.server-cipher-blocks i{flex:1;height:11px;border-radius:3px;background:currentColor;opacity:.45}.server-cipher-blocks i:nth-child(3n){opacity:.8;flex:.55}.server-witness-drawer{display:grid;grid-template-rows:1fr;margin-top:12px;opacity:1}.server-witness-inner{min-height:0;overflow:hidden}.server-witness{display:grid;grid-template-columns:auto minmax(0,1fr) 19px;align-items:center;gap:10px}.server-witness>span:first-child{font-size:12px;color:#adbed0}.server-witness-elements{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.server-witness-cell{--witness-check:1;display:grid;place-items:center;height:27px;min-width:0;border:1px solid hsl(162 55% 62%/.6);border-radius:6px;background:hsl(162 55% 45%/.14);color:#8cddbd;font-size:12px;font-variant-numeric:tabular-nums}.server-witness-cell>*{grid-area:1/1}.server-witness-cell>span{opacity:calc(1 - var(--witness-check))}.server-witness-cell>svg{opacity:var(--witness-check)}.server-witness-result{display:grid;place-items:center}.server-witness-result>svg{grid-area:1/1}.witness-checking{color:#f3c76d;opacity:0}.witness-passed{color:#8cddbd}.server-status{display:grid;text-align:center;margin-top:8px;min-height:20px;font-size:12px;line-height:20px}.server-status>span{grid-area:1/1;opacity:0}.server-checking,.server-pending{color:#f4c867}.server-saved,.server-verified{color:#8cddbd}.server-status .server-saved{display:inline-flex;align-items:center;justify-content:center;gap:5px;opacity:1}.server-halo{position:absolute;inset:-10px;border:1px solid hsl(162 55% 62%/.35);border-radius:24px;opacity:0;pointer-events:none}.hero-motion figcaption{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding-top:10px}.hero-motion figcaption>span{display:inline-flex;align-items:center;gap:9px;color:var(--soft);font-size:14px}.hero-motion figcaption>span>svg{color:#83cdb5;flex-shrink:0}.hero-motion figcaption button{display:grid;place-items:center;flex:0 0 44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--soft)}.hero-motion figcaption button:hover{color:#b6e7ff;background:hsl(200 70% 50%/.1);border-color:hsl(200 70% 50%/.35)}.hero-motion[data-animated=true] :is(.source-plaintext,.source-cipher,.cipher-envelope,.cipher-lock,.cipher-tile-grid,.source-sweep,.destination-plaintext,.destination-cipher,.destination-sweep,.network-placeholder,.network-packet,.server-halo,.note-cursor,.server-payload,.server-witness-drawer,.server-witness-cell,.server-witness-result>svg,.server-status>span,.device-destination){animation-duration:var(--hero-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-play-state:var(--hero-play-state)}.hero-motion[data-animated=true] .note-cursor{animation-name:note-edit}.hero-motion[data-animated=true] .source-plaintext{animation-name:source-plaintext-sweep}.hero-motion[data-animated=true] .source-cipher{animation-name:source-cipher-sweep}.hero-motion[data-animated=true] .source-sweep{animation-name:source-boundary-sweep}.hero-motion[data-animated=true] .source-cipher .cipher-envelope{animation-name:envelope-pack}.hero-motion[data-animated=true] .source-cipher .cipher-lock{animation-name:lock-pack}.hero-motion[data-animated=true] .source-cipher .cipher-tile-grid{animation-name:tiles-pack}.hero-motion[data-animated=true] .destination-cipher .cipher-envelope{animation-name:envelope-open}.hero-motion[data-animated=true] .destination-cipher .cipher-lock{animation-name:lock-open}.hero-motion[data-animated=true] .destination-cipher .cipher-tile-grid{animation-name:tiles-open}.hero-motion[data-animated=true] .packet-send{animation-name:wire-pulse-to-server;animation-timing-function:linear}.hero-motion[data-animated=true] .server-witness-drawer{animation-name:server-drawer-expand}.hero-motion[data-animated=true] .server-payload{animation-name:server-payload-state}.hero-motion[data-animated=true] .server-halo{animation-name:server-commit}.hero-motion[data-animated=true] .witness-cell-1{animation-name:witness-first}.hero-motion[data-animated=true] .witness-cell-2{animation-name:witness-second}.hero-motion[data-animated=true] .witness-cell-3{animation-name:witness-third}.hero-motion[data-animated=true] .witness-cell-4{animation-name:witness-fourth}.hero-motion[data-animated=true] .witness-checking{animation-name:witness-progress;animation-timing-function:linear}.hero-motion[data-animated=true] .witness-passed{animation-name:witness-complete}.hero-motion[data-animated=true] .server-pending{animation-name:status-pending}.hero-motion[data-animated=true] .server-checking{animation-name:status-checking}.hero-motion[data-animated=true] .server-verified{animation-name:status-verified}.hero-motion[data-animated=true] .server-saved{animation-name:status-saved}.hero-motion[data-animated=true] .packet-receive{animation-name:wire-pulse-to-device;animation-timing-function:linear}.hero-motion[data-animated=true] .network-placeholder{animation-name:destination-placeholder-wait}.hero-motion[data-animated=true] .destination-cipher{animation-name:destination-cipher-sweep}.hero-motion[data-animated=true] .destination-plaintext{animation-name:destination-plaintext-sweep}.hero-motion[data-animated=true] .destination-sweep{animation-name:destination-boundary-sweep}.hero-motion[data-animated=true] .device-destination{animation-name:device-receives}@keyframes note-edit{0%,3%,6%{opacity:1}1.5%,4.5%,7.5%,to{opacity:0}}@keyframes source-plaintext-sweep{0%,7%{opacity:1;clip-path:inset(0 0 0 0)}21%{opacity:1;clip-path:inset(0 0 0 100%)}22%,32%{opacity:0;clip-path:inset(0 0 0 100%)}32.1%{opacity:0;clip-path:inset(0)}38%,to{opacity:1;clip-path:inset(0)}}@keyframes source-cipher-sweep{0%,6.5%{opacity:0;clip-path:inset(0 100% 0 0)}7%{opacity:1;clip-path:inset(0 100% 0 0)}21%,28%{opacity:1;clip-path:inset(0)}29.5%,to{opacity:0;clip-path:inset(0)}}@keyframes source-boundary-sweep{0%,6.5%{opacity:0;left:0}7%{opacity:1;left:0}21%{opacity:1;left:100%}21.5%,to{opacity:0;left:100%}}@keyframes envelope-pack{0%,22%,to{top:0;bottom:0;border-radius:9px}27%,95%{top:calc(50% - 17px);bottom:calc(50% - 17px);border-radius:8px}}@keyframes lock-pack{0%,22%,to{top:8px;left:9px}27%,95%{top:calc(50% - 7.5px);left:10px}}@keyframes tiles-pack{0%,22%,to{top:32px;bottom:8px;left:8px;right:8px;gap:4px}27%,95%{top:calc(50% - 5.5px);bottom:calc(50% - 5.5px);left:36px;right:10px;gap:0 4px}}@keyframes wire-pulse-to-server{0%,28%{opacity:0;stroke-dashoffset:.12}29%{opacity:1;stroke-dashoffset:0}35.5%{opacity:1;stroke-dashoffset:-.88}36.5%,to{opacity:0;stroke-dashoffset:-1}}@keyframes server-drawer-expand{0%,35.5%{grid-template-rows:0fr;margin-top:0;opacity:0}39.5%,93.5%{grid-template-rows:1fr;margin-top:12px;opacity:1}97.5%,to{grid-template-rows:0fr;margin-top:0;opacity:0}}@keyframes server-payload-state{0%,35.5%,97%,to{color:#5c768d;border-color:hsl(205 35% 45%/.25);background:hsl(210 35% 20%/.16);box-shadow:none}36.5%,50.5%{color:#f4c867;border-color:hsl(42 86% 62%/.72);background:hsl(42 85% 52%/.12);box-shadow:0 0 16px hsl(42 85% 55%/.14)}51.5%,94%{color:#8cddbd;border-color:hsl(162 55% 62%/.65);background:hsl(162 55% 45%/.12);box-shadow:0 0 16px hsl(162 55% 60%/.14)}}@keyframes witness-first{0%,39.8%,97%,to{--witness-check:0;color:#7e91a5;border-color:var(--line);background:hsl(215 28% 12%)}40%,41.8%{--witness-check:0;color:#f4c867;border-color:#e0b656;background:hsl(42 85% 55%/.18)}42%,94%{--witness-check:1;color:#8cddbd;border-color:hsl(162 55% 62%/.6);background:hsl(162 55% 45%/.14)}}@keyframes witness-second{0%,41.8%,97%,to{--witness-check:0;color:#7e91a5;border-color:var(--line);background:hsl(215 28% 12%)}42%,43.8%{--witness-check:0;color:#f4c867;border-color:#e0b656;background:hsl(42 85% 55%/.18)}44%,94%{--witness-check:1;color:#8cddbd;border-color:hsl(162 55% 62%/.6);background:hsl(162 55% 45%/.14)}}@keyframes witness-third{0%,43.8%,97%,to{--witness-check:0;color:#7e91a5;border-color:var(--line);background:hsl(215 28% 12%)}44%,45.8%{--witness-check:0;color:#f4c867;border-color:#e0b656;background:hsl(42 85% 55%/.18)}46%,94%{--witness-check:1;color:#8cddbd;border-color:hsl(162 55% 62%/.6);background:hsl(162 55% 45%/.14)}}@keyframes witness-fourth{0%,45.8%,97%,to{--witness-check:0;color:#7e91a5;border-color:var(--line);background:hsl(215 28% 12%)}46%,47.8%{--witness-check:0;color:#f4c867;border-color:#e0b656;background:hsl(42 85% 55%/.18)}48%,94%{--witness-check:1;color:#8cddbd;border-color:hsl(162 55% 62%/.6);background:hsl(162 55% 45%/.14)}}@keyframes witness-progress{0%,36%{opacity:0;transform:rotate(0deg)}37%{opacity:1;transform:rotate(0deg)}48%{opacity:1;transform:rotate(1turn)}48.5%,to{opacity:0;transform:rotate(1turn)}}@keyframes witness-complete{0%,48%,96%,to{opacity:0;transform:scale(.6)}48.8%,94%{opacity:1;transform:scale(1)}}@keyframes status-pending{0%,35.5%,40%,to{opacity:0}36.5%,39.5%{opacity:1}}@keyframes status-checking{0%,39.5%,48.2%,to{opacity:0}40%,47.8%{opacity:1}}@keyframes status-verified{0%,48%,51.5%,to{opacity:0}48.5%,51%{opacity:1}}@keyframes status-saved{0%,51%,96%,to{opacity:0}51.8%,94%{opacity:1}}@keyframes server-commit{0%,50.5%{opacity:0;transform:scale(.97)}52.5%{opacity:1;transform:scale(1)}62%,to{opacity:0;transform:scale(1.08)}}@keyframes wire-pulse-to-device{0%,53.5%{opacity:0;stroke-dashoffset:.12}54.5%{opacity:1;stroke-dashoffset:0}62.5%{opacity:1;stroke-dashoffset:-.88}63.5%,to{opacity:0;stroke-dashoffset:-1}}@keyframes destination-placeholder-wait{0%,62%{opacity:1}64%,95%{opacity:0}97.5%,to{opacity:1}}@keyframes destination-cipher-sweep{0%,62.5%{opacity:0;clip-path:inset(0)}64%,69%{opacity:1;clip-path:inset(0)}83%{opacity:1;clip-path:inset(0 100% 0 0)}84%,to{opacity:0;clip-path:inset(0 100% 0 0)}}@keyframes envelope-open{0%,64%,to{top:calc(50% - 17px);bottom:calc(50% - 17px);border-radius:8px}69%,95%{top:0;bottom:0;border-radius:9px}}@keyframes lock-open{0%,64%,to{top:calc(50% - 7.5px);left:10px}69%,95%{top:8px;left:9px}}@keyframes tiles-open{0%,64%,to{top:calc(50% - 5.5px);bottom:calc(50% - 5.5px);left:36px;right:10px;gap:0 4px}69%,95%{top:32px;bottom:8px;left:8px;right:8px;gap:4px}}@keyframes destination-plaintext-sweep{0%,68.5%{opacity:0;clip-path:inset(0 0 0 100%)}69%{opacity:1;clip-path:inset(0 0 0 100%)}83%,94%{opacity:1;clip-path:inset(0)}97%,to{opacity:0;clip-path:inset(0)}}@keyframes destination-boundary-sweep{0%,68.5%{opacity:0;left:100%}69%{opacity:1;left:100%}83%{opacity:1;left:0}83.5%,to{opacity:0;left:0}}@keyframes device-receives{0%,63%,96%,to{border-color:hsl(170 45% 60%/.25)}69%,94%{border-color:hsl(170 65% 65%/.7)}}@media (max-width:1050px) and (min-width:801px){.network-device-label{padding-inline:10px;gap:6px;font-size:12px}.network-device-label .device-key{display:none}.note-transform-stage{inset-inline:14px}}@media (max-width:480px){.hero-motion{min-height:526px}.hero-network{padding-top:288px}.network-tracks{visibility:hidden}.network-tracks-mobile{visibility:visible;height:400px}.network-device{top:44px;height:150px;border-radius:12px}.network-device-label{height:39px;padding-inline:9px;gap:6px;font-size:12px}.network-device-label>svg{width:16px}.network-device-label .device-key{display:none}.network-note{height:110px}.note-transform-stage{inset:12px}.network-plaintext>span{font-size:11px;margin-bottom:7px}.network-plaintext>strong{font-size:24px}.hero-motion figcaption{gap:8px}.hero-motion figcaption>span{font-size:12px;gap:6px}}