:root {
  color-scheme: dark;
  --green: #39ff88;
  --muted: #78aa8b;
  --panel: rgba(2, 12, 7, .82);
}
* { box-sizing: border-box; }
html { height: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #020604;
  color: var(--green);
  font-family: "Courier New", Courier, monospace;
}
canvas { position: fixed; top:0; left:0; right:0; bottom:0; width: 100%; height: 100%; opacity: .72; pointer-events: none; }
main {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
}
.terminal {
  width: min(720px, 100%);
  padding: clamp(26px, 6vw, 64px);
  border: 1px solid rgba(57, 255, 136, .52);
  background: var(--panel);
  box-shadow: 0 0 40px rgba(0, 255, 102, .13), inset 0 0 50px rgba(0, 255, 102, .04);
  backdrop-filter: blur(5px);
  max-width: 100%;
}
.eyebrow { margin: 0 0 24px; color: var(--muted); font-size: 12px; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(42px, 10vw, 92px); line-height: .9; letter-spacing: -.08em; text-shadow: 0 0 18px rgba(57, 255, 136, .65); }
.cursor { display: inline-block; width: .55em; height: .9em; margin-left: .12em; background: var(--green); animation: blink 1s steps(2) infinite; }
.message { max-width: 520px; margin: 32px 0 38px; color: #d7ffe2; font-size: clamp(14px, 2vw, 17px); line-height: 1.7; }
.status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #ff2b2b; box-shadow: 0 0 12px #ff2b2b; animation: blink 1s steps(2) infinite; }
.command { margin-top: 34px; color: var(--green); font-size: 13px; }
.command::before { content: "> "; color: var(--muted); }
.command a { color: var(--green); text-decoration: none; }
.command a:hover { text-decoration: underline; text-underline-offset: 3px; }
.links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.links a { color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid transparent; }
.links a:hover { color: var(--green); border-color: rgba(57,255,136,.35); }
.footer { margin-top: 28px; color: var(--muted); font-size: 11px; letter-spacing: .14em; opacity: .6; }
.message--small { font-size: 14px; }
.mt16 { margin-top: 16px; }
.list { margin: 0 0 18px; padding: 0; list-style: none; color: #d7ffe2; font-size: 14px; line-height: 1.8; }
.list li { position: relative; padding-left: 18px; }
.list li::before { content: ">"; position: absolute; left: 0; color: var(--muted); }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }
/* STATUS page */
.metrics { margin: 28px 0 24px; display: grid; gap: 10px; }
.metric { display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px; border: 1px solid rgba(57,255,136,.14); background: rgba(57,255,136,.04); font-size: 13px; line-height: 1.5; }
.metric--total { border-color: rgba(57,255,136,.32); background: rgba(57,255,136,.08); }
.metric-label { color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.metric-value { color: #d7ffe2; font-weight: 600; text-align: right; word-break: break-all; }
.links a.active { color: var(--green); border-color: rgba(57,255,136,.35); }
/* Mobile: allow vertical scroll, prevent center clipping */
@media (max-width: 768px), (max-height: 700px) {
  body { overflow-y: auto; }
  main {
    place-items: start center;
    align-content: start;
    min-height: 100dvh;
    height: auto;
    padding: 16px;
    overflow: visible;
  }
  .terminal {
    width: 100%;
    padding: 24px 18px;
    margin: 0;
  }
  h1 { font-size: clamp(32px, 12vw, 64px); }
  .message { margin: 20px 0 24px; font-size: 15px; }
  .metrics { margin: 20px 0 18px; gap: 8px; }
  .metric { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; }
  .metric-value { text-align: left; width: 100%; }
}