*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#06030e;color:#fff1a8;font-family:monospace;overflow:hidden}body{display:grid;place-items:center}.wrap{width:min(100vw,1040px);height:100vh;display:grid;grid-template-rows:38px minmax(0,1fr) 24px;gap:6px;padding:6px}.top,.bottom{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;font-weight:900;letter-spacing:.08em;text-shadow:2px 2px #000}.logo{font-size:clamp(20px,3vw,34px);color:#ffd45a}.nav{display:flex;gap:8px}.nav a{color:#76eaff;text-decoration:none;border:2px solid #76eaff;padding:7px 10px;background:#17103b}.cabinet{min-height:0;display:grid;place-items:center}.screen{position:relative;width:min(100%,960px);aspect-ratio:3/2;border:6px solid #070411;outline:4px solid #6d4bd2;background:#000;box-shadow:0 10px 40px rgba(0,0,0,.65)}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.hint{font-size:12px;color:rgba(255,241,168,.76)}.keys{color:#fff}.mobile{position:absolute;inset:auto 12px 12px 12px;display:none;justify-content:space-between;z-index:5;pointer-events:none}.pad,.jump{display:flex;gap:10px}.btn{pointer-events:auto;user-select:none;width:58px;height:50px;border:3px solid #fff1a8;background:rgba(8,5,18,.62);color:#fff1a8;display:grid;place-items:center;font-weight:900;font-size:22px;box-shadow:3px 3px #000}@media(max-width:760px){.wrap{padding:4px;gap:4px;grid-template-rows:34px minmax(0,1fr) 20px}.screen{width:100%;border-width:4px;outline-width:3px}.mobile{display:flex}.hint{display:none}}