@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Inter:wght@300;400&display=swap');

  :root{
    --bg:        #0A1420;
    --bg-line:   #16283C;
    --bg-line-2: #0F1E2E;
    --cyan:      #5FD3E0;
    --coral:     #FF6B4A;
    --text:      #E3ECF2;
    --muted:     #4C6C86;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html,body{
    height:100%;
    background:var(--bg);
    overflow:hidden;
    font-family:'Inter', sans-serif;
  }

  /* blueprint grid */
  .grid{
    position:fixed; inset:0;
    background-image:
      linear-gradient(var(--bg-line-2) 1px, transparent 1px),
      linear-gradient(90deg, var(--bg-line-2) 1px, transparent 1px),
      linear-gradient(var(--bg-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--bg-line) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 40%, transparent 90%);
    opacity:0.9;
  }

  /* slow vertical scan */
  .scan{
    position:fixed; left:0; right:0; height:120px;
    background:linear-gradient(180deg, transparent, rgba(95,211,224,0.05), transparent);
    animation: sweep 9s linear infinite;
    pointer-events:none;
  }
  @keyframes sweep{
    0%   { top:-120px; }
    100% { top:100%; }
  }

  /* HUD corners */
  .hud span{
    position:fixed;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:2px;
    color:var(--muted);
    text-transform:uppercase;
  }
  .hud .tl{ top:28px;  left:28px; }
  .hud .tr{ top:28px;  right:28px; }
  .hud .bl{ bottom:28px; left:28px; }
  .hud .br{ bottom:28px; right:28px; }

  .hud .dot{
    display:inline-block;
    width:6px; height:6px;
    margin-right:8px;
    border-radius:50%;
    background:var(--coral);
    box-shadow:0 0 8px var(--coral);
    animation:blink 2.4s ease-in-out infinite;
    vertical-align:middle;
  }
  @keyframes blink{
    0%,100%{ opacity:1; }
    50%{ opacity:0.25; }
  }

  /* core */
  .core{
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
  }

  .rings{
    position:relative;
    width:260px; height:260px;
  }
  .ring{
    position:absolute; inset:0;
    border:1px solid var(--cyan);
    border-radius:50%;
    opacity:0;
    animation: pulse 4.5s ease-out infinite;
  }
  .ring:nth-child(2){ animation-delay:1.5s; }
  .ring:nth-child(3){ animation-delay:3s; }
  @keyframes pulse{
    0%   { transform:scale(0.25); opacity:0; }
    15%  { opacity:0.55; }
    100% { transform:scale(1); opacity:0; }
  }

  .center-dot{
    position:absolute; top:50%; left:50%;
    width:5px; height:5px;
    margin:-2.5px 0 0 -2.5px;
    border-radius:50%;
    background:var(--text);
    box-shadow:0 0 12px 2px var(--cyan);
  }

  .waveform{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:340px; height:80px;
    overflow:visible;
  }
  .waveform path{
    fill:none;
    stroke:var(--cyan);
    stroke-width:1.4;
    stroke-linecap:round;
    opacity:0.8;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: draw 3.6s ease-in-out infinite;
  }
  @keyframes draw{
    0%   { stroke-dashoffset:900; opacity:0; }
    10%  { opacity:0.8; }
    55%  { stroke-dashoffset:0; opacity:0.8; }
    75%  { opacity:0; }
    100% { stroke-dashoffset:0; opacity:0; }
  }

  .cursor{
    position:absolute;
    bottom:-46px; left:50%;
    transform:translateX(-50%);
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    letter-spacing:4px;
    color:var(--muted);
  }
  .cursor::after{
    content:'_';
    color:var(--coral);
    animation:blink 1.1s steps(1) infinite;
  }

  @media (max-width:600px){
    .rings{ width:180px; height:180px; }
    .waveform{ width:240px; }
    .hud span{ font-size:9px; letter-spacing:1.5px; }
    .hud .tl, .hud .tr{ top:18px; }
    .hud .bl, .hud .br{ bottom:18px; }
    .hud .tl, .hud .bl{ left:18px; }
    .hud .tr, .hud .br{ right:18px; }
  }

  @media (prefers-reduced-motion: reduce){
    .scan, .ring, .waveform path, .hud .dot, .cursor::after{
      animation:none !important;
    }
    .ring{ opacity:0.15; transform:scale(0.7); }
    .waveform path{ stroke-dashoffset:0; opacity:0.5; }
  }