:root { color-scheme: dark; background: #03040a; }
* { box-sizing: border-box; }
html, body, main { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: #03040a; }
body { overscroll-behavior: none; cursor: crosshair; }
main, canvas, .grain { position: fixed; inset: 0; }
canvas { width: 100%; height: 100%; touch-action: none; }
.grain { pointer-events: none; opacity: .18; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.reticle { position: fixed; inset: 20px; pointer-events: none; opacity: .65; }
.reticle i { position: absolute; width: 22px; height: 22px; border-color: rgba(141, 234, 255, .8); border-style: solid; }
.reticle i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.reticle i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.reticle i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.reticle i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
@media (max-width: 640px) { .reticle { inset: 13px; } .reticle i { width: 15px; height: 15px; } }
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }