.connection-scene{position:relative;isolation:isolate;overflow:hidden;min-width:0;border:1px solid #294574;border-radius:32px;background:radial-gradient(ellipse at 80% 15%,#233f813d,transparent 55%),linear-gradient(145deg,#0c1d38,#102950 65%,#152d5e);color:#fff;box-shadow:0 28px 65px #122c6424}
.connection-scene::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#a9c6ff20 .75px,transparent .75px);background-size:22px 22px;mask-image:linear-gradient(#000,transparent 80%);pointer-events:none}
.connection-topline{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 26px 0;min-height:50px}
.connection-topline>span{display:flex;align-items:center;gap:9px;color:#b8cef2;font-size:10px;font-weight:650;letter-spacing:.09em}
.connection-topline i{width:6px;height:6px;border-radius:50%;background:#7bceff;box-shadow:0 0 12px #63caff}
.connection-topline button{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid #7194d038;border-radius:50%;background:#ffffff08;color:#c8dbff;cursor:pointer;font-size:13px}
.connection-topline button:hover{background:#ffffff18}
.connection-map{height:390px;position:relative}
.connection-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.connection-lines ellipse{stroke:#719ce61c;stroke-width:1;stroke-dasharray:3 8}
.connection-route{stroke:#587bb4;stroke-opacity:.4;stroke-width:1.5;transition:stroke-opacity .3s}
.connection-scene[data-channel=phone] [data-route-line=phone],.connection-scene[data-channel=mail] [data-route-line=mail],.connection-scene[data-channel=calendar] [data-route-line=calendar]{stroke:url(#connection-beam);stroke-opacity:1;stroke-width:2}
.connection-flow{stroke:url(#connection-beam);stroke-width:3;stroke-linecap:round;stroke-dasharray:9 300;filter:drop-shadow(0 0 5px #70baff);opacity:0}
.connection-scene.is-moving .connection-flow{animation:connection-signal 3.8s linear infinite}
.connection-scene.is-moving .connection-flow:nth-of-type(5){animation-delay:-1.3s}
.connection-scene.is-moving .connection-flow:nth-of-type(6){animation-delay:-2.6s}
.connection-halo{position:absolute;left:50%;top:51.3%;transform:translate(-50%,-50%);width:65%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#527bff40,transparent 65%);pointer-events:none}
.connection-core{position:absolute;left:50%;top:51.3%;transform:translate(-50%,-50%) rotate(-7deg);width:136px;height:136px;padding:1px;border-radius:34px;background:linear-gradient(140deg,#b4d9ff,#4465c6 40%,#8d9bf5 70%,#263d78);box-shadow:0 0 0 8px #587dff08,0 0 0 22px #587dff05,0 24px 38px #030e2870,0 0 50px #4775ff38}
.connection-core-face{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;border-radius:33px;background:radial-gradient(ellipse at 30% 0,#719aee66,transparent 60%),linear-gradient(150deg,#1b3b77,#122549);box-shadow:inset 0 1px 16px #9ec1ff18}
.connection-core-face>span{font-size:29px;font-weight:650;letter-spacing:-.06em;color:#fff;transform:rotate(7deg)}
.connection-core-dot{color:#8aaeff;margin-left:3px}
.connection-core-face>small{margin-top:7px;font-size:6.5px;font-weight:650;letter-spacing:.1em;color:#a8c6fc;transform:rotate(7deg)}
.connection-wave{display:flex;align-items:center;gap:4px;height:23px;margin-top:10px;transform:rotate(7deg)}
.connection-wave i{width:3px;height:9px;border-radius:2px;background:#8ac8ff}
.connection-wave i:nth-child(2),.connection-wave i:nth-child(4){height:16px}.connection-wave i:nth-child(3){height:22px}
.connection-scene.is-moving .connection-wave i{animation:connection-wave 1.6s ease-in-out infinite alternate}.connection-scene.is-moving .connection-wave i:nth-child(even){animation-delay:-.8s}
.connection-node{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;transform:translate(-50%,-50%);width:168px;padding:14px 12px;border:1px solid #7496cd55;border-radius:17px;background:linear-gradient(145deg,#eef5ff,#fff);box-shadow:0 15px 32px #04112845,inset 0 1px 0 #fff;color:#10213c;cursor:pointer;text-align:left;transition:box-shadow .2s,border-color .2s}
.connection-node:hover,.connection-node[aria-pressed=true]{border-color:#9bccff;box-shadow:0 0 0 4px #71a6ff16,0 16px 36px #04112866,0 0 25px #538cff22}
.connection-node>i{display:grid;place-items:center;flex:none;width:34px;height:38px;border:1px solid #d2dfff;border-radius:10px;background:#e7eeff;color:#345cff}
.connection-node svg{width:21px;height:21px}
.connection-node>span{font:650 14px/1.3 var(--font-ui)}
.connection-node small{display:block;margin-top:5px;font:500 9px/1.4 var(--font-ui);color:#5c7193;white-space:nowrap}
.connection-node>b{margin-left:auto;align-self:flex-start;color:#708ab6;font-size:12px;font-weight:500}
.connection-phone{left:22%;top:27%}.connection-mail{left:79%;top:34%}.connection-calendar{left:30%;top:81%}
.connection-map-label{position:absolute;right:24px;bottom:19px;width:130px;text-align:right;font-size:8px;line-height:1.7;letter-spacing:.1em;color:#8da9d5}
.connection-story{position:relative;border:1px solid #7496cd30;border-radius:18px;margin:0 24px;padding:20px 22px;background:linear-gradient(100deg,#ffffff09,#9fc2ff0d);min-height:148px}
.connection-story>span{display:block;font-size:10px;letter-spacing:.1em;color:#8eb8ff;font-weight:700}
.connection-story strong{display:block;margin-top:10px;color:#eff5ff;font-size:19px;line-height:1.35;letter-spacing:-.025em;font-weight:600}
.connection-story p{margin:9px 0 0;color:#b7c9e7;font-size:13px;line-height:1.65}
.connection-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:22px 26px;color:#a3bce2;font-size:11px;line-height:1.5}
.connection-foot>span:last-child{font-size:8px;letter-spacing:.09em;color:#7e9ecf}
.connection-scene :focus-visible{outline:3px solid #a1d6ff;outline-offset:5px}
@keyframes connection-signal{0%{stroke-dashoffset:310;opacity:0}10%,80%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes connection-wave{to{transform:scaleY(.45);opacity:.65}}
@media(max-width:1200px) and (min-width:1051px){.connection-node{width:140px;gap:8px;padding:12px 10px}.connection-node>b{display:none}.connection-node>span{font-size:13px}.connection-node small{font-size:8px}.connection-core{width:112px;height:112px}.connection-core-face>span{font-size:25px}}
@media(max-width:1050px){.connection-scene{width:100%;max-width:680px;justify-self:center}.connection-map{height:400px}}
@media(max-width:520px){.connection-scene{border-radius:25px}.connection-topline{padding:20px 18px 0}.connection-topline>span{font-size:8px;letter-spacing:.06em}.connection-map{height:350px}.connection-node{width:126px;padding:12px 9px;gap:8px;border-radius:14px}.connection-node>b{display:none}.connection-node>i{width:28px;height:32px}.connection-node svg{width:18px}.connection-node>span{font-size:12px}.connection-node small{font-size:8px;white-space:normal}.connection-phone{left:23%}.connection-mail{left:77%}.connection-calendar{left:27%}.connection-core{width:100px;height:100px;border-radius:26px}.connection-core-face{border-radius:25px}.connection-core-face>span{font-size:24px}.connection-core-face>small{font-size:5px}.connection-wave{height:16px;margin-top:7px}.connection-wave i:nth-child(3){height:17px}.connection-map-label{right:18px;width:105px;font-size:7px}.connection-story{margin:0 16px;padding:18px;min-height:158px}.connection-story strong{font-size:18px}.connection-foot{margin:20px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.connection-scene .connection-flow{animation:none!important;opacity:0}.connection-scene .connection-wave i{animation:none!important}.connection-node{transition:none}}