:root{--bg: #0b0f22;--ink: #131a35;--line: #3b4470;--text: #cfd8ff;--accent: #ffec27;color-scheme:dark}*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden;background:radial-gradient(ellipse 60% 50% at 50% 32%,#1c2445,#0a0d1c 62%,#05060d);color:var(--text);font-family:Courier New,ui-monospace,monospace;font-weight:700;letter-spacing:1px;display:flex;align-items:center;justify-content:center;padding:10px;-webkit-user-select:none;user-select:none}#app{padding:16px 20px 22px;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#262d52,#1a2040 30%,#141833);border:3px solid #0a0d1c;border-radius:26px 26px 12px 12px;box-shadow:inset 0 2px #ffffff1f,inset 0 0 0 2px #788cdc1f,0 24px 60px #0009}.screen{position:relative;padding:12px;border-radius:14px;background:linear-gradient(160deg,#05070f,#0b0f1e);box-shadow:inset 0 0 0 2px #000,inset 0 0 22px #000000e6,0 0 0 3px #2a3057,0 14px 30px #0000008c}.screen:after{content:"";position:absolute;inset:12px;pointer-events:none;border-radius:4px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.35) 100%)}canvas{display:block;border-radius:4px;image-rendering:pixelated}kbd{background:var(--ink);border:2px solid var(--line);padding:1px 6px;color:var(--text);font-family:inherit}#help-btn{position:fixed;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:var(--ink);color:var(--text);font:700 1.1rem Courier New,ui-monospace,monospace;cursor:pointer;box-shadow:0 4px 12px #00000080}#help-btn:hover{border-color:var(--accent);color:var(--accent)}.modal{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:16px;background:#04060dc7}.modal[hidden]{display:none}.modal-card{position:relative;width:min(420px,100%);max-height:90dvh;overflow:auto;padding:22px 24px 26px;border:3px solid #0a0d1c;border-radius:18px;background:linear-gradient(180deg,#262d52,#1a2040 40%,#141833);box-shadow:inset 0 2px #ffffff1f,0 24px 60px #000000b3}.modal-card h2{margin:18px 0 10px;font-size:.82rem;letter-spacing:2px;color:var(--accent);text-shadow:1px 1px 0 #7e2553}.modal-card h2:first-of-type{margin-top:4px}.keys{list-style:none;margin:0;padding:0;font-size:.74rem}.keys li{display:flex;align-items:center;gap:10px;padding:4px 0}.keys li span{flex:0 0 92px}.modal-card p{margin:0;font-size:.74rem;line-height:1.5;color:#b7c0e8}.modal-card p.alt{margin-top:8px;color:#7d87b8}.modal-card a{color:var(--accent)}#modal-close{position:absolute;top:8px;right:10px;width:30px;height:30px;border:none;background:none;color:var(--text);font-size:1.5rem;line-height:1;cursor:pointer}#modal-close:hover{color:var(--accent)}