:root {
  --bg: #0a0e08;
  --bg-2: #0f140d;
  --fg: #c4d2ac;
  --dim: #76935a;
  --faint: #4a5d3a;
  --mute: #3a4a30;
  --hi: #f1f4ec;
  --warn: #ffd54a;
  --ok: #6cdc4a;
  --ember: #d97757;
  --rule: rgba(118,147,90,0.22);
  --rule-strong: rgba(118,147,90,0.42);
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(118,147,90,0.025) 0px, rgba(118,147,90,0.025) 1px,
      transparent 1px, transparent 3px),
    radial-gradient(ellipse 800px 600px at 50% 22%, rgba(118,147,90,0.08), transparent 70%);
  pointer-events: none;
  z-index: 1;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

a { color: inherit; }

.term {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 32px;
}
@media (min-width: 720px) {
  .term { padding: 32px 32px 48px; }
}

.bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bar .l { display: flex; gap: 10px; align-items: center; min-width: 0; }
.bar .leaf-mini {
  width: 14px;
  height: 14px;
  display: block;
  flex: none;
  filter: drop-shadow(0 0 3px rgba(118,147,90,0.45));
}
.bar .nm { color: var(--fg); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 12px; }
.bar .sep { color: var(--mute); }
.bar .r { display: flex; gap: 12px; flex: none; align-items: center; }
.bar .blink { animation: blink 1.2s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
@media (max-width: 480px) {
  .bar .meta-tty, .bar .metric { display: none; }
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.06em;
}
.status-pill .dot {
  width: 7px;
  height: 7px;
  background: var(--mute);
  border-radius: 50%;
  flex: none;
}
.status-pill[data-mc-state="checking"] {
  color: var(--dim);
}
.status-pill[data-mc-state="checking"] .dot {
  background: var(--dim);
  animation: blink 1.2s steps(2, end) infinite;
}
.status-pill[data-mc-state="online"] {
  color: var(--ok);
}
.status-pill[data-mc-state="online"] .dot {
  background: var(--ok);
  box-shadow: 0 0 6px rgba(108,220,74,0.55);
  animation: blink 1.2s steps(2, end) infinite;
}
.status-pill[data-mc-state="offline"] {
  color: var(--ember);
}
.status-pill[data-mc-state="offline"] .dot {
  background: var(--ember);
}

.mark-wrap {
  position: relative;
  margin: 32px 0 18px;
  font-weight: inherit;
  font-size: inherit;
  line-height: 1;
}
.mark-grid {
  position: absolute;
  left: -2px; top: 0;
  width: 1.2em; height: 100%;
  background-image:
    linear-gradient(to right, rgba(217,119,87,0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(217,119,87,0.35) 1px, transparent 1px);
  background-size: 8px 8px;
  mask-image: linear-gradient(to right, #000 20%, transparent 95%);
  -webkit-mask-image: linear-gradient(to right, #000 20%, transparent 95%);
  pointer-events: none;
  font-size: var(--mark-size, 64px);
  opacity: 0.5;
}
.wordmark {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.05em;
  /* sized by JS to fit the container; fallback for no-JS fits a 320px viewport */
  font-size: var(--mark-size, 44px);
  line-height: 1;
  color: var(--hi);
  text-shadow:
    0 0 12px rgba(118,147,90,0.45),
    0 0 32px rgba(118,147,90,0.18);
  white-space: nowrap;
  display: flex;
  align-items: baseline;
}
.wordmark .num { color: var(--ember); }
.wordmark .tld {
  color: var(--dim);
  font-weight: 400;
  font-size: 0.42em;
  align-self: flex-end;
  margin-left: 4px;
  margin-bottom: 0.22em;
  letter-spacing: 0;
}
.wordmark .cur {
  display: inline-block;
  width: 0.07em;
  height: 0.74em;
  background: var(--fg);
  align-self: center;
  margin-left: 0.12em;
  animation: blink 1.06s steps(2, end) infinite;
}

.meta {
  font-size: 11px;
  color: var(--dim);
  margin: 0 0 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.meta .dot { color: var(--mute); margin: 0 6px; }
.tag {
  font-size: 13px;
  color: var(--dim);
  margin: 0 0 24px;
  max-width: 60ch;
}
.tag b { color: var(--fg); font-weight: 700; }

.block {
  margin: 14px 0;
  border: 1px solid var(--rule-strong);
  background: rgba(118,147,90,0.04);
  padding: 14px 16px 16px;
  position: relative;
  transition: border-color 120ms;
}
.block:hover { border-color: rgba(118,147,90,0.7); }
.block::before, .block::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--ember);
  opacity: 0;
  transition: opacity 120ms;
  pointer-events: none;
}
.block::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.block::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.block:hover::before, .block:hover::after { opacity: 0.85; }

.block .cmd {
  color: var(--dim);
  font-size: 11px;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
  padding-right: 64px;
}
.block .cmd .p { color: var(--fg); }
.block .cmd .arg { color: var(--warn); }

.copy-btn {
  position: absolute; top: 10px; right: 10px;
  background: rgba(118,147,90,0.12);
  border: 1px solid var(--rule-strong);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 5px 10px;
  cursor: pointer;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 120ms, color 120ms, border-color 120ms;
  min-height: 26px;
}
.copy-btn:hover { background: rgba(118,147,90,0.25); color: var(--hi); }
.block.copied .copy-btn { background: var(--ember); color: #fff; border-color: var(--ember); }

.ip-line {
  font-size: clamp(15px, 4.6vw, 24px);
  color: var(--hi);
  letter-spacing: -0.01em;
  font-weight: 700;
  word-break: break-all;
  margin-top: 2px;
}
.ip-line .scheme { color: var(--dim); font-weight: 400; }
.ip-line .port { color: var(--warn); font-weight: 400; font-size: 0.78em; }

.ip-meta {
  margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ip-meta b { color: var(--fg); font-weight: 700; }
.ip-meta .standby-note { color: var(--warn); }

.discord-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
}
.discord-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #5865F2;
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 13px;
  border: 1px solid #5865F2;
  transition: background 120ms;
  min-height: 38px;
  flex: none;
}
.discord-btn:hover { background: #4752c4; }
.discord-btn img {
  width: 18px;
  height: 18px;
  /* force white render for the simple-icons mark on the blurple button */
  filter: brightness(0) invert(1);
}

.discord-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.discord-status .dot {
  width: 7px;
  height: 7px;
  background: var(--mute);
  border-radius: 50%;
  flex: none;
}
.discord-status .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.discord-status[data-state="loading"] .dot {
  background: var(--dim);
  animation: blink 1s steps(2, end) infinite;
}
.discord-status[data-state="active"] .dot {
  background: var(--ok);
  box-shadow: 0 0 6px rgba(108,220,74,0.55);
  animation: blink 1.6s steps(2, end) infinite;
}
.discord-status[data-state="active"] .label { color: var(--fg); }
.discord-status[data-state="offline"] .dot { background: var(--ember); }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
  margin: 22px 0;
}
@media (min-width: 480px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats .s {
  background: var(--bg);
  padding: 10px 10px;
  position: relative;
  min-width: 0;
}
.stats .s .k {
  font-size: 9px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.stats .s .v {
  font-size: 16px; color: var(--hi); font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 560px) {
  .stats .s { padding: 12px 14px; }
  .stats .s .v { font-size: 18px; }
  .stats .s .k { font-size: 10px; letter-spacing: 0.1em; }
}
.stats .s .v.warn { color: var(--warn); }
.stats .s .v .live { color: var(--ok); margin-right: 4px; }

.readme {
  margin-top: 22px;
  padding: 16px 16px 18px;
  border: 1px dashed var(--rule);
  background: rgba(0,0,0,0.2);
}
.readme .h {
  color: var(--fg); font-weight: 700;
  margin-bottom: 12px; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  display: flex; align-items: center; gap: 8px;
}
.readme .h::before {
  content: ""; width: 8px; height: 8px;
  background: var(--dim);
}
.readme .h .right {
  margin-left: auto; color: var(--mute);
  font-weight: 400; letter-spacing: 0.06em;
}
.readme dl { margin: 0; display: grid; gap: 12px; }
.readme .row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: baseline;
}
.readme .addr {
  font-size: 11px;
  color: var(--ember);
  letter-spacing: 0.04em;
  font-weight: 700;
}
.readme dt {
  color: var(--fg); font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}
.readme dd {
  margin: 2px 0 0;
  color: #97a386;
  font-size: 12.5px; line-height: 1.55;
}
.readme code {
  color: var(--warn);
  background: rgba(255,213,74,0.08);
  padding: 0 4px;
}

.pixel-rule {
  height: 6px;
  background-image:
    linear-gradient(90deg,
      var(--dim) 0, var(--dim) 6px,
      transparent 6px, transparent 12px);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  margin: 28px 0 18px;
  opacity: 0.55;
}

.terminal {
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid var(--rule-strong);
  background: rgba(0,0,0,0.22);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  cursor: text;
  position: relative;
}
.terminal::before, .terminal::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--ember);
  opacity: 0;
  transition: opacity 120ms;
  pointer-events: none;
}
.terminal::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.terminal::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.terminal:focus-within { border-color: rgba(217,119,87,0.55); }
.terminal:focus-within::before, .terminal:focus-within::after { opacity: 1; width: 10px; height: 10px; }
.terminal .term-history {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.terminal .term-history:empty { margin-bottom: 0; }
.terminal .term-history::-webkit-scrollbar { width: 6px; }
.terminal .term-history::-webkit-scrollbar-thumb { background: var(--rule-strong); }
.terminal .echo {
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 2px;
}
.terminal .ps { white-space: nowrap; }
.terminal .ps-user { color: var(--fg); font-weight: 700; }
.terminal .ps-path { color: var(--dim); }
.terminal .ps-sep { color: var(--mute); }
.terminal .echo .typed { color: var(--fg); }
.terminal .response {
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 2px 0 8px;
  line-height: 1.5;
}
.terminal .response.err { color: var(--ember); }
.terminal .response.dim { color: var(--dim); font-size: 12px; }
.terminal .response a { color: var(--warn); text-decoration: underline; text-underline-offset: 3px; }
.terminal .term-input {
  display: flex;
  gap: 6px;
  align-items: baseline;
  /* 16px prevents iOS Safari auto-zoom on focus */
  font-size: 16px;
}
.terminal #termCmd {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: inherit;
  padding: 0;
  caret-color: var(--fg);
  min-width: 0;
}
.terminal #termCmd::placeholder { color: var(--mute); }

.footnote {
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

.reveal { opacity: 0; transform: translateY(4px); transition: opacity 240ms ease, transform 240ms ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .blink, .cur, .caret { animation: none !important; }
}

[data-stage-only] { display: none; }
body[data-stage="pre-release"] [data-stage-only="pre-release"] { display: revert; }
body[data-stage="live"] [data-stage-only="live"] { display: revert; }
body[data-stage="live"] .stats[data-stage-only="live"] { display: grid; }
body[data-stage="pre-release"] .boot-log[data-stage-only="pre-release"] { display: block; }

.bar .standby { color: var(--warn); }
.bar .standby .standby-pulse {
  display: inline-block;
  animation: blink 1.6s steps(2, end) infinite;
}

.boot-log {
  margin: 22px 0;
  padding: 14px 16px;
  border: 1px solid var(--rule-strong);
  background: rgba(118,147,90,0.04);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  position: relative;
}
.boot-log::before, .boot-log::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--ember);
  opacity: 0;
  transition: opacity 120ms;
  pointer-events: none;
}
.boot-log::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.boot-log::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.boot-log:hover::before, .boot-log:hover::after { opacity: 0.7; }
.boot-log .head {
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--rule);
}
.boot-log .head .p { color: var(--fg); }
.boot-log .line {
  display: grid;
  grid-template-columns: 84px 92px 1fr;
  gap: 12px;
  align-items: baseline;
}
@media (max-width: 480px) {
  .boot-log .line {
    grid-template-columns: 80px 1fr;
    grid-template-areas: "stat name" "stat desc";
    row-gap: 2px;
    column-gap: 12px;
  }
  .boot-log .line .stat { grid-area: stat; align-self: start; }
  .boot-log .line .name { grid-area: name; }
  .boot-log .line .desc { grid-area: desc; font-size: 11px; white-space: normal; }
}
.boot-log .stat {
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.boot-log .stat .dot { font-size: 9px; line-height: 1; }
.boot-log .stat-up { color: var(--ok); }
.boot-log .stat-up .dot { text-shadow: 0 0 6px rgba(108,220,74,0.55); }
.boot-log .stat-hold { color: var(--warn); }
.boot-log .stat-hold .dot { animation: blink 1.6s steps(2, end) infinite; }
.boot-log .name { color: var(--fg); font-weight: 700; }
.boot-log .desc { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boot-log .footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.boot-log .footer .accent { color: var(--ember); font-weight: 700; }