html.guide-lightbox-open{
  overflow:hidden;
}
.guide-lightbox__trigger{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  color:inherit;
  border:0;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
}
.guide-lightbox__trigger picture{
  display:block;
  width:100%;
  height:auto;
}
.guide-lightbox__trigger .guide-shot{
  transition:border-color .16s ease,box-shadow .16s ease,filter .16s ease;
}
.guide-lightbox__trigger:hover .guide-shot,
.guide-lightbox__trigger:focus-visible .guide-shot{
  border-color:var(--cyan-bright);
  box-shadow:0 0 20px rgba(67,196,239,.48);
  filter:brightness(1.08);
}
.guide-lightbox__trigger:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
}
.guide-lightbox{
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:clamp(10px,2vw,28px);
  color:var(--txt);
  border:0;
  background:rgba(1,5,9,.76);
  overflow:hidden;
}
.guide-lightbox[open]{
  display:grid;
  place-items:center;
}
.guide-lightbox::backdrop{
  background:rgba(0,3,7,.88);
  backdrop-filter:blur(5px);
}
.guide-lightbox__surface{
  position:relative;
  width:min(100%,1600px);
  height:min(100%,1050px);
  min-width:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  border:2px solid var(--cyan);
  border-radius:12px;
  background:linear-gradient(160deg,rgba(0,38,58,.97),rgba(1,13,22,.98) 55%,rgba(0,27,43,.98));
  box-shadow:0 0 34px rgba(67,196,239,.34),inset 0 0 18px rgba(67,196,239,.1);
  overflow:hidden;
}
.guide-lightbox__surface::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border:1px solid rgba(67,196,239,.38);
  border-radius:7px;
  pointer-events:none;
}
.guide-lightbox__header,
.guide-lightbox__stage,
.guide-lightbox__footer{
  position:relative;
  z-index:1;
}
.guide-lightbox__header{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px 12px 18px;
  border-bottom:1px solid rgba(67,196,239,.34);
  background:linear-gradient(90deg,rgba(0,54,82,.88),rgba(1,17,28,.88));
}
.guide-lightbox__title{
  min-width:0;
  flex:1;
  margin:0;
  color:#e9f8ff;
  font-family:var(--f-head);
  font-size:14px;
  letter-spacing:.05em;
  line-height:1.35;
}
.guide-lightbox__stage{
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  padding:12px;
  background:rgba(0,4,8,.72);
  overflow:hidden;
}
.guide-lightbox__image{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  border:1px solid rgba(67,196,239,.62);
  border-radius:7px;
  background:#001522;
  box-shadow:0 0 24px rgba(67,196,239,.2);
}
.guide-lightbox__control{
  display:grid;
  place-items:center;
  width:48px;
  min-width:48px;
  height:48px;
  padding:0;
  color:var(--cyan-bright);
  border:1px solid var(--cyan-mid);
  border-radius:6px;
  background:rgba(1,16,26,.9);
  box-shadow:0 0 14px rgba(67,196,239,.24);
  line-height:1;
  cursor:pointer;
}
.guide-lightbox__control svg{
  display:block;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.guide-lightbox__control:hover{
  color:#fff;
  border-color:var(--cyan-bright);
  background:rgba(0,49,72,.96);
}
.guide-lightbox__control:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
.guide-lightbox__close{
  width:44px;
  min-width:44px;
  height:44px;
}
.guide-lightbox__previous,
.guide-lightbox__next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}
.guide-lightbox__previous{ left:18px; }
.guide-lightbox__next{ right:18px; }
.guide-lightbox__footer{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:11px 18px 14px;
  border-top:1px solid rgba(67,196,239,.28);
  background:rgba(1,14,23,.96);
}
.guide-lightbox__caption{
  min-width:0;
  flex:1;
  margin:0;
  color:var(--txt-mute);
  font-size:11px;
  line-height:1.5;
}
.guide-lightbox__caption a{
  color:var(--cyan-soft);
}
.guide-lightbox__counter{
  flex:none;
  color:var(--gold-soft);
  font-size:11px;
  letter-spacing:.1em;
  line-height:1.5;
  text-transform:uppercase;
}
@media (max-width:600px){
  .guide-lightbox{
    padding:6px;
  }
  .guide-lightbox__surface{
    width:100%;
    height:100%;
    border-radius:8px;
  }
  .guide-lightbox__header{
    padding:10px 10px 10px 14px;
  }
  .guide-lightbox__title{
    font-size:11px;
  }
  .guide-lightbox__stage{
    padding:6px;
  }
  .guide-lightbox__previous{ left:8px; }
  .guide-lightbox__next{ right:8px; }
  .guide-lightbox__footer{
    padding:9px 12px 11px;
  }
  .guide-lightbox__caption{
    font-size:10px;
  }
}
@media (prefers-reduced-motion:reduce){
  .guide-lightbox__trigger .guide-shot{
    transition:none;
  }
}
@media (forced-colors:active){
  .guide-lightbox__surface,
  .guide-lightbox__image,
  .guide-lightbox__control{
    border:1px solid CanvasText;
  }
}