:root{color-scheme:dark;--bg:#070c17;--panel:#0b1525;--cyan:#5ce7ed;--violet:#998cff;--text:#e8f5ff;--muted:#8297b0;--line:#243950}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,'Segoe UI',system-ui,sans-serif;min-height:100svh;overflow-x:hidden}::selection{background:#37dce8;color:#08101c}.noise{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}.ambient{pointer-events:none;position:fixed;z-index:0;filter:blur(100px);border-radius:50%;opacity:.3}.ambient.a{background:#044e72;width:520px;height:440px;top:-140px;right:2%}.ambient.b{background:#37317d;width:440px;height:420px;bottom:-220px;left:-170px}#stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.site{position:relative;z-index:1;max-width:1600px;margin:auto;padding:0 clamp(22px,4.3vw,74px)}.header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #27394a;gap:10px}.logo{font-weight:900;letter-spacing:.1em;font-size:18px;white-space:nowrap}.logo-mark{color:var(--cyan);font-size:24px;margin-right:8px}.cyan{color:var(--cyan)}.logo-muted{font-family:monospace;color:#58728a;font-size:10px;font-weight:400;letter-spacing:.07em;margin-left:12px}.header-right{font-family:monospace;letter-spacing:.13em;color:#88bbaf;font-size:10px;white-space:nowrap}.live-dot,.small-live,.tiny-pulse{display:inline-block;background:#64f0b2;border-radius:50%;box-shadow:0 0 12px #64f0b2;animation:pulse 2.2s infinite}.live-dot{width:7px;height:7px;margin-right:8px}.clock{color:#6c8298;margin-left:17px}.intro{display:grid;grid-template-columns:minmax(290px,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(28px,4vw,80px);padding:clamp(36px,5vh,64px) 0 36px;min-height:min(760px,calc(100svh - 184px))}.intro-copy{position:relative}.eyebrow,.prompt,.intro-foot,.micro{font-family:'Courier New',monospace}.eyebrow{color:#9dcae2;font-size:11px;font-weight:700;letter-spacing:.16em;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.dash{height:1px;width:21px;background:var(--cyan)}.slash{color:var(--cyan)}.prompt{color:#acc4d8;font-size:13px;margin:30px 0 12px;min-height:18px}.prompt-symbol{color:#45e9bd}.cursor{color:var(--cyan);animation:blink .8s step-end infinite}h1{font-weight:900;letter-spacing:-.075em;font-size:clamp(54px,6.1vw,110px);line-height:.95;margin:0 0 26px}.outline{color:transparent;-webkit-text-stroke:1px #8ca2bb}.gradient{background:linear-gradient(100deg,#68f1ed 0%,#6ad7ff 48%,#ad9bff 100%);background-clip:text;-webkit-background-clip:text;color:transparent}.fullstop{color:var(--cyan);-webkit-text-fill-color:var(--cyan)}.intro-lead{font-size:clamp(16px,1.4vw,20px);font-weight:700;margin:0 0 14px;letter-spacing:-.025em}.intro-description{max-width:490px;color:#8da2b8;font-size:14px;line-height:1.9;margin:0}.intro-description strong{font-weight:600;color:#c9e1ed}.links{display:flex;align-items:center;gap:11px;margin:25px 0 31px;flex-wrap:wrap}.links a{display:inline-flex;align-items:center;justify-content:space-between;min-width:130px;gap:20px;border:1px solid #356a83;padding:13px 15px;color:#e5f9ff;text-decoration:none;font-size:11px;font-family:monospace;letter-spacing:.14em;font-weight:700;background:#112638;transition:background .25s,border-color .25s,transform .25s}.links a:hover,.links a:focus-visible{background:#164255;border-color:#76e9f5;transform:translateY(-3px);outline:none}.links a span{font-size:17px;color:var(--cyan)}.intro-foot{font-size:10px;letter-spacing:.11em;color:#667d98}.tiny-pulse{width:5px;height:5px;margin-right:8px}.arrow-down{color:var(--cyan);font-size:19px;margin-left:8px}.simulation{background:linear-gradient(145deg,#101d2e,#08111e 78%);border:1px solid #2e465a;box-shadow:0 0 0 1px #0c2835,0 20px 90px #010812aa,0 0 100px #105b6c22;min-width:0;overflow:hidden;position:relative}.simulation:before{content:'';height:2px;position:absolute;left:15%;right:15%;top:0;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 20px #4ce6f4}.sim-header,.sim-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:monospace;font-size:10px;letter-spacing:.12em;padding:17px 19px;color:#8ea8b9;border-bottom:1px solid #293b4d}.small-live{width:6px;height:6px;margin-right:8px}.sim-label{color:#577a9a}.network{aspect-ratio:640/440;min-height:290px;position:relative;overflow:hidden}.network-grid{position:absolute;inset:0;background-image:linear-gradient(#28506a35 1px,transparent 1px),linear-gradient(90deg,#28506a35 1px,transparent 1px);background-size:37px 37px;mask-image:radial-gradient(ellipse,#000 10%,transparent 75%)}.network:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 62% 50%,#1355791a,transparent 45%)}.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.wire-static path{stroke:#32506a;stroke-width:2;fill:none}.wire-moving path{stroke:#42d6e9;stroke-width:3;fill:none;stroke-dasharray:8 14;animation:packet 1.25s linear infinite;filter:drop-shadow(0 0 5px #27c8ff88)}.flow-point{fill:#a1fdff;filter:drop-shadow(0 0 7px #8cfaff)}.node{position:absolute;transform:translate(-50%,-50%);width:13.5%;min-width:67px;max-width:100px;aspect-ratio:1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,#142b41,#102035);border:1px solid #39576f;box-shadow:0 9px 30px #0006;transition:background .4s,border-color .4s,box-shadow .4s,scale .4s;z-index:2}.node.active{background:linear-gradient(160deg,#18546d,#172e4a);border-color:#76eff8;box-shadow:0 0 28px #0ee8ef77, inset 0 0 30px #38bac71b;scale:1.13}.node-icon{font-size:clamp(18px,2vw,27px);line-height:1.1;color:#6feaf0;margin-bottom:7px}.node strong{font:700 clamp(8px,.83vw,11px)/1.2 monospace;color:#e8f5ff}.node small{font:400 clamp(6px,.68vw,8px)/1.2 monospace;letter-spacing:.04em;color:#789eb6;margin-top:3px}.client{left:14.0625%;top:49.55%}.firewall{left:37.42%;top:49.55%}.server{left:61.72%;top:49.55%}.azure{left:85.31%;top:49.55%}.ad{left:61.72%;top:23.6%}.vm{left:61.72%;top:77.7%}.network-coordinate{position:absolute;font:9px monospace;color:#4d7e95;letter-spacing:.1em}.coord-a{left:18px;top:13px}.coord-b{right:15px;bottom:15px}.scanner{position:absolute;top:-2px;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#76eafa40,transparent);box-shadow:0 0 17px #34e9ff38;animation:scan 8s linear infinite;pointer-events:none}.stage{display:flex;align-items:center;gap:20px;min-height:102px;padding:20px 22px 19px;border-top:1px solid #2a455a}.stage-count{color:#51e1e8;font:600 21px monospace;min-width:92px;white-space:nowrap}.stage-copy{flex:1}.stage-kicker{color:#7a9db6;font:10px monospace;letter-spacing:.16em;margin:0 0 5px}.stage h2{font-size:clamp(16px,1.5vw,22px);letter-spacing:-.02em;margin:0 0 5px}.stage p:last-child{color:#95aabd;font-size:12px;line-height:1.4;margin:0}.stage-signal{color:var(--cyan);font-size:24px;animation:pulse 2s infinite}.progress-track{height:3px;background:#172b3d}.progress-fill{display:block;width:0;height:100%;background:linear-gradient(90deg,#42efdf,#7b9aff);box-shadow:0 0 12px #42efdf}.sim-bottom{border-bottom:0;border-top:1px solid #23384b;padding:12px 19px;font-size:9px;color:#637e94}.strip{border:1px solid #294257;background:#0c1928;display:flex;align-items:center;min-height:66px;gap:20px;padding:13px 20px;margin-bottom:24px}.strip-label{font:bold 10px monospace;letter-spacing:.1em;white-space:nowrap;color:#dfedf7}.strip-mark{font-size:18px;color:#51dfef;margin-right:6px}.strip-sub{color:#668ba2}.strip-console{display:flex;align-items:center;gap:12px;min-width:0;flex:1;font:12px monospace;color:#a5daca;overflow:hidden;white-space:nowrap}.strip-console #event-msg{overflow:hidden;text-overflow:ellipsis}.event-time{color:#63819d}.console-prefix{color:#6cf6bf}.console-cursor{color:#6cf6bf;animation:blink 1s step-end infinite}.strip-count{font:10px monospace;color:#7d9fb3;white-space:nowrap}.strip-count span{font-size:17px;color:var(--cyan)}footer{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:0 0 22px;color:#57718a;font:10px monospace;letter-spacing:.08em}@keyframes blink{50%{opacity:0}}@keyframes pulse{50%{opacity:.35;box-shadow:0 0 4px #5bf6b3}}@keyframes packet{to{stroke-dashoffset:-44}}@keyframes scan{from{transform:translateY(0)}to{transform:translateY(500px)}}@media(max-width:1100px){.intro{gap:28px}.logo-muted{display:none}.stage{gap:12px}.stage-count{font-size:17px;min-width:78px}.intro-description{font-size:13px}}@media(max-width:780px){.header{height:70px}.header-right{font-size:9px}.clock{display:none}.intro{grid-template-columns:1fr;padding:40px 0 24px;min-height:0}.intro-copy{max-width:650px}.intro h1{font-size:clamp(57px,13.5vw,99px)}.intro-foot{display:none}.simulation{max-width:680px;width:100%;margin:auto}.node strong{font-size:clamp(8px,1.9vw,11px)}.node small{font-size:clamp(6px,1.4vw,8px)}.node-icon{font-size:clamp(17px,4vw,25px)}.strip{flex-wrap:wrap;gap:9px}.strip-label{width:100%}.strip-count{display:none}footer{font-size:9px}}@media(max-width:430px){.site{padding:0 16px}.header-right{font-size:8px}.logo{font-size:15px}.eyebrow{font-size:9px}.network{min-height:245px}.node{min-width:53px}.node-icon{margin-bottom:4px}.stage{padding:13px 12px;min-height:112px}.stage-count{min-width:60px;font-size:13px}.stage h2{font-size:17px}.stage p:last-child{font-size:11px}.sim-header{font-size:8px;padding:14px 11px}.sim-bottom{font-size:8px;padding:10px}.strip-console{font-size:10px}.intro-description{font-size:13px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.wire-moving{stroke-dasharray:none}.scanner{display:none}}


/* INFRA/OS V4: packets and node states share one JavaScript timeline. */
#packet-layer { pointer-events:none; }
#packet-layer .flow-point { fill:#b6ffff; stroke:#38c7ff; stroke-width:1.6; filter:drop-shadow(0 0 8px #65f7ff); }
.wire-static path { stroke:#3c657e; stroke-width:2.4; }
.node.active { border-color:#a0faff; box-shadow:0 0 36px #0ee8efaa, inset 0 0 32px #38bac72c; }
.strip-console { gap:10px; font-variant-numeric:tabular-nums; }
.strip-console #event-time { flex:0 0 8ch; }
.strip-console .console-prefix { flex:0 0 auto; }
.strip-console #event-msg { flex:1; min-width:0; }
@media(max-width:780px) {.strip-console{width:100%;}}

/* INFRA/OS V5: event stream visual alignment and coordinated arrival pulse */
.strip { align-items:center; }
.strip-console {
  display:grid;
  grid-template-columns:8ch 1ch minmax(0,1fr) 1ch;
  column-gap:10px;
  align-items:baseline;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.strip-console #event-time { display:block; width:auto; min-width:0; flex:none; font-variant-numeric:tabular-nums; }
.strip-console .console-prefix { width:auto; flex:none; }
.strip-console #event-msg { display:block; flex:none; width:auto; min-width:0; text-overflow:ellipsis; overflow:hidden; }
.strip-console .console-cursor { justify-self:end; }
#pulse-layer { pointer-events:none; }
.arrival-ring { fill:none; stroke:#7cfcff; stroke-width:3; opacity:0; transform-box:fill-box; transform-origin:center; }
.arrival-ring.burst { animation:arrival-ring 1.25s cubic-bezier(.16,.68,.32,1) both; }
.simulation.arrival-flash:after { content:""; position:absolute; inset:0; border:1px solid #78ffff; box-shadow:inset 0 0 45px #1af3ff3a, 0 0 28px #4cfbff38; pointer-events:none; opacity:0; animation:arrival-flash .9s ease-out both; z-index:5; }
@keyframes arrival-ring { 0%{opacity:.95;transform:scale(.55);stroke-width:4} 70%{opacity:.65} 100%{opacity:0;transform:scale(5.2);stroke-width:.6} }
@keyframes arrival-flash { 0%{opacity:0} 20%{opacity:1} 100%{opacity:0} }
@media(max-width:780px){ .strip-console{width:100%;grid-template-columns:8ch 1ch minmax(0,1fr) 1ch;column-gap:7px;} }
@media(prefers-reduced-motion:reduce){ .arrival-ring.burst,.simulation.arrival-flash:after{animation:none!important;opacity:0!important;} }

/* ==================================
   EVENT STREAM — PIXEL ALIGNMENT FIX
   ================================== */

.strip {
  display: flex;
  align-items: center;
}

.strip-label,
.strip-console,
.strip-count {
  display: flex;
  align-items: center;
  line-height: 1;
}

.strip-console {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  white-space: nowrap;
}

.strip-console #event-time,
.strip-console .console-prefix,
.strip-console #event-msg,
.strip-console .console-cursor {
  display: inline-flex;
  align-items: center;
  height: 20px;
  line-height: 20px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  transform: none;
}

.strip-console #event-time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.strip-console #event-msg {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strip-mark {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
}

/* Remove circular energy pulse effects */
.energy-ring,
.energy-pulse,
.pulse-ring,
.node-ring {
  display: none !important;
}

/* Subtle white Matrix rain */
#matrix-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
}

@media (prefers-reduced-motion: reduce) {
  #matrix-bg {
    display: none;
  }
}