.nav-intro{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:12px;letter-spacing:.02em;
  padding:6px 12px;border-radius:6px;cursor:pointer;
  background:transparent;border:1px solid rgba(148,163,184,.34);
  color:var(--dim,#94a3b8);transition:background .18s,border-color .18s,color .18s;
}
.nav-intro:hover{background:rgba(56,189,248,.1);border-color:var(--blue,#38bdf8);color:var(--blue,#38bdf8)}
.nav-intro:focus-visible{outline:2px solid var(--blue,#38bdf8);outline-offset:2px}
.nav-intro .nav-intro-glyph{
  width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;
  border-color:transparent transparent transparent currentColor;
}

.intro-modal{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;padding:32px;
  background:rgba(2,6,23,.88);backdrop-filter:blur(3px);
}
.intro-modal[open],.intro-modal.is-open{display:flex}
.intro-modal-panel{
  width:min(1040px,100%);background:#0b1220;
  border:1px solid rgba(148,163,184,.22);border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:hidden;
}
.intro-modal-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 14px;border-bottom:1px solid rgba(148,163,184,.16);
}
.intro-modal-title{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim,#94a3b8)}
.intro-modal-tools{display:flex;align-items:center;gap:10px}
.intro-modal-tools label{font-size:11px;color:var(--dim,#94a3b8)}
.intro-modal-tools select{
  font:inherit;font-size:12px;padding:4px 8px;border-radius:5px;
  background:#0f172a;color:#e2e8f0;border:1px solid rgba(148,163,184,.3);
}
.intro-modal-share{
  font:inherit;font-size:12px;line-height:1;cursor:pointer;
  padding:6px 10px;border-radius:5px;
  background:transparent;border:1px solid rgba(148,163,184,.3);color:var(--dim,#94a3b8);
}
.intro-modal-share:hover{border-color:var(--blue,#38bdf8);color:var(--blue,#38bdf8)}
.intro-modal-share:focus-visible{outline:2px solid var(--blue,#38bdf8);outline-offset:2px}
.intro-modal-share.is-done{border-color:var(--blue,#38bdf8);color:var(--blue,#38bdf8)}
.intro-modal-link{
  display:flex;align-items:center;gap:10px;
  margin:0;padding:9px 14px;
  border-top:1px solid rgba(148,163,184,.16);
}
.intro-modal-link label{font-size:11px;color:var(--dim,#94a3b8);white-space:nowrap}
.intro-modal-link input{
  font:inherit;font-size:12px;flex:1;min-width:0;padding:5px 8px;border-radius:5px;
  background:#0f172a;color:#e2e8f0;border:1px solid rgba(148,163,184,.3);
}
.intro-modal-close{
  font:inherit;font-size:16px;line-height:1;cursor:pointer;
  padding:5px 9px;border-radius:5px;
  background:transparent;border:1px solid rgba(148,163,184,.3);color:var(--dim,#94a3b8);
}
.intro-modal-close:hover{border-color:var(--blue,#38bdf8);color:var(--blue,#38bdf8)}
.intro-modal-close:focus-visible{outline:2px solid var(--blue,#38bdf8);outline-offset:2px}
.intro-modal video{display:block;width:100%;max-height:72vh;background:#000}
.intro-modal-note{
  margin:0;padding:9px 14px;font-size:11px;line-height:1.5;color:var(--dim,#94a3b8);
  border-top:1px solid rgba(148,163,184,.16);
}

@media (max-width:720px){
  .intro-modal{padding:12px}
  .intro-modal-bar{flex-wrap:wrap;gap:8px}
  .intro-modal video{max-height:56vh}
  .intro-modal-link{flex-wrap:wrap;gap:6px}
}