:root{--nw:url("data:image/png;base64,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")}
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;height:100%;width:100%;background:#000;overflow:hidden}
  canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
  /* faint anamorphic veil + tube interlace, purely optical */
  .veil{position:fixed;inset:0;pointer-events:none;mix-blend-mode:screen;
    background:
      radial-gradient(130% 70% at 56% 46%, rgba(255,26,54,.050) 0%, rgba(255,26,54,0) 66%),
      radial-gradient(90% 55% at 14% 78%, rgba(30,120,255,.032) 0%, rgba(30,120,255,0) 74%);
    animation:breathe 23s ease-in-out infinite}
  @keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
  .crt{position:fixed;inset:0;pointer-events:none;opacity:.11;
    background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.6) 3px,rgba(0,0,0,0) 4px)}
  @media (prefers-reduced-motion:reduce){.veil{animation:none}}

  /* login. it is a prop, not a lock — the hashes sit in this file and the
     barrier draws behind it either way. its real job is to put a genuine
     click between the page and the AudioContext, which needs one to start.
     two loose boxes and a button, laid out wide and staggered so it never
     resolves into a square dialog. */
  #scrim{position:fixed;inset:0;z-index:3;background:rgba(2,0,2,.72);
    transition:opacity .7s ease}
  #gate{position:fixed;inset:0;z-index:4;display:flex;align-items:center;
    justify-content:center;color:#ff2333;
    font:10px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
    transition:opacity .55s ease}
  #scrim.off,#gate.off{opacity:0;pointer-events:none}

  #gform{display:flex;flex-direction:column;gap:14px}
  #gform .logo{width:96px;height:10px;background:#ff2333;margin-left:2px;
    -webkit-mask:var(--nw) no-repeat left center/contain;
            mask:var(--nw) no-repeat left center/contain}

  #gform .rowf{display:flex;align-items:flex-start;gap:13px}
  /* each field is its own box; the second sits lower so the row never
     reads as a grid */
  #gform .fld{width:186px;padding:6px 10px 7px;
    border:1px solid rgba(255,35,51,.75);
    background:rgba(10,1,4,.72);
    clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}
  #gform .fld.off{margin-top:19px}
  #gform label{display:block;font-size:7.5px;letter-spacing:.26em;
    text-transform:uppercase;color:rgba(255,35,51,.6)}
  #gform input{display:block;width:100%;margin-top:2px;background:transparent;
    color:#ff6d78;border:0;border-radius:0;padding:2px 0;
    font:13px/1.3 inherit;letter-spacing:.12em;outline:none}
  #gform .fld:focus-within{border-color:#ff2333;
    box-shadow:0 0 14px -2px rgba(255,35,51,.55)}

  #gform button{align-self:flex-start;margin-top:38px;padding:9px 20px;
    cursor:pointer;border-radius:0;background:none;color:#ff2333;
    border:1px solid #ff2333;font:9px/1 inherit;letter-spacing:.32em;
    text-transform:uppercase;white-space:nowrap;
    clip-path:polygon(0 0,100% 0,100% 56%,calc(100% - 9px) 100%,0 100%)}
  #gform button:hover,#gform button:focus-visible{background:#ff2333;color:#0a0002;
    outline:none;box-shadow:0 0 18px rgba(255,35,51,.5)}

  #err{min-height:10px;margin-left:2px;font-size:8px;letter-spacing:.2em;
    text-transform:uppercase;color:#ffcf3c}

  #gform.bad{animation:shake .28s}
  @keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
  @media (max-width:640px){
    #gform .rowf{flex-direction:column;align-items:stretch}
    #gform .fld{width:min(240px,72vw)} #gform .fld.off{margin-top:0}
    #gform button{margin-top:4px}
  }
  @media (prefers-reduced-motion:reduce){ #gform.bad{animation:none} }

  /* NetWatch mark on the feed — they built the wall, it is their camera.
     the wordmark is an alpha mask so it can be tinted and dimmed like the
     rest of the HUD instead of sitting on the frame as a foreign image. */
  .mark{position:fixed;right:28px;bottom:24px;z-index:2;pointer-events:none;
    display:none;flex-direction:column;align-items:flex-end;gap:8px;opacity:0}
  .mark.on{display:flex;animation:markin 5s ease-out .5s forwards}
  @keyframes markin{to{opacity:1}}
  .mark i{display:block;width:132px;height:13px;background:#ff2a3c;opacity:.52;
    filter:drop-shadow(0 0 7px rgba(255,42,60,.45));
    -webkit-mask:var(--nw) no-repeat right center/contain;
            mask:var(--nw) no-repeat right center/contain}
  .mark span{font:9px/1 ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
    letter-spacing:.24em;text-transform:uppercase;color:rgba(255,42,60,.32);
    text-shadow:0 0 6px rgba(255,42,60,.25)}
  .mark .dis{font-size:7.5px;letter-spacing:.13em;text-transform:none;
    color:rgba(255,42,60,.22);text-shadow:none}
  @media (max-width:600px){ .mark{right:16px;bottom:16px} .mark i{width:104px;height:10px} }
  @media (prefers-reduced-motion:reduce){ .mark.on{animation-duration:.5s;animation-delay:0s} }