* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; font: 16px/1.5 ui-monospace, Menlo, Consolas, monospace; -webkit-tap-highlight-color: transparent; }
canvas { display: block; image-rendering: pixelated; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
ul { list-style: none; margin: 0; padding: 0; }
.plain { padding: 16px; font-size: 18px; }
.plain li { margin: 8px 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
body { background: #040905; color: #6dffa0; }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 2px, transparent 2px 4px); }
main { width: 100%; max-width: 820px; margin: 0 auto; padding: 32px 18px 24px; }
h1 { --px: 6; margin: 0 0 16px; }
#intro { min-height: 60px; margin-bottom: 18px; }
#intro p { --px: 2; margin: 0 0 6px; min-height: 16px; }
.item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; text-decoration: none; color: inherit; opacity: .84; }
.item .mark { --px: 3; flex: none; }
.item .name { --px: 3; flex: none; }
.item .cur { flex: none; width: 12px; height: 21px; background: #b8ffd0; visibility: hidden; }
.item .line { --px: 2; flex: 1; min-width: 0; margin-left: 18px; }
.item.on { opacity: 1; background: #0c2415; }
.item.on .cur { visibility: visible; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.item:focus { outline: none; }
.item:focus-visible { outline: 3px solid #b8ffd0; outline-offset: -3px; }
#hint { --px: 2; margin: 18px 0 0 8px; opacity: .55; }
@media (hover: none) { #hint { display: none; } }
.plain a { color: #6dffa0; }
@media (max-width: 639px) {
  .item { flex-wrap: wrap; gap: 4px 8px; padding: 8px 6px; }
  .item .line { --px: 1.5; flex: 1 1 100%; margin-left: 26px; }
  #intro p { --px: 1.5; min-height: 12px; }
  #intro { min-height: 46px; }
  #hint { --px: 1.5; }
}
@media (min-width: 1700px) and (min-height: 900px) {
  main { max-width: 1100px; padding-top: 56px; }
  h1 { --px: 9; }
  #intro p { --px: 3; min-height: 24px; }
  #intro { min-height: 84px; }
  .item { min-height: 58px; }
  .item .mark, .item .name { --px: 4; }
  .item .line { --px: 3; }
  .item .cur { width: 16px; height: 28px; }
  #hint { --px: 3; }
}