:root {
  color-scheme: dark;
  --azure: #16aaff;
  --ice: #a8e6ff;
  --dim: rgba(22, 170, 255, .22);
  --line: rgba(83, 197, 255, .5);
  --black: #010508;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; margin: 0; }

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(0, 88, 145, .2), transparent 34%),
    linear-gradient(rgba(14, 99, 145, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 99, 145, .035) 1px, transparent 1px),
    var(--black);
  background-size: auto, 42px 42px, 42px 42px, auto;
  color: var(--azure);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.012), rgba(255,255,255,.012) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: screen;
  z-index: 20;
}

#field { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .78; }

.scan {
  position: fixed;
  inset: -20% 0 auto;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(31, 176, 255, .04), transparent);
  animation: scan 9s linear infinite;
}

.interface { position: relative; min-height: 100vh; isolation: isolate; }

.frame { position: absolute; left: 3vw; right: 3vw; display: flex; justify-content: space-between; opacity: .72; }
.frame--north { top: 2.8vh; }
.frame--south { bottom: 3vh; }
.frame i { width: clamp(16px, 4vw, 74px); height: 2px; background: var(--line); box-shadow: 0 0 10px var(--dim); }
.frame i:nth-child(odd) { transform: skewX(-42deg); }

.visual-grid {
  position: absolute;
  top: 7vh;
  left: 5vw;
  right: 5vw;
  height: 58vh;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 48vw) 1fr;
  align-items: center;
  gap: 2vw;
}

.orbital { position: relative; width: min(49vw, 690px); aspect-ratio: 1; justify-self: center; }
.logo { position: absolute; width: 27%; height: 27%; object-fit: contain; inset: 36.5%; filter: drop-shadow(0 0 22px rgba(38, 174, 255, .38)); z-index: 5; }
.globe { position: absolute; inset: 18%; border: 1px solid rgba(59, 188, 255, .38); border-radius: 50%; box-shadow: inset 0 0 50px rgba(0, 126, 210, .12), 0 0 50px rgba(0, 126, 210, .08); }
.globe::before, .globe::after, .globe span { content: ""; position: absolute; inset: 0; border: 1px solid rgba(70, 195, 255, .2); border-radius: 50%; }
.globe::before { transform: scaleX(.44); }
.globe::after { transform: scaleY(.44); }
.globe span:nth-child(1) { clip-path: inset(49.7% 0 49.7%); background: var(--azure); }
.globe span:nth-child(2) { transform: rotate(38deg) scaleY(.55); }
.globe span:nth-child(3) { transform: rotate(-38deg) scaleY(.55); }

.orbit { position: absolute; border-radius: 50%; border: 1px solid var(--dim); animation: turn 28s linear infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; background: var(--azure); border-radius: 50%; box-shadow: 0 0 10px var(--azure); }
.orbit::before { width: 4px; height: 4px; top: -2px; left: 50%; }
.orbit::after { width: 2px; height: 2px; bottom: 14%; left: 14%; }
.orbit i { position: absolute; inset: 7%; border: 1px dashed rgba(75, 196, 255, .18); border-radius: 50%; }
.orbit--one { inset: 7%; transform: rotate(18deg); }
.orbit--two { inset: 12%; border-style: dashed; animation-direction: reverse; animation-duration: 19s; }
.orbit--three { inset: 2%; border: 0; background: conic-gradient(from 30deg, transparent 0 8%, var(--line) 8% 8.35%, transparent 8.35% 31%, var(--line) 31% 31.3%, transparent 31.3% 74%, var(--line) 74% 74.2%, transparent 74.2%); mask: radial-gradient(transparent 68%, #000 68.3% 69.2%, transparent 69.5%); }

.telemetry { min-width: 0; opacity: .74; }
.radar { position: relative; width: min(14vw, 170px); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 22%, rgba(31, 174, 255, .16) 22.5% 23%, transparent 23.5% 44%); }
.radar::before, .radar::after { content: ""; position: absolute; background: var(--line); }
.radar::before { left: 50%; top: 0; width: 1px; height: 100%; }
.radar::after { top: 50%; left: 0; height: 1px; width: 100%; }
.radar span { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(23, 169, 255, .26), transparent 20%); animation: turn 4s linear infinite; }
.radar b { position: absolute; width: 5px; height: 5px; left: 67%; top: 29%; border-radius: 50%; background: var(--ice); box-shadow: 0 0 11px var(--azure); animation: blink 1.7s steps(2) infinite; }
.telemetry--left .radar { margin-left: auto; }

