/* Lookout "porthole" nav chip - the site's main feature gets a bigger, glassy button you look *into*: Byte's
   conduit glyphs and sparkles twinkle behind the label (same palette as Lookout's own sky). Added 2026-10-18. */
a.bc-porthole { position: relative; overflow: hidden; isolation: isolate; z-index: 0; flex: none !important;
  padding: 9px 22px !important; font-size: 0.98rem !important; letter-spacing: 0.1em; text-transform: uppercase;
  color: #F2FFF6 !important; text-shadow: 0 0 6px rgba(0,0,0,.9), 0 1px 2px #000;
  border: 1px solid rgba(43,255,122,.75) !important; border-radius: 999px !important;
  background: rgba(4,12,8,.38) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 0 18px rgba(43,255,122,.28), 0 0 2px rgba(43,255,122,.9), inset 0 0 26px rgba(43,255,122,.10); }
a.bc-porthole:hover { box-shadow: 0 0 28px rgba(43,255,122,.45), 0 0 2px rgba(43,255,122,1), inset 0 0 30px rgba(43,255,122,.16); color: #fff !important; }
a.bc-porthole > canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
a.bc-porthole::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 50% 115%, rgba(43,255,122,.22), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%); }
a.bc-porthole .dot, a.bc-porthole > span:empty { display: none !important; }
@media (max-width: 520px) { a.bc-porthole { padding: 7px 16px !important; font-size: 0.86rem !important; } }