:root {
  color-scheme: dark;
  --cyan: #00f5ff;
  --magenta: #f21fff;
  --green: #43ff53;
  --yellow: #fff329;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: #02050d;
}

body { overflow: auto; }

button { font: inherit; }

.viewport {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 0;
  background: #02050d;
}

.node-canvas {
  position: relative;
  width: min(100vw, calc(100vh * 1.333333));
  aspect-ratio: 1448 / 1086;
  overflow: hidden;
  background: #02050d;
}

.master-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspot {
  position: absolute;
  z-index: 4;
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

.hotspot:hover {
  border-color: rgba(0, 245, 255, .7);
  background: rgba(0, 245, 255, .055);
  box-shadow: 0 0 10px rgba(0, 245, 255, .36);
}

.hotspot:focus-visible {
  outline: max(2px, .16vw) solid var(--yellow);
  outline-offset: max(1px, .08vw);
  background: rgba(255, 243, 41, .08);
}

.return-garden { left: 9.3%; top: 8.7%; width: 16.8%; height: 3.3%; }
.meli { left: 85.9%; top: 8.7%; width: 5.4%; height: 3.3%; }

.area { left: 14.1%; width: 35.7%; height: 5.05%; }
.area-a { top: 42.5%; }
.area-b { top: 47.65%; }
.area-c { top: 52.78%; }
.area-d { top: 57.9%; }
.area-e { top: 63.05%; }
.area-hidden { top: 68.2%; }

.command-line { left: 27.2%; top: 85.8%; width: 46.7%; height: 4.3%; }

.web-layer {
  position: absolute;
  z-index: 8;
  left: 14.05%;
  top: 36.2%;
  width: 71.85%;
  height: 56.5%;
  display: grid;
  grid-template-rows: 8.5% 1fr 6.5%;
  overflow: hidden;
  color: #d8d8dc;
  border: max(2px, .17vw) solid var(--cyan);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    rgba(0, 1, 2, .985);
  box-shadow: 0 0 max(12px, 1vw) rgba(0, 238, 255, .32), inset 0 0 max(18px, 1.5vw) rgba(0, 76, 82, .22);
  font: clamp(8px, 1.06vw, 16px)/1.25 "Lucida Console", "Courier New", monospace;
}

.web-layer[hidden] { display: none; }

.web-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.2%;
  border-bottom: 1px solid var(--cyan);
}

.web-header strong {
  color: var(--magenta);
  font-weight: 500;
  letter-spacing: .07em;
  white-space: nowrap;
}

.web-header nav {
  justify-self: end;
  display: flex;
  gap: .55em;
}

.web-layer button,
.web-layer input,
.web-layer textarea {
  font: inherit;
}

.web-header button,
.web-action {
  color: var(--cyan);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

.web-header button:hover,
.web-header button:focus-visible,
.web-action:hover,
.web-action:focus-visible {
  color: #fff;
  border-color: var(--cyan);
  outline: 0;
}

.web-content {
  min-height: 0;
  padding: 1.5% 2.2%;
  overflow: auto;
  scrollbar-color: var(--cyan) #001114;
}

.web-status {
  display: grid;
  place-items: center;
  color: #74777e;
  border-top: 1px solid #006a72;
  letter-spacing: .11em;
}

.signal-form {
  width: min(72%, 620px);
  margin: 4% auto 0;
  padding: 3.5% 5%;
  border: 1px solid var(--cyan);
}

.signal-form h2,
.view-heading h2 {
  margin: 0 0 1em;
  color: var(--magenta);
  font-size: 1.16em;
  font-weight: 500;
  letter-spacing: .08em;
  text-align: center;
}

.form-note {
  margin: -.35em 0 1em;
  color: #8b8e96;
  font-size: .86em;
  text-align: center;
}

.registration-form {
  margin-top: 1.2%;
  padding-top: 2.2%;
  padding-bottom: 2.2%;
}

.signal-form .signal-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signal-form label,
.compose-form label {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  align-items: center;
  gap: .8em;
  margin: .8em 0;
  color: var(--cyan);
}

.signal-form input,
.compose-form input,
.compose-form textarea {
  width: 100%;
  color: #fff;
  border: 1px solid #006f77;
  background: #02080a;
  padding: .5em .65em;
  outline: 0;
}

.signal-form input:focus,
.compose-form input:focus,
.compose-form textarea:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 6px rgba(255, 243, 41, .25);
}

.signal-form .actions,
.compose-form .actions,
.view-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.signal-form .actions { justify-content: space-between; margin-top: 1.2em; }

.web-error {
  margin: .8em 0;
  color: #ff6969;
  text-align: center;
}

.area-directory,
.message-list {
  display: grid;
  gap: .35em;
}

.area-entry,
.message-entry {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 1em;
  min-height: 3.1em;
  padding: .45em .8em;
  color: #d8d8dc;
  border: 0;
  border-bottom: 1px dashed #008d95;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.area-entry { grid-template-columns: 3.2em 1fr; }
.message-entry { grid-template-columns: 8em 1fr 10em; }
.area-entry:hover, .area-entry:focus-visible,
.message-entry:hover, .message-entry:focus-visible {
  color: #fff;
  background: rgba(0, 245, 255, .07);
  outline: 1px solid var(--cyan);
}

.area-entry b,
.message-entry b { color: var(--cyan); font-weight: 500; }
.area-entry small,
.message-entry small { color: #858890; }
.message-entry time { color: var(--green); text-align: right; }

.view-heading { margin-bottom: .8em; }
.view-heading h2 { margin: 0; text-align: left; }
.view-heading .actions { display: flex; gap: .5em; }

.message-meta {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: .35em 1em;
  padding: .7em;
  color: #aeb0b5;
  border-top: 1px dashed var(--cyan);
  border-bottom: 1px dashed var(--cyan);
}

.message-meta b { color: var(--green); font-weight: 500; }

.message-body {
  min-height: 15em;
  margin: 1em 0 0;
  color: #e1e1e4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}

.compose-form textarea {
  min-height: 17em;
  resize: vertical;
}

.compose-form label.body-field {
  grid-template-columns: 1fr;
  align-items: start;
}

.compose-form .actions { justify-content: flex-end; }

.empty-signal,
.loading-signal {
  margin: 12% auto;
  color: #777a82;
  text-align: center;
  letter-spacing: .08em;
}

.loading-signal { color: var(--green); }

.terminal-layer {
  position: absolute;
  z-index: 10;
  left: 9.7%;
  top: 12.4%;
  width: 80.8%;
  height: 84.6%;
  padding: .7% .85% .85%;
  overflow: hidden;
  border: max(2px, .18vw) solid #8b8e9a;
  background: #000;
  box-shadow:
    0 0 0 max(2px, .18vw) #151823,
    0 0 max(16px, 1.4vw) #000,
    inset 0 0 max(20px, 1.8vw) rgba(0, 62, 68, .4);
}

.terminal-layer[hidden] { display: none; }

.terminal-layer header {
  height: 5.1%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .4%;
  color: var(--green);
  border-bottom: 1px solid #00717a;
  font: clamp(9px, 1.05vw, 17px)/1 "Lucida Console", "Courier New", monospace;
  letter-spacing: .04em;
}

.terminal-layer header button {
  color: var(--magenta);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

.terminal-layer header button:hover,
.terminal-layer header button:focus-visible {
  color: #fff;
  border-color: var(--magenta);
  outline: 0;
}

#terminal {
  width: 100%;
  height: 94.3%;
  padding-top: .45%;
}

.xterm { height: 100%; }

@media (max-aspect-ratio: 4 / 3) {
  .node-canvas {
    width: 100vw;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}