@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}}


.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}}
/* Stops short of the sound icon and wraps on narrow screens instead of running under it. */
.caption{position:absolute;left:clamp(16px,3vw,40px);right:calc(clamp(16px,3vw,40px) + 48px);bottom:7%;margin:0;transform:translateY(50%);font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;color:#8e97a8;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.caption.on{opacity:.85;transition-delay:.9s}
@media(prefers-reduced-motion:reduce){.caption{transition:none}}
/* Outside <main>, so pressing it never counts as touching the artwork. */
.sound{position:fixed;right:clamp(16px,3vw,40px);bottom:max(16px,env(safe-area-inset-bottom));width:36px;height:36px;padding:8px;border:1px solid #273142;border-radius:2px;background:rgba(6,6,9,.55);color:#8e97a8;cursor:pointer;opacity:.7;transition:opacity .3s ease,color .3s ease}
.sound svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sound .speaker{fill:currentColor}
.sound .waves,.sound[aria-pressed="true"] .muted{display:none}
.sound[aria-pressed="true"] .waves{display:inline}
.sound:hover,.sound:focus-visible{opacity:1;color:#c3d4e7}
.sound:focus-visible{outline:1px solid #88b9ea;outline-offset:2px}
.sound[aria-pressed="true"]{color:#b9d3ee;border-color:#3b5170}
.sound[hidden]{display:none}