:root{
  color-scheme: dark;
  --bg:#0b0b10;
  --fg:#eaeaea;
  --muted:#8a8f98;
  --accent:#6b6b6b;
  --card:#141518;
  --border:#26282d;
  --green:#00ff99;
  --yellow:#ffff00;
  --red:#ff4545;
}
html,body{
  height:100%;
  margin:0;
  padding:0;
}
body{
  background:var(--bg);
  color:var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height:1.6;
}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:20px;
}
.header{
  text-align:center;
  padding:40px 0;
  border-bottom:2px solid var(--border);
  margin-bottom:40px;
}
.ascii-title{
  /* Dynamically scale font to fit container based on longest line length */
  /* JS sets --ascii-cols and --ascii-container-w per page; sensible fallbacks here */
  --ascii-cols: 160;                 /* fallback character width */
  --ascii-container-w: min(100vw, 1200px); /* fallback to container max width */
  --ascii-padding: 40px;             /* matches .header padding top/bottom; horizontal padding from .container is 40px total */
  --ascii-max-font: 14px;            /* cap for large screens */
  --ascii-scale: 1.0;                /* individual scaling multiplier - can be overridden per title */
  font-size: min(calc(((var(--ascii-container-w) - var(--ascii-padding)) / var(--ascii-cols)) * var(--ascii-scale)), calc(var(--ascii-max-font) * var(--ascii-scale)));
  line-height:0.8;
  color:var(--fg);
  white-space:pre;
  font-weight:bold;
  margin-bottom:20px;
  display:inline-block;             /* let parent text-align center this element */
  text-align:center;                   /* keep ASCII alignment */
}

/* Individual title scaling classes */
.ascii-title.scale-small { --ascii-scale: 0.8; --ascii-max-font: 11px; }
.ascii-title.scale-normal { --ascii-scale: 1.0; --ascii-max-font: 14px; }
.ascii-title.scale-large { --ascii-scale: 1.3; --ascii-max-font: 18px; }
.ascii-title.scale-xl { --ascii-scale: 1.6; --ascii-max-font: 22px; }
.ascii-title.scale-xxl { --ascii-scale: 2.0; --ascii-max-font: 28px; }

.subtitle{
  font-size:18px;
  color:var(--muted);
  margin-bottom:10px;
}
.version{
  color:var(--fg);
  font-size:14px;
}
.section{
  background:var(--card);
  border:2px solid var(--border);
  border-radius:8px;
  padding:30px;
  margin-bottom:30px;
  position:relative;
}
.section-header{
  display: flex;
  justify-content: center;
  color:var(--accent);
  font-size:20px;
  font-weight:bold;
  margin-bottom:20px;
  text-transform:uppercase;
  letter-spacing:2px;
}
.section-header::before{
  content:">";
  color:var(--fg);
}
.section-header::after{
  content:"<";
  color:var(--fg);
}
.section-subheader {
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 10px;
}
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:20px;
  margin-bottom:20px;
}
.info-item{
  background:var(--bg);
  border:1px solid var(--border);
  padding:15px;
  border-radius:4px;
  text-align: center;
}
.info-label{
  color:var(--accent);
  font-weight:bold;
  margin-bottom:5px;
}
.roadmap-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background: var(--bg);
  border-radius: 4px;
}
.status {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  margin-right: 15px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.status.completed{background:var(--green); color:#000;}
.status.planned{background:var(--muted); color:var(--bg);}
.back-button{
  position:fixed;
  top:20px;
  left:20px;
  background:var(--card);
  border:2px solid var(--border);
  color:var(--fg);
  padding:10px 20px;
  text-decoration:none;
  border-radius:4px;
  font-family:inherit;
  transition:all 0.3s ease;
}
.back-button:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.terminal-prompt{
  color:var(--fg);
  font-weight:bold;
}
.highlight{
  color:var(--fg);
  font-weight:bold;
}
.muted {
  color: var(--muted);
}
code{
  background:var(--bg);
  padding:2px 6px;
  border-radius:3px;
  color:var(--fg);
  font-size:14px;
}
.blinking-cursor {
  display: inline-block;
  margin-left: 2px;
  width: 1ch;
  color: var(--fg);
  font-weight: bold;
  font-size: 1.1em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@media (max-width: 768px) {
  .container{padding:15px;}
  .section{padding:20px;}
  .info-grid{grid-template-columns:1fr;}
  .back-button{position:static; margin-bottom:20px; display:inline-block;}
}