/* ionyxsystems.net — the machine domain. Rawer than the lobby: no grid,
   faint scanlines, a breathing status dot. External file because the CSP
   is style-src 'self' (no inline styles anywhere). */

:root {
  --bg: #050605;
  --text: #c9d6cc;
  --muted: #79887e;
  --dim: #4d5a52;
  --green: #4ade80;
}

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

html,
body {
  height: 100%;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
  /* scanlines */
  background-image: repeating-linear-gradient(
    0deg,
    rgba(74, 222, 128, 0.025) 0px,
    rgba(74, 222, 128, 0.025) 1px,
    transparent 1px,
    transparent 4px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

::selection {
  background: rgba(74, 222, 128, 0.25);
}

main {
  text-align: left;
  font-size: 13.5px;
  line-height: 2.1;
  max-width: 560px;
}

.banner {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}

.g {
  color: var(--green);
}

.line {
  color: var(--muted);
}

.dim {
  color: var(--dim);
}

a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(74, 222, 128, 0.3);
}

a:hover {
  color: var(--green);
}

a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
  margin-left: 6px;
  animation: breathe 3.2s ease-in-out infinite;
}

@keyframes breathe {
  50% {
    opacity: 0.25;
    box-shadow: 0 0 3px rgba(74, 222, 128, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
  }
}

/* print: the building does not fit on paper */
@media print {
  body {
    background: #fff;
  }

  main {
    display: none;
  }

  body::after {
    content: 'you printed the building.\A it does not fit on paper.';
    white-space: pre-wrap;
    display: block;
    padding: 40vh 10vw 0;
    text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 14pt;
    color: #000;
  }
}

/* ---- the floors: each level has its own light ---------------------- */

/* elevator panel */
.panel {
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 14px 0;
  background: rgba(74, 222, 128, 0.02);
}

.panel .btn {
  display: block;
  color: var(--muted);
  text-decoration: none;
  border-bottom: none;
  padding: 2px 0;
}

.panel .btn:hover {
  color: var(--green);
}

.panel .nobtn {
  color: var(--dim);
  padding: 2px 0;
}

.panel .here {
  color: var(--green);
}

/* floor 2 — observatory: night sky */
body.observatory {
  background-color: #04060a;
  background-image:
    radial-gradient(1px 1px at 12% 20%, rgba(220, 232, 222, 0.5), transparent 100%),
    radial-gradient(1px 1px at 78% 12%, rgba(220, 232, 222, 0.35), transparent 100%),
    radial-gradient(1px 1px at 55% 38%, rgba(220, 232, 222, 0.4), transparent 100%),
    radial-gradient(1px 1px at 30% 68%, rgba(220, 232, 222, 0.3), transparent 100%),
    radial-gradient(1px 1px at 88% 58%, rgba(220, 232, 222, 0.45), transparent 100%),
    radial-gradient(1px 1px at 65% 85%, rgba(220, 232, 222, 0.3), transparent 100%);
}

body.observatory .moon {
  color: #cdd6e4;
  line-height: 1.35;
  font-size: 12px;
}

/* floor -1 — archive: dust */
body.archive {
  background-color: #070706;
  background-image: none;
}

body.archive main {
  color: #b8b3a4;
}

body.archive .line {
  color: #8a8577;
}

body.archive .dim {
  color: #5d594e;
}

/* floor -2 — the dark floor: text the color of the dark */
body.darkfloor {
  background-image: none;
}

body.darkfloor .shadowtext {
  color: #0a0d0a;
  user-select: text;
}

body.darkfloor .shadowtext::selection {
  background: rgba(74, 222, 128, 0.35);
  color: #dce8de;
}

/* floor 2.5 — crawlspace: low ceiling */
body.crawl main {
  font-size: 11px;
  line-height: 1.75;
  max-width: 420px;
}

body.crawl .banner {
  font-size: 12px;
}

/* the night floor — deep indigo, open 00:00-06:00 UTC only */
body.nightfloor {
  background-color: #030408;
  background-image: none;
}

body.nightfloor .g {
  color: #7c8fd4;
}

body.nightfloor a:hover {
  color: #7c8fd4;
}

/* floor -0 — the signed ground: a ghost of the entrance */
body.ghost {
  background-image: none;
}

body.ghost main {
  opacity: 0.55;
}

/* floor -3 — foundation: the only red in the building */
body.foundation {
  background-color: #060404;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(220, 80, 80, 0.03) 0px,
    rgba(220, 80, 80, 0.03) 1px,
    transparent 1px,
    transparent 5px
  );
}

body.foundation .g,
body.foundation a:hover {
  color: #e06c5c;
}

body.foundation .dot {
  background: #e06c5c;
  box-shadow: 0 0 10px rgba(224, 108, 92, 0.7);
}

body.foundation a {
  border-bottom-color: rgba(224, 108, 92, 0.3);
}

.low{opacity:0;transition:opacity 2.8s ease;margin-top:2.2em}
.low.here{opacity:.55}
.shadowtext.low.here{opacity:1}
@media (prefers-reduced-motion: reduce){.low{transition:none}}
.moonrow{white-space:pre}