:root {
      --bg: #04070b;
      --panel: rgba(255,255,255,.045);
      --border: rgba(125,249,255,.18);
      --text: #d9fff8;
      --muted: rgba(217,255,248,.62);
      --cyan: #00ffd5;
      --blue: #7df9ff;
      --gold: #f5c76b;
      --danger: #ff6b6b;
      --font-base: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-mono: "Share Tech Mono", "Courier New", monospace;
      --grid-color: rgba(125,249,255,.035);
      --grid-size: 42px;
      --cyan-rgb: 0,255,213;
      --gold-rgb: 245,199,107;
      --text-rgb: 217,255,248;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 25% 20%, rgba(var(--cyan-rgb),.14), transparent 32%),
        radial-gradient(circle at 75% 80%, rgba(var(--gold-rgb),.1), transparent 28%),
        linear-gradient(135deg, #020409, #08111a);
      color: var(--text);
      font-family: var(--font-base);
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
      background-size: var(--grid-size) var(--grid-size);
      pointer-events: none;
    }

    .topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 64px;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 18px;
      padding: 0 18px;
      border-bottom: 1px solid var(--border);
      background: rgba(2,7,12,.72);
      backdrop-filter: blur(18px);
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: 12px;
    }

    .login-test-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      border: 1px solid rgba(0,255,213,.28);
      border-radius: 8px;
      padding: 0 14px;
      background: rgba(0,255,213,.06);
      color: var(--text);
      cursor: pointer;
      font: inherit;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      transition: .18s ease;
      white-space: nowrap;
    }

    .login-test-btn:hover {
      border-color: rgba(245,199,107,.64);
      background: rgba(245,199,107,.08);
      box-shadow: 0 0 22px rgba(0,255,213,.12);
    }

    .logout-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 22px;
      border: 1px solid rgba(255,107,107,.72);
      border-radius: 6px;
      background: #d71920;
      color: white;
      text-decoration: none;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      box-shadow: 0 0 24px rgba(255,0,0,.28);
      transition: .18s ease;
      white-space: nowrap;
    }

    .logout-btn:hover {
      background: #ff1f2a;
      border-color: rgba(255,255,255,.55);
      box-shadow: 0 0 34px rgba(255,0,0,.42);
      transform: translateY(-1px);
    }

    .logout-blackout {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 25% 20%, rgba(var(--cyan-rgb),.14), transparent 32%),
        radial-gradient(circle at 75% 80%, rgba(var(--gold-rgb),.1), transparent 28%),
        linear-gradient(135deg, #020409, #08111a);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .34s ease, visibility .34s ease;
    }

    .logout-blackout.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .logout-blackout::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
      background-size: var(--grid-size) var(--grid-size);
      pointer-events: none;
    }

    .logout-copy {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .logout-title {
      margin: 0;
      color: var(--text);
      font-size: clamp(24px, 5.6vw, 64px);
      font-weight: 950;
      line-height: .9;
      letter-spacing: .08em;
      text-transform: uppercase;
      text-shadow: 0 0 34px rgba(0,255,213,.22);
      min-height: 1em;
      white-space: nowrap;
    }

    body.logging-out {
      overflow: hidden;
    }

    body.logging-out .topbar,
    body.logging-out .node,
    body.logging-out .scan,
    body.logging-out .login-overlay {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }

    body.login-running .topbar,
    body.login-running .node,
    body.login-running .scan {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    body.login-revealing .topbar,
    body.login-revealing .scan {
      animation: homeReveal .46s ease both;
    }

    body.login-revealing .node {
      animation: homeReveal .58s cubic-bezier(.2,.8,.2,1) both;
    }

    .login-overlay {
      position: fixed;
      inset: 0;
      z-index: 9990;
      display: grid;
      place-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 25% 20%, rgba(var(--cyan-rgb),.14), transparent 32%),
        radial-gradient(circle at 75% 80%, rgba(var(--gold-rgb),.1), transparent 28%),
        linear-gradient(135deg, #020409, #08111a);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .34s ease, visibility .34s ease;
    }

    .login-overlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .login-overlay::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
      background-size: var(--grid-size) var(--grid-size);
      pointer-events: none;
    }

    .login-sequence {
      position: fixed;
      inset: 0;
      z-index: 2;
      width: 100vw;
      height: 100vh;
      display: grid;
      place-items: center;
      text-align: center;
    }

    .login-copy {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      opacity: 1;
      transform: translateY(-50%);
    }

    .login-title {
      margin: 0;
      color: var(--text);
      font-size: clamp(24px, 5.6vw, 64px);
      font-weight: 950;
      line-height: .9;
      letter-spacing: .08em;
      text-transform: uppercase;
      text-shadow: 0 0 34px rgba(0,255,213,.22);
      min-height: 1em;
      white-space: nowrap;
    }

    .login-title.glitch-out {
      position: relative;
      color: #fff;
      animation: welcomeGlitchPop .58s steps(1,end) both;
      text-shadow:
        3px 0 0 rgba(0,255,213,.82),
        -3px 0 0 rgba(255,107,107,.74),
        0 0 38px rgba(245,199,107,.36);
    }

    .login-title.glitch-out::before,
    .login-title.glitch-out::after {
      content: attr(data-glitch);
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .login-title.glitch-out::before {
      color: var(--cyan);
      clip-path: inset(0 0 52% 0);
      animation: welcomeGlitchTop .58s steps(1,end) both;
    }

    .login-title.glitch-out::after {
      color: var(--danger);
      clip-path: inset(48% 0 0 0);
      animation: welcomeGlitchBottom .58s steps(1,end) both;
    }

    .login-overlay.closing .login-copy {
      animation: loginCopyOut .48s ease forwards;
    }

    @keyframes loginCopyOut {
      to { opacity: 0; transform: translateY(calc(-50% - 8px)); }
    }

    @keyframes welcomeGlitchPop {
      0% { transform: translate(0,0) scale(1); filter: brightness(1); letter-spacing: .08em; }
      10% { transform: translate(7px,-2px) skewX(-5deg) scale(1.03); filter: brightness(1.6); }
      18% { transform: translate(-9px,3px) skewX(4deg) scale(.99); }
      28% { transform: translate(4px,0) scale(1.08); letter-spacing: .13em; }
      38% { transform: translate(-3px,-2px) skewX(-2deg); filter: brightness(2); }
      52% { transform: translate(10px,2px) skewX(5deg) scale(1.04); }
      64% { transform: translate(-6px,0) scale(1.01); }
      78% { transform: translate(2px,-1px); text-shadow: 0 0 52px rgba(245,199,107,.72); }
      100% { transform: translate(0,0) scale(1); filter: brightness(1.15); letter-spacing: .08em; }
    }

    @keyframes welcomeGlitchTop {
      0%, 100% { transform: translate(0,0); opacity: 0; }
      10% { transform: translate(-18px,-6px); opacity: .9; }
      18% { transform: translate(22px,2px); opacity: .65; }
      38% { transform: translate(-12px,-1px); opacity: .95; }
      52% { transform: translate(26px,-4px); opacity: .45; }
      64% { transform: translate(-8px,0); opacity: .8; }
    }

    @keyframes welcomeGlitchBottom {
      0%, 100% { transform: translate(0,0); opacity: 0; }
      10% { transform: translate(16px,5px); opacity: .72; }
      28% { transform: translate(-24px,2px); opacity: .9; }
      44% { transform: translate(10px,7px); opacity: .58; }
      58% { transform: translate(-18px,3px); opacity: .85; }
      78% { transform: translate(8px,0); opacity: .4; }
    }

    @keyframes homeReveal {
      from {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
      }
    }

    .node {
      position: relative;
      z-index: 5;
      min-height: 100vh;
      display: block;
      padding: 90px 26px 26px;
    }

    .stage {
      position: relative;
      min-height: 360px;
      border-radius: 18px;
      overflow: hidden;
      margin-bottom: 24px;
      border: 1px solid rgba(125,249,255,.16);
      background:
        radial-gradient(circle at 76% 48%, rgba(0,255,213,.18), transparent 26%),
        radial-gradient(circle at 82% 46%, rgba(245,199,107,.1), transparent 18%),
        linear-gradient(270deg, rgba(0,255,213,.08), rgba(255,255,255,.018) 46%, rgba(245,199,107,.04));
    }

    .stage::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(2,7,12,.72), transparent 52%),
        radial-gradient(circle at 76% 48%, rgba(0,255,213,.24), transparent 34%),
        radial-gradient(circle at 82% 54%, rgba(245,199,107,.16), transparent 28%),
        radial-gradient(circle at 72% 42%, rgba(125,249,255,.12), transparent 24%);
      pointer-events: none;
      opacity: 1;
    }

    .tetra-fallback {
      position: absolute;
      right: 0;
      top: 0;
      width: 46%;
      height: 360px;
      display: grid;
      place-items: center;
      z-index: 2;
      pointer-events: none;
      opacity: .82;
      transition: opacity .22s ease;
    }

    .recon-badge {
      width: min(420px, 80vw);
      aspect-ratio: 1 / 1;
      position: relative;
      display: grid;
      place-items: center;
      overflow: visible;
      isolation: isolate;
      pointer-events: none;
      opacity: .9;
      contain: layout paint;
      transform: translateY(-24px) translateZ(0);
      filter:
        drop-shadow(0 0 18px rgba(0,255,213,.2))
        drop-shadow(0 16px 30px rgba(0,0,0,.34));
    }

    .recon-badge svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .recon-badge::before {
      content: "";
      position: absolute;
      inset: 10% 4% 4%;
      z-index: 3;
      pointer-events: none;
      opacity: 0;
      background:
        linear-gradient(90deg, transparent 0 8%, rgba(111,247,255,.72) 8% 19%, transparent 19% 100%) 0 21% / 100% 3px no-repeat,
        linear-gradient(90deg, transparent 0 38%, rgba(45,240,106,.62) 38% 56%, transparent 56% 100%) 0 48% / 100% 2px no-repeat,
        linear-gradient(90deg, transparent 0 16%, rgba(255,255,255,.5) 16% 31%, transparent 31% 100%) 0 71% / 100% 2px no-repeat;
      mix-blend-mode: screen;
      transform: translateY(-24px);
    }

    body.home-glitching .recon-badge::before {
      animation: badgeGlitchLines .86s steps(1,end) both;
    }

    body.home-glitch-slice .recon-badge::before {
      background:
        linear-gradient(90deg, transparent 0 5%, rgba(111,247,255,.9) 5% 28%, transparent 28% 100%) 0 18% / 100% 4px no-repeat,
        linear-gradient(90deg, transparent 0 44%, rgba(255,255,255,.68) 44% 64%, transparent 64% 100%) 0 42% / 100% 3px no-repeat,
        linear-gradient(90deg, transparent 0 12%, rgba(255,107,107,.5) 12% 34%, transparent 34% 100%) 0 66% / 100% 2px no-repeat,
        linear-gradient(90deg, transparent 0 58%, rgba(45,240,106,.75) 58% 82%, transparent 82% 100%) 0 79% / 100% 5px no-repeat;
      animation: badgeSliceLines .92s steps(1,end) both;
    }

    body.home-glitch-pulse .recon-badge::before {
      background:
        radial-gradient(circle at 50% 49%, rgba(245,199,107,.36), transparent 33%),
        radial-gradient(circle at 50% 49%, rgba(111,247,255,.42), transparent 45%),
        linear-gradient(90deg, transparent 0 20%, rgba(255,255,255,.58) 20% 76%, transparent 76% 100%) 0 52% / 100% 3px no-repeat;
      animation: badgePulseBloom .64s steps(1,end) both;
    }

    body.home-glitch-desync .recon-badge::before {
      background:
        linear-gradient(90deg, transparent 0 7%, rgba(111,247,255,.82) 7% 15%, transparent 15% 100%) 0 24% / 100% 3px no-repeat,
        linear-gradient(90deg, transparent 0 62%, rgba(245,199,107,.7) 62% 77%, transparent 77% 100%) 0 50% / 100% 2px no-repeat,
        linear-gradient(90deg, transparent 0 28%, rgba(45,240,106,.62) 28% 51%, transparent 51% 100%) 0 72% / 100% 3px no-repeat;
      animation: badgeDesyncLines .9s steps(1,end) both;
    }

    body.home-glitching .recon-badge svg {
      animation: badgeLoadGlitch .86s steps(1,end) both;
      filter:
        drop-shadow(3px 0 0 rgba(111,247,255,.38))
        drop-shadow(-3px 0 0 rgba(45,240,106,.32));
    }

    body.home-glitch-slice .recon-badge svg {
      animation: badgeSliceGlitch .92s steps(1,end) both;
      filter:
        drop-shadow(7px 0 0 rgba(111,247,255,.32))
        drop-shadow(-5px 0 0 rgba(255,107,107,.22))
        saturate(1.35);
    }

    body.home-glitch-pulse .recon-badge svg {
      animation: badgePulseGlitch .64s steps(1,end) both;
      filter:
        drop-shadow(0 0 26px rgba(245,199,107,.38))
        drop-shadow(0 0 18px rgba(111,247,255,.34))
        brightness(1.25);
    }

    body.home-glitch-desync .recon-badge svg {
      animation: badgeDesyncGlitch .9s steps(1,end) both;
      filter:
        drop-shadow(9px -2px 0 rgba(111,247,255,.26))
        drop-shadow(-8px 2px 0 rgba(45,240,106,.24))
        drop-shadow(0 0 18px rgba(255,255,255,.12));
    }

    .badge {
      transform-origin: 250px 250px;
      animation: hoverFloat 5.4s ease-in-out infinite;
      filter: drop-shadow(0 14px 16px rgba(0,0,0,.25));
    }

    .hud-ring-a {
      transform-origin: 250px 250px;
      animation: spinSlow 18s linear infinite;
      filter: drop-shadow(0 0 8px rgba(45,240,106,.36));
    }

    .hud-ring-b {
      transform-origin: 250px 250px;
      animation: spinReverse 11s linear infinite;
      filter: drop-shadow(0 0 9px rgba(111,247,255,.28));
    }

    .hud-ring-a circle {
      stroke: rgba(45,240,106,.58);
      stroke-width: 3;
    }

    .hud-ring-a path {
      stroke: rgba(111,247,255,.78);
      stroke-width: 3.2;
    }

    .hud-ring-b circle:first-child {
      stroke: rgba(45,240,106,.42);
      stroke-width: 2.8;
    }

    .hud-ring-b circle:last-child {
      stroke: rgba(111,247,255,.38);
      stroke-width: 2.2;
    }

    .pulse-ring {
      transform-origin: 250px 250px;
      animation: ringPulse 3.2s ease-out infinite;
      stroke: rgba(45,240,106,.46);
      stroke-width: 3;
      filter: drop-shadow(0 0 10px rgba(45,240,106,.3));
    }

    .scan-beam {
      display: none;
    }

    .glitch-line {
      animation: glitchFlicker 2.2s steps(1,end) infinite;
    }

    .frame-segment {
      fill: #040607;
      stroke: rgba(111,247,255,.1);
      stroke-width: 1;
      filter: drop-shadow(0 0 4px rgba(45,240,106,.22));
    }

    .frame-glow {
      fill: none;
      stroke: rgba(45,240,106,.55);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: .65;
    }

    .triangle-outline {
      fill: none;
      stroke: rgba(255,255,255,.78);
      stroke-width: 4.2;
      stroke-linejoin: round;
    }

    .triangle-rim {
      fill: none;
      stroke: rgba(111,247,255,.36);
      stroke-width: 2.1;
      stroke-linejoin: round;
    }

    .star {
      stroke: rgba(0,0,0,.28);
      stroke-width: 1.1;
      transform-box: fill-box;
      transform-origin: center;
      filter:
        drop-shadow(0 0 8px rgba(255,255,255,.25))
        drop-shadow(0 0 4px rgba(255,255,255,.2));
      animation: starPulse 2.8s ease-in-out infinite;
    }

    .s2 { animation-delay: -.45s; }
    .s3 { animation-delay: -.9s; }
    .s4 { animation-delay: -1.35s; }
    .s5 { animation-delay: -1.8s; }

    .triangle-group {
      transform-origin: 250px 250px;
    }

    .shine {
      display: none;
    }

    .noise {
      opacity: .18;
      animation: noiseBlink .25s steps(2,end) infinite;
      pointer-events: none;
    }

    .recon-badge.is-paused .badge,
    .recon-badge.is-paused .hud-ring-a,
    .recon-badge.is-paused .hud-ring-b,
    .recon-badge.is-paused .pulse-ring,
    .recon-badge.is-paused .scan-beam,
    .recon-badge.is-paused .glitch-line,
    .recon-badge.is-paused .star,
    .recon-badge.is-paused .shine,
    .recon-badge.is-paused .noise,
    body[data-low-power] .badge,
    body[data-low-power] .hud-ring-a,
    body[data-low-power] .hud-ring-b,
    body[data-low-power] .pulse-ring,
    body[data-low-power] .scan-beam,
    body[data-low-power] .glitch-line,
    body[data-low-power] .star,
    body[data-low-power] .shine,
    body[data-low-power] .noise {
      animation-play-state: paused;
    }

    @keyframes hoverFloat {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-6px) scale(1.01); }
    }

    @keyframes spinSlow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes spinReverse {
      from { transform: rotate(360deg); }
      to { transform: rotate(0deg); }
    }

    @keyframes ringPulse {
      0% { opacity: 0; transform: scale(.82); }
      22% { opacity: .3; }
      100% { opacity: 0; transform: scale(1.08); }
    }

    @keyframes starPulse {
      0%, 100% { transform: scale(1); opacity: .94; }
      45% { transform: scale(1.13); opacity: 1; }
      70% { transform: scale(.98); opacity: .9; }
    }

    @keyframes beamSweep {
      0%, 48% { opacity: 0; transform: translate(-112px,78px) rotate(-21deg); }
      57% { opacity: .32; }
      72%, 100% { opacity: 0; transform: translate(124px,-92px) rotate(-21deg); }
    }

    @keyframes shineSlide {
      0%, 50% { opacity: 0; transform: translateX(-120px); }
      58% { opacity: .38; }
      70%, 100% { opacity: 0; transform: translateX(132px); }
    }

    @keyframes glitchFlicker {
      0%, 81%, 100% { opacity: .18; }
      82% { opacity: .7; }
      83% { opacity: .05; }
      84% { opacity: .42; }
      85% { opacity: .14; }
    }

    @keyframes noiseBlink {
      0%, 100% { opacity: .08; }
      50% { opacity: .18; }
    }

    @keyframes badgeLoadGlitch {
      0%, 100% { transform: translate(0, 0) skewX(0deg); opacity: 1; }
      8% { transform: translate(8px, -3px) skewX(-2deg); opacity: .9; }
      12% { transform: translate(-10px, 2px) skewX(2.4deg); opacity: 1; }
      17% { transform: translate(4px, 0) skewX(-1deg); }
      25% { transform: translate(0, 0) skewX(0deg); }
      39% { transform: translate(-6px, -2px) skewX(1.8deg); opacity: .86; }
      43% { transform: translate(11px, 3px) skewX(-2.6deg); opacity: 1; }
      49% { transform: translate(-3px, 0) skewX(.8deg); }
      61% { transform: translate(0, 0) skewX(0deg); }
      72% { transform: translate(5px, -4px) skewX(-1.6deg); opacity: .92; }
      76% { transform: translate(-8px, 2px) skewX(2deg); opacity: 1; }
      84% { transform: translate(0, 0) skewX(0deg); }
    }

    @keyframes badgeGlitchLines {
      0%, 100% { opacity: 0; transform: translate(-6px, -24px); }
      8% { opacity: .95; transform: translate(12px, -27px); }
      13% { opacity: .35; transform: translate(-18px, -22px); }
      18%, 36% { opacity: 0; }
      40% { opacity: .78; transform: translate(-8px, -25px); }
      47% { opacity: .2; transform: translate(18px, -24px); }
      52%, 68% { opacity: 0; }
      73% { opacity: .82; transform: translate(10px, -28px); }
      80% { opacity: .25; transform: translate(-12px, -23px); }
      86% { opacity: 0; }
    }

    @keyframes badgeSliceGlitch {
      0%, 100% { transform: translate(0,0) skewX(0deg); opacity: 1; }
      7% { transform: translate(14px,-5px) skewX(-4deg); opacity: .92; }
      12% { transform: translate(-16px,4px) skewX(3deg); opacity: 1; }
      19% { transform: translate(6px,0) scaleX(1.03); }
      31% { transform: translate(-12px,-2px) skewX(2deg); opacity: .86; }
      37% { transform: translate(18px,5px) skewX(-5deg); opacity: 1; }
      51% { transform: translate(-4px,0); }
      64% { transform: translate(11px,-3px) scaleY(.985); }
      72% { transform: translate(-7px,2px); }
      83% { transform: translate(0,0); }
    }

    @keyframes badgePulseGlitch {
      0%, 100% { transform: scale(1); opacity: 1; }
      10% { transform: scale(1.035); opacity: .96; }
      18% { transform: scale(.985) rotate(.7deg); }
      30% { transform: scale(1.055) rotate(-.8deg); filter: brightness(1.25); }
      47% { transform: scale(.995); }
      62% { transform: scale(1.025); }
      78% { transform: scale(1); }
    }

    @keyframes badgeDesyncGlitch {
      0%, 100% { transform: translate(0,0) skewX(0deg); opacity: 1; }
      9% { transform: translate(-9px,3px) skewX(3deg); }
      14% { transform: translate(12px,-2px) skewX(-2deg); opacity: .88; }
      24% { transform: translate(-15px,-3px) scaleX(.98); }
      35% { transform: translate(17px,4px) scaleX(1.04); opacity: 1; }
      48% { transform: translate(-6px,1px) skewX(-4deg); }
      57% { transform: translate(9px,-4px); opacity: .9; }
      69% { transform: translate(-3px,0); }
      82% { transform: translate(0,0); }
    }

    @keyframes badgeSliceLines {
      0%, 100% { opacity: 0; transform: translate(-22px, -24px); }
      8% { opacity: .98; transform: translate(18px, -31px); }
      16% { opacity: .42; transform: translate(-34px, -18px); }
      24%, 38% { opacity: 0; }
      43% { opacity: .86; transform: translate(28px, -26px); }
      54% { opacity: .22; transform: translate(-12px, -28px); }
      64%, 76% { opacity: 0; }
      81% { opacity: .78; transform: translate(7px, -21px); }
    }

    @keyframes badgePulseBloom {
      0%, 100% { opacity: 0; transform: translateY(-24px) scale(.86); }
      8% { opacity: .95; transform: translateY(-24px) scale(1.02); }
      21% { opacity: .38; transform: translateY(-24px) scale(1.08); }
      36% { opacity: .8; transform: translateY(-24px) scale(.96); }
      54% { opacity: .18; transform: translateY(-24px) scale(1.12); }
      72% { opacity: .48; transform: translateY(-24px) scale(1.01); }
    }

    @keyframes badgeDesyncLines {
      0%, 100% { opacity: 0; transform: translate(0, -24px); }
      9% { opacity: .8; transform: translate(-26px, -20px); }
      18% { opacity: .22; transform: translate(22px, -28px); }
      29% { opacity: .92; transform: translate(12px, -17px); }
      41%, 55% { opacity: 0; }
      61% { opacity: .7; transform: translate(-18px, -29px); }
      73% { opacity: .35; transform: translate(30px, -22px); }
      84% { opacity: 0; }
    }

    .stage::after {
      content: "Recon badge";
      position: absolute;
      right: 28px;
      bottom: 22px;
      z-index: 9;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .16em;
      text-transform: uppercase;
      transition: .18s ease;
      pointer-events: none;
    }

    .stage:hover::after {
      color: var(--gold);
      text-shadow: 0 0 14px rgba(245,199,107,.28);
    }

    .hero-copy {
      position: absolute;
      top: 50%;
      left: 36px;
      z-index: 8;
      width: min(620px, 52%);
      transform: translateY(-50%);
    }

    .hero-static {
      transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    .hero-kicker {
      margin-bottom: 10px;
      color: var(--gold);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .2em;
      text-transform: uppercase;
      text-shadow: 0 0 20px rgba(245,199,107,.4);
      animation: heroGlow 3.2s ease-in-out infinite alternate;
    }

    .hero-title {
      margin: 0;
      color: var(--text);
      font-size: clamp(42px, 5vw, 82px);
      line-height: .88;
      letter-spacing: .08em;
      text-transform: uppercase;
      text-shadow: 0 0 30px rgba(0,255,213,.14), 0 0 60px rgba(0,255,213,.08);
      animation: heroGlow 3.2s ease-in-out infinite alternate 0.4s;
    }

    .hero-copy p {
      max-width: 580px;
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
      text-shadow: 0 0 16px rgba(0,255,213,.12);
      animation: heroGlow 3.2s ease-in-out infinite alternate 0.8s;
    }

    @keyframes heroGlow {
      0% { opacity: 1; }
      60% { opacity: 1; }
      100% { opacity: .78; }
    }

    .module-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      content-visibility: auto;
      contain-intrinsic-size: 400px;
    }

    .module-card {
      position: relative;
      display: grid;
      grid-template-rows: auto 1fr;
      min-height: 154px;
      text-decoration: none;
      color: var(--text);
      border: 1px solid rgba(125,249,255,.13);
      border-radius: 12px;
      padding: 18px;
      background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
      overflow: hidden;
    }

    body.login-revealing .module-card {
      animation: moduleReveal .54s cubic-bezier(.2,.8,.2,1) both;
    }

    body.login-revealing .module-card:nth-child(1) { animation-delay: .08s; }
    body.login-revealing .module-card:nth-child(2) { animation-delay: .13s; }
    body.login-revealing .module-card:nth-child(3) { animation-delay: .18s; }
    body.login-revealing .module-card:nth-child(4) { animation-delay: .23s; }
    body.login-revealing .module-card:nth-child(5) { animation-delay: .28s; }
    body.login-revealing .module-card:nth-child(6) { animation-delay: .33s; }
    body.login-revealing .module-card:nth-child(7) { animation-delay: .38s; }
    body.login-revealing .module-card:nth-child(8) { animation-delay: .43s; }

    @keyframes moduleReveal {
      from {
        opacity: 0;
        transform: translateY(18px) scale(.975);
        filter: blur(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    .module-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: rgba(0,255,213,.38);
    }

    .module-card:hover {
      border-color: rgba(0,255,213,.58);
      background: rgba(0,255,213,.07);
      box-shadow: 0 0 0 1px rgba(0,255,213,.18), 0 0 24px rgba(0,255,213,.18);
    }

    .module-card:focus-visible {
      outline: 2px solid rgba(245,199,107,.75);
      outline-offset: 3px;
      border-color: rgba(245,199,107,.72);
      background: rgba(245,199,107,.08);
      box-shadow: 0 0 0 1px rgba(245,199,107,.22), 0 0 24px rgba(245,199,107,.18);
    }

    .module-card.primary {
      border-color: rgba(245,199,107,.45);
      background: linear-gradient(145deg, rgba(245,199,107,.12), rgba(0,255,213,.04));
    }

    .module-card.primary::before {
      background: var(--gold);
    }

    .module-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .module-glyph {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid rgba(125,249,255,.18);
      border-radius: 8px;
      background: rgba(0,255,213,.06);
      color: var(--cyan);
      font-size: 17px;
      font-weight: 900;
      line-height: 1;
    }

    .module-title {
      font-size: 18px;
      color: var(--text);
      margin: 0;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-weight: 700;
    }

    .module-desc {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .module-card.primary .module-glyph {
      color: var(--gold);
    }

    .feed-banner {
      position: relative;
      min-height: 74px;
      margin-top: 22px;
      border: 1px solid rgba(125,249,255,.13);
      border-radius: 12px;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(0,255,213,.035), rgba(255,255,255,.018) 48%, rgba(245,199,107,.035)),
        rgba(2,7,12,.38);
      padding: 18px 18px 16px;
      content-visibility: auto;
      contain-intrinsic-size: 74px;
    }

    .feed-banner::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0,255,213,.055), transparent 34%, rgba(245,199,107,.035));
      pointer-events: none;
    }

    .feed-banner-label {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      pointer-events: none;
    }

    .feed-banner-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--cyan);
      box-shadow: 0 0 10px rgba(0,255,213,.62);
    }

    .feed-banner-text {
      position: relative;
      z-index: 1;
      min-height: 24px;
      margin-top: 12px;
      color: var(--text);
      font-family: var(--font-mono);
      font-size: clamp(13px, 1.6vw, 18px);
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1.35;
      pointer-events: none;
    }

    .scan {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 30;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.025),
        rgba(255,255,255,.025) 1px,
        transparent 1px,
        transparent 4px
      );
      opacity: .22;
    }

    @media (max-width: 1200px) {
      .module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 700px) {
      .topbar {
        position: relative;
        height: auto;
        min-height: 64px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 0 12px 12px;
      }

      .logout-btn {
        width: 100%;
        min-height: 48px;
      }

      .node {
        padding: 24px 16px;
      }

      .module-grid {
        grid-template-columns: 1fr;
      }

      .feed-banner {
        min-height: 78px;
      }

      .tetra-fallback {
        position: relative;
        width: 100%;
        height: 300px;
      }

      .recon-badge {
        width: min(280px, 72vw);
        opacity: .62;
      }

      .stage {
        min-height: auto;
        padding-bottom: 22px;
      }

      .hero-copy {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        padding: 0 18px 22px;
        transform: none;
      }

    }

    @media (prefers-reduced-motion: reduce) {
      body.login-revealing .topbar,
      body.login-revealing .scan,
      body.login-revealing .node,
      body.login-revealing .module-card {
        animation-duration: .01ms;
        animation-delay: 0s;
      }

      .badge,
      .hud-ring-a,
      .hud-ring-b,
      .pulse-ring,
      .scan-beam,
      .glitch-line,
      .star,
      .shine,
      .noise {
        animation: none;
      }
    }