/* Connection is a continuation of the optical scene, rather than a form card. */
body.connection-open { overflow: hidden; }
.connect-dialog {
  position: fixed; inset: 0; width: 100%; height: 100%; height: 100svh;
  max-width: none; max-height: none; padding: 0; margin: 0;
  border: 0; border-radius: 0; overflow: hidden; isolation: isolate;
  background: #050a12; color: #f2f5ff;
}
.connect-dialog::backdrop { background: #050a12; backdrop-filter: none; }
.connect-dialog[open] { animation: connection-appear .45s var(--ease); }
@keyframes connection-appear { from { opacity: 0; } to { opacity: 1; } }
.connection-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.connection-art .scene-layer { position: absolute; opacity: 1!important; transition: none; }
.connection-art .scene-aura { opacity: .8; }
.connection-art .atmosphere { opacity: .8; }
.connection-art #ring-canvas { filter: brightness(1.12) saturate(1.07); }
.connection-art .ring-fallback { transform: translate(-50%, -50%) translate3d(-25vw, 1.5vh, 0) scale(.89); }
.connection-light {
  position: absolute; z-index: -1; pointer-events: none; inset: 0;
  background: radial-gradient(ellipse at 26% 43%, #4883d114, transparent 36%), radial-gradient(ellipse at 90% 78%, #6857bf0f, transparent 37%), linear-gradient(90deg, transparent 32%, #050a1226 49%, #050a125c);
}
.connection-scroll { position: absolute; inset: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #7f99c452 #050a12; color-scheme: dark; }
.connection-header { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 116px; padding-inline: clamp(32px, 5.25vw, 100px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.connection-header .brand { gap: 12px; height: 60px; }
.connection-header .brand-mark { width: 55px; height: 55px;   }
.connection-header .brand-wordmark { font-size: 31px; }
.connection-header .connection-close { position: static; width: auto; height: 49px; padding: 0 19px; display: inline-flex; align-items: center; gap: 14px; border: 1px solid #a9bfff50; border-radius: 30px; background: #96b8ff03; color: #d8e3f4; font-size: 13px; font-weight: 500; }
.connection-close .icon { width: 18px; height: 18px; }
.connection-header .connection-close:hover { background: #a5c1ff0b; border-color: #bfd8ff94; }
.connection-layout { position: relative; z-index: 1; width: min(1700px, 100%); min-height: 100%; margin-inline: auto; display: grid; grid-template-columns: .96fr 1.04fr; align-items: center; gap: 42px; padding: 135px clamp(42px, 5.25vw, 100px) 85px 30px; }
.connection-copy { padding-bottom: 5px; min-width: 0; }
.dialog-form-content[hidden] { display: none; }
.connect-dialog h2 { margin: 0; font-size: clamp(48px, 5.25vw, 88px); font-weight: 570; letter-spacing: -.055em; line-height: 1.08; text-wrap: nowrap; }
.connect-dialog .connection-description { font-size: clamp(16px, 1.65vw, 27px); color: #b5bed1; line-height: 1.6; margin-top: 23px; letter-spacing: -.025em; }
#connection-form { margin-top: 50px; display: flex; flex-direction: column; gap: 25px; }
#connection-form .connection-field {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 22px;
  min-height: 88px; padding: 0 29px; border-radius: 33px;
  border: 1px solid #b9ceff78; color: #f7faff;
  background: radial-gradient(ellipse at 0 0, #cce6ff26, transparent 62%), radial-gradient(ellipse at 100% 100%, #b3a4ff22, transparent 63%), linear-gradient(120deg, #212d4152, #0c142380 54%, #242a434d);
  box-shadow: inset 0 1px 1px #eef7ff8a, inset 0 -1px 1px #bcc9ff65, inset 2px 0 6px #d6efff0c, 0 10px 35px -22px #c2ceff6b;
  backdrop-filter: blur(12px) saturate(1.45);
  -webkit-backdrop-filter: blur(12px) saturate(1.45);
  transition: border-color .25s, box-shadow .35s;
}
.connection-field > .icon { width: 33px; height: 33px; stroke-width: 1.5; }
.connection-field-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#connection-form .connection-field input {
  min-width: 0; width: 100%; min-height: 86px; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: #f1f4ff;
  font-size: clamp(19px, 1.65vw, 27px); letter-spacing: -.025em;
  outline: none;
}
#connection-form .connection-field input::placeholder { color: #a5aec1; opacity: 1; }
#connection-form .connection-field input:hover,#connection-form .connection-field input:focus { background: transparent; border: 0; }
#connection-form .connection-field:focus-within { border-color: #d3e7ff; box-shadow: inset 0 1px 1px #f5fbffb8, inset 0 -1px 1px #bfcaffc7, 0 0 0 3px #a9ceff21, 0 0 35px -14px #8bc3ff66; }
.connection-field > .glass-edge { background: radial-gradient(150px 10px at 54% 0, #fff, #c1deff99 32%, transparent 90%), linear-gradient(120deg, #d2eaff80, #ad9aff39 65%, #dcd4ff8a); padding: 1px; opacity: 1; }
.connection-field > .glass-optics { padding: 3px; }
#connection-form .connection-submit {
  width: 100%; min-height: 83px; margin: 0; padding: 16px 30px; gap: 30px;
  border: 1px solid #e6eeffb5; border-radius: 34px;
  background: radial-gradient(ellipse at 8% 0, #f4ffffcf, transparent 65%), radial-gradient(ellipse at 100% 100%, #d5c0ffab, transparent 63%), linear-gradient(110deg, #a2d5ff, #9ba7ff 59%, #ac88f4);
  box-shadow: inset 0 2px 3px #fff8, inset 0 -2px 5px #d3c6ff, 0 0 28px -8px #a8b9ff70, 0 12px 40px -21px #9d8cff9c;
  color: #071126; font-size: clamp(19px, 1.7vw, 28px); font-weight: 570; letter-spacing: -.035em;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .3s;
}
.connection-submit > span,.connection-submit > .icon { position: relative; z-index: 5; }
.connection-submit > .icon { width: 28px; height: 28px; stroke-width: 1.7; }
#connection-form .connection-submit:hover { transform: translate3d(0, -2px, 0); border-color: #fff; box-shadow: inset 0 2px 3px #fff9, inset 0 -2px 5px #dfd2ff, 0 0 34px -7px #a8b9ff7d, 0 14px 40px -20px #b19cffb0; }
#connection-form .connection-submit:active { transform: translate3d(0, 1px, 0) scale(.995); }
.connection-submit > .glass-edge { opacity: .65; }.connection-submit > .glass-optics { display: none; }
.connection-details { margin-top: 28px; }
.connect-dialog .dialog-doc-link { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; font-size: 12px; color: #b1c2dd; transition: color .2s; }
.dialog-doc-link .icon { width: 14px; height: 14px; }.dialog-doc-link:hover { color: #e9edff; }
.connect-dialog .form-local-note { margin-top: 16px; font-size: 11px; line-height: 1.7; color: #8296b4; text-align: center; }
.connect-dialog .dialog-success { padding: 0; text-align: left; outline: none; }
.connect-dialog .dialog-success h2 { font-size: clamp(44px, 4.3vw, 70px); text-wrap: balance; }
.connect-dialog .dialog-success p { margin-top: 24px; font-size: 18px; color: #b6c5dd; line-height: 1.7; }
.connect-dialog .dialog-success .success-mark { margin: 0 0 30px; width: 58px; height: 58px; background: #a4d5ff0c; border-color: #b8dfff5b; box-shadow: inset 0 1px 1px #e5f5ff6e; }
.connect-dialog .dialog-success .button { margin-top: 33px; min-height: 59px; font-size: 14px; }
.connect-dialog .dialog-success .text-button { margin: 25px 0 0; font-size: 12px; }
@media (min-width: 1700px) { .connection-layout { padding-left: 0; gap: 60px; }.connection-header { height: 135px; } }
@media (max-width: 1100px) and (min-width: 701px) { .connection-layout { padding-left: 20px; padding-right: 38px; grid-template-columns: .9fr 1.1fr; gap: 10px; }.connect-dialog h2 { font-size: clamp(38px, 4.6vw, 51px); }#connection-form { margin-top: 34px; gap: 22px; }#connection-form .connection-field { padding-inline: 22px; min-height: 76px; }#connection-form .connection-field input { min-height: 74px; }#connection-form .connection-submit { min-height: 72px; }.connection-header { padding-inline: 38px; } }
@media (max-width: 700px), (max-width: 900px) and (orientation: portrait) {
  .connection-header { height: 85px; padding-inline: 22px; gap: 10px; }
  .connection-header .brand { gap: 8px; }.connection-header .brand-wordmark { font-size: 24px; }.connection-header .brand-mark { width: 40px; height: 40px;   }
  .connection-header .connection-close { padding: 0; width: 44px; height: 44px; justify-content: center; }.connection-close > span { display: none; }
  .connection-layout { grid-template-columns: 1fr; gap: 0; align-content: start; padding: 94px 24px 34px; }
  .connection-orbit-space { height: clamp(180px, 29svh, 270px); }
  .connection-copy { padding-bottom: 0; width: 100%; max-width: 620px; margin-inline: auto; }
  .connect-dialog h2 { font-size: clamp(33px, 9.9vw, 61px); text-align: center; letter-spacing: -.055em; }
  .connect-dialog .connection-description { font-size: 14px; line-height: 1.6; margin: 16px auto 0; text-align: center; max-width: 320px; text-wrap: balance; }
  #connection-form { margin-top: 29px; gap: 18px; }
  #connection-form .connection-field { gap: 15px; padding: 0 20px; min-height: 67px; border-radius: 25px; }
  .connection-field > .icon { width: 25px; height: 25px; }
  #connection-form .connection-field input { min-height: 65px; font-size: 18px; }
  #connection-form .connection-submit { min-height: 65px; padding: 14px 20px; border-radius: 25px; font-size: 19px; gap: 24px; }
  .connection-submit > .icon { width: 24px; height: 24px; }
  .connection-details { margin-top: 23px; }
  .connect-dialog .dialog-doc-link { font-size: 11px; }.connect-dialog .form-local-note { font-size: 10px; margin-top: 15px; }
  .connection-art .ring-fallback { transform: translate(-50%, -50%) translate3d(0, -23.5vh, 0) scale(.38); }
  .connection-art .atmosphere { opacity: .5; }
  .connection-light { background: radial-gradient(ellipse at 50% 25%, #4883d118, transparent 45%), linear-gradient(180deg, transparent 30%, #050a123d 50%, #050a1273); }
  .connect-dialog .dialog-success { text-align: center; }.connect-dialog .dialog-success h2 { font-size: 39px; }.connect-dialog .dialog-success p { font-size: 14px; }.connect-dialog .dialog-success .success-mark { margin: 0 auto 22px; }.connect-dialog .dialog-success .text-button { margin: 25px auto 0; }
}
@media (max-height: 700px) and (min-width: 701px) { .connection-header { height: 85px; }.connection-layout { padding-top: 100px; padding-bottom: 35px; }#connection-form { margin-top: 30px; }.connection-details { margin-top: 20px; } }
@media (max-height: 700px) and (max-width: 700px) { .connection-layout { padding-top: 83px; padding-bottom: 26px; }.connection-orbit-space { height: 155px; }.connect-dialog h2 { font-size: 35px; }#connection-form { margin-top: 22px; }.connection-details { margin-top: 18px; } }
@media (prefers-reduced-motion: reduce) { .connect-dialog[open] { animation: none; }.connection-art #ring-canvas { transition: none; }#connection-form .connection-submit:hover,#connection-form .connection-submit:active { transform: none; } }