* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 600px; height: 600px; overflow: hidden; background: #000; }
body { color: #0ff; font-family: system-ui, sans-serif; font-size: 20px; }
#app { position: relative; width: 600px; height: 600px; }
#ribbon { display: block; }
#card { padding: 16px 24px; min-height: 260px; }
#card h2 { color: #fc0; font-size: 32px; margin-bottom: 8px; }
#card p { font-size: 22px; line-height: 1.4; }
#card table { font-size: 16px; border-collapse: collapse; }
#card td { padding: 1px 10px 1px 0; }
#card .dim { color: #088; }
#status { position: absolute; bottom: 60px; width: 100%; text-align: center; font-size: 16px; color: #088; }
#modebar { position: absolute; bottom: 8px; width: 100%; text-align: center; font-size: 28px; letter-spacing: 24px; }
#modebar .active { text-shadow: 0 0 12px #0ff; }
#modebar .inactive { opacity: 0.35; }
#start-screen { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
#start-screen h1 { color: #0ff; font-size: 44px; letter-spacing: 8px; }
#start-msg { color: #088; font-size: 18px; }
.focusable { min-height: 88px; min-width: 200px; font-size: 28px; background: #000; color: #fc0; border: 3px solid #fc0; }
.focusable:focus { outline: 4px solid #0ff; outline-offset: 4px; }