:root { color-scheme:dark; background:#49365d; }
* { box-sizing:border-box; }
html,body,main { margin:0; width:100%; height:100%; overflow:hidden; }
main {
  position:relative; display:grid; place-items:center; isolation:isolate;
  background:radial-gradient(ellipse at 50% 48%,#33203e 0%,#513066 48%,#765587 100%);
}
.wordmark { width:min(77.5vw,156.4vh); height:auto; position:absolute; top:48%; transform:translateY(-50%); }
canvas { position:absolute;inset:0;min-width:0;min-height:0;width:100%;height:100%;display:block;visibility:hidden; }
.ready canvas { visibility:visible; }
.ready .wordmark { display:none; }
button {
  appearance:none; position:absolute; right:clamp(9px,2vw,32px); bottom:clamp(9px,2vw,26px);
  width:44px;height:44px; padding:0; border:1px solid rgba(255,255,255,.42); border-radius:50%;
  background:rgba(24,20,36,.32); color:#fffaf4; display:grid; place-items:center;cursor:pointer;
}
button[hidden] { display:none; }
button:hover { background:rgba(24,20,36,.7);border-color:#fffaf4; }
button:focus-visible { outline:2px solid #fffaf4;outline-offset:3px; }
button i { width:10px;height:12px;border-inline:3px solid currentColor; }
button[data-paused="true"] i { width:0;height:0;border:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px; }