:root{color-scheme:dark;font:15px system-ui;background:#100f18;color:#eee8f4}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column}header{display:flex;align-items:center;gap:18px;padding:12px 20px;border-bottom:1px solid #68436b;background:#191724}strong{letter-spacing:.06em}#status{flex:1;color:#c7acc9;font-size:13px}button{background:#242032;color:#eee8f4;border:1px solid #806086;border-radius:3px;padding:10px 15px;min-height:42px;cursor:pointer}button:hover{border-color:#ebaad5}button:focus-visible{outline:2px solid #e8b96a;outline-offset:3px}main{flex:1;min-height:0;position:relative;display:grid;place-items:center;padding:8px}canvas{max-width:100%;max-height:100%;width:auto;height:auto;display:none;object-fit:contain}p{color:#b9b0c4}main:fullscreen{background:#100f18} @media(max-width:550px){header{gap:8px;padding:8px;flex-wrap:wrap}#status{flex-basis:50%}button{padding:9px}strong{font-size:14px}}