.bars { display: grid; gap: 5px; margin: 3vh 0 0 auto; width: min(16vw, 190px); }
.bars i { display: block; height: 3px; background: linear-gradient(90deg, transparent, var(--azure)); transform-origin: right; animation: pulse 2.2s ease-in-out infinite alternate; }
.bars i:nth-child(2) { width: 64%; margin-left: auto; animation-delay: -.4s; }
.bars i:nth-child(3) { width: 82%; margin-left: auto; animation-delay: -.8s; }
.bars i:nth-child(4) { width: 38%; margin-left: auto; animation-delay: -1.2s; }
.bars i:nth-child(5) { width: 91%; margin-left: auto; animation-delay: -.3s; }
.bars i:nth-child(6) { width: 54%; margin-left: auto; animation-delay: -1s; }
.bars i:nth-child(7) { width: 72%; margin-left: auto; animation-delay: -.7s; }

.matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: min(14vw, 170px); }
.matrix i { aspect-ratio: 1.8; border: 1px solid rgba(62, 190, 255, .3); background: linear-gradient(135deg, transparent 50%, rgba(21, 165, 245, .18)); animation: blink 3s steps(2) infinite; }
.matrix i:nth-child(2n) { animation-delay: -1s; }
.matrix i:nth-child(3n) { animation-delay: -2s; }
.signal { width: min(14vw, 170px); margin-top: 3vh; display: flex; align-items: flex-end; gap: 8px; height: 55px; }
.signal span { width: 2px; height: 32%; background: var(--azure); box-shadow: 0 0 8px var(--azure); animation: signal 1.4s ease-in-out infinite alternate; }
.signal span:nth-child(2) { height: 64%; animation-delay: -.4s; }.signal span:nth-child(3) { height: 100%; animation-delay: -.8s; }.signal span:nth-child(4) { height: 46%; animation-delay: -1.1s; }

