@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500&display=swap');
:root{color-scheme:dark;background:#060609;color:#edeef5;font-family:Arial,sans-serif}
*{box-sizing:border-box}body{margin:0}main{position:relative;height:100svh;min-height:360px;overflow:hidden;isolation:isolate}
.art{position:absolute;inset:0;z-index:-1}canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
canvas{opacity:0;transition:opacity .7s ease}.art.ready canvas{opacity:1}@media(prefers-reduced-motion:reduce){canvas{transition:none}}

.status{font-weight:400;position:absolute;left:44px;bottom:max(38px,env(safe-area-inset-bottom));margin:0;font-family:monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#9694ab}
@media(max-width:600px){.status{left:24px;bottom:34px}}

.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:180px;text-align:center;color:#969eae;transition:opacity .4s ease}
.loading p{font:10px monospace;letter-spacing:.18em;text-transform:uppercase;margin:0 0 16px}
.loading progress{display:block;width:100%;height:2px;border:0;border-radius:2px;overflow:hidden;appearance:none;background:#18202c;color:#88b9ea}
.loading progress::-webkit-progress-bar{background:#18202c}.loading progress::-webkit-progress-value{background:#88b9ea;transition:width .25s ease}.loading progress::-moz-progress-bar{background:#88b9ea}
.loading.done{opacity:0;pointer-events:none}.loading[hidden],.loading button[hidden]{display:none}
.loading button{margin-top:18px;padding:8px 12px;border:1px solid #34465e;background:transparent;color:#c3d4e7;font:11px monospace;cursor:pointer}
@media(prefers-reduced-motion:reduce){.loading,.loading progress::-webkit-progress-value{transition:none}}