:root {
  --bg: #fff;
  --fg: #000;
  --dim: #8c8c8c;
  --faint: #d6d6d6;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;
  --gutter: 26px;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  position: relative;
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font: 13px/1.85 var(--mono);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--fg); color: var(--bg); }

a { color: inherit; }
a:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

body.eclipse { --bg: #000; --fg: #f2f2f2; --dim: #6a6a6a; --faint: #1c1c1c; }
body.eclipse .d-art img { filter: invert(1) grayscale(1); }

/* tractor feed */

.feedholes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.feedholes::before, .feedholes::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--gutter);
  background-image: radial-gradient(circle at 50% 50%, transparent 4.2px, var(--faint) 4.6px, transparent 5.4px);
  background-size: var(--gutter) 24px;
}
.feedholes::before { left: 0; border-right: 1px dashed var(--faint); }
.feedholes::after { right: 0; border-left: 1px dashed var(--faint); }

/* camcorder */

.hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  font-size: 10px;
  letter-spacing: 0.2em;
}
.hud > span { position: absolute; padding: 6px 10px; background: var(--bg); }
.hud-tl { top: 12px; left: calc(var(--gutter) + 10px); }
.hud-tr { top: 12px; right: calc(var(--gutter) + 10px); color: var(--dim); }
.hud-br { bottom: 12px; right: calc(var(--gutter) + 10px); }

.rec {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--fg);
  vertical-align: 1px;
  animation: blink 1.6s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* the session */

main.tty { position: relative; z-index: 1; padding: 0 calc(var(--gutter) + 4vw) 0 calc(var(--gutter) + 9vw); }

.cmd { margin: 0 0 0.5em; white-space: pre-wrap; overflow-wrap: anywhere; }
.ps1 { color: var(--dim); }
.ps2 { color: var(--dim); }

pre { margin: 0; font: inherit; white-space: pre; overflow-x: auto; scrollbar-width: none; }
pre b { font-weight: 700; }

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: 14vh 0 10vh;
}
.boot { margin-bottom: 7vh; color: var(--dim); font-size: 12px; width: max-content; max-width: 100%; }

.mark {
  position: relative;
  margin: 0.15em 0 0.35em;
  padding-left: 0.5em;
  font-weight: 400;
  font-size: clamp(34px, 7.5vw, 92px);
  line-height: 1.05;
  letter-spacing: 0.5em;
  animation: flicker 11s infinite;
}
.mark.split { letter-spacing: 0; }

@font-face {
  font-family: "Severen Gothic";
  src: url("fonts/unifraktur-maguntia.woff2") format("woff2");
  font-display: block;
}

.mark .ch { position: relative; display: inline-block; margin-right: 0.5em; letter-spacing: 0; }
.mark .ch.goth { color: transparent; }
.mark .ch.goth::after {
  content: attr(data-c);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  color: var(--fg);
  font-family: "Severen Gothic", "UnifrakturMaguntia", serif;
  font-size: 1.22em;
  white-space: nowrap;
}
@keyframes flicker {
  0%, 62%, 63.4%, 64.2%, 100% { opacity: 1; }
  63% { opacity: 0.15; }
  64% { opacity: 0.6; }
}

.line { min-height: 3.8em; width: min(34em, 100%); margin: 0 0 6vh; }
.caret { animation: blink 1.1s steps(1) infinite; }
.ca {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
  cursor: text;
}
.ca::before { content: "  "; }
.ca.pending { color: var(--dim); user-select: text; -webkit-user-select: text; }

.block { padding: 22vh 0; }
.block p { margin: 0 0 2em; }
.block p:last-child { margin-bottom: 0; }

.man-block { margin-left: 16vw; }
.man { width: max-content; max-width: 100%; padding: 1.4em 2ch; border: 1px solid var(--fg); background: var(--bg); }

/* levels */

.lore { display: flex; flex-direction: column; gap: 16vh; }
.ls { width: max-content; max-width: 100%; color: var(--dim); background: var(--bg); }
.entry { width: min(30em, 100%); background: var(--bg); }
.entry .cmd { margin-bottom: 0.2em; }
.entry h2 { margin: 0 0 12px; font-weight: 400; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; }
.entry h2::before { content: "== "; color: var(--dim); letter-spacing: 0; }
.entry h2::after { content: " =="; color: var(--dim); letter-spacing: 0; }
.entry p { margin: 0; }
.lore .entry:nth-of-type(1) { margin-left: 4vw; }
.lore .entry:nth-of-type(2) { margin-left: 30vw; }
.lore .entry:nth-of-type(3) { margin-left: 10vw; }
.lore .entry:nth-of-type(4) { margin-left: 38vw; }
.lore .entry:nth-of-type(5) { margin-left: 0; }
.lore .entry:nth-of-type(6) { margin-left: 24vw; }