.access {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  width: min(620px, 82vw);
  display: grid;
  grid-template-columns: 1fr 1fr 48px;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(61, 187, 255, .22);
  background: rgba(0, 10, 17, .72);
  box-shadow: 0 0 50px rgba(0, 114, 187, .1), inset 0 0 25px rgba(12, 145, 222, .04);
  backdrop-filter: blur(8px);
}
.access::before, .access::after { content: ""; position: absolute; top: -1px; width: 24px; height: 1px; background: var(--ice); box-shadow: 0 0 8px var(--azure); }
.access::before { left: -1px; }.access::after { right: -1px; }
.field { height: 42px; display: flex; align-items: center; border: 1px solid rgba(48, 180, 247, .28); background: rgba(4, 20, 29, .84); }
.field__glyph { position: relative; width: 34px; height: 100%; flex: 0 0 34px; border-right: 1px solid rgba(48, 180, 247, .18); }
.field__glyph::before { content: ""; position: absolute; width: 8px; height: 8px; border: 1px solid var(--azure); border-radius: 50%; left: 12px; top: 8px; }
.field__glyph::after { content: ""; position: absolute; width: 14px; height: 7px; border: 1px solid var(--azure); border-bottom: 0; border-radius: 10px 10px 0 0; left: 9px; top: 23px; }
.field__glyph--key::before { width: 9px; height: 9px; top: 15px; left: 8px; }
.field__glyph--key::after { width: 10px; height: 1px; border: 0; border-top: 1px solid var(--azure); border-radius: 0; top: 20px; left: 18px; box-shadow: 6px 3px 0 -2px var(--azure); }
.field input { min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; padding: 0 12px; color: var(--ice); background: transparent; font: 400 14px/1 ui-monospace, monospace; letter-spacing: .12em; caret-color: var(--azure); }
.field:focus-within { border-color: var(--azure); box-shadow: inset 0 0 16px rgba(29, 169, 245, .1), 0 0 9px rgba(29, 169, 245, .12); }
.access button, .logout button { border: 1px solid rgba(48, 180, 247, .42); background: rgba(7, 34, 49, .9); color: var(--azure); cursor: pointer; }
.access button:hover, .access button:focus-visible, .logout button:hover, .logout button:focus-visible { border-color: var(--ice); outline: 0; box-shadow: 0 0 15px rgba(22, 170, 255, .3); }
.access button span { display: block; width: 10px; height: 10px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); margin: auto; }
.access--failed { animation: reject .35s linear; border-color: rgba(255, 67, 99, .6); }
.access--failed .field { border-color: rgba(255, 67, 99, .42); }
.passkey-access{position:absolute;z-index:4;left:50%;top:calc(70% + 54px);width:min(330px,82vw);transform:translateX(-50%);text-align:center}.passkey-access button{width:100%;min-height:44px;border:1px solid rgba(48,180,247,.42);background:rgba(2,24,36,.92);color:var(--ice);font:12px ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;cursor:pointer}.passkey-access button:focus-visible,.passkey-access button:hover{outline:0;border-color:var(--ice);box-shadow:0 0 15px rgba(22,170,255,.3)}.passkey-symbol{display:inline-block;width:13px;height:13px;margin-right:9px;border:1px solid var(--azure);border-radius:50%;vertical-align:-2px;box-shadow:0 0 7px rgba(22,170,255,.6)}.passkey-access p{min-height:16px;margin:7px 0;color:#ff4569;font-size:10px;letter-spacing:.06em}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.interface--console { display: grid; place-items: center; }
.console-grid { position: absolute; inset: 7vh 6vw; border: 1px solid rgba(53, 187, 255, .18); display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; padding: 4vw; }
.console-grid::before, .console-grid::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(53, 187, 255, .1); transform: skewX(-14deg); }.console-grid::after { inset: 22%; transform: skewX(14deg); }
.scope { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }.scope i { aspect-ratio: 1; border: 1px solid var(--dim); background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(31, 174, 255, .12) 6px 7px); }
.mesh { height: 56%; margin: 0 10%; background: linear-gradient(90deg, transparent 49.7%, var(--line) 50%, transparent 50.3%), linear-gradient(transparent 49.7%, var(--line) 50%, transparent 50.3%), repeating-radial-gradient(ellipse, transparent 0 12%, rgba(25, 171, 250, .14) 12.4% 12.8%, transparent 13.2% 25%); border-radius: 50%; animation: breathe 4s ease-in-out infinite; }
.logo--console { position: relative; inset: auto; width: min(150px, 25vw); height: auto; }
.logout { position: absolute; right: 4vw; bottom: 4vh; }.logout button { width: 42px; height: 42px; }.logout button span { display: block; width: 13px; height: 13px; border: 1px solid; border-right: 0; margin: auto; position: relative; }.logout button span::after { content: ""; position: absolute; width: 12px; border-top: 1px solid; right: -7px; top: 5px; }

@keyframes turn { to { transform: rotate(360deg); } }
@keyframes scan { to { transform: translateY(680%); } }
@keyframes blink { 50% { opacity: .22; } }
@keyframes pulse { to { transform: scaleX(.25); opacity: .35; } }
@keyframes signal { to { transform: scaleY(.2); opacity: .3; } }
@keyframes reject { 25% { transform: translate(calc(-50% - 7px), -50%); } 75% { transform: translate(calc(-50% + 7px), -50%); } }
@keyframes breathe { 50% { opacity: .45; transform: scale(.96); } }

@media (max-width: 760px) {
  .visual-grid { left: 2vw; right: 2vw; grid-template-columns: 1fr; height: 55vh; }
  .orbital { width: min(92vw, 530px); }
  .telemetry { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; }
  .telemetry--left { left: 2vw; }.telemetry--right { right: 2vw; }
  .radar, .matrix, .signal, .bars { width: 16vw; }
  .access { top: 72%; grid-template-columns: 1fr 48px; }
  .passkey-access{top:calc(72% + 105px)}
  .access .field:first-of-type { grid-column: 1 / -1; }
}

@media (max-height: 620px) {
  .visual-grid { top: 2vh; height: 53vh; }
  .access { top: 74%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}