:root{
  --bg:#0b0f14; --fg:#c9d1d9; --muted:#8b949e; --muted-2:#9ba3af;
  --brand:#58a6ff; --cta:#2f81f7; --panel:rgba(255,255,255,.025);
  --ring:rgba(0,0,0,.1);
  --highlight: #00DBFE;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container {
  padding: 5vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand{
  color:var(--highlight);
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size: 3vh;
}

.hero{
  display:flex; align-items:baseline; 
  gap:1vh; margin:0;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  letter-spacing:-0.1vh; text-shadow:0 1px 0 rgba(0,0,0,.2);
  font-size:5vh; line-height:1.05;
}
.heroPrompt{color:var(--highlight)}
.heroWord{font-weight:800}
.caret{
  display:inline-block; width:1vh; height:5vh; background:var(--highlight);
  border-radius:0.1vh; transform:translateY(.5vh);
  animation:caretBlink 1.1s steps(1) infinite;
}
@keyframes caretBlink{50%{opacity:0}}

.tagline{
  margin-top:2vh; 
  color:var(--muted);
  font-size: 1.75vh; line-height:1.75;
  max-width: 700px;
}

.ascii{
  box-shadow: inset 0 0 0 1px var(--ring);
  overflow:auto; white-space:pre; /* no-wrap on larger screens */
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:0.8vh;
  margin: 5vh 0;
  line-height: 1.1;
  overflow: hidden;
}
.ascii > span {
  color: var(--highlight);
  animation: colorChanging 6s linear infinite;
}

@keyframes colorChanging {
  0%   { color: var(--highlight); }
  50%  { color: white; }
  100% { color: var(--highlight); }
}

.footer{
  margin-top:3vh; 
  padding-top:2vh; border-top:1px solid var(--panel);
  color:var(--muted); 
  font-size:1.75vh;
}
.link{color:var(--highlight); text-decoration:none}
.link:hover{text-decoration:underline}