/* Open Web Initiative
   CRT-phosphor terminal: green on near-black, amber accents,
   sharp corners, system monospace. Glow and scanlines are the
   brand, kept subtle enough to read. */

:root {
  --bg: #060907;
  --panel: #0a0f0b;
  --ink: #4dff88;
  --ink-dim: #2a8f52;
  --ink-faint: #1c5c37;
  --amber: #ffb000;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  text-shadow: 0 0 6px rgba(77, 255, 136, 0.35);
}

/* scanlines + vignette over everything, non-interactive */
.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.18) 3px
    ),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.5) 100%);
}

.wrap {
  max-width: 76ch;
  margin: 0 auto;
  padding: 40px 16px 32px;
}

/* masthead */

.mast { text-align: center; margin-bottom: 36px; }

.owl {
  width: 92px;
  height: auto;
  color: var(--ink);
  filter: drop-shadow(0 0 10px rgba(77, 255, 136, 0.35));
}

.mast h1 {
  margin: 18px 0 4px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.45em;
  text-indent: 0.45em; /* re-center: letter-spacing pads only the right side */
}

.tag {
  margin: 0;
  color: var(--ink-dim);
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* terminal */

.term {
  border: 1px solid var(--ink-faint);
  background: var(--panel);
  box-shadow: 0 0 24px rgba(77, 255, 136, 0.08);
}

.term-bar {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid var(--ink-faint);
  color: var(--ink-dim);
  font-size: 12px;
  letter-spacing: 0.06em;
  user-select: none;
}

.term-body {
  padding: 16px 14px 18px;
  height: min(24rem, 60vh);
  overflow-y: auto;
  cursor: text;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;
}

#out { white-space: pre-wrap; word-break: break-word; }

#out .dim   { color: var(--ink-dim); }
#out .amber { color: var(--amber); text-shadow: 0 0 6px rgba(255, 176, 0, 0.35); }
#out .echo  { color: var(--ink-dim); }

/* clickable command words */
.chip {
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.35);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chip:hover, .chip:focus-visible { background: rgba(255, 176, 0, 0.15); outline: none; }

/* prompt */

#promptline { display: flex; align-items: baseline; }

.ps1 { color: var(--ink-dim); white-space: pre; }

#cmd {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font: inherit;
  text-shadow: inherit;
  caret-color: var(--ink);
  padding: 0;
}

/* blinking block cursor drawn after the input while empty */
#promptline.idle #cmd { caret-color: transparent; }
#promptline.idle::after {
  content: "";
  width: 0.6em;
  height: 1.1em;
  margin-left: -0.1em;
  background: var(--ink);
  align-self: center;
  animation: blink 1.1s steps(1) infinite;
}

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

/* noscript fallback */

.plain { margin-top: 28px; }
.plain h2 { font-size: 15px; font-weight: 400; color: var(--amber); margin: 22px 0 6px; }
.plain p, .plain ol { margin: 0; color: var(--ink); }
.plain ol { padding-left: 2.5ch; }

/* legal footer */

.legal {
  margin-top: 30px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-shadow: none;
}
.legal p { margin: 3px 0; }

.legal a, .plain a {
  color: var(--ink-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal a:hover, .legal a:focus-visible,
.plain a:hover, .plain a:focus-visible { color: var(--amber); }

.find-us { margin-bottom: 10px; font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  #promptline.idle::after { animation: none; }
}

@media (max-width: 480px) {
  body { font-size: 13px; }
  .mast h1 { font-size: 12.5px; letter-spacing: 0.28em; text-indent: 0.28em; }
  .tag { font-size: 12px; }
}