:root { color-scheme: dark; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
@font-face { font-family: 'IBM 3270'; src: url('vendor/3270/3270-Regular.ttf') format('truetype'); font-display: swap; font-weight: 400; }
* { box-sizing: border-box; }
body { margin: 0; background: #000; color: #fff; min-height: 100svh; overflow: hidden; }
header { position: fixed; top: 34px; left: 38px; }
h1 { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: .2em; }
h1 span { display: block; }
#cnc { position: absolute; inset: 106px 38px 96px; overflow: hidden; }
#code-track { will-change: transform; }
.code-line { display: block; white-space: pre; font-family: 'IBM 3270', monospace; font-weight: 400; font-size: clamp(20px, 3.15vw, 54px); line-height: 1.3; letter-spacing: .025em; }
.code-line:first-child { color: #000; background: #fff; width: fit-content; }
#sound { position: fixed; right: 38px; bottom: 24px; min-width: 88px; height: 44px; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 9px; letter-spacing: .15em; text-align: right; cursor: pointer; touch-action: manipulation; opacity: .65; }
#sound:hover, #sound:focus-visible, #sound[aria-pressed="true"] { opacity: 1; }
#sound:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
#sound:disabled { cursor: wait; }
@media (max-width: 620px) {
  header { top: 25px; left: 24px; }
  #cnc { inset: 100px 24px 90px; }
  .code-line { font-size: clamp(17px, 4.5vw, 28px); }
  #sound { right: 24px; bottom: max(18px, env(safe-area-inset-bottom)); }
}