html, body { cursor:none; }

#reticle {
  position:fixed;
  left:50%;
  top:50%;
  width:36px;
  height:36px;
  margin:-18px 0 0 -18px;
  z-index:24;
  pointer-events:none;
  color:rgba(241,247,248,.88);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.78));
  transition:opacity .12s ease, transform .16s ease, color .16s ease;
}

#reticle::before,
#reticle::after {
  content:"";
  position:absolute;
  left:10px;
  width:16px;
  height:1.5px;
  border-radius:1px;
  background:rgba(187,235,207,.98);
  opacity:0;
  transition:opacity .12s ease, transform .16s ease;
}
#reticle::before { top:10px; transform:translateY(2px); }
#reticle::after { bottom:10px; transform:translateY(-2px); }


#reticle .dot {
  position:absolute;
  left:16px;
  top:16px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  opacity:.56;
  transition:opacity .12s ease, transform .16s ease;
}

#reticle .corner,
#reticle .chevron { position:absolute; opacity:0; transition:opacity .12s ease, transform .16s ease; }

#reticle .corner { width:7px; height:7px; color:rgba(255,218,143,.98); border-color:currentColor; }
#reticle .corner.nw { left:3px; top:3px; border-left:1.5px solid; border-top:1.5px solid; }
#reticle .corner.ne { right:3px; top:3px; border-right:1.5px solid; border-top:1.5px solid; }
#reticle .corner.sw { left:3px; bottom:3px; border-left:1.5px solid; border-bottom:1.5px solid; }
#reticle .corner.se { right:3px; bottom:3px; border-right:1.5px solid; border-bottom:1.5px solid; }

#reticle .chevron { top:12px; width:10px; height:10px; color:rgba(120,225,255,.98); }
#reticle .chevron.left { left:3px; border-right:2px solid; border-bottom:2px solid; transform:rotate(-45deg); }
#reticle .chevron.right { right:3px; border-left:2px solid; border-top:2px solid; transform:rotate(-45deg); }


body[data-reticle="record"] #reticle .corner,
body[data-reticle="record-enter"] #reticle .corner,
body[data-reticle="record-outward"] #reticle .corner,
body[data-reticle="record-section"] #reticle .corner { opacity:1; }

body[data-reticle="section"] #reticle::before,
body[data-reticle="section"] #reticle::after,
body[data-reticle="record-section"] #reticle::before,
body[data-reticle="record-section"] #reticle::after {
  opacity:1;
  transform:translateY(0);
}

body[data-reticle="enter"] #reticle .chevron,
body[data-reticle="record-enter"] #reticle .chevron,
body[data-reticle="enter-ready"] #reticle .chevron,
body[data-reticle="record-enter-ready"] #reticle .chevron { opacity:1; }

body[data-reticle="record-enter-ready"] #reticle .corner { opacity:1; }
body[data-reticle="enter-ready"] #reticle .chevron,
body[data-reticle="record-enter-ready"] #reticle .chevron {
  filter:drop-shadow(0 0 4px rgba(80,220,255,.9));
}
body[data-reticle="enter-ready"] #reticle .dot,
body[data-reticle="record-enter-ready"] #reticle .dot {
  background:rgba(120,225,255,1);
  box-shadow:0 0 0 3px rgba(120,225,255,.24);
  opacity:1;
  transform:scale(.8);
}

body[data-reticle="outward"] #reticle .chevron,
body[data-reticle="record-outward"] #reticle .chevron { opacity:1; }
body[data-reticle="outward"] #reticle .chevron.left,
body[data-reticle="record-outward"] #reticle .chevron.left { left:4px; transform:rotate(135deg); }
body[data-reticle="outward"] #reticle .chevron.right,
body[data-reticle="record-outward"] #reticle .chevron.right { right:4px; transform:rotate(135deg); }


body[data-reticle="record"] #reticle .dot,
body[data-reticle^="record-"] #reticle .dot,
body[data-reticle="enter"] #reticle .dot,
body[data-reticle="enter-ready"] #reticle .dot,
body[data-reticle="outward"] #reticle .dot { opacity:.92; transform:scale(.72); }

body[data-reticle="section"] #reticle .dot,
body[data-reticle="record-section"] #reticle .dot {
  background:rgba(187,235,207,1);
  opacity:1;
  transform:scale(.68);
}

body[data-reticle="enter-ready"] #reticle .dot,
body[data-reticle="record-enter-ready"] #reticle .dot {
  opacity:1;
  transform:scale(.8);
}

body[data-reticle="hidden"] #reticle,
body[data-lens-mode]:not([data-lens-mode=""]) #reticle,
body:has(#journal[data-open="1"]) #reticle { opacity:0; transform:scale(.86); }

@media (max-width:600px) {
  #reticle { width:34px; height:34px; margin:-17px 0 0 -17px; }
  #reticle .dot { left:15px; top:15px; }
}