:root {
  --ink: #2b2440;
  --paper: #fbe9d3;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Courier New", ui-monospace, monospace;
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh; overflow-x: hidden;
}
/* the thing standing on the pillar */
#stage {
  margin-top: auto;           /* push everything to the bottom of the page */
  width: min(86vw, 340px);
  min-height: 120px;
  display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: -2px;            /* sits flush on the abacus */
}
#ditto {
  display: block; max-width: 100%; max-height: 46vh;
  filter: drop-shadow(6px 0 0 rgba(43,36,64,.25));
}
#msg {
  margin: 0 0 8px; padding: 8px 10px; max-width: 320px;
  background: var(--paper); border: 4px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 13px; line-height: 1.45;
}
#msg[hidden] { display: none; }
#pillar {
  display: block;
  width: min(94vw, 384px);
  image-rendering: pixelated;
}