*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090803}body{font-family:Arial,Helvetica,sans-serif}main{position:relative;width:100%;height:100%;height:100dvh;isolation:isolate;touch-action:none;--x:50%;--y:48%;--radius:300px}canvas{position:absolute;inset:0;display:block;width:100%;height:100%}h1{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);margin:0;font-size:clamp(30px,11.7vw,200px);letter-spacing:-.055em;font-weight:900;color:#e8d46e;text-shadow:1px 1px #aa9145,2px 3px #756024,3px 5px #403110;mask-image:radial-gradient(circle var(--radius) at var(--x) var(--y),#000 20%,transparent 100%);white-space:nowrap;width:90%;text-align:center}main.ready h1,main.ready p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);mask-image:none}p{position:absolute;left:0;right:0;top:calc(50% + clamp(46px,7.3vw,125px));margin:0;text-align:center;color:#a89a65;font-size:clamp(12px,1.05vw,16px);font-weight:400;letter-spacing:.22em;pointer-events:none}#sonar-halo{position:absolute;left:var(--x);top:var(--y);width:calc(var(--radius)*2);height:calc(var(--radius)*2);transform:translate(-50%,-50%);border:1px solid #e5cf771c;border-radius:50%;background:radial-gradient(circle,#ead67e04 0%,#ead67e03 50%,transparent 72%);pointer-events:none}#sonar-halo:before,#sonar-halo:after{content:"";position:absolute;inset:0;border:1px solid #f0d56c48;border-radius:50%;animation:echo 3.2s linear infinite}#sonar-halo:after{animation-delay:-1.6s}@keyframes echo{from{transform:scale(.03);opacity:.6}to{transform:scale(1);opacity:0}}@media(prefers-reduced-motion:reduce){#sonar-halo:before,#sonar-halo:after{animation:none;transform:scale(.55);opacity:.2}}