:root{
  --bg:#050505;
  --red:#ff2020;
  --red-bright:#ff4d4d;
  --glow:rgba(255,32,32,.5);
  --text:#f5f5f6;
  --dim:#9a9aa1;
  --faint:#57575d;
  --border:rgba(255,255,255,.08);
}

*{ box-sizing:border-box; }
html{ min-height:100%; background:var(--bg); }
body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  background:var(--bg);
  color:var(--text);
  font-family:ui-monospace,'SFMono-Regular','JetBrains Mono',Menlo,Consolas,monospace;
  display:grid;
  place-items:center;
  padding:2rem 1.5rem 6rem;
  position:relative;
  overflow-x:hidden;
  overflow-y:auto;
}

::selection{ background:var(--red); color:#fff; }

.grid-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,var(--border) 0,var(--border) 1px,transparent 1px,transparent 52px),
    repeating-linear-gradient(90deg,var(--border) 0,var(--border) 1px,transparent 1px,transparent 52px);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 25%,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 25%,transparent 85%);
}

#boot{
  position:fixed;
  inset:0;
  z-index:20;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  transition:opacity .5s ease;
}
#boot.hidden{ opacity:0; pointer-events:none; }
#boot-lines{
  width:min(100%,580px);
  font-size:.85rem;
  line-height:1.9;
  color:var(--red);
  text-shadow:0 0 10px var(--glow);
  min-height:8em;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.content{
  position:relative;
  z-index:1;
  width:min(100%,620px);
  text-align:center;
  padding:2rem;
  opacity:0;
  transition:opacity .6s ease;
}
.content.show{ opacity:1; }

.logo{
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:.02em;
  margin-bottom:2.75rem;
}
.logo .dot{ color:var(--red); text-shadow:0 0 10px var(--glow); }

.status-eyebrow{
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:.55em;
  margin-bottom:1.75rem;
}
.status-eyebrow::before{
  content:'■';
  font-size:.6em;
  text-shadow:0 0 8px var(--glow);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

h1{
  font-size:2.1rem;
  font-weight:700;
  line-height:1.25;
  margin:0 0 1.25rem;
}
h1.cursor::after{
  content:'';
  display:inline-block;
  width:.45ch;
  height:.85em;
  background:currentColor;
  margin-left:.08em;
  vertical-align:-.08em;
  animation:blink 1s step-end infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }

p.sub{
  color:var(--dim);
  font-size:.95rem;
  line-height:1.75;
  max-width:460px;
  margin:0 auto 2.5rem;
}

.loader{
  display:flex;
  gap:.5rem;
  justify-content:center;
  margin-bottom:2.75rem;
}
.loader span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px 1px var(--glow);
  animation:loader-bounce 1.2s ease-in-out infinite;
}
.loader span:nth-child(2){ animation-delay:.15s; }
.loader span:nth-child(3){ animation-delay:.3s; }
@keyframes loader-bounce{
  0%,80%,100%{ opacity:.25; transform:translateY(0); }
  40%{ opacity:1; transform:translateY(-5px); }
}

.lang-row{
  display:flex;
  gap:.5rem;
  justify-content:center;
  margin-bottom:1.5rem;
}
.lang-row button{
  min-width:3.5rem;
  min-height:2.75rem;
  font:inherit;
  font-size:.68rem;
  letter-spacing:.08em;
  background:transparent;
  color:var(--faint);
  border:1px solid var(--border);
  padding:.55rem .85rem;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.lang-row button:hover,
.lang-row button:focus-visible,
.lang-row button.active{
  color:var(--red);
  border-color:var(--red);
  outline:none;
}

.contact-line{ font-size:.7rem; color:var(--faint); }
.contact-line a{ color:var(--dim); text-decoration:underline; }
.contact-line a:hover,
.contact-line a:focus-visible{ color:var(--red); outline:none; }

.site-footer{
  position:fixed;
  z-index:2;
  left:24px;
  right:24px;
  bottom:max(20px,env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  font-size:.65rem;
  color:var(--faint);
}

.copyright{ justify-self:start; }

.legal-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:.65rem;
  white-space:nowrap;
}
.legal-nav a{
  color:var(--dim);
  text-decoration:none;
}
.legal-nav a:hover,
.legal-nav a:focus-visible{
  color:var(--red);
  text-decoration:underline;
  outline:none;
}

.coord-tag{
  position:fixed;
  right:24px;
  bottom:max(20px,env(safe-area-inset-bottom));
  justify-self:end;
  letter-spacing:.06em;
  white-space:nowrap;
  text-align:right;
}
.coord-tag .dot-live{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px 1px var(--glow);
  animation:pulse 2.4s ease-in-out infinite;
  margin-right:.5em;
}

@media (max-width:640px){
  html{
    height:100%;
  }

  body{
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    place-items:stretch;
    width:100%;
    height:100vh;
    height:100dvh;
    height:var(--app-height,100dvh);
    min-height:100svh;
    padding:
      max(1rem,env(safe-area-inset-top))
      1rem
      max(.65rem,env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
  }

  .content{
    align-self:stretch;
    justify-self:center;
    min-height:0;
    width:100%;
    max-width:620px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:1.25rem .5rem 1rem;
  }

  .logo{ margin-bottom:2rem; }
  .status-eyebrow{
    align-self:center;
    justify-content:center;
    width:max-content;
    max-width:100%;
    margin-bottom:1.2rem;
    text-align:center;
  }
  h1{ font-size:clamp(1.45rem,7vw,1.8rem); }
  p.sub{
    font-size:.88rem;
    line-height:1.65;
    margin-bottom:1.75rem;
  }
  .loader{ margin-bottom:1.75rem; }
  .lang-row{ margin-bottom:1.1rem; }
  .contact-line{ margin-bottom:.25rem; }

  .site-footer{
    position:static;
    inset:auto;
    align-self:end;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.65rem;
    padding:
      1rem
      .85rem
      max(.25rem,env(safe-area-inset-bottom));
    text-align:center;
    border-top:1px solid var(--border);
  }

  .copyright,
  .legal-nav{
    justify-self:auto;
    text-align:center;
  }

  .coord-tag{
    position:static;
    display:block;
    width:100%;
    align-self:center;
    justify-self:auto;
    margin-top:.1rem;
    padding:0;
    font-size:.6rem;
    text-align:center;
  }
}

@media (max-width:640px) and (max-height:760px){
  .content{ padding-top:.75rem; }
  .logo{ margin-bottom:1.35rem; }
  .status-eyebrow{ margin-bottom:.85rem; }
  h1{ margin-bottom:.9rem; }
  p.sub{ margin-bottom:1.2rem; }
  .loader{ margin-bottom:1.25rem; }
  .lang-row{ margin-bottom:.8rem; }
}

@media (max-width:640px) and (max-height:560px){
  body{
    height:auto;
    min-height:var(--app-height,100dvh);
    grid-template-rows:auto auto;
  }
  .content{
    min-height:auto;
    justify-content:flex-start;
  }
  .site-footer{ margin-top:1rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  #boot{ display:none; }
  .content{ opacity:1; }
}