:root{
  --bg: #0b0d10;
  --fg: #e9eef5;
  --muted: rgba(233, 238, 245, 0.9);
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.wrap{
  padding: 56px 64px;
}

.title{
  margin: 0 0 28px 0;
  font-size: clamp(28px, 3.2vw, 44px);
}

.art{
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.ascii{
  margin: 0;
  color: var(--muted);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.05;
  white-space: pre;
}

.msg{
  margin: 0;
  padding-top: clamp(18px, 2.4vw, 32px);
  font-size: clamp(18px, 2.2vw, 28px);
  color: var(--muted);
}

@media (max-width: 720px){
  .wrap{ padding: 28px 20px; }
  .art{ flex-direction: column; gap: 14px; }
  .msg{ padding-top: 0; }
}