* { margin:0; padding:0; box-sizing:border-box; }
html, body { min-height:100%; }
body {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
    Menlo, Consolas, "Liberation Mono", "Noto Sans Mono CJK SC",
    "Sarasa Mono SC", "PingFang SC", "Microsoft YaHei", monospace;
  font-size:15px; line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--ps); color:#fff; }

.screen {
  min-height:100vh; min-height:100svh;
  background:var(--page); color:var(--fg);
  padding:clamp(20px,4vw,44px) clamp(18px,4vw,56px) 130px;
  max-width:1100px;
  word-break:break-word;
  transition: background-color .3s ease, color .3s ease;
}
.block { margin-bottom:18px; }
.cmdline { margin-bottom:4px; }
.ps { color:var(--ps); font-weight:700; }
.outline { margin-top:4px; margin-bottom:12px; opacity:0; }
.outline p { margin:0 0 .5em; }
.outline p:last-child { margin-bottom:0; }
.outline strong { font-weight:700; }
.dim { color:var(--dim); }
.clock { font-variant-numeric: tabular-nums; }

.echo {
  display:inline-block; overflow:hidden; white-space:nowrap;
  width:0; margin-left:.5ch; vertical-align:bottom;
}
@keyframes type { to { width:var(--w, 0); } }
@keyframes fade { to { opacity:1; } }

@keyframes hold { from,to { opacity:1; } }
.tcw { opacity:0; }
.tcw .c { color:var(--ps); margin-left:.1ch; animation:blink 1.06s step-end infinite; }
.final-caret { color:var(--ps); margin-left:.3ch; opacity:0; }
@keyframes blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }

.credit {
  position:fixed; left:0; right:0; bottom:12px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:12.5px; color:var(--dim); opacity:.75;
  padding-bottom:env(safe-area-inset-bottom);
}
.credit svg { display:block; }