html,body{width:100%;height:100%;margin:0;padding:0;display:flex;align-items:center;justify-content:center;background:#666;font-family:sans-serif}h1,p{margin:0 0 12px 0;font-size:14px;color:#b7b7b7}h1{font-size:24px;color:#87ff00}b{color:#ff8700}i{color:#af5fff}u{color:#5fd7ff}canvas{display:block;pointer-events:auto}.layers{position:relative;aspect-ratio:9/16;height:100%}.layers.full{aspect-ratio:1;width:100%}.layer{position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;z-index:1;pointer-events:none}.layer:first-child{visibility:visible}.text{font-family:monospace;padding:16px;z-index:3;background:#222}.flash{font-weight:bold;font-size:2rem;color:#fff;z-index:2;display:flex;align-items:center;justify-content:center;text-shadow:4px 4px 4px rgba(0,0,0,.5);opacity:0}.instructions{display:grid;grid-template:100%/50% 50%;grid-template-areas:"left right";z-index:4;align-items:center;opacity:0;transition-timing-function:ease-in-out}.instructions div{display:flex;width:50%;padding:2rem;width:100%;height:100%;background:rgba(255,255,255,.5);color:#333;text-shadow:2px 2px 2px rgba(0,0,0,.3);align-items:center;box-sizing:border-box;text-transform:uppercase;text-align:center}