.redact { background: var(--fg); color: var(--fg); cursor: text; }
.redact::selection { background: var(--bg); color: var(--fg); }
.ghost { color: #f6f6f6; }
.ghost::selection { background: var(--fg); color: var(--bg); }
body.eclipse .ghost { color: #0d0d0d; }

/* logs and walls */

.logs-block { margin-left: 8vw; }
.logs-head { width: min(36em, 100%); margin-bottom: 8vh; background: var(--bg); }
.logs-head h2 { margin: 0 0 4px; font-weight: 400; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; }
.logs-head p { margin: 0; font-size: 10px; letter-spacing: 0.12em; color: var(--dim); }

.logs { width: min(36em, 100%); }
.log { display: block; margin: 0 0 7vh; padding: 0 0 0 2ch; border-left: 1px solid var(--fg); background: var(--bg); }
.log-head { display: block; margin-bottom: 16px; list-style: none; }
details.log > .log-head { cursor: pointer; margin-bottom: 0; }
details.log[open] > .log-head { margin-bottom: 16px; }
.log-head::-webkit-details-marker { display: none; }
.log-meta { display: block; font-size: 10px; letter-spacing: 0.16em; white-space: pre; text-transform: uppercase; color: var(--dim); }
.log-title { display: block; margin-top: 4px; font-size: 15px; }
details.log > .log-head .log-title::before { content: "[+] "; color: var(--dim); }
details.log[open] > .log-head .log-title::before { content: "[-] "; color: var(--dim); }
article.log .log-title::before { content: "> "; color: var(--dim); }
.log-body p { margin: 0 0 1.25em; }
.log-body p:last-child { margin-bottom: 0; }
.log-empty { margin: 0; color: var(--dim); }

#walls { margin-left: 26vw; }
.feed { list-style: none; margin: 0; padding: 0; max-width: 32em; background: var(--bg); }
.feed li { margin-bottom: 2.4em; padding-left: 3ch; text-indent: -3ch; }
.feed li::before { content: "# "; color: var(--dim); }
.feed li:last-child { margin-bottom: 0; }
.feed p { display: inline; margin: 0; }
.feed a { display: block; text-indent: 0; font-size: 10px; letter-spacing: 0.2em; text-decoration: none; color: var(--dim); }
.feed a:hover { color: var(--fg); text-decoration: underline; }

/* exit */

.exit-block { margin-left: 12vw; padding-bottom: 30vh; }
.note { margin-bottom: 3em !important; font-size: 12px; background: var(--bg); width: max-content; max-width: 100%; }
.exit {
  display: inline-block;
  padding: 0.45em 0.9em 0.45em 1.35em;
  font-size: 13px;
  letter-spacing: 0.45em;
  text-decoration: none;
  color: var(--bg);
  background: var(--fg);
  border: 1px solid var(--fg);
}
.exit::before { content: "[ "; letter-spacing: 0; }
.exit::after { content: "]"; letter-spacing: 0; }
.exit:not([aria-disabled="true"]):hover { color: var(--fg); background: var(--bg); }
.exit[aria-disabled="true"] { cursor: default; }
.tail-prompt { margin-top: 6vh !important; }
.whisper { min-height: 1.85em; color: var(--dim); }

/* debris */

#debris {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}

.d {
  position: absolute;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.d-tiny { font-size: 8px; letter-spacing: 0.14em; }
.d-rot { transform: rotate(90deg); transform-origin: 0 0; }
.d-line { height: 1px; background: var(--fg); }
.d-vline { width: 1px; background: var(--fg); }
.d-box { border: 1px solid var(--fg); }
.d-fill { background: var(--fg); }
.d-dots { background-image: radial-gradient(var(--fg) 0.8px, transparent 1px); background-size: 6px 6px; }
.d-cross { width: 13px; height: 13px; }
.d-cross::before, .d-cross::after { content: ""; position: absolute; background: var(--fg); }
.d-cross::before { left: 6px; top: 0; width: 1px; height: 13px; }
.d-cross::after { top: 6px; left: 0; height: 1px; width: 13px; }
.d-ring { border: 1px solid var(--fg); border-radius: 50%; }

.d-art { display: block; }
.d-art .frame { position: relative; display: block; overflow: hidden; background: var(--bg); }
.d-art img { position: absolute; max-width: none; }
.d-xerox img { filter: contrast(1.5) saturate(1.35); }
.d-art .cap { display: block; margin-top: 5px; font-size: 8px; letter-spacing: 0.16em; }
.d-art .cap::before { content: "> "; color: var(--dim); }

@media (max-width: 760px) {
  :root { --gutter: 14px; }
  .feedholes::before, .feedholes::after { background-size: var(--gutter) 20px; background-image: radial-gradient(circle at 50% 50%, transparent 2.6px, var(--faint) 3px, transparent 3.6px); }
  main.tty { padding: 0 calc(var(--gutter) + 12px); }
  .hud-tr { display: none; }
  .boot, .man, .ls { font-size: 10px; }
  .block { padding: 16vh 0; }
  .man-block, .logs-block, #walls, .exit-block, .lore .entry:nth-of-type(n) { margin-left: 0; }
  .lore .entry:nth-of-type(even) { margin-left: 8vw; }
}

@media (prefers-reduced-motion: reduce) {
  .mark, .rec, .caret { animation: none; }
}