:root{
  --black:#000; --white:#fff; --yellow:#ff0; --cyan:#0ff;
  --green:#0f0; --blue:#1a1aff; --magenta:#f0f; --dim:#8a8a8a;
  --cell:clamp(9px,3.2vw,15px);
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--black);}
body{
  min-height:100vh; color:var(--white);
  font-family:'VT323','Courier New',monospace;
  display:flex; justify-content:center; align-items:flex-start; padding:16px;
}
.terminal{
  width:100%; max-width:720px; border:2px solid #222;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
}
.header{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:8px 12px; font-size:clamp(18px,4.5vw,26px); line-height:1; white-space:nowrap;
}
.header .page{color:var(--cyan);font-family:'Silkscreen',monospace;font-size:clamp(11px,2.6vw,15px);}
.header .clock{color:var(--yellow);font-variant-numeric:tabular-nums;}
.bar{height:6px;background:var(--blue);}
.content{padding:22px 16px 8px;text-align:center;}
.question{color:var(--cyan);font-size:clamp(20px,5.4vw,30px);margin:0 0 6px;}
.answer{
  font-family:'Silkscreen',monospace; color:var(--yellow);
  font-size:clamp(96px,34vw,240px); line-height:.9; margin:4px 0 2px;
  text-shadow:0 0 2px rgba(255,255,0,.35);
}
.cursor{
  display:inline-block; width:.16em; height:.78em; background:var(--yellow);
  margin-left:.08em; transform:translateY(.06em); animation:blink 1.06s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}
.subhead{color:var(--dim);font-size:clamp(15px,3.4vw,19px);margin:0 0 18px;}
.glass{
  display:grid; grid-template-columns:repeat(6,var(--cell)); grid-auto-rows:var(--cell);
  justify-content:center; width:max-content; margin:6px auto 20px;
}
.glass span{display:block;width:var(--cell);height:var(--cell);}
.c-foam{background:var(--white);} .c-beer{background:var(--yellow);} .c-glass{background:var(--cyan);}
.saying-box{min-height:5.2em;display:flex;align-items:center;justify-content:center;padding:0 6px;}
.saying{color:var(--white);font-size:clamp(22px,5.2vw,30px);line-height:1.15;max-width:34ch;margin:0 auto;}
.saying.highlight{color:var(--yellow);}
.saying .source{display:block;color:var(--dim);font-size:.62em;margin-top:6px;}
.world{
  color:var(--green);font-size:clamp(17px,3.9vw,22px);line-height:1.2;
  max-width:36ch;margin:20px auto 4px;min-height:2.6em;
}
.footer{color:var(--magenta);font-size:clamp(12px,2.8vw,15px);text-align:center;padding:16px 12px;}
@media (prefers-reduced-motion:reduce){
  .cursor{animation:none;} .terminal{background:var(--black);}
}