html, body {
  margin: 0;
  height: 100%;
  background: #020804;
  color: #4dff63;
  overflow: hidden;
}

body {
  font-family: "Lucida Console", "Courier New", ui-monospace, monospace;
  font-size: clamp(0.92rem, 1.65vw, 1.15rem);
  line-height: 1.45;
}

.log {
  position: fixed;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  margin: 0;
  padding: 1.25rem 1.45rem 1.6rem;
  overflow: auto;
  scrollbar-width: none;
  text-shadow:
    -1px 0 rgba(0, 255, 210, 0.35),
    1px 0 rgba(180, 255, 80, 0.28),
    0 0 8px rgba(77, 255, 99, 0.45);
}

.log::-webkit-scrollbar { display: none; }

.log p { margin: 0; }

.log a {
  color: inherit;
  text-underline-offset: 0.15em;
}

.mark {
  position: fixed;
  left: 50%;
  top: 46%;
  z-index: 2;
  width: min(34vh, 260px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  filter:
    sepia(0.55)
    hue-rotate(62deg)
    saturate(2.4)
    contrast(0.92)
    drop-shadow(0 0 14px rgba(70, 255, 110, 0.28));
}

body.session .mark {
  visibility: visible;
  opacity: 0.88;
}

.shell[hidden] { display: none; }

.shell {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #d8ffd4;
  background: transparent;
  text-shadow:
    0 0 8px rgba(180, 255, 170, 0.45),
    -1px 0 rgba(0, 255, 200, 0.28);
}

.ps1 { color: #b6ff9a; white-space: pre; }

#cmd {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-shadow: inherit;
  caret-color: #d8ffd4;
  outline: none;
}


.scan,
.beam {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.scan {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.22) 0 1px,
      transparent 1px 3px
    );
  box-shadow:
    inset 0 0 90px rgba(0, 40, 16, 0.35),
    inset 0 0 180px rgba(0, 0, 0, 0.72);
}

.beam {
  inset: auto 0 auto 0;
  height: 22%;
  background: linear-gradient(transparent, rgba(80, 255, 140, 0.05), transparent);
}

.log p { word-break: break-word; }

@media (prefers-reduced-motion: no-preference) {
  .log { animation: flicker 7.5s infinite; }
  body.session .mark { animation: flicker 7.5s infinite; }
  .beam { animation: sweep 8s linear infinite; }
}

@keyframes flicker {
  0%, 19%, 21%, 100% { opacity: 1; }
  20% { opacity: 0.86; }
}

@keyframes sweep {
  from { top: -25%; }
  to { top: 110%; }
}