html,body{margin:0;min-height:100%;background:#021522;color:#d9fbff;font-family:system-ui,Segoe UI,Arial,sans-serif;overflow:hidden}body{display:grid;place-items:center}#shell{width:min(100vw,1080px);padding:14px;box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}h1{margin:0;font-size:32px;letter-spacing:.5px;text-shadow:0 3px 0 #003b55,0 0 18px #20e6ff}p,footer{margin:2px 0;color:#94ddeb}button{background:#0d5e85;color:white;border:2px solid #7eeaff;border-radius:12px;padding:10px 14px;font-weight:800;box-shadow:0 4px 0 #04324b;cursor:pointer}button:active{transform:translateY(2px);box-shadow:0 2px 0 #04324b}canvas{width:100%;height:auto;display:block;border:4px solid #74efff;border-radius:18px;background:#0b8fbd;box-shadow:0 20px 60px #0009, inset 0 0 35px #9ff8ff55;image-rendering:auto}footer{text-align:center;margin-top:8px;font-size:13px}@media(max-height:650px){header,footer{display:none}#shell{padding:0}canvas{border-radius:0;border:0;width:100vw;height:100vh;object-fit:contain